UNPKG

@extclp/vexip-ui

Version:

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

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