vxe-pc-ui 4.10.10 → 4.10.11

package/lib/vxe-splitter/style/style.css

@@ -0,0 +1,288 @@
+.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;
+          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;
+          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;
+          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;
+          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;
+          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;
+}
+
+.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;
+  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, .vxe-splitter-panel.is--width, .vxe-splitter-panel.is--height {
+  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/lib/vxe-splitter/style/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;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;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;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;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;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}.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;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,.vxe-splitter-panel.is--hidden,.vxe-splitter-panel.is--width{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/lib/vxe-splitter-panel/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports.default = void 0;
+var _splitterPanel = _interopRequireWildcard(require("../splitter-panel"));
+Object.keys(_splitterPanel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _splitterPanel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _splitterPanel[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _default = exports.default = _splitterPanel.default;

package/lib/vxe-splitter-panel/index.min.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var _exportNames={},_splitterPanel=(exports.default=void 0,_interopRequireWildcard(require("../splitter-panel")));function _getRequireWildcardCache(e){var t,r;return"function"!=typeof WeakMap?null:(t=new WeakMap,r=new WeakMap,(_getRequireWildcardCache=function(e){return e?r:t})(e))}function _interopRequireWildcard(e,t){if(!t&&e&&e.__esModule)return e;if(null===e||"object"!=typeof e&&"function"!=typeof e)return{default:e};t=_getRequireWildcardCache(t);if(t&&t.has(e))return t.get(e);var r,n,a={__proto__:null},l=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((n=l?Object.getOwnPropertyDescriptor(e,r):null)&&(n.get||n.set)?Object.defineProperty(a,r,n):a[r]=e[r]);return a.default=e,t&&t.set(e,a),a}Object.keys(_splitterPanel).forEach(function(e){"default"===e||"__esModule"===e||Object.prototype.hasOwnProperty.call(_exportNames,e)||e in exports&&exports[e]===_splitterPanel[e]||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return _splitterPanel[e]}})});var _default=exports.default=_splitterPanel.default;

package/lib/vxe-splitter-panel/style/index.js

@@ -0,0 +1 @@
+require('./style.css')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.10.10",
+  "version": "4.10.11",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/components.ts

@@ -65,6 +65,8 @@ import VxeRate from './rate'
 import VxeResult from './result'
 import VxeRow from './row'
 import VxeSelect from './select'
+import VxeSplitter from './splitter'
+import VxeSplitterPanel from './splitter-panel'
 import VxeSplit from './split'
 import VxeSplitPane from './split-pane'
 import VxeSlider from './slider'
@@ -154,6 +156,8 @@ const components = [
   VxeResult,
   VxeRow,
   VxeSelect,
+  VxeSplitter,
+  VxeSplitterPanel,
   VxeSplit,
   VxeSplitPane,
   VxeSlider,
@@ -260,6 +264,8 @@ export * from './rate'
 export * from './result'
 export * from './row'
 export * from './select'
+export * from './splitter'
+export * from './splitter-panel'
 export * from './split'
 export * from './split-pane'
 export * from './slider'

package/packages/split/index.ts

@@ -1,11 +1,11 @@
 import { App } from 'vue'
 import { VxeUI } from '@vxe-ui/core'
-import VxeSplitComponent from './src/split'
+import VxeSplitComponent from '../splitter/src/splitter'
 import { dynamicApp } from '../dynamics'
 
 export const VxeSplit = Object.assign({}, VxeSplitComponent, {
   install (app: App) {
-    app.component(VxeSplitComponent.name as string, VxeSplitComponent)
+    app.component('VxeSplit', VxeSplitComponent)
   }
 })
 

package/packages/split-pane/index.ts

@@ -1,11 +1,11 @@
 import { App } from 'vue'
 import { VxeUI } from '@vxe-ui/core'
-import VxeSplitPaneComponent from '../split/src/split-pane'
+import VxeSplitPaneComponent from '../splitter/src/splitter-panel'
 import { dynamicApp } from '../dynamics'
 
 export const VxeSplitPane = Object.assign({}, VxeSplitPaneComponent, {
   install (app: App) {
-    app.component(VxeSplitPaneComponent.name as string, VxeSplitPaneComponent)
+    app.component('VxeSplitPane', VxeSplitPaneComponent)
     app.component('VxeSplitItem', VxeSplitPaneComponent)
   }
 })

package/packages/splitter/index.ts

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

package/packages/splitter/src/splitter-panel.ts

@@ -0,0 +1,145 @@
+import { PropType, ref, h, reactive, watch, provide, inject, onMounted, onUnmounted } from 'vue'
+import { defineVxeComponent } from '../../ui/src/comp'
+import { createEvent } from '../../ui'
+import { assembleSplitterItem, destroySplitterItem } from './util'
+import XEUtils from 'xe-utils'
+
+import type { SplitterItemReactData, VxeSplitterPanelPropTypes, SplitterItemPrivateRef, SplitterItemInternalData, SplitterItemMethods, VxeSplitterPanelPrivateComputed, SplitterItemPrivateMethods, VxeSplitterPanelEmits, VxeSplitterPanelConstructor, ValueOf, VxeSplitterDefines, VxeSplitterPanelPrivateMethods, VxeSplitterConstructor, VxeSplitterPrivateMethods } from '../../../types'
+
+export default defineVxeComponent({
+  name: 'VxeSplitterPanel',
+  props: {
+    name: [Number, String] as PropType<VxeSplitterPanelPropTypes.Name>,
+    width: [Number, String] as PropType<VxeSplitterPanelPropTypes.Width>,
+    height: [Number, String] as PropType<VxeSplitterPanelPropTypes.Height>,
+    minWidth: {
+      type: [Number, String] as PropType<VxeSplitterPanelPropTypes.MinWidth>,
+      default: () => null
+    },
+    minHeight: {
+      type: [Number, String] as PropType<VxeSplitterPanelPropTypes.MinHeight>,
+      default: () => null
+    },
+
+    // 已废弃
+    showAction: Boolean as PropType<VxeSplitterPanelPropTypes.ShowAction>
+  },
+  emits: [
+  ] as VxeSplitterPanelEmits,
+  setup (props, context) {
+    const { emit, slots } = context
+
+    const xID = XEUtils.uniqueId()
+
+    const $xeSplitter = inject<(VxeSplitterConstructor & VxeSplitterPrivateMethods) | null>('$xeSplitter', null)
+
+    const refElem = ref<HTMLDivElement>()
+
+    const paneConfig = reactive<VxeSplitterDefines.PaneConfig>({
+      id: xID,
+      name: props.name,
+      width: props.width,
+      height: props.height,
+      minWidth: props.minWidth,
+      minHeight: props.minHeight,
+      showAction: props.showAction,
+      isExpand: true,
+      renderWidth: 0,
+      resizeWidth: 0,
+      foldWidth: 0,
+      renderHeight: 0,
+      resizeHeight: 0,
+      foldHeight: 0,
+      slots: slots
+    })
+
+    const reactData = reactive<SplitterItemReactData>({
+    })
+
+    const internalData: SplitterItemInternalData = {
+    }
+
+    const computeMaps: VxeSplitterPanelPrivateComputed = {
+    }
+
+    const refMaps: SplitterItemPrivateRef = {
+      refElem
+    }
+
+    const $xeSplitterItem = {
+      xID,
+      props,
+      context,
+      reactData,
+      internalData,
+
+      getRefMaps: () => refMaps,
+      getComputeMaps: () => computeMaps
+    } as unknown as VxeSplitterPanelConstructor & VxeSplitterPanelPrivateMethods
+
+    const dispatchEvent = (type: ValueOf<VxeSplitterPanelEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $splitterPanel: $xeSplitterItem }, params))
+    }
+
+    const splitterPanelMethods: SplitterItemMethods = {
+      dispatchEvent
+    }
+
+    const splitterPanelPrivateMethods: SplitterItemPrivateMethods = {
+    }
+
+    Object.assign($xeSplitterItem, splitterPanelMethods, splitterPanelPrivateMethods)
+
+    const renderVN = () => {
+      return h('div', {
+        ref: refElem
+      })
+    }
+
+    watch(() => props.name, (val) => {
+      paneConfig.name = val
+    })
+
+    watch(() => props.width, (val) => {
+      paneConfig.width = val
+    })
+
+    watch(() => props.height, (val) => {
+      paneConfig.height = val
+    })
+
+    watch(() => props.minWidth, (val) => {
+      paneConfig.minWidth = val
+    })
+
+    watch(() => props.minHeight, (val) => {
+      paneConfig.minHeight = val
+    })
+
+    watch(() => props.showAction, (val) => {
+      paneConfig.showAction = val
+    })
+
+    onMounted(() => {
+      const elem = refElem.value
+      if ($xeSplitter && elem) {
+        assembleSplitterItem($xeSplitter, elem, paneConfig)
+      }
+    })
+
+    onUnmounted(() => {
+      if ($xeSplitter) {
+        destroySplitterItem($xeSplitter, paneConfig)
+      }
+    })
+
+    provide('$xeSplitterItem', $xeSplitterItem)
+
+    $xeSplitterItem.renderVN = renderVN
+
+    return $xeSplitterItem
+  },
+  render () {
+    return this.renderVN()
+  }
+})