chore(gui-v2): cleanup typecheck issues

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

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
-import type { SelectOptionType } from 'nocodb-sdk'
-import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
+import { ActiveCellInj, ColumnInj, computed, h, inject, onMounted, ref, useEventListener, useProject, watch } from '#imports'
 import { EditModeInj } from '~/context'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -32,9 +31,9 @@ const isOpen = ref(false)
 const options = computed(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
-      ? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || []
+      ? (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
       : []
-    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+    for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }
     return opts
@@ -43,7 +42,7 @@ const options = computed(() => {
 })
 
 const vModel = computed({
-  get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el)?.title),
+  get: () => selectedIds.value.map((el) => options.value.find((op: any) => op.id === el)?.title),
   set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
 })
 
@@ -52,8 +51,8 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-            const opa = options.value.find((el: SelectOptionType) => el.title === a)
-            const opb = options.value.find((el: SelectOptionType) => el.title === b)
+            const opa = options.value.find((el: any) => el.title === a)
+            const opb = options.value.find((el: any) => el.title === b)
             if (opa && opb) {
               return opa.order - opb.order
             }
@@ -83,25 +82,21 @@ const handleClose = (e: MouseEvent) => {
 }
 
 onMounted(() => {
-  selectedIds.value = selectedTitles.value.map((el) => {
-    return options.value.find((op: SelectOptionType) => op.title === el).id
-  })
+  selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
 })
 
 useEventListener(document, 'click', handleClose)
 
 watch(
   () => modelValue,
-  (_n, _o) => {
-    selectedIds.value = selectedTitles.value.map((el) => {
-      return options.value.find((op: SelectOptionType) => op.title === el).id
-    })
+  () => {
+    selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
   },
 )
 
 watch(isOpen, (n, _o) => {
-  if (n === false) {
-    aselect.value.blur()
+  if (!n) {
+    aselect.value?.blur()
   }
 })
 </script>
@@ -128,10 +123,10 @@ watch(isOpen, (n, _o) => {
     </a-select-option>
     <template #tagRender="{ value: val, onClose }">
       <a-tag
-        v-if="options.find((el: SelectOptionType) => el.title === val)"
+        v-if="options.find((el) => el.title === val)"
         class="rounded-tag"
         :style="{ display: 'flex', alignItems: 'center' }"
-        :color="options.find((el: SelectOptionType) => el.title === val).color"
+        :color="options.find((el) => el.title === val).color"
         :closable="active && (vModel.length > 1 || !column?.rqd)"
         :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
         @close="onClose"

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

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

packages/nc-gui-v2/components/general/ColorPicker.vue

@@ -1,21 +1,22 @@
 <script lang="ts" setup>
 import { Chrome } from '@ckpack/vue-color'
 import { enumColor } from '@/utils'
+import { computed, ref, watch } from '#imports'
 
 interface Props {
   modelValue: string | any
   colors?: string[]
   rowSize?: number
-  advanced?: Boolean
-  pickButton?: Boolean
+  advanced?: boolean
+  pickButton?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => enumColor.light[0],
   colors: () => enumColor.light.concat(enumColor.dark),
-  rowSize: () => 10,
-  advanced: () => true,
-  pickButton: () => false,
+  rowSize: 10,
+  advanced: true,
+  pickButton: false,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -29,17 +30,12 @@ const vModel = computed({
 
 const picked = ref(props.modelValue || enumColor.light[0])
 
-const selectColor = (color: any) => {
+const selectColor = (color: Record<string, any>) => {
   picked.value = color.hex ? color.hex : color
   vModel.value = color.hex ? color.hex : color
 }
 
-const compare = (colorA: String, colorB: String) => {
-  if ((typeof colorA === 'string' || colorA instanceof String) && (typeof colorB === 'string' || colorB instanceof String)) {
-    return colorA.toLowerCase() === colorB.toLowerCase()
-  }
-  return false
-}
+const compare = (colorA: string, colorB: string) => colorA.toLowerCase() === colorB.toLowerCase()
 
 watch(picked, (n, _o) => {
   if (!props.pickButton) {

packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue

@@ -15,16 +15,14 @@ const columns = computed(() =>
     label: c.title,
   })),
 )
+
+function onPressEnter() {
+  reloadData.trigger()
+}
 </script>
 
 <template>
-  <a-input
-    v-model:value="search.query"
-    size="small"
-    class="max-w-[200px]"
-    placeholder="Filter query"
-    @press-enter="reloadData.trigger(null)"
-  >
+  <a-input v-model:value="search.query" size="small" class="max-w-[200px]" placeholder="Filter query" @press-enter="onPressEnter">
     <template #addonBefore>
       <div class="flex align-center relative" @click="isDropdownOpen = true">
         <MdiMagnify class="text-grey" />

packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue

@@ -3,6 +3,7 @@ import HTTPSnippet from 'httpsnippet'
 import { useClipboard } from '@vueuse/core'
 import { message } from 'ant-design-vue'
 import { ActiveViewInj, MetaInj } from '~/context'
+import { inject, useGlobal, useProject, useSmartsheetStoreOrThrow, useVModel, useViewData } from '#imports'
 
 const props = defineProps<Props>()
 
@@ -13,11 +14,17 @@ interface Props {
 }
 
 const { project } = $(useProject())
+
 const { appInfo, token } = $(useGlobal())
-const meta = $(inject(MetaInj))
-const view = $(inject(ActiveViewInj))
+
+const meta = $(inject(MetaInj)!)
+
+const view = $(inject(ActiveViewInj)!)
+
 const { xWhere } = useSmartsheetStoreOrThrow()
-const { queryParams } = $(useViewData(meta, view as any, xWhere))
+
+const { queryParams } = $(useViewData($$(meta), view as any, xWhere))
+
 const { copy } = useClipboard()
 
 let vModel = $(useVModel(props, 'modelValue', emits))

packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useLTARStoreOrThrow } from '#imports'
+import { inject, ref, useLTARStoreOrThrow } from '#imports'
 import { ActiveCellInj, EditModeInj, IsFormInj } from '~/context'
 
 interface Props {
@@ -11,13 +11,13 @@ const { value, item } = defineProps<Props>()
 
 const emit = defineEmits(['unlink'])
 
-const { relatedTableMeta } = useLTARStoreOrThrow()
+const { relatedTableMeta } = useLTARStoreOrThrow()!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
-const isForm = inject(IsFormInj)
+const isForm = inject(IsFormInj)!
 
 const expandedFormDlg = ref(false)
 </script>
@@ -29,6 +29,7 @@ const expandedFormDlg = ref(false)
     @click="expandedFormDlg = true"
   >
     <span class="name">{{ value }}</span>
+
     <div v-show="active || isForm" v-if="editEnabled" class="flex align-center">
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>

packages/nc-gui-v2/composables/useSmartsheetRowStore.ts

@@ -2,9 +2,8 @@ import { message } from 'ant-design-vue'
 import { UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType, RelationTypes, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useNuxtApp } from '#app'
-import { useInjectionState, useMetas, useProject, useVirtualCell } from '#imports'
-import type { Row } from '~/composables/useViewData'
+import type { Row } from './useViewData'
+import { useInjectionState, useMetas, useNuxtApp, useProject, useVirtualCell } from '#imports'
 import { NOCO } from '~/lib'
 import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
@@ -47,7 +46,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
         project.value.title as string,
         meta.value.title as string,
         rowId,
-        type,
+        type as 'mm' | 'hm',
         column.title as string,
         relatedRowId,
       )
@@ -69,14 +68,19 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
       if (isHm || isMm) {
         const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
         for (const relatedRow of relatedRows) {
-          await linkRecord(id, extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]), column, colOptions.type)
+          await linkRecord(
+            id,
+            extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]),
+            column,
+            colOptions.type as RelationTypes,
+          )
         }
       } else if (isBt && state?.value?.[column.title!]) {
         await linkRecord(
           id,
           extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
           column,
-          colOptions.type,
+          colOptions.type as RelationTypes,
         )
       }
     }

packages/nc-gui-v2/composables/useViewData.ts

@@ -1,8 +1,7 @@
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { useNuxtApp } from '#app'
-import { useProject } from '#imports'
+import { ref, useNuxtApp, useProject } from '#imports'
 import { NOCO } from '~/lib'
 import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 

packages/nc-gui-v2/httpsnippet-shims.d.ts

@@ -0,0 +1,3 @@
+declare module 'httpsnippet' {
+  export default new ((): any => {})()
+}

packages/nc-gui-v2/vue-color-shims.d.ts

@@ -1,4 +1,5 @@
 declare module '@ckpack/vue-color' {
   import type { Component } from '@vue/runtime-core'
   const Sketch: Component
+  const Chrome: Component
 }