@v-miniapp/ui-react 1.0.59 → 1.0.71

package/dist/components/checkbox/checkbox.js

@@ -0,0 +1,131 @@
+import { jsxs as b, jsx as n } from "react/jsx-runtime";
+import { forwardRef as F, useRef as I, useState as S, useImperativeHandle as B } from "react";
+import { getPrefixClassName as j } from "../../utils/classname.js";
+import { useControllableValue as f } from "ahooks";
+import R from "./check-icon.js";
+import V from "./indeterminate-icon.js";
+import { Typography as h } from "../typography/typography.js";
+import z from "classnames";
+const r = j("checkbox"), W = F(
+  (a, p) => {
+    const {
+      disabled: t = !1,
+      theme: N = "brand",
+      variant: o = "default",
+      className: k,
+      style: C,
+      checked: D,
+      defaultChecked: H,
+      onChange: M,
+      number: O,
+      defaultNumber: T,
+      onNumberChange: q,
+      children: m,
+      typography: g,
+      ...i
+    } = a, _ = N || "brand", c = I(null), [v, s] = S(!1), [d, $] = f(a, {
+      valuePropName: "checked",
+      defaultValuePropName: "defaultChecked",
+      trigger: "onChange"
+    }), [l, x] = f(a, {
+      valuePropName: "number",
+      defaultValuePropName: "defaultNumber",
+      trigger: "onNumberChange"
+    }), u = l !== void 0 ? !0 : d;
+    B(p, () => ({
+      focus: () => c.current?.focus?.(),
+      blur: () => c.current?.blur?.()
+    }));
+    const y = (e) => {
+      if (e.preventDefault(), t) return;
+      const w = l === void 0 ? 1 : l + 1;
+      x(w);
+    }, P = () => o === "number" ? /* @__PURE__ */ n(
+      "input",
+      {
+        ...i,
+        type: "text",
+        inputMode: "numeric",
+        value: l ?? "",
+        disabled: t,
+        readOnly: !0,
+        ref: c,
+        className: `${r}__input`,
+        onClick: (e) => e.stopPropagation(),
+        onFocus: (e) => {
+          s(!0), a.onFocus?.(e);
+        },
+        onBlur: (e) => {
+          s(!1), a.onBlur?.(e);
+        }
+      }
+    ) : /* @__PURE__ */ n(
+      "input",
+      {
+        ...i,
+        type: "checkbox",
+        checked: d,
+        disabled: t,
+        onChange: (e) => $(e.target.checked),
+        ref: c,
+        className: `${r}__input`,
+        onFocus: (e) => {
+          s(!0), a.onFocus?.(e);
+        },
+        onBlur: (e) => {
+          s(!1), a.onBlur?.(e);
+        }
+      }
+    );
+    return /* @__PURE__ */ b(
+      "label",
+      {
+        className: z(
+          r,
+          {
+            [`${r}--checked`]: u,
+            [`${r}--unchecked`]: !u,
+            [`${r}--disabled`]: t,
+            [`${r}--focus`]: v,
+            [`${r}--theme-${_}`]: !0,
+            [`${r}--variant-${o}`]: o !== "default"
+          },
+          k
+        ),
+        style: C,
+        onClick: o === "number" ? y : void 0,
+        children: [
+          /* @__PURE__ */ b("span", { className: `${r}__button`, children: [
+            /* @__PURE__ */ n("span", { className: `${r}__overlay` }),
+            u && o === "number" && l !== void 0 ? /* @__PURE__ */ n(
+              h,
+              {
+                component: "span",
+                size: "x-small",
+                weight: 700,
+                color: t ? "alias-border-disabled" : "alias-object-on-brand",
+                className: `${r}__number`,
+                children: l
+              }
+            ) : u && o === "indeterminate" ? /* @__PURE__ */ n(
+              V,
+              {
+                fill: t ? "var(--color-alias-border-disabled, rgba(10, 10, 10, 0.25))" : "white"
+              }
+            ) : u ? /* @__PURE__ */ n(
+              R,
+              {
+                fill: t ? "var(--color-alias-border-disabled, rgba(10, 10, 10, 0.25))" : "white"
+              }
+            ) : null,
+            P()
+          ] }),
+          m && /* @__PURE__ */ n(h, { component: "span", ...g, size: "base", children: m })
+        ]
+      }
+    );
+  }
+);
+export {
+  W as Checkbox
+};

package/dist/components/checkbox/indeterminate-icon.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import "react";
+const n = ({
+  fill: e = "white",
+  ...i
+}) => /* @__PURE__ */ t(
+  "svg",
+  {
+    width: "15",
+    height: "15",
+    viewBox: "0 0 15 15",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...i,
+    children: /* @__PURE__ */ t("rect", { x: "2", y: "6.5", width: "11", height: "2", rx: "1", fill: e })
+  }
+);
+export {
+  n as default
+};

package/dist/components/chip/chip.js

@@ -0,0 +1,80 @@
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { getPrefixClassName as N } from "../../utils/classname.js";
+import "react";
+import { Badge as x } from "../badge/badge.js";
+import { Typography as C } from "../typography/typography.js";
+import d from "classnames";
+import { renderIcon as b } from "../icon/icon.js";
+const r = N("chip"), B = ({
+  theme: n = "default",
+  type: l = "selection",
+  leadingIcon: o,
+  trailingIcon: s,
+  selected: a,
+  label: m,
+  style: w,
+  className: f,
+  disabled: _,
+  count: t,
+  ...c
+}) => {
+  n = n === "default" ? "brand" : n;
+  const e = (u, h) => u ? /* @__PURE__ */ i("span", { className: d(`${r}__icon`, h), children: b(u) }) : null, p = () => o ? e(o, `${r}__icon--leading`) : l === "selection" && a ? e(
+    { name: "circle-check", type: "fill" },
+    `${r}__icon--leading`
+  ) : null, $ = () => {
+    if (s)
+      return e(s, `${r}__icon--trailing`);
+    switch (l) {
+      case "dropdown":
+        return e(
+          { name: "chevron-down" },
+          `${r}__icon--trailing`
+        );
+      case "input":
+        return a ? e(
+          { name: "xmark" },
+          `${r}__icon--trailing`
+        ) : null;
+      case "action":
+        return t == null ? null : /* @__PURE__ */ i(x, { outline: !0, className: `${r}__badge`, children: t });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      className: d(
+        r,
+        {
+          [`${r}--${a ? "selected" : ""}`]: !0,
+          [`${r}--theme-${n}`]: !0,
+          [`${r}--type-${l}`]: !0,
+          [`${r}--disabled`]: _
+        },
+        f
+      ),
+      onClick: c.onClick,
+      ...c,
+      children: [
+        /* @__PURE__ */ i("span", { className: `${r}__overlay` }),
+        p(),
+        /* @__PURE__ */ i(
+          C,
+          {
+            component: "span",
+            size: "base",
+            weight: 400,
+            className: `${r}__label`,
+            children: m || c.children
+          }
+        ),
+        $()
+      ]
+    }
+  );
+};
+export {
+  B as Chip
+};

package/dist/components/date-field/date-field-range.js

@@ -0,0 +1,153 @@
+import { jsxs as s, Fragment as p, jsx as l } from "react/jsx-runtime";
+import { getPrefixClassName as D } from "../../utils/classname.js";
+import { forwardRef as I, useState as y, useRef as b, useImperativeHandle as P } from "react";
+import { Input as k } from "./input.js";
+import { useControllableValue as K } from "ahooks";
+import { DatePickerSheet as N } from "../date-picker/date-picker-sheet.js";
+import v from "../../_virtual/omit.js";
+import { CalendarRangeSheet as V } from "../calendar/calendar-range-sheet.js";
+import { getInputProps as j, InputWrapper as B } from "../input-wrapper/input-wrapper.js";
+import { Icon as _ } from "../icon/icon.js";
+import { Skeleton as w } from "../skeleton/skeleton.js";
+const S = D("date-field-range"), J = I((R, F) => {
+  const { wrapper: n, props: o } = j(R), { picker: h = "date-picker", pickerProps: m } = o, [d, a] = y(-1), [g, f] = y(o.autoFocus), [r, c] = K(o, {
+    trigger: "onChange",
+    valuePropName: "value",
+    defaultValuePropName: "defaultValue",
+    defaultValue: { from: null, to: null }
+  }), i = b(null), t = b(null), C = () => {
+    g || (r?.from ? t.current?.focus?.() : i.current?.focus?.());
+  };
+  return P(F, () => ({
+    focus: C,
+    blur: () => {
+      i.current?.blur?.(), t.current?.blur?.();
+    }
+  })), /* @__PURE__ */ s(p, { children: [
+    /* @__PURE__ */ l(
+      B,
+      {
+        trailingIcon: { name: "calendar", color: "alias-object-secondary" },
+        onTrailingIconClick: (e) => {
+          e.stopPropagation(), a(0);
+        },
+        ...n,
+        className: n.className,
+        isFocus: g,
+        onClick: () => C(),
+        loadingNode: o.loading && /* @__PURE__ */ s("div", { className: `${S}__loading`, children: [
+          /* @__PURE__ */ l(w, { width: 128, height: 13, shape: "pill" }),
+          /* @__PURE__ */ l(w, { width: 128, height: 13, shape: "pill" })
+        ] }),
+        children: /* @__PURE__ */ s("div", { className: S, children: [
+          /* @__PURE__ */ l(
+            k,
+            {
+              ...v(o, ["value", "onChange", "defaultValue"]),
+              placeholder: o.placeholder?.from,
+              value: r?.from,
+              onChange: (e) => c({ ...r, from: e }),
+              onCompleted: (e, u) => {
+                u < 10 || (t.current?.focus?.(), t.current?.setSelectionRange(0, 0));
+              },
+              disabled: n.disabled,
+              onKeyDown: (e) => {
+                const u = e.key === "ArrowRight";
+                i.current?.selectionStart === 10 && u && (t.current?.focus(), t.current?.setSelectionRange(0, 0)), o.onKeyDown?.(e);
+              },
+              onFocus: (e) => {
+                f(!0), o.onFocus?.(e);
+              },
+              onBlur: (e) => {
+                f(!1), o.onBlur?.(e);
+              },
+              ref: i,
+              className: o.inputClassName
+            }
+          ),
+          /* @__PURE__ */ l(
+            _,
+            {
+              name: "arrow-right",
+              color: n.error ? "alias-support-negative" : n.success ? "alias-support-positive" : "alias-object-secondary",
+              size: 16
+            }
+          ),
+          /* @__PURE__ */ l(
+            k,
+            {
+              ...v(o, ["value", "onChange", "defaultValue"]),
+              placeholder: o.placeholder?.to,
+              value: r?.to,
+              onChange: (e) => c({ ...r, to: e }),
+              disabled: n.disabled,
+              onKeyDown: (e) => {
+                const u = e.key === "Delete", x = e.key === "ArrowLeft";
+                t.current?.selectionStart === 0 && (u || x) && i.current?.focus(), o.onKeyDown?.(e);
+              },
+              onFocus: (e) => {
+                f(!0), o.onFocus?.(e);
+              },
+              onBlur: (e) => {
+                f(!1), o.onBlur?.(e);
+              },
+              ref: t,
+              className: o.inputClassName
+            }
+          )
+        ] })
+      }
+    ),
+    h === "date-picker" && /* @__PURE__ */ s(p, { children: [
+      /* @__PURE__ */ l(
+        N,
+        {
+          open: d === 0,
+          value: r?.from,
+          onSelect: (e) => {
+            a(1), c({ ...r, from: e });
+          },
+          onCancel: () => a(-1),
+          title: /* @__PURE__ */ s(p, { children: [
+            n.label?.text,
+            " từ ngày"
+          ] }),
+          ...m?.[0]
+        }
+      ),
+      /* @__PURE__ */ l(
+        N,
+        {
+          open: d === 1,
+          value: r?.to,
+          onSelect: (e) => {
+            a(-1), c({ ...r, to: e });
+          },
+          min: r?.from,
+          onCancel: () => a(-1),
+          title: /* @__PURE__ */ s(p, { children: [
+            n.label?.text,
+            " đến ngày"
+          ] }),
+          ...m?.[1]
+        }
+      )
+    ] }),
+    h === "calendar" && /* @__PURE__ */ l(
+      V,
+      {
+        open: d === 0,
+        value: [r?.from || null, r?.to || null],
+        onSelect: (e) => {
+          a(-1), c({ from: e[0], to: e[1] });
+        },
+        onCancel: () => a(-1),
+        title: /* @__PURE__ */ l(p, { children: n.label?.text }),
+        ...m
+      }
+    )
+  ] });
+});
+export {
+  J as DateFieldRange
+};

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

@@ -0,0 +1,100 @@
+import { jsxs as i, Fragment as _, jsx as l } from "react/jsx-runtime";
+import { forwardRef as k, useState as h, useRef as v, useImperativeHandle as b } from "react";
+import { getPrefixClassName as P } from "../../utils/classname.js";
+import x from "classnames";
+import { Input as F } from "./input.js";
+import { DatePickerSheet as I } from "../date-picker/date-picker-sheet.js";
+import { CalendarSingleSheet as S } from "../calendar/calendar-single-sheet.js";
+import { useControllableValue as V } from "ahooks";
+import { getInputProps as w, InputWrapper as j } from "../input-wrapper/input-wrapper.js";
+import { Skeleton as c } from "../skeleton/skeleton.js";
+const u = P("date-field"), G = k(
+  (g, C) => {
+    const { wrapper: o, props: a } = w(g), {
+      picker: p = "date-picker",
+      onChange: R,
+      value: B,
+      defaultValue: D,
+      pickerProps: d
+    } = a, [N, m] = h(a.autoFocus), [n, s] = V(
+      a,
+      {
+        trigger: "onChange",
+        valuePropName: "value",
+        defaultValuePropName: "defaultValue",
+        defaultValue: null
+      }
+    ), r = v(null), [f, t] = h(!1);
+    return b(C, () => ({
+      focus: () => r.current?.focus?.(),
+      blur: () => r.current?.blur?.()
+    })), /* @__PURE__ */ i(_, { children: [
+      /* @__PURE__ */ l(
+        j,
+        {
+          trailingIcon: { name: "calendar", color: "alias-object-secondary" },
+          onTrailingIconClick: (e) => {
+            e.stopPropagation(), t(!0);
+          },
+          ...o,
+          className: o.className,
+          isFocus: N,
+          onClick: () => r.current?.focus(),
+          loadingNode: a.loading && /* @__PURE__ */ i("div", { className: `${u}__loading`, children: [
+            /* @__PURE__ */ i("div", { className: `${u}__loading__left`, children: [
+              /* @__PURE__ */ l(c, { width: 40, height: 13, shape: "pill" }),
+              /* @__PURE__ */ l(c, { width: 128, height: 13, shape: "pill" })
+            ] }),
+            /* @__PURE__ */ l(c, { width: 40, height: 13, shape: "pill" })
+          ] }),
+          children: /* @__PURE__ */ l(
+            F,
+            {
+              ...a,
+              value: n,
+              onChange: s,
+              disabled: o.disabled,
+              onFocus: (e) => {
+                m(!0), a.onFocus?.(e);
+              },
+              onBlur: (e) => {
+                m(!1), a.onBlur?.(e);
+              },
+              ref: r,
+              className: x(u, a.inputClassName)
+            }
+          )
+        }
+      ),
+      p === "date-picker" && /* @__PURE__ */ l(
+        I,
+        {
+          open: f,
+          value: n,
+          onSelect: (e) => {
+            t(!1), s(e);
+          },
+          onCancel: () => t(!1),
+          title: o.label?.text,
+          ...d
+        }
+      ),
+      p === "calendar" && /* @__PURE__ */ l(
+        S,
+        {
+          open: f,
+          value: n,
+          onSelect: (e) => {
+            t(!1), s(e);
+          },
+          onCancel: () => t(!1),
+          title: o.label?.text,
+          ...d
+        }
+      )
+    ] });
+  }
+);
+export {
+  G as DateField
+};

package/dist/components/date-field/input.js

@@ -0,0 +1,53 @@
+import { jsx as D } from "react/jsx-runtime";
+import { getPrefixClassName as N } from "../../utils/classname.js";
+import { dayjs as h } from "../../utils/date.js";
+import { forwardRef as R, useState as T, useRef as p, useImperativeHandle as Y, useEffect as j } from "react";
+import w from "classnames";
+const E = N("date-field-input"), P = R((t, a) => {
+  const { value: e, onChange: n, onCompleted: c, defaultValue: o, ...I } = t, y = e !== void 0, [x, u] = T(() => e ? i(e) : t.defaultValue ? i(t.defaultValue) : ""), m = p(null), f = p("");
+  return Y(a, () => m.current), j(
+    () => {
+      e !== void 0 && u(i(e));
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e?.getTime()]
+  ), /* @__PURE__ */ D(
+    "input",
+    {
+      inputMode: "numeric",
+      ...I,
+      className: w(E, t.className),
+      value: x,
+      onChange: (l) => {
+        let s = l.target.selectionEnd || 0;
+        const r = g(l.target.value), C = f.current.length > l.target.value.length;
+        if (f.current = r, C || [2, 3, 5, 6].includes(s) && (s += 1), u(r), setTimeout(() => {
+          l.target.setSelectionRange(s, s);
+        }), r.length === 10) {
+          const d = V(r);
+          d && c?.(d, s);
+        }
+      },
+      onBlur: (l) => {
+        const s = g(l.target.value), r = V(s);
+        y ? (u(e ? i(e) : ""), f.current = "", n?.(r)) : h(r).isValid() ? (u(i(r)), n?.(r)) : (u(""), f.current = "", e !== null && n?.(null)), t.onBlur?.(l);
+      },
+      ref: m
+    }
+  );
+}), g = (t) => {
+  const a = t.replace(/\D/g, ""), e = a.slice(0, 2), n = a.slice(2, 4), c = a.slice(4, 8);
+  let o = "";
+  return e && (o += e + (e.length === 2 ? "/" : "")), n && (o += n + (n.length === 2 ? "/" : "")), c && (o += c), o;
+}, i = (t) => t ? h(t).format("DD/MM/YYYY") : "", V = (t) => {
+  if (!t || t.length !== 10) return null;
+  const [a, e, n] = t.split("/");
+  try {
+    return new Date(parseInt(n), parseInt(e) - 1, parseInt(a));
+  } catch {
+    return null;
+  }
+};
+export {
+  P as Input
+};