vue-devui 1.6.4 → 1.6.6

package/carousel/index.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment } from "vue";
+import { createVNode, defineComponent, toRefs, ref, watch, onMounted, onBeforeUnmount, Fragment, Comment } from "vue";
 import "clipboard";
 const carouselProps = {
   arrowTrigger: {
@@ -38,214 +38,41 @@ const carouselProps = {
     default: 500
   }
 };
-const DEFAULT_PREFIX = "icon";
-const iconProps = {
-  name: {
-    type: String,
-    default: "",
-    required: true
-  },
-  size: {
-    type: [Number, String],
-    default: "inherit"
-  },
-  color: {
-    type: String,
-    default: "inherit"
-  },
-  component: {
-    type: Object,
-    default: null
-  },
-  classPrefix: {
-    type: String,
-    default: DEFAULT_PREFIX
-  },
-  operable: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  rotate: {
-    type: [Number, String]
-  }
-};
-const svgIconProps = {
-  name: {
-    type: String,
-    default: "",
-    required: true
-  },
-  color: {
-    type: String,
-    default: "inherit"
-  },
-  size: {
-    type: [Number, String],
-    default: "inherit"
-  }
-};
-function createBem$1(namespace, element, modifier) {
-  let cls = namespace;
-  if (element) {
-    cls += `__${element}`;
-  }
-  if (modifier) {
-    cls += `--${modifier}`;
-  }
-  return cls;
-}
-function useNamespace$1(block, needDot = false) {
-  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
-  const b = () => createBem$1(namespace);
-  const e = (element) => element ? createBem$1(namespace, element) : "";
-  const m = (modifier) => modifier ? createBem$1(namespace, "", modifier) : "";
-  const em = (element, modifier) => element && modifier ? createBem$1(namespace, element, modifier) : "";
-  return {
-    b,
-    e,
-    m,
-    em
-  };
+function CarouselArrowLeft() {
+  return createVNode("svg", {
+    "width": "18px",
+    "height": "18px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("polygon", {
+    "fill": "#293040",
+    "fill-rule": "nonzero",
+    "points": "10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"
+  }, null)])]);
 }
-var icon = "";
-var svgIcon = defineComponent({
-  name: "DSvgIcon",
-  props: svgIconProps,
-  setup(props) {
-    const {
-      name,
-      color,
-      size
-    } = toRefs(props);
-    const ns = useNamespace$1("svg-icon");
-    const iconName = computed(() => `#icon-${name.value}`);
-    const iconSize = computed(() => {
-      return typeof size.value === "number" ? `${size.value}px` : size.value;
-    });
-    const styles = {
-      width: iconSize.value,
-      height: iconSize.value
-    };
-    return () => {
-      return createVNode("svg", {
-        "class": ns.b(),
-        "style": styles
-      }, [createVNode("use", {
-        "xlink:href": iconName.value,
-        "fill": color.value
-      }, null)]);
-    };
-  }
-});
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
+function CarouselArrowRight() {
+  return createVNode("svg", {
+    "width": "18px",
+    "height": "18px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("polygon", {
+    "fill": "#293040",
+    "fill-rule": "nonzero",
+    "transform": "translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",
+    "points": "11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
+  }, null)])]);
 }
-function useIconDom(props, ctx) {
-  const {
-    component,
-    name,
-    size,
-    color,
-    classPrefix,
-    rotate
-  } = toRefs(props);
-  const ns = useNamespace$1("icon");
-  const iconSize = computed(() => {
-    return typeof size.value === "number" ? `${size.value}px` : size.value;
-  });
-  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
-  const imgIconDom = () => {
-    return createVNode("img", mergeProps({
-      "src": name.value,
-      "alt": name.value.split("/")[name.value.split("/").length - 1],
-      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
-      "style": {
-        width: iconSize.value || "",
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
-        verticalAlign: "middle"
-      }
-    }, ctx.attrs), null);
-  };
-  const svgIconDom = () => {
-    return createVNode(IconComponent, mergeProps({
-      "name": name.value,
-      "color": color.value,
-      "size": iconSize.value,
-      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
-      "style": {
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx.attrs), null);
-  };
-  const fontIconDom = () => {
-    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
-    return createVNode("i", mergeProps({
-      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
-      "style": {
-        fontSize: iconSize.value,
-        color: color.value,
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx.attrs), null);
-  };
-  const iconDom = () => {
-    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
-  };
-  return {
-    iconDom
-  };
-}
-var Icon = defineComponent({
-  name: "DIcon",
-  props: iconProps,
-  emits: ["click"],
-  setup(props, ctx) {
-    const {
-      disabled,
-      operable
-    } = toRefs(props);
-    const {
-      iconDom
-    } = useIconDom(props, ctx);
-    const ns = useNamespace$1("icon");
-    const wrapClassed = computed(() => ({
-      [ns.e("container")]: true,
-      [ns.m("disabled")]: disabled.value,
-      [ns.m("operable")]: operable.value,
-      [ns.m("no-slots")]: !Object.keys(ctx.slots).length
-    }));
-    const onClick = (e) => {
-      if (disabled.value) {
-        return;
-      }
-      ctx.emit("click", e);
-    };
-    return () => {
-      var _a, _b, _c, _d;
-      return createVNode("div", {
-        "class": wrapClassed.value,
-        "onClick": onClick
-      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
-    };
-  }
-});
-var iconGroup = "";
-defineComponent({
-  name: "DIconGroup",
-  setup(_, ctx) {
-    const ns = useNamespace$1("icon-group");
-    return () => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": ns.b()
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]);
-    };
-  }
-});
 function createBem(namespace, element, modifier) {
   let cls = namespace;
   if (element) {
@@ -428,14 +255,10 @@ var Carousel = defineComponent({
       }, [createVNode("button", {
         "class": "arrow-left",
         "onClick": () => prev()
-      }, [createVNode(Icon, {
-        "name": "arrow-left"
-      }, null)]), createVNode("button", {
+      }, [createVNode(CarouselArrowLeft, null, null)]), createVNode("button", {
         "class": "arrow-right",
         "onClick": () => next()
-      }, [createVNode(Icon, {
-        "name": "arrow-right"
-      }, null)])]) : null, createVNode("div", {
+      }, [createVNode(CarouselArrowRight, null, null)])]) : null, createVNode("div", {
         "class": ns.e("item-wrapper"),
         "ref": wrapperRef
       }, [createVNode("div", {

package/carousel/index.umd.js

@@ -1 +1 @@
-(function(m,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("clipboard")):typeof define=="function"&&define.amd?define(["exports","vue","clipboard"],e):(m=typeof globalThis!="undefined"?globalThis:m||self,e(m.index={},m.Vue))})(this,function(m,e){"use strict";const G={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},transitionSpeed:{type:Number,default:500}},L={name:{type:String,default:"",required:!0},size:{type:[Number,String],default:"inherit"},color:{type:String,default:"inherit"},component:{type:Object,default:null},classPrefix:{type:String,default:"icon"},operable:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},rotate:{type:[Number,String]}},H={name:{type:String,default:"",required:!0},color:{type:String,default:"inherit"},size:{type:[Number,String],default:"inherit"}};function b(l,o,n){let a=l;return o&&(a+=`__${o}`),n&&(a+=`--${n}`),a}function w(l,o=!1){const n=o?`.devui-${l}`:`devui-${l}`;return{b:()=>b(n),e:t=>t?b(n,t):"",m:t=>t?b(n,"",t):"",em:(t,i)=>t&&i?b(n,t,i):""}}var ee="",J=e.defineComponent({name:"DSvgIcon",props:H,setup(l){const{name:o,color:n,size:a}=e.toRefs(l),r=w("svg-icon"),c=e.computed(()=>`#icon-${o.value}`),p=e.computed(()=>typeof a.value=="number"?`${a.value}px`:a.value),t={width:p.value,height:p.value};return()=>e.createVNode("svg",{class:r.b(),style:t},[e.createVNode("use",{"xlink:href":c.value,fill:n.value},null)])}});function K(l){return/^((http|https):)?\/\//.test(l)}function Q(l,o){const{component:n,name:a,size:r,color:c,classPrefix:p,rotate:t}=e.toRefs(l),i=w("icon"),y=e.computed(()=>typeof r.value=="number"?`${r.value}px`:r.value),h=n.value?e.resolveDynamicComponent(n.value):e.resolveDynamicComponent(J),C=()=>e.createVNode("img",e.mergeProps({src:a.value,alt:a.value.split("/")[a.value.split("/").length-1],class:[(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{width:y.value||"",transform:`rotate(${t==null?void 0:t.value}deg)`,verticalAlign:"middle"}},o.attrs),null),D=()=>e.createVNode(h,e.mergeProps({name:a.value,color:c.value,size:y.value,class:[(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{transform:`rotate(${t==null?void 0:t.value}deg)`}},o.attrs),null),I=()=>{const N=/^icon-/.test(a.value)?a.value:`${p.value}-${a.value}`;return e.createVNode("i",e.mergeProps({class:[p.value,N,(t==null?void 0:t.value)==="infinite"&&i.m("spin")],style:{fontSize:y.value,color:c.value,transform:`rotate(${t==null?void 0:t.value}deg)`}},o.attrs),null)};return{iconDom:()=>n.value?D():K(a.value)?C():I()}}var j=e.defineComponent({name:"DIcon",props:L,emits:["click"],setup(l,o){const{disabled:n,operable:a}=e.toRefs(l),{iconDom:r}=Q(l,o),c=w("icon"),p=e.computed(()=>({[c.e("container")]:!0,[c.m("disabled")]:n.value,[c.m("operable")]:a.value,[c.m("no-slots")]:!Object.keys(o.slots).length})),t=i=>{n.value||o.emit("click",i)};return()=>{var i,y,h,C;return e.createVNode("div",{class:p.value,onClick:t},[(y=(i=o.slots).prefix)==null?void 0:y.call(i),r(),(C=(h=o.slots).suffix)==null?void 0:C.call(h)])}}}),te="";e.defineComponent({name:"DIconGroup",setup(l,o){const n=w("icon-group");return()=>{var a,r;return e.createVNode("div",{class:n.b()},[(r=(a=o.slots).default)==null?void 0:r.call(a)])}}});function $(l,o,n){let a=l;return o&&(a+=`__${o}`),n&&(a+=`--${n}`),a}function A(l,o=!1){const n=o?`.devui-${l}`:`devui-${l}`;return{b:()=>$(n),e:t=>t?$(n,t):"",m:t=>t?$(n,"",t):"",em:(t,i)=>t&&i?$(n,t,i):""}}var ne="",z=e.defineComponent({name:"DCarousel",props:G,emits:["update:activeIndex","activeIndexChange"],setup(l,{emit:o,slots:n,expose:a}){const r=A("carousel"),{height:c,showDots:p,dotPosition:t,arrowTrigger:i,autoplay:y,autoplaySpeed:h,dotTrigger:C,activeIndex:D,transitionSpeed:I}=e.toRefs(l),d=e.ref(0),N=e.ref(!1),v=e.ref(0),V=e.ref(null),f=e.ref(null),P=e.ref(null);e.watch(()=>i,()=>{N.value=i.value==="always"},{immediate:!0}),e.watch(()=>D,()=>{v.value=D.value},{immediate:!0});const T=s=>{f.value&&(f.value.style.left=`${-s*100}%`)},F=s=>{setTimeout(()=>{f.value&&(f.value.style.transition=""),s.style.transform="",T(v.value)},I.value)},k=(s,u)=>{if(V.value){const g=V.value.getBoundingClientRect();s.style.transform=`translateX(${(u?-d.value:d.value)*g.width}px)`}},x=()=>{P.value&&(clearTimeout(P.value),P.value=null)},E=s=>{x(),y.value&&h.value&&(P.value=setTimeout(()=>{s==null||s()},h.value))},S=s=>{if(s===v.value||!V.value||!f.value)return;f.value.style.transition=`left ${I.value}ms ease`;let u=v.value;if(s<0&&v.value===0){u=d.value-1;const g=f.value.children[u];k(g,!0),T(-1),F(g)}else if(s>=d.value&&v.value===d.value-1){u=0;const g=f.value.children[u];k(g,!1),T(d.value),F(g)}else u=s<0?0:s>d.value-1?d.value-1:s,T(u);v.value=u,o("update:activeIndex",u),o("activeIndexChange",u),E(()=>{S(v.value+1)})},q=()=>{S(v.value-1)},R=()=>{S(v.value+1)},U=s=>{i.value==="hover"&&(N.value=s==="enter")},O=(s,u)=>{u===C.value&&S(s)},Y=s=>{d.value=s,E(R)};return e.onMounted(()=>{f.value&&(f.value.style.transition=`left ${I.value}ms ease`,f.value.style.left="0%"),E(R)}),e.onBeforeUnmount(()=>{x()}),a({prev:q,next:R,goto:S}),()=>{var g,X;const s=(X=(g=n.default)==null?void 0:g.call(n))!=null?X:[];let u=s;return u.length===1&&u[0].type===e.Fragment&&(u=(u[0].children||[]).filter(_=>(_==null?void 0:_.type)!==e.Comment)),u.length!==d.value&&Y(u.length),e.createVNode("div",{class:r.b(),style:{height:c.value},onMouseenter:()=>U("enter"),onMouseleave:()=>U("leave")},[i.value!=="never"&&N.value?e.createVNode("div",{class:r.e("arrow")},[e.createVNode("button",{class:"arrow-left",onClick:()=>q()},[e.createVNode(j,{name:"arrow-left"},null)]),e.createVNode("button",{class:"arrow-right",onClick:()=>R()},[e.createVNode(j,{name:"arrow-right"},null)])]):null,e.createVNode("div",{class:r.e("item-wrapper"),ref:V},[e.createVNode("div",{class:r.e("item-container"),style:{width:`${d.value*100}%`},ref:f},[s])]),d.value>0&&p.value?e.createVNode("ul",{class:[r.e("dots"),t.value]},[u.map((_,M)=>e.createVNode("li",{class:{"dot-item":!0,active:v.value===M},onClick:()=>O(M,"click"),onMouseenter:()=>O(M,"hover"),style:{transition:`all ${I.value}ms ease`}},null))]):null])}}}),B=e.defineComponent({name:"DCarouselItem",setup(l,{slots:o}){var r;const n=A("carousel"),a=(r=o.default)==null?void 0:r.call(o);return()=>e.createVNode("div",{class:n.e("item")},[a])}}),W={title:"Carousel \u8D70\u9A6C\u706F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(l){l.component(z.name,z),l.component(B.name,B)}};m.Carousel=z,m.CarouselItem=B,m.default=W,Object.defineProperty(m,"__esModule",{value:!0}),m[Symbol.toStringTag]="Module"});
+(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("clipboard")):typeof define=="function"&&define.amd?define(["exports","vue","clipboard"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.index={},s.Vue))})(this,function(s,e){"use strict";const z={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},transitionSpeed:{type:Number,default:500}};function F(){return e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",points:"10.7071068 12.2928932 9.29289322 13.7071068 3.58578644 8 9.29289322 2.29289322 10.7071068 3.70710678 6.41421356 8"},null)])])}function L(){return e.createVNode("svg",{width:"18px",height:"18px",viewBox:"0 0 16 16",version:"1.1"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("polygon",{fill:"#293040","fill-rule":"nonzero",transform:"translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) ",points:"11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"},null)])])}function g(i,r,l){let v=i;return r&&(v+=`__${r}`),l&&(v+=`--${l}`),v}function b(i,r=!1){const l=r?`.devui-${i}`:`devui-${i}`;return{b:()=>g(l),e:c=>c?g(l,c):"",m:c=>c?g(l,"",c):"",em:(c,p)=>c&&p?g(l,c,p):""}}var H="",I=e.defineComponent({name:"DCarousel",props:z,emits:["update:activeIndex","activeIndexChange"],setup(i,{emit:r,slots:l,expose:v}){const f=b("carousel"),{height:B,showDots:M,dotPosition:c,arrowTrigger:p,autoplay:U,autoplaySpeed:P,dotTrigger:X,activeIndex:R,transitionSpeed:m}=e.toRefs(i),n=e.ref(0),T=e.ref(!1),u=e.ref(0),y=e.ref(null),o=e.ref(null),w=e.ref(null);e.watch(()=>p,()=>{T.value=p.value==="always"},{immediate:!0}),e.watch(()=>R,()=>{u.value=R.value},{immediate:!0});const C=t=>{o.value&&(o.value.style.left=`${-t*100}%`)},A=t=>{setTimeout(()=>{o.value&&(o.value.style.transition=""),t.style.transform="",C(u.value)},m.value)},D=(t,a)=>{if(y.value){const d=y.value.getBoundingClientRect();t.style.transform=`translateX(${(a?-n.value:n.value)*d.width}px)`}},_=()=>{w.value&&(clearTimeout(w.value),w.value=null)},x=t=>{_(),U.value&&P.value&&(w.value=setTimeout(()=>{t==null||t()},P.value))},h=t=>{if(t===u.value||!y.value||!o.value)return;o.value.style.transition=`left ${m.value}ms ease`;let a=u.value;if(t<0&&u.value===0){a=n.value-1;const d=o.value.children[a];D(d,!0),C(-1),A(d)}else if(t>=n.value&&u.value===n.value-1){a=0;const d=o.value.children[a];D(d,!1),C(n.value),A(d)}else a=t<0?0:t>n.value-1?n.value-1:t,C(a);u.value=a,r("update:activeIndex",a),r("activeIndexChange",a),x(()=>{h(u.value+1)})},j=()=>{h(u.value-1)},N=()=>{h(u.value+1)},k=t=>{p.value==="hover"&&(T.value=t==="enter")},E=(t,a)=>{a===X.value&&h(t)},G=t=>{n.value=t,x(N)};return e.onMounted(()=>{o.value&&(o.value.style.transition=`left ${m.value}ms ease`,o.value.style.left="0%"),x(N)}),e.onBeforeUnmount(()=>{_()}),v({prev:j,next:N,goto:h}),()=>{var d,q;const t=(q=(d=l.default)==null?void 0:d.call(l))!=null?q:[];let a=t;return a.length===1&&a[0].type===e.Fragment&&(a=(a[0].children||[]).filter(V=>(V==null?void 0:V.type)!==e.Comment)),a.length!==n.value&&G(a.length),e.createVNode("div",{class:f.b(),style:{height:B.value},onMouseenter:()=>k("enter"),onMouseleave:()=>k("leave")},[p.value!=="never"&&T.value?e.createVNode("div",{class:f.e("arrow")},[e.createVNode("button",{class:"arrow-left",onClick:()=>j()},[e.createVNode(F,null,null)]),e.createVNode("button",{class:"arrow-right",onClick:()=>N()},[e.createVNode(L,null,null)])]):null,e.createVNode("div",{class:f.e("item-wrapper"),ref:y},[e.createVNode("div",{class:f.e("item-container"),style:{width:`${n.value*100}%`},ref:o},[t])]),n.value>0&&M.value?e.createVNode("ul",{class:[f.e("dots"),c.value]},[a.map((V,$)=>e.createVNode("li",{class:{"dot-item":!0,active:u.value===$},onClick:()=>E($,"click"),onMouseenter:()=>E($,"hover"),style:{transition:`all ${m.value}ms ease`}},null))]):null])}}}),S=e.defineComponent({name:"DCarouselItem",setup(i,{slots:r}){var f;const l=b("carousel"),v=(f=r.default)==null?void 0:f.call(r);return()=>e.createVNode("div",{class:l.e("item")},[v])}}),O={title:"Carousel \u8D70\u9A6C\u706F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(i){i.component(I.name,I),i.component(S.name,S)}};s.Carousel=I,s.CarouselItem=S,s.default=O,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});

package/carousel/style.css

@@ -1 +1 @@
-.devui-icon__container{display:inline-block;color:var(--devui-icon-fill, #71757f)}.devui-icon__container>*:not(:last-child){vertical-align:middle;margin-right:8px}.devui-icon__container i{vertical-align:middle;transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--no-slots i,.devui-icon--no-slots img{display:block}.devui-icon--disabled{color:var(--devui-disabled-text, #cfd0d3);cursor:not-allowed}.devui-icon--disabled i{color:var(--devui-disabled-text, #cfd0d3)}.devui-icon--operable:not(.devui-icon--disabled){cursor:pointer;transition:color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--operable:not(.devui-icon--disabled) i{cursor:pointer}.devui-icon--operable:hover:not(.devui-icon--disabled){color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:hover:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-hover, var(--devui-list-item-hover-bg, #f2f2f3))}.devui-icon--operable:hover:not(.devui-icon--disabled) i{color:var(--devui-icon-fill-hover, #252b3a)}.devui-icon--operable:active:not(.devui-icon--disabled){color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable:active:not(.devui-icon--disabled).devui-icon__container{background-color:var(--devui-icon-background-active, var(--devui-list-item-active-bg, #f2f5fc))}.devui-icon--operable:active:not(.devui-icon--disabled) i{color:var(--devui-icon-active-color, var(--devui-icon-fill-active, #252b3a))}.devui-icon--operable.devui-icon__container{height:32px;line-height:32px;padding:0 8px;margin-left:-8px;border-radius:var(--devui-border-radius, 2px);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-icon--spin{animation:iconSpin 2.5s linear infinite}.devui-svg-icon{vertical-align:middle}@keyframes iconSpin{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.devui-icon-group{display:inline-flex;align-items:center}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable){padding:8px;margin-left:0}.devui-icon-group>.devui-icon__container:not(.devui-icon--operable):first-child{margin-left:-8px}.devui-icon-group>*:not(:first-child){margin-left:0}.devui-carousel{display:block;position:relative}.devui-carousel .devui-carousel__arrow{position:absolute;width:100%;top:50%}.devui-carousel .devui-carousel__arrow .arrow-left{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;border:0;left:10px}.devui-carousel .devui-carousel__arrow .arrow-left:hover{background:var(--devui-area, #f5f5f5)}.devui-carousel .devui-carousel__arrow .arrow-left svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel .devui-carousel__arrow .arrow-right{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;border:0;right:10px}.devui-carousel .devui-carousel__arrow .arrow-right:hover{background:var(--devui-area, #f5f5f5)}.devui-carousel .devui-carousel__arrow .arrow-right svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel .devui-carousel__item-wrapper{position:relative;overflow:hidden;height:100%}.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container{display:flex;height:100%;position:relative}.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container .devui-carousel__item{flex:1;position:relative;height:100%}.devui-carousel .devui-carousel__dots{position:absolute;display:flex;justify-content:center;width:100%;list-style:none}.devui-carousel .devui-carousel__dots.bottom{bottom:8px}.devui-carousel .devui-carousel__dots.top{top:8px}.devui-carousel .devui-carousel__dots .dot-item{width:6px;height:6px;border-radius:3px;margin-right:8px;background:var(--devui-icon-fill, #71757f)}.devui-carousel .devui-carousel__dots .dot-item:hover{cursor:pointer;background:var(--devui-icon-fill-hover, #252b3a)}.devui-carousel .devui-carousel__dots .dot-item.active{width:24px;background:var(--devui-icon-fill-active, #252b3a);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-carousel .devui-carousel__arrow .arrow-left,.devui-carousel .devui-carousel__arrow .arrow-right{transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}
+.devui-carousel{display:block;position:relative}.devui-carousel .devui-carousel__arrow{position:absolute;width:100%;top:50%}.devui-carousel .devui-carousel__arrow .arrow-left{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;border:0;left:10px}.devui-carousel .devui-carousel__arrow .arrow-left:hover{background:var(--devui-area, #f5f5f5)}.devui-carousel .devui-carousel__arrow .arrow-left svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel .devui-carousel__arrow .arrow-right{position:absolute;top:-18px;z-index:2;cursor:pointer;width:36px;height:36px;border-radius:18px;background:var(--devui-highlight-overlay, rgba(255, 255, 255, .8));box-shadow:var(--devui-shadow-length-hover, 0 8px 16px 0) var(--devui-light-shadow, rgba(37, 43, 58, .12));display:inline-flex;align-items:center;justify-content:center;border:0;right:10px}.devui-carousel .devui-carousel__arrow .arrow-right:hover{background:var(--devui-area, #f5f5f5)}.devui-carousel .devui-carousel__arrow .arrow-right svg polygon{fill:var(--devui-text, #252b3a)}.devui-carousel .devui-carousel__item-wrapper{position:relative;overflow:hidden;height:100%}.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container{display:flex;height:100%;position:relative}.devui-carousel .devui-carousel__item-wrapper .devui-carousel__item-container .devui-carousel__item{flex:1;position:relative;height:100%}.devui-carousel .devui-carousel__dots{position:absolute;display:flex;justify-content:center;width:100%;list-style:none}.devui-carousel .devui-carousel__dots.bottom{bottom:8px}.devui-carousel .devui-carousel__dots.top{top:8px}.devui-carousel .devui-carousel__dots .dot-item{width:6px;height:6px;border-radius:3px;margin-right:8px;background:var(--devui-icon-fill, #71757f)}.devui-carousel .devui-carousel__dots .dot-item:hover{cursor:pointer;background:var(--devui-icon-fill-hover, #252b3a)}.devui-carousel .devui-carousel__dots .dot-item.active{width:24px;background:var(--devui-icon-fill-active, #252b3a);transition:all var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-carousel .devui-carousel__arrow .arrow-left,.devui-carousel .devui-carousel__arrow .arrow-right{transition:background-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-smooth, cubic-bezier(.645, .045, .355, 1))}

package/category-search/index.es.js

@@ -255,17 +255,7 @@ const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
     onInvalidate(() => subscriptions.forEach((v) => v()));
   });
 };
-function useDropdown(id, visible, isOpen, origin, dropdownRef, popDirection, emit) {
-  const calcPopDirection = (dropdownEl) => {
-    const elementHeight = dropdownEl.offsetHeight;
-    const bottomDistance = window.innerHeight - origin.value.getBoundingClientRect().bottom;
-    const isBottomEnough = bottomDistance >= elementHeight;
-    if (!isBottomEnough) {
-      popDirection.value = "top";
-    } else {
-      popDirection.value = "bottom";
-    }
-  };
+function useDropdown(id, visible, isOpen, origin, dropdownRef, emit) {
   watch(visible, (newVal, oldVal) => {
     if (oldVal === void 0) {
       return;
@@ -289,9 +279,6 @@ function useDropdown(id, visible, isOpen, origin, dropdownRef, popDirection, emi
         }
       }
     }
-    if (dropdownEl) {
-      calcPopDirection(dropdownEl);
-    }
   });
   onMounted(() => {
     dropdownMap.set(id, { toggleEl: origin.value });
@@ -699,7 +686,7 @@ var Dropdown = defineComponent({
       props,
       emit
     });
-    useDropdown(id, visible, isOpen, origin, dropdownRef, currentPosition, emit);
+    useDropdown(id, visible, isOpen, origin, dropdownRef, emit);
     const {
       overlayModelValue,
       overlayShowValue,
@@ -2728,6 +2715,10 @@ const commonProps = {
   size: {
     type: String,
     default: "md"
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
@@ -10453,7 +10444,10 @@ var Checkbox = defineComponent({
         active: mergedChecked.value,
         "half-checked": props.halfChecked,
         disabled: mergedDisabled.value,
-        unchecked: !mergedChecked.value
+        unchecked: !mergedChecked.value,
+        [ns2.m("glow-style")]: props.showGlowStyle,
+        [ns2.m(`checkbox-${size.value}`)]: border.value,
+        [ns2.m("checkbox-bordered")]: border.value
       };
       const labelTitle = mergedIsShowTitle.value ? props.title || props.label : "";
       const bgImgStyle = mergedColor.value && props.halfChecked || mergedColor.value ? `linear-gradient(${mergedColor.value}, ${mergedColor.value})` : "";
@@ -10470,7 +10464,7 @@ var Checkbox = defineComponent({
         [ns2.m("no-animation")]: !mergedShowAnimation.value
       };
       const labelCls = {
-        [ns2.m(size.value)]: size.value,
+        [ns2.m(size.value)]: border.value,
         [ns2.m("bordered")]: border.value
       };
       const stopPropagation = ($event) => $event.stopPropagation();
@@ -10482,7 +10476,11 @@ var Checkbox = defineComponent({
         "style": wrapperStyle.value
       }, [createVNode("div", {
         "class": checkboxCls
-      }, [createVNode("label", {
+      }, [props.showGlowStyle && mergedShowAnimation.value && createVNode("div", {
+        "class": ns2.e("glow-box")
+      }, [createVNode("span", {
+        "class": "glow-bg"
+      }, null)]), createVNode("label", {
         "title": labelTitle,
         "onClick": handleClick,
         "class": labelCls,
@@ -10504,18 +10502,20 @@ var Checkbox = defineComponent({
       }, [createVNode("span", {
         "class": ns2.e("halfchecked-bg")
       }, null), createVNode("svg", {
-        "viewBox": "0 0 16 16",
-        "version": "1.1",
-        "xmlns": "http://www.w3.org/2000/svg",
+        "viewBox": "0 0 14 14",
+        "width": "14",
+        "height": "14",
         "class": ns2.e("tick-wrap")
       }, [createVNode("g", {
         "stroke": "none",
         "stroke-width": "1",
         "fill": "none",
         "fill-rule": "evenodd"
-      }, [createVNode("polygon", {
-        "fill-rule": "nonzero",
-        "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
+      }, [createVNode("path", {
+        "d": "M 2.3 7.0 5.6 9.6 11.4 3.5",
+        "stroke": "#fff",
+        "stroke-width": "1.5",
+        "fill": "none",
         "class": polygonCls
       }, null)])])]), createVNode("span", {
         "class": ns2.e("label-text")
@@ -10625,8 +10625,7 @@ const DEFAULT_PREFIX = "icon";
 const iconProps = {
   name: {
     type: String,
-    default: "",
-    required: true
+    default: ""
   },
   size: {
     type: [Number, String],
@@ -11102,19 +11101,36 @@ var Button = defineComponent({
       classes,
       iconClass
     } = useButton(props, ctx);
+    const isMouseDown = ref(false);
+    const showWave = ref(false);
+    const waveStyle = reactive({
+      top: "0px",
+      left: "0px"
+    });
+    const showClickWave = (e) => {
+      waveStyle.left = e.offsetX + "px";
+      waveStyle.top = e.offsetY + "px";
+      showWave.value = true;
+      setTimeout(() => {
+        showWave.value = false;
+      }, 300);
+    };
     const onClick = (e) => {
       if (loading2.value) {
         return;
       }
+      showClickWave(e);
       ctx.emit("click", e);
     };
     return () => {
       var _a, _b;
       return createVNode("button", {
-        "class": classes.value,
+        "class": [classes.value, isMouseDown.value ? "mousedown" : ""],
         "disabled": disabled.value,
         "onClick": onClick,
-        "type": nativeType.value
+        "type": nativeType.value,
+        "onMousedown": () => isMouseDown.value = true,
+        "onMouseup": () => isMouseDown.value = false
       }, [icon2.value && createVNode(Icon, {
         "name": icon2.value,
         "size": "var(--devui-font-size, 12px)",
@@ -11128,7 +11144,10 @@ var Button = defineComponent({
         "color": "#BBDEFB"
       }, null)]), [[vShow, loading2.value]]), createVNode("span", {
         "class": "button-content"
-      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)])]);
+      }, [(_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a)]), showWave.value && createVNode("div", {
+        "class": "water-wave",
+        "style": waveStyle
+      }, null)]);
     };
   }
 });
@@ -11353,6 +11372,10 @@ const inputNumberProps = {
   reg: {
     type: [RegExp, String],
     default: ""
+  },
+  showGlowStyle: {
+    type: Boolean,
+    default: true
   }
 };
 const ns$1 = useNamespace$1("input-number");
@@ -11407,6 +11430,7 @@ function useRender(props, ctx) {
   const wrapClass = computed(() => [
     {
       [ns.b()]: true,
+      [ns.m("glow-style")]: props.showGlowStyle,
       [ns.m(inputNumberSize.value)]: true
     },
     customClass