@v-miniapp/ui-react 1.0.60 → 1.0.71

package/dist/components/input-wrapper/input-wrapper.js

@@ -0,0 +1,153 @@
+import { jsxs as l, jsx as s, Fragment as L } from "react/jsx-runtime";
+import { getPrefixClassName as T } from "../../utils/classname.js";
+import b from "../../_virtual/pick.js";
+import j from "../../_virtual/omit.js";
+import { Label as F } from "../label/label.js";
+import { renderIcon as v, Icon as g } from "../icon/icon.js";
+import { Typography as x } from "../typography/typography.js";
+import P from "classnames";
+const i = T("input-wrapper");
+function J(n) {
+  const c = b(n, [
+    "shape",
+    "disabled",
+    "success",
+    "successMessage",
+    "error",
+    "errorMessage",
+    "label",
+    "leadingIcon",
+    "onLeadingIconClick",
+    "trailingIcon",
+    "onTrailingIconClick",
+    "prefix",
+    "suffix",
+    "className"
+  ]), e = j(n, [
+    "shape",
+    "disabled",
+    "success",
+    "successMessage",
+    "error",
+    "errorMessage",
+    "label",
+    "leadingIcon",
+    "onLeadingIconClick",
+    "trailingIcon",
+    "onTrailingIconClick",
+    "prefix",
+    "suffix",
+    "className"
+  ]);
+  return { wrapper: c, props: e };
+}
+const K = ({
+  shape: n = "rounded",
+  disabled: c,
+  loadingNode: e,
+  success: a,
+  successMessage: t,
+  error: r,
+  errorMessage: p,
+  className: k,
+  label: o,
+  leadingIcon: _,
+  onLeadingIconClick: C,
+  trailingIcon: u,
+  onTrailingIconClick: I,
+  prefix: f,
+  suffix: d,
+  isFocus: N,
+  children: w,
+  align: $,
+  bottomInput: h,
+  onInputClick: y,
+  ...z
+}) => (r = !e && (r && !c || !!p), a = !e && !r && !c && (a || !!t), /* @__PURE__ */ l(
+  "div",
+  {
+    ...z,
+    className: P(i, k, {
+      [`${i}--${$}`]: $,
+      [`${i}--${n}`]: n,
+      [`${i}--disabled`]: c,
+      [`${i}--success`]: a,
+      [`${i}--error`]: r,
+      [`${i}--focus`]: N
+    }),
+    children: [
+      !!o && /* @__PURE__ */ s(F, { ...o, loading: !!e || o.loading }),
+      /* @__PURE__ */ l("div", { className: `${i}__input`, onClick: y, children: [
+        /* @__PURE__ */ l("div", { className: `${i}__input__body`, children: [
+          !!e && e,
+          !e && /* @__PURE__ */ l(L, { children: [
+            !!f && /* @__PURE__ */ s("div", { className: `${i}__input__prefix`, children: f }),
+            /* @__PURE__ */ l("div", { className: `${i}__input__inner`, children: [
+              !!_ && /* @__PURE__ */ s(
+                "div",
+                {
+                  className: `${i}__input__leading-icon`,
+                  onClick: (m) => C?.(m),
+                  children: v(_)
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: `${i}__input__child`, children: w }),
+              !!r && /* @__PURE__ */ s(
+                g,
+                {
+                  name: "triangle-warning",
+                  size: 20,
+                  color: "alias-support-negative",
+                  type: "fill"
+                }
+              ),
+              !!a && /* @__PURE__ */ s(
+                g,
+                {
+                  name: "circle-check",
+                  size: 20,
+                  color: "alias-support-positive",
+                  type: "fill"
+                }
+              ),
+              !!u && /* @__PURE__ */ s(
+                "div",
+                {
+                  className: `${i}__input__trailing-icon`,
+                  onClick: (m) => I?.(m),
+                  children: v(u)
+                }
+              )
+            ] }),
+            !!d && /* @__PURE__ */ s("div", { className: `${i}__input__suffix`, children: d })
+          ] })
+        ] }),
+        !e && !!h && /* @__PURE__ */ s("div", { className: `${i}__input__footer`, children: h })
+      ] }),
+      !e && r && !!p && /* @__PURE__ */ s(
+        x,
+        {
+          size: "small",
+          weight: 400,
+          color: "alias-support-negative",
+          className: `${i}__error-text`,
+          children: p
+        }
+      ),
+      !e && a && !!t && /* @__PURE__ */ s(
+        x,
+        {
+          size: "small",
+          weight: 400,
+          color: "alias-support-positive",
+          className: `${i}__success-text`,
+          children: t
+        }
+      )
+    ]
+  }
+));
+export {
+  K as InputWrapper,
+  J as getInputProps
+};

package/dist/components/label/label.js

@@ -0,0 +1,58 @@
+import { jsxs as a, Fragment as n, jsx as s } from "react/jsx-runtime";
+import { getPrefixClassName as _ } from "../../utils/classname.js";
+import { Skeleton as c } from "../skeleton/skeleton.js";
+import { Typography as m } from "../typography/typography.js";
+import { renderIcon as N } from "../icon/icon.js";
+import f from "classnames";
+const e = _("label"), u = ({
+  text: t,
+  helperText: l,
+  disabled: o,
+  required: h,
+  icon: p,
+  className: d,
+  loading: i,
+  ...r
+}) => /* @__PURE__ */ a(
+  "label",
+  {
+    ...r,
+    className: f(e, d, {
+      [`${e}--disabled`]: o
+    }),
+    children: [
+      i && /* @__PURE__ */ a(n, { children: [
+        /* @__PURE__ */ s("span", { className: `${e}__content--loading`, children: /* @__PURE__ */ s(c, { width: 80, height: 14, shape: "pill" }) }),
+        !!l && /* @__PURE__ */ s("span", { className: `${e}__helper--loading`, children: /* @__PURE__ */ s(c, { width: 40, height: 12, shape: "pill" }) })
+      ] }),
+      !i && /* @__PURE__ */ a(n, { children: [
+        /* @__PURE__ */ a("span", { className: `${e}__content`, children: [
+          h && /* @__PURE__ */ s("span", { className: `${e}__required`, children: "*" }),
+          /* @__PURE__ */ s(
+            m,
+            {
+              component: "span",
+              size: "small",
+              weight: 400,
+              className: `${e}__text`,
+              children: t || r.children
+            }
+          ),
+          /* @__PURE__ */ s("span", { className: `${e}__icon`, children: N(p) })
+        ] }),
+        !!l && /* @__PURE__ */ s(
+          m,
+          {
+            size: "x-small",
+            weight: 400,
+            className: `${e}__helper`,
+            children: l
+          }
+        )
+      ] })
+    ]
+  }
+);
+export {
+  u as Label
+};

package/dist/components/layout/page-loading.js

@@ -0,0 +1,39 @@
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { Icon as i } from "../icon/icon.js";
+const l = ({ color: t }) => /* @__PURE__ */ e(
+  "div",
+  {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: "rgba(255, 255, 255, 0.8)",
+      backdropFilter: "blur(4px)",
+      zIndex: 999
+    },
+    children: [
+      /* @__PURE__ */ o(i, { name: "loader", color: t, animation: "spin", size: 20 }),
+      /* @__PURE__ */ o(
+        "div",
+        {
+          style: {
+            marginTop: 12,
+            fontSize: 14,
+            color: "#666",
+            fontWeight: 500
+          },
+          children: "Loading..."
+        }
+      )
+    ]
+  }
+);
+export {
+  l as PageLoading
+};

package/dist/components/layout/page.js

@@ -0,0 +1,103 @@
+import { jsx as o, jsxs as _ } from "react/jsx-runtime";
+import { getPrefixClassName as v } from "../../utils/classname.js";
+import { useMemo as l, useRef as C } from "react";
+import { useTranslate as j } from "@v-miniapp/locale";
+import R from "../../_virtual/throttle.js";
+import { PullToRefresh as S } from "../pull-to-refresh/pull-to-refresh.js";
+import c from "classnames";
+import { VisibilitySensor as w } from "../visibility-sensor/visibility-sensor.js";
+const t = v("page"), q = ({
+  hasSpacing: f = !0,
+  headerOffset: x = !1,
+  safeAreaTopOffset: g = !1,
+  safeAreaBottomOffset: T = !1,
+  className: p,
+  contentClassName: h,
+  children: u,
+  pullToRefresh: e,
+  onEndReached: n,
+  onEndReachedThreshold: d = 50,
+  onPageScroll: i,
+  pageScrollOptions: s,
+  ...b
+}) => {
+  const r = j(), N = l(() => ({
+    pullingText: e?.pullingText || r("pullToRefresh.pullingText"),
+    canReleaseText: e?.canReleaseText || r("pullToRefresh.canReleaseText"),
+    refreshingText: e?.refreshingText || r("pullToRefresh.refreshingText"),
+    completeText: e?.completeText || r("pullToRefresh.completeText")
+  }), [
+    e?.canReleaseText,
+    e?.completeText,
+    e?.pullingText,
+    e?.refreshingText,
+    r
+  ]), a = C(i);
+  a.current = i;
+  const $ = l(() => R(
+    (m) => {
+      const P = m.target;
+      a.current?.(P, m);
+    },
+    s?.wait ?? 100,
+    s
+  ), [JSON.stringify(s)]), y = () => /* @__PURE__ */ _(
+    "div",
+    {
+      className: c(
+        `${t}__content`,
+        {
+          [`${t}__content--spacing`]: f
+        },
+        h
+      ),
+      children: [
+        u,
+        !!n && /* @__PURE__ */ o(
+          w,
+          {
+            onActive: n,
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: d + 16,
+              zIndex: -1,
+              visibility: "hidden",
+              maxHeight: "100%"
+            }
+          }
+        )
+      ]
+    }
+  );
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: c(
+        t,
+        {
+          [`${t}--header-offset`]: x,
+          [`${t}--safe-area-top-offset`]: g,
+          [`${t}--safe-area-bottom-offset`]: T
+        },
+        p
+      ),
+      ...b,
+      onScroll: $,
+      children: /* @__PURE__ */ o(
+        S,
+        {
+          disabled: !e?.onRefresh,
+          ...e,
+          ...N,
+          children: y()
+        }
+      )
+    }
+  );
+};
+export {
+  q as Page
+};

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

@@ -0,0 +1,36 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { getPrefixClassName as h } from "../../utils/classname.js";
+import { Typography as d } from "../typography/typography.js";
+import N from "classnames";
+const s = h("list-item"), $ = ({
+  className: t,
+  label: i,
+  description: a,
+  prefix: r,
+  suffix: l,
+  leadContent: c,
+  trailContent: m,
+  divider: n,
+  ..._
+}) => /* @__PURE__ */ o("div", { className: N(s, t), ..._, children: [
+  !!r && /* @__PURE__ */ e("div", { className: `${s}__prefix`, children: r }),
+  !!c && /* @__PURE__ */ e("div", { className: `${s}__lead-content`, children: c }),
+  /* @__PURE__ */ o("div", { className: `${s}__content`, children: [
+    !!i && /* @__PURE__ */ e(d, { size: "small", weight: "medium", color: "alias-object-primary", children: i }),
+    !!a && /* @__PURE__ */ e(
+      d,
+      {
+        size: "x-small",
+        weight: "regular",
+        color: "alias-object-secondary",
+        children: a
+      }
+    )
+  ] }),
+  !!l && /* @__PURE__ */ e("div", { className: `${s}__suffix`, children: l }),
+  !!m && /* @__PURE__ */ e("div", { className: `${s}__trail-content`, children: m }),
+  n && /* @__PURE__ */ e("div", { className: `${s}__divider` })
+] });
+export {
+  $ as ListItem
+};

package/dist/components/navigation-bar/navigation-bar.d.ts

@@ -1,5 +1,5 @@
 import { IColor } from '../../types/colors';
-import { FC, PropsWithChildren, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { IIconProps } from '../icon';
 export type INavigationBarTransparent = 'auto' | 'always' | 'none';
 export type INavigationBarTheme = 'default' | 'inverse';
@@ -23,6 +23,3 @@ export type INavigationBarProps = {
     locationKey?: string;
 };
 export declare const NavigationBar: FC<INavigationBarProps>;
-export declare const NavigationBarPage: FC<PropsWithChildren<INavigationBarProps> & {
-    hidden?: boolean;
-}>;

package/dist/components/navigation-bar/navigation-bar.js

@@ -0,0 +1,106 @@
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import { useRef as b, useMemo as C, useCallback as k, useEffect as w } from "react";
+import { getPrefixClassName as q } from "../../utils/classname.js";
+import { getColor as z } from "../../utils/colors.js";
+import { getPageId as M } from "../app/page-layout/index.js";
+import { Icon as A, renderIcon as f } from "../icon/icon.js";
+import D from "classnames";
+const e = q("navigation-bar"), U = ({
+  className: E,
+  scrollElementSelector: m,
+  theme: i = "default",
+  color: u,
+  transparent: a = "none",
+  title: S,
+  backIcon: s,
+  onBackClick: x,
+  leftIcon: d,
+  onLeftIconClick: B,
+  left: R,
+  rightIcon: v,
+  onRightIconClick: h,
+  right: j,
+  divider: L,
+  locationKey: l,
+  scrollThreshold: c = 100
+}) => {
+  const g = b(null), O = b(-1), n = C(() => m || "#" + M(l || ""), [m, l]), p = k(() => typeof n == "string" ? document.querySelector(n) : typeof n == "function" ? n() : n, [n]), N = k(
+    (r) => {
+      const t = r.scrollTop, T = O.current, $ = t > c ? 1 : t < 0 ? 0 : t / c;
+      T !== $ && g.current?.style.setProperty(
+        "--navigation-bar-opacity",
+        $.toString()
+      );
+    },
+    [c]
+  );
+  w(() => {
+    i === "default" ? window.vsf?.setNavigationBar({
+      theme: "dark"
+    }) : i === "inverse" && window.vsf?.setNavigationBar({
+      theme: "light"
+    });
+  }, [i]);
+  const _ = C(() => s === !1 ? null : s === !0 ? /* @__PURE__ */ o(A, { name: "chevron-left", size: 24 }) : s, [s]);
+  return w(() => {
+    if (a !== "auto") return;
+    const r = p(), t = () => {
+      r && N(r);
+    };
+    return setTimeout(() => t(), 0), r?.addEventListener("scroll", t), () => {
+      r?.removeEventListener("scroll", t);
+    };
+  }, [a, l, p, N]), /* @__PURE__ */ y(
+    "div",
+    {
+      className: D(
+        e,
+        `${e}--${i}`,
+        {
+          [`${e}--transparent`]: a === "always",
+          [`${e}--divider`]: L
+        },
+        E
+      ),
+      ref: g,
+      style: u ? {
+        "--navigation-bar-background": z(u)
+      } : void 0,
+      children: [
+        /* @__PURE__ */ o("div", { className: `${e}__background` }),
+        /* @__PURE__ */ y("div", { className: `${e}__inner`, children: [
+          !!_ && /* @__PURE__ */ o(
+            "button",
+            {
+              className: `${e}__icon`,
+              onClick: () => x?.(),
+              children: f(_)
+            }
+          ),
+          !!d && /* @__PURE__ */ o(
+            "button",
+            {
+              className: `${e}__icon`,
+              onClick: () => B?.(),
+              children: f(d)
+            }
+          ),
+          R,
+          /* @__PURE__ */ o("div", { className: `${e}__title`, children: S }),
+          v && /* @__PURE__ */ o(
+            "button",
+            {
+              className: `${e}__icon`,
+              onClick: () => h?.(),
+              children: f(v)
+            }
+          ),
+          j
+        ] })
+      ]
+    }
+  );
+};
+export {
+  U as NavigationBar
+};

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

@@ -0,0 +1,162 @@
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { forwardRef as z, useRef as B, useState as P, useImperativeHandle as I, useCallback as d } from "react";
+import { getPrefixClassName as R } from "../../utils/classname.js";
+import { useControllableValue as M } from "ahooks";
+import { Skeleton as $ } from "../skeleton/skeleton.js";
+import { Typography as m } from "../typography/typography.js";
+import _ from "classnames";
+const e = R("number-field"), O = z(
+  (l, n) => {
+    const {
+      length: s = 6,
+      errorMessage: r,
+      label: o,
+      shape: v,
+      disabled: c,
+      className: C,
+      loading: t,
+      masked: w,
+      value: A,
+      defaultValue: D,
+      onChange: H,
+      ...x
+    } = l, u = B(null), [f, g] = P(!1);
+    I(n, () => ({
+      focus: () => u.current?.focus(),
+      blur: () => u.current?.blur()
+    }));
+    const [p, b] = M(l, {
+      defaultValue: "",
+      trigger: "onChange"
+    }), V = d(
+      (N) => {
+        if (t || c) return;
+        const i = N.target.value.replace(/\D/g, "").slice(0, s);
+        b(i);
+      },
+      [t, c, s, b]
+    ), y = d(() => {
+      g(!0);
+    }, []), F = d(() => {
+      g(!1);
+    }, []), j = d(() => {
+      u.current?.focus();
+    }, []), k = (p ?? "").length;
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        ...x,
+        onClick: j,
+        className: _(e, C, {
+          [`${e}--disabled`]: c,
+          [`${e}--error`]: !!r,
+          [`${e}--pill`]: v === "pill",
+          [`${e}--focused`]: f
+        }),
+        children: [
+          !!o && (t ? /* @__PURE__ */ a("div", { className: `${e}__label--loading`, children: /* @__PURE__ */ a($, { width: 80, height: 14, shape: "pill" }) }) : /* @__PURE__ */ a(
+            m,
+            {
+              size: "small",
+              weight: 400,
+              color: "alias-object-primary",
+              className: `${e}__label`,
+              children: o
+            }
+          )),
+          /* @__PURE__ */ h("div", { className: `${e}__inputs`, children: [
+            Array.from({ length: s }).map((N, i) => /* @__PURE__ */ a(
+              S,
+              {
+                value: (p ?? "")[i],
+                masked: w,
+                loading: t,
+                isFocused: f && i === k
+              },
+              i
+            )),
+            /* @__PURE__ */ a(
+              "input",
+              {
+                ref: u,
+                type: "text",
+                inputMode: "numeric",
+                autoComplete: "one-time-code",
+                pattern: "\\d*",
+                value: p ?? "",
+                onChange: V,
+                onFocus: y,
+                onBlur: F,
+                disabled: c || t,
+                className: `${e}__input-actual`,
+                maxLength: s,
+                "aria-label": o
+              }
+            )
+          ] }),
+          r && /* @__PURE__ */ a(
+            m,
+            {
+              size: "small",
+              weight: 400,
+              color: "alias-support-negative",
+              className: `${e}__error-message`,
+              children: r
+            }
+          )
+        ]
+      }
+    );
+  }
+), S = ({
+  value: l,
+  masked: n,
+  loading: s,
+  isFocused: r
+}) => {
+  const o = !l && r && !s;
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      className: _(`${e}__input`, {
+        [`${e}__input--focused`]: r
+      }),
+      children: [
+        !l && (s ? /* @__PURE__ */ a("div", { className: `${e}__placeholder--loading`, children: /* @__PURE__ */ a($, { width: 18, height: 12, shape: "pill" }) }) : /* @__PURE__ */ a(
+          m,
+          {
+            size: "base",
+            weight: 400,
+            color: "alias-object-placeholder",
+            className: `${e}__placeholder`,
+            children: "-"
+          }
+        )),
+        l && n && /* @__PURE__ */ a("div", { className: `${e}__value--masked` }),
+        l && !n && /* @__PURE__ */ a(
+          m,
+          {
+            component: "span",
+            size: "base",
+            weight: 400,
+            color: "alias-object-primary",
+            className: `${e}__value`,
+            children: l
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: _(`${e}__pointer`, {
+              [`${e}__pointer--visible`]: o,
+              [`${e}__pointer--hidden`]: !o
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  O as NumberField
+};