Merge pull request #3281 from nocodb/fix/tab-close

fix(gui-v2): close correct tab on `x` icon click

packages/nc-gui-v2/components.d.ts

@@ -122,6 +122,7 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDoubleLeft: typeof import('~icons/mdi/chevron-double-left')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
+    MdiChevronLeft: typeof import('~icons/mdi/chevron-left')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
-import { TabMetaInj, provide, useSidebar, useTabs } from '#imports'
+import { TabType } from '~/composables'
-import { TabType, useGlobal } from '~/composables'
+import { TabMetaInj, provide, useGlobal, useSidebar, useTabs } from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
@@ -24,6 +24,10 @@ const icon = (tab: TabItem) => {
 }
 
 const { isOpen, toggle } = useSidebar()
+
+function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
+  if (action === 'remove') closeTab(targetKey)
+}
 </script>
 
 <template>
@@ -41,8 +45,8 @@ const { isOpen, toggle } = useSidebar()
           />
         </div>
 
-        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab(activeTabIndex)">
+        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="onEdit">
-          <a-tab-pane v-for="(tab, i) in tabs" :key="i">
+          <a-tab-pane v-for="(tab, i) of tabs" :key="i">
             <template #tab>
               <div class="flex items-center gap-2">
                 <component :is="icon(tab)" class="text-sm" />