@extclp/vexip-ui/es/components/tabs/tabs.vue2.mjs.map

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

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