vue-devui 1.0.0-beta.9 → 1.0.0-rc.1

package/dragdrop/index.es.js

@@ -1,22 +1,146 @@
+const shadowId = "shadow0611";
+function getElementStyle(id, styleName) {
+  return document.getElementById(id).currentStyle ? document.getElementById(id).currentStyle[styleName] : window.getComputedStyle(document.getElementById(id), styleName);
+}
+function createShadow(originId) {
+  const shadow = document.createElement("div");
+  shadow.id = shadowId;
+  shadow.style.background = "rgb(206, 215, 255)";
+  shadow.style.width = getElementStyle(originId, "width");
+  shadow.style.height = "20px";
+  return shadow;
+}
+function changeDragState(el, originId, dragStart, drag, dragover, drop, shouldCreateShadow, dragFlag) {
+  el.dataset.originId = originId;
+  el.dataset.dragStart = dragStart;
+  el.dataset.dragover = dragover;
+  el.dataset.drop = drop;
+  el.dataset.shouldCreateShadow = shouldCreateShadow;
+  el.dataset.dragFlag = dragFlag;
+}
+function computeCompareElementHeight(compareElement) {
+  return compareElement.getBoundingClientRect().top + Math.floor(compareElement.offsetHeight / 2);
+}
+function createInsertSortableShadow(sortDropArea, mouseObject, originId) {
+  const sortDropAreaArr = [...sortDropArea.children];
+  if (sortDropAreaArr.length == 0) {
+    if (!document.getElementById(shadowId)) {
+      const shadowElement = createShadow(originId);
+      sortDropArea.appendChild(shadowElement);
+    }
+  } else {
+    for (let index2 = 0; index2 < sortDropAreaArr.length; index2++) {
+      const compareHeight = computeCompareElementHeight(sortDropAreaArr[index2]);
+      document.getElementById(shadowId) ? sortDropArea.removeChild(document.getElementById(shadowId)) : null;
+      if (index2 == sortDropAreaArr.length - 1) {
+        sortDropArea.appendChild(createShadow(originId));
+        break;
+      }
+      if (Math.floor(mouseObject.clientY) <= compareHeight) {
+        sortDropArea.insertBefore(createShadow(originId), sortDropAreaArr[index2]);
+        break;
+      }
+    }
+  }
+}
+function insertDragElement(dropAreaContainer, dragId, mouseObject) {
+  for (let index2 = 0; index2 < [...dropAreaContainer.children].length; index2++) {
+    if (index2 == [...dropAreaContainer.children].length - 1) {
+      dropAreaContainer.appendChild(document.getElementById(dragId));
+      break;
+    }
+    if (Math.floor(mouseObject.clientY) <= computeCompareElementHeight([...dropAreaContainer.children][index2])) {
+      dropAreaContainer.insertBefore(document.getElementById(dragId), [...dropAreaContainer.children][index2]);
+      break;
+    }
+  }
+}
+function deleteInsertedSortableShadow(dropSortArea) {
+  if (dropSortArea) {
+    if (document.getElementById(shadowId)) {
+      if (dropSortArea.contains(document.getElementById(shadowId))) {
+        dropSortArea.removeChild(document.getElementById(shadowId));
+      }
+    }
+  }
+}
 var DraggableDirective = {
-  mounted(el) {
+  mounted(el, binding) {
     el.setAttribute("draggable", "true");
     el.style.cursor = "grab";
-    el.addEventListener("dragstart", (event) => {
-      event.dataTransfer.setData("originId", el.id);
-    });
+    el.addEventListener("drag", () => {
+      changeDragState(el, el.id, "true", "true", "false", "false", "false", "true");
+      if (binding.instance.$root.dropElement && document.getElementById(shadowId)) {
+        deleteInsertedSortableShadow(binding.instance.$root.dropElement);
+        binding.instance.$root.dropElement = null;
+      }
+    }, false);
+    el.addEventListener("dragstart", () => {
+      changeDragState(el, el.id, "true", "true", "false", "false", "false", "false");
+      binding.instance.$root.identity = el.id;
+      el.dataset.dragArea = el.parentNode.className;
+    }, false);
   }
 };
 var DroppableDirective = {
-  mounted(el) {
+  mounted(el, binding) {
     el.addEventListener("dragover", (event) => {
       event.preventDefault();
-    });
+      const dragId = binding.instance.$root.identity;
+      changeDragState(document.getElementById(dragId), dragId, "true", "false", "true", "false", "false", "false");
+      document.getElementById(dragId).dataset.dropArea = [...el.childNodes][1].className;
+    }, false);
     el.addEventListener("drop", (event) => {
-      const originId = event.dataTransfer.getData("originId");
-      const originNodeCopy = document.getElementById(originId).cloneNode(true);
+      event.preventDefault();
+      const dragId = binding.instance.$root.identity;
+      if (document.getElementById(dragId).dataset.dropArea == document.getElementById(dragId).dataset.dragArea) {
+        return;
+      }
+      const childrenArr = [...Array.from(el.children)[1].children];
+      if (childrenArr.length > 0) {
+        for (let index2 = 0; index2 < childrenArr.length; index2++) {
+          const childrenYRange = childrenArr[index2].getBoundingClientRect().top + childrenArr[index2].offsetHeight / 2;
+          if (parseFloat(event.clientY) < parseFloat(childrenYRange)) {
+            el.children[1].insertBefore(document.getElementById(dragId), childrenArr[index2]);
+            break;
+          }
+          if (index2 === childrenArr.length - 1) {
+            el.children[1].appendChild(document.getElementById(dragId));
+          }
+        }
+      } else {
+        el.childNodes[1].appendChild(document.getElementById(dragId));
+      }
+    });
+  }
+};
+var SortableDirective = {
+  mounted(el, binding) {
+    el.addEventListener("dragover", function(event) {
+      event.preventDefault();
       const targetNode = event.target;
-      targetNode.append(originNodeCopy);
+      const dragId = binding.instance.$root.identity;
+      if (!binding.instance.$root.dropElement) {
+        binding.instance.$root.dropElement = [...el.childNodes][1];
+      }
+      changeDragState(document.getElementById(binding.instance.$root.identity), binding.instance.$root.identity, "true", "false", "true", "false", "true", "false");
+      const { dragover, shouldCreateShadow } = document.getElementById(dragId).dataset;
+      if (dragover == "true") {
+        if (shouldCreateShadow == "true") {
+          createInsertSortableShadow([...targetNode.children][1], event, dragId);
+        }
+      }
+    });
+    el.addEventListener("drop", function(event) {
+      const dropArea = [...el.childNodes][1];
+      const dragId = binding.instance.$root.identity;
+      dropArea.removeChild(document.getElementById(shadowId));
+      if ([...dropArea.childNodes].length == 0) {
+        dropArea.appendChild(document.getElementById(dragId));
+      } else {
+        insertDragElement(dropArea, dragId, event);
+      }
+      changeDragState(document.getElementById(dragId), dragId, "false", "false", "false", "true", "false", "false");
     });
   }
 };
@@ -27,6 +151,7 @@ var index = {
   install(app) {
     app.directive("DDraggable", DraggableDirective);
     app.directive("DDroppable", DroppableDirective);
+    app.directive("DSortable", SortableDirective);
   }
 };
-export { DraggableDirective, DroppableDirective, index as default };
+export { DraggableDirective, DroppableDirective, SortableDirective, index as default };

package/dragdrop/index.umd.js

@@ -1 +1 @@
-(function(t,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(t=typeof globalThis!="undefined"?globalThis:t||self,r(t.index={}))})(this,function(t){"use strict";var r={mounted(e){e.setAttribute("draggable","true"),e.style.cursor="grab",e.addEventListener("dragstart",d=>{d.dataTransfer.setData("originId",e.id)})}},i={mounted(e){e.addEventListener("dragover",d=>{d.preventDefault()}),e.addEventListener("drop",d=>{const n=d.dataTransfer.getData("originId"),o=document.getElementById(n).cloneNode(!0);d.target.append(o)})}},a={title:"Dragdrop \u62D6\u62FD",category:"\u901A\u7528",status:"10%",install(e){e.directive("DDraggable",r),e.directive("DDroppable",i)}};t.DraggableDirective=r,t.DroppableDirective=i,t.default=a,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(l,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(l=typeof globalThis!="undefined"?globalThis:l||self,r(l.index={}))})(this,function(l){"use strict";const r="shadow0611";function h(e,t){return document.getElementById(e).currentStyle?document.getElementById(e).currentStyle[t]:window.getComputedStyle(document.getElementById(e),t)}function s(e){const t=document.createElement("div");return t.id=r,t.style.background="rgb(206, 215, 255)",t.style.width=h(e,"width"),t.style.height="20px",t}function i(e,t,a,n,d,o,c,I){e.dataset.originId=t,e.dataset.dragStart=a,e.dataset.dragover=d,e.dataset.drop=o,e.dataset.shouldCreateShadow=c,e.dataset.dragFlag=I}function u(e){return e.getBoundingClientRect().top+Math.floor(e.offsetHeight/2)}function y(e,t,a){const n=[...e.children];if(n.length==0){if(!document.getElementById(r)){const d=s(a);e.appendChild(d)}}else for(let d=0;d<n.length;d++){const o=u(n[d]);if(document.getElementById(r)&&e.removeChild(document.getElementById(r)),d==n.length-1){e.appendChild(s(a));break}if(Math.floor(t.clientY)<=o){e.insertBefore(s(a),n[d]);break}}}function E(e,t,a){for(let n=0;n<[...e.children].length;n++){if(n==[...e.children].length-1){e.appendChild(document.getElementById(t));break}if(Math.floor(a.clientY)<=u([...e.children][n])){e.insertBefore(document.getElementById(t),[...e.children][n]);break}}}function p(e){e&&document.getElementById(r)&&e.contains(document.getElementById(r))&&e.removeChild(document.getElementById(r))}var f={mounted(e,t){e.setAttribute("draggable","true"),e.style.cursor="grab",e.addEventListener("drag",()=>{i(e,e.id,"true","true","false","false","false","true"),t.instance.$root.dropElement&&document.getElementById(r)&&(p(t.instance.$root.dropElement),t.instance.$root.dropElement=null)},!1),e.addEventListener("dragstart",()=>{i(e,e.id,"true","true","false","false","false","false"),t.instance.$root.identity=e.id,e.dataset.dragArea=e.parentNode.className},!1)}},m={mounted(e,t){e.addEventListener("dragover",a=>{a.preventDefault();const n=t.instance.$root.identity;i(document.getElementById(n),n,"true","false","true","false","false","false"),document.getElementById(n).dataset.dropArea=[...e.childNodes][1].className},!1),e.addEventListener("drop",a=>{a.preventDefault();const n=t.instance.$root.identity;if(document.getElementById(n).dataset.dropArea==document.getElementById(n).dataset.dragArea)return;const d=[...Array.from(e.children)[1].children];if(d.length>0)for(let o=0;o<d.length;o++){const c=d[o].getBoundingClientRect().top+d[o].offsetHeight/2;if(parseFloat(a.clientY)<parseFloat(c)){e.children[1].insertBefore(document.getElementById(n),d[o]);break}o===d.length-1&&e.children[1].appendChild(document.getElementById(n))}else e.childNodes[1].appendChild(document.getElementById(n))})}},g={mounted(e,t){e.addEventListener("dragover",function(a){a.preventDefault();const n=a.target,d=t.instance.$root.identity;t.instance.$root.dropElement||(t.instance.$root.dropElement=[...e.childNodes][1]),i(document.getElementById(t.instance.$root.identity),t.instance.$root.identity,"true","false","true","false","true","false");const{dragover:o,shouldCreateShadow:c}=document.getElementById(d).dataset;o=="true"&&c=="true"&&y([...n.children][1],a,d)}),e.addEventListener("drop",function(a){const n=[...e.childNodes][1],d=t.instance.$root.identity;n.removeChild(document.getElementById(r)),[...n.childNodes].length==0?n.appendChild(document.getElementById(d)):E(n,d,a),i(document.getElementById(d),d,"false","false","false","true","false","false")})}},B={title:"Dragdrop \u62D6\u62FD",category:"\u901A\u7528",status:"10%",install(e){e.directive("DDraggable",f),e.directive("DDroppable",m),e.directive("DSortable",g)}};l.DraggableDirective=f,l.DroppableDirective=m,l.SortableDirective=g,l.default=B,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});

package/drawer/index.es.js

@@ -14,13 +14,10 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, ref, inject, computed, createVNode, createTextVNode, toRefs, watch, provide, onUnmounted, Teleport } from "vue";
+import { defineComponent, createVNode, Transition, ref, computed, watch, onUnmounted, Teleport, mergeProps, reactive, createApp, isVNode } from "vue";
+import { onClickOutside } from "@vueuse/core";
 const drawerProps = {
-  width: {
-    type: String,
-    default: "300px"
-  },
-  visible: {
+  modelValue: {
     type: Boolean,
     default: false
   },
@@ -28,7 +25,7 @@ const drawerProps = {
     type: Number,
     default: 1e3
   },
-  isCover: {
+  showOverlay: {
     type: Boolean,
     default: true
   },
@@ -38,251 +35,200 @@ const drawerProps = {
   },
   position: {
     type: String,
-    default: "left"
+    default: "right"
   },
-  backdropCloseable: {
+  lockScroll: {
     type: Boolean,
     default: true
   },
-  beforeHidden: {
-    type: [Promise, Function]
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  },
+  beforeClose: {
+    type: Function
   }
 };
-var drawerHeader = "";
-var DrawerHeader = defineComponent({
-  name: "DrawerHeader",
-  emits: ["toggleFullScreen", "close"],
-  setup(props, ctx) {
-    const isFullScreen = ref(false);
-    const visible = inject("visible");
-    const fullScreenClassName = computed(() => isFullScreen.value ? "icon icon-minimize" : "icon icon-maxmize");
-    const handleFullScreen = (e) => {
-      e.stopPropagation();
-      isFullScreen.value = !isFullScreen.value;
-      ctx.emit("toggleFullScreen");
-    };
-    const handleDrawerClose = () => {
-      ctx.emit("close");
-    };
-    return {
-      fullScreenClassName,
-      visible,
-      handleFullScreen,
-      handleDrawerClose
-    };
-  },
-  render() {
-    const {
-      handleFullScreen,
-      handleDrawerClose,
-      visible,
-      fullScreenClassName
-    } = this;
-    if (!visible)
-      return null;
-    return createVNode("div", {
-      "class": "devui-drawer-header"
-    }, [createVNode("div", {
-      "class": "devui-drawer-header-item"
-    }, [createVNode("span", {
-      "class": "devui-drawer-header-item icon icon-more-operate"
-    }, null)]), createVNode("div", {
-      "class": "devui-drawer-header-item",
-      "onClick": handleFullScreen
-    }, [createVNode("span", {
-      "class": fullScreenClassName
-    }, null)]), createVNode("div", {
-      "class": "devui-drawer-header-item",
-      "onClick": handleDrawerClose
-    }, [createVNode("span", {
-      "class": "icon icon-close"
-    }, null)])]);
+const drawerOverlayProps = {
+  visible: {
+    type: Boolean,
+    default: false
   }
-});
-var DrawerContainer = defineComponent({
-  name: "DrawerContainer",
-  setup() {
-    const visible = inject("visible");
-    return {
-      visible
+};
+var drawerOverlay = "";
+var DrawerOverlay = defineComponent({
+  name: "DDrawerOverlay",
+  props: drawerOverlayProps,
+  emits: ["click"],
+  setup(props, ctx) {
+    const handleClick = (e) => {
+      ctx.emit("click", e);
     };
-  },
-  render() {
-    const {
-      visible
-    } = this;
-    if (!visible)
-      return null;
-    return createVNode("div", null, [createTextVNode("\u5185\u5BB9\u533A\u57DF")]);
+    return () => createVNode(Transition, {
+      "name": "drawer-overlay-fade"
+    }, {
+      default: () => [props.visible && createVNode("div", {
+        "class": "devui-drawer-overlay",
+        "onClick": handleClick
+      }, null)]
+    });
   }
 });
-var drawerBody = "";
-var DrawerBody = defineComponent({
-  name: "DrawerBody",
-  setup(props, {
-    slots
-  }) {
-    const isFullScreen = inject("isFullScreen");
-    const closeDrawer = inject("closeDrawer");
-    const zindex = inject("zindex");
-    const isCover = inject("isCover");
-    const position = inject("position");
-    const width = inject("width");
-    const visible = inject("visible");
-    const backdropCloseable = inject("backdropCloseable");
-    const navRight = computed(() => position.value === "right" ? {
-      "right": 0
-    } : {
-      "left": 0
-    });
-    const navWidth = computed(() => isFullScreen.value ? "100vw" : width.value);
-    const clickContent = (e) => {
-      e.stopPropagation();
-    };
-    const handleDrawerClose = () => {
-      if (!backdropCloseable.value)
-        return;
-      closeDrawer();
-    };
-    return {
-      zindex,
-      slots,
-      isCover,
-      navRight,
-      navWidth,
-      visible,
-      clickContent,
-      handleDrawerClose
+function lockScroll() {
+  if (document.documentElement.scrollHeight > document.documentElement.clientHeight) {
+    const scrollTop = document.documentElement.scrollTop;
+    const style = document.documentElement.getAttribute("style");
+    document.documentElement.style.position = "fixed";
+    document.documentElement.style.top = `-${scrollTop}px`;
+    document.documentElement.style.width = document.documentElement.style.width || "100%";
+    document.documentElement.style.overflowY = "scroll";
+    return () => {
+      if (style) {
+        document.documentElement.setAttribute("style", style);
+      } else {
+        document.documentElement.removeAttribute("style");
+      }
+      document.documentElement.scrollTop = scrollTop;
     };
-  },
-  render() {
-    const {
-      zindex,
-      slots,
-      isCover,
-      navRight,
-      navWidth,
-      visible,
-      handleDrawerClose
-    } = this;
-    if (!visible)
-      return null;
-    return createVNode("div", {
-      "class": "devui-drawer",
-      "style": {
-        zIndex: zindex
-      },
-      "onClick": handleDrawerClose
-    }, [isCover ? createVNode("div", {
-      "class": "devui-overlay-backdrop"
-    }, null) : null, createVNode("div", {
-      "class": "devui-overlay-wrapper"
-    }, [createVNode("div", {
-      "class": "devui-drawer-nav",
-      "style": __spreadValues({
-        "width": navWidth
-      }, navRight)
-    }, [createVNode("div", {
-      "class": "devui-drawer-content",
-      "onClick": this.clickContent
-    }, [slots.default ? slots.default() : null])])])]);
   }
-});
+  return;
+}
+function useDrawer(props, emit) {
+  const drawerRef = ref();
+  const drawerClasses = computed(() => ({
+    "devui-drawer": true,
+    [`devui-drawer-${props.position}`]: true
+  }));
+  const close = () => {
+    emit("update:modelValue", false);
+    emit("close");
+  };
+  let lockScrollCb;
+  const execClose = () => {
+    props.beforeClose ? props.beforeClose(close) : close();
+  };
+  const handleOverlayClick = () => {
+    props.closeOnClickOverlay && execClose();
+  };
+  const handleEscClose = (e) => {
+    e.code === "Escape" && execClose();
+  };
+  onClickOutside(drawerRef, execClose);
+  const removeBodyAdditions = () => {
+    lockScrollCb == null ? void 0 : lockScrollCb();
+    document.removeEventListener("keyup", handleEscClose);
+  };
+  watch(() => props.modelValue, (val) => {
+    if (val) {
+      emit("open");
+      props.lockScroll && (lockScrollCb = lockScroll());
+      props.escKeyCloseable && document.addEventListener("keyup", handleEscClose);
+    } else {
+      removeBodyAdditions();
+    }
+  });
+  onUnmounted(removeBodyAdditions);
+  return { drawerRef, drawerClasses, handleOverlayClick };
+}
+var drawer = "";
 var Drawer = defineComponent({
   name: "DDrawer",
+  inheritAttrs: false,
   props: drawerProps,
-  emits: ["close", "update:visible", "afterOpened"],
+  emits: ["close", "update:modelValue", "open"],
   setup(props, {
     emit,
-    slots
+    slots,
+    attrs
   }) {
     const {
-      width,
-      visible,
-      zIndex,
-      isCover,
-      escKeyCloseable,
-      position,
-      backdropCloseable
-    } = toRefs(props);
-    const isFullScreen = ref(false);
-    const fullScreenEvent = () => {
-      isFullScreen.value = !isFullScreen.value;
-    };
-    const closeDrawer = async () => {
-      var _a;
-      const beforeHidden = props.beforeHidden;
-      let result = (_a = typeof beforeHidden === "function" ? beforeHidden() : beforeHidden) != null ? _a : true;
-      if (result instanceof Promise) {
-        console.log(result);
-        result = await result;
-      }
-      if (result)
-        return;
-      emit("update:visible", false);
-      emit("close");
-    };
-    const escCloseDrawer = (e) => {
-      if (e.code === "Escape") {
-        closeDrawer();
-      }
-    };
-    watch(visible, (val) => {
-      if (val) {
-        emit("afterOpened");
-        isFullScreen.value = false;
-      }
-      if (escKeyCloseable && val) {
-        document.addEventListener("keyup", escCloseDrawer);
-      } else {
-        document.removeEventListener("keyup", escCloseDrawer);
-      }
-    });
-    provide("closeDrawer", closeDrawer);
-    provide("zindex", zIndex);
-    provide("isCover", isCover);
-    provide("position", position);
-    provide("width", width);
-    provide("visible", visible);
-    provide("isFullScreen", isFullScreen);
-    provide("backdropCloseable", backdropCloseable);
-    onUnmounted(() => {
-      document.removeEventListener("keyup", escCloseDrawer);
-    });
-    return {
-      isFullScreen,
-      visible,
-      slots,
-      fullScreenEvent,
-      closeDrawer
-    };
-  },
-  render() {
-    const fullScreenEvent = this.fullScreenEvent;
-    const closeDrawer = this.closeDrawer;
-    if (!this.visible)
-      return null;
-    return createVNode(Teleport, {
+      drawerRef,
+      drawerClasses,
+      handleOverlayClick
+    } = useDrawer(props, emit);
+    return () => createVNode(Teleport, {
       "to": "body"
     }, {
-      default: () => [createVNode(DrawerBody, null, {
-        default: () => [createVNode(DrawerHeader, {
-          "onToggleFullScreen": fullScreenEvent,
-          "onClose": closeDrawer
-        }, null), this.slots.default ? this.slots.default() : createVNode(DrawerContainer, null, null)]
+      default: () => [props.showOverlay && createVNode(DrawerOverlay, {
+        "visible": props.modelValue,
+        "style": {
+          zIndex: props.zIndex
+        },
+        "onClick": handleOverlayClick
+      }, null), createVNode(Transition, {
+        "name": `drawer-fly-${props.position}`
+      }, {
+        default: () => {
+          var _a;
+          return [props.modelValue && createVNode("div", mergeProps({
+            "ref": drawerRef,
+            "class": drawerClasses.value,
+            "style": {
+              zIndex: props.zIndex + 1
+            }
+          }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)])];
+        }
       })]
     });
   }
 });
-Drawer.install = function(app) {
-  app.component(Drawer.name, Drawer);
+function _isSlot(s) {
+  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const defaultOptions = {
+  modelValue: false,
+  content: "",
+  zIndex: 1e3,
+  showOverlay: true,
+  escKeyCloseable: true,
+  position: "right",
+  lockScroll: true,
+  closeOnClickOverlay: true
 };
+function initInstance(state) {
+  const container = document.createElement("div");
+  const content = state.content;
+  delete state.content;
+  const app = createApp({
+    setup() {
+      const handleVisibleChange = () => {
+        state.modelValue = false;
+      };
+      onUnmounted(() => {
+        console.log(111);
+        document.body.removeChild(container);
+      });
+      return () => createVNode(Drawer, mergeProps(state, {
+        "onUpdate:modelValue": handleVisibleChange
+      }), _isSlot(content) ? content : {
+        default: () => [content]
+      });
+    }
+  });
+  document.body.appendChild(container);
+  app.mount(container);
+  return app;
+}
+class DrawerService {
+  open(options) {
+    const state = reactive(__spreadValues(__spreadValues({}, defaultOptions), options));
+    const app = initInstance(state);
+    state.modelValue = true;
+    return {
+      close: () => {
+        state.modelValue = false;
+        app.unmount();
+      }
+    };
+  }
+}
 var index = {
   title: "Drawer \u62BD\u5C49\u677F",
   category: "\u53CD\u9988",
-  status: "30%",
+  status: "75%",
   install(app) {
-    app.use(Drawer);
+    app.component(Drawer.name, Drawer);
+    app.config.globalProperties.$drawerService = new DrawerService();
   }
 };
-export { Drawer, index as default };
+export { Drawer, DrawerService, index as default };

package/drawer/index.umd.js

@@ -1 +1 @@
-var j=Object.defineProperty;var D=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,B=Object.prototype.propertyIsEnumerable;var N=(n,e,o)=>e in n?j(n,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[e]=o,S=(n,e)=>{for(var o in e||(e={}))x.call(e,o)&&N(n,o,e[o]);if(D)for(var o of D(e))B.call(e,o)&&N(n,o,e[o]);return n};(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.index={},n.Vue))})(this,function(n,e){"use strict";const o={width:{type:String,default:"300px"},visible:{type:Boolean,default:!1},zIndex:{type:Number,default:1e3},isCover:{type:Boolean,default:!0},escKeyCloseable:{type:Boolean,default:!0},position:{type:String,default:"left"},backdropCloseable:{type:Boolean,default:!0},beforeHidden:{type:[Promise,Function]}};var z="",V=e.defineComponent({name:"DrawerHeader",emits:["toggleFullScreen","close"],setup(r,t){const l=e.ref(!1),s=e.inject("visible");return{fullScreenClassName:e.computed(()=>l.value?"icon icon-minimize":"icon icon-maxmize"),visible:s,handleFullScreen:f=>{f.stopPropagation(),l.value=!l.value,t.emit("toggleFullScreen")},handleDrawerClose:()=>{t.emit("close")}}},render(){const{handleFullScreen:r,handleDrawerClose:t,visible:l,fullScreenClassName:s}=this;return l?e.createVNode("div",{class:"devui-drawer-header"},[e.createVNode("div",{class:"devui-drawer-header-item"},[e.createVNode("span",{class:"devui-drawer-header-item icon icon-more-operate"},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:r},[e.createVNode("span",{class:s},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:t},[e.createVNode("span",{class:"icon icon-close"},null)])]):null}}),g=e.defineComponent({name:"DrawerContainer",setup(){return{visible:e.inject("visible")}},render(){const{visible:r}=this;return r?e.createVNode("div",null,[e.createTextVNode("\u5185\u5BB9\u533A\u57DF")]):null}}),E="",k=e.defineComponent({name:"DrawerBody",setup(r,{slots:t}){const l=e.inject("isFullScreen"),s=e.inject("closeDrawer"),a=e.inject("zindex"),c=e.inject("isCover"),u=e.inject("position"),f=e.inject("width"),C=e.inject("visible"),v=e.inject("backdropCloseable"),d=e.computed(()=>u.value==="right"?{right:0}:{left:0}),b=e.computed(()=>l.value?"100vw":f.value);return{zindex:a,slots:t,isCover:c,navRight:d,navWidth:b,visible:C,clickContent:i=>{i.stopPropagation()},handleDrawerClose:()=>{!v.value||s()}}},render(){const{zindex:r,slots:t,isCover:l,navRight:s,navWidth:a,visible:c,handleDrawerClose:u}=this;return c?e.createVNode("div",{class:"devui-drawer",style:{zIndex:r},onClick:u},[l?e.createVNode("div",{class:"devui-overlay-backdrop"},null):null,e.createVNode("div",{class:"devui-overlay-wrapper"},[e.createVNode("div",{class:"devui-drawer-nav",style:S({width:a},s)},[e.createVNode("div",{class:"devui-drawer-content",onClick:this.clickContent},[t.default?t.default():null])])])]):null}}),p=e.defineComponent({name:"DDrawer",props:o,emits:["close","update:visible","afterOpened"],setup(r,{emit:t,slots:l}){const{width:s,visible:a,zIndex:c,isCover:u,escKeyCloseable:f,position:C,backdropCloseable:v}=e.toRefs(r),d=e.ref(!1),b=()=>{d.value=!d.value},h=async()=>{var y;const i=r.beforeHidden;let w=(y=typeof i=="function"?i():i)!=null?y:!0;w instanceof Promise&&(console.log(w),w=await w),!w&&(t("update:visible",!1),t("close"))},m=i=>{i.code==="Escape"&&h()};return e.watch(a,i=>{i&&(t("afterOpened"),d.value=!1),f&&i?document.addEventListener("keyup",m):document.removeEventListener("keyup",m)}),e.provide("closeDrawer",h),e.provide("zindex",c),e.provide("isCover",u),e.provide("position",C),e.provide("width",s),e.provide("visible",a),e.provide("isFullScreen",d),e.provide("backdropCloseable",v),e.onUnmounted(()=>{document.removeEventListener("keyup",m)}),{isFullScreen:d,visible:a,slots:l,fullScreenEvent:b,closeDrawer:h}},render(){const r=this.fullScreenEvent,t=this.closeDrawer;return this.visible?e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode(k,null,{default:()=>[e.createVNode(V,{onToggleFullScreen:r,onClose:t},null),this.slots.default?this.slots.default():e.createVNode(g,null,null)]})]}):null}});p.install=function(r){r.component(p.name,p)};var F={title:"Drawer \u62BD\u5C49\u677F",category:"\u53CD\u9988",status:"30%",install(r){r.use(p)}};n.Drawer=p,n.default=F,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+var x=Object.defineProperty;var C=Object.getOwnPropertySymbols;var N=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var v=(o,e,r)=>e in o?x(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,f=(o,e)=>{for(var r in e||(e={}))N.call(e,r)&&v(o,r,e[r]);if(C)for(var r of C(e))T.call(e,r)&&v(o,r,e[r]);return o};(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.index={},o.Vue,o.core))})(this,function(o,e,r){"use strict";const h={modelValue:{type:Boolean,default:!1},zIndex:{type:Number,default:1e3},showOverlay:{type:Boolean,default:!0},escKeyCloseable:{type:Boolean,default:!0},position:{type:String,default:"right"},lockScroll:{type:Boolean,default:!0},closeOnClickOverlay:{type:Boolean,default:!0},beforeClose:{type:Function}},b={visible:{type:Boolean,default:!1}};var B="",V=e.defineComponent({name:"DDrawerOverlay",props:b,emits:["click"],setup(t,n){const l=d=>{n.emit("click",d)};return()=>e.createVNode(e.Transition,{name:"drawer-overlay-fade"},{default:()=>[t.visible&&e.createVNode("div",{class:"devui-drawer-overlay",onClick:l},null)]})}});function O(){if(document.documentElement.scrollHeight>document.documentElement.clientHeight){const t=document.documentElement.scrollTop,n=document.documentElement.getAttribute("style");return document.documentElement.style.position="fixed",document.documentElement.style.top=`-${t}px`,document.documentElement.style.width=document.documentElement.style.width||"100%",document.documentElement.style.overflowY="scroll",()=>{n?document.documentElement.setAttribute("style",n):document.documentElement.removeAttribute("style"),document.documentElement.scrollTop=t}}}function E(t,n){const l=e.ref(),d=e.computed(()=>({"devui-drawer":!0,[`devui-drawer-${t.position}`]:!0})),c=()=>{n("update:modelValue",!1),n("close")};let a;const u=()=>{t.beforeClose?t.beforeClose(c):c()},s=()=>{t.closeOnClickOverlay&&u()},p=m=>{m.code==="Escape"&&u()};r.onClickOutside(l,u);const w=()=>{a==null||a(),document.removeEventListener("keyup",p)};return e.watch(()=>t.modelValue,m=>{m?(n("open"),t.lockScroll&&(a=O()),t.escKeyCloseable&&document.addEventListener("keyup",p)):w()}),e.onUnmounted(w),{drawerRef:l,drawerClasses:d,handleOverlayClick:s}}var I="",i=e.defineComponent({name:"DDrawer",inheritAttrs:!1,props:h,emits:["close","update:modelValue","open"],setup(t,{emit:n,slots:l,attrs:d}){const{drawerRef:c,drawerClasses:a,handleOverlayClick:u}=E(t,n);return()=>e.createVNode(e.Teleport,{to:"body"},{default:()=>[t.showOverlay&&e.createVNode(V,{visible:t.modelValue,style:{zIndex:t.zIndex},onClick:u},null),e.createVNode(e.Transition,{name:`drawer-fly-${t.position}`},{default:()=>{var s;return[t.modelValue&&e.createVNode("div",e.mergeProps({ref:c,class:a.value,style:{zIndex:t.zIndex+1}},d),[(s=l.default)==null?void 0:s.call(l)])]}})]})}});function k(t){return typeof t=="function"||Object.prototype.toString.call(t)==="[object Object]"&&!e.isVNode(t)}const g={modelValue:!1,content:"",zIndex:1e3,showOverlay:!0,escKeyCloseable:!0,position:"right",lockScroll:!0,closeOnClickOverlay:!0};function D(t){const n=document.createElement("div"),l=t.content;delete t.content;const d=e.createApp({setup(){const c=()=>{t.modelValue=!1};return e.onUnmounted(()=>{console.log(111),document.body.removeChild(n)}),()=>e.createVNode(i,e.mergeProps(t,{"onUpdate:modelValue":c}),k(l)?l:{default:()=>[l]})}});return document.body.appendChild(n),d.mount(n),d}class y{open(n){const l=e.reactive(f(f({},g),n)),d=D(l);return l.modelValue=!0,{close:()=>{l.modelValue=!1,d.unmount()}}}}var S={title:"Drawer \u62BD\u5C49\u677F",category:"\u53CD\u9988",status:"75%",install(t){t.component(i.name,i),t.config.globalProperties.$drawerService=new y}};o.Drawer=i,o.DrawerService=y,o.default=S,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});