@c2-markdown-ui/react 0.0.0-stage → 0.4.3

package/src/widgets/Button.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+export interface ButtonProps {
+  label?: string;
+  /** 背景色（十六进制或 CSS 颜色名） */
+  color?: string;
+  /** 字体颜色（十六进制或 CSS 颜色名） */
+  textColor?: string;
+  /** 尺寸：small / medium / large，默认 medium */
+  size?: 'small' | 'medium' | 'large';
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: string) => void;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  label = '按钮',
+  color,
+  textColor,
+  size = 'medium',
+  disabled = false,
+  onchange
+}) => {
+  const style: React.CSSProperties = {};
+  if (color) style.backgroundColor = color;
+  if (textColor) style.color = textColor;
+
+  return (
+    <button
+      type="button"
+      className={`widget-button size-${size}`}
+      style={Object.keys(style).length > 0 ? style : undefined}
+      onClick={() => onchange(label)}
+      disabled={disabled}
+    >
+      {label}
+    </button>
+  );
+};

package/src/widgets/ButtonGroup.tsx

@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { parseChoices, type ChoiceItem } from './choiceUtils';
+
+export interface ButtonGroupProps {
+  choices: string[];
+  label?: string;
+  default?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: string) => void;
+}
+
+export const ButtonGroup: React.FC<ButtonGroupProps> = ({
+  choices,
+  label = '',
+  default: initial,
+  disabled = false,
+  onchange
+}) => {
+  const items = parseChoices(choices);
+  const [selected, setSelected] = useState(initial ?? items[0]?.value ?? '');
+
+  const handleClick = (item: ChoiceItem) => {
+    if (disabled) return;
+    setSelected(item.value);
+    onchange(item.value);
+  };
+
+  return (
+    <div className="widget-button-group">
+      {label && <label>{label}</label>}
+      <div role="group" aria-label={label}>
+        {items.map((item) => (
+          <button
+            key={item.value}
+            type="button"
+            aria-pressed={selected === item.value}
+            onClick={() => handleClick(item)}
+            disabled={disabled}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/widgets/Cascader.tsx

@@ -0,0 +1,400 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+export interface CascaderProps {
+  choices: string[];
+  /** 嵌套对象树数据源（与扁平路径 choices 兼容共存，优先于 choices） */
+  data?: CascadeNode[];
+  /** 远端数据源 URL：设置后运行时 fetch 拉取嵌套树，data/choices 作为初始/后备树 */
+  url?: string;
+  /** 懒加载模式（url 存在时生效）：首次只拉根级，点击父级后以 url?parent=<value> 逐级请求子级 */
+  lazy?: boolean;
+  label?: string;
+  default?: string;
+  placeholder?: string;
+  hint?: string;
+  required?: boolean;
+  /** 校验失败提示文案 */
+  message?: string;
+  /** 外部（form 提交时）传入的错误信息 */
+  error?: string;
+  /** 是否禁用 */
+  disabled?: boolean;
+  onchange: (value: string) => void;
+}
+
+/** 级联数据节点（嵌套树形，对应 mdui-lang 的 CascadeNode）
+ *  取值字段兼容 value/key（无 value 时用 key）；展示字段 label 缺省回退 value/key */
+export interface CascadeNode {
+  value?: string | number;
+  /** value 的别名（key:label 风格数据源） */
+  key?: string | number;
+  label?: string | number;
+  children?: CascadeNode[];
+  [extra: string]: any;
+}
+
+interface CasNode {
+  /** 段 key（无 key:label 时即段文本） */
+  value: string;
+  /** 段显示文案 */
+  label: string;
+  children: CasNode[];
+  /** 是否叶子（完整路径；lazy 模式下无 children 视为待加载，非叶子） */
+  isLeaf: boolean;
+  /** lazy 模式：子级是否已请求过（请求返回空数组时为真叶子，标记避免重复请求） */
+  loaded?: boolean;
+}
+
+/** 解析一段文本：key:label → {value:key, label:label}；无冒号则 value=label=段文本 */
+function parseSeg(seg: string): { value: string; label: string } {
+  const idx = seg.indexOf(':');
+  if (idx > 0) {
+    const v = seg.slice(0, idx).trim();
+    const l = seg.slice(idx + 1).trim();
+    if (v && l) return { value: v, label: l };
+  }
+  return { value: seg.trim(), label: seg.trim() };
+}
+
+/** 默认路径（value 串，/ 分隔）→ 逐级 value 数组；支持 key:label 段与 label 串回退 */
+function pathToValues(tree: CasNode[], path: string | undefined): string[] {
+  if (!path) return [];
+  const segs = path.split('/').map(s => s.trim()).filter(Boolean);
+  const values: string[] = [];
+  let level = tree;
+  for (const seg of segs) {
+    const { value: segVal, label: segLabel } = parseSeg(seg);
+    const node = level.find(n => n.value === segVal || n.value === seg || n.label === segLabel || n.label === seg);
+    if (!node) return values;
+    values.push(node.value);
+    level = node.children;
+  }
+  return values;
+}
+
+/** 嵌套对象树 → 内部 CasNode 树（取值 value ?? key，label 缺省回退取值）
+ *  lazy 模式下无 children 的节点视为"待加载"（isLeaf=false），子级点击父级时请求；
+ *  节点上已有的 loaded 标记（lazy 子级请求返回空数组的真叶子）需保留，避免重复请求 */
+function nodesToTree(nodes: CascadeNode[] | undefined, lazy = false): CasNode[] {
+  if (!Array.isArray(nodes)) return [];
+  return nodes.map(n => {
+    const v = n.value ?? n.key;
+    const children = n.children;
+    const hasChildren = Array.isArray(children) && children.length > 0;
+    const wasLoaded = n.loaded === true;
+    return {
+      value: String(v ?? ''),
+      label: String(n.label ?? v ?? ''),
+      children: hasChildren ? nodesToTree(children, lazy) : [],
+      isLeaf: lazy ? !hasChildren && wasLoaded : !hasChildren,
+      loaded: hasChildren || wasLoaded,
+    };
+  });
+}
+
+/**
+ * 兼容常见远端嵌套树响应并归一化为 CascadeNode[]：
+ * - [{value,label,children}]（直接树数组）
+ * - {data|options|choices|items|tree|treeData:[...]} 包裹
+ * - 条目允许 key/value 取值、name/label 展示、无 children 视为叶子
+ */
+function normalizeRemoteTree(json: any): CascadeNode[] {
+  let list = json;
+  if (!Array.isArray(json)) {
+    list = Array.isArray(json?.data) ? json.data
+      : Array.isArray(json?.options) ? json.options
+      : Array.isArray(json?.choices) ? json.choices
+      : Array.isArray(json?.items) ? json.items
+      : Array.isArray(json?.tree) ? json.tree
+      : Array.isArray(json?.treeData) ? json.treeData
+      : [];
+  }
+  const map = (arr: any[]): CascadeNode[] =>
+    (arr || [])
+      .map((it: any): CascadeNode | null => {
+        if (!it || typeof it !== 'object') return null;
+        const value = it.value ?? it.key;
+        if (value === undefined || value === null || value === '') return null;
+        const node: CascadeNode = { value: String(value) };
+        const label = it.label ?? it.name ?? it.text;
+        if (label !== undefined && label !== null) node.label = String(label);
+        if (Array.isArray(it.children) && it.children.length > 0) {
+          node.children = map(it.children);
+        }
+        return node;
+      })
+      .filter((n: CascadeNode | null): n is CascadeNode => n !== null);
+  return map(list);
+}
+
+export const Cascader: React.FC<CascaderProps> = ({
+  choices,
+  data,
+  url,
+  lazy = false,
+  label = '',
+  default: initial,
+  placeholder = '',
+  hint = '',
+  required = false,
+  message = '',
+  error = '',
+  disabled = false,
+  onchange
+}) => {
+  // ---------- 状态 ----------
+  /** 远端拉取的嵌套树（成功后覆盖本地 data/choices；lazy 模式下仅根级，子级逐步填充）
+   *  加载失败静默处理：回落本地 data/choices，均无数据时面板显示灰色"暂无数据" */
+  const [remoteData, setRemoteData] = useState<CascadeNode[] | null>(null);
+  const [loading, setLoading] = useState(false);
+  /** lazy 模式：正在加载子级的父级路径串（/ 连接），空 = 无进行中的子级请求 */
+  const [loadingPath, setLoadingPath] = useState('');
+
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // 静态 tree：data 优先于 choices（兼容共存），远端拉取成功时以远端为准
+  const tree = useMemo<CasNode[]>(() => {
+    if (remoteData) return nodesToTree(remoteData, lazy);
+    if (Array.isArray(data) && data.length > 0) return nodesToTree(data, lazy);
+    // 回退：扁平路径数组 → 多级树（公共前缀合并）
+    const root: CasNode[] = [];
+    for (const path of choices) {
+      if (!path) continue;
+      const segs = path.split('/').map(s => s.trim()).filter(Boolean);
+      if (segs.length === 0) continue;
+      let level = root;
+      for (let i = 0; i < segs.length; i++) {
+        const { value, label } = parseSeg(segs[i]);
+        let node = level.find(n => n.value === value);
+        if (!node) {
+          node = { value, label, children: [], isLeaf: i === segs.length - 1 };
+          level.push(node);
+        }
+        level = node.children;
+      }
+    }
+    return root;
+  }, [remoteData, data, choices, lazy]);
+
+  /** 逐级选中的 value 数组（空 = 未选择）；初值在静态树上计算（远程模式下常为空，属正常） */
+  const [selected, setSelected] = useState<string[]>(() => pathToValues(tree, initial));
+  /** 面板展开时逐级激活（高亮）的 value 数组 */
+  const [active, setActive] = useState<string[]>([]);
+  const [open, setOpen] = useState(false);
+
+  // url 远程模式：非 lazy 一次拉整棵树，lazy 只拉根级（子级点击父级时按需请求）
+  useEffect(() => {
+    if (!url) { setRemoteData(null); return; }
+    let cancelled = false;
+    setLoading(true);
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const json: any = await res.json();
+        if (cancelled) return;
+        const list = normalizeRemoteTree(json);
+        if (list.length === 0) throw new Error('响应中没有可用选项');
+        setRemoteData(list);
+        // 用户尚未选择时回填默认路径（远端加载完成后触发；lazy 模式默认路径仅能回填根级）
+        setSelected(prev => (prev.length > 0 ? prev : pathToValues(nodesToTree(list, lazy), initial)));
+      } catch {
+        // 加载失败：静默回落本地 data/choices
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [url]);
+
+  /** lazy 模式：按路径在原始树中找到节点并填充其子级（返回新树，目标节点打 loaded 标记） */
+  function fillChildren(treeNodes: CascadeNode[], path: string[], children: CascadeNode[]): CascadeNode[] {
+    return treeNodes.map(node => {
+      const v = String(node.value ?? node.key ?? '');
+      if (v !== path[0]) return node;
+      if (path.length === 1) {
+        // 目标节点：填充子级；空数组 = 真叶子（loaded 防止重复请求）
+        return { ...node, children, loaded: true };
+      }
+      return { ...node, children: fillChildren(node.children || [], path.slice(1), children) };
+    });
+  }
+
+  /** lazy 模式：请求某父级的子级（url?parent=<value>），成功后填充进树 */
+  async function loadChildren(node: CasNode, path: string[]) {
+    if (!url || !node || node.loaded) return;
+    setLoadingPath(path.join('/'));
+    try {
+      const sep = url.includes('?') ? '&' : '?';
+      const res = await fetch(`${url}${sep}parent=${encodeURIComponent(node.value)}`);
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      const json: any = await res.json();
+      const list = normalizeRemoteTree(json);
+      // 递归更新 remoteData（不可变更新；children 为空时该节点确认为真叶子）
+      setRemoteData(prev => (prev ? fillChildren(prev, path, list) : prev));
+    } catch {
+      // 子级加载失败：静默处理，子层级面板显示灰色"暂无数据"
+    } finally {
+      setLoadingPath('');
+    }
+  }
+
+  // 外部点击关闭面板
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, []);
+
+  /** 当前激活层级对应的子节点列表（level 0 用树根） */
+  function levelNodes(level: number): CasNode[] {
+    let nodes = tree;
+    for (let i = 0; i < level; i++) {
+      const v = active[i];
+      const node = nodes.find(n => n.value === v);
+      if (!node) return [];
+      nodes = node.children;
+    }
+    return nodes;
+  }
+
+  /** 展开层级总数（含当前激活最深一层；lazy 模式下未加载的节点也占一层，展示加载态） */
+  const levelCount = useMemo(() => {
+    if (!open) return 0;
+    let count = 1;
+    let nodes = tree;
+    for (const v of active) {
+      const node = nodes.find(n => n.value === v);
+      if (!node || node.isLeaf) break;
+      nodes = node.children;
+      count++;
+    }
+    return count;
+  }, [open, active, tree]);
+
+  /** 选中节点 value 数组 → 展示文案串（label 用 / 连接） */
+  function displayText(values: string[]): string {
+    let nodes = tree;
+    const labels: string[] = [];
+    for (const v of values) {
+      const node = nodes.find(n => n.value === v);
+      if (!node) break;
+      labels.push(node.label);
+      nodes = node.children;
+    }
+    return labels.join(' / ');
+  }
+
+  function toggleOpen() {
+    if (disabled) return;
+    setOpen(prev => {
+      const next = !prev;
+      if (next) {
+        // 打开时激活层级同步到已选路径
+        setActive(selected.length > 0 ? selected.slice(0, -1) : []);
+      }
+      return next;
+    });
+  }
+
+  /** 点击某层选项：有子级 → 展开下一层；待加载（lazy）→ 请求子级后展开；叶子 → 完成选择并关闭 */
+  function pick(level: number, node: CasNode) {
+    if (disabled) return;
+    const next = active.slice(0, level);
+    next.push(node.value);
+    if (node.isLeaf) {
+      // 叶子节点：完成选择
+      setSelected(next);
+      setActive([]);
+      setOpen(false);
+      onchange(next.join('/'));
+    } else {
+      // 展开下一层；lazy 模式下未加载时先请求子级
+      setActive(next);
+      if (lazy && url && !node.loaded) {
+        void loadChildren(node, next);
+      }
+    }
+  }
+
+  function clearValue(e: React.MouseEvent) {
+    e.stopPropagation();
+    setSelected([]);
+    setActive([]);
+    setOpen(false);
+    onchange('');
+  }
+
+  /** 当前激活路径（用于判断正在加载哪一层的子级） */
+  const activePath = active.join('/');
+
+  return (
+    <div className="selector widget-cascader" ref={rootRef}>
+      {(label || hint || required) && (
+        <div className="widget-label-row">
+          {required && <span className="widget-required-mark" aria-hidden="true">*</span>}
+          {label && <label>{label}</label>}
+          {hint && <span className="widget-hint" data-hint={hint}>ⓘ</span>}
+        </div>
+      )}
+      <div className="widget-field-content">
+        <button
+          type="button"
+          className={`cas-input${error ? ' widget-input-error' : ''}`}
+          onClick={toggleOpen}
+          aria-expanded={open}
+          disabled={disabled}
+        >
+          <span className={`cas-input-text${selected.length === 0 ? ' cas-placeholder' : ''}`}>
+            {loading ? '加载中…' : selected.length > 0 ? displayText(selected) : placeholder || '请选择'}
+          </span>
+          {!disabled && selected.length > 0 ? (
+            <span
+              className="cas-clear"
+              role="button"
+              tabIndex={-1}
+              aria-label="清空"
+              onClick={clearValue}
+            >×</span>
+          ) : (!disabled && (
+            <span className={`cas-arrow${open ? ' cas-arrow-open' : ''}`} aria-hidden="true">▾</span>
+          ))}
+        </button>
+        {error && <div className="widget-error-text" role="alert">{error}</div>}
+
+        {open && (
+          <div className="cas-panel">
+            {levelCount === 0 ? (
+              <div className="cas-empty">{loading ? '加载中…' : '暂无数据'}</div>
+            ) : (
+              Array.from({ length: levelCount }, (_, level) => (
+              <div className="cas-menu" role="menu" key={level}>
+                {levelNodes(level).map(node => (
+                  <button
+                    type="button"
+                    key={node.value}
+                    className={`cas-option${active[level] === node.value ? ' cas-option-active' : ''}`}
+                    onClick={() => pick(level, node)}
+                  >
+                    <span className="cas-option-label">{node.label}</span>
+                    {!node.isLeaf && (
+                      <span className="cas-option-arrow" aria-hidden="true">›</span>
+                    )}
+                  </button>
+                ))}
+                {levelNodes(level).length === 0 && (
+                  <div className="cas-empty">
+                    {loadingPath && activePath.startsWith(loadingPath) ? '加载中…' : '暂无数据'}
+                  </div>
+                )}
+              </div>
+              ))
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};