vxe-pc-ui 3.16.0 → 3.16.2

package/es/split/style.css

@@ -0,0 +1,295 @@
+.vxe-splitter {
+  position: relative;
+  width: 100%;
+}
+.vxe-splitter.is--vertical > .vxe-splitter-wrapper {
+  flex-direction: column;
+}
+.vxe-splitter.is--vertical > .vxe-splitter-wrapper > .vxe-splitter-panel {
+  width: 100%;
+}
+.vxe-splitter.is--drag {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.vxe-splitter.is--drag.is-resize--immediate.is--horizontal {
+  cursor: w-resize;
+}
+.vxe-splitter.is--drag.is-resize--immediate.is--vertical {
+  cursor: n-resize;
+}
+.vxe-splitter.is--drag.is-resize--lazy.is--horizontal {
+  cursor: col-resize;
+}
+.vxe-splitter.is--drag.is-resize--lazy.is--vertical {
+  cursor: row-resize;
+}
+.vxe-splitter.is--drag > .vxe-splitter-wrapper > .vxe-splitter-panel > .vxe-splitter-panel--wrapper::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background: transparent;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.vxe-splitter--resizable-splitter-tip {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 7;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: col-resize;
+}
+.vxe-splitter--resizable-splitter-tip.is-resize--lazy:before {
+  content: "";
+  display: block;
+  height: 100%;
+  background-color: var(--vxe-ui-splitter-resizable-drag-line-color);
+}
+.vxe-splitter--resizable-splitter-tip.is--horizontal {
+  width: 1px;
+  height: 100%;
+}
+.vxe-splitter--resizable-splitter-tip.is--horizontal .vxe-splitter--resizable-splitter-number-prev {
+  right: 0;
+}
+.vxe-splitter--resizable-splitter-tip.is--horizontal .vxe-splitter--resizable-splitter-number-next {
+  left: 1px;
+}
+.vxe-splitter--resizable-splitter-tip.is--vertical {
+  width: 100%;
+  height: 1px;
+}
+.vxe-splitter--resizable-splitter-tip.is--vertical .vxe-splitter--resizable-splitter-number-prev {
+  bottom: 0;
+}
+.vxe-splitter--resizable-splitter-tip.is--vertical .vxe-splitter--resizable-splitter-number-next {
+  top: 1px;
+}
+
+.vxe-splitter--resizable-splitter-tip-number {
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  pointer-events: none;
+}
+
+.vxe-splitter--resizable-splitter-number-prev,
+.vxe-splitter--resizable-splitter-number-next {
+  position: absolute;
+  padding: 0.25em 0.25em;
+  font-size: 12px;
+  border-radius: var(--vxe-ui-border-radius);
+  white-space: nowrap;
+  color: #ffffff;
+  background-color: var(--vxe-ui-splitter-resizable-drag-line-color);
+}
+
+.vxe-splitter-wrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+.vxe-splitter-slots {
+  display: none;
+}
+
+.vxe-splitter-panel-handle {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.vxe-splitter-panel--wrapper {
+  position: relative;
+  word-break: break-word;
+  overflow: hidden;
+  flex-grow: 1;
+}
+
+.vxe-splitter-panel--inner {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+.vxe-splitter-panel--inner > .vxe-splitter {
+  height: 100%;
+}
+
+.vxe-splitter-panel-handle-bar {
+  background-color: var(--vxe-ui-splitter-handle-bar-background-color);
+}
+.vxe-splitter-panel-handle-bar:hover {
+  background-color: var(--vxe-ui-splitter-handle-bar-hover-background-color);
+}
+
+.vxe-splitter-panel-action-btn-wrapper {
+  position: absolute;
+  display: flex;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  pointer-events: none;
+}
+
+.vxe-splitter-panel-action-btn {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--vxe-ui-base-border-radius);
+  color: var(--vxe-ui-layout-background-color);
+  background-color: var(--vxe-ui-splitter-handle-button-background-color);
+  border: 1px solid var(--vxe-ui-input-border-color);
+  cursor: pointer;
+  pointer-events: all;
+  transition: transform 0.1s ease-in-out;
+}
+.vxe-splitter-panel-action-btn:hover {
+  color: #ffffff;
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-splitter-panel-action-btn:active {
+  transform: scale(0.9);
+}
+.vxe-splitter-panel-action-btn > i {
+  font-size: 0.6em;
+}
+
+.vxe-splitter-panel-handle.is--horizontal {
+  flex-direction: row;
+}
+.vxe-splitter-panel-handle.is--horizontal.is--border {
+  border-width: 1px 0 1px 0;
+}
+.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper {
+  flex-direction: column;
+}
+.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper div {
+  margin-top: 1em;
+}
+.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper div:first-child {
+  margin-top: 0;
+}
+.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-handle-bar {
+  width: var(--vxe-ui-splitter-handle-bar-horizontal-width);
+  height: 100%;
+}
+.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn {
+  width: var(--vxe-ui-splitter-handle-bar-horizontal-width);
+  height: var(--vxe-ui-splitter-handle-bar-horizontal-height);
+}
+.vxe-splitter-panel-handle.is--vertical {
+  flex-direction: column;
+}
+.vxe-splitter-panel-handle.is--vertical.is--border {
+  border-width: 0 1px 0 1px;
+}
+.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper {
+  flex-direction: row;
+}
+.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper div {
+  margin-left: 1em;
+}
+.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper div:first-child {
+  margin-left: 0;
+}
+.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-handle-bar {
+  height: var(--vxe-ui-splitter-handle-bar-vertical-height);
+  width: 100%;
+}
+.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn {
+  width: var(--vxe-ui-splitter-handle-bar-vertical-width);
+  height: var(--vxe-ui-splitter-handle-bar-vertical-height);
+}
+.vxe-splitter-panel-handle.is--resize.is-resize--immediate.is--horizontal .vxe-splitter-panel-handle-bar {
+  cursor: w-resize;
+}
+.vxe-splitter-panel-handle.is--resize.is-resize--immediate.is--vertical .vxe-splitter-panel-handle-bar {
+  cursor: n-resize;
+}
+.vxe-splitter-panel-handle.is--resize.is-resize--immediate > .vxe-splitter-panel-handle-bar:active {
+  background-color: var(--vxe-ui-font-primary-color);
+}
+.vxe-splitter-panel-handle.is--resize.is-resize--lazy.is--horizontal .vxe-splitter-panel-handle-bar {
+  cursor: col-resize;
+}
+.vxe-splitter-panel-handle.is--resize.is-resize--lazy.is--vertical .vxe-splitter-panel-handle-bar {
+  cursor: row-resize;
+}
+
+.vxe-splitter-panel {
+  display: flex;
+  position: relative;
+  overflow: hidden;
+}
+.vxe-splitter-panel.is--fill {
+  flex-grow: 1;
+}
+.vxe-splitter-panel.is--hidden.is--horizontal {
+  width: 0;
+}
+.vxe-splitter-panel.is--hidden.is--vertical {
+  height: 0;
+}
+.vxe-splitter-panel.is--padding > .vxe-splitter-panel--wrapper {
+  padding: var(--vxe-ui-layout-padding-default);
+}
+.vxe-splitter-panel.is--hidden:not(.is--fill), .vxe-splitter-panel.is--width:not(.is--fill), .vxe-splitter-panel.is--height:not(.is--fill) {
+  flex-shrink: 0;
+}
+.vxe-splitter-panel.is--border > .vxe-splitter-panel--wrapper {
+  border: 1px solid var(--vxe-ui-base-popup-border-color);
+}
+
+.vxe-splitter--render-vars {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+.vxe-splitter--render-vars .vxe-splitter--handle-bar-info {
+  width: var(--vxe-ui-splitter-handle-bar-horizontal-width);
+  height: var(--vxe-ui-splitter-handle-bar-vertical-height);
+}
+
+.vxe-modal--content > .vxe-splitter {
+  height: 100%;
+}
+
+.vxe-splitter {
+  font-size: var(--vxe-ui-font-size-default);
+}
+.vxe-splitter.size--medium {
+  font-size: var(--vxe-ui-font-size-medium);
+}
+.vxe-splitter.size--small {
+  font-size: var(--vxe-ui-font-size-small);
+}
+.vxe-splitter.size--mini {
+  font-size: var(--vxe-ui-font-size-mini);
+}

package/es/split/style.min.css

@@ -0,0 +1 @@
+.vxe-splitter{position:relative;width:100%}.vxe-splitter.is--vertical>.vxe-splitter-wrapper{flex-direction:column}.vxe-splitter.is--vertical>.vxe-splitter-wrapper>.vxe-splitter-panel{width:100%}.vxe-splitter.is--drag{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-splitter.is--drag.is-resize--immediate.is--horizontal{cursor:w-resize}.vxe-splitter.is--drag.is-resize--immediate.is--vertical{cursor:n-resize}.vxe-splitter.is--drag.is-resize--lazy.is--horizontal{cursor:col-resize}.vxe-splitter.is--drag.is-resize--lazy.is--vertical{cursor:row-resize}.vxe-splitter.is--drag>.vxe-splitter-wrapper>.vxe-splitter-panel>.vxe-splitter-panel--wrapper::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:0 0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-splitter--resizable-splitter-tip{display:none;position:absolute;top:0;left:0;z-index:7;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:col-resize}.vxe-splitter--resizable-splitter-tip.is-resize--lazy:before{content:"";display:block;height:100%;background-color:var(--vxe-ui-splitter-resizable-drag-line-color)}.vxe-splitter--resizable-splitter-tip.is--horizontal{width:1px;height:100%}.vxe-splitter--resizable-splitter-tip.is--horizontal .vxe-splitter--resizable-splitter-number-prev{right:0}.vxe-splitter--resizable-splitter-tip.is--horizontal .vxe-splitter--resizable-splitter-number-next{left:1px}.vxe-splitter--resizable-splitter-tip.is--vertical{width:100%;height:1px}.vxe-splitter--resizable-splitter-tip.is--vertical .vxe-splitter--resizable-splitter-number-prev{bottom:0}.vxe-splitter--resizable-splitter-tip.is--vertical .vxe-splitter--resizable-splitter-number-next{top:1px}.vxe-splitter--resizable-splitter-tip-number{position:absolute;top:0;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}.vxe-splitter--resizable-splitter-number-next,.vxe-splitter--resizable-splitter-number-prev{position:absolute;padding:.25em .25em;font-size:12px;border-radius:var(--vxe-ui-border-radius);white-space:nowrap;color:#fff;background-color:var(--vxe-ui-splitter-resizable-drag-line-color)}.vxe-splitter-wrapper{height:100%;display:flex;flex-direction:row;overflow:hidden}.vxe-splitter-slots{display:none}.vxe-splitter-panel-handle{display:flex;position:relative;flex-shrink:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vxe-splitter-panel--wrapper{position:relative;word-break:break-word;overflow:hidden;flex-grow:1}.vxe-splitter-panel--inner{height:100%;width:100%;overflow:auto}.vxe-splitter-panel--inner>.vxe-splitter{height:100%}.vxe-splitter-panel-handle-bar{background-color:var(--vxe-ui-splitter-handle-bar-background-color)}.vxe-splitter-panel-handle-bar:hover{background-color:var(--vxe-ui-splitter-handle-bar-hover-background-color)}.vxe-splitter-panel-action-btn-wrapper{position:absolute;display:flex;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;pointer-events:none}.vxe-splitter-panel-action-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;border-radius:var(--vxe-ui-base-border-radius);color:var(--vxe-ui-layout-background-color);background-color:var(--vxe-ui-splitter-handle-button-background-color);border:1px solid var(--vxe-ui-input-border-color);cursor:pointer;pointer-events:all;transition:transform .1s ease-in-out}.vxe-splitter-panel-action-btn:hover{color:#fff;background-color:var(--vxe-ui-font-primary-color)}.vxe-splitter-panel-action-btn:active{transform:scale(.9)}.vxe-splitter-panel-action-btn>i{font-size:.6em}.vxe-splitter-panel-handle.is--horizontal{flex-direction:row}.vxe-splitter-panel-handle.is--horizontal.is--border{border-width:1px 0 1px 0}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper{flex-direction:column}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper div{margin-top:1em}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn-wrapper div:first-child{margin-top:0}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-handle-bar{width:var(--vxe-ui-splitter-handle-bar-horizontal-width);height:100%}.vxe-splitter-panel-handle.is--horizontal .vxe-splitter-panel-action-btn{width:var(--vxe-ui-splitter-handle-bar-horizontal-width);height:var(--vxe-ui-splitter-handle-bar-horizontal-height)}.vxe-splitter-panel-handle.is--vertical{flex-direction:column}.vxe-splitter-panel-handle.is--vertical.is--border{border-width:0 1px 0 1px}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper{flex-direction:row}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper div{margin-left:1em}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn-wrapper div:first-child{margin-left:0}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-handle-bar{height:var(--vxe-ui-splitter-handle-bar-vertical-height);width:100%}.vxe-splitter-panel-handle.is--vertical .vxe-splitter-panel-action-btn{width:var(--vxe-ui-splitter-handle-bar-vertical-width);height:var(--vxe-ui-splitter-handle-bar-vertical-height)}.vxe-splitter-panel-handle.is--resize.is-resize--immediate.is--horizontal .vxe-splitter-panel-handle-bar{cursor:w-resize}.vxe-splitter-panel-handle.is--resize.is-resize--immediate.is--vertical .vxe-splitter-panel-handle-bar{cursor:n-resize}.vxe-splitter-panel-handle.is--resize.is-resize--immediate>.vxe-splitter-panel-handle-bar:active{background-color:var(--vxe-ui-font-primary-color)}.vxe-splitter-panel-handle.is--resize.is-resize--lazy.is--horizontal .vxe-splitter-panel-handle-bar{cursor:col-resize}.vxe-splitter-panel-handle.is--resize.is-resize--lazy.is--vertical .vxe-splitter-panel-handle-bar{cursor:row-resize}.vxe-splitter-panel{display:flex;position:relative;overflow:hidden}.vxe-splitter-panel.is--fill{flex-grow:1}.vxe-splitter-panel.is--hidden.is--horizontal{width:0}.vxe-splitter-panel.is--hidden.is--vertical{height:0}.vxe-splitter-panel.is--padding>.vxe-splitter-panel--wrapper{padding:var(--vxe-ui-layout-padding-default)}.vxe-splitter-panel.is--height:not(.is--fill),.vxe-splitter-panel.is--hidden:not(.is--fill),.vxe-splitter-panel.is--width:not(.is--fill){flex-shrink:0}.vxe-splitter-panel.is--border>.vxe-splitter-panel--wrapper{border:1px solid var(--vxe-ui-base-popup-border-color)}.vxe-splitter--render-vars{width:0;height:0;overflow:hidden}.vxe-splitter--render-vars .vxe-splitter--handle-bar-info{width:var(--vxe-ui-splitter-handle-bar-horizontal-width);height:var(--vxe-ui-splitter-handle-bar-vertical-height)}.vxe-modal--content>.vxe-splitter{height:100%}.vxe-splitter{font-size:var(--vxe-ui-font-size-default)}.vxe-splitter.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-splitter.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-splitter.size--mini{font-size:var(--vxe-ui-font-size-mini)}

package/es/split-pane/index.js

@@ -0,0 +1,13 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeSplitPaneComponent from '../splitter/src/splitter-panel';
+import { dynamicApp } from '../dynamics';
+export const VxeSplitPane = Object.assign({}, VxeSplitPaneComponent, {
+    install(app) {
+        app.component('VxeSplitPane', VxeSplitPaneComponent);
+        app.component('VxeSplitItem', VxeSplitPaneComponent);
+    }
+});
+dynamicApp.use(VxeSplitPane);
+VxeUI.component(VxeSplitPaneComponent);
+export const SplitPane = VxeSplitPane;
+export default VxeSplitPane;

package/es/splitter/index.js

@@ -0,0 +1,12 @@
+import { VxeUI } from '@vxe-ui/core';
+import VxeSplitterComponent from './src/splitter';
+import { dynamicApp } from '../dynamics';
+export const VxeSplitter = Object.assign({}, VxeSplitterComponent, {
+    install(app) {
+        app.component(VxeSplitterComponent.name, VxeSplitterComponent);
+    }
+});
+dynamicApp.use(VxeSplitter);
+VxeUI.component(VxeSplitterComponent);
+export const Splitter = VxeSplitter;
+export default VxeSplitter;

package/es/splitter/src/splitter-panel.js

@@ -0,0 +1,149 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import { globalMixins, createEvent } from '../../ui';
+import { assembleSplitterItem, destroySplitterItem } from './util';
+import XEUtils from 'xe-utils';
+export default {
+    name: 'VxeSplitterPanel',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    props: {
+        name: [Number, String],
+        width: [Number, String],
+        height: [Number, String],
+        minWidth: {
+            type: [Number, String],
+            default: () => null
+        },
+        minHeight: {
+            type: [Number, String],
+            default: () => null
+        },
+        // 已废弃
+        showAction: Boolean
+    },
+    inject: {
+        $xeSplitter: {
+            default: null
+        }
+    },
+    provide() {
+        const $xeSplitterItem = this;
+        return {
+            $xeSplitterItem
+        };
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {};
+        const paneConfig = {
+            id: xID,
+            name: '',
+            width: 0,
+            height: 0,
+            minWidth: 0,
+            minHeight: 0,
+            showAction: false,
+            isExpand: true,
+            renderWidth: 0,
+            resizeWidth: 0,
+            foldWidth: 0,
+            renderHeight: 0,
+            resizeHeight: 0,
+            foldHeight: 0,
+            slots: {}
+        };
+        return {
+            xID,
+            reactData,
+            paneConfig
+        };
+    },
+    computed: Object.assign({}, {}),
+    watch: {
+        name(val) {
+            const $xeSplitterItem = this;
+            const paneConfig = $xeSplitterItem.paneConfig;
+            paneConfig.name = val;
+        },
+        width(val) {
+            const $xeSplitterItem = this;
+            const paneConfig = $xeSplitterItem.paneConfig;
+            paneConfig.width = val;
+        },
+        height(val) {
+            const $xeSplitterItem = this;
+            const paneConfig = $xeSplitterItem.paneConfig;
+            paneConfig.height = val;
+        },
+        minWidth(val) {
+            const $xeSplitterItem = this;
+            const paneConfig = $xeSplitterItem.paneConfig;
+            paneConfig.minWidth = val;
+        },
+        minHeight(val) {
+            const $xeSplitterItem = this;
+            const paneConfig = $xeSplitterItem.paneConfig;
+            paneConfig.minHeight = val;
+        },
+        showAction(val) {
+            const $xeSplitterItem = this;
+            const paneConfig = $xeSplitterItem.paneConfig;
+            paneConfig.showAction = val;
+        }
+    },
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeSplitterItem = this;
+            $xeSplitterItem.$emit(type, createEvent(evnt, { $splitterPanel: $xeSplitterItem }, params));
+        },
+        //
+        // Render
+        //
+        renderVN(h) {
+            return h('div', {
+                ref: 'refElem'
+            });
+        }
+    },
+    created() {
+        const $xeSplitterItem = this;
+        const props = $xeSplitterItem;
+        const slots = $xeSplitterItem.$scopedSlots;
+        const paneConfig = $xeSplitterItem.paneConfig;
+        Object.assign(paneConfig, {
+            name: props.name,
+            width: props.width,
+            height: props.height,
+            minWidth: props.minWidth,
+            minHeight: props.minHeight,
+            showAction: props.showAction,
+            slots
+        });
+    },
+    mounted() {
+        const $xeSplitterItem = this;
+        const slots = $xeSplitterItem.$scopedSlots;
+        const paneConfig = $xeSplitterItem.paneConfig;
+        const $xeSplitter = $xeSplitterItem.$xeSplitter;
+        paneConfig.slots = slots;
+        const elem = $xeSplitterItem.$refs.refElem;
+        if ($xeSplitter && elem) {
+            assembleSplitterItem($xeSplitter, elem, paneConfig);
+        }
+    },
+    beforeDestroy() {
+        const $xeSplitterItem = this;
+        const paneConfig = $xeSplitterItem.paneConfig;
+        const $xeSplitter = $xeSplitterItem.$xeSplitter;
+        if ($xeSplitter) {
+            destroySplitterItem($xeSplitter, paneConfig);
+        }
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};