You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1 line
14 KiB

{"version":3,"file":"tabs.mjs","sources":["../../../../../../packages/components/tabs/src/tabs.ts"],"sourcesContent":["import {\n defineComponent,\n Fragment,\n getCurrentInstance,\n h,\n nextTick,\n onMounted,\n onUpdated,\n provide,\n ref,\n renderSlot,\n watch,\n} from 'vue'\nimport { isPromise, NOOP } from '@vue/shared'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport ElIcon from '@element-plus/components/icon'\nimport { Plus } from '@element-plus/icons-vue'\nimport { buildProps, definePropType } from '@element-plus/utils/props'\nimport { INPUT_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/utils/constants'\nimport { tabsRootContextKey } from '@element-plus/tokens'\nimport TabNav from './tab-nav'\nimport type { TabsPaneContext } from '@element-plus/tokens'\n\nimport type {\n Component,\n ComponentInternalInstance,\n VNode,\n ExtractPropTypes,\n Ref,\n} from 'vue'\n\nexport const tabsProps = buildProps({\n type: {\n type: String,\n values: ['card', 'border-card', ''],\n default: '',\n },\n activeName: {\n type: String,\n default: '',\n },\n closable: Boolean,\n addable: Boolean,\n modelValue: {\n type: String,\n default: '',\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 newTabName: string,\n oldTabName: string\n ) => void | boolean | Promise<void | boolean>\n >(Function),\n default: () => true,\n },\n stretch: Boolean,\n} as const)\nexport type TabsProps = ExtractPropTypes<typeof tabsProps>\n\nexport const tabsEmits = {\n [UPDATE_MODEL_EVENT]: (tabName: string) => typeof tabName === 'string',\n [INPUT_EVENT]: (tabName: string) => typeof tabName === 'string',\n 'tab-click': (pane: TabsPaneContext, ev: Event) => ev instanceof Event,\n edit: (paneName: string | null, action: 'remove' | 'add') =>\n action === 'remove' || action === 'add',\n 'tab-remove': (paneName: string) => typeof paneName === 'string',\n 'tab-add': () => true,\n}\nexport type TabsEmits = typeof tabsEmits\n\nconst getPaneInstanceFromSlot = (\n vnode: VNode,\n paneInstanceList: ComponentInternalInstance[] = []\n) => {\n const children = (vnode.children || []) as ArrayLike<VNode>\n Array.from(children).forEach((node) => {\n let type = node.type\n type = (type as Component).name || type\n if (type === 'ElTabPane' && node.component) {\n paneInstanceList.push(node.component)\n } else if (type === Fragment || type === 'template') {\n getPaneInstanceFromSlot(node, paneInstanceList)\n }\n })\n return paneInstanceList\n}\n\nexport default defineComponent({\n name: 'ElTabs',\n\n props: tabsProps,\n emits: tabsEmits,\n\n setup(props, { emit, slots, expose }) {\n const instance = getCurrentInstance()!\n const nav$ = ref<InstanceType<typeof TabNav>>()\n\n const panes: Ref<TabsPaneContext[]> = ref([])\n const currentName = ref(props.modelValue || props.activeName || '0')\n\n const paneStatesMap: Record<number, TabsPaneContext> = {}\n\n const updatePaneInstances = (isForceUpdate = false) => {\n if (slots.default) {\n const children = instance.subTree.children as ArrayLike<VNode>\n const content = Array.from(children).find(\n ({ props }) => props?.class === 'el-tabs__content'\n )\n if (!content) return\n\n const paneInstanceList: TabsPaneContext[] = getPaneInstanceFromSlot(\n content\n ).map((paneComponent) => paneStatesMap[paneComponent.uid])\n\n const panesChanged = !(\n paneInstanceList.length === panes.value.length &&\n paneInstanceList.every(\n (pane, index) => pane.uid === panes.value[index].uid\n )\n )\n\n if (isForceUpdate || panesChanged) {\n panes.value = paneInstanceList\n }\n } else if (panes.value.length !== 0) {\n panes.value = []\n }\n }\n\n const changeCurrentName = (value: string) => {\n currentName.value = value\n emit(INPUT_EVENT, value)\n emit(UPDATE_MODEL_EVENT, value)\n }\n\n const setCurrentName = (value: string) => {\n // should do nothing.\n if (currentName.value === value) return\n\n const canLeave = props.beforeLeave?.(value, currentName.value)\n if (isPromise(canLeave)) {\n canLeave.then(\n () => {\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 // ignore promise rejection in `before-leave` hook\n NOOP\n )\n } else if (canLeave !== false) {\n changeCurrentName(value)\n }\n }\n\n const handleTabClick = (\n tab: TabsPaneContext,\n tabName: string,\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) 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', null, 'add')\n emit('tab-add')\n }\n\n onUpdated(() => updatePaneInstances())\n onMounted(() => updatePaneInstances())\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 updatePaneInstances(true)\n await nextTick()\n await nav$.value?.$nextTick()\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?.scrollToActiveTab()\n })\n\n provide(tabsRootContextKey, {\n props,\n currentName,\n updatePaneState: (pane) => (paneStatesMap[pane.uid] = pane),\n })\n\n expose({\n currentName,\n })\n\n return () => {\n const newButton =\n props.editable || props.addable\n ? h(\n 'span',\n {\n class: 'el-tabs__new-tab',\n tabindex: '0',\n onClick: handleTabAdd,\n onKeydown: (ev: KeyboardEvent) => {\n if (ev.code === EVENT_CODE.enter) handleTabAdd()\n },\n },\n [h(ElIcon, { class: 'is-icon-plus' }, { default: () => h(Plus) })]\n )\n : null\n\n const header = h(\n 'div',\n { class: ['el-tabs__header', `is-${props.tabPosition}`] },\n [\n newButton,\n h(TabNav, {\n currentName: currentName.value,\n editable: props.editable,\n type: props.type,\n panes: panes.value,\n stretch: props.stretch,\n ref: nav$,\n onTabClick: handleTabClick,\n onTabRemove: handleTabRemove,\n }),\n ]\n )\n\n const panels = h('div', { class: 'el-tabs__content' }, [\n renderSlot(slots, 'default'),\n ])\n\n return h(\n 'div',\n {\n class: {\n 'el-tabs': true,\n 'el-tabs--card': props.type === 'card',\n [`el-tabs--${props.tabPosition}`]: true,\n 'el-tabs--border-card': props.type === 'border-card',\n },\n },\n props.tabPosition !== 'bottom' ? [header, panels] : [panels, header]\n )\n }\n },\n})\n"],"names":[],"mappings":"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"}