vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 6.07 kB
Source Map (JSON)
{"version":3,"file":"tab-nav-item.vue2.cjs","sources":["../../../components/tab-nav/tab-nav-item.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Icon } from '@/components/icon'\n\nimport { computed, inject, onBeforeUnmount, reactive, ref, watch } from 'vue'\n\nimport { createIconProp, emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'\nimport { isDefined } from '@vexip-ui/utils'\nimport { tabNavItemProps } from './props'\nimport { TAB_NAV_STATE } from './symbol'\n\nimport type { ItemState } from './symbol'\n\ndefineOptions({ name: 'TabNavItem' })\n\nconst _props = defineProps(tabNavItemProps)\nconst props = useProps('tabNavItem', _props, {\n label: {\n static: true,\n default: null,\n },\n disabled: false,\n icon: createIconProp(),\n closable: null,\n})\n\nconst tabNavState = inject(TAB_NAV_STATE, null)\n\nconst nh = useNameHelper('tab-nav')\nconst icons = useIcons()\nconst active = ref(false)\nconst currentLabel = ref(props.label)\nconst index = ref(0)\nconst total = ref(0)\n\nconst wrapper = ref<HTMLElement>()\n\nconst contentClass = computed(() => {\n const baseClass = nh.be('content')\n\n return {\n [baseClass]: true,\n [`${baseClass}--disabled`]: props.disabled,\n [`${baseClass}--active`]: !props.disabled && active.value,\n }\n})\nconst isClosable = computed(() => {\n if (isDefined(props.closable)) {\n return props.closable\n }\n\n return tabNavState?.closable ?? false\n})\n\nwatch(\n () => props.label,\n value => {\n currentLabel.value = value\n tabNavState?.refreshLabels()\n },\n)\nwatch(active, value => {\n emitEvent(props.onToggle!, value)\n})\n\nif (tabNavState) {\n const state: ItemState = reactive({\n el: wrapper,\n label: currentLabel,\n index,\n total,\n })\n\n watch(currentLabel, () => {\n active.value = currentLabel.value === tabNavState.currentActive\n })\n watch(\n () => tabNavState.currentActive,\n value => {\n active.value = currentLabel.value === value\n },\n { immediate: true },\n )\n\n tabNavState.increaseItem(state)\n\n onBeforeUnmount(() => {\n tabNavState.decreaseItem(state)\n })\n}\n\nfunction handleSelect() {\n if (props.disabled) {\n return\n }\n\n tabNavState?.handleActive(currentLabel.value)\n}\n\nfunction handleClose() {\n if (props.disabled) {\n return\n }\n\n tabNavState?.handleClose(currentLabel.value)\n}\n</script>\n\n<template>\n <li ref=\"wrapper\" :class=\"nh.be('item')\" role=\"none\">\n <div :class=\"nh.be('pad')\"></div>\n <div\n :class=\"contentClass\"\n role=\"tab\"\n tabindex=\"0\"\n :aria-disabled=\"props.disabled\"\n :aria-setsize=\"total || undefined\"\n :aria-posinset=\"index || undefined\"\n @click=\"handleSelect\"\n @keydown.enter.stop=\"handleSelect\"\n >\n <Icon v-if=\"props.icon\" :class=\"nh.be('icon')\" :icon=\"props.icon\"></Icon>\n <slot>\n {{ props.label }}\n </slot>\n <button\n v-if=\"isClosable\"\n type=\"button\"\n :class=\"nh.be('close')\"\n @click.stop=\"handleClose\"\n >\n <Icon v-bind=\"icons.close\" label=\"close\"></Icon>\n </button>\n </div>\n </li>\n</template>\n"],"names":["_props","__props","props","useProps","createIconProp","tabNavState","inject","TAB_NAV_STATE","nh","useNameHelper","icons","useIcons","active","ref","currentLabel","index","total","wrapper","contentClass","computed","baseClass","isClosable","isDefined","watch","value","emitEvent","state","reactive","onBeforeUnmount","handleSelect","handleClose","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_createBlock","Icon","_renderSlot","_ctx","_createTextVNode","_toDisplayString","_createVNode","_mergeProps"],"mappings":"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"}