@v-miniapp/ui-react 1.0.60 → 1.0.72

package/dist/components/app/navigation-bar-layout/hook.js

@@ -0,0 +1,39 @@
+import { useCallback as t } from "react";
+import h from "../../../_virtual/merge.js";
+import { useNavigationBarLayoutStore as l } from "./store.js";
+import { useLocation as y } from "@v-miniapp/router";
+const x = () => {
+  const { pages: v, app: B, setPage: n, setApp: s, resetApp: i, resetPage: p } = l(), c = y(), e = c.key, g = c.pathname, m = v[e] || {}, u = B, N = h(
+    { divider: !0, transparent: "none" },
+    u,
+    m
+  ), a = t(
+    (r) => n(e, r),
+    [n, e]
+  ), o = t(
+    (r) => s(r),
+    [s]
+  ), d = t(() => {
+    a({ hidden: !0 });
+  }, [a]), P = t(() => {
+    o({ hidden: !0 });
+  }, [o]), A = t(() => {
+    p(e, g);
+  }, [p, e, g]), f = t(() => {
+    i();
+  }, [i]);
+  return {
+    state: N,
+    pageState: m,
+    appState: u,
+    setPageNavigationBar: a,
+    setAppNavigationBar: o,
+    removePageNavigationBar: d,
+    removeAppNavigationBar: P,
+    resetPageNavigationBar: A,
+    resetAppNavigationBar: f
+  };
+};
+export {
+  x as useNavigationBar
+};

package/dist/components/app/navigation-bar-layout/index.js

@@ -0,0 +1,46 @@
+import { jsxs as l, Fragment as p, jsx as r } from "react/jsx-runtime";
+import { useEffect as f, createElement as v } from "react";
+import { getPrefixClassName as g } from "../../../utils/classname.js";
+import { useNavigate as d, useLocation as h, useHistories as u } from "@v-miniapp/router";
+import { useNavigationBar as y } from "./hook.js";
+import { NavigationBar as N } from "../../navigation-bar/navigation-bar.js";
+import n from "classnames";
+const i = g("navigation-bar-layout"), j = ({ children: s }) => {
+  const c = d(), a = h(), m = u(), { state: t } = y(), e = !t || t.hidden, o = t.transparent && t.transparent !== "none";
+  return f(() => {
+    document.body?.style?.setProperty(
+      "--vsf-current-navigation-bar-height",
+      e ? "0px" : "var(--vsf-title-bar-height, 56px)"
+    );
+  }, [e]), /* @__PURE__ */ l(p, { children: [
+    !e && /* @__PURE__ */ r(
+      "div",
+      {
+        className: n(`${i}`, {
+          [`${i}--sticky`]: o
+        }),
+        children: /* @__PURE__ */ v(
+          N,
+          {
+            onBackClick: () => m.length > 1 ? c(-1) : vsf.exitMiniApp(),
+            ...t,
+            locationKey: a.key,
+            key: a.key
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: n(`${i}__children`, {
+          [`${i}__children--full`]: e || o
+        }),
+        children: s
+      }
+    )
+  ] });
+};
+export {
+  j as NavigationBarLayout
+};

package/dist/components/app/navigation-bar-layout/store.js

@@ -0,0 +1,60 @@
+import { create as l } from "zustand";
+import s from "../../../_virtual/merge.js";
+import { deepCloneWithoutComponent as p } from "../../../utils/deep-clone.js";
+import { routerEvents as f } from "@v-miniapp/router";
+const g = {
+  hidden: !0,
+  divider: !0,
+  transparent: "none",
+  title: "",
+  backIcon: !1,
+  leftIcon: !1,
+  rightIcon: !1
+}, i = l((o) => ({
+  pageConfigs: {},
+  appConfig: g,
+  pages: {},
+  app: g,
+  setPage: (t, n) => o((e) => ({
+    pages: s({}, e.pages, {
+      [t]: n
+    })
+  })),
+  setApp: (t) => o((n) => ({
+    app: s({}, n.app, t)
+  })),
+  resetPage: (t, n) => o((e) => ({
+    pages: {
+      ...e.pages,
+      [t]: p(e.pageConfigs[n])
+    }
+  })),
+  resetApp: () => o((t) => ({
+    app: p(t.appConfig)
+  }))
+}));
+f.on("afterInit", (o) => {
+  const { pageConfigs: t, appConfig: n } = i.getState(), e = p(n), r = Object.fromEntries(
+    o.histories.map((a) => {
+      const c = t[a.location.pathname];
+      return [a.location.key, p(c)];
+    })
+  );
+  i.setState({
+    app: e,
+    pages: r
+  });
+});
+f.on("afterHistoryChange", (o) => {
+  const { pageConfigs: t, pages: n } = i.getState(), e = { ...n }, r = o.history.location.key;
+  r in e || (e[r] = p(
+    t[o.history.location.pathname]
+  )), o.histories.forEach((a) => {
+    a.location.key in e || delete e[a.location.key];
+  }), i.setState({
+    pages: e
+  });
+});
+export {
+  i as useNavigationBarLayoutStore
+};

package/dist/components/app/page-layout/hook.js

@@ -0,0 +1,62 @@
+import { useRef as P, useEffect as l, useCallback as a } from "react";
+import v from "../../../_virtual/merge.js";
+import { usePageLayoutStore as E } from "./store.js";
+import { useLocation as O } from "@v-miniapp/router";
+const f = () => {
+  const { pages: t, app: o, setPage: e, setApp: s, resetApp: n, resetPage: c } = E(), y = O(), r = y.key, L = y.pathname, i = t[r] || {}, m = o, R = v({ scrollRestoration: !0 }, m, i), u = a(
+    (p) => e(r, p),
+    [e, r]
+  ), g = a(
+    (p) => s(p),
+    [s]
+  ), h = a(() => {
+    u({ hidden: !0 });
+  }, [u]), S = a(() => {
+    g({ hidden: !0 });
+  }, [g]), d = a(() => {
+    c(r, L);
+  }, [c, r, L]), A = a(() => {
+    n();
+  }, [n]);
+  return {
+    state: R,
+    pageState: i,
+    appState: m,
+    setPagePageLayout: u,
+    setAppPageLayout: g,
+    removePagePageLayout: h,
+    removeAppPageLayout: S,
+    resetPagePageLayout: d,
+    resetAppPageLayout: A
+  };
+}, J = (t) => {
+  const { setPagePageLayout: o } = f(), e = P(t);
+  e.current = t, l(() => {
+    o({
+      pullToRefresh: {
+        onRefresh: () => e.current()
+      }
+    });
+  }, [o]);
+}, K = (t, o) => {
+  const { setPagePageLayout: e } = f(), s = P(t);
+  s.current = t, l(() => {
+    e({
+      onPageScroll: (n, c) => s.current?.(n, c),
+      pageScrollOptions: o
+    });
+  }, [e, JSON.stringify(o)]);
+}, M = (t) => {
+  const { setPagePageLayout: o } = f(), e = P(t);
+  e.current = t, l(() => {
+    o({
+      onEndReached: () => e.current()
+    });
+  }, [o]);
+};
+export {
+  M as useLoadMore,
+  f as usePageLayout,
+  K as usePageScroll,
+  J as usePullToRefresh
+};

package/dist/components/app/page-layout/index.js

@@ -0,0 +1,21 @@
+import { jsx as u } from "react/jsx-runtime";
+import { useLocation as f, routerEvents as g } from "@v-miniapp/router";
+import { useEffect as p } from "react";
+import { usePageLayout as d } from "./hook.js";
+import { Page as l } from "../../layout/page.js";
+const n = (t) => `vsf-page-${t}`, E = ({ children: t }) => {
+  const a = f(), o = n(a.key), {
+    state: { scrollRestoration: e, hidden: s, ...i }
+  } = d();
+  return p(() => g.on("beforeHistoryChange", ({ history: c }) => {
+    const m = n(c.location.key), r = document.getElementById(m);
+    !r || e || r.scrollTo({
+      top: 0,
+      behavior: "instant"
+    });
+  }), [o, e]), s ? t : /* @__PURE__ */ u(l, { ...i, id: o, children: t });
+};
+export {
+  E as PageLayout,
+  n as getPageId
+};

package/dist/components/app/page-layout/store.js

@@ -0,0 +1,52 @@
+import { create as m } from "zustand";
+import s from "../../../_virtual/merge.js";
+import { deepCloneWithoutComponent as a } from "../../../utils/deep-clone.js";
+import { routerEvents as f } from "@v-miniapp/router";
+const g = {}, i = m((t) => ({
+  pageConfigs: {},
+  appConfig: g,
+  pages: {},
+  app: g,
+  setPage: (o, p) => t((e) => ({
+    pages: s({}, e.pages, {
+      [o]: p
+    })
+  })),
+  setApp: (o) => t((p) => ({
+    app: s({}, p.app, o)
+  })),
+  resetPage: (o, p) => t((e) => ({
+    pages: {
+      ...e.pages,
+      [o]: a(e.pageConfigs[p])
+    }
+  })),
+  resetApp: () => t((o) => ({
+    app: a(o.appConfig)
+  }))
+}));
+f.on("afterInit", (t) => {
+  const { pageConfigs: o, appConfig: p } = i.getState(), e = a(p), r = Object.fromEntries(
+    t.histories.map((n) => {
+      const c = o[n.location.pathname];
+      return [n.location.key, a(c)];
+    })
+  );
+  i.setState({
+    app: e,
+    pages: r
+  });
+});
+f.on("afterHistoryChange", (t) => {
+  const { pageConfigs: o, pages: p } = i.getState(), e = { ...p }, r = t.history.location.key;
+  r in e || (e[r] = a(
+    o[t.history.location.pathname]
+  )), t.histories.forEach((n) => {
+    n.location.key in e || delete e[n.location.key];
+  }), i.setState({
+    pages: e
+  });
+});
+export {
+  i as usePageLayoutStore
+};

package/dist/components/avatar/avatar.js

@@ -0,0 +1,79 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { getPrefixClassName as x } from "../../utils/classname.js";
+import { useState as $, useEffect as u } from "react";
+import { Image as y } from "../image/image.js";
+import { Typography as v } from "../typography/typography.js";
+import w from "classnames";
+const r = x("avatar"), M = ({
+  size: e = 40,
+  shape: o = "rounded",
+  border: a,
+  label: m,
+  labelColor: S,
+  labelSize: f,
+  color: N,
+  style: z,
+  className: c,
+  src: i,
+  srcSet: d,
+  ...g
+}) => {
+  const [h, n] = $(!1), b = I(e), l = !h && (!!i || !!d);
+  return u(() => {
+    n(!1);
+  }, [i, d]), /* @__PURE__ */ p(
+    "div",
+    {
+      className: w(
+        r,
+        `${r}--${o}`,
+        { [`${r}--show-image`]: l },
+        c
+      ),
+      style: { ...z, width: e, height: e },
+      children: [
+        !!a && /* @__PURE__ */ t(
+          "div",
+          {
+            className: `${r}__border ${r}__border--${b.borderSize} ${r}--${o}`
+          }
+        ),
+        l && /* @__PURE__ */ t(
+          y,
+          {
+            ...g,
+            onError: () => n(!0),
+            width: e,
+            height: e,
+            src: i
+          }
+        ),
+        !!m && !l && /* @__PURE__ */ t(
+          v,
+          {
+            size: f || b.labelSize,
+            color: S || "global-dynamic-red-dynamic-red-60",
+            weight: 600,
+            children: m
+          }
+        )
+      ]
+    }
+  );
+}, s = [
+  [112, { labelSize: "4x-large", borderSize: 2 }],
+  [80, { labelSize: "2x-large", borderSize: 2 }],
+  [56, { labelSize: "large", borderSize: 2 }],
+  [48, { labelSize: "base", borderSize: 1 }],
+  [40, { labelSize: "small", borderSize: 1 }],
+  [32, { labelSize: "x-small", borderSize: 1 }],
+  [24, { labelSize: "2x-small", borderSize: 1 }],
+  [0, { labelSize: "3x-small", borderSize: 1 }]
+], I = (e) => {
+  for (const [o, a] of s)
+    if (e >= o) return a;
+  return s[s.length - 1][1];
+};
+export {
+  M as Avatar
+};

package/dist/components/badge/badge.js

@@ -0,0 +1,40 @@
+import { jsx as s } from "react/jsx-runtime";
+import { getPrefixClassName as i } from "../../utils/classname.js";
+import { Typography as n } from "../typography/typography.js";
+import t from "classnames";
+const e = i("badge"), g = ({
+  outline: o,
+  children: a,
+  className: r,
+  ...m
+}) => /* @__PURE__ */ s(
+  n,
+  {
+    ...m,
+    size: "2x-small",
+    className: t(
+      e,
+      {
+        [`${e}--outline`]: o,
+        [`${e}--dot`]: !a
+      },
+      r
+    ),
+    children: a
+  }
+), x = ({
+  children: o,
+  className: a,
+  ...r
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: t(`${e}-container`, a),
+    ...r,
+    children: o
+  }
+);
+export {
+  g as Badge,
+  x as BadgeContainer
+};

package/dist/components/bottom-tab-bar/bottom-tab-bar.js

@@ -0,0 +1,90 @@
+import { jsxs as t, jsx as c, Fragment as u } from "react/jsx-runtime";
+import { useMemo as h, useEffect as N } from "react";
+import { getPrefixClassName as y } from "../../utils/classname.js";
+import { renderIcon as p } from "../icon/icon.js";
+import { Typography as _ } from "../typography/typography.js";
+import b from "classnames";
+const e = y("bottom-tab-bar"), T = ({
+  items: o,
+  activeId: r,
+  className: f,
+  indicator: l = !0,
+  setCssVariable: i,
+  onItemClick: x,
+  safeAreaBottomOffset: s = !0
+}) => {
+  const m = h(() => r ? o.findIndex((a) => a.id === r) : -1, [r, o]), n = h(() => o.some((a) => !!a.icon), [o]);
+  return N(() => {
+    i && (s ? document.body?.style?.setProperty(
+      "--vsf-bottom-tab-bar-height",
+      n ? "calc(var(--safe-area-inset-bottom, 0px) + 52px)" : "calc(var(--safe-area-inset-bottom, 0px) + 40px)"
+    ) : document.body?.style?.setProperty(
+      "--vsf-bottom-tab-bar-height",
+      n ? "52px" : "40px"
+    ));
+  }, [n, s, i]), /* @__PURE__ */ t(
+    "div",
+    {
+      className: b(
+        e,
+        {
+          [`${e}--safe-area-bottom-offset`]: s,
+          [`${e}--has-icon`]: n
+        },
+        f
+      ),
+      children: [
+        !!l && /* @__PURE__ */ c("div", { className: `${e}__divider` }),
+        !!l && m >= 0 && /* @__PURE__ */ c(
+          "div",
+          {
+            className: `${e}__indicator`,
+            style: {
+              left: `calc(100% * ${m} / ${o.length})`,
+              width: `calc(100% / ${o.length})`
+            }
+          }
+        ),
+        o.map((a, v) => {
+          const $ = a.id === r, d = !!a.icon;
+          return /* @__PURE__ */ t(
+            "div",
+            {
+              className: b(`${e}__item`, {
+                [`${e}__item--active`]: $,
+                [`${e}__item--has-icon`]: d
+              }),
+              onClick: () => x?.(a, v),
+              children: [
+                d && /* @__PURE__ */ t(u, { children: [
+                  /* @__PURE__ */ c("div", { className: `${e}__icon`, children: p(a.icon) }),
+                  /* @__PURE__ */ c("div", { className: `${e}__icon-active`, children: p(a.activeIcon || a.icon) })
+                ] }),
+                /* @__PURE__ */ c(
+                  _,
+                  {
+                    size: a.icon ? "2x-small" : "small",
+                    className: `${e}__label`,
+                    children: a.name
+                  }
+                ),
+                /* @__PURE__ */ c(
+                  _,
+                  {
+                    size: a.icon ? "2x-small" : "small",
+                    className: `${e}__label-active`,
+                    children: a.name
+                  }
+                )
+              ]
+            },
+            a.id
+          );
+        })
+      ]
+    }
+  );
+};
+export {
+  T as BottomTabBar
+};

package/dist/components/button/button.const.js

@@ -0,0 +1,7 @@
+const e = {
+  medium: "small",
+  large: "base"
+};
+export {
+  e as buttonLabelSizeMapping
+};

package/dist/components/button/button.js

@@ -0,0 +1,62 @@
+import { jsxs as x, jsx as s } from "react/jsx-runtime";
+import "react";
+import { getPrefixClassName as y } from "../../utils/classname.js";
+import { buttonLabelSizeMapping as C } from "./button.const.js";
+import { Typography as k } from "../typography/typography.js";
+import { renderIcon as j } from "../icon/icon.js";
+import l from "classnames";
+const r = y("button"), P = ({
+  shape: c = "rounded",
+  size: u = "medium",
+  type: f = "solid",
+  theme: o = "default",
+  disabled: $,
+  loading: t,
+  children: n,
+  className: _,
+  leadingIcon: m,
+  trailingIcon: a,
+  htmlType: d,
+  block: N,
+  ...p
+}) => {
+  o = o === "default" ? "brand" : o;
+  const i = (e, b) => e ? /* @__PURE__ */ s("span", { className: l(`${r}__icon`, b), children: j(e) }) : null;
+  return /* @__PURE__ */ x(
+    "button",
+    {
+      ...p,
+      onClick: (e) => {
+        $ || t || p.onClick?.(e);
+      },
+      disabled: $,
+      type: d,
+      className: l(
+        r,
+        {
+          [`${r}--${c}`]: !0,
+          [`${r}--${u}`]: !0,
+          [`${r}--${f}`]: !0,
+          [`${r}--block`]: N,
+          [`${r}--theme-${o}`]: !0,
+          [`${r}--icon-only`]: !n && (m && !a || !m && a),
+          [`${r}--loading`]: t
+        },
+        _
+      ),
+      children: [
+        /* @__PURE__ */ s("span", { className: `${r}__overlay` }),
+        !!t && i(
+          { name: "loader", animation: "spin" },
+          `${r}__icon--loading`
+        ),
+        !t && i(m, `${r}__icon--leading`),
+        !!n && /* @__PURE__ */ s(k, { size: C[u], weight: "medium", children: n }),
+        i(a, `${r}__icon--trailing`)
+      ]
+    }
+  );
+};
+export {
+  P as Button
+};

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

@@ -0,0 +1,66 @@
+import { jsxs as u, jsx as l } from "react/jsx-runtime";
+import { useState as C, useCallback as S, useEffect as x } from "react";
+import { getPrefixClassName as N } from "../../utils/classname.js";
+import { Sheet as g } from "../sheet/sheet.js";
+import { SheetHeader as k } from "../sheet/sheet-header.js";
+import { SheetBody as b } from "../sheet/sheet-body.js";
+import { Calendar as y } from "./calendar.js";
+import { SheetFooter as j } from "../sheet/sheet-footer.js";
+import { Button as B } from "../button/button.js";
+import P from "classnames";
+const i = N("calendar-sheet"), $ = ({
+  className: m,
+  title: a,
+  confirmButton: c,
+  open: t,
+  onCancel: f,
+  value: e,
+  defaultValue: d,
+  onSelect: h,
+  ...p
+}) => {
+  const n = e !== void 0, [o, r] = C(
+    e || d || [null, null]
+  ), s = S(() => {
+    n && r(e || [null, null]);
+  }, [n, e]);
+  return x(() => {
+    e === null && r([null, null]), e && r(e);
+  }, [e]), /* @__PURE__ */ u(g, { open: t, className: P(i, m), children: [
+    /* @__PURE__ */ l(
+      k,
+      {
+        title: a,
+        closeIcon: !0,
+        onCloseClick: () => {
+          f?.(), s();
+        }
+      }
+    ),
+    /* @__PURE__ */ l(b, { className: `${i}__body`, children: t && /* @__PURE__ */ l(
+      y,
+      {
+        type: "range",
+        ...p,
+        value: o,
+        onPick: r
+      }
+    ) }),
+    /* @__PURE__ */ l(j, { children: /* @__PURE__ */ l(
+      B,
+      {
+        size: "large",
+        children: "Xác nhận",
+        theme: "neutral",
+        ...c,
+        disabled: !o || o[0] === null || o[1] === null,
+        onClick: () => {
+          h?.(o), s();
+        }
+      }
+    ) })
+  ] });
+};
+export {
+  $ as CalendarRangeSheet
+};

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

@@ -0,0 +1,64 @@
+import { jsxs as C, jsx as r } from "react/jsx-runtime";
+import { useState as g, useCallback as u, useEffect as S } from "react";
+import { getPrefixClassName as x } from "../../utils/classname.js";
+import { Calendar as N } from "./calendar.js";
+import { Sheet as b } from "../sheet/sheet.js";
+import { SheetHeader as k } from "../sheet/sheet-header.js";
+import { SheetBody as y } from "../sheet/sheet-body.js";
+import { SheetFooter as T } from "../sheet/sheet-footer.js";
+import { Button as j } from "../button/button.js";
+import B from "classnames";
+const m = x("calendar-sheet"), $ = ({
+  title: n,
+  confirmButton: c,
+  open: i,
+  onCancel: a,
+  value: e,
+  defaultValue: f,
+  onSelect: d,
+  className: h,
+  ...p
+}) => {
+  const l = e !== void 0, [o, t] = g(e || f || null), s = u(() => {
+    l && o?.getTime() !== e?.getTime() && t(e || null);
+  }, [l, o, e]);
+  return S(() => {
+    e === null && t(null), e && t(e);
+  }, [e?.getTime()]), /* @__PURE__ */ C(b, { open: i, className: B(m, h), children: [
+    /* @__PURE__ */ r(
+      k,
+      {
+        title: n,
+        closeIcon: !0,
+        onCloseClick: () => {
+          a?.(), s();
+        }
+      }
+    ),
+    /* @__PURE__ */ r(y, { className: `${m}__body`, children: i && /* @__PURE__ */ r(
+      N,
+      {
+        type: "single",
+        ...p,
+        onChange: t,
+        value: o
+      }
+    ) }),
+    /* @__PURE__ */ r(T, { children: /* @__PURE__ */ r(
+      j,
+      {
+        size: "large",
+        children: "Xác nhận",
+        theme: "neutral",
+        ...c,
+        disabled: !o,
+        onClick: () => {
+          o && (d?.(o), s());
+        }
+      }
+    ) })
+  ] });
+};
+export {
+  $ as CalendarSingleSheet
+};