@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4.87 kB
Source Map (JSON)
{"version":3,"file":"tab-panel.vue2.mjs","sources":["../../../components/tabs/tab-panel.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { computed, inject, onBeforeUnmount, reactive, ref, toRef, watch } from 'vue'\r\n\r\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\r\nimport { tabPanelProps } from './props'\r\nimport { TABS_STATE } from './symbol'\r\n\r\nimport type { ItemState } from './symbol'\r\n\r\ndefineOptions({ name: 'TabPanel' })\r\n\r\nconst _props = defineProps(tabPanelProps)\r\nconst props = useProps('tabPanel', _props, {\r\n lazy: null,\r\n lazyLoad: null,\r\n})\r\n\r\nconst slots = defineSlots<{\r\n default?: () => any,\r\n label?: (params: { label: string | number }) => any,\r\n}>()\r\n\r\nconst tabsState = inject(TABS_STATE, null)\r\n\r\nconst nh = useNameHelper('tabs')\r\nconst active = ref(false)\r\nconst currentLabel = ref(props.label)\r\nconst loaded = ref(false)\r\n\r\nconst lazy = computed(() => props.lazy ?? tabsState?.lazy ?? false)\r\nconst lazyLoad = computed(() => props.lazyLoad ?? tabsState?.lazyLoad ?? false)\r\nconst className = computed(() => {\r\n const baseClass = nh.be('panel')\r\n\r\n return {\r\n [baseClass]: true,\r\n [`${baseClass}--disabled`]: props.disabled,\r\n [`${baseClass}--lazy`]: lazy.value,\r\n [`${baseClass}--active`]: !props.disabled && active.value,\r\n }\r\n})\r\n\r\nwatch(\r\n () => props.label,\r\n value => {\r\n currentLabel.value = value\r\n tabsState?.refreshLabels()\r\n },\r\n)\r\nwatch(active, value => {\r\n emitEvent(props.onToggle!, value)\r\n})\r\n\r\nif (tabsState) {\r\n const state = reactive({\r\n label: currentLabel,\r\n name: toRef(props, 'name'),\r\n icon: toRef(props, 'icon'),\r\n disabled: toRef(props, 'disabled'),\r\n closable: toRef(props, 'closable'),\r\n labelRenderer: null,\r\n }) as ItemState\r\n\r\n watch(\r\n () => slots.label,\r\n value => {\r\n state.labelRenderer = value ? data => value(data) : null\r\n },\r\n { immediate: true },\r\n )\r\n watch(currentLabel, () => {\r\n active.value = currentLabel.value === tabsState.currentActive\r\n })\r\n watch(\r\n () => tabsState.currentActive,\r\n value => {\r\n active.value = currentLabel.value === value\r\n\r\n if (!loaded.value && active.value) {\r\n loaded.value = true\r\n }\r\n },\r\n { immediate: true },\r\n )\r\n\r\n tabsState.increaseItem(state)\r\n\r\n onBeforeUnmount(() => {\r\n tabsState.decreaseItem(state)\r\n })\r\n}\r\n</script>\r\n\r\n<template>\r\n <div\r\n v-if=\"!(lazy || (lazyLoad && !loaded)) || active\"\r\n :class=\"className\"\r\n role=\"tabpanel\"\r\n :aria-hidden=\"!active\"\r\n >\r\n <slot></slot>\r\n </div>\r\n</template>\r\n"],"names":["props","useProps","__props","slots","_useSlots","tabsState","inject","TABS_STATE","nh","useNameHelper","active","ref","currentLabel","loaded","lazy","computed","lazyLoad","className","baseClass","watch","value","emitEvent","state","reactive","toRef","data","onBeforeUnmount","_createElementBlock","_renderSlot","_ctx"],"mappings":";;;;;;;;;AAYM,UAAAA,IAAQC,EAAS,YADRC,GAC4B;AAAA,MACzC,MAAM;AAAA,MACN,UAAU;AAAA,IAAA,CACX,GAEKC,IAAQC,EAGV,GAEEC,IAAYC,EAAOC,GAAY,IAAI,GAEnCC,IAAKC,EAAc,MAAM,GACzBC,IAASC,EAAI,EAAK,GAClBC,IAAeD,EAAIX,EAAM,KAAK,GAC9Ba,IAASF,EAAI,EAAK,GAElBG,IAAOC,EAAS,MAAMf,EAAM,SAAQK,KAAA,gBAAAA,EAAW,SAAQ,EAAK,GAC5DW,IAAWD,EAAS,MAAMf,EAAM,aAAYK,KAAA,gBAAAA,EAAW,aAAY,EAAK,GACxEY,IAAYF,EAAS,MAAM;AACzB,YAAAG,IAAYV,EAAG,GAAG,OAAO;AAExB,aAAA;AAAA,QACL,CAACU,CAAS,GAAG;AAAA,QACb,CAAC,GAAGA,CAAS,YAAY,GAAGlB,EAAM;AAAA,QAClC,CAAC,GAAGkB,CAAS,QAAQ,GAAGJ,EAAK;AAAA,QAC7B,CAAC,GAAGI,CAAS,UAAU,GAAG,CAAClB,EAAM,YAAYU,EAAO;AAAA,MACtD;AAAA,IAAA,CACD;AAaD,QAXAS;AAAA,MACE,MAAMnB,EAAM;AAAA,MACZ,CAASoB,MAAA;AACP,QAAAR,EAAa,QAAQQ,GACrBf,KAAA,QAAAA,EAAW;AAAA,MAAc;AAAA,IAE7B,GACAc,EAAMT,GAAQ,CAASU,MAAA;AACX,MAAAC,EAAArB,EAAM,UAAWoB,CAAK;AAAA,IAAA,CACjC,GAEGf,GAAW;AACb,YAAMiB,IAAQC,EAAS;AAAA,QACrB,OAAOX;AAAA,QACP,MAAMY,EAAMxB,GAAO,MAAM;AAAA,QACzB,MAAMwB,EAAMxB,GAAO,MAAM;AAAA,QACzB,UAAUwB,EAAMxB,GAAO,UAAU;AAAA,QACjC,UAAUwB,EAAMxB,GAAO,UAAU;AAAA,QACjC,eAAe;AAAA,MAAA,CAChB;AAED,MAAAmB;AAAA,QACE,MAAMhB,EAAM;AAAA,QACZ,CAASiB,MAAA;AACP,UAAAE,EAAM,gBAAgBF,IAAQ,CAAQK,MAAAL,EAAMK,CAAI,IAAI;AAAA,QACtD;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GACAN,EAAMP,GAAc,MAAM;AACjB,QAAAF,EAAA,QAAQE,EAAa,UAAUP,EAAU;AAAA,MAAA,CACjD,GACDc;AAAA,QACE,MAAMd,EAAU;AAAA,QAChB,CAASe,MAAA;AACA,UAAAV,EAAA,QAAQE,EAAa,UAAUQ,GAElC,CAACP,EAAO,SAASH,EAAO,UAC1BG,EAAO,QAAQ;AAAA,QAEnB;AAAA,QACA,EAAE,WAAW,GAAK;AAAA,MACpB,GAEAR,EAAU,aAAaiB,CAAK,GAE5BI,EAAgB,MAAM;AACpB,QAAArB,EAAU,aAAaiB,CAAK;AAAA,MAAA,CAC7B;AAAA,IAAA;qBAMS,EAAAR,EAAA,SAASE,EAAA,SAAa,CAAAH,EAAA,UAAYH,EAAM,cADlDiB,EAOM,OAAA;AAAA;MALH,SAAOV,EAAS,KAAA;AAAA,MACjB,MAAK;AAAA,MACJ,gBAAcP,EAAM;AAAA,IAAA;MAErBkB,EAAaC,EAAA,QAAA,SAAA;AAAA;;;"}