vuux/dist/es/WheelPicker/src/hook/useWheelPicker.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { ref as s, computed as r, watch as H, onMounted as $, onUnmounted as C } from "vue";
const k = (t, l, m) => {
  const v = s(!1), f = s(0), o = s(0), g = s(0), L = r(() => ({
    "--wheel-theme": t.theme,
    "--wheel-width": `${t.width}px`,
    "--wheel-height": `${5 * t.itemHeight}px`,
    "--wheel-item-height": `${t.itemHeight}px`
  })), u = r(() => ["-", ...t.list]), d = (e) => e === "-" ? null : typeof e == "string" || typeof e == "number" ? e : e[t.value] !== void 0 ? e[t.value] : e, x = () => {
    if (t.modelValue === void 0 || t.modelValue === null)
      return 0;
    const e = u.value.findIndex((a) => d(a) === t.modelValue);
    return e >= 0 ? e : 0;
  }, n = s(x()), c = r(() => Math.floor(5 / 2)), h = r(() => -n.value * t.itemHeight + c.value * t.itemHeight), y = r(() => ({
    transform: `translateY(${v.value ? o.value : h.value}px)`,
    transition: v.value ? "none" : "transform 0.3s ease"
  })), V = (e) => typeof e == "string" || typeof e == "number" ? String(e) : e[t.label] !== void 0 ? String(e[t.label]) : String(e), b = () => u.value.length === 0 ? null : d(u.value[n.value]), I = (e) => {
    e.cancelable && e.preventDefault(), e.deltaY > 0 ? n.value = Math.min(n.value + 1, u.value.length - 1) : n.value = Math.max(n.value - 1, 0), m("update:modelValue", b());
  }, Y = (e) => !e.touches || e.touches.length === 0 ? null : { clientY: e.touches[0].clientY }, T = (e) => {
    e.cancelable && e.preventDefault();
    const a = Y(e);
    a && (v.value = !0, f.value = a.clientY, g.value = h.value, o.value = h.value);
  }, M = (e) => {
    if (e.cancelable && e.preventDefault(), !v.value)
      return;
    const a = Y(e);
    if (!a)
      return;
    const i = a.clientY - f.value;
    o.value = g.value + i;
    const S = -((u.value.length - 1) * t.itemHeight) + c.value * t.itemHeight, P = c.value * t.itemHeight;
    o.value = Math.max(S, Math.min(P, o.value));
  }, E = () => {
    if (!v.value)
      return;
    v.value = !1;
    const e = o.value, a = Math.round((-e + c.value * t.itemHeight) / t.itemHeight), i = Math.max(0, Math.min(u.value.length - 1, a));
    i !== n.value && (n.value = i, m("update:modelValue", b()));
  };
  return H(
    () => t.modelValue,
    (e) => {
      if (e == null)
        n.value = 0;
      else {
        const a = u.value.findIndex((i) => d(i) === e);
        a >= 0 && a !== n.value && (n.value = a);
      }
    }
  ), H(
    () => t.list,
    () => {
      n.value = x();
    },
    { deep: !0 }
  ), $(() => {
    l.value && (l.value.addEventListener("wheel", I, { passive: !1 }), l.value.addEventListener("touchstart", T, { passive: !1 }), l.value.addEventListener("touchmove", M, { passive: !1 }), l.value.addEventListener("touchend", E));
  }), C(() => {
    l.value && (l.value.removeEventListener("wheel", I), l.value.removeEventListener("touchstart", T), l.value.removeEventListener("touchmove", M), l.value.removeEventListener("touchend", E));
  }), {
    styles: L,
    selectedIndex: n,
    flattenedItems: u,
    listStyles: y,
    getItemLabel: V
  };
};
export {
  k as useWheelPicker
};