vue-devui 1.0.0-alpha.5 → 1.0.0-beta.11

package/select/index.umd.js

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

package/skeleton/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/skeleton/index.es.js

@@ -1 +1,297 @@
-import{defineComponent as e,createVNode as a}from"vue";var t=e({name:"DSkeleton",props:{row:{type:Number||String,default:0},animate:{type:Boolean,default:!0},loading:{type:Boolean,default:!0},avatar:{type:Boolean,default:!1}},setup(e,t){const{slots:l}=t,n=[];for(let a=0;a<e.row;a++)n.push(1);return()=>{var t;return e.loading?a("div",{class:"devui-skeleton "+(e.animate?"devui-skeleton-animated":"devui-skeleton-no-animated")},[e.avatar?a("div",{class:"devui-skeleton__avatar"},[a("div",{class:"avatar"},null)]):null,a("div",{class:"devui-skeleton__item__group"},[n.map((()=>a("div",{class:"devui-skeleton__item"},null)))])]):a("div",{class:"devui-skeleton "+(e.animate?"devui-skeleton-animated":"")},[null==(t=l.default)?void 0:t.call(l)])}}});t.install=function(e){e.component(t.name,t)};var l={title:"Skeleton 骨架屏",category:"数据展示",status:"已完成",install(e){e.use(t)}};export{t as Skeleton,l as default};
+import { defineComponent, createVNode, Fragment, withDirectives, vShow, mergeProps } from "vue";
+var skeleton = "";
+const skeletonProps = {
+  row: {
+    type: Number,
+    default: 0
+  },
+  animate: {
+    type: Boolean,
+    default: true
+  },
+  round: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: true
+  },
+  avatar: {
+    type: Boolean,
+    default: false
+  },
+  title: {
+    type: Boolean,
+    default: true
+  },
+  paragraph: {
+    type: Boolean,
+    default: true
+  },
+  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 Skeleton = defineComponent({
+  name: "DSkeleton",
+  props: skeletonProps,
+  setup(props, ctx) {
+    const {
+      slots
+    } = ctx;
+    function renderAnimate(isAnimated) {
+      return isAnimated ? "devui-skeleton__animated" : "";
+    }
+    function renderBorderRadius(isRound) {
+      return isRound ? "border-radius: 1em;" : "";
+    }
+    function renderParagraph(isShown, rowNum, rowWidth, round) {
+      const arr = [];
+      function pushIntoArray(type) {
+        for (let index2 = 0; index2 < rowNum; index2++) {
+          arr.push({
+            width: type
+          });
+        }
+      }
+      (function handleRowWidth() {
+        if (rowWidth instanceof Array) {
+          for (let index2 = 0; index2 < rowNum; index2++) {
+            if (rowWidth[index2]) {
+              switch (typeof rowWidth[index2]) {
+                case "string":
+                  arr.push({
+                    width: rowWidth[index2]
+                  });
+                  break;
+                case "number":
+                  arr.push({
+                    width: `${rowWidth[index2]}px`
+                  });
+              }
+            } else {
+              arr.push({
+                width: 1
+              });
+            }
+          }
+        } else {
+          switch (typeof rowWidth) {
+            case "string":
+              pushIntoArray(rowWidth);
+              break;
+            case "number":
+              pushIntoArray(`${rowWidth}px`);
+              break;
+          }
+        }
+      })();
+      return withDirectives(createVNode("div", {
+        "class": "devui-skeleton__paragraph"
+      }, [arr.map((item2) => {
+        return createVNode("div", {
+          "class": "devui-skeleton__item",
+          "style": round ? "border-radius: 1em;" : `width: ${item2.width}`
+        }, null);
+      })]), [[vShow, isShown]]);
+    }
+    function renderAvatarStyle(avatarSize, avatarShape) {
+      function renderAvatarShape(avatarShape2) {
+        return avatarShape2 === "square" ? "" : "border-radius:50%;";
+      }
+      function renderAvatarSize(avatarSize2) {
+        switch (typeof avatarSize2) {
+          case "string":
+            return `width:${avatarSize2};height:${avatarSize2};`;
+          case "number":
+            return `width:${avatarSize2}px;height:${avatarSize2}px;`;
+        }
+      }
+      return renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape);
+    }
+    function renderTitle(isVisible, titleWidth, isRound) {
+      function renderTitleWidth(titleWidth2) {
+        switch (typeof titleWidth2) {
+          case "string":
+            return `width: ${titleWidth2};`;
+          case "number":
+            return `width: ${titleWidth2}px;`;
+        }
+      }
+      function renderTitleVisibility(isVisible2) {
+        return isVisible2 ? null : "visibility: hidden;";
+      }
+      return renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible);
+    }
+    function renderDefaultSkeleton() {
+      return createVNode(Fragment, null, [withDirectives(createVNode("div", {
+        "class": "devui-skeleton__avatar"
+      }, [createVNode("div", {
+        "class": "avatar",
+        "style": renderAvatarStyle(props.avatarSize, props.avatarShape)
+      }, null)]), [[vShow, props.avatar]]), createVNode("div", {
+        "class": "devui-skeleton__group"
+      }, [createVNode("div", {
+        "class": "devui-skeleton__title",
+        "style": renderTitle(props.title, props.titleWidth, props.round)
+      }, null), renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)])]);
+    }
+    return () => {
+      var _a;
+      if (props.loading) {
+        return createVNode("div", {
+          "class": `devui-skeleton ${renderAnimate(props.animate)}`
+        }, [renderDefaultSkeleton()]);
+      }
+      return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+var item = "";
+const itemProps = {
+  row: {
+    type: Number,
+    default: 0
+  },
+  animate: {
+    type: Boolean,
+    default: true
+  },
+  round: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: true
+  },
+  avatarShape: {
+    type: String,
+    default: "round"
+  },
+  titleWidth: {
+    type: [String, Number],
+    default: "40%"
+  },
+  rowWidth: {
+    type: [Number, String, Array],
+    default: ["100%"]
+  },
+  shape: {
+    type: String
+  }
+};
+var SkeletonItem = defineComponent({
+  name: "DSkeletonItem",
+  props: itemProps,
+  setup(props, ctx) {
+    const {
+      slots
+    } = ctx;
+    function renderAnimate(isAnimated) {
+      return isAnimated ? "devui-skeleton__animated" : "";
+    }
+    function renderShapeParagraph(rowNum, rowWidth, round) {
+      const arr = [];
+      function pushIntoArray(type) {
+        for (let index2 = 0; index2 < rowNum; index2++) {
+          arr.push({
+            width: type
+          });
+        }
+      }
+      (function handleRowWidth() {
+        if (rowWidth instanceof Array) {
+          for (let index2 = 0; index2 < rowNum; index2++) {
+            if (rowWidth[index2]) {
+              switch (typeof rowWidth[index2]) {
+                case "string":
+                  arr.push({
+                    width: rowWidth[index2]
+                  });
+                  break;
+                case "number":
+                  arr.push({
+                    width: `${rowWidth[index2]}px`
+                  });
+              }
+            } else {
+              arr.push({
+                width: 1
+              });
+            }
+          }
+        } else {
+          switch (typeof rowWidth) {
+            case "string":
+              pushIntoArray(rowWidth);
+              break;
+            case "number":
+              pushIntoArray(`${rowWidth}px`);
+              break;
+          }
+        }
+      })();
+      return createVNode("div", mergeProps({
+        "class": `devui-skeleton__shape__paragraph ${renderAnimate(props.animate)}`
+      }, ctx.attrs), [arr.map((item2) => {
+        return createVNode("div", {
+          "class": "devui-skeleton__shape__paragraph__item",
+          "style": round ? "border-radius: 1em;" : `width: ${item2.width}`
+        }, null);
+      })]);
+    }
+    function renderAvatarStyle(avatarShape) {
+      function renderAvatarShape(avatarShape2) {
+        return avatarShape2 === "square" ? "" : "border-radius:50%;";
+      }
+      return renderAvatarShape(avatarShape);
+    }
+    return () => {
+      var _a;
+      if (props.loading && props.shape) {
+        switch (props.shape) {
+          case "avatar":
+            return createVNode(Fragment, null, [createVNode("div", mergeProps({
+              "class": `devui-skeleton__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)}`
+            }, ctx.attrs), null)]);
+        }
+      }
+      return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
+    };
+  }
+});
+Skeleton.install = function(app) {
+  app.component(Skeleton.name, Skeleton);
+  app.component(SkeletonItem.name, SkeletonItem);
+};
+var index = {
+  title: "Skeleton \u9AA8\u67B6\u5C4F",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.use(Skeleton);
+  }
+};
+export { Skeleton, SkeletonItem, index as default };

package/skeleton/index.umd.js

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

package/skeleton/style.css

@@ -1 +1 @@
-.devui-skeleton{display:flex;justify-content:space-between}.devui-skeleton .devui-skeleton__avatar{display:flex;flex:1;justify-content:center}.devui-skeleton .devui-skeleton__avatar .avatar{width:40px;height:40px;background-color:#ccc;border-radius:50%}.devui-skeleton .devui-skeleton__item__group{flex:7}.devui-skeleton .devui-skeleton__item__group .devui-skeleton__item{width:100%;height:16px;background-color:#ccc;display:inline-block;border-radius:4px}.devui-skeleton .devui-skeleton__item__group .devui-skeleton__item:first-child{width:33%}.devui-skeleton .devui-skeleton__item__group .devui-skeleton__item:last-child{width:61%}.devui-skeleton-animated>.devui-skeleton__avatar>.avatar,.devui-skeleton-animated>.devui-skeleton__item__group>.devui-skeleton__item{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) #cccccc;background-size:200% 100%;background-position-x:180%;animation:2s loading ease-in-out infinite}.devui-skeleton-animated>.devui-skeleton__avatar>.avatar{animation-delay:.1s}@keyframes loading{to{background-position-x:-20%}}
+.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}

package/slider/index.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+  declare function install(app: App): void
+  declare const _default: {
+      install: typeof install;
+      version: string;
+  };
+  export default _default;

package/slider/index.es.js

@@ -1 +1,199 @@
-import{defineComponent as e,computed as u,ref as n,watch as t,createVNode as a,withDirectives as l,mergeProps as o,resolveDirective as i,resolveComponent as d,onMounted as s}from"vue";const v={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1}};var r=e({name:"DInput",directives:{focus:{mounted:function(e,u){u.value&&e.focus()}}},props:{placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},cssClass:{type:String,default:""},error:{type:Boolean,default:!1},size:{type:String,default:""},showPassword:{type:Boolean,default:!1},value:{type:String,default:""},"onUpdate:value":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}},emits:["update:value","focus","blur","change","keydown"],setup(e,a){const l=u((()=>`devui-input-${e.size}`)),o=n(!1),i=n("text"),d=u((()=>({error:e.error,[e.cssClass]:!0,[l.value]:""!==e.size}))),s=u((()=>"password"===i.value));t((()=>e.showPassword),(e=>{i.value=e?"password":"text"}),{immediate:!0}),t((()=>e.value),(e=>{e&&e.length>0&&s.value?o.value=!0:o.value=!1}));return{inputCls:d,inputType:i,showPreviewIcon:s,showPwdIcon:o,onInput:e=>{a.emit("update:value",e.target.value)},onFocus:()=>{a.emit("focus")},onBlur:()=>{a.emit("blur")},onChange:e=>{a.emit("change",e.target.value)},onKeydown:e=>{a.emit("keydown",e)},onChangeInputType:()=>{i.value="password"===i.value?"text":"password"}}},render(){const{value:e,showPreviewIcon:u,showPwdIcon:n,inputCls:t,inputType:s,maxLength:v,autoFocus:r,placeholder:p,disabled:m,onInput:c,onFocus:f,onBlur:w,onChange:y,onKeydown:h,onChangeInputType:g}=this;return a("div",{class:"devui-input__wrap"},[l(a("input",o({dinput:!0},{value:e,disabled:m,type:s,maxlength:v,placeholder:p,class:t,onInput:c,onFocus:f,onBlur:w,onChange:y,onKeydown:h}),null),[[i("focus"),r]]),n&&a("div",{class:"devui-input__preview",onClick:g},[a(d("d-icon"),u?{name:"preview",size:"12px",key:1}:{name:"preview-forbidden",size:"12px",key:2},null)])])}});r.install=function(e){e.component(r.name,r)};var p=e({name:"DSlider",components:{Input:r},props:v,emits:["update:modelValue"],setup(e,t){let l=!0,o=0,i=0;const d=n(null),v=n(e.modelValue),r=n(0),p=n(0),m=n("");function c(u){e.disabled||e.disabled||(u.preventDefault(),function(e){l=!1,i=e.clientX,o=r.value,p.value=o}(u),window.addEventListener("mousemove",f),window.addEventListener("mouseup",w))}function f(e){const u=e.clientX-i;p.value=o+u,y(p.value)}function w(){setTimeout((()=>{l=!0}),100),window.removeEventListener("mousemove",f),window.removeEventListener("mouseup",w)}function y(u){const n=Math.round(d.value.clientWidth);u<0&&(u=0);const a=n/((e.max-e.min)/e.step),l=Math.round(u/a)*a;if(Math.round(l)>=n)return r.value=n,v.value=e.max,m.value="100%",void t.emit("update:modelValue",e.max);m.value=Math.round(100*l/n)+"%",v.value=Math.round(l*(e.max-e.min)/n)+e.min,r.value=u,t.emit("update:modelValue",v.value)}function h(u){if(!e.disabled&&l){i=u.target.getBoundingClientRect().left;y(u.clientX-i)}}function g(u){if(v.value=parseInt(u.target.value),v.value){v.value<e.min&&(v.value=e.min),v.value>e.max&&(v.value=e.max);/^(?:[1-9]?\d|100)$/.test(`${v.value}`)&&(m.value=100*(v.value-e.min)/(e.max-e.min)+"%",t.emit("update:modelValue",v.value))}else v.value=e.min,m.value="0%"}e.modelValue>e.max?m.value="100%":e.modelValue<e.min?m.value="0%":m.value=100*(e.modelValue-e.min)/(e.max-e.min)+"%",s((()=>{const u=d.value.clientWidth;r.value=u*(v.value-e.min)/(e.max-e.min)}));const x=u((()=>e.disabled?" disabled":""));return()=>a("div",{class:"devui-slider"},[a("div",{ref:d,class:"devui-slider__runway"+x.value,onClick:h},[a("div",{class:"devui-slider__bar"+x.value,style:{width:m.value}},null),a("div",{class:"devui-slider__button"+x.value,style:{left:m.value},onMousedown:c},null)]),a("span",{class:"devui-min_count"},[e.min]),a("span",{class:"devui-max_count"},[e.max]),e.showInput?a("div",{class:"devui-input__out-wrap"},[a("input",{onInput:g,value:v.value+""},null)]):""])}});p.install=function(e){e.component(p.name,p)};var m={title:"Slider 滑块",category:"数据录入",install(e){e.use(p)}};export{p as Slider,m as default};
+import { defineComponent, ref, onMounted, computed, createVNode } from "vue";
+const sliderProps = {
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  max: {
+    type: Number,
+    default: 100
+  },
+  min: {
+    type: Number,
+    default: 0
+  },
+  modelValue: {
+    type: Number,
+    default: 0
+  },
+  showInput: {
+    type: Boolean,
+    default: false
+  },
+  step: {
+    type: Number,
+    default: 1
+  },
+  tipsRenderer: {
+    type: String,
+    default: ""
+  }
+};
+var slider = "";
+var Slider = defineComponent({
+  name: "DSlider",
+  props: sliderProps,
+  emits: ["update:modelValue"],
+  setup(props, ctx) {
+    let isClick = true;
+    let startPosition = 0;
+    let startX = 0;
+    const popoverShow = ref(false);
+    const sliderRunway = ref(null);
+    const inputValue = ref(props.modelValue);
+    const currentPosition = ref(0);
+    const newPostion = ref(0);
+    const percentDispaly = ref("");
+    const renderShowInput = () => {
+      return props.showInput ? createVNode("div", {
+        "class": "devui-input__out-wrap"
+      }, [createVNode("input", {
+        "onInput": handleOnInput,
+        "value": inputValue.value + ""
+      }, null)]) : "";
+    };
+    if (props.modelValue > props.max) {
+      percentDispaly.value = "100%";
+    } else if (props.modelValue < props.min) {
+      percentDispaly.value = "0%";
+    } else {
+      percentDispaly.value = (props.modelValue - props.min) * 100 / (props.max - props.min) + "%";
+    }
+    onMounted(() => {
+      const sliderWidth = sliderRunway.value.clientWidth;
+      currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
+    });
+    function handleButtonMousedown(event) {
+      popoverShow.value = true;
+      if (props.disabled)
+        return;
+      event.preventDefault();
+      dragStart(event);
+      window.addEventListener("mousemove", onDragging);
+      window.addEventListener("mouseup", onDragEnd);
+    }
+    function dragStart(event) {
+      isClick = false;
+      startX = event.clientX;
+      startPosition = currentPosition.value;
+      newPostion.value = startPosition;
+    }
+    function onDragging(event) {
+      popoverShow.value = true;
+      const currentX = event.clientX;
+      const pxOffset = currentX - startX;
+      newPostion.value = startPosition + pxOffset;
+      setPostion(newPostion.value);
+    }
+    function onDragEnd() {
+      popoverShow.value = false;
+      setTimeout(() => {
+        isClick = true;
+      }, 100);
+      window.removeEventListener("mousemove", onDragging);
+      window.removeEventListener("mouseup", onDragEnd);
+    }
+    function setPostion(newPosition) {
+      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
+      if (newPosition < 0) {
+        newPosition = 0;
+      }
+      const LengthPerStep = sliderWidth / ((props.max - props.min) / props.step);
+      const steps = Math.round(newPosition / LengthPerStep);
+      const value = steps * LengthPerStep;
+      if (Math.round(value) >= sliderWidth) {
+        currentPosition.value = sliderWidth;
+        inputValue.value = props.max;
+        percentDispaly.value = "100%";
+        ctx.emit("update:modelValue", props.max);
+        return;
+      }
+      percentDispaly.value = Math.round(value * 100 / sliderWidth) + "%";
+      inputValue.value = Math.round(value * (props.max - props.min) / sliderWidth) + props.min;
+      currentPosition.value = newPosition;
+      ctx.emit("update:modelValue", inputValue.value);
+    }
+    function handleRunwayMousedown(event) {
+      if (!props.disabled && isClick) {
+        startX = event.target.getBoundingClientRect().left;
+        const currentX = event.clientX;
+        setPostion(currentX - startX);
+        handleButtonMousedown(event);
+      } else {
+        return;
+      }
+    }
+    function handleOnInput(event) {
+      inputValue.value = parseInt(event.target.value);
+      if (!inputValue.value) {
+        inputValue.value = props.min;
+        percentDispaly.value = "0%";
+      } else {
+        if (inputValue.value < props.min) {
+          inputValue.value = props.min;
+        }
+        if (inputValue.value > props.max) {
+          inputValue.value = props.max;
+        }
+        const re = /^(?:[1-9]?\d|100)$/;
+        if (re.test(`${inputValue.value}`)) {
+          percentDispaly.value = (inputValue.value - props.min) * 100 / (props.max - props.min) + "%";
+          ctx.emit("update:modelValue", inputValue.value);
+        }
+      }
+    }
+    const disableClass = computed(() => {
+      return props.disabled ? " disabled" : "";
+    });
+    const popover = () => {
+      return createVNode("div", {
+        "class": "devui-slider_popover",
+        "style": {
+          left: percentDispaly.value,
+          opacity: popoverShow.value ? 1 : 0
+        }
+      }, [createVNode("div", {
+        "class": "devui-slider_popover-arrow"
+      }, null), createVNode("div", {
+        "class": "devui-slider_popover-content"
+      }, [inputValue.value + " " + props.tipsRenderer])]);
+    };
+    return () => createVNode("div", {
+      "class": "devui-slider"
+    }, [createVNode("div", {
+      "ref": sliderRunway,
+      "class": "devui-slider__runway" + disableClass.value,
+      "onMousedown": handleRunwayMousedown,
+      "onMouseout": () => popoverShow.value = false
+    }, [createVNode("div", {
+      "class": "devui-slider__bar" + disableClass.value,
+      "style": {
+        width: percentDispaly.value
+      }
+    }, null), createVNode("div", {
+      "class": "devui-slider__button" + disableClass.value,
+      "style": {
+        left: percentDispaly.value
+      },
+      "onMousedown": handleButtonMousedown,
+      "onMouseenter": () => popoverShow.value = true,
+      "onMouseout": () => popoverShow.value = false
+    }, null), props.tipsRenderer === "null" ? "" : popover()]), createVNode("span", {
+      "class": "devui-min_count"
+    }, [props.min]), createVNode("span", {
+      "class": "devui-max_count"
+    }, [props.max]), renderShowInput()]);
+  }
+});
+Slider.install = function(app) {
+  app.component(Slider.name, Slider);
+};
+var index = {
+  title: "Slider \u6ED1\u5757",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "100%",
+  install(app) {
+    app.use(Slider);
+  }
+};
+export { Slider, index as default };

package/slider/index.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).index={},e.Vue)}(this,(function(e,t){"use strict";const n={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1}},u={placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},autoFocus:{type:Boolean,default:!1},maxLength:{type:Number,default:Number.MAX_SAFE_INTEGER},cssClass:{type:String,default:""},error:{type:Boolean,default:!1},size:{type:String,default:""},showPassword:{type:Boolean,default:!1},value:{type:String,default:""},"onUpdate:value":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}};var o=t.defineComponent({name:"DInput",directives:{focus:{mounted:function(e,t){t.value&&e.focus()}}},props:u,emits:["update:value","focus","blur","change","keydown"],setup(e,n){const u=t.computed((()=>`devui-input-${e.size}`)),o=t.ref(!1),a=t.ref("text"),l=t.computed((()=>({error:e.error,[e.cssClass]:!0,[u.value]:""!==e.size}))),i=t.computed((()=>"password"===a.value));t.watch((()=>e.showPassword),(e=>{a.value=e?"password":"text"}),{immediate:!0}),t.watch((()=>e.value),(e=>{e&&e.length>0&&i.value?o.value=!0:o.value=!1}));return{inputCls:l,inputType:a,showPreviewIcon:i,showPwdIcon:o,onInput:e=>{n.emit("update:value",e.target.value)},onFocus:()=>{n.emit("focus")},onBlur:()=>{n.emit("blur")},onChange:e=>{n.emit("change",e.target.value)},onKeydown:e=>{n.emit("keydown",e)},onChangeInputType:()=>{a.value="password"===a.value?"text":"password"}}},render(){const{value:e,showPreviewIcon:n,showPwdIcon:u,inputCls:o,inputType:a,maxLength:l,autoFocus:i,placeholder:d,disabled:s,onInput:r,onFocus:v,onBlur:p,onChange:c,onKeydown:m,onChangeInputType:f}=this;return t.createVNode("div",{class:"devui-input__wrap"},[t.withDirectives(t.createVNode("input",t.mergeProps({dinput:!0},{value:e,disabled:s,type:a,maxlength:l,placeholder:d,class:o,onInput:r,onFocus:v,onBlur:p,onChange:c,onKeydown:m}),null),[[t.resolveDirective("focus"),i]]),u&&t.createVNode("div",{class:"devui-input__preview",onClick:f},[n?t.createVNode(t.resolveComponent("d-icon"),{name:"preview",size:"12px",key:1},null):t.createVNode(t.resolveComponent("d-icon"),{name:"preview-forbidden",size:"12px",key:2},null)])])}});o.install=function(e){e.component(o.name,o)};var a=t.defineComponent({name:"DSlider",components:{Input:o},props:n,emits:["update:modelValue"],setup(e,n){let u=!0,o=0,a=0;const l=t.ref(null),i=t.ref(e.modelValue),d=t.ref(0),s=t.ref(0),r=t.ref("");function v(t){e.disabled||e.disabled||(t.preventDefault(),function(e){u=!1,a=e.clientX,o=d.value,s.value=o}(t),window.addEventListener("mousemove",p),window.addEventListener("mouseup",c))}function p(e){const t=e.clientX-a;s.value=o+t,m(s.value)}function c(){setTimeout((()=>{u=!0}),100),window.removeEventListener("mousemove",p),window.removeEventListener("mouseup",c)}function m(t){const u=Math.round(l.value.clientWidth);t<0&&(t=0);const o=u/((e.max-e.min)/e.step),a=Math.round(t/o)*o;if(Math.round(a)>=u)return d.value=u,i.value=e.max,r.value="100%",void n.emit("update:modelValue",e.max);r.value=Math.round(100*a/u)+"%",i.value=Math.round(a*(e.max-e.min)/u)+e.min,d.value=t,n.emit("update:modelValue",i.value)}function f(t){if(!e.disabled&&u){a=t.target.getBoundingClientRect().left;m(t.clientX-a)}}function w(t){if(i.value=parseInt(t.target.value),i.value){i.value<e.min&&(i.value=e.min),i.value>e.max&&(i.value=e.max);/^(?:[1-9]?\d|100)$/.test(`${i.value}`)&&(r.value=100*(i.value-e.min)/(e.max-e.min)+"%",n.emit("update:modelValue",i.value))}else i.value=e.min,r.value="0%"}e.modelValue>e.max?r.value="100%":e.modelValue<e.min?r.value="0%":r.value=100*(e.modelValue-e.min)/(e.max-e.min)+"%",t.onMounted((()=>{const t=l.value.clientWidth;d.value=t*(i.value-e.min)/(e.max-e.min)}));const y=t.computed((()=>e.disabled?" disabled":""));return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:l,class:"devui-slider__runway"+y.value,onClick:f},[t.createVNode("div",{class:"devui-slider__bar"+y.value,style:{width:r.value}},null),t.createVNode("div",{class:"devui-slider__button"+y.value,style:{left:r.value},onMousedown:v},null)]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:w,value:i.value+""},null)]):""])}});a.install=function(e){e.component(a.name,a)};var l={title:"Slider 滑块",category:"数据录入",install(e){e.use(a)}};e.Slider=a,e.default=l,Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module"}));
+(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.index={},a.Vue))})(this,function(a,t){"use strict";const x={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""}};var R="",o=t.defineComponent({name:"DSlider",props:x,emits:["update:modelValue"],setup(e,v){let m=!0,f=0,s=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),r=t.ref(0),h=t.ref(0),u=t.ref(""),S=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:D,value:l.value+""},null)]):"";e.modelValue>e.max?u.value="100%":e.modelValue<e.min?u.value="0%":u.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=V.value.clientWidth;r.value=n*(l.value-e.min)/(e.max-e.min)});function M(n){d.value=!0,!e.disabled&&(n.preventDefault(),E(n),window.addEventListener("mousemove",N),window.addEventListener("mouseup",_))}function E(n){m=!1,s=n.clientX,f=r.value,h.value=f}function N(n){d.value=!0;const c=n.clientX-s;h.value=f+c,b(h.value)}function _(){d.value=!1,setTimeout(()=>{m=!0},100),window.removeEventListener("mousemove",N),window.removeEventListener("mouseup",_)}function b(n){const i=Math.round(V.value.clientWidth);n<0&&(n=0);const c=i/((e.max-e.min)/e.step),y=Math.round(n/c)*c;if(Math.round(y)>=i){r.value=i,l.value=e.max,u.value="100%",v.emit("update:modelValue",e.max);return}u.value=Math.round(y*100/i)+"%",l.value=Math.round(y*(e.max-e.min)/i)+e.min,r.value=n,v.emit("update:modelValue",l.value)}function X(n){if(!e.disabled&&m){s=n.target.getBoundingClientRect().left;const i=n.clientX;b(i-s),M(n)}else return}function D(n){l.value=parseInt(n.target.value),l.value?(l.value<e.min&&(l.value=e.min),l.value>e.max&&(l.value=e.max),/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(u.value=(l.value-e.min)*100/(e.max-e.min)+"%",v.emit("update:modelValue",l.value))):(l.value=e.min,u.value="0%")}const w=t.computed(()=>e.disabled?" disabled":""),I=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:u.value,opacity:d.value?1:0}},[t.createVNode("div",{class:"devui-slider_popover-arrow"},null),t.createVNode("div",{class:"devui-slider_popover-content"},[l.value+" "+e.tipsRenderer])]);return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:V,class:"devui-slider__runway"+w.value,onMousedown:X,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+w.value,style:{width:u.value}},null),t.createVNode("div",{class:"devui-slider__button"+w.value,style:{left:u.value},onMousedown:M,onMouseenter:()=>d.value=!0,onMouseout:()=>d.value=!1},null),e.tipsRenderer==="null"?"":I()]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),S()])}});o.install=function(e){e.component(o.name,o)};var g={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.use(o)}};a.Slider=o,a.default=g,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});