vue-devui 1.0.0-rc.7 → 1.0.0-rc.8

package/select/index.es.js

@@ -115,13 +115,12 @@ var Icon = defineComponent({
     };
   }
 });
-var checkbox = "";
 const commonProps = {
   name: {
     type: String,
     default: void 0
   },
-  halfchecked: {
+  halfChecked: {
     type: Boolean,
     default: false
   },
@@ -150,10 +149,6 @@ const commonProps = {
   }
 };
 const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
-  halfchecked: {
-    type: Boolean,
-    default: false
-  },
   checked: {
     type: Boolean,
     default: false
@@ -165,10 +160,6 @@ const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
     type: String,
     default: void 0
   },
-  title: {
-    type: String,
-    default: void 0
-  },
   "onUpdate:checked": {
     type: Function,
     default: void 0
@@ -211,12 +202,37 @@ const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
   }
 });
 const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var checkbox = "";
 var Checkbox = defineComponent({
   name: "DCheckbox",
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx) {
     const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+    const ns = useNamespace("checkbox");
     const isChecked = computed(() => props.checked || props.modelValue);
     const mergedDisabled = computed(() => {
       return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled;
@@ -272,7 +288,8 @@ var Checkbox = defineComponent({
       mergedIsShowTitle,
       mergedChecked,
       mergedShowAnimation,
-      handleClick
+      handleClick,
+      ns
     };
   },
   render() {
@@ -284,44 +301,45 @@ var Checkbox = defineComponent({
       mergedDisabled,
       mergedIsShowTitle,
       mergedShowAnimation,
-      halfchecked,
+      halfChecked,
       title,
       label,
       handleClick,
       name,
       value,
       mergedColor,
+      ns,
       $slots
     } = this;
     const wrapperCls = {
-      "devui-checkbox-column-margin": direction === "column",
-      "devui-checkbox-wrap": typeof itemWidth !== "undefined"
+      [ns.e("column-margin")]: direction === "column",
+      [ns.e("wrap")]: typeof itemWidth !== "undefined"
     };
     const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
     const checkboxCls = {
-      "devui-checkbox": true,
+      [ns.b()]: true,
       active: mergedChecked,
-      halfchecked,
+      "half-checked": halfChecked,
       disabled: mergedDisabled,
       unchecked: !mergedChecked
     };
     const labelTitle = mergedIsShowTitle ? title || label : "";
-    const bgImgStyle = mergedColor && halfchecked || mergedColor ? `linear-gradient(${mergedColor}, ${mergedColor})` : "";
-    const spanStyle = [`border-color:${(mergedChecked || halfchecked) && mergedColor ? mergedColor : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor && halfchecked ? mergedColor : ""}`];
+    const bgImgStyle = mergedColor && halfChecked || mergedColor ? `linear-gradient(${mergedColor}, ${mergedColor})` : "";
+    const spanStyle = [`border-color:${(mergedChecked || halfChecked) && mergedColor ? mergedColor : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor && halfChecked ? mergedColor : ""}`];
     const spanCls = {
-      "devui-checkbox-material": true,
+      [ns.e("material")]: true,
       "custom-color": mergedColor,
-      "devui-checkbox-no-label": !label && !$slots.default,
-      "devui-no-animation": !mergedShowAnimation,
-      "devui-checkbox-default-background": !halfchecked
+      [ns.m("no-label")]: !label && !$slots.default,
+      [ns.m("no-animation")]: !mergedShowAnimation,
+      [ns.e("default-background")]: !halfChecked
     };
     const polygonCls = {
-      "devui-tick": true,
-      "devui-no-animation": !mergedShowAnimation
+      [ns.e("tick")]: true,
+      [ns.m("no-animation")]: !mergedShowAnimation
     };
     const stopPropagation = ($event) => $event.stopPropagation();
     const inputProps = {
-      indeterminate: halfchecked
+      indeterminate: halfChecked
     };
     return createVNode("div", {
       "class": wrapperCls,
@@ -333,7 +351,7 @@ var Checkbox = defineComponent({
       "onClick": handleClick
     }, [createVNode("input", mergeProps({
       "name": name || value,
-      "class": "devui-checkbox-input",
+      "class": ns.e("input"),
       "type": "checkbox"
     }, inputProps, {
       "checked": mergedChecked,
@@ -344,12 +362,12 @@ var Checkbox = defineComponent({
       "style": spanStyle,
       "class": spanCls
     }, [createVNode("span", {
-      "class": "devui-checkbox-halfchecked-bg"
+      "class": ns.e("halfchecked-bg")
     }, null), createVNode("svg", {
       "viewBox": "0 0 16 16",
       "version": "1.1",
       "xmlns": "http://www.w3.org/2000/svg",
-      "class": "devui-checkbox-tick"
+      "class": ns.e("tick-wrap")
     }, [createVNode("g", {
       "stroke": "none",
       "stroke-width": "1",
@@ -372,7 +390,7 @@ defineComponent({
     const defaultOpt = {
       checked: false,
       isShowTitle: true,
-      halfchecked: false,
+      halfChecked: false,
       showAnimation: true,
       disabled: false
     };
@@ -499,8 +517,9 @@ var select = "";
 var Select = defineComponent({
   name: "DSelect",
   props: selectProps,
-  emits: ["toggleChange", "valueChange", "update:modelValue"],
+  emits: ["toggle-change", "value-change", "update:modelValue"],
   setup(props, ctx) {
+    const ns = useNamespace("select");
     const containerRef = ref(null);
     const dropdownRef = ref(null);
     const isOpen = ref(false);
@@ -509,7 +528,7 @@ var Select = defineComponent({
         return;
       }
       isOpen.value = bool;
-      ctx.emit("toggleChange", bool);
+      ctx.emit("toggle-change", bool);
     }
     useSelectOutsideClick([containerRef, dropdownRef], isOpen, toggleChange);
     const mergeOptions = computed(() => {
@@ -574,13 +593,13 @@ var Select = defineComponent({
         ctx.emit("update:modelValue", item.value);
         toggleChange(false);
       }
-      ctx.emit("valueChange", item, index2);
+      ctx.emit("value-change", item, index2);
     }
     function getItemClassName(item) {
       const {
         optionDisabledKey: disabledKey
       } = props;
-      return className("devui-select-item", {
+      return className(ns.e("item"), {
         active: item.value === props.modelValue,
         disabled: disabledKey ? !!item[disabledKey] : false
       });
@@ -604,7 +623,8 @@ var Select = defineComponent({
       valueChange,
       toggleChange,
       getItemClassName,
-      handleClear
+      handleClear,
+      ns
     };
   },
   render() {
@@ -622,22 +642,25 @@ var Select = defineComponent({
       toggleChange,
       getItemClassName,
       mergeClearable,
-      handleClear
+      handleClear,
+      ns
     } = this;
-    const selectCls = className("devui-select", {
-      "devui-select-open": isOpen,
-      "devui-dropdown-menu-multiple": multiple,
-      "devui-select-lg": size === "lg",
-      "devui-select-sm": size === "sm",
-      "devui-select-underlined": overview === "underlined",
-      "devui-select-disabled": disabled
+    const dropdownMenuMultipleNs = useNamespace("dropdown-menu-multiple");
+    const scrollbarNs = useNamespace("scrollbar");
+    const selectCls = className(ns.b(), {
+      [ns.m("open")]: isOpen,
+      [dropdownMenuMultipleNs.b()]: multiple,
+      [ns.m("lg")]: size === "lg",
+      [ns.m("sm")]: size === "sm",
+      [ns.m("underlined")]: overview === "underlined",
+      [ns.m("disabled")]: disabled
     });
-    const inputCls = className("devui-select-input", {
-      "devui-select-input-lg": size === "lg",
-      "devui-select-input-sm": size === "sm"
+    const inputCls = className(ns.e("input"), {
+      [ns.em("input", "lg")]: size === "lg",
+      [ns.em("input", "sm")]: size === "sm"
     });
-    const selectionCls = className("devui-select-selection", {
-      "devui-select-clearable": mergeClearable
+    const selectionCls = className(ns.e("selection"), {
+      [ns.e("clearable")]: mergeClearable
     });
     return createVNode("div", {
       "class": selectCls,
@@ -654,11 +677,11 @@ var Select = defineComponent({
       "disabled": disabled
     }, null), createVNode("span", {
       "onClick": handleClear,
-      "class": "devui-select-clear"
+      "class": ns.e("clear")
     }, [createVNode(Icon, {
       "name": "close"
     }, null)]), createVNode("span", {
-      "class": "devui-select-arrow"
+      "class": ns.e("arrow")
     }, [createVNode(Icon, {
       "name": "select-arrow"
     }, null)])]), createVNode(Transition, {
@@ -666,9 +689,9 @@ var Select = defineComponent({
       "ref": "dropdownRef"
     }, {
       default: () => [withDirectives(createVNode("div", {
-        "class": "devui-select-dropdown"
+        "class": ns.e("dropdown")
       }, [createVNode("ul", {
-        "class": "devui-select-dropdown-list devui-scrollbar"
+        "class": [ns.e("dropdown-list"), scrollbarNs.b()]
       }, [mergeOptions.map((item, i) => createVNode("li", {
         "onClick": (e) => {
           e.preventDefault();

package/select/index.umd.js

@@ -1 +1 @@
-var x=Object.defineProperty,L=Object.defineProperties;var H=Object.getOwnPropertyDescriptors;var R=Object.getOwnPropertySymbols;var J=Object.prototype.hasOwnProperty,Q=Object.prototype.propertyIsEnumerable;var I=(f,e,v)=>e in f?x(f,e,{enumerable:!0,configurable:!0,writable:!0,value:v}):f[e]=v,k=(f,e)=>{for(var v in e||(e={}))J.call(e,v)&&I(f,v,e[v]);if(R)for(var v of R(e))Q.call(e,v)&&I(f,v,e[v]);return f},N=(f,e)=>L(f,H(e));(function(f,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis!="undefined"?globalThis:f||self,e(f.index={},f.Vue))})(this,function(f,e){"use strict";const v={modelValue:{type:[String,Number,Array],default:""},"onUpdate:modelValue":{type:Function,default:void 0},options:{type:Array,default:()=>[]},size:{type:String,default:"md"},overview:{type:String,default:"border"},placeholder:{type:String,default:"\u8BF7\u9009\u62E9"},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},allowClear:{type:Boolean,default:!1},optionDisabledKey:{type:String,default:""},onToggleChange:{type:Function,default:void 0},onValueChange:{type:Function,default:void 0}},F={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var O=e.defineComponent({name:"DIcon",props:F,setup(l){const{name:a,size:t,color:n,classPrefix:d}=e.toRefs(l);return()=>/^((https?):)?\/\//.test(a.value)?e.createVNode("img",{src:a.value,alt:a.value.split("/")[a.value.split("/").length-1],style:{width:t.value,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${d.value} ${d.value}-${a.value}`,style:{fontSize:t.value,color:n.value}},null)}}),X="";const P={name:{type:String,default:void 0},halfchecked:{type:Boolean,default:!1},isShowTitle:{type:Boolean,default:!0},title:{type:String},color:{type:String,default:void 0},showAnimation:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},beforeChange:{type:Function,default:void 0}},_=N(k({},P),{halfchecked:{type:Boolean,default:!1},checked:{type:Boolean,default:!1},value:{type:String},label:{type:String,default:void 0},title:{type:String,default:void 0},"onUpdate:checked":{type:Function,default:void 0},onChange:{type:Function,default:void 0},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}}),K=N(k({},P),{modelValue:{type:Array,required:!0},direction:{type:String,default:"column"},itemWidth:{type:Number,default:void 0},options:{type:Array,default:()=>[]},onChange:{type:Function,default:void 0},"onUpdate:modelValue":{type:Function,default:void 0}}),j=Symbol("d-checkbox-group");var B=e.defineComponent({name:"DCheckbox",props:_,emits:["change","update:checked","update:modelValue"],setup(l,a){const t=e.inject(j,null),n=e.computed(()=>l.checked||l.modelValue),d=e.computed(()=>(t==null?void 0:t.disabled.value)||l.disabled),c=e.computed(()=>{var i,r;return(r=(i=t==null?void 0:t.isItemChecked)==null?void 0:i.call(t,l.value))!=null?r:n.value}),o=e.computed(()=>{var i;return(i=t==null?void 0:t.isShowTitle.value)!=null?i:l.isShowTitle}),u=e.computed(()=>{var i;return(i=t==null?void 0:t.showAnimation.value)!=null?i:l.showAnimation}),m=e.computed(()=>{var i;return(i=t==null?void 0:t.color.value)!=null?i:l.color}),y=t==null?void 0:t.itemWidth.value,V=t==null?void 0:t.direction.value,w=(i,r)=>{var p;if(d.value)return Promise.resolve(!1);const g=(p=l.beforeChange)!=null?p:t==null?void 0:t.beforeChange;if(g){const b=g(i,r);return typeof b=="boolean"?Promise.resolve(b):b}return Promise.resolve(!0)},h=()=>{const i=!n.value;t==null||t.toggleGroupVal(l.value),a.emit("update:checked",i),a.emit("update:modelValue",i),a.emit("change",i)};return{itemWidth:y,direction:V,mergedColor:m,mergedDisabled:d,mergedIsShowTitle:o,mergedChecked:c,mergedShowAnimation:u,handleClick:()=>{w(!n.value,l.label).then(i=>i&&h())}}},render(){var T;const{itemWidth:l,direction:a,mergedChecked:t,mergedDisabled:n,mergedIsShowTitle:d,mergedShowAnimation:c,halfchecked:o,title:u,label:m,handleClick:y,name:V,value:w,mergedColor:h,$slots:s}=this,i={"devui-checkbox-column-margin":a==="column","devui-checkbox-wrap":typeof l!="undefined"},r=l?[`width: ${l}px`]:[],g={"devui-checkbox":!0,active:t,halfchecked:o,disabled:n,unchecked:!t},p=d?u||m:"",b=h&&o||h?`linear-gradient(${h}, ${h})`:"",S=[`border-color:${(t||o)&&h?h:""}`,`background-image:${b}`,`background-color:${h&&o?h:""}`],W={"devui-checkbox-material":!0,"custom-color":h,"devui-checkbox-no-label":!m&&!s.default,"devui-no-animation":!c,"devui-checkbox-default-background":!o},M={"devui-tick":!0,"devui-no-animation":!c},D=q=>q.stopPropagation(),U={indeterminate:o};return e.createVNode("div",{class:i,style:r},[e.createVNode("div",{class:g},[e.createVNode("label",{title:p,onClick:y},[e.createVNode("input",e.mergeProps({name:V||w,class:"devui-checkbox-input",type:"checkbox"},U,{checked:t,disabled:n,onClick:D,onChange:D}),null),e.createVNode("span",{style:S,class:W},[e.createVNode("span",{class:"devui-checkbox-halfchecked-bg"},null),e.createVNode("svg",{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"devui-checkbox-tick"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.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",class:M},null)])])]),m||((T=s.default)==null?void 0:T.call(s))])])])}}),Y="";e.defineComponent({name:"DCheckboxGroup",props:K,emits:["change","update:modelValue"],setup(l,a){const t=e.toRef(l,"modelValue"),n={checked:!1,isShowTitle:!0,halfchecked:!1,showAnimation:!0,disabled:!1},d=o=>{let u=-1;if(typeof t.value[0]=="string"?u=t.value.findIndex(m=>m===o):typeof t.value[0]=="object"&&(u=t.value.findIndex(m=>m.value===o)),u===-1){if(typeof l.options[0]=="object"){const y=l.options.find(w=>w.value===o),V=[...t.value,y];a.emit("update:modelValue",V),a.emit("change",V);return}const m=[...t.value,o];a.emit("update:modelValue",m),a.emit("change",m);return}t.value.splice(u,1),a.emit("update:modelValue",t.value),a.emit("change",t.value)},c=o=>{if(typeof t.value[0]=="string")return t.value.includes(o);if(typeof t.value[0]=="object")return t.value.some(u=>u.value===o)};return e.provide(j,{disabled:e.toRef(l,"disabled"),isShowTitle:e.toRef(l,"isShowTitle"),color:e.toRef(l,"color"),showAnimation:e.toRef(l,"showAnimation"),beforeChange:l.beforeChange,isItemChecked:c,toggleGroupVal:d,itemWidth:e.toRef(l,"itemWidth"),direction:e.toRef(l,"direction")}),{defaultOpt:n}},render(){var c;const{direction:l,$slots:a,defaultOpt:t,options:n}=this;let d=(c=a.default)==null?void 0:c.call(a);return(n==null?void 0:n.length)>0&&(d=n.map(o=>{let u=null;return typeof o=="string"?u=Object.assign({},t,{label:o,value:o}):typeof o=="object"&&(u=Object.assign({},t,N(k({},o),{label:o.name}))),e.createVNode(B,u,null)})),e.createVNode("div",{class:"devui-checkbox-group"},[e.createVNode("div",{class:{"devui-checkbox-list-inline":l==="row"}},[d])])}});function C(l,a){let t=l;return typeof a=="object"&&Object.keys(a).forEach(n=>{a[n]&&(t+=` ${n}`)}),t}function $(l){const a=e.computed(()=>{const n=new Map;return l.value.forEach(d=>{n.set(d.value,d)}),n});return n=>n.map(d=>a.value.get(d))}function E(l,a,t){function n(d){var u,m;let c=d.target;c.shadowRoot&&d.composed&&(c=d.composedPath()[0]||c);const o=[(u=l[0])==null?void 0:u.value,(m=l[1])==null?void 0:m.value];a.value&&o.every(y=>y&&!y.contains(c)&&y!==c)&&t(!1)}e.onMounted(()=>{document.body.addEventListener("mousedown",n,!1)}),e.onBeforeUnmount(()=>{document.body.addEventListener("mousedown",n,!1)})}var Z="",A=e.defineComponent({name:"DSelect",props:v,emits:["toggleChange","valueChange","update:modelValue"],setup(l,a){const t=e.ref(null),n=e.ref(null),d=e.ref(!1);function c(s){l.disabled||(d.value=s,a.emit("toggleChange",s))}E([t,n],d,c);const o=e.computed(()=>{const{multiple:s,modelValue:i}=l;return l.options.map(r=>{let g;return typeof r=="object"?g=k({name:r.name?r.name:r.value+"",_checked:!1},r):g={name:r+"",value:r,_checked:!1},s&&(Array.isArray(i)?g._checked=i.includes(g.value):g._checked=!1),g})}),u=$(o),m=e.computed(()=>{var s;return l.multiple&&Array.isArray(l.modelValue)?u(l.modelValue).map(r=>(r==null?void 0:r.name)||"").join(","):Array.isArray(l.modelValue)?"":((s=u([l.modelValue])[0])==null?void 0:s.name)||""}),y=e.computed(()=>!l.disabled&&l.allowClear&&m.value.length>0);function V(s,i){const{multiple:r,optionDisabledKey:g}=l;let{modelValue:p}=l;g&&!!s[g]||(r?(s._checked=!s._checked,p=o.value.filter(b=>b._checked).map(b=>b.value),a.emit("update:modelValue",p)):(a.emit("update:modelValue",s.value),c(!1)),a.emit("valueChange",s,i))}function w(s){const{optionDisabledKey:i}=l;return C("devui-select-item",{active:s.value===l.modelValue,disabled:i?!!s[i]:!1})}function h(s){s.preventDefault(),s.stopPropagation(),l.multiple?a.emit("update:modelValue",[]):a.emit("update:modelValue","")}return{isOpen:d,containerRef:t,dropdownRef:n,inputValue:m,mergeOptions:o,mergeClearable:y,valueChange:V,toggleChange:c,getItemClassName:w,handleClear:h}},render(){const{mergeOptions:l,isOpen:a,inputValue:t,size:n,multiple:d,disabled:c,optionDisabledKey:o,placeholder:u,overview:m,valueChange:y,toggleChange:V,getItemClassName:w,mergeClearable:h,handleClear:s}=this,i=C("devui-select",{"devui-select-open":a,"devui-dropdown-menu-multiple":d,"devui-select-lg":n==="lg","devui-select-sm":n==="sm","devui-select-underlined":m==="underlined","devui-select-disabled":c}),r=C("devui-select-input",{"devui-select-input-lg":n==="lg","devui-select-input-sm":n==="sm"}),g=C("devui-select-selection",{"devui-select-clearable":h});return e.createVNode("div",{class:i,ref:"containerRef"},[e.createVNode("div",{class:g,onClick:()=>V(!a)},[e.createVNode("input",{value:t,type:"text",class:r,placeholder:u,readonly:!0,disabled:c},null),e.createVNode("span",{onClick:s,class:"devui-select-clear"},[e.createVNode(O,{name:"close"},null)]),e.createVNode("span",{class:"devui-select-arrow"},[e.createVNode(O,{name:"select-arrow"},null)])]),e.createVNode(e.Transition,{name:"fade",ref:"dropdownRef"},{default:()=>[e.withDirectives(e.createVNode("div",{class:"devui-select-dropdown"},[e.createVNode("ul",{class:"devui-select-dropdown-list devui-scrollbar"},[l.map((p,b)=>e.createVNode("li",{onClick:S=>{S.preventDefault(),S.stopPropagation(),y(p,b)},class:w(p),key:b},[d?e.createVNode(B,{modelValue:p._checked,label:p.name,disabled:o?!!p[o]:!1},null):p.name]))])]),[[e.vShow,a]])]})])}}),z={title:"Select \u4E0B\u62C9\u6846",category:"\u6570\u636E\u5F55\u5165",status:"10%",install(l){l.component(A.name,A)}};f.Select=A,f.default=z,Object.defineProperty(f,"__esModule",{value:!0}),f[Symbol.toStringTag]="Module"});
+var Q=Object.defineProperty,X=Object.defineProperties;var Y=Object.getOwnPropertyDescriptors;var K=Object.getOwnPropertySymbols;var Z=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable;var E=(f,e,b)=>e in f?Q(f,e,{enumerable:!0,configurable:!0,writable:!0,value:b}):f[e]=b,S=(f,e)=>{for(var b in e||(e={}))Z.call(e,b)&&E(f,b,e[b]);if(K)for(var b of K(e))x.call(e,b)&&E(f,b,e[b]);return f},B=(f,e)=>X(f,Y(e));(function(f,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(f=typeof globalThis!="undefined"?globalThis:f||self,e(f.index={},f.Vue))})(this,function(f,e){"use strict";const b={modelValue:{type:[String,Number,Array],default:""},"onUpdate:modelValue":{type:Function,default:void 0},options:{type:Array,default:()=>[]},size:{type:String,default:"md"},overview:{type:String,default:"border"},placeholder:{type:String,default:"\u8BF7\u9009\u62E9"},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},allowClear:{type:Boolean,default:!1},optionDisabledKey:{type:String,default:""},onToggleChange:{type:Function,default:void 0},onValueChange:{type:Function,default:void 0}},M={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var T=e.defineComponent({name:"DIcon",props:M,setup(l){const{name:n,size:t,color:i,classPrefix:s}=e.toRefs(l);return()=>/^((https?):)?\/\//.test(n.value)?e.createVNode("img",{src:n.value,alt:n.value.split("/")[n.value.split("/").length-1],style:{width:t.value,verticalAlign:"text-bottom"}},null):e.createVNode("i",{class:`${s.value} ${s.value}-${n.value}`,style:{fontSize:t.value,color:i.value}},null)}});const R={name:{type:String,default:void 0},halfChecked:{type:Boolean,default:!1},isShowTitle:{type:Boolean,default:!0},title:{type:String},color:{type:String,default:void 0},showAnimation:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},beforeChange:{type:Function,default:void 0}},z=B(S({},R),{checked:{type:Boolean,default:!1},value:{type:String},label:{type:String,default:void 0},"onUpdate:checked":{type:Function,default:void 0},onChange:{type:Function,default:void 0},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function}}),W=B(S({},R),{modelValue:{type:Array,required:!0},direction:{type:String,default:"column"},itemWidth:{type:Number,default:void 0},options:{type:Array,default:()=>[]},onChange:{type:Function,default:void 0},"onUpdate:modelValue":{type:Function,default:void 0}}),I=Symbol("d-checkbox-group");function N(l,n,t){let i=l;return n&&(i+=`__${n}`),t&&(i+=`--${t}`),i}function A(l){const n=`devui-${l}`;return{b:()=>N(n),e:a=>a?N(n,a):"",m:a=>a?N(n,"",a):"",em:(a,c)=>a&&c?N(n,a,c):""}}var G="",_=e.defineComponent({name:"DCheckbox",props:z,emits:["change","update:checked","update:modelValue"],setup(l,n){const t=e.inject(I,null),i=A("checkbox"),s=e.computed(()=>l.checked||l.modelValue),r=e.computed(()=>(t==null?void 0:t.disabled.value)||l.disabled),a=e.computed(()=>{var d,u;return(u=(d=t==null?void 0:t.isItemChecked)==null?void 0:d.call(t,l.value))!=null?u:s.value}),c=e.computed(()=>{var d;return(d=t==null?void 0:t.isShowTitle.value)!=null?d:l.isShowTitle}),m=e.computed(()=>{var d;return(d=t==null?void 0:t.showAnimation.value)!=null?d:l.showAnimation}),y=e.computed(()=>{var d;return(d=t==null?void 0:t.color.value)!=null?d:l.color}),v=t==null?void 0:t.itemWidth.value,w=t==null?void 0:t.direction.value,h=(d,u)=>{var C;if(r.value)return Promise.resolve(!1);const g=(C=l.beforeChange)!=null?C:t==null?void 0:t.beforeChange;if(g){const V=g(d,u);return typeof V=="boolean"?Promise.resolve(V):V}return Promise.resolve(!0)},p=()=>{const d=!s.value;t==null||t.toggleGroupVal(l.value),n.emit("update:checked",d),n.emit("update:modelValue",d),n.emit("change",d)};return{itemWidth:v,direction:w,mergedColor:y,mergedDisabled:r,mergedIsShowTitle:c,mergedChecked:a,mergedShowAnimation:m,handleClick:()=>{h(!s.value,l.label).then(d=>d&&p())},ns:i}},render(){var $;const{itemWidth:l,direction:n,mergedChecked:t,mergedDisabled:i,mergedIsShowTitle:s,mergedShowAnimation:r,halfChecked:a,title:c,label:m,handleClick:y,name:v,value:w,mergedColor:h,ns:p,$slots:o}=this,d={[p.e("column-margin")]:n==="column",[p.e("wrap")]:typeof l!="undefined"},u=l?[`width: ${l}px`]:[],g={[p.b()]:!0,active:t,"half-checked":a,disabled:i,unchecked:!t},C=s?c||m:"",V=h&&a||h?`linear-gradient(${h}, ${h})`:"",k=[`border-color:${(t||a)&&h?h:""}`,`background-image:${V}`,`background-color:${h&&a?h:""}`],P={[p.e("material")]:!0,"custom-color":h,[p.m("no-label")]:!m&&!o.default,[p.m("no-animation")]:!r,[p.e("default-background")]:!a},j={[p.e("tick")]:!0,[p.m("no-animation")]:!r},F=J=>J.stopPropagation(),H={indeterminate:a};return e.createVNode("div",{class:d,style:u},[e.createVNode("div",{class:g},[e.createVNode("label",{title:C,onClick:y},[e.createVNode("input",e.mergeProps({name:v||w,class:p.e("input"),type:"checkbox"},H,{checked:t,disabled:i,onClick:F,onChange:F}),null),e.createVNode("span",{style:k,class:P},[e.createVNode("span",{class:p.e("halfchecked-bg")},null),e.createVNode("svg",{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:p.e("tick-wrap")},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.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",class:j},null)])])]),m||(($=o.default)==null?void 0:$.call(o))])])])}}),ee="";e.defineComponent({name:"DCheckboxGroup",props:W,emits:["change","update:modelValue"],setup(l,n){const t=e.toRef(l,"modelValue"),i={checked:!1,isShowTitle:!0,halfChecked:!1,showAnimation:!0,disabled:!1},s=a=>{let c=-1;if(typeof t.value[0]=="string"?c=t.value.findIndex(m=>m===a):typeof t.value[0]=="object"&&(c=t.value.findIndex(m=>m.value===a)),c===-1){if(typeof l.options[0]=="object"){const y=l.options.find(w=>w.value===a),v=[...t.value,y];n.emit("update:modelValue",v),n.emit("change",v);return}const m=[...t.value,a];n.emit("update:modelValue",m),n.emit("change",m);return}t.value.splice(c,1),n.emit("update:modelValue",t.value),n.emit("change",t.value)},r=a=>{if(typeof t.value[0]=="string")return t.value.includes(a);if(typeof t.value[0]=="object")return t.value.some(c=>c.value===a)};return e.provide(I,{disabled:e.toRef(l,"disabled"),isShowTitle:e.toRef(l,"isShowTitle"),color:e.toRef(l,"color"),showAnimation:e.toRef(l,"showAnimation"),beforeChange:l.beforeChange,isItemChecked:r,toggleGroupVal:s,itemWidth:e.toRef(l,"itemWidth"),direction:e.toRef(l,"direction")}),{defaultOpt:i}},render(){var r;const{direction:l,$slots:n,defaultOpt:t,options:i}=this;let s=(r=n.default)==null?void 0:r.call(n);return(i==null?void 0:i.length)>0&&(s=i.map(a=>{let c=null;return typeof a=="string"?c=Object.assign({},t,{label:a,value:a}):typeof a=="object"&&(c=Object.assign({},t,B(S({},a),{label:a.name}))),e.createVNode(_,c,null)})),e.createVNode("div",{class:"devui-checkbox-group"},[e.createVNode("div",{class:{"devui-checkbox-list-inline":l==="row"}},[s])])}});function O(l,n){let t=l;return typeof n=="object"&&Object.keys(n).forEach(i=>{n[i]&&(t+=` ${i}`)}),t}function U(l){const n=e.computed(()=>{const i=new Map;return l.value.forEach(s=>{i.set(s.value,s)}),i});return i=>i.map(s=>n.value.get(s))}function q(l,n,t){function i(s){var c,m;let r=s.target;r.shadowRoot&&s.composed&&(r=s.composedPath()[0]||r);const a=[(c=l[0])==null?void 0:c.value,(m=l[1])==null?void 0:m.value];n.value&&a.every(y=>y&&!y.contains(r)&&y!==r)&&t(!1)}e.onMounted(()=>{document.body.addEventListener("mousedown",i,!1)}),e.onBeforeUnmount(()=>{document.body.addEventListener("mousedown",i,!1)})}var te="",D=e.defineComponent({name:"DSelect",props:b,emits:["toggle-change","value-change","update:modelValue"],setup(l,n){const t=A("select"),i=e.ref(null),s=e.ref(null),r=e.ref(!1);function a(o){l.disabled||(r.value=o,n.emit("toggle-change",o))}q([i,s],r,a);const c=e.computed(()=>{const{multiple:o,modelValue:d}=l;return l.options.map(u=>{let g;return typeof u=="object"?g=S({name:u.name?u.name:u.value+"",_checked:!1},u):g={name:u+"",value:u,_checked:!1},o&&(Array.isArray(d)?g._checked=d.includes(g.value):g._checked=!1),g})}),m=U(c),y=e.computed(()=>{var o;return l.multiple&&Array.isArray(l.modelValue)?m(l.modelValue).map(u=>(u==null?void 0:u.name)||"").join(","):Array.isArray(l.modelValue)?"":((o=m([l.modelValue])[0])==null?void 0:o.name)||""}),v=e.computed(()=>!l.disabled&&l.allowClear&&y.value.length>0);function w(o,d){const{multiple:u,optionDisabledKey:g}=l;let{modelValue:C}=l;g&&!!o[g]||(u?(o._checked=!o._checked,C=c.value.filter(V=>V._checked).map(V=>V.value),n.emit("update:modelValue",C)):(n.emit("update:modelValue",o.value),a(!1)),n.emit("value-change",o,d))}function h(o){const{optionDisabledKey:d}=l;return O(t.e("item"),{active:o.value===l.modelValue,disabled:d?!!o[d]:!1})}function p(o){o.preventDefault(),o.stopPropagation(),l.multiple?n.emit("update:modelValue",[]):n.emit("update:modelValue","")}return{isOpen:r,containerRef:i,dropdownRef:s,inputValue:y,mergeOptions:c,mergeClearable:v,valueChange:w,toggleChange:a,getItemClassName:h,handleClear:p,ns:t}},render(){const{mergeOptions:l,isOpen:n,inputValue:t,size:i,multiple:s,disabled:r,optionDisabledKey:a,placeholder:c,overview:m,valueChange:y,toggleChange:v,getItemClassName:w,mergeClearable:h,handleClear:p,ns:o}=this,d=A("dropdown-menu-multiple"),u=A("scrollbar"),g=O(o.b(),{[o.m("open")]:n,[d.b()]:s,[o.m("lg")]:i==="lg",[o.m("sm")]:i==="sm",[o.m("underlined")]:m==="underlined",[o.m("disabled")]:r}),C=O(o.e("input"),{[o.em("input","lg")]:i==="lg",[o.em("input","sm")]:i==="sm"}),V=O(o.e("selection"),{[o.e("clearable")]:h});return e.createVNode("div",{class:g,ref:"containerRef"},[e.createVNode("div",{class:V,onClick:()=>v(!n)},[e.createVNode("input",{value:t,type:"text",class:C,placeholder:c,readonly:!0,disabled:r},null),e.createVNode("span",{onClick:p,class:o.e("clear")},[e.createVNode(T,{name:"close"},null)]),e.createVNode("span",{class:o.e("arrow")},[e.createVNode(T,{name:"select-arrow"},null)])]),e.createVNode(e.Transition,{name:"fade",ref:"dropdownRef"},{default:()=>[e.withDirectives(e.createVNode("div",{class:o.e("dropdown")},[e.createVNode("ul",{class:[o.e("dropdown-list"),u.b()]},[l.map((k,P)=>e.createVNode("li",{onClick:j=>{j.preventDefault(),j.stopPropagation(),y(k,P)},class:w(k),key:P},[s?e.createVNode(_,{modelValue:k._checked,label:k.name,disabled:a?!!k[a]:!1},null):k.name]))])]),[[e.vShow,n]])]})])}}),L={title:"Select \u4E0B\u62C9\u6846",category:"\u6570\u636E\u5F55\u5165",status:"10%",install(l){l.component(D.name,D)}};f.Select=D,f.default=L,Object.defineProperty(f,"__esModule",{value:!0}),f[Symbol.toStringTag]="Module"});

package/select/style.css

@@ -1 +1 @@
-.devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox-tick{position:absolute}.devui-checkbox .devui-checkbox-tick .devui-tick{fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.devui-checkbox.active:not(.halfchecked) .devui-tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active:not(.disabled) .devui-checkbox-material:not(.custom-color),.devui-checkbox.halfchecked:not(.disabled) .devui-checkbox-material:not(.custom-color){border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox-material{background-size:100% 100%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material:not(.custom-color){background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material:not(.custom-color):hover{border-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox-material.custom-color{background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color){background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.halfchecked .devui-checkbox-material:not(.custom-color)>.devui-checkbox-halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.halfchecked .devui-checkbox-material.custom-color>.devui-checkbox-halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox-material{text-align:initial;height:14px;width:14px;position:relative;user-select:none;border:1px solid var(--devui-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox-material.devui-checkbox-default-background{background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox-material.devui-checkbox-no-label{margin-right:0}.devui-checkbox .devui-checkbox-material>.devui-checkbox-halfchecked-bg{display:inline-block;position:absolute;content:"";background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox-material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):focus,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover{background-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):focus,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).halfchecked .devui-checkbox-material:not(.custom-color):hover:focus{background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox-input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:16px;line-height:16px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8)}.devui-checkbox.disabled .devui-checkbox-material{border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox-material{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.halfchecked .devui-checkbox-material{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.halfchecked .devui-checkbox-material .devui-checkbox-halfchecked-bg{transform:scale(.4288);background-color:var(--devui-disabled-text, #adb0b8);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}.devui-no-animation{transition:none!important}.devui-checkbox-column-margin{height:28px;line-height:28px}.devui-checkbox-wrap .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:block}.devui-checkbox-list-inline{min-height:28px;line-height:28px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:-8px 0 0}.devui-checkbox-list-inline div:not(:last-child){margin-right:20px}.devui-checkbox-list-inline>*{margin-top:8px}.devui-select{position:relative;width:100%}.devui-select-underlined{border-bottom:1px solid var(--devui-form-control-line, #adb0b8);transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-select-underlined:not([disabled]):not(.disabled):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-select-underlined:not([disabled]):not(.disabled).devui-select-open{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-select-underlined .devui-select-input{border:none}.devui-select-disabled,.devui-select-disabled .devui-select-input{cursor:not-allowed;background-color:var(--devui-disabled-bg, #f5f5f6);border-color:var(--devui-disabled-line, #dfe1e6);color:var(--devui-disabled-text, #adb0b8)}.devui-select-disabled .devui-select-arrow{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8)}.devui-select-open .devui-select-arrow{transform:rotate(180deg)}.devui-dropdown-menu-multiple .devui-select-item.active{color:var(--devui-list-item-active-text, #ffffff);background-color:transparent}.devui-select-selection{position:relative;cursor:pointer}.devui-select-input{cursor:pointer;width:100%;height:28px;padding:4px 28px 4px 10px;color:var(--devui-text, #252b3a);vertical-align:middle;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);outline:none;background-color:var(--devui-form-control-bg, #ffffff);box-sizing:border-box;transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-select-input:not([disabled]):not(.disabled):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-select-input:not([disabled]):not(.disabled):focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-select-input[disabled]:hover,.devui-select-input.disabled:hover{cursor:not-allowed;background-color:var(--devui-disabled-bg, #f5f5f6);border-color:var(--devui-disabled-line, #dfe1e6);color:var(--devui-disabled-text, #adb0b8)}.devui-select-input.devui-select-input-lg{height:44px}.devui-select-input.devui-select-input-sm{height:24px}.devui-select-clearable:hover .devui-select-clear{display:inline-flex}.devui-select-clearable:hover .devui-select-arrow{display:none}.devui-select-clear,.devui-select-arrow{position:absolute;right:0;height:100%;width:28px;display:inline-flex;justify-content:center;align-items:center}.devui-select-clear{display:none}.devui-select-clear:hover{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-select-arrow{transform:rotate(0);transition:transform .25s ease-out}.devui-select-dropdown{position:absolute;width:calc(100% - 2px);overflow:auto;top:100%;left:0;margin:5px 0;border-radius:var(--devui-border-radius, 2px);background:var(--devui-base-bg, #ffffff);box-shadow:0 2px 5px 0 var(--devui-shadow, rgba(37, 43, 58, .2));z-index:999}.devui-select-dropdown-list{max-height:300px;width:100%;overflow-y:auto;padding:0;margin:0}.devui-select-item{font-size:var(--devui-font-size, 12px);display:block;min-height:36px;line-height:1.5;width:100%;padding:10px;clear:both;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:0;color:var(--devui-text, #252b3a);box-sizing:border-box;cursor:pointer}.devui-select-item:hover:not(.active):not(.disabled){color:var(--devui-list-item-hover-text, #526ecc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-select-item.active{color:var(--devui-list-item-active-text, #ffffff);background-color:var(--devui-list-item-active-bg, #5e7ce0)}.devui-select-item.disabled{cursor:not-allowed;background-color:var(--devui-disabled-bg, #f5f5f6);color:var(--devui-disabled-text, #adb0b8)}.devui-scrollbar::-webkit-scrollbar{width:8px;height:8px}.devui-scrollbar::-webkit-scrollbar-corner{background-color:transparent}.devui-scrollbar::-webkit-scrollbar-thumb{border-radius:8px;background-color:var(--devui-line, #adb0b8)}.devui-scrollbar::-webkit-scrollbar-track{background-color:transparent}.fade-enter-active,.fade-leave-active{transform:scale3d(0,1,0,.9999) translate3d(0,1,0,0);transform-origin:0 0%;opacity:1;transition:transform,opacity .25s ease-out}.fade-enter-from,.fade-leave-to{transform:scale3d(0,1,0,0) translate3d(0,1,0,-4px);opacity:0;transition:transform,opacity .25s ease-in}
+.devui-checkbox{position:relative;display:flex;display:-ms-flexbox;align-items:center;-ms-flex-align:center;height:100%;margin:0}.devui-checkbox .devui-checkbox__tick-wrap{position:absolute}.devui-checkbox .devui-checkbox__tick-wrap .devui-checkbox__tick{fill:var(--devui-light-text, #ffffff);stroke-dashoffset:50;opacity:0;transform:scale(0);transform-origin:50% 50%;transition:stroke-dashoffset .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out}.devui-checkbox.active:not(.half-checked) .devui-checkbox__tick{opacity:1;stroke-dashoffset:0;transform:scale(1);transition:stroke-dashoffset .3s cubic-bezier(.755,.05,.855,.06),opacity .2s cubic-bezier(.755,.05,.855,.06)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material:not(.custom-color),.devui-checkbox.half-checked:not(.disabled) .devui-checkbox__material:not(.custom-color){border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.active:not(.disabled) .devui-checkbox__material{background-size:100% 100%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color){background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material:not(.custom-color):hover{border-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox.unchecked:not(.disabled) .devui-checkbox__material.custom-color{background-size:0% 0%;transition:background-size .2s ease-in-out,border-color .2s ease-in-out}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color){background-color:var(--devui-brand, #5e7ce0)}.devui-checkbox.half-checked .devui-checkbox__material:not(.custom-color)>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox.half-checked .devui-checkbox__material.custom-color>.devui-checkbox__halfchecked-bg{opacity:1;transform:scale(.4288);transition:transform .2s cubic-bezier(.755,.05,.855,.06);background-color:var(--devui-light-text, #ffffff)}.devui-checkbox .devui-checkbox__material{text-align:initial;height:14px;width:14px;position:relative;user-select:none;border:1px solid var(--devui-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);background:linear-gradient(var(--devui-brand, #5e7ce0),var(--devui-brand, #5e7ce0)) no-repeat center/0%;margin-right:8px;vertical-align:text-bottom}.devui-checkbox .devui-checkbox__material.devui-checkbox__default-background{background-color:var(--devui-base-bg, #ffffff)}.devui-checkbox .devui-checkbox__material.devui-checkbox--no-label{margin-right:0}.devui-checkbox .devui-checkbox__material>.devui-checkbox__halfchecked-bg{display:inline-block;position:absolute;content:"";background-color:var(--devui-light-text, #ffffff);top:0;left:0;height:100%;width:100%;transform:scale(1);opacity:0}.devui-checkbox .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover{background-color:var(--devui-icon-fill-active, #5e7ce0)}.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):focus,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:active,.devui-checkbox:not(.disabled).half-checked .devui-checkbox__material:not(.custom-color):hover:focus{background-color:var(--devui-brand-active-focus, #344899)}.devui-checkbox__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox label{position:relative;font-weight:400;height:16px;line-height:16px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label>span{display:inline-block;box-sizing:content-box;vertical-align:top}.devui-checkbox.disabled label{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8)}.devui-checkbox.disabled .devui-checkbox__material{border-color:var(--devui-icon-fill-active-disabled, #beccfa);background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox.disabled.unchecked .devui-checkbox__material{border-color:var(--devui-disabled-line, #dfe1e6);background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.half-checked .devui-checkbox__material{background-color:var(--devui-disabled-bg, #f5f5f6)}.devui-checkbox.disabled.half-checked .devui-checkbox__material .devui-checkbox__halfchecked-bg{transform:scale(.4288);background-color:var(--devui-disabled-text, #adb0b8);opacity:1}.devui-checkbox.disabled.active svg polygon{fill:var(--devui-light-text, #ffffff)}.devui-checkbox--no-animation{transition:none!important}.devui-checkbox__column-margin{height:28px;line-height:28px}.devui-checkbox__wrap .devui-checkbox label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host{display:block}.devui-checkbox-list-inline{min-height:28px;line-height:28px;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin:-8px 0 0}.devui-checkbox-list-inline div:not(:last-child){margin-right:20px}.devui-checkbox-list-inline>*{margin-top:8px}.devui-select{position:relative;width:100%}.devui-select--underlined{border-bottom:1px solid var(--devui-form-control-line, #adb0b8);transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-select--underlined:not([disabled]):not(.disabled):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-select--underlined:not([disabled]):not(.disabled).devui-select--open{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-select--underlined .devui-select__input{border:none}.devui-select--disabled,.devui-select--disabled .devui-select__input{cursor:not-allowed;background-color:var(--devui-disabled-bg, #f5f5f6);border-color:var(--devui-disabled-line, #dfe1e6);color:var(--devui-disabled-text, #adb0b8)}.devui-select--disabled .devui-select__arrow{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8)}.devui-select--open .devui-select__arrow{transform:rotate(180deg)}.devui-dropdown-menu-multiple .devui-select__item.active{color:var(--devui-list-item-active-text, #ffffff);background-color:transparent}.devui-select__selection{position:relative;cursor:pointer}.devui-select__input{cursor:pointer;width:100%;height:28px;padding:4px 28px 4px 10px;color:var(--devui-text, #252b3a);vertical-align:middle;border:1px solid var(--devui-form-control-line, #adb0b8);border-radius:var(--devui-border-radius, 2px);outline:none;background-color:var(--devui-form-control-bg, #ffffff);box-sizing:border-box;transition:border-color .3s cubic-bezier(.645,.045,.355,1)}.devui-select__input:not([disabled]):not(.disabled):hover{border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-select__input:not([disabled]):not(.disabled):focus{border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-select__input[disabled]:hover,.devui-select__input.disabled:hover{cursor:not-allowed;background-color:var(--devui-disabled-bg, #f5f5f6);border-color:var(--devui-disabled-line, #dfe1e6);color:var(--devui-disabled-text, #adb0b8)}.devui-select__input.devui-select__input--lg{height:44px}.devui-select__input.devui-select__input--sm{height:24px}.devui-select__clearable:hover .devui-select__clear{display:inline-flex}.devui-select__clearable:hover .devui-select__arrow{display:none}.devui-select__clear,.devui-select__arrow{position:absolute;right:0;height:100%;width:28px;display:inline-flex;justify-content:center;align-items:center}.devui-select__clear{display:none}.devui-select__clear:hover{color:var(--devui-icon-fill-active, #5e7ce0)}.devui-select__arrow{transform:rotate(0);transition:transform .25s ease-out}.devui-select__dropdown{position:absolute;width:calc(100% - 2px);overflow:auto;top:100%;left:0;margin:5px 0;border-radius:var(--devui-border-radius, 2px);background:var(--devui-base-bg, #ffffff);box-shadow:0 2px 5px 0 var(--devui-shadow, rgba(37, 43, 58, .2));z-index:999}.devui-select__dropdown-list{max-height:300px;width:100%;overflow-y:auto;padding:0;margin:0}.devui-select__item{font-size:var(--devui-font-size, 12px);display:block;min-height:36px;line-height:1.5;width:100%;padding:10px;clear:both;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;border:0;color:var(--devui-text, #252b3a);box-sizing:border-box;cursor:pointer}.devui-select__item:hover:not(.active):not(.disabled){color:var(--devui-list-item-hover-text, #526ecc);background-color:var(--devui-list-item-hover-bg, #f2f5fc)}.devui-select__item.active{color:var(--devui-list-item-active-text, #ffffff);background-color:var(--devui-list-item-active-bg, #5e7ce0)}.devui-select__item.disabled{cursor:not-allowed;background-color:var(--devui-disabled-bg, #f5f5f6);color:var(--devui-disabled-text, #adb0b8)}.devui-scrollbar::-webkit-scrollbar{width:8px;height:8px}.devui-scrollbar::-webkit-scrollbar-corner{background-color:transparent}.devui-scrollbar::-webkit-scrollbar-thumb{border-radius:8px;background-color:var(--devui-line, #adb0b8)}.devui-scrollbar::-webkit-scrollbar-track{background-color:transparent}.fade-enter-active,.fade-leave-active{transform:scale3d(0,1,0,.9999) translate3d(0,1,0,0);transform-origin:0 0%;opacity:1;transition:transform,opacity .25s ease-out}.fade-enter-from,.fade-leave-to{transform:scale3d(0,1,0,0) translate3d(0,1,0,-4px);opacity:0;transition:transform,opacity .25s ease-in}

package/skeleton/index.es.js

@@ -45,6 +45,29 @@ const skeletonProps = {
     default: ["100%"]
   }
 };
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block) {
+  const namespace = `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var skeleton = "";
 var Skeleton = defineComponent({
   name: "DSkeleton",
@@ -53,8 +76,9 @@ var Skeleton = defineComponent({
     const {
       slots
     } = ctx;
+    const ns = useNamespace("skeleton");
     function renderAnimate(isAnimated) {
-      return isAnimated ? "devui-skeleton__animated" : "";
+      return isAnimated ? ns.e("animated") : "";
     }
     function renderBorderRadius(isRound) {
       return isRound ? "border-radius: 1em;" : "";
@@ -101,10 +125,10 @@ var Skeleton = defineComponent({
         }
       })();
       return withDirectives(createVNode("div", {
-        "class": "devui-skeleton__paragraph"
+        "class": ns.e("paragraph")
       }, [arr.map((item) => {
         return createVNode("div", {
-          "class": "devui-skeleton__item",
+          "class": ns.e("item"),
           "style": round ? "border-radius: 1em;" : `width: ${item.width}`
         }, null);
       })]), [[vShow, isShown]]);
@@ -139,14 +163,14 @@ var Skeleton = defineComponent({
     }
     function renderDefaultSkeleton() {
       return createVNode(Fragment, null, [withDirectives(createVNode("div", {
-        "class": "devui-skeleton__avatar"
+        "class": ns.e("avatar")
       }, [createVNode("div", {
         "class": "avatar",
         "style": renderAvatarStyle(props.avatarSize, props.avatarShape)
       }, null)]), [[vShow, props.avatar]]), createVNode("div", {
-        "class": "devui-skeleton__group"
+        "class": ns.e("group")
       }, [createVNode("div", {
-        "class": "devui-skeleton__title",
+        "class": ns.e("title"),
         "style": renderTitle(props.title, props.titleWidth, props.round)
       }, null), renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)])]);
     }
@@ -154,7 +178,7 @@ var Skeleton = defineComponent({
       var _a;
       if (props.loading) {
         return createVNode("div", {
-          "class": `devui-skeleton ${renderAnimate(props.animate)}`
+          "class": [ns.b(), renderAnimate(props.animate)]
         }, [renderDefaultSkeleton()]);
       }
       return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
@@ -202,8 +226,9 @@ var SkeletonItem = defineComponent({
     const {
       slots
     } = ctx;
+    const ns = useNamespace("skeleton");
     function renderAnimate(isAnimated) {
-      return isAnimated ? "devui-skeleton__animated" : "";
+      return isAnimated ? ns.e("animated") : "";
     }
     function renderShapeParagraph(rowNum, rowWidth, round) {
       const arr = [];
@@ -247,10 +272,10 @@ var SkeletonItem = defineComponent({
         }
       })();
       return createVNode("div", mergeProps({
-        "class": `devui-skeleton__shape__paragraph ${renderAnimate(props.animate)}`
+        "class": [ns.em("shape", "paragraph"), renderAnimate(props.animate)]
       }, ctx.attrs), [arr.map((item) => {
         return createVNode("div", {
-          "class": "devui-skeleton__shape__paragraph__item",
+          "class": ns.em("shape", "paragraph-item"),
           "style": round ? "border-radius: 1em;" : `width: ${item.width}`
         }, null);
       })]);
@@ -267,14 +292,14 @@ var SkeletonItem = defineComponent({
         switch (props.shape) {
           case "avatar":
             return createVNode(Fragment, null, [createVNode("div", mergeProps({
-              "class": `devui-skeleton__shape__avatar ${renderAnimate(props.animate)}`,
+              "class": [ns.em("shape", "avatar"), renderAnimate(props.animate)],
               "style": renderAvatarStyle(props.avatarShape)
             }, ctx.attrs), null)]);
           case "paragraph":
             return createVNode(Fragment, null, [renderShapeParagraph(props.row, props.rowWidth, props.round)]);
           default:
             return createVNode(Fragment, null, [createVNode("div", mergeProps({
-              "class": `devui-skeleton__shape__${props.shape} ${renderAnimate(props.animate)}`
+              "class": [ns.em("shape", props.shape), renderAnimate(props.animate)]
             }, ctx.attrs), null)]);
         }
       }

package/skeleton/index.umd.js

@@ -1 +1 @@
-(function(d,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(d=typeof globalThis!="undefined"?globalThis:d||self,e(d.index={},d.Vue))})(this,function(d,e){"use strict";const b={row:{type:Number,default:0},animate:{type:Boolean,default:!0},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},avatar:{type:Boolean,default:!1},title:{type:Boolean,default:!0},paragraph:{type:Boolean,default:!0},avatarSize:{type:[String,Number],default:"40px"},avatarShape:{type:String,default:"round"},titleWidth:{type:[String,Number],default:"40%"},rowWidth:{type:[Number,String,Array],default:["100%"]}};var V="",p=e.defineComponent({name:"DSkeleton",props:b,setup(t,f){const{slots:s}=f;function h(a){return a?"devui-skeleton__animated":""}function g(a){return a?"border-radius: 1em;":""}function _(a,u,n,r){const c=[];function S(m){for(let o=0;o<u;o++)c.push({width:m})}return function(){if(n instanceof Array)for(let o=0;o<u;o++)if(n[o])switch(typeof n[o]){case"string":c.push({width:n[o]});break;case"number":c.push({width:`${n[o]}px`})}else c.push({width:1});else switch(typeof n){case"string":S(n);break;case"number":S(`${n}px`);break}}(),e.withDirectives(e.createVNode("div",{class:"devui-skeleton__paragraph"},[c.map(m=>e.createVNode("div",{class:"devui-skeleton__item",style:r?"border-radius: 1em;":`width: ${m.width}`},null))]),[[e.vShow,a]])}function l(a,u){function n(){return u==="square"?"":"border-radius:50%;"}function r(){switch(typeof a){case"string":return`width:${a};height:${a};`;case"number":return`width:${a}px;height:${a}px;`}}return r()+n()}function i(a,u,n){function r(){switch(typeof u){case"string":return`width: ${u};`;case"number":return`width: ${u}px;`}}function c(){return a?null:"visibility: hidden;"}return r()+g(n)+c()}function k(){return e.createVNode(e.Fragment,null,[e.withDirectives(e.createVNode("div",{class:"devui-skeleton__avatar"},[e.createVNode("div",{class:"avatar",style:l(t.avatarSize,t.avatarShape)},null)]),[[e.vShow,t.avatar]]),e.createVNode("div",{class:"devui-skeleton__group"},[e.createVNode("div",{class:"devui-skeleton__title",style:i(t.title,t.titleWidth,t.round)},null),_(t.paragraph,t.row,t.rowWidth,t.round)])])}return()=>{var a;return t.loading?e.createVNode("div",{class:`devui-skeleton ${h(t.animate)}`},[k()]):e.createVNode(e.Fragment,null,[(a=s.default)==null?void 0:a.call(s)])}}});const N={row:{type:Number,default:0},animate:{type:Boolean,default:!0},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},avatarShape:{type:String,default:"round"},titleWidth:{type:[String,Number],default:"40%"},rowWidth:{type:[Number,String,Array],default:["100%"]},shape:{type:String}};var v="",y=e.defineComponent({name:"DSkeletonItem",props:N,setup(t,f){const{slots:s}=f;function h(l){return l?"devui-skeleton__animated":""}function g(l,i,k){const a=[];function u(n){for(let r=0;r<l;r++)a.push({width:n})}return function(){if(i instanceof Array)for(let r=0;r<l;r++)if(i[r])switch(typeof i[r]){case"string":a.push({width:i[r]});break;case"number":a.push({width:`${i[r]}px`})}else a.push({width:1});else switch(typeof i){case"string":u(i);break;case"number":u(`${i}px`);break}}(),e.createVNode("div",e.mergeProps({class:`devui-skeleton__shape__paragraph ${h(t.animate)}`},f.attrs),[a.map(n=>e.createVNode("div",{class:"devui-skeleton__shape__paragraph__item",style:k?"border-radius: 1em;":`width: ${n.width}`},null))])}function _(l){function i(){return l==="square"?"":"border-radius:50%;"}return i()}return()=>{var l;if(t.loading&&t.shape)switch(t.shape){case"avatar":return e.createVNode(e.Fragment,null,[e.createVNode("div",e.mergeProps({class:`devui-skeleton__shape__avatar ${h(t.animate)}`,style:_(t.avatarShape)},f.attrs),null)]);case"paragraph":return e.createVNode(e.Fragment,null,[g(t.row,t.rowWidth,t.round)]);default:return e.createVNode(e.Fragment,null,[e.createVNode("div",e.mergeProps({class:`devui-skeleton__shape__${t.shape} ${h(t.animate)}`},f.attrs),null)])}return e.createVNode(e.Fragment,null,[(l=s.default)==null?void 0:l.call(s)])}}}),w={title:"Skeleton \u9AA8\u67B6\u5C4F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.component(p.name,p),t.component(y.name,y)}};d.Skeleton=p,d.SkeletonItem=y,d.default=w,d.skeletonProps=b,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});
+(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.index={},o.Vue))})(this,function(o,e){"use strict";const k={row:{type:Number,default:0},animate:{type:Boolean,default:!0},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},avatar:{type:Boolean,default:!1},title:{type:Boolean,default:!0},paragraph:{type:Boolean,default:!0},avatarSize:{type:[String,Number],default:"40px"},avatarShape:{type:String,default:"round"},titleWidth:{type:[String,Number],default:"40%"},rowWidth:{type:[Number,String,Array],default:["100%"]}};function y(t,u,c){let n=t;return u&&(n+=`__${u}`),c&&(n+=`--${c}`),n}function V(t){const u=`devui-${t}`;return{b:()=>y(u),e:l=>l?y(u,l):"",m:l=>l?y(u,"",l):"",em:(l,d)=>l&&d?y(u,l,d):""}}var x="",S=e.defineComponent({name:"DSkeleton",props:k,setup(t,u){const{slots:c}=u,n=V("skeleton");function p(a){return a?n.e("animated"):""}function g(a){return a?"border-radius: 1em;":""}function l(a,f,r,i){const m=[];function A(b){for(let h=0;h<f;h++)m.push({width:b})}return function(){if(r instanceof Array)for(let h=0;h<f;h++)if(r[h])switch(typeof r[h]){case"string":m.push({width:r[h]});break;case"number":m.push({width:`${r[h]}px`})}else m.push({width:1});else switch(typeof r){case"string":A(r);break;case"number":A(`${r}px`);break}}(),e.withDirectives(e.createVNode("div",{class:n.e("paragraph")},[m.map(b=>e.createVNode("div",{class:n.e("item"),style:i?"border-radius: 1em;":`width: ${b.width}`},null))]),[[e.vShow,a]])}function d(a,f){function r(){return f==="square"?"":"border-radius:50%;"}function i(){switch(typeof a){case"string":return`width:${a};height:${a};`;case"number":return`width:${a}px;height:${a}px;`}}return i()+r()}function s(a,f,r){function i(){switch(typeof f){case"string":return`width: ${f};`;case"number":return`width: ${f}px;`}}function m(){return a?null:"visibility: hidden;"}return i()+g(r)+m()}function w(){return e.createVNode(e.Fragment,null,[e.withDirectives(e.createVNode("div",{class:n.e("avatar")},[e.createVNode("div",{class:"avatar",style:d(t.avatarSize,t.avatarShape)},null)]),[[e.vShow,t.avatar]]),e.createVNode("div",{class:n.e("group")},[e.createVNode("div",{class:n.e("title"),style:s(t.title,t.titleWidth,t.round)},null),l(t.paragraph,t.row,t.rowWidth,t.round)])])}return()=>{var a;return t.loading?e.createVNode("div",{class:[n.b(),p(t.animate)]},[w()]):e.createVNode(e.Fragment,null,[(a=c.default)==null?void 0:a.call(c)])}}});const $={row:{type:Number,default:0},animate:{type:Boolean,default:!0},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},avatarShape:{type:String,default:"round"},titleWidth:{type:[String,Number],default:"40%"},rowWidth:{type:[Number,String,Array],default:["100%"]},shape:{type:String}};var P="",N=e.defineComponent({name:"DSkeletonItem",props:$,setup(t,u){const{slots:c}=u,n=V("skeleton");function p(d){return d?n.e("animated"):""}function g(d,s,w){const a=[];function f(r){for(let i=0;i<d;i++)a.push({width:r})}return function(){if(s instanceof Array)for(let i=0;i<d;i++)if(s[i])switch(typeof s[i]){case"string":a.push({width:s[i]});break;case"number":a.push({width:`${s[i]}px`})}else a.push({width:1});else switch(typeof s){case"string":f(s);break;case"number":f(`${s}px`);break}}(),e.createVNode("div",e.mergeProps({class:[n.em("shape","paragraph"),p(t.animate)]},u.attrs),[a.map(r=>e.createVNode("div",{class:n.em("shape","paragraph-item"),style:w?"border-radius: 1em;":`width: ${r.width}`},null))])}function l(d){function s(){return d==="square"?"":"border-radius:50%;"}return s()}return()=>{var d;if(t.loading&&t.shape)switch(t.shape){case"avatar":return e.createVNode(e.Fragment,null,[e.createVNode("div",e.mergeProps({class:[n.em("shape","avatar"),p(t.animate)],style:l(t.avatarShape)},u.attrs),null)]);case"paragraph":return e.createVNode(e.Fragment,null,[g(t.row,t.rowWidth,t.round)]);default:return e.createVNode(e.Fragment,null,[e.createVNode("div",e.mergeProps({class:[n.em("shape",t.shape),p(t.animate)]},u.attrs),null)])}return e.createVNode(e.Fragment,null,[(d=c.default)==null?void 0:d.call(c)])}}}),B={title:"Skeleton \u9AA8\u67B6\u5C4F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(t){t.component(S.name,S),t.component(N.name,N)}};o.Skeleton=S,o.SkeletonItem=N,o.default=B,o.skeletonProps=k,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});

package/skeleton/style.css

@@ -1 +1 @@
-.devui-skeleton{display:flex;justify-content:space-between}.devui-skeleton__avatar{display:flex;flex:1;justify-content:center;padding-right:16px}.devui-skeleton__avatar .avatar{width:40px;height:40px;background-color:#f2f2f2}.devui-skeleton__group{flex:11}.devui-skeleton__item,.devui-skeleton__title{width:100%;height:16px;background-color:#f2f2f2}.devui-skeleton__title{margin-top:24px}.devui-skeleton__paragraph{margin-top:12px}.devui-skeleton__item:last-child{width:60%}.devui-skeleton__avatar>.avatar,.devui-skeleton__group>div>.devui-skeleton__item{margin-top:12px}.devui-skeleton__animated>.devui-skeleton__group>.devui-skeleton__title,.devui-skeleton__animated>.devui-skeleton__group>div>.devui-skeleton__item,.devui-skeleton__animated>.devui-skeleton__avatar>.avatar{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #f2f2f2;background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}.devui-skeleton__shape__avatar,.devui-skeleton__shape__image,.devui-skeleton__shape__title,.devui-skeleton__shape__button{background-color:#f2f2f2}.devui-skeleton__shape__avatar{width:40px;height:40px;background-color:#f2f2f2}.devui-skeleton__shape__image{width:200px;height:150px;border-radius:4px}.devui-skeleton__shape__title{width:40%;height:24px}.devui-skeleton__shape__paragraph__item{background-color:#f2f2f2;width:100%;height:16px;margin-bottom:10px}.devui-skeleton__shape__paragraph__item:last-child{width:60%}.devui-skeleton__shape__button{width:115px;height:32px}@keyframes skeletonLoading{to{background-position-x:-20%}}.devui-skeleton__animated .devui-skeleton__shape__avatar,.devui-skeleton__animated.devui-skeleton__shape__avatar,.devui-skeleton__animated.devui-skeleton__shape__image,.devui-skeleton__animated.devui-skeleton__shape__title,.devui-skeleton__animated.devui-skeleton__shape__paragraph>.devui-skeleton__shape__paragraph__item,.devui-skeleton__animated.devui-skeleton__shape__button{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #f2f2f2;background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}
+.devui-skeleton{display:flex;justify-content:space-between}.devui-skeleton__avatar{display:flex;flex:1;justify-content:center;padding-right:16px}.devui-skeleton__avatar .avatar{width:40px;height:40px;background-color:#f2f2f2}.devui-skeleton__group{flex:11}.devui-skeleton__item,.devui-skeleton__title{width:100%;height:16px;background-color:#f2f2f2}.devui-skeleton__title{margin-top:24px}.devui-skeleton__paragraph{margin-top:12px}.devui-skeleton__item:last-child{width:60%}.devui-skeleton__avatar>.avatar,.devui-skeleton__group>div>.devui-skeleton__item{margin-top:12px}.devui-skeleton__animated>.devui-skeleton__group>.devui-skeleton__title,.devui-skeleton__animated>.devui-skeleton__group>div>.devui-skeleton__item,.devui-skeleton__animated>.devui-skeleton__avatar>.avatar{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #f2f2f2;background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}.devui-skeleton__shape--avatar,.devui-skeleton__shape--image,.devui-skeleton__shape--title,.devui-skeleton__shape--button{background-color:#f2f2f2}.devui-skeleton__shape--avatar{width:40px;height:40px;background-color:#f2f2f2}.devui-skeleton__shape--image{width:200px;height:150px;border-radius:4px}.devui-skeleton__shape--title{width:40%;height:24px}.devui-skeleton__shape--paragraph__item{background-color:#f2f2f2;width:100%;height:16px;margin-bottom:10px}.devui-skeleton__shape--paragraph__item:last-child{width:60%}.devui-skeleton__shape--button{width:115px;height:32px}@keyframes skeletonLoading{to{background-position-x:-20%}}.devui-skeleton__animated .devui-skeleton__shape--avatar,.devui-skeleton__animated.devui-skeleton__shape--avatar,.devui-skeleton__animated.devui-skeleton__shape--image,.devui-skeleton__animated.devui-skeleton__shape--title,.devui-skeleton__animated.devui-skeleton__shape--paragraph>.devui-skeleton__shape--paragraph-item,.devui-skeleton__animated.devui-skeleton__shape--button{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #f2f2f2;background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}