@robert-stackflow/oneui 0.0.0-stage → 0.2.0

package/components/TableColumnFilter.d.ts

@@ -0,0 +1,6 @@
+export declare function TableColumnFilter({ label, options, value, onChange, }: {
+    label: string;
+    options: string[];
+    value: string[];
+    onChange(value: string[]): void;
+}): import("react").JSX.Element;

package/components/TableColumnFilter.js

@@ -0,0 +1,76 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { ListFilter } from "lucide-react";
+import { Popover } from "./Popover.js";
+import { MenuItem } from "./MenuItem.js";
+import { Button } from "./Button.js";
+import { usePopover } from "./usePopover.js";
+import { moveMenuFocus } from "./menuFocus.js";
+import s from "./DataTable.module.css";
+function TableColumnFilter({
+  label,
+  options,
+  value,
+  onChange
+}) {
+  const pop = usePopover(), list = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ref: pop.anchor,
+        className: s.filter,
+        "aria-label": "\u7B5B\u9009" + label,
+        "aria-expanded": pop.open,
+        "aria-haspopup": "dialog",
+        "data-active": value.length > 0,
+        onClick: pop.toggle,
+        children: /* @__PURE__ */ jsx(ListFilter, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        label: label + "\u7B5B\u9009",
+        width: 210,
+        onKeyDown: (event) => moveMenuFocus(event, list.current),
+        children: [
+          /* @__PURE__ */ jsx("div", { ref: list, className: s.filterPanel, children: options.map((option) => {
+            const checked = value.includes(option);
+            return /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                role: "checkbox",
+                "aria-checked": checked,
+                label: option,
+                selected: checked,
+                selection: "checkbox",
+                onClick: () => onChange(
+                  checked ? value.filter((item) => item !== option) : [...value, option]
+                )
+              },
+              option
+            );
+          }) }),
+          /* @__PURE__ */ jsx("div", { className: s.filterReset, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              variant: "ghost",
+              disabled: !value.length,
+              onClick: () => onChange([]),
+              children: "\u91CD\u7F6E\u7B5B\u9009"
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  TableColumnFilter
+};

package/components/TableColumnVisibility.d.ts

@@ -0,0 +1,11 @@
+export type TableVisibilityColumn = {
+    key: string;
+    label: string;
+    hideable?: boolean;
+};
+export declare function TableColumnVisibility({ columns, value, onChange, label, }: {
+    columns: TableVisibilityColumn[];
+    value: string[];
+    onChange(keys: string[]): void;
+    label?: string;
+}): import("react").JSX.Element;

package/components/TableColumnVisibility.js

@@ -0,0 +1,76 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { moveMenuFocus } from "./menuFocus.js";
+import { useId, useRef } from "react";
+import { Columns3 } from "lucide-react";
+import { Button } from "./Button.js";
+import { MenuItem } from "./MenuItem.js";
+import { Popover } from "./Popover.js";
+import { usePopover } from "./usePopover.js";
+import s from "./DataTable.module.css";
+function TableColumnVisibility({
+  columns,
+  value,
+  onChange,
+  label = "\u663E\u793A\u5217"
+}) {
+  const pop = usePopover(), id = useId(), root = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref: pop.anchor,
+        "aria-label": label,
+        "aria-haspopup": "menu",
+        "aria-expanded": pop.open,
+        "aria-controls": id,
+        onClick: pop.toggle,
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown" && !pop.open) {
+            event.preventDefault();
+            pop.toggle();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx(Columns3, {}),
+          "\u663E\u793A\u5217"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        anchor: pop.anchor,
+        open: pop.open,
+        onClose: pop.close,
+        id,
+        role: "menu",
+        label,
+        width: 230,
+        onKeyDown: (event) => moveMenuFocus(event, root.current),
+        children: /* @__PURE__ */ jsx("div", { ref: root, className: s.columnMenu, children: columns.map((column) => {
+          const selected = value.includes(column.key);
+          return /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              role: "menuitemcheckbox",
+              "aria-checked": selected,
+              label: column.label,
+              selected,
+              selection: "checkbox",
+              disabled: column.hideable === false || selected && value.length === 1,
+              onClick: () => onChange(
+                selected ? value.filter((key) => key !== column.key) : columns.filter(
+                  (item) => value.includes(item.key) || item.key === column.key
+                ).map((item) => item.key)
+              )
+            },
+            column.key
+          );
+        }) })
+      }
+    )
+  ] });
+}
+export {
+  TableColumnVisibility
+};

package/components/Tabs.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export declare function Tabs({ tabs, value, onChange, label, variant, }: {
+    tabs: {
+        id: string;
+        label: string;
+        content?: ReactNode;
+        disabled?: boolean;
+    }[];
+    value: string;
+    onChange: (v: string) => void;
+    label?: string;
+    variant?: "underline" | "segment";
+}): import("react").JSX.Element;

package/components/Tabs.js

@@ -0,0 +1,49 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import s from "./Tabs.module.css";
+import { useId } from "react";
+import { TabList } from "./TabList.js";
+function Tabs({
+  tabs,
+  value,
+  onChange,
+  label = "\u9009\u9879",
+  variant = "underline"
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TabList,
+      {
+        value,
+        onChange,
+        label,
+        variant: variant === "segment" ? "blocked" : "underlined",
+        options: tabs.map((t) => ({
+          value: t.id,
+          label: t.label,
+          disabled: t.disabled,
+          id: id + t.id,
+          panelId: t.content ? id + "panel" + t.id : void 0
+        }))
+      }
+    ),
+    tabs.map(
+      (t) => t.content && /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "tabpanel",
+          id: id + "panel" + t.id,
+          "aria-labelledby": id + t.id,
+          hidden: value !== t.id,
+          tabIndex: 0,
+          className: s.panel,
+          children: t.content
+        },
+        t.id
+      )
+    )
+  ] });
+}
+export {
+  Tabs
+};

package/components/Tabs.module.css

@@ -0,0 +1,3 @@
+.panel {
+  padding: 20px 0;
+}

package/components/TagInput.d.ts

@@ -0,0 +1,11 @@
+import { type FieldOptions } from "./field";
+export declare function TagInput({ value, onChange, label, placeholder, maxTags, maxTagLength, caseSensitive, validateTag, ...props }: FieldOptions & {
+    value: string[];
+    onChange(value: string[]): void;
+    label?: string;
+    placeholder?: string;
+    maxTags?: number;
+    maxTagLength?: number;
+    caseSensitive?: boolean;
+    validateTag?(tag: string): string | undefined;
+}): import("react").JSX.Element;

package/components/TagInput.js

@@ -0,0 +1,142 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { SelectionTag } from "./SelectionTag.js";
+import { FormField } from "./FormField.js";
+import { joinIds, useFieldControl } from "./field.js";
+import s from "./TagInput.module.css";
+function TagInput({
+  value,
+  onChange,
+  label,
+  placeholder = "\u8F93\u5165\u540E\u6309\u56DE\u8F66",
+  maxTags = Infinity,
+  maxTagLength = 32,
+  caseSensitive = false,
+  validateTag,
+  ...props
+}) {
+  const field = useFieldControl({ ...props, label }), input = useRef(null), root = useRef(null), [draft, setDraft] = useState(""), [error, setError] = useState("");
+  const add = (texts) => {
+    if (field.disabled || field.readOnly) return;
+    const next = [...value];
+    let problem = "";
+    for (const raw of texts) {
+      const tag = raw.trim();
+      if (!tag) continue;
+      if (tag.length > maxTagLength) {
+        problem = "\u5355\u4E2A\u6807\u7B7E\u6700\u591A " + maxTagLength + " \u4E2A\u5B57\u7B26\u3002";
+        continue;
+      }
+      const custom = validateTag?.(tag);
+      if (custom) {
+        problem = custom;
+        continue;
+      }
+      if (next.some(
+        (item) => caseSensitive ? item === tag : item.toLowerCase() === tag.toLowerCase()
+      )) {
+        problem = "\u8BE5\u6807\u7B7E\u5DF2\u5B58\u5728\u3002";
+        continue;
+      }
+      if (next.length >= maxTags) {
+        problem = "\u6700\u591A\u53EF\u6DFB\u52A0 " + maxTags + " \u4E2A\u6807\u7B7E\u3002";
+        continue;
+      }
+      next.push(tag);
+    }
+    if (next.length !== value.length) {
+      onChange(next);
+      setDraft("");
+    }
+    setError(problem);
+  };
+  const remove = (index) => {
+    if (field.disabled || field.readOnly) return;
+    onChange(value.filter((_, i) => i !== index));
+    setError("");
+    input.current?.focus();
+  };
+  const control = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: root,
+        className: s.control,
+        "data-disabled": field.disabled,
+        "data-readonly": field.readOnly || void 0,
+        "aria-invalid": field.invalid || !!error,
+        onClick: () => input.current?.focus(),
+        children: [
+          value.map((tag, index) => /* @__PURE__ */ jsx(
+            SelectionTag,
+            {
+              label: tag,
+              disabled: field.disabled,
+              onRemove: field.readOnly ? void 0 : () => remove(index)
+            },
+            tag
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: input,
+              id: field.id,
+              "aria-label": field.label || void 0,
+              disabled: field.disabled,
+              readOnly: field.readOnly,
+              "aria-required": field.required || void 0,
+              "aria-invalid": field.invalid || !!error,
+              "aria-describedby": joinIds(
+                field.descriptionId,
+                error ? field.id + "-tag-error" : void 0
+              ),
+              value: draft,
+              placeholder: field.readOnly ? void 0 : placeholder,
+              maxLength: maxTagLength + 1,
+              onChange: (event) => {
+                setDraft(event.target.value);
+                setError("");
+              },
+              onKeyDown: (event) => {
+                if (event.nativeEvent.isComposing) return;
+                if (event.key === "Enter" || event.key === "," || event.key === ";") {
+                  event.preventDefault();
+                  add([draft]);
+                } else if (event.key === "Backspace" && !draft && value.length)
+                  root.current?.querySelectorAll("button")[value.length - 1]?.focus();
+                else if (event.key === "Escape") {
+                  event.preventDefault();
+                  setDraft("");
+                  setError("");
+                }
+              },
+              onPaste: (event) => {
+                if (field.readOnly) return;
+                const text = event.clipboardData.getData("text/plain");
+                if (/[\n,;，；]/.test(text)) {
+                  event.preventDefault();
+                  add(text.split(/[\n,;，；]+/));
+                }
+              }
+            }
+          ),
+          field.name && value.map((tag) => /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "hidden",
+              name: field.name,
+              value: tag,
+              disabled: field.disabled
+            },
+            tag
+          ))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { id: field.id + "-tag-error", className: s.error, role: "alert", children: error })
+  ] });
+  return field.wrapped ? control : /* @__PURE__ */ jsx(FormField, { ...field, children: control });
+}
+export {
+  TagInput
+};

package/components/TagInput.module.css

@@ -0,0 +1,64 @@
+.control {
+  composes: surface from "./Control.module.css";
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 5px;
+  padding: 4px 6px;
+}
+.control.control {
+  height: auto;
+  min-height: var(--control-height);
+}
+.control > input:not([type="hidden"]) {
+  flex: 1;
+  min-width: 90px;
+  width: 90px;
+  height: 24px;
+  padding: 0 4px;
+  border: 0;
+  outline: 0;
+  background: transparent;
+  font-size: inherit;
+}
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  min-height: 23px;
+  padding: 2px 5px 2px 8px;
+  background: var(--selected);
+  border-radius: 5px;
+  font-size: 11px;
+  line-height: 17px;
+}
+.tag > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tag button {
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  border-radius: 3px;
+  color: var(--muted);
+}
+.tag button:hover:not(:disabled) {
+  background: var(--hover);
+  color: var(--fg);
+}
+.tag svg {
+  width: 12px;
+  height: 12px;
+}
+.error {
+  font-size: 11px;
+  color: var(--danger);
+  margin: 0;
+}

package/components/Textarea.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithRef } from "react";
+export declare function Textarea({ label, error, hint, ...props }: ComponentPropsWithRef<"textarea"> & {
+    label?: string;
+    error?: string;
+    hint?: string;
+}): import("react").JSX.Element;

package/components/Textarea.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { FormField } from "./FormField.js";
+import { fieldInputProps, useFieldControl } from "./field.js";
+import s from "./Textarea.module.css";
+function Textarea({
+  label,
+  error,
+  hint,
+  ...props
+}) {
+  const field = useFieldControl({ ...props, label, error, hint });
+  const control = /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ...props,
+      ...fieldInputProps(field),
+      className: [s.textarea, props.className].filter(Boolean).join(" ")
+    }
+  );
+  return field.wrapped ? control : /* @__PURE__ */ jsx(FormField, { ...field, children: control });
+}
+export {
+  Textarea
+};

package/components/Textarea.module.css

@@ -0,0 +1,9 @@
+.textarea {
+  composes: surface from "./Control.module.css";
+  width: 100%;
+  height: auto;
+  min-height: 88px;
+  resize: vertical;
+  padding: 8px 10px;
+  line-height: 1.6;
+}

package/components/ThemePicker.d.ts

@@ -0,0 +1,6 @@
+type Mode = "system" | "light" | "dark";
+export declare function ThemePicker({ value, onChange, }: {
+    value: Mode;
+    onChange(value: Mode): void;
+}): import("react").JSX.Element;
+export {};

package/components/ThemePicker.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Monitor, Sun, Moon } from "lucide-react";
+import s from "./ThemePicker.module.css";
+function ThemePicker({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: s.choices, role: "group", "aria-label": "\u989C\u8272\u6A21\u5F0F", children: [
+    { id: "system", label: "\u8DDF\u968F\u7CFB\u7EDF", Icon: Monitor },
+    { id: "light", label: "\u6D45\u8272", Icon: Sun },
+    { id: "dark", label: "\u6DF1\u8272", Icon: Moon }
+  ].map(({ id, label, Icon }) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: s.choice,
+      "aria-pressed": value === id,
+      onClick: () => onChange(id),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: s.preview, "data-mode": id, "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxs("span", { className: s.window, children: [
+            /* @__PURE__ */ jsxs("span", { className: s.bar, children: [
+              /* @__PURE__ */ jsx("i", {}),
+              /* @__PURE__ */ jsx("i", {}),
+              /* @__PURE__ */ jsx("i", {})
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: s.body, children: [
+              /* @__PURE__ */ jsxs("span", { className: s.rail, children: [
+                /* @__PURE__ */ jsx("b", {}),
+                /* @__PURE__ */ jsx("b", {}),
+                /* @__PURE__ */ jsx("b", {})
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: s.content, children: [
+                /* @__PURE__ */ jsx("i", {}),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("b", {}),
+                  /* @__PURE__ */ jsx("b", {})
+                ] }),
+                /* @__PURE__ */ jsx("i", {}),
+                /* @__PURE__ */ jsx("i", {})
+              ] })
+            ] })
+          ] }),
+          id === "system" && /* @__PURE__ */ jsxs("span", { className: s.second, children: [
+            /* @__PURE__ */ jsxs("span", { className: s.bar, children: [
+              /* @__PURE__ */ jsx("i", {}),
+              /* @__PURE__ */ jsx("i", {}),
+              /* @__PURE__ */ jsx("i", {})
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: s.body, children: [
+              /* @__PURE__ */ jsxs("span", { className: s.rail, children: [
+                /* @__PURE__ */ jsx("b", {}),
+                /* @__PURE__ */ jsx("b", {})
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: s.content, children: [
+                /* @__PURE__ */ jsx("i", {}),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  /* @__PURE__ */ jsx("b", {}),
+                  /* @__PURE__ */ jsx("b", {})
+                ] }),
+                /* @__PURE__ */ jsx("i", {})
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: s.caption, children: [
+          /* @__PURE__ */ jsx(Icon, {}),
+          label,
+          /* @__PURE__ */ jsx("span", { className: s.check, "data-selected": value === id, children: /* @__PURE__ */ jsx(Check, {}) })
+        ] })
+      ]
+    },
+    id
+  )) });
+}
+export {
+  ThemePicker
+};