UNPKG

vexip-ui

Version:

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

1 lines 9.14 kB
{"version":3,"file":"tabs.vue2.cjs","sources":["../../../components/tabs/tabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Renderer } from '@/components/renderer'\nimport { TabNav } from '@/components/tab-nav'\nimport { TabNavItem } from '@/components/tab-nav-item'\n\nimport { computed, onMounted, provide, reactive, ref, toRef, watch } from 'vue'\n\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\nimport { debounceMinor, isFunction, isNull } from '@vexip-ui/utils'\nimport { tabsProps } from './props'\nimport { TABS_STATE } from './symbol'\n\nimport type { ItemState, TabsSlots } from './symbol'\n\ntype ChangeEvent = (label: string | number) => void\n\ndefineOptions({ name: 'Tabs' })\n\nconst _props = defineProps(tabsProps)\nconst props = useProps('tabs', _props, {\n active: {\n default: null,\n static: true,\n },\n card: false,\n align: 'left',\n placement: 'top',\n closable: false,\n showAdd: false,\n lazy: false,\n slots: () => ({}),\n})\n\nconst emit = defineEmits(['update:active'])\n\nconst slots = defineSlots<TabsSlots>()\n\nconst nh = useNameHelper('tabs')\n\nconst currentActive = ref(props.active)\nconst currentIndex = ref(0)\nconst itemStates = reactive(new Set<ItemState>())\nconst inTransition = ref(false)\n\nconst itemList = computed(() => Array.from(itemStates))\n\nconst refreshLabels = debounceMinor(() => {\n itemList.value.forEach((item, index) => {\n if (isNull(item.label)) {\n item.label = index + 1\n }\n })\n\n if (itemList.value.length >= 1 && isActiveEmpty()) {\n currentActive.value = itemList.value[0].label\n }\n})\nconst computeIndex = debounceMinor(() => {\n const index = itemList.value.findIndex(item => item.label === currentActive.value)\n\n if (~index) {\n currentIndex.value = index\n }\n})\n\nprovide(\n TABS_STATE,\n reactive({\n currentActive,\n lazy: toRef(props, 'lazy'),\n handleActive,\n increaseItem,\n decreaseItem,\n refreshLabels,\n }),\n)\n\nwatch(\n () => props.active,\n value => {\n currentActive.value = value\n },\n)\n\nonMounted(computeIndex)\n\ndefineExpose({\n currentActive,\n inTransition,\n itemList,\n handleActive,\n handleAdd,\n handleClose,\n})\n\nfunction isActiveEmpty() {\n return isNull(currentActive.value) || currentActive.value === ''\n}\n\nfunction increaseItem(item: ItemState) {\n itemStates.add(item)\n refreshLabels()\n}\n\nfunction decreaseItem(item: ItemState) {\n itemStates.delete(item)\n refreshLabels()\n}\n\nfunction handleActive(label: string | number) {\n currentActive.value = label\n\n computeIndex()\n emit('update:active', label)\n emitEvent(props.onChange as ChangeEvent, label)\n}\n\nfunction handleAdd() {\n emitEvent(props.onAdd)\n}\n\nfunction handleClose(label: string | number) {\n emitEvent(props.onClose as ChangeEvent, label)\n}\n</script>\n\n<template>\n <div :class=\"[nh.b(), nh.bm(props.placement), props.inherit && nh.bm('inherit')]\">\n <div :class=\"nh.be('header')\">\n <TabNav\n inherit\n :active=\"currentActive\"\n :card=\"props.card\"\n :align=\"props.align\"\n :placement=\"props.placement\"\n :closable=\"props.closable\"\n :show-add=\"props.showAdd\"\n @change=\"handleActive\"\n @add=\"handleAdd\"\n @close=\"handleClose\"\n >\n <template v-if=\"slots.prefix || props.slots.prefix\" #prefix>\n <slot name=\"prefix\">\n <Renderer :renderer=\"props.slots.prefix\"></Renderer>\n </slot>\n </template>\n <TabNavItem\n v-for=\"(item, index) in itemList\"\n :key=\"index\"\n :label=\"item.label\"\n :icon=\"item.icon\"\n :disabled=\"item.disabled\"\n :closable=\"item.closable\"\n >\n <template v-if=\"isFunction(item.labelRenderer)\">\n <Renderer\n :renderer=\"item.labelRenderer\"\n :data=\"{ label: item.label, disabled: item.disabled }\"\n ></Renderer>\n </template>\n <template v-else>\n {{ item.name || item.label }}\n </template>\n </TabNavItem>\n <template v-if=\"slots.suffix || props.slots.suffix\" #suffix>\n <slot name=\"suffix\">\n <Renderer :renderer=\"props.slots.suffix\"></Renderer>\n </slot>\n </template>\n <template v-if=\"slots.add || props.slots.add\">\n <slot name=\"add\">\n <Renderer :renderer=\"props.slots.add\"></Renderer>\n </slot>\n </template>\n <template v-if=\"slots.marker || props.slots.marker\">\n <slot name=\"marker\">\n <Renderer :renderer=\"props.slots.marker\"></Renderer>\n </slot>\n </template>\n </TabNav>\n </div>\n <div\n :class=\"{\n [nh.be('main')]: true,\n [nh.bem('main', 'transition')]: inTransition\n }\"\n @transitionend=\"inTransition = false\"\n >\n <slot></slot>\n </div>\n </div>\n</template>\n"],"names":["_props","__props","props","useProps","emit","__emit","slots","_useSlots","nh","useNameHelper","currentActive","ref","currentIndex","itemStates","reactive","inTransition","itemList","computed","refreshLabels","debounceMinor","item","index","isNull","isActiveEmpty","computeIndex","provide","TABS_STATE","toRef","handleActive","increaseItem","decreaseItem","watch","value","onMounted","__expose","handleAdd","handleClose","label","emitEvent","_createElementBlock","_unref","_createElementVNode","_normalizeClass","_createVNode","TabNav","_openBlock","_Fragment","_renderList","_createBlock","TabNavItem","isFunction","Renderer","_createTextVNode","_toDisplayString","_renderSlot","_ctx"],"mappings":"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"}