vxe-pc-ui 4.10.10 → 4.10.11

package/es/{split/src/split-pane.js → splitter/src/splitter-panel.js}

@@ -1,10 +1,10 @@
 import { ref, h, reactive, watch, provide, inject, onMounted, onUnmounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import { createEvent } from '../../ui';
-import { assembleSplitItem, destroySplitItem } from './util';
+import { assembleSplitterItem, destroySplitterItem } from './util';
 import XEUtils from 'xe-utils';
 export default defineVxeComponent({
-    name: 'VxeSplitPane',
+    name: 'VxeSplitterPanel',
     props: {
         name: [Number, String],
         width: [Number, String],
@@ -24,7 +24,7 @@ export default defineVxeComponent({
     setup(props, context) {
         const { emit, slots } = context;
         const xID = XEUtils.uniqueId();
-        const $xeSplit = inject('$xeSplit', null);
+        const $xeSplitter = inject('$xeSplitter', null);
         const refElem = ref();
         const paneConfig = reactive({
             id: xID,
@@ -49,7 +49,7 @@ export default defineVxeComponent({
         const refMaps = {
             refElem
         };
-        const $xeSplitItem = {
+        const $xeSplitterItem = {
             xID,
             props,
             context,
@@ -59,13 +59,13 @@ export default defineVxeComponent({
             getComputeMaps: () => computeMaps
         };
         const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent(evnt, { $splitPane: $xeSplitItem }, params));
+            emit(type, createEvent(evnt, { $splitterPanel: $xeSplitterItem }, params));
         };
-        const splitPaneMethods = {
+        const splitterPanelMethods = {
             dispatchEvent
         };
-        const splitPanePrivateMethods = {};
-        Object.assign($xeSplitItem, splitPaneMethods, splitPanePrivateMethods);
+        const splitterPanelPrivateMethods = {};
+        Object.assign($xeSplitterItem, splitterPanelMethods, splitterPanelPrivateMethods);
         const renderVN = () => {
             return h('div', {
                 ref: refElem
@@ -91,18 +91,18 @@ export default defineVxeComponent({
         });
         onMounted(() => {
             const elem = refElem.value;
-            if ($xeSplit && elem) {
-                assembleSplitItem($xeSplit, elem, paneConfig);
+            if ($xeSplitter && elem) {
+                assembleSplitterItem($xeSplitter, elem, paneConfig);
             }
         });
         onUnmounted(() => {
-            if ($xeSplit) {
-                destroySplitItem($xeSplit, paneConfig);
+            if ($xeSplitter) {
+                destroySplitterItem($xeSplitter, paneConfig);
             }
         });
-        provide('$xeSplitItem', $xeSplitItem);
-        $xeSplitItem.renderVN = renderVN;
-        return $xeSplitItem;
+        provide('$xeSplitterItem', $xeSplitterItem);
+        $xeSplitterItem.renderVN = renderVN;
+        return $xeSplitterItem;
     },
     render() {
         return this.renderVN();

package/es/{split/src/split.js → splitter/src/splitter.js}

@@ -7,25 +7,25 @@ import { getGlobalDefaultConfig } from '../../ui/src/utils';
 import { warnLog, errLog } from '../../ui/src/log';
 import XEUtils from 'xe-utils';
 export default defineVxeComponent({
-    name: 'VxeSplit',
+    name: 'VxeSplitter',
     props: {
         width: [Number, String],
         height: [Number, String],
         vertical: {
             type: Boolean,
-            default: () => getConfig().split.vertical
+            default: () => getConfig().splitter.vertical
         },
         border: {
             type: Boolean,
-            default: () => getConfig().split.border
+            default: () => getConfig().splitter.border
         },
         padding: {
             type: Boolean,
-            default: () => getConfig().split.padding
+            default: () => getConfig().splitter.padding
         },
         resize: {
             type: Boolean,
-            default: () => getConfig().split.resize
+            default: () => getConfig().splitter.resize
         },
         items: Array,
         itemConfig: Object,
@@ -34,7 +34,7 @@ export default defineVxeComponent({
         actionConfig: Object,
         size: {
             type: String,
-            default: () => getConfig().split.size || getConfig().size
+            default: () => getConfig().splitter.size || getConfig().size
         }
     },
     emits: [
@@ -50,7 +50,7 @@ export default defineVxeComponent({
         const xID = XEUtils.uniqueId();
         const refElem = ref();
         const refBarInfoElem = ref();
-        const refResizableSplitTip = ref();
+        const refResizableSplitterTip = ref();
         const { computeSize } = useSize(props);
         const reactData = reactive({
             staticItems: [],
@@ -63,16 +63,16 @@ export default defineVxeComponent({
             wrapperHeight: 0
         };
         const computeItemOpts = computed(() => {
-            return Object.assign({}, getConfig().split.itemConfig, props.itemConfig);
+            return Object.assign({}, getConfig().splitter.itemConfig, props.itemConfig);
         });
         const computeBarOpts = computed(() => {
-            return Object.assign({}, getConfig().split.barConfig, props.barConfig);
+            return Object.assign({}, getConfig().splitter.barConfig, props.barConfig);
         });
         const computeResizeOpts = computed(() => {
-            return Object.assign({}, getConfig().split.resizeConfig, props.resizeConfig);
+            return Object.assign({}, getConfig().splitter.resizeConfig, props.resizeConfig);
         });
         const computeActionOpts = computed(() => {
-            return Object.assign({}, getConfig().split.actionConfig, props.actionConfig);
+            return Object.assign({}, getConfig().splitter.actionConfig, props.actionConfig);
         });
         const computeVisibleItems = computed(() => {
             return reactData.itemList.filter(item => item.isExpand);
@@ -127,7 +127,7 @@ export default defineVxeComponent({
         const refMaps = {
             refElem
         };
-        const $xeSplit = {
+        const $xeSplitter = {
             xID,
             props,
             context,
@@ -137,7 +137,7 @@ export default defineVxeComponent({
             getComputeMaps: () => computeMaps
         };
         const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent(evnt, { $split: $xeSplit }, params));
+            emit(type, createEvent(evnt, { $splitter: $xeSplitter }, params));
         };
         const callSlot = (slotFunc, params) => {
             if (slotFunc) {
@@ -204,13 +204,13 @@ export default defineVxeComponent({
             };
             reactData.itemList = list.map(item => {
                 if (item.showAction) {
-                    warnLog('vxe.error.removeProp', ['[split] show-action']);
+                    warnLog('vxe.error.removeProp', ['[splitter] show-action']);
                 }
                 if (item.slots) {
                     XEUtils.each(item.slots, (func) => {
                         if (!XEUtils.isFunction(func)) {
                             if (!slots[func]) {
-                                errLog('vxe.error.notSlot', [`[split] ${func}`]);
+                                errLog('vxe.error.notSlot', [`[splitter] ${func}`]);
                             }
                         }
                     });
@@ -220,7 +220,7 @@ export default defineVxeComponent({
                 });
             });
             if (staticItems.length) {
-                errLog('vxe.error.errConflicts', ['<vxe-split-pane ...>', 'items']);
+                errLog('vxe.error.errConflicts', ['<vxe-splitter-panel ...>', 'items']);
             }
             if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
                 errLog('vxe.error.errConflicts', ['action-config.showPrevButton | action-config.showNextButton', 'Only supports 2 item']);
@@ -233,6 +233,70 @@ export default defineVxeComponent({
         const reloadItem = (list) => {
             return handleLoadItem(list || [], true);
         };
+        const handleItemByName = (name) => {
+            const { itemList } = reactData;
+            let index = -1;
+            let currItem = null;
+            let prevItem = null;
+            let nextItem = null;
+            for (let i = 0; i < itemList.length; i++) {
+                const item = itemList[i];
+                if (item.name === name) {
+                    index = i;
+                    currItem = item;
+                    prevItem = itemList[i - 1] || null;
+                    nextItem = itemList[i + 1] || null;
+                    break;
+                }
+            }
+            return {
+                index,
+                currItem,
+                prevItem,
+                nextItem
+            };
+        };
+        const setItemExpand = (name, expanded) => {
+            const restItem = handleItemByName(name);
+            if (restItem) {
+                const { currItem, prevItem, nextItem } = restItem;
+                if (currItem) {
+                    if (expanded ? !currItem.isExpand : currItem.isExpand) {
+                        if (nextItem) {
+                            if (nextItem.isExpand) {
+                                handleItemActionEvent(null, currItem, nextItem, false);
+                            }
+                        }
+                        else if (prevItem) {
+                            if (prevItem.isExpand) {
+                                handleItemActionEvent(null, prevItem, currItem, true);
+                            }
+                        }
+                    }
+                }
+            }
+            return nextTick();
+        };
+        const toggleItemExpand = (name) => {
+            const restItem = handleItemByName(name);
+            if (restItem) {
+                const { currItem } = restItem;
+                if (currItem) {
+                    return setItemExpand(name, !currItem.isExpand);
+                }
+            }
+            return nextTick();
+        };
+        const getItemExpand = (name) => {
+            const restItem = handleItemByName(name);
+            if (restItem) {
+                const { currItem } = restItem;
+                if (currItem) {
+                    return currItem.isExpand;
+                }
+            }
+            return false;
+        };
         const recalculate = () => {
             return nextTick().then(() => {
                 const { vertical } = props;
@@ -340,8 +404,8 @@ export default defineVxeComponent({
             }
             const containerRect = el.getBoundingClientRect();
             const barRect = barEl.getBoundingClientRect();
-            const rsSplitLineEl = refResizableSplitTip.value;
-            const rsSplitTipEl = rsSplitLineEl ? rsSplitLineEl.children[0] : null;
+            const rsSplitterLineEl = refResizableSplitterTip.value;
+            const rsSplitterTipEl = rsSplitterLineEl ? rsSplitterLineEl.children[0] : null;
             const itemOpts = computeItemOpts.value;
             const resizeOpts = computeResizeOpts.value;
             const { immediate } = resizeOpts;
@@ -372,11 +436,11 @@ export default defineVxeComponent({
             let nextResizeHeight = 0;
             let offsetTop = startOffsetTop;
             const handleReStyle = (evnt) => {
-                if (!rsSplitLineEl) {
+                if (!rsSplitterLineEl) {
                     return;
                 }
-                const rsNumPrevEl = rsSplitTipEl ? rsSplitTipEl.children[0] : null;
-                const rsNumNextEl = rsSplitTipEl ? rsSplitTipEl.children[1] : null;
+                const rsNumPrevEl = rsSplitterTipEl ? rsSplitterTipEl.children[0] : null;
+                const rsNumNextEl = rsSplitterTipEl ? rsSplitterTipEl.children[1] : null;
                 if (vertical) {
                     let tipWidth = 0;
                     if (rsNumPrevEl) {
@@ -403,10 +467,10 @@ export default defineVxeComponent({
                     if (rsLeft > containerRect.width - tipWidth - 1) {
                         rsLeft = containerRect.width - tipWidth - 1;
                     }
-                    rsSplitLineEl.style.left = '0';
-                    rsSplitLineEl.style.top = `${offsetTop}px`;
-                    if (rsSplitTipEl) {
-                        rsSplitTipEl.style.left = `${rsLeft}px`;
+                    rsSplitterLineEl.style.left = '0';
+                    rsSplitterLineEl.style.top = `${offsetTop}px`;
+                    if (rsSplitterTipEl) {
+                        rsSplitterTipEl.style.left = `${rsLeft}px`;
                     }
                 }
                 else {
@@ -435,10 +499,10 @@ export default defineVxeComponent({
                     if (rsTop > containerRect.height - tipHeight - 1) {
                         rsTop = containerRect.height - tipHeight - 1;
                     }
-                    rsSplitLineEl.style.top = '0';
-                    rsSplitLineEl.style.left = `${offsetLeft}px`;
-                    if (rsSplitTipEl) {
-                        rsSplitTipEl.style.top = `${rsTop}px`;
+                    rsSplitterLineEl.style.top = '0';
+                    rsSplitterLineEl.style.left = `${offsetLeft}px`;
+                    if (rsSplitterTipEl) {
+                        rsSplitterTipEl.style.top = `${rsTop}px`;
                     }
                 }
             };
@@ -487,7 +551,7 @@ export default defineVxeComponent({
                         nextEl.style.width = toCssUnit(nextResizeWidth);
                     }
                 }
-                if (rsSplitLineEl) {
+                if (rsSplitterLineEl) {
                     handleReStyle(evnt);
                 }
                 dispatchEvent('resize-drag', { prevItem, nextItem, offsetHeight: targetOffsetHeight, offsetWidth: targetOffsetWidth }, evnt);
@@ -499,16 +563,16 @@ export default defineVxeComponent({
             document.onmouseup = (evnt) => {
                 document.onmousemove = null;
                 document.onmouseup = null;
-                if (rsSplitLineEl) {
-                    rsSplitLineEl.style.display = '';
+                if (rsSplitterLineEl) {
+                    rsSplitterLineEl.style.display = '';
                 }
                 handleUpdate();
                 removeClass(el, 'is--drag');
                 dispatchEvent('resize-end', { prevItem, nextItem, offsetHeight: targetOffsetHeight, offsetWidth: targetOffsetWidth }, evnt);
                 recalculate();
             };
-            if (rsSplitLineEl) {
-                rsSplitLineEl.style.display = 'block';
+            if (rsSplitterLineEl) {
+                rsSplitterLineEl.style.display = 'block';
                 handleReStyle(evnt);
             }
             handleDrag(evnt);
@@ -556,7 +620,9 @@ export default defineVxeComponent({
                     nextItem.foldWidth = (prevItem.resizeWidth || prevItem.renderWidth) + (nextItem.resizeWidth || nextItem.renderWidth);
                 }
             }
-            dispatchEvent('toggle-expand', { prevItem, nextItem, expanded, item }, evnt);
+            if (evnt) {
+                dispatchEvent('toggle-expand', { prevItem, nextItem, expanded, item }, evnt);
+            }
             recalculate();
         };
         const handlePrevActionDblclickEvent = (evnt) => {
@@ -638,15 +704,18 @@ export default defineVxeComponent({
         const handleGlobalResizeEvent = () => {
             recalculate();
         };
-        const splitMethods = {
+        const splitterMethods = {
             dispatchEvent,
+            setItemExpand,
+            toggleItemExpand,
+            getItemExpand,
             recalculate,
             reset,
             loadItem,
             reloadItem
         };
-        const splitPrivateMethods = {};
-        Object.assign($xeSplit, splitMethods, splitPrivateMethods);
+        const splitterPrivateMethods = {};
+        Object.assign($xeSplitter, splitterMethods, splitterPrivateMethods);
         const renderHandleBar = (prevItem, nextItem) => {
             const { border, resize, vertical } = props;
             const { itemList } = reactData;
@@ -658,23 +727,23 @@ export default defineVxeComponent({
             const resizeOpts = computeResizeOpts.value;
             const { immediate } = resizeOpts;
             return h('div', {
-                class: ['vxe-split-pane-handle', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+                class: ['vxe-splitter-panel-handle', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
                         'is--resize': resize,
                         'is--border': border
                     }]
             }, [
                 h('div', {
-                    class: 'vxe-split-pane-handle-bar',
+                    class: 'vxe-splitter-panel-handle-bar',
                     style: barStyle,
                     onMousedown: dragEvent
                 }),
                 itemList.length === 2
                     ? h('div', {
-                        class: 'vxe-split-pane-action-btn-wrapper'
+                        class: 'vxe-splitter-panel-action-btn-wrapper'
                     }, [
                         showPrevButton && nextItem.isExpand
                             ? h('div', {
-                                class: 'vxe-split-pane-action-btn',
+                                class: 'vxe-splitter-panel-action-btn',
                                 onDblclick: handlePrevActionDblclickEvent,
                                 onClick: handlePrevActionClickEvent
                             }, [
@@ -682,10 +751,10 @@ export default defineVxeComponent({
                                     class: getActionIcon(prevItem, nextItem, false)
                                 })
                             ])
-                            : renderEmptyElement($xeSplit),
+                            : renderEmptyElement($xeSplitter),
                         showNextButton && prevItem.isExpand
                             ? h('div', {
-                                class: 'vxe-split-pane-action-btn',
+                                class: 'vxe-splitter-panel-action-btn',
                                 onDblclick: handleNextActionDblclickEvent,
                                 onClick: handleNextActionClickEvent
                             }, [
@@ -693,9 +762,9 @@ export default defineVxeComponent({
                                     class: getActionIcon(prevItem, nextItem, true)
                                 })
                             ])
-                            : renderEmptyElement($xeSplit)
+                            : renderEmptyElement($xeSplitter)
                     ])
-                    : renderEmptyElement($xeSplit)
+                    : renderEmptyElement($xeSplitter)
             ]);
         };
         const renderItems = () => {
@@ -742,7 +811,7 @@ export default defineVxeComponent({
                 }
                 itemVNs.push(h('div', {
                     itemid: id,
-                    class: ['vxe-split-pane', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+                    class: ['vxe-splitter-panel', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
                             [`size--${vSize}`]: vSize,
                             'is--resize': resize,
                             'is--padding': padding,
@@ -757,10 +826,10 @@ export default defineVxeComponent({
                 }, [
                     h('div', {
                         itemid: id,
-                        class: 'vxe-split-pane--wrapper'
+                        class: 'vxe-splitter-panel--wrapper'
                     }, [
                         h('div', {
-                            class: 'vxe-split-pane--inner'
+                            class: 'vxe-splitter-panel--inner'
                         }, defaultSlot ? callSlot(defaultSlot, { name, isExpand }) : [])
                     ])
                 ]));
@@ -769,7 +838,7 @@ export default defineVxeComponent({
                 }
             });
             return h('div', {
-                class: 'vxe-split-wrapper'
+                class: 'vxe-splitter-wrapper'
             }, itemVNs);
         };
         const renderVN = () => {
@@ -787,38 +856,38 @@ export default defineVxeComponent({
             }
             return h('div', {
                 ref: refElem,
-                class: ['vxe-split', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
+                class: ['vxe-splitter', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy', {
                         [`size--${vSize}`]: vSize
                     }],
                 style: stys
             }, [
                 h('div', {
-                    class: 'vxe-split-slots'
+                    class: 'vxe-splitter-slots'
                 }, defaultSlot ? defaultSlot({}) : []),
                 renderItems(),
                 h('div', {
-                    ref: refResizableSplitTip,
-                    class: ['vxe-split--resizable-split-tip', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy']
+                    ref: refResizableSplitterTip,
+                    class: ['vxe-splitter--resizable-splitter-tip', vertical ? 'is--vertical' : 'is--horizontal', immediate ? 'is-resize--immediate' : 'is-resize--lazy']
                 }, showTip
                     ? [
                         h('div', {
-                            class: 'vxe-split--resizable-split-tip-number'
+                            class: 'vxe-splitter--resizable-splitter-tip-number'
                         }, [
                             h('div', {
-                                class: 'vxe-split--resizable-split-number-prev'
+                                class: 'vxe-splitter--resizable-splitter-number-prev'
                             }),
                             h('div', {
-                                class: 'vxe-split--resizable-split-number-next'
+                                class: 'vxe-splitter--resizable-splitter-number-next'
                             })
                         ])
                     ]
                     : []),
                 h('div', {
-                    class: 'vxe-split--render-vars'
+                    class: 'vxe-splitter--render-vars'
                 }, [
                     h('div', {
                         ref: refBarInfoElem,
-                        class: 'vxe-split--handle-bar-info'
+                        class: 'vxe-splitter--handle-bar-info'
                     })
                 ])
             ]);
@@ -837,15 +906,15 @@ export default defineVxeComponent({
             const actionOpts = computeActionOpts.value;
             const { showPrevButton, showNextButton } = actionOpts;
             if (props.items && props.items.length) {
-                errLog('vxe.error.errConflicts', ['<vxe-split-pane ...>', 'items']);
+                errLog('vxe.error.errConflicts', ['<vxe-splitter-panel ...>', 'items']);
             }
             reactData.itemList = val || [];
             if ((showPrevButton || showNextButton) && reactData.itemList.length > 2) {
-                errLog('vxe.error.modelConflicts', ['[split] action-config.showPrevButton | action-config.showNextButton', '<vxe-split-pane ...> Only supports 2 panel']);
+                errLog('vxe.error.modelConflicts', ['[splitter] action-config.showPrevButton | action-config.showNextButton', '<vxe-splitter-panel ...> Only supports 2 panel']);
             }
             reactData.itemList.forEach(item => {
                 if (item.showAction) {
-                    warnLog('vxe.error.removeProp', ['[split] showAction']);
+                    warnLog('vxe.error.removeProp', ['[splitter] showAction']);
                 }
             });
             recalculate();
@@ -864,15 +933,15 @@ export default defineVxeComponent({
             }
             const actionOpts = computeActionOpts.value;
             if (actionOpts.direction) {
-                errLog('vxe.error.delProp', ['[split] action-config.direction', 'action-config.showPrevButton | action-config.showNextButton']);
+                errLog('vxe.error.delProp', ['[splitter] action-config.direction', 'action-config.showPrevButton | action-config.showNextButton']);
             }
-            globalEvents.on($xeSplit, 'resize', handleGlobalResizeEvent);
+            globalEvents.on($xeSplitter, 'resize', handleGlobalResizeEvent);
         });
         onUnmounted(() => {
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }
-            globalEvents.off($xeSplit, 'resize');
+            globalEvents.off($xeSplitter, 'resize');
         });
         onActivated(() => {
             recalculate();
@@ -880,9 +949,9 @@ export default defineVxeComponent({
         if (props.items) {
             loadItem(props.items);
         }
-        provide('$xeSplit', $xeSplit);
-        $xeSplit.renderVN = renderVN;
-        return $xeSplit;
+        provide('$xeSplitter', $xeSplitter);
+        $xeSplitter.renderVN = renderVN;
+        return $xeSplitter;
     },
     render() {
         return this.renderVN();

package/es/splitter/src/util.js

@@ -0,0 +1,17 @@
+import XEUtils from 'xe-utils';
+export function assembleSplitterItem($xeSplitter, elem, paneConfig) {
+    const staticItems = $xeSplitter.reactData.staticItems;
+    const parentElem = elem.parentNode;
+    if (parentElem) {
+        staticItems.splice(XEUtils.arrayIndexOf(parentElem.children, elem), 0, paneConfig);
+        $xeSplitter.reactData.staticItems = staticItems.slice(0);
+    }
+}
+export function destroySplitterItem($xeSplitter, paneConfig) {
+    const staticItems = $xeSplitter.reactData.staticItems;
+    const index = XEUtils.findIndexOf(staticItems, item => item.id === paneConfig.id);
+    if (index > -1) {
+        staticItems.splice(index, 1);
+    }
+    $xeSplitter.reactData.staticItems = staticItems.slice(0);
+}