tab-pane2.mjs 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. import { defineComponent, getCurrentInstance, useSlots, inject, ref, computed, watch, reactive, onMounted, onUnmounted, unref, withDirectives, openBlock, createElementBlock, normalizeClass, renderSlot, vShow, createCommentVNode } from 'vue';
  2. import { eagerComputed } from '@vueuse/core';
  3. import { tabsRootContextKey } from './constants.mjs';
  4. import { tabPaneProps } from './tab-pane.mjs';
  5. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  6. import { throwError } from '../../../utils/error.mjs';
  7. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  8. const COMPONENT_NAME = "ElTabPane";
  9. const __default__ = defineComponent({
  10. name: COMPONENT_NAME
  11. });
  12. const _sfc_main = /* @__PURE__ */ defineComponent({
  13. ...__default__,
  14. props: tabPaneProps,
  15. setup(__props) {
  16. const props = __props;
  17. const instance = getCurrentInstance();
  18. const slots = useSlots();
  19. const tabsRoot = inject(tabsRootContextKey);
  20. if (!tabsRoot)
  21. throwError(COMPONENT_NAME, "usage: <el-tabs><el-tab-pane /></el-tabs/>");
  22. const ns = useNamespace("tab-pane");
  23. const index = ref();
  24. const isClosable = computed(() => props.closable || tabsRoot.props.closable);
  25. const active = eagerComputed(() => {
  26. var _a;
  27. return tabsRoot.currentName.value === ((_a = props.name) != null ? _a : index.value);
  28. });
  29. const loaded = ref(active.value);
  30. const paneName = computed(() => {
  31. var _a;
  32. return (_a = props.name) != null ? _a : index.value;
  33. });
  34. const shouldBeRender = eagerComputed(() => !props.lazy || loaded.value || active.value);
  35. watch(active, (val) => {
  36. if (val)
  37. loaded.value = true;
  38. });
  39. const pane = reactive({
  40. uid: instance.uid,
  41. slots,
  42. props,
  43. paneName,
  44. active,
  45. index,
  46. isClosable
  47. });
  48. tabsRoot.registerPane(pane);
  49. onMounted(() => {
  50. tabsRoot.sortPane(pane);
  51. });
  52. onUnmounted(() => {
  53. tabsRoot.unregisterPane(pane.uid);
  54. });
  55. return (_ctx, _cache) => {
  56. return unref(shouldBeRender) ? withDirectives((openBlock(), createElementBlock("div", {
  57. key: 0,
  58. id: `pane-${unref(paneName)}`,
  59. class: normalizeClass(unref(ns).b()),
  60. role: "tabpanel",
  61. "aria-hidden": !unref(active),
  62. "aria-labelledby": `tab-${unref(paneName)}`
  63. }, [
  64. renderSlot(_ctx.$slots, "default")
  65. ], 10, ["id", "aria-hidden", "aria-labelledby"])), [
  66. [vShow, unref(active)]
  67. ]) : createCommentVNode("v-if", true);
  68. };
  69. }
  70. });
  71. var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "tab-pane.vue"]]);
  72. export { TabPane as default };
  73. //# sourceMappingURL=tab-pane2.mjs.map