vue-devui 1.0.0-rc.1 → 1.0.0-rc.4

package/slider/index.es.js

@@ -44,6 +44,63 @@ var Slider = defineComponent({
     const currentPosition = ref(0);
     const newPostion = ref(0);
     const percentDispaly = ref("");
+    function handleOnInput(event) {
+      inputValue.value = parseInt(event.target.value);
+      if (!inputValue.value) {
+        inputValue.value = props.min;
+        percentDispaly.value = "0%";
+      } else {
+        if (inputValue.value < props.min || inputValue.value > props.max) {
+          return;
+        }
+        const re = /^(?:[1-9]?\d|100)$/;
+        if (re.test(`${inputValue.value}`)) {
+          percentDispaly.value = (inputValue.value - props.min) * 100 / (props.max - props.min) + "%";
+          ctx.emit("update:modelValue", inputValue.value);
+        }
+      }
+    }
+    function setPostion(newPosition) {
+      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
+      if (newPosition < 0) {
+        newPosition = 0;
+      }
+      const LengthPerStep = sliderWidth / ((props.max - props.min) / props.step);
+      const steps = Math.round(newPosition / LengthPerStep);
+      const value = steps * LengthPerStep;
+      if (Math.round(value) >= sliderWidth) {
+        currentPosition.value = sliderWidth;
+        inputValue.value = props.max;
+        percentDispaly.value = "100%";
+        ctx.emit("update:modelValue", props.max);
+        return;
+      }
+      percentDispaly.value = Math.round(value * 100 / sliderWidth) + "%";
+      inputValue.value = Math.round(value * (props.max - props.min) / sliderWidth) + props.min;
+      currentPosition.value = newPosition;
+      ctx.emit("update:modelValue", inputValue.value);
+    }
+    function dragStart(event) {
+      isClick = false;
+      startX = event.clientX;
+      startPosition = currentPosition.value;
+      newPostion.value = startPosition;
+    }
+    function onDragging(event) {
+      popoverShow.value = true;
+      const currentX = event.clientX;
+      const pxOffset = currentX - startX;
+      newPostion.value = startPosition + pxOffset;
+      setPostion(newPostion.value);
+    }
+    function onDragEnd() {
+      popoverShow.value = false;
+      setTimeout(() => {
+        isClick = true;
+      }, 100);
+      window.removeEventListener("mousemove", onDragging);
+      window.removeEventListener("mouseup", onDragEnd);
+    }
     const renderShowInput = () => {
       return props.showInput ? createVNode("div", {
         "class": "devui-input__out-wrap"
@@ -73,47 +130,6 @@ var Slider = defineComponent({
       window.addEventListener("mousemove", onDragging);
       window.addEventListener("mouseup", onDragEnd);
     }
-    function dragStart(event) {
-      isClick = false;
-      startX = event.clientX;
-      startPosition = currentPosition.value;
-      newPostion.value = startPosition;
-    }
-    function onDragging(event) {
-      popoverShow.value = true;
-      const currentX = event.clientX;
-      const pxOffset = currentX - startX;
-      newPostion.value = startPosition + pxOffset;
-      setPostion(newPostion.value);
-    }
-    function onDragEnd() {
-      popoverShow.value = false;
-      setTimeout(() => {
-        isClick = true;
-      }, 100);
-      window.removeEventListener("mousemove", onDragging);
-      window.removeEventListener("mouseup", onDragEnd);
-    }
-    function setPostion(newPosition) {
-      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
-      if (newPosition < 0) {
-        newPosition = 0;
-      }
-      const LengthPerStep = sliderWidth / ((props.max - props.min) / props.step);
-      const steps = Math.round(newPosition / LengthPerStep);
-      const value = steps * LengthPerStep;
-      if (Math.round(value) >= sliderWidth) {
-        currentPosition.value = sliderWidth;
-        inputValue.value = props.max;
-        percentDispaly.value = "100%";
-        ctx.emit("update:modelValue", props.max);
-        return;
-      }
-      percentDispaly.value = Math.round(value * 100 / sliderWidth) + "%";
-      inputValue.value = Math.round(value * (props.max - props.min) / sliderWidth) + props.min;
-      currentPosition.value = newPosition;
-      ctx.emit("update:modelValue", inputValue.value);
-    }
     function handleRunwayMousedown(event) {
       if (!props.disabled && isClick) {
         startX = event.target.getBoundingClientRect().left;
@@ -124,22 +140,6 @@ var Slider = defineComponent({
         return;
       }
     }
-    function handleOnInput(event) {
-      inputValue.value = parseInt(event.target.value);
-      if (!inputValue.value) {
-        inputValue.value = props.min;
-        percentDispaly.value = "0%";
-      } else {
-        if (inputValue.value < props.min || inputValue.value > props.max) {
-          return;
-        }
-        const re = /^(?:[1-9]?\d|100)$/;
-        if (re.test(`${inputValue.value}`)) {
-          percentDispaly.value = (inputValue.value - props.min) * 100 / (props.max - props.min) + "%";
-          ctx.emit("update:modelValue", inputValue.value);
-        }
-      }
-    }
     const disableClass = computed(() => {
       return props.disabled ? " disabled" : "";
     });
@@ -183,15 +183,12 @@ var Slider = defineComponent({
     }, [props.max]), renderShowInput()]);
   }
 });
-Slider.install = function(app) {
-  app.component(Slider.name, Slider);
-};
 var index = {
   title: "Slider \u6ED1\u5757",
   category: "\u6570\u636E\u5F55\u5165",
   status: "100%",
   install(app) {
-    app.use(Slider);
+    app.component(Slider.name, Slider);
   }
 };
-export { Slider, index as default };
+export { Slider, index as default, sliderProps };

package/slider/index.umd.js

@@ -1 +1 @@
-(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.index={},a.Vue))})(this,function(a,t){"use strict";const g={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""}};var R="",o=t.defineComponent({name:"DSlider",props:g,emits:["update:modelValue"],setup(e,v){let m=!0,f=0,s=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),r=t.ref(0),h=t.ref(0),u=t.ref(""),S=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:D,value:l.value+""},null)]):"";e.modelValue>e.max?u.value="100%":e.modelValue<e.min?u.value="0%":u.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=V.value.clientWidth;r.value=n*(l.value-e.min)/(e.max-e.min)});function M(n){d.value=!0,!e.disabled&&(n.preventDefault(),E(n),window.addEventListener("mousemove",N),window.addEventListener("mouseup",_))}function E(n){m=!1,s=n.clientX,f=r.value,h.value=f}function N(n){d.value=!0;const c=n.clientX-s;h.value=f+c,b(h.value)}function _(){d.value=!1,setTimeout(()=>{m=!0},100),window.removeEventListener("mousemove",N),window.removeEventListener("mouseup",_)}function b(n){const i=Math.round(V.value.clientWidth);n<0&&(n=0);const c=i/((e.max-e.min)/e.step),y=Math.round(n/c)*c;if(Math.round(y)>=i){r.value=i,l.value=e.max,u.value="100%",v.emit("update:modelValue",e.max);return}u.value=Math.round(y*100/i)+"%",l.value=Math.round(y*(e.max-e.min)/i)+e.min,r.value=n,v.emit("update:modelValue",l.value)}function X(n){if(!e.disabled&&m){s=n.target.getBoundingClientRect().left;const i=n.clientX;b(i-s),M(n)}else return}function D(n){if(l.value=parseInt(n.target.value),!l.value)l.value=e.min,u.value="0%";else{if(l.value<e.min||l.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(u.value=(l.value-e.min)*100/(e.max-e.min)+"%",v.emit("update:modelValue",l.value))}}const w=t.computed(()=>e.disabled?" disabled":""),I=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:u.value,opacity:d.value?1:0}},[t.createVNode("div",{class:"devui-slider_popover-arrow"},null),t.createVNode("div",{class:"devui-slider_popover-content"},[l.value+" "+e.tipsRenderer])]);return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:V,class:"devui-slider__runway"+w.value,onMousedown:X,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+w.value,style:{width:u.value}},null),t.createVNode("div",{class:"devui-slider__button"+w.value,style:{left:u.value},onMousedown:M,onMouseenter:()=>d.value=!0,onMouseout:()=>d.value=!1},null),e.tipsRenderer==="null"?"":I()]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),S()])}});o.install=function(e){e.component(o.name,o)};var x={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.use(o)}};a.Slider=o,a.default=x,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
+(function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue))})(this,function(u,t){"use strict";const M={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""}};var R="",c=t.defineComponent({name:"DSlider",props:M,emits:["update:modelValue"],setup(e,v){let m=!0,f=0,o=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),s=t.ref(0),h=t.ref(0),a=t.ref("");function S(n){if(l.value=parseInt(n.target.value),!l.value)l.value=e.min,a.value="0%";else{if(l.value<e.min||l.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(a.value=(l.value-e.min)*100/(e.max-e.min)+"%",v.emit("update:modelValue",l.value))}}function N(n){const i=Math.round(V.value.clientWidth);n<0&&(n=0);const r=i/((e.max-e.min)/e.step),y=Math.round(n/r)*r;if(Math.round(y)>=i){s.value=i,l.value=e.max,a.value="100%",v.emit("update:modelValue",e.max);return}a.value=Math.round(y*100/i)+"%",l.value=Math.round(y*(e.max-e.min)/i)+e.min,s.value=n,v.emit("update:modelValue",l.value)}function E(n){m=!1,o=n.clientX,f=s.value,h.value=f}function _(n){d.value=!0;const r=n.clientX-o;h.value=f+r,N(h.value)}function b(){d.value=!1,setTimeout(()=>{m=!0},100),window.removeEventListener("mousemove",_),window.removeEventListener("mouseup",b)}const X=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:S,value:l.value+""},null)]):"";e.modelValue>e.max?a.value="100%":e.modelValue<e.min?a.value="0%":a.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=V.value.clientWidth;s.value=n*(l.value-e.min)/(e.max-e.min)});function g(n){d.value=!0,!e.disabled&&(n.preventDefault(),E(n),window.addEventListener("mousemove",_),window.addEventListener("mouseup",b))}function D(n){if(!e.disabled&&m){o=n.target.getBoundingClientRect().left;const i=n.clientX;N(i-o),g(n)}else return}const w=t.computed(()=>e.disabled?" disabled":""),I=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:a.value,opacity:d.value?1:0}},[t.createVNode("div",{class:"devui-slider_popover-arrow"},null),t.createVNode("div",{class:"devui-slider_popover-content"},[l.value+" "+e.tipsRenderer])]);return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:V,class:"devui-slider__runway"+w.value,onMousedown:D,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+w.value,style:{width:a.value}},null),t.createVNode("div",{class:"devui-slider__button"+w.value,style:{left:a.value},onMousedown:g,onMouseenter:()=>d.value=!0,onMouseout:()=>d.value=!1},null),e.tipsRenderer==="null"?"":I()]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),X()])}}),x={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.component(c.name,c)}};u.Slider=c,u.default=x,u.sliderProps=M,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});

package/splitter/index.es.js

@@ -23,24 +23,6 @@ var __publicField = (obj, key, value) => {
 };
 import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, toRefs, Fragment, inject, reactive, withDirectives, provide, resolveComponent, onUpdated } from "vue";
 import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
-const splitterProps = {
-  orientation: {
-    type: String,
-    default: "horizontal"
-  },
-  splitBarSize: {
-    type: String,
-    default: "2px"
-  },
-  disabledBarSize: {
-    type: String,
-    default: "1px"
-  },
-  showCollapseButton: {
-    type: Boolean,
-    default: true
-  }
-};
 var baseOverlay = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -232,6 +214,7 @@ function adjustArrowPosition(isArrowCenter, point, placement, originRect) {
 function useOverlay(props, emit) {
   const overlayRef = ref();
   const arrowRef = ref();
+  let originParent = null;
   const updateArrowPosition = (arrowEl, placement, point, overlayEl) => {
     const { x, y } = adjustArrowPosition(props.isArrowCenter, point, placement, overlayEl.getBoundingClientRect());
     const staticSide = {
@@ -270,21 +253,20 @@ function useOverlay(props, emit) {
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
   watch(() => props.modelValue, () => {
-    const originParent = getScrollParent(props.origin);
     if (props.modelValue && props.origin) {
+      originParent = getScrollParent(props.origin);
       nextTick(updatePosition);
-      originParent.addEventListener("scroll", updatePosition);
+      originParent == null ? void 0 : originParent.addEventListener("scroll", updatePosition);
       originParent !== window && window.addEventListener("scroll", updatePosition);
       window.addEventListener("resize", updatePosition);
     } else {
-      originParent.removeEventListener("scroll", updatePosition);
+      originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
       originParent !== window && window.removeEventListener("scroll", updatePosition);
       window.removeEventListener("resize", updatePosition);
     }
   });
   onUnmounted(() => {
-    const originParent = getScrollParent(props.origin);
-    originParent.removeEventListener("scroll", updatePosition);
+    originParent == null ? void 0 : originParent.removeEventListener("scroll", updatePosition);
     originParent !== window && window.removeEventListener("scroll", updatePosition);
     window.removeEventListener("resize", updatePosition);
   });
@@ -5883,58 +5865,58 @@ function removeClass(el, 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 normalizeEvent(evt) {
+  return {
+    pageX: evt.pageX,
+    pageY: evt.pageY,
+    clientX: evt.clientX,
+    clientY: evt.clientY,
+    offsetX: evt.offsetX,
+    offsetY: evt.offsetY,
+    type: evt.type,
+    originalEvent: evt
+  };
 }
-function bind(el, event, callback) {
-  el.addEventListener && el.addEventListener(event, callback);
+function bind(el, eventName, callback) {
+  el.addEventListener && el.addEventListener(eventName, callback);
 }
-function unbind(el, event, callback) {
-  el.removeEventListener && el.removeEventListener(event, callback);
+function unbind(el, eventName, callback) {
+  el.removeEventListener && el.removeEventListener(eventName, callback);
 }
 function onMousedown(e) {
   var _a;
-  const $value = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.$value;
-  if (!$value) {
+  const resizeProps = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.resizeProps;
+  if (!resizeProps) {
     return;
   }
-  bind(document, "mousemove", onMousemove);
-  bind(document, "mouseup", onMouseup);
-  $value.onPressEvent(normalizeEvent(e));
-  function onMousemove(e2) {
-    $value.onDragEvent(normalizeEvent(e2));
+  function onMousemove(evt) {
+    resizeProps.onDragEvent(normalizeEvent(evt));
   }
-  function onMouseup(e2) {
+  function onMouseup(evt) {
     unbind(document, "mousemove", onMousemove);
     unbind(document, "mouseup", onMouseup);
-    $value.onReleaseEvent(normalizeEvent(e2));
+    resizeProps.onReleaseEvent(normalizeEvent(evt));
   }
+  bind(document, "mousemove", onMousemove);
+  bind(document, "mouseup", onMouseup);
+  resizeProps.onPressEvent(normalizeEvent(e));
 }
-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
-  };
+function bindEvent(el) {
+  bind(el, "mousedown", onMousedown);
 }
+const resize = {
+  mounted(el, { value }) {
+    el.resizeProps = value;
+    if (value.enableResize) {
+      bindEvent(el);
+    }
+  },
+  unmounted(el, { value }) {
+    if (value.enableResize) {
+      unbind(el, "mousedown", onMousedown);
+    }
+  }
+};
 const splitterBarProps = {
   index: {
     type: Number
@@ -5978,10 +5960,13 @@ var DSplitterBar = defineComponent({
     }, {
       immediate: true
     });
-    watch([() => store.state.panes, domRef], ([panes, ele]) => {
+    watch([() => store == null ? void 0 : store.state.panes, domRef], ([, ele]) => {
+      if (!store || !props || props.index === void 0) {
+        return;
+      }
       if (!store.isStaticBar(props.index)) {
         state.wrapperClass += " resizable";
-      } else {
+      } else if (ele) {
         setStyle(ele, {
           flexBasis: props.disabledBarSize
         });
@@ -5989,62 +5974,10 @@ var DSplitterBar = defineComponent({
     }, {
       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) => {
+      if (!store) {
+        return {};
+      }
       const pane = store.getPane(index2);
       const nearPane = store.getPane(nearIndex);
       return {
@@ -6056,7 +5989,7 @@ var DSplitterBar = defineComponent({
       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;
+      const isNearPaneCollapsed = nearPane == null ? void 0 : nearPane.collapsed;
       return {
         "devui-collapse": isCollapsible,
         collapsed: isCollapsed,
@@ -6065,6 +5998,9 @@ var DSplitterBar = defineComponent({
     };
     const prevClass = computed(() => {
       var _a, _b;
+      if (!props || props.index === void 0) {
+        return {};
+      }
       const {
         pane,
         nearPane
@@ -6074,6 +6010,9 @@ var DSplitterBar = defineComponent({
     });
     const nextClass = computed(() => {
       var _a, _b;
+      if (!store || !props || props.index === void 0) {
+        return {};
+      }
       const {
         pane,
         nearPane
@@ -6083,6 +6022,9 @@ var DSplitterBar = defineComponent({
     });
     const toggleResize = () => {
       var _a, _b, _c, _d;
+      if (!domRef.value || !props || props.index === void 0) {
+        return;
+      }
       const {
         pane,
         nearPane
@@ -6095,10 +6037,16 @@ var DSplitterBar = defineComponent({
       }
     };
     const handleCollapsePrePane = (lockStatus) => {
+      if (!store || !props || props.index === void 0) {
+        return;
+      }
       store.tooglePane(props.index, props.index + 1, lockStatus);
       toggleResize();
     };
     const handleCollapseNextPane = (lockStatus) => {
+      if (!store || !props || props.index === void 0) {
+        return;
+      }
       store.tooglePane(props.index + 1, props.index, lockStatus);
       toggleResize();
     };
@@ -6106,11 +6054,78 @@ var DSplitterBar = defineComponent({
       handleCollapsePrePane(true);
       handleCollapseNextPane(true);
     };
+    const coordinate = {
+      pageX: 0,
+      pageY: 0,
+      originalX: 0,
+      originalY: 0
+    };
+    let initState;
+    const resizeProp = {
+      enableResize: true,
+      onPressEvent: function({
+        originalEvent
+      }) {
+        originalEvent.stopPropagation();
+        if (!store || !props || props.index === void 0) {
+          return;
+        }
+        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 || !props || props.index === void 0) {
+          return;
+        }
+        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 || !props || props.index === void 0) {
+          return;
+        }
+        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);
+      }
+    };
     onMounted(() => {
       initialCollapseStatus();
     });
     const renderCollapsedTip = () => {
       var _a, _b, _c, _d;
+      if (!props || props.index === void 0) {
+        return "\u6536\u8D77";
+      }
       const {
         pane,
         nearPane
@@ -6254,6 +6269,24 @@ class SplitterStore {
     }
   }
 }
+const splitterProps = {
+  orientation: {
+    type: String,
+    default: "horizontal"
+  },
+  splitBarSize: {
+    type: String,
+    default: "2px"
+  },
+  disabledBarSize: {
+    type: String,
+    default: "1px"
+  },
+  showCollapseButton: {
+    type: Boolean,
+    default: true
+  }
+};
 var splitter = "";
 var Splitter = defineComponent({
   name: "DSplitter",
@@ -6295,7 +6328,9 @@ var Splitter = defineComponent({
         return;
       }
       refreshSplitterContainerSize();
-      observer.observe(domRef.value);
+      if (domRef.value) {
+        observer.observe(domRef.value);
+      }
     });
     onUnmounted(() => {
       observer.disconnect();
@@ -6391,27 +6426,35 @@ var SplitterPane = defineComponent({
       }
     };
     watch([() => props.size, domRef], ([size, ele]) => {
-      setSizeStyle(size, ele);
+      if (size && ele) {
+        setSizeStyle(size, ele);
+      }
     }, {
       immediate: true
     });
     const orientation = inject("orientation");
     let initialSize = "";
     onMounted(() => {
-      initialSize = props.size;
-      store.setPanes({
-        panes: store.state.panes
-      });
+      if (props.size) {
+        initialSize = props.size;
+      }
+      if (store) {
+        store.setPanes({
+          panes: store.state.panes
+        });
+      }
     });
     onUpdated(() => {
-      store.setPanes({
-        panes: store.state.panes
-      });
+      if (store) {
+        store.setPanes({
+          panes: store.state.panes
+        });
+      }
     });
     const getPaneSize = () => {
       const ele = domRef.value;
       if (!ele) {
-        return;
+        return 0;
       }
       if (orientation === "vertical") {
         return ele.offsetHeight;
@@ -6468,16 +6511,13 @@ var SplitterPane = defineComponent({
     };
   }
 });
-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);
+    app.component(Splitter.name, Splitter);
+    app.component(SplitterPane.name, SplitterPane);
   }
 };
-export { Splitter, index as default };
+export { Splitter, index as default, splitterProps };