| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- 'use strict';
- Object.defineProperty(exports, '__esModule', { value: true });
- var vue = require('vue');
- var usePanel = require('./hooks/usePanel.js');
- var splitBar = require('./split-bar.js');
- var splitPanel = require('./split-panel.js');
- var type = require('./type.js');
- var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
- var useSize = require('./hooks/useSize.js');
- var index = require('../../../hooks/use-namespace/index.js');
- var error = require('../../../utils/error.js');
- const COMPONENT_NAME = "ElSplitterPanel";
- const __default__ = vue.defineComponent({
- name: COMPONENT_NAME
- });
- const _sfc_main = /* @__PURE__ */ vue.defineComponent({
- ...__default__,
- props: splitPanel.splitterPanelProps,
- emits: ["update:size"],
- setup(__props, { emit: emits }) {
- const props = __props;
- const ns = index.useNamespace("splitter-panel");
- const splitterContext = vue.inject(type.splitterRootContextKey);
- if (!splitterContext)
- error.throwError(COMPONENT_NAME, "usage: <el-splitter><el-splitter-panel /></el-splitter/>");
- const { panels, layout, lazy, containerSize, pxSizes } = vue.toRefs(splitterContext);
- const {
- registerPanel,
- unregisterPanel,
- onCollapse,
- onMoveEnd,
- onMoveStart,
- onMoving
- } = splitterContext;
- const panelEl = vue.ref();
- const instance = vue.getCurrentInstance();
- const uid = instance.uid;
- const index$1 = vue.ref(0);
- const panel = vue.computed(() => panels.value[index$1.value]);
- const setIndex = (val) => {
- index$1.value = val;
- };
- const panelSize = vue.computed(() => {
- var _a;
- if (!panel.value)
- return 0;
- return (_a = pxSizes.value[index$1.value]) != null ? _a : 0;
- });
- const nextSize = vue.computed(() => {
- var _a;
- if (!panel.value)
- return 0;
- return (_a = pxSizes.value[index$1.value + 1]) != null ? _a : 0;
- });
- const nextPanel = vue.computed(() => {
- if (panel.value) {
- return panels.value[index$1.value + 1];
- }
- return null;
- });
- const isResizable = vue.computed(() => {
- var _a;
- if (!nextPanel.value)
- return false;
- return props.resizable && ((_a = nextPanel.value) == null ? void 0 : _a.resizable) && (panelSize.value !== 0 || !props.min) && (nextSize.value !== 0 || !nextPanel.value.min);
- });
- const isShowBar = vue.computed(() => {
- if (!panel.value)
- return false;
- return index$1.value !== panels.value.length - 1;
- });
- const startCollapsible = vue.computed(() => usePanel.isCollapsible(panel.value, panelSize.value, nextPanel.value, nextSize.value));
- const endCollapsible = vue.computed(() => usePanel.isCollapsible(nextPanel.value, nextSize.value, panel.value, panelSize.value));
- function sizeToPx(str) {
- if (useSize.isPct(str)) {
- return useSize.getPct(str) * containerSize.value || 0;
- } else if (useSize.isPx(str)) {
- return useSize.getPx(str);
- }
- return str != null ? str : 0;
- }
- let isSizeUpdating = false;
- vue.watch(() => props.size, () => {
- if (!isSizeUpdating && panel.value) {
- if (!containerSize.value) {
- panel.value.size = props.size;
- return;
- }
- const size = sizeToPx(props.size);
- const maxSize = sizeToPx(props.max);
- const minSize = sizeToPx(props.min);
- const finalSize = Math.min(Math.max(size, minSize || 0), maxSize || size);
- if (finalSize !== size) {
- emits("update:size", finalSize);
- }
- panel.value.size = finalSize;
- }
- });
- vue.watch(() => {
- var _a;
- return (_a = panel.value) == null ? void 0 : _a.size;
- }, (val) => {
- if (val !== props.size) {
- isSizeUpdating = true;
- emits("update:size", val);
- vue.nextTick(() => isSizeUpdating = false);
- }
- });
- vue.watch(() => props.resizable, (val) => {
- if (panel.value) {
- panel.value.resizable = val;
- }
- });
- const _panel = vue.reactive({
- el: panelEl.value,
- uid,
- getVnode: () => instance.vnode,
- setIndex,
- ...props,
- collapsible: vue.computed(() => usePanel.getCollapsible(props.collapsible))
- });
- registerPanel(_panel);
- vue.onBeforeUnmount(() => unregisterPanel(_panel));
- return (_ctx, _cache) => {
- return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
- vue.createElementVNode("div", vue.mergeProps({
- ref_key: "panelEl",
- ref: panelEl,
- class: [vue.unref(ns).b()],
- style: { flexBasis: `${vue.unref(panelSize)}px` }
- }, _ctx.$attrs), [
- vue.renderSlot(_ctx.$slots, "default")
- ], 16),
- vue.unref(isShowBar) ? (vue.openBlock(), vue.createBlock(splitBar["default"], {
- key: 0,
- index: index$1.value,
- layout: vue.unref(layout),
- lazy: vue.unref(lazy),
- resizable: vue.unref(isResizable),
- "start-collapsible": vue.unref(startCollapsible),
- "end-collapsible": vue.unref(endCollapsible),
- onMoveStart: vue.unref(onMoveStart),
- onMoving: vue.unref(onMoving),
- onMoveEnd: vue.unref(onMoveEnd),
- onCollapse: vue.unref(onCollapse)
- }, {
- "start-collapsible": vue.withCtx(() => [
- vue.renderSlot(_ctx.$slots, "start-collapsible")
- ]),
- "end-collapsible": vue.withCtx(() => [
- vue.renderSlot(_ctx.$slots, "end-collapsible")
- ]),
- _: 3
- }, 8, ["index", "layout", "lazy", "resizable", "start-collapsible", "end-collapsible", "onMoveStart", "onMoving", "onMoveEnd", "onCollapse"])) : vue.createCommentVNode("v-if", true)
- ], 64);
- };
- }
- });
- var SplitPanel = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "split-panel.vue"]]);
- exports["default"] = SplitPanel;
- //# sourceMappingURL=split-panel2.js.map
|