3d4e76a12d812831fba024827f9ef1e5ca14c3d66a71b980a983da7e056b2f7d4f0b0e85474a4f0cf818aefb761d2915d9305859619cb01caa797a7d616fc2 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. import { defineComponent, inject, toRefs, ref, getCurrentInstance, computed, watch, nextTick, reactive, onBeforeUnmount, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, unref, renderSlot, createBlock, withCtx, createCommentVNode } from 'vue';
  2. import { isCollapsible, getCollapsible } from './hooks/usePanel.mjs';
  3. import SplitBar from './split-bar.mjs';
  4. import { splitterPanelProps } from './split-panel.mjs';
  5. import { splitterRootContextKey } from './type.mjs';
  6. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  7. import { isPct, getPct, isPx, getPx } from './hooks/useSize.mjs';
  8. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  9. import { throwError } from '../../../utils/error.mjs';
  10. const COMPONENT_NAME = "ElSplitterPanel";
  11. const __default__ = defineComponent({
  12. name: COMPONENT_NAME
  13. });
  14. const _sfc_main = /* @__PURE__ */ defineComponent({
  15. ...__default__,
  16. props: splitterPanelProps,
  17. emits: ["update:size"],
  18. setup(__props, { emit: emits }) {
  19. const props = __props;
  20. const ns = useNamespace("splitter-panel");
  21. const splitterContext = inject(splitterRootContextKey);
  22. if (!splitterContext)
  23. throwError(COMPONENT_NAME, "usage: <el-splitter><el-splitter-panel /></el-splitter/>");
  24. const { panels, layout, lazy, containerSize, pxSizes } = toRefs(splitterContext);
  25. const {
  26. registerPanel,
  27. unregisterPanel,
  28. onCollapse,
  29. onMoveEnd,
  30. onMoveStart,
  31. onMoving
  32. } = splitterContext;
  33. const panelEl = ref();
  34. const instance = getCurrentInstance();
  35. const uid = instance.uid;
  36. const index = ref(0);
  37. const panel = computed(() => panels.value[index.value]);
  38. const setIndex = (val) => {
  39. index.value = val;
  40. };
  41. const panelSize = computed(() => {
  42. var _a;
  43. if (!panel.value)
  44. return 0;
  45. return (_a = pxSizes.value[index.value]) != null ? _a : 0;
  46. });
  47. const nextSize = computed(() => {
  48. var _a;
  49. if (!panel.value)
  50. return 0;
  51. return (_a = pxSizes.value[index.value + 1]) != null ? _a : 0;
  52. });
  53. const nextPanel = computed(() => {
  54. if (panel.value) {
  55. return panels.value[index.value + 1];
  56. }
  57. return null;
  58. });
  59. const isResizable = computed(() => {
  60. var _a;
  61. if (!nextPanel.value)
  62. return false;
  63. return props.resizable && ((_a = nextPanel.value) == null ? void 0 : _a.resizable) && (panelSize.value !== 0 || !props.min) && (nextSize.value !== 0 || !nextPanel.value.min);
  64. });
  65. const isShowBar = computed(() => {
  66. if (!panel.value)
  67. return false;
  68. return index.value !== panels.value.length - 1;
  69. });
  70. const startCollapsible = computed(() => isCollapsible(panel.value, panelSize.value, nextPanel.value, nextSize.value));
  71. const endCollapsible = computed(() => isCollapsible(nextPanel.value, nextSize.value, panel.value, panelSize.value));
  72. function sizeToPx(str) {
  73. if (isPct(str)) {
  74. return getPct(str) * containerSize.value || 0;
  75. } else if (isPx(str)) {
  76. return getPx(str);
  77. }
  78. return str != null ? str : 0;
  79. }
  80. let isSizeUpdating = false;
  81. watch(() => props.size, () => {
  82. if (!isSizeUpdating && panel.value) {
  83. if (!containerSize.value) {
  84. panel.value.size = props.size;
  85. return;
  86. }
  87. const size = sizeToPx(props.size);
  88. const maxSize = sizeToPx(props.max);
  89. const minSize = sizeToPx(props.min);
  90. const finalSize = Math.min(Math.max(size, minSize || 0), maxSize || size);
  91. if (finalSize !== size) {
  92. emits("update:size", finalSize);
  93. }
  94. panel.value.size = finalSize;
  95. }
  96. });
  97. watch(() => {
  98. var _a;
  99. return (_a = panel.value) == null ? void 0 : _a.size;
  100. }, (val) => {
  101. if (val !== props.size) {
  102. isSizeUpdating = true;
  103. emits("update:size", val);
  104. nextTick(() => isSizeUpdating = false);
  105. }
  106. });
  107. watch(() => props.resizable, (val) => {
  108. if (panel.value) {
  109. panel.value.resizable = val;
  110. }
  111. });
  112. const _panel = reactive({
  113. el: panelEl.value,
  114. uid,
  115. getVnode: () => instance.vnode,
  116. setIndex,
  117. ...props,
  118. collapsible: computed(() => getCollapsible(props.collapsible))
  119. });
  120. registerPanel(_panel);
  121. onBeforeUnmount(() => unregisterPanel(_panel));
  122. return (_ctx, _cache) => {
  123. return openBlock(), createElementBlock(Fragment, null, [
  124. createElementVNode("div", mergeProps({
  125. ref_key: "panelEl",
  126. ref: panelEl,
  127. class: [unref(ns).b()],
  128. style: { flexBasis: `${unref(panelSize)}px` }
  129. }, _ctx.$attrs), [
  130. renderSlot(_ctx.$slots, "default")
  131. ], 16),
  132. unref(isShowBar) ? (openBlock(), createBlock(SplitBar, {
  133. key: 0,
  134. index: index.value,
  135. layout: unref(layout),
  136. lazy: unref(lazy),
  137. resizable: unref(isResizable),
  138. "start-collapsible": unref(startCollapsible),
  139. "end-collapsible": unref(endCollapsible),
  140. onMoveStart: unref(onMoveStart),
  141. onMoving: unref(onMoving),
  142. onMoveEnd: unref(onMoveEnd),
  143. onCollapse: unref(onCollapse)
  144. }, {
  145. "start-collapsible": withCtx(() => [
  146. renderSlot(_ctx.$slots, "start-collapsible")
  147. ]),
  148. "end-collapsible": withCtx(() => [
  149. renderSlot(_ctx.$slots, "end-collapsible")
  150. ]),
  151. _: 3
  152. }, 8, ["index", "layout", "lazy", "resizable", "start-collapsible", "end-collapsible", "onMoveStart", "onMoving", "onMoveEnd", "onCollapse"])) : createCommentVNode("v-if", true)
  153. ], 64);
  154. };
  155. }
  156. });
  157. var SplitPanel = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "split-panel.vue"]]);
  158. export { SplitPanel as default };
  159. //# sourceMappingURL=split-panel2.mjs.map