{"version":3,"file":"tab-pane.vue.mjs","sources":["../../../../../../packages/components/tabs/src/tab-pane.vue"],"sourcesContent":["<script lang=\"ts\">\n  import {\n    computed,\n    defineComponent,\n    getCurrentInstance,\n    inject,\n    reactive,\n    toRefs,\n    onBeforeUnmount,\n    watch,\n    ref\n  } from 'vue'\n  import { getComponentNamespace, getNamespace } from '../../../utils/global-config'\n  import { isUndefined } from '../../../utils/is'\n  import { tabsInjectionKey } from './context'\n\n  export default defineComponent({\n    name: getComponentNamespace('TabPane'),\n    props: {\n      disabled: {\n        type: Boolean,\n        default: false\n      },\n      title: {\n        type: String,\n        default: ''\n      },\n      destroyOnHide: {\n        type: Boolean,\n        default: undefined\n      }\n    },\n    setup(props, { slots }) {\n      const { title, disabled } = toRefs(props)\n      const ns = getNamespace('tabs')\n      const instance = getCurrentInstance()\n      const key = computed(() => instance?.vnode.key as string | number)\n\n      const tabsContext = inject(tabsInjectionKey)\n\n      const isActive = computed(() => tabsContext?.activeKey === key.value)\n\n      const mergeDestroyOnHide = computed(() => {\n        if (!isUndefined(props.destroyOnHide)) return props.destroyOnHide\n        if (!isUndefined(tabsContext?.destroyOnHide)) return tabsContext?.destroyOnHide\n        return false\n      })\n\n      const mounted = ref(!mergeDestroyOnHide.value)\n\n      const data = reactive({\n        key,\n        title,\n        disabled,\n        paneSlots: slots\n      })\n\n      if (instance?.uid) {\n        tabsContext?.addPane(instance.uid, data)\n      }\n\n      onBeforeUnmount(() => {\n        if (instance?.uid) {\n          tabsContext?.removePane?.(instance.uid)\n        }\n      })\n\n      const cls = computed(() => {\n        return [`${ns}__pane`, isActive.value && `is-active`]\n      })\n\n      watch(isActive, (active) => {\n        if (active) {\n          if (!mounted.value) {\n            mounted.value = true\n          }\n        } else if (props.destroyOnHide || tabsContext?.destroyOnHide) {\n          mounted.value = false\n        }\n      })\n\n      return {\n        cls,\n        ns,\n        isActive,\n        mounted\n      }\n    }\n  })\n</script>\n\n<template>\n  <div :class=\"cls\">\n    <slot v-if=\"mounted\"></slot>\n  </div>\n</template>\n"],"names":["cls","mounted"],"mappings":";;;;AA4Fa,SAAA,YAAA,IAAEA,EAAAA,MAAAA,EAAG,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;;;;aACFC,cAAO,CAAA,IAAA,CAAA,GAAA,CAAA;AAAA,KAAA;AAAA;;;;;;;;;;;"}