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

package/select/index.umd.js

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

package/select/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "select",
+  "version": "0.0.0",
+  "main": "index.umd.js",
+  "module": "index.es.js",
+  "style": "style.css"
+}

package/select/style.css

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

package/slider/index.es.js

@@ -27,6 +27,10 @@ const sliderProps = {
   tipsRenderer: {
     type: String,
     default: ""
+  },
+  color: {
+    type: String,
+    default: ""
   }
 };
 var slider = "";
@@ -61,7 +65,8 @@ var Slider = defineComponent({
       }
     }
     function setPostion(newPosition) {
-      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
+      const clientWidth = !!sliderRunway.value ? sliderRunway.value.clientWidth : 0;
+      const sliderWidth = Math.round(clientWidth);
       if (newPosition < 0) {
         newPosition = 0;
       }
@@ -106,7 +111,8 @@ var Slider = defineComponent({
         "class": "devui-input__out-wrap"
       }, [createVNode("input", {
         "onInput": handleOnInput,
-        "value": inputValue.value + ""
+        "value": inputValue.value + "",
+        "disabled": props.disabled
       }, null)]) : "";
     };
     if (props.modelValue > props.max) {
@@ -117,7 +123,7 @@ var Slider = defineComponent({
       percentDispaly.value = (props.modelValue - props.min) * 100 / (props.max - props.min) + "%";
     }
     onMounted(() => {
-      const sliderWidth = sliderRunway.value.clientWidth;
+      const sliderWidth = !!sliderRunway.value ? sliderRunway.value.clientWidth : 0;
       currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
     });
     function handleButtonMousedown(event) {
@@ -132,7 +138,8 @@ var Slider = defineComponent({
     }
     function handleRunwayMousedown(event) {
       if (!props.disabled && isClick) {
-        startX = event.target.getBoundingClientRect().left;
+        const _e = event.target;
+        startX = _e.getBoundingClientRect().left;
         const currentX = event.clientX;
         setPostion(currentX - startX);
         handleButtonMousedown(event);
@@ -156,6 +163,9 @@ var Slider = defineComponent({
         "class": "devui-slider_popover-content"
       }, [inputValue.value + " " + props.tipsRenderer])]);
     };
+    const color = computed(() => {
+      return props.disabled ? "" : props.color;
+    });
     return () => createVNode("div", {
       "class": "devui-slider"
     }, [createVNode("div", {
@@ -166,12 +176,14 @@ var Slider = defineComponent({
     }, [createVNode("div", {
       "class": "devui-slider__bar" + disableClass.value,
       "style": {
-        width: percentDispaly.value
+        width: percentDispaly.value,
+        backgroundColor: color.value
       }
     }, null), createVNode("div", {
       "class": "devui-slider__button" + disableClass.value,
       "style": {
-        left: percentDispaly.value
+        left: percentDispaly.value,
+        borderColor: color.value
       },
       "onMousedown": handleButtonMousedown,
       "onMouseenter": () => popoverShow.value = true,

package/slider/index.umd.js

@@ -1 +1 @@
-(function(u,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(u=typeof globalThis!="undefined"?globalThis:u||self,t(u.index={},u.Vue))})(this,function(u,t){"use strict";const M={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="",c=t.defineComponent({name:"DSlider",props:M,emits:["update:modelValue"],setup(e,v){let m=!0,f=0,o=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),s=t.ref(0),h=t.ref(0),a=t.ref("");function S(n){if(l.value=parseInt(n.target.value),!l.value)l.value=e.min,a.value="0%";else{if(l.value<e.min||l.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(a.value=(l.value-e.min)*100/(e.max-e.min)+"%",v.emit("update:modelValue",l.value))}}function N(n){const i=Math.round(V.value.clientWidth);n<0&&(n=0);const r=i/((e.max-e.min)/e.step),y=Math.round(n/r)*r;if(Math.round(y)>=i){s.value=i,l.value=e.max,a.value="100%",v.emit("update:modelValue",e.max);return}a.value=Math.round(y*100/i)+"%",l.value=Math.round(y*(e.max-e.min)/i)+e.min,s.value=n,v.emit("update:modelValue",l.value)}function E(n){m=!1,o=n.clientX,f=s.value,h.value=f}function _(n){d.value=!0;const r=n.clientX-o;h.value=f+r,N(h.value)}function b(){d.value=!1,setTimeout(()=>{m=!0},100),window.removeEventListener("mousemove",_),window.removeEventListener("mouseup",b)}const X=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:S,value:l.value+""},null)]):"";e.modelValue>e.max?a.value="100%":e.modelValue<e.min?a.value="0%":a.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=V.value.clientWidth;s.value=n*(l.value-e.min)/(e.max-e.min)});function g(n){d.value=!0,!e.disabled&&(n.preventDefault(),E(n),window.addEventListener("mousemove",_),window.addEventListener("mouseup",b))}function D(n){if(!e.disabled&&m){o=n.target.getBoundingClientRect().left;const i=n.clientX;N(i-o),g(n)}else return}const w=t.computed(()=>e.disabled?" disabled":""),I=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:a.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:D,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+w.value,style:{width:a.value}},null),t.createVNode("div",{class:"devui-slider__button"+w.value,style:{left:a.value},onMousedown:g,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]),X()])}}),x={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.component(c.name,c)}};u.Slider=c,u.default=x,u.sliderProps=M,Object.defineProperty(u,"__esModule",{value:!0}),u[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 b={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:""},color:{type:String,default:""}};var L="",v=t.defineComponent({name:"DSlider",props:b,emits:["update:modelValue"],setup(e,m){let f=!0,h=0,r=0;const i=t.ref(!1),o=t.ref(null),n=t.ref(e.modelValue),s=t.ref(0),V=t.ref(0),u=t.ref("");function X(l){if(n.value=parseInt(l.target.value),!n.value)n.value=e.min,u.value="0%";else{if(n.value<e.min||n.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${n.value}`)&&(u.value=(n.value-e.min)*100/(e.max-e.min)+"%",m.emit("update:modelValue",n.value))}}function _(l){const c=o.value?o.value.clientWidth:0,d=Math.round(c);l<0&&(l=0);const S=d/((e.max-e.min)/e.step),w=Math.round(l/S)*S;if(Math.round(w)>=d){s.value=d,n.value=e.max,u.value="100%",m.emit("update:modelValue",e.max);return}u.value=Math.round(w*100/d)+"%",n.value=Math.round(w*(e.max-e.min)/d)+e.min,s.value=l,m.emit("update:modelValue",n.value)}function C(l){f=!1,r=l.clientX,h=s.value,V.value=h}function g(l){i.value=!0;const d=l.clientX-r;V.value=h+d,_(V.value)}function M(){i.value=!1,setTimeout(()=>{f=!0},100),window.removeEventListener("mousemove",g),window.removeEventListener("mouseup",M)}const D=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:X,value:n.value+"",disabled:e.disabled},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 l=o.value?o.value.clientWidth:0;s.value=l*(n.value-e.min)/(e.max-e.min)});function N(l){i.value=!0,!e.disabled&&(l.preventDefault(),C(l),window.addEventListener("mousemove",g),window.addEventListener("mouseup",M))}function I(l){if(!e.disabled&&f){r=l.target.getBoundingClientRect().left;const d=l.clientX;_(d-r),N(l)}else return}const y=t.computed(()=>e.disabled?" disabled":""),R=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:u.value,opacity:i.value?1:0}},[t.createVNode("div",{class:"devui-slider_popover-arrow"},null),t.createVNode("div",{class:"devui-slider_popover-content"},[n.value+" "+e.tipsRenderer])]),x=t.computed(()=>e.disabled?"":e.color);return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:o,class:"devui-slider__runway"+y.value,onMousedown:I,onMouseout:()=>i.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+y.value,style:{width:u.value,backgroundColor:x.value}},null),t.createVNode("div",{class:"devui-slider__button"+y.value,style:{left:u.value,borderColor:x.value},onMousedown:N,onMouseenter:()=>i.value=!0,onMouseout:()=>i.value=!1},null),e.tipsRenderer==="null"?"":R()]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),D()])}}),E={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.component(v.name,v)}};a.Slider=v,a.default=E,a.sliderProps=b,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/splitter/index.es.js

@@ -22,7 +22,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { defineComponent, createVNode, Teleport, Transition, renderSlot, isVNode, computed, onMounted, watch, onUnmounted, ref, unref, nextTick, mergeProps, toRefs, Fragment, inject, reactive, withDirectives, provide, resolveComponent, onUpdated } from "vue";
-import { shift, offset, autoPlacement, arrow, computePosition } from "@floating-ui/dom";
+import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 var baseOverlay = "";
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
@@ -169,6 +169,9 @@ const flexibleOverlayProps = {
     type: [Number, Object],
     default: 8
   },
+  shiftOffset: {
+    type: Number
+  },
   align: {
     type: String,
     default: null
@@ -236,7 +239,6 @@ function useOverlay(props, emit) {
     const overlayEl = unref(overlayRef.value);
     const arrowEl = unref(arrowRef.value);
     const middleware = [
-      shift(),
       offset(props.offset),
       autoPlacement({
         alignment: props.align,
@@ -244,12 +246,22 @@ function useOverlay(props, emit) {
       })
     ];
     props.showArrow && middleware.push(arrow({ element: arrowEl }));
+    props.shiftOffset !== void 0 && middleware.push(shift());
     const { x, y, placement, middlewareData } = await computePosition(hostEl, overlayEl, {
       strategy: "fixed",
       middleware
     });
+    let applyX = x;
+    let applyY = y;
+    if (props.shiftOffset !== void 0) {
+      const { x: shiftX, y: shiftY } = middlewareData.shift;
+      shiftX < 0 && (applyX -= props.shiftOffset);
+      shiftX > 0 && (applyX += props.shiftOffset);
+      shiftY < 0 && (applyY -= props.shiftOffset);
+      shiftY > 0 && (applyY += props.shiftOffset);
+    }
     emit("positionChange", placement);
-    Object.assign(overlayEl.style, { top: `${y}px`, left: `${x}px` });
+    Object.assign(overlayEl.style, { top: `${applyY}px`, left: `${applyX}px` });
     props.showArrow && updateArrowPosition(arrowEl, placement, middlewareData.arrow, overlayEl);
   };
   watch(() => props.modelValue, () => {