@component-hook/picker 1.4.4 → 1.5.0

package/dist/vue/picker.es.js

@@ -1,447 +1,451 @@
 import "./index.css";
-import { ref as R, readonly as Z, isRef as j, defineComponent as L, toRef as re, openBlock as k, createElementBlock as Y, unref as h, withModifiers as oe, createElementVNode as C, normalizeStyle as q, Fragment as $, renderList as se, toDisplayString as ie, useModel as U, useTemplateRef as ce, computed as I, watchEffect as me, renderSlot as J, createBlock as B, mergeModels as V, nextTick as fe } from "vue";
-const de = Array.isArray;
-function pe(e, l) {
-  if (ue(e)) return "multiple";
-  const [f] = e;
-  return f?.[l.children] ? "cascade" : "single";
+import { Fragment as e, computed as t, createBlock as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, nextTick as s, normalizeStyle as c, openBlock as l, readonly as u, ref as d, renderList as f, renderSlot as p, toDisplayString as m, toRef as h, unref as g, useModel as _, useTemplateRef as v, watchEffect as y, withModifiers as b } from "vue";
+//#region src/shared/constants.ts
+var x = .52, S = .008, C = [
+	"year",
+	"month",
+	"day"
+], w = [
+	"hour",
+	"minute",
+	"second"
+], T = Array.isArray;
+//#endregion
+//#region src/shared/utils/common.ts
+function E(e, t) {
+	if (j(e)) return "multiple";
+	let [n] = e;
+	return n?.[t.children] ? "cascade" : "single";
 }
-function ve(e) {
-  return {
-    children: e?.children || "children",
-    label: e?.label || "label",
-    value: e?.value || "value"
-  };
+function D(e) {
+	return {
+		children: e?.children || "children",
+		label: e?.label || "label",
+		value: e?.value || "value"
+	};
 }
-function he(e, l, f) {
-  if (ue(e)) return [];
-  const o = [];
-  let u = e, i = 0;
-  for (; u; ) {
-    const v = l[i];
-    let m = le(u, v, f);
-    m === -1 && (m = 0), o.push(u), i += 1, u = u[m]?.[f.children];
-  }
-  return o;
+function O(e, t, n) {
+	if (j(e)) return [];
+	let r = [], i = e, a = 0;
+	for (; i;) {
+		let e = t[a], o = A(i, e, n);
+		o === -1 && (o = 0), r.push(i), a += 1, i = i[o]?.[n.children];
+	}
+	return r;
 }
-function ge(e, l, f, o) {
-  const u = [...f];
-  let i = e, v = l + 1;
-  for (; i?.[o.children]; ) {
-    const m = i[o.children][0];
-    u[v] = m.value, i = m, v += 1;
-  }
-  return u;
+function k(e, t, n, r) {
+	let i = [...n], a = e, o = t + 1;
+	for (; a?.[r.children];) {
+		let e = a[r.children][0];
+		i[o] = e.value, a = e, o += 1;
+	}
+	return i;
 }
-function le(e, l, f) {
-  return e.findIndex((o) => o?.[f.value] === l);
+function A(e, t, n) {
+	return e.findIndex((e) => e?.[n.value] === t);
 }
-function ue(e) {
-  const [l] = e;
-  return de(l);
+function j(e) {
+	let [t] = e;
+	return T(t);
 }
-function Te(e, l) {
-  return e > l ? "horizontal" : l > e ? "vertical" : "";
+function M(e, t) {
+	return e > t ? "horizontal" : t > e ? "vertical" : "";
 }
-function b(e, l, f) {
-  const o = [];
-  for (let u = e; u <= l; u++) {
-    const i = f(`${u}`);
-    o.push({ label: i, value: u });
-  }
-  return o;
+function N() {
+	let { fontSize: e } = getComputedStyle(document.documentElement);
+	return Number(e.replace("px", "")) || 16;
 }
-function Q(e, l) {
-  return e === l.getFullYear();
+function P(e, t, n) {
+	let r = [];
+	for (let i = e; i <= t; i++) {
+		let e = n(String(i));
+		r.push({
+			label: e,
+			value: i
+		});
+	}
+	return r;
 }
-function W(e, l) {
-  return e === l.getFullYear();
+function F(e, t) {
+	return e === t.getFullYear();
 }
-function Me(e, l) {
-  return e === l.getMonth() + 1;
+function I(e, t) {
+	return e === t.getFullYear();
 }
-function xe(e, l) {
-  return e === l.getMonth() + 1;
+function L(e, t) {
+	return e === t.getMonth() + 1;
 }
-function ye(e, l) {
-  return new Date(e, l, 0).getDate();
+function R(e, t) {
+	return e === t.getMonth() + 1;
 }
-function _(e, l, f) {
-  const o = /* @__PURE__ */ new Date(), u = Date.now(), i = e.getTime(), v = l.getTime(), m = u >= i && u <= v;
-  return f === "year" ? m ? o.getFullYear() : e.getFullYear() : f === "month" ? m ? o.getMonth() + 1 : e.getMonth() + 1 : m ? o.getDate() : e.getDate();
+function z(e, t) {
+	return new Date(e, t, 0).getDate();
 }
-function N(e) {
-  return e;
+function B(e, t, n) {
+	let r = /* @__PURE__ */ new Date(), i = Date.now(), a = e.getTime(), o = t.getTime(), s = i >= a && i <= o;
+	return n === "year" ? s ? r.getFullYear() : e.getFullYear() : n === "month" ? (s ? r.getMonth() : e.getMonth()) + 1 : s ? r.getDate() : e.getDate();
 }
-function De(e) {
-  return /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e);
-}
-function ee(e) {
-  if (!De(e)) return null;
-  const [l, f, o] = e.split(":");
-  return { hour: Number(l), minute: Number(f), second: Number(o) };
+function V(e) {
+	return e;
 }
 function H(e) {
-  return e.padStart(2, "0");
+	return /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e);
+}
+function U(e) {
+	if (!H(e)) return null;
+	let [t, n, r] = e.split(":");
+	return {
+		hour: Number(t),
+		minute: Number(n),
+		second: Number(r)
+	};
+}
+function W(e) {
+	return e.padStart(2, "0");
 }
-function te(e, l, f) {
-  const o = Date.now(), { hour: u, minute: i, second: v } = e, { hour: m, minute: d, second: p } = l, g = (/* @__PURE__ */ new Date()).setHours(u, i, v), M = (/* @__PURE__ */ new Date()).setHours(m, d, p), r = o >= g && o <= M;
-  return f === "hour" ? r ? (/* @__PURE__ */ new Date()).getHours() : u : f === "minute" ? r ? (/* @__PURE__ */ new Date()).getMinutes() : i : r ? (/* @__PURE__ */ new Date()).getSeconds() : v;
+function G(e, t, n) {
+	let r = Date.now(), { hour: i, minute: a, second: o } = e, { hour: s, minute: c, second: l } = t, u = (/* @__PURE__ */ new Date()).setHours(i, a, o), d = (/* @__PURE__ */ new Date()).setHours(s, c, l), f = r >= u && r <= d;
+	return n === "hour" ? f ? (/* @__PURE__ */ new Date()).getHours() : i : n === "minute" ? f ? (/* @__PURE__ */ new Date()).getMinutes() : a : f ? (/* @__PURE__ */ new Date()).getSeconds() : o;
 }
-const ke = 16, F = 48, Se = 0.52, ne = 150, X = 300, Ye = 15, Ie = 8e-3, Oe = ["year", "month", "day"], be = ["hour", "minute", "second"];
-function Ve() {
-  const e = {
-    startX: 0,
-    startY: 0,
-    deltaX: 0,
-    deltaY: 0,
-    offsetX: 0,
-    offsetY: 0
-  };
-  let l = "";
-  const f = () => l === "vertical", o = () => l === "horizontal";
-  function u() {
-    e.deltaX = 0, e.deltaY = 0, e.offsetX = 0, e.offsetY = 0, l = "";
-  }
-  function i(d) {
-    const p = "touches" in d ? d.touches[0] : d;
-    u(), e.startX = p.clientX, e.startY = p.clientY;
-  }
-  function v(d) {
-    if (!e.startX || !e.startY) return !0;
-    const p = "touches" in d ? d.touches[0] : d;
-    e.deltaX = Math.max(p.clientX, 0) - e.startX, e.deltaY = p.clientY - e.startY, e.offsetX = Math.abs(e.deltaX), e.offsetY = Math.abs(e.deltaY);
-    const g = 10;
-    (!l || e.offsetX < g && e.offsetY < g) && (l = Te(e.offsetX, e.offsetY));
-  }
-  function m() {
-    e.startX = 0, e.startY = 0;
-  }
-  return {
-    pointer: e,
-    move: v,
-    start: i,
-    stop: m,
-    reset: u,
-    isVertical: f,
-    isHorizontal: o
-  };
+//#endregion
+//#region src/shared/utils/pointer.ts
+function K() {
+	let e = {
+		startX: 0,
+		startY: 0,
+		deltaX: 0,
+		deltaY: 0,
+		offsetX: 0,
+		offsetY: 0
+	}, t = "", n = !0, r = () => t === "vertical", i = () => t === "horizontal";
+	function a() {
+		e.deltaX = 0, e.deltaY = 0, e.offsetX = 0, e.offsetY = 0, t = "", n = !0;
+	}
+	function o(t) {
+		let n = "touches" in t ? t.touches[0] : t;
+		a(), e.startX = n.clientX, e.startY = n.clientY;
+	}
+	function s(r) {
+		if (!e.startX || !e.startY) return !0;
+		let i = "touches" in r ? r.touches[0] : r;
+		e.deltaX = Math.max(i.clientX, 0) - e.startX, e.deltaY = i.clientY - e.startY, e.offsetX = Math.abs(e.deltaX), e.offsetY = Math.abs(e.deltaY), (!t || e.offsetX < 10 && e.offsetY < 10) && (t = M(e.offsetX, e.offsetY)), n && (e.offsetX > 5 || e.offsetY > 5) && (n = !1);
+	}
+	function c() {
+		e.startX = 0, e.startY = 0;
+	}
+	return {
+		pointer: e,
+		move: s,
+		start: o,
+		stop: c,
+		reset: a,
+		isVertical: r,
+		isHorizontal: i
+	};
 }
-function Ce({ column: e, onChange: l }) {
-  const o = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) / ke, u = R(0), i = R(0), { pointer: v, start: m, move: d, stop: p } = Ve();
-  let g = 0, M = 0, r = 0, s = !1, t = null;
-  function n(T) {
-    m(T), s = !0, i.value = 0, M = Date.now(), g = u.value, r = g, t = null;
-  }
-  function a(T) {
-    if (d(T)) return;
-    const D = j(e) ? e.value.length : e.length, E = g + v.deltaY, A = P((D - 1) * -F), G = Math.min(Math.max(E, A), 0), K = Date.now();
-    u.value = G, !(K - M <= X) && (M = K, r = G);
-  }
-  function c() {
-    p();
-    const T = u.value - r, x = Date.now() - M;
-    if (x < X && Math.abs(T) > Ye) {
-      y(T, x);
-      return;
-    }
-    const D = w(u.value);
-    i.value = ne, O(D), s = !1;
-  }
-  function y(T, x) {
-    const D = Math.abs(T / x), E = u.value + D / Ie * (T < 0 ? -1 : 1), A = w(E);
-    i.value = X, O(A);
-  }
-  function S() {
-    i.value = 0, s = !1, t && (t(), t = null);
-  }
-  function O(T) {
-    const x = -T * P(F), D = () => l?.(T);
-    s && x !== u.value ? t = D : D(), u.value = x;
-  }
-  function w(T) {
-    const x = j(e) ? e.value.length : e.length, D = Math.round(-T / P(F));
-    return D < 0 ? 0 : D >= x ? x - 1 : D;
-  }
-  function P(T) {
-    return T * o;
-  }
-  function z(T, x = "auto") {
-    s && x === "smooth" || (t = null, s = x === "smooth", i.value = x === "smooth" ? ne : 0, O(T));
-  }
-  return {
-    offsetY: Z(u),
-    transitionDuration: Z(i),
-    onPointerDown: n,
-    onPointerMove: a,
-    onPointerUp: c,
-    stopInertialSliding: S,
-    scrollToIndex: z
-  };
+//#endregion
+//#region src/vue/hooks/use-scroll-snap.ts
+function q({ column: e, onChange: t }) {
+	let n = N() / 16, r = d(0), i = d(0), { pointer: a, start: o, move: s, stop: c } = K(), l = 0, f = 0, p = 0, m = !1, h = null;
+	function _(e) {
+		o(e), m = !0, i.value = 0, f = Date.now(), l = r.value, p = l, h = null;
+	}
+	function v(t) {
+		if (s(t)) return;
+		let n = g(e).length, i = l + a.deltaY, o = T((n - 1) * -48), c = Math.min(Math.max(i, o), 0), u = Date.now();
+		r.value = c, !(u - f <= 300) && (f = u, p = c);
+	}
+	function y() {
+		c();
+		let e = r.value - p, t = Date.now() - f;
+		if (t < 300 && Math.abs(e) > 15) {
+			b(e, t);
+			return;
+		}
+		let n = w(r.value);
+		i.value = 150, C(n), m = !1;
+	}
+	function b(e, t) {
+		let n = Math.abs(e / t), a = w(r.value + n / S * (e < 0 ? -1 : 1));
+		i.value = 300, C(a);
+	}
+	function x() {
+		i.value = 0, m = !1, h &&= (h(), null);
+	}
+	function C(e) {
+		let n = -e * T(48), i = () => t?.(e);
+		m && n !== r.value ? h = i : i(), r.value = n;
+	}
+	function w(t) {
+		let n = g(e).length, r = Math.round(-t / T(48));
+		return r < 0 ? 0 : r >= n ? n - 1 : r;
+	}
+	function T(e) {
+		return e * n;
+	}
+	function E(e, t = "auto") {
+		m && t === "smooth" || (h = null, m = t === "smooth", i.value = t === "smooth" ? 150 : 0, C(e));
+	}
+	return {
+		offsetY: u(r),
+		transitionDuration: u(i),
+		onPointerDown: _,
+		onPointerMove: v,
+		onPointerUp: y,
+		stopInertialSliding: x,
+		scrollToIndex: E
+	};
 }
-const we = ["onClick"], Pe = /* @__PURE__ */ L({
-  __name: "PickerColumn",
-  props: {
-    column: {},
-    fields: {},
-    selectedIndex: { default: 0 }
-  },
-  emits: ["change"],
-  setup(e, { expose: l, emit: f }) {
-    const o = e, u = f, { offsetY: i, transitionDuration: v, onPointerDown: m, onPointerMove: d, onPointerUp: p, stopInertialSliding: g, scrollToIndex: M } = Ce({
-      column: re(o, "column"),
-      onChange: r
-    });
-    function r(n) {
-      n !== o.selectedIndex && u("change", n);
-    }
-    function s(n = o.selectedIndex, a) {
-      M(n, a);
-    }
-    function t(n) {
-      n !== o.selectedIndex && s(n, "smooth");
-    }
-    return l({ scrollToSelected: s }), (n, a) => (k(), Y("div", {
-      class: "chook-picker-column",
-      "aria-label": "Picker column",
-      onTouchstartPassive: a[1] || (a[1] = //@ts-ignore
-      (...c) => h(m) && h(m)(...c)),
-      onTouchmove: a[2] || (a[2] = oe(
-        //@ts-ignore
-        (...c) => h(d) && h(d)(...c),
-        ["prevent"]
-      )),
-      onTouchendPassive: a[3] || (a[3] = //@ts-ignore
-      (...c) => h(p) && h(p)(...c)),
-      onTouchcancel: a[4] || (a[4] = //@ts-ignore
-      (...c) => h(p) && h(p)(...c)),
-      onMousedownPassive: a[5] || (a[5] = //@ts-ignore
-      (...c) => h(m) && h(m)(...c)),
-      onMousemovePassive: a[6] || (a[6] = //@ts-ignore
-      (...c) => h(d) && h(d)(...c)),
-      onMouseupPassive: a[7] || (a[7] = //@ts-ignore
-      (...c) => h(p) && h(p)(...c)),
-      onMouseleavePassive: a[8] || (a[8] = //@ts-ignore
-      (...c) => h(p) && h(p)(...c))
-    }, [
-      C("ul", {
-        style: q({
-          overflowY: "hidden",
-          "--offset-y": `${h(i)}`,
-          transform: "translate3d(0, calc(var(--offset-y) * 1px), 0)",
-          transitionDuration: `${h(v)}ms`,
-          transitionProperty: h(v) ? "all" : "none"
-        }),
-        onTransitionend: a[0] || (a[0] = //@ts-ignore
-        (...c) => h(g) && h(g)(...c))
-      }, [
-        (k(!0), Y($, null, se(e.column, (c, y) => (k(), Y("li", {
-          key: c?.[e.fields.value],
-          class: "chook-picker-column-item",
-          role: "button",
-          tabindex: "0",
-          onClick: (S) => t(y)
-        }, [
-          C("p", {
-            class: "chook-picker-column-label",
-            style: q({
-              transform: `rotate3d(1, 0, 0, calc((${y * h(F)} + var(--offset-y)) * ${h(Se)}deg)`
-            })
-          }, ie(c?.[e.fields.label]), 5)
-        ], 8, we))), 128))
-      ], 36)
-    ], 32));
-  }
-}), Fe = {
-  class: "chook-picker-container",
-  "aria-label": "Picker"
-}, Le = { class: "chook-picker-loading" }, Ee = {
-  key: 1,
-  class: "chook-picker-columns"
-}, ae = /* @__PURE__ */ L({
-  __name: "Picker",
-  props: /* @__PURE__ */ V({
-    columns: {},
-    loading: { type: Boolean },
-    columnsFieldNames: {}
-  }, {
-    modelValue: { default: [] },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
-  setup(e, { emit: l }) {
-    const f = e, o = l, u = U(e, "modelValue"), i = R([]), v = ce("columnsRef"), m = I(() => ve(f.columnsFieldNames)), d = I(() => pe(f.columns, m.value)), p = I(() => {
-      const { columns: r } = f;
-      return d.value === "single" ? [r] : d.value === "multiple" ? r : he(r, u.value, m.value);
-    });
-    function g(r, s) {
-      const t = p.value[r], n = t[s]?.[m.value.value], a = u.value[r];
-      if (n === a) return;
-      const c = [...u.value];
-      if (c[r] = n, d.value === "cascade") {
-        const y = t[s];
-        u.value = ge(y, r, c, m.value);
-      } else
-        u.value = c;
-      fe(() => {
-        o("change", u.value);
-      });
-    }
-    function M() {
-      const r = p.value.length, s = [];
-      for (let t = 0; t < r; t++) {
-        const n = p.value[t], a = u.value[t], c = le(n, a, m.value);
-        if (c === -1) {
-          const S = (i.value[t] ?? 0) >= n.length ? Math.max(n.length - 1, 0) : 0;
-          u.value[t] = n[S]?.[m.value.value], s[t] = S;
-        } else
-          s[t] = c;
-        s[t] !== i.value[t] && v.value?.[t]?.scrollToSelected(s[t]);
-      }
-      i.value = s;
-    }
-    return me(
-      () => {
-        M();
-      },
-      { flush: "post" }
-    ), (r, s) => (k(), Y("div", Fe, [
-      e.loading ? (k(), Y($, { key: 0 }, [
-        C("div", Le, [
-          J(r.$slots, "loading")
-        ]),
-        s[1] || (s[1] = C("div", { class: "chook-picker-columns" }, null, -1))
-      ], 64)) : e.columns.length ? (k(), Y("div", {
-        key: 2,
-        class: "chook-picker-columns chook-picker-columns-backdrop",
-        onTouchmove: s[0] || (s[0] = oe(() => {
-        }, ["stop"]))
-      }, [
-        (k(!0), Y($, null, se(p.value, (t, n) => (k(), B(Pe, {
-          key: n,
-          ref_for: !0,
-          ref_key: "columnsRef",
-          ref: v,
-          column: t,
-          fields: m.value,
-          "selected-index": i.value[n],
-          onChange: (a) => g(n, a)
-        }, null, 8, ["column", "fields", "selected-index", "onChange"]))), 128)),
-        s[2] || (s[2] = C("div", { class: "chook-picker-mask-backdrop" }, null, -1))
-      ], 32)) : (k(), Y("div", Ee, [
-        J(r.$slots, "empty")
-      ]))
-    ]));
-  }
-}), Ne = /* @__PURE__ */ L({
-  __name: "DatePicker",
-  props: /* @__PURE__ */ V({
-    columnsType: { default: () => Oe },
-    minDate: { default: () => new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1) },
-    maxDate: { default: () => new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11, 31) },
-    formatYearLabel: { type: Function, default: N },
-    formatMonthLabel: { type: Function, default: N },
-    formatDayLabel: { type: Function, default: N }
-  }, {
-    modelValue: { default: [] },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
-  setup(e, { expose: l, emit: f }) {
-    const o = e, u = f, i = U(e, "modelValue"), v = I(() => {
-      const { columnsType: r, minDate: s, maxDate: t } = o, n = {
-        year: m,
-        month: d,
-        day: p
-      };
-      return r.map((a) => n[a](s, t));
-    });
-    i.value.length || M();
-    function m(r, s) {
-      const t = r.getFullYear(), n = s.getFullYear();
-      return b(t, n, o.formatYearLabel);
-    }
-    function d(r, s) {
-      const t = g("year"), n = Q(t, r) ? r.getMonth() + 1 : 1, a = W(t, s) ? s.getMonth() + 1 : 12;
-      return b(n, a, o.formatMonthLabel);
-    }
-    function p(r, s) {
-      const t = g("year"), n = g("month"), a = Q(t, r) && Me(n, r), c = W(t, s) && xe(n, s), y = a ? r.getDate() : 1, S = c ? s.getDate() : ye(t, n);
-      return b(y, S, o.formatDayLabel);
-    }
-    function g(r) {
-      const { columnsType: s } = o, t = s.indexOf(r), n = i.value[t];
-      return n ? Number(n) : _(o.minDate, o.maxDate, r);
-    }
-    function M() {
-      const { columnsType: r } = o;
-      i.value = r.map((s) => _(o.minDate, o.maxDate, s));
-    }
-    return l({
-      setCurrentDate: M
-    }), (r, s) => (k(), B(ae, {
-      modelValue: i.value,
-      "onUpdate:modelValue": s[0] || (s[0] = (t) => i.value = t),
-      columns: v.value,
-      onChange: s[1] || (s[1] = (t) => u("change", t))
-    }, null, 8, ["modelValue", "columns"]));
-  }
-}), He = /* @__PURE__ */ L({
-  __name: "TimePicker",
-  props: /* @__PURE__ */ V({
-    columnsType: { default: () => be },
-    minTime: {},
-    maxTime: {},
-    formatHourLabel: { type: Function, default: H },
-    formatMinuteLabel: { type: Function, default: H },
-    formatSecondLabel: { type: Function, default: H }
-  }, {
-    modelValue: { default: [] },
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
-  setup(e, { expose: l, emit: f }) {
-    const o = e, u = f, i = U(e, "modelValue"), v = I(() => {
-      const { columnsType: t } = o, n = {
-        hour: p,
-        minute: g,
-        second: M
-      };
-      return t.map((a) => n[a]());
-    }), m = I(() => ee(o.minTime ?? "") ?? { hour: 0, minute: 0, second: 0 }), d = I(() => ee(o.maxTime ?? "") ?? { hour: 23, minute: 59, second: 59 });
-    i.value.length || s();
-    function p() {
-      const t = m.value.hour, n = d.value.hour;
-      return b(t, n, o.formatHourLabel);
-    }
-    function g() {
-      const t = r("hour"), { hour: n, minute: a } = m.value, { hour: c, minute: y } = d.value;
-      return b(t === n ? a : 0, t === c ? y : 59, o.formatMinuteLabel);
-    }
-    function M() {
-      const t = r("hour"), n = r("minute"), { hour: a, minute: c, second: y } = m.value, { hour: S, minute: O, second: w } = d.value;
-      return b(t === a && n === c ? y : 0, t === S && n === O ? w : 59, o.formatSecondLabel);
-    }
-    function r(t) {
-      const { columnsType: n } = o, a = n.indexOf(t), c = i.value[a];
-      return c !== void 0 ? Number(c) : te(m.value, d.value, t);
-    }
-    function s() {
-      const { columnsType: t } = o;
-      i.value = t.map((n) => te(m.value, d.value, n));
-    }
-    return l({
-      setCurrentTime: s
-    }), (t, n) => (k(), B(ae, {
-      modelValue: i.value,
-      "onUpdate:modelValue": n[0] || (n[0] = (a) => i.value = a),
-      columns: v.value,
-      onChange: n[1] || (n[1] = (a) => u("change", a))
-    }, null, 8, ["modelValue", "columns"]));
-  }
+//#endregion
+//#region src/vue/components/PickerColumn.vue?vue&type=script&setup=true&lang.ts
+var J = ["onClick"], Y = /* @__PURE__ */ a({
+	__name: "PickerColumn",
+	props: {
+		column: {},
+		fields: {},
+		selectedIndex: { default: 0 }
+	},
+	emits: ["change"],
+	setup(t, { expose: n, emit: a }) {
+		let o = t, s = a, { offsetY: u, transitionDuration: d, onPointerDown: p, onPointerMove: _, onPointerUp: v, stopInertialSliding: y, scrollToIndex: S } = q({
+			column: h(o, "column"),
+			onChange: C
+		});
+		function C(e) {
+			e !== o.selectedIndex && s("change", e);
+		}
+		function w(e = o.selectedIndex, t) {
+			S(e, t);
+		}
+		function T(e) {
+			e !== o.selectedIndex && w(e, "smooth");
+		}
+		return n({ scrollToSelected: w }), (n, a) => (l(), r("div", {
+			class: "chook-picker-column",
+			"aria-label": "Picker column",
+			onTouchstartPassive: a[1] ||= (...e) => g(p) && g(p)(...e),
+			onTouchmove: a[2] ||= b((...e) => g(_) && g(_)(...e), ["prevent"]),
+			onTouchendPassive: a[3] ||= (...e) => g(v) && g(v)(...e),
+			onTouchcancel: a[4] ||= (...e) => g(v) && g(v)(...e),
+			onMousedownPassive: a[5] ||= (...e) => g(p) && g(p)(...e),
+			onMousemovePassive: a[6] ||= (...e) => g(_) && g(_)(...e),
+			onMouseupPassive: a[7] ||= (...e) => g(v) && g(v)(...e),
+			onMouseleavePassive: a[8] ||= (...e) => g(v) && g(v)(...e)
+		}, [i("ul", {
+			style: c({
+				overflowY: "hidden",
+				"--offset-y": `${g(u)}`,
+				transform: "translate3d(0, calc(var(--offset-y) * 1px), 0)",
+				transitionDuration: `${g(d)}ms`,
+				transitionProperty: g(d) ? "all" : "none"
+			}),
+			onTransitionend: a[0] ||= (...e) => g(y) && g(y)(...e)
+		}, [(l(!0), r(e, null, f(t.column, (e, n) => (l(), r("li", {
+			key: e?.[t.fields.value],
+			class: "chook-picker-column-item",
+			role: "button",
+			tabindex: "0",
+			onClick: (e) => T(n)
+		}, [i("p", {
+			class: "chook-picker-column-label",
+			style: c({ transform: `rotate3d(1, 0, 0, calc((${n * g(48)} + var(--offset-y)) * ${g(x)}deg)` })
+		}, m(e?.[t.fields.label]), 5)], 8, J))), 128))], 36)], 32));
+	}
+}), X = {
+	class: "chook-picker-container",
+	"aria-label": "Picker"
+}, Z = { class: "chook-picker-loading" }, Q = {
+	key: 1,
+	class: "chook-picker-columns"
+}, $ = /* @__PURE__ */ a({
+	__name: "Picker",
+	props: /*@__PURE__*/ o({
+		columns: {},
+		loading: { type: Boolean },
+		columnsFieldNames: {}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["change"], ["update:modelValue"]),
+	setup(a, { emit: o }) {
+		let c = a, u = o, m = _(a, "modelValue"), h = d([]), g = v("columnsRef"), x = t(() => D(c.columnsFieldNames)), S = t(() => E(c.columns, x.value)), C = t(() => {
+			let { columns: e } = c;
+			return S.value === "single" ? [e] : S.value === "multiple" ? e : O(e, m.value, x.value);
+		});
+		function w(e, t) {
+			let n = C.value[e], r = n[t]?.[x.value.value];
+			if (r === m.value[e]) return;
+			let i = [...m.value];
+			if (i[e] = r, S.value === "cascade") {
+				let r = n[t];
+				m.value = k(r, e, i, x.value);
+			} else m.value = i;
+			s(() => {
+				u("change", m.value);
+			});
+		}
+		function T() {
+			let e = C.value.length, t = [];
+			for (let n = 0; n < e; n++) {
+				let e = C.value[n], r = m.value[n], i = A(e, r, x.value);
+				if (i === -1) {
+					let r = (h.value[n] ?? 0) >= e.length ? Math.max(e.length - 1, 0) : 0;
+					m.value[n] = e[r]?.[x.value.value], t[n] = r;
+				} else t[n] = i;
+				t[n] !== h.value[n] && g.value?.[n]?.scrollToSelected(t[n]);
+			}
+			h.value = t;
+		}
+		return y(() => {
+			T();
+		}, { flush: "post" }), (t, o) => (l(), r("div", X, [a.loading ? (l(), r(e, { key: 0 }, [i("div", Z, [p(t.$slots, "loading")]), o[1] ||= i("div", { class: "chook-picker-columns" }, null, -1)], 64)) : a.columns.length ? (l(), r("div", {
+			key: 2,
+			class: "chook-picker-columns chook-picker-columns-backdrop",
+			onTouchmove: o[0] ||= b(() => {}, ["stop"])
+		}, [(l(!0), r(e, null, f(C.value, (e, t) => (l(), n(Y, {
+			key: t,
+			ref_for: !0,
+			ref_key: "columnsRef",
+			ref: g,
+			column: e,
+			fields: x.value,
+			"selected-index": h.value[t],
+			onChange: (e) => w(t, e)
+		}, null, 8, [
+			"column",
+			"fields",
+			"selected-index",
+			"onChange"
+		]))), 128)), o[2] ||= i("div", { class: "chook-picker-mask-backdrop" }, null, -1)], 32)) : (l(), r("div", Q, [p(t.$slots, "empty")]))]));
+	}
+}), ee = /* @__PURE__ */ a({
+	__name: "DatePicker",
+	props: /*@__PURE__*/ o({
+		columnsType: { default: () => C },
+		minDate: { default: () => new Date((/* @__PURE__ */ new Date()).getFullYear() - 10, 0, 1) },
+		maxDate: { default: () => new Date((/* @__PURE__ */ new Date()).getFullYear() + 10, 11, 31) },
+		formatYearLabel: {
+			type: Function,
+			default: V
+		},
+		formatMonthLabel: {
+			type: Function,
+			default: V
+		},
+		formatDayLabel: {
+			type: Function,
+			default: V
+		}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["change"], ["update:modelValue"]),
+	setup(e, { expose: r, emit: i }) {
+		let a = e, o = i, s = _(e, "modelValue"), c = t(() => {
+			let { columnsType: e, minDate: t, maxDate: n } = a, r = {
+				year: u,
+				month: d,
+				day: f
+			};
+			return e.map((e) => r[e](t, n));
+		});
+		s.value.length || m();
+		function u(e, t) {
+			return P(e.getFullYear(), t.getFullYear(), a.formatYearLabel);
+		}
+		function d(e, t) {
+			let n = p("year");
+			return P(F(n, e) ? e.getMonth() + 1 : 1, I(n, t) ? t.getMonth() + 1 : 12, a.formatMonthLabel);
+		}
+		function f(e, t) {
+			let n = p("year"), r = p("month"), i = F(n, e) && L(r, e), o = I(n, t) && R(r, t);
+			return P(i ? e.getDate() : 1, o ? t.getDate() : z(n, r), a.formatDayLabel);
+		}
+		function p(e) {
+			let { columnsType: t } = a, n = t.indexOf(e), r = s.value[n];
+			return r ? Number(r) : B(a.minDate, a.maxDate, e);
+		}
+		function m() {
+			let { columnsType: e } = a;
+			s.value = e.map((e) => B(a.minDate, a.maxDate, e));
+		}
+		return r({ setCurrentDate: m }), (e, t) => (l(), n($, {
+			modelValue: s.value,
+			"onUpdate:modelValue": t[0] ||= (e) => s.value = e,
+			columns: c.value,
+			onChange: t[1] ||= (e) => o("change", e)
+		}, null, 8, ["modelValue", "columns"]));
+	}
+}), te = /* @__PURE__ */ a({
+	__name: "TimePicker",
+	props: /*@__PURE__*/ o({
+		columnsType: { default: () => w },
+		minTime: {},
+		maxTime: {},
+		formatHourLabel: {
+			type: Function,
+			default: W
+		},
+		formatMinuteLabel: {
+			type: Function,
+			default: W
+		},
+		formatSecondLabel: {
+			type: Function,
+			default: W
+		}
+	}, {
+		modelValue: { default: () => [] },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["change"], ["update:modelValue"]),
+	setup(e, { expose: r, emit: i }) {
+		let a = e, o = i, s = _(e, "modelValue"), c = t(() => {
+			let { columnsType: e } = a, t = {
+				hour: f,
+				minute: p,
+				second: m
+			};
+			return e.map((e) => t[e]());
+		}), u = t(() => U(a.minTime ?? "") ?? {
+			hour: 0,
+			minute: 0,
+			second: 0
+		}), d = t(() => U(a.maxTime ?? "") ?? {
+			hour: 23,
+			minute: 59,
+			second: 59
+		});
+		s.value.length || g();
+		function f() {
+			let e = u.value.hour, t = d.value.hour;
+			return P(e, t, a.formatHourLabel);
+		}
+		function p() {
+			let e = h("hour"), { hour: t, minute: n } = u.value, { hour: r, minute: i } = d.value;
+			return P(e === t ? n : 0, e === r ? i : 59, a.formatMinuteLabel);
+		}
+		function m() {
+			let e = h("hour"), t = h("minute"), { hour: n, minute: r, second: i } = u.value, { hour: o, minute: s, second: c } = d.value;
+			return P(e === n && t === r ? i : 0, e === o && t === s ? c : 59, a.formatSecondLabel);
+		}
+		function h(e) {
+			let { columnsType: t } = a, n = t.indexOf(e), r = s.value[n];
+			return r === void 0 ? G(u.value, d.value, e) : Number(r);
+		}
+		function g() {
+			let { columnsType: e } = a;
+			s.value = e.map((e) => G(u.value, d.value, e));
+		}
+		return r({ setCurrentTime: g }), (e, t) => (l(), n($, {
+			modelValue: s.value,
+			"onUpdate:modelValue": t[0] ||= (e) => s.value = e,
+			columns: c.value,
+			onChange: t[1] ||= (e) => o("change", e)
+		}, null, 8, ["modelValue", "columns"]));
+	}
 });
-export {
-  Ne as DatePicker,
-  ae as Picker,
-  He as TimePicker
-};
+//#endregion
+export { ee as DatePicker, $ as Picker, te as TimePicker };