vft 0.0.369 → 0.0.371

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

@@ -1,141 +1,80 @@
 import "../../form/index.js";
-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
+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
     );
-  };
-  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;
+  }, 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;
     } else {
-      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();
+      const o = t.touches?.item(0)?.clientX ?? t.clientX, E = c.value.getBoundingClientRect().left;
+      l = (o - E) / n.sliderSize * 100;
     }
+    if (!(l < 0 || l > 100))
+      return h(l);
   };
   return {
-    elFormItem,
-    slider,
-    firstButton,
-    secondButton,
-    sliderDisabled,
-    minValue,
-    maxValue,
-    runwayStyle,
-    barStyle,
-    resetSize,
-    setPosition,
-    emitChange,
-    onSliderWrapperPrevent,
-    onSliderClick,
-    onSliderDown,
-    setFirstValue,
-    setSecondValue
+    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
   };
 };
 export {
-  useSlide
+  L as useSlide
 };

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

@@ -1,228 +1,105 @@
-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);
+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);
   }, 50);
   return {
-    tooltip,
-    tooltipVisible,
-    formatValue,
-    displayTooltip,
-    hideTooltip
+    tooltip: u,
+    tooltipVisible: l,
+    formatValue: s,
+    displayTooltip: f,
+    hideTooltip: E
   };
-};
-const useSliderButton = (props, initData, emit) => {
+}, ve = (t, e, a) => {
   const {
-    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
+    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
     };
-  };
-  const onDragStart = (event) => {
-    initData.dragging = true;
-    initData.isClick = true;
-    const { clientX, clientY } = getClientXY(event);
-    if (props.vertical) {
-      initData.startY = clientY;
-    } else {
-      initData.startX = clientX;
+  }, 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);
     }
-    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);
+  }, 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);
     }
-  };
-  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
+  ), {
+    disabled: u,
+    button: k,
+    tooltip: P,
+    tooltipVisible: x,
+    showTooltip: f,
+    wrapperStyle: F,
+    formatValue: C,
+    handleMouseEnter: S,
+    handleMouseLeave: M,
+    onButtonDown: U,
+    onKeyDown: H,
+    setPosition: d
   };
 };
 export {
-  useSliderButton
+  ve as useSliderButton
 };

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

@@ -1,39 +1,23 @@
 import "@vueuse/core";
 import "@vft/utils";
-import { debugWarn } from "../../../utils/error.js";
+import { debugWarn as f } from "../../../utils/error.js";
 import "../../config-provider/hooks/use-global-config.js";
-import { computed } from "vue";
+import { computed as c } from "vue";
 import "lodash-es";
-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
+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
     );
-    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
-  };
-};
+    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}%` }
+});
 export {
-  useStops
+  y as useStops
 };