UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 12.4 kB
{"version":3,"file":"tabs.mjs","sources":["../../../../../../packages/components/tabs/src/tabs.tsx"],"sourcesContent":["import {\n computed,\n defineComponent,\n nextTick,\n provide,\n reactive,\n ref,\n renderSlot,\n watch,\n} from 'vue'\nimport {\n buildProps,\n definePropType,\n isNumber,\n isString,\n isUndefined,\n} from '@element-plus/utils'\nimport { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport ElIcon from '@element-plus/components/icon'\nimport { Plus } from '@element-plus/icons-vue'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport { useDeprecated, useNamespace } from '@element-plus/hooks'\nimport TabNav from './tab-nav'\nimport type { TabNavInstance } from './tab-nav'\nimport type { TabsPaneContext } from '@element-plus/tokens'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type { Awaitable } from '@element-plus/utils'\n\nexport type TabPanelName = string | number\n\nexport const tabsProps = buildProps({\n type: {\n type: String,\n values: ['card', 'border-card', ''],\n default: '',\n },\n activeName: {\n type: [String, Number],\n },\n closable: Boolean,\n addable: Boolean,\n modelValue: {\n type: [String, Number],\n },\n editable: Boolean,\n tabPosition: {\n type: String,\n values: ['top', 'right', 'bottom', 'left'],\n default: 'top',\n },\n beforeLeave: {\n type: definePropType<\n (\n newName: TabPanelName,\n oldName: TabPanelName\n ) => Awaitable<void | boolean>\n >(Function),\n default: () => true,\n },\n stretch: Boolean,\n} as const)\nexport type TabsProps = ExtractPropTypes<typeof tabsProps>\n\nconst isPanelName = (value: unknown): value is string | number =>\n isString(value) || isNumber(value)\n\nexport const tabsEmits = {\n [UPDATE_MODEL_EVENT]: (name: TabPanelName) => isPanelName(name),\n 'tab-click': (pane: TabsPaneContext, ev: Event) => ev instanceof Event,\n 'tab-change': (name: TabPanelName) => isPanelName(name),\n edit: (paneName: TabPanelName | undefined, action: 'remove' | 'add') =>\n ['remove', 'add'].includes(action),\n 'tab-remove': (name: TabPanelName) => isPanelName(name),\n 'tab-add': () => true,\n}\nexport type TabsEmits = typeof tabsEmits\n\nexport default defineComponent({\n name: 'ElTabs',\n\n props: tabsProps,\n emits: tabsEmits,\n\n setup(props, { emit, slots, expose }) {\n const ns = useNamespace('tabs')\n\n const nav$ = ref<TabNavInstance>()\n const panes = reactive<Record<number, TabsPaneContext>>({})\n const currentName = ref<TabPanelName>(\n props.modelValue ?? props.activeName ?? '0'\n )\n\n const changeCurrentName = (value: TabPanelName) => {\n currentName.value = value\n emit(UPDATE_MODEL_EVENT, value)\n emit('tab-change', value)\n }\n\n const setCurrentName = async (value?: TabPanelName) => {\n // should do nothing.\n if (currentName.value === value || isUndefined(value)) return\n\n try {\n const canLeave = await props.beforeLeave?.(value, currentName.value)\n if (canLeave !== false) {\n changeCurrentName(value)\n\n // call exposed function, Vue doesn't support expose in typescript yet.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n nav$.value?.removeFocus?.()\n }\n } catch {}\n }\n\n const handleTabClick = (\n tab: TabsPaneContext,\n tabName: TabPanelName,\n event: Event\n ) => {\n if (tab.props.disabled) return\n setCurrentName(tabName)\n emit('tab-click', tab, event)\n }\n\n const handleTabRemove = (pane: TabsPaneContext, ev: Event) => {\n if (pane.props.disabled || isUndefined(pane.props.name)) return\n ev.stopPropagation()\n emit('edit', pane.props.name, 'remove')\n emit('tab-remove', pane.props.name)\n }\n\n const handleTabAdd = () => {\n emit('edit', undefined, 'add')\n emit('tab-add')\n }\n\n useDeprecated(\n {\n from: '\"activeName\"',\n replacement: '\"model-value\" or \"v-model\"',\n scope: 'ElTabs',\n version: '2.3.0',\n ref: 'https://element-plus.org/en-US/component/tabs.html#attributes',\n type: 'Attribute',\n },\n computed(() => !!props.activeName)\n )\n\n watch(\n () => props.activeName,\n (modelValue) => setCurrentName(modelValue)\n )\n\n watch(\n () => props.modelValue,\n (modelValue) => setCurrentName(modelValue)\n )\n\n watch(currentName, async () => {\n await nextTick()\n // call exposed function, Vue doesn't support expose in typescript yet.\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-expect-error\n nav$.value?.scrollToActiveTab()\n })\n\n {\n const registerPane = (pane: TabsPaneContext) => (panes[pane.uid] = pane)\n const unregisterPane = (uid: number) => delete panes[uid]\n\n provide(tabsRootContextKey, {\n props,\n currentName,\n registerPane,\n unregisterPane,\n })\n }\n\n expose({\n currentName,\n })\n\n return () => {\n const newButton =\n props.editable || props.addable ? (\n <span\n class={ns.e('new-tab')}\n tabindex=\"0\"\n onClick={handleTabAdd}\n onKeydown={(ev: KeyboardEvent) => {\n if (ev.code === EVENT_CODE.enter) handleTabAdd()\n }}\n >\n <ElIcon class={ns.is('icon-plus')}>\n <Plus />\n </ElIcon>\n </span>\n ) : null\n\n const header = (\n <div class={[ns.e('header'), ns.is(props.tabPosition)]}>\n {newButton}\n <TabNav\n ref={nav$}\n currentName={currentName.value}\n editable={props.editable}\n type={props.type}\n panes={Object.values(panes)}\n stretch={props.stretch}\n onTabClick={handleTabClick}\n onTabRemove={handleTabRemove}\n />\n </div>\n )\n\n const panels = (\n <div class={ns.e('content')}>{renderSlot(slots, 'default')}</div>\n )\n\n return (\n <div\n class={[\n ns.b(),\n ns.m(props.tabPosition),\n {\n [ns.m('card')]: props.type === 'card',\n [ns.m('border-card')]: props.type === 'border-card',\n },\n ]}\n >\n {...props.tabPosition !== 'bottom'\n ? [header, panels]\n : [panels, header]}\n </div>\n )\n }\n },\n})\n"],"names":["tabsProps","buildProps","type","String","values","default","activeName","Number","closable","Boolean","addable","modelValue","editable","tabPosition","beforeLeave","definePropType","Function","stretch","tabsEmits","name","ev","edit","action","props","emits","slots","expose","ns","useNamespace","nav$","panes","changeCurrentName","value","currentName","emit","UPDATE_MODEL_EVENT","setCurrentName","handleTabClick","event","handleTabRemove","pane","disabled","handleTabAdd","useDeprecated","from","replacement","scope","version","ref","watch","nextTick","registerPane","unregisterPane","uid","_createVNode","newButton","e","EVENT_CODE","is"],"mappings":"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"}