vue-devui 1.0.0-alpha.0 → 1.0.0-alpha.11

package/skeleton/index.es.js

@@ -0,0 +1,145 @@
+import { toRefs, inject, computed, createVNode, defineComponent, provide } from "vue";
+const skeletonItemProps = {
+  variant: {
+    type: String,
+    default: "square"
+  },
+  size: {
+    type: String,
+    default: "md"
+  }
+};
+const skeletonProps = {
+  rows: {
+    type: Number,
+    default: 3
+  },
+  round: {
+    type: Boolean,
+    default: false
+  },
+  loading: {
+    type: Boolean,
+    default: true
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  }
+};
+const roundInjectionKey = Symbol("round");
+const animationInjectionKey = Symbol("showAnimation");
+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
+  };
+}
+function useSkeletonItem(props) {
+  const ns = useNamespace("skeleton-item");
+  const { variant, size } = toRefs(props);
+  const round = inject(roundInjectionKey, void 0);
+  const showAnimation = inject(animationInjectionKey, void 0);
+  const classes = computed(() => ({
+    [ns.b()]: true,
+    [ns.m(variant.value)]: true,
+    [ns.m(size.value)]: variant.value !== "square",
+    [ns.m("round")]: variant.value !== "circle" && Boolean(round == null ? void 0 : round.value),
+    [ns.m("animation")]: Boolean(showAnimation == null ? void 0 : showAnimation.value)
+  }));
+  return { classes };
+}
+function ImageIcon() {
+  return createVNode("svg", {
+    "width": "24px",
+    "height": "24px",
+    "viewBox": "0 0 24 24",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("g", null, [createVNode("rect", {
+    "fill": "#d8d8d8",
+    "opacity": "0",
+    "x": "0",
+    "y": "0",
+    "width": "24",
+    "height": "24"
+  }, null), createVNode("path", {
+    "d": "M17.9783341,3.022 C19.5705758,3.022 20.8816065,4.27616494 20.9732206,5.84628917 L20.9783341,6.022 L20.9783341,15.4777069           L20.9783775,15.4946187 C20.9778434,15.509964 20.9768409,15.525296 20.9753698,15.5405914 L20.9783341,15.4777069           C20.9783341,15.8919205 20.6425477,16.2277069 20.2283341,16.2277069 C19.9841207,16.2277069 19.7671693,16.1109847           19.630224,15.9302845 L16.3835041,12.6846982 C15.9279377,12.2291319 15.2084078,12.1987608 14.7176463,12.593585           L14.6161642,12.6846982 L9.05907272,18.2417898 C8.76083183,18.5400306 8.28304152,18.5577535 7.96352506,18.2824274           C7.67269311,18.0318186 7.64008582,17.5928941 7.89069464,17.3020621 L7.9253008,17.2647549 L7.9253008,17.2647549           L13.5555041,11.6240381 C14.5846517,10.5948904 16.2263561,10.5520093 17.3065502,11.4953946 L17.4441642,11.6240381           L19.4783341,13.658 L19.4783341,6.022 C19.4783341,5.24761276 18.8784495,4.6021759 18.1219124,4.52892169 L17.9783341,4.522           L6.02133414,4.522 C5.24694691,4.522 4.60151004,5.12188468 4.52825583,5.87842174 L4.52133414,6.022 L4.52133414,17.978           C4.52133414,18.7529555 5.12086774,19.397891 5.87769393,19.4710842 L6.02133414,19.478 L17.9783341,19.478 C18.7530944,19.478           19.3982021,18.8786501 19.4714163,18.1216726 L19.4783341,17.978 C19.4783341,17.5637864 19.8141206,17.208 20.2283341,17.228           C20.6425477,17.228 20.9783341,17.5637864 20.9783341,17.978 C20.9783341,19.5709231 19.724442,20.881321 18.1540742,20.9728891           L17.9783341,20.978 L6.02133414,20.978 C4.42880954,20.978 3.11804157,19.7244922 3.02644657,18.1537812 L3.02133414,17.978           L3.02133414,6.022 C3.02133414,4.42975835 4.27549908,3.11872764 5.84562331,3.02711351 L6.02133414,3.022 L17.9783341,3.022 Z           M8.99983414,7.7505 C9.6900477,7.7505 10.2498341,8.31028644 10.2498341,9.0005 C10.2498341,9.69071356 9.6900477,10.2505           8.99983414,10.3505 C8.30962058,10.2505 7.74983414,9.69071356 7.74983414,9.0005 C7.74983414,8.31028644 8.30962058,7.7505           8.99983414,7.7505 Z",
+    "fill": "#bfbfbf"
+  }, null)])])]);
+}
+var skeletonItem = "";
+var SkeletonItem = defineComponent({
+  name: "DSkeletonItem",
+  props: skeletonItemProps,
+  setup(props) {
+    const {
+      variant
+    } = toRefs(props);
+    const {
+      classes
+    } = useSkeletonItem(props);
+    return () => createVNode("div", {
+      "class": classes.value
+    }, [variant.value === "image" && createVNode(ImageIcon, null, null)]);
+  }
+});
+var skeleton = "";
+var Skeleton = defineComponent({
+  name: "DSkeleton",
+  props: skeletonProps,
+  setup(props, ctx) {
+    const ns = useNamespace("skeleton");
+    const {
+      loading,
+      rows,
+      showAnimation,
+      round
+    } = toRefs(props);
+    const paragraphs = computed(() => new Array(rows.value).fill(""));
+    provide(animationInjectionKey, showAnimation);
+    provide(roundInjectionKey, round);
+    return () => {
+      var _a, _b;
+      return loading.value ? ctx.slots.placeholder ? ctx.slots.placeholder() : createVNode("div", {
+        "class": ns.b()
+      }, [createVNode(SkeletonItem, {
+        "class": ns.e("title")
+      }, null), paragraphs.value.map(() => createVNode(SkeletonItem, {
+        "class": ns.e("paragraph")
+      }, null))]) : (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a);
+    };
+  }
+});
+var index = {
+  title: "Skeleton \u9AA8\u67B6\u5C4F",
+  category: "\u6570\u636E\u5C55\u793A",
+  status: "100%",
+  install(app) {
+    app.component(Skeleton.name, Skeleton);
+    app.component(SkeletonItem.name, SkeletonItem);
+  }
+};
+export { Skeleton, SkeletonItem, animationInjectionKey, index as default, roundInjectionKey, skeletonItemProps, skeletonProps };

package/skeleton/index.umd.js

@@ -0,0 +1 @@
+(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.index={},l.Vue))})(this,function(l,e){"use strict";const C={variant:{type:String,default:"square"},size:{type:String,default:"md"}},y={rows:{type:Number,default:3},round:{type:Boolean,default:!1},loading:{type:Boolean,default:!0},showAnimation:{type:Boolean,default:!0}},m=Symbol("round"),f=Symbol("showAnimation");function d(o,n,t){let s=o;return n&&(s+=`__${n}`),t&&(s+=`--${t}`),s}function h(o,n=!1){const t=n?`.devui-${o}`:`devui-${o}`;return{b:()=>d(t),e:a=>a?d(t,a):"",m:a=>a?d(t,"",a):"",em:(a,u)=>a&&u?d(t,a,u):""}}function k(o){const n=h("skeleton-item"),{variant:t,size:s}=e.toRefs(o),i=e.inject(m,void 0),r=e.inject(f,void 0);return{classes:e.computed(()=>({[n.b()]:!0,[n.m(t.value)]:!0,[n.m(s.value)]:t.value!=="square",[n.m("round")]:t.value!=="circle"&&Boolean(i==null?void 0:i.value),[n.m("animation")]:Boolean(r==null?void 0:r.value)}))}}function v(){return e.createVNode("svg",{width:"24px",height:"24px",viewBox:"0 0 24 24",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("g",null,[e.createVNode("rect",{fill:"#d8d8d8",opacity:"0",x:"0",y:"0",width:"24",height:"24"},null),e.createVNode("path",{d:"M17.9783341,3.022 C19.5705758,3.022 20.8816065,4.27616494 20.9732206,5.84628917 L20.9783341,6.022 L20.9783341,15.4777069           L20.9783775,15.4946187 C20.9778434,15.509964 20.9768409,15.525296 20.9753698,15.5405914 L20.9783341,15.4777069           C20.9783341,15.8919205 20.6425477,16.2277069 20.2283341,16.2277069 C19.9841207,16.2277069 19.7671693,16.1109847           19.630224,15.9302845 L16.3835041,12.6846982 C15.9279377,12.2291319 15.2084078,12.1987608 14.7176463,12.593585           L14.6161642,12.6846982 L9.05907272,18.2417898 C8.76083183,18.5400306 8.28304152,18.5577535 7.96352506,18.2824274           C7.67269311,18.0318186 7.64008582,17.5928941 7.89069464,17.3020621 L7.9253008,17.2647549 L7.9253008,17.2647549           L13.5555041,11.6240381 C14.5846517,10.5948904 16.2263561,10.5520093 17.3065502,11.4953946 L17.4441642,11.6240381           L19.4783341,13.658 L19.4783341,6.022 C19.4783341,5.24761276 18.8784495,4.6021759 18.1219124,4.52892169 L17.9783341,4.522           L6.02133414,4.522 C5.24694691,4.522 4.60151004,5.12188468 4.52825583,5.87842174 L4.52133414,6.022 L4.52133414,17.978           C4.52133414,18.7529555 5.12086774,19.397891 5.87769393,19.4710842 L6.02133414,19.478 L17.9783341,19.478 C18.7530944,19.478           19.3982021,18.8786501 19.4714163,18.1216726 L19.4783341,17.978 C19.4783341,17.5637864 19.8141206,17.208 20.2283341,17.228           C20.6425477,17.228 20.9783341,17.5637864 20.9783341,17.978 C20.9783341,19.5709231 19.724442,20.881321 18.1540742,20.9728891           L17.9783341,20.978 L6.02133414,20.978 C4.42880954,20.978 3.11804157,19.7244922 3.02644657,18.1537812 L3.02133414,17.978           L3.02133414,6.022 C3.02133414,4.42975835 4.27549908,3.11872764 5.84562331,3.02711351 L6.02133414,3.022 L17.9783341,3.022 Z           M8.99983414,7.7505 C9.6900477,7.7505 10.2498341,8.31028644 10.2498341,9.0005 C10.2498341,9.69071356 9.6900477,10.2505           8.99983414,10.3505 C8.30962058,10.2505 7.74983414,9.69071356 7.74983414,9.0005 C7.74983414,8.31028644 8.30962058,7.7505           8.99983414,7.7505 Z",fill:"#bfbfbf"},null)])])])}var w="",c=e.defineComponent({name:"DSkeletonItem",props:C,setup(o){const{variant:n}=e.toRefs(o),{classes:t}=k(o);return()=>e.createVNode("div",{class:t.value},[n.value==="image"&&e.createVNode(v,null,null)])}}),I="",p=e.defineComponent({name:"DSkeleton",props:y,setup(o,n){const t=h("skeleton"),{loading:s,rows:i,showAnimation:r,round:L}=e.toRefs(o),a=e.computed(()=>new Array(i.value).fill(""));return e.provide(f,r),e.provide(m,L),()=>{var u,g;return s.value?n.slots.placeholder?n.slots.placeholder():e.createVNode("div",{class:t.b()},[e.createVNode(c,{class:t.e("title")},null),a.value.map(()=>e.createVNode(c,{class:t.e("paragraph")},null))]):(g=(u=n.slots).default)==null?void 0:g.call(u)}}}),S={title:"Skeleton \u9AA8\u67B6\u5C4F",category:"\u6570\u636E\u5C55\u793A",status:"100%",install(o){o.component(p.name,p),o.component(c.name,c)}};l.Skeleton=p,l.SkeletonItem=c,l.animationInjectionKey=f,l.default=S,l.roundInjectionKey=m,l.skeletonItemProps=C,l.skeletonProps=y,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/skeleton/package.json

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

package/skeleton/style.css

@@ -0,0 +1 @@
+.devui-skeleton-item{background-color:var(--devui-list-item-hover-bg, #f2f2f3)}.devui-skeleton-item--round{border-radius:var(--devui-border-radius, 4px)}.devui-skeleton-item--square{width:100%;height:16px}.devui-skeleton-item--circle{border-radius:50%}.devui-skeleton-item--circle.devui-skeleton-item--sm{width:20px;height:20px}.devui-skeleton-item--circle.devui-skeleton-item--md{width:40px;height:40px}.devui-skeleton-item--circle.devui-skeleton-item--lg{width:60px;height:60px}.devui-skeleton-item--image{display:flex;justify-content:center;align-items:center}.devui-skeleton-item--image svg{width:40%;height:40%}.devui-skeleton-item--image.devui-skeleton-item--sm{width:50px;height:50px}.devui-skeleton-item--image.devui-skeleton-item--md{width:100px;height:100px}.devui-skeleton-item--image.devui-skeleton-item--lg{width:200px;height:200px}.devui-skeleton-item--animation.devui-skeleton-item{background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 60%) var(--devui-list-item-hover-bg, #f2f2f3);background-size:200% 100%;background-position-x:180%;animation:2s skeletonLoading ease-in-out infinite}@keyframes skeletonLoading{to{background-position-x:-20%}}.devui-skeleton{width:100%}.devui-skeleton__paragraph{margin-bottom:12px}.devui-skeleton__paragraph:last-child{width:60%;margin-bottom:0}.devui-skeleton-item.devui-skeleton__title{width:40%;margin-bottom:16px}

package/slider/index.d.ts

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

package/slider/index.es.js

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

package/slider/index.umd.js

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

package/slider/style.css

@@ -1 +1 @@
-@charset "UTF-8";.devui-form-controls input[type=password],.devui-form-controls input[type=text],[dInput]{width:100%;height:28px;font-size:var(--devui-font-size, 12px)}.devui-form-controls input[type=password].devui-input-sm,.devui-form-controls input[type=text].devui-input-sm,[dInput].devui-input-sm{font-size:var(--devui-font-size-sm, 12px);height:26px}.devui-form-controls input[type=password].devui-input-lg,.devui-form-controls input[type=text].devui-input-lg,[dInput].devui-input-lg{font-size:var(--devui-font-size-lg, 14px);height:46px}[dTextArea]{width:100%}.devui-form-controls textarea,[dInput],[dTextarea]{box-sizing:border-box;padding:4px 10px;color:var(--devui-text,#252b3a);vertical-align:middle;border:1px solid var(--devui-form-control-line,#adb0b8);border-radius:var(--devui-border-radius,2px);outline:0;background-color:var(--devui-base-bg,#fff);transition:border-color .3s cubic-bezier(.645, .045, .355, 1)}.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):hover{border-color:var(--devui-form-control-line-hover,#575d6c)}.devui-form-controls textarea:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled):not(.error):not(.devui-error):focus{border-color:var(--devui-form-control-line-active,#5e7ce0)}.devui-form-controls textarea.devui-disabled,.devui-form-controls textarea.devui-disabled:hover,.devui-form-controls textarea.disabled,.devui-form-controls textarea.disabled:hover,.devui-form-controls textarea[disabled],.devui-form-controls textarea[disabled]:hover,[dInput].devui-disabled,[dInput].devui-disabled:hover,[dInput].disabled,[dInput].disabled:hover,[dInput][disabled],[dInput][disabled]:hover,[dTextarea].devui-disabled,[dTextarea].devui-disabled:hover,[dTextarea].disabled,[dTextarea].disabled:hover,[dTextarea][disabled],[dTextarea][disabled]:hover{cursor:not-allowed;background-color:var(--devui-disabled-bg,#f5f5f6);border-color:var(--devui-disabled-line,#dfe1e6);color:var(--devui-disabled-text,#adb0b8)}.devui-form-controls textarea,[dTextarea]{width:100%}.devui-input-group{position:relative;display:table;border-collapse:separate}.devui-input-group-addon{border:1px solid var(--devui-form-control-line,#adb0b8);border-radius:var(--devui-border-radius,2px);display:table-cell;padding:0 10px;text-align:center}.devui-input-group-addon:last-child{border-top-left-radius:0;border-bottom-left-radius:0;border-left:0}.devui-input-group-addon:first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:0}.devui-input{outline:0;background-color:var(--devui-base-bg,#fff);border:1px solid var(--devui-form-control-line,#adb0b8);border-radius:var(--devui-border-radius,2px);padding:5px 10px;line-height:16px;font-size:var(--devui-font-size, 12px);color:var(--devui-text,#252b3a);width:100%;display:block;cursor:text;height:28px;transition:border-color .3s cubic-bezier(.645, .045, .355, 1)}.devui-input:hover{border-color:var(--devui-form-control-line-hover,#575d6c)}.devui-input:focus{border-color:var(--devui-form-control-line-active,#5e7ce0)}.devui-input.devui-disabled,.devui-input.devui-disabled:focus,.devui-input.devui-disabled:hover,.devui-input.devui-disabled:hover:focus,.devui-input.disabled,.devui-input.disabled:focus,.devui-input.disabled:hover,.devui-input.disabled:hover:focus,.devui-input[disabled],.devui-input[disabled]:focus,.devui-input[disabled]:hover,.devui-input[disabled]:hover:focus{border-color:var(--devui-disabled-line,#dfe1e6);color:var(--devui-disabled-text,#adb0b8);background-color:var(--devui-disabled-bg,#f5f5f6);cursor:not-allowed}.devui-input::placeholder{color:var(--devui-placeholder,#8a8e99)}.devui-input.devui-search-in-dropdown{margin:0;border:none;padding:5px 26px 5px 10px;background-color:var(--devui-embed-search-bg,#f2f5fc);color:var(--devui-text,#252b3a)}.devui-input.devui-search-in-dropdown:-ms-input-placeholder{color:var(--devui-placeholder,#8a8e99)}.devui-input.devui-search-in-dropdown:hover{background-color:var(--devui-embed-search-bg-hover,#eef0f5)}.devui-input-group>.devui-input{display:table-cell}.devui-input-group>.devui-input:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.devui-input-group>.devui-input:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.devui-input-group>.devui-input:not(:first-child):not(:last-child){border-radius:0}.devui-input-lg{font-size:var(--devui-font-size-page-title, 16px);line-height:20px;height:32px}.devui-input-sm{font-size:var(--devui-font-size, 12px);line-height:14px;height:26px}.devui-dropdown,.devui-dropup{position:relative}.devui-form-group{position:relative}.devui-form-control{color:var(--devui-text,#252b3a);background-color:var(--devui-base-bg,#fff);padding:5px 10px;border:1px solid var(--devui-form-control-line,#adb0b8);display:block;width:100%;height:28px;border-radius:var(--devui-border-radius,2px);outline:0;transition:border-color .3s cubic-bezier(.645, .045, .355, 1)}.devui-form-control.devui-disabled,.devui-form-control.devui-disabled:focus,.devui-form-control.devui-disabled:hover,.devui-form-control.disabled,.devui-form-control.disabled:focus,.devui-form-control.disabled:hover,.devui-form-control[disabled],.devui-form-control[disabled]:focus,.devui-form-control[disabled]:hover{border-color:var(--devui-disabled-line,#dfe1e6)}.devui-form-control.devui-disabled,.devui-form-control.devui-disabled:focus,.devui-form-control.devui-disabled:focus>input,.devui-form-control.devui-disabled:hover,.devui-form-control.devui-disabled:hover>input,.devui-form-control.devui-disabled>input,.devui-form-control.disabled,.devui-form-control.disabled:focus,.devui-form-control.disabled:focus>input,.devui-form-control.disabled:hover,.devui-form-control.disabled:hover>input,.devui-form-control.disabled>input,.devui-form-control[disabled],.devui-form-control[disabled]:focus,.devui-form-control[disabled]:focus>input,.devui-form-control[disabled]:hover,.devui-form-control[disabled]:hover>input,.devui-form-control[disabled]>input{color:var(--devui-disabled-text,#adb0b8);background-color:var(--devui-disabled-bg,#f5f5f6);cursor:not-allowed}.devui-form-control:hover{border-color:var(--devui-form-control-line-hover,#575d6c)}.devui-form-control:focus{border-color:var(--devui-form-control-line-active,#5e7ce0)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border){border-color:var(--devui-form-control-line,#adb0b8);transition:border-color .3s cubic-bezier(.645, .045, .355, 1)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):hover:not(:focus):not(.devui-dropdown-origin-open){border-color:var(--devui-form-control-line-hover,#575d6c)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus,:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border):focus-within{outline:0;border-color:var(--devui-form-control-line-active,#5e7ce0)}:not(.multiple-label-auto-complete-disabled):not(.devui-error)>.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled):not(.devui-dropdown-no-border):not(.devui-no-border).devui-dropdown-origin-open{outline:0;border-color:var(--devui-connected-overlay-line,#526ecc)}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]){min-height:28px}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not([disabled]):not(.disabled):not(.devui-disabled){color:var(--devui-text,#252b3a)}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-input{height:26px}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]):not(.devui-select-underlined-border):not(.devui-dropdown-no-border):not(.devui-no-border){border-radius:var(--devui-border-radius,2px);border-width:1px;border-style:solid}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]) .devui-input-group-addon:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])>.devui-dropdown-default:hover{border-color:transparent}.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).devui-disabled>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-]).disabled>.devui-dropdown-default:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:focus:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-form-control:hover,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled] .devui-input-group-addon,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:active,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:focus,.devui-dropdown-origin:not(d-button):not(.icon):not([class^=icon-])[disabled]>.devui-dropdown-default:hover{background-color:var(--devui-disabled-bg,#f5f5f6)}input::-moz-placeholder{color:var(--devui-placeholder,#8a8e99)}input:-ms-input-placeholder{color:var(--devui-placeholder,#8a8e99)}input::-webkit-input-placeholder{color:var(--devui-placeholder,#8a8e99)}[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error,[dInput]:not([disabled]):not(.disabled):not(.devui-disabled).error,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error,[dTextarea]:not([disabled]):not(.disabled):not(.devui-disabled).error{border-color:var(--devui-danger-line,#f66f6a);background-color:var(--devui-danger-bg,#ffeeed)}[dDatePicker]:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{background-color:var(--devui-danger-bg,#ffeeed)}d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown,d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup{border-color:var(--devui-danger-line,#f66f6a)}d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropdown .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback,d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-input.devui-form-control.devui-select-input:not(.devui-select-search),d-select:not([disabled]):not(.disabled):not(.devui-disabled):not(.multiple-label-auto-complete-disabled).devui-error div.devui-dropdown-origin.devui-dropup .devui-form-group .devui-select-input:not(.devui-select-search)+.devui-form-control-feedback{background-color:var(--devui-danger-bg,#ffeeed)}d-editable-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-form-group:not(.multiple-label-auto-complete-disabled) input.devui-form-control.devui-dropdown-origin{border-color:var(--devui-danger-line,#f66f6a);background-color:var(--devui-danger-bg,#ffeeed)}d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker{border-color:var(--devui-danger-line,#f66f6a);background-color:var(--devui-danger-bg,#ffeeed)}d-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-single-picker .devui-input:not(.devui-disabled){background-color:var(--devui-danger-bg,#ffeeed)}d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker{border-color:var(--devui-danger-line,#f66f6a);background-color:var(--devui-danger-bg,#ffeeed)}d-range-datepicker-pro:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .devui-datepicker-pro-wrapper:not([disabled]):not(.disabled):not(.devui-disabled) .devui-dropdown-toggle .devui-range-picker .devui-input:not(.devui-disabled){background-color:var(--devui-danger-bg,#ffeeed)}d-input-number:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .input-box:not(:disabled){border-color:var(--devui-danger-line,#f66f6a);background-color:var(--devui-danger-bg,#ffeeed)}d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled).multiple-label-auto-complete.multiple-label-auto-complete-border ul.devui-dropdown-origin{border-color:var(--devui-danger-line,#f66f6a);background-color:var(--devui-danger-bg,#ffeeed)}d-multi-auto-complete:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input[dAutoComplete]{background-color:var(--devui-danger-bg,#ffeeed)}d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) div.devui-tags.devui-form-control{border-color:var(--devui-danger-line,#f66f6a);background-color:var(--devui-danger-bg,#ffeeed)}d-tags-input:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled) input.devui-input{background-color:var(--devui-danger-bg,#ffeeed)}d-tree-select:not([disabled]):not(.disabled):not(.devui-disabled).devui-error :not(.multiple-label-auto-complete-disabled)>div.devui-select-input.devui-dropdown-origin.devui-tree-select-input{border-color:var(--devui-danger-line,#f66f6a);background-color:var(--devui-danger-bg,#ffeeed)}d-search:not([disabled]):not(.disabled):not(.devui-disabled).devui-error input.devui-input{border-color:var(--devui-danger-line,#f66f6a);background-color:var(--devui-danger-bg,#ffeeed)}d-editor-md:not([disabled]):not(.disabled):not(.devui-disabled).devui-error{border-color:var(--devui-danger-line,#f66f6a)}d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-container,d-editor:not([disabled]):not(.disabled):not(.devui-disabled).devui-error .ql-toolbar{border-color:var(--devui-danger-line,#f66f6a)}d-form-control d-search{width:100%}.devui-form-controls.devui-form-control-has-suffix [dInput],.devui-form-controls.devui-form-control-has-suffix [dTextArea]{padding-right:28px}.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dInput],.devui-form-controls.devui-form-control-has-suffix.devui-form-control-has-feedback [dTextArea]{padding-right:56px}.devui-form-controls.devui-form-control-has-feedback [dInput],.devui-form-controls.devui-form-control-has-feedback [dTextarea]{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-icon{right:24px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-icon-left{padding-right:30px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input{padding-right:54px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit{padding-right:84px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-sm{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-sm{right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-sm{padding-right:54px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-sm{padding-right:84px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-line.devui-search-line-lg{right:70px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-search-clear.devui-search-clear-lg{right:70px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-input-lg{padding-right:60px}.devui-form-controls.devui-form-control-has-feedback d-search .devui-search .devui-input.devui-clear-exit.devui-input-lg{padding-right:95px}.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-select-input{padding-right:48px}.devui-form-controls.devui-form-control-has-feedback d-select .devui-form-group .devui-form-control-feedback{right:24px}.devui-form-controls.devui-form-control-has-feedback d-tree-select{vertical-align:middle}.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-input.devui-tree-select-input{padding-right:52px}.devui-form-controls.devui-form-control-has-feedback d-tree-select .devui-tree-select .devui-select-chevron-icon{right:34px}.devui-form-controls.devui-form-control-has-feedback d-input-number{width:100%}.devui-form-controls.devui-form-control-has-feedback d-input-number .input-control-buttons{right:32px}.devui-form-controls.devui-form-control-has-feedback d-input-number .input-box{padding-right:32px}.devui-form-controls.devui-form-control-has-feedback d-input-number:hover .input-box:not(.disabled){padding-right:58px}.devui-form-controls.devui-form-control-has-feedback d-tags-input .devui-tags{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-multi-auto-complete .multiple-label-auto-complete ul{padding-right:28px}.devui-form-controls.devui-form-control-has-feedback d-editable-select .devui-form-group.devui-has-feedback>.devui-form-control-feedback{right:24px}.devui-form-controls.devui-form-control-has-feedback d-editable-select>div>.devui-form-control{padding-right:48px}.devui-form-controls.devui-form-control-has-feedback [dDatePicker].devui-form-control{padding-right:32px}.devui-input__wrap{position:relative;display:flex;justify-content:"space-between";align-items:center}.devui-input__preview{position:absolute;width:32px;height:16px;right:0;text-align:center;line-height:16px;cursor:pointer;display:flex;justify-content:center;align-items:center;flex-direction:column}.devui-slider{position:relative;width:70%;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,#fff);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,#fff);border-color:var(--devui-disabled-line,#dfe1e6)}.devui-slider__runway .devui-slider__button.disabled:hover{cursor:not-allowed;transform:none}.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__wrap{position:absolute;right:-60px;top:-12px;padding:5px 10px;cursor:text;margin-left:20px}.devui-slider .devui-input__wrap input{width:40px}
+.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)}

package/splitter/index.d.ts

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