vue-devui 1.0.0-beta.9 → 1.0.0-rc.1

package/skeleton/index.es.js

@@ -110,32 +110,32 @@ var Skeleton = defineComponent({
       })]), [[vShow, isShown]]);
     }
     function renderAvatarStyle(avatarSize, avatarShape) {
-      function renderAvatarShape(avatarShape2) {
-        return avatarShape2 === "square" ? "" : "border-radius:50%;";
+      function renderAvatarShape() {
+        return avatarShape === "square" ? "" : "border-radius:50%;";
       }
-      function renderAvatarSize(avatarSize2) {
-        switch (typeof avatarSize2) {
+      function renderAvatarSize() {
+        switch (typeof avatarSize) {
           case "string":
-            return `width:${avatarSize2};height:${avatarSize2};`;
+            return `width:${avatarSize};height:${avatarSize};`;
           case "number":
-            return `width:${avatarSize2}px;height:${avatarSize2}px;`;
+            return `width:${avatarSize}px;height:${avatarSize}px;`;
         }
       }
-      return renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape);
+      return renderAvatarSize() + renderAvatarShape();
     }
     function renderTitle(isVisible, titleWidth, isRound) {
-      function renderTitleWidth(titleWidth2) {
-        switch (typeof titleWidth2) {
+      function renderTitleWidth() {
+        switch (typeof titleWidth) {
           case "string":
-            return `width: ${titleWidth2};`;
+            return `width: ${titleWidth};`;
           case "number":
-            return `width: ${titleWidth2}px;`;
+            return `width: ${titleWidth}px;`;
         }
       }
-      function renderTitleVisibility(isVisible2) {
-        return isVisible2 ? null : "visibility: hidden;";
+      function renderTitleVisibility() {
+        return isVisible ? null : "visibility: hidden;";
       }
-      return renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible);
+      return renderTitleWidth() + renderBorderRadius(isRound) + renderTitleVisibility();
     }
     function renderDefaultSkeleton() {
       return createVNode(Fragment, null, [withDirectives(createVNode("div", {
@@ -256,10 +256,10 @@ var SkeletonItem = defineComponent({
       })]);
     }
     function renderAvatarStyle(avatarShape) {
-      function renderAvatarShape(avatarShape2) {
-        return avatarShape2 === "square" ? "" : "border-radius:50%;";
+      function renderAvatarShape() {
+        return avatarShape === "square" ? "" : "border-radius:50%;";
       }
-      return renderAvatarShape(avatarShape);
+      return renderAvatarShape();
     }
     return () => {
       var _a;

package/skeleton/index.umd.js

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

package/slider/index.es.js

@@ -65,8 +65,9 @@ var Slider = defineComponent({
     });
     function handleButtonMousedown(event) {
       popoverShow.value = true;
-      if (props.disabled)
+      if (props.disabled) {
         return;
+      }
       event.preventDefault();
       dragStart(event);
       window.addEventListener("mousemove", onDragging);
@@ -129,11 +130,8 @@ var Slider = defineComponent({
         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;
+        if (inputValue.value < props.min || inputValue.value > props.max) {
+          return;
         }
         const re = /^(?:[1-9]?\d|100)$/;
         if (re.test(`${inputValue.value}`)) {

package/slider/index.umd.js

@@ -1 +1 @@
-(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"});
+(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 g={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:g,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){if(l.value=parseInt(n.target.value),!l.value)l.value=e.min,u.value="0%";else{if(l.value<e.min||l.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(u.value=(l.value-e.min)*100/(e.max-e.min)+"%",v.emit("update:modelValue",l.value))}}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 x={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.use(o)}};a.Slider=o,a.default=x,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});

package/slider/style.css

@@ -1 +1 @@
-.devui-slider{position:relative;width:90%;display:block}.devui-slider.disabled{cursor:not-allowed;background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway{position:relative;width:100%;padding:4px 0;margin:4px 0;cursor:pointer;box-sizing:border-box;height:5px;display:flex;align-items:center;background-color:var(--devui-default-bg, #f3f6f8)}.devui-slider__runway.disabled{cursor:not-allowed}.devui-slider__runway .devui-slider__bar{height:6px;background-color:var(--devui-default-line, #5e7ce0);border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);position:absolute}.devui-slider__runway .devui-slider__bar.disabled{background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__bar.disabled:hover{cursor:not-allowed}.devui-slider__runway .devui-slider__button{position:absolute;width:14px;height:14px;border:2px solid var(--devui-default-line, #5e7ce0);background-color:var(--devui-base-bg, #ffffff);border-radius:50%;margin-left:-7px;transition:transform .2s ease-in-out}.devui-slider__runway .devui-slider__button:hover{transform:scale(1.2)}.devui-slider__runway .devui-slider__button.disabled{background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__button.disabled:hover{cursor:not-allowed;transform:none}.devui-slider__runway .devui-slider_popover{position:relative;bottom:26px;transform:translate(-50%);border-radius:var(--devui-border-radius-feedback, 4px);font-size:var(--devui-font-size-sm, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-arrow{position:absolute;left:50%;margin-left:-4px;bottom:-4px;width:8px;height:8px;transform:rotate(45deg);display:block;z-index:-1;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-content{padding:5px 14px;text-align:center;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider .devui-min_count{position:absolute;top:15px;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-max_count{position:absolute;top:15px;right:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-input__out-wrap{font-size:var(--devui-font-size, 12px);position:absolute;right:-60px;top:-12px;padding:5px 10px;cursor:text;margin-left:20px}.devui-slider .devui-input__out-wrap input{width:40px;text-align:center}
+.devui-slider{position:relative;width:90%;display:block}.devui-slider.disabled{cursor:not-allowed;background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway{position:relative;width:100%;padding:4px 0;margin:4px 0;cursor:pointer;box-sizing:border-box;height:5px;display:flex;align-items:center;background-color:var(--devui-default-bg, #f3f6f8)}.devui-slider__runway.disabled{cursor:not-allowed}.devui-slider__runway .devui-slider__bar{height:6px;background-color:var(--devui-default-line, #5e7ce0);border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);position:absolute}.devui-slider__runway .devui-slider__bar.disabled{background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__bar.disabled:hover{cursor:not-allowed}.devui-slider__runway .devui-slider__button{position:absolute;width:14px;height:14px;border:2px solid var(--devui-default-line, #5e7ce0);background-color:var(--devui-base-bg, #ffffff);border-radius:50%;margin-left:-7px;transition:transform .2s ease-in-out}.devui-slider__runway .devui-slider__button:hover{transform:scale(1.2)}.devui-slider__runway .devui-slider__button.disabled{background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__button.disabled:hover{cursor:not-allowed;transform:none}.devui-slider__runway .devui-slider_popover{position:relative;bottom:26px;transform:translate(-50%);border-radius:var(--devui-border-radius-feedback, 4px);font-size:var(--devui-font-size-sm, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-arrow{position:absolute;left:50%;margin-left:-4px;bottom:-4px;width:8px;height:8px;transform:rotate(45deg);display:block;z-index:-1;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-content{padding:5px 14px;text-align:center;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider .devui-min_count{position:absolute;top:15px;left:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-max_count{position:absolute;top:15px;right:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-input__out-wrap{font-size:var(--devui-font-size, 12px);position:absolute;right:-60px;top:-12px;padding:5px 10px;cursor:text;margin-left:20px}.devui-slider .devui-input__out-wrap input{width:40px;text-align:center}