@v-miniapp/ui-react 1.0.60 → 1.0.72

package/dist/components/dropdown/dropdown.js

@@ -0,0 +1,148 @@
+import { jsx as r, jsxs as i, Fragment as E } from "react/jsx-runtime";
+import { getPrefixClassName as $ } from "../../utils/classname.js";
+import { forwardRef as L, useState as _, useMemo as M, useEffect as B, useImperativeHandle as H, isValidElement as D, cloneElement as K } from "react";
+import { useControllableValue as R } from "ahooks";
+import { OptionItem as W } from "../option-item/option-item.js";
+import { SearchField as q } from "../search-field/search-field.js";
+import { getInputProps as A, InputWrapper as G } from "../input-wrapper/input-wrapper.js";
+import { Sheet as J } from "../sheet/sheet.js";
+import { SheetHeader as Q } from "../sheet/sheet-header.js";
+import { SheetBody as U } from "../sheet/sheet-body.js";
+import { Icon as X } from "../icon/icon.js";
+import { Typography as C } from "../typography/typography.js";
+import { Skeleton as N } from "../skeleton/skeleton.js";
+import Y from "classnames";
+const c = $("dropdown"), fe = L(
+  (n, d) => {
+    const { wrapper: s, props: a } = A(n), [p, t] = _(!1), [l, I] = R(a, {
+      trigger: "onChange",
+      valuePropName: "value"
+    }), [m, b] = _(""), {
+      options: u,
+      searchFilter: w = Z,
+      emptyText: j = "Không tìm thấy",
+      searchProps: T,
+      allowSearch: x,
+      placeholder: z,
+      sheetTitle: O = s.label?.text || s.label?.children,
+      renderLabel: k = (e) => e.label,
+      renderItem: F = (e, o) => /* @__PURE__ */ r(
+        W,
+        {
+          theme: "neutral",
+          divider: o.index < o.options.length - 1,
+          selected: e.value === o.value,
+          children: k(e, l)
+        }
+      ),
+      children: h
+    } = a, f = u.find((e) => e.value === l), y = M(() => u.filter((e) => w(e, m)), [u, m, w]), S = typeof l > "u" || l === null, P = () => f ? a.renderValue ? a.renderValue(f) : k(f, l) : l;
+    B(() => {
+      p || b("");
+    }, [p]), H(d, () => ({
+      open: () => t(!0),
+      close: () => t(!1)
+    }));
+    const g = () => {
+      s.disabled || a.loading || t(!0);
+    };
+    return /* @__PURE__ */ i(E, { children: [
+      (() => {
+        if (h) {
+          if (D(h)) {
+            const e = h, o = e.props.onClick;
+            return K(e, {
+              onClick: (v, ...V) => {
+                o?.(v, ...V), g();
+              }
+            });
+          }
+          return /* @__PURE__ */ r("div", { onClick: g, children: h });
+        }
+        return /* @__PURE__ */ i(
+          G,
+          {
+            trailingIcon: {
+              name: "chevron-down",
+              color: "alias-object-secondary",
+              size: 20
+            },
+            ...s,
+            className: Y(c, s.className),
+            isFocus: p,
+            onClick: g,
+            loadingNode: a.loading && /* @__PURE__ */ i("div", { className: `${c}__loading`, children: [
+              /* @__PURE__ */ r(N, { width: 128, height: 13, shape: "pill" }),
+              /* @__PURE__ */ r(N, { width: 24, height: 24, shape: "pill" })
+            ] }),
+            children: [
+              S && /* @__PURE__ */ r(
+                C,
+                {
+                  size: "base",
+                  weight: 400,
+                  color: "alias-object-placeholder",
+                  children: z || " "
+                }
+              ),
+              !S && /* @__PURE__ */ r(C, { size: "base", weight: 400, color: "alias-object-primary", children: P() })
+            ]
+          }
+        );
+      })(),
+      /* @__PURE__ */ i(
+        J,
+        {
+          open: p,
+          onBackdropClick: () => t(!1),
+          className: `${c}__sheet`,
+          children: [
+            /* @__PURE__ */ r(
+              Q,
+              {
+                closeIcon: !0,
+                title: O,
+                onCloseClick: () => t(!1)
+              }
+            ),
+            x && /* @__PURE__ */ r("div", { className: `${c}__sheet__search`, children: /* @__PURE__ */ r(
+              q,
+              {
+                placeholder: "Tìm kiếm",
+                ...T,
+                value: m,
+                onChange: b
+              }
+            ) }),
+            /* @__PURE__ */ i(U, { horizontalSpace: !1, children: [
+              y.map((e, o, v) => /* @__PURE__ */ r(
+                "div",
+                {
+                  onClick: () => {
+                    I(e.value), t(!1);
+                  },
+                  children: F(e, { options: v, value: l, index: o })
+                },
+                e.value
+              )),
+              !y.length && /* @__PURE__ */ i("div", { className: `${c}__sheet__empty`, children: [
+                /* @__PURE__ */ r(
+                  X,
+                  {
+                    name: "newspaper",
+                    size: 40,
+                    color: "alias-object-placeholder"
+                  }
+                ),
+                /* @__PURE__ */ r(C, { size: "small", color: "alias-object-placeholder", children: j })
+              ] })
+            ] })
+          ]
+        }
+      )
+    ] });
+  }
+), Z = (n, d) => d ? typeof n.label == "string" || typeof n.label == "number" ? n.label.toString().toLowerCase().includes(d.toLowerCase()) : !1 : !0;
+export {
+  fe as Dropdown
+};

package/dist/components/error/error-boundary.js

@@ -0,0 +1,28 @@
+import { jsx as o } from "react/jsx-runtime";
+import t from "react";
+import { ErrorComponent as s } from "./error.js";
+import { getPrefixClassName as a } from "../../utils/classname.js";
+import i from "classnames";
+const e = a("error-boundary");
+class u extends t.Component {
+  constructor(r) {
+    super(r), this.state = { hasError: !1, error: null };
+  }
+  static getDerivedStateFromError(r) {
+    return { hasError: !0, error: r };
+  }
+  render() {
+    return this.state.hasError ? /* @__PURE__ */ o(
+      "div",
+      {
+        className: i(e, {
+          [`${e}--global`]: this.props.isGlobal
+        }),
+        children: /* @__PURE__ */ o(s, {})
+      }
+    ) : this.props.children;
+  }
+}
+export {
+  u as ErrorBoundary
+};

package/dist/components/error/error.js

@@ -0,0 +1,25 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { getPrefixClassName as c } from "../../utils/classname.js";
+import h from "../../assets/images/default-error.png.js";
+import { Image as p } from "../image/image.js";
+import { Button as d } from "../button/button.js";
+import { Typography as o } from "../typography/typography.js";
+import g from "classnames";
+const i = c("error"), b = ({
+  image: t,
+  title: a = "Đã xảy ra lỗi",
+  description: m = "Lỗi kết nối đến hệ thống. Vui lòng kiểm tra kết nối mạng hoặc đợi trong giây lát.",
+  button: s,
+  className: l,
+  ...n
+}) => /* @__PURE__ */ e("div", { className: g(i, l), ...n, children: [
+  /* @__PURE__ */ r("div", { className: `${i}__image`, children: t || /* @__PURE__ */ r(p, { width: 208, height: 208, src: h }) }),
+  /* @__PURE__ */ e("div", { className: `${i}__content`, children: [
+    /* @__PURE__ */ r(o, { size: "base", color: "alias-object-primary", children: a }),
+    /* @__PURE__ */ r(o, { size: "small", color: "alias-object-secondary", children: m })
+  ] }),
+  /* @__PURE__ */ r(d, { children: "Thử lại", theme: "neutral", size: "large", ...s })
+] });
+export {
+  b as ErrorComponent
+};

package/dist/components/icon/icon-mapping.js

@@ -0,0 +1,260 @@
+import e from "../../assets/icons/loader.svg.js";
+import l from "../../assets/icons/placeholder.svg.js";
+const o = {
+  "add-magic-fill": "ue971",
+  "add-magic-outline": "ue900",
+  "arrow-door-out-fill": "ue972",
+  "arrow-door-out-outline": "ue901",
+  "arrow-left-from-line-fill": "ue9da",
+  "arrow-left-from-line-outline": "ue969",
+  "arrow-right-fill": "ue973",
+  "arrow-right-from-line-fill": "ue9db",
+  "arrow-right-from-line-outline": "ue96a",
+  "arrow-right-outline": "ue902",
+  "arrow-rotate-anticlockwise-fill": "ue974",
+  "arrow-rotate-anticlockwise-outline": "ue903",
+  "arrow-rotate-clockwise-fill": "ue975",
+  "arrow-rotate-clockwise-outline": "ue904",
+  "arrow-trend-down-fill": "ue9d9",
+  "arrow-trend-down-outline": "ue968",
+  "arrow-trend-up-fill": "ue9d8",
+  "arrow-trend-up-outline": "ue967",
+  "arrows-expand-fill": "ue976",
+  "arrows-expand-outline": "ue905",
+  "atm-machine-fill": "ue977",
+  "atm-machine-outline": "ue906",
+  "badge-check-fill": "ue978",
+  "badge-check-outline": "ue907",
+  "ballot-circle-fill": "ue979",
+  "ballot-circle-outline": "ue908",
+  "battery-alert-fill": "ue97a",
+  "battery-alert-outline": "ue909",
+  "battery-charging-fill": "ue97b",
+  "battery-charging-outline": "ue90a",
+  "bell-fill": "ue97c",
+  "bell-outline": "ue90b",
+  "bell-slash-fill": "ue97d",
+  "bell-slash-outline": "ue90c",
+  "bolt-fill": "ue97e",
+  "bolt-outline": "ue90d",
+  "bolt-slash-fill": "ue97f",
+  "bolt-slash-outline": "ue90e",
+  "book-open-fill": "ue980",
+  "book-open-outline": "ue90f",
+  "bookmark-fill": "ue9f3",
+  "bookmark-outline": "ue9f1",
+  "bug-slash-fill": "ue981",
+  "bug-slash-outline": "ue910",
+  "calendar-fill": "ue982",
+  "calendar-outline": "ue911",
+  "camera-fill": "ue983",
+  "camera-outline": "ue912",
+  "car-electric-fill": "ue984",
+  "car-electric-outline": "ue913",
+  "car-side-fill": "ue985",
+  "car-side-outline": "ue914",
+  "charging-station-fill": "ue986",
+  "charging-station-outline": "ue915",
+  "chart-column-trend-up-fill": "ue9e0",
+  "chart-column-trend-up-outline": "ue96f",
+  "chart-donut-fill": "ue9df",
+  "chart-donut-outline": "ue96e",
+  "check-double-fill": "ue987",
+  "check-double-outline": "ue916",
+  "check-fill": "ue988",
+  "check-outline": "ue917",
+  "chevron-down-fill": "ue989",
+  "chevron-down-outline": "ue918",
+  "chevron-left-fill": "ue98a",
+  "chevron-left-outline": "ue919",
+  "chevron-right-fill": "ue98b",
+  "chevron-right-outline": "ue91a",
+  "chevron-up-fill": "ue98c",
+  "chevron-up-outline": "ue91b",
+  "circle-check-fill": "ue98d",
+  "circle-check-outline": "ue91c",
+  "circle-info-fill": "ue98e",
+  "circle-info-outline": "ue91d",
+  "circle-question-fill": "ue98f",
+  "circle-question-outline": "ue91e",
+  "circle-xmark-fill": "ue990",
+  "circle-xmark-outline": "ue91f",
+  "clipboard-list-fill": "ue991",
+  "clipboard-list-outline": "ue920",
+  "clock-fill": "ue992",
+  "clock-outline": "ue921",
+  "clone-fill": "ue993",
+  "clone-outline": "ue922",
+  "credit-card-fill": "ue994",
+  "credit-card-outline": "ue923",
+  "credit-card-plus-fill": "ue995",
+  "credit-card-plus-outline": "ue924",
+  "crown-fill": "ue996",
+  "crown-outline": "ue925",
+  "discount-code-fill": "ue997",
+  "discount-code-outline": "ue926",
+  "dots-fill": "ue998",
+  "dots-outline": "ue927",
+  "double-chevron-left-fill": "ue999",
+  "double-chevron-left-outline": "ue928",
+  "double-chevron-right-fill": "ue99a",
+  "double-chevron-right-outline": "ue929",
+  "download-fill": "ue99b",
+  "download-outline": "ue92a",
+  "envelope-fill": "ue99c",
+  "envelope-outline": "ue92b",
+  "eye-fill": "ue99d",
+  "eye-outline": "ue92c",
+  "eye-slash-fill": "ue99e",
+  "eye-slash-outline": "ue92d",
+  "facial-recognition-fill": "ue99f",
+  "facial-recognition-outline": "ue92e",
+  "file-content-fill": "ue9a0",
+  "file-content-outline": "ue92f",
+  "filter-fill": "ue9a1",
+  "filter-outline": "ue930",
+  "fingerprint-fill": "ue9a2",
+  "fingerprint-outline": "ue931",
+  "flag-fill": "ue9de",
+  "flag-outline": "ue96d",
+  "folder-fill": "ue9dc",
+  "folder-open-fill": "ue9dd",
+  "folder-open-outline": "ue96c",
+  "folder-outline": "ue96b",
+  "gear-fill": "ue9a3",
+  "gear-outline": "ue932",
+  "gift-fill": "ue9a4",
+  "gift-outline": "ue933",
+  "graduation-cap-fill": "ue9ef",
+  "graduation-cap-outline": "ue9ee",
+  "grid-fill": "ue9a5",
+  "grid-outline": "ue934",
+  "grid-plus-fill": "ue9a6",
+  "grid-plus-outline": "ue935",
+  "hashtag-fill": "ue9f2",
+  "hashtag-outline": "ue9f0",
+  "headset-fill": "ue9a7",
+  "headset-outline": "ue936",
+  "heart-fill": "ue9a8",
+  "heart-outline": "ue937",
+  "history-fill": "ue9a9",
+  "history-outline": "ue938",
+  "house-fill": "ue9aa",
+  "house-outline": "ue939",
+  "image-fill": "ue9e1",
+  "image-outline": "ue970",
+  "input-password-fill": "ue9ab",
+  "input-password-outline": "ue93a",
+  "language-fill": "ue9ac",
+  "language-outline": "ue93b",
+  "lightbulb-fill": "ue9ad",
+  "lightbulb-outline": "ue93c",
+  "link-fill": "ue9ae",
+  "link-outline": "ue93d",
+  "link-slash-fill": "ue9af",
+  "link-slash-outline": "ue93e",
+  "loader-fill": "ue9b0",
+  "loader-outline": "ue93f",
+  "lock-fill": "ue9b1",
+  "lock-outline": "ue940",
+  "magnifier-fill": "ue9b2",
+  "magnifier-outline": "ue941",
+  "media-next-fill": "ue9b3",
+  "media-next-outline": "ue942",
+  "media-pause-fill": "ue9b4",
+  "media-pause-outline": "ue943",
+  "media-play-fill": "ue9b5",
+  "media-play-outline": "ue944",
+  "media-previous-fill": "ue9b6",
+  "media-previous-outline": "ue945",
+  "media-stop-fill": "ue9eb",
+  "media-stop-outline": "ue9e6",
+  "menu-fill": "ue9ec",
+  "menu-outline": "ue9ed",
+  "message-content-fill": "ue9ea",
+  "message-content-outline": "ue9e4",
+  "microphone-fill": "ue9b7",
+  "microphone-outline": "ue946",
+  "minus-fill": "ue9b8",
+  "minus-outline": "ue947",
+  "money-bill-coin-fill": "ue9b9",
+  "money-bill-coin-outline": "ue948",
+  "msg-fill": "ue9ba",
+  "msg-outline": "ue949",
+  "newspaper-fill": "ue9bb",
+  "newspaper-outline": "ue94a",
+  "nodes-fill": "ue9d7",
+  "nodes-outline": "ue966",
+  "office-fill": "ue9bc",
+  "office-outline": "ue94b",
+  "paper-plane-fill": "ue9bd",
+  "paper-plane-outline": "ue94c",
+  "pen-fill": "ue9be",
+  "pen-outline": "ue94d",
+  "phone-fill": "ue9bf",
+  "phone-outline": "ue94e",
+  "pin-fill": "ue9c0",
+  "pin-outline": "ue94f",
+  "pin-tack-fill": "ue9c1",
+  "pin-tack-outline": "ue950",
+  "plane-fill": "ue9c2",
+  "plane-outline": "ue951",
+  "plus-fill": "ue9c3",
+  "plus-outline": "ue952",
+  "qrcode-fill": "ue9c4",
+  "qrcode-outline": "ue953",
+  "receipt-fill": "ue9c5",
+  "receipt-outline": "ue954",
+  "scan-fill": "ue9c6",
+  "scan-outline": "ue955",
+  "scooter-front-fill": "ue9c7",
+  "scooter-front-outline": "ue956",
+  "share-right-fill": "ue9c8",
+  "share-right-outline": "ue957",
+  "shield-check-fill": "ue9c9",
+  "shield-check-outline": "ue958",
+  "stack-x-plus-fill": "ue9ca",
+  "stack-x-plus-outline": "ue959",
+  "star-fill": "ue9cb",
+  "star-outline": "ue95a",
+  "text-prompt-fill": "ue9e7",
+  "text-prompt-outline": "ue9e2",
+  "text-size-fill": "ue9e8",
+  "text-size-outline": "ue9e3",
+  "thumbs-down-fill": "ue9cc",
+  "thumbs-down-outline": "ue95b",
+  "thumbs-up-fill": "ue9cd",
+  "thumbs-up-outline": "ue95c",
+  "trash-fill": "ue9ce",
+  "trash-outline": "ue95d",
+  "triangle-warning-fill": "ue9cf",
+  "triangle-warning-outline": "ue95e",
+  "user-bubble-check-fill": "ue9d0",
+  "user-bubble-check-outline": "ue95f",
+  "user-fill": "ue9d1",
+  "user-outline": "ue960",
+  "user-shield-fill": "ue9d2",
+  "user-shield-outline": "ue961",
+  "user-xmark-fill": "ue9d3",
+  "user-xmark-outline": "ue962",
+  "users-plus-fill": "ue9d4",
+  "users-plus-outline": "ue963",
+  "wallet-fill": "ue9d5",
+  "wallet-outline": "ue964",
+  "waveform-lines-fill": "ue9e9",
+  "waveform-lines-outline": "ue9e5",
+  "xmark-fill": "ue9d6",
+  "xmark-outline": "ue965",
+  // Add on
+  "placeholder-fill": "ue984",
+  "placeholder-outline": "ue91f"
+}, t = {
+  "loader-fill": e,
+  "loader-outline": e,
+  "placeholder-fill": l,
+  "placeholder-outline": l
+};
+export {
+  o as iconMapping,
+  t as iconSvgMapping
+};

package/dist/components/icon/icon.js

@@ -0,0 +1,54 @@
+import { jsx as o } from "react/jsx-runtime";
+import { isValidElement as p } from "react";
+import { iconSvgMapping as g, iconMapping as f } from "./icon-mapping.js";
+import { getColor as h } from "../../utils/colors.js";
+import { getPrefixClassName as y } from "../../utils/classname.js";
+import C from "classnames";
+const l = y("icon"), b = Object.keys(f).map(
+  (t) => t.endsWith("-fill") ? t.slice(0, -5) : t.endsWith("-outline") ? t.slice(0, -8) : t
+), $ = ({
+  size: t,
+  color: i,
+  className: m,
+  style: u,
+  animation: c,
+  ...e
+}) => {
+  const r = (d) => /* @__PURE__ */ o(
+    "span",
+    {
+      className: C(
+        l,
+        {
+          [`${l}--${c}`]: c
+        },
+        m
+      ),
+      style: {
+        width: t,
+        height: t,
+        fontSize: t,
+        color: h(i),
+        ...u
+      },
+      children: d
+    }
+  );
+  if ("children" in e)
+    return r(e.children);
+  const s = g[`${e.name}-${e.type || "outline"}`];
+  if (s)
+    return r(/* @__PURE__ */ o(s, {}));
+  const n = f[`${e.name}-${e.type || "outline"}`];
+  if (!n) return;
+  const a = parseInt(
+    n.startsWith("u") ? n.slice(1) : n,
+    16
+  );
+  return r(String.fromCodePoint(a));
+}, v = (t) => t ? typeof t == "function" ? /* @__PURE__ */ o(t, {}) : p(t) || typeof t != "object" ? t : /* @__PURE__ */ o($, { ...t }) : null;
+export {
+  $ as Icon,
+  b as iconNames,
+  v as renderIcon
+};

package/dist/components/image/image.js

@@ -0,0 +1,70 @@
+import { jsxs as g, jsx as e, Fragment as R } from "react/jsx-runtime";
+import { useState as a, useRef as p, useEffect as z } from "react";
+import { getPrefixClassName as A } from "../../utils/classname.js";
+import B from "../../assets/images/broken-image.svg.js";
+import V from "../../assets/images/image.svg.js";
+import { toCSSLength as s } from "../../utils/to-css-length.js";
+import { VisibilitySensor as q } from "../visibility-sensor/visibility-sensor.js";
+import { Icon as S } from "../icon/icon.js";
+import D from "classnames";
+const o = A("image"), W = ({
+  // Container
+  className: v,
+  style: N,
+  onClick: y,
+  ref: I,
+  // Image
+  lazy: l = !1,
+  fit: _ = "fill",
+  placeholder: w = /* @__PURE__ */ e("div", { className: `${o}__tip`, children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(V, {}) }) }),
+  fallback: x = /* @__PURE__ */ e("div", { className: `${o}__tip`, children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(B, {}) }) }),
+  src: b,
+  srcSet: j,
+  onLoad: C,
+  onError: F,
+  ...t
+}) => {
+  const [d, f] = a(!1), [L, m] = a(!1), [n, $] = a(!l), k = p(null), i = n ? b : void 0, h = n ? j : void 0, u = p(i);
+  z(() => {
+    u.current !== i && (u.current = i, f(!1), m(!1));
+  }, [i]);
+  const E = () => L || !i && !h ? x : /* @__PURE__ */ g(R, { children: [
+    !d && w,
+    /* @__PURE__ */ e(
+      "img",
+      {
+        ref: k,
+        src: i,
+        srcSet: h,
+        onLoad: (c) => {
+          f(!0), C?.(c);
+        },
+        onError: (c) => {
+          m(!0), F?.(c);
+        },
+        style: {
+          objectFit: _,
+          display: d ? "block" : "none"
+        },
+        ...t,
+        className: `${o}__img`
+      }
+    )
+  ] }), r = {};
+  return typeof t.width < "u" && (r["--width"] = s(t.width), r.width = s(t.width)), typeof t.height < "u" && (r["--height"] = s(t.height), r.height = s(t.height)), /* @__PURE__ */ g(
+    "div",
+    {
+      ref: I,
+      className: D(o, v),
+      onClick: y,
+      style: { ...r, ...N },
+      children: [
+        l && !n && /* @__PURE__ */ e(q, { onActive: () => $(!0) }),
+        E()
+      ]
+    }
+  );
+};
+export {
+  W as Image
+};

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './ai-app';
 export * from './app';
 export * from './layout';
 export * from './typography';