@v-miniapp/ui-react 1.0.60 → 1.0.71

package/dist/components/date-picker/date-picker-base.js

@@ -0,0 +1,214 @@
+import { jsxs as Q, jsx as h } from "react/jsx-runtime";
+import { useMemo as s, useCallback as x } from "react";
+import { useControllableValue as S } from "ahooks";
+import T from "classnames";
+import { DatePickerItem as D } from "./date-picker-item.js";
+import { prefixClassName as U } from "./date-picker.constant.js";
+import { getRanges as y, getActiveIndex as f } from "./date-picker.utils.js";
+const te = ({
+  className: M,
+  hour: C,
+  day: c,
+  month: b,
+  year: O,
+  minutesProps: L,
+  hoursProps: u,
+  daysProps: w,
+  monthsProps: I,
+  yearsProps: k,
+  dayOfWeeksProps: A,
+  ...v
+}) => {
+  const [n, a] = S(v, {
+    trigger: "onChange",
+    valuePropName: "value",
+    defaultValue: {
+      years: (/* @__PURE__ */ new Date()).getFullYear(),
+      minutes: (/* @__PURE__ */ new Date()).getMinutes(),
+      hours: (/* @__PURE__ */ new Date()).getHours(),
+      days: (/* @__PURE__ */ new Date()).getDate(),
+      months: (/* @__PURE__ */ new Date()).getMonth(),
+      dayOfWeeks: (/* @__PURE__ */ new Date()).getDay()
+    }
+  });
+  let R = !1;
+  c = c || C && (b || O), b = b || (C || c) && O, c && !C && !b && !O && (R = !0, c = !1);
+  const N = C, o = s(
+    () => y(0, 59, L?.step || 1),
+    [L?.step]
+  ), Y = s(
+    () => f(o, n.minutes),
+    [o, n.minutes]
+  ), j = x(
+    (t) => {
+      a((e) => ({
+        ...e,
+        minutes: o[t % o.length]
+      }));
+    },
+    [o, a]
+  ), r = s(
+    () => y(0, 23, u?.step || 1),
+    [u?.step]
+  ), F = s(
+    () => f(r, n.hours),
+    [r, n.hours]
+  ), H = x(
+    (t) => {
+      a((e) => ({
+        ...e,
+        hours: r[t % r.length]
+      }));
+    },
+    [r, a]
+  ), m = s(() => {
+    const t = new Date(n.years, n.months + 1, 0).getDate();
+    return y(1, t, w?.step || 1);
+  }, [w?.step, n.months, n.years]), V = s(
+    () => f(m, n.days),
+    [m, n.days]
+  ), B = x(
+    (t) => {
+      a((e) => ({
+        ...e,
+        days: m[t % m.length],
+        dayOfWeeks: new Date(
+          e.years,
+          e.months,
+          m[t % m.length]
+        ).getDay()
+      }));
+    },
+    [m, a]
+  ), g = s(
+    () => y(0, 11, I?.step || 1),
+    [I?.step]
+  ), $ = s(
+    () => f(g, n.months),
+    [g, n.months]
+  ), q = x(
+    (t) => {
+      a((e) => ({
+        ...e,
+        months: g[t % g.length],
+        dayOfWeeks: new Date(
+          e.years,
+          g[t % g.length],
+          e.days
+        ).getDay()
+      }));
+    },
+    [g, a]
+  ), i = s(
+    () => y(1900, 2300, k?.step || 1),
+    [k?.step]
+  ), z = s(
+    () => f(i, n.years),
+    [i, n.years]
+  ), E = x(
+    (t) => {
+      a((e) => ({
+        ...e,
+        years: i[t % i.length],
+        dayOfWeeks: new Date(
+          i[t % i.length],
+          e.months,
+          e.days
+        ).getDay()
+      }));
+    },
+    [i, a]
+  ), l = s(
+    () => y(0, 59, A?.step || 1),
+    [A?.step]
+  ), G = s(
+    () => f(l, n.dayOfWeeks),
+    [l, n.dayOfWeeks]
+  ), J = x(
+    (t) => {
+      a((e) => {
+        const d = new Date(e.years, e.months, e.days), W = l[t % l.length], K = d.getDay() - W;
+        return d.setDate(d.getDate() - K), {
+          ...e,
+          years: d.getFullYear(),
+          months: d.getMonth(),
+          days: d.getDate(),
+          dayOfWeeks: W
+        };
+      });
+    },
+    [l, a]
+  );
+  return /* @__PURE__ */ Q("div", { className: T(`${U}-base`, M), children: [
+    c && /* @__PURE__ */ h(
+      D,
+      {
+        items: m,
+        activeIndex: V,
+        onChange: B,
+        renderLabel: w.renderLabel,
+        min: w.min,
+        max: w.max
+      },
+      m.length
+    ),
+    b && /* @__PURE__ */ h(
+      D,
+      {
+        items: g,
+        activeIndex: $,
+        onChange: q,
+        renderLabel: I.renderLabel,
+        min: I.min,
+        max: I.max
+      }
+    ),
+    O && /* @__PURE__ */ h(
+      D,
+      {
+        items: i,
+        activeIndex: z,
+        onChange: E,
+        renderLabel: k.renderLabel,
+        min: k.min,
+        max: k.max
+      }
+    ),
+    R && /* @__PURE__ */ h(
+      D,
+      {
+        items: l,
+        activeIndex: G,
+        onChange: J,
+        renderLabel: A.renderLabel,
+        min: A.min,
+        max: A.max
+      }
+    ),
+    C && /* @__PURE__ */ h(
+      D,
+      {
+        items: r,
+        activeIndex: F,
+        onChange: H,
+        renderLabel: u.renderLabel,
+        min: u.min,
+        max: u.max
+      }
+    ),
+    N && /* @__PURE__ */ h(
+      D,
+      {
+        items: o,
+        activeIndex: Y,
+        onChange: j,
+        renderLabel: L.renderLabel,
+        min: L.min,
+        max: L.max
+      }
+    )
+  ] });
+};
+export {
+  te as DatePickerBase
+};

package/dist/components/date-picker/date-picker-item.js

@@ -0,0 +1,69 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useRef as R, useCallback as T, useEffect as H } from "react";
+import P from "embla-carousel-react";
+import U from "classnames";
+import { prefixClassName as V, itemConfig as b } from "./date-picker.constant.js";
+import { Typography as x } from "../typography/typography.js";
+const _ = `${V}-item`, {
+  CIRCLE_DEGREES: L,
+  WHEEL_ITEM_COUNT: $,
+  WHEEL_ITEMS_IN_VIEW: Z,
+  WHEEL_ITEM_SIZE: v
+} = b, l = L / $, k = l * Z, W = Math.round(
+  v / 2 / Math.tan(Math.PI / $)
+), C = (s, e) => Math.abs(s - e) < k, G = (s, e, N, S, c) => {
+  const n = s.slideNodes()[e], r = s.scrollProgress() * c, i = s.scrollSnapList()[e] * c, o = i + c, f = i - c;
+  let E = !1, d = e * -l;
+  if (C(r, i) && (E = !0), C(r, f) && (E = !0, d = -L + (S - e) * l), C(r, o) && (E = !0, d = -(c % L) - e * l), E) {
+    const g = Math.abs(r - i) < l / 2;
+    n.style.opacity = g ? "1" : "0.25", n.style.transform = `translateY(-${e * 100}%) rotateX(${d}deg) translateZ(${W}px)`;
+  } else
+    n.style.opacity = "0", n.style.transform = "none";
+}, O = (s, e) => {
+  s.containerNode().style.transform = `translateZ(${W}px) rotateX(${e}deg)`;
+}, B = (s) => {
+  const { className: e, items: N, activeIndex: S = 0, renderLabel: c, onChange: n } = s, r = !0, [i, o] = P({
+    loop: r,
+    axis: "y",
+    dragFree: !0,
+    containScroll: !1,
+    watchSlides: !1,
+    startIndex: S
+  }), f = N.length, E = R(null), d = f * l, g = 0, u = T(
+    (t) => {
+      if (!t) return;
+      const { translate: a, slideLooper: p } = t.internalEngine();
+      a.clear(), a.toggleActive(!1), p.loopPoints.forEach(({ translate: h }) => {
+        h.clear(), h.toggleActive(!1);
+      });
+    },
+    []
+  ), I = T(
+    (t) => {
+      const p = (f * l - g) * t.scrollProgress();
+      O(t, p), t.slideNodes().forEach((h, y) => {
+        G(t, y, r, f, d);
+      });
+    },
+    [f, g, d, r]
+  );
+  return H(() => {
+    if (!o) return;
+    o.on("pointerUp", (a) => {
+      const { scrollTo: p, target: h, location: y } = a.internalEngine(), M = h.get() - y.get(), w = Math.abs(M) < v / 2.5 ? 10 : 0.1, D = M * w;
+      p.distance(D, !0);
+    }), o.on("scroll", I), o.on("reInit", (a) => {
+      u(a), I(a);
+    }), u(o), I(o);
+    const t = () => {
+      n && n(o.selectedScrollSnap());
+    };
+    return o.on("select", t), () => {
+      o.off("select", t);
+    };
+  }, [o, u, I, n]), /* @__PURE__ */ m("div", { className: U(_, e), children: /* @__PURE__ */ m("div", { className: `${_}__scene`, ref: E, children: /* @__PURE__ */ m("div", { className: `${_}__viewport`, ref: i, children: /* @__PURE__ */ m("div", { className: `${_}__container`, children: N.map((t) => /* @__PURE__ */ m("div", { className: `${_}__slide`, children: /* @__PURE__ */ m(x, { size: "base", weight: "600", children: c?.(t) || t }) }, t)) }) }) }) });
+};
+export {
+  B as DatePickerItem,
+  O as setContainerStyles
+};

package/dist/components/date-picker/date-picker-sheet.js

@@ -0,0 +1,54 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { useState as p, useCallback as C, useEffect as S } from "react";
+import { DatePicker as g } from "./date-picker.js";
+import { Sheet as k } from "../sheet/sheet.js";
+import { SheetHeader as D } from "../sheet/sheet-header.js";
+import { SheetBody as u } from "../sheet/sheet-body.js";
+import { SheetFooter as w } from "../sheet/sheet-footer.js";
+import { Button as x } from "../button/button.js";
+const E = ({
+  title: c,
+  confirmButton: s,
+  open: i,
+  onCancel: f,
+  value: e,
+  defaultValue: l,
+  onSelect: h,
+  ...a
+}) => {
+  const n = e !== void 0, [o, r] = p(
+    e || l || /* @__PURE__ */ new Date()
+  ), m = C(() => {
+    n && o.getTime() !== e?.getTime() && r(e || /* @__PURE__ */ new Date());
+  }, [n, o, e]);
+  return S(() => {
+    e === null && r(/* @__PURE__ */ new Date()), e && r(e);
+  }, [e?.getTime()]), /* @__PURE__ */ d(k, { open: i, children: [
+    /* @__PURE__ */ t(
+      D,
+      {
+        title: c,
+        closeIcon: !0,
+        onCloseClick: () => {
+          f?.(), m();
+        }
+      }
+    ),
+    /* @__PURE__ */ t(u, { children: i && /* @__PURE__ */ t(g, { ...a, value: o, onChange: r }) }),
+    /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
+      x,
+      {
+        size: "large",
+        children: "Xác nhận",
+        theme: "neutral",
+        ...s,
+        onClick: () => {
+          h?.(o), m();
+        }
+      }
+    ) })
+  ] });
+};
+export {
+  E as DatePickerSheet
+};

package/dist/components/date-picker/date-picker.constant.js

@@ -0,0 +1,11 @@
+import { getPrefixClassName as E } from "../../utils/classname.js";
+const _ = E("date-picker"), t = {
+  CIRCLE_DEGREES: 360,
+  WHEEL_ITEM_SIZE: 24,
+  WHEEL_ITEM_COUNT: 80,
+  WHEEL_ITEMS_IN_VIEW: 4
+};
+export {
+  t as itemConfig,
+  _ as prefixClassName
+};

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,76 @@
+import { jsx as C } from "react/jsx-runtime";
+import { useMemo as r, useCallback as D } from "react";
+import { useControllableValue as v } from "ahooks";
+import M from "../../_virtual/omit.js";
+import { DatePickerBase as O } from "./date-picker-base.js";
+import { getTypePickerProps as W } from "./date-picker.utils.js";
+const F = ({
+  min: n,
+  max: a,
+  renderLabels: u,
+  year: p = !0,
+  month: i = !0,
+  day: y = !0,
+  hour: s = !1,
+  ...m
+}) => {
+  const [o, c] = v(m, {
+    trigger: "onChange",
+    valuePropName: "value",
+    defaultValue: /* @__PURE__ */ new Date()
+  }), g = r(
+    () => ({
+      years: o.getFullYear(),
+      months: o.getMonth(),
+      days: o.getDate(),
+      dayOfWeeks: o.getDay(),
+      hours: o.getHours(),
+      minutes: o.getMinutes()
+    }),
+    [o]
+  ), e = D(
+    (t) => W({
+      type: t,
+      value: o,
+      max: a,
+      min: n,
+      hasHour: s,
+      renderLabels: u
+    }),
+    [o, a, n, s, u]
+  ), h = r(() => e("year"), [e]), l = r(() => e("month"), [e]), P = r(() => e("day"), [e]), f = r(() => e("hour"), [e]), d = r(() => e("minute"), [e]), k = r(
+    () => e("dayOfWeek"),
+    [e]
+  );
+  return /* @__PURE__ */ C(
+    O,
+    {
+      ...M(m, ["value", "onChange"]),
+      year: p,
+      month: i,
+      day: y,
+      hour: s,
+      yearsProps: h,
+      monthsProps: l,
+      daysProps: P,
+      hoursProps: f,
+      minutesProps: d,
+      dayOfWeeksProps: k,
+      value: g,
+      onChange: (t) => {
+        c(
+          new Date(
+            t.years,
+            t.months,
+            t.days,
+            t.hours,
+            t.minutes
+          )
+        );
+      }
+    }
+  );
+};
+export {
+  F as DatePicker
+};

package/dist/components/date-picker/date-picker.utils.js

@@ -0,0 +1,58 @@
+import { dayjs as a } from "../../utils/date.js";
+const b = (t) => {
+  const { type: s, value: e, max: n, min: r, hasHour: l, renderLabels: u } = t;
+  let d, f, o;
+  switch (s) {
+    case "day": {
+      o = u?.days || i, d = n && a(n).startOf("month").valueOf() === a(e).startOf("month").valueOf() ? n.getDate() : void 0, f = r && a(r).startOf("month").valueOf() === a(e).startOf("month").valueOf() ? r.getDate() : void 0;
+      break;
+    }
+    case "month": {
+      o = u?.months || (l ? g : v), d = n && a(n).startOf("year").valueOf() === a(e).startOf("year").valueOf() ? n.getMonth() : void 0, f = r && a(r).startOf("year").valueOf() === a(e).startOf("year").valueOf() ? r.getMonth() : void 0;
+      break;
+    }
+    case "year": {
+      o = u?.years || c, d = n ? n.getFullYear() : void 0, f = r ? r.getFullYear() : void 0;
+      break;
+    }
+    case "hour": {
+      o = u?.hours || O, d = n && a(n).startOf("day").valueOf() === a(e).startOf("day").valueOf() ? n.getHours() : void 0, f = r && a(r).startOf("day").valueOf() === a(e).startOf("day").valueOf() ? r.getHours() : void 0;
+      break;
+    }
+    case "minute": {
+      o = u?.minutes || h, d = n && a(n).startOf("hour").valueOf() === a(e).startOf("hour").valueOf() ? n.getMinutes() : void 0, f = r && a(r).startOf("hour").valueOf() === a(e).startOf("hour").valueOf() ? r.getMinutes() : void 0;
+      break;
+    }
+    case "dayOfWeek": {
+      o = u?.dayOfWeeks || y;
+      break;
+    }
+  }
+  return {
+    renderLabel: o,
+    max: d,
+    min: f
+  };
+}, p = (t, s, e) => Array.from(
+  { length: Math.floor((s - t + 1) / e) },
+  (n, r) => t + r * e
+), S = (t, s) => {
+  let e = 0;
+  for (; e < t.length; e++) {
+    if (t[e] === s) return e;
+    if (t[e] > s) return Math.max(e, 0);
+  }
+  return e - 1;
+}, O = (t) => t.toString().padStart(2, "0"), h = (t) => t.toString().padStart(2, "0"), i = (t) => t.toString().padStart(2, "0"), v = (t) => "tháng " + (t + 1).toString().padStart(2, "0"), g = (t) => "thg " + (t + 1).toString().padStart(2, "0"), c = (t) => t.toString().padStart(4, "0"), y = (t) => ["chủ nhật", "thứ 2", "thứ 3", "thứ 4", "thứ 5", "thứ 6", "thứ 7"][t % 7];
+export {
+  S as getActiveIndex,
+  p as getRanges,
+  b as getTypePickerProps,
+  y as renderDayOfWeeksLabel,
+  i as renderDaysLabel,
+  O as renderHoursLabel,
+  h as renderMinutesLabel,
+  v as renderMonthsLabel,
+  g as renderMonthsThumbLabel,
+  c as renderYearsLabel
+};

package/dist/components/dialog/dialog.js

@@ -0,0 +1,115 @@
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { getPrefixClassName as D } from "../../utils/classname.js";
+import { useState as g, useRef as _, useEffect as n, forwardRef as w } from "react";
+import { createPortal as h } from "react-dom";
+import { useDidShow as R, useDidHide as k } from "@v-miniapp/router";
+import { appStore as l } from "../app/app.store.js";
+import c from "classnames";
+import { Button as z } from "../button/button.js";
+import { Image as A } from "../image/image.js";
+import { Typography as p } from "../typography/typography.js";
+const t = D("dialog"), u = w(
+  ({
+    topImageUrl: e,
+    top: o,
+    title: s,
+    description: a,
+    children: i,
+    closeAction: d,
+    footer: f,
+    open: b,
+    onBackdropClick: y,
+    onCloseClick: N,
+    overlay: $ = "default",
+    className: v,
+    ...x
+  }, C) => /* @__PURE__ */ m(
+    "div",
+    {
+      ref: C,
+      className: c(
+        t,
+        { [`${t}--open`]: b },
+        v
+      ),
+      ...x,
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: c(`${t}__overlay`, {
+              [`${t}__overlay--blur`]: $ === "blur"
+            }),
+            onClick: y
+          }
+        ),
+        !!d && /* @__PURE__ */ r(
+          z,
+          {
+            className: `${t}__close`,
+            leadingIcon: { name: "xmark" },
+            size: "large",
+            theme: "neutral",
+            type: "outline",
+            shape: "pill",
+            onClick: N
+          }
+        ),
+        /* @__PURE__ */ m(
+          "div",
+          {
+            className: c(
+              `${t}__box`,
+              !!d && `${t}__box--close`
+            ),
+            children: [
+              e && /* @__PURE__ */ r(A, { src: e, className: `${t}__image` }),
+              o,
+              (!!s || !!a) && /* @__PURE__ */ m("div", { className: `${t}__title-group`, children: [
+                !!s && /* @__PURE__ */ r(p, { size: "large", weight: 600, children: s }),
+                !!a && /* @__PURE__ */ r(p, { size: "base", weight: 400, children: a })
+              ] }),
+              !!i && /* @__PURE__ */ r("div", { className: `${t}__body`, children: i }),
+              !!f && /* @__PURE__ */ r("div", { className: `${t}__footer`, children: f })
+            ]
+          }
+        )
+      ]
+    }
+  )
+), O = ({
+  open: e,
+  ...o
+}) => {
+  const [s, a] = g(e), i = _(null);
+  return R(() => {
+    e && a(e);
+  }), k(() => {
+    a(!1);
+  }), n(() => {
+    a(e);
+  }, [e]), n(() => {
+    s && i.current && document.body.appendChild(i.current);
+  }, [s]), h(
+    /* @__PURE__ */ r(u, { ref: i, open: s, ...o }),
+    document.body
+  );
+}, S = ({
+  open: e,
+  ...o
+}) => {
+  const [s, a] = g(e), i = _(null);
+  return n(() => () => {
+    a(!1);
+  }, []), n(() => {
+    a(e);
+  }, [e]), n(() => {
+    s && i.current && document.body.appendChild(i.current);
+  }, [s]), h(
+    /* @__PURE__ */ r(u, { ref: i, open: s, ...o }),
+    document.body
+  );
+}, J = ({ portal: e = !0, ...o }) => e && l.isUsingApp && l.isUsingRouter ? /* @__PURE__ */ r(O, { ...o }) : e && (!l.isUsingApp || !l.isUsingRouter) ? /* @__PURE__ */ r(S, { ...o }) : /* @__PURE__ */ r(u, { ...o });
+export {
+  J as Dialog
+};

package/dist/components/dropdown/dropdown-base.js

@@ -0,0 +1,22 @@
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import { getPrefixClassName as a } from "../../utils/classname.js";
+import { InputWrapper as n } from "../input-wrapper/input-wrapper.js";
+import { Skeleton as i } from "../skeleton/skeleton.js";
+const s = a("dropdown"), m = (e) => /* @__PURE__ */ o(
+  n,
+  {
+    trailingIcon: {
+      name: "chevron-down",
+      color: "alias-object-secondary",
+      size: 20
+    },
+    ...e,
+    loadingNode: e.loading && /* @__PURE__ */ r("div", { className: `${s}__loading`, children: [
+      /* @__PURE__ */ o(i, { width: 128, height: 13, shape: "pill" }),
+      /* @__PURE__ */ o(i, { width: 24, height: 24, shape: "pill" })
+    ] })
+  }
+);
+export {
+  m as DropdownBase
+};