@v-miniapp/ui-react 1.0.59 → 1.0.71

package/dist/components/calendar/calendar.js

@@ -0,0 +1,16 @@
+import { jsx as r } from "react/jsx-runtime";
+import { SinglePicker as s } from "./single-picker.js";
+import { RangePicker as o } from "./range-picker.js";
+import { useIsUsingLocales as t, useLanguage as g } from "@v-miniapp/locale";
+const a = ({ type: n = "single", ...e }) => n === "single" ? /* @__PURE__ */ r(
+  s,
+  {
+    ...e
+  }
+) : /* @__PURE__ */ r(o, { ...e }), l = ({ lang: n, ...e }) => {
+  const { language: i } = g();
+  return /* @__PURE__ */ r(a, { lang: n || i, ...e });
+}, L = (n) => t() ? /* @__PURE__ */ r(a, { ...n }) : /* @__PURE__ */ r(l, { ...n });
+export {
+  L as Calendar
+};

package/dist/components/calendar/default-render.js

@@ -0,0 +1,16 @@
+import { translate as t } from "@v-miniapp/locale";
+const r = (a) => ({
+  date: (e) => e.getDate(),
+  headerLabel: (e, n) => t(
+    "calendar.headerLabel",
+    {
+      month: t(`calendar.monthLabel[${e}]`, void 0, a),
+      year: n
+    },
+    a
+  ),
+  weekday: (e) => t(`calendar.weekdayLabel[${e}]`, void 0, a)
+}), o = (a, e) => ({ ...e, ...r(a === "en" ? "en" : "vi") });
+export {
+  o as getRenderText
+};

package/dist/components/calendar/range-picker.js

@@ -0,0 +1,301 @@
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import { useControllableValue as _e } from "ahooks";
+import { useState as P, useMemo as q, useEffect as X } from "react";
+import { dateFns as h } from "./utils.js";
+import { getPrefixClassName as ge } from "../../utils/classname.js";
+import { getRenderText as be } from "./default-render.js";
+import { Button as F } from "../button/button.js";
+import { Icon as A } from "../icon/icon.js";
+import { Typography as y } from "../typography/typography.js";
+import i from "classnames";
+const ae = ge("calendar"), e = ae + "-range-picker", ve = new Date(1900, 0, 1), $e = new Date(2099, 11, 31), Ne = (t) => {
+  const o = {};
+  return (t.defaultValue !== void 0 || t.defaultValue === null) && (o.defaultValue = t.defaultValue), (t.value !== void 0 || t.value === null) && (o.value = t.value), t.onChange !== void 0 && (o.onChange = t.onChange), o;
+}, Z = (t) => {
+  const o = /* @__PURE__ */ new Date();
+  if (t) {
+    const [_, g] = t;
+    return _ ? _.getMonth() : g ? g.getMonth() : o.getMonth();
+  }
+  return o.getMonth();
+}, ee = (t) => {
+  const o = /* @__PURE__ */ new Date();
+  if (t) {
+    const [_, g] = t;
+    return _ ? _.getFullYear() : g ? g.getFullYear() : o.getFullYear();
+  }
+  return o.getFullYear();
+}, te = (t) => {
+  if (!t) return null;
+  const [o] = t;
+  return o;
+}, ne = (t) => {
+  if (!t) return null;
+  const [, o] = t;
+  return o;
+}, Fe = (t) => {
+  const {
+    className: o,
+    renderText: _,
+    lang: g,
+    navigationMode: p = "month-year",
+    defaultValue: Me,
+    onChange: De,
+    value: f,
+    minDate: V = ve,
+    maxDate: I = $e,
+    onPick: w,
+    ...re
+  } = t, [C, G] = _e(
+    Ne(t)
+  ), le = be(g, _), {
+    date: d,
+    dateSubText: u,
+    headerLabel: R,
+    weekday: T
+  } = le, [b, D] = P(
+    te(C)
+  ), [v, S] = P(ne(C)), oe = /* @__PURE__ */ new Date(), [c, O] = P(Z(C)), [a, x] = P(ee(C)), M = (new Date(a, c, 1).getDay() + 6) % 7, j = h.getNumDaysInMonth(c, a), ce = M + j, se = Math.ceil(ce / 7), H = I.getMonth(), Y = I.getFullYear(), J = V.getMonth(), z = V.getFullYear(), ie = a < Y || a === Y && c < H, de = a > z || a === z && c > J, ue = a < Y || a + 1 === Y && c <= H, me = a > z || a - 1 === z && c >= J, $ = q(() => {
+    let m = a, n = c - 1;
+    return n < 0 && (m--, n = 11), { month: n, year: m };
+  }, [c, a]), E = q(() => {
+    let m = a, n = c + 1;
+    return n > 11 && (m++, n = 0), { month: n, year: m };
+  }, [c, a]), he = q(() => h.getNumDaysInMonth($.month, $.year), [$]), fe = (m) => {
+    const n = new Date(a, c, m);
+    return h.isSameOrAfter(n, V) && h.isSameOrBefore(n, I);
+  };
+  return X(() => {
+    f != null && (O(Z(f)), x(ee(f)));
+  }, [f?.[0]?.getTime()]), X(() => {
+    f != null && (D(te(f)), S(ne(f)));
+  }, [f]), /* @__PURE__ */ N(
+    "div",
+    {
+      className: i(ae, e, o),
+      ...re,
+      children: [
+        /* @__PURE__ */ N("div", { className: `${e}__header`, children: [
+          p === "month-year" && /* @__PURE__ */ r(
+            F,
+            {
+              type: "ghost",
+              theme: "neutral",
+              disabled: !me,
+              onClick: () => {
+                x(a - 1);
+              },
+              children: /* @__PURE__ */ r(A, { size: 20, name: "double-chevron-left" })
+            }
+          ),
+          p !== "time-only" && /* @__PURE__ */ r(
+            F,
+            {
+              type: "ghost",
+              theme: "neutral",
+              disabled: !de,
+              onClick: () => {
+                O($.month), x($.year);
+              },
+              children: /* @__PURE__ */ r(A, { size: 20, name: "chevron-left" })
+            }
+          ),
+          /* @__PURE__ */ r(y, { className: `${e}__header-label`, children: typeof R == "function" ? R?.(c, a) : R }),
+          p !== "time-only" && /* @__PURE__ */ r(
+            F,
+            {
+              type: "ghost",
+              theme: "neutral",
+              disabled: !ie,
+              onClick: () => {
+                O(E.month), x(E.year);
+              },
+              children: /* @__PURE__ */ r(A, { size: 20, name: "chevron-right" })
+            }
+          ),
+          p === "month-year" && /* @__PURE__ */ r(
+            F,
+            {
+              type: "ghost",
+              theme: "neutral",
+              disabled: !ue,
+              onClick: () => {
+                x(a + 1);
+              },
+              children: /* @__PURE__ */ r(A, { size: 20, name: "double-chevron-right" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r("div", { children: /* @__PURE__ */ N("div", { className: `${e}__grid`, children: [
+          Array.from({ length: 7 }, (m, n) => {
+            const B = (n + 1) % 7;
+            return /* @__PURE__ */ r("div", { className: i(`${e}__cell-container`), children: /* @__PURE__ */ r(
+              "div",
+              {
+                className: i(
+                  `${e}__cell`,
+                  `${e}__cell-week`
+                ),
+                children: /* @__PURE__ */ r(y, { color: "alias-object-secondary", children: typeof T == "function" ? T(B) : T })
+              }
+            ) });
+          }),
+          Array.from({ length: se * 7 }, (m, n) => {
+            if (n < M) {
+              const s = he - M + n + 1, k = new Date(
+                $.year,
+                $.month,
+                s
+              );
+              return /* @__PURE__ */ r(
+                "div",
+                {
+                  className: i(`${e}__cell-container`),
+                  children: /* @__PURE__ */ N(
+                    y,
+                    {
+                      size: "base",
+                      role: "button",
+                      className: i(
+                        `${e}__cell`,
+                        `${e}__cell-day`,
+                        `${e}__cell-day-filler`
+                      ),
+                      children: [
+                        typeof d == "function" ? d(k) : d,
+                        /* @__PURE__ */ r(
+                          y,
+                          {
+                            size: "2x-small",
+                            className: `${e}__cell-day-sub-title`,
+                            children: typeof u == "function" ? u(k) : u
+                          }
+                        )
+                      ]
+                    }
+                  )
+                },
+                n
+              );
+            }
+            if (n >= M + j) {
+              const s = n - (M + j) + 1, k = new Date(
+                E.year,
+                E.month,
+                s
+              );
+              return /* @__PURE__ */ r(
+                "div",
+                {
+                  className: i(`${e}__cell-container`),
+                  children: /* @__PURE__ */ N(
+                    y,
+                    {
+                      size: "base",
+                      role: "button",
+                      className: i(
+                        `${e}__cell`,
+                        `${e}__cell-day`,
+                        `${e}__cell-day-filler`
+                      ),
+                      children: [
+                        typeof d == "function" ? d(k) : d,
+                        /* @__PURE__ */ r(
+                          y,
+                          {
+                            size: "2x-small",
+                            className: `${e}__cell-day-sub-title`,
+                            children: typeof u == "function" ? u(k) : u
+                          }
+                        )
+                      ]
+                    }
+                  )
+                },
+                n
+              );
+            }
+            const B = n % 7 === 6, ye = n % 7 === 0, K = n - M + 1, l = new Date(a, c, K), Q = !fe(K), L = b && h.isSame(l, b), W = v && h.isSame(l, v), U = (function() {
+              return b && v ? h.isSameOrAfter(l, b) && h.isSameOrBefore(l, v) : !1;
+            })();
+            return /* @__PURE__ */ N(
+              "div",
+              {
+                className: i(`${e}__cell-container`),
+                children: [
+                  U && /* @__PURE__ */ r(
+                    "div",
+                    {
+                      className: i(
+                        `${e}__cell-range-background`,
+                        {
+                          [`${e}__cell-range-background-start`]: L,
+                          [`${e}__cell-range-background-end`]: W,
+                          [`${e}__cell-range-background-start-end-row`]: L && B,
+                          [`${e}__cell-range-background-end-start-row`]: W && ye
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ N(
+                    y,
+                    {
+                      size: "base",
+                      role: "button",
+                      onClick: () => {
+                        if (Q)
+                          return;
+                        if (b && v) {
+                          D(l), S(null), w?.([l, null]);
+                          return;
+                        }
+                        if (!b && !v) {
+                          D(l), w?.([l, null]);
+                          return;
+                        }
+                        const s = b || v;
+                        if (l < s) {
+                          D(l), S(s), G?.([l, s]), w?.([l, s]);
+                          return;
+                        }
+                        D(s), S(l), G?.([s, l]), w?.([s, l]);
+                      },
+                      className: i(
+                        `${e}__cell`,
+                        `${e}__cell-day`,
+                        {
+                          [`${e}__cell-day--disabled`]: Q,
+                          [`${e}__cell-day--today`]: h.isSame(
+                            l,
+                            oe
+                          ),
+                          [`${e}__cell-day--in-range-picker`]: U,
+                          [`${e}__cell-day--selected`]: L || W
+                        }
+                      ),
+                      children: [
+                        typeof d == "function" ? d(l) : d,
+                        /* @__PURE__ */ r(
+                          y,
+                          {
+                            size: "2x-small",
+                            className: `${e}__cell-day-sub-title`,
+                            children: typeof u == "function" ? u(l) : u
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              },
+              n
+            );
+          })
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  Fe as RangePicker
+};

package/dist/components/calendar/single-picker.js

@@ -0,0 +1,186 @@
+import { jsxs as x, jsx as n } from "react/jsx-runtime";
+import { getPrefixClassName as ne } from "../../utils/classname.js";
+import { dateFns as u } from "./utils.js";
+import { useState as A, useMemo as I } from "react";
+import { useControllableValue as ae } from "ahooks";
+import { getRenderText as le } from "./default-render.js";
+import { Button as C } from "../button/button.js";
+import { Icon as p } from "../icon/icon.js";
+import { Typography as k } from "../typography/typography.js";
+import g from "classnames";
+const B = ne("calendar"), a = B + "-single-picker", re = new Date(1900, 0, 1), oe = new Date(2099, 11, 31), se = (o) => {
+  const c = {};
+  return o.defaultValue !== void 0 && (c.defaultValue = o.defaultValue), o.value !== void 0 && (c.value = o.value), o.onChange !== void 0 && (c.onChange = o.onChange), c;
+}, Me = (o) => {
+  const {
+    className: c,
+    renderText: R,
+    lang: O,
+    navigationMode: _ = "month-year",
+    defaultValue: ce,
+    onChange: ie,
+    value: de,
+    minDate: $ = re,
+    maxDate: w = oe,
+    ...L
+  } = o, [i, W] = ae(
+    se(o)
+  ), q = le(O, R), {
+    date: Y,
+    dateSubText: F,
+    headerLabel: P,
+    weekday: S
+  } = q, T = /* @__PURE__ */ new Date(), [l, E] = A(() => i ? i.getMonth() : T.getMonth()), [t, b] = A(() => i ? i.getFullYear() : T.getFullYear()), d = (new Date(t, l, 1).getDay() + 6) % 7, V = u.getNumDaysInMonth(l, t), G = d + V, H = Math.ceil(G / 7), K = w.getMonth(), v = w.getFullYear(), j = $.getMonth(), D = $.getFullYear(), J = t < v || t === v && l < K, Q = t > D || t === D && l > j, U = t < v || t + 1 === v && l <= K, X = t > D || t - 1 === D && l >= j, s = I(() => {
+    let r = t, e = l - 1;
+    return e < 0 && (r--, e = 11), { month: e, year: r };
+  }, [l, t]), M = I(() => {
+    let r = t, e = l + 1;
+    return e > 11 && (r++, e = 0), { month: e, year: r };
+  }, [l, t]), Z = I(() => u.getNumDaysInMonth(s.month, s.year), [s]), ee = (r) => {
+    const e = new Date(t, l, r);
+    return u.isSameOrAfter(e, $) && u.isSameOrBefore(e, w);
+  }, z = (r) => {
+    const { date: e, cellKey: m, isFiller: h, disabled: N, onClick: y } = r, f = u.isSame(e, T), te = !!(i && u.isSame(e, i));
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        className: g(`${a}__cell-container`),
+        children: /* @__PURE__ */ x(
+          k,
+          {
+            size: "base",
+            role: "button",
+            onClick: h ? void 0 : y,
+            className: g(
+              `${a}__cell`,
+              `${a}__cell-day`,
+              { [`${a}__cell-day-filler`]: h },
+              {
+                [`${a}__cell-day--disabled`]: N,
+                [`${a}__cell-day--today`]: f,
+                [`${a}__cell-day--selected`]: te
+              }
+            ),
+            children: [
+              typeof Y == "function" ? Y(e) : Y,
+              /* @__PURE__ */ n(
+                k,
+                {
+                  size: "2x-small",
+                  className: `${a}__cell-day-sub-title`,
+                  children: typeof F == "function" ? F(e) : F
+                }
+              )
+            ]
+          }
+        )
+      },
+      m
+    );
+  };
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: g(B, a, c),
+      ...L,
+      children: [
+        /* @__PURE__ */ x("div", { className: `${a}__header`, children: [
+          _ === "month-year" && /* @__PURE__ */ n(
+            C,
+            {
+              type: "ghost",
+              theme: "neutral",
+              disabled: !X,
+              onClick: () => {
+                b(t - 1);
+              },
+              children: /* @__PURE__ */ n(p, { size: 20, name: "double-chevron-left" })
+            }
+          ),
+          _ !== "time-only" && /* @__PURE__ */ n(
+            C,
+            {
+              type: "ghost",
+              theme: "neutral",
+              disabled: !Q,
+              onClick: () => {
+                E(s.month), b(s.year);
+              },
+              children: /* @__PURE__ */ n(p, { size: 20, name: "chevron-left" })
+            }
+          ),
+          /* @__PURE__ */ n(k, { className: `${a}__header-label`, children: typeof P == "function" ? P?.(l, t) : P }),
+          _ !== "time-only" && /* @__PURE__ */ n(
+            C,
+            {
+              type: "ghost",
+              theme: "neutral",
+              disabled: !J,
+              onClick: () => {
+                E(M.month), b(M.year);
+              },
+              children: /* @__PURE__ */ n(p, { size: 20, name: "chevron-right" })
+            }
+          ),
+          _ === "month-year" && /* @__PURE__ */ n(
+            C,
+            {
+              type: "ghost",
+              theme: "neutral",
+              disabled: !U,
+              onClick: () => {
+                b(t + 1);
+              },
+              children: /* @__PURE__ */ n(p, { size: 20, name: "double-chevron-right" })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ n("div", { children: /* @__PURE__ */ x("div", { className: `${a}__grid`, children: [
+          Array.from({ length: 7 }, (r, e) => {
+            const m = (e + 1) % 7;
+            return /* @__PURE__ */ n("div", { className: g(`${a}__cell-container`), children: /* @__PURE__ */ n(
+              "div",
+              {
+                className: g(
+                  `${a}__cell`,
+                  `${a}__cell-week`
+                ),
+                children: /* @__PURE__ */ n(k, { color: "alias-object-secondary", children: typeof S == "function" ? S(m) : S })
+              }
+            ) });
+          }),
+          Array.from({ length: H * 7 }, (r, e) => {
+            if (e < d) {
+              const y = Z - d + e + 1, f = new Date(
+                s.year,
+                s.month,
+                y
+              );
+              return z({ date: f, cellKey: e, isFiller: !0 });
+            }
+            if (e >= d + V) {
+              const y = e - (d + V) + 1, f = new Date(
+                M.year,
+                M.month,
+                y
+              );
+              return z({ date: f, cellKey: e, isFiller: !0 });
+            }
+            const m = e - d + 1, h = new Date(t, l, m), N = !ee(m);
+            return z({
+              date: h,
+              cellKey: e,
+              disabled: N,
+              onClick: () => {
+                !h || N || W(h);
+              }
+            });
+          })
+        ] }) })
+      ]
+    }
+  );
+};
+export {
+  Me as SinglePicker
+};

package/dist/components/calendar/utils.js

@@ -0,0 +1,25 @@
+import { dayjs as t } from "../../utils/date.js";
+class a {
+  getNumDaysInMonth(e, r) {
+    return new Date(r, e + 1, 0).getDate();
+  }
+  isSame(e, r) {
+    return t(e).isSame(t(r), "day");
+  }
+  isBefore(e, r) {
+    return t(e).isBefore(t(r), "day");
+  }
+  isAfter(e, r) {
+    return t(e).isAfter(t(r), "day");
+  }
+  isSameOrBefore(e, r) {
+    return t(e).isSameOrBefore(t(r), "day");
+  }
+  isSameOrAfter(e, r) {
+    return t(e).isSameOrAfter(t(r), "day");
+  }
+}
+const i = new a();
+export {
+  i as dateFns
+};

package/dist/components/carousel/carousel.js

@@ -0,0 +1,47 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { getPrefixClassName as l } from "../../utils/classname.js";
+import { forwardRef as d, useImperativeHandle as c } from "react";
+import { useCarousel as x } from "./use-carousel.js";
+import { Pagination as v } from "../pagination/pagination.js";
+import o from "classnames";
+const r = l("carousel"), h = d(
+  ({ className: s, carousel: e, options: a, pagination: i = !0, children: m }, p) => {
+    const n = x(a);
+    return e = e || n, c(p, () => e), /* @__PURE__ */ f(
+      "div",
+      {
+        className: o(r, s),
+        style: {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          "--carousel-gap": typeof e.options.gap == "number" ? e.options.gap + "px" : "8px"
+        },
+        children: [
+          /* @__PURE__ */ t("div", { className: `${r}__viewport`, ref: e.ref, children: /* @__PURE__ */ t("div", { className: `${r}__tracks`, children: m }) }),
+          !!i && /* @__PURE__ */ t(
+            v,
+            {
+              total: e.snaps.length,
+              activeIndex: e.activeIndex
+            }
+          )
+        ]
+      }
+    );
+  }
+), $ = ({
+  children: s,
+  className: e,
+  ...a
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: o(`${r}__item`, e),
+    ...a,
+    children: s
+  }
+);
+export {
+  h as Carousel,
+  $ as CarouselItem
+};

package/dist/components/carousel/use-carousel.js

@@ -0,0 +1,54 @@
+import H from "embla-carousel-react";
+import T from "embla-carousel-autoplay";
+import k from "embla-carousel-auto-height";
+import { useCallback as s, useState as n, useEffect as L } from "react";
+const B = (l = {}) => {
+  const {
+    align: i = "center",
+    initialIndex: u = 0,
+    autoplay: p = !1,
+    delay: m = 3e3,
+    duration: x = 25,
+    loop: f,
+    autoHeight: v = !0
+  } = l, [S, e] = H(
+    {
+      axis: "x",
+      align: i,
+      startIndex: u,
+      duration: x,
+      loop: f
+    },
+    [
+      T({ playOnInit: !0, delay: m, active: p }),
+      k({ active: v })
+    ]
+  ), r = e?.scrollNext, d = s(
+    (t) => r?.(t.jump),
+    [r]
+  ), c = e?.scrollPrev, I = s(
+    (t) => c?.(t.jump),
+    [c]
+  ), a = e?.scrollTo, C = s(
+    (t, E) => a?.(t, E.jump),
+    [a]
+  ), [N, P] = n(!1), [y, A] = n(!1), [b, g] = n(0), [j, h] = n([]), o = s(() => {
+    e && (A(!!e?.canScrollPrev()), P(!!e?.canScrollNext()), h(e.scrollSnapList()), g(e.selectedScrollSnap()));
+  }, [e]);
+  return L(() => {
+    e && (o(), e.on("reInit", o).on("select", o));
+  }, [e, o]), {
+    ref: S,
+    next: d,
+    prev: I,
+    toSlide: C,
+    activeIndex: b,
+    canNext: N,
+    canPrev: y,
+    snaps: j,
+    options: l
+  };
+};
+export {
+  B as useCarousel
+};

package/dist/components/checkbox/check-icon.js

@@ -0,0 +1,23 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+const r = ({ fill: e = "white", ...o }) => /* @__PURE__ */ t(
+  "svg",
+  {
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...o,
+    children: /* @__PURE__ */ t(
+      "path",
+      {
+        d: "M5.11112 12.4445H5.10934C4.90756 12.4445 4.71645 12.352 4.59112 12.1947L1.03556 7.75026C0.805341 7.46226 0.851563 7.04359 1.13956 6.81337C1.42845 6.58315 1.84712 6.63026 2.07645 6.91737L5.11467 10.7147L12.1485 2.02492C12.3805 1.7387 12.7991 1.69337 13.0862 1.92626C13.3725 2.15826 13.4169 2.57781 13.1849 2.86403L5.62934 12.1974C5.50223 12.3538 5.31201 12.4445 5.11112 12.4445Z",
+        fill: e
+      }
+    )
+  }
+);
+export {
+  r as default
+};