@robert-stackflow/oneui 0.1.0 → 0.3.0

package/components/DialogVariants.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from "react";
+import type { FormController } from "./useFormState";
+type ShellProps = {
+    open: boolean;
+    onClose(): void;
+    title: string;
+    children: ReactNode;
+};
+type Result = void | boolean;
+export declare function MessageDialog({ open, onClose, title, children, tone, closeLabel, }: ShellProps & {
+    tone?: "info" | "success" | "warning" | "error";
+    closeLabel?: string;
+}): import("react").JSX.Element;
+export declare function ConfirmDialog({ open, onClose, title, children, onConfirm, danger, confirmLabel, cancelLabel, }: ShellProps & {
+    onConfirm(): Result | Promise<Result>;
+    danger?: boolean;
+    confirmLabel?: string;
+    cancelLabel?: string;
+}): import("react").JSX.Element;
+export declare function FormDialog<T extends Record<string, unknown>>({ open, onClose, title, children, onSubmit, controller, submitLabel, cancelLabel, wide, }: ShellProps & {
+    controller: FormController<T>;
+    onSubmit(values: T): Result | Promise<Result>;
+    submitLabel?: string;
+    cancelLabel?: string;
+    wide?: boolean;
+}): import("react").JSX.Element;
+export {};

package/components/DialogVariants.js

@@ -0,0 +1,161 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState
+} from "react";
+import { Dialog } from "./Dialog.js";
+import { Button } from "./Button.js";
+import { Form } from "./Form.js";
+import { Alert } from "./Alert.js";
+import s from "./DialogVariants.module.css";
+function useDialogAction(open, onClose) {
+  const [busy, setBusy] = useState(false), [error, setError] = useState(""), revision = useRef(0), close = useRef(onClose);
+  close.current = onClose;
+  useLayoutEffect(() => {
+    revision.current++;
+    setBusy(false);
+    setError("");
+    return () => {
+      revision.current++;
+    };
+  }, [open]);
+  const run = async (action) => {
+    if (busy) return;
+    const id = ++revision.current;
+    setBusy(true);
+    setError("");
+    try {
+      const result = await action();
+      if (id === revision.current && result !== false) close.current();
+    } catch (e) {
+      if (id === revision.current)
+        setError(e instanceof Error ? e.message : "\u64CD\u4F5C\u672A\u5B8C\u6210\uFF0C\u8BF7\u91CD\u8BD5");
+    } finally {
+      if (id === revision.current) setBusy(false);
+    }
+  };
+  return { busy, error, run };
+}
+function MessageDialog({
+  open,
+  onClose,
+  title,
+  children,
+  tone = "info",
+  closeLabel = "\u77E5\u9053\u4E86"
+}) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      size: "small",
+      variant: "message",
+      role: "alertdialog",
+      descriptionId: id,
+      footer: /* @__PURE__ */ jsx(Button, { variant: "primary", "data-dialog-initial-focus": true, onClick: onClose, children: closeLabel }),
+      children: /* @__PURE__ */ jsx("div", { id, "data-tone": tone, className: s.description, children })
+    }
+  );
+}
+function ConfirmDialog({
+  open,
+  onClose,
+  title,
+  children,
+  onConfirm,
+  danger = false,
+  confirmLabel = "\u786E\u8BA4",
+  cancelLabel = "\u53D6\u6D88"
+}) {
+  const action = useDialogAction(open, onClose), id = useId();
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      size: "small",
+      variant: "confirm",
+      role: "alertdialog",
+      descriptionId: id,
+      busy: action.busy,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            "data-dialog-initial-focus": true,
+            disabled: action.busy,
+            onClick: onClose,
+            children: cancelLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: danger ? "danger" : "primary",
+            className: danger ? s.destructive : void 0,
+            loading: action.busy,
+            onClick: () => void action.run(onConfirm),
+            children: confirmLabel
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ jsx("div", { id, className: s.description, children }),
+        action.error && /* @__PURE__ */ jsx("div", { className: s.feedback, children: /* @__PURE__ */ jsx(Alert, { tone: "danger", icon: false, children: action.error }) })
+      ]
+    }
+  );
+}
+function FormDialog({
+  open,
+  onClose,
+  title,
+  children,
+  onSubmit,
+  controller,
+  submitLabel = "\u4FDD\u5B58",
+  cancelLabel = "\u53D6\u6D88",
+  wide = false
+}) {
+  const action = useDialogAction(open, onClose), id = useId(), busy = action.busy || controller.isSubmitting;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open,
+      onClose,
+      title,
+      variant: "form",
+      wide,
+      busy,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Button, { disabled: busy, onClick: onClose, children: cancelLabel }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", form: id, variant: "primary", loading: busy, children: submitLabel })
+      ] }),
+      children: /* @__PURE__ */ jsxs(
+        Form,
+        {
+          id,
+          "aria-label": title,
+          className: s.fields,
+          controller,
+          onSubmit: (values) => action.run(() => onSubmit(values)),
+          children: [
+            children,
+            action.error && /* @__PURE__ */ jsx(Alert, { tone: "danger", icon: false, children: action.error })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  ConfirmDialog,
+  FormDialog,
+  MessageDialog
+};

package/components/DialogVariants.module.css

@@ -0,0 +1,29 @@
+.description {
+  padding-top: 2px;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.85;
+  overflow-wrap: anywhere;
+}
+.feedback {
+  margin-top: 16px;
+}
+.destructive {
+  background: var(--danger);
+  border-color: var(--danger);
+  color: var(--on-danger, #fff);
+}
+.destructive:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--danger) 86%, var(--surface));
+  border-color: transparent;
+}
+.fields {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}

package/components/HierarchyPicker.module.css

@@ -7,6 +7,7 @@
   margin: 3px 3px 8px;
 }
 .tree {
+  composes: stack from "./OptionList.module.css";
   max-height: 292px;
   overflow: auto;
   padding: 2px;
@@ -90,6 +91,11 @@
   font-size: 11px;
   color: var(--muted);
 }
+.footerActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 .columns {
   display: flex;
   min-height: 240px;
@@ -98,6 +104,7 @@
   overscroll-behavior: contain;
 }
 .column {
+  composes: stack from "./OptionList.module.css";
   flex: 1 0 170px;
   min-width: 170px;
   max-height: 292px;
@@ -110,8 +117,36 @@
     var(--separator-color);
 }
 .treeRow {
+  position: relative;
   animation: rowIn 140ms var(--ease);
 }
+.categoryRow {
+  --tree-elbow-gap: 6px;
+  --tree-stem-inset: 12px;
+  min-height: 42px;
+}
+.categoryRow[data-branch="true"] [data-menu-label] {
+  font-weight: 600;
+}
+.categoryRow [data-menu-icon] {
+  width: 26px;
+  height: 26px;
+  flex-basis: 26px;
+  border-radius: 7px;
+  background: var(--field);
+  border: 1px solid var(--line);
+  color: var(--muted);
+}
+.categoryRow[data-branch="true"] [data-menu-icon] {
+  background: var(--selected);
+  color: var(--accent);
+}
+.categoryRow [data-menu-trailing] > span {
+  border-radius: 999px;
+}
+.categoryRow .mixed {
+  border-radius: 999px;
+}
 .treeRow[aria-disabled="true"] .expander {
   pointer-events: none;
 }

package/components/IconButton.module.css

@@ -26,8 +26,11 @@
   min-width: 30px;
 }
 .iconButton[data-variant="primary"] {
-  background: var(--accent);
-  color: var(--on-accent);
+  background: var(--accent-fill, var(--accent));
+  color: var(--on-accent-fill, var(--on-accent));
+}
+.iconButton[data-variant="primary"]:hover:not(:disabled) {
+  background: var(--accent-fill-hover, var(--accent));
 }
 .iconButton[data-variant="secondary"] {
   border: 1px solid var(--border);

package/components/IconPicker.d.ts

@@ -1,6 +1,16 @@
-export declare function IconPicker({ value, onChange, label, disabled, }: {
+import { type ReactNode } from "react";
+import { type FieldOptions } from "./field";
+export type IconPickerOption = {
+    value: string;
+    label: string;
+    icon: ReactNode;
+    keywords?: string[];
+    category?: string;
+};
+export type IconPickerProps = FieldOptions & {
     value: string;
     onChange(value: string): void;
-    label?: string;
-    disabled?: boolean;
-}): import("react").JSX.Element;
+    options?: IconPickerOption[];
+    valuePrefix?: string;
+};
+export declare function IconPicker({ value, onChange, label, options, valuePrefix, ...props }: IconPickerProps): import("react").JSX.Element;

package/components/IconPicker.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Popover } from "./Popover.js";
 import { SearchField } from "./SearchField.js";
 import { CatalogIcon } from "./CatalogIcon.js";
@@ -10,16 +10,48 @@ import {
   VirtualPickerList
 } from "./VirtualPickerList.js";
 import { useIconCatalog, iconCategories } from "./iconCatalog.js";
+import { usePopover } from "./usePopover.js";
+import { useFieldControl, fieldTriggerProps } from "./field.js";
 import s from "./Picker.module.css";
 function IconPicker({
   value,
   onChange,
-  label = "\u56FE\u6807",
-  disabled = false
+  label,
+  options,
+  valuePrefix = "",
+  ...props
 }) {
-  const anchor = useRef(null), [open, setOpen] = useState(false), [query, setQuery] = useState("");
-  const { items, error, retry } = useIconCatalog(open);
+  const field = useFieldControl({ ...props, label }), pickerLabel = field.label || "\u56FE\u6807", blocked = field.disabled || field.readOnly, pop = usePopover(blocked), [query, setQuery] = useState("");
+  const name = valuePrefix && value.startsWith(valuePrefix) ? value.slice(valuePrefix.length) : value;
+  const selected = options?.find((option) => option.value === value);
+  const { items, error, retry } = useIconCatalog(
+    pop.open && options === void 0
+  );
   const groups = useMemo(() => {
+    if (options) {
+      const categories = /* @__PURE__ */ new Map();
+      for (const option of options) {
+        const category = option.category || "\u5168\u90E8";
+        if (!categories.has(category))
+          categories.set(category, {
+            id: category,
+            label: category,
+            items: []
+          });
+        categories.get(category).items.push({
+          id: option.value,
+          label: option.label,
+          content: option.icon,
+          search: [
+            option.value,
+            option.label,
+            category,
+            ...option.keywords || []
+          ].join(" ").toLowerCase()
+        });
+      }
+      return [...categories.values()];
+    }
     if (!items) return [];
     const indexed = items.map((icon) => ({
       id: icon.name,
@@ -40,43 +72,53 @@ function IconPicker({
         )
       })
     ).filter((group) => group.items.length);
-  }, [items]);
+  }, [items, options]);
   const choose = useCallback(
     (item) => {
-      onChange(item.id);
-      setOpen(false);
-      anchor.current?.focus();
+      if (blocked) return;
+      onChange(options ? item.id : valuePrefix + item.id);
+      pop.closeAndFocus();
     },
-    [onChange]
+    [onChange, blocked, options, valuePrefix, pop.closeAndFocus]
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       SelectTrigger,
       {
-        ref: anchor,
-        expanded: open,
-        disabled,
-        "aria-label": label,
+        ...fieldTriggerProps(field),
+        "aria-label": pickerLabel,
+        ref: pop.anchor,
+        expanded: pop.open,
+        "data-readonly": field.readOnly || void 0,
         "aria-haspopup": "dialog",
-        onClick: () => setOpen((x) => !x),
+        onClick: pop.toggle,
         onKeyDown: (e) => {
           if (e.key === "ArrowDown" || e.key === "ArrowUp") {
             e.preventDefault();
-            setOpen(true);
+            pop.show();
           }
         },
-        icon: /* @__PURE__ */ jsx(CatalogIcon, { name: value }),
-        children: /* @__PURE__ */ jsx("span", { children: value || "\u9009\u62E9\u56FE\u6807" })
+        icon: options ? selected?.icon : /* @__PURE__ */ jsx(CatalogIcon, { name }),
+        children: /* @__PURE__ */ jsx("span", { children: selected?.label || name || "\u9009\u62E9\u56FE\u6807" })
+      }
+    ),
+    field.name && /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "hidden",
+        name: field.name,
+        value,
+        disabled: field.disabled
       }
     ),
     /* @__PURE__ */ jsx(
       Popover,
       {
-        open,
-        onClose: () => setOpen(false),
-        anchor,
+        open: pop.open,
+        onClose: pop.close,
+        anchor: pop.anchor,
         width: 470,
-        label: label + "\u9009\u62E9\u5668",
+        label: pickerLabel + "\u9009\u62E9\u5668",
         children: /* @__PURE__ */ jsxs("div", { className: s.panel, children: [
           /* @__PURE__ */ jsx(
             SearchField,
@@ -87,18 +129,18 @@ function IconPicker({
               onChange: setQuery
             }
           ),
-          error ? /* @__PURE__ */ jsx(Button, { onClick: retry, children: "\u91CD\u65B0\u52A0\u8F7D" }) : !items ? /* @__PURE__ */ jsx("div", { className: s.loading, children: /* @__PURE__ */ jsx(Spinner, { label: "\u52A0\u8F7D\u56FE\u6807" }) }) : /* @__PURE__ */ jsx(
+          options === void 0 && error ? /* @__PURE__ */ jsx(Button, { onClick: retry, children: "\u91CD\u65B0\u52A0\u8F7D" }) : options === void 0 && !items ? /* @__PURE__ */ jsx("div", { className: s.loading, children: /* @__PURE__ */ jsx(Spinner, { label: "\u52A0\u8F7D\u56FE\u6807" }) }) : /* @__PURE__ */ jsx(
             VirtualPickerList,
             {
               groups,
               query,
-              value,
+              value: options ? value : name,
               label: "\u56FE\u6807",
               onChoose: choose
             }
           ),
           /* @__PURE__ */ jsx("div", { className: s.footer, children: /* @__PURE__ */ jsxs("span", { children: [
-            items?.length || 0,
+            options?.length ?? items?.length ?? 0,
             " \u4E2A\u56FE\u6807"
           ] }) })
         ] })

package/components/Indicator.module.css

@@ -42,7 +42,7 @@
   color: var(--fg);
 }
 .indicator button[aria-current="page"] {
-  color: var(--fg);
+  color: var(--navigation-active-color, var(--fg));
 }
 .indicator button:focus-visible {
   outline-offset: -2px;

package/components/Input.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentPropsWithRef, ReactNode } from "react";
-export declare function Input({ label, error, hint, leading, ...props }: ComponentPropsWithRef<"input"> & {
+export declare function Input({ label, error, hint, leading, trailing, ...props }: ComponentPropsWithRef<"input"> & {
     label?: string;
     error?: string;
     hint?: string;
     leading?: ReactNode;
+    trailing?: ReactNode;
 }): import("react").JSX.Element;

package/components/Input.js

@@ -7,6 +7,7 @@ function Input({
   error,
   hint,
   leading,
+  trailing,
   ...props
 }) {
   const field = useFieldControl({ ...props, label, error, hint });
@@ -18,10 +19,17 @@ function Input({
       className: [s.input, props.className].filter(Boolean).join(" ")
     }
   );
-  const content = leading ? /* @__PURE__ */ jsxs("div", { className: s.withIcon, children: [
-    /* @__PURE__ */ jsx("span", { className: s.leading, children: leading }),
-    control
-  ] }) : control;
+  const content = leading || trailing ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${s.withIcon} ${leading ? s.hasLeading : ""} ${trailing ? s.hasTrailing : ""}`,
+      children: [
+        leading && /* @__PURE__ */ jsx("span", { className: s.leading, children: leading }),
+        control,
+        trailing && /* @__PURE__ */ jsx("span", { className: s.trailing, children: trailing })
+      ]
+    }
+  ) : control;
   return field.wrapped ? content : /* @__PURE__ */ jsx(FormField, { ...field, children: content });
 }
 export {

package/components/Input.module.css

@@ -8,9 +8,26 @@
   width: 100%;
   min-width: 0;
 }
-.withIcon .input {
+.hasLeading .input {
   padding-left: 38px;
 }
+.hasTrailing .input {
+  padding-right: 36px;
+}
+.trailing {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  color: var(--muted);
+  pointer-events: none;
+}
+.trailing > svg {
+  width: 16px;
+  height: 16px;
+}
 .leading {
   position: absolute;
   left: 12px;

package/components/LoadingState.d.ts

@@ -1,5 +1,7 @@
-export declare function LoadingState({ variant, label, progress, }: {
+export declare function LoadingState({ variant, label, progress, showLabel, fullPage, }: {
     variant?: "spinner" | "dots" | "skeleton" | "progress";
     label?: string;
     progress?: number;
+    showLabel?: boolean;
+    fullPage?: boolean;
 }): import("react").JSX.Element;

package/components/LoadingState.js

@@ -6,23 +6,34 @@ import s from "./LoadingState.module.css";
 function LoadingState({
   variant = "spinner",
   label = "\u6B63\u5728\u52A0\u8F7D",
-  progress
+  progress,
+  showLabel = true,
+  fullPage = false
 }) {
   if (variant === "skeleton") return /* @__PURE__ */ jsx(SkeletonRows, { label });
-  return /* @__PURE__ */ jsxs("div", { className: s.loading, role: "status", "aria-label": label, children: [
-    variant === "progress" ? /* @__PURE__ */ jsx(Progress, { value: progress ?? 0, label }) : /* @__PURE__ */ jsx(
-      Spinner,
-      {
-        size: 24,
-        variant: variant === "dots" ? "dots" : "ring",
-        decorative: true
-      }
-    ),
-    /* @__PURE__ */ jsxs("span", { children: [
-      label,
-      variant === "progress" && progress !== void 0 ? " " + Math.round(progress) + "%" : ""
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: s.loading,
+      role: "status",
+      "aria-label": label,
+      "data-full-page": fullPage || void 0,
+      children: [
+        variant === "progress" ? /* @__PURE__ */ jsx(Progress, { value: progress ?? 0, label }) : /* @__PURE__ */ jsx(
+          Spinner,
+          {
+            size: 24,
+            variant: variant === "dots" ? "dots" : "ring",
+            decorative: true
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsxs("span", { children: [
+          label,
+          variant === "progress" && progress !== void 0 ? " " + Math.round(progress) + "%" : ""
+        ] })
+      ]
+    }
+  );
 }
 export {
   LoadingState

package/components/LoadingState.module.css

@@ -12,3 +12,6 @@
 .loading > div {
   width: min(260px, 100%);
 }
+.loading[data-full-page="true"] {
+  min-height: calc(100dvh - 200px);
+}

package/components/MenuItem.d.ts

@@ -5,10 +5,11 @@ export type MenuItemProps = Omit<HTMLAttributes<HTMLElement>, "children" | "pref
     prefix?: ReactNode;
     shortcut?: string;
     trailing?: ReactNode;
+    meta?: ReactNode;
     selected?: boolean;
     active?: boolean;
     disabled?: boolean;
     selection?: "check" | "checkbox" | "radio";
     tone?: "default" | "danger";
 };
-export declare function MenuItem({ as, prefix, label, description, icon, reserveIcon, shortcut, trailing, selected, active, disabled, selection, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;
+export declare function MenuItem({ as, prefix, label, description, icon, reserveIcon, shortcut, trailing, meta, selected, active, disabled, selection, tone, className, ...props }: MenuItemProps): import("react").JSX.Element;

package/components/MenuItem.js

@@ -11,6 +11,7 @@ function MenuItem({
   reserveIcon = false,
   shortcut,
   trailing,
+  meta,
   selected = false,
   active = false,
   disabled = false,
@@ -31,6 +32,7 @@ function MenuItem({
       }
     ),
     shortcut && /* @__PURE__ */ jsx("kbd", { className: s.shortcut, children: shortcut }),
+    meta && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: meta }),
     /* @__PURE__ */ jsx("span", { className: s.trailing, "data-menu-trailing": true, "aria-hidden": "true", children: trailing || (selection === "checkbox" ? /* @__PURE__ */ jsx("span", { className: s.checkbox, "data-checked": selected, children: selected && /* @__PURE__ */ jsx(Check, {}) }) : selection === "radio" ? /* @__PURE__ */ jsx("span", { className: s.radio, "data-checked": selected, children: /* @__PURE__ */ jsx("i", {}) }) : selection === "check" && selected ? /* @__PURE__ */ jsx(Check, { className: s.check }) : null) })
   ] });
   const common = {

package/components/MenuItem.module.css

@@ -104,6 +104,11 @@
 .shortcut {
   flex-shrink: 0;
   margin-left: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
   font-family: var(--ui-font);
   font-size: var(--menu-shortcut-font-size);
   font-weight: 400;
@@ -111,6 +116,10 @@
   font-variant-numeric: tabular-nums;
   color: var(--muted);
   white-space: nowrap;
+  text-align: right;
+}
+.shortcut ~ .trailing:empty {
+  display: none;
 }
 .check {
   color: var(--accent);