vue-devui 1.0.0-alpha.6 → 1.0.0-beta.12

package/splitter/index.es.js

@@ -1 +1,636 @@
-var e=Object.defineProperty,n=("undefined"!=typeof require&&require,(n,t,i)=>(((n,t,i)=>{t in n?e(n,t,{enumerable:!0,configurable:!0,writable:!0,value:i}):n[t]=i})(n,"symbol"!=typeof t?t+"":t,i),i));import{defineComponent as t,inject as i,reactive as o,ref as l,onMounted as s,watch as a,computed as r,withDirectives as p,createVNode as u,provide as d,nextTick as c,resolveComponent as v,onUpdated as m}from"vue";const g={orientation:{type:String,default:"horizontal"},splitBarSize:{type:String,default:"2px"},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean,default:!0}};function z(e,n){const t={},i=Object.keys(n);return i.forEach((n=>{t[n]=e.style[n]})),i.forEach((t=>{e.style[t]=n[t]})),t}function f(e,n){if(e.classList)return e.classList.contains(n);return` ${e.className} `.indexOf(` ${n} `)>-1}function h(e,n){e.classList?e.classList.add(n):f(e,n)||(e.className=`${e.className} ${n}`)}function S(e,n){if(e.classList)e.classList.remove(n);else if(f(e,n)){const t=e.className;e.className=` ${t} `.replace(` ${n} `," ")}}const x={mounted(e,{value:n}){e.$value=n,n.enableResize&&function(e){P(e,"mousedown",y)}(e)},unmounted(e,{value:n}){n.enableResize&&b(e,"mousedown",y)}};function P(e,n,t){e.addEventListener&&e.addEventListener(n,t)}function b(e,n,t){e.removeEventListener&&e.removeEventListener(n,t)}function y(e){var n;const t=null==(n=null==e?void 0:e.target)?void 0:n.$value;function i(e){t.onDragEvent(B(e))}t&&(P(document,"mousemove",i),P(document,"mouseup",(function e(n){b(document,"mousemove",i),b(document,"mouseup",e),t.onReleaseEvent(B(n))})),t.onPressEvent(B(e)))}function B(e){return{pageX:e.pageX,pageY:e.pageY,clientX:e.clientX,clientY:e.clientY,offsetX:e.offsetX,offsetY:e.offsetY,type:e.type,originalEvent:e}}var C=t({name:"DSplitterBar",props:{index:{type:Number},orientation:{type:String,required:!0},splitBarSize:{type:String,required:!0},disabledBarSize:{type:String,default:"1px"},showCollapseButton:{type:Boolean}},setup(e){const n=i("splitterStore"),t=o({wrapperClass:`devui-splitter-bar devui-splitter-bar-${e.orientation}`}),d=l();s((()=>{a([()=>e.splitBarSize,d],(([e,n])=>{n instanceof HTMLElement&&z(n,{flexBasis:e})}),{immediate:!0}),a([()=>n.state.panes,d],(([i,o])=>{n.isStaticBar(e.index)?z(o,{flexBasis:e.disabledBarSize}):t.wrapperClass+=" resizable"}),{deep:!0})}));const c={pageX:0,pageY:0,originalX:0,originalY:0};let v;const m={enableResize:!0,onPressEvent:function({originalEvent:t}){t.stopPropagation(),n.isResizable(e.index)&&(v=n.dragState(e.index),c.originalX=t.pageX,c.originalY=t.pageY)},onDragEvent:function({originalEvent:t}){if(t.stopPropagation(),!n.isResizable(e.index))return;let i;c.pageX=t.pageX,c.pageY=t.pageY,i="vertical"===e.orientation?c.pageY-c.originalY:c.pageX-c.originalX,n.setSize(v,i)},onReleaseEvent:function({originalEvent:t}){if(t.stopPropagation(),!n.isResizable(e.index))return;let i;c.pageX=t.pageX,c.pageY=t.pageY,i="vertical"===e.orientation?c.pageY-c.originalY:c.pageX-c.originalX,n.setSize(v,i)}},g=(e,t)=>({pane:n.getPane(e),nearPane:n.getPane(t)}),f=(e,n,t)=>{var i,o,l,s;return{"devui-collapse":(null==(o=null==(i=null==e?void 0:e.component)?void 0:i.props)?void 0:o.collapsible)&&t,collapsed:null==(s=null==(l=null==e?void 0:e.component)?void 0:l.props)?void 0:s.collapsed,hidden:n.collapsed}},P=r((()=>{var n,t;const{pane:i,nearPane:o}=g(e.index,e.index+1),l="after"!==(null==(t=null==(n=null==i?void 0:i.component)?void 0:n.props)?void 0:t.collapseDirection)||0===e.index;return f(i,o,l)})),b=r((()=>{var t,i;const{pane:o,nearPane:l}=g(e.index+1,e.index),s="before"!==(null==(i=null==(t=null==o?void 0:o.component)?void 0:t.props)?void 0:i.collapseDirection)||e.index+1===n.state.paneCount-1;return f(o,l,s)})),y=()=>{var n,t,i,o;const{pane:l,nearPane:s}=g(e.index,e.index+1);(null==(t=null==(n=null==l?void 0:l.component)?void 0:n.props)?void 0:t.collapsed)||(null==(o=null==(i=null==s?void 0:s.component)?void 0:i.props)?void 0:o.collapsed)?h(d.value,"none-resizable"):S(d.value,"none-resizable")},B=t=>{n.tooglePane(e.index,e.index+1,t),y()},C=t=>{n.tooglePane(e.index+1,e.index,t),y()};return s((()=>{B(!0),C(!0)})),()=>p(u("div",{class:t.wrapperClass,ref:d},[e.showCollapseButton?u("div",{class:["prev",P.value],onClick:()=>{B()}},null):null,u("div",{class:"devui-resize-handle"},null),e.showCollapseButton?u("div",{class:["next",b.value],onClick:()=>C()},null):null]),[[x,m]])}});class E{constructor(){n(this,"state"),this.state=o({panes:[],splitterContainerSize:0,paneCount:0})}setPanes({panes:e}){this.state.panes=e.map(((e,n)=>{var t;return e.component&&(e.component.exposed.order.value=2*n),e.getPaneSize=null==(t=null==e?void 0:e.component)?void 0:t.exposed.getPaneSize,e})),this.state.paneCount=e.length}setSplitter({containerSize:e}){this.state.splitterContainerSize=e}getPane(e){if(!this.state.panes||e<0||e>=this.state.panes.length)throw new Error("no pane can return.");return this.state.panes[e]}dragState(e){const n=this.getPane(e),t=this.getPane(e+1),i=n.getPaneSize()+t.getPaneSize();return{prev:{index:e,initialSize:n.getPaneSize(),minSize:this.toPixels(n.component.props.minSize)||i-this.toPixels(t.component.props.maxSize)||0,maxSize:this.toPixels(n.component.props.maxSize)||i-this.toPixels(t.component.props.minSize)||i},next:{index:e+1,initialSize:t.getPaneSize(),minSize:this.toPixels(t.component.props.minSize)||i-this.toPixels(n.component.props.maxSize)||0,maxSize:this.toPixels(t.component.props.maxSize)||i-this.toPixels(n.component.props.minSize)||i}}}clamp(e,n,t){return Math.min(n,Math.max(e,t))}resize(e,n){const t=this.getPane(e.index),i=this.state.splitterContainerSize,o=this.clamp(e.minSize,e.maxSize,e.initialSize+n);let l="";l=this.isPercent(t.component.props.size)?o/i*100+"%":o+"px",t.component.props.size=l,t.component.emit("sizeChange",l)}isResizable(e){var n,t,i,o,l,s,a,r;const p=this.getPane(e),u=this.getPane(e+1),d=(null==(t=null==(n=null==p?void 0:p.component)?void 0:n.props)?void 0:t.collapsed)||(null==(o=null==(i=null==u?void 0:u.component)?void 0:i.props)?void 0:o.collapsed);return(null==(s=null==(l=null==p?void 0:p.component)?void 0:l.props)?void 0:s.resizable)&&(null==(r=null==(a=null==u?void 0:u.component)?void 0:a.props)?void 0:r.resizable)&&!d}isStaticBar(e){var n,t,i,o;const l=this.getPane(e),s=this.getPane(e+1);return!((null==(t=null==(n=null==l?void 0:l.component)?void 0:n.props)?void 0:t.resizable)&&(null==(o=null==(i=null==s?void 0:s.component)?void 0:i.props)?void 0:o.resizable))}isPercent(e){return/%$/.test(e)}toPixels(e){let n=parseFloat(e);return this.isPercent(e)&&(n=this.state.splitterContainerSize*n/100),n}tooglePane(e,n,t){var i,o,l,s,a,r,p,u,d,c,v,m,g;const z=this.getPane(e),f=this.getPane(n);(null==(o=null==(i=null==z?void 0:z.component)?void 0:i.props)?void 0:o.collapsible)&&(z.component.props.collapsed=t?null==(s=null==(l=null==z?void 0:z.component)?void 0:l.props)?void 0:s.collapsed:!(null==(r=null==(a=null==z?void 0:z.component)?void 0:a.props)?void 0:r.collapsed),null==(c=null==(p=null==f?void 0:f.component)?void 0:p.exposed)||c.toggleNearPaneFlexGrow(null==(d=null==(u=null==z?void 0:z.component)?void 0:u.props)?void 0:d.collapsed),null==(g=null==z?void 0:z.component)||g.emit("collapsedChange",null==(m=null==(v=null==z?void 0:z.component)?void 0:v.props)?void 0:m.collapsed))}setSize(e,n){const t=this.getPane(e.prev.index),i=this.getPane(e.next.index);t.component.props.size&&i.component.props.size?(this.resize(e.prev,n),this.resize(e.next,-n)):i.component.props.size?this.resize(e.next,-n):this.resize(e.prev,n)}}var w=t({name:"DSplitter",components:{DSplitterBar:C},props:g,emits:[],setup(e,n){var t,i;const a=new E,r=o({panes:[]});r.panes=(null==(i=(t=n.slots).DSplitterPane)?void 0:i.call(t))||[],a.setPanes({panes:r.panes});const p=l();return d("orientation",e.orientation),d("splitterStore",a),s((()=>{c((()=>{let n=0;n="vertical"===e.orientation?p.value.clientHeight:p.value.clientWidth,a.setSplitter({containerSize:n})}))})),()=>{const{splitBarSize:n,orientation:t,showCollapseButton:i}=e;return u("div",{class:["devui-splitter",`devui-splitter-${t}`],ref:p},[r.panes,r.panes.filter(((e,n,t)=>n!==t.length-1)).map(((e,o)=>u(v("d-splitter-bar"),{key:o,style:"order: "+(2*o+1),splitBarSize:n,orientation:t,index:o,showCollapseButton:i},null)))])}}});var X=t({name:"DSplitterPane",props:{size:{type:String},minSize:{type:String},maxSize:{type:String},resizable:{type:Boolean,default:!0},collapsible:{type:Boolean,default:!1},collapsed:{type:Boolean,default:!1},collapseDirection:{type:String,default:"both"},shrink:{type:Boolean,default:!1},shrinkWidth:{type:Number,default:36}},emits:["sizeChange","collapsedChange"],setup(e,{slots:n,expose:t}){const o=i("splitterStore"),r=l(),p=l(),d=i("orientation");let v="";s((()=>{v=e.size,o.setPanes({panes:o.state.panes})})),m((()=>{o.setPanes({panes:o.state.panes})}));s((()=>{a([p,r],(([e,n])=>{n instanceof HTMLElement&&z(n,{order:e})})),a((()=>e.size),(e=>{const n=r.value;n.style.flexBasis=e;const t="devui-splitter-pane-fixed";e?h(n,t):S(n,t)}),{immediate:!0}),a((()=>e.collapsed),(n=>{const t="devui-splitter-pane-hidden";c((()=>{const i=r.value;n?h(i,t):S(i,t),n&&e.shrink?(S(i,t),z(i,{flexBasis:`${e.shrinkWidth}px`})):z(i,{flexBasis:v})}))}),{immediate:!0})}));return t({order:p,getPaneSize:()=>{const e=null==r?void 0:r.value;return"vertical"===d?e.offsetHeight:e.offsetWidth},toggleNearPaneFlexGrow:e=>{c((()=>{const n="devui-splitter-pane-grow";f(r.value,n)?S(r.value,n):e&&h(r.value,n)}))}}),()=>{var e;return u("div",{class:"devui-splitter-pane",ref:r},[null==(e=n.default)?void 0:e.call(n)])}}});w.install=function(e){e.component(w.name,w),e.component(X.name,X)};var Y={title:"Splitter 分割器",category:"布局",status:"已完成",install(e){e.use(w)}};export{w as Splitter,Y as default};
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineComponent, inject, reactive, ref, watch, computed, onMounted, withDirectives, createVNode, provide, onUnmounted, resolveComponent, onUpdated } from "vue";
+const splitterProps = {
+  orientation: {
+    type: String,
+    default: "horizontal"
+  },
+  splitBarSize: {
+    type: String,
+    default: "2px"
+  },
+  disabledBarSize: {
+    type: String,
+    default: "1px"
+  },
+  showCollapseButton: {
+    type: Boolean,
+    default: true
+  }
+};
+function setStyle(element, style) {
+  const oldStyle = {};
+  const styleKeys = Object.keys(style);
+  styleKeys.forEach((key) => {
+    oldStyle[key] = element.style[key];
+  });
+  styleKeys.forEach((key) => {
+    element.style[key] = style[key];
+  });
+  return oldStyle;
+}
+function hasClass(el, className) {
+  if (el.classList) {
+    return el.classList.contains(className);
+  }
+  const originClass = el.className;
+  return ` ${originClass} `.indexOf(` ${className} `) > -1;
+}
+function addClass(el, className) {
+  if (el.classList) {
+    el.classList.add(className);
+  } else {
+    if (!hasClass(el, className)) {
+      el.className = `${el.className} ${className}`;
+    }
+  }
+}
+function removeClass(el, className) {
+  if (el.classList) {
+    el.classList.remove(className);
+  } else {
+    if (hasClass(el, className)) {
+      const originClass = el.className;
+      el.className = ` ${originClass} `.replace(` ${className} `, " ");
+    }
+  }
+}
+const resize = {
+  mounted(el, { value }) {
+    el.$value = value;
+    if (value.enableResize) {
+      bindEvent(el);
+    }
+  },
+  unmounted(el, { value }) {
+    if (value.enableResize) {
+      unbind(el, "mousedown", onMousedown);
+    }
+  }
+};
+function bindEvent(el) {
+  bind(el, "mousedown", onMousedown);
+}
+function bind(el, event, callback) {
+  el.addEventListener && el.addEventListener(event, callback);
+}
+function unbind(el, event, callback) {
+  el.removeEventListener && el.removeEventListener(event, callback);
+}
+function onMousedown(e) {
+  var _a;
+  const $value = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.$value;
+  if (!$value)
+    return;
+  bind(document, "mousemove", onMousemove);
+  bind(document, "mouseup", onMouseup);
+  $value.onPressEvent(normalizeEvent(e));
+  function onMousemove(e2) {
+    $value.onDragEvent(normalizeEvent(e2));
+  }
+  function onMouseup(e2) {
+    unbind(document, "mousemove", onMousemove);
+    unbind(document, "mouseup", onMouseup);
+    $value.onReleaseEvent(normalizeEvent(e2));
+  }
+}
+function normalizeEvent(e) {
+  return {
+    pageX: e.pageX,
+    pageY: e.pageY,
+    clientX: e.clientX,
+    clientY: e.clientY,
+    offsetX: e.offsetX,
+    offsetY: e.offsetY,
+    type: e.type,
+    originalEvent: e
+  };
+}
+var splitterBar = "";
+const splitterBarProps = {
+  index: {
+    type: Number
+  },
+  orientation: {
+    type: String,
+    required: true
+  },
+  splitBarSize: {
+    type: String,
+    required: true
+  },
+  disabledBarSize: {
+    type: String,
+    default: "1px"
+  },
+  showCollapseButton: {
+    type: Boolean
+  }
+};
+var DSplitterBar = defineComponent({
+  name: "DSplitterBar",
+  props: splitterBarProps,
+  setup(props) {
+    const store = inject("splitterStore");
+    const state = reactive({
+      wrapperClass: `devui-splitter-bar devui-splitter-bar-${props.orientation}`
+    });
+    const domRef = ref();
+    watch([() => props.splitBarSize, domRef], ([curSplitBarSize, ele]) => {
+      if (!(ele instanceof HTMLElement)) {
+        return;
+      }
+      setStyle(ele, {
+        flexBasis: curSplitBarSize
+      });
+    }, {
+      immediate: true
+    });
+    watch([() => store.state.panes, domRef], ([panes, ele]) => {
+      if (!store.isStaticBar(props.index)) {
+        state.wrapperClass += " resizable";
+      } else {
+        setStyle(ele, {
+          flexBasis: props.disabledBarSize
+        });
+      }
+    }, {
+      deep: true
+    });
+    const coordinate = {
+      pageX: 0,
+      pageY: 0,
+      originalX: 0,
+      originalY: 0
+    };
+    let initState;
+    const resizeProp = {
+      enableResize: true,
+      onPressEvent: function({
+        originalEvent
+      }) {
+        originalEvent.stopPropagation();
+        if (!store.isResizable(props.index))
+          return;
+        initState = store.dragState(props.index);
+        coordinate.originalX = originalEvent.pageX;
+        coordinate.originalY = originalEvent.pageY;
+      },
+      onDragEvent: function({
+        originalEvent
+      }) {
+        originalEvent.stopPropagation();
+        if (!store.isResizable(props.index))
+          return;
+        coordinate.pageX = originalEvent.pageX;
+        coordinate.pageY = originalEvent.pageY;
+        let distance;
+        if (props.orientation === "vertical") {
+          distance = coordinate.pageY - coordinate.originalY;
+        } else {
+          distance = coordinate.pageX - coordinate.originalX;
+        }
+        store.setSize(initState, distance);
+      },
+      onReleaseEvent: function({
+        originalEvent
+      }) {
+        originalEvent.stopPropagation();
+        if (!store.isResizable(props.index))
+          return;
+        coordinate.pageX = originalEvent.pageX;
+        coordinate.pageY = originalEvent.pageY;
+        let distance;
+        if (props.orientation === "vertical") {
+          distance = coordinate.pageY - coordinate.originalY;
+        } else {
+          distance = coordinate.pageX - coordinate.originalX;
+        }
+        store.setSize(initState, distance);
+      }
+    };
+    const queryPanes = (index2, nearIndex) => {
+      const pane = store.getPane(index2);
+      const nearPane = store.getPane(nearIndex);
+      return {
+        pane,
+        nearPane
+      };
+    };
+    const generateCollapseClass = (pane, nearPane, showIcon) => {
+      var _a, _b, _c, _d;
+      const isCollapsible = ((_b = (_a = pane == null ? void 0 : pane.component) == null ? void 0 : _a.props) == null ? void 0 : _b.collapsible) && showIcon;
+      const isCollapsed = (_d = (_c = pane == null ? void 0 : pane.component) == null ? void 0 : _c.props) == null ? void 0 : _d.collapsed;
+      const isNearPaneCollapsed = nearPane.collapsed;
+      return {
+        "devui-collapse": isCollapsible,
+        collapsed: isCollapsed,
+        hidden: isNearPaneCollapsed
+      };
+    };
+    const prevClass = computed(() => {
+      var _a, _b;
+      const {
+        pane,
+        nearPane
+      } = queryPanes(props.index, props.index + 1);
+      const showIcon = ((_b = (_a = pane == null ? void 0 : pane.component) == null ? void 0 : _a.props) == null ? void 0 : _b.collapseDirection) !== "after" || props.index === 0;
+      return generateCollapseClass(pane, nearPane, showIcon);
+    });
+    const nextClass = computed(() => {
+      var _a, _b;
+      const {
+        pane,
+        nearPane
+      } = queryPanes(props.index + 1, props.index);
+      const showIcon = ((_b = (_a = pane == null ? void 0 : pane.component) == null ? void 0 : _a.props) == null ? void 0 : _b.collapseDirection) !== "before" || props.index + 1 === store.state.paneCount - 1;
+      return generateCollapseClass(pane, nearPane, showIcon);
+    });
+    const toggleResize = () => {
+      var _a, _b, _c, _d;
+      const {
+        pane,
+        nearPane
+      } = queryPanes(props.index, props.index + 1);
+      const isCollapsed = ((_b = (_a = pane == null ? void 0 : pane.component) == null ? void 0 : _a.props) == null ? void 0 : _b.collapsed) || ((_d = (_c = nearPane == null ? void 0 : nearPane.component) == null ? void 0 : _c.props) == null ? void 0 : _d.collapsed);
+      if (isCollapsed) {
+        addClass(domRef.value, "none-resizable");
+      } else {
+        removeClass(domRef.value, "none-resizable");
+      }
+    };
+    const handleCollapsePrePane = (lockStatus) => {
+      store.tooglePane(props.index, props.index + 1, lockStatus);
+      toggleResize();
+    };
+    const handleCollapseNextPane = (lockStatus) => {
+      store.tooglePane(props.index + 1, props.index, lockStatus);
+      toggleResize();
+    };
+    const initialCollapseStatus = () => {
+      handleCollapsePrePane(true);
+      handleCollapseNextPane(true);
+    };
+    onMounted(() => {
+      initialCollapseStatus();
+    });
+    return () => {
+      return withDirectives(createVNode("div", {
+        "class": state.wrapperClass,
+        "ref": domRef
+      }, [props.showCollapseButton ? createVNode("div", {
+        "class": ["prev", prevClass.value],
+        "onClick": () => {
+          handleCollapsePrePane();
+        }
+      }, null) : null, createVNode("div", {
+        "class": "devui-resize-handle"
+      }, null), props.showCollapseButton ? createVNode("div", {
+        "class": ["next", nextClass.value],
+        "onClick": () => handleCollapseNextPane()
+      }, null) : null]), [[resize, resizeProp]]);
+    };
+  }
+});
+class SplitterStore {
+  constructor() {
+    __publicField(this, "state");
+    this.state = reactive({
+      panes: [],
+      splitterContainerSize: 0,
+      paneCount: 0
+    });
+  }
+  setPanes({ panes }) {
+    this.state.panes = panes.map((pane, index2) => {
+      var _a;
+      if (pane.component) {
+        pane.component.exposed.order.value = index2 * 2;
+      }
+      pane.getPaneSize = (_a = pane == null ? void 0 : pane.component) == null ? void 0 : _a.exposed.getPaneSize;
+      return pane;
+    });
+    this.state.paneCount = panes.length;
+  }
+  setSplitter({ containerSize }) {
+    this.state.splitterContainerSize = containerSize;
+  }
+  getPane(index2) {
+    if (!this.state.panes || index2 < 0 || index2 >= this.state.panes.length) {
+      throw new Error("no pane can return.");
+    }
+    return this.state.panes[index2];
+  }
+  dragState(splitbarIndex) {
+    const prev = this.getPane(splitbarIndex);
+    const next = this.getPane(splitbarIndex + 1);
+    const total = prev.getPaneSize() + next.getPaneSize();
+    return {
+      prev: {
+        index: splitbarIndex,
+        initialSize: prev.getPaneSize(),
+        minSize: this.toPixels(prev.component.props.minSize) || total - this.toPixels(next.component.props.maxSize) || 0,
+        maxSize: this.toPixels(prev.component.props.maxSize) || total - this.toPixels(next.component.props.minSize) || total
+      },
+      next: {
+        index: splitbarIndex + 1,
+        initialSize: next.getPaneSize(),
+        minSize: this.toPixels(next.component.props.minSize) || total - this.toPixels(prev.component.props.maxSize) || 0,
+        maxSize: this.toPixels(next.component.props.maxSize) || total - this.toPixels(prev.component.props.minSize) || total
+      }
+    };
+  }
+  clamp(minSize, maxSize, initialSize) {
+    return Math.min(maxSize, Math.max(minSize, initialSize));
+  }
+  resize(paneState, moveSize) {
+    const pane = this.getPane(paneState.index);
+    const splitterSize = this.state.splitterContainerSize;
+    const newSize = this.clamp(paneState.minSize, paneState.maxSize, paneState.initialSize + moveSize);
+    let size = "";
+    if (this.isPercent(pane.component.props.size)) {
+      size = newSize / splitterSize * 100 + "%";
+    } else {
+      size = newSize + "px";
+    }
+    pane.component.props.size = size;
+    pane.component.emit("sizeChange", size);
+  }
+  isResizable(splitBarIndex) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const prevPane = this.getPane(splitBarIndex);
+    const nextPane = this.getPane(splitBarIndex + 1);
+    const paneCollapsed = ((_b = (_a = prevPane == null ? void 0 : prevPane.component) == null ? void 0 : _a.props) == null ? void 0 : _b.collapsed) || ((_d = (_c = nextPane == null ? void 0 : nextPane.component) == null ? void 0 : _c.props) == null ? void 0 : _d.collapsed);
+    return ((_f = (_e = prevPane == null ? void 0 : prevPane.component) == null ? void 0 : _e.props) == null ? void 0 : _f.resizable) && ((_h = (_g = nextPane == null ? void 0 : nextPane.component) == null ? void 0 : _g.props) == null ? void 0 : _h.resizable) && !paneCollapsed;
+  }
+  isStaticBar(splitBarIndex) {
+    var _a, _b, _c, _d;
+    const prevPane = this.getPane(splitBarIndex);
+    const nextPane = this.getPane(splitBarIndex + 1);
+    return !(((_b = (_a = prevPane == null ? void 0 : prevPane.component) == null ? void 0 : _a.props) == null ? void 0 : _b.resizable) && ((_d = (_c = nextPane == null ? void 0 : nextPane.component) == null ? void 0 : _c.props) == null ? void 0 : _d.resizable));
+  }
+  isPercent(size) {
+    return /%$/.test(size);
+  }
+  toPixels(size) {
+    let result = parseFloat(size);
+    if (this.isPercent(size)) {
+      result = this.state.splitterContainerSize * result / 100;
+    }
+    return result;
+  }
+  tooglePane(paneIndex, nearPaneIndex, lockStatus) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
+    const pane = this.getPane(paneIndex);
+    const nearPane = this.getPane(nearPaneIndex);
+    if ((_b = (_a = pane == null ? void 0 : pane.component) == null ? void 0 : _a.props) == null ? void 0 : _b.collapsible) {
+      pane.component.props.collapsed = lockStatus ? (_d = (_c = pane == null ? void 0 : pane.component) == null ? void 0 : _c.props) == null ? void 0 : _d.collapsed : !((_f = (_e = pane == null ? void 0 : pane.component) == null ? void 0 : _e.props) == null ? void 0 : _f.collapsed);
+      (_j = (_g = nearPane == null ? void 0 : nearPane.component) == null ? void 0 : _g.exposed) == null ? void 0 : _j.toggleNearPaneFlexGrow((_i = (_h = pane == null ? void 0 : pane.component) == null ? void 0 : _h.props) == null ? void 0 : _i.collapsed);
+      (_m = pane == null ? void 0 : pane.component) == null ? void 0 : _m.emit("collapsedChange", (_l = (_k = pane == null ? void 0 : pane.component) == null ? void 0 : _k.props) == null ? void 0 : _l.collapsed);
+    }
+  }
+  setSize(state, distance) {
+    const prev = this.getPane(state.prev.index);
+    const next = this.getPane(state.next.index);
+    if (prev.component.props.size && next.component.props.size) {
+      this.resize(state.prev, distance);
+      this.resize(state.next, -distance);
+    } else if (next.component.props.size) {
+      this.resize(state.next, -distance);
+    } else {
+      this.resize(state.prev, distance);
+    }
+  }
+}
+var splitter = "";
+var Splitter = defineComponent({
+  name: "DSplitter",
+  components: {
+    DSplitterBar
+  },
+  props: splitterProps,
+  emits: [],
+  setup(props, ctx) {
+    var _a, _b;
+    const store = new SplitterStore();
+    const state = reactive({
+      panes: []
+    });
+    state.panes = ((_b = (_a = ctx.slots).DSplitterPane) == null ? void 0 : _b.call(_a)) || [];
+    store.setPanes({
+      panes: state.panes
+    });
+    provide("orientation", props.orientation);
+    provide("splitterStore", store);
+    const domRef = ref();
+    const refreshSplitterContainerSize = () => {
+      if (!domRef)
+        return;
+      let containerSize = 0;
+      if (props.orientation === "vertical") {
+        containerSize = domRef.value.clientHeight;
+      } else {
+        containerSize = domRef.value.clientWidth;
+      }
+      store.setSplitter({
+        containerSize
+      });
+    };
+    const observer = new ResizeObserver(refreshSplitterContainerSize);
+    watch(domRef, (ele) => {
+      if (!ele) {
+        return;
+      }
+      refreshSplitterContainerSize();
+      observer.observe(domRef.value);
+    });
+    onUnmounted(() => {
+      observer.disconnect();
+    });
+    return () => {
+      const {
+        splitBarSize,
+        orientation,
+        showCollapseButton
+      } = props;
+      const wrapperClass = ["devui-splitter", `devui-splitter-${orientation}`];
+      return createVNode("div", {
+        "class": wrapperClass,
+        "ref": domRef
+      }, [state.panes, state.panes.filter((pane, index2, arr) => index2 !== arr.length - 1).map((pane, index2) => {
+        return createVNode(resolveComponent("d-splitter-bar"), {
+          "key": index2,
+          "style": `order: ${index2 * 2 + 1}`,
+          "splitBarSize": splitBarSize,
+          "orientation": orientation,
+          "index": index2,
+          "showCollapseButton": showCollapseButton
+        }, null);
+      })]);
+    };
+  }
+});
+const splitterPaneProps = {
+  size: {
+    type: String
+  },
+  minSize: {
+    type: String
+  },
+  maxSize: {
+    type: String
+  },
+  resizable: {
+    type: Boolean,
+    default: true
+  },
+  collapsible: {
+    type: Boolean,
+    default: false
+  },
+  collapsed: {
+    type: Boolean,
+    default: false
+  },
+  collapseDirection: {
+    type: String,
+    default: "both"
+  },
+  shrink: {
+    type: Boolean,
+    default: false
+  },
+  shrinkWidth: {
+    type: Number,
+    default: 36
+  }
+};
+var splitterPane = "";
+var SplitterPane = defineComponent({
+  name: "DSplitterPane",
+  props: splitterPaneProps,
+  emits: ["sizeChange", "collapsedChange"],
+  setup(props, {
+    slots,
+    expose
+  }) {
+    const store = inject("splitterStore");
+    const domRef = ref();
+    const orderRef = ref();
+    watch([orderRef, domRef], ([order, ele]) => {
+      if (!ele) {
+        return;
+      }
+      setStyle(ele, {
+        order
+      });
+    });
+    const setSizeStyle = (curSize, ele) => {
+      if (!ele) {
+        return;
+      }
+      ele.style.flexBasis = curSize;
+      const paneFixedClass = "devui-splitter-pane-fixed";
+      if (curSize) {
+        addClass(ele, paneFixedClass);
+      } else {
+        removeClass(ele, paneFixedClass);
+      }
+    };
+    watch([() => props.size, domRef], ([size, ele]) => {
+      setSizeStyle(size, ele);
+    }, {
+      immediate: true
+    });
+    const orientation = inject("orientation");
+    let initialSize = "";
+    onMounted(() => {
+      initialSize = props.size;
+      store.setPanes({
+        panes: store.state.panes
+      });
+    });
+    onUpdated(() => {
+      store.setPanes({
+        panes: store.state.panes
+      });
+    });
+    const getPaneSize = () => {
+      const ele = domRef.value;
+      if (!ele) {
+        return;
+      }
+      if (orientation === "vertical") {
+        return ele.offsetHeight;
+      } else {
+        return ele.offsetWidth;
+      }
+    };
+    watch(() => props.collapsed, (collapsed) => {
+      const ele = domRef.value;
+      if (!ele) {
+        return;
+      }
+      const paneHiddenClass = "devui-splitter-pane-hidden";
+      if (!collapsed) {
+        removeClass(ele, paneHiddenClass);
+      } else {
+        addClass(ele, paneHiddenClass);
+      }
+      if (collapsed && props.shrink) {
+        removeClass(ele, paneHiddenClass);
+        setStyle(ele, {
+          flexBasis: `${props.shrinkWidth}px`
+        });
+      } else {
+        setStyle(ele, {
+          flexBasis: initialSize
+        });
+      }
+    }, {
+      immediate: true
+    });
+    const toggleNearPaneFlexGrow = (collapsed) => {
+      const ele = domRef.value;
+      if (!(ele instanceof HTMLElement)) {
+        return;
+      }
+      const flexGrowClass = "devui-splitter-pane-grow";
+      if (hasClass(ele, flexGrowClass)) {
+        removeClass(ele, flexGrowClass);
+      } else if (collapsed) {
+        addClass(ele, flexGrowClass);
+      }
+    };
+    expose({
+      order: orderRef,
+      getPaneSize,
+      toggleNearPaneFlexGrow
+    });
+    return () => {
+      var _a;
+      return createVNode("div", {
+        "class": "devui-splitter-pane",
+        "ref": domRef
+      }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+Splitter.install = function(app) {
+  app.component(Splitter.name, Splitter);
+  app.component(SplitterPane.name, SplitterPane);
+};
+var index = {
+  title: "Splitter \u5206\u5272\u5668",
+  category: "\u5E03\u5C40",
+  status: "100%",
+  install(app) {
+    app.use(Splitter);
+  }
+};
+export { Splitter, index as default };