@v-miniapp/ui-react 1.0.59 → 1.0.71

package/dist/components/option-item/option-item.js

@@ -0,0 +1,56 @@
+import { jsxs as _, jsx as t } from "react/jsx-runtime";
+import { getPrefixClassName as f } from "../../utils/classname.js";
+import { useControllableValue as p } from "ahooks";
+import { Typography as N } from "../typography/typography.js";
+import { Icon as u } from "../icon/icon.js";
+import h from "classnames";
+const e = f("option-item"), k = (a) => {
+  const {
+    theme: l = "brand",
+    selected: v,
+    defaultSelected: C,
+    onChange: $,
+    divider: o = !0,
+    children: r,
+    className: c,
+    ...m
+  } = a, i = l || "brand", [s, n] = p(a, {
+    valuePropName: "selected",
+    defaultValuePropName: "defaultSelected",
+    trigger: "onChange"
+  });
+  return /* @__PURE__ */ _(
+    "div",
+    {
+      ...m,
+      className: h(
+        e,
+        {
+          [`${e}--${i}`]: !0,
+          [`${e}--selected`]: s
+        },
+        c
+      ),
+      onClick: (d) => {
+        a.onClick?.(d), n(!s);
+      },
+      children: [
+        /* @__PURE__ */ t("div", { className: `${e}__overlay` }),
+        /* @__PURE__ */ t(N, { size: "base", className: `${e}__content`, children: r }),
+        !!s && /* @__PURE__ */ t(
+          u,
+          {
+            name: "circle-check",
+            size: 16,
+            type: "fill",
+            className: `${e}__icon`
+          }
+        ),
+        o && /* @__PURE__ */ t("div", { className: `${e}__divider` })
+      ]
+    }
+  );
+};
+export {
+  k as OptionItem
+};

package/dist/components/pagination/pagination.js

@@ -0,0 +1,20 @@
+import { jsx as e } from "react/jsx-runtime";
+import { getPrefixClassName as l } from "../../utils/classname.js";
+import m from "classnames";
+const a = l("pagination"), N = ({
+  total: r,
+  activeIndex: s,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ e("div", { className: m(a, t), ...o, children: new Array(r).fill(0).map((n, i) => /* @__PURE__ */ e(
+  "div",
+  {
+    className: m(`${a}__item`, {
+      [`${a}__item--active`]: i === s
+    })
+  },
+  i
+)) });
+export {
+  N as Pagination
+};

package/dist/components/pull-to-refresh/pull-to-refresh.js

@@ -0,0 +1,120 @@
+import { jsxs as Y, jsx as h } from "react/jsx-runtime";
+import { getPrefixClassName as k } from "../../utils/classname.js";
+import { useState as B, useRef as T, useEffect as D } from "react";
+import { convertPx as N } from "../../utils/convert-px.js";
+import { sleep as I } from "../../utils/sleep.js";
+import { useDrag as K } from "@use-gesture/react";
+import { getScrollParent as P } from "../../utils/get-scroll-parent.js";
+import { rubberbandIfOutOfBounds as V } from "../../utils/rubberband.js";
+import { supportsPassive as W } from "../../utils/supports-passive.js";
+import { useSpring as q, motion as z } from "framer-motion";
+import i from "classnames";
+const l = k("pull-to-refresh"), re = ({
+  pullingText: R = "Kéo xuống để làm mới",
+  canReleaseText: b = "Thả để làm mới",
+  refreshingText: w = "Đang tải...",
+  completeText: y = "Làm mới thành công",
+  completeDelay: g = 500,
+  disabled: S = !1,
+  headHeight: a = N(40),
+  threshold: _ = N(60),
+  onRefresh: j = () => Promise.resolve(),
+  children: E,
+  className: O,
+  ...c
+}) => {
+  const [e, s] = B("pulling"), r = q(0, { bounce: 0 }), f = T(null), u = T(!1);
+  D(() => {
+    f.current?.addEventListener("touchmove", () => {
+    });
+  }, []);
+  const d = async () => {
+    r.set(0), s("pulling");
+  };
+  async function $() {
+    r.set(a), s("refreshing");
+    try {
+      await j(), s("complete");
+    } catch (t) {
+      throw await d(), t;
+    }
+    g > 0 && await I(g), await d();
+  }
+  K(
+    (t) => {
+      if (e === "refreshing" || e === "complete") return;
+      const { event: m } = t;
+      if (t.last) {
+        u.current = !1, e === "canRelease" ? $() : r.set(0);
+        return;
+      }
+      const [, L] = t.movement, v = Math.ceil(L);
+      if (t.first && v > 0) {
+        let M = function(o) {
+          return "scrollTop" in o ? o.scrollTop : o.scrollY;
+        };
+        const p = t.event.target;
+        if (!p || !(p instanceof Element)) return;
+        let n = P(p);
+        for (; ; ) {
+          if (!n || M(n) > 0)
+            return;
+          if (n instanceof Window)
+            break;
+          n = P(n.parentNode);
+        }
+        u.current = !0;
+      }
+      if (!u.current) return;
+      m.cancelable && m.preventDefault(), m.stopPropagation();
+      const x = Math.max(
+        V(v, 0, 0, a * 5, 0.5),
+        0
+      );
+      r.jump(x), s(x > _ ? "canRelease" : "pulling");
+    },
+    {
+      pointer: { touch: !0 },
+      axis: "y",
+      target: f,
+      enabled: !S,
+      eventOptions: W ? { passive: !1 } : void 0
+    }
+  );
+  const C = () => {
+    if (c.renderText) return c.renderText?.(e);
+    if (e === "pulling") return R;
+    if (e === "canRelease") return b;
+    if (e === "refreshing") return w;
+    if (e === "complete") return y;
+  };
+  return /* @__PURE__ */ Y(
+    "div",
+    {
+      ...c,
+      ref: f,
+      className: i(l, O),
+      children: [
+        /* @__PURE__ */ h(
+          z.div,
+          {
+            style: { height: r },
+            className: i(`${l}__head`),
+            children: /* @__PURE__ */ h(
+              "div",
+              {
+                className: i(`${l}__head-content`),
+                style: { height: a },
+                children: C()
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ h("div", { className: i(`${l}__content`), children: E })
+      ]
+    }
+  );
+};
+export {
+  re as PullToRefresh
+};

package/dist/components/radio/radio.js

@@ -0,0 +1,72 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { getPrefixClassName as C } from "../../utils/classname.js";
+import { useControllableValue as $ } from "ahooks";
+import { forwardRef as k, useRef as y, useState as x, useImperativeHandle as R } from "react";
+import { Typography as v } from "../typography/typography.js";
+import F from "classnames";
+const e = C("radio"), T = k((s, m) => {
+  const {
+    theme: d = "brand",
+    type: i = "radio",
+    className: f,
+    style: h,
+    onChange: P,
+    checked: j,
+    defaultChecked: B,
+    disabled: t,
+    children: p,
+    typography: _,
+    ...b
+  } = s, n = d || "brand", r = y(null), [g, c] = x(!1), [l, N] = $(s, {
+    trigger: "onChange",
+    defaultValuePropName: "defaultChecked",
+    valuePropName: "checked"
+  });
+  return R(m, () => ({
+    focus: () => r.current?.focus?.(),
+    blur: () => r.current?.blur?.()
+  })), /* @__PURE__ */ u(
+    "label",
+    {
+      className: F(
+        e,
+        {
+          [`${e}--${n}`]: n,
+          [`${e}--checked`]: l,
+          [`${e}--focus`]: g,
+          [`${e}--disabled`]: t
+        },
+        f
+      ),
+      style: h,
+      children: [
+        /* @__PURE__ */ u("span", { className: `${e}__button`, children: [
+          /* @__PURE__ */ o("span", { className: `${e}__overlay` }),
+          /* @__PURE__ */ o("span", { className: `${e}__icon` }),
+          /* @__PURE__ */ o(
+            "input",
+            {
+              ...b,
+              type: i,
+              checked: l,
+              disabled: t,
+              onChange: (a) => N(a.target.checked),
+              ref: r,
+              className: `${e}__input`,
+              onFocus: (a) => {
+                c(!0), s.onFocus?.(a);
+              },
+              onBlur: (a) => {
+                c(!1), s.onBlur?.(a);
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ o(v, { size: "base", ..._, component: "span", children: p })
+      ]
+    }
+  );
+});
+export {
+  T as Radio
+};

package/dist/components/rating/rating.js

@@ -0,0 +1,62 @@
+import { jsx as f } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import { getPrefixClassName as C } from "../../utils/classname.js";
+import { useControllableValue as v } from "ahooks";
+import { Star as N } from "./star.js";
+import V from "classnames";
+const x = 5, l = C("rating"), A = (n) => {
+  const {
+    size: i = "medium",
+    className: c,
+    max: s = x,
+    readonly: u = !1,
+    defaultValue: M,
+    onChange: P,
+    value: y,
+    ...g
+  } = n, [t, p] = v(n, {
+    trigger: "onChange",
+    valuePropName: "value",
+    defaultValuePropName: "defaultValue"
+  }), m = d(() => {
+    const e = Math.max(Math.floor(s), 0);
+    if (e <= 0)
+      return [];
+    const r = (o) => {
+      if (o + 1 <= t)
+        return 1;
+      const a = o + 1 - t;
+      return a > 1 ? 0 : 1 - a;
+    };
+    return Array.from({ length: e }, (o, a) => ({
+      value: r(a)
+    }));
+  }, [t, s]), h = (e) => {
+    u || p(e + 1);
+  };
+  return /* @__PURE__ */ f(
+    "div",
+    {
+      className: V(
+        l,
+        {
+          [`${l}--readonly`]: u,
+          [`${l}--${i}`]: !0
+        },
+        c
+      ),
+      ...g,
+      children: m.length ? m.map((e, r) => /* @__PURE__ */ f(
+        N,
+        {
+          value: e.value,
+          onClick: () => h(r)
+        },
+        r
+      )) : null
+    }
+  );
+};
+export {
+  A as Rating
+};

package/dist/components/rating/star.js

@@ -0,0 +1,22 @@
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { getPrefixClassName as h } from "../../utils/classname.js";
+import { useId as l } from "react";
+const e = h("rating"), p = ({ value: a = 0, ...r }) => {
+  const c = Math.max(Math.min(a, 1), 0) * 100, i = l(), s = "M21.2849 7.66933C21.1676 7.308 20.8543 7.044 20.4783 6.98933L14.3183 6.09467L11.5636 0.512C11.2276 -0.170667 10.1063 -0.170667 9.77025 0.512L7.01559 6.09333L0.855586 6.988C0.479586 7.04267 0.166253 7.30667 0.0489193 7.668C-0.068414 8.02933 0.0289192 8.428 0.302253 8.69333L4.75959 13.0373L3.70625 19.172C3.64225 19.548 3.79559 19.9267 4.10359 20.1507C4.41159 20.3733 4.82092 20.4027 5.15692 20.2267L10.6663 17.3293L16.1756 20.2267C16.3223 20.304 16.4809 20.3413 16.6409 20.3413C16.8476 20.3413 17.0543 20.2773 17.2289 20.1507C17.5369 19.9267 17.6916 19.548 17.6263 19.172L16.5729 13.0373L21.0303 8.69333C21.3036 8.428 21.4009 8.02933 21.2836 7.668L21.2849 7.66933Z";
+  return /* @__PURE__ */ t("span", { className: `${e}__icon`, ...r, children: /* @__PURE__ */ n("svg", { width: "100%", height: "100%", viewBox: "0 0 22 21", fill: "none", children: [
+    /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: i, children: /* @__PURE__ */ t("path", { d: s }) }) }),
+    /* @__PURE__ */ t("path", { className: `${e}__icon-empty`, d: s }),
+    /* @__PURE__ */ t(
+      "rect",
+      {
+        className: `${e}__icon-filled`,
+        width: `${c}%`,
+        height: "100%",
+        clipPath: `url(#${i})`
+      }
+    )
+  ] }) });
+};
+export {
+  p as Star
+};

package/dist/components/search-field/search-field.js

@@ -0,0 +1,40 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as n } from "react";
+import { useControllableValue as t } from "ahooks";
+import { getPrefixClassName as s } from "../../utils/classname.js";
+import { TextField as c } from "../text-field/text-field.js";
+import m from "classnames";
+const f = s("text-field"), N = (e) => {
+  const [o, a] = t(e, {
+    trigger: "onChange",
+    valuePropName: "value"
+  }), r = n(null);
+  return /* @__PURE__ */ i(
+    c,
+    {
+      ref: r,
+      leadingIcon: {
+        name: "magnifier",
+        size: 20,
+        color: "alias-object-secondary"
+      },
+      loadingType: "search",
+      ...e,
+      className: m(f, e.className),
+      trailingIcon: o ? {
+        name: "circle-xmark",
+        type: "fill",
+        size: 20,
+        color: "alias-object-secondary"
+      } : void 0,
+      onTrailingIconClick: (l) => {
+        l.preventDefault(), l.stopPropagation(), a(""), r?.current?.focus();
+      },
+      value: o,
+      onChange: a
+    }
+  );
+};
+export {
+  N as SearchField
+};

package/dist/components/section/section-content.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import { getPrefixClassName as s } from "../../utils/classname.js";
+import r from "classnames";
+const m = s("section-content"), c = ({
+  className: t,
+  ...e
+}) => /* @__PURE__ */ o("div", { className: r(m, t), ...e });
+export {
+  c as SectionContent
+};

package/dist/components/section/section-title.js

@@ -0,0 +1,32 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { getPrefixClassName as d } from "../../utils/classname.js";
+import { renderIcon as o } from "../icon/icon.js";
+import { Typography as N } from "../typography/typography.js";
+import f from "classnames";
+const e = d("section-title"), j = ({
+  className: a,
+  leftIcon: i,
+  onLeftIconClick: l,
+  rightIcon: s,
+  onRightIconClick: c,
+  right: m,
+  title: t,
+  ...n
+}) => /* @__PURE__ */ p("div", { className: f(e, a), ...n, children: [
+  !!i && /* @__PURE__ */ r("div", { className: `${e}__icon`, onClick: l, children: o(i) }),
+  /* @__PURE__ */ r(
+    N,
+    {
+      size: "large",
+      weight: "regular",
+      color: "alias-object-primary",
+      className: `${e}__title`,
+      children: t
+    }
+  ),
+  !!s && /* @__PURE__ */ r("div", { className: `${e}__icon`, onClick: c, children: o(s) }),
+  m
+] });
+export {
+  j as SectionTitle
+};

package/dist/components/section/section.js

@@ -0,0 +1,21 @@
+import { jsx as m } from "react/jsx-runtime";
+import { getPrefixClassName as a } from "../../utils/classname.js";
+import c from "classnames";
+const e = a("section"), f = ({
+  className: o,
+  space: r = !0,
+  shape: s = "rounded",
+  ...t
+}) => /* @__PURE__ */ m(
+  "section",
+  {
+    className: c(e, o, {
+      [`${e}--space`]: r,
+      [`${e}--shape-${s}`]: s
+    }),
+    ...t
+  }
+);
+export {
+  f as Section
+};

package/dist/components/seo/seo.js

@@ -0,0 +1,18 @@
+import "react";
+import { useDidHide as o, useDidShow as i } from "@v-miniapp/router";
+const t = "vsf-metadata", l = ({ metadata: n }) => {
+  const d = JSON.stringify(n, null, 2);
+  return o(() => {
+    const e = document.getElementById(t);
+    e && (e.innerHTML = "");
+  }), i(() => {
+    let e = document.getElementById(
+      t
+    );
+    e || (e = document.createElement("script"), e.id = t, e.type = "application/ld+json", document.head.appendChild(e)), e.textContent = d;
+  }), null;
+};
+export {
+  l as Seo,
+  t as SeoMetadataId
+};

package/dist/components/sheet/sheet-body.js

@@ -0,0 +1,25 @@
+import { jsx as a } from "react/jsx-runtime";
+import { getPrefixClassName as m } from "../../utils/classname.js";
+import i from "classnames";
+const e = m("sheet-body"), l = ({
+  className: s,
+  children: o,
+  horizontalSpace: r = !0,
+  ...t
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: i(
+      e,
+      {
+        [`${e}--horizontal-space`]: r
+      },
+      s
+    ),
+    ...t,
+    children: o
+  }
+);
+export {
+  l as SheetBody
+};

package/dist/components/sheet/sheet-footer.js

@@ -0,0 +1,11 @@
+import { jsx as s } from "react/jsx-runtime";
+import { getPrefixClassName as t } from "../../utils/classname.js";
+import m from "classnames";
+const a = t("sheet-footer"), c = ({
+  children: e,
+  className: o,
+  ...r
+}) => /* @__PURE__ */ s("div", { className: m(a, o), ...r, children: e });
+export {
+  c as SheetFooter
+};

package/dist/components/sheet/sheet-header.js

@@ -0,0 +1,52 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { getPrefixClassName as h } from "../../utils/classname.js";
+import { Button as m } from "../button/button.js";
+import { Typography as p } from "../typography/typography.js";
+import u from "classnames";
+const a = h("sheet-header"), _ = ({
+  title: i,
+  backIcon: r,
+  onBackClick: s,
+  closeIcon: t,
+  onCloseClick: o,
+  className: l,
+  ...n
+}) => /* @__PURE__ */ d("div", { className: u(a, l), ...n, children: [
+  !!r && /* @__PURE__ */ e(
+    m,
+    {
+      shape: "rounded",
+      size: "medium",
+      type: "ghost",
+      theme: "neutral",
+      leadingIcon: r === !0 ? { name: "chevron-left" } : r,
+      onClick: s
+    }
+  ),
+  !r && /* @__PURE__ */ e("div", { className: `${a}__placeholder-icon` }),
+  /* @__PURE__ */ e(
+    p,
+    {
+      component: "h3",
+      size: "large",
+      weight: "regular",
+      className: `${a}__title`,
+      children: i
+    }
+  ),
+  !t && /* @__PURE__ */ e("div", { className: `${a}__placeholder-icon` }),
+  !!t && /* @__PURE__ */ e(
+    m,
+    {
+      shape: "rounded",
+      size: "medium",
+      type: "ghost",
+      theme: "neutral",
+      leadingIcon: t === !0 ? { name: "xmark" } : t,
+      onClick: o
+    }
+  )
+] });
+export {
+  _ as SheetHeader
+};

package/dist/components/sheet/sheet.js

@@ -0,0 +1,72 @@
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import { getPrefixClassName as S } from "../../utils/classname.js";
+import { useState as m, useRef as l, useEffect as u, forwardRef as x } from "react";
+import { createPortal as d } from "react-dom";
+import { useDidShow as y, useDidHide as _ } from "@v-miniapp/router";
+import { appStore as a } from "../app/app.store.js";
+import f from "classnames";
+const i = S("sheet"), c = x(
+  ({
+    children: e,
+    className: t,
+    open: r,
+    overlay: n = "default",
+    onBackdropClick: s,
+    ...p
+  }, h) => /* @__PURE__ */ b(
+    "div",
+    {
+      ref: h,
+      className: f(
+        i,
+        { [`${i}--open`]: r },
+        t
+      ),
+      ...p,
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: f(`${i}__overlay`, {
+              [`${i}__overlay--blur`]: n === "blur"
+            }),
+            onClick: s
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: `${i}__box`, children: e })
+      ]
+    }
+  )
+), g = ({ open: e, ...t }) => {
+  const [r, n] = m(e), s = l(null);
+  return y(() => {
+    e && n(e);
+  }), _(() => {
+    n(!1);
+  }), u(() => {
+    n(e);
+  }, [e]), u(() => {
+    r && s.current && document.body.appendChild(s.current);
+  }, [r]), d(
+    /* @__PURE__ */ o(c, { ref: s, open: r, ...t }),
+    document.body
+  );
+}, v = ({
+  open: e,
+  ...t
+}) => {
+  const [r, n] = m(e), s = l(null);
+  return u(() => () => {
+    n(!1);
+  }, []), u(() => {
+    n(e);
+  }, [e]), u(() => {
+    r && s.current && document.body.appendChild(s.current);
+  }, [r]), d(
+    /* @__PURE__ */ o(c, { ref: s, open: r, ...t }),
+    document.body
+  );
+}, O = ({ portal: e = !0, ...t }) => e && a.isUsingApp && a.isUsingRouter ? /* @__PURE__ */ o(g, { ...t }) : e && (!a.isUsingApp || !a.isUsingRouter) ? /* @__PURE__ */ o(v, { ...t }) : /* @__PURE__ */ o(c, { ...t });
+export {
+  O as Sheet
+};