@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\">\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, 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  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 isTransition = 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    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  isTransition,\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')]: isTransition\n      }\"\n      @transitionend=\"isTransition = false\"\n    >\n      <slot></slot>\n    </div>\n  </div>\n</template>\n"],"names":["props","useProps","__props","emit","__emit","slots","_useSlots","nh","useNameHelper","currentActive","ref","currentIndex","itemStates","reactive","isTransition","itemList","computed","refreshLabels","debounceMinor","item","index","isNull","isActiveEmpty","computeIndex","provide","TABS_STATE","handleActive","increaseItem","decreaseItem","watch","value","onMounted","__expose","handleAdd","handleClose","label","emitEvent"],"mappings":";;;;;;;;;;;;;;;;;AAmBM,UAAAA,IAAQC,EAAS,QADRC,GACwB;AAAA,MACrC,QAAQ;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,MAAM;AAAA,MACN,OAAO;AAAA,MACP,WAAW;AAAA,MACX,UAAU;AAAA,MACV,SAAS;AAAA,MACT,OAAO,OAAO,CAAC;AAAA,IAAA,CAChB,GAEKC,IAAOC,GAEPC,IAAQC,EAAA,GAERC,IAAKC,EAAc,MAAM,GAEzBC,IAAgBC,EAAIV,EAAM,MAAM,GAChCW,IAAeD,EAAI,CAAC,GACpBE,IAAaC,EAAa,oBAAA,KAAgB,GAC1CC,IAAeJ,EAAI,EAAK,GAExBK,IAAWC,EAAS,MAAM,MAAM,KAAKJ,CAAU,CAAC,GAEhDK,IAAgBC,EAAc,MAAM;AACxC,MAAAH,EAAS,MAAM,QAAQ,CAACI,GAAMC,MAAU;AAClC,QAAAC,EAAOF,EAAK,KAAK,MACnBA,EAAK,QAAQC,IAAQ;AAAA,MACvB,CACD,GAEGL,EAAS,MAAM,UAAU,KAAKO,QAChCb,EAAc,QAAQM,EAAS,MAAM,CAAC,EAAE;AAAA,IAC1C,CACD,GACKQ,IAAeL,EAAc,MAAM;AACjC,YAAAE,IAAQL,EAAS,MAAM,UAAU,OAAQI,EAAK,UAAUV,EAAc,KAAK;AAEjF,MAAI,CAACW,MACHT,EAAa,QAAQS;AAAA,IACvB,CACD;AAED,IAAAI;AAAA,MACEC;AAAA,MACAZ,EAAS;AAAA,QACP,eAAAJ;AAAA,QACA,cAAAiB;AAAA,QACA,cAAAC;AAAA,QACA,cAAAC;AAAA,QACA,eAAAX;AAAA,MACD,CAAA;AAAA,IACH,GAEAY;AAAA,MACE,MAAM7B,EAAM;AAAA,MACZ,CAAS8B,MAAA;AACP,QAAArB,EAAc,QAAQqB;AAAA,MAAA;AAAA,IAE1B,GAEAC,EAAUR,CAAY,GAETS,EAAA;AAAA,MACX,eAAAvB;AAAA,MACA,cAAAK;AAAA,MACA,UAAAC;AAAA,MACA,cAAAW;AAAA,MACA,WAAAO;AAAA,MACA,aAAAC;AAAA,IAAA,CACD;AAED,aAASZ,IAAgB;AACvB,aAAOD,EAAOZ,EAAc,KAAK,KAAKA,EAAc,UAAU;AAAA,IAAA;AAGhE,aAASkB,EAAaR,GAAiB;AACrC,MAAAP,EAAW,IAAIO,CAAI,GACLF,EAAA;AAAA,IAAA;AAGhB,aAASW,EAAaT,GAAiB;AACrC,MAAAP,EAAW,OAAOO,CAAI,GACRF,EAAA;AAAA,IAAA;AAGhB,aAASS,EAAaS,GAAwB;AAC5C,MAAA1B,EAAc,QAAQ0B,GAETZ,EAAA,GACbpB,EAAK,iBAAiBgC,CAAK,GACjBC,EAAApC,EAAM,UAAyBmC,CAAK;AAAA,IAAA;AAGhD,aAASF,IAAY;AACnB,MAAAG,EAAUpC,EAAM,KAAK;AAAA,IAAA;AAGvB,aAASkC,EAAYC,GAAwB;AACjC,MAAAC,EAAApC,EAAM,SAAwBmC,CAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}