vue-devui 1.0.0-beta.5 → 1.0.0-beta.9

package/dragdrop/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/drawer/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/drawer/index.es.js

@@ -39,6 +39,13 @@ const drawerProps = {
   position: {
     type: String,
     default: "left"
+  },
+  backdropCloseable: {
+    type: Boolean,
+    default: true
+  },
+  beforeHidden: {
+    type: [Promise, Function]
   }
 };
 var drawerHeader = "";
@@ -122,35 +129,41 @@ var DrawerBody = defineComponent({
     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);
-    let clickContent = (e) => {
+    const clickContent = (e) => {
       e.stopPropagation();
     };
+    const handleDrawerClose = () => {
+      if (!backdropCloseable.value)
+        return;
+      closeDrawer();
+    };
     return {
-      closeDrawer,
       zindex,
       slots,
       isCover,
       navRight,
       navWidth,
       visible,
-      clickContent
+      clickContent,
+      handleDrawerClose
     };
   },
   render() {
     const {
       zindex,
-      closeDrawer,
       slots,
       isCover,
       navRight,
       navWidth,
-      visible
+      visible,
+      handleDrawerClose
     } = this;
     if (!visible)
       return null;
@@ -159,7 +172,7 @@ var DrawerBody = defineComponent({
       "style": {
         zIndex: zindex
       },
-      "onClick": closeDrawer
+      "onClick": handleDrawerClose
     }, [isCover ? createVNode("div", {
       "class": "devui-overlay-backdrop"
     }, null) : null, createVNode("div", {
@@ -189,13 +202,23 @@ var Drawer = defineComponent({
       zIndex,
       isCover,
       escKeyCloseable,
-      position
+      position,
+      backdropCloseable
     } = toRefs(props);
-    let isFullScreen = ref(false);
+    const isFullScreen = ref(false);
     const fullScreenEvent = () => {
       isFullScreen.value = !isFullScreen.value;
     };
-    const closeDrawer = () => {
+    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");
     };
@@ -222,6 +245,7 @@ var Drawer = defineComponent({
     provide("width", width);
     provide("visible", visible);
     provide("isFullScreen", isFullScreen);
+    provide("backdropCloseable", backdropCloseable);
     onUnmounted(() => {
       document.removeEventListener("keyup", escCloseDrawer);
     });

package/drawer/index.umd.js

@@ -1 +1 @@
-var g=Object.defineProperty;var C=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var D=(t,e,l)=>e in t?g(t,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):t[e]=l,y=(t,e)=>{for(var l in e||(e={}))F.call(e,l)&&D(t,l,e[l]);if(C)for(var l of C(e))j.call(e,l)&&D(t,l,e[l]);return t};(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.index={},t.Vue))})(this,function(t,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"}};var k="",b=e.defineComponent({name:"DrawerHeader",emits:["toggleFullScreen","close"],setup(n,r){const i=e.ref(!1),o=e.inject("visible");return{fullScreenClassName:e.computed(()=>i.value?"icon icon-minimize":"icon icon-maxmize"),visible:o,handleFullScreen:p=>{p.stopPropagation(),i.value=!i.value,r.emit("toggleFullScreen")},handleDrawerClose:()=>{r.emit("close")}}},render(){const{handleFullScreen:n,handleDrawerClose:r,visible:i,fullScreenClassName:o}=this;return i?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:n},[e.createVNode("span",{class:o},null)]),e.createVNode("div",{class:"devui-drawer-header-item",onClick:r},[e.createVNode("span",{class:"icon icon-close"},null)])]):null}}),N=e.defineComponent({name:"DrawerContainer",setup(){return{visible:e.inject("visible")}},render(){const{visible:n}=this;return n?e.createVNode("div",null,[e.createTextVNode("\u5185\u5BB9\u533A\u57DF")]):null}}),x="",S=e.defineComponent({name:"DrawerBody",setup(n,{slots:r}){const i=e.inject("isFullScreen"),o=e.inject("closeDrawer"),s=e.inject("zindex"),d=e.inject("isCover"),c=e.inject("position"),p=e.inject("width"),v=e.inject("visible"),a=e.computed(()=>c.value==="right"?{right:0}:{left:0}),h=e.computed(()=>i.value?"100vw":p.value);return{closeDrawer:o,zindex:s,slots:r,isCover:d,navRight:a,navWidth:h,visible:v,clickContent:f=>{f.stopPropagation()}}},render(){const{zindex:n,closeDrawer:r,slots:i,isCover:o,navRight:s,navWidth:d,visible:c}=this;return c?e.createVNode("div",{class:"devui-drawer",style:{zIndex:n},onClick:r},[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:y({width:d},s)},[e.createVNode("div",{class:"devui-drawer-content",onClick:this.clickContent},[i.default?i.default():null])])])]):null}}),u=e.defineComponent({name:"DDrawer",props:l,emits:["close","update:visible","afterOpened"],setup(n,{emit:r,slots:i}){const{width:o,visible:s,zIndex:d,isCover:c,escKeyCloseable:p,position:v}=e.toRefs(n);let a=e.ref(!1);const h=()=>{a.value=!a.value},w=()=>{r("update:visible",!1),r("close")},f=m=>{m.code==="Escape"&&w()};return e.watch(s,m=>{m&&(r("afterOpened"),a.value=!1),p&&m?document.addEventListener("keyup",f):document.removeEventListener("keyup",f)}),e.provide("closeDrawer",w),e.provide("zindex",d),e.provide("isCover",c),e.provide("position",v),e.provide("width",o),e.provide("visible",s),e.provide("isFullScreen",a),e.onUnmounted(()=>{document.removeEventListener("keyup",f)}),{isFullScreen:a,visible:s,slots:i,fullScreenEvent:h,closeDrawer:w}},render(){const n=this.fullScreenEvent,r=this.closeDrawer;return this.visible?e.createVNode(e.Teleport,{to:"body"},{default:()=>[e.createVNode(S,null,{default:()=>[e.createVNode(b,{onToggleFullScreen:n,onClose:r},null),this.slots.default?this.slots.default():e.createVNode(N,null,null)]})]}):null}});u.install=function(n){n.component(u.name,u)};var V={title:"Drawer \u62BD\u5C49\u677F",category:"\u53CD\u9988",status:"30%",install(n){n.use(u)}};t.Drawer=u,t.default=V,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+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"});

package/dropdown/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/dropdown/index.es.js

@@ -40,7 +40,7 @@ const dropdownProps = {
   },
   closeOnMouseLeaveMenu: {
     type: Boolean,
-    default: true
+    default: false
   },
   showAnimation: {
     type: Boolean,
@@ -175,7 +175,7 @@ const overlayProps = {
   backgroundStyle: {
     type: [String, Object]
   },
-  backdropClick: {
+  onBackdropClick: {
     type: Function
   },
   backdropClose: {
@@ -187,6 +187,7 @@ const overlayProps = {
     default: true
   }
 };
+const overlayEmits = ["onUpdate:visible", "backdropClick"];
 const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
   overlayStyle: {
     type: [String, Object],
@@ -222,7 +223,7 @@ function useOverlayLogic(props) {
   const handleBackdropClick = (event) => {
     var _a, _b;
     event.preventDefault();
-    (_a = props.backdropClick) == null ? void 0 : _a.call(props);
+    (_a = props.onBackdropClick) == null ? void 0 : _a.call(props);
     if (props.backdropClose) {
       (_b = props["onUpdate:visible"]) == null ? void 0 : _b.call(props, false);
     }
@@ -261,6 +262,7 @@ function useOverlayLogic(props) {
 const FixedOverlay = defineComponent({
   name: "DFixedOverlay",
   props: fixedOverlayProps,
+  emits: overlayEmits,
   setup(props, ctx) {
     const {
       backgroundClass,
@@ -284,7 +286,7 @@ const FixedOverlay = defineComponent({
 const FlexibleOverlay = defineComponent({
   name: "DFlexibleOverlay",
   props: flexibleOverlayProps,
-  emits: ["onUpdate:visible"],
+  emits: overlayEmits,
   setup(props, ctx) {
     const overlayRef = ref(null);
     const positionedStyle = reactive({
@@ -520,7 +522,7 @@ Dropdown.install = function(app) {
 var index = {
   title: "Dropdown \u4E0B\u62C9\u83DC\u5355",
   category: "\u5BFC\u822A",
-  status: void 0,
+  status: "10%",
   install(app) {
     app.use(Dropdown);
   }

package/dropdown/index.umd.js

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

package/editable-select/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/editable-select/index.es.js

@@ -14,8 +14,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, createVNode, Fragment, ref, computed, withDirectives, Transition, renderSlot, vShow, resolveDirective } from "vue";
+import { defineComponent, inject, withDirectives, createVNode, vShow, ref, reactive, computed, provide, toRefs, Fragment, resolveComponent, resolveDirective, Transition, renderSlot } from "vue";
 const editableSelectProps = {
+  appendToBody: {
+    type: Boolean,
+    default: false
+  },
   modelValue: {
     type: [String, Number]
   },
@@ -24,7 +28,8 @@ const editableSelectProps = {
     default: () => []
   },
   width: {
-    type: Number
+    type: Number,
+    default: 450
   },
   maxHeight: {
     type: Number
@@ -43,6 +48,10 @@ const editableSelectProps = {
   loading: {
     type: Boolean
   },
+  enableLazyLoad: {
+    type: Boolean,
+    default: false
+  },
   remoteMethod: {
     type: Function
   },
@@ -51,57 +60,77 @@ const editableSelectProps = {
   },
   searchFn: {
     type: Function
+  },
+  loadMore: {
+    type: Function
   }
 };
-var editableSelect = "";
-var Icon = defineComponent({
-  name: "DIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: "inherit"
-    },
-    color: {
-      type: String,
-      default: "inherit"
-    },
-    classPrefix: {
-      type: String,
-      default: "icon"
-    }
-  },
+const selectDropdownProps = {
+  options: {
+    type: Array,
+    default: () => []
+  }
+};
+function className(classStr, classOpt) {
+  let classname = classStr;
+  if (typeof classOpt === "object") {
+    Object.keys(classOpt).forEach((key) => {
+      classOpt[key] && (classname += ` ${key}`);
+    });
+  }
+  return classname;
+}
+var SelectDropdown = defineComponent({
+  name: "DSelectDropdown",
+  props: selectDropdownProps,
   setup(props) {
-    return __spreadValues({}, props);
-  },
-  render() {
+    const select = inject("InjectionKey");
+    const {
+      props: selectProps,
+      dropdownRef,
+      visible,
+      selectOptionClick,
+      renderDefaultSlots,
+      renderEmptySlots,
+      selectedIndex,
+      loadMore
+    } = select;
     const {
-      name,
-      size,
-      color,
-      classPrefix
-    } = this;
-    return createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
-      "style": {
-        width: size
-      }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
-      "style": {
-        fontSize: size,
-        color
-      }
-    }, null)]);
+      maxHeight
+    } = selectProps;
+    return () => {
+      const getLiCls = (item, index2) => {
+        const {
+          disabledKey
+        } = selectProps;
+        return className("devui-dropdown-item", {
+          disabled: disabledKey ? !!item[disabledKey] : false,
+          selected: selectedIndex.value === index2
+        });
+      };
+      return withDirectives(createVNode("div", {
+        "class": "devui-dropdown-menu"
+      }, [createVNode("ul", {
+        "ref": dropdownRef,
+        "class": "devui-list-unstyled scroll-height",
+        "style": {
+          maxHeight: maxHeight + "px"
+        },
+        "onScroll": loadMore
+      }, [props.options.map((o, index2) => {
+        return createVNode("li", {
+          "class": getLiCls(o, index2),
+          "onClick": ($evnet) => selectOptionClick($evnet, o)
+        }, [renderDefaultSlots(o)]);
+      }), withDirectives(createVNode("li", {
+        "class": "devui-no-result-template"
+      }, [createVNode("div", {
+        "class": "devui-no-data-tip"
+      }, [renderEmptySlots()])]), [[vShow, props.options.length === 0]])])]), [[vShow, visible]]);
+    };
   }
 });
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
+var editableSelect = "";
 const inBrowser = typeof window !== "undefined";
 function on(element, eventName, handler) {
   if (document.addEventListener) {
@@ -157,15 +186,6 @@ const clickoutsideDirective = {
     delete el[ctx];
   }
 };
-function className(classStr, classOpt) {
-  let classname = classStr;
-  if (typeof classOpt === "object") {
-    Object.keys(classOpt).forEach((key) => {
-      classOpt[key] && (classname += ` ${key}`);
-    });
-  }
-  return classname;
-}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };
 /**
@@ -5586,24 +5606,58 @@ var EditableSelect = defineComponent({
   props: editableSelectProps,
   emits: ["update:modelValue"],
   setup(props, ctx2) {
-    const inputCls = className("devui-form-control devui-dropdown-origin devui-dropdown-origin-open", {
-      disabled: props.disabled
-    });
-    const getLiCls = (item) => {
-      const {
-        disabledKey
-      } = props;
-      return className("devui-dropdown-item", {
-        disabled: disabledKey ? !!item[disabledKey] : false
-      });
+    const renderDropdown = (condition, type) => {
+      if (!condition && type === 0) {
+        return createVNode(Transition, {
+          "name": "fade"
+        }, {
+          default: () => [createVNode(SelectDropdown, {
+            "options": filteredOptions.value
+          }, null)]
+        });
+      } else if (condition && type === 1) {
+        return createVNode(resolveComponent("d-flexible-overlay"), {
+          "hasBackdrop": false,
+          "origin": origin,
+          "position": position,
+          "visible": visible.value,
+          "onUpdate:visible": ($event) => visible.value = $event
+        }, {
+          default: () => [createVNode("div", {
+            "class": "devui-dropdown",
+            "style": {
+              width: props.width + "px"
+            }
+          }, [createVNode(SelectDropdown, {
+            "options": filteredOptions.value
+          }, null)])]
+        });
+      }
+    };
+    const renderDefaultSlots = (item) => {
+      return ctx2.slots.default ? renderSlot(ctx2.slots, "default", {
+        item
+      }) : item.name;
     };
+    const renderEmptySlots = () => {
+      return ctx2.slots.empty ? renderSlot(ctx2.slots, "empty") : emptyText.value;
+    };
+    const origin = ref();
+    const dropdownRef = ref();
     const visible = ref(false);
     const inputValue = ref("");
+    const selectedIndex = ref(0);
     const query = ref(props.modelValue);
+    const position = reactive({
+      originX: "left",
+      originY: "bottom",
+      overlayX: "left",
+      overlayY: "top"
+    });
     const wait = computed(() => props.remote ? 300 : 0);
     const emptyText = computed(() => {
       const options = filteredOptions.value;
-      if (!props.remote && inputValue.value && options.length === 0) {
+      if (!props.remote && options.length === 0) {
         return "\u6CA1\u6709\u76F8\u5173\u8BB0\u5F55";
       }
       if (options.length === 0) {
@@ -5626,7 +5680,7 @@ var EditableSelect = defineComponent({
     const filteredOptions = computed(() => {
       const isValidOption = (o) => {
         const query2 = inputValue.value;
-        const containsQueryString = query2 ? o.name.includes(query2) : true;
+        const containsQueryString = query2 ? o.name.toLocaleLowerCase().indexOf(query2.toLocaleLowerCase()) >= 0 : true;
         return containsQueryString;
       };
       return normalizeOptions.value.map((item) => {
@@ -5636,6 +5690,11 @@ var EditableSelect = defineComponent({
         return null;
       }).filter((item) => item !== null);
     });
+    const findIndex = (o) => {
+      return normalizeOptions.value.findIndex((item) => {
+        return item.name === o.name;
+      });
+    };
     const handleClose = () => {
       visible.value = false;
     };
@@ -5644,11 +5703,11 @@ var EditableSelect = defineComponent({
         visible.value = !visible.value;
       }
     };
-    const onInputChange = () => {
+    const onInputChange = (val) => {
       if (props.filterMethod) {
-        props.filterMethod(inputValue.value);
+        props.filterMethod(val);
       } else if (props.remote) {
-        props.remoteMethod(inputValue.value);
+        props.remoteMethod(val);
       }
     };
     const debouncedOnInputChange = lodash.exports.debounce(onInputChange, wait.value);
@@ -5657,9 +5716,9 @@ var EditableSelect = defineComponent({
       inputValue.value = value;
       query.value = value;
       if (props.remote) {
-        debouncedOnInputChange();
+        debouncedOnInputChange(value);
       } else {
-        onInputChange();
+        onInputChange(value);
       }
     };
     const selectOptionClick = (e, item) => {
@@ -5670,13 +5729,41 @@ var EditableSelect = defineComponent({
         e.stopPropagation();
       } else {
         query.value = item.name;
+        selectedIndex.value = findIndex(item);
+        inputValue.value = "";
         ctx2.emit("update:modelValue", item.name);
       }
     };
+    const loadMore = () => {
+      if (!props.enableLazyLoad)
+        return;
+      const dropdownVal = dropdownRef.value;
+      if (dropdownVal.clientHeight + dropdownVal.scrollTop >= dropdownVal.scrollHeight) {
+        props.loadMore();
+      }
+    };
+    provide("InjectionKey", {
+      dropdownRef,
+      props: reactive(__spreadValues({}, toRefs(props))),
+      visible,
+      emptyText,
+      selectedIndex,
+      loadMore,
+      selectOptionClick,
+      renderDefaultSlots,
+      renderEmptySlots
+    });
     return () => {
-      return withDirectives(createVNode("div", {
-        "class": "devui-form-group devui-has-feedback devui-select-open",
-        "onClick": toggleMenu
+      const selectCls = className("devui-editable-select devui-form-group devui-has-feedback", {
+        "devui-select-open": visible.value
+      });
+      const inputCls = className("devui-form-control devui-dropdown-origin devui-dropdown-origin-open", {
+        disabled: props.disabled
+      });
+      return createVNode(Fragment, null, [withDirectives(createVNode("div", {
+        "class": selectCls,
+        "onClick": toggleMenu,
+        "ref": origin
       }, [createVNode("input", {
         "class": inputCls,
         "type": "text",
@@ -5686,34 +5773,9 @@ var EditableSelect = defineComponent({
         "class": "devui-form-control-feedback"
       }, [createVNode("span", {
         "class": "devui-select-chevron-icon"
-      }, [createVNode(Icon, {
+      }, [createVNode(resolveComponent("d-icon"), {
         "name": "select-arrow"
-      }, null)])]), createVNode("div", {
-        "class": "devui-editable-select"
-      }, [createVNode(Transition, {
-        "name": "fade"
-      }, {
-        default: () => [withDirectives(createVNode("div", {
-          "class": "devui-dropdown-menu"
-        }, [createVNode("ul", {
-          "class": "devui-list-unstyled scroll-height",
-          "style": {
-            maxHeight: props.maxHeight + "px"
-          }
-        }, [filteredOptions.value.map((item) => {
-          return createVNode("li", {
-            "class": getLiCls(item),
-            "onClick": ($evnet) => selectOptionClick($evnet, item),
-            "key": item.name
-          }, [ctx2.slots.default ? renderSlot(ctx2.slots, "default", {
-            item
-          }) : item.name]);
-        }), withDirectives(createVNode("li", {
-          "class": "devui-no-result-template"
-        }, [createVNode("div", {
-          "class": "devui-no-data-tip"
-        }, [emptyText.value])]), [[vShow, filteredOptions.value.length === 0]])])]), [[vShow, visible.value]])]
-      })])]), [[resolveDirective("click-outside"), handleClose]]);
+      }, null)])]), renderDropdown(props.appendToBody, 0)]), [[resolveDirective("click-outside"), handleClose]]), renderDropdown(props.appendToBody, 1)]);
     };
   }
 });
@@ -5723,7 +5785,7 @@ EditableSelect.install = function(app) {
 var index = {
   title: "EditableSelect \u53EF\u8F93\u5165\u4E0B\u62C9\u9009\u62E9\u6846",
   category: "\u6570\u636E\u5F55\u5165",
-  status: void 0,
+  status: "10%",
   install(app) {
     app.use(EditableSelect);
   }