@v-miniapp/ui-react 1.0.59 → 1.0.71

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,50 @@
+import { jsx as l } from "react/jsx-runtime";
+import { getPrefixClassName as i } from "../../utils/classname.js";
+import m from "classnames";
+const r = i("skeleton"), n = ({
+  animated: e = !0,
+  className: s,
+  width: t,
+  height: a,
+  shape: o = "square",
+  ...c
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    ...c,
+    className: m(
+      r,
+      `${r}--${o}`,
+      { [`${r}--animated`]: e },
+      s
+    ),
+    style: {
+      ...t ? { "--width": t + (typeof t == "number" ? "px" : "") } : {},
+      ...a ? { "--height": a + (typeof a == "number" ? "px" : "") } : {}
+    }
+  }
+), N = (e) => /* @__PURE__ */ l(
+  n,
+  {
+    ...e,
+    className: m(`${r}--title`, e.className)
+  }
+), x = ({
+  lineCount: e = 3,
+  ...s
+}) => /* @__PURE__ */ l("div", { children: new Array(e).fill(0).map((t, a) => /* @__PURE__ */ l(
+  n,
+  {
+    ...s,
+    className: m(
+      `${r}__paragraph-line`,
+      s.className
+    )
+  },
+  a
+)) });
+export {
+  n as Skeleton,
+  x as SkeletonParagraph,
+  N as SkeletonTitle
+};

package/dist/components/switch/switch.js

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

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

@@ -0,0 +1,130 @@
+import { jsxs as q, jsx as $ } from "react/jsx-runtime";
+import { useRef as u, useState as D, useCallback as k, useLayoutEffect as F, useEffect as p } from "react";
+import { getPrefixClassName as G } from "../../utils/classname.js";
+import { TabBarItem as H } from "./tab.js";
+import { useControllableValue as J } from "ahooks";
+import K from "classnames";
+const N = G("tab-bar"), tt = (l) => {
+  const [n, z] = J(l, {
+    trigger: "onItemClick",
+    valuePropName: "activeId",
+    defaultValuePropName: "defaultActiveId"
+  }), { items: I, className: V, tabWidth: d } = l, T = !l.theme || l.theme === "default" ? "brand" : l.theme, C = u(I);
+  C.current = I;
+  const f = u(null), i = u(/* @__PURE__ */ new Map()), P = u(!0), [h, x] = D({ left: 0, width: 0 }), o = k(() => {
+    if (!n || !f.current) {
+      x({ left: 0, width: 0 });
+      return;
+    }
+    const t = i.current.get(n);
+    if (!t) {
+      x({ left: 0, width: 0 });
+      return;
+    }
+    const e = t.offsetLeft, r = t.offsetWidth;
+    x({
+      left: e,
+      width: r
+    });
+  }, [n]), v = k(
+    (t = "smooth") => {
+      const e = C.current;
+      if (!n || !f.current) return;
+      const r = i.current.get(n);
+      if (!r) return;
+      const a = f.current, L = a.clientWidth, S = a.scrollLeft, w = r.offsetLeft, A = r.offsetWidth, B = w + A, _ = S, y = S + L, M = w >= _ && B <= y, m = e.findIndex((s) => s.id === n), g = m === e.length - 1;
+      if (M && !g && m >= 0) {
+        const s = e[m + 1]?.id, c = s ? i.current.get(s) : null;
+        if (c) {
+          const W = c.offsetLeft, E = c.offsetWidth, b = W + E * 0.5;
+          if (b <= y)
+            return;
+          const R = b - L;
+          a.scrollTo({
+            left: Math.max(0, R),
+            behavior: t
+          });
+          return;
+        }
+      }
+      if (!M) {
+        if (!g && m >= 0) {
+          const s = e[m + 1]?.id, c = s ? i.current.get(s) : null;
+          if (c) {
+            const W = c.offsetLeft, E = c.offsetWidth, R = W + E * 0.5 - L;
+            a.scrollTo({
+              left: Math.max(0, R),
+              behavior: t
+            });
+            return;
+          }
+        }
+        a.scrollTo({
+          left: Math.max(0, w),
+          behavior: t
+        });
+        return;
+      }
+    },
+    [n]
+  );
+  F(() => {
+    o();
+  }, [o, d]), p(() => {
+    if (!n) return;
+    const t = setTimeout(() => {
+      P.current ? (v("instant"), P.current = !1) : v("smooth");
+    }, 100);
+    return () => clearTimeout(t);
+  }, [v, n]), p(() => {
+    const t = () => {
+      o();
+    };
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, [o]), p(() => {
+    const t = f.current;
+    if (!t) return;
+    const e = () => {
+      o();
+    };
+    return t.addEventListener("scroll", e, { passive: !0 }), () => t.removeEventListener("scroll", e);
+  }, [o]);
+  const j = (t, e) => {
+    e ? i.current.set(t, e) : i.current.delete(t);
+  };
+  return /* @__PURE__ */ q(
+    "div",
+    {
+      ref: f,
+      className: K(N, V, {
+        [`${N}--theme-${T}`]: T
+      }),
+      children: [
+        h.width > 0 && /* @__PURE__ */ $(
+          "div",
+          {
+            className: `${N}__indicator`,
+            style: {
+              left: `${h.left}px`,
+              width: `${h.width}px`
+            }
+          }
+        ),
+        I.map((t, e) => /* @__PURE__ */ $(
+          H,
+          {
+            ref: (r) => j(t.id, r),
+            onItemClick: () => z(t, e),
+            active: t.id === n,
+            style: d ? { width: d, minWidth: d } : {},
+            ...t
+          },
+          t.id
+        ))
+      ]
+    }
+  );
+};
+export {
+  tt as TabBar
+};

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

@@ -0,0 +1,55 @@
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { forwardRef as _ } from "react";
+import { getPrefixClassName as h } from "../../utils/classname.js";
+import { BadgeContainer as N, Badge as a } from "../badge/badge.js";
+import x from "classnames";
+import { renderIcon as C } from "../icon/icon.js";
+import { Typography as $ } from "../typography/typography.js";
+const t = h("tab-bar__item"), k = _(
+  ({ className: i, id: b, active: m, icon: o, name: c, badge: r, onItemClick: l, ...p }, f) => {
+    const d = () => {
+      if (!o) return null;
+      const e = /* @__PURE__ */ n("span", { className: `${t}__icon`, children: C(o) });
+      return r ? /* @__PURE__ */ s(N, { children: [
+        e,
+        /* @__PURE__ */ n(a, { ...r === !0 ? {} : r })
+      ] }) : e;
+    }, u = () => {
+      const e = /* @__PURE__ */ n(
+        $,
+        {
+          component: "span",
+          size: "base",
+          className: `${t}__label`,
+          children: c
+        }
+      );
+      return !r || o ? e : /* @__PURE__ */ s("div", { className: `${t}__label-with-badge`, children: [
+        e,
+        /* @__PURE__ */ n(a, { ...r === !0 ? {} : r })
+      ] });
+    };
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: f,
+        className: x(
+          t,
+          {
+            [`${t}--active`]: m
+          },
+          i
+        ),
+        onClick: () => l?.(),
+        ...p,
+        children: [
+          d(),
+          u()
+        ]
+      }
+    );
+  }
+);
+export {
+  k as TabBarItem
+};

package/dist/components/text-area/text-area.js

@@ -0,0 +1,75 @@
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { getPrefixClassName as f } from "../../utils/classname.js";
+import { forwardRef as d, useState as x, useRef as N, useImperativeHandle as C } from "react";
+import { useControllableValue as _ } from "ahooks";
+import { getInputProps as b, InputWrapper as v } from "../input-wrapper/input-wrapper.js";
+import u from "classnames";
+import { Skeleton as m } from "../skeleton/skeleton.js";
+import { Typography as w } from "../typography/typography.js";
+const a = f("text-area"), k = d(
+  (p, c) => {
+    const { wrapper: s, props: e } = b(p), [h, l] = x(e.autoFocus), o = N(null), [n, g] = _(e, {
+      trigger: "onChange",
+      valuePropName: "value"
+    });
+    return C(c, () => ({
+      focus: () => o.current?.focus?.(),
+      blur: () => o.current?.blur?.()
+    })), /* @__PURE__ */ r(
+      v,
+      {
+        ...s,
+        className: u(a, s.className),
+        align: "start",
+        isFocus: h,
+        onClick: () => o.current?.focus(),
+        bottomInput: e.maxLength ? /* @__PURE__ */ i(
+          w,
+          {
+            size: "x-small",
+            weight: 400,
+            color: "alias-object-secondary",
+            className: `${a}__count`,
+            children: [
+              "(",
+              n?.length || 0,
+              "/",
+              e.maxLength,
+              ")"
+            ]
+          }
+        ) : null,
+        loadingNode: e.loading && /* @__PURE__ */ i("div", { className: `${a}__loading`, children: [
+          /* @__PURE__ */ r(m, { width: 128, height: 12, shape: "pill" }),
+          /* @__PURE__ */ r(m, { width: 40, height: 12, shape: "pill" })
+        ] }),
+        children: /* @__PURE__ */ r(
+          "textarea",
+          {
+            rows: 3,
+            ...e,
+            maxLength: e.maxLength,
+            value: n,
+            onChange: (t) => g?.(t.target.value),
+            disabled: s.disabled,
+            onFocus: (t) => {
+              l(!0), e.onFocus?.(t);
+            },
+            onBlur: (t) => {
+              l(!1), e.onBlur?.(t);
+            },
+            ref: o,
+            className: u(
+              `${a}__input`,
+              { [`${a}__input--auto-height`]: e.autoHeight },
+              e.inputClassName
+            )
+          }
+        )
+      }
+    );
+  }
+);
+export {
+  k as TextArea
+};

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

@@ -0,0 +1,63 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { getPrefixClassName as d } from "../../utils/classname.js";
+import { forwardRef as m, useState as f, useRef as g, useImperativeHandle as h } from "react";
+import x from "../../_virtual/omit.js";
+import { getInputProps as N, InputWrapper as F } from "../input-wrapper/input-wrapper.js";
+import C from "classnames";
+import { Skeleton as p } from "../skeleton/skeleton.js";
+const n = d("text-field"), b = m(
+  (t, i) => {
+    const { wrapper: a, props: e } = N(t), [u, l] = f(e.autoFocus), s = g(null);
+    return h(i, () => ({
+      focus: () => s.current?.focus?.(),
+      blur: () => s.current?.blur?.()
+    })), /* @__PURE__ */ r(
+      F,
+      {
+        ...a,
+        isFocus: u,
+        onClick: () => s.current?.focus(),
+        loadingNode: e.loading && /* @__PURE__ */ c(
+          "div",
+          {
+            className: `${n}__loading ${n}__loading--${e.loadingType}`,
+            children: [
+              /* @__PURE__ */ r(
+                p,
+                {
+                  width: e.loadingType === "search" ? 24 : 40,
+                  height: e.loadingType === "search" ? 24 : 13,
+                  shape: "pill"
+                }
+              ),
+              /* @__PURE__ */ r(p, { width: 128, height: 13, shape: "pill" })
+            ]
+          }
+        ),
+        children: /* @__PURE__ */ r(
+          "input",
+          {
+            ...x(e, ["loadingType"]),
+            onChange: (o) => e.onChange?.(o.target.value),
+            disabled: a.disabled,
+            onFocus: (o) => {
+              l(!0), e.onFocus?.(o);
+            },
+            onBlur: (o) => {
+              l(!1), e.onBlur?.(o);
+            },
+            ref: s,
+            className: C(n, e.inputClassName)
+          }
+        )
+      }
+    );
+  }
+), R = ({
+  countryCode: t,
+  ...i
+}) => /* @__PURE__ */ r(b, { type: "tel", ...i, prefix: t });
+export {
+  R as PhoneNumberField,
+  b as TextField
+};

package/dist/components/toast/toast-provider.js

@@ -0,0 +1,45 @@
+import { jsxs as a, Fragment as l, jsx as t } from "react/jsx-runtime";
+import { getPrefixClassName as m } from "../../utils/classname.js";
+import "react";
+import { createPortal as r } from "react-dom";
+import { Toast as e } from "./toast.js";
+import { AnimatePresence as d, motion as p } from "framer-motion";
+import { useToastStore as f } from "./toast.store.js";
+const c = m("toast-provider"), s = ({ position: i }) => {
+  const { items: n } = f();
+  return /* @__PURE__ */ t("div", { className: `${c} ${c}--${i}`, children: /* @__PURE__ */ t(d, { mode: "popLayout", children: n.filter((o) => o.config.position === i).map((o) => /* @__PURE__ */ t(
+    p.div,
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: i === "bottom" ? "flex-start" : "flex-end"
+      },
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: {
+        opacity: 0,
+        y: n.length > 1 ? "0%" : i === "top" ? "-100%" : "100%"
+      },
+      children: /* @__PURE__ */ t(
+        e,
+        {
+          ...o.config,
+          onActionClick: () => {
+            e.hide(o.id), o.config.onActionClick?.();
+          },
+          onCloseActionClick: () => {
+            e.hide(o.id), o.config.onCloseActionClick?.();
+          }
+        }
+      )
+    },
+    o.id
+  )) }) });
+}, b = () => /* @__PURE__ */ a(l, { children: [
+  r(/* @__PURE__ */ t(s, { position: "top" }), document.body),
+  r(/* @__PURE__ */ t(s, { position: "bottom" }), document.body)
+] });
+export {
+  b as ToastProvider
+};

package/dist/components/toast/toast.js

@@ -0,0 +1,66 @@
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import { getPrefixClassName as d } from "../../utils/classname.js";
+import { useMemo as g } from "react";
+import { useToastStore as n } from "./toast.store.js";
+import { renderIcon as v, Icon as m } from "../icon/icon.js";
+import { Typography as N } from "../typography/typography.js";
+import { Button as x } from "../button/button.js";
+import _ from "classnames";
+const i = d("toast"), c = ({
+  type: e = "informative",
+  message: l,
+  closeAction: f = !0,
+  onCloseActionClick: u,
+  action: o,
+  onActionClick: h,
+  icon: t
+}) => {
+  const a = g(() => {
+    if (t) return v(t);
+    const s = {
+      neutral: null,
+      informative: "circle-info",
+      positive: "circle-check",
+      negative: "triangle-warning"
+    }[e];
+    if (s)
+      return /* @__PURE__ */ r(m, { name: s, type: "fill", size: 24 });
+  }, [t, e]);
+  return /* @__PURE__ */ p("div", { className: _(i, `${i}--${e}`), children: [
+    !!a && /* @__PURE__ */ r("span", { className: `${i}__icon`, children: a }),
+    /* @__PURE__ */ r(
+      N,
+      {
+        component: "div",
+        size: "base",
+        weight: "regular",
+        color: "inherit",
+        className: `${i}__content`,
+        children: l
+      }
+    ),
+    o && /* @__PURE__ */ r(
+      x,
+      {
+        size: "medium",
+        type: "ghost",
+        theme: e === "informative" || e === "neutral" ? "neutral-inverse" : "neutral",
+        onClick: h,
+        children: o
+      }
+    ),
+    f && /* @__PURE__ */ r(
+      "div",
+      {
+        onClick: u,
+        className: `${i}__close-icon`,
+        children: /* @__PURE__ */ r(m, { name: "xmark", size: 16 })
+      }
+    )
+  ] });
+};
+c.show = (e) => n.getState().add(e);
+c.hide = (e) => e ? n.getState().remove(e) : n.getState().clear();
+export {
+  c as Toast
+};

package/dist/components/toast/toast.store.js

@@ -0,0 +1,35 @@
+import { create as u } from "zustand";
+const f = 3e3, T = u((i, c) => {
+  let p = 0;
+  const d = () => ++p;
+  return {
+    items: [],
+    add: (t) => {
+      const e = d();
+      return i((s) => {
+        const o = t.position || "top", m = s.items.filter(
+          (n) => n.config.position === "top"
+        ), r = s.items.filter(
+          (n) => n.config.position === "bottom"
+        );
+        return o === "top" ? m.push({ config: { ...t, position: o }, id: e }) : r.push({ config: { ...t, position: o }, id: e }), { items: [
+          ...m.slice(-3),
+          ...r.slice(-3)
+        ] };
+      }), setTimeout(() => {
+        c().remove(e);
+      }, t.duration || f), e;
+    },
+    remove: (t) => {
+      i((e) => (e.items.find((o) => o.id === t)?.config?.onHide?.(), {
+        items: e.items.filter((o) => o.id !== t)
+      }));
+    },
+    clear: () => {
+      i({ items: [] });
+    }
+  };
+});
+export {
+  T as useToastStore
+};

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,43 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import "react";
+import { getPrefixClassName as n } from "../../utils/classname.js";
+import e from "classnames";
+import { Icon as _ } from "../icon/icon.js";
+const s = n("tooltip"), v = (a) => {
+  const {
+    type: r = "default",
+    position: t = "top",
+    closeable: i,
+    className: m,
+    children: l,
+    ...c
+  } = a;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: e(
+        s,
+        `${s}--${r}`,
+        m
+      ),
+      ...c,
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            className: e(
+              `${s}__arrow`,
+              `${s}__arrow--${t}`,
+              `${s}__arrow--${r}`
+            )
+          }
+        ),
+        /* @__PURE__ */ o("div", { className: `${s}__content`, children: l }),
+        i && /* @__PURE__ */ o("div", { className: `${s}__close`, children: /* @__PURE__ */ o(_, { name: "xmark", size: 16 }) })
+      ]
+    }
+  );
+};
+export {
+  v as Tooltip
+};

package/dist/components/typography/typography.js

@@ -0,0 +1,28 @@
+import { jsx as p } from "react/jsx-runtime";
+import "react";
+import { getPrefixClassName as n } from "../../utils/classname.js";
+import { getColor as a } from "../../utils/colors.js";
+import l from "classnames";
+const o = n("typography"), x = ({
+  component: r,
+  size: t = "inherit",
+  weight: e = "inherit",
+  color: m,
+  className: s,
+  ...i
+}) => /* @__PURE__ */ p(
+  r || "div",
+  {
+    className: l(
+      o,
+      `${o}__size--${t}`,
+      `${o}__weight--${e}`,
+      s
+    ),
+    ...i,
+    style: { color: a(m) }
+  }
+);
+export {
+  x as Typography
+};

package/dist/components/uploader/helper.js

@@ -0,0 +1,21 @@
+import { chooseImage as c } from "../../vsf/choose-image.js";
+async function l(a) {
+  try {
+    const { count: e = 1 } = a || {}, r = await c({
+      count: e,
+      includeBase64: !0
+    }), t = [];
+    return (r.tempFiles || []).forEach((o) => {
+      if (!o.data) return;
+      const s = {
+        tempFile: o
+      };
+      t.push(s);
+    }), t;
+  } catch (e) {
+    return console.error("Failed to upload image", e), [];
+  }
+}
+export {
+  l as uploadImage
+};