vue-devui 1.0.0-pre.0 → 1.0.0-rc.10

package/skeleton/index.es.js

@@ -1,5 +1,4 @@
 import { defineComponent, createVNode, Fragment, withDirectives, vShow, mergeProps } from "vue";
-var skeleton = "";
 const skeletonProps = {
   row: {
     type: Number,
@@ -46,6 +45,30 @@ const skeletonProps = {
     default: ["100%"]
   }
 };
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
+var skeleton = "";
 var Skeleton = defineComponent({
   name: "DSkeleton",
   props: skeletonProps,
@@ -53,8 +76,9 @@ var Skeleton = defineComponent({
     const {
       slots
     } = ctx;
+    const ns = useNamespace("skeleton");
     function renderAnimate(isAnimated) {
-      return isAnimated ? "devui-skeleton__animated" : "";
+      return isAnimated ? ns.e("animated") : "";
     }
     function renderBorderRadius(isRound) {
       return isRound ? "border-radius: 1em;" : "";
@@ -101,52 +125,52 @@ var Skeleton = defineComponent({
         }
       })();
       return withDirectives(createVNode("div", {
-        "class": "devui-skeleton__paragraph"
-      }, [arr.map((item2) => {
+        "class": ns.e("paragraph")
+      }, [arr.map((item) => {
         return createVNode("div", {
-          "class": "devui-skeleton__item",
-          "style": round ? "border-radius: 1em;" : `width: ${item2.width}`
+          "class": ns.e("item"),
+          "style": round ? "border-radius: 1em;" : `width: ${item.width}`
         }, null);
       })]), [[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", {
-        "class": "devui-skeleton__avatar"
+        "class": ns.e("avatar")
       }, [createVNode("div", {
         "class": "avatar",
         "style": renderAvatarStyle(props.avatarSize, props.avatarShape)
       }, null)]), [[vShow, props.avatar]]), createVNode("div", {
-        "class": "devui-skeleton__group"
+        "class": ns.e("group")
       }, [createVNode("div", {
-        "class": "devui-skeleton__title",
+        "class": ns.e("title"),
         "style": renderTitle(props.title, props.titleWidth, props.round)
       }, null), renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)])]);
     }
@@ -154,14 +178,13 @@ var Skeleton = defineComponent({
       var _a;
       if (props.loading) {
         return createVNode("div", {
-          "class": `devui-skeleton ${renderAnimate(props.animate)}`
+          "class": [ns.b(), renderAnimate(props.animate)]
         }, [renderDefaultSkeleton()]);
       }
       return createVNode(Fragment, null, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }
 });
-var item = "";
 const itemProps = {
   row: {
     type: Number,
@@ -195,6 +218,7 @@ const itemProps = {
     type: String
   }
 };
+var skeletonItem = "";
 var SkeletonItem = defineComponent({
   name: "DSkeletonItem",
   props: itemProps,
@@ -202,8 +226,9 @@ var SkeletonItem = defineComponent({
     const {
       slots
     } = ctx;
+    const ns = useNamespace("skeleton");
     function renderAnimate(isAnimated) {
-      return isAnimated ? "devui-skeleton__animated" : "";
+      return isAnimated ? ns.e("animated") : "";
     }
     function renderShapeParagraph(rowNum, rowWidth, round) {
       const arr = [];
@@ -247,19 +272,19 @@ var SkeletonItem = defineComponent({
         }
       })();
       return createVNode("div", mergeProps({
-        "class": `devui-skeleton__shape__paragraph ${renderAnimate(props.animate)}`
-      }, ctx.attrs), [arr.map((item2) => {
+        "class": [ns.em("shape", "paragraph"), renderAnimate(props.animate)]
+      }, ctx.attrs), [arr.map((item) => {
         return createVNode("div", {
-          "class": "devui-skeleton__shape__paragraph__item",
-          "style": round ? "border-radius: 1em;" : `width: ${item2.width}`
+          "class": ns.em("shape", "paragraph-item"),
+          "style": round ? "border-radius: 1em;" : `width: ${item.width}`
         }, null);
       })]);
     }
     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;
@@ -267,14 +292,14 @@ var SkeletonItem = defineComponent({
         switch (props.shape) {
           case "avatar":
             return createVNode(Fragment, null, [createVNode("div", mergeProps({
-              "class": `devui-skeleton__shape__avatar ${renderAnimate(props.animate)}`,
+              "class": [ns.em("shape", "avatar"), renderAnimate(props.animate)],
               "style": renderAvatarStyle(props.avatarShape)
             }, ctx.attrs), null)]);
           case "paragraph":
             return createVNode(Fragment, null, [renderShapeParagraph(props.row, props.rowWidth, props.round)]);
           default:
             return createVNode(Fragment, null, [createVNode("div", mergeProps({
-              "class": `devui-skeleton__shape__${props.shape} ${renderAnimate(props.animate)}`
+              "class": [ns.em("shape", props.shape), renderAnimate(props.animate)]
             }, ctx.attrs), null)]);
         }
       }
@@ -282,16 +307,13 @@ var SkeletonItem = defineComponent({
     };
   }
 });
-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);
+    app.component(Skeleton.name, Skeleton);
+    app.component(SkeletonItem.name, SkeletonItem);
   }
 };
-export { Skeleton, SkeletonItem, index as default };
+export { Skeleton, SkeletonItem, index as default, skeletonProps };

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

package/skeleton/style.css

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

package/slider/index.es.js

@@ -27,8 +27,35 @@ const sliderProps = {
   tipsRenderer: {
     type: String,
     default: ""
+  },
+  color: {
+    type: String,
+    default: ""
   }
 };
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var slider = "";
 var Slider = defineComponent({
   name: "DSlider",
@@ -38,39 +65,49 @@ var Slider = defineComponent({
     let isClick = true;
     let startPosition = 0;
     let startX = 0;
+    const ns = useNamespace("slider");
     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) + "%";
+    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.max) {
+          return;
+        }
+        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);
+        }
+      }
     }
-    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)
+    function setPostion(newPosition) {
+      const clientWidth = !!sliderRunway.value ? sliderRunway.value.clientWidth : 0;
+      const sliderWidth = Math.round(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;
-      event.preventDefault();
-      dragStart(event);
-      window.addEventListener("mousemove", onDragging);
-      window.addEventListener("mouseup", onDragEnd);
+      }
+      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 dragStart(event) {
       isClick = false;
@@ -93,29 +130,40 @@ var Slider = defineComponent({
       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);
+    const renderShowInput = () => {
+      return props.showInput ? createVNode("div", {
+        "class": ns.e("input-wrap")
+      }, [createVNode("input", {
+        "onInput": handleOnInput,
+        "value": inputValue.value + "",
+        "disabled": props.disabled
+      }, 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 ? sliderRunway.value.clientWidth : 0;
+      currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
+    });
+    function handleButtonMousedown(event) {
+      popoverShow.value = true;
+      if (props.disabled) {
         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);
+      event.preventDefault();
+      dragStart(event);
+      window.addEventListener("mousemove", onDragging);
+      window.addEventListener("mouseup", onDragEnd);
     }
     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);
@@ -123,74 +171,60 @@ var Slider = defineComponent({
         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.max) {
-          return;
-        }
-        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",
+        "class": ns.e("popover"),
         "style": {
           left: percentDispaly.value,
           opacity: popoverShow.value ? 1 : 0
         }
       }, [createVNode("div", {
-        "class": "devui-slider_popover-arrow"
+        "class": ns.e("popover-arrow")
       }, null), createVNode("div", {
-        "class": "devui-slider_popover-content"
+        "class": ns.e("popover-content")
       }, [inputValue.value + " " + props.tipsRenderer])]);
     };
+    const color = computed(() => {
+      return props.disabled ? "" : props.color;
+    });
     return () => createVNode("div", {
-      "class": "devui-slider"
+      "class": ns.b()
     }, [createVNode("div", {
       "ref": sliderRunway,
-      "class": "devui-slider__runway" + disableClass.value,
+      "class": [ns.e("runway"), disableClass.value],
       "onMousedown": handleRunwayMousedown,
       "onMouseout": () => popoverShow.value = false
     }, [createVNode("div", {
-      "class": "devui-slider__bar" + disableClass.value,
+      "class": [ns.e("bar"), disableClass.value],
       "style": {
-        width: percentDispaly.value
+        width: percentDispaly.value,
+        backgroundColor: color.value
       }
     }, null), createVNode("div", {
-      "class": "devui-slider__button" + disableClass.value,
+      "class": [ns.e("button"), disableClass.value],
       "style": {
-        left: percentDispaly.value
+        left: percentDispaly.value,
+        borderColor: color.value
       },
       "onMousedown": handleButtonMousedown,
       "onMouseenter": () => popoverShow.value = true,
       "onMouseout": () => popoverShow.value = false
     }, null), props.tipsRenderer === "null" ? "" : popover()]), createVNode("span", {
-      "class": "devui-min_count"
+      "class": ns.e("min-count")
     }, [props.min]), createVNode("span", {
-      "class": "devui-max_count"
+      "class": ns.e("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);
+    app.component(Slider.name, Slider);
   }
 };
-export { Slider, index as default };
+export { Slider, index as default, sliderProps };

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 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"});
+(function(i,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(i=typeof globalThis!="undefined"?globalThis:i||self,t(i.index={},i.Vue))})(this,function(i,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:""},color:{type:String,default:""}};function v(e,r,u){let c=e;return r&&(c+=`__${r}`),u&&(c+=`--${u}`),c}function D(e,r=!1){const u=r?`.devui-${e}`:`devui-${e}`;return{b:()=>v(u),e:l=>l?v(u,l):"",m:l=>l?v(u,"",l):"",em:(l,a)=>l&&a?v(u,l,a):""}}var P="",b=t.defineComponent({name:"DSlider",props:g,emits:["update:modelValue"],setup(e,r){let u=!0,c=0,f=0;const d=D("slider"),m=t.ref(!1),l=t.ref(null),a=t.ref(e.modelValue),h=t.ref(0),y=t.ref(0),o=t.ref("");function R(n){if(a.value=parseInt(n.target.value),!a.value)a.value=e.min,o.value="0%";else{if(a.value<e.min||a.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${a.value}`)&&(o.value=(a.value-e.min)*100/(e.max-e.min)+"%",r.emit("update:modelValue",a.value))}}function M(n){const V=l.value?l.value.clientWidth:0,s=Math.round(V);n<0&&(n=0);const C=s/((e.max-e.min)/e.step),N=Math.round(n/C)*C;if(Math.round(N)>=s){h.value=s,a.value=e.max,o.value="100%",r.emit("update:modelValue",e.max);return}o.value=Math.round(N*100/s)+"%",a.value=Math.round(N*(e.max-e.min)/s)+e.min,h.value=n,r.emit("update:modelValue",a.value)}function _(n){u=!1,f=n.clientX,c=h.value,y.value=c}function x(n){m.value=!0;const s=n.clientX-f;y.value=c+s,M(y.value)}function S(){m.value=!1,setTimeout(()=>{u=!0},100),window.removeEventListener("mousemove",x),window.removeEventListener("mouseup",S)}const $=()=>e.showInput?t.createVNode("div",{class:d.e("input-wrap")},[t.createVNode("input",{onInput:R,value:a.value+"",disabled:e.disabled},null)]):"";e.modelValue>e.max?o.value="100%":e.modelValue<e.min?o.value="0%":o.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=l.value?l.value.clientWidth:0;h.value=n*(a.value-e.min)/(e.max-e.min)});function E(n){m.value=!0,!e.disabled&&(n.preventDefault(),_(n),window.addEventListener("mousemove",x),window.addEventListener("mouseup",S))}function B(n){if(!e.disabled&&u){f=n.target.getBoundingClientRect().left;const s=n.clientX;M(s-f),E(n)}else return}const w=t.computed(()=>e.disabled?" disabled":""),L=()=>t.createVNode("div",{class:d.e("popover"),style:{left:o.value,opacity:m.value?1:0}},[t.createVNode("div",{class:d.e("popover-arrow")},null),t.createVNode("div",{class:d.e("popover-content")},[a.value+" "+e.tipsRenderer])]),X=t.computed(()=>e.disabled?"":e.color);return()=>t.createVNode("div",{class:d.b()},[t.createVNode("div",{ref:l,class:[d.e("runway"),w.value],onMousedown:B,onMouseout:()=>m.value=!1},[t.createVNode("div",{class:[d.e("bar"),w.value],style:{width:o.value,backgroundColor:X.value}},null),t.createVNode("div",{class:[d.e("button"),w.value],style:{left:o.value,borderColor:X.value},onMousedown:E,onMouseenter:()=>m.value=!0,onMouseout:()=>m.value=!1},null),e.tipsRenderer==="null"?"":L()]),t.createVNode("span",{class:d.e("min-count")},[e.min]),t.createVNode("span",{class:d.e("max-count")},[e.max]),$()])}}),I={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.component(b.name,b)}};i.Slider=b,i.default=I,i.sliderProps=g,Object.defineProperty(i,"__esModule",{value:!0}),i[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;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}
+.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, #f7f8fa)}.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, 4px);border-bottom-left-radius:var(--devui-border-radius, 4px);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-slider__min-count{position:absolute;top:15px;left:0;font-size:var(--devui-font-size, 14px);color:var(--devui-text, #252b3a)}.devui-slider .devui-slider__max-count{position:absolute;top:15px;right:0;font-size:var(--devui-font-size, 14px);color:var(--devui-text, #252b3a)}.devui-slider .devui-slider__input-wrap{font-size:var(--devui-font-size, 14px);position:absolute;right:-60px;top:-12px;padding:5px 10px;cursor:text;margin-left:20px}.devui-slider .devui-slider__input-wrap input{width:40px;text-align:center}