@wisdomgarden/torque 0.1.0

package/dist/components/_inner/menu/_web/menu-web.module.css.js

@@ -0,0 +1,18 @@
+"use client";
+const e = "_labelHeader_149om_2", a = "_submenuIconWrap_149om_6", n = "_submenuIcon_149om_6", o = "_dangerous_149om_16", s = "_relative_149om_20", l = "_disabledOverlay_149om_24", _ = {
+  labelHeader: e,
+  submenuIconWrap: a,
+  submenuIcon: n,
+  dangerous: o,
+  relative: s,
+  disabledOverlay: l
+};
+export {
+  o as dangerous,
+  _ as default,
+  l as disabledOverlay,
+  e as labelHeader,
+  s as relative,
+  n as submenuIcon,
+  a as submenuIconWrap
+};

package/dist/components/_inner/menu/_web/menu.web.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { MenuProps } from '../../../menu/menu.types';
+/**
+ * 下拉菜单Pc端适配
+ */
+export declare const MenuWeb: ({ menuItems, onClick, children, disabled, triggerAriaLabel, renderTarget, trigger, position, "data-testid": dataTestId, }: MenuProps) => React.JSX.Element;

package/dist/components/_inner/menu/_web/menu.web.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsx as n, Fragment as m, jsxs as u } from "react/jsx-runtime";
+import { Menu as c, Text as E, Box as S } from "@mantine/core";
+import { Icon as p } from "@wisdomgarden/torque-icons";
+import d, { useState as M, useRef as P } from "react";
+import { IconButton as x } from "../../../icon-button/icon-button.js";
+import { Tooltip as T } from "../../../tooltip/index.js";
+import i from "./menu-web.module.css.js";
+const H = ({
+  menuItems: e,
+  onClick: l,
+  children: t,
+  disabled: a,
+  triggerAriaLabel: h,
+  renderTarget: b,
+  trigger: s = "click-hover",
+  position: y,
+  "data-testid": g
+}) => {
+  const [f, A] = M(!1), I = P(null), r = b?.({ opened: f }) ?? t, v = () => {
+    I.current?.focus({ preventScroll: !0 });
+  };
+  if (a) {
+    const o = d.isValidElement(r) ? r.props : void 0;
+    return /* @__PURE__ */ n(m, { children: d.isValidElement(r) ? d.cloneElement(
+      r,
+      {
+        disabled: !0,
+        "data-testid": g ?? o?.["data-testid"]
+      }
+    ) : r });
+  }
+  const N = d.isValidElement(r) ? r.props : void 0;
+  return /* @__PURE__ */ u(
+    c,
+    {
+      trigger: s,
+      opened: f,
+      onChange: A,
+      position: y,
+      children: [
+        /* @__PURE__ */ n(c.Target, { ref: I, children: d.isValidElement(r) ? d.cloneElement(
+          r,
+          {
+            "aria-label": h ?? N?.["aria-label"],
+            "data-testid": g ?? N?.["data-testid"]
+          }
+        ) : r }),
+        /* @__PURE__ */ n(c.Dropdown, { children: e.map(
+          (o, C) => o.children && o.children.length > 0 ? /* @__PURE__ */ n(
+            k,
+            {
+              target: o,
+              subItems: o.children,
+              onClick: l,
+              onAction: v
+            },
+            o.value ?? o.label ?? C
+          ) : /* @__PURE__ */ n(
+            O,
+            {
+              item: o,
+              onClick: l,
+              onAction: v
+            },
+            o.value ?? o.label ?? C
+          )
+        ) })
+      ]
+    }
+  );
+}, k = (e) => /* @__PURE__ */ u(c.Sub, { children: [
+  /* @__PURE__ */ n(c.Sub.Target, { children: /* @__PURE__ */ n(R, { ...e }) }),
+  /* @__PURE__ */ n(c.Sub.Dropdown, { children: e.subItems.map((l, t) => l.children && l.children.length > 0 ? /* @__PURE__ */ n(
+    k,
+    {
+      target: l,
+      subItems: l.children,
+      onClick: e.onClick,
+      onAction: e.onAction
+    },
+    l.value ?? l.label ?? t
+  ) : /* @__PURE__ */ n(
+    O,
+    {
+      item: l,
+      onClick: e.onClick,
+      onAction: e.onAction
+    },
+    l.value ?? l.label ?? t
+  )) })
+] }), O = ({
+  item: e,
+  onClick: l,
+  onAction: t
+}) => {
+  const a = e.type ?? "option";
+  return a === "divider" || a === "thick-divider" ? /* @__PURE__ */ n(c.Divider, {}) : a === "label" ? /* @__PURE__ */ n(c.Label, { children: e.label }) : /* @__PURE__ */ n(B, { item: e, onClick: l, onAction: t });
+};
+function w(e) {
+  return /* @__PURE__ */ u(m, { children: [
+    e.description && /* @__PURE__ */ n(E, { className: i.labelHeader, fz: 12, lh: "20px", children: e.description }),
+    e.rightIconButtonProps && /* @__PURE__ */ n(
+      T,
+      {
+        label: e.rightIconTooltip ?? "",
+        disabled: !e.rightIconTooltip || e.disabled,
+        children: /* @__PURE__ */ n(
+          x,
+          {
+            variant: "text",
+            color: "regular",
+            iconClassName: i.submenuIcon,
+            ...e.rightIconButtonProps,
+            "aria-label": e.rightIconButtonProps["aria-label"] || e.rightIconTooltip,
+            renderRoot: (l) => /* @__PURE__ */ n(S, { role: "button", ...l })
+          }
+        )
+      }
+    ),
+    e.children && e.children.length > 0 && /* @__PURE__ */ n(S, { w: 22, h: 22, className: i.submenuIconWrap, children: /* @__PURE__ */ n(
+      p,
+      {
+        name: "right",
+        width: 16,
+        height: 16,
+        className: i.submenuIcon
+      }
+    ) })
+  ] });
+}
+function B({
+  item: e,
+  onClick: l,
+  onAction: t
+}) {
+  const a = e.dangerous && !e.disabled, h = e.labelClassName ?? (a ? i.dangerous : void 0), b = e.leftIconClassName ?? (a ? i.dangerous : void 0);
+  return /* @__PURE__ */ u("div", { className: i.relative, children: [
+    e.disabled && e.disabledTooltip && /* @__PURE__ */ n(T, { label: e.disabledTooltip, children: /* @__PURE__ */ n(
+      "div",
+      {
+        className: i.disabledOverlay,
+        onClickCapture: (s) => s.stopPropagation()
+      }
+    ) }),
+    /* @__PURE__ */ n(
+      c.Item,
+      {
+        component: "button",
+        type: "button",
+        "data-testid": e["data-testid"],
+        classNames: {
+          itemLabel: h
+        },
+        leftSection: e.leftIconName && /* @__PURE__ */ n(
+          p,
+          {
+            name: e.leftIconName,
+            width: 16,
+            height: 16,
+            className: b,
+            useOriginalColor: e.leftUseOriginalColor
+          }
+        ),
+        rightSection: w(e),
+        disabled: e.disabled,
+        onClick: (s) => {
+          t(), e.onClick && e.onClick(s, e), l && l(s, e);
+        },
+        children: e.label
+      }
+    )
+  ] });
+}
+function R({
+  target: e,
+  subItems: l,
+  ref: t,
+  ...a
+}) {
+  return /* @__PURE__ */ n(
+    c.Sub.Item,
+    {
+      ref: t,
+      component: "button",
+      type: "button",
+      "data-testid": e["data-testid"],
+      leftSection: e.leftIconName && /* @__PURE__ */ n(p, { name: e.leftIconName, width: 16, height: 16 }),
+      disabled: e.disabled,
+      rightSection: w(e),
+      ...a,
+      children: e.label
+    }
+  );
+}
+export {
+  H as MenuWeb
+};

package/dist/components/_inner/number/number-input-left.d.ts

@@ -0,0 +1,5 @@
+import { BaseInputProps } from '../../base-input';
+import { NumberInputStyleProps } from '../../number-input/number-input.types';
+export declare const NumberInputLeft: (props: BaseInputProps & NumberInputStyleProps & {
+    readonly onValueSet: (value: number) => void;
+}) => false | import("react").JSX.Element;

package/dist/components/_inner/number/number-input-left.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { Icon as d } from "@wisdomgarden/torque-icons";
+import o from "./number.module.css.js";
+const r = (e) => {
+  const i = e.step ?? 1, t = !!(e.disabled || e.readOnly), s = (l) => {
+    l.preventDefault(), l.stopPropagation(), !(t || a()) && (e.value ? e.onValueSet(Number(e.value) - i) : e.onValueSet(-i));
+  }, a = () => !!(e.value && Number(e.value) <= (e.min ?? -1 / 0));
+  return e.buttonPosition === "both-sides" && /* @__PURE__ */ n(
+    "div",
+    {
+      className: o.sideControl,
+      "data-side": "start",
+      "data-disabled": t,
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          className: o.actionButton,
+          "data-limited": t || a(),
+          onMouseDown: s,
+          children: /* @__PURE__ */ n(d, { name: "minus", width: 16, height: 16 })
+        }
+      )
+    }
+  );
+};
+export {
+  r as NumberInputLeft
+};

package/dist/components/_inner/number/number-input-right.d.ts

@@ -0,0 +1,6 @@
+import { BaseInputProps } from '../../base-input';
+import { NumberInputStyleProps } from '../../number-input/number-input.types';
+export declare const NumberInputRight: (props: BaseInputProps & NumberInputStyleProps & {
+    readonly onValueSet: (value: number) => void;
+    readonly mouseEnter: boolean;
+}) => import("react").JSX.Element;

package/dist/components/_inner/number/number-input-right.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsxs as s, Fragment as h, jsx as t } from "react/jsx-runtime";
+import { Icon as o } from "@wisdomgarden/torque-icons";
+import i from "./number.module.css.js";
+const f = (e) => {
+  const d = e.step ?? 1, n = !!(e.disabled || e.readOnly), u = (a) => {
+    a.preventDefault(), a.stopPropagation(), !(n || l()) && (e.value ? e.onValueSet(Number(e.value) + d) : e.onValueSet(d));
+  }, m = (a) => {
+    a.preventDefault(), a.stopPropagation(), !(n || c()) && (e.value ? e.onValueSet(Number(e.value) - d) : e.onValueSet(-d));
+  }, c = () => !!(e.value && Number(e.value) <= (e.min ?? -1 / 0)), l = () => !!(e.value && Number(e.value) >= (e.max ?? 1 / 0));
+  return /* @__PURE__ */ s(h, { children: [
+    e.buttonPosition === "both-sides" && /* @__PURE__ */ t(
+      "div",
+      {
+        className: i.sideControl,
+        "data-side": "end",
+        "data-disabled": n,
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: i.actionButton,
+            "data-limited": n || l(),
+            onMouseDown: u,
+            children: /* @__PURE__ */ t(o, { name: "add", width: 16, height: 16 })
+          }
+        )
+      }
+    ),
+    e.buttonPosition === "end-side" && e.mouseEnter && /* @__PURE__ */ s(
+      "div",
+      {
+        className: i.sideControl,
+        "data-side": "end",
+        "data-disabled": n,
+        children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: i.actionButton,
+              "data-limited": n || l(),
+              onMouseDown: u,
+              children: /* @__PURE__ */ t(o, { name: "up", width: 14, height: 14 })
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: i.divider }),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: i.actionButton,
+              "data-limited": n || c(),
+              onMouseDown: m,
+              children: /* @__PURE__ */ t(o, { name: "down", width: 14, height: 14 })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  f as NumberInputRight
+};

package/dist/components/_inner/number/number.module.css.js

@@ -0,0 +1,12 @@
+"use client";
+const t = "_sideControl_19ls9_2", o = "_actionButton_19ls9_28", s = "_divider_19ls9_57", n = {
+  sideControl: t,
+  actionButton: o,
+  divider: s
+};
+export {
+  o as actionButton,
+  n as default,
+  s as divider,
+  t as sideControl
+};

package/dist/components/_inner/table/head/table-head-filter-multi-select.d.ts

@@ -0,0 +1,25 @@
+import { TableColumn } from '../../../table/table.types';
+import { type OptionsDropDownEmptyState } from '../../dropdown/options-drop-down';
+import type { IconName } from '@wisdomgarden/torque-icons';
+/** 表格头筛选多选 */
+export declare const TableHeadFilterMultiSelect: <T>({ filterIconName, filterOptions, filterValue, onFilterChange, withTitle, fillCell, title, accessor, searchable, withPadding, immediateUpdate, emptyState, }: TableColumn<T> & {
+    readonly filterOptions?: {
+        label: string;
+        value: string;
+    }[];
+    readonly filterIconName?: IconName;
+    readonly filterValue?: string[];
+    readonly onFilterChange?: (val: string[]) => void;
+    /** 是否显示标题 默认true */
+    readonly withTitle?: boolean;
+    /** 是否填充满单元格 默认true */
+    readonly fillCell?: boolean;
+    /** 是否可搜索 默认true */
+    readonly searchable?: boolean;
+    /** 是否在两边显示padding 默认true */
+    readonly withPadding?: boolean;
+    /** 是否立即更新 默认false */
+    readonly immediateUpdate?: boolean;
+    /** 下拉列表空态配置 */
+    readonly emptyState?: OptionsDropDownEmptyState;
+}) => import("react").JSX.Element;

package/dist/components/_inner/table/head/table-head-filter-multi-select.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import { useInputState as M } from "@mantine/hooks";
+import { Icon as P } from "@wisdomgarden/torque-icons";
+import { clsx as x } from "clsx";
+import { useState as g, useMemo as K } from "react";
+import "../../../../provider/ui-context.js";
+import { useLocale as R } from "../../../../provider/hooks.js";
+import { Button as y } from "../../../button/button.js";
+import { Combobox as C } from "../../../combobox/combobox.js";
+import { useCombobox as q } from "../../../combobox/hooks/use-combobox.js";
+import { useComboboxSearchInput as E } from "../../../combobox/hooks/use-combobox-search-input.js";
+import { TextInput as G } from "../../../text-input/text-input.js";
+import { UnstyledButton as J } from "../../../unstyled-button/unstyled-button.js";
+import { OptionsDropDown as Q } from "../../dropdown/options-drop-down.js";
+import { TruncatedHeaderTitle as U } from "../table-header-title.js";
+import e from "./table-head.module.css.js";
+const me = ({
+  filterIconName: a = "arrow-down-filled",
+  filterOptions: n = [],
+  filterValue: t,
+  onFilterChange: h,
+  withTitle: I = !0,
+  fillCell: w = !0,
+  title: s,
+  accessor: p,
+  searchable: T = !0,
+  withPadding: N = !0,
+  immediateUpdate: f = !1,
+  emptyState: k
+}) => {
+  const i = R(), [c, b] = M(""), [l, m] = g(t || []), [B, v] = g(t), u = q({
+    onDropdownClose: () => {
+      m(t || []), b("");
+    }
+  });
+  B !== t && (v(t), m(t || []));
+  const D = K(() => c ? n.filter(
+    (r) => r.label.toLowerCase().includes(c.toLowerCase())
+  ) : n, [n, c]), O = (r) => {
+    const S = l.includes(r) ? l.filter((H) => H !== r) : [...l, r];
+    m(S), f && h?.(S);
+  }, z = () => {
+    h?.(l), u.close();
+  }, F = () => {
+    m([]);
+  }, L = Array.isArray(t) && t.length > 0, j = T ? /* @__PURE__ */ o(
+    W,
+    {
+      placeholder: i.pleaseSearch,
+      value: c,
+      onChange: b,
+      leftIconName: "search",
+      className: e.searchInput,
+      size: "sm"
+    }
+  ) : null, A = f ? null : /* @__PURE__ */ d("div", { className: e.footer, children: [
+    /* @__PURE__ */ o(
+      y,
+      {
+        variant: "stroke",
+        color: "regular",
+        size: "md",
+        className: e.footerButton,
+        onClick: F,
+        "aria-label": i.reset,
+        children: i.reset
+      }
+    ),
+    /* @__PURE__ */ o(
+      y,
+      {
+        variant: "primary",
+        color: "brand",
+        size: "md",
+        onClick: z,
+        "aria-label": i.ok,
+        children: i.ok
+      }
+    )
+  ] });
+  return /* @__PURE__ */ d(
+    C,
+    {
+      store: u,
+      position: "bottom-start",
+      selectionBehavior: "keepOpen",
+      onOptionSubmit: (r) => O(String(r)),
+      children: [
+        /* @__PURE__ */ o(C.Target, { children: /* @__PURE__ */ d(
+          J,
+          {
+            "aria-label": typeof s == "string" ? s : String(p),
+            className: x(
+              e.control,
+              w && e.fillCell,
+              N && e.withPadding
+            ),
+            children: [
+              I && /* @__PURE__ */ o("span", { className: e.title, children: /* @__PURE__ */ o(U, { children: s || String(p) }) }),
+              /* @__PURE__ */ o(
+                P,
+                {
+                  name: a,
+                  width: 16,
+                  height: 16,
+                  className: x(
+                    e.filterIcon,
+                    u.opened && e.filterIconOpen,
+                    L ? e.textBrand : e.fillText
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ o(
+          Q,
+          {
+            options: D,
+            value: l,
+            multiSelect: !0,
+            header: j,
+            footer: A,
+            title: typeof s == "string" ? s : String(p),
+            emptyState: k
+          }
+        )
+      ]
+    }
+  );
+};
+function W(a) {
+  const n = E(a.onKeyDown);
+  return /* @__PURE__ */ o(G, { ...a, ...n });
+}
+export {
+  me as TableHeadFilterMultiSelect
+};

package/dist/components/_inner/table/head/table-head-filter-search.d.ts

@@ -0,0 +1,18 @@
+import type { TableColumn } from '../../../table/table.types';
+import type { IconName } from '@wisdomgarden/torque-icons';
+/** 表格头筛选搜索 */
+export declare const TableHeadFilterSearch: ({ filterIconName, filterValue, onFilterChange, opened: controlledOpened, onOpenedChange, withTitle, fillCell, title, accessor, withPadding, debounceWait, }: TableColumn & {
+    readonly filterIconName?: IconName;
+    readonly filterValue?: string;
+    readonly onFilterChange?: (val: string) => void;
+    readonly opened?: boolean;
+    readonly onOpenedChange?: (opened: boolean) => void;
+    /** 是否显示标题 默认true */
+    readonly withTitle?: boolean;
+    /** 是否填充满单元格 默认true */
+    readonly fillCell?: boolean;
+    /** 是否在两边显示padding 默认true */
+    readonly withPadding?: boolean;
+    /** 上抛防抖时间，默认 300ms */
+    readonly debounceWait?: number;
+}) => import("react").JSX.Element;

package/dist/components/_inner/table/head/table-head-filter-search.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { Icon as E } from "@wisdomgarden/torque-icons";
+import { useDebounceFn as H } from "ahooks";
+import { clsx as f } from "clsx";
+import { useState as i, useRef as h, useEffect as g } from "react";
+import "../../../../provider/ui-context.js";
+import { useLocale as P } from "../../../../provider/hooks.js";
+import { Popover as l } from "../../../popover/index.js";
+import { TextInput as q } from "../../../text-input/text-input.js";
+import { TruncatedHeaderTitle as z } from "../table-header-title.js";
+import n from "./table-head.module.css.js";
+const Z = ({
+  filterIconName: m = "search",
+  filterValue: t,
+  onFilterChange: x,
+  opened: T,
+  onOpenedChange: w,
+  withTitle: y = !0,
+  fillCell: F = !0,
+  title: b,
+  accessor: v,
+  withPadding: D = !0,
+  debounceWait: S = 300
+}) => {
+  const C = P(), [I, N] = i(!1), [O, a] = i(t || ""), [A, R] = i(t), r = h(!1), u = h(null), c = T ?? I, { run: j, cancel: s } = H(
+    (e) => {
+      r.current = !1, x?.(e);
+    },
+    { wait: S, leading: !1, trailing: !0 }
+  );
+  A !== t && (R(t), a(t || "")), g(() => {
+    r.current && (s(), r.current = !1);
+  }, [t, s]);
+  const d = (e) => {
+    r.current && (s(), r.current = !1, a(t || "")), w?.(e), N(e);
+  };
+  g(() => {
+    if (!c) return;
+    const e = requestAnimationFrame(() => {
+      u.current?.focus();
+    });
+    return () => cancelAnimationFrame(e);
+  }, [c]);
+  const k = !!t;
+  return /* @__PURE__ */ p(
+    l,
+    {
+      opened: c,
+      onOpenChange: d,
+      position: "bottom-start",
+      children: [
+        /* @__PURE__ */ o(l.Target, { children: /* @__PURE__ */ p(
+          "div",
+          {
+            className: f(
+              n.control,
+              F && n.fillCell,
+              D && n.withPadding
+            ),
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: (e) => {
+              (e.key === "Enter" || e.key === " ") && (e.preventDefault(), d(!c));
+            },
+            children: [
+              y && /* @__PURE__ */ o("span", { className: n.title, children: /* @__PURE__ */ o(z, { children: b || v }) }),
+              /* @__PURE__ */ o(
+                E,
+                {
+                  name: m,
+                  width: 16,
+                  height: 16,
+                  className: f(
+                    n.filterIconAnimated,
+                    k ? n.textBrand : n.fillText
+                  )
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ o(l.Dropdown, { matchTargetWidth: !0, className: n.filterDropdown, children: /* @__PURE__ */ o(
+          q,
+          {
+            ref: u,
+            placeholder: C.pleaseSearch,
+            value: O,
+            onChange: (e) => {
+              r.current = !0, a(e.target.value), j(e.target.value);
+            },
+            leftIconName: m,
+            size: "sm"
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  Z as TableHeadFilterSearch
+};

package/dist/components/_inner/table/head/table-head-filter-single-select.d.ts

@@ -0,0 +1,21 @@
+import { type OptionsDropDownEmptyState } from '../../dropdown/options-drop-down';
+import type { TableColumn } from '../../../table/table.types';
+import type { IconName } from '@wisdomgarden/torque-icons';
+/** 表格头筛选单选 */
+export declare const TableHeadFilterSingleSelect: <T>({ filterIconName, filterOptions, filterValue, onFilterChange, accessor, withTitle, fillCell, title, withPadding, emptyState, }: TableColumn<T> & {
+    readonly filterOptions?: {
+        label: string;
+        value: string;
+    }[];
+    readonly filterIconName?: IconName;
+    readonly filterValue?: string;
+    readonly onFilterChange?: (val: string) => void;
+    /** 是否显示标题文字 默认true */
+    readonly withTitle?: boolean;
+    /** 是否填充满单元格 默认true */
+    readonly fillCell?: boolean;
+    /** 是否在两边显示padding 默认true */
+    readonly withPadding?: boolean;
+    /** 下拉列表空态配置 */
+    readonly emptyState?: OptionsDropDownEmptyState;
+}) => import("react").JSX.Element;