vft 0.0.368 → 0.0.369

package/es/components/slider/composables/use-slide.js

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

package/es/components/slider/composables/use-slider-button.js

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

package/es/components/slider/composables/use-stops.js

@@ -1,23 +1,39 @@
 import "@vueuse/core";
 import "@vft/utils";
-import { debugWarn as f } from "../../../utils/error.js";
+import { debugWarn } from "../../../utils/error.js";
 import "../../config-provider/hooks/use-global-config.js";
-import { computed as c } from "vue";
+import { computed } from "vue";
 import "lodash-es";
-const y = (t, i, u, l) => ({
-  stops: c(() => {
-    if (!t.showStops || t.min > t.max) return [];
-    if (t.step === 0)
-      return f("ElSlider", "step should not be 0."), [];
-    const m = (t.max - t.min) / t.step, a = 100 * t.step / (t.max - t.min), n = Array.from({ length: m - 1 }).map(
-      (e, r) => (r + 1) * a
+const useStops = (props, initData, minValue, maxValue) => {
+  const stops = computed(() => {
+    if (!props.showStops || props.min > props.max) return [];
+    if (props.step === 0) {
+      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
     );
-    return t.range ? n.filter((e) => e < 100 * (u.value - t.min) / (t.max - t.min) || e > 100 * (l.value - t.min) / (t.max - t.min)) : n.filter(
-      (e) => e > 100 * (i.firstValue - t.min) / (t.max - t.min)
-    );
-  }),
-  getStopStyle: (m) => t.vertical ? { bottom: `${m}%` } : { left: `${m}%` }
-});
+    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
+  };
+};
 export {
-  y as useStops
+  useStops
 };