4070ef89e591e3755c37e528182ae4636e7bb87c2934f7d5d5a4293a34259f476ec73ca12fe4db0a61faa3ab7df14c485fca8b7db2dec2793481cd5ffe6925 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. import { defineComponent, getCurrentInstance, useSlots, inject, ref, computed, watch, reactive, onBeforeUnmount, onBeforeUpdate, 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-pane2.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 paneRef = ref();
  24. const index = ref();
  25. const isClosable = computed(() => {
  26. var _a;
  27. return (_a = props.closable) != null ? _a : tabsRoot.props.closable;
  28. });
  29. const active = eagerComputed(() => {
  30. var _a;
  31. return tabsRoot.currentName.value === ((_a = props.name) != null ? _a : index.value);
  32. });
  33. const loaded = ref(active.value);
  34. const paneName = computed(() => {
  35. var _a;
  36. return (_a = props.name) != null ? _a : index.value;
  37. });
  38. const shouldBeRender = eagerComputed(() => !props.lazy || loaded.value || active.value);
  39. const isFocusInsidePane = () => {
  40. var _a;
  41. return (_a = paneRef.value) == null ? void 0 : _a.contains(document.activeElement);
  42. };
  43. watch(active, (val) => {
  44. if (val)
  45. loaded.value = true;
  46. });
  47. const pane = reactive({
  48. uid: instance.uid,
  49. getVnode: () => instance.vnode,
  50. slots,
  51. props,
  52. paneName,
  53. active,
  54. index,
  55. isClosable,
  56. isFocusInsidePane
  57. });
  58. tabsRoot.registerPane(pane);
  59. onBeforeUnmount(() => {
  60. tabsRoot.unregisterPane(pane);
  61. });
  62. onBeforeUpdate(() => {
  63. var _a;
  64. if (slots.label)
  65. (_a = tabsRoot.nav$.value) == null ? void 0 : _a.scheduleRender();
  66. });
  67. return (_ctx, _cache) => {
  68. return unref(shouldBeRender) ? withDirectives((openBlock(), createElementBlock("div", {
  69. key: 0,
  70. id: `pane-${unref(paneName)}`,
  71. ref_key: "paneRef",
  72. ref: paneRef,
  73. class: normalizeClass(unref(ns).b()),
  74. role: "tabpanel",
  75. "aria-hidden": !unref(active),
  76. "aria-labelledby": `tab-${unref(paneName)}`
  77. }, [
  78. renderSlot(_ctx.$slots, "default")
  79. ], 10, ["id", "aria-hidden", "aria-labelledby"])), [
  80. [vShow, unref(active)]
  81. ]) : createCommentVNode("v-if", true);
  82. };
  83. }
  84. });
  85. var TabPane = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "tab-pane.vue"]]);
  86. export { TabPane as default };
  87. //# sourceMappingURL=tab-pane.mjs.map