vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.22 kB
Source Map (JSON)
{"version":3,"file":"tab-panel.vue2.mjs","sources":["../../../components/tabs/tab-panel.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, reactive, ref, toRef, watch } from 'vue'\n\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\nimport { tabPanelProps } from './props'\nimport { TABS_STATE } from './symbol'\n\nimport type { ItemState } from './symbol'\n\ndefineOptions({ name: 'TabPanel' })\n\nconst _props = defineProps(tabPanelProps)\nconst props = useProps('tabPanel', _props, {\n lazy: null,\n})\n\nconst slots = defineSlots<{\n default?: () => any,\n label?: (params: { label: string | number }) => any\n}>()\n\nconst tabsState = inject(TABS_STATE, null)\n\nconst nh = useNameHelper('tabs')\nconst active = ref(false)\nconst currentLabel = ref(props.label)\n\nconst lazy = computed(() => props.lazy ?? tabsState?.lazy ?? false)\nconst className = computed(() => {\n const baseClass = nh.be('panel')\n\n return {\n [baseClass]: true,\n [`${baseClass}--disabled`]: props.disabled,\n [`${baseClass}--lazy`]: lazy.value,\n [`${baseClass}--active`]: !props.disabled && active.value,\n }\n})\n\nwatch(\n () => props.label,\n value => {\n currentLabel.value = value\n tabsState?.refreshLabels()\n },\n)\nwatch(active, value => {\n emitEvent(props.onToggle!, value)\n})\n\nif (tabsState) {\n const state = reactive({\n label: currentLabel,\n name: toRef(props, 'name'),\n icon: toRef(props, 'icon'),\n disabled: toRef(props, 'disabled'),\n closable: toRef(props, 'closable'),\n labelRenderer: null,\n }) as ItemState\n\n watch(\n () => slots.label,\n value => {\n state.labelRenderer = value ? data => value(data) : null\n },\n { immediate: true },\n )\n watch(currentLabel, () => {\n active.value = currentLabel.value === tabsState.currentActive\n })\n watch(\n () => tabsState.currentActive,\n value => {\n active.value = currentLabel.value === value\n },\n { immediate: true },\n )\n\n tabsState.increaseItem(state)\n\n onBeforeUnmount(() => {\n tabsState.decreaseItem(state)\n })\n}\n</script>\n\n<template>\n <div\n v-if=\"!lazy || active\"\n :class=\"className\"\n role=\"tabpanel\"\n :aria-hidden=\"!active\"\n >\n <slot></slot>\n </div>\n</template>\n"],"names":["props","useProps","__props","slots","_useSlots","tabsState","inject","TABS_STATE","nh","useNameHelper","active","ref","currentLabel","lazy","computed","className","baseClass","watch","value","emitEvent","state","reactive","toRef","data","onBeforeUnmount","_createElementBlock","_renderSlot","_ctx"],"mappings":";;;;;;;;;AAYM,UAAAA,IAAQC,EAAS,YADRC,GAC4B;AAAA,MACzC,MAAM;AAAA,IAAA,CACP,GAEKC,IAAQC,EAAA,GAKRC,IAAYC,EAAOC,GAAY,IAAI,GAEnCC,IAAKC,EAAc,MAAM,GACzBC,IAASC,EAAI,EAAK,GAClBC,IAAeD,EAAIX,EAAM,KAAK,GAE9Ba,IAAOC,EAAS,MAAMd,EAAM,SAAQK,KAAA,gBAAAA,EAAW,SAAQ,EAAK,GAC5DU,IAAYD,EAAS,MAAM;AACzB,YAAAE,IAAYR,EAAG,GAAG,OAAO;AAExB,aAAA;AAAA,QACL,CAACQ,CAAS,GAAG;AAAA,QACb,CAAC,GAAGA,CAAS,YAAY,GAAGhB,EAAM;AAAA,QAClC,CAAC,GAAGgB,CAAS,QAAQ,GAAGH,EAAK;AAAA,QAC7B,CAAC,GAAGG,CAAS,UAAU,GAAG,CAAChB,EAAM,YAAYU,EAAO;AAAA,MACtD;AAAA,IAAA,CACD;AAaD,QAXAO;AAAA,MACE,MAAMjB,EAAM;AAAA,MACZ,CAASkB,MAAA;AACP,QAAAN,EAAa,QAAQM,GACrBb,KAAA,QAAAA,EAAW;AAAA,MAAc;AAAA,IAE7B,GACAY,EAAMP,GAAQ,CAASQ,MAAA;AACX,MAAAC,EAAAnB,EAAM,UAAWkB,CAAK;AAAA,IAAA,CACjC,GAEGb,GAAW;AACb,YAAMe,IAAQC,EAAS;AAAA,QACrB,OAAOT;AAAA,QACP,MAAMU,EAAMtB,GAAO,MAAM;AAAA,QACzB,MAAMsB,EAAMtB,GAAO,MAAM;AAAA,QACzB,UAAUsB,EAAMtB,GAAO,UAAU;AAAA,QACjC,UAAUsB,EAAMtB,GAAO,UAAU;AAAA,QACjC,eAAe;AAAA,MAAA,CAChB;AAED,MAAAiB;AAAA,QACE,MAAMd,EAAM;AAAA,QACZ,CAASe,MAAA;AACP,UAAAE,EAAM,gBAAgBF,IAAQ,CAAQK,MAAAL,EAAMK,CAAI,IAAI;AAAA,QACtD;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GACAN,EAAML,GAAc,MAAM;AACjB,QAAAF,EAAA,QAAQE,EAAa,UAAUP,EAAU;AAAA,MAAA,CACjD,GACDY;AAAA,QACE,MAAMZ,EAAU;AAAA,QAChB,CAASa,MAAA;AACA,UAAAR,EAAA,QAAQE,EAAa,UAAUM;AAAA,QACxC;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GAEAb,EAAU,aAAae,CAAK,GAE5BI,EAAgB,MAAM;AACpB,QAAAnB,EAAU,aAAae,CAAK;AAAA,MAAA,CAC7B;AAAA,IAAA;qBAMQ,CAAAP,EAAA,SAAQH,EAAM,cADvBe,EAOM,OAAA;AAAA;MALH,SAAOV,EAAS,KAAA;AAAA,MACjB,MAAK;AAAA,MACJ,gBAAcL,EAAM;AAAA,IAAA;MAErBgB,EAAaC,EAAA,QAAA,SAAA;AAAA;;;"}