vxe-pc-ui 4.4.25 → 4.5.0

package/es/split/src/split.js

@@ -0,0 +1,292 @@
+import { defineComponent, ref, h, reactive, provide, watch, nextTick, onMounted, onActivated } from 'vue';
+import { getConfig, createEvent, renderEmptyElement } from '../../ui';
+import { getSlotVNs } from '../../ui/src/vn';
+import { toCssUnit, isScale, addClass, removeClass } from '../../ui/src/dom';
+import { getGlobalDefaultConfig } from '../../ui/src/utils';
+import XEUtils from 'xe-utils';
+export default defineComponent({
+    name: 'VxeSplit',
+    props: {
+        resize: {
+            type: Boolean,
+            default: null
+        },
+        vertical: {
+            type: Boolean,
+            default: () => getConfig().split.vertical
+        },
+        border: {
+            type: Boolean,
+            default: () => getConfig().split.border
+        },
+        minWidth: {
+            type: [Number, String],
+            default: () => getConfig().split.minWidth
+        },
+        minHeight: {
+            type: [Number, String],
+            default: () => getConfig().split.minHeight
+        }
+    },
+    emits: [],
+    setup(props, context) {
+        const { emit, slots } = context;
+        const xID = XEUtils.uniqueId();
+        const refElem = ref();
+        const reactData = reactive({
+            staticItems: []
+        });
+        const internalData = {};
+        const computeMaps = {};
+        const refMaps = {
+            refElem
+        };
+        const $xeSplit = {
+            xID,
+            props,
+            context,
+            reactData,
+            internalData,
+            getRefMaps: () => refMaps,
+            getComputeMaps: () => computeMaps
+        };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $split: $xeSplit }, params));
+        };
+        const callSlot = (slotFunc, params) => {
+            if (slotFunc) {
+                if (XEUtils.isString(slotFunc)) {
+                    slotFunc = slots[slotFunc] || null;
+                }
+                if (XEUtils.isFunction(slotFunc)) {
+                    return getSlotVNs(slotFunc(params));
+                }
+            }
+            return [];
+        };
+        const recalculate = () => {
+            return nextTick().then(() => {
+                const { vertical, minWidth, minHeight } = props;
+                const { staticItems } = reactData;
+                const el = refElem.value;
+                if (!el) {
+                    return;
+                }
+                const wrapperWidth = el.clientWidth;
+                const wrapperHeight = el.clientHeight;
+                if (!wrapperWidth || !wrapperHeight) {
+                    return;
+                }
+                const residueItems = [];
+                if (vertical) {
+                    let countHeight = 0;
+                    staticItems.forEach(item => {
+                        const { height } = item;
+                        let itemHeight = 0;
+                        if (height) {
+                            if (isScale(height)) {
+                                itemHeight = wrapperHeight * XEUtils.toNumber(height);
+                            }
+                            else {
+                                itemHeight = XEUtils.toNumber(height);
+                            }
+                            item.renderHeight = itemHeight;
+                        }
+                        else {
+                            residueItems.push(item);
+                        }
+                        countHeight += itemHeight;
+                    });
+                    if (residueItems.length) {
+                        const reMeanHeight = (wrapperHeight - countHeight) / residueItems.length;
+                        residueItems.forEach(item => {
+                            item.renderHeight = Math.max(getGlobalDefaultConfig(item.minHeight, minHeight), reMeanHeight);
+                        });
+                    }
+                }
+                else {
+                    let countWidth = 0;
+                    staticItems.forEach(item => {
+                        const { width } = item;
+                        let itemWidth = 0;
+                        if (width) {
+                            if (isScale(width)) {
+                                itemWidth = wrapperWidth * XEUtils.toNumber(width);
+                            }
+                            else {
+                                itemWidth = XEUtils.toNumber(width);
+                            }
+                            item.renderWidth = itemWidth;
+                        }
+                        else {
+                            residueItems.push(item);
+                        }
+                        countWidth += itemWidth;
+                    });
+                    if (residueItems.length) {
+                        const reMeanWidth = (wrapperWidth - countWidth) / residueItems.length;
+                        residueItems.forEach(item => {
+                            item.renderWidth = Math.max(getGlobalDefaultConfig(item.minWidth, minWidth), reMeanWidth);
+                        });
+                    }
+                }
+            });
+        };
+        const dragEvent = (evnt) => {
+            evnt.preventDefault();
+            const { vertical, minWidth, minHeight } = props;
+            const { staticItems } = reactData;
+            const handleEl = evnt.currentTarget;
+            const el = refElem.value;
+            if (!el) {
+                return;
+            }
+            const itemId = handleEl.getAttribute('xid');
+            const itemIndex = XEUtils.findIndexOf(staticItems, item => item.id === itemId);
+            const item = staticItems[itemIndex];
+            if (!item) {
+                return;
+            }
+            const prevItem = staticItems[itemIndex - 1];
+            const prevItemEl = prevItem ? el.querySelector(`.vxe-split-item[xid="${prevItem.id}"]`) : null;
+            const currItemEl = item ? el.querySelector(`.vxe-split-item[xid="${item.id}"]`) : null;
+            const prevWidth = prevItemEl ? prevItemEl.clientWidth : 0;
+            const currWidth = currItemEl ? currItemEl.clientWidth : 0;
+            const prevHeight = prevItemEl ? prevItemEl.clientHeight : 0;
+            const currHeight = currItemEl ? currItemEl.clientHeight : 0;
+            const prevMinWidth = prevItem ? getGlobalDefaultConfig(prevItem.minWidth, minWidth) : minWidth;
+            const currMinWidth = getGlobalDefaultConfig(item.minWidth, minWidth);
+            const prevMinHeight = prevItem ? getGlobalDefaultConfig(prevItem.minHeight, minHeight) : minHeight;
+            const currMinHeight = getGlobalDefaultConfig(item.minHeight, minHeight);
+            const disX = evnt.clientX;
+            const disY = evnt.clientY;
+            addClass(el, 'is--drag');
+            document.onmousemove = evnt => {
+                evnt.preventDefault();
+                if (vertical) {
+                    const offsetTop = evnt.clientY - disY;
+                    if (offsetTop > 0) {
+                        if (prevItem) {
+                            if (currHeight - offsetTop >= currMinHeight) {
+                                prevItem.renderHeight = prevHeight + offsetTop;
+                                item.renderHeight = currHeight - offsetTop;
+                            }
+                        }
+                    }
+                    else {
+                        if (prevItem) {
+                            if (prevHeight + offsetTop >= prevMinHeight) {
+                                prevItem.renderHeight = prevHeight + offsetTop;
+                                item.renderHeight = currHeight - offsetTop;
+                            }
+                        }
+                    }
+                }
+                else {
+                    const offsetLeft = evnt.clientX - disX;
+                    if (offsetLeft > 0) {
+                        if (prevItem) {
+                            if (currWidth - offsetLeft >= currMinWidth) {
+                                prevItem.renderWidth = prevWidth + offsetLeft;
+                                item.renderWidth = currWidth - offsetLeft;
+                            }
+                        }
+                    }
+                    else {
+                        if (prevItem) {
+                            if (prevWidth + offsetLeft >= prevMinWidth) {
+                                prevItem.renderWidth = prevWidth + offsetLeft;
+                                item.renderWidth = currWidth - offsetLeft;
+                            }
+                        }
+                    }
+                }
+            };
+            document.onmouseup = () => {
+                document.onmousemove = null;
+                document.onmouseup = null;
+                removeClass(el, 'is--drag');
+            };
+        };
+        const splitMethods = {
+            dispatchEvent,
+            recalculate
+        };
+        const splitPrivateMethods = {};
+        Object.assign($xeSplit, splitMethods, splitPrivateMethods);
+        const renderItems = () => {
+            const { border, vertical } = props;
+            const { staticItems } = reactData;
+            const itemVNs = [];
+            staticItems.forEach((item, index) => {
+                const { id, slots, renderHeight, renderWidth } = item;
+                const defaultSlot = slots ? slots.default : null;
+                const stys = {};
+                if (vertical) {
+                    if (renderHeight) {
+                        stys.height = toCssUnit(renderHeight);
+                    }
+                }
+                else {
+                    if (renderWidth) {
+                        stys.width = toCssUnit(renderWidth);
+                    }
+                }
+                itemVNs.push(h('div', {
+                    xid: id,
+                    class: ['vxe-split-item', vertical ? 'is--vertical' : 'is--horizontal', {
+                            'is--border': border,
+                            'is--height': renderHeight,
+                            'is--width': renderWidth,
+                            'is--fill': !renderHeight && !renderWidth,
+                            'is--handle': index > 0
+                        }],
+                    style: stys
+                }, [
+                    index
+                        ? h('div', {
+                            xid: id,
+                            class: 'vxe-split-item-handle',
+                            onMousedown: dragEvent
+                        })
+                        : renderEmptyElement($xeSplit),
+                    h('div', {
+                        xid: id,
+                        class: 'vxe-split-item--wrapper'
+                    }, defaultSlot ? callSlot(defaultSlot, {}) : [])
+                ]));
+            });
+            return h('div', {
+                class: 'vxe-split-wrapper'
+            }, itemVNs);
+        };
+        const renderVN = () => {
+            const { vertical } = props;
+            const defaultSlot = slots.default;
+            return h('div', {
+                ref: refElem,
+                class: ['vxe-split', vertical ? 'is--vertical' : 'is--horizontal']
+            }, [
+                h('div', {
+                    class: 'vxe-split-slots'
+                }, defaultSlot ? defaultSlot({}) : []),
+                renderItems()
+            ]);
+        };
+        watch(() => reactData.staticItems, () => {
+            recalculate();
+        });
+        onMounted(() => {
+            recalculate();
+        });
+        onActivated(() => {
+            recalculate();
+        });
+        provide('$xeSplit', $xeSplit);
+        $xeSplit.renderVN = renderVN;
+        return $xeSplit;
+    },
+    render() {
+        return this.renderVN();
+    }
+});

package/es/split/src/util.js

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

package/es/split/style.css

@@ -0,0 +1,88 @@
+.vxe-split.is--vertical > .vxe-split-wrapper {
+  flex-direction: column;
+}
+.vxe-split.is--vertical > .vxe-split-wrapper > .vxe-split-item {
+  width: 100%;
+}
+.vxe-split.is--drag {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-split.is--drag > .vxe-split-wrapper > .vxe-split-item > .vxe-split-item--wrapper::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background: transparent;
+}
+
+.vxe-split-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.vxe-split-slots {
+  display: none;
+}
+
+.vxe-split-item-handle {
+  flex-shrink: 0;
+  background-color: var(--vxe-split-handle-bar-background-color);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.vxe-split-item-handle:hover {
+  background-color: var(--vxe-ui-font-primary-lighten-color);
+}
+.vxe-split-item-handle:active {
+  background-color: var(--vxe-ui-font-primary-darken-color);
+}
+
+.vxe-split-item--wrapper {
+  position: relative;
+  word-break: break-word;
+  overflow: auto;
+  flex-grow: 1;
+}
+
+.vxe-split-item {
+  display: flex;
+  position: relative;
+  overflow: auto;
+}
+.vxe-split-item.is--fill {
+  flex-grow: 1;
+}
+.vxe-split-item.is--width, .vxe-split-item.is--height {
+  flex-shrink: 0;
+}
+.vxe-split-item.is--border > .vxe-split-item--wrapper, .vxe-split-item.is--border > .vxe-split-item-handle {
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+.vxe-split-item.is--horizontal {
+  flex-direction: row;
+}
+.vxe-split-item.is--horizontal > .vxe-split-item-handle {
+  width: var(--vxe-split-handle-bar-width);
+  cursor: w-resize;
+}
+.vxe-split-item.is--horizontal.is--border > .vxe-split-item-handle {
+  border-width: 1px 0 1px 0;
+}
+.vxe-split-item.is--vertical {
+  flex-direction: column;
+}
+.vxe-split-item.is--vertical > .vxe-split-item-handle {
+  height: var(--vxe-split-handle-bar-height);
+  cursor: n-resize;
+}
+.vxe-split-item.is--vertical.is--border > .vxe-split-item-handle {
+  border-width: 0 1px 0 1px;
+}

package/es/split/style.min.css

@@ -0,0 +1 @@
+.vxe-split.is--vertical>.vxe-split-wrapper{flex-direction:column}.vxe-split.is--vertical>.vxe-split-wrapper>.vxe-split-item{width:100%}.vxe-split.is--drag{-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-split.is--drag>.vxe-split-wrapper>.vxe-split-item>.vxe-split-item--wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:0 0}.vxe-split-wrapper{height:100%;display:flex;flex-direction:row;overflow:hidden}.vxe-split-slots{display:none}.vxe-split-item-handle{flex-shrink:0;background-color:var(--vxe-split-handle-bar-background-color);-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxe-split-item-handle:hover{background-color:var(--vxe-ui-font-primary-lighten-color)}.vxe-split-item-handle:active{background-color:var(--vxe-ui-font-primary-darken-color)}.vxe-split-item--wrapper{position:relative;word-break:break-word;overflow:auto;flex-grow:1}.vxe-split-item{display:flex;position:relative;overflow:auto}.vxe-split-item.is--fill{flex-grow:1}.vxe-split-item.is--height,.vxe-split-item.is--width{flex-shrink:0}.vxe-split-item.is--border>.vxe-split-item--wrapper,.vxe-split-item.is--border>.vxe-split-item-handle{border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-split-item.is--horizontal{flex-direction:row}.vxe-split-item.is--horizontal>.vxe-split-item-handle{width:var(--vxe-split-handle-bar-width);cursor:w-resize}.vxe-split-item.is--horizontal.is--border>.vxe-split-item-handle{border-width:1px 0 1px 0}.vxe-split-item.is--vertical{flex-direction:column}.vxe-split-item.is--vertical>.vxe-split-item-handle{height:var(--vxe-split-handle-bar-height);cursor:n-resize}.vxe-split-item.is--vertical.is--border>.vxe-split-item-handle{border-width:0 1px 0 1px}

package/es/split-item/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeSplitItemComponent from '../split/src/split-item';
+import { dynamicApp } from '../dynamics';
+export const VxeSplitItem = Object.assign({}, VxeSplitItemComponent, {
+    install(app) {
+        app.component(VxeSplitItemComponent.name, VxeSplitItemComponent);
+    }
+});
+dynamicApp.use(VxeSplitItem);
+VxeUI.component(VxeSplitItemComponent);
+export const SplitItem = VxeSplitItem;
+export default VxeSplitItem;