Browse Source

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

fix(gui-v2): close correct tab on `x` icon click
pull/3285/head
Raju Udava 2 years ago committed by GitHub
parent
commit
cbd4e34d5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 1
      packages/nc-gui-v2/components.d.ts
  2. 12
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

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

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

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

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { TabItem } from '~/composables' 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 MdiAirTableIcon from '~icons/mdi/table-large'
import MdiView from '~icons/mdi/eye-circle-outline' import MdiView from '~icons/mdi/eye-circle-outline'
import MdiAccountGroup from '~icons/mdi/account-group' import MdiAccountGroup from '~icons/mdi/account-group'
@ -24,6 +24,10 @@ const icon = (tab: TabItem) => {
} }
const { isOpen, toggle } = useSidebar() const { isOpen, toggle } = useSidebar()
function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
if (action === 'remove') closeTab(targetKey)
}
</script> </script>
<template> <template>
@ -41,8 +45,8 @@ const { isOpen, toggle } = useSidebar()
/> />
</div> </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> <template #tab>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<component :is="icon(tab)" class="text-sm" /> <component :is="icon(tab)" class="text-sm" />

Loading…
Cancel
Save