cd00a4b91c987e35d0a36d43a739a3e6fd83cb5926e2a0e575ccf991d3b3138378f57fca8029e1e64092b03f36e091808918131360cae997db8983ac745f01 5.8 KB

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