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

package/button/index.es.js

@@ -14,7 +14,11 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, createVNode, ref, computed, withDirectives, mergeProps, resolveDirective } from "vue";
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { defineComponent, createVNode, ref, computed, withDirectives, mergeProps, resolveDirective, h, render } from "vue";
 var Icon = defineComponent({
   name: "DIcon",
   props: {
@@ -176,7 +180,205 @@ var Button = defineComponent({
     };
   }
 });
+class View {
+  constructor() {
+    __publicField(this, "top", "50%");
+    __publicField(this, "left", "50%");
+  }
+}
+const componentProps = {
+  message: String,
+  backdrop: Boolean,
+  view: {
+    type: Object,
+    default: () => new View()
+  },
+  zIndex: Number,
+  isFull: {
+    type: Boolean,
+    default: false
+  }
+};
+class LoadingProps {
+  constructor() {
+    __publicField(this, "target");
+    __publicField(this, "message");
+    __publicField(this, "loadingTemplateRef");
+    __publicField(this, "backdrop", true);
+    __publicField(this, "positionType", "relative");
+    __publicField(this, "view", new View());
+    __publicField(this, "zIndex");
+  }
+}
+var loading = "";
+var Loading = defineComponent({
+  name: "DLoading",
+  inheritAttrs: false,
+  props: componentProps,
+  setup(props) {
+    const style = {
+      top: props.view.top,
+      left: props.view.left,
+      zIndex: props.zIndex
+    };
+    if (!props.message) {
+      style.background = "none";
+    }
+    const isShow = ref(false);
+    const open = () => {
+      isShow.value = true;
+    };
+    const close = () => {
+      isShow.value = false;
+    };
+    return {
+      style,
+      isShow,
+      open,
+      close
+    };
+  },
+  render() {
+    var _a;
+    const {
+      isShow,
+      isFull,
+      backdrop,
+      style,
+      message,
+      $slots
+    } = this;
+    return isShow && createVNode("div", {
+      "class": ["devui-loading-contanier", isFull ? "devui-loading--full" : ""]
+    }, [((_a = $slots.default) == null ? void 0 : _a.call($slots)) || createVNode("div", {
+      "class": "devui-loading-wrapper"
+    }, [backdrop ? createVNode("div", {
+      "class": "devui-loading-mask"
+    }, null) : null, createVNode("div", {
+      "style": style,
+      "class": "devui-loading-area"
+    }, [createVNode("div", {
+      "class": "devui-busy-default-spinner"
+    }, [createVNode("div", {
+      "class": "devui-loading-bar1"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar2"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar3"
+    }, null), createVNode("div", {
+      "class": "devui-loading-bar4"
+    }, null)]), message ? createVNode("span", {
+      "class": "devui-loading-text"
+    }, [message]) : null])])]);
+  }
+});
+const COMPONENT_CONTAINER_SYMBOL = Symbol("dev_component_container");
+function createComponent(Component, props, children = null) {
+  const vnode = h(Component, __spreadValues({}, props), children);
+  const container = document.createElement("div");
+  vnode[COMPONENT_CONTAINER_SYMBOL] = container;
+  render(vnode, container);
+  return vnode.component;
+}
+function unmountComponent(ComponnetInstance) {
+  render(null, ComponnetInstance == null ? void 0 : ComponnetInstance.vnode[COMPONENT_CONTAINER_SYMBOL]);
+}
+const loadingConstructor = defineComponent(Loading);
+const cacheInstance = new WeakSet();
+const isEmpty = (val) => {
+  if (!val)
+    return true;
+  if (Array.isArray(val))
+    return val.length === 0;
+  if (val instanceof Set || val instanceof Map)
+    return val.size === 0;
+  if (val instanceof Promise)
+    return false;
+  if (typeof val === "object") {
+    try {
+      return Object.keys(val).length === 0;
+    } catch (e) {
+      return false;
+    }
+  }
+  return false;
+};
+const getType = (vari) => {
+  return Object.prototype.toString.call(vari).slice(8, -1).toLowerCase();
+};
+const isPromise = (value) => {
+  const type = getType(value);
+  switch (type) {
+    case "promise":
+      return [value];
+    case "array":
+      if (value.some((val) => getType(val) !== "promise")) {
+        console.error(new TypeError("Binding values should all be of type Promise"));
+        return "error";
+      }
+      return value;
+    default:
+      return false;
+  }
+};
+const unmount = (el) => {
+  cacheInstance.delete(el);
+  el.instance.proxy.close();
+  unmountComponent(el.instance);
+};
+const toggleLoading = (el, binding) => {
+  if (binding.value) {
+    const vals = isPromise(binding.value);
+    if (vals === "error")
+      return;
+    el.instance.proxy.open();
+    el.appendChild(el.mask);
+    cacheInstance.add(el);
+    if (vals) {
+      Promise.all(vals).catch((err) => {
+        console.error(new Error("Promise handling errors"), err);
+      }).finally(() => {
+        unmount(el);
+      });
+    }
+  } else {
+    unmount(el);
+  }
+};
+const removeAttribute = (el) => {
+  el.removeAttribute("zindex");
+  el.removeAttribute("positiontype");
+  el.removeAttribute("backdrop");
+  el.removeAttribute("message");
+  el.removeAttribute("view");
+  el.removeAttribute("loadingtemplateref");
+};
+const handleProps = (el, vprops) => {
+  const props = __spreadValues(__spreadValues({}, new LoadingProps()), vprops);
+  const loadingTemplateRef = props.loadingTemplateRef;
+  const loadingInstance = createComponent(loadingConstructor, __spreadValues({}, props), loadingTemplateRef ? () => loadingTemplateRef : null);
+  el.style.position = props.positionType;
+  el.options = props;
+  el.instance = loadingInstance;
+  el.mask = loadingInstance.proxy.$el;
+};
+const loadingDirective = {
+  mounted: function(el, binding, vnode) {
+    handleProps(el, vnode.props);
+    removeAttribute(el);
+    !isEmpty(binding.value) && toggleLoading(el, binding);
+  },
+  updated: function(el, binding, vnode) {
+    if (!isEmpty(binding.value) && cacheInstance.has(el) || isEmpty(binding.value) && !cacheInstance.has(el))
+      return;
+    !cacheInstance.has(el) && handleProps(el, vnode.props);
+    removeAttribute(el);
+    toggleLoading(el, binding);
+  }
+};
+defineComponent(Loading);
 Button.install = function(app) {
+  app.directive("dLoading", loadingDirective);
   app.component(Button.name, Button);
 };
 var index = {

package/button/index.umd.js

@@ -1 +1 @@
-var B=Object.defineProperty;var m=Object.getOwnPropertySymbols;var V=Object.prototype.hasOwnProperty,N=Object.prototype.propertyIsEnumerable;var h=(n,t,o)=>t in n?B(n,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):n[t]=o,S=(n,t)=>{for(var o in t||(t={}))V.call(t,o)&&h(n,o,t[o]);if(m)for(var o of m(t))N.call(t,o)&&h(n,o,t[o]);return n};(function(n,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis!="undefined"?globalThis:n||self,t(n.index={},n.Vue))})(this,function(n,t){"use strict";var o=t.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(e){return S({},e)},render(){const{name:e,size:l,color:f,classPrefix:r}=this;return/^((https?):)?\/\//.test(e)?t.createVNode("img",{src:e,alt:e.split("/")[e.split("/").length-1],style:{width:l,verticalAlign:"text-bottom"}},null):t.createVNode("i",{class:`${r} ${r}-${e}`,style:{fontSize:l,color:f}},null)}});o.install=function(e){e.component(o.name,o)};const y={type:{type:String,default:"button"},btnStyle:{type:String,default:"primary"},size:{type:String,default:"md"},position:{type:String,default:"default"},bordered:{type:Boolean,default:!1},icon:{type:String,default:""},showLoading:{type:Boolean,default:!1},width:{type:String},disabled:{type:Boolean,default:!1},autofocus:{type:Boolean,default:!1},onClick:{type:Function}};var P="",a=t.defineComponent({name:"DButton",props:y,setup(e,l){const f=t.ref(null),r=i=>{var s;e.showLoading||(s=e.onClick)==null||s.call(e,i)},g=t.computed(()=>l.slots.default),$=t.computed(()=>{const{btnStyle:i,size:s,position:p,bordered:b,icon:d}=e,u=`devui-btn devui-btn-${i} devui-btn-${s} devui-btn-${p}`,c=b?"bordered":"",w=!!d&&!g.value&&i!=="primary"?"d-btn-icon":"";return`${u} ${c} ${w} ${d?"d-btn-icon-wrap":""}`}),v=t.computed(()=>{if(!e.icon)return;const i="devui-icon-fix icon";return g.value?`${i} clear-right-5`:i});return()=>{var u,c;const{icon:i,type:s,disabled:p,showLoading:b,width:d}=e;return t.withDirectives(t.createVNode("div",t.mergeProps({class:"devui-btn-host"},l.attrs),[t.createVNode("button",{class:$.value,type:s,disabled:p,style:{width:d},onClick:r},[i?t.createVNode(o,{name:i,class:v.value},null):null,t.createVNode("span",{class:"button-content",ref:f},[(c=(u=l.slots).default)==null?void 0:c.call(u)])])]),[[t.resolveDirective("dLoading"),b]])}}});a.install=function(e){e.component(a.name,a)};var C={title:"Button \u6309\u94AE",category:"\u901A\u7528",status:"100%",install(e){e.use(a)}};n.Button=a,n.buttonProps=y,n.default=C,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+var F=Object.defineProperty;var L=Object.getOwnPropertySymbols;var W=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var N=(i,t,r)=>t in i?F(i,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[t]=r,u=(i,t)=>{for(var r in t||(t={}))W.call(t,r)&&N(i,r,t[r]);if(L)for(var r of L(t))q.call(t,r)&&N(i,r,t[r]);return i};var d=(i,t,r)=>(N(i,typeof t!="symbol"?t+"":t,r),r);(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";var r=t.defineComponent({name:"DIcon",props:{name:{type:String,required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}},setup(e){return u({},e)},render(){const{name:e,size:n,color:o,classPrefix:s}=this;return/^((https?):)?\/\//.test(e)?t.createVNode("img",{src:e,alt:e.split("/")[e.split("/").length-1],style:{width:n,verticalAlign:"text-bottom"}},null):t.createVNode("i",{class:`${s} ${s}-${e}`,style:{fontSize:n,color:o}},null)}});r.install=function(e){e.component(r.name,r)};const V={type:{type:String,default:"button"},btnStyle:{type:String,default:"primary"},size:{type:String,default:"md"},position:{type:String,default:"default"},bordered:{type:Boolean,default:!1},icon:{type:String,default:""},showLoading:{type:Boolean,default:!1},width:{type:String},disabled:{type:Boolean,default:!1},autofocus:{type:Boolean,default:!1},onClick:{type:Function}};var Y="",f=t.defineComponent({name:"DButton",props:V,setup(e,n){const o=t.ref(null),s=l=>{var c;e.showLoading||(c=e.onClick)==null||c.call(e,l)},a=t.computed(()=>n.slots.default),m=t.computed(()=>{const{btnStyle:l,size:c,position:w,bordered:S,icon:y}=e,b=`devui-btn devui-btn-${l} devui-btn-${c} devui-btn-${w}`,h=S?"bordered":"",R=!!y&&!a.value&&l!=="primary"?"d-btn-icon":"";return`${b} ${h} ${R} ${y?"d-btn-icon-wrap":""}`}),g=t.computed(()=>{if(!e.icon)return;const l="devui-icon-fix icon";return a.value?`${l} clear-right-5`:l});return()=>{var b,h;const{icon:l,type:c,disabled:w,showLoading:S,width:y}=e;return t.withDirectives(t.createVNode("div",t.mergeProps({class:"devui-btn-host"},n.attrs),[t.createVNode("button",{class:m.value,type:c,disabled:w,style:{width:y},onClick:s},[l?t.createVNode(r,{name:l,class:g.value},null):null,t.createVNode("span",{class:"button-content",ref:o},[(h=(b=n.slots).default)==null?void 0:h.call(b)])])]),[[t.resolveDirective("dLoading"),S]])}}});class C{constructor(){d(this,"top","50%");d(this,"left","50%")}}const $={message:String,backdrop:Boolean,view:{type:Object,default:()=>new C},zIndex:Number,isFull:{type:Boolean,default:!1}};class I{constructor(){d(this,"target");d(this,"message");d(this,"loadingTemplateRef");d(this,"backdrop",!0);d(this,"positionType","relative");d(this,"view",new C);d(this,"zIndex")}}var G="",P=t.defineComponent({name:"DLoading",inheritAttrs:!1,props:$,setup(e){const n={top:e.view.top,left:e.view.left,zIndex:e.zIndex};e.message||(n.background="none");const o=t.ref(!1);return{style:n,isShow:o,open:()=>{o.value=!0},close:()=>{o.value=!1}}},render(){var g;const{isShow:e,isFull:n,backdrop:o,style:s,message:a,$slots:m}=this;return e&&t.createVNode("div",{class:["devui-loading-contanier",n?"devui-loading--full":""]},[((g=m.default)==null?void 0:g.call(m))||t.createVNode("div",{class:"devui-loading-wrapper"},[o?t.createVNode("div",{class:"devui-loading-mask"},null):null,t.createVNode("div",{style:s,class:"devui-loading-area"},[t.createVNode("div",{class:"devui-busy-default-spinner"},[t.createVNode("div",{class:"devui-loading-bar1"},null),t.createVNode("div",{class:"devui-loading-bar2"},null),t.createVNode("div",{class:"devui-loading-bar3"},null),t.createVNode("div",{class:"devui-loading-bar4"},null)]),a?t.createVNode("span",{class:"devui-loading-text"},[a]):null])])])}});const k=Symbol("dev_component_container");function O(e,n,o=null){const s=t.h(e,u({},n),o),a=document.createElement("div");return s[k]=a,t.render(s,a),s.component}function E(e){t.render(null,e==null?void 0:e.vnode[k])}const j=t.defineComponent(P),p=new WeakSet,v=e=>{if(!e)return!0;if(Array.isArray(e))return e.length===0;if(e instanceof Set||e instanceof Map)return e.size===0;if(e instanceof Promise)return!1;if(typeof e=="object")try{return Object.keys(e).length===0}catch{return!1}return!1},A=e=>Object.prototype.toString.call(e).slice(8,-1).toLowerCase(),D=e=>{switch(A(e)){case"promise":return[e];case"array":return e.some(o=>A(o)!=="promise")?(console.error(new TypeError("Binding values should all be of type Promise")),"error"):e;default:return!1}},x=e=>{p.delete(e),e.instance.proxy.close(),E(e.instance)},B=(e,n)=>{if(n.value){const o=D(n.value);if(o==="error")return;e.instance.proxy.open(),e.appendChild(e.mask),p.add(e),o&&Promise.all(o).catch(s=>{console.error(new Error("Promise handling errors"),s)}).finally(()=>{x(e)})}else x(e)},T=e=>{e.removeAttribute("zindex"),e.removeAttribute("positiontype"),e.removeAttribute("backdrop"),e.removeAttribute("message"),e.removeAttribute("view"),e.removeAttribute("loadingtemplateref")},z=(e,n)=>{const o=u(u({},new I),n),s=o.loadingTemplateRef,a=O(j,u({},o),s?()=>s:null);e.style.position=o.positionType,e.options=o,e.instance=a,e.mask=a.proxy.$el},_={mounted:function(e,n,o){z(e,o.props),T(e),!v(n.value)&&B(e,n)},updated:function(e,n,o){!v(n.value)&&p.has(e)||v(n.value)&&!p.has(e)||(!p.has(e)&&z(e,o.props),T(e),B(e,n))}};t.defineComponent(P),f.install=function(e){e.directive("dLoading",_),e.component(f.name,f)};var M={title:"Button \u6309\u94AE",category:"\u901A\u7528",status:"100%",install(e){e.use(f)}};i.Button=f,i.buttonProps=V,i.default=M,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module"});

package/button/style.css

@@ -1 +1 @@
-.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:normal;line-height:1.5}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:bold;line-height:1.5}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:bold;line-height:1.5}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:bold;line-height:1.5}.devui-btn{padding:3px 20px;font-size:var(--devui-font-size-md, 12px);height:28px;line-height:1.5;border-radius:var(--devui-border-radius, 2px);border-width:1px;border-color:transparent;background-color:transparent}.devui-btn.devui-btn-text{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-text-dark{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-common{color:var(--devui-text, #252b3a);min-width:64px;background-color:var(--devui-block, #ffffff);border-color:var(--devui-line, #adb0b8)}.devui-btn.devui-btn-stress{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-primary{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-danger{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-contrast, #f66f6a)}.devui-btn.devui-btn-left{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-btn.devui-btn-right{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-btn.devui-btn-xs{padding:1px 5px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:48px}.devui-btn.devui-btn-sm{padding:1px 15px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:56px}.devui-btn.devui-btn-lg{padding:5px 23px;height:32px;font-size:var(--devui-font-size-lg, 14px);min-width:72px}.devui-btn.devui-btn-text:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-common:hover{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:focus{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:active{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-stress:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-primary:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-danger:hover{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:focus{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:active{background-color:var(--devui-contrast-active, #de504e)}.devui-btn.devui-btn-common:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-primary:disabled{color:var(--devui-light-text, #ffffff);background:var(--devui-primary-disabled, #beccfa);border:none}.devui-btn.devui-btn-danger:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-text-dark:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.devui-btn-text:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.bordered.devui-btn-common{color:var(--devui-text, #252b3a);border-color:transparent}.devui-btn.bordered.devui-btn-common:hover,.devui-btn.bordered.devui-btn-common:focus{border-color:var(--devui-primary-hover, #7693f5)}.devui-btn.bordered.devui-btn-common:active{border-color:var(--devui-primary-active, #344899)}.devui-btn.bordered.devui-btn-stress,.devui-btn.bordered.devui-btn-primary{border-color:var(--devui-brand, #5e7ce0);color:var(--devui-brand, #5e7ce0);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-success{border-color:var(--devui-success, #50d4ab);color:var(--devui-success, #50d4ab);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-warning{border-color:var(--devui-warning, #fac20a);color:var(--devui-warning, #fac20a);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-danger{border-color:var(--devui-danger, #f66f6a);color:var(--devui-danger, #f66f6a);background-color:var(--devui-block, #ffffff)}.devui-btn.d-btn-icon:hover,.devui-btn.d-btn-icon:focus{border:1px solid var(--devui-list-item-hover-bg, #f2f5fc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-btn.d-btn-icon:disabled{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap{color:var(--devui-text, #252b3a)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-loading .devui-loading-default-spinner div{background-color:var(--devui-text, #252b3a)}.devui-btn-host{display:inline-block}.devui-btn{transition:background-color .2s;border-style:solid;white-space:nowrap;display:flex;align-items:center;justify-content:center}.devui-btn:disabled,.devui-btn[disabled]{cursor:not-allowed}.devui-btn.d-btn-icon{padding:7px 8px;line-height:1em;border:1px solid transparent}.devui-btn.d-btn-icon.devui-btn-xs,.devui-btn.d-btn-icon.devui-btn-sm{padding:5px}.devui-btn.d-btn-icon.devui-btn-xs{min-width:24px}.devui-btn.d-btn-icon.devui-btn-sm{min-width:24px}.devui-btn.d-btn-icon.devui-btn-lg{min-width:32px}.devui-btn.d-btn-icon.devui-btn-lg .icon{font-size:var(--devui-font-size-icon, 16px)}.devui-btn:not(.d-btn-icon) .icon-fix{font-size:var(--devui-font-size-icon, 16px)}.devui-icon-fix{position:relative;font-size:var(--devui-font-size, 12px)}.devui-btn.devui-btn-common:not(:disabled) .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn.devui-btn-common:not(:disabled):hover .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):active .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):focus .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.button-content{display:inline-block;position:relative}.clear-right-5{margin-right:5px}
+.devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:normal;line-height:1.5}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:bold;line-height:1.5}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:bold;line-height:1.5}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:bold;line-height:1.5}.devui-btn{padding:3px 20px;font-size:var(--devui-font-size-md, 12px);height:28px;line-height:1.5;border-radius:var(--devui-border-radius, 2px);border-width:1px;border-color:transparent;background-color:transparent}.devui-btn.devui-btn-text{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-text-dark{color:var(--devui-brand-active, #526ecc);padding:0}.devui-btn.devui-btn-common{color:var(--devui-text, #252b3a);min-width:64px;background-color:var(--devui-block, #ffffff);border-color:var(--devui-line, #adb0b8)}.devui-btn.devui-btn-stress{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-primary{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-primary, #5e7ce0)}.devui-btn.devui-btn-danger{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-contrast, #f66f6a)}.devui-btn.devui-btn-success{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-success, #50d4ab)}.devui-btn.devui-btn-warning{color:var(--devui-light-text, #ffffff);min-width:64px;background-color:var(--devui-warning, #fac20a)}.devui-btn.devui-btn-left{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.devui-btn.devui-btn-right{border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-btn.devui-btn-xs{padding:1px 5px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:48px}.devui-btn.devui-btn-sm{padding:1px 15px;height:24px;font-size:var(--devui-font-size-sm, 12px);min-width:56px}.devui-btn.devui-btn-lg{padding:5px 23px;height:32px;font-size:var(--devui-font-size-lg, 14px);min-width:72px}.devui-btn.devui-btn-text:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:hover{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:focus{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-text-dark:active{background-color:transparent;color:var(--devui-brand-active-focus, #344899)}.devui-btn.devui-btn-common:hover{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:focus{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-common:active{border-color:var(--devui-form-control-line-active, #5e7ce0);color:var(--devui-brand-active, #526ecc)}.devui-btn.devui-btn-stress:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-stress:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-primary:hover{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:focus{background-color:var(--devui-primary-hover, #7693f5)}.devui-btn.devui-btn-primary:active{background-color:var(--devui-primary-active, #344899)}.devui-btn.devui-btn-danger:hover{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:focus{background-color:var(--devui-contrast-hover, #ff8b87)}.devui-btn.devui-btn-danger:active{background-color:var(--devui-contrast-active, #de504e)}.devui-btn.devui-btn-common:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-primary:disabled{color:var(--devui-light-text, #ffffff);background:var(--devui-primary-disabled, #beccfa);border:none}.devui-btn.devui-btn-danger:disabled{color:var(--devui-disabled-text, #adb0b8);background:var(--devui-disabled-bg, #f5f5f6);border:1px solid var(--devui-disabled-line, #dfe1e6)}.devui-btn.devui-btn-text-dark:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.devui-btn-text:disabled{color:var(--devui-disabled-text, #adb0b8)}.devui-btn.bordered.devui-btn-common{color:var(--devui-text, #252b3a);border-color:transparent}.devui-btn.bordered.devui-btn-common:hover,.devui-btn.bordered.devui-btn-common:focus{border-color:var(--devui-primary-hover, #7693f5)}.devui-btn.bordered.devui-btn-common:active{border-color:var(--devui-primary-active, #344899)}.devui-btn.bordered.devui-btn-stress,.devui-btn.bordered.devui-btn-primary{border-color:var(--devui-brand, #5e7ce0);color:var(--devui-brand, #5e7ce0);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-success{border-color:var(--devui-success, #50d4ab);color:var(--devui-success, #50d4ab);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-warning{border-color:var(--devui-warning, #fac20a);color:var(--devui-warning, #fac20a);background-color:var(--devui-block, #ffffff)}.devui-btn.bordered.devui-btn-danger{border-color:var(--devui-danger, #f66f6a);color:var(--devui-danger, #f66f6a);background-color:var(--devui-block, #ffffff)}.devui-btn.d-btn-icon:hover,.devui-btn.d-btn-icon:focus{border:1px solid var(--devui-list-item-hover-bg, #f2f5fc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-btn.d-btn-icon:disabled{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap{color:var(--devui-text, #252b3a)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover{color:var(--devui-list-item-hover-text, #526ecc)}.devui-btn:not(:disabled).devui-btn-text.d-btn-icon-wrap:hover .devui-icon-fix,.devui-btn:not(:disabled).devui-btn-text-dark.d-btn-icon-wrap:hover .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-loading .devui-loading-default-spinner div{background-color:var(--devui-text, #252b3a)}.devui-btn-host{display:inline-block}.devui-btn{transition:background-color .2s;border-style:solid;white-space:nowrap;display:flex;align-items:center;justify-content:center}.devui-btn:disabled,.devui-btn[disabled]{cursor:not-allowed}.devui-btn.d-btn-icon{padding:7px 8px;line-height:1em;border:1px solid transparent}.devui-btn.d-btn-icon.devui-btn-xs,.devui-btn.d-btn-icon.devui-btn-sm{padding:5px}.devui-btn.d-btn-icon.devui-btn-xs{min-width:24px}.devui-btn.d-btn-icon.devui-btn-sm{min-width:24px}.devui-btn.d-btn-icon.devui-btn-lg{min-width:32px}.devui-btn.d-btn-icon.devui-btn-lg .icon{font-size:var(--devui-font-size-icon, 16px)}.devui-btn:not(.d-btn-icon) .icon-fix{font-size:var(--devui-font-size-icon, 16px)}.devui-icon-fix{position:relative;font-size:var(--devui-font-size, 12px)}.devui-btn.devui-btn-common:not(:disabled) .devui-icon-fix{color:var(--devui-text-weak, #575d6c)}.devui-btn.devui-btn-common:not(:disabled):hover .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):active .devui-icon-fix,.devui-btn.devui-btn-common:not(:disabled):focus .devui-icon-fix{color:var(--devui-icon-fill-active, #5e7ce0)}.button-content{display:inline-block;position:relative}.clear-right-5{margin-right:5px}@keyframes devui-busy-spinner-anim{0%{transform:rotate(0) scale(1)}50%{transform:rotate(135deg) scale(1.5)}to{transform:rotate(270deg) scale(1)}}.devui-loading-mask{position:absolute;left:0;right:0;bottom:0;top:0;background-color:var(--devui-line, #adb0b8);opacity:.3}.devui-loading-wrapper{text-align:center}.devui-loading--full{position:fixed;left:0;right:0;bottom:0;top:0;z-index:9999}.devui-loading--hidden{overflow:hidden}.devui-loading-text{margin-left:10px}.devui-loading-area{position:absolute;transform:translate(-50%,-50%);padding:12px 14px;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius-card, 6px)}.devui-busy-default-spinner{position:relative;display:inline-block;width:15px;height:15px;animation:devui-busy-spinner-anim 1s linear infinite}.devui-busy-default-spinner div{position:absolute;left:44.5%;top:37%;width:6px;height:6px;border-radius:50%}.devui-busy-default-spinner .devui-loading-bar1{top:0;left:0;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}.devui-busy-default-spinner .devui-loading-bar2{top:0;left:9px;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-busy-default-spinner .devui-loading-bar3{top:9px;left:0;background:#859bff;background:var(--devui-brand-foil, #859bff)}.devui-busy-default-spinner .devui-loading-bar4{top:9px;left:9px;background:#5e7ce0;background:var(--devui-brand, #5e7ce0)}

package/drawer/index.es.js

@@ -212,9 +212,8 @@ var Drawer = defineComponent({
     const closeDrawer = async () => {
       var _a;
       const beforeHidden = props.beforeHidden;
-      let result = (_a = typeof beforeHidden === "function" ? beforeHidden() : beforeHidden) != null ? _a : true;
+      let result = (_a = typeof beforeHidden === "function" ? beforeHidden() : beforeHidden) != null ? _a : false;
       if (result instanceof Promise) {
-        console.log(result);
         result = await result;
       }
       if (result)
@@ -266,7 +265,7 @@ var Drawer = defineComponent({
       "to": "body"
     }, {
       default: () => [createVNode(DrawerBody, null, {
-        default: () => [createVNode(DrawerHeader, {
+        default: () => [this.slots.header ? this.slots.header() : createVNode(DrawerHeader, {
           "onToggleFullScreen": fullScreenEvent,
           "onClose": closeDrawer
         }, null), this.slots.default ? this.slots.default() : createVNode(DrawerContainer, null, null)]
@@ -280,7 +279,7 @@ Drawer.install = function(app) {
 var index = {
   title: "Drawer \u62BD\u5C49\u677F",
   category: "\u53CD\u9988",
-  status: "30%",
+  status: "50%",
   install(app) {
     app.use(Drawer);
   }

package/drawer/index.umd.js

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

package/editable-select/index.es.js

@@ -14,7 +14,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, inject, withDirectives, createVNode, vShow, ref, reactive, computed, provide, toRefs, Fragment, resolveComponent, resolveDirective, Transition, renderSlot } from "vue";
+import { defineComponent, inject, withDirectives, createVNode, vShow, nextTick, ref, reactive, computed, provide, toRefs, Fragment, resolveComponent, resolveDirective, Transition, renderSlot } from "vue";
 const editableSelectProps = {
   appendToBody: {
     type: Boolean,
@@ -93,6 +93,7 @@ var SelectDropdown = defineComponent({
       renderDefaultSlots,
       renderEmptySlots,
       selectedIndex,
+      hoverIndex,
       loadMore
     } = select;
     const {
@@ -105,7 +106,8 @@ var SelectDropdown = defineComponent({
         } = selectProps;
         return className("devui-dropdown-item", {
           disabled: disabledKey ? !!item[disabledKey] : false,
-          selected: selectedIndex.value === index2
+          selected: selectedIndex.value === index2,
+          "devui-dropdown-bg": hoverIndex.value === index2
         });
       };
       return withDirectives(createVNode("div", {
@@ -5598,6 +5600,60 @@ var lodash = { exports: {} };
     }
   }).call(commonjsGlobal);
 })(lodash, lodash.exports);
+function keyboardSelect(dropdownRef, visible, hoverIndex, selectedIndex, filteredOptions, toggleMenu, selectOptionClick) {
+  const updateHoverIndex = (index2) => {
+    hoverIndex.value = index2;
+  };
+  const scrollToActive = (index2) => {
+    const dropdownVal = dropdownRef.value;
+    const li = dropdownVal.children[index2];
+    nextTick(() => {
+      if (li.scrollIntoViewIfNeeded) {
+        li.scrollIntoViewIfNeeded(false);
+      } else {
+        const containerInfo = dropdownVal.getBoundingClientRect();
+        const elementInfo = li.getBoundingClientRect();
+        if (elementInfo.bottom > containerInfo.bottom || elementInfo.top < containerInfo.top) {
+          li.scrollIntoView(false);
+        }
+      }
+    });
+  };
+  const onKeyboardSelect = (e) => {
+    const option = filteredOptions.value[hoverIndex.value];
+    selectOptionClick(e, option);
+    hoverIndex.value = selectedIndex.value;
+  };
+  const handleKeydown = (e) => {
+    const keyCode = e.key || e.code;
+    let index2 = 0;
+    if (!visible.value) {
+      toggleMenu();
+    }
+    if (keyCode === "Backspace") {
+      return;
+    }
+    if (keyCode === "ArrowUp") {
+      index2 = hoverIndex.value - 1;
+      if (index2 < 0) {
+        index2 = filteredOptions.value.length - 1;
+      }
+    } else if (keyCode === "ArrowDown") {
+      index2 = hoverIndex.value + 1;
+      if (index2 > filteredOptions.value.length - 1) {
+        index2 = 0;
+      }
+    }
+    if (keyCode === "Enter") {
+      return onKeyboardSelect(e);
+    }
+    updateHoverIndex(index2);
+    scrollToActive(index2);
+  };
+  return {
+    handleKeydown
+  };
+}
 var EditableSelect = defineComponent({
   name: "DEditableSelect",
   directives: {
@@ -5647,6 +5703,7 @@ var EditableSelect = defineComponent({
     const visible = ref(false);
     const inputValue = ref("");
     const selectedIndex = ref(0);
+    const hoverIndex = ref(0);
     const query = ref(props.modelValue);
     const position = reactive({
       originX: "left",
@@ -5732,6 +5789,7 @@ var EditableSelect = defineComponent({
         selectedIndex.value = findIndex(item);
         inputValue.value = "";
         ctx2.emit("update:modelValue", item.name);
+        visible.value = false;
       }
     };
     const loadMore = () => {
@@ -5742,12 +5800,16 @@ var EditableSelect = defineComponent({
         props.loadMore();
       }
     };
+    const {
+      handleKeydown
+    } = keyboardSelect(dropdownRef, visible, hoverIndex, selectedIndex, filteredOptions, toggleMenu, selectOptionClick);
     provide("InjectionKey", {
       dropdownRef,
       props: reactive(__spreadValues({}, toRefs(props))),
       visible,
       emptyText,
       selectedIndex,
+      hoverIndex,
       loadMore,
       selectOptionClick,
       renderDefaultSlots,
@@ -5766,9 +5828,11 @@ var EditableSelect = defineComponent({
         "ref": origin
       }, [createVNode("input", {
         "class": inputCls,
+        "disabled": props.disabled,
         "type": "text",
         "onInput": handleInput,
-        "value": query.value
+        "value": query.value,
+        "onKeydown": handleKeydown
       }, null), createVNode("span", {
         "class": "devui-form-control-feedback"
       }, [createVNode("span", {