chore(gui-v2): revert casting to any instead of select options type

packages/nc-gui-v2/components/cell/MultiSelect.vue

@@ -1,11 +1,23 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
-import { ActiveCellInj, ColumnInj, computed, h, inject, onMounted, ref, useEventListener, useProject, watch } from '#imports'
+import type { SelectOptionsType } from 'nocodb-sdk'
-import { EditModeInj } from '~/context'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  EditModeInj,
+  computed,
+  h,
+  inject,
+  onMounted,
+  ref,
+  useEventListener,
+  useProject,
+  watch,
+} from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
-  modelValue?: string | string[] | undefined
+  modelValue?: string | string[]
 }
 
 const { modelValue } = defineProps<Props>()
@@ -14,11 +26,9 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj)!
 
-// const isForm = inject<boolean>('isForm', false)
+const editEnabled = inject(EditModeInj)!
-
-const editEnabled = inject(EditModeInj)
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -28,7 +38,7 @@ const aselect = ref<typeof AntSelect>()
 
 const isOpen = ref(false)
 
-const options = computed(() => {
+const options = computed<SelectOptionsType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
@@ -42,7 +52,7 @@ const options = computed(() => {
 })
 
 const vModel = computed({
-  get: () => selectedIds.value.map((el) => options.value.find((op: any) => op.id === el)?.title),
+  get: () => selectedIds.value.map((el) => options.value.find((op) => op.id === el)?.title),
   set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
 })
 
@@ -51,10 +61,10 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-            const opa = options.value.find((el: any) => el.title === a)
+            const opa = options.value.find((el) => el.title === a)
-            const opb = options.value.find((el: any) => el.title === b)
+            const opb = options.value.find((el) => el.title === b)
             if (opa && opb) {
-              return opa.order - opb.order
+              return opa.order! - opb.order!
             }
             return 0
           })
@@ -82,7 +92,14 @@ const handleClose = (e: MouseEvent) => {
 }
 
 onMounted(() => {
-  selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
+  selectedIds.value = selectedTitles.value.flatMap((el) => {
+    const item = options.value.find((op) => op.title === el)?.id
+    if (item) {
+      return [item]
+    }
+
+    return []
+  })
 })
 
 useEventListener(document, 'click', handleClose)
@@ -90,14 +107,19 @@ useEventListener(document, 'click', handleClose)
 watch(
   () => modelValue,
   () => {
-    selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
+    selectedIds.value = selectedIds.value = selectedTitles.value.flatMap((el) => {
+      const item = options.value.find((op) => op.title === el)?.id
+      if (item) {
+        return [item]
+      }
+
+      return []
+    })
   },
 )
 
 watch(isOpen, (n, _o) => {
-  if (!n) {
+  if (!n) aselect.value?.$el.blur()
-    aselect.value?.blur()
-  }
 })
 </script>
 

packages/nc-gui-v2/components/cell/SingleSelect.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
-import { ActiveCellInj, ColumnInj, computed, inject, ref, useEventListener, watch } from '#imports'
+import type { SelectOptionsType } from 'nocodb-sdk'
-import { EditModeInj } from '~/context'
+import { ActiveCellInj, ColumnInj, EditModeInj, computed, inject, ref, useEventListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | undefined
@@ -11,9 +11,9 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -26,11 +26,11 @@ const vModel = computed({
   set: (val) => emit('update:modelValue', val || null),
 })
 
-const options = computed(() => {
+const options = computed<SelectOptionsType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? // todo: fix colOptions type, options does not exist as a property
-        (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
+        (column.value.colOptions as any).options.filter((el: SelectOptionsType) => el.title !== '') || []
       : []
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
@@ -59,9 +59,7 @@ const handleClose = (e: MouseEvent) => {
 useEventListener(document, 'click', handleClose)
 
 watch(isOpen, (n, _o) => {
-  if (!n) {
+  if (!n) aselect.value?.$el.blur()
-    aselect.value?.blur()
-  }
 })
 </script>