@component-hook/picker 1.1.5-alpha.0 → 1.2.0

package/dist/vue/picker.es.js

@@ -1,94 +1,95 @@
-import { ref as Y, readonly as Z, isRef as j, defineComponent as E, toRef as re, createElementBlock as P, openBlock as C, unref as T, createElementVNode as I, normalizeStyle as q, Fragment as R, renderList as ue, toDisplayString as A, watch as ce, createBlock as L, Teleport as me, createVNode as J, Transition as Q, withCtx as z, withDirectives as W, vShow as ee, renderSlot as _, computed as O, watchEffect as de, withModifiers as fe, nextTick as pe } from "vue";
-const ve = Array.isArray;
-function he(e, a) {
-  if (ae(e)) return "multiple";
-  const [n] = e;
-  return n?.[a.children] ? "cascade" : "single";
+import "./index.css";
+import { ref as R, readonly as Z, isRef as j, defineComponent as L, toRef as re, createElementBlock as Y, openBlock as k, unref as v, withModifiers as oe, createElementVNode as C, normalizeStyle as q, Fragment as U, renderList as le, toDisplayString as ie, mergeModels as V, useModel as $, useTemplateRef as ce, computed as I, watchEffect as me, renderSlot as J, createBlock as B, nextTick as fe } from "vue";
+const de = Array.isArray;
+function pe(e, s) {
+  if (ue(e)) return "multiple";
+  const [f] = e;
+  return f?.[s.children] ? "cascade" : "single";
 }
-function Te(e) {
+function ve(e) {
   return {
     children: e?.children || "children",
     label: e?.label || "label",
     value: e?.value || "value"
   };
 }
-function ge(e, a, n) {
-  if (ae(e)) return [];
-  const u = [];
-  let o = e, i = 0;
-  for (; o; ) {
-    const d = a[i];
-    let f = se(o, d, n);
-    f === -1 && (f = 0), u.push(o), i += 1, o = o[f]?.[n.children];
+function he(e, s, f) {
+  if (ue(e)) return [];
+  const o = [];
+  let u = e, i = 0;
+  for (; u; ) {
+    const h = s[i];
+    let m = se(u, h, f);
+    m === -1 && (m = 0), o.push(u), i += 1, u = u[m]?.[f.children];
   }
-  return u;
+  return o;
 }
-function ke(e, a, n, u) {
-  const o = [...n];
-  let i = e, d = a + 1;
-  for (; i?.[u.children]; ) {
-    const f = i[u.children][0];
-    o[d] = f.value, i = f, d += 1;
+function ge(e, s, f, o) {
+  const u = [...f];
+  let i = e, h = s + 1;
+  for (; i?.[o.children]; ) {
+    const m = i[o.children][0];
+    u[h] = m.value, i = m, h += 1;
   }
-  return o;
+  return u;
 }
-function se(e, a, n) {
-  return e.findIndex((u) => u?.[n.value] === a);
+function se(e, s, f) {
+  return e.findIndex((o) => o?.[f.value] === s);
 }
-function ae(e) {
-  const [a] = e;
-  return ve(a);
+function ue(e) {
+  const [s] = e;
+  return de(s);
 }
-function Me(e, a) {
-  return e > a ? "horizontal" : a > e ? "vertical" : "";
+function Te(e, s) {
+  return e > s ? "horizontal" : s > e ? "vertical" : "";
 }
-function F(e, a, n) {
-  const u = [];
-  for (let o = e; o <= a; o++) {
-    const i = n(`${o}`);
-    u.push({ label: i, value: o });
+function b(e, s, f) {
+  const o = [];
+  for (let u = e; u <= s; u++) {
+    const i = f(`${u}`);
+    o.push({ label: i, value: u });
   }
-  return u;
+  return o;
 }
-function te(e, a) {
-  return e === a.getFullYear();
+function Q(e, s) {
+  return e === s.getFullYear();
 }
-function ne(e, a) {
-  return e === a.getFullYear();
+function W(e, s) {
+  return e === s.getFullYear();
 }
-function Ve(e, a) {
-  return e === a.getMonth() + 1;
+function Me(e, s) {
+  return e === s.getMonth() + 1;
 }
-function ye(e, a) {
-  return e === a.getMonth() + 1;
+function xe(e, s) {
+  return e === s.getMonth() + 1;
 }
-function we(e, a) {
-  return new Date(e, a, 0).getDate();
+function De(e, s) {
+  return new Date(e, s, 0).getDate();
 }
-function xe(e, a, n) {
-  const u = /* @__PURE__ */ new Date(), o = Date.now(), i = e.getTime(), d = a.getTime(), f = o >= i && o <= d;
-  return n === "year" ? f ? u.getFullYear() : e.getFullYear() : n === "month" ? f ? u.getMonth() + 1 : e.getMonth() + 1 : f ? u.getDate() : e.getDate();
+function _(e, s, f) {
+  const o = /* @__PURE__ */ new Date(), u = Date.now(), i = e.getTime(), h = s.getTime(), m = u >= i && u <= h;
+  return f === "year" ? m ? o.getFullYear() : e.getFullYear() : f === "month" ? m ? o.getMonth() + 1 : e.getMonth() + 1 : m ? o.getDate() : e.getDate();
 }
-function H(e) {
+function N(e) {
   return e;
 }
-function De(e) {
+function ye(e) {
   return /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e);
 }
-function oe(e) {
-  if (!De(e)) return null;
-  const [a, n, u] = e.split(":");
-  return { hour: Number(a), minute: Number(n), second: Number(u) };
+function ee(e) {
+  if (!ye(e)) return null;
+  const [s, f, o] = e.split(":");
+  return { hour: Number(s), minute: Number(f), second: Number(o) };
 }
-function U(e) {
+function H(e) {
   return e.padStart(2, "0");
 }
-function Se(e, a, n) {
-  const u = Date.now(), { hour: o, minute: i, second: d } = e, { hour: f, minute: p, second: m } = a, M = (/* @__PURE__ */ new Date()).setHours(o, i, d), g = (/* @__PURE__ */ new Date()).setHours(f, p, m), w = u >= M && u <= g;
-  return n === "hour" ? w ? (/* @__PURE__ */ new Date()).getHours() : o : n === "minute" ? w ? (/* @__PURE__ */ new Date()).getMinutes() : i : w ? (/* @__PURE__ */ new Date()).getSeconds() : d;
+function te(e, s, f) {
+  const o = Date.now(), { hour: u, minute: i, second: h } = e, { hour: m, minute: d, second: p } = s, g = (/* @__PURE__ */ new Date()).setHours(u, i, h), 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() : h;
 }
-const be = 16, N = 48, Ce = 0.52, le = 150, X = 300, Ie = 15, Ye = 8e-3, Oe = "Select Date", Pe = ["year", "month", "day"], Fe = "Select Time", Le = ["hour", "minute", "second"];
-function Ee() {
+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,
@@ -97,88 +98,88 @@ function Ee() {
     offsetX: 0,
     offsetY: 0
   };
-  let a = "";
-  const n = () => a === "vertical", u = () => a === "horizontal";
-  function o() {
-    e.deltaX = 0, e.deltaY = 0, e.offsetX = 0, e.offsetY = 0, a = "";
+  let s = "";
+  const f = () => s === "vertical", o = () => s === "horizontal";
+  function u() {
+    e.deltaX = 0, e.deltaY = 0, e.offsetX = 0, e.offsetY = 0, s = "";
   }
-  function i(p) {
-    const m = "touches" in p ? p.touches[0] : p;
-    o(), e.startX = m.clientX, e.startY = m.clientY;
+  function i(d) {
+    const p = "touches" in d ? d.touches[0] : d;
+    u(), e.startX = p.clientX, e.startY = p.clientY;
   }
-  function d(p) {
+  function h(d) {
     if (!e.startX || !e.startY) return !0;
-    const m = "touches" in p ? p.touches[0] : p;
-    e.deltaX = Math.max(m.clientX, 0) - e.startX, e.deltaY = m.clientY - e.startY, e.offsetX = Math.abs(e.deltaX), e.offsetY = Math.abs(e.deltaY);
-    const M = 10;
-    (!a || e.offsetX < M && e.offsetY < M) && (a = Me(e.offsetX, e.offsetY));
+    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;
+    (!s || e.offsetX < g && e.offsetY < g) && (s = Te(e.offsetX, e.offsetY));
   }
-  function f() {
+  function m() {
     e.startX = 0, e.startY = 0;
   }
   return {
     pointer: e,
-    move: d,
+    move: h,
     start: i,
-    stop: f,
-    reset: o,
-    isVertical: n,
-    isHorizontal: u
+    stop: m,
+    reset: u,
+    isVertical: f,
+    isHorizontal: o
   };
 }
-function Be({ column: e, onChange: a }) {
-  const u = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) / be, o = Y(0), i = Y(0), { pointer: d, start: f, move: p, stop: m } = Ee();
-  let M = 0, g = 0, w = 0, V = !1, x = null;
-  function y(v) {
-    f(v), V = !0, i.value = 0, g = Date.now(), M = o.value, w = M, x = null;
+function Ce({ column: e, onChange: s }) {
+  const o = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) / ke, u = R(0), i = R(0), { pointer: h, start: m, move: d, stop: p } = Ve();
+  let g = 0, M = 0, r = 0, l = !1, t = null;
+  function n(T) {
+    m(T), l = !0, i.value = 0, M = Date.now(), g = u.value, r = g, t = null;
   }
-  function s(v) {
-    if (p(v)) return;
-    const b = j(e) ? e.value.length : e.length, B = M + d.deltaY, $ = D((b - 1) * -N), G = Math.min(Math.max(B, $), 0), K = Date.now();
-    o.value = G, !(K - g <= X) && (g = K, w = G);
+  function a(T) {
+    if (d(T)) return;
+    const y = j(e) ? e.value.length : e.length, E = g + h.deltaY, A = P((y - 1) * -F), G = Math.min(Math.max(E, A), 0), K = Date.now();
+    u.value = G, !(K - M <= X) && (M = K, r = G);
   }
-  function r() {
-    m();
-    const v = o.value - w, k = Date.now() - g;
-    if (k < X && Math.abs(v) > Ie) {
-      t(v, k);
+  function c() {
+    p();
+    const T = u.value - r, x = Date.now() - M;
+    if (x < X && Math.abs(T) > Ye) {
+      D(T, x);
       return;
     }
-    const b = h(o.value);
-    i.value = le, c(b), V = !1;
+    const y = w(u.value);
+    i.value = ne, O(y), l = !1;
   }
-  function t(v, k) {
-    const b = Math.abs(v / k), B = o.value + b / Ye * (v < 0 ? -1 : 1), $ = h(B);
-    i.value = X, c($);
+  function D(T, x) {
+    const y = Math.abs(T / x), E = u.value + y / Ie * (T < 0 ? -1 : 1), A = w(E);
+    i.value = X, O(A);
   }
-  function l() {
-    i.value = 0, V = !1, x && (x(), x = null);
+  function S() {
+    i.value = 0, l = !1, t && (t(), t = null);
   }
-  function c(v) {
-    const k = -v * D(N), b = () => a?.(v);
-    V && k !== o.value ? x = b : b(), o.value = k;
+  function O(T) {
+    const x = -T * P(F), y = () => s?.(T);
+    l && x !== u.value ? t = y : y(), u.value = x;
   }
-  function h(v) {
-    const k = j(e) ? e.value.length : e.length, b = Math.round(-v / D(N));
-    return b < 0 ? 0 : b >= k ? k - 1 : b;
+  function w(T) {
+    const x = j(e) ? e.value.length : e.length, y = Math.round(-T / P(F));
+    return y < 0 ? 0 : y >= x ? x - 1 : y;
   }
-  function D(v) {
-    return v * u;
+  function P(T) {
+    return T * o;
   }
-  function S(v, k = "auto") {
-    V && k === "smooth" || (x = null, V = k === "smooth", i.value = k === "smooth" ? le : 0, c(v));
+  function z(T, x = "auto") {
+    l && x === "smooth" || (t = null, l = x === "smooth", i.value = x === "smooth" ? ne : 0, O(T));
   }
   return {
-    offsetY: Z(o),
+    offsetY: Z(u),
     transitionDuration: Z(i),
-    onPointerDown: y,
-    onPointerMove: s,
-    onPointerUp: r,
-    stopInertialSliding: l,
-    scrollToIndex: S
+    onPointerDown: n,
+    onPointerMove: a,
+    onPointerUp: c,
+    stopInertialSliding: S,
+    scrollToIndex: z
   };
 }
-const Ae = ["onClick"], Ne = /* @__PURE__ */ E({
+const we = ["onClick"], Pe = /* @__PURE__ */ L({
   __name: "PickerColumn",
   props: {
     column: {},
@@ -186,379 +187,260 @@ const Ae = ["onClick"], Ne = /* @__PURE__ */ E({
     selectedIndex: { default: 0 }
   },
   emits: ["change"],
-  setup(e, { expose: a, emit: n }) {
-    const u = e, o = n, { offsetY: i, transitionDuration: d, onPointerDown: f, onPointerMove: p, onPointerUp: m, stopInertialSliding: M, scrollToIndex: g } = Be({
-      column: re(u, "column"),
-      onChange: w
+  setup(e, { expose: s, emit: f }) {
+    const o = e, u = f, { offsetY: i, transitionDuration: h, onPointerDown: m, onPointerMove: d, onPointerUp: p, stopInertialSliding: g, scrollToIndex: M } = Ce({
+      column: re(o, "column"),
+      onChange: r
     });
-    function w(y) {
-      y !== u.selectedIndex && o("change", y);
+    function r(n) {
+      n !== o.selectedIndex && u("change", n);
     }
-    function V(y = u.selectedIndex, s) {
-      g(y, s);
+    function l(n = o.selectedIndex, a) {
+      M(n, a);
     }
-    function x(y) {
-      y !== u.selectedIndex && V(y, "smooth");
+    function t(n) {
+      n !== o.selectedIndex && l(n, "smooth");
     }
-    return a({ scrollToSelected: V }), (y, s) => (C(), P("div", {
+    return s({ scrollToSelected: l }), (n, a) => (k(), Y("div", {
       class: "chook-picker-column",
-      onTouchstartPassive: s[1] || (s[1] = //@ts-ignore
-      (...r) => T(f) && T(f)(...r)),
-      onTouchmovePassive: s[2] || (s[2] = //@ts-ignore
-      (...r) => T(p) && T(p)(...r)),
-      onTouchendPassive: s[3] || (s[3] = //@ts-ignore
-      (...r) => T(m) && T(m)(...r)),
-      onTouchcancel: s[4] || (s[4] = //@ts-ignore
-      (...r) => T(m) && T(m)(...r)),
-      onMousedownPassive: s[5] || (s[5] = //@ts-ignore
-      (...r) => T(f) && T(f)(...r)),
-      onMousemovePassive: s[6] || (s[6] = //@ts-ignore
-      (...r) => T(p) && T(p)(...r)),
-      onMouseupPassive: s[7] || (s[7] = //@ts-ignore
-      (...r) => T(m) && T(m)(...r))
+      "aria-label": "Picker column",
+      onTouchstartPassive: a[1] || (a[1] = //@ts-ignore
+      (...c) => v(m) && v(m)(...c)),
+      onTouchmove: a[2] || (a[2] = oe(
+        //@ts-ignore
+        (...c) => v(d) && v(d)(...c),
+        ["prevent"]
+      )),
+      onTouchendPassive: a[3] || (a[3] = //@ts-ignore
+      (...c) => v(p) && v(p)(...c)),
+      onTouchcancel: a[4] || (a[4] = //@ts-ignore
+      (...c) => v(p) && v(p)(...c)),
+      onMousedownPassive: a[5] || (a[5] = //@ts-ignore
+      (...c) => v(m) && v(m)(...c)),
+      onMousemovePassive: a[6] || (a[6] = //@ts-ignore
+      (...c) => v(d) && v(d)(...c)),
+      onMouseupPassive: a[7] || (a[7] = //@ts-ignore
+      (...c) => v(p) && v(p)(...c)),
+      onMouseleavePassive: a[8] || (a[8] = //@ts-ignore
+      (...c) => v(p) && v(p)(...c))
     }, [
-      I("ul", {
+      C("ul", {
         style: q({
           overflowY: "hidden",
-          transform: `translate3d(0, ${T(i)}px, 0)`,
-          transitionDuration: `${T(d)}ms`,
-          transitionProperty: T(d) ? "all" : "none"
+          transform: `translate3d(0, ${v(i)}px, 0)`,
+          transitionDuration: `${v(h)}ms`,
+          transitionProperty: v(h) ? "all" : "none"
         }),
-        onTransitionend: s[0] || (s[0] = //@ts-ignore
-        (...r) => T(M) && T(M)(...r))
+        onTransitionend: a[0] || (a[0] = //@ts-ignore
+        (...c) => v(g) && v(g)(...c))
       }, [
-        (C(!0), P(R, null, ue(y.column, (r, t) => (C(), P("li", {
-          key: r?.[y.fields.value],
+        (k(!0), Y(U, null, le(e.column, (c, D) => (k(), Y("li", {
+          key: c?.[e.fields.value],
           class: "chook-picker-column-item",
           role: "button",
           tabindex: "0",
-          onClick: (l) => x(t)
+          onClick: (S) => t(D)
         }, [
-          I("p", {
+          C("p", {
             class: "chook-picker-column-label",
             style: q({
-              transform: `rotate3d(1, 0, 0, ${(t * T(N) + T(i)) * T(Ce)}deg)`
+              transform: `rotate3d(1, 0, 0, ${(D * v(F) + v(i)) * v(Se)}deg)`
             })
-          }, A(r?.[y.fields.label]), 5)
-        ], 8, Ae))), 128))
+          }, ie(c?.[e.fields.label]), 5)
+        ], 8, we))), 128))
       ], 36)
     ], 32));
   }
-}), $e = { class: "chook-picker-container" }, He = /* @__PURE__ */ E({
-  __name: "Popup",
-  props: {
-    teleport: { default: "body" },
-    modelValue: { type: Boolean }
-  },
-  emits: ["update:modelValue", "open", "close", "closed"],
-  setup(e, { emit: a }) {
-    const n = e, u = a;
-    return ce(
-      () => n.modelValue,
-      (o) => {
-        o ? (document.body.style.overflow = "hidden", u("open")) : (document.body.style.overflow = "", u("close"));
-      },
-      { immediate: !0 }
-    ), (o, i) => (C(), L(me, { to: o.teleport }, [
-      J(Q, { name: "chook-picker-fade" }, {
-        default: z(() => [
-          W(I("div", {
-            class: "chook-picker-mask",
-            onClick: i[0] || (i[0] = (d) => o.$emit("update:modelValue", !1))
-          }, null, 512), [
-            [ee, o.modelValue]
-          ])
-        ]),
-        _: 1
-      }),
-      J(Q, {
-        name: "chook-picker-slide",
-        onAfterLeave: i[1] || (i[1] = (d) => o.$emit("closed"))
-      }, {
-        default: z(() => [
-          W(I("div", $e, [
-            _(o.$slots, "default")
-          ], 512), [
-            [ee, o.modelValue]
-          ])
-        ]),
-        _: 3
-      })
-    ], 8, ["to"]));
-  }
-}), Ue = { class: "chook-picker-header" }, Xe = { class: "chook-picker-title" }, Re = { class: "chook-picker-loading" }, ze = {
+}), Fe = {
+  class: "chook-picker-container",
+  "aria-label": "Picker"
+}, Le = { class: "chook-picker-loading" }, Ee = {
   key: 1,
   class: "chook-picker-columns"
-}, ie = /* @__PURE__ */ E({
+}, ae = /* @__PURE__ */ L({
   __name: "Picker",
-  props: {
-    show: { type: Boolean },
-    modelValue: {},
-    title: {},
+  props: /* @__PURE__ */ V({
     columns: {},
-    linkage: { type: Boolean },
     loading: { type: Boolean },
-    teleport: {},
-    confirmButtonText: { default: "Confirm" },
-    cancelButtonText: { default: "Cancel" },
     columnsFieldNames: {}
-  },
-  emits: ["update:show", "update:modelValue", "confirm", "cancel", "open", "closed"],
-  setup(e, { emit: a }) {
-    const n = e, u = a, o = Y([]), i = Y([]), d = Y([]), f = Y(null), p = O({
-      get: () => n.show,
-      set: (t) => u("update:show", t)
-    }), m = O(() => Te(n.columnsFieldNames)), M = O(() => he(n.columns, m.value)), g = O(() => {
-      const { columns: t } = n;
-      return M.value === "single" ? [t] : M.value === "multiple" ? t : ge(t, i.value, m.value);
+  }, {
+    modelValue: { default: [] },
+    modelModifiers: {}
+  }),
+  emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
+  setup(e, { emit: s }) {
+    const f = e, o = s, u = $(e, "modelValue"), i = R([]), h = 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 w(t, l) {
-      const c = g.value[t], h = c[l]?.[m.value.value], D = i.value[t];
-      if (h === D) return;
-      const S = [...i.value];
-      if (S[t] = h, M.value === "cascade") {
-        const v = c[l];
-        i.value = ke(v, t, S, m.value);
+    function g(r, l) {
+      const t = p.value[r], n = t[l]?.[m.value.value], a = u.value[r];
+      if (n === a) return;
+      const c = [...u.value];
+      if (c[r] = n, d.value === "cascade") {
+        const D = t[l];
+        u.value = ge(D, r, c, m.value);
       } else
-        i.value = S;
-      n.linkage && V();
-    }
-    function V() {
-      u("update:modelValue", i.value), o.value = i.value;
-    }
-    function x() {
-      u("update:show", !1);
-    }
-    async function y() {
-      u("open"), await pe(), i.value = n.modelValue ? [...n.modelValue] : [...o.value];
-    }
-    function s() {
-      n.linkage || V(), x(), u("confirm", i.value);
-    }
-    function r() {
-      x(), u("cancel");
+        u.value = c;
+      fe(() => {
+        o("change", u.value);
+      });
     }
-    return de(() => {
-      const t = g.value.length, l = [];
-      for (let c = 0; c < t; c++) {
-        const h = g.value[c], D = i.value[c], S = se(h, D, m.value);
-        if (S === -1) {
-          const k = (d.value[c] ?? 0) >= h.length ? Math.max(h.length - 1, 0) : 0;
-          i.value[c] = h[k]?.[m.value.value], l[c] = k;
+    function M() {
+      const r = p.value.length, l = [];
+      for (let t = 0; t < r; t++) {
+        const n = p.value[t], a = u.value[t], c = se(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], l[t] = S;
         } else
-          l[c] = S;
-        l[c] !== d.value[c] && f.value?.[c].scrollToSelected(l[c]);
+          l[t] = c;
+        l[t] !== i.value[t] && h.value?.[t]?.scrollToSelected(l[t]);
       }
-      d.value = l;
-    }), (t, l) => (C(), L(He, {
-      modelValue: p.value,
-      "onUpdate:modelValue": l[1] || (l[1] = (c) => p.value = c),
-      teleport: t.teleport,
-      onOpen: y,
-      onClosed: l[2] || (l[2] = (c) => t.$emit("closed"))
-    }, {
-      default: z(() => [
-        I("div", Ue, [
-          I("button", {
-            class: "chook-picker-cancel",
-            onClick: r
-          }, A(t.cancelButtonText), 1),
-          I("p", Xe, A(t.title), 1),
-          I("button", {
-            class: "chook-picker-confirm",
-            onClick: s
-          }, A(t.confirmButtonText), 1)
+      i.value = l;
+    }
+    return me(
+      () => {
+        M();
+      },
+      { flush: "post" }
+    ), (r, l) => (k(), Y("div", Fe, [
+      e.loading ? (k(), Y(U, { key: 0 }, [
+        C("div", Le, [
+          J(r.$slots, "loading")
         ]),
-        t.loading ? (C(), P(R, { key: 0 }, [
-          I("div", Re, [
-            _(t.$slots, "loading")
-          ]),
-          l[3] || (l[3] = I("div", { class: "chook-picker-columns" }, null, -1))
-        ], 64)) : t.columns.length ? (C(), P("div", {
-          key: 2,
-          class: "chook-picker-columns chook-picker-columns-backdrop",
-          onTouchmove: l[0] || (l[0] = fe(() => {
-          }, ["stop"]))
-        }, [
-          (C(!0), P(R, null, ue(g.value, (c, h) => (C(), L(Ne, {
-            key: h,
-            ref_for: !0,
-            ref_key: "columnsRef",
-            ref: f,
-            column: c,
-            fields: m.value,
-            "selected-index": d.value[h],
-            onChange: (D) => w(h, D)
-          }, null, 8, ["column", "fields", "selected-index", "onChange"]))), 128)),
-          l[4] || (l[4] = I("div", { class: "chook-picker-mask-backdrop" }, null, -1))
-        ], 32)) : (C(), P("div", ze, [
-          _(t.$slots, "empty")
-        ]))
-      ]),
-      _: 3
-    }, 8, ["modelValue", "teleport"]));
+        l[1] || (l[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: l[0] || (l[0] = oe(() => {
+        }, ["stop"]))
+      }, [
+        (k(!0), Y(U, null, le(p.value, (t, n) => (k(), B(Pe, {
+          key: n,
+          ref_for: !0,
+          ref_key: "columnsRef",
+          ref: h,
+          column: t,
+          fields: m.value,
+          "selected-index": i.value[n],
+          onChange: (a) => g(n, a)
+        }, null, 8, ["column", "fields", "selected-index", "onChange"]))), 128)),
+        l[2] || (l[2] = C("div", { class: "chook-picker-mask-backdrop" }, null, -1))
+      ], 32)) : (k(), Y("div", Ee, [
+        J(r.$slots, "empty")
+      ]))
+    ]));
   }
-}), Ge = /* @__PURE__ */ E({
+}), Ne = /* @__PURE__ */ L({
   __name: "DatePicker",
-  props: {
-    show: { type: Boolean },
-    modelValue: {},
-    title: { default: Oe },
-    columnsType: { default: () => Pe },
+  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) },
-    teleport: {},
-    confirmButtonText: {},
-    cancelButtonText: {},
-    formatYearLabel: { type: Function, default: H },
-    formatMonthLabel: { type: Function, default: H },
-    formatDayLabel: { type: Function, default: H }
-  },
-  emits: ["update:show", "update:modelValue", "confirm", "cancel", "open", "closed"],
-  setup(e, { emit: a }) {
-    const n = e, u = a, o = Y([]), i = Y([]), d = O({
-      get: () => n.show,
-      set: (s) => u("update:show", s)
-    }), f = O(() => {
-      const { columnsType: s, minDate: r, maxDate: t } = n, l = {
-        year: p,
-        month: m,
-        day: M
+    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: s, emit: f }) {
+    const o = e, u = f, i = $(e, "modelValue"), h = I(() => {
+      const { columnsType: r, minDate: l, maxDate: t } = o, n = {
+        year: m,
+        month: d,
+        day: p
       };
-      return s.map((c) => l[c](r, t));
+      return r.map((a) => n[a](l, t));
     });
-    function p(s, r) {
-      const t = s.getFullYear(), l = r.getFullYear();
-      return F(t, l, n.formatYearLabel);
-    }
-    function m(s, r) {
-      const t = g("year"), l = te(t, s) ? s.getMonth() + 1 : 1, c = ne(t, r) ? r.getMonth() + 1 : 12;
-      return F(l, c, n.formatMonthLabel);
-    }
-    function M(s, r) {
-      const t = g("year"), l = g("month"), c = te(t, s) && Ve(l, s), h = ne(t, r) && ye(l, r), D = c ? s.getDate() : 1, S = h ? r.getDate() : we(t, l);
-      return F(D, S, n.formatDayLabel);
-    }
-    function g(s) {
-      const { columnsType: r } = n, t = r.indexOf(s), l = o.value[t];
-      return l ? Number(l) : xe(n.minDate, n.maxDate, s);
+    i.value.length || M();
+    function m(r, l) {
+      const t = r.getFullYear(), n = l.getFullYear();
+      return b(t, n, o.formatYearLabel);
     }
-    function w(s) {
-      u("update:modelValue", s), i.value = s, u("confirm", s);
+    function d(r, l) {
+      const t = g("year"), n = Q(t, r) ? r.getMonth() + 1 : 1, a = W(t, l) ? l.getMonth() + 1 : 12;
+      return b(n, a, o.formatMonthLabel);
     }
-    function V() {
-      u("cancel");
+    function p(r, l) {
+      const t = g("year"), n = g("month"), a = Q(t, r) && Me(n, r), c = W(t, l) && xe(n, l), D = a ? r.getDate() : 1, S = c ? l.getDate() : De(t, n);
+      return b(D, S, o.formatDayLabel);
     }
-    function x() {
-      if (u("open"), n.modelValue && n.modelValue.length) {
-        o.value = [...n.modelValue];
-        return;
-      }
-      const { columnsType: s } = n;
-      o.value = s.map((r) => g(r));
+    function g(r) {
+      const { columnsType: l } = o, t = l.indexOf(r), n = i.value[t];
+      return n ? Number(n) : _(o.minDate, o.maxDate, r);
     }
-    function y() {
-      o.value = n.modelValue ? [...n.modelValue] : [...i.value], u("closed");
+    function M() {
+      const { columnsType: r } = o;
+      i.value = r.map((l) => _(o.minDate, o.maxDate, l));
     }
-    return (s, r) => (C(), L(ie, {
-      modelValue: o.value,
-      "onUpdate:modelValue": r[0] || (r[0] = (t) => o.value = t),
-      show: d.value,
-      "onUpdate:show": r[1] || (r[1] = (t) => d.value = t),
-      title: s.title,
-      columns: f.value,
-      teleport: s.teleport,
-      "confirm-button-text": s.confirmButtonText,
-      "cancel-button-text": s.cancelButtonText,
-      linkage: "",
-      onConfirm: w,
-      onCancel: V,
-      onOpen: x,
-      onClosed: y
-    }, null, 8, ["modelValue", "show", "title", "columns", "teleport", "confirm-button-text", "cancel-button-text"]));
+    return s({
+      setCurrentDate: M
+    }), (r, l) => (k(), B(ae, {
+      modelValue: i.value,
+      "onUpdate:modelValue": l[0] || (l[0] = (t) => i.value = t),
+      columns: h.value,
+      onChange: l[1] || (l[1] = (t) => u("change", t))
+    }, null, 8, ["modelValue", "columns"]));
   }
-}), Ke = /* @__PURE__ */ E({
+}), He = /* @__PURE__ */ L({
   __name: "TimePicker",
-  props: {
-    show: { type: Boolean },
-    modelValue: {},
-    title: { default: Fe },
-    columnsType: { default: () => Le },
+  props: /* @__PURE__ */ V({
+    columnsType: { default: () => be },
     minTime: {},
     maxTime: {},
-    teleport: {},
-    confirmButtonText: {},
-    cancelButtonText: {},
-    formatHourLabel: { type: Function, default: U },
-    formatMinuteLabel: { type: Function, default: U },
-    formatSecondLabel: { type: Function, default: U }
-  },
-  emits: ["update:show", "update:modelValue", "confirm", "cancel", "open", "closed"],
-  setup(e, { emit: a }) {
-    const n = e, u = a, o = Y([]), i = Y([]), d = O({
-      get: () => n.show,
-      set: (t) => u("update:show", t)
-    }), f = O(() => {
-      const { columnsType: t } = n, l = {
-        hour: M,
+    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: s, emit: f }) {
+    const o = e, u = f, i = $(e, "modelValue"), h = I(() => {
+      const { columnsType: t } = o, n = {
+        hour: p,
         minute: g,
-        second: w
+        second: M
       };
-      return t.map((c) => l[c]());
-    }), p = O(() => oe(n.minTime ?? "") ?? { hour: 0, minute: 0, second: 0 }), m = O(() => oe(n.maxTime ?? "") ?? { hour: 23, minute: 59, second: 59 });
-    function M() {
-      const t = p.value.hour, l = m.value.hour;
-      return F(t, l, n.formatHourLabel);
+      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 || l();
+    function p() {
+      const t = m.value.hour, n = d.value.hour;
+      return b(t, n, o.formatHourLabel);
     }
     function g() {
-      const t = V("hour"), { hour: l, minute: c } = p.value, { hour: h, minute: D } = m.value;
-      return F(t === l ? c : 0, t === h ? D : 59, n.formatMinuteLabel);
+      const t = r("hour"), { hour: n, minute: a } = m.value, { hour: c, minute: D } = d.value;
+      return b(t === n ? a : 0, t === c ? D : 59, o.formatMinuteLabel);
     }
-    function w() {
-      const t = V("hour"), l = V("minute"), { hour: c, minute: h, second: D } = p.value, { hour: S, minute: v, second: k } = m.value;
-      return F(t === c && l === h ? D : 0, t === S && l === v ? k : 59, n.formatSecondLabel);
-    }
-    function V(t) {
-      const { columnsType: l } = n, c = l.indexOf(t), h = o.value[c];
-      return h !== void 0 ? Number(h) : Se(p.value, m.value, t);
-    }
-    function x(t) {
-      u("update:modelValue", t), i.value = t, u("confirm", t);
-    }
-    function y() {
-      u("cancel");
+    function M() {
+      const t = r("hour"), n = r("minute"), { hour: a, minute: c, second: D } = m.value, { hour: S, minute: O, second: w } = d.value;
+      return b(t === a && n === c ? D : 0, t === S && n === O ? w : 59, o.formatSecondLabel);
     }
-    function s() {
-      if (u("open"), n.modelValue && n.modelValue.length) {
-        o.value = [...n.modelValue];
-        return;
-      }
-      const { columnsType: t } = n;
-      o.value = t.map((l) => V(l));
+    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 r() {
-      o.value = n.modelValue ? [...n.modelValue] : [...i.value], u("closed");
+    function l() {
+      const { columnsType: t } = o;
+      i.value = t.map((n) => te(m.value, d.value, n));
     }
-    return (t, l) => (C(), L(ie, {
-      modelValue: o.value,
-      "onUpdate:modelValue": l[0] || (l[0] = (c) => o.value = c),
-      show: d.value,
-      "onUpdate:show": l[1] || (l[1] = (c) => d.value = c),
-      title: t.title,
-      columns: f.value,
-      teleport: t.teleport,
-      "confirm-button-text": t.confirmButtonText,
-      "cancel-button-text": t.cancelButtonText,
-      linkage: "",
-      onConfirm: x,
-      onCancel: y,
-      onOpen: s,
-      onClosed: r
-    }, null, 8, ["modelValue", "show", "title", "columns", "teleport", "confirm-button-text", "cancel-button-text"]));
+    return s({
+      setCurrentTime: l
+    }), (t, n) => (k(), B(ae, {
+      modelValue: i.value,
+      "onUpdate:modelValue": n[0] || (n[0] = (a) => i.value = a),
+      columns: h.value,
+      onChange: n[1] || (n[1] = (a) => u("change", a))
+    }, null, 8, ["modelValue", "columns"]));
   }
 });
 export {
-  Ge as DatePicker,
-  ie as Picker,
-  Ke as TimePicker
+  Ne as DatePicker,
+  ae as Picker,
+  He as TimePicker
 };