vue-devui 1.0.0-beta.11 → 1.0.0-beta.15

package/drawer/index.es.js

@@ -14,7 +14,11 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, ref, inject, computed, createVNode, createTextVNode, toRefs, watch, provide, onUnmounted, Teleport } from "vue";
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineComponent, ref, inject, computed, createVNode, createTextVNode, toRefs, watch, provide, onUnmounted, Teleport, createApp } from "vue";
 const drawerProps = {
   width: {
     type: String,
@@ -44,8 +48,18 @@ const drawerProps = {
     type: Boolean,
     default: true
   },
+  destroyOnHide: {
+    type: Boolean,
+    default: false
+  },
   beforeHidden: {
     type: [Promise, Function]
+  },
+  content: {
+    type: [Object, Function]
+  },
+  header: {
+    type: [Object, Function]
   }
 };
 var drawerHeader = "";
@@ -55,6 +69,7 @@ var DrawerHeader = defineComponent({
   setup(props, ctx) {
     const isFullScreen = ref(false);
     const visible = inject("visible");
+    const destroyOnHide = inject("destroyOnHide");
     const fullScreenClassName = computed(() => isFullScreen.value ? "icon icon-minimize" : "icon icon-maxmize");
     const handleFullScreen = (e) => {
       e.stopPropagation();
@@ -68,7 +83,8 @@ var DrawerHeader = defineComponent({
       fullScreenClassName,
       visible,
       handleFullScreen,
-      handleDrawerClose
+      handleDrawerClose,
+      destroyOnHide
     };
   },
   render() {
@@ -76,12 +92,18 @@ var DrawerHeader = defineComponent({
       handleFullScreen,
       handleDrawerClose,
       visible,
-      fullScreenClassName
+      fullScreenClassName,
+      destroyOnHide
     } = this;
-    if (!visible)
+    if (destroyOnHide.value && !visible) {
       return null;
+    }
+    const visibleVal = visible ? "visible" : "hidden";
     return createVNode("div", {
-      "class": "devui-drawer-header"
+      "class": "devui-drawer-header",
+      "style": {
+        visibility: visibleVal
+      }
     }, [createVNode("div", {
       "class": "devui-drawer-header-item"
     }, [createVNode("span", {
@@ -103,17 +125,26 @@ var DrawerContainer = defineComponent({
   name: "DrawerContainer",
   setup() {
     const visible = inject("visible");
+    const destroyOnHide = inject("destroyOnHide");
     return {
-      visible
+      visible,
+      destroyOnHide
     };
   },
   render() {
     const {
-      visible
+      visible,
+      destroyOnHide
     } = this;
-    if (!visible)
+    if (destroyOnHide.value && !visible) {
       return null;
-    return createVNode("div", null, [createTextVNode("\u5185\u5BB9\u533A\u57DF")]);
+    }
+    const visibleVal = this.visible ? "visible" : "hidden";
+    return createVNode("div", {
+      "style": {
+        visibility: visibleVal
+      }
+    }, [createTextVNode("\u5185\u5BB9\u533A\u57DF")]);
   }
 });
 var drawerBody = "";
@@ -130,6 +161,7 @@ var DrawerBody = defineComponent({
     const width = inject("width");
     const visible = inject("visible");
     const backdropCloseable = inject("backdropCloseable");
+    const destroyOnHide = inject("destroyOnHide");
     const navRight = computed(() => position.value === "right" ? {
       "right": 0
     } : {
@@ -152,7 +184,8 @@ var DrawerBody = defineComponent({
       navWidth,
       visible,
       clickContent,
-      handleDrawerClose
+      handleDrawerClose,
+      destroyOnHide
     };
   },
   render() {
@@ -163,14 +196,18 @@ var DrawerBody = defineComponent({
       navRight,
       navWidth,
       visible,
-      handleDrawerClose
+      handleDrawerClose,
+      destroyOnHide
     } = this;
-    if (!visible)
+    if (destroyOnHide.value && !visible) {
       return null;
+    }
+    const visibleVal = visible ? "visible" : "hidden";
     return createVNode("div", {
       "class": "devui-drawer",
       "style": {
-        zIndex: zindex
+        zIndex: zindex,
+        visibility: visibleVal
       },
       "onClick": handleDrawerClose
     }, [isCover ? createVNode("div", {
@@ -188,7 +225,7 @@ var DrawerBody = defineComponent({
     }, [slots.default ? slots.default() : null])])])]);
   }
 });
-var Drawer = defineComponent({
+var Drawer$1 = defineComponent({
   name: "DDrawer",
   props: drawerProps,
   emits: ["close", "update:visible", "afterOpened"],
@@ -203,10 +240,11 @@ var Drawer = defineComponent({
       isCover,
       escKeyCloseable,
       position,
-      backdropCloseable
+      backdropCloseable,
+      destroyOnHide
     } = toRefs(props);
     const isFullScreen = ref(false);
-    const fullScreenEvent = () => {
+    const fullscreen = () => {
       isFullScreen.value = !isFullScreen.value;
     };
     const closeDrawer = async () => {
@@ -229,7 +267,9 @@ var Drawer = defineComponent({
     watch(visible, (val) => {
       if (val) {
         emit("afterOpened");
-        isFullScreen.value = false;
+        if (destroyOnHide.value) {
+          isFullScreen.value = false;
+        }
       }
       if (escKeyCloseable && val) {
         document.addEventListener("keyup", escCloseDrawer);
@@ -245,6 +285,7 @@ var Drawer = defineComponent({
     provide("visible", visible);
     provide("isFullScreen", isFullScreen);
     provide("backdropCloseable", backdropCloseable);
+    provide("destroyOnHide", destroyOnHide);
     onUnmounted(() => {
       document.removeEventListener("keyup", escCloseDrawer);
     });
@@ -252,36 +293,107 @@ var Drawer = defineComponent({
       isFullScreen,
       visible,
       slots,
-      fullScreenEvent,
+      fullscreen,
       closeDrawer
     };
   },
   render() {
-    const fullScreenEvent = this.fullScreenEvent;
-    const closeDrawer = this.closeDrawer;
-    if (!this.visible)
+    const {
+      fullscreen,
+      closeDrawer,
+      visible,
+      destroyOnHide
+    } = this;
+    if (destroyOnHide.value && !visible) {
       return null;
+    }
+    const visibleVal = visible ? "visible" : "hidden";
     return createVNode(Teleport, {
       "to": "body"
     }, {
-      default: () => [createVNode(DrawerBody, null, {
-        default: () => [this.slots.header ? this.slots.header() : createVNode(DrawerHeader, {
-          "onToggleFullScreen": fullScreenEvent,
+      default: () => [createVNode(DrawerBody, {
+        "style": {
+          visibility: visibleVal
+        }
+      }, {
+        default: () => [this.slots.header ? this.slots.header({
+          fullscreen,
+          closeDrawer
+        }) : createVNode(DrawerHeader, {
+          "onToggleFullScreen": fullscreen,
           "onClose": closeDrawer
-        }, null), this.slots.default ? this.slots.default() : createVNode(DrawerContainer, null, null)]
+        }, null), this.slots.content ? this.slots.content() : createVNode(DrawerContainer, null, null)]
       })]
     });
   }
 });
-Drawer.install = function(app) {
-  app.component(Drawer.name, Drawer);
+function createDrawerApp(props, drawer, el) {
+  if (drawer) {
+    return drawer;
+  }
+  const res = createApp(createVNode(Drawer$1, {
+    "visible": props.visible,
+    "onUpdate:visible": ($event) => props.visible = $event
+  }, {
+    header: props.header,
+    content: props.content
+  }));
+  res.mount(el);
+  return res;
+}
+class DrawerService {
+  static create(props, drawer) {
+    if (!drawer) {
+      drawer = new Drawer(props);
+    }
+    return drawer;
+  }
+}
+class Drawer {
+  constructor(props) {
+    __publicField(this, "drawer", null);
+    __publicField(this, "div", null);
+    __publicField(this, "props", null);
+    __publicField(this, "hide", async () => {
+      var _a;
+      const beforeHidden = this.props.beforeHidden;
+      let result = (_a = typeof beforeHidden === "function" ? beforeHidden() : beforeHidden) != null ? _a : false;
+      if (result instanceof Promise) {
+        result = await result;
+      }
+      if (!result)
+        this.hideDirectly();
+    });
+    __publicField(this, "hideDirectly", () => {
+      this.drawer._instance.props.visible = false;
+    });
+    __publicField(this, "destroy", () => {
+      if (this.drawer) {
+        this.drawer.unmount();
+        this.drawer = null;
+        this.div.remove();
+      }
+    });
+    this.props = props;
+  }
+  show() {
+    if (!this.drawer) {
+      this.div = document.createElement("div");
+      this.drawer = createDrawerApp(this.props, this.drawer, this.div);
+    }
+    this.drawer._instance.props.visible = true;
+  }
+}
+Drawer$1.install = function(app) {
+  app.component(Drawer$1.name, Drawer$1);
 };
 var index = {
   title: "Drawer \u62BD\u5C49\u677F",
   category: "\u53CD\u9988",
-  status: "50%",
+  status: "75%",
   install(app) {
-    app.use(Drawer);
+    app.use(Drawer$1);
+    app.config.globalProperties.$drawerService = DrawerService;
   }
 };
-export { Drawer, index as default };
+export { Drawer$1 as 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,l)=>e in n?j(n,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):n[e]=l,S=(n,e)=>{for(var l in e||(e={}))x.call(e,l)&&N(n,l,e[l]);if(D)for(var l of D(e))B.call(e,l)&&N(n,l,e[l]);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 l={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(t,r){const o=e.ref(!1),s=e.inject("visible");return{fullScreenClassName:e.computed(()=>o.value?"icon icon-minimize":"icon icon-maxmize"),visible:s,handleFullScreen:f=>{f.stopPropagation(),o.value=!o.value,r.emit("toggleFullScreen")},handleDrawerClose:()=>{r.emit("close")}}},render(){const{handleFullScreen:t,handleDrawerClose:r,visible:o,fullScreenClassName:s}=this;return o?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:t},[e.createVNode("span",{class:s},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:r},[e.createVNode("span",{class:"icon icon-close"},null)])]):null}}),g=e.defineComponent({name:"DrawerContainer",setup(){return{visible:e.inject("visible")}},render(){const{visible:t}=this;return t?e.createVNode("div",null,[e.createTextVNode("\u5185\u5BB9\u533A\u57DF")]):null}}),E="",k=e.defineComponent({name:"DrawerBody",setup(t,{slots:r}){const o=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(()=>o.value?"100vw":f.value);return{zindex:a,slots:r,isCover:c,navRight:d,navWidth:b,visible:C,clickContent:i=>{i.stopPropagation()},handleDrawerClose:()=>{!v.value||s()}}},render(){const{zindex:t,slots:r,isCover:o,navRight:s,navWidth:a,visible:c,handleDrawerClose:u}=this;return c?e.createVNode("div",{class:"devui-drawer",style:{zIndex:t},onClick:u},[o?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},[r.default?r.default():null])])])]):null}}),p=e.defineComponent({name:"DDrawer",props:l,emits:["close","update:visible","afterOpened"],setup(t,{emit:r,slots:o}){const{width:s,visible:a,zIndex:c,isCover:u,escKeyCloseable:f,position:C,backdropCloseable:v}=e.toRefs(t),d=e.ref(!1),b=()=>{d.value=!d.value},w=async()=>{var y;const i=t.beforeHidden;let m=(y=typeof i=="function"?i():i)!=null?y:!1;m instanceof Promise&&(m=await m),!m&&(r("update:visible",!1),r("close"))},h=i=>{i.code==="Escape"&&w()};return e.watch(a,i=>{i&&(r("afterOpened"),d.value=!1),f&&i?document.addEventListener("keyup",h):document.removeEventListener("keyup",h)}),e.provide("closeDrawer",w),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",h)}),{isFullScreen:d,visible:a,slots:o,fullScreenEvent:b,closeDrawer:w}},render(){const t=this.fullScreenEvent,r=this.closeDrawer;return this.visible?e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode(k,null,{default:()=>[this.slots.header?this.slots.header():e.createVNode(V,{onToggleFullScreen:t,onClose:r},null),this.slots.default?this.slots.default():e.createVNode(g,null,null)]})]}):null}});p.install=function(t){t.component(p.name,p)};var F={title:"Drawer \u62BD\u5C49\u677F",category:"\u53CD\u9988",status:"50%",install(t){t.use(p)}};n.Drawer=p,n.default=F,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+var z=Object.defineProperty;var S=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,T=Object.prototype.propertyIsEnumerable;var V=(r,e,o)=>e in r?z(r,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):r[e]=o,g=(r,e)=>{for(var o in e||(e={}))P.call(e,o)&&V(r,o,e[o]);if(S)for(var o of S(e))T.call(e,o)&&V(r,o,e[o]);return r};var p=(r,e,o)=>(V(r,typeof e!="symbol"?e+"":e,o),o);(function(r,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis!="undefined"?globalThis:r||self,e(r.index={},r.Vue))})(this,function(r,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},destroyOnHide:{type:Boolean,default:!1},beforeHidden:{type:[Promise,Function]},content:{type:[Object,Function]},header:{type:[Object,Function]}};var E="",O=e.defineComponent({name:"DrawerHeader",emits:["toggleFullScreen","close"],setup(n,i){const t=e.ref(!1),s=e.inject("visible"),l=e.inject("destroyOnHide");return{fullScreenClassName:e.computed(()=>t.value?"icon icon-minimize":"icon icon-maxmize"),visible:s,handleFullScreen:c=>{c.stopPropagation(),t.value=!t.value,i.emit("toggleFullScreen")},handleDrawerClose:()=>{i.emit("close")},destroyOnHide:l}},render(){const{handleFullScreen:n,handleDrawerClose:i,visible:t,fullScreenClassName:s,destroyOnHide:l}=this;if(l.value&&!t)return null;const d=t?"visible":"hidden";return e.createVNode("div",{class:"devui-drawer-header",style:{visibility:d}},[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:n},[e.createVNode("span",{class:s},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:i},[e.createVNode("span",{class:"icon icon-close"},null)])])}}),j=e.defineComponent({name:"DrawerContainer",setup(){const n=e.inject("visible"),i=e.inject("destroyOnHide");return{visible:n,destroyOnHide:i}},render(){const{visible:n,destroyOnHide:i}=this;if(i.value&&!n)return null;const t=this.visible?"visible":"hidden";return e.createVNode("div",{style:{visibility:t}},[e.createTextVNode("\u5185\u5BB9\u533A\u57DF")])}}),_="",k=e.defineComponent({name:"DrawerBody",setup(n,{slots:i}){const t=e.inject("isFullScreen"),s=e.inject("closeDrawer"),l=e.inject("zindex"),d=e.inject("isCover"),h=e.inject("position"),v=e.inject("width"),c=e.inject("visible"),C=e.inject("backdropCloseable"),b=e.inject("destroyOnHide"),u=e.computed(()=>h.value==="right"?{right:0}:{left:0}),D=e.computed(()=>t.value?"100vw":v.value);return{zindex:l,slots:i,isCover:d,navRight:u,navWidth:D,visible:c,clickContent:a=>{a.stopPropagation()},handleDrawerClose:()=>{!C.value||s()},destroyOnHide:b}},render(){const{zindex:n,slots:i,isCover:t,navRight:s,navWidth:l,visible:d,handleDrawerClose:h,destroyOnHide:v}=this;if(v.value&&!d)return null;const c=d?"visible":"hidden";return e.createVNode("div",{class:"devui-drawer",style:{zIndex:n,visibility:c},onClick:h},[t?e.createVNode("div",{class:"devui-overlay-backdrop"},null):null,e.createVNode("div",{class:"devui-overlay-wrapper"},[e.createVNode("div",{class:"devui-drawer-nav",style:g({width:l},s)},[e.createVNode("div",{class:"devui-drawer-content",onClick:this.clickContent},[i.default?i.default():null])])])])}}),f=e.defineComponent({name:"DDrawer",props:o,emits:["close","update:visible","afterOpened"],setup(n,{emit:i,slots:t}){const{width:s,visible:l,zIndex:d,isCover:h,escKeyCloseable:v,position:c,backdropCloseable:C,destroyOnHide:b}=e.toRefs(n),u=e.ref(!1),D=()=>{u.value=!u.value},w=async()=>{var H;const a=n.beforeHidden;let m=(H=typeof a=="function"?a():a)!=null?H:!1;m instanceof Promise&&(m=await m),!m&&(i("update:visible",!1),i("close"))},y=a=>{a.code==="Escape"&&w()};return e.watch(l,a=>{a&&(i("afterOpened"),b.value&&(u.value=!1)),v&&a?document.addEventListener("keyup",y):document.removeEventListener("keyup",y)}),e.provide("closeDrawer",w),e.provide("zindex",d),e.provide("isCover",h),e.provide("position",c),e.provide("width",s),e.provide("visible",l),e.provide("isFullScreen",u),e.provide("backdropCloseable",C),e.provide("destroyOnHide",b),e.onUnmounted(()=>{document.removeEventListener("keyup",y)}),{isFullScreen:u,visible:l,slots:t,fullscreen:D,closeDrawer:w}},render(){const{fullscreen:n,closeDrawer:i,visible:t,destroyOnHide:s}=this;if(s.value&&!t)return null;const l=t?"visible":"hidden";return e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode(k,{style:{visibility:l}},{default:()=>[this.slots.header?this.slots.header({fullscreen:n,closeDrawer:i}):e.createVNode(O,{onToggleFullScreen:n,onClose:i},null),this.slots.content?this.slots.content():e.createVNode(j,null,null)]})]})}});function F(n,i,t){if(i)return i;const s=e.createApp(e.createVNode(f,{visible:n.visible,"onUpdate:visible":l=>n.visible=l},{header:n.header,content:n.content}));return s.mount(t),s}class N{static create(i,t){return t||(t=new B(i)),t}}class B{constructor(i){p(this,"drawer",null);p(this,"div",null);p(this,"props",null);p(this,"hide",async()=>{var s;const i=this.props.beforeHidden;let t=(s=typeof i=="function"?i():i)!=null?s:!1;t instanceof Promise&&(t=await t),t||this.hideDirectly()});p(this,"hideDirectly",()=>{this.drawer._instance.props.visible=!1});p(this,"destroy",()=>{this.drawer&&(this.drawer.unmount(),this.drawer=null,this.div.remove())});this.props=i}show(){this.drawer||(this.div=document.createElement("div"),this.drawer=F(this.props,this.drawer,this.div)),this.drawer._instance.props.visible=!0}}f.install=function(n){n.component(f.name,f)};var x={title:"Drawer \u62BD\u5C49\u677F",category:"\u53CD\u9988",status:"75%",install(n){n.use(f),n.config.globalProperties.$drawerService=N}};r.Drawer=f,r.DrawerService=N,r.default=x,Object.defineProperty(r,"__esModule",{value:!0}),r[Symbol.toStringTag]="Module"});

package/dropdown/index.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { ref, watch, defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, onUnmounted, withDirectives, vShow, reactive, toRef, isRef, toRefs, Fragment } from "vue";
+import { ref, watch, defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, onUnmounted, withDirectives, vShow, reactive, toRef, isRef, toRefs } from "vue";
 const dropdownProps = {
   origin: {
     type: Object
@@ -45,6 +45,10 @@ const dropdownProps = {
   showAnimation: {
     type: Boolean,
     default: true
+  },
+  width: {
+    type: [Number, String],
+    default: "102px"
   }
 };
 function isComponent(target) {
@@ -328,7 +332,7 @@ const FlexibleOverlay = defineComponent({
       overlayClass,
       handleBackdropClick,
       handleOverlayBubbleCancel
-    } = useOverlayLogic(props);
+    } = useOverlayLogic(props, ctx);
     return () => createVNode(CommonOverlay, null, {
       default: () => [withDirectives(createVNode("div", {
         "style": props.backgroundStyle,
@@ -490,27 +494,31 @@ var Dropdown = defineComponent({
     const animatedVisible = computed(() => {
       return props.showAnimation ? visible.value : true;
     });
-    return () => {
-      return createVNode(Fragment, null, [createVNode(FlexibleOverlay, {
-        "origin": props.origin,
-        "visible": visible.value,
-        "onUpdate:visible": ($event) => visible.value = $event,
-        "position": position,
-        "hasBackdrop": false
+    const wrapStyle = computed(() => typeof props.width === "string" ? {
+      width: props.width
+    } : {
+      width: `${props.width}px`
+    });
+    return () => createVNode(FlexibleOverlay, {
+      "origin": props.origin,
+      "visible": visible.value,
+      "onUpdate:visible": ($event) => visible.value = $event,
+      "position": position,
+      "hasBackdrop": false
+    }, {
+      default: () => [createVNode(Transition, {
+        "name": "devui-dropdown-fade"
       }, {
-        default: () => [createVNode(Transition, {
-          "name": "devui-dropdown-fade"
-        }, {
-          default: () => {
-            var _a, _b;
-            return [withDirectives(createVNode("div", {
-              "ref": dropdownEl,
-              "style": "min-width:102px"
-            }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, animatedVisible.value]])];
-          }
-        })]
-      })]);
-    };
+        default: () => {
+          var _a, _b;
+          return [withDirectives(createVNode("div", {
+            "ref": dropdownEl,
+            "class": "devui-dropdown-menu-wrap",
+            "style": wrapStyle.value
+          }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, animatedVisible.value]])];
+        }
+      })]
+    });
   }
 });
 Dropdown.install = function(app) {

package/dropdown/index.umd.js

@@ -1 +1 @@
-var Q=Object.defineProperty,W=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var ee=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable;var X=(a,t,v)=>t in a?Q(a,t,{enumerable:!0,configurable:!0,writable:!0,value:v}):a[t]=v,V=(a,t)=>{for(var v in t||(t={}))ee.call(t,v)&&X(a,v,t[v]);if(j)for(var v of j(t))te.call(t,v)&&X(a,v,t[v]);return a},Y=(a,t)=>W(a,Z(t));(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 v={origin:{type:Object},isOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0}};function F(e){return!!(e==null?void 0:e.$el)}function S(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}function g(e,o,n){return e==null||e.addEventListener(o,n),()=>{e==null||e.removeEventListener(o,n)}}const _=({visible:e,trigger:o,origin:n,closeScope:r,closeOnMouseLeaveMenu:i})=>{const u=t.ref(),l=()=>{r.value!=="none"&&(e.value=!1)};return t.watch([o,n,u],([s,b,f],m,y)=>{const c=S(b);if(!c||!f)return;const p=[g(f,"click",()=>{r.value==="all"&&(e.value=!1)})];if(s==="click")p.push(g(c,"click",()=>e.value=!e.value),g(document,"click",d=>{if(!e.value)return;const h=d.target;c.contains(h)||f.contains(h)||l()}),g(f,"mouseleave",()=>{i.value&&(e.value=!1)}));else if(s==="hover"){let d=!1,h=!1;const O=async w=>{await new Promise(k=>setTimeout(k,50)),!(w==="origin"&&d||w==="dropdown"&&h)&&l()};p.push(g(c,"mouseenter",()=>{h=!0,e.value=!0}),g(c,"mouseleave",()=>{h=!1,i.value||O("origin")}),g(f,"mouseenter",()=>{d=!0,e.value=!0}),g(f,"mouseleave",()=>{d=!1,O("dropdown")}))}y(()=>p.forEach(d=>d()))}),{dropdownEl:u}};var ne="";function M(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const R=t.defineComponent({setup(e,o){return()=>{let n;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},M(n=t.renderSlot(o.slots,"default"))?n:{default:()=>[n]})]})}}}),D={visible:{type:Boolean},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},N=["update:visible","backdropClick"],T=Y(V({},D),{overlayStyle:{type:[String,Object],default:void 0}}),z=V({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},D);function L(e,o){const n=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),r=t.computed(()=>"devui-overlay"),i=l=>{var s;l.preventDefault(),(s=e.onBackdropClick)==null||s.call(e),e.backdropClose&&o.emit("update:visible",!1)},u=l=>l.cancelBubble=!0;return t.onMounted(()=>{const l=document.body,s=l.style.overflow,b=l.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([f,m])=>{if(m){const y=l.getBoundingClientRect().y;f?(l.style.overflowY="scroll",l.style.position=f?"fixed":"",l.style.top=`${y}px`):(l.style.overflowY=s,l.style.position=b,l.style.top="",window.scrollTo(0,-y))}}),t.onUnmounted(()=>{document.body.style.overflow=s})}),{backgroundClass:n,overlayClass:r,handleBackdropClick:i,handleOverlayBubbleCancel:u}}const E=t.defineComponent({name:"DFixedOverlay",props:T,emits:N,setup(e,o){const{backgroundClass:n,overlayClass:r,handleBackdropClick:i,handleOverlayBubbleCancel:u}=L(e,o);return()=>t.createVNode(R,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:n.value,style:e.backgroundStyle,onClick:i},[t.createVNode("div",{class:r.value,style:e.overlayStyle,onClick:u},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}}),B=t.defineComponent({name:"DFlexibleOverlay",props:z,emits:N,setup(e,o){const n=t.ref(null),r=t.reactive({position:"absolute"});t.onMounted(async()=>{const b=(c,p,d)=>{const h=$(c,p,d);r.left=`${h.x}px`,r.top=`${h.y}px`},f=t.computed(()=>{const c=n.value,p=P(e.origin);if(!(!c||!p))return{origin:p,overlay:c}}),m=t.toRef(e,"visible"),y=t.toRef(e,"position");t.watch([f,m,y],async([c,p,d],h,O)=>{if(!p||!c)return;const{origin:w,overlay:k}=c;b(d,k.getBoundingClientRect(),w);const K=[G(()=>b(d,k.getBoundingClientRect(),w)),H(k,x=>b(d,x[0].contentRect,w)),I(w,()=>b(d,k.getBoundingClientRect(),w))];O(()=>{K.forEach(x=>x())})})});const{backgroundClass:i,overlayClass:u,handleBackdropClick:l,handleOverlayBubbleCancel:s}=L(e);return()=>t.createVNode(R,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:i.value,onClick:l},[t.createVNode("div",{ref:n,class:u.value,style:r,onClick:s},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}});function P(e){return e instanceof Element?e:t.isRef(e)?S(e.value):F(e)?S(e):e}function $(e,o,n){const r=A(n),i=U(r,e);return q(i,o,e)}function A(e){if(e instanceof Element)return e.getBoundingClientRect();const o=e.width||0,n=e.height||0;return{top:e.y,bottom:e.y+n,left:e.x,right:e.x+o,height:n,width:o}}function q(e,o,n){let r;const{width:i,height:u}=o;n.overlayX=="center"?r=e.x-i/2:r=n.overlayX=="left"?e.x:e.x-i;let l;return n.overlayY=="center"?l=e.y-u/2:l=n.overlayY=="top"?e.y:e.y-u,{x:r,y:l}}function U(e,o){let n;if(o.originX=="center")n=e.left+e.width/2;else{const i=e.left,u=e.right;n=o.originX=="left"?i:u}let r;return o.originY=="center"?r=e.top+e.height/2:r=o.originY=="top"?e.top:e.bottom,{x:n,y:r}}function G(e){return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}function H(e,o){if(e instanceof Element){const n=new ResizeObserver(o);return n.observe(e),()=>n.disconnect()}return()=>{}}function I(e,o){if(e instanceof Element){const n=new MutationObserver(o);return n.observe(e,{attributeFilter:["style"]}),()=>n.disconnect()}return()=>{}}B.install=function(e){e.component(B.name,B)},E.install=function(e){e.component(E.name,E)};var oe="",C=t.defineComponent({name:"DDropdown",props:v,emits:[],setup(e,o){const{isOpen:n,origin:r,trigger:i,closeScope:u,closeOnMouseLeaveMenu:l}=t.toRefs(e),s=t.ref(!1);t.watch(n,y=>{s.value=y},{immediate:!0});const b={originX:"center",originY:"bottom",overlayX:"center",overlayY:"top"},{dropdownEl:f}=_({visible:s,origin:r,trigger:i,closeScope:u,closeOnMouseLeaveMenu:l}),m=t.computed(()=>e.showAnimation?s.value:!0);return()=>t.createVNode(t.Fragment,null,[t.createVNode(B,{origin:e.origin,visible:s.value,"onUpdate:visible":y=>s.value=y,position:b,hasBackdrop:!1},{default:()=>[t.createVNode(t.Transition,{name:"devui-dropdown-fade"},{default:()=>{var y,c;return[t.withDirectives(t.createVNode("div",{ref:f,style:"min-width:102px"},[(c=(y=o.slots).default)==null?void 0:c.call(y)]),[[t.vShow,m.value]])]}})]})])}});C.install=function(e){e.component(C.name,C)};var J={title:"Dropdown \u4E0B\u62C9\u83DC\u5355",category:"\u5BFC\u822A",status:"10%",install(e){e.use(C)}};a.Dropdown=C,a.default=J,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
+var Q=Object.defineProperty,W=Object.defineProperties;var Z=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var ee=Object.prototype.hasOwnProperty,te=Object.prototype.propertyIsEnumerable;var X=(i,t,v)=>t in i?Q(i,t,{enumerable:!0,configurable:!0,writable:!0,value:v}):i[t]=v,R=(i,t)=>{for(var v in t||(t={}))ee.call(t,v)&&X(i,v,t[v]);if(j)for(var v of j(t))te.call(t,v)&&X(i,v,t[v]);return i},Y=(i,t)=>W(i,Z(t));(function(i,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis!="undefined"?globalThis:i||self,t(i.index={},i.Vue))})(this,function(i,t){"use strict";const v={origin:{type:Object},isOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},trigger:{type:String,default:"click"},closeScope:{type:String,default:"all"},closeOnMouseLeaveMenu:{type:Boolean,default:!1},showAnimation:{type:Boolean,default:!0},width:{type:[Number,String],default:"102px"}};function _(e){return!!(e==null?void 0:e.$el)}function S(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}function w(e,o,n){return e==null||e.addEventListener(o,n),()=>{e==null||e.removeEventListener(o,n)}}const F=({visible:e,trigger:o,origin:n,closeScope:r,closeOnMouseLeaveMenu:s})=>{const u=t.ref(),l=()=>{r.value!=="none"&&(e.value=!1)};return t.watch([o,n,u],([c,b,f],m,h)=>{const a=S(b);if(!a||!f)return;const y=[w(f,"click",()=>{r.value==="all"&&(e.value=!1)})];if(c==="click")y.push(w(a,"click",()=>e.value=!e.value),w(document,"click",d=>{if(!e.value)return;const p=d.target;a.contains(p)||f.contains(p)||l()}),w(f,"mouseleave",()=>{s.value&&(e.value=!1)}));else if(c==="hover"){let d=!1,p=!1;const O=async g=>{await new Promise(k=>setTimeout(k,50)),!(g==="origin"&&d||g==="dropdown"&&p)&&l()};y.push(w(a,"mouseenter",()=>{p=!0,e.value=!0}),w(a,"mouseleave",()=>{p=!1,s.value||O("origin")}),w(f,"mouseenter",()=>{d=!0,e.value=!0}),w(f,"mouseleave",()=>{d=!1,O("dropdown")}))}h(()=>y.forEach(d=>d()))}),{dropdownEl:u}};var ne="";function M(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const V=t.defineComponent({setup(e,o){return()=>{let n;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},M(n=t.renderSlot(o.slots,"default"))?n:{default:()=>[n]})]})}}}),D={visible:{type:Boolean},backgroundBlock:{type:Boolean,default:!1},backgroundClass:{type:String,default:""},backgroundStyle:{type:[String,Object]},onBackdropClick:{type:Function},backdropClose:{type:Boolean,default:!0},hasBackdrop:{type:Boolean,default:!0}},N=["update:visible","backdropClick"],T=Y(R({},D),{overlayStyle:{type:[String,Object],default:void 0}}),$=R({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},D);function L(e,o){const n=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),r=t.computed(()=>"devui-overlay"),s=l=>{var c;l.preventDefault(),(c=e.onBackdropClick)==null||c.call(e),e.backdropClose&&o.emit("update:visible",!1)},u=l=>l.cancelBubble=!0;return t.onMounted(()=>{const l=document.body,c=l.style.overflow,b=l.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([f,m])=>{if(m){const h=l.getBoundingClientRect().y;f?(l.style.overflowY="scroll",l.style.position=f?"fixed":"",l.style.top=`${h}px`):(l.style.overflowY=c,l.style.position=b,l.style.top="",window.scrollTo(0,-h))}}),t.onUnmounted(()=>{document.body.style.overflow=c})}),{backgroundClass:n,overlayClass:r,handleBackdropClick:s,handleOverlayBubbleCancel:u}}const E=t.defineComponent({name:"DFixedOverlay",props:T,emits:N,setup(e,o){const{backgroundClass:n,overlayClass:r,handleBackdropClick:s,handleOverlayBubbleCancel:u}=L(e,o);return()=>t.createVNode(V,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:n.value,style:e.backgroundStyle,onClick:s},[t.createVNode("div",{class:r.value,style:e.overlayStyle,onClick:u},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}}),B=t.defineComponent({name:"DFlexibleOverlay",props:$,emits:N,setup(e,o){const n=t.ref(null),r=t.reactive({position:"absolute"});t.onMounted(async()=>{const b=(a,y,d)=>{const p=P(a,y,d);r.left=`${p.x}px`,r.top=`${p.y}px`},f=t.computed(()=>{const a=n.value,y=z(e.origin);if(!(!a||!y))return{origin:y,overlay:a}}),m=t.toRef(e,"visible"),h=t.toRef(e,"position");t.watch([f,m,h],async([a,y,d],p,O)=>{if(!y||!a)return;const{origin:g,overlay:k}=a;b(d,k.getBoundingClientRect(),g);const K=[G(()=>b(d,k.getBoundingClientRect(),g)),H(k,x=>b(d,x[0].contentRect,g)),I(g,()=>b(d,k.getBoundingClientRect(),g))];O(()=>{K.forEach(x=>x())})})});const{backgroundClass:s,overlayClass:u,handleBackdropClick:l,handleOverlayBubbleCancel:c}=L(e,o);return()=>t.createVNode(V,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:s.value,onClick:l},[t.createVNode("div",{ref:n,class:u.value,style:r,onClick:c},[t.renderSlot(o.slots,"default")])]),[[t.vShow,e.visible]])]})}});function z(e){return e instanceof Element?e:t.isRef(e)?S(e.value):_(e)?S(e):e}function P(e,o,n){const r=A(n),s=U(r,e);return q(s,o,e)}function A(e){if(e instanceof Element)return e.getBoundingClientRect();const o=e.width||0,n=e.height||0;return{top:e.y,bottom:e.y+n,left:e.x,right:e.x+o,height:n,width:o}}function q(e,o,n){let r;const{width:s,height:u}=o;n.overlayX=="center"?r=e.x-s/2:r=n.overlayX=="left"?e.x:e.x-s;let l;return n.overlayY=="center"?l=e.y-u/2:l=n.overlayY=="top"?e.y:e.y-u,{x:r,y:l}}function U(e,o){let n;if(o.originX=="center")n=e.left+e.width/2;else{const s=e.left,u=e.right;n=o.originX=="left"?s:u}let r;return o.originY=="center"?r=e.top+e.height/2:r=o.originY=="top"?e.top:e.bottom,{x:n,y:r}}function G(e){return window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e),()=>{window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}}function H(e,o){if(e instanceof Element){const n=new ResizeObserver(o);return n.observe(e),()=>n.disconnect()}return()=>{}}function I(e,o){if(e instanceof Element){const n=new MutationObserver(o);return n.observe(e,{attributeFilter:["style"]}),()=>n.disconnect()}return()=>{}}B.install=function(e){e.component(B.name,B)},E.install=function(e){e.component(E.name,E)};var oe="",C=t.defineComponent({name:"DDropdown",props:v,emits:[],setup(e,o){const{isOpen:n,origin:r,trigger:s,closeScope:u,closeOnMouseLeaveMenu:l}=t.toRefs(e),c=t.ref(!1);t.watch(n,a=>{c.value=a},{immediate:!0});const b={originX:"center",originY:"bottom",overlayX:"center",overlayY:"top"},{dropdownEl:f}=F({visible:c,origin:r,trigger:s,closeScope:u,closeOnMouseLeaveMenu:l}),m=t.computed(()=>e.showAnimation?c.value:!0),h=t.computed(()=>typeof e.width=="string"?{width:e.width}:{width:`${e.width}px`});return()=>t.createVNode(B,{origin:e.origin,visible:c.value,"onUpdate:visible":a=>c.value=a,position:b,hasBackdrop:!1},{default:()=>[t.createVNode(t.Transition,{name:"devui-dropdown-fade"},{default:()=>{var a,y;return[t.withDirectives(t.createVNode("div",{ref:f,class:"devui-dropdown-menu-wrap",style:h.value},[(y=(a=o.slots).default)==null?void 0:y.call(a)]),[[t.vShow,m.value]])]}})]})}});C.install=function(e){e.component(C.name,C)};var J={title:"Dropdown \u4E0B\u62C9\u83DC\u5355",category:"\u5BFC\u822A",status:"10%",install(e){e.use(C)}};i.Dropdown=C,i.default=J,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});

package/dropdown/style.css

@@ -1 +1 @@
-.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}@keyframes d-dropdown-fade{0%{opacity:0;transform:scaleY(.9999) scaleY(0)}to{opacity:1;transform:scaleY(.8) scaleY(4px)}}.devui-dropdown-fade-enter{opacity:0}.devui-dropdown-fade-enter-active{animation-name:d-dropdown-fade;animation-duration:.3s}.devui-dropdown-fade-leave{opacity:1}.devui-dropdown-fade-leave-active{animation-name:d-dropdown-fade;animation-duration:.3s;animation-direction:reverse}
+.devui-overlay-background{position:fixed;top:0;left:0;height:100vh;width:100vw;display:flex}.devui-overlay-background__color{background:rgba(0,0,0,.4)}.devui-overlay-background .devui-overlay{position:relative;z-index:1000;pointer-events:auto}.devui-overlay-background__disabled{pointer-events:none}@keyframes d-overlay-fade{0%{opacity:0}to{opacity:1}}.devui-overlay-fade-enter{opacity:0}.devui-overlay-fade-enter-active{animation-name:d-overlay-fade;animation-duration:.3s}.devui-overlay-fade-leave{opacity:1}.devui-overlay-fade-leave-active{animation-name:d-overlay-fade;animation-duration:.3s;animation-direction:reverse}.devui-dropdown span.icon-chevron-down,.devui-dropdown span.icon-select-arrow{display:inline-block;vertical-align:text-top}.devui-dropdown-menu-wrap .devui-dropdown-menu{width:100%}.devui-dropdown-animation span.icon-chevron-down,.devui-dropdown-animation span.icon-select-arrow{transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-dropdown.open span.icon-chevron-down,.devui-dropdown.open span.icon-select-arrow{transform:rotate(180deg)}@keyframes d-dropdown-fade{0%{opacity:0;transform:scaleY(.9999) scaleY(0)}to{opacity:1;transform:scaleY(.8) scaleY(4px)}}.devui-dropdown-fade-enter{opacity:0}.devui-dropdown-fade-enter-active{animation-name:d-dropdown-fade;animation-duration:.3s}.devui-dropdown-fade-leave{opacity:1}.devui-dropdown-fade-leave-active{animation-name:d-dropdown-fade;animation-duration:.3s;animation-direction:reverse}