chore(gui-v2): fix type issues

packages/nc-gui-v2/components/cell/attachment/utils.ts

@@ -141,7 +141,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       editEnabled,
       isLoading,
       api,
-      open,
+      open: () => open(),
       onDrop,
       modalVisible,
       FileIcon,
@@ -151,5 +151,5 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       selectedImage,
     }
   },
-  'attachmentCell',
+  'useAttachmentCell',
 )

packages/nc-gui-v2/components/smartsheet/Pagination.vue

@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, inject } from '#imports'
 import { ChangePageInj, PaginationDataInj } from '~/context'
-import MdiKeyboardIcon from '~icons/mdi/keyboard-return'
 
-const paginatedData = inject(PaginationDataInj)
+const paginatedData = inject(PaginationDataInj)!
 
-const changePage = inject(ChangePageInj)
+const changePage = inject(ChangePageInj)!
 
-const count = computed(() => paginatedData?.value?.totalRows ?? Infinity)
+const count = computed(() => paginatedData.value?.totalRows ?? Infinity)
 
-const size = computed(() => paginatedData?.value?.pageSize ?? 25)
+const size = computed(() => paginatedData.value?.pageSize ?? 25)
 
 const page = computed({
   get: () => paginatedData?.value?.page ?? 1,
@@ -39,7 +38,7 @@ const page = computed({
       <span class="text-xs" style="white-space: nowrap"> Change page:</span>
       <a-input :value="page" size="small" class="ml-1 !text-xs" type="number" @keydown.enter="changePage(page)">
         <template #suffix>
-          <MdiKeyboardIcon class="mt-1" @click="changePage(page)" />
+          <MdiKeyboardReturn class="mt-1" @click="changePage(page)" />
         </template>
       </a-input>
     </div>
@@ -50,8 +49,7 @@ const page = computed({
 
 <style scoped>
 :deep(.ant-pagination-item a) {
-  line-height: 21px !important;
-  @apply text-sm;
+  @apply text-sm !leading-[21px];
 }
 :deep(.ant-pagination-item:not(.ant-pagination-item-active) a) {
   line-height: 21px !important;

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

@@ -10,9 +10,12 @@ const { metas, getMeta } = useMetas()
 provide(ReadonlyInj, true)
 
 const column = inject(ColumnInj)! as Ref<ColumnType & { colOptions: LookupType }>
+
 const meta = inject(MetaInj)
+
 const value = inject(CellValueInj)
-const arrValue = computed(() => (Array.isArray(value?.value) ? value?.value : [value?.value]))
+
+const arrValue = computed(() => (Array.isArray(value?.value) ? value?.value : [value?.value]) ?? [])
 
 const relationColumn = meta?.value.columns?.find((c) => c.id === column.value.colOptions?.fk_relation_column_id) as ColumnType & {
   colOptions: LinkToAnotherRecordType
@@ -22,7 +25,7 @@ await getMeta(relationColumn.colOptions.fk_related_model_id!)
 
 const lookupTableMeta = computed(() => metas.value[relationColumn.colOptions.fk_related_model_id!])
 
-const lookupColumn = computed(
+const lookupColumn = computed<any>(
   () =>
     lookupTableMeta.value.columns?.find(
       (c: Record<string, any>) => c.id === column.value.colOptions?.fk_lookup_column_id,
@@ -58,7 +61,7 @@ const lookupColumnMetaProps = useColumn(lookupColumn)
       <template v-else>
         <!-- For attachment cell avoid adding chip style -->
         <div
-          v-for="(v, i) in arrValue"
+          v-for="(v, i) of arrValue"
           :key="i"
           :class="{ 'bg-gray-100 px-2 rounded-full': !lookupColumnMetaProps.isAttachment }"
         >

packages/nc-gui-v2/components/webhook/List.vue

@@ -4,13 +4,13 @@ import { MetaInj } from '~/context'
 import { inject, onMounted, ref, useNuxtApp } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
 
-const emit = defineEmits(['edit'])
+const emit = defineEmits(['edit', 'add'])
 
 const { $api, $e } = useNuxtApp()
 
 const hooks = ref<Record<string, any>[]>([])
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj)!
 
 async function loadHooksList() {
   try {

packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

@@ -9,7 +9,6 @@ import MdiCsvIcon from '~icons/mdi/file-document-outline'
 import MdiExcelIcon from '~icons/mdi/file-excel'
 import MdiJSONIcon from '~icons/mdi/code-json'
 import MdiAirTableIcon from '~icons/mdi/table-large'
-import MdiRequestDataSourceIcon from '~icons/mdi/open-in-new'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
@@ -46,7 +45,7 @@ const icon = (tab: TabItem) => {
   <div class="h-full w-full nc-container pt-[9px]">
     <div class="h-full w-full flex flex-col">
       <div>
-        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab">
+        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab(activeTabIndex)">
           <a-tab-pane v-for="(tab, i) in tabs" :key="i">
             <template #tab>
               <div class="flex align-center gap-2">
@@ -65,15 +64,17 @@ const icon = (tab: TabItem) => {
                     Add / Import
                   </div>
                 </template>
+
                 <a-menu-item-group v-if="isUIAllowed('addTable')">
                   <a-menu-item key="add-new-table" v-t="['a:actions:create-table']" @click="tableCreateDialog = true">
                     <span class="flex items-center gap-2">
-                      <MdiTableIcon class="text-primary" />
+                      <MdiTable class="text-primary" />
                       <!-- Add new table -->
                       {{ $t('tooltip.addTable') }}
                     </span>
                   </a-menu-item>
                 </a-menu-item-group>
+
                 <a-menu-item-group title="QUICK IMPORT FROM">
                   <a-menu-item
                     v-if="isUIAllowed('airtableImport')"
@@ -82,7 +83,7 @@ const icon = (tab: TabItem) => {
                     @click="airtableImportDialog = true"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiAirTableIcon class="text-primary" />
+                      <MdiTableLarge class="text-primary" />
                       <!-- TODO: i18n -->
                       Airtable
                     </span>
@@ -94,11 +95,12 @@ const icon = (tab: TabItem) => {
                     @click="openQuickImportDialog('csv')"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiCsvIcon class="text-primary" />
+                      <MdiFileDocumentOutline class="text-primary" />
                       <!-- TODO: i18n -->
                       CSV file
                     </span>
                   </a-menu-item>
+
                   <a-menu-item
                     v-if="isUIAllowed('jsonImport')"
                     key="quick-import-json"
@@ -106,11 +108,12 @@ const icon = (tab: TabItem) => {
                     @click="openQuickImportDialog('json')"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiJSONIcon class="text-primary" />
+                      <MdiCodeJson class="text-primary" />
                       <!-- TODO: i18n -->
                       JSON file
                     </span>
                   </a-menu-item>
+
                   <a-menu-item
                     v-if="isUIAllowed('excelImport')"
                     key="quick-import-excel"
@@ -118,13 +121,15 @@ const icon = (tab: TabItem) => {
                     @click="openQuickImportDialog('excel')"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiExcelIcon class="text-primary" />
+                      <MdiFileExcel class="text-primary" />
                       <!-- TODO: i18n -->
                       Microsoft Excel
                     </span>
                   </a-menu-item>
                 </a-menu-item-group>
-                <a-divider class="ma-0 mb-2" />
+
+                <a-menu-divider class="ma-0 mb-2" />
+
                 <a-menu-item
                   v-if="isUIAllowed('importRequest')"
                   key="add-new-table"
@@ -133,7 +138,7 @@ const icon = (tab: TabItem) => {
                 >
                   <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank" class="prose-sm pa-0">
                     <span class="flex items-center gap-2">
-                      <MdiRequestDataSourceIcon class="text-primary" />
+                      <MdiOpenInNew class="text-primary" />
                       <!-- TODO: i18n -->
                       Request a data source you need?
                     </span>
@@ -150,7 +155,9 @@ const icon = (tab: TabItem) => {
     </div>
 
     <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
+
     <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" :import-type="importType" />
+
     <DlgAirtableImport v-if="airtableImportDialog" v-model="airtableImportDialog" />
   </div>
 </template>

packages/nc-gui-v2/pages/index/index.vue

@@ -1,15 +1,8 @@
 <script lang="ts" setup>
 import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
-import { navigateTo } from '#app'
-import { computed, onMounted, ref, useApi, useNuxtApp, useSidebar } from '#imports'
+import { computed, navigateTo, onMounted, ref, useApi, useNuxtApp, useSidebar } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
-import MdiDeleteOutline from '~icons/mdi/delete-outline'
-import MdiEditOutline from '~icons/mdi/edit-outline'
-import MdiRefresh from '~icons/mdi/refresh'
-import MdiMenuDown from '~icons/mdi/menu-down'
-import MdiPlus from '~icons/mdi/plus'
-import MdiDatabaseOutline from '~icons/mdi/database-outline'
 
 const { $e } = useNuxtApp()
 
@@ -64,7 +57,7 @@ onMounted(() => {
     <a-row>
       <a-col :span="8"></a-col>
       <a-col :span="8" class="!bg-red">
-        <a-card class="mx-auto mt-10 !max-w-[600px] shadow-lg">
+        <a-card :loading="isLoading" class="mx-auto mt-10 !max-w-[600px] shadow-lg">
           <h1 class="text-center text-4xl pa-2 nc-project-page-title flex align-center justify-center gap-2 text-gray-600">
             <!-- My Projects -->
             <b>{{ $t('title.myProject') }}</b>