@robert-stackflow/oneui 0.0.0-stage → 0.1.0

package/components/RangeSlider.js

@@ -0,0 +1,278 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Tooltip } from "./Tooltip.js";
+import { useFieldControl } from "./field.js";
+import { moveRange, rangeSettings } from "./rangeMath.js";
+import s from "./RangeSlider.module.css";
+function RangeSlider({
+  label,
+  value,
+  onChange,
+  onChangeEnd,
+  min = 0,
+  max = 100,
+  step = 1,
+  minDistance = 0,
+  lowerLabel,
+  upperLabel,
+  formatValue = String,
+  marks = [],
+  tooltip = true,
+  ...options
+}) {
+  const field = useFieldControl({ ...options, label }), settings = rangeSettings(min, max, step, minDistance), pair = settings.normalize(value), blocked = field.disabled || field.readOnly || !settings.count, rail = useRef(null), thumbs = useRef([]), current = useRef(pair), drag = useRef(null), keys = useRef(null), last = useRef(0), callbacks = useRef({ onChange, onChangeEnd });
+  current.current = pair;
+  callbacks.current = { onChange, onChangeEnd };
+  const emit = (next) => {
+    if (next[0] === current.current[0] && next[1] === current.current[1])
+      return;
+    current.current = next;
+    callbacks.current.onChange(next);
+  };
+  const finishKeys = () => {
+    const start = keys.current;
+    keys.current = null;
+    if (start && (start[0] !== current.current[0] || start[1] !== current.current[1]))
+      callbacks.current.onChangeEnd?.([...current.current]);
+  };
+  const stop = (cancel = false) => {
+    const active = drag.current;
+    if (!active) return;
+    drag.current = null;
+    if (active?.blur) window.removeEventListener("blur", active.blur);
+    rail.current?.removeAttribute("data-dragging");
+    if (rail.current?.hasPointerCapture(active.id))
+      rail.current.releasePointerCapture(active.id);
+    if (cancel) emit(active.start);
+    else if (active.start[0] !== current.current[0] || active.start[1] !== current.current[1])
+      callbacks.current.onChangeEnd?.([...current.current]);
+  };
+  const point = (clientX, index, offset = 0) => {
+    const box = rail.current?.getBoundingClientRect();
+    if (!box?.width) return;
+    const target = settings.min + Math.max(0, Math.min(1, (clientX - offset - box.left) / box.width)) * (settings.max - settings.min);
+    emit(moveRange(current.current, index, target, settings));
+  };
+  useEffect(() => {
+    if (drag.current) {
+      const active = drag.current;
+      drag.current = null;
+      if (active?.blur) window.removeEventListener("blur", active.blur);
+      rail.current?.removeAttribute("data-dragging");
+      if (rail.current?.hasPointerCapture(active.id))
+        rail.current.releasePointerCapture(active.id);
+    }
+    keys.current = null;
+  }, [min, max, step, minDistance, blocked]);
+  useEffect(
+    () => () => {
+      const active = drag.current;
+      drag.current = null;
+      if (active?.blur) window.removeEventListener("blur", active.blur);
+      if (active && rail.current?.hasPointerCapture(active.id))
+        rail.current.releasePointerCapture(active.id);
+    },
+    []
+  );
+  const percent = (amount) => settings.count ? (amount - settings.min) / (settings.max - settings.min) * 100 : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: field.id,
+      role: "group",
+      "aria-label": label,
+      tabIndex: -1,
+      className: s.field,
+      "data-disabled": field.disabled || !settings.count,
+      "aria-invalid": field.invalid,
+      "aria-describedby": field.descriptionId,
+      onFocus: (event) => {
+        if (event.target === event.currentTarget) thumbs.current[0]?.focus();
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: s.label, children: [
+          /* @__PURE__ */ jsx("span", { children: label }),
+          /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+            formatValue(pair[0]),
+            " \u2014 ",
+            formatValue(pair[1])
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: s.rail,
+            "data-range-track": true,
+            ref: rail,
+            onPointerDown: (event) => {
+              if (blocked || event.button !== 0 || !event.isPrimary) return;
+              event.preventDefault();
+              finishKeys();
+              const box = event.currentTarget.getBoundingClientRect(), target = event.target.closest(
+                '[role="slider"]'
+              ), amount = settings.min + (event.clientX - box.left) / box.width * (settings.max - settings.min), index = target ? Number(target.dataset.thumb) : Math.abs(amount - pair[0]) === Math.abs(amount - pair[1]) ? pair[0] === pair[1] && amount !== pair[0] ? amount > pair[0] ? 1 : 0 : last.current : Math.abs(amount - pair[0]) < Math.abs(amount - pair[1]) ? 0 : 1, offset = target ? event.clientX - (box.left + percent(pair[index]) / 100 * box.width) : 0;
+              last.current = index;
+              const blur = () => stop(true);
+              drag.current = {
+                id: event.pointerId,
+                index,
+                start: [...current.current],
+                offset,
+                blur
+              };
+              window.addEventListener("blur", blur, { once: true });
+              event.currentTarget.setPointerCapture(event.pointerId);
+              event.currentTarget.dataset.dragging = "true";
+              thumbs.current[index]?.focus({ preventScroll: true });
+              point(event.clientX, index, offset);
+            },
+            onPointerMove: (event) => {
+              if (drag.current?.id === event.pointerId)
+                point(event.clientX, drag.current.index, drag.current.offset);
+            },
+            onPointerUp: (event) => {
+              if (drag.current?.id === event.pointerId) stop();
+            },
+            onPointerCancel: () => stop(true),
+            onLostPointerCapture: () => stop(true),
+            onKeyDown: (event) => {
+              if (event.key === "Escape" && drag.current) {
+                event.preventDefault();
+                event.stopPropagation();
+                stop(true);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx("div", { className: s.track }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: s.fill,
+                  style: {
+                    left: percent(pair[0]) + "%",
+                    width: percent(pair[1]) - percent(pair[0]) + "%"
+                  }
+                }
+              ),
+              [0, 1].map((index) => {
+                const handle = /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    ref: (node) => {
+                      thumbs.current[index] = node;
+                    },
+                    role: "slider",
+                    "data-thumb": index,
+                    tabIndex: field.disabled || !settings.count ? -1 : 0,
+                    className: s.thumb,
+                    "aria-label": index === 0 ? lowerLabel || `${label}\u4E0B\u9650` : upperLabel || `${label}\u4E0A\u9650`,
+                    "aria-valuemin": index === 0 ? settings.min : settings.toValue(settings.indexOf(pair[0]) + settings.gap),
+                    "aria-valuemax": index === 0 ? settings.toValue(settings.indexOf(pair[1]) - settings.gap) : settings.max,
+                    "aria-valuenow": pair[index],
+                    "aria-valuetext": formatValue(pair[index]),
+                    "aria-disabled": field.disabled || !settings.count || void 0,
+                    "aria-readonly": field.readOnly || void 0,
+                    "aria-invalid": field.invalid,
+                    "aria-describedby": field.descriptionId,
+                    onFocus: () => {
+                      last.current = index;
+                    },
+                    onBlur: finishKeys,
+                    onKeyDown: (event) => {
+                      if (blocked) return;
+                      let target;
+                      const direction = {
+                        ArrowRight: 1,
+                        ArrowUp: 1,
+                        ArrowLeft: -1,
+                        ArrowDown: -1,
+                        PageUp: 10,
+                        PageDown: -10
+                      }[event.key];
+                      if (direction)
+                        target = current.current[index] + direction * settings.step;
+                      else if (event.key === "Home") target = settings.min;
+                      else if (event.key === "End") target = settings.max;
+                      else return;
+                      event.preventDefault();
+                      event.stopPropagation();
+                      keys.current ??= [...current.current];
+                      emit(moveRange(current.current, index, target, settings));
+                    },
+                    onKeyUp: (event) => {
+                      if ([
+                        "ArrowRight",
+                        "ArrowLeft",
+                        "ArrowUp",
+                        "ArrowDown",
+                        "PageUp",
+                        "PageDown",
+                        "Home",
+                        "End"
+                      ].includes(event.key))
+                        finishKeys();
+                    }
+                  }
+                );
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: s.anchor,
+                    style: {
+                      left: percent(pair[index]) + "%",
+                      zIndex: last.current === index ? 2 : 1
+                    },
+                    children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: formatValue(pair[index]), children: handle }) : handle
+                  },
+                  index
+                );
+              })
+            ]
+          }
+        ),
+        !!marks.length && /* @__PURE__ */ jsx("div", { className: s.marks, "aria-hidden": "true", children: marks.map((mark, index) => {
+          const item = typeof mark === "number" ? { value: mark } : mark;
+          if (!Number.isFinite(item.value) || item.value < settings.min || item.value > settings.max)
+            return null;
+          const position = percent(item.value);
+          return /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: s.mark,
+              "data-edge": position === 0 ? "start" : position === 100 ? "end" : void 0,
+              style: { left: position + "%" },
+              children: [
+                /* @__PURE__ */ jsx("i", {}),
+                item.label ?? formatValue(item.value)
+              ]
+            },
+            index
+          );
+        }) }),
+        field.name && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "hidden",
+              name: `${field.name}.min`,
+              value: pair[0],
+              disabled: field.disabled
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "hidden",
+              name: `${field.name}.max`,
+              value: pair[1],
+              disabled: field.disabled
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+export {
+  RangeSlider
+};

package/components/RangeSlider.module.css

@@ -0,0 +1,141 @@
+.field {
+  min-width: 0;
+  outline: none;
+}
+.label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  font-size: 12px;
+  line-height: 20px;
+  margin-bottom: 12px;
+}
+.label > span:last-child {
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.rail {
+  position: relative;
+  height: 24px;
+  margin: 0 9px;
+  touch-action: none;
+  cursor: pointer;
+}
+.track,
+.fill {
+  position: absolute;
+  top: 10px;
+  height: 4px;
+  border-radius: 3px;
+  pointer-events: none;
+}
+.track {
+  inset-inline: 0;
+  background: var(--line);
+}
+.fill {
+  background: var(--accent);
+  transition:
+    left var(--motion-hover) var(--ease),
+    width var(--motion-hover) var(--ease);
+}
+.anchor {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  height: 18px;
+  width: 18px;
+  transition: left var(--motion-hover) var(--ease);
+}
+.thumb {
+  display: block;
+  width: 18px;
+  height: 18px;
+  background: var(--field);
+  border: 1px solid color-mix(in srgb, var(--fg) 28%, var(--surface));
+  border-radius: 50%;
+  box-shadow: var(--shadow-sm);
+  outline: none;
+  cursor: grab;
+  transition:
+    border-color var(--motion-hover),
+    box-shadow var(--motion-hover),
+    background-color var(--motion-hover);
+}
+.thumb:hover {
+  border-color: var(--accent);
+}
+.thumb:focus,
+.thumb:focus-visible {
+  outline: none;
+  border-color: color-mix(in srgb, var(--accent) 60%, var(--surface));
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent);
+}
+.rail[data-dragging="true"] .thumb {
+  cursor: grabbing;
+}
+.rail[data-dragging="true"] :is(.anchor, .fill) {
+  transition: none;
+}
+.field[data-disabled="true"] {
+  opacity: 0.45;
+}
+.field[data-disabled="true"] :is(.rail, .thumb) {
+  cursor: not-allowed;
+}
+.field[aria-invalid="true"] .thumb {
+  border-color: var(--danger);
+}
+.field[aria-invalid="true"] .thumb:focus {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 12%, transparent);
+}
+.marks {
+  position: relative;
+  height: 24px;
+  margin: 0 9px;
+  font-size: 10px;
+  color: var(--muted);
+}
+.mark {
+  position: absolute;
+  top: 0;
+  max-width: 33%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 8px;
+}
+.mark > i {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  height: 4px;
+  width: 1px;
+  background: var(--line);
+}
+.mark[data-edge="start"] {
+  transform: none;
+}
+.mark[data-edge="start"] > i {
+  left: 0;
+}
+.mark[data-edge="end"] {
+  transform: translateX(-100%);
+}
+.mark[data-edge="end"] > i {
+  left: auto;
+  right: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .anchor,
+  .fill {
+    transition: none;
+  }
+}
+
+.anchor:focus-within {
+  z-index: 3 !important;
+}

package/components/ResizablePanel.d.ts

@@ -0,0 +1,21 @@
+import { type CSSProperties, type ReactNode } from "react";
+export type ResizablePanelProps = {
+    children: [ReactNode, ReactNode];
+    direction?: "horizontal" | "vertical";
+    value?: number;
+    defaultValue?: number;
+    onChange?(value: number): void;
+    min?: number;
+    max?: number;
+    step?: number;
+    collapsible?: boolean;
+    disabled?: boolean;
+    primaryLabel?: string;
+    secondaryLabel?: string;
+    label?: string;
+    onResizeStart?(): void;
+    onResizeEnd?(value: number): void;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare function ResizablePanel({ children, direction, value, defaultValue, onChange, min, max, step, collapsible, disabled, primaryLabel, secondaryLabel, label, onResizeStart, onResizeEnd, className, style, }: ResizablePanelProps): import("react").JSX.Element;

package/components/ResizablePanel.js

@@ -0,0 +1,219 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState
+} from "react";
+import s from "./ResizablePanel.module.css";
+const finite = (value, fallback) => Number.isFinite(value) ? value : fallback;
+function ResizablePanel({
+  children,
+  direction = "horizontal",
+  value,
+  defaultValue = 35,
+  onChange,
+  min = 15,
+  max = 85,
+  step = 1,
+  collapsible = false,
+  disabled = false,
+  primaryLabel = "\u4E3B\u9762\u677F",
+  secondaryLabel = "\u6B21\u9762\u677F",
+  label = "\u53EF\u8C03\u6574\u9762\u677F",
+  onResizeStart,
+  onResizeEnd,
+  className = "",
+  style
+}) {
+  const low = Math.max(0, Math.min(100, finite(min, 15))), high = Math.max(low, Math.min(100, finite(max, 85)));
+  const clamp = (number) => collapsible && number <= 0 ? 0 : Math.max(low, Math.min(high, finite(number, finite(defaultValue, 35))));
+  const [local, setLocal] = useState(() => clamp(defaultValue)), [dragging, setDragging] = useState(false), [draft, setDraft] = useState();
+  const current = clamp(value ?? local), shown = dragging && draft !== void 0 ? draft : current;
+  const readonly = disabled || low === high || value !== void 0 && !onChange;
+  const root = useRef(null), handle = useRef(null), drag = useRef(null), frame = useRef(null), pending = useRef(null), expanded = useRef(
+    Math.max(low, Math.min(high, finite(defaultValue, 35))) || high
+  ), id = useId();
+  const commit = (next) => {
+    next = clamp(next);
+    if (next > 0) expanded.current = next;
+    if (value === void 0) setLocal(next);
+    if (drag.current) {
+      drag.current.last = next;
+      setDraft(next);
+    }
+    onChange?.(next);
+  };
+  const latest = useRef({ commit, onResizeEnd, current, readonly });
+  latest.current = { commit, onResizeEnd, current, readonly };
+  const finish = useCallback((notify = true) => {
+    const active = drag.current;
+    if (!active) return;
+    if (frame.current !== null) cancelAnimationFrame(frame.current);
+    frame.current = null;
+    if (notify && pending.current !== null)
+      latest.current.commit(pending.current);
+    pending.current = null;
+    drag.current = null;
+    if (handle.current?.hasPointerCapture(active.pointer))
+      handle.current.releasePointerCapture(active.pointer);
+    if (notify) {
+      setDragging(false);
+      setDraft(void 0);
+      latest.current.onResizeEnd?.(active.last);
+    }
+  }, []);
+  useEffect(() => {
+    if (current > 0) expanded.current = current;
+  }, [current]);
+  useEffect(() => {
+    if (drag.current) {
+      finish();
+    }
+  }, [direction, low, high, readonly, finish]);
+  useEffect(() => {
+    const blur = () => finish();
+    const key = (event) => {
+      if (event.key === "Escape" && drag.current) {
+        event.preventDefault();
+        event.stopPropagation();
+        finish();
+      }
+    };
+    window.addEventListener("blur", blur);
+    window.addEventListener("keydown", key);
+    return () => {
+      window.removeEventListener("blur", blur);
+      window.removeEventListener("keydown", key);
+      finish(false);
+    };
+  }, [finish]);
+  const toggle = () => {
+    if (readonly) return;
+    if (collapsible)
+      commit(shown === 0 ? clamp(expanded.current || defaultValue) : 0);
+    else commit(clamp(defaultValue));
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: root,
+      className: `${s.group} ${className}`,
+      role: "group",
+      "aria-label": label,
+      "data-direction": direction,
+      "data-resizing": dragging,
+      style: {
+        ...style,
+        "--panel-first": `${shown}fr`,
+        "--panel-second": `${100 - shown}fr`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${id}-first`,
+            className: s.pane,
+            role: "region",
+            "aria-label": primaryLabel,
+            inert: shown === 0,
+            "aria-hidden": shown === 0 || void 0,
+            "data-collapsed": shown === 0,
+            children: children[0]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: handle,
+            className: s.handle,
+            role: "separator",
+            tabIndex: readonly ? -1 : 0,
+            "aria-label": `\u8C03\u6574${primaryLabel}\u4E0E${secondaryLabel}`,
+            "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+            "aria-controls": `${id}-first`,
+            "aria-valuemin": collapsible ? 0 : low,
+            "aria-valuemax": high,
+            "aria-valuenow": Math.round(shown * 10) / 10,
+            "aria-valuetext": shown === 0 ? "\u5DF2\u6298\u53E0" : `${Math.round(shown)}%`,
+            "aria-disabled": readonly || void 0,
+            "aria-describedby": `${id}-help`,
+            onDoubleClick: toggle,
+            onKeyDown: (event) => {
+              if (readonly) return;
+              const delta = Math.max(0.1, finite(step, 1)) * (event.shiftKey ? 10 : 1);
+              const previous = direction === "horizontal" ? "ArrowLeft" : "ArrowUp", next = direction === "horizontal" ? "ArrowRight" : "ArrowDown";
+              if (event.key === "Enter" && collapsible) {
+                event.preventDefault();
+                toggle();
+                return;
+              }
+              const result = event.key === "Home" ? low : event.key === "End" ? high : event.key === previous ? shown - delta : event.key === next ? shown + delta : void 0;
+              if (result !== void 0) {
+                event.preventDefault();
+                commit(result > 0 ? Math.max(low, result) : collapsible ? 0 : low);
+              }
+            },
+            onPointerDown: (event) => {
+              if (readonly || event.button !== 0) return;
+              const rect = root.current.getBoundingClientRect(), bar = event.currentTarget.getBoundingClientRect();
+              const extent = direction === "horizontal" ? rect.width - bar.width : rect.height - bar.height;
+              if (extent <= 0) return;
+              event.preventDefault();
+              event.currentTarget.focus({ preventScroll: true });
+              event.currentTarget.setPointerCapture(event.pointerId);
+              drag.current = {
+                pointer: event.pointerId,
+                coordinate: direction === "horizontal" ? event.clientX : event.clientY,
+                value: shown,
+                extent,
+                last: shown
+              };
+              setDraft(shown);
+              setDragging(true);
+              onResizeStart?.();
+            },
+            onPointerMove: (event) => {
+              const active = drag.current;
+              if (!active || active.pointer !== event.pointerId) return;
+              const coordinate = direction === "horizontal" ? event.clientX : event.clientY;
+              const next = active.value + (coordinate - active.coordinate) / active.extent * 100;
+              pending.current = collapsible && next < low / 2 ? 0 : Math.max(low, Math.min(high, next));
+              if (frame.current === null)
+                frame.current = requestAnimationFrame(() => {
+                  frame.current = null;
+                  if (pending.current !== null && drag.current) {
+                    latest.current.commit(pending.current);
+                    pending.current = null;
+                  }
+                });
+            },
+            onPointerUp: () => finish(),
+            onPointerCancel: () => finish(),
+            onLostPointerCapture: () => finish()
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: s.pane,
+            role: "region",
+            "aria-label": secondaryLabel,
+            inert: shown === 100,
+            "aria-hidden": shown === 100 || void 0,
+            "data-collapsed": shown === 100,
+            children: children[1]
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { id: `${id}-help`, className: s.help, children: [
+          "\u62D6\u52A8\u6216\u4F7F\u7528\u65B9\u5411\u952E\u8C03\u6574\uFF0CShift \u52A0\u901F\uFF0CHome/End \u5230\u8FB9\u754C\u3002",
+          collapsible ? "Enter \u6216\u53CC\u51FB\u6298\u53E0\u548C\u6062\u590D\u4E3B\u9762\u677F\u3002" : "\u53CC\u51FB\u6062\u590D\u9ED8\u8BA4\u6BD4\u4F8B\u3002"
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ResizablePanel
+};