@extclp/vexip-ui/es/components/tab-nav/tab-nav-item.vue2.mjs.map

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

{"version":3,"file":"tab-nav-item.vue2.mjs","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","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"],"mappings":";;;;;;;;;;;;AAeM,UAAAA,IAAQC,EAAS,cADRC,GAC8B;AAAA,MAC3C,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,SAAS;AAAA,MACX;AAAA,MACA,UAAU;AAAA,MACV,MAAMC,EAAe;AAAA,MACrB,UAAU;AAAA,IAAA,CACX,GAEKC,IAAcC,EAAOC,GAAe,IAAI,GAExCC,IAAKC,EAAc,SAAS,GAC5BC,IAAQC,EAAS,GACjBC,IAASC,EAAI,EAAK,GAClBC,IAAeD,EAAIZ,EAAM,KAAK,GAC9Bc,IAAQF,EAAI,CAAC,GACbG,IAAQH,EAAI,CAAC,GAEbI,IAAUJ,EAAiB,GAE3BK,IAAeC,EAAS,MAAM;AAC5B,YAAAC,IAAYZ,EAAG,GAAG,SAAS;AAE1B,aAAA;AAAA,QACL,CAACY,CAAS,GAAG;AAAA,QACb,CAAC,GAAGA,CAAS,YAAY,GAAGnB,EAAM;AAAA,QAClC,CAAC,GAAGmB,CAAS,UAAU,GAAG,CAACnB,EAAM,YAAYW,EAAO;AAAA,MACtD;AAAA,IAAA,CACD,GACKS,IAAaF,EAAS,MACtBG,EAAUrB,EAAM,QAAQ,IACnBA,EAAM,YAGRI,KAAA,gBAAAA,EAAa,aAAY,EACjC;AAaD,QAXAkB;AAAA,MACE,MAAMtB,EAAM;AAAA,MACZ,CAASuB,MAAA;AACP,QAAAV,EAAa,QAAQU,GACrBnB,KAAA,QAAAA,EAAa;AAAA,MAAc;AAAA,IAE/B,GACAkB,EAAMX,GAAQ,CAASY,MAAA;AACX,MAAAC,EAAAxB,EAAM,UAAWuB,CAAK;AAAA,IAAA,CACjC,GAEGnB,GAAa;AACf,YAAMqB,IAAmBC,EAAS;AAAA,QAChC,IAAIV;AAAA,QACJ,OAAOH;AAAA,QACP,OAAAC;AAAA,QACA,OAAAC;AAAA,MAAA,CACD;AAED,MAAAO,EAAMT,GAAc,MAAM;AACjB,QAAAF,EAAA,QAAQE,EAAa,UAAUT,EAAY;AAAA,MAAA,CACnD,GACDkB;AAAA,QACE,MAAMlB,EAAY;AAAA,QAClB,CAASmB,MAAA;AACA,UAAAZ,EAAA,QAAQE,EAAa,UAAUU;AAAA,QACxC;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GAEAnB,EAAY,aAAaqB,CAAK,GAE9BE,EAAgB,MAAM;AACpB,QAAAvB,EAAY,aAAaqB,CAAK;AAAA,MAAA,CAC/B;AAAA,IAAA;AAGH,aAASG,IAAe;AACtB,MAAI5B,EAAM,YAIGI,KAAA,QAAAA,EAAA,aAAaS,EAAa;AAAA,IAAK;AAG9C,aAASgB,IAAc;AACrB,MAAI7B,EAAM,YAIGI,KAAA,QAAAA,EAAA,YAAYS,EAAa;AAAA,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}