vue-devui 1.0.0-rc.0 → 1.0.0-rc.1

package/carousel/index.es.js

@@ -1,20 +1,4 @@
-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, createVNode, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment } from "vue";
+import { defineComponent, toRefs, createVNode, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment } from "vue";
 const carouselProps = {
   arrowTrigger: {
     type: String,
@@ -52,50 +36,51 @@ const carouselProps = {
     type: Function
   }
 };
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: String,
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  classPrefix: {
+    type: String,
+    default: "icon"
+  }
+};
 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);
+    };
   }
 });
 var carousel = "";

package/carousel/index.umd.js

@@ -1 +1 @@
-var F=Object.defineProperty;var R=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,q=Object.prototype.propertyIsEnumerable;var $=(n,e,s)=>e in n?F(n,e,{enumerable:!0,configurable:!0,writable:!0,value:s}):n[e]=s,k=(n,e)=>{for(var s in e||(e={}))_.call(e,s)&&$(n,s,e[s]);if(R)for(var s of R(e))q.call(e,s)&&$(n,s,e[s]);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 s={arrowTrigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:3e3},height:{type:String,default:"100%"},showDots:{type:Boolean,default:!0},dotTrigger:{type:String,default:"click"},dotPosition:{type:String,default:"bottom"},activeIndex:{type:Number,default:0},activeIndexChange:{type:Function}};var P=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(t){return k({},t)},render(){const{name:t,size:d,color:i,classPrefix:g}=this;return/^((https?):)?\/\//.test(t)?e.createVNode("img",{src:t,alt:t.split("/")[t.split("/").length-1],style:{width:d,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${g} ${g}-${t}`,style:{fontSize:d,color:i}},null)}}),O="",w=e.defineComponent({name:"DCarousel",props:s,emits:["update:activeIndex"],setup(t,{emit:d}){const{arrowTrigger:i,autoplay:g,autoplaySpeed:T,dotTrigger:b,activeIndex:V,activeIndexChange:S}=t,I=500,o=e.ref(0),y=e.ref(!1),u=e.ref(0),f=e.ref(null),r=e.ref(null),c=e.ref(null);e.watch(()=>i,()=>{y.value=i==="always"},{immediate:!0}),e.watch(()=>V,()=>{u.value=V},{immediate:!0});const m=a=>{r.value&&(r.value.style.left=`${-a*100}%`)},N=a=>{setTimeout(()=>{r.value&&(r.value.style.transition=""),a.style.transform="",m(u.value)},I)},v=(a,l)=>{if(f.value){const h=f.value.getBoundingClientRect();a.style.transform=`translateX(${(l?-o.value:o.value)*h.width}px)`}},p=a=>{if(a===u.value||!f.value||!r.value)return;r.value.style.transition=`left ${I}ms ease`;let l=u.value;if(a<0&&u.value===0){l=o.value-1;const h=r.value.children[l];v(h,!0),m(-1),N(h)}else if(a>=o.value&&u.value===o.value-1){l=0;const h=r.value.children[l];v(h,!1),m(o.value),N(h)}else l=a<0?0:a>o.value-1?o.value-1:a,m(l);u.value=l,d("update:activeIndex",l),S==null||S(l),M()},E=()=>{p(u.value-1)},x=()=>{p(u.value+1)},j=a=>{i==="hover"&&(y.value=a==="enter")},B=(a,l)=>{l===b&&p(a)},D=()=>{c.value&&(clearTimeout(c.value),c.value=null)},M=()=>{D(),g&&T&&(c.value=setTimeout(()=>{x()},T))},z=a=>{o.value=a,M()};return e.onMounted(()=>{r.value&&(r.value.style.transition=`left ${I}ms ease`,r.value.style.left="0%"),M()}),e.onBeforeUnmount(()=>{D()}),{wrapperRef:f,containerRef:r,showArrow:y,currentIndex:u,itemCount:o,changeItemCount:z,goto:p,prev:E,next:x,arrowMouseEvent:j,switchStep:B}},render(){var m,N;const{showArrow:t,currentIndex:d,itemCount:i,arrowTrigger:g,height:T,showDots:b,dotPosition:V,prev:S,next:I,arrowMouseEvent:o,switchStep:y,changeItemCount:u,$slots:f}=this,r=(N=(m=f.default)==null?void 0:m.call(f))!=null?N:[];let c=r;return c.length===1&&c[0].type===e.Fragment&&(c=(c[0].children||[]).filter(v=>(v==null?void 0:v.type)!==e.Comment)),c.length!==i&&u(c.length),e.createVNode("div",{class:"devui-carousel-container",style:{height:T},onMouseenter:()=>o("enter"),onMouseleave:()=>o("leave")},[g!=="never"&&t?e.createVNode("div",{class:"devui-carousel-arrow"},[e.createVNode("button",{class:"arrow-left",onClick:()=>S()},[e.createVNode(P,{name:"arrow-left"},null)]),e.createVNode("button",{class:"arrow-right",onClick:()=>I()},[e.createVNode(P,{name:"arrow-right"},null)])]):null,e.createVNode("div",{class:"devui-carousel-item-wrapper",ref:"wrapperRef"},[e.createVNode("div",{class:"devui-carousel-item-container",style:{width:`${i*100}%`},ref:"containerRef"},[r])]),i>0&&b?e.createVNode("ul",{class:["devui-carousel-dots",V]},[c.map((v,p)=>e.createVNode("li",{class:{"dot-item":!0,active:d===p},onClick:()=>y(p,"click"),onMouseenter:()=>y(p,"hover")},null))]):null])}}),C=e.defineComponent({name:"DCarouselItem",render(){var i;const{$slots:t}=this,d=(i=t.default)==null?void 0:i.call(t);return e.createVNode("div",{class:"d-carousel-item "},[d])}});w.install=function(t){t.component(w.name,w)},C.install=function(t){t.component(C.name,C)};var A={title:"Carousel \u8D70\u9A6C\u706F",category:"\u6570\u636E\u5C55\u793A",status:"80%",install(t){t.use(w),t.use(C)}};n.Carousel=w,n.CarouselItem=C,n.default=A,Object.defineProperty(n,"__esModule",{value:!0}),n[Symbol.toStringTag]="Module"});
+(function(c,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis!="undefined"?globalThis:c||self,e(c.index={},c.Vue))})(this,function(c,e){"use strict";const R={arrowTrigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!1},autoplaySpeed:{type:Number,default:3e3},height:{type:String,default:"100%"},showDots:{type:Boolean,default:!0},dotTrigger:{type:String,default:"click"},dotPosition:{type:String,default:"bottom"},activeIndex:{type:Number,default:0},activeIndexChange:{type:Function}},D={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var b=e.defineComponent({name:"DIcon",props:D,setup(a){const{name:i,size:n,color:C,classPrefix:p}=e.toRefs(a);return()=>/^((https?):)?\/\//.test(i.value)?e.createVNode("img",{src:i.value,alt:i.value.split("/")[i.value.split("/").length-1],style:{width:n.value,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${p.value} ${p.value}-${i.value}`,style:{fontSize:n.value,color:C.value}},null)}}),B="",y=e.defineComponent({name:"DCarousel",props:R,emits:["update:activeIndex"],setup(a,{emit:i}){const{arrowTrigger:n,autoplay:C,autoplaySpeed:p,dotTrigger:V,activeIndex:T,activeIndexChange:S}=a,I=500,o=e.ref(0),g=e.ref(!1),s=e.ref(0),d=e.ref(null),l=e.ref(null),u=e.ref(null);e.watch(()=>n,()=>{g.value=n==="always"},{immediate:!0}),e.watch(()=>T,()=>{s.value=T},{immediate:!0});const v=t=>{l.value&&(l.value.style.left=`${-t*100}%`)},N=t=>{setTimeout(()=>{l.value&&(l.value.style.transition=""),t.style.transform="",v(s.value)},I)},m=(t,r)=>{if(d.value){const h=d.value.getBoundingClientRect();t.style.transform=`translateX(${(r?-o.value:o.value)*h.width}px)`}},f=t=>{if(t===s.value||!d.value||!l.value)return;l.value.style.transition=`left ${I}ms ease`;let r=s.value;if(t<0&&s.value===0){r=o.value-1;const h=l.value.children[r];m(h,!0),v(-1),N(h)}else if(t>=o.value&&s.value===o.value-1){r=0;const h=l.value.children[r];m(h,!1),v(o.value),N(h)}else r=t<0?0:t>o.value-1?o.value-1:t,v(r);s.value=r,i("update:activeIndex",r),S==null||S(r),P()},k=()=>{f(s.value-1)},M=()=>{f(s.value+1)},A=t=>{n==="hover"&&(g.value=t==="enter")},E=(t,r)=>{r===V&&f(t)},x=()=>{u.value&&(clearTimeout(u.value),u.value=null)},P=()=>{x(),C&&p&&(u.value=setTimeout(()=>{M()},p))},j=t=>{o.value=t,P()};return e.onMounted(()=>{l.value&&(l.value.style.transition=`left ${I}ms ease`,l.value.style.left="0%"),P()}),e.onBeforeUnmount(()=>{x()}),{wrapperRef:d,containerRef:l,showArrow:g,currentIndex:s,itemCount:o,changeItemCount:j,goto:f,prev:k,next:M,arrowMouseEvent:A,switchStep:E}},render(){var v,N;const{showArrow:a,currentIndex:i,itemCount:n,arrowTrigger:C,height:p,showDots:V,dotPosition:T,prev:S,next:I,arrowMouseEvent:o,switchStep:g,changeItemCount:s,$slots:d}=this,l=(N=(v=d.default)==null?void 0:v.call(d))!=null?N:[];let u=l;return u.length===1&&u[0].type===e.Fragment&&(u=(u[0].children||[]).filter(m=>(m==null?void 0:m.type)!==e.Comment)),u.length!==n&&s(u.length),e.createVNode("div",{class:"devui-carousel-container",style:{height:p},onMouseenter:()=>o("enter"),onMouseleave:()=>o("leave")},[C!=="never"&&a?e.createVNode("div",{class:"devui-carousel-arrow"},[e.createVNode("button",{class:"arrow-left",onClick:()=>S()},[e.createVNode(b,{name:"arrow-left"},null)]),e.createVNode("button",{class:"arrow-right",onClick:()=>I()},[e.createVNode(b,{name:"arrow-right"},null)])]):null,e.createVNode("div",{class:"devui-carousel-item-wrapper",ref:"wrapperRef"},[e.createVNode("div",{class:"devui-carousel-item-container",style:{width:`${n*100}%`},ref:"containerRef"},[l])]),n>0&&V?e.createVNode("ul",{class:["devui-carousel-dots",T]},[u.map((m,f)=>e.createVNode("li",{class:{"dot-item":!0,active:i===f},onClick:()=>g(f,"click"),onMouseenter:()=>g(f,"hover")},null))]):null])}}),w=e.defineComponent({name:"DCarouselItem",render(){var n;const{$slots:a}=this,i=(n=a.default)==null?void 0:n.call(a);return e.createVNode("div",{class:"d-carousel-item "},[i])}});y.install=function(a){a.component(y.name,y)},w.install=function(a){a.component(w.name,w)};var $={title:"Carousel \u8D70\u9A6C\u706F",category:"\u6570\u636E\u5C55\u793A",status:"80%",install(a){a.use(y),a.use(w)}};c.Carousel=y,c.CarouselItem=w,c.default=$,Object.defineProperty(c,"__esModule",{value:!0}),c[Symbol.toStringTag]="Module"});

package/cascader/index.es.js

@@ -5579,8 +5579,9 @@ const updateCheckOptionStatus = (tagList) => {
     var _a;
     if (((_a = node == null ? void 0 : node.children) == null ? void 0 : _a.length) > 0) {
       node.children.forEach((item) => {
-        if (item.disabled)
+        if (item.disabled) {
           return;
+        }
         if (type === "checked") {
           item[type] = status;
           item["halfChecked"] = false;
@@ -5616,8 +5617,9 @@ const findChildrenCheckedStatusToUpdateParent = (node) => {
   }
 };
 const updateParentNodeStatus = (node, options, ulIndex) => {
-  if (ulIndex < 0)
+  if (ulIndex < 0) {
     return;
+  }
   findChildrenCheckedStatusToUpdateParent(node);
   ulIndex -= 1;
   const parentNode = node == null ? void 0 : node.parent;
@@ -5671,8 +5673,9 @@ const DCascaderItem = (props) => {
   } = updateCheckOptionStatus(tagList);
   const disbaled = computed(() => cascaderItem == null ? void 0 : cascaderItem.disabled);
   const updateValues = () => {
-    if (stopDefault.value)
+    if (stopDefault.value) {
       return;
+    }
     activeIndexs.splice(ulIndex, activeIndexs.length - ulIndex);
     activeIndexs[ulIndex] = liIndex;
     if (!multiple) {
@@ -5680,8 +5683,9 @@ const DCascaderItem = (props) => {
     }
   };
   const mouseEnter = () => {
-    if (disbaled.value || multiple)
+    if (disbaled.value || multiple) {
       return;
+    }
     updateValues();
   };
   const mouseenter = {
@@ -5689,8 +5693,9 @@ const DCascaderItem = (props) => {
   };
   const mouseClick = () => {
     var _a2;
-    if (disbaled.value)
+    if (disbaled.value) {
       return;
+    }
     updateValues();
     if (!multiple && (!cascaderItem.children || ((_a2 = cascaderItem == null ? void 0 : cascaderItem.children) == null ? void 0 : _a2.length) === 0)) {
       confirmInputValueFlg.value = !confirmInputValueFlg.value;
@@ -5805,8 +5810,9 @@ const popupHandles = (props) => {
     stopDefault.value = !menuShow.value;
   };
   const openPopup = () => {
-    if (disabled.value)
+    if (disabled.value) {
       return;
+    }
     menuShow.value = !menuShow.value;
     updateStopDefaultType();
   };
@@ -5858,8 +5864,9 @@ var Cascader = defineComponent({
       }
     };
     const updateCascaderView = (value, currentOption, index2) => {
-      if (index2 === value.length)
+      if (index2 === value.length) {
         return;
+      }
       const i = value[index2];
       const current = currentOption[i];
       const children = current == null ? void 0 : current.children;
@@ -5872,8 +5879,9 @@ var Cascader = defineComponent({
     };
     const updateCascaderValue = (value, currentOption, index2) => {
       if (!multiple.value) {
-        if (index2 === value.length)
+        if (index2 === value.length) {
           return;
+        }
         const i = value[index2];
         const current = getCurrentOption(currentOption, i);
         const children = current == null ? void 0 : current.children;

package/cascader/style.css

@@ -1 +1 @@
-.devui-cascader-li.devui-dropdown-item{height:32px;padding:8px 12px;color:var(--devui-text, #252b3a);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.devui-cascader-li .cascader-li__wraper{flex:1;display:flex;justify-content:flex-start;align-items:center}.devui-cascader-li .dropdown-item-label{display:inline-block;flex:1;width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--devui-font-size, 12px)}.devui-cascader-li.devui-leaf-active{background:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-cascader-li.devui-leaf-active span{color:var(--devui-brand-active, #526ecc)}.devui-cascader-li.disabled{background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-cascader-li .cascader-li__checkbox{margin-right:4px}.devui-cascader-li .cascader-li__icon{margin-right:4px;font-size:var(--devui-font-size-icon, 16px);color:var(--devui-text, #252b3a)}.devui-cascader-li .cascader-li__icon.disabled{color:var(--devui-disabled-text, #adb0b8)!important}.devui-cascader-ul{height:180px;background:var(--devui-connected-overlay-bg, #ffffff);display:block;list-style:none;margin:0;padding:0;overflow-y:auto;border-left:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-cascader-ul.devui-drop-no-data{color:var(--devui-disabled-text, #adb0b8);padding:8px;display:block;height:36px;line-height:36px;overflow-y:hidden;background-color:var(--devui-disabled-bg, #f5f5f6);font-size:var(--devui-font-size, 12px);display:flex;justify-content:center;align-items:flex-start;flex-direction:column}.devui-tag{margin:2px 4px 2px 0;display:inline-block;position:relative;display:flex;align-items:center;padding:0 8px;background-color:var(--devui-label-bg, #eef0f5);border-radius:var(--devui-border-radius, 2px);border-color:inherit;border:0 solid}.devui-tag span{min-height:20px;line-height:20px;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);position:relative;cursor:default}.devui-tag__close{margin-left:12px;font-size:var(--devui-font-size, 12px);cursor:pointer;color:#fff;width:14px;height:14px;line-height:14px;background-color:var(--devui-line, #adb0b8);border-radius:50%;display:inline-block;text-align:center}.devui-tag__close:hover{background-color:var(--devui-brand, #5e7ce0)}.devui-tags-input{flex:1;padding:1px 20px 1px 4px;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);outline:none;background-color:var(--devui-base-bg, #ffffff);transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-tags-box{width:100%;overflow:auto;min-height:28px;max-height:56px;display:flex;align-items:center;flex-wrap:wrap}.devui-tags-placeholder{font-size:var(--devui-font-size, 12px);line-height:22px;margin-left:6px;color:var(--devui-placeholder, #8a8e99)}.devui-cascader{display:flex;justify-content:flex-start;align-items:center;position:relative}.devui-cascader>div:nth-child(1){width:100%}.devui-cascader__icon{position:absolute;right:5px;top:0;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.devui-cascader__icon .icon{margin:0}.devui-cascader__disbaled .icon{color:var(--devui-disabled-text, #adb0b8)!important}.devui-cascader input{width:100%;padding-right:16px}.devui-cascader .devui-drop-menu-wrapper{display:block;margin:4px 0;font-size:0;white-space:nowrap;padding:0}.devui-drop-icon-animation{transition:transform .2s linear}.devui-drop-menu-animation{transition:opacity .2s ease-in-out,transform .2s ease-in-out;z-index:1000;margin-top:1px}.devui-drop-menu-animation .devui-dropdown-menu{width:auto;padding-bottom:0;display:flex;justify-content:"flex-start";align-items:center}.devui-dropdown__open .devui-cascader__icon{transform:rotate(180deg)}.devui-dropdown__open .devui-drop-menu-animation{transform-origin:0 0%;transform:scaleY(.9999) translateY(0);opacity:1}
+.devui-cascader-li.devui-dropdown-item{height:32px;padding:8px 12px;color:var(--devui-text, #252b3a);cursor:pointer;display:flex;justify-content:flex-start;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.devui-cascader-li .cascader-li__wraper{flex:1;display:flex;justify-content:flex-start;align-items:center}.devui-cascader-li .dropdown-item-label{display:inline-block;flex:1;width:0;overflow:hidden;text-overflow:ellipsis;font-size:var(--devui-font-size, 12px)}.devui-cascader-li.devui-leaf-active{background:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-cascader-li.devui-leaf-active span{color:var(--devui-brand-active, #526ecc)}.devui-cascader-li.disabled{background-color:var(--devui-disabled-bg, #f5f5f6);cursor:not-allowed}.devui-cascader-li .cascader-li__checkbox{margin-right:4px}.devui-cascader-li .cascader-li__icon{margin-right:4px;font-size:var(--devui-font-size-icon, 16px);color:var(--devui-text, #252b3a)}.devui-cascader-li .cascader-li__icon.disabled{color:var(--devui-disabled-text, #adb0b8)!important}.devui-cascader-ul{height:180px;background:var(--devui-connected-overlay-bg, #ffffff);display:block;list-style:none;margin:0;padding:0;overflow-y:auto;border-left:1px solid var(--devui-dividing-line, #dfe1e6)}.devui-cascader-ul.devui-drop-no-data{color:var(--devui-disabled-text, #adb0b8);padding:8px;display:block;height:36px;line-height:36px;overflow-y:hidden;background-color:var(--devui-disabled-bg, #f5f5f6);font-size:var(--devui-font-size, 12px);display:flex;justify-content:center;align-items:flex-start;flex-direction:column}.devui-tag{margin:2px 4px 2px 0;display:inline-block;position:relative;align-items:center;padding:0 8px;background-color:var(--devui-label-bg, #eef0f5);border-radius:var(--devui-border-radius, 2px);border-color:inherit;border:0 solid}.devui-tag span{min-height:20px;line-height:20px;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a);position:relative;cursor:default}.devui-tag__close{margin-left:12px;font-size:var(--devui-font-size, 12px);cursor:pointer;color:#fff;width:14px;height:14px;line-height:14px;background-color:var(--devui-line, #adb0b8);border-radius:50%;display:inline-block;text-align:center}.devui-tag__close:hover{background-color:var(--devui-brand, #5e7ce0)}.devui-tags-input{flex:1;padding:1px 20px 1px 4px;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);outline:none;background-color:var(--devui-base-bg, #ffffff);transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-tags-box{width:100%;overflow:auto;min-height:28px;max-height:56px;display:flex;align-items:center;flex-wrap:wrap}.devui-tags-placeholder{font-size:var(--devui-font-size, 12px);line-height:22px;margin-left:6px;color:var(--devui-placeholder, #8a8e99)}.devui-cascader{display:flex;justify-content:flex-start;align-items:center;position:relative}.devui-cascader>div:nth-child(1){width:100%}.devui-cascader__icon{position:absolute;right:5px;top:0;height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column}.devui-cascader__icon .icon{margin:0}.devui-cascader__disbaled .icon{color:var(--devui-disabled-text, #adb0b8)!important}.devui-cascader input{width:100%;padding-right:16px}.devui-cascader .devui-drop-menu-wrapper{display:block;margin:4px 0;font-size:0;white-space:nowrap;padding:0}.devui-drop-icon-animation{transition:transform .2s linear}.devui-drop-menu-animation{transition:opacity .2s ease-in-out,transform .2s ease-in-out;z-index:1000;margin-top:1px}.devui-drop-menu-animation .devui-dropdown-menu{width:auto;padding-bottom:0;display:flex;justify-content:"flex-start";align-items:center}.devui-dropdown__open .devui-cascader__icon{transform:rotate(180deg)}.devui-dropdown__open .devui-drop-menu-animation{transform-origin:0 0%;transform:scaleY(.9999) translateY(0);opacity:1}

package/color-picker/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { ref, watch, defineComponent, reactive, provide, onUpdated, onBeforeMount, onMounted, createVNode, inject, getCurrentInstance, computed, nextTick, resolveComponent, readonly, unref, Teleport, Transition } from "vue";
+import { ref, watch, defineComponent, reactive, provide, onUpdated, onBeforeMount, onMounted, createVNode, inject, getCurrentInstance, computed, toRefs, nextTick, resolveComponent, readonly, unref, Teleport, Transition } from "vue";
 function colorPickerResize(colorCubeRef, top, left) {
   var _a;
   const rect = (_a = colorCubeRef.value) == null ? void 0 : _a.getBoundingClientRect();
@@ -317,8 +317,9 @@ class DOMUtils {
     };
     const downFn = (event) => {
       var _a;
-      if (isDragging)
+      if (isDragging) {
         return;
+      }
       document.onselectstart = () => false;
       document.ondragstart = () => false;
       DOMUtils.addEventListener(document, "mousemove", moveFn);
@@ -439,16 +440,16 @@ class DOMUtils {
     if (event.clientX > originX && event.clientY > originY) {
       angle = 180 - angle;
     }
-    if (event.clientX == originX && event.clientY > originY) {
+    if (event.clientX === originX && event.clientY > originY) {
       angle = 180;
     }
-    if (event.clientX > originX && event.clientY == originY) {
+    if (event.clientX > originX && event.clientY === originY) {
       angle = 90;
     }
     if (event.clientX < originX && event.clientY > originY) {
       angle = 180 + angle;
     }
-    if (event.clientX < originX && event.clientY == originY) {
+    if (event.clientX < originX && event.clientY === originY) {
       angle = 270;
     }
     if (event.clientX < originX && event.clientY < originY) {
@@ -495,8 +496,9 @@ function HSVAtoRGBA(hsva) {
   return { r: rgb[0], g: rgb[1], b: rgb[2], a };
 }
 function RGBAtoHSVA(rgba) {
-  if (!rgba)
+  if (!rgba) {
     return { h: 0, s: 1, v: 1, a: 1 };
+  }
   const r = rgba.r / 255;
   const g = rgba.g / 255;
   const b = rgba.b / 255;
@@ -512,8 +514,9 @@ function RGBAtoHSVA(rgba) {
       h = 60 * (4 + (r - g) / (max - min));
     }
   }
-  if (h < 0)
+  if (h < 0) {
     h = h + 360;
+  }
   const s = max === 0 ? 0 : (max - min) / max;
   const hsv = [h, s, max];
   return { h: Math.round(hsv[0]), s: hsv[1], v: hsv[2], a: rgba.a };
@@ -639,8 +642,9 @@ function fromHex(hex2) {
   return fromHexa(parseHex(hex2));
 }
 function parseColor(color2, oldColor) {
-  if (!color2)
+  if (!color2) {
     return fromRGBA({ r: 0, g: 0, b: 0, a: 1 });
+  }
   if (typeof color2 === "string") {
     if (color2.indexOf("#") !== -1)
       ;
@@ -672,8 +676,9 @@ function parseColor(color2, oldColor) {
       }
       return fromHSVA({ h: parts[0], s: parts[1], v: parts[2], a: alpha });
     }
-    if (color2 === "transparent")
+    if (color2 === "transparent") {
       return fromHexa("#00000000");
+    }
     const hex2 = parseHex(color2);
     if (oldColor && hex2 === oldColor.hexa) {
       return oldColor;
@@ -682,24 +687,28 @@ function parseColor(color2, oldColor) {
     }
   }
   if (typeof color2 === "object") {
-    if (color2.hasOwnProperty("alpha"))
+    if (color2.hasOwnProperty("alpha")) {
       return color2;
+    }
     const a = color2.hasOwnProperty("a") ? parseFloat(color2.a) : 1;
     if (has(color2, ["r", "g", "b"])) {
-      if (oldColor && color2 === oldColor.rgba)
+      if (oldColor && color2 === oldColor.rgba) {
         return oldColor;
-      else
+      } else {
         return fromRGBA(__spreadProps(__spreadValues({}, color2), { a }));
+      }
     } else if (has(color2, ["h", "s", "l"])) {
-      if (oldColor && color2 === oldColor.hsla)
+      if (oldColor && color2 === oldColor.hsla) {
         return oldColor;
-      else
+      } else {
         return fromHSLA(__spreadProps(__spreadValues({}, color2), { a }));
+      }
     } else if (has(color2, ["h", "s", "v"])) {
-      if (oldColor && color2 === oldColor.hsva)
+      if (oldColor && color2 === oldColor.hsva) {
         return oldColor;
-      else
+      } else {
         return fromHSVA(__spreadProps(__spreadValues({}, color2), { a }));
+      }
     }
   }
   return fromRGBA({ r: 255, g: 0, b: 0, a: 1 });
@@ -720,8 +729,9 @@ function extractColor(color2, input, mode, showAlpha) {
   const blue = keepDecimal(color2.rgba.b);
   const hsvSaturation = keepDecimal(color2.hsva.s, 2);
   const value = keepDecimal(color2.hsva.v, 2);
-  if (input == null)
+  if (input == null) {
     return color2;
+  }
   function isShowAlpha(mode2) {
     return showAlpha ? mode2 + "a" : mode2;
   }
@@ -739,12 +749,13 @@ function extractColor(color2, input, mode, showAlpha) {
   }
   if (typeof input === "object") {
     const shouldStrip = typeof input.a === "number" && input.a === 0 ? !!input.a : !input.a;
-    if (has(input, ["r", "g", "b"]))
+    if (has(input, ["r", "g", "b"])) {
       return stripAlpha(color2.rgba, shouldStrip);
-    else if (has(input, ["h", "s", "l"]))
+    } else if (has(input, ["h", "s", "l"])) {
       return stripAlpha(color2.hsla, shouldStrip);
-    else if (has(input, ["h", "s", "v"]))
+    } else if (has(input, ["h", "s", "v"])) {
       return stripAlpha(color2.hsva, shouldStrip);
+    }
   }
 }
 const colorPickerPaletteProps = {
@@ -803,20 +814,6 @@ var colorPalette = defineComponent({
       canvas.fillStyle = valueGradient;
       canvas.fillRect(0, 0, parentWidth, props.height);
     }
-    function clickPalette(event) {
-      const target = event.target;
-      if (target !== paletteElement.value) {
-        handleDrag(event);
-      }
-    }
-    function updatePosition() {
-      var _a, _b;
-      if (paletteInstance) {
-        const parentWidth = paletteElement.value.offsetWidth;
-        cursorLeft.value = Number((_a = props.modelValue) == null ? void 0 : _a.hsva.s) * parentWidth;
-        cursorTop.value = (1 - Number((_b = props.modelValue) == null ? void 0 : _b.hsva.v)) * props.height;
-      }
-    }
     function handleDrag(event) {
       const parentWidth = paletteElement.value.offsetWidth;
       if (paletteInstance) {
@@ -844,6 +841,20 @@ var colorPalette = defineComponent({
         ctx.emit("changeTextColor", isChangeTextColor.value);
       }
     }
+    function clickPalette(event) {
+      const target = event.target;
+      if (target !== paletteElement.value) {
+        handleDrag(event);
+      }
+    }
+    function updatePosition() {
+      var _a, _b;
+      if (paletteInstance) {
+        const parentWidth = paletteElement.value.offsetWidth;
+        cursorLeft.value = Number((_a = props.modelValue) == null ? void 0 : _a.hsva.s) * parentWidth;
+        cursorTop.value = (1 - Number((_b = props.modelValue) == null ? void 0 : _b.hsva.v)) * props.height;
+      }
+    }
     onMounted(() => {
       renderCanvas();
       if (paletteInstance && paletteInstance.vnode.el && handlerElement.value) {
@@ -929,12 +940,6 @@ var colorHueSlider = defineComponent({
         top: 0
       }, clickTransfrom.value);
     });
-    const onClickSider = (event) => {
-      const target = event.target;
-      if (target !== barElement.value) {
-        onMoveBar(event);
-      }
-    };
     const onMoveBar = (event) => {
       event.stopPropagation();
       if (barElement.value && cursorElement.value) {
@@ -952,6 +957,12 @@ var colorHueSlider = defineComponent({
         }));
       }
     };
+    const onClickSider = (event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event);
+      }
+    };
     onMounted(() => {
       const dragConfig = {
         drag: (event) => {
@@ -1016,12 +1027,6 @@ var colorAlphaSlider = defineComponent({
     const clickTransfrom = ref(DEFAULT_TRANSITION);
     const barElement = ref(null);
     const cursorElement = ref(null);
-    const onClickSider = (event) => {
-      const target = event.target;
-      if (target !== barElement.value) {
-        onMoveBar(event);
-      }
-    };
     const onMoveBar = (event) => {
       event.stopPropagation();
       if (barElement.value && cursorElement.value) {
@@ -1036,6 +1041,12 @@ var colorAlphaSlider = defineComponent({
         })));
       }
     };
+    const onClickSider = (event) => {
+      const target = event.target;
+      if (target !== barElement.value) {
+        onMoveBar(event);
+      }
+    };
     const getBackgroundStyle = computed(() => {
       return {
         background: `linear-gradient(to right, transparent , ${RGBtoCSS(props.modelValue.rgba)})`
@@ -2444,55 +2455,53 @@ const colorPickerHistoryProps = {
     type: Object
   }
 };
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: String,
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  classPrefix: {
+    type: String,
+    default: "icon"
+  }
+};
 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: color2,
       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: color2
-      }
-    }, 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: color2.value
+        }
+      }, null);
+    };
   }
 });
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
 var colorHistory$1 = "";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };