UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 2.23 kB
{"version":3,"file":"tab-pane2.mjs","names":[],"sources":["../../../../../../packages/components/tabs/src/tab-pane.vue"],"sourcesContent":["<template>\n <div\n v-if=\"shouldBeRender\"\n v-show=\"active\"\n :id=\"`pane-${paneName}`\"\n ref=\"paneRef\"\n :class=\"ns.b()\"\n role=\"tabpanel\"\n :aria-hidden=\"!active\"\n :aria-labelledby=\"`tab-${paneName}`\"\n >\n <slot />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n getCurrentInstance,\n inject,\n onBeforeUnmount,\n onBeforeUpdate,\n reactive,\n ref,\n useSlots,\n watch,\n} from 'vue'\nimport { throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { tabsRootContextKey } from './constants'\n\nimport type { TabPaneProps } from './tab-pane'\n\nconst COMPONENT_NAME = 'ElTabPane'\ndefineOptions({\n name: COMPONENT_NAME,\n})\nconst props = withDefaults(defineProps<TabPaneProps>(), {\n label: '',\n closable: undefined,\n})\n\nconst instance = getCurrentInstance()!\nconst slots = useSlots()\n\nconst tabsRoot = inject(tabsRootContextKey)\nif (!tabsRoot)\n throwError(COMPONENT_NAME, 'usage: <el-tabs><el-tab-pane /></el-tabs/>')\n\nconst ns = useNamespace('tab-pane')\n\nconst paneRef = ref<HTMLDivElement>()\nconst index = ref<string>()\nconst isClosable = computed(() => props.closable ?? tabsRoot.props.closable)\nconst active = computed(\n () => tabsRoot.currentName.value === (props.name ?? index.value)\n)\nconst loaded = ref(active.value)\nconst paneName = computed(() => props.name ?? index.value)\nconst shouldBeRender = computed(\n () => !props.lazy || loaded.value || active.value\n)\n\nconst isFocusInsidePane = () => {\n return paneRef.value?.contains(document.activeElement)\n}\n\nwatch(active, (val) => {\n if (val) loaded.value = true\n})\n\nconst pane = reactive({\n uid: instance.uid,\n getVnode: () => instance.vnode,\n slots,\n props,\n paneName,\n active,\n index,\n isClosable,\n isFocusInsidePane,\n})\n\ntabsRoot.registerPane(pane)\n\nonBeforeUnmount(() => {\n tabsRoot.unregisterPane(pane)\n})\n\nonBeforeUpdate(() => {\n if (slots.label) tabsRoot.nav$.value?.scheduleRender()\n})\n</script>\n"],"mappings":""}