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

package/src/lib/widgets/Cascader.svelte

@@ -0,0 +1,486 @@
+<script lang="ts">
+  /** 级联选择器（参考 antd Cascader）
+   *  静态数据源两种格式（兼容共存，data 优先）：
+   *  1. choices：扁平路径数组，每项用 / 分隔层级，每段支持 key:label
+   *  2. data：嵌套对象树（CascadeNode[]），如 [{value:'zj',label:'浙江',children:[...]}]
+   *  url：远端数据源，fetch 拉取嵌套树，data/choices 作为初始/后备 */
+  interface CascadeNode {
+    value?: string | number;
+    /** value 的别名（key:label 风格数据源） */
+    key?: string | number;
+    label?: string | number;
+    children?: CascadeNode[];
+    /** lazy 模式：子级是否已请求过（请求返回空数组时为真叶子，标记避免重复请求） */
+    loaded?: boolean;
+    [extra: string]: any;
+  }
+  interface Props {
+    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;
+  }
+  let {
+    choices,
+    data,
+    url = '',
+    lazy = false,
+    label = '',
+    default: initial,
+    placeholder = '',
+    hint = '',
+    required = false,
+    message = '',
+    error = '',
+    disabled = false,
+    onchange
+  }: Props = $props();
+
+  // ---------- 路径解析与树构建 ----------
+  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() };
+  }
+
+  /** 嵌套对象树 → 内部 CasNode 树（label 缺省回退 value，children 缺省/空视为叶子）
+   *  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:[...]} 包裹
+   */
+  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);
+  }
+
+  // ---------- 远端与静态数据源 ----------
+  /** 远端拉取的嵌套树（成功后覆盖本地 data/choices；lazy 模式下仅根级，子级逐步填充）
+   *  加载失败静默处理：回落本地 data/choices，均无数据时面板显示灰色"暂无数据" */
+  let remoteData = $state<CascadeNode[] | null>(null);
+  let loading = $state(false);
+  /** lazy 模式：正在加载子级的父级路径串（/ 连接），空 = 无进行中的子级请求 */
+  let loadingPath = $state('');
+
+  // 静态 tree：data 优先于 choices（兼容共存），远端拉取成功时以远端为准
+  const tree = $derived.by(() => {
+    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;
+  });
+
+  /** 找到 value 对应的节点（顶层查找） */
+  function findTop(value: string): CasNode | undefined {
+    return tree.find(n => n.value === value);
+  }
+
+  /** 默认路径（value 串，/ 分隔）→ 逐级 value 数组；支持 label 串回退（无 key:label 时 value=label 等价） */
+  function pathToValues(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 node = level.find(n => n.value === seg) ?? level.find(n => n.label === seg);
+      if (!node) return values;
+      values.push(node.value);
+      level = node.children;
+    }
+    return values;
+  }
+
+  // ---------- 状态 ----------
+  /** 逐级选中的 value 数组（空 = 未选择） */
+  let selected = $state<string[]>([]);
+  /** 面板展开时逐级激活（高亮）的 value 数组 */
+  let active = $state<string[]>([]);
+  let open = $state(false);
+
+  // 初始化 default
+  selected = pathToValues(initial);
+
+  let rootEl: HTMLElement | undefined = $state();
+
+  $effect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (rootEl && !rootEl.contains(e.target as Node)) open = false;
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  });
+
+  $effect(() => {
+    if (!url) { remoteData = null; return; }
+    loading = true;
+    let cancelled = false;
+    (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('响应中没有可用选项');
+        remoteData = list;
+        // 用户尚未选择时回填默认路径（远端加载完成后触发；lazy 模式默认路径仅能回填根级）
+        if (selected.length === 0) selected = pathToValues(initial);
+      } catch {
+        // 加载失败：静默回落本地 data/choices
+      } finally {
+        if (!cancelled) loading = false;
+      }
+    })();
+    return () => { cancelled = true; };
+  });
+
+  /** 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;
+    loadingPath = 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 为空时该节点确认为真叶子）
+      if (remoteData) remoteData = fillChildren(remoteData, path, list);
+    } catch {
+      // 子级加载失败：静默处理，子层级面板显示灰色"暂无数据"
+    } finally {
+      loadingPath = '';
+    }
+  }
+
+  /** 当前激活层级对应的子节点列表（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 = $derived.by(() => {
+    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;
+  });
+
+  /** 选中节点 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(' / ');
+  }
+
+  const shownError = $derived(error || '');
+
+  function toggleOpen() {
+    if (disabled) return;
+    open = !open;
+    if (open) {
+      // 打开时激活层级同步到已选路径
+      active = selected.length > 0 ? selected.slice(0, -1) : [];
+    }
+  }
+
+  /** 点击某层选项：叶子 → 完成选择并关闭；待加载（lazy）→ 请求子级后展开 */
+  function pick(level: number, node: CasNode) {
+    if (disabled) return;
+    const next = active.slice(0, level);
+    next.push(node.value);
+    if (node.isLeaf) {
+      // 叶子节点：完成选择
+      selected = next;
+      active = [];
+      open = false;
+      onchange(next.join('/'));
+    } else {
+      // 展开下一层；lazy 模式下未加载时先请求子级
+      active = next;
+      if (lazy && url && !node.loaded) {
+        void loadChildren(node, next);
+      }
+    }
+  }
+
+  function clearValue(e: MouseEvent) {
+    e.stopPropagation();
+    selected = [];
+    active = [];
+    open = false;
+    onchange('');
+  }
+</script>
+
+<div class="selector widget-cascader" bind:this={rootEl}>
+  {#if label || hint || required}
+    <div class="widget-label-row">
+      {#if required}<span class="widget-required-mark" aria-hidden="true">*</span>{/if}
+      {#if label}<label>{label}</label>{/if}
+      {#if hint}<span class="widget-hint" data-hint={hint}>ⓘ</span>{/if}
+    </div>
+  {/if}
+  <div class="widget-field-content">
+    <button type="button" class="cas-input" class:widget-input-error={!!shownError} onclick={toggleOpen} aria-expanded={open} {disabled}>
+      <span class="cas-input-text" class:cas-placeholder={selected.length === 0}>
+        {loading ? '加载中…' : selected.length > 0 ? displayText(selected) : placeholder || '请选择'}
+      </span>
+      {#if !disabled && selected.length > 0}
+        <span class="cas-clear" role="button" tabindex="-1" aria-label="清空"
+          onclick={(e) => clearValue(e)}>×</span>
+      {:else if !disabled}
+        <span class="cas-arrow" class:cas-arrow-open={open} aria-hidden="true">▾</span>
+      {/if}
+    </button>
+    {#if shownError}<div class="widget-error-text" role="alert">{shownError}</div>{/if}
+
+    {#if open}
+      <div class="cas-panel">
+        {#if levelCount === 0}
+          <div class="cas-empty">{loading ? '加载中…' : '暂无数据'}</div>
+        {:else}
+        {#each Array(levelCount) as _, level}
+          <div class="cas-menu" role="menu">
+            {#each levelNodes(level) as node (node.value)}
+              <button
+                type="button"
+                class="cas-option"
+                class:cas-option-active={active[level] === node.value}
+                onclick={() => pick(level, node)}
+              >
+                <span class="cas-option-label">{node.label}</span>
+                {#if !node.isLeaf}
+                  <span class="cas-option-arrow" aria-hidden="true">›</span>
+                {/if}
+              </button>
+            {/each}
+            {#if levelNodes(level).length === 0}
+              <div class="cas-empty">{loadingPath && active.join('/').startsWith(loadingPath) ? '加载中…' : '暂无数据'}</div>
+            {/if}
+          </div>
+        {/each}
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .widget-cascader {
+    position: relative;
+  }
+
+  .cas-input {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    background-color: #ffffff;
+    cursor: pointer;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    text-align: left;
+  }
+  .cas-input:hover { border-color: #4096ff; }
+  .cas-input:focus {
+    outline: none;
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+  }
+  /* 禁用态：置灰 + 禁止交互 */
+  .cas-input:disabled {
+    background-color: #f5f5f5;
+    color: rgba(0, 0, 0, 0.25);
+    border-color: #d9d9d9;
+    cursor: not-allowed;
+  }
+  .cas-input:disabled:hover { border-color: #d9d9d9; }
+
+  .cas-input-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
+  .cas-placeholder { color: rgba(0, 0, 0, 0.45); }
+  .cas-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; transition: transform 0.2s ease; }
+  .cas-arrow-open { transform: rotate(180deg); }
+  .cas-clear {
+    padding: 0 0.25rem;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 1rem;
+    line-height: 1;
+  }
+  .cas-clear:hover { color: rgba(0, 0, 0, 0.88); }
+
+  /* 级联面板：横向多级菜单并排 */
+  .cas-panel {
+    position: absolute;
+    z-index: 50;
+    top: calc(100% + 4px);
+    left: 0;
+    display: flex;
+    background: #ffffff;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  }
+  .cas-menu {
+    width: 160px;
+    max-height: 240px;
+    overflow-y: auto;
+    padding: 0.375rem;
+  }
+  .cas-menu + .cas-menu {
+    border-left: 1px solid #f0f0f0;
+  }
+  .cas-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.375rem 0.5rem;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.88);
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.15s ease;
+  }
+  .cas-option:hover { background: #f5f5f5; }
+  .cas-option-active { background: #e6f4ff; color: #1677ff; font-weight: 500; }
+  .cas-option-active:hover { background: #bae0ff; }
+  .cas-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .cas-option-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.875rem; flex: 0 0 auto; }
+  .cas-empty {
+    padding: 0.75rem 0.5rem;
+    font-size: 0.8125rem;
+    color: rgba(0, 0, 0, 0.45);
+    text-align: center;
+  }
+</style>