vue-devui 1.0.0-rc.1 → 1.0.0-rc.12

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,11 +125,11 @@ 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]]);
     }
@@ -139,14 +163,14 @@ var Skeleton = defineComponent({
     }
     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,11 +272,11 @@ 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);
       })]);
     }
@@ -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 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"});
+(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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, onMounted, computed, createVNode } from "vue";
+import { ref, watch, onMounted, defineComponent, computed, createVNode } from "vue";
 const sliderProps = {
   disabled: {
     type: Boolean,
@@ -16,182 +16,188 @@ const sliderProps = {
     type: Number,
     default: 0
   },
-  showInput: {
-    type: Boolean,
-    default: false
-  },
   step: {
     type: Number,
     default: 1
   },
   tipsRenderer: {
-    type: String,
-    default: ""
+    type: [Function, null],
+    default: () => (value) => `${value}`
   }
 };
-var slider = "";
-var Slider = defineComponent({
-  name: "DSlider",
-  props: sliderProps,
-  emits: ["update:modelValue"],
-  setup(props, ctx) {
-    let isClick = true;
-    let startPosition = 0;
-    let startX = 0;
-    const popoverShow = ref(false);
-    const sliderRunway = ref(null);
-    const inputValue = ref(props.modelValue);
-    const currentPosition = ref(0);
-    const newPostion = ref(0);
-    const percentDispaly = ref("");
-    const renderShowInput = () => {
-      return props.showInput ? createVNode("div", {
-        "class": "devui-input__out-wrap"
-      }, [createVNode("input", {
-        "onInput": handleOnInput,
-        "value": inputValue.value + ""
-      }, null)]) : "";
-    };
-    if (props.modelValue > props.max) {
-      percentDispaly.value = "100%";
-    } else if (props.modelValue < props.min) {
-      percentDispaly.value = "0%";
-    } else {
-      percentDispaly.value = (props.modelValue - props.min) * 100 / (props.max - props.min) + "%";
+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
+  };
+}
+const isFunction = (value) => Object.prototype.toString.call(value) === "[object Function]";
+function useSliderEvent(props, ctx) {
+  let isClick = true;
+  let startPosition = 0;
+  let startX = 0;
+  const sliderRunway = ref();
+  const currentValue = ref(Number(props.modelValue));
+  const currentPosition = ref(0);
+  const percentDisplay = ref("");
+  const popoverShow = ref(false);
+  const newPosition = ref(0);
+  function getSliderWidth() {
+    var _a;
+    return Boolean(sliderRunway.value) ? ((_a = sliderRunway.value) == null ? void 0 : _a.clientWidth) || 0 : 0;
+  }
+  function initCurrentPosition() {
+    const sliderWidth = getSliderWidth();
+    currentPosition.value = sliderWidth * (currentValue.value - props.min) / (props.max - props.min);
+  }
+  function setPosition(position) {
+    const clientWidth = getSliderWidth();
+    const sliderWidth = Math.round(clientWidth);
+    if (position < 0) {
+      position = 0;
     }
-    onMounted(() => {
-      const sliderWidth = sliderRunway.value.clientWidth;
-      currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
-    });
-    function handleButtonMousedown(event) {
-      popoverShow.value = true;
-      if (props.disabled) {
-        return;
-      }
+    const LengthPerStep = sliderWidth / ((props.max - props.min) / props.step);
+    const steps = Math.round(position / LengthPerStep);
+    const value = steps * LengthPerStep;
+    if (Math.round(value) >= sliderWidth) {
+      currentPosition.value = sliderWidth;
+      currentValue.value = props.max;
+      percentDisplay.value = "100%";
+      ctx.emit("update:modelValue", props.max);
+      return;
+    }
+    percentDisplay.value = Math.round(value * 100 / sliderWidth) + "%";
+    currentValue.value = Math.round(value * (props.max - props.min) / sliderWidth) + props.min;
+    currentPosition.value = position;
+    ctx.emit("update:modelValue", currentValue.value);
+  }
+  function dragStart(event) {
+    isClick = false;
+    startX = event.clientX;
+    startPosition = currentPosition.value;
+    newPosition.value = startPosition;
+  }
+  function onDragging(event) {
+    popoverShow.value = true;
+    const currentX = event.clientX;
+    const pxOffset = currentX - startX;
+    newPosition.value = startPosition + pxOffset;
+    setPosition(newPosition.value);
+  }
+  function onDragEnd() {
+    popoverShow.value = false;
+    setTimeout(() => {
+      isClick = true;
+    }, 100);
+    window.removeEventListener("mousemove", onDragging);
+    window.removeEventListener("mouseup", onDragEnd);
+  }
+  function handleButtonMousedown(event) {
+    popoverShow.value = true;
+    if (!props.disabled) {
       event.preventDefault();
       dragStart(event);
       window.addEventListener("mousemove", onDragging);
       window.addEventListener("mouseup", onDragEnd);
     }
-    function dragStart(event) {
-      isClick = false;
-      startX = event.clientX;
-      startPosition = currentPosition.value;
-      newPostion.value = startPosition;
-    }
-    function onDragging(event) {
-      popoverShow.value = true;
+  }
+  function handleRunwayMousedown(event) {
+    if (!props.disabled && isClick) {
+      const _e = event.target;
+      startX = _e.getBoundingClientRect().left;
       const currentX = event.clientX;
-      const pxOffset = currentX - startX;
-      newPostion.value = startPosition + pxOffset;
-      setPostion(newPostion.value);
-    }
-    function onDragEnd() {
-      popoverShow.value = false;
-      setTimeout(() => {
-        isClick = true;
-      }, 100);
-      window.removeEventListener("mousemove", onDragging);
-      window.removeEventListener("mouseup", onDragEnd);
-    }
-    function setPostion(newPosition) {
-      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
-      if (newPosition < 0) {
-        newPosition = 0;
-      }
-      const LengthPerStep = sliderWidth / ((props.max - props.min) / props.step);
-      const steps = Math.round(newPosition / LengthPerStep);
-      const value = steps * LengthPerStep;
-      if (Math.round(value) >= sliderWidth) {
-        currentPosition.value = sliderWidth;
-        inputValue.value = props.max;
-        percentDispaly.value = "100%";
-        ctx.emit("update:modelValue", props.max);
-        return;
-      }
-      percentDispaly.value = Math.round(value * 100 / sliderWidth) + "%";
-      inputValue.value = Math.round(value * (props.max - props.min) / sliderWidth) + props.min;
-      currentPosition.value = newPosition;
-      ctx.emit("update:modelValue", inputValue.value);
+      setPosition(currentX - startX);
+      handleButtonMousedown(event);
     }
-    function handleRunwayMousedown(event) {
-      if (!props.disabled && isClick) {
-        startX = event.target.getBoundingClientRect().left;
-        const currentX = event.clientX;
-        setPostion(currentX - startX);
-        handleButtonMousedown(event);
-      } else {
-        return;
-      }
-    }
-    function handleOnInput(event) {
-      inputValue.value = parseInt(event.target.value);
-      if (!inputValue.value) {
-        inputValue.value = props.min;
-        percentDispaly.value = "0%";
-      } else {
-        if (inputValue.value < props.min || inputValue.value > props.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);
-        }
-      }
+  }
+  watch(() => props.modelValue, () => {
+    currentValue.value = Number(props.modelValue);
+    if (currentValue.value > props.max) {
+      percentDisplay.value = "100%";
+    } else if (currentValue.value < props.min) {
+      percentDisplay.value = "0%";
+    } else {
+      percentDisplay.value = (currentValue.value - props.min) * 100 / (props.max - props.min) + "%";
     }
+    initCurrentPosition();
+  }, { immediate: true });
+  onMounted(initCurrentPosition);
+  return { sliderRunway, popoverShow, percentDisplay, currentValue, handleRunwayMousedown, handleButtonMousedown };
+}
+var slider = "";
+var Slider = defineComponent({
+  name: "DSlider",
+  props: sliderProps,
+  emits: ["update:modelValue"],
+  setup(props, ctx) {
+    const ns = useNamespace("slider");
+    const {
+      sliderRunway,
+      popoverShow,
+      percentDisplay,
+      currentValue,
+      handleRunwayMousedown,
+      handleButtonMousedown
+    } = useSliderEvent(props, ctx);
     const disableClass = computed(() => {
       return props.disabled ? " disabled" : "";
     });
-    const popover = () => {
-      return createVNode("div", {
-        "class": "devui-slider_popover",
-        "style": {
-          left: percentDispaly.value,
-          opacity: popoverShow.value ? 1 : 0
-        }
-      }, [createVNode("div", {
-        "class": "devui-slider_popover-arrow"
-      }, null), createVNode("div", {
-        "class": "devui-slider_popover-content"
-      }, [inputValue.value + " " + props.tipsRenderer])]);
-    };
+    const tipsContent = computed(() => isFunction(props.tipsRenderer) ? props.tipsRenderer(currentValue.value) : "");
     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: percentDisplay.value
       }
     }, null), createVNode("div", {
-      "class": "devui-slider__button" + disableClass.value,
+      "class": [ns.e("button"), disableClass.value],
       "style": {
-        left: percentDispaly.value
+        left: percentDisplay.value
       },
       "onMousedown": handleButtonMousedown,
       "onMouseenter": () => popoverShow.value = true,
       "onMouseout": () => popoverShow.value = false
-    }, null), props.tipsRenderer === "null" ? "" : popover()]), createVNode("span", {
-      "class": "devui-min_count"
-    }, [props.min]), createVNode("span", {
-      "class": "devui-max_count"
-    }, [props.max]), renderShowInput()]);
+    }, null), props.tipsRenderer === null ? null : popoverShow.value ? createVNode("div", {
+      "class": ns.e("popover"),
+      "style": {
+        left: percentDisplay.value
+      }
+    }, [createVNode("div", {
+      "class": ns.e("popover-arrow")
+    }, null), createVNode("div", {
+      "class": ns.e("popover-content")
+    }, [tipsContent.value])]) : null])]);
   }
 });
-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 M={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},step:{type:Number,default:1},tipsRenderer:{type:[Function,null],default:()=>e=>`${e}`}};function w(e,r,u){let d=e;return r&&(d+=`__${r}`),u&&(d+=`--${u}`),d}function E(e,r=!1){const u=r?`.devui-${e}`:`devui-${e}`;return{b:()=>w(u),e:l=>l?w(u,l):"",m:l=>l?w(u,"",l):"",em:(l,o)=>l&&o?w(u,l,o):""}}const D=e=>Object.prototype.toString.call(e)==="[object Function]";function X(e,r){let u=!0,d=0,s=0;const f=t.ref(),a=t.ref(Number(e.modelValue)),l=t.ref(0),o=t.ref(""),m=t.ref(!1),v=t.ref(0);function V(){var n;return Boolean(f.value)&&((n=f.value)==null?void 0:n.clientWidth)||0}function N(){const n=V();l.value=n*(a.value-e.min)/(e.max-e.min)}function g(n){const y=V(),c=Math.round(y);n<0&&(n=0);const R=c/((e.max-e.min)/e.step),b=Math.round(n/R)*R;if(Math.round(b)>=c){l.value=c,a.value=e.max,o.value="100%",r.emit("update:modelValue",e.max);return}o.value=Math.round(b*100/c)+"%",a.value=Math.round(b*(e.max-e.min)/c)+e.min,l.value=n,r.emit("update:modelValue",a.value)}function C(n){u=!1,s=n.clientX,d=l.value,v.value=d}function S(n){m.value=!0;const c=n.clientX-s;v.value=d+c,g(v.value)}function x(){m.value=!1,setTimeout(()=>{u=!0},100),window.removeEventListener("mousemove",S),window.removeEventListener("mouseup",x)}function P(n){m.value=!0,e.disabled||(n.preventDefault(),C(n),window.addEventListener("mousemove",S),window.addEventListener("mouseup",x))}function _(n){if(!e.disabled&&u){s=n.target.getBoundingClientRect().left;const c=n.clientX;g(c-s),P(n)}}return t.watch(()=>e.modelValue,()=>{a.value=Number(e.modelValue),a.value>e.max?o.value="100%":a.value<e.min?o.value="0%":o.value=(a.value-e.min)*100/(e.max-e.min)+"%",N()},{immediate:!0}),t.onMounted(N),{sliderRunway:f,popoverShow:m,percentDisplay:o,currentValue:a,handleRunwayMousedown:_,handleButtonMousedown:P}}var L="",h=t.defineComponent({name:"DSlider",props:M,emits:["update:modelValue"],setup(e,r){const u=E("slider"),{sliderRunway:d,popoverShow:s,percentDisplay:f,currentValue:a,handleRunwayMousedown:l,handleButtonMousedown:o}=X(e,r),m=t.computed(()=>e.disabled?" disabled":""),v=t.computed(()=>D(e.tipsRenderer)?e.tipsRenderer(a.value):"");return()=>t.createVNode("div",{class:u.b()},[t.createVNode("div",{ref:d,class:[u.e("runway"),m.value],onMousedown:l,onMouseout:()=>s.value=!1},[t.createVNode("div",{class:[u.e("bar"),m.value],style:{width:f.value}},null),t.createVNode("div",{class:[u.e("button"),m.value],style:{left:f.value},onMousedown:o,onMouseenter:()=>s.value=!0,onMouseout:()=>s.value=!1},null),e.tipsRenderer===null?null:s.value?t.createVNode("div",{class:u.e("popover"),style:{left:f.value}},[t.createVNode("div",{class:u.e("popover-arrow")},null),t.createVNode("div",{class:u.e("popover-content")},[v.value])]):null])])}}),B={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.component(h.name,h)}};i.Slider=h,i.default=B,i.sliderProps=M,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:100%;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;border-radius:var(--devui-border-radius-full, 100px);background-color:var(--devui-area, #f8f8f8)}.devui-slider__runway.disabled{background-color:var(--devui-disabled-bg, #f5f5f5);cursor:not-allowed}.devui-slider__runway:hover .devui-slider__bar:not(.disabled){background-color:var(--devui-brand-hover, #7693f5)}.devui-slider__runway .devui-slider__bar{height:6px;background-color:var(--devui-brand, #5e7ce0);border-top-left-radius:var(--devui-border-radius-full, 100px);border-bottom-left-radius:var(--devui-border-radius-full, 100px);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-brand, #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:not(.disabled){border-color:var(--devui-brand-hover, #7693f5);transform:scale(1.3)}.devui-slider__runway .devui-slider__button.disabled{border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__button.disabled{cursor:not-allowed}.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)}