vft 0.0.374 → 0.0.375

package/lib/components/slider/button.vue2.cjs

@@ -1 +1,116 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("@popperjs/core");const M=require("@vft/utils"),S=require("../tooltip/index.cjs"),k=require("../../constants/event.cjs");require("@vueuse/core");require("../config-provider/hooks/use-global-config.cjs");require("lodash-es");const x=require("../../hooks/use-namespace/index.cjs");require("../../hooks/use-model-toggle/index.cjs");require("../../hooks/use-z-index/index.cjs");require("../form/index.cjs");const D=require("./composables/use-slider-button.cjs"),N=["tabindex"],T=e.defineComponent({name:"VftSliderButton"}),P=e.defineComponent({...T,props:{modelValue:{default:0},vertical:{type:Boolean},tooltipClass:{},placement:{default:"top"}},emits:{[k.UPDATE_MODEL_EVENT]:u=>M.isNumber(u)},setup(u,{expose:m,emit:g}){const v=g,f=x.useNamespace("slider"),p=e.reactive({hovering:!1,dragging:!1,isClick:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:0,oldValue:u.modelValue}),b=e.getCurrentInstance(),{disabled:c,button:q,tooltip:V,showTooltip:w,tooltipVisible:y,wrapperStyle:C,formatValue:B,handleMouseEnter:o,handleMouseLeave:s,onButtonDown:r,onKeyDown:i,setPosition:E}=D.useSliderButton(b.props,p,v),{hovering:l,dragging:a}=e.toRefs(p);return m({onButtonDown:r,onKeyDown:i,setPosition:E,hovering:l,dragging:a}),(d,t)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"button",ref:q,class:e.normalizeClass([e.unref(f).e("button-wrapper"),{hover:e.unref(l),dragging:e.unref(a)}]),style:e.normalizeStyle(e.unref(C)),tabindex:e.unref(c)?-1:0,onMouseenter:t[0]||(t[0]=(...n)=>e.unref(o)&&e.unref(o)(...n)),onMouseleave:t[1]||(t[1]=(...n)=>e.unref(s)&&e.unref(s)(...n)),onMousedown:t[2]||(t[2]=(...n)=>e.unref(r)&&e.unref(r)(...n)),onTouchstart:t[3]||(t[3]=(...n)=>e.unref(r)&&e.unref(r)(...n)),onFocus:t[4]||(t[4]=(...n)=>e.unref(o)&&e.unref(o)(...n)),onBlur:t[5]||(t[5]=(...n)=>e.unref(s)&&e.unref(s)(...n)),onKeydown:t[6]||(t[6]=(...n)=>e.unref(i)&&e.unref(i)(...n))},[e.createVNode(e.unref(S.VftTooltip),{ref_key:"tooltip",ref:V,visible:e.unref(y),placement:d.placement,"fallback-placements":["top","bottom","right","left"],"stop-popper-mouse-event":!1,"popper-class":d.tooltipClass,disabled:!e.unref(w),persistent:""},{content:e.withCtx(()=>[e.createElementVNode("span",null,e.toDisplayString(e.unref(B)),1)]),default:e.withCtx(()=>[e.createElementVNode("div",{class:e.normalizeClass([e.unref(f).e("button"),{hover:e.unref(l),dragging:e.unref(a)}])},null,2)]),_:1},8,["visible","placement","popper-class","disabled"])],46,N))}});exports.default=P;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+require("@popperjs/core");
+const utils = require("@vft/utils");
+const index$1 = require("../tooltip/index.cjs");
+const event = require("../../constants/event.cjs");
+require("@vueuse/core");
+require("../config-provider/hooks/use-global-config.cjs");
+require("lodash-es");
+const index = require("../../hooks/use-namespace/index.cjs");
+require("../../hooks/use-model-toggle/index.cjs");
+require("../../hooks/use-z-index/index.cjs");
+require("../form/index.cjs");
+const useSliderButton = require("./composables/use-slider-button.cjs");
+const _hoisted_1 = ["tabindex"];
+const __default__ = vue.defineComponent({
+  name: "VftSliderButton"
+});
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...__default__,
+  props: {
+    modelValue: { default: 0 },
+    vertical: { type: Boolean },
+    tooltipClass: {},
+    placement: { default: "top" }
+  },
+  emits: {
+    [event.UPDATE_MODEL_EVENT]: (value) => utils.isNumber(value)
+  },
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const emit = __emit;
+    const ns = index.useNamespace("slider");
+    const initData = vue.reactive({
+      hovering: false,
+      dragging: false,
+      isClick: false,
+      startX: 0,
+      currentX: 0,
+      startY: 0,
+      currentY: 0,
+      startPosition: 0,
+      newPosition: 0,
+      oldValue: __props.modelValue
+    });
+    const vm = vue.getCurrentInstance();
+    const {
+      disabled,
+      button,
+      tooltip,
+      showTooltip,
+      tooltipVisible,
+      wrapperStyle,
+      formatValue,
+      handleMouseEnter,
+      handleMouseLeave,
+      onButtonDown,
+      onKeyDown,
+      setPosition
+    } = useSliderButton.useSliderButton(vm.props, initData, emit);
+    const { hovering, dragging } = vue.toRefs(initData);
+    __expose({
+      onButtonDown,
+      onKeyDown,
+      setPosition,
+      hovering,
+      dragging
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "button",
+        ref: button,
+        class: vue.normalizeClass([vue.unref(ns).e("button-wrapper"), { hover: vue.unref(hovering), dragging: vue.unref(dragging) }]),
+        style: vue.normalizeStyle(vue.unref(wrapperStyle)),
+        tabindex: vue.unref(disabled) ? -1 : 0,
+        onMouseenter: _cache[0] || (_cache[0] = //@ts-ignore
+        (...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args)),
+        onMouseleave: _cache[1] || (_cache[1] = //@ts-ignore
+        (...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args)),
+        onMousedown: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => vue.unref(onButtonDown) && vue.unref(onButtonDown)(...args)),
+        onTouchstart: _cache[3] || (_cache[3] = //@ts-ignore
+        (...args) => vue.unref(onButtonDown) && vue.unref(onButtonDown)(...args)),
+        onFocus: _cache[4] || (_cache[4] = //@ts-ignore
+        (...args) => vue.unref(handleMouseEnter) && vue.unref(handleMouseEnter)(...args)),
+        onBlur: _cache[5] || (_cache[5] = //@ts-ignore
+        (...args) => vue.unref(handleMouseLeave) && vue.unref(handleMouseLeave)(...args)),
+        onKeydown: _cache[6] || (_cache[6] = //@ts-ignore
+        (...args) => vue.unref(onKeyDown) && vue.unref(onKeyDown)(...args))
+      }, [
+        vue.createVNode(vue.unref(index$1.VftTooltip), {
+          ref_key: "tooltip",
+          ref: tooltip,
+          visible: vue.unref(tooltipVisible),
+          placement: _ctx.placement,
+          "fallback-placements": ["top", "bottom", "right", "left"],
+          "stop-popper-mouse-event": false,
+          "popper-class": _ctx.tooltipClass,
+          disabled: !vue.unref(showTooltip),
+          persistent: ""
+        }, {
+          content: vue.withCtx(() => [
+            vue.createElementVNode("span", null, vue.toDisplayString(vue.unref(formatValue)), 1)
+          ]),
+          default: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass([vue.unref(ns).e("button"), { hover: vue.unref(hovering), dragging: vue.unref(dragging) }])
+            }, null, 2)
+          ]),
+          _: 1
+        }, 8, ["visible", "placement", "popper-class", "disabled"])
+      ], 46, _hoisted_1);
+    };
+  }
+});
+exports.default = _sfc_main;

package/lib/components/slider/composables/index.cjs

@@ -1 +1,14 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./use-lifecycle.cjs"),s=require("./use-marks.cjs"),u=require("./use-slide.cjs"),t=require("./use-slider-button.cjs"),r=require("./use-stops.cjs"),i=require("./use-watch.cjs");exports.useLifecycle=e.useLifecycle;exports.useMarks=s.useMarks;exports.useSlide=u.useSlide;exports.useSliderButton=t.useSliderButton;exports.useStops=r.useStops;exports.useWatch=i.useWatch;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useLifecycle = require("./use-lifecycle.cjs");
+const useMarks = require("./use-marks.cjs");
+const useSlide = require("./use-slide.cjs");
+const useSliderButton = require("./use-slider-button.cjs");
+const useStops = require("./use-stops.cjs");
+const useWatch = require("./use-watch.cjs");
+exports.useLifecycle = useLifecycle.useLifecycle;
+exports.useMarks = useMarks.useMarks;
+exports.useSlide = useSlide.useSlide;
+exports.useSliderButton = useSliderButton.useSliderButton;
+exports.useStops = useStops.useStops;
+exports.useWatch = useWatch.useWatch;

package/lib/components/slider/composables/use-lifecycle.cjs

@@ -1 +1,36 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("@vueuse/core"),u=require("vue"),c=(e,l,m)=>{const V=u.ref();return u.onMounted(async()=>{e.range?(Array.isArray(e.modelValue)?(l.firstValue=Math.max(e.min,e.modelValue[0]),l.secondValue=Math.min(e.max,e.modelValue[1])):(l.firstValue=e.min,l.secondValue=e.max),l.oldValue=[l.firstValue,l.secondValue]):(typeof e.modelValue!="number"||Number.isNaN(e.modelValue)?l.firstValue=e.min:l.firstValue=Math.min(e.max,Math.max(e.min,e.modelValue)),l.oldValue=l.firstValue),a.useEventListener(window,"resize",m),await u.nextTick(),m()}),{sliderWrapper:V}};exports.useLifecycle=c;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const core = require("@vueuse/core");
+const vue = require("vue");
+const useLifecycle = (props, initData, resetSize) => {
+  const sliderWrapper = vue.ref();
+  vue.onMounted(async () => {
+    if (props.range) {
+      if (Array.isArray(props.modelValue)) {
+        initData.firstValue = Math.max(props.min, props.modelValue[0]);
+        initData.secondValue = Math.min(props.max, props.modelValue[1]);
+      } else {
+        initData.firstValue = props.min;
+        initData.secondValue = props.max;
+      }
+      initData.oldValue = [initData.firstValue, initData.secondValue];
+    } else {
+      if (typeof props.modelValue !== "number" || Number.isNaN(props.modelValue)) {
+        initData.firstValue = props.min;
+      } else {
+        initData.firstValue = Math.min(
+          props.max,
+          Math.max(props.min, props.modelValue)
+        );
+      }
+      initData.oldValue = initData.firstValue;
+    }
+    core.useEventListener(window, "resize", resetSize);
+    await vue.nextTick();
+    resetSize();
+  });
+  return {
+    sliderWrapper
+  };
+};
+exports.useLifecycle = useLifecycle;

package/lib/components/slider/composables/use-marks.cjs

@@ -1 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("vue"),t=e=>m.computed(()=>e.marks?Object.keys(e.marks).map(Number.parseFloat).sort((r,a)=>r-a).filter(r=>r<=e.max&&r>=e.min).map(r=>({point:r,position:(r-e.min)*100/(e.max-e.min),mark:e.marks[r]})):[]);exports.useMarks=t;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const useMarks = (props) => {
+  return vue.computed(() => {
+    if (!props.marks) {
+      return [];
+    }
+    const marksKeys = Object.keys(props.marks);
+    return marksKeys.map(Number.parseFloat).sort((a, b) => a - b).filter((point) => point <= props.max && point >= props.min).map(
+      (point) => ({
+        point,
+        position: (point - props.min) * 100 / (props.max - props.min),
+        mark: props.marks[point]
+      })
+    );
+  });
+};
+exports.useMarks = useMarks;

package/lib/components/slider/composables/use-slide.cjs

@@ -1 +1,141 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("../../form/index.cjs");const f=require("../../../constants/event.cjs"),l=require("vue"),N=require("../../form/hooks/use-form-item.cjs"),z=(e,n,s)=>{const{form:R,formItem:w}=N.useFormItem(),i=l.shallowRef(),a=l.ref(),m=l.ref(),d={firstButton:a,secondButton:m},v=l.computed(()=>e.disabled||R?.disabled||!1),o=l.computed(()=>Math.min(n.firstValue,n.secondValue)),c=l.computed(()=>Math.max(n.firstValue,n.secondValue)),g=l.computed(()=>e.range?`${100*(c.value-o.value)/(e.max-e.min)}%`:`${100*(n.firstValue-e.min)/(e.max-e.min)}%`),S=l.computed(()=>e.range?`${100*(o.value-e.min)/(e.max-e.min)}%`:"0%"),x=l.computed(()=>e.vertical?{height:e.height}:{}),y=l.computed(()=>e.vertical?{height:g.value,bottom:S.value}:{width:g.value,left:S.value}),V=()=>{i.value&&(n.sliderSize=i.value[`client${e.vertical?"Height":"Width"}`])},T=t=>{const u=e.min+t*(e.max-e.min)/100;if(!e.range)return a;let r;return Math.abs(o.value-u)<Math.abs(c.value-u)?r=n.firstValue<n.secondValue?"firstButton":"secondButton":r=n.firstValue>n.secondValue?"firstButton":"secondButton",d[r]},b=t=>{const u=T(t);return u.value.setPosition(t),u},C=t=>{n.firstValue=t,h(e.range?[o.value,c.value]:t)},M=t=>{n.secondValue=t,e.range&&h([o.value,c.value])},h=t=>{s(f.UPDATE_MODEL_EVENT,t),s(f.INPUT_EVENT,t)},B=async()=>{await l.nextTick(),s(f.CHANGE_EVENT,e.range?[o.value,c.value]:e.modelValue)},E=t=>{if(v.value||n.dragging)return;V();let u=0;if(e.vertical){const r=t.touches?.item(0)?.clientY??t.clientY;u=(i.value.getBoundingClientRect().bottom-r)/n.sliderSize*100}else{const r=t.touches?.item(0)?.clientX??t.clientX,P=i.value.getBoundingClientRect().left;u=(r-P)/n.sliderSize*100}if(!(u<0||u>100))return b(u)};return{elFormItem:w,slider:i,firstButton:a,secondButton:m,sliderDisabled:v,minValue:o,maxValue:c,runwayStyle:x,barStyle:y,resetSize:V,setPosition:b,emitChange:B,onSliderWrapperPrevent:t=>{(d.firstButton.value?.dragging||d.secondButton.value?.dragging)&&t.preventDefault()},onSliderClick:t=>{E(t)&&B()},onSliderDown:async t=>{const u=E(t);u&&(await l.nextTick(),u.value.onButtonDown(t))},setFirstValue:C,setSecondValue:M}};exports.useSlide=z;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../form/index.cjs");
+const event = require("../../../constants/event.cjs");
+const vue = require("vue");
+const useFormItem = require("../../form/hooks/use-form-item.cjs");
+const useSlide = (props, initData, emit) => {
+  const { form: elForm, formItem: elFormItem } = useFormItem.useFormItem();
+  const slider = vue.shallowRef();
+  const firstButton = vue.ref();
+  const secondButton = vue.ref();
+  const buttonRefs = {
+    firstButton,
+    secondButton
+  };
+  const sliderDisabled = vue.computed(() => {
+    return props.disabled || elForm?.disabled || false;
+  });
+  const minValue = vue.computed(() => {
+    return Math.min(initData.firstValue, initData.secondValue);
+  });
+  const maxValue = vue.computed(() => {
+    return Math.max(initData.firstValue, initData.secondValue);
+  });
+  const barSize = vue.computed(() => {
+    return props.range ? `${100 * (maxValue.value - minValue.value) / (props.max - props.min)}%` : `${100 * (initData.firstValue - props.min) / (props.max - props.min)}%`;
+  });
+  const barStart = vue.computed(() => {
+    return props.range ? `${100 * (minValue.value - props.min) / (props.max - props.min)}%` : "0%";
+  });
+  const runwayStyle = vue.computed(() => {
+    return props.vertical ? { height: props.height } : {};
+  });
+  const barStyle = vue.computed(() => {
+    return props.vertical ? {
+      height: barSize.value,
+      bottom: barStart.value
+    } : {
+      width: barSize.value,
+      left: barStart.value
+    };
+  });
+  const resetSize = () => {
+    if (slider.value) {
+      initData.sliderSize = slider.value[`client${props.vertical ? "Height" : "Width"}`];
+    }
+  };
+  const getButtonRefByPercent = (percent) => {
+    const targetValue = props.min + percent * (props.max - props.min) / 100;
+    if (!props.range) {
+      return firstButton;
+    }
+    let buttonRefName;
+    if (Math.abs(minValue.value - targetValue) < Math.abs(maxValue.value - targetValue)) {
+      buttonRefName = initData.firstValue < initData.secondValue ? "firstButton" : "secondButton";
+    } else {
+      buttonRefName = initData.firstValue > initData.secondValue ? "firstButton" : "secondButton";
+    }
+    return buttonRefs[buttonRefName];
+  };
+  const setPosition = (percent) => {
+    const buttonRef = getButtonRefByPercent(percent);
+    buttonRef.value.setPosition(percent);
+    return buttonRef;
+  };
+  const setFirstValue = (firstValue) => {
+    initData.firstValue = firstValue;
+    _emit(props.range ? [minValue.value, maxValue.value] : firstValue);
+  };
+  const setSecondValue = (secondValue) => {
+    initData.secondValue = secondValue;
+    if (props.range) {
+      _emit([minValue.value, maxValue.value]);
+    }
+  };
+  const _emit = (val) => {
+    emit(event.UPDATE_MODEL_EVENT, val);
+    emit(event.INPUT_EVENT, val);
+  };
+  const emitChange = async () => {
+    await vue.nextTick();
+    emit(
+      event.CHANGE_EVENT,
+      props.range ? [minValue.value, maxValue.value] : props.modelValue
+    );
+  };
+  const handleSliderPointerEvent = (event2) => {
+    if (sliderDisabled.value || initData.dragging) return;
+    resetSize();
+    let newPercent = 0;
+    if (props.vertical) {
+      const clientY = event2.touches?.item(0)?.clientY ?? event2.clientY;
+      const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom;
+      newPercent = (sliderOffsetBottom - clientY) / initData.sliderSize * 100;
+    } else {
+      const clientX = event2.touches?.item(0)?.clientX ?? event2.clientX;
+      const sliderOffsetLeft = slider.value.getBoundingClientRect().left;
+      newPercent = (clientX - sliderOffsetLeft) / initData.sliderSize * 100;
+    }
+    if (newPercent < 0 || newPercent > 100) return;
+    return setPosition(newPercent);
+  };
+  const onSliderWrapperPrevent = (event2) => {
+    if (buttonRefs["firstButton"].value?.dragging || buttonRefs["secondButton"].value?.dragging) {
+      event2.preventDefault();
+    }
+  };
+  const onSliderDown = async (event2) => {
+    const buttonRef = handleSliderPointerEvent(event2);
+    if (buttonRef) {
+      await vue.nextTick();
+      buttonRef.value.onButtonDown(event2);
+    }
+  };
+  const onSliderClick = (event2) => {
+    const buttonRef = handleSliderPointerEvent(event2);
+    if (buttonRef) {
+      emitChange();
+    }
+  };
+  return {
+    elFormItem,
+    slider,
+    firstButton,
+    secondButton,
+    sliderDisabled,
+    minValue,
+    maxValue,
+    runwayStyle,
+    barStyle,
+    resetSize,
+    setPosition,
+    emitChange,
+    onSliderWrapperPrevent,
+    onSliderClick,
+    onSliderDown,
+    setFirstValue,
+    setSecondValue
+  };
+};
+exports.useSlide = useSlide;

package/lib/components/slider/composables/use-slider-button.cjs

@@ -1 +1,228 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("../../../constants/aria.cjs"),R=require("../../../constants/event.cjs"),k=require("lodash-es"),u=require("vue"),W=require("../constants.cjs"),{left:$,down:G,right:I,up:J,home:Q,end:Z,pageUp:D,pageDown:ee}=H.EVENT_CODE,oe=(n,e,g)=>{const s=u.ref(),l=u.ref(!1),i=u.computed(()=>e.value instanceof Function),c=u.computed(()=>i.value&&e.value(n.modelValue)||n.modelValue),f=k.debounce(()=>{g.value&&(l.value=!0)},50),y=k.debounce(()=>{g.value&&(l.value=!1)},50);return{tooltip:s,tooltipVisible:l,formatValue:c,displayTooltip:f,hideTooltip:y}},te=(n,e,g)=>{const{disabled:s,min:l,max:i,step:c,showTooltip:f,precision:y,sliderSize:b,formatTooltip:X,emitChange:m,resetSize:Y,updateDragging:S}=u.inject(W.sliderContextKey),{tooltip:V,tooltipVisible:K,formatValue:N,displayTooltip:E,hideTooltip:L}=oe(n,X,f),P=u.ref(),w=u.computed(()=>`${(n.modelValue-l.value)/(i.value-l.value)*100}%`),C=u.computed(()=>n.vertical?{bottom:w.value}:{left:w.value}),x=()=>{e.hovering=!0,E()},F=()=>{e.hovering=!1,e.dragging||L()},q=o=>{s.value||(o.preventDefault(),A(o),window.addEventListener("mousemove",h),window.addEventListener("touchmove",h),window.addEventListener("mouseup",d),window.addEventListener("touchend",d),window.addEventListener("contextmenu",d),P.value.focus())},p=o=>{s.value||(e.newPosition=Number.parseFloat(w.value)+o/(i.value-l.value)*100,a(e.newPosition),m())},M=()=>{p(-c.value)},B=()=>{p(c.value)},O=()=>{p(-c.value*4)},U=()=>{p(c.value*4)},_=()=>{s.value||(a(0),m())},j=()=>{s.value||(a(100),m())},z=o=>{let t=!0;[$,G].includes(o.key)?M():[I,J].includes(o.key)?B():o.key===Q?_():o.key===Z?j():o.key===ee?O():o.key===D?U():t=!1,t&&o.preventDefault()},T=o=>{let t,r;return o.type.startsWith("touch")?(r=o.touches[0].clientY,t=o.touches[0].clientX):(r=o.clientY,t=o.clientX),{clientX:t,clientY:r}},A=o=>{e.dragging=!0,e.isClick=!0;const{clientX:t,clientY:r}=T(o);n.vertical?e.startY=r:e.startX=t,e.startPosition=Number.parseFloat(w.value),e.newPosition=e.startPosition},h=o=>{if(e.dragging){e.isClick=!1,E(),Y();let t;const{clientX:r,clientY:v}=T(o);n.vertical?(e.currentY=v,t=(e.startY-e.currentY)/b.value*100):(e.currentX=r,t=(e.currentX-e.startX)/b.value*100),e.newPosition=e.startPosition+t,a(e.newPosition)}},d=()=>{e.dragging&&(setTimeout(()=>{e.dragging=!1,e.hovering||L(),e.isClick||a(e.newPosition),m()},0),window.removeEventListener("mousemove",h),window.removeEventListener("touchmove",h),window.removeEventListener("mouseup",d),window.removeEventListener("touchend",d),window.removeEventListener("contextmenu",d))},a=async o=>{if(o===null||Number.isNaN(+o))return;o<0?o=0:o>100&&(o=100);const t=100/((i.value-l.value)/c.value);let v=Math.round(o/t)*t*(i.value-l.value)*.01+l.value;v=Number.parseFloat(v.toFixed(y.value)),v!==n.modelValue&&g(R.UPDATE_MODEL_EVENT,v),!e.dragging&&n.modelValue!==e.oldValue&&(e.oldValue=n.modelValue),await u.nextTick(),e.dragging&&E(),V.value.updatePopper()};return u.watch(()=>e.dragging,o=>{S(o)}),{disabled:s,button:P,tooltip:V,tooltipVisible:K,showTooltip:f,wrapperStyle:C,formatValue:N,handleMouseEnter:x,handleMouseLeave:F,onButtonDown:q,onKeyDown:z,setPosition:a}};exports.useSliderButton=te;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const aria = require("../../../constants/aria.cjs");
+const event = require("../../../constants/event.cjs");
+const lodashEs = require("lodash-es");
+const vue = require("vue");
+const constants = require("../constants.cjs");
+const { left, down, right, up, home, end, pageUp, pageDown } = aria.EVENT_CODE;
+const useTooltip = (props, formatTooltip, showTooltip) => {
+  const tooltip = vue.ref();
+  const tooltipVisible = vue.ref(false);
+  const enableFormat = vue.computed(() => {
+    return formatTooltip.value instanceof Function;
+  });
+  const formatValue = vue.computed(() => {
+    return enableFormat.value && formatTooltip.value(props.modelValue) || props.modelValue;
+  });
+  const displayTooltip = lodashEs.debounce(() => {
+    showTooltip.value && (tooltipVisible.value = true);
+  }, 50);
+  const hideTooltip = lodashEs.debounce(() => {
+    showTooltip.value && (tooltipVisible.value = false);
+  }, 50);
+  return {
+    tooltip,
+    tooltipVisible,
+    formatValue,
+    displayTooltip,
+    hideTooltip
+  };
+};
+const useSliderButton = (props, initData, emit) => {
+  const {
+    disabled,
+    min,
+    max,
+    step,
+    showTooltip,
+    precision,
+    sliderSize,
+    formatTooltip,
+    emitChange,
+    resetSize,
+    updateDragging
+  } = vue.inject(constants.sliderContextKey);
+  const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } = useTooltip(props, formatTooltip, showTooltip);
+  const button = vue.ref();
+  const currentPosition = vue.computed(() => {
+    return `${(props.modelValue - min.value) / (max.value - min.value) * 100}%`;
+  });
+  const wrapperStyle = vue.computed(() => {
+    return props.vertical ? { bottom: currentPosition.value } : { left: currentPosition.value };
+  });
+  const handleMouseEnter = () => {
+    initData.hovering = true;
+    displayTooltip();
+  };
+  const handleMouseLeave = () => {
+    initData.hovering = false;
+    if (!initData.dragging) {
+      hideTooltip();
+    }
+  };
+  const onButtonDown = (event2) => {
+    if (disabled.value) return;
+    event2.preventDefault();
+    onDragStart(event2);
+    window.addEventListener("mousemove", onDragging);
+    window.addEventListener("touchmove", onDragging);
+    window.addEventListener("mouseup", onDragEnd);
+    window.addEventListener("touchend", onDragEnd);
+    window.addEventListener("contextmenu", onDragEnd);
+    button.value.focus();
+  };
+  const incrementPosition = (amount) => {
+    if (disabled.value) return;
+    initData.newPosition = Number.parseFloat(currentPosition.value) + amount / (max.value - min.value) * 100;
+    setPosition(initData.newPosition);
+    emitChange();
+  };
+  const onLeftKeyDown = () => {
+    incrementPosition(-step.value);
+  };
+  const onRightKeyDown = () => {
+    incrementPosition(step.value);
+  };
+  const onPageDownKeyDown = () => {
+    incrementPosition(-step.value * 4);
+  };
+  const onPageUpKeyDown = () => {
+    incrementPosition(step.value * 4);
+  };
+  const onHomeKeyDown = () => {
+    if (disabled.value) return;
+    setPosition(0);
+    emitChange();
+  };
+  const onEndKeyDown = () => {
+    if (disabled.value) return;
+    setPosition(100);
+    emitChange();
+  };
+  const onKeyDown = (event2) => {
+    let isPreventDefault = true;
+    if ([left, down].includes(event2.key)) {
+      onLeftKeyDown();
+    } else if ([right, up].includes(event2.key)) {
+      onRightKeyDown();
+    } else if (event2.key === home) {
+      onHomeKeyDown();
+    } else if (event2.key === end) {
+      onEndKeyDown();
+    } else if (event2.key === pageDown) {
+      onPageDownKeyDown();
+    } else if (event2.key === pageUp) {
+      onPageUpKeyDown();
+    } else {
+      isPreventDefault = false;
+    }
+    isPreventDefault && event2.preventDefault();
+  };
+  const getClientXY = (event2) => {
+    let clientX;
+    let clientY;
+    if (event2.type.startsWith("touch")) {
+      clientY = event2.touches[0].clientY;
+      clientX = event2.touches[0].clientX;
+    } else {
+      clientY = event2.clientY;
+      clientX = event2.clientX;
+    }
+    return {
+      clientX,
+      clientY
+    };
+  };
+  const onDragStart = (event2) => {
+    initData.dragging = true;
+    initData.isClick = true;
+    const { clientX, clientY } = getClientXY(event2);
+    if (props.vertical) {
+      initData.startY = clientY;
+    } else {
+      initData.startX = clientX;
+    }
+    initData.startPosition = Number.parseFloat(currentPosition.value);
+    initData.newPosition = initData.startPosition;
+  };
+  const onDragging = (event2) => {
+    if (initData.dragging) {
+      initData.isClick = false;
+      displayTooltip();
+      resetSize();
+      let diff;
+      const { clientX, clientY } = getClientXY(event2);
+      if (props.vertical) {
+        initData.currentY = clientY;
+        diff = (initData.startY - initData.currentY) / sliderSize.value * 100;
+      } else {
+        initData.currentX = clientX;
+        diff = (initData.currentX - initData.startX) / sliderSize.value * 100;
+      }
+      initData.newPosition = initData.startPosition + diff;
+      setPosition(initData.newPosition);
+    }
+  };
+  const onDragEnd = () => {
+    if (initData.dragging) {
+      setTimeout(() => {
+        initData.dragging = false;
+        if (!initData.hovering) {
+          hideTooltip();
+        }
+        if (!initData.isClick) {
+          setPosition(initData.newPosition);
+        }
+        emitChange();
+      }, 0);
+      window.removeEventListener("mousemove", onDragging);
+      window.removeEventListener("touchmove", onDragging);
+      window.removeEventListener("mouseup", onDragEnd);
+      window.removeEventListener("touchend", onDragEnd);
+      window.removeEventListener("contextmenu", onDragEnd);
+    }
+  };
+  const setPosition = async (newPosition) => {
+    if (newPosition === null || Number.isNaN(+newPosition)) return;
+    if (newPosition < 0) {
+      newPosition = 0;
+    } else if (newPosition > 100) {
+      newPosition = 100;
+    }
+    const lengthPerStep = 100 / ((max.value - min.value) / step.value);
+    const steps = Math.round(newPosition / lengthPerStep);
+    let value = steps * lengthPerStep * (max.value - min.value) * 0.01 + min.value;
+    value = Number.parseFloat(value.toFixed(precision.value));
+    if (value !== props.modelValue) {
+      emit(event.UPDATE_MODEL_EVENT, value);
+    }
+    if (!initData.dragging && props.modelValue !== initData.oldValue) {
+      initData.oldValue = props.modelValue;
+    }
+    await vue.nextTick();
+    initData.dragging && displayTooltip();
+    tooltip.value.updatePopper();
+  };
+  vue.watch(
+    () => initData.dragging,
+    (val) => {
+      updateDragging(val);
+    }
+  );
+  return {
+    disabled,
+    button,
+    tooltip,
+    tooltipVisible,
+    showTooltip,
+    wrapperStyle,
+    formatValue,
+    handleMouseEnter,
+    handleMouseLeave,
+    onButtonDown,
+    onKeyDown,
+    setPosition
+  };
+};
+exports.useSliderButton = useSliderButton;

package/lib/components/slider/composables/use-stops.cjs

@@ -1 +1,39 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("@vueuse/core");require("@vft/utils");const c=require("../../../utils/error.cjs");require("../../config-provider/hooks/use-global-config.cjs");const S=require("vue");require("lodash-es");const f=(e,i,r,m)=>({stops:S.computed(()=>{if(!e.showStops||e.min>e.max)return[];if(e.step===0)return c.debugWarn("ElSlider","step should not be 0."),[];const n=(e.max-e.min)/e.step,l=100*e.step/(e.max-e.min),u=Array.from({length:n-1}).map((t,a)=>(a+1)*l);return e.range?u.filter(t=>t<100*(r.value-e.min)/(e.max-e.min)||t>100*(m.value-e.min)/(e.max-e.min)):u.filter(t=>t>100*(i.firstValue-e.min)/(e.max-e.min))}),getStopStyle:n=>e.vertical?{bottom:`${n}%`}:{left:`${n}%`}});exports.useStops=f;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("@vueuse/core");
+require("@vft/utils");
+const error = require("../../../utils/error.cjs");
+require("../../config-provider/hooks/use-global-config.cjs");
+const vue = require("vue");
+require("lodash-es");
+const useStops = (props, initData, minValue, maxValue) => {
+  const stops = vue.computed(() => {
+    if (!props.showStops || props.min > props.max) return [];
+    if (props.step === 0) {
+      error.debugWarn("ElSlider", "step should not be 0.");
+      return [];
+    }
+    const stopCount = (props.max - props.min) / props.step;
+    const stepWidth = 100 * props.step / (props.max - props.min);
+    const result = Array.from({ length: stopCount - 1 }).map(
+      (_, index) => (index + 1) * stepWidth
+    );
+    if (props.range) {
+      return result.filter((step) => {
+        return step < 100 * (minValue.value - props.min) / (props.max - props.min) || step > 100 * (maxValue.value - props.min) / (props.max - props.min);
+      });
+    } else {
+      return result.filter(
+        (step) => step > 100 * (initData.firstValue - props.min) / (props.max - props.min)
+      );
+    }
+  });
+  const getStopStyle = (position) => {
+    return props.vertical ? { bottom: `${position}%` } : { left: `${position}%` };
+  };
+  return {
+    stops,
+    getStopStyle
+  };
+};
+exports.useStops = useStops;