vue-devui 1.0.0-pre.0 → 1.0.0-rc.2

package/splitter/index.es.js

@@ -21,27 +21,9 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, nextTick, unref, mergeProps, toRefs, Fragment, inject, reactive, withDirectives, provide, resolveComponent, onUpdated } from "vue";
-import { 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 overlay = "";
+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";
+var baseOverlay = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -88,43 +70,13 @@ const overlayProps = {
     default: true
   }
 };
-const overlayEmits = ["update:visible", "backdropClick"];
 const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
   overlayStyle: {
     type: [String, Object],
     default: void 0
   }
 });
-const flexibleOverlayProps = {
-  modelValue: {
-    type: Boolean,
-    default: false
-  },
-  origin: {
-    type: Object,
-    require: true
-  },
-  position: {
-    type: Array,
-    default: ["bottom"]
-  },
-  offset: {
-    type: [Number, Object],
-    default: 8
-  },
-  align: {
-    type: String,
-    default: null
-  },
-  showArrow: {
-    type: Boolean,
-    default: false
-  },
-  isArrowCenter: {
-    type: Boolean,
-    default: true
-  }
-};
+const overlayEmits = ["update:visible", "backdropClick"];
 function useOverlayLogic(props, ctx) {
   const backgroundClass = computed(() => {
     return [
@@ -175,6 +127,7 @@ function useOverlayLogic(props, ctx) {
     handleOverlayBubbleCancel
   };
 }
+var fixedOverlay = "";
 defineComponent({
   name: "DFixedOverlay",
   props: fixedOverlayProps,
@@ -199,6 +152,36 @@ defineComponent({
     });
   }
 });
+const flexibleOverlayProps = {
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  origin: {
+    type: Object,
+    require: true
+  },
+  position: {
+    type: Array,
+    default: ["bottom"]
+  },
+  offset: {
+    type: [Number, Object],
+    default: 8
+  },
+  align: {
+    type: String,
+    default: null
+  },
+  showArrow: {
+    type: Boolean,
+    default: false
+  },
+  isArrowCenter: {
+    type: Boolean,
+    default: true
+  }
+};
 function getScrollParent(element) {
   const overflowRegex = /(auto|scroll|hidden)/;
   for (let parent = element; parent = parent.parentElement; parent.parentElement !== document.body) {
@@ -252,6 +235,7 @@ function useOverlay(props, emit) {
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
     const middleware = [
+      shift(),
       offset(props.offset),
       autoPlacement({
         alignment: props.align,
@@ -286,7 +270,7 @@ function useOverlay(props, emit) {
     originParent !== window && window.removeEventListener("scroll", updatePosition);
     window.removeEventListener("resize", updatePosition);
   });
-  return { arrowRef, overlayRef };
+  return { arrowRef, overlayRef, updatePosition };
 }
 var flexibleOverlay = "";
 const FlexibleOverlay = defineComponent({
@@ -297,12 +281,17 @@ const FlexibleOverlay = defineComponent({
   setup(props, {
     slots,
     attrs,
-    emit
+    emit,
+    expose
   }) {
     const {
       arrowRef,
-      overlayRef
+      overlayRef,
+      updatePosition
     } = useOverlay(props, emit);
+    expose({
+      updatePosition
+    });
     return () => {
       var _a;
       return props.modelValue && createVNode("div", mergeProps({
@@ -5876,57 +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 onMouseup(e2) {
+  function onMousemove(evt) {
+    resizeProps.onDragEvent(normalizeEvent(evt));
+  }
+  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
@@ -5970,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
         });
@@ -5981,59 +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 {
@@ -6045,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,
@@ -6054,6 +5998,9 @@ var DSplitterBar = defineComponent({
     };
     const prevClass = computed(() => {
       var _a, _b;
+      if (!props || props.index === void 0) {
+        return {};
+      }
       const {
         pane,
         nearPane
@@ -6063,6 +6010,9 @@ var DSplitterBar = defineComponent({
     });
     const nextClass = computed(() => {
       var _a, _b;
+      if (!store || !props || props.index === void 0) {
+        return {};
+      }
       const {
         pane,
         nearPane
@@ -6072,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
@@ -6084,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();
     };
@@ -6095,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
@@ -6243,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",
@@ -6265,8 +6309,9 @@ var Splitter = defineComponent({
     provide("splitterStore", store);
     const domRef = ref();
     const refreshSplitterContainerSize = () => {
-      if (!domRef.value)
+      if (!domRef.value) {
         return;
+      }
       let containerSize = 0;
       if (props.orientation === "vertical") {
         containerSize = domRef.value.clientHeight;
@@ -6283,7 +6328,9 @@ var Splitter = defineComponent({
         return;
       }
       refreshSplitterContainerSize();
-      observer.observe(domRef.value);
+      if (domRef.value) {
+        observer.observe(domRef.value);
+      }
     });
     onUnmounted(() => {
       observer.disconnect();
@@ -6379,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;