vue-devui 1.0.0-pre.0 → 1.0.0-rc.2

package/editable-select/index.es.js

@@ -1,24 +1,5 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-import { computed, nextTick, defineComponent, ref, reactive, watch, withDirectives, createVNode, withModifiers, resolveComponent, resolveDirective, vShow, Transition } from "vue";
+import { computed, ref, nextTick, defineComponent, watch, withDirectives, createVNode, withModifiers, resolveComponent, vShow, resolveDirective } from "vue";
 const editableSelectProps = {
-  appendToBody: {
-    type: Boolean
-  },
   options: {
     type: Array,
     default: () => []
@@ -48,9 +29,6 @@ const editableSelectProps = {
   },
   filterOption: {
     type: [Function, Boolean]
-  },
-  loadMore: {
-    type: Function
   }
 };
 const inBrowser = typeof window !== "undefined";
@@ -145,17 +123,21 @@ const useInput = (inputValue, ctx2) => {
     handleInput
   };
 };
-const useLazyLoad = (dropdownRef, inputValue, filterOtion, load) => {
+const useLazyLoad = (dropdownRef, inputValue, filterOtion, ctx2) => {
   const loadMore = () => {
-    if (filterOtion !== false)
+    const dropdownVal = dropdownRef.value;
+    if (filterOtion !== false) {
       return;
-    if (dropdownRef.value.clientHeight + dropdownRef.value.scrollTop >= dropdownRef.value.scrollHeight) {
-      load(inputValue.value);
+    }
+    if (dropdownVal.clientHeight + dropdownVal.scrollTop >= dropdownVal.scrollHeight) {
+      ctx2.emit("loadMore", inputValue.value);
     }
   };
   return { loadMore };
 };
-const useKeyboardSelect = (dropdownRef, disabled, visible, hoverIndex, selectedIndex, options, toggleMenu, closeMenu, handleClick) => {
+const useKeyboardSelect = (dropdownRef, visible, inputValue, filteredOptions, optionDisabledKey, filterOption, loading, handleClick, closeMenu, toggleMenu) => {
+  const hoverIndex = ref(0);
+  const selectedIndex = ref(0);
   const updateHoveringIndex = (index2) => {
     hoverIndex.value = index2;
   };
@@ -174,64 +156,71 @@ const useKeyboardSelect = (dropdownRef, disabled, visible, hoverIndex, selectedI
       }
     });
   };
-  const onKeyboardNavigation = (direction, newIndex) => {
-    if (!newIndex) {
-      newIndex = hoverIndex.value;
+  const handleEscape = () => {
+    if (inputValue.value) {
+      inputValue.value = "";
+    } else {
+      closeMenu();
+    }
+  };
+  const handleEnter = () => {
+    const len = filteredOptions.value.length;
+    if (!visible.value) {
+      toggleMenu();
+    } else if (!len || len === 1) {
+      closeMenu();
+    } else if (len && len !== 1) {
+      handleClick(filteredOptions.value[hoverIndex.value]);
+      closeMenu();
+    }
+  };
+  const handleKeyboardNavigation = (direction) => {
+    const len = filteredOptions.value.length;
+    if (!len || len === 1) {
+      return;
     }
-    if (!["ArrowDown", "ArrowUp"].includes(direction))
+    if (!["ArrowDown", "ArrowUp"].includes(direction)) {
       return;
+    }
+    if (filterOption === false && loading.value) {
+      return;
+    }
+    let newIndex = 0;
+    newIndex = hoverIndex.value;
     if (direction === "ArrowUp") {
-      if (newIndex === 0) {
-        newIndex = options.value.length - 1;
-        scrollToItem(newIndex);
-        updateHoveringIndex(newIndex);
-        return;
+      newIndex -= 1;
+      if (newIndex === -1) {
+        newIndex = len - 1;
       }
-      newIndex = newIndex - 1;
     } else if (direction === "ArrowDown") {
-      if (newIndex === options.value.length - 1) {
+      newIndex += 1;
+      if (newIndex === len) {
         newIndex = 0;
-        scrollToItem(newIndex);
-        updateHoveringIndex(newIndex);
-        return;
       }
-      newIndex = newIndex + 1;
     }
-    const option = options.value[newIndex];
-    if (option[disabled]) {
-      return onKeyboardNavigation(direction, newIndex);
+    hoverIndex.value = newIndex;
+    const option = filteredOptions.value[newIndex];
+    if (option[optionDisabledKey]) {
+      return handleKeyboardNavigation(direction);
     }
-    scrollToItem(newIndex);
     updateHoveringIndex(newIndex);
+    scrollToItem(newIndex);
   };
   const handleKeydown = (event) => {
     const keyCode = event.key || event.code;
-    if (options.value.length === 0)
-      return;
-    if (!visible.value) {
-      return toggleMenu();
-    }
-    const onKeydownEnter = () => {
-      handleClick(options.value[hoverIndex.value]);
-      closeMenu();
-    };
-    const onKeydownEsc = () => {
-      closeMenu();
-    };
     switch (keyCode) {
-      case "Enter":
-        onKeydownEnter();
-        break;
       case "Escape":
-        onKeydownEsc();
+        event.preventDefault();
+        handleEscape();
+        break;
+      case "Enter":
+        handleEnter();
         break;
       default:
-        onKeyboardNavigation(keyCode);
+        handleKeyboardNavigation(keyCode);
     }
   };
-  return {
-    handleKeydown
-  };
+  return { handleKeydown, hoverIndex, selectedIndex };
 };
 var EditableSelect = defineComponent({
   name: "DEditableSelect",
@@ -241,101 +230,19 @@ var EditableSelect = defineComponent({
   props: editableSelectProps,
   emits: ["update:modelValue", "search", "loadMore"],
   setup(props, ctx2) {
-    const getItemCls = (option, index2) => {
-      const {
-        optionDisabledKey: disabledKey
-      } = props;
-      return className("devui-dropdown-item", {
-        disabled: disabledKey ? !!option[disabledKey] : false,
-        selected: index2 === selectIndex.value,
-        "devui-dropdown-bg": index2 === hoverIndex.value
-      });
-    };
-    const renderDropdown = () => {
-      if (props.appendToBody) {
-        return createVNode(resolveComponent("d-flexible-overlay"), {
-          "origin": origin,
-          "visible": visible.value,
-          "onUpdate:visible": ($event) => visible.value = $event,
-          "position": position,
-          "hasBackdrop": false
-        }, {
-          default: () => [createVNode("div", {
-            "class": "devui-editable-select-dropdown",
-            "style": {
-              width: props.width + "px"
-            }
-          }, [withDirectives(createVNode("div", {
-            "class": "devui-dropdown-menu"
-          }, [createVNode("ul", {
-            "ref": dopdownRef,
-            "class": "devui-list-unstyled scroll-height",
-            "style": {
-              maxHeight: props.maxHeight + "px"
-            },
-            "onScroll": loadMore
-          }, [filteredOptions.value.map((option, index2) => {
-            return createVNode("li", {
-              "class": getItemCls(option, index2),
-              "onClick": (e) => {
-                e.stopPropagation();
-                handleClick(option);
-              }
-            }, [ctx2.slots.itemTemplate ? ctx2.slots.itemTemplate(option) : option.label]);
-          }), withDirectives(createVNode("li", {
-            "class": "devui-no-result-template"
-          }, [createVNode("div", {
-            "class": "devui-no-data-tip"
-          }, [emptyText.value])]), [[vShow, !filteredOptions.value.length]])])]), [[resolveDirective("dLoading"), props.loading], [vShow, visible.value]])])]
-        });
-      } else {
-        return createVNode(Transition, {
-          "name": "fade"
-        }, {
-          default: () => [withDirectives(createVNode("div", {
-            "class": "devui-dropdown-menu"
-          }, [createVNode("ul", {
-            "ref": dopdownRef,
-            "class": "devui-list-unstyled scroll-height",
-            "style": {
-              maxHeight: props.maxHeight + "px"
-            },
-            "onScroll": loadMore
-          }, [filteredOptions.value.map((option, index2) => {
-            return createVNode("li", {
-              "class": getItemCls(option, index2),
-              "onClick": (e) => {
-                e.stopPropagation();
-                handleClick(option);
-              }
-            }, [ctx2.slots.itemTemplate ? ctx2.slots.itemTemplate(option) : option.label]);
-          }), withDirectives(createVNode("li", {
-            "class": "devui-no-result-template"
-          }, [createVNode("div", {
-            "class": "devui-no-data-tip"
-          }, [emptyText.value])]), [[vShow, !filteredOptions.value.length]])])]), [[vShow, visible.value]])]
-        });
-      }
-    };
-    const dopdownRef = ref();
+    const dropdownRef = ref();
     const origin = ref();
-    const position = reactive({
-      originX: "left",
-      originY: "bottom",
-      overlayX: "left",
-      overlayY: "top"
-    });
+    const position = ref(["bottom", "left"]);
     const visible = ref(false);
-    const inputValue = ref(props.modelValue);
-    const hoverIndex = ref(0);
-    const selectIndex = ref(0);
+    const inputValue = ref(props.modelValue || "");
+    const loading = ref(props.loading);
     const normalizeOptions = computed(() => {
       return props.options.map((option) => {
         if (typeof option === "object") {
-          return __spreadValues({
+          return Object.assign({}, option, {
             label: option.label ? option.label : option.value,
             value: option.value
-          }, option);
+          });
         }
         return {
           label: option + "",
@@ -345,13 +252,16 @@ var EditableSelect = defineComponent({
     });
     const filteredOptions = userFilterOptions(normalizeOptions, inputValue, props.filterOption);
     const emptyText = computed(() => {
-      let text;
+      let text = "";
       if (props.filterOption !== false && !filteredOptions.value.length) {
         text = "\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55";
       } else if (props.filterOption === false && !filteredOptions.value.length) {
         text = "\u6CA1\u6709\u6570\u636E";
       }
-      return ctx2.slots.noResultItemTemplate ? ctx2.slots.noResultItemTemplate() : text;
+      return text;
+    });
+    watch(() => props.loading, (newVal) => {
+      loading.value = newVal;
     });
     const toggleMenu = () => {
       visible.value = !visible.value;
@@ -361,7 +271,7 @@ var EditableSelect = defineComponent({
     };
     const {
       loadMore
-    } = useLazyLoad(dopdownRef, inputValue, props.filterOption, props.loadMore);
+    } = useLazyLoad(dropdownRef, inputValue, props.filterOption, ctx2);
     const {
       handleInput
     } = useInput(inputValue, ctx2);
@@ -369,17 +279,32 @@ var EditableSelect = defineComponent({
       const {
         optionDisabledKey: disabledKey
       } = props;
-      if (disabledKey && !!option[disabledKey])
+      if (disabledKey && !!option[disabledKey]) {
         return;
+      }
       ctx2.emit("update:modelValue", option.label);
       closeMenu();
     };
     const {
-      handleKeydown
-    } = useKeyboardSelect(dopdownRef, props.optionDisabledKey, visible, hoverIndex, selectIndex, filteredOptions, toggleMenu, closeMenu, handleClick);
+      handleKeydown,
+      hoverIndex,
+      selectedIndex
+    } = useKeyboardSelect(dropdownRef, visible, inputValue, filteredOptions, props.optionDisabledKey, props.filterOption, loading, handleClick, closeMenu, toggleMenu);
     watch(() => props.modelValue, (newVal) => {
-      inputValue.value = newVal;
+      if (newVal) {
+        inputValue.value = newVal;
+      }
     });
+    const getItemCls = (option, index2) => {
+      const {
+        optionDisabledKey: disabledKey
+      } = props;
+      return className("devui-dropdown-item", {
+        disabled: disabledKey ? !!option[disabledKey] : false,
+        selected: index2 === selectedIndex.value,
+        "devui-dropdown-bg": index2 === hoverIndex.value
+      });
+    };
     return () => {
       const selectCls = className("devui-editable-select devui-form-group devui-has-feedback", {
         "devui-select-open": visible.value === true
@@ -405,7 +330,41 @@ var EditableSelect = defineComponent({
         "class": "devui-select-chevron-icon"
       }, [createVNode(resolveComponent("d-icon"), {
         "name": "select-arrow"
-      }, null)])]), renderDropdown()]), [[resolveDirective("click-outside"), closeMenu]]);
+      }, null)])]), createVNode(resolveComponent("d-flexible-overlay"), {
+        "origin": origin.value,
+        "modelValue": visible.value,
+        "onUpdate:modelValue": ($event) => visible.value = $event,
+        "position": position.value,
+        "hasBackdrop": false
+      }, {
+        default: () => [createVNode("div", {
+          "class": "devui-editable-select-dropdown",
+          "style": {
+            width: props.width + "px"
+          }
+        }, [withDirectives(createVNode("div", {
+          "class": "devui-dropdown-menu"
+        }, [createVNode("ul", {
+          "ref": dropdownRef,
+          "class": "devui-list-unstyled scroll-height",
+          "style": {
+            maxHeight: props.maxHeight + "px"
+          },
+          "onScroll": loadMore
+        }, [filteredOptions.value.map((option, index2) => {
+          return createVNode("li", {
+            "class": getItemCls(option, index2),
+            "onClick": (e) => {
+              e.stopPropagation();
+              handleClick(option);
+            }
+          }, [ctx2.slots.item ? ctx2.slots.item(option) : option.label]);
+        }), withDirectives(createVNode("li", {
+          "class": "devui-no-result-template"
+        }, [createVNode("div", {
+          "class": "devui-no-data-tip"
+        }, [ctx2.slots.noResultItem ? ctx2.slots.noResultItem() : emptyText.value])]), [[vShow, !filteredOptions.value.length]])])]), [[resolveDirective("dLoading"), props.loading], [vShow, visible.value]])])]
+      })]), [[resolveDirective("click-outside"), closeMenu]]);
     };
   }
 });

package/editable-select/index.umd.js

@@ -1 +1 @@
-var z=Object.defineProperty;var L=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,G=Object.prototype.propertyIsEnumerable;var O=(s,e,u)=>e in s?z(s,e,{enumerable:!0,configurable:!0,writable:!0,value:u}):s[e]=u,j=(s,e)=>{for(var u in e||(e={}))$.call(e,u)&&O(s,u,e[u]);if(L)for(var u of L(e))G.call(e,u)&&O(s,u,e[u]);return s};(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue))})(this,function(s,e){"use strict";const u={appendToBody:{type:Boolean},options:{type:Array,default:()=>[]},disabled:{type:Boolean},loading:{type:Boolean},optionDisabledKey:{type:String,default:""},placeholder:{type:String,default:"Search"},modelValue:{type:String},width:{type:Number},maxHeight:{type:Number},filterOption:{type:[Function,Boolean]},loadMore:{type:Function}},A=typeof window!="undefined";function F(t,l,n){document.addEventListener?t&&l&&n&&t.addEventListener(l,n,!1):t&&l&&n&&t.attachEvent("on"+l,n)}const h=Symbol("@@clickoutside"),C=new Map;let K,D=0,H=!0;function M(t,l,n){return A&&H&&(H=!1,F(document,"mousedown",i=>{K=i}),F(document,"mouseup",i=>{for(const[r,c]of C)c[h].documentHandler(i,K)})),function(i,r){!n||!l.instance||!i.target||!r.target||t.contains(i.target)||t.contains(r.target)||t===i.target||t[h].bindingFn&&t[h].bindingFn()}}const P={beforeMount:function(t,l,n){D++,C.set(D,t),t[h]={nid:D,documentHandler:M(t,l,n),bindingFn:l.value}},updated:function(t,l,n){t[h].documentHandler=M(t,l,n),t[h].bindingFn=l.value},unmounted:function(t){C.delete(t[h].nid),delete t[h]}};function B(t,l){let n=t;return typeof l=="object"&&Object.keys(l).forEach(i=>{l[i]&&(n+=` ${i}`)}),n}var J="";const R=()=>(t,l)=>l.label.toLocaleLowerCase().indexOf(t.toLocaleLowerCase())>-1,U=(t,l,n)=>e.computed(()=>{const i=[];if(!l.value||n===!1)return t.value;const r=typeof n=="function"?n:R();return t.value.forEach(c=>{r(l.value,c)&&i.push(c)}),i}),I=(t,l)=>{const n=r=>{l.emit("search",r)};return{handleInput:r=>{const c=r.target.value;t.value=c,n(c)}}},X=(t,l,n,i)=>({loadMore:()=>{n===!1&&t.value.clientHeight+t.value.scrollTop>=t.value.scrollHeight&&i(l.value)}}),Y=(t,l,n,i,r,c,E,f,p)=>{const b=d=>{i.value=d},w=d=>{const a=t.value,m=a.children[d];e.nextTick(()=>{if(m.scrollIntoViewIfNeeded)m.scrollIntoViewIfNeeded(!1);else{const y=a.getBoundingClientRect(),k=m.getBoundingClientRect();(k.bottom>y.bottom||k.top<y.top)&&m.scrollIntoView(!1)}})},S=(d,a)=>{if(a||(a=i.value),!["ArrowDown","ArrowUp"].includes(d))return;if(d==="ArrowUp"){if(a===0){a=c.value.length-1,w(a),b(a);return}a=a-1}else if(d==="ArrowDown"){if(a===c.value.length-1){a=0,w(a),b(a);return}a=a+1}if(c.value[a][l])return S(d,a);w(a),b(a)};return{handleKeydown:d=>{const a=d.key||d.code;if(c.value.length===0)return;if(!n.value)return E();const m=()=>{p(c.value[i.value]),f()},y=()=>{f()};switch(a){case"Enter":m();break;case"Escape":y();break;default:S(a)}}}};var N=e.defineComponent({name:"DEditableSelect",directives:{clickOutside:P},props:u,emits:["update:modelValue","search","loadMore"],setup(t,l){const n=(o,v)=>{const{optionDisabledKey:V}=t;return B("devui-dropdown-item",{disabled:V?!!o[V]:!1,selected:v===w.value,"devui-dropdown-bg":v===b.value})},i=()=>t.appendToBody?e.createVNode(e.resolveComponent("d-flexible-overlay"),{origin:c,visible:f.value,"onUpdate:visible":o=>f.value=o,position:E,hasBackdrop:!1},{default:()=>[e.createVNode("div",{class:"devui-editable-select-dropdown",style:{width:t.width+"px"}},[e.withDirectives(e.createVNode("div",{class:"devui-dropdown-menu"},[e.createVNode("ul",{ref:r,class:"devui-list-unstyled scroll-height",style:{maxHeight:t.maxHeight+"px"},onScroll:y},[g.value.map((o,v)=>e.createVNode("li",{class:n(o,v),onClick:V=>{V.stopPropagation(),T(o)}},[l.slots.itemTemplate?l.slots.itemTemplate(o):o.label])),e.withDirectives(e.createVNode("li",{class:"devui-no-result-template"},[e.createVNode("div",{class:"devui-no-data-tip"},[d.value])]),[[e.vShow,!g.value.length]])])]),[[e.resolveDirective("dLoading"),t.loading],[e.vShow,f.value]])])]}):e.createVNode(e.Transition,{name:"fade"},{default:()=>[e.withDirectives(e.createVNode("div",{class:"devui-dropdown-menu"},[e.createVNode("ul",{ref:r,class:"devui-list-unstyled scroll-height",style:{maxHeight:t.maxHeight+"px"},onScroll:y},[g.value.map((o,v)=>e.createVNode("li",{class:n(o,v),onClick:V=>{V.stopPropagation(),T(o)}},[l.slots.itemTemplate?l.slots.itemTemplate(o):o.label])),e.withDirectives(e.createVNode("li",{class:"devui-no-result-template"},[e.createVNode("div",{class:"devui-no-data-tip"},[d.value])]),[[e.vShow,!g.value.length]])])]),[[e.vShow,f.value]])]}),r=e.ref(),c=e.ref(),E=e.reactive({originX:"left",originY:"bottom",overlayX:"left",overlayY:"top"}),f=e.ref(!1),p=e.ref(t.modelValue),b=e.ref(0),w=e.ref(0),S=e.computed(()=>t.options.map(o=>typeof o=="object"?j({label:o.label?o.label:o.value,value:o.value},o):{label:o+"",value:o})),g=U(S,p,t.filterOption),d=e.computed(()=>{let o;return t.filterOption!==!1&&!g.value.length?o="\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55":t.filterOption===!1&&!g.value.length&&(o="\u6CA1\u6709\u6570\u636E"),l.slots.noResultItemTemplate?l.slots.noResultItemTemplate():o}),a=()=>{f.value=!f.value},m=()=>{f.value=!1},{loadMore:y}=X(r,p,t.filterOption,t.loadMore),{handleInput:k}=I(p,l),T=o=>{const{optionDisabledKey:v}=t;v&&!!o[v]||(l.emit("update:modelValue",o.label),m())},{handleKeydown:q}=Y(r,t.optionDisabledKey,f,b,w,g,a,m,T);return e.watch(()=>t.modelValue,o=>{p.value=o}),()=>{const o=B("devui-editable-select devui-form-group devui-has-feedback",{"devui-select-open":f.value===!0});return e.withDirectives(e.createVNode("div",{class:o,ref:c,style:{width:t.width+"px"}},[e.createVNode("input",{class:"devui-form-control devui-dropdown-origin devui-dropdown-origin-open",onClick:e.withModifiers(a,["self"]),onInput:k,onKeydown:q,value:p.value,disabled:t.disabled,placeholder:t.placeholder,type:"text"},null),e.createVNode("span",{class:"devui-form-control-feedback"},[e.createVNode("span",{class:"devui-select-chevron-icon"},[e.createVNode(e.resolveComponent("d-icon"),{name:"select-arrow"},null)])]),i()]),[[e.resolveDirective("click-outside"),m]])}}});N.install=function(t){t.component(N.name,N)};var _={title:"EditableSelect \u53EF\u8F93\u5165\u4E0B\u62C9\u9009\u62E9\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(t){t.use(N)}};s.EditableSelect=N,s.default=_,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
+(function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue))})(this,function(u,t){"use strict";const M={options:{type:Array,default:()=>[]},disabled:{type:Boolean},loading:{type:Boolean},optionDisabledKey:{type:String,default:""},placeholder:{type:String,default:"Search"},modelValue:{type:String},width:{type:Number},maxHeight:{type:Number},filterOption:{type:[Function,Boolean]}},B=typeof window!="undefined";function N(e,l,o){document.addEventListener?e&&l&&o&&e.addEventListener(l,o,!1):e&&l&&o&&e.attachEvent("on"+l,o)}const f=Symbol("@@clickoutside"),S=new Map;let x,k=0,F=!0;function K(e,l,o){return B&&F&&(F=!1,N(document,"mousedown",a=>{x=a}),N(document,"mouseup",a=>{for(const[c,i]of S)i[f].documentHandler(a,x)})),function(a,c){!o||!l.instance||!a.target||!c.target||e.contains(a.target)||e.contains(c.target)||e===a.target||e[f].bindingFn&&e[f].bindingFn()}}const O={beforeMount:function(e,l,o){k++,S.set(k,e),e[f]={nid:k,documentHandler:K(e,l,o),bindingFn:l.value}},updated:function(e,l,o){e[f].documentHandler=K(e,l,o),e[f].bindingFn=l.value},unmounted:function(e){S.delete(e[f].nid),delete e[f]}};function H(e,l){let o=e;return typeof l=="object"&&Object.keys(l).forEach(a=>{l[a]&&(o+=` ${a}`)}),o}var q="";const T=()=>(e,l)=>l.label.toLocaleLowerCase().indexOf(e.toLocaleLowerCase())>-1,j=(e,l,o)=>t.computed(()=>{const a=[];if(!l.value||o===!1)return e.value;const c=typeof o=="function"?o:T();return e.value.forEach(i=>{c(l.value,i)&&a.push(i)}),a}),A=(e,l)=>{const o=c=>{l.emit("search",c)};return{handleInput:c=>{const i=c.target.value;e.value=i,o(i)}}},R=(e,l,o,a)=>({loadMore:()=>{const i=e.value;o===!1&&i.clientHeight+i.scrollTop>=i.scrollHeight&&a.emit("loadMore",l.value)}}),P=(e,l,o,a,c,i,v,p,w,h)=>{const m=t.ref(0),I=t.ref(0),y=d=>{m.value=d},C=d=>{const r=e.value,n=r.children[d];t.nextTick(()=>{if(n.scrollIntoViewIfNeeded)n.scrollIntoViewIfNeeded(!1);else{const s=r.getBoundingClientRect(),b=n.getBoundingClientRect();(b.bottom>s.bottom||b.top<s.top)&&n.scrollIntoView(!1)}})},D=()=>{o.value?o.value="":w()},V=()=>{const d=a.value.length;l.value?!d||d===1?w():d&&d!==1&&(p(a.value[m.value]),w()):h()},E=d=>{const r=a.value.length;if(!r||r===1||!["ArrowDown","ArrowUp"].includes(d)||i===!1&&v.value)return;let n=0;if(n=m.value,d==="ArrowUp"?(n-=1,n===-1&&(n=r-1)):d==="ArrowDown"&&(n+=1,n===r&&(n=0)),m.value=n,a.value[n][c])return E(d);y(n),C(n)};return{handleKeydown:d=>{const r=d.key||d.code;switch(r){case"Escape":d.preventDefault(),D();break;case"Enter":V();break;default:E(r)}},hoverIndex:m,selectedIndex:I}};var g=t.defineComponent({name:"DEditableSelect",directives:{clickOutside:O},props:M,emits:["update:modelValue","search","loadMore"],setup(e,l){const o=t.ref(),a=t.ref(),c=t.ref(["bottom","left"]),i=t.ref(!1),v=t.ref(e.modelValue||""),p=t.ref(e.loading),w=t.computed(()=>e.options.map(n=>typeof n=="object"?Object.assign({},n,{label:n.label?n.label:n.value,value:n.value}):{label:n+"",value:n})),h=j(w,v,e.filterOption),m=t.computed(()=>{let n="";return e.filterOption!==!1&&!h.value.length?n="\u627E\u4E0D\u5230\u76F8\u5173\u8BB0\u5F55":e.filterOption===!1&&!h.value.length&&(n="\u6CA1\u6709\u6570\u636E"),n});t.watch(()=>e.loading,n=>{p.value=n});const I=()=>{i.value=!i.value},y=()=>{i.value=!1},{loadMore:C}=R(o,v,e.filterOption,l),{handleInput:D}=A(v,l),V=n=>{const{optionDisabledKey:s}=e;s&&!!n[s]||(l.emit("update:modelValue",n.label),y())},{handleKeydown:E,hoverIndex:L,selectedIndex:d}=P(o,i,v,h,e.optionDisabledKey,e.filterOption,p,V,y,I);t.watch(()=>e.modelValue,n=>{n&&(v.value=n)});const r=(n,s)=>{const{optionDisabledKey:b}=e;return H("devui-dropdown-item",{disabled:b?!!n[b]:!1,selected:s===d.value,"devui-dropdown-bg":s===L.value})};return()=>{const n=H("devui-editable-select devui-form-group devui-has-feedback",{"devui-select-open":i.value===!0});return t.withDirectives(t.createVNode("div",{class:n,ref:a,style:{width:e.width+"px"}},[t.createVNode("input",{class:"devui-form-control devui-dropdown-origin devui-dropdown-origin-open",onClick:t.withModifiers(I,["self"]),onInput:D,onKeydown:E,value:v.value,disabled:e.disabled,placeholder:e.placeholder,type:"text"},null),t.createVNode("span",{class:"devui-form-control-feedback"},[t.createVNode("span",{class:"devui-select-chevron-icon"},[t.createVNode(t.resolveComponent("d-icon"),{name:"select-arrow"},null)])]),t.createVNode(t.resolveComponent("d-flexible-overlay"),{origin:a.value,modelValue:i.value,"onUpdate:modelValue":s=>i.value=s,position:c.value,hasBackdrop:!1},{default:()=>[t.createVNode("div",{class:"devui-editable-select-dropdown",style:{width:e.width+"px"}},[t.withDirectives(t.createVNode("div",{class:"devui-dropdown-menu"},[t.createVNode("ul",{ref:o,class:"devui-list-unstyled scroll-height",style:{maxHeight:e.maxHeight+"px"},onScroll:C},[h.value.map((s,b)=>t.createVNode("li",{class:r(s,b),onClick:_=>{_.stopPropagation(),V(s)}},[l.slots.item?l.slots.item(s):s.label])),t.withDirectives(t.createVNode("li",{class:"devui-no-result-template"},[t.createVNode("div",{class:"devui-no-data-tip"},[l.slots.noResultItem?l.slots.noResultItem():m.value])]),[[t.vShow,!h.value.length]])])]),[[t.resolveDirective("dLoading"),e.loading],[t.vShow,i.value]])])]})]),[[t.resolveDirective("click-outside"),y]])}}});g.install=function(e){e.component(g.name,g)};var U={title:"EditableSelect \u53EF\u8F93\u5165\u4E0B\u62C9\u9009\u62E9\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.use(g)}};u.EditableSelect=g,u.default=U,Object.defineProperty(u,"__esModule",{value:!0}),u[Symbol.toStringTag]="Module"});

package/fullscreen/index.es.js

@@ -36,7 +36,7 @@ const launchNormalFullscreen = (targetElement, props) => {
 };
 const exitNormalFullscreen = (targetElement) => {
   targetElement.classList.remove("devui-fullscreen");
-  targetElement.style.zIndex = null;
+  targetElement.style.zIndex = "";
 };
 const launchImmersiveFullScreen = async (docElement) => {
   let fullscreenLaunch = null;
@@ -49,7 +49,7 @@ const launchImmersiveFullScreen = async (docElement) => {
   } else if (docElement.msRequestFullscreen) {
     fullscreenLaunch = Promise.resolve(docElement.msRequestFullscreen());
   }
-  return await fullscreenLaunch.then(() => !!document.fullscreenElement);
+  return await (fullscreenLaunch == null ? void 0 : fullscreenLaunch.then(() => !!document.fullscreenElement));
 };
 const exitImmersiveFullScreen = async (doc) => {
   let fullscreenExit = null;
@@ -62,7 +62,7 @@ const exitImmersiveFullScreen = async (doc) => {
   } else if (doc.msExitFullscreen) {
     fullscreenExit = Promise.resolve(doc.msExitFullscreen());
   }
-  return await fullscreenExit.then(() => !!document.fullscreenElement);
+  return await (fullscreenExit == null ? void 0 : fullscreenExit.then(() => !!document.fullscreenElement));
 };
 const addFullScreenStyle = () => {
   document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html");
@@ -73,14 +73,6 @@ const removeFullScreenStyle = () => {
 function useFullscreen(props, slotElement, ctx) {
   const { modelValue, mode } = toRefs(props);
   let exitByKeydown = false;
-  watch(modelValue, (newVal) => {
-    if (mode.value === "normal") {
-      handleNormalFullscreen(newVal);
-    }
-    if (mode.value === "immersive") {
-      handleImmersiveFullscreen(newVal);
-    }
-  });
   const handleNormalFullscreen = (isOpen) => {
     if (isOpen) {
       launchNormalFullscreen(slotElement.value, props);
@@ -99,6 +91,14 @@ function useFullscreen(props, slotElement, ctx) {
       }
     }
   };
+  watch(modelValue, (newVal) => {
+    if (mode.value === "normal") {
+      handleNormalFullscreen(newVal);
+    }
+    if (mode.value === "immersive") {
+      handleImmersiveFullscreen(newVal);
+    }
+  });
   const handleFullscreenChange = () => {
     if (!document.fullscreenElement) {
       ctx.emit("update:modelValue");
@@ -131,15 +131,12 @@ var Fullscreen = defineComponent({
     };
   }
 });
-Fullscreen.install = function(app) {
-  app.component(Fullscreen.name, Fullscreen);
-};
 var index = {
   title: "Fullscreen \u5168\u5C4F",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(Fullscreen);
+    app.component(Fullscreen.name, Fullscreen);
   }
 };
-export { Fullscreen, index as default };
+export { Fullscreen, index as default, fullscreenProps };

package/fullscreen/index.umd.js

@@ -1 +1 @@
-(function(t,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis!="undefined"?globalThis:t||self,n(t.index={},t.Vue))})(this,function(t,n){"use strict";const d={modelValue:{type:Boolean,default:!1},mode:{type:String,default:"normal"},zIndex:{type:Number,default:10}},m=27;function f(e,l){const{modelValue:s}=n.toRefs(e),u=o=>{o.keyCode===m&&s&&l.emit("update:modelValue",!1)};n.onMounted(()=>{document.addEventListener("keydown",u)}),n.onUnmounted(()=>{document.removeEventListener("keydown",u)})}const F=(e,l)=>{e.classList.add("devui-fullscreen"),l.zIndex&&e.setAttribute("style",`z-index: ${l.zIndex}`)},y=e=>{e.classList.remove("devui-fullscreen"),e.style.zIndex=null},v=async e=>{let l=null;return e.requestFullscreen?l=e.requestFullscreen():e.mozRequestFullScreen?l=e.mozRequestFullScreen():e.webkitRequestFullScreen?l=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(l=Promise.resolve(e.msRequestFullscreen())),await l.then(()=>!!document.fullscreenElement)},S=async e=>{let l=null;return e.exitFullscreen?l=e.exitFullscreen():e.mozCancelFullScreen?l=e.mozCancelFullScreen():e.webkitCancelFullScreen?l=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(l=Promise.resolve(e.msExitFullscreen())),await l.then(()=>!!document.fullscreenElement)},h=()=>{document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html")},x=()=>{document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen-html")};function p(e,l,s){const{modelValue:u,mode:o}=n.toRefs(e);let c=!1;n.watch(u,r=>{o.value==="normal"&&C(r),o.value==="immersive"&&q(r)});const C=r=>{r?(F(l.value,e),h()):(y(l.value),x())},q=r=>{r?v(l.value):c||S(document)},a=()=>{document.fullscreenElement?c=!1:(s.emit("update:modelValue"),c=!0)};n.onMounted(()=>{document.addEventListener("fullscreenchange",a)}),n.onUnmounted(()=>{document.removeEventListener("fullscreenchange",a)})}var z="",i=n.defineComponent({name:"DFullscreen",props:d,emits:["update:modelValue"],setup(e,l){const s=n.ref(null);return p(e,s,l),f(e,l),()=>{const u=n.renderSlot(n.useSlots(),"default");return n.createVNode("div",{ref:s},[u])}}});i.install=function(e){e.component(i.name,i)};var w={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(e){e.use(i)}};t.Fullscreen=i,t.default=w,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(t,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis!="undefined"?globalThis:t||self,n(t.index={},t.Vue))})(this,function(t,n){"use strict";const a={modelValue:{type:Boolean,default:!1},mode:{type:String,default:"normal"},zIndex:{type:Number,default:10}},m=27;function f(e,l){const{modelValue:s}=n.toRefs(e),u=o=>{o.keyCode===m&&s&&l.emit("update:modelValue",!1)};n.onMounted(()=>{document.addEventListener("keydown",u)}),n.onUnmounted(()=>{document.removeEventListener("keydown",u)})}const F=(e,l)=>{e.classList.add("devui-fullscreen"),l.zIndex&&e.setAttribute("style",`z-index: ${l.zIndex}`)},y=e=>{e.classList.remove("devui-fullscreen"),e.style.zIndex=""},v=async e=>{let l=null;return e.requestFullscreen?l=e.requestFullscreen():e.mozRequestFullScreen?l=e.mozRequestFullScreen():e.webkitRequestFullScreen?l=Promise.resolve(e.webkitRequestFullScreen()):e.msRequestFullscreen&&(l=Promise.resolve(e.msRequestFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},S=async e=>{let l=null;return e.exitFullscreen?l=e.exitFullscreen():e.mozCancelFullScreen?l=e.mozCancelFullScreen():e.webkitCancelFullScreen?l=Promise.resolve(e.webkitCancelFullScreen()):e.msExitFullscreen&&(l=Promise.resolve(e.msExitFullscreen())),await(l==null?void 0:l.then(()=>!!document.fullscreenElement))},h=()=>{document.getElementsByTagName("html")[0].classList.add("devui-fullscreen-html")},p=()=>{document.getElementsByTagName("html")[0].classList.remove("devui-fullscreen-html")};function w(e,l,s){const{modelValue:u,mode:o}=n.toRefs(e);let c=!1;const C=r=>{r?(F(l.value,e),h()):(y(l.value),p())},q=r=>{r?v(l.value):c||S(document)};n.watch(u,r=>{o.value==="normal"&&C(r),o.value==="immersive"&&q(r)});const d=()=>{document.fullscreenElement?c=!1:(s.emit("update:modelValue"),c=!0)};n.onMounted(()=>{document.addEventListener("fullscreenchange",d)}),n.onUnmounted(()=>{document.removeEventListener("fullscreenchange",d)})}var z="",i=n.defineComponent({name:"DFullscreen",props:a,emits:["update:modelValue"],setup(e,l){const s=n.ref(null);return w(e,s,l),f(e,l),()=>{const u=n.renderSlot(n.useSlots(),"default");return n.createVNode("div",{ref:s},[u])}}}),x={title:"Fullscreen \u5168\u5C4F",category:"\u901A\u7528",status:"100%",install(e){e.component(i.name,i)}};t.Fullscreen=i,t.default=x,t.fullscreenProps=a,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});

package/icon/index.es.js

@@ -1,75 +1,57 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
+import { defineComponent, toRefs, createVNode } from "vue";
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: String,
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  classPrefix: {
+    type: String,
+    default: "icon"
+  }
 };
-import { defineComponent, createVNode } from "vue";
 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"
-    }
-  },
+  props: iconProps,
   setup(props) {
-    return __spreadValues({}, props);
-  },
-  render() {
     const {
       name,
       size,
       color,
       classPrefix
-    } = this;
-    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
-      "style": {
-        width: size,
-        verticalAlign: "text-bottom"
-      }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
-      "style": {
-        fontSize: size,
-        color
-      }
-    }, null);
+    } = toRefs(props);
+    return () => {
+      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
+        "src": name.value,
+        "alt": name.value.split("/")[name.value.split("/").length - 1],
+        "style": {
+          width: size.value,
+          verticalAlign: "text-bottom"
+        }
+      }, null) : createVNode("i", {
+        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
+        "style": {
+          fontSize: size.value,
+          color: color.value
+        }
+      }, null);
+    };
   }
 });
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
 var index = {
   title: "Icon \u56FE\u6807",
   category: "\u901A\u7528",
   status: "100%",
   install(app) {
-    app.use(Icon);
+    app.component(Icon.name, Icon);
   }
 };
-export { Icon, index as default };
+export { Icon, index as default, iconProps };

package/icon/index.umd.js

@@ -1 +1 @@
-var a=Object.defineProperty;var s=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable;var u=(t,e,n)=>e in t?a(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,l=(t,e)=>{for(var n in e||(e={}))f.call(e,n)&&u(t,n,e[n]);if(s)for(var n of s(e))p.call(e,n)&&u(t,n,e[n]);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";var n=e.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(i){return l({},i)},render(){const{name:i,size:o,color:c,classPrefix:r}=this;return/^((https?):)?\/\//.test(i)?e.createVNode("img",{src:i,alt:i.split("/")[i.split("/").length-1],style:{width:o,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${r} ${r}-${i}`,style:{fontSize:o,color:c}},null)}});n.install=function(i){i.component(n.name,n)};var d={title:"Icon \u56FE\u6807",category:"\u901A\u7528",status:"100%",install(i){i.use(n)}};t.Icon=n,t.default=d,Object.defineProperty(t,"__esModule",{value:!0}),t[Symbol.toStringTag]="Module"});
+(function(e,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis!="undefined"?globalThis:e||self,t(e.index={},e.Vue))})(this,function(e,t){"use strict";const o={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var i=t.defineComponent({name:"DIcon",props:o,setup(l){const{name:n,size:u,color:s,classPrefix:r}=t.toRefs(l);return()=>/^((https?):)?\/\//.test(n.value)?t.createVNode("img",{src:n.value,alt:n.value.split("/")[n.value.split("/").length-1],style:{width:u.value,verticalAlign:"text-bottom"}},null):t.createVNode("i",{class:`${r.value} ${r.value}-${n.value}`,style:{fontSize:u.value,color:s.value}},null)}}),a={title:"Icon \u56FE\u6807",category:"\u901A\u7528",status:"100%",install(l){l.component(i.name,i)}};e.Icon=i,e.default=a,e.iconProps=o,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"});

package/image-preview/index.es.js

@@ -188,8 +188,9 @@ var imagePreview = defineComponent({
       transform.setZoomOriginal();
     }
     function onKeyDown(event) {
-      if (event.defaultPrevented)
+      if (event.defaultPrevented) {
         return;
+      }
       if (event.code == "Escape") {
         onClose();
       } else if (event.code == "ArrowLeft") {