vue-devui 1.0.0-rc.6 → 1.0.0-rc.9

package/checkbox/index.umd.js

@@ -1 +1 @@
-var q=Object.defineProperty,K=Object.defineProperties;var M=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,z=Object.prototype.propertyIsEnumerable;var F=(o,t,u)=>t in o?q(o,t,{enumerable:!0,configurable:!0,writable:!0,value:u}):o[t]=u,S=(o,t)=>{for(var u in t||(t={}))_.call(t,u)&&F(o,u,t[u]);if(x)for(var u of x(t))z.call(t,u)&&F(o,u,t[u]);return o},C=(o,t)=>K(o,M(t));(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.index={},o.Vue))})(this,function(o,t){"use strict";var u="";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}},T=C(S({},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}}),j=C(S({},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}}),N=Symbol("d-checkbox-group");var k=t.defineComponent({name:"DCheckbox",props:T,emits:["change","update:checked","update:modelValue"],setup(n,a){const e=t.inject(N,null),c=t.computed(()=>n.checked||n.modelValue),m=t.computed(()=>(e==null?void 0:e.disabled.value)||n.disabled),h=t.computed(()=>{var i,g;return(g=(i=e==null?void 0:e.isItemChecked)==null?void 0:i.call(e,n.value))!=null?g:c.value}),l=t.computed(()=>{var i;return(i=e==null?void 0:e.isShowTitle.value)!=null?i:n.isShowTitle}),d=t.computed(()=>{var i;return(i=e==null?void 0:e.showAnimation.value)!=null?i:n.showAnimation}),r=t.computed(()=>{var i;return(i=e==null?void 0:e.color.value)!=null?i:n.color}),b=e==null?void 0:e.itemWidth.value,f=e==null?void 0:e.direction.value,y=(i,g)=>{var V;if(m.value)return Promise.resolve(!1);const w=(V=n.beforeChange)!=null?V:e==null?void 0:e.beforeChange;if(w){const v=w(i,g);return typeof v=="boolean"?Promise.resolve(v):v}return Promise.resolve(!0)},s=()=>{const i=!c.value;e==null||e.toggleGroupVal(n.value),a.emit("update:checked",i),a.emit("update:modelValue",i),a.emit("change",i)};return{itemWidth:b,direction:f,mergedColor:r,mergedDisabled:m,mergedIsShowTitle:l,mergedChecked:h,mergedShowAnimation:d,handleClick:()=>{y(!c.value,n.label).then(i=>i&&s())}}},render(){var B;const{itemWidth:n,direction:a,mergedChecked:e,mergedDisabled:c,mergedIsShowTitle:m,mergedShowAnimation:h,halfchecked:l,title:d,label:r,handleClick:b,name:f,value:y,mergedColor:s,$slots:p}=this,i={"devui-checkbox-column-margin":a==="column","devui-checkbox-wrap":typeof n!="undefined"},g=n?[`width: ${n}px`]:[],w={"devui-checkbox":!0,active:e,halfchecked:l,disabled:c,unchecked:!e},V=m?d||r:"",v=s&&l||s?`linear-gradient(${s}, ${s})`:"",R=[`border-color:${(e||l)&&s?s:""}`,`background-image:${v}`,`background-color:${s&&l?s:""}`],W={"devui-checkbox-material":!0,"custom-color":s,"devui-checkbox-no-label":!r&&!p.default,"devui-no-animation":!h,"devui-checkbox-default-background":!l},D={"devui-tick":!0,"devui-no-animation":!h},I=U=>U.stopPropagation(),$={indeterminate:l};return t.createVNode("div",{class:i,style:g},[t.createVNode("div",{class:w},[t.createVNode("label",{title:V,onClick:b},[t.createVNode("input",t.mergeProps({name:f||y,class:"devui-checkbox-input",type:"checkbox"},$,{checked:e,disabled:c,onClick:I,onChange:I}),null),t.createVNode("span",{style:R,class:W},[t.createVNode("span",{class:"devui-checkbox-halfchecked-bg"},null),t.createVNode("svg",{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:"devui-checkbox-tick"},[t.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[t.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:D},null)])])]),r||((B=p.default)==null?void 0:B.call(p))])])])}}),E="",A=t.defineComponent({name:"DCheckboxGroup",props:j,emits:["change","update:modelValue"],setup(n,a){const e=t.toRef(n,"modelValue"),c={checked:!1,isShowTitle:!0,halfchecked:!1,showAnimation:!0,disabled:!1},m=l=>{let d=-1;if(typeof e.value[0]=="string"?d=e.value.findIndex(r=>r===l):typeof e.value[0]=="object"&&(d=e.value.findIndex(r=>r.value===l)),d===-1){if(typeof n.options[0]=="object"){const b=n.options.find(y=>y.value===l),f=[...e.value,b];a.emit("update:modelValue",f),a.emit("change",f);return}const r=[...e.value,l];a.emit("update:modelValue",r),a.emit("change",r);return}e.value.splice(d,1),a.emit("update:modelValue",e.value),a.emit("change",e.value)},h=l=>{if(typeof e.value[0]=="string")return e.value.includes(l);if(typeof e.value[0]=="object")return e.value.some(d=>d.value===l)};return t.provide(N,{disabled:t.toRef(n,"disabled"),isShowTitle:t.toRef(n,"isShowTitle"),color:t.toRef(n,"color"),showAnimation:t.toRef(n,"showAnimation"),beforeChange:n.beforeChange,isItemChecked:h,toggleGroupVal:m,itemWidth:t.toRef(n,"itemWidth"),direction:t.toRef(n,"direction")}),{defaultOpt:c}},render(){var h;const{direction:n,$slots:a,defaultOpt:e,options:c}=this;let m=(h=a.default)==null?void 0:h.call(a);return(c==null?void 0:c.length)>0&&(m=c.map(l=>{let d=null;return typeof l=="string"?d=Object.assign({},e,{label:l,value:l}):typeof l=="object"&&(d=Object.assign({},e,C(S({},l),{label:l.name}))),t.createVNode(k,d,null)})),t.createVNode("div",{class:"devui-checkbox-group"},[t.createVNode("div",{class:{"devui-checkbox-list-inline":n==="row"}},[m])])}}),O={title:"Checkbox \u590D\u9009\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(n){n.component(k.name,k),n.component(A.name,A)}};o.Checkbox=k,o.checkboxGroupInjectionKey=N,o.checkboxGroupProps=j,o.checkboxProps=T,o.default=O,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});
+var E=Object.defineProperty,H=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var x=Object.getOwnPropertySymbols;var Q=Object.prototype.hasOwnProperty,X=Object.prototype.propertyIsEnumerable;var _=(d,l,m)=>l in d?E(d,l,{enumerable:!0,configurable:!0,writable:!0,value:m}):d[l]=m,$=(d,l)=>{for(var m in l||(l={}))Q.call(l,m)&&_(d,m,l[m]);if(x)for(var m of x(l))X.call(l,m)&&_(d,m,l[m]);return d},j=(d,l)=>H(d,J(l));(function(d,l){typeof exports=="object"&&typeof module!="undefined"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(d=typeof globalThis!="undefined"?globalThis:d||self,l(d.index={},d.Vue))})(this,function(d,l){"use strict";const m={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},size:{type:String,default:"md"}},p=j($({},m),{checked:{type:Boolean,default:!1},value:{type:[Number,String]},label:{type:String,default:""},"onUpdate:checked":{type:Function,default:void 0},onChange:{type:Function,default:void 0},modelValue:{type:Boolean},"onUpdate:modelValue":{type:Function},border:{type:Boolean,default:!1}}),z=j($({},m),{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},border:{type:Boolean,default:!1},max:{type:Number,default:void 0},textColor:{type:String,default:""}}),S=Symbol("d-checkbox-group");function N(t,o,e){let i=t;return o&&(i+=`__${o}`),e&&(i+=`--${e}`),i}function R(t,o=!1){const e=o?`.devui-${t}`:`devui-${t}`;return{b:()=>N(e),e:a=>a?N(e,a):"",m:a=>a?N(e,"",a):"",em:(a,c)=>a&&c?N(e,a,c):""}}function D(t,o){const e=l.inject(S,null),i=l.computed(()=>t.checked||t.modelValue),s=l.computed(()=>{var n,C;return(C=(n=e==null?void 0:e.isItemChecked)==null?void 0:n.call(e,t.value))!=null?C:i.value}),f=l.computed(()=>{const n=e==null?void 0:e.max.value;return!!n&&(e==null?void 0:e.modelValue.value.length)>=n&&!s.value}),u=l.computed(()=>(e==null?void 0:e.disabled.value)||t.disabled||f.value),a=l.computed(()=>{var n;return(n=e==null?void 0:e.isShowTitle.value)!=null?n:t.isShowTitle}),c=l.computed(()=>{var n;return(n=e==null?void 0:e.showAnimation.value)!=null?n:t.showAnimation}),r=l.computed(()=>{var n;return(n=e==null?void 0:e.color.value)!=null?n:t.color}),h=e==null?void 0:e.itemWidth.value,g=e==null?void 0:e.direction.value,b=(n,C)=>{var P;if(u.value)return Promise.resolve(!1);const B=(P=t.beforeChange)!=null?P:e==null?void 0:e.beforeChange;if(B){const w=B(n,C);return typeof w=="boolean"?Promise.resolve(w):w}return Promise.resolve(!0)},V=()=>{const n=!i.value;e==null||e.toggleGroupVal(t.value),o.emit("update:checked",n),o.emit("update:modelValue",n),o.emit("change",n)},v=()=>{b(!i.value,t.label).then(n=>n&&V())},y=l.computed(()=>{var n;return(n=e==null?void 0:e.size.value)!=null?n:t.size}),k=l.computed(()=>{var n;return(n=e==null?void 0:e.border.value)!=null?n:t.border});return{mergedChecked:s,mergedDisabled:u,mergedIsShowTitle:a,mergedShowAnimation:c,mergedColor:r,itemWidth:h,direction:g,handleClick:v,size:y,border:k}}function U(t,o){const e=l.toRef(t,"modelValue"),i={checked:!1,isShowTitle:!0,halfChecked:!1,showAnimation:!0,disabled:!1},s=u=>{let a=-1;if(["string","number"].includes(typeof e.value[0])?a=e.value.findIndex(c=>c===u):typeof e.value[0]=="object"&&(a=e.value.findIndex(c=>c.value===u)),a===-1){if(typeof t.options[0]=="object"){const r=t.options.find(g=>g.value===u),h=[...e.value,r];o.emit("update:modelValue",h),o.emit("change",h);return}const c=[...e.value,u];o.emit("update:modelValue",c),o.emit("change",c);return}e.value.splice(a,1),o.emit("update:modelValue",e.value),o.emit("change",e.value)},f=u=>{if(["string","number"].includes(typeof e.value[0]))return e.value.includes(u);if(typeof e.value[0]=="object")return e.value.some(a=>a.value===u)};return l.provide(S,{disabled:l.toRef(t,"disabled"),isShowTitle:l.toRef(t,"isShowTitle"),color:l.toRef(t,"color"),showAnimation:l.toRef(t,"showAnimation"),beforeChange:t.beforeChange,isItemChecked:f,toggleGroupVal:s,itemWidth:l.toRef(t,"itemWidth"),direction:l.toRef(t,"direction"),size:l.toRef(t,"size"),border:l.toRef(t,"border"),max:l.toRef(t,"max"),modelValue:l.toRef(t,"modelValue"),textColor:l.toRef(t,"textColor")}),{defaultOpt:i}}function q(){const t=l.inject(S,null);return{mergedTextColor:l.computed(()=>{var e;return(e=t==null?void 0:t.textColor.value)!=null?e:void 0})}}var Y="",T=l.defineComponent({name:"DCheckbox",props:p,emits:["change","update:checked","update:modelValue"],setup(t,o){const e=R("checkbox"),{mergedChecked:i,mergedDisabled:s,mergedIsShowTitle:f,mergedShowAnimation:u,mergedColor:a,itemWidth:c,direction:r,handleClick:h,size:g,border:b}=D(t,o);return()=>{var O,W;const V={[e.e("column-margin")]:r==="column",[e.e("wrap")]:typeof c!="undefined"},v=c?[`width: ${c}px`]:[],y={[e.b()]:!0,active:i.value,"half-checked":t.halfChecked,disabled:s.value,unchecked:!i.value},k=f.value?t.title||t.label:"",n=a.value&&t.halfChecked||a.value?`linear-gradient(${a.value}, ${a.value})`:"",C=[`border-color:${(i.value||t.halfChecked)&&a.value?a.value:""}`,`background-image:${n}`,`background-color:${a.value&&t.halfChecked?a.value:""}`],B={[e.e("material")]:!0,"custom-color":a.value,[e.m("no-label")]:!t.label&&!o.slots.default,[e.m("no-animation")]:!u.value,[e.e("default-background")]:!t.halfChecked},P={[e.e("tick")]:!0,[e.m("no-animation")]:!u.value},w={[e.m(g.value)]:b.value,[e.m("bordered")]:b.value},F=M=>M.stopPropagation(),L={indeterminate:t.halfChecked};return l.createVNode("div",{class:V,style:v},[l.createVNode("div",{class:y},[l.createVNode("label",{title:k,onClick:h,class:w,style:{width:c?"100%":"auto"}},[l.createVNode("input",l.mergeProps({name:t.name||t.value,class:e.e("input"),type:"checkbox"},L,{checked:i.value,disabled:s.value,onClick:F,onChange:F}),null),l.createVNode("span",{style:C,class:B},[l.createVNode("span",{class:e.e("halfchecked-bg")},null),l.createVNode("svg",{viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg",class:e.e("tick-wrap")},[l.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[l.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:P},null)])])]),t.label||((W=(O=o.slots).default)==null?void 0:W.call(O))])])])}}}),Z="",A=l.defineComponent({name:"DCheckboxGroup",props:z,emits:["change","update:modelValue"],setup(t,o){const e=R("checkbox"),{defaultOpt:i}=U(t,o);return()=>{var u,a;let s=(a=(u=o.slots).default)==null?void 0:a.call(u);const f=()=>{var c;return s||(((c=t.options)==null?void 0:c.length)>0&&(s=t.options.map(r=>{let h=null;return typeof r=="string"?h=Object.assign({},i,{label:r,value:r}):typeof r=="object"&&(h=Object.assign({},i,j($({},r),{label:r.name}))),l.createVNode(T,h,null)})),s)};return l.createVNode("div",{class:e.e("group")},[l.createVNode("div",{class:{[e.m("list-inline")]:t.direction==="row"}},[f()])])}}}),G="",I=l.defineComponent({name:"DCheckboxButton",props:p,emits:["change","update:checked","update:modelValue"],setup(t,o){const e=R("checkbox-button"),{mergedChecked:i,mergedDisabled:s,mergedIsShowTitle:f,mergedColor:u,handleClick:a,size:c}=D(t,o),{mergedTextColor:r}=q();return()=>{var y,k;const h=f.value?t.title||t.label:"",g=[`border-color:${i.value&&u.value?u.value:""}`,`background-color:${i.value&&u.value?u.value:""}`,`color:${i.value&&r.value?r.value:""}`],b={[e.b()]:!0,active:i.value,disabled:s.value,unchecked:!i.value},V={[e.e("content")]:!0,[e.m(c.value)]:!0},v=n=>n.stopPropagation();return l.createVNode("label",{title:h,onClick:a,class:b},[l.createVNode("input",{name:t.name||t.value,class:e.e("input"),type:"checkbox",checked:i.value,disabled:s.value,onClick:v,onChange:v},null),l.createVNode("span",{style:g,class:V},[t.label||((k=(y=o.slots).default)==null?void 0:k.call(y))])])}}}),K={title:"Checkbox \u590D\u9009\u6846",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(t){t.component(T.name,T),t.component(A.name,A),t.component(I.name,I)}};d.Checkbox=T,d.CheckboxButton=I,d.CheckboxGroup=A,d.checkboxGroupInjectionKey=S,d.checkboxGroupProps=z,d.checkboxProps=p,d.default=K,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});

package/checkbox/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-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 .devui-checkbox--bordered,.devui-checkbox.half-checked .devui-checkbox--bordered{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:18px;line-height:18px;cursor:pointer;color:var(--devui-text, #252b3a);margin:0;display:block}.devui-checkbox label.devui-checkbox--lg{font-size:14px}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material{width:16px;height:16px}.devui-checkbox label.devui-checkbox--lg .devui-checkbox__material>svg{width:16px;height:16px}.devui-checkbox label.devui-checkbox--lg.devui-checkbox--bordered{height:40px;line-height:40px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--md{font-size:14px}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md .devui-checkbox__material>svg{width:16px;height:16px}.devui-checkbox label.devui-checkbox--md.devui-checkbox--bordered{height:36px;line-height:36px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--sm{font-size:12px}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox label.devui-checkbox--sm.devui-checkbox--bordered{height:32px;line-height:32px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--xs{font-size:12px}.devui-checkbox label.devui-checkbox--xs .devui-checkbox__material{width:14px;height:14px}.devui-checkbox label.devui-checkbox--xs .devui-checkbox__material>svg{width:14px;height:14px}.devui-checkbox label.devui-checkbox--xs.devui-checkbox--bordered{height:28px;line-height:28px;padding:0 15px 0 10px}.devui-checkbox label.devui-checkbox--bordered{border:1px solid var(--devui-disabled-line, #dfe1e6);border-radius:var(--devui-border-radius, 2px)}.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-checkbox-button{display:inline-block;position:relative}.devui-checkbox-button__input{opacity:0;position:absolute;margin:0;z-index:-1;width:0;height:0;overflow:hidden;left:0;pointer-events:none}.devui-checkbox-button__content{font-size:14px;color:var(--devui-text, #252b3a);padding:10px 20px;cursor:pointer;border:1px solid var(--devui-line, #adb0b8);border-left:none;display:inline-block;line-height:1;user-select:none;box-shadow:-1px 0 #e5f0fb}.devui-checkbox-button__content.devui-checkbox-button--lg{font-size:14px;padding:12px 20px}.devui-checkbox-button__content.devui-checkbox-button--md{font-size:14px;padding:10px 20px}.devui-checkbox-button__content.devui-checkbox-button--sm{font-size:12px;padding:9px 15px}.devui-checkbox-button__content.devui-checkbox-button--xs{font-size:12px;padding:7px 15px}.devui-checkbox-button.active .devui-checkbox-button__content{color:#fff;background-color:var(--devui-brand, #5e7ce0);border-color:var(--devui-brand, #5e7ce0)}.devui-checkbox-button.active.disabled .devui-checkbox-button__content{color:#fff;background-color:var(--devui-icon-fill-active-disabled, #beccfa)}.devui-checkbox-button.disabled .devui-checkbox-button__content{cursor:not-allowed;color:var(--devui-disabled-text, #adb0b8);background-color:#fff;border-color:var(--devui-disabled-line, #dfe1e6)}.devui-checkbox-button:first-child .devui-checkbox-button__content{border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);border-left:1px solid var(--devui-line, #adb0b8);box-shadow:none}.devui-checkbox-button:last-child .devui-checkbox-button__content{border-top-right-radius:var(--devui-border-radius, 2px);border-bottom-right-radius:var(--devui-border-radius, 2px)}

package/date-picker/index.es.js

@@ -1,4 +1,19 @@
-import { defineComponent, inject, computed, ref, watch, createVNode, withDirectives, mergeProps, resolveDirective, resolveComponent, toRefs, createTextVNode, reactive, onMounted, onUnmounted } from "vue";
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { inject, computed, ref, toRefs, defineComponent, createVNode, resolveDynamicComponent, mergeProps, shallowRef, watch, createTextVNode, reactive, onMounted, onUnmounted } from "vue";
 const getDateTime = (d) => {
   const year = d.getFullYear();
   const month = d.getMonth() + 1;
@@ -201,175 +216,145 @@ const betweenDate = (date, left, right) => {
   return true;
 };
 const inputProps = {
-  placeholder: {
+  modelValue: {
     type: String,
-    default: void 0
+    default: ""
   },
   disabled: {
     type: Boolean,
     default: false
   },
-  autoFocus: {
-    type: Boolean,
-    default: false
-  },
-  maxLength: {
-    type: Number,
-    default: Number.MAX_SAFE_INTEGER
-  },
-  cssClass: {
-    type: String,
-    default: ""
-  },
   error: {
     type: Boolean,
     default: false
   },
   size: {
     type: String,
-    default: ""
+    default: "md"
   },
-  showPassword: {
+  validateEvent: {
     type: Boolean,
-    default: false
+    default: true
   },
-  modelValue: {
+  prefix: {
     type: String,
     default: ""
   },
-  "update:modelValue": {
-    type: Function,
-    default: void 0
-  },
-  onChange: {
-    type: Function,
-    default: void 0
-  },
-  onKeydown: {
-    type: Function,
-    default: void 0
+  suffix: {
+    type: String,
+    default: ""
   },
-  onFocus: {
-    type: Function,
-    default: void 0
+  showPassword: {
+    type: Boolean,
+    default: false
   },
-  onBlur: {
-    type: Function,
-    default: void 0
+  clearable: {
+    type: Boolean,
+    default: false
   }
 };
 const FORM_ITEM_TOKEN = Symbol("dFormItem");
-var input = "";
-var Input = defineComponent({
-  name: "DInput",
-  directives: {
-    focus: {
-      mounted: function(el, binding) {
-        if (binding.value) {
-          el.focus();
-        }
-      }
-    }
-  },
-  props: inputProps,
-  emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
-  setup(props, ctx) {
-    const formItemContext = inject(FORM_ITEM_TOKEN);
-    const sizeCls = computed(() => `devui-input-${props.size}`);
-    const showPwdIcon = ref(false);
-    const inputType = ref("text");
-    const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
-    const inputCls = computed(() => ({
-      "devui-error": props.error || isValidateError.value,
-      [props.cssClass]: true,
-      "devui-input-restore": showPwdIcon.value,
-      [sizeCls.value]: props.size !== ""
-    }));
-    const showPreviewIcon = computed(() => inputType.value === "password");
-    watch(() => props.showPassword, (flg) => {
-      inputType.value = flg ? "password" : "text";
-      showPwdIcon.value = props.showPassword;
-    }, {
-      immediate: true
-    });
-    watch(() => props.modelValue, () => {
-      formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
-    });
-    const onInput = ($event) => {
-      ctx.emit("update:modelValue", $event.target.value);
-    }, onFocus = () => {
-      ctx.emit("focus");
-    }, onBlur = () => {
-      ctx.emit("blur");
-      formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
-    }, onChange = ($event) => {
-      ctx.emit("change", $event.target.value);
-    }, onKeydown = ($event) => {
-      ctx.emit("keydown", $event);
-    }, onChangeInputType = () => {
-      inputType.value = inputType.value === "password" ? "text" : "password";
-    };
-    return {
-      inputCls,
-      inputType,
-      showPreviewIcon,
-      showPwdIcon,
-      onInput,
-      onFocus,
-      onBlur,
-      onChange,
-      onKeydown,
-      onChangeInputType
-    };
-  },
-  render() {
-    const {
-      modelValue,
-      showPreviewIcon,
-      showPwdIcon,
-      inputCls,
-      inputType,
-      maxLength,
-      autoFocus,
-      placeholder,
-      disabled,
-      onInput,
-      onFocus,
-      onBlur,
-      onChange,
-      onKeydown,
-      onChangeInputType
-    } = this;
-    return createVNode("div", {
-      "class": "devui-input__wrap"
-    }, [withDirectives(createVNode("input", mergeProps({
-      dinput: true
-    }, {
-      "value": modelValue,
-      "disabled": disabled,
-      "type": inputType,
-      "maxlength": maxLength,
-      "placeholder": placeholder,
-      "class": inputCls,
-      "onInput": onInput,
-      "onFocus": onFocus,
-      "onBlur": onBlur,
-      "onChange": onChange,
-      "onKeydown": onKeydown
-    }), null), [[resolveDirective("focus"), autoFocus]]), showPwdIcon && createVNode("div", {
-      "class": "devui-input__preview",
-      "onClick": onChangeInputType
-    }, [showPreviewIcon ? createVNode(resolveComponent("d-icon"), {
-      "name": "preview-forbidden",
-      "size": "12px",
-      "key": 1
-    }, null) : createVNode(resolveComponent("d-icon"), {
-      "name": "preview",
-      "size": "12px",
-      "key": 2
-    }, null)])]);
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
   }
-});
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `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
+  };
+}
+function useInputRender(props, ctx) {
+  const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const isValidateError = computed(() => (formItemContext == null ? void 0 : formItemContext.validateState) === "error");
+  const ns = useNamespace("input");
+  const slotNs = useNamespace("input-slot");
+  const isFocus = ref(false);
+  const { error, size, disabled } = toRefs(props);
+  const slots = ctx.slots;
+  const _a = ctx.attrs, { style, class: customClass } = _a, otherAttrs = __objRest(_a, ["style", "class"]);
+  const customStyle = { style };
+  const wrapClasses = computed(() => ({
+    [ns.e("wrapper")]: true,
+    [ns.m("focus")]: isFocus.value,
+    [ns.m("disabled")]: disabled.value,
+    [ns.m("error")]: error.value || isValidateError.value,
+    [ns.m("feedback")]: formItemContext == null ? void 0 : formItemContext.showFeedback
+  }));
+  const inputClasses = computed(() => [
+    {
+      [ns.b()]: true,
+      [ns.m(size.value)]: true,
+      [slotNs.b()]: slots.prepend || slots.append,
+      [ns.m("append")]: slots.append,
+      [ns.m("prepend")]: slots.prepend
+    },
+    customClass
+  ]);
+  return { isFocus, wrapClasses, inputClasses, customStyle, otherAttrs };
+}
+function useInputEvent(isFocus, props, ctx) {
+  const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+  const onFocus = (e) => {
+    isFocus.value = true;
+    ctx.emit("focus", e);
+  };
+  const onBlur = (e) => {
+    isFocus.value = false;
+    ctx.emit("blur", e);
+    if (props.validateEvent) {
+      formItemContext == null ? void 0 : formItemContext.validate("blur").catch((err) => console.warn(err));
+    }
+  };
+  const onInput = (e) => {
+    ctx.emit("update:modelValue", e.target.value);
+  };
+  const onChange = (e) => {
+    ctx.emit("change", e.target.value);
+  };
+  const onKeydown = (e) => {
+    ctx.emit("keydown", e);
+  };
+  const onClear = () => {
+    ctx.emit("update:modelValue", "");
+    ctx.emit("clear");
+  };
+  return { onFocus, onBlur, onInput, onChange, onKeydown, onClear };
+}
+function useInputFunction(input2) {
+  const refInput = computed(() => input2.value);
+  const select = () => {
+    var _a;
+    (_a = refInput.value) == null ? void 0 : _a.select();
+  };
+  const focus = () => {
+    var _a;
+    (_a = refInput.value) == null ? void 0 : _a.focus();
+  };
+  const blur = () => {
+    var _a;
+    (_a = refInput.value) == null ? void 0 : _a.blur();
+  };
+  return { select, focus, blur };
+}
+var input = "";
+function isUrl(value) {
+  return /^((http|https):)?\/\//.test(value);
+}
+const DEFAULT_PREFIX = "icon";
 const iconProps = {
   name: {
     type: String,
@@ -377,43 +362,211 @@ const iconProps = {
     required: true
   },
   size: {
-    type: String,
+    type: [Number, String],
     default: "inherit"
   },
   color: {
     type: String,
     default: "inherit"
   },
+  component: {
+    type: Object,
+    default: null
+  },
   classPrefix: {
     type: String,
-    default: "icon"
+    default: DEFAULT_PREFIX
+  }
+};
+const svgIconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  size: {
+    type: [Number, String],
+    default: "inherit"
   }
 };
+var icon = "";
+var svgIcon = defineComponent({
+  name: "DSvgIcon",
+  props: svgIconProps,
+  setup(props) {
+    const {
+      name,
+      color,
+      size
+    } = toRefs(props);
+    const ns = useNamespace("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)]);
+    };
+  }
+});
 var Icon = defineComponent({
   name: "DIcon",
   props: iconProps,
-  setup(props) {
+  setup(props, {
+    attrs
+  }) {
     const {
+      component,
       name,
       size,
       color,
       classPrefix
     } = toRefs(props);
-    return () => {
-      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
+    const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
+    const iconSize = computed(() => {
+      return typeof size.value === "number" ? `${size.value}px` : size.value;
+    });
+    const svgIconDom = () => {
+      return createVNode(IconComponent, mergeProps({
+        "name": name.value,
+        "color": color.value,
+        "size": iconSize.value
+      }, attrs), null);
+    };
+    const imgIconDom = () => {
+      return createVNode("img", mergeProps({
         "src": name.value,
         "alt": name.value.split("/")[name.value.split("/").length - 1],
         "style": {
-          width: size.value,
-          verticalAlign: "text-bottom"
+          width: iconSize.value || ""
         }
-      }, null) : createVNode("i", {
-        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
+      }, attrs), null);
+    };
+    const fontIconDom = () => {
+      const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
+      return createVNode("i", mergeProps({
+        "class": [classPrefix.value, fontIconClass],
         "style": {
-          fontSize: size.value,
+          fontSize: iconSize.value,
           color: color.value
         }
-      }, null);
+      }, attrs), null);
+    };
+    return () => {
+      return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
+    };
+  }
+});
+var Input = defineComponent({
+  name: "DInput",
+  inheritAttrs: false,
+  props: inputProps,
+  emits: ["update:modelValue", "focus", "blur", "input", "change", "keydown", "clear"],
+  setup(props, ctx) {
+    const formItemContext = inject(FORM_ITEM_TOKEN, void 0);
+    const {
+      modelValue,
+      disabled
+    } = toRefs(props);
+    const ns = useNamespace("input");
+    const slotNs = useNamespace("input-slot");
+    const {
+      isFocus,
+      wrapClasses,
+      inputClasses,
+      customStyle,
+      otherAttrs
+    } = useInputRender(props, ctx);
+    const {
+      onFocus,
+      onBlur,
+      onInput,
+      onChange,
+      onKeydown,
+      onClear
+    } = useInputEvent(isFocus, props, ctx);
+    const input2 = shallowRef();
+    const {
+      select,
+      focus,
+      blur
+    } = useInputFunction(input2);
+    const passwordVisible = ref(false);
+    const clickPasswordIcon = () => {
+      passwordVisible.value = !passwordVisible.value;
+      focus();
+    };
+    const prefixVisiable = ctx.slots.prefix || props.prefix;
+    const suffixVisiable = ctx.slots.suffix || props.suffix || props.showPassword || props.clearable;
+    const showPwdVisible = computed(() => props.showPassword && !props.disabled);
+    const showClearable = computed(() => props.clearable && !props.disabled);
+    watch(() => props.modelValue, () => {
+      if (props.validateEvent) {
+        formItemContext == null ? void 0 : formItemContext.validate("change").catch((err) => console.warn(err));
+      }
+    });
+    ctx.expose({
+      select,
+      focus,
+      blur
+    });
+    return () => {
+      var _a, _b, _c, _d, _e, _f, _g, _h;
+      return createVNode("div", mergeProps({
+        "class": inputClasses.value
+      }, customStyle), [ctx.slots.prepend && createVNode("div", {
+        "class": slotNs.e("prepend")
+      }, [(_b = (_a = ctx.slots).prepend) == null ? void 0 : _b.call(_a)]), createVNode("div", {
+        "class": wrapClasses.value
+      }, [prefixVisiable && createVNode("span", {
+        "class": slotNs.e("prefix")
+      }, [ctx.slots.prefix && createVNode("div", null, [(_d = (_c = ctx.slots).prefix) == null ? void 0 : _d.call(_c)]), props.prefix && createVNode(Icon, {
+        "size": props.size,
+        "name": props.prefix
+      }, null)]), createVNode("input", mergeProps({
+        "ref": input2,
+        "value": modelValue.value,
+        "disabled": disabled.value,
+        "class": ns.e("inner")
+      }, otherAttrs, {
+        "type": props.showPassword ? passwordVisible.value ? "text" : "password" : "text",
+        "onInput": onInput,
+        "onFocus": onFocus,
+        "onBlur": onBlur,
+        "onChange": onChange,
+        "onKeydown": onKeydown
+      }), null), suffixVisiable && createVNode("span", {
+        "class": slotNs.e("suffix")
+      }, [props.suffix && createVNode(Icon, {
+        "size": props.size,
+        "name": props.suffix
+      }, null), ctx.slots.suffix && createVNode("div", null, [(_f = (_e = ctx.slots).suffix) == null ? void 0 : _f.call(_e)]), showPwdVisible.value && createVNode(Icon, {
+        "size": props.size,
+        "class": ns.em("password", "icon"),
+        "name": passwordVisible.value ? "preview" : "preview-forbidden",
+        "onClick": clickPasswordIcon
+      }, null), showClearable.value && createVNode(Icon, {
+        "size": props.size,
+        "class": ns.em("clear", "icon"),
+        "name": "close",
+        "onClick": onClear
+      }, null)])]), ctx.slots.append && createVNode("div", {
+        "class": slotNs.e("append")
+      }, [(_h = (_g = ctx.slots).append) == null ? void 0 : _h.call(_g)])]);
     };
   }
 });