vue-devui 1.0.0-beta.4 → 1.0.0-beta.8

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

@@ -17,11 +17,10 @@ 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, getCurrentInstance, nextTick, toRef, onBeforeUnmount, isRef, toRefs, Fragment } from "vue";
+import { ref, watch, defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, onUnmounted, withDirectives, vShow, reactive, toRef, isRef, toRefs, Fragment } from "vue";
 const dropdownProps = {
   origin: {
-    type: Object,
-    required: true
+    type: Object
   },
   isOpen: {
     type: Boolean,
@@ -41,7 +40,7 @@ const dropdownProps = {
   },
   closeOnMouseLeaveMenu: {
     type: Boolean,
-    default: true
+    default: false
   },
   showAnimation: {
     type: Boolean,
@@ -176,7 +175,7 @@ const overlayProps = {
   backgroundStyle: {
     type: [String, Object]
   },
-  backdropClick: {
+  onBackdropClick: {
     type: Function
   },
   backdropClose: {
@@ -188,6 +187,7 @@ const overlayProps = {
     default: true
   }
 };
+const overlayEmits = ["onUpdate:visible", "backdropClick"];
 const fixedOverlayProps = __spreadProps(__spreadValues({}, overlayProps), {
   overlayStyle: {
     type: [String, Object],
@@ -223,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);
     }
@@ -262,6 +262,7 @@ function useOverlayLogic(props) {
 const FixedOverlay = defineComponent({
   name: "DFixedOverlay",
   props: fixedOverlayProps,
+  emits: overlayEmits,
   setup(props, ctx) {
     const {
       backgroundClass,
@@ -285,61 +286,46 @@ 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({
       position: "absolute"
     });
-    const instance = getCurrentInstance();
     onMounted(async () => {
-      await nextTick();
-      const overlay2 = overlayRef.value;
-      if (!overlay2) {
-        return;
-      }
-      const origin = getOrigin(props.origin);
-      if (!origin) {
-        return;
-      }
-      const handleRectChange = (rect) => {
-        const point = calculatePosition(props.position, rect, origin);
+      const handleRectChange = (position, rect, origin) => {
+        const point = calculatePosition(position, rect, origin);
         positionedStyle.left = `${point.x}px`;
         positionedStyle.top = `${point.y}px`;
       };
-      const handleChange = () => handleRectChange(overlay2.getBoundingClientRect());
+      const locationElements = computed(() => {
+        const overlay2 = overlayRef.value;
+        const origin = getOrigin(props.origin);
+        if (!overlay2 || !origin) {
+          return;
+        }
+        return {
+          origin,
+          overlay: overlay2
+        };
+      });
       const visibleRef = toRef(props, "visible");
       const positionRef = toRef(props, "position");
-      watch(visibleRef, (visible, ov, onInvalidate) => {
-        if (visible) {
-          subscribeLayoutEvent(handleChange);
-        } else {
-          unsbscribeLayoutEvent(handleChange);
+      watch([locationElements, visibleRef, positionRef], async ([locationElements2, visible, position], ov, onInvalidate) => {
+        if (!visible || !locationElements2) {
+          return;
         }
+        const {
+          origin,
+          overlay: overlay2
+        } = locationElements2;
+        handleRectChange(position, overlay2.getBoundingClientRect(), origin);
+        const unsubscriptions = [subscribeLayoutEvent(() => handleRectChange(position, overlay2.getBoundingClientRect(), origin)), subscribeOverlayResize(overlay2, (entries) => handleRectChange(position, entries[0].contentRect, origin)), subscribeOriginResize(origin, () => handleRectChange(position, overlay2.getBoundingClientRect(), origin))];
         onInvalidate(() => {
-          unsbscribeLayoutEvent(handleChange);
+          unsubscriptions.forEach((fn) => fn());
         });
       });
-      watch([visibleRef, positionRef], () => {
-        handleChange();
-      });
-      const resizeObserver = new ResizeObserver((entries) => {
-        handleRectChange(entries[0].contentRect);
-      });
-      resizeObserver.observe(overlay2);
-      onBeforeUnmount(() => {
-        resizeObserver.disconnect();
-      }, instance);
-      if (origin instanceof Element) {
-        const observer = new MutationObserver(handleChange);
-        observer.observe(origin, {
-          attributeFilter: ["style"]
-        });
-        onBeforeUnmount(() => {
-          observer.disconnect();
-        }, instance);
-      }
-    }, instance);
+    });
     const {
       backgroundClass,
       overlayClass,
@@ -372,15 +358,9 @@ function getOrigin(origin) {
   }
   return origin;
 }
-function calculatePosition(position, panelOrRect, origin) {
+function calculatePosition(position, rect, origin) {
   const originRect = getOriginRect(origin);
   const originPoint = getOriginRelativePoint(originRect, position);
-  let rect;
-  if (panelOrRect instanceof HTMLElement) {
-    rect = panelOrRect.getBoundingClientRect();
-  } else {
-    rect = panelOrRect;
-  }
   return getOverlayPoint(originPoint, rect, position);
 }
 function getOriginRect(origin) {
@@ -444,11 +424,31 @@ function subscribeLayoutEvent(event) {
   window.addEventListener("scroll", event, true);
   window.addEventListener("resize", event);
   window.addEventListener("orientationchange", event);
+  return () => {
+    window.removeEventListener("scroll", event, true);
+    window.removeEventListener("resize", event);
+    window.removeEventListener("orientationchange", event);
+  };
 }
-function unsbscribeLayoutEvent(event) {
-  window.removeEventListener("scroll", event, true);
-  window.removeEventListener("resize", event);
-  window.removeEventListener("orientationchange", event);
+function subscribeOverlayResize(overlay2, callback) {
+  if (overlay2 instanceof Element) {
+    const resizeObserver = new ResizeObserver(callback);
+    resizeObserver.observe(overlay2);
+    return () => resizeObserver.disconnect();
+  }
+  return () => {
+  };
+}
+function subscribeOriginResize(origin, callback) {
+  if (origin instanceof Element) {
+    const observer = new MutationObserver(callback);
+    observer.observe(origin, {
+      attributeFilter: ["style"]
+    });
+    return () => observer.disconnect();
+  }
+  return () => {
+  };
 }
 FlexibleOverlay.install = function(app) {
   app.component(FlexibleOverlay.name, FlexibleOverlay);
@@ -476,9 +476,9 @@ var Dropdown = defineComponent({
       immediate: true
     });
     const position = {
-      originX: "left",
+      originX: "center",
       originY: "bottom",
-      overlayX: "left",
+      overlayX: "center",
       overlayY: "top"
     };
     const {
@@ -508,7 +508,7 @@ var Dropdown = defineComponent({
             var _a, _b;
             return [withDirectives(createVNode("div", {
               "ref": dropdownEl,
-              "style": "width:100vw"
+              "style": "min-width:102px"
             }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, animatedVisible.value]])];
           }
         })]
@@ -522,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 I=Object.defineProperty,G=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var j=Object.getOwnPropertySymbols;var K=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var X=(r,t,f)=>t in r?I(r,t,{enumerable:!0,configurable:!0,writable:!0,value:f}):r[t]=f,E=(r,t)=>{for(var f in t||(t={}))K.call(t,f)&&X(r,f,t[f]);if(j)for(var f of j(t))Q.call(t,f)&&X(r,f,t[f]);return r},Y=(r,t)=>G(r,J(t));(function(r,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(r=typeof globalThis!="undefined"?globalThis:r||self,t(r.index={},r.Vue))})(this,function(r,t){"use strict";const f={origin:{type:Object,required:!0},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 F(e){return!!(e==null?void 0:e.$el)}function O(e){return e instanceof Element?e:e&&typeof e=="object"&&e.$el instanceof Element?e.$el:null}function w(e,l,n){return e==null||e.addEventListener(l,n),()=>{e==null||e.removeEventListener(l,n)}}const R=({visible:e,trigger:l,origin:n,closeScope:a,closeOnMouseLeaveMenu:i})=>{const o=t.ref(),s=()=>{a.value!=="none"&&(e.value=!1)};return t.watch([l,n,o],([c,g,d],b,v)=>{const u=O(g);if(!u||!d)return;const m=[w(d,"click",()=>{a.value==="all"&&(e.value=!1)})];if(c==="click")m.push(w(u,"click",()=>e.value=!e.value),w(document,"click",h=>{if(!e.value)return;const p=h.target;u.contains(p)||d.contains(p)||s()}),w(d,"mouseleave",()=>{i.value&&(e.value=!1)}));else if(c==="hover"){let h=!1,p=!1;const y=async C=>{await new Promise(x=>setTimeout(x,50)),!(C==="origin"&&h||C==="dropdown"&&p)&&s()};m.push(w(u,"mouseenter",()=>{p=!0,e.value=!0}),w(u,"mouseleave",()=>{p=!1,i.value||y("origin")}),w(d,"mouseenter",()=>{h=!0,e.value=!0}),w(d,"mouseleave",()=>{h=!1,y("dropdown")}))}v(()=>m.forEach(h=>h()))}),{dropdownEl:o}};var W="";function T(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const V=t.defineComponent({setup(e,l){return()=>{let n;return t.createVNode(t.Teleport,{to:"#d-overlay-anchor"},{default:()=>[t.createVNode(t.Transition,{name:"devui-overlay-fade"},T(n=t.renderSlot(l.slots,"default"))?n:{default:()=>[n]})]})}}}),L={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=Y(E({},L),{overlayStyle:{type:[String,Object],default:void 0}}),_=E({origin:{type:Object,require:!0},position:{type:Object,default:()=>({originX:"left",originY:"top",overlayX:"left",overlayY:"top"})}},L);function D(e){const l=t.computed(()=>["devui-overlay-background",e.backgroundClass,e.hasBackdrop?"devui-overlay-background__color":"devui-overlay-background__disabled"]),n=t.computed(()=>"devui-overlay"),a=o=>{var s,c;o.preventDefault(),(s=e.backdropClick)==null||s.call(e),e.backdropClose&&((c=e["onUpdate:visible"])==null||c.call(e,!1))},i=o=>o.cancelBubble=!0;return t.onMounted(()=>{const o=document.body,s=o.style.overflow,c=o.style.position;t.watch([()=>e.visible,()=>e.backgroundBlock],([g,d])=>{if(d){const b=o.getBoundingClientRect().y;g?(o.style.overflowY="scroll",o.style.position=g?"fixed":"",o.style.top=`${b}px`):(o.style.overflowY=s,o.style.position=c,o.style.top="",window.scrollTo(0,-b))}}),t.onUnmounted(()=>{document.body.style.overflow=s})}),{backgroundClass:l,overlayClass:n,handleBackdropClick:a,handleOverlayBubbleCancel:i}}const S=t.defineComponent({name:"DFixedOverlay",props:M,setup(e,l){const{backgroundClass:n,overlayClass:a,handleBackdropClick:i,handleOverlayBubbleCancel:o}=D(e);return()=>t.createVNode(V,null,{default:()=>[t.withDirectives(t.createVNode("div",{class:n.value,style:e.backgroundStyle,onClick:i},[t.createVNode("div",{class:a.value,style:e.overlayStyle,onClick:o},[t.renderSlot(l.slots,"default")])]),[[t.vShow,e.visible]])]})}}),B=t.defineComponent({name:"DFlexibleOverlay",props:_,emits:["onUpdate:visible"],setup(e,l){const n=t.ref(null),a=t.reactive({position:"absolute"}),i=t.getCurrentInstance();t.onMounted(async()=>{await t.nextTick();const d=n.value;if(!d)return;const b=U(e.origin);if(!b)return;const v=y=>{const C=P(e.position,y,b);a.left=`${C.x}px`,a.top=`${C.y}px`},u=()=>v(d.getBoundingClientRect()),m=t.toRef(e,"visible"),h=t.toRef(e,"position");t.watch(m,(y,C,x)=>{y?A(u):N(u),x(()=>{N(u)})}),t.watch([m,h],()=>{u()});const p=new ResizeObserver(y=>{v(y[0].contentRect)});if(p.observe(d),t.onBeforeUnmount(()=>{p.disconnect()},i),b instanceof Element){const y=new MutationObserver(u);y.observe(b,{attributeFilter:["style"]}),t.onBeforeUnmount(()=>{y.disconnect()},i)}},i);const{backgroundClass:o,overlayClass:s,handleBackdropClick:c,handleOverlayBubbleCancel:g}=D(e);return()=>t.createVNode(V,null,{default:()=>[t.withDirectives(t.createVNode("div",{style:e.backgroundStyle,class:o.value,onClick:c},[t.createVNode("div",{ref:n,class:s.value,style:a,onClick:g},[t.renderSlot(l.slots,"default")])]),[[t.vShow,e.visible]])]})}});function U(e){return e instanceof Element?e:t.isRef(e)?O(e.value):F(e)?O(e):e}function P(e,l,n){const a=$(n),i=q(a,e);let o;return l instanceof HTMLElement?o=l.getBoundingClientRect():o=l,z(i,o,e)}function $(e){if(e instanceof Element)return e.getBoundingClientRect();const l=e.width||0,n=e.height||0;return{top:e.y,bottom:e.y+n,left:e.x,right:e.x+l,height:n,width:l}}function z(e,l,n){let a;const{width:i,height:o}=l;n.overlayX=="center"?a=e.x-i/2:a=n.overlayX=="left"?e.x:e.x-i;let s;return n.overlayY=="center"?s=e.y-o/2:s=n.overlayY=="top"?e.y:e.y-o,{x:a,y:s}}function q(e,l){let n;if(l.originX=="center")n=e.left+e.width/2;else{const i=e.left,o=e.right;n=l.originX=="left"?i:o}let a;return l.originY=="center"?a=e.top+e.height/2:a=l.originY=="top"?e.top:e.bottom,{x:n,y:a}}function A(e){window.addEventListener("scroll",e,!0),window.addEventListener("resize",e),window.addEventListener("orientationchange",e)}function N(e){window.removeEventListener("scroll",e,!0),window.removeEventListener("resize",e),window.removeEventListener("orientationchange",e)}B.install=function(e){e.component(B.name,B)},S.install=function(e){e.component(S.name,S)};var Z="",k=t.defineComponent({name:"DDropdown",props:f,emits:[],setup(e,l){const{isOpen:n,origin:a,trigger:i,closeScope:o,closeOnMouseLeaveMenu:s}=t.toRefs(e),c=t.ref(!1);t.watch(n,v=>{c.value=v},{immediate:!0});const g={originX:"left",originY:"bottom",overlayX:"left",overlayY:"top"},{dropdownEl:d}=R({visible:c,origin:a,trigger:i,closeScope:o,closeOnMouseLeaveMenu:s}),b=t.computed(()=>e.showAnimation?c.value:!0);return()=>t.createVNode(t.Fragment,null,[t.createVNode(B,{origin:e.origin,visible:c.value,"onUpdate:visible":v=>c.value=v,position:g,hasBackdrop:!1},{default:()=>[t.createVNode(t.Transition,{name:"devui-dropdown-fade"},{default:()=>{var v,u;return[t.withDirectives(t.createVNode("div",{ref:d,style:"width:100vw"},[(u=(v=l.slots).default)==null?void 0:u.call(v)]),[[t.vShow,b.value]])]}})]})])}});k.install=function(e){e.component(k.name,k)};var H={title:"Dropdown \u4E0B\u62C9\u83DC\u5355",category:"\u5BFC\u822A",status:void 0,install(e){e.use(k)}};r.Dropdown=k,r.default=H,Object.defineProperty(r,"__esModule",{value:!0}),r[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,7 +14,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, createVNode, Fragment, ref, computed, withDirectives, Transition, renderSlot, vShow, resolveDirective } from "vue";
+import { defineComponent, createVNode, ref, computed, withDirectives, Transition, renderSlot, vShow, resolveDirective } from "vue";
 const editableSelectProps = {
   modelValue: {
     type: [String, Number]
@@ -43,6 +43,10 @@ const editableSelectProps = {
   loading: {
     type: Boolean
   },
+  enableLazyLoad: {
+    type: Boolean,
+    default: false
+  },
   remoteMethod: {
     type: Function
   },
@@ -84,7 +88,7 @@ var Icon = defineComponent({
       color,
       classPrefix
     } = this;
-    return createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
       "src": name,
       "alt": name.split("/")[name.split("/").length - 1],
       "style": {
@@ -96,7 +100,7 @@ var Icon = defineComponent({
         fontSize: size,
         color
       }
-    }, null)]);
+    }, null);
   }
 });
 Icon.install = function(app) {
@@ -5586,24 +5590,15 @@ 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 dropdownRef = ref(null);
     const visible = ref(false);
     const inputValue = ref("");
+    const activeIndex = ref(0);
     const query = ref(props.modelValue);
     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 +5621,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 +5631,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 +5644,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 +5657,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,12 +5670,37 @@ var EditableSelect = defineComponent({
         e.stopPropagation();
       } else {
         query.value = item.name;
+        activeIndex.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.remoteMethod(inputValue.value);
+      }
+    };
     return () => {
+      const selectCls = className("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
+      });
+      const getLiCls = (item, index2) => {
+        const {
+          disabledKey
+        } = props;
+        return className("devui-dropdown-item", {
+          disabled: disabledKey ? !!item[disabledKey] : false,
+          selected: activeIndex.value === index2
+        });
+      };
       return withDirectives(createVNode("div", {
-        "class": "devui-form-group devui-has-feedback devui-select-open",
+        "class": selectCls,
         "onClick": toggleMenu
       }, [createVNode("input", {
         "class": inputCls,
@@ -5697,12 +5722,14 @@ var EditableSelect = defineComponent({
           "class": "devui-dropdown-menu"
         }, [createVNode("ul", {
           "class": "devui-list-unstyled scroll-height",
+          "ref": dropdownRef,
           "style": {
             maxHeight: props.maxHeight + "px"
-          }
-        }, [filteredOptions.value.map((item) => {
+          },
+          "onScroll": loadMore
+        }, [filteredOptions.value.map((item, index2) => {
           return createVNode("li", {
-            "class": getLiCls(item),
+            "class": getLiCls(item, index2),
             "onClick": ($evnet) => selectOptionClick($evnet, item),
             "key": item.name
           }, [ctx2.slots.default ? renderSlot(ctx2.slots, "default", {
@@ -5723,7 +5750,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);
   }