vue-devui 0.1.3 → 1.0.0-alpha.10

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

@@ -0,0 +1,203 @@
+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

@@ -0,0 +1 @@
+(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/package.json

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

package/slider/style.css

@@ -0,0 +1 @@
+.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;