@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 3.62 kB
Source Map (JSON)
{"version":3,"file":"tab-panel.vue2.mjs","sources":["../../../components/tabs/tab-panel.vue"],"sourcesContent":["<template>\n <div :class=\"className\" role=\"tabpanel\" :aria-hidden=\"!active\">\n <slot></slot>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, inject, onBeforeUnmount, reactive, ref, toRef, watch } from 'vue'\n\nimport { emitEvent, useNameHelper } 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)\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 className = computed(() => {\n const baseClass = nh.be('panel')\n\n return {\n [baseClass]: true,\n [`${baseClass}--disabled`]: props.disabled,\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"],"names":["props","__props","slots","_useSlots","tabsState","inject","TABS_STATE","nh","useNameHelper","active","ref","currentLabel","className","computed","baseClass","watch","value","emitEvent","state","reactive","toRef","data","onBeforeUnmount"],"mappings":";;;;;;;;;AAiBA,UAAMA,IAAQC,GAERC,IAAQC,EAAA,GAKRC,IAAYC,EAAOC,GAAY,IAAI,GAEnCC,IAAKC,EAAc,MAAM,GACzBC,IAASC,EAAI,EAAK,GAClBC,IAAeD,EAAIV,EAAM,KAAK,GAE9BY,IAAYC,EAAS,MAAM;AACzB,YAAAC,IAAYP,EAAG,GAAG,OAAO;AAExB,aAAA;AAAA,QACL,CAACO,CAAS,GAAG;AAAA,QACb,CAAC,GAAGA,CAAS,YAAY,GAAGd,EAAM;AAAA,QAClC,CAAC,GAAGc,CAAS,UAAU,GAAG,CAACd,EAAM,YAAYS,EAAO;AAAA,MACtD;AAAA,IAAA,CACD;AAaD,QAXAM;AAAA,MACE,MAAMf,EAAM;AAAA,MACZ,CAASgB,MAAA;AACP,QAAAL,EAAa,QAAQK,GACrBZ,KAAA,QAAAA,EAAW;AAAA,MAAc;AAAA,IAE7B,GACAW,EAAMN,GAAQ,CAASO,MAAA;AACX,MAAAC,EAAAjB,EAAM,UAAWgB,CAAK;AAAA,IAAA,CACjC,GAEGZ,GAAW;AACb,YAAMc,IAAQC,EAAS;AAAA,QACrB,OAAOR;AAAA,QACP,MAAMS,EAAMpB,GAAO,MAAM;AAAA,QACzB,MAAMoB,EAAMpB,GAAO,MAAM;AAAA,QACzB,UAAUoB,EAAMpB,GAAO,UAAU;AAAA,QACjC,UAAUoB,EAAMpB,GAAO,UAAU;AAAA,QACjC,eAAe;AAAA,MAAA,CAChB;AAED,MAAAe;AAAA,QACE,MAAMb,EAAM;AAAA,QACZ,CAASc,MAAA;AACP,UAAAE,EAAM,gBAAgBF,IAAQ,CAAQK,MAAAL,EAAMK,CAAI,IAAI;AAAA,QACtD;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GACAN,EAAMJ,GAAc,MAAM;AACjB,QAAAF,EAAA,QAAQE,EAAa,UAAUP,EAAU;AAAA,MAAA,CACjD,GACDW;AAAA,QACE,MAAMX,EAAU;AAAA,QAChB,CAASY,MAAA;AACA,UAAAP,EAAA,QAAQE,EAAa,UAAUK;AAAA,QACxC;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GAEAZ,EAAU,aAAac,CAAK,GAE5BI,EAAgB,MAAM;AACpB,QAAAlB,EAAU,aAAac,CAAK;AAAA,MAAA,CAC7B;AAAA,IAAA;;;;;;;;;;"}