@aiao/rxdb-model 0.0.19 → 0.0.28

package/src/entity-table/editors/global-overlay-editor.ts

@@ -0,0 +1,277 @@
+import type { EditContext, IEditor, RectProps } from '@visactor/vtable-editors';
+
+/** daisyUI v5 主题色引用（CSS 变量，主题自适应） */
+export const DAISY_COLORS = {
+  bg: 'var(--color-base-100)',
+  hover: 'var(--color-base-200)',
+  border: 'var(--color-base-300)',
+  text: 'var(--color-base-content)',
+  primary: 'var(--color-primary)',
+  primaryContent: 'var(--color-primary-content)',
+  error: 'var(--color-error)',
+  errorContent: 'var(--color-error-content)',
+  selectedBg: 'color-mix(in srgb, var(--color-primary) 15%, transparent)',
+  focusBg: 'color-mix(in srgb, var(--color-primary) 30%, var(--color-base-100))'
+} as const;
+
+/** 编辑器初始化延迟，避免 VTable 点击事件立即关闭编辑器 */
+const EDITOR_SETUP_DELAY = 10;
+
+/**
+ * 延迟执行编辑器初始化（注册外部点击监听 + 聚焦），避免 VTable 事件干扰
+ *
+ * @param fn 延迟执行的初始化回调
+ */
+export function scheduleEditorSetup(fn: () => void): void {
+  setTimeout(fn, EDITOR_SETUP_DELAY);
+}
+
+/**
+ * 编辑结束后将焦点还给 VTable root element（tabindex=0 的 .vtable div = ctx.container = table.getElement()），使方向键导航继续工作
+ *
+ * @param container VTable 容器元素
+ */
+export function refocusTable(container: HTMLElement | null | undefined): void {
+  container?.focus();
+}
+
+/**
+ * 将浮层面板定位到单元格下方（空间不足时翻转到上方）
+ *
+ * @param panel 浮层面板元素
+ * @param rect 单元格相对 VTable 容器的位置矩形
+ * @param container VTable 容器（用于换算页面绝对坐标）
+ * @param estimatedHeight 面板估算高度（用于判断是否翻转到上方）
+ * @param options 可选布局选项（maxRight 面板最大右边界、minWidth 面板最小宽度）
+ */
+export function positionOverlayPanel(
+  panel: HTMLElement,
+  rect: { left: number; top: number; width?: number; height?: number },
+  container: HTMLElement | null | undefined,
+  estimatedHeight: number,
+  options?: { maxRight?: number; minWidth?: number }
+): void {
+  const cRect = container?.getBoundingClientRect();
+  const absLeft = (cRect?.left ?? 0) + rect.left;
+  const absTop = (cRect?.top ?? 0) + rect.top;
+  const absBottom = absTop + (rect.height ?? 0);
+  const showAbove = window.innerHeight - absBottom < estimatedHeight && absTop > estimatedHeight;
+
+  const maxRight = options?.maxRight;
+  panel.style.left =
+    maxRight != null ?
+      `${Math.max(8, Math.min(absLeft, window.innerWidth - maxRight))}px`
+    : `${Math.max(8, absLeft)}px`;
+  panel.style.top = showAbove ? `${absTop - estimatedHeight - 4}px` : `${absBottom + 2}px`;
+
+  const minWidth = options?.minWidth;
+  if (minWidth != null) {
+    panel.style.minWidth = `${Math.max(minWidth, rect.width ?? 0)}px`;
+  }
+}
+
+/**
+ * 全局浮层列表编辑器抽象基类
+ *
+ * 提供通用基础设施，子类只需关注内容渲染与选择逻辑：
+ * - `document.body` 固定浮层 + 智能上下翻转定位
+ * - 点击外部关闭、Escape 关闭
+ * - 键盘导航（↑ ↓ Enter）
+ * - 鼠标悬停高亮（通过 `data-idx` 自动委托）
+ * - `refocusTable` 焦点还原
+ *
+ * ### 子类实现要求
+ * 1. 声明 `readonly editorType: string`
+ * 2. 实现 `buildRows(panel)` — 将行渲染到面板，行必须设置 `data-idx`
+ * 3. 实现 `get itemCount()` — 总行数
+ * 4. 实现 `onRowClick(idx)` — 点击/Enter 触发
+ * 5. 实现 `onFocusChange(idx, prev)` — 更新行视觉高亮
+ * 6. 实现 `getValue()` — 返回最终值
+ */
+export abstract class GlobalOverlayEditor implements IEditor<string> {
+  #panel: HTMLDivElement | null = null;
+  #endEdit: (() => void) | null = null;
+  #focusedIndex = -1;
+
+  readonly #handleOutsideMouseDown: (e: MouseEvent) => void;
+  readonly #handleKeydown: (e: KeyboardEvent) => void;
+
+  protected container: HTMLElement | null = null;
+  protected table: { getCellOriginValue(col: number, row: number): unknown } | null = null;
+  protected editCol = 0;
+  protected editRow = 0;
+
+  protected abstract get initialFocusIndex(): number;
+  protected abstract get itemCount(): number;
+
+  protected get focusedIndex(): number {
+    return this.#focusedIndex;
+  }
+
+  /** VTable 编辑器类型标识（注册到 VTable 的编辑器名，子类赋值） */
+  abstract readonly editorType: string;
+
+  /** 构造浮层编辑器基类（子类在 onStart 中构建面板） */
+  constructor() {
+    this.#handleOutsideMouseDown = (e: MouseEvent) => {
+      if (!this.isEditorElement(e.target as HTMLElement)) this.close();
+    };
+    this.#handleKeydown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          e.preventDefault();
+          e.stopPropagation();
+          this.close();
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          e.stopPropagation();
+          this.#moveFocus(1);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          e.stopPropagation();
+          this.#moveFocus(-1);
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          e.stopPropagation();
+          if (this.#focusedIndex >= 0) this.onRowClick(this.#focusedIndex);
+          break;
+        case 'Delete':
+        case 'Backspace':
+          e.preventDefault();
+          e.stopPropagation();
+          this.onDeleteKey();
+          break;
+      }
+    };
+  }
+
+  /** 打开浮层：渲染行、定位面板并注册全局鼠标/键盘监听 */
+  onStart(ctx: EditContext<string>): void {
+    this.#endEdit = ctx.endEdit;
+    this.container = ctx.container;
+    this.table = ctx.table as { getCellOriginValue(col: number, row: number): unknown } | null;
+    this.editCol = ctx.col;
+    this.editRow = ctx.row;
+    this.#focusedIndex = this.initialFocusIndex;
+
+    const panel = document.createElement('div');
+    panel.style.cssText = [
+      'position:fixed',
+      'z-index:9999',
+      `background:${DAISY_COLORS.bg}`,
+      `border:1px solid ${DAISY_COLORS.border}`,
+      'border-radius:6px',
+      'padding:4px 0',
+      'box-shadow:0 4px 16px rgba(0,0,0,.15)',
+      'min-width:140px',
+      'max-height:220px',
+      'overflow-y:auto',
+      'overscroll-behavior:contain'
+    ].join(';');
+
+    this.buildRows(panel);
+    document.body.appendChild(panel);
+    this.#panel = panel;
+    this.#positionPanel(ctx.referencePosition.rect);
+
+    document.addEventListener('mousedown', this.#handleOutsideMouseDown, { capture: true });
+    document.addEventListener('keydown', this.#handleKeydown, { capture: true });
+
+    requestAnimationFrame(() => this.#scrollToFocused());
+  }
+
+  /** 关闭浮层：移除面板并注销全局鼠标/键盘监听 */
+  onEnd(): void {
+    this.#panel?.remove();
+    this.#panel = null;
+    document.removeEventListener('mousedown', this.#handleOutsideMouseDown, { capture: true });
+    document.removeEventListener('keydown', this.#handleKeydown, { capture: true });
+    this.#endEdit = null;
+    this.container = null;
+    this.table = null;
+  }
+
+  /** 返回编辑结果值 */
+  abstract getValue(): string;
+
+  /** 判断目标元素是否属于浮层面板 */
+  isEditorElement(target: HTMLElement): boolean {
+    return this.#panel?.contains(target) ?? false;
+  }
+
+  /** 根据新的单元格矩形重新定位浮层面板 */
+  adjustPosition(rect: RectProps): void {
+    this.#positionPanel(rect);
+  }
+
+  protected abstract buildRows(panel: HTMLDivElement): void;
+  protected abstract onRowClick(idx: number): void;
+  protected abstract onFocusChange(idx: number, prev: number): void;
+
+  protected rowAt(idx: number): HTMLElement | null {
+    return this.#panel?.querySelector<HTMLElement>(`[data-idx="${idx}"]`) ?? null;
+  }
+
+  protected setFocused(idx: number): void {
+    const prev = this.#focusedIndex;
+    this.#focusedIndex = idx;
+    if (prev !== idx) this.onFocusChange(idx, prev);
+    this.#scrollToFocused();
+  }
+
+  protected onDeleteKey(): void {
+    this.close();
+  }
+
+  protected close(): void {
+    this.refocusTable();
+    this.#endEdit?.();
+  }
+
+  protected refocusTable(): void {
+    refocusTable(this.container);
+  }
+
+  #moveFocus(delta: 1 | -1): void {
+    const len = this.itemCount;
+    if (len === 0) return;
+    const next =
+      this.#focusedIndex < 0 ?
+        delta === 1 ?
+          0
+        : len - 1
+      : (this.#focusedIndex + delta + len) % len;
+    this.setFocused(next);
+  }
+
+  #positionPanel(rect: RectProps): void {
+    const panel = this.#panel;
+    if (!panel || !this.container) return;
+
+    const { left, top, width, height } = rect;
+    const cRect = this.container.getBoundingClientRect();
+    const vLeft = cRect.left + left;
+    const vTop = cRect.top + top;
+
+    panel.style.left = `${vLeft}px`;
+    panel.style.top = `${vTop + height}px`;
+    panel.style.minWidth = `${width}px`;
+
+    requestAnimationFrame(() => {
+      if (!panel.isConnected) return;
+      const panelH = panel.offsetHeight;
+      if (vTop + height + panelH > window.innerHeight - 8) {
+        panel.style.top = `${vTop - panelH}px`;
+      }
+    });
+  }
+
+  #scrollToFocused(): void {
+    if (this.#focusedIndex < 0) return;
+    this.rowAt(this.#focusedIndex)?.scrollIntoView({ block: 'nearest' });
+  }
+}

package/src/entity-table/editors/icon-list-editor.ts

@@ -0,0 +1,130 @@
+import { DAISY_COLORS, GlobalOverlayEditor } from './global-overlay-editor.js';
+import { lucideToSvgElement, type IconData } from './lucide-svg.js';
+
+/**
+ * 带图标的列表条目
+ * @deprecated 请改用 `EnumItem`，`EnumEditor` 已原生支持 icon 和 color 字段。
+ */
+export interface IconLabeledItem {
+  /** 显示文本 */
+  text: string;
+  /** 存储值 */
+  value: string;
+  /** Lucide 图标数据（可选，配合 color 使用） */
+  icon?: IconData;
+  /** 图标描边颜色（可选，配合 icon 使用） */
+  color?: string;
+}
+
+/**
+ * 支持图标 + 文字的单选列表编辑器
+ *
+ * @deprecated 请改用 `EnumEditor`，传入包含 `icon` / `color` 字段的 `EnumItem` 数组。
+ * `IconListEditor` 将在未来版本移除。
+ *
+ * 每项包含 lucide SVG 图标和本地化标签。
+ * ↑ ↓ 移动焦点，Enter / 点击选中并关闭，Esc 取消。
+ */
+export class IconListEditor extends GlobalOverlayEditor {
+  readonly #items: IconLabeledItem[];
+  #currentValue = '';
+
+  protected get initialFocusIndex(): number {
+    return this.#items.findIndex(i => i.value === this.#currentValue);
+  }
+
+  protected get itemCount(): number {
+    return this.#items.length;
+  }
+
+  /** VTable 编辑器类型标识（注册到 VTable 的编辑器名） */
+  readonly editorType = 'icon-list';
+
+  /**
+   * 创建图标列表编辑器
+   *
+   * @param config 编辑器配置（values 为条目列表）
+   */
+  constructor(config: { values: IconLabeledItem[] }) {
+    super();
+    this.#items = config.values;
+  }
+
+  /** 初始化编辑：解析当前值；不在候选列表中时回退到单元格原始值 */
+  override onStart(ctx: Parameters<GlobalOverlayEditor['onStart']>[0]): void {
+    const raw = ctx.value ?? '';
+    const isValid = this.#items.some(i => i.value === raw);
+    this.#currentValue =
+      isValid ? raw : (
+        (((ctx.table as { getCellOriginValue(c: number, r: number): unknown } | null)?.getCellOriginValue(
+          ctx.col,
+          ctx.row
+        ) as string | undefined) ?? '')
+      );
+    super.onStart(ctx);
+  }
+
+  /** 返回当前选中的条目值 */
+  override getValue(): string {
+    return this.#currentValue;
+  }
+
+  protected override onDeleteKey(): void {
+    this.#currentValue = '';
+    this.close();
+  }
+
+  protected buildRows(panel: HTMLDivElement): void {
+    this.#items.forEach((item, idx) => {
+      const isSelected = item.value === this.#currentValue;
+      const row = document.createElement('div');
+      row.dataset['value'] = item.value;
+      row.dataset['idx'] = String(idx);
+      row.style.cssText = [
+        'display:flex',
+        'align-items:center',
+        'gap:6px',
+        'padding:5px 10px',
+        'cursor:pointer',
+        'font-size:12px',
+        `color:${DAISY_COLORS.text}`,
+        `background:${isSelected ? DAISY_COLORS.selectedBg : 'transparent'}`
+      ].join(';');
+
+      if (item.icon && item.color) {
+        row.appendChild(lucideToSvgElement(item.icon, item.color));
+        const span = document.createElement('span');
+        span.textContent = item.text;
+        row.appendChild(span);
+      } else {
+        row.textContent = item.text;
+      }
+
+      row.addEventListener('mouseenter', () => this.setFocused(idx));
+      row.addEventListener('mousedown', e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.onRowClick(idx);
+      });
+
+      panel.appendChild(row);
+    });
+  }
+
+  protected onRowClick(idx: number): void {
+    const item = this.#items[idx];
+    if (!item) return;
+    this.#currentValue = item.value;
+    this.close();
+  }
+
+  protected onFocusChange(idx: number, prev: number): void {
+    const prevRow = this.rowAt(prev);
+    if (prevRow) {
+      const isSelected = prevRow.dataset['value'] === this.#currentValue;
+      prevRow.style.background = isSelected ? DAISY_COLORS.selectedBg : 'transparent';
+    }
+    const nextRow = this.rowAt(idx);
+    if (nextRow) nextRow.style.background = DAISY_COLORS.focusBg;
+  }
+}

package/src/entity-table/editors/json-editor.ts

@@ -0,0 +1,212 @@
+import type { EditContext, IEditor } from '@visactor/vtable-editors';
+import { DAISY_COLORS, positionOverlayPanel, refocusTable, scheduleEditorSetup } from './global-overlay-editor.js';
+
+type TableLike = { getCellOriginValue(col: number, row: number): unknown } | null;
+
+/**
+ * JSON / KeyValue 编辑器
+ *
+ * 浮层显示带语法提示的 textarea，适合编辑 json 和 keyValue 类型。
+ * - Ctrl+Enter：验证并提交
+ * - Escape：取消（恢复原始值）
+ * - 点击外部：best-effort 提交（JSON 合法则提交，否则保持原始值）
+ * - 实时显示 JSON 格式错误
+ */
+export class JsonEditor implements IEditor<unknown> {
+  #value: unknown = null;
+  #originalValue: unknown = null;
+  #panel: HTMLDivElement | null = null;
+  #textarea: HTMLTextAreaElement | null = null;
+  #errorEl: HTMLDivElement | null = null;
+  #endEdit: (() => void) | null = null;
+  #outsideHandler: ((e: MouseEvent) => void) | null = null;
+
+  /** VTable 编辑器类型标识（注册到 VTable 的编辑器名） */
+  readonly editorType = 'json-editor';
+
+  /** 打开编辑器：构建浮层 textarea 面板并初始化原始值 */
+  onStart(ctx: EditContext<unknown>): void {
+    const container = ctx.container as HTMLElement;
+    this.#endEdit = () => {
+      refocusTable(container);
+      ctx.endEdit();
+    };
+    const origin = (ctx.table as TableLike)?.getCellOriginValue(ctx.col, ctx.row) ?? ctx.value;
+    this.#value = origin ?? null;
+    this.#originalValue = this.#value;
+
+    const panel = document.createElement('div');
+    panel.style.cssText = [
+      'position:fixed',
+      'z-index:9999',
+      'padding:8px',
+      'min-width:280px',
+      `background:${DAISY_COLORS.bg}`,
+      `border:1px solid ${DAISY_COLORS.border}`,
+      'border-radius:8px',
+      'box-shadow:0 4px 16px rgba(0,0,0,.18)',
+      'display:flex',
+      'flex-direction:column',
+      'gap:4px'
+    ].join(';');
+
+    const topRow = document.createElement('div');
+    topRow.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:4px';
+
+    const hint = document.createElement('div');
+    hint.style.cssText = `font-size:12px;opacity:0.45;color:${DAISY_COLORS.text}`;
+    hint.textContent = 'Ctrl+Enter 确认 · Esc 取消';
+
+    const copyBtn = document.createElement('button');
+    copyBtn.type = 'button';
+    copyBtn.textContent = '复制';
+    copyBtn.title = '复制 JSON';
+    copyBtn.style.cssText = [
+      'font-size:12px',
+      `color:${DAISY_COLORS.text}`,
+      'opacity:0.6',
+      'background:none',
+      `border:1px solid ${DAISY_COLORS.border}`,
+      'border-radius:4px',
+      'cursor:pointer',
+      'padding:1px 6px',
+      'white-space:nowrap',
+      'flex-shrink:0'
+    ].join(';');
+    copyBtn.addEventListener('mousedown', e => {
+      e.preventDefault();
+      e.stopPropagation();
+      const text = this.#textarea?.value ?? '';
+      navigator.clipboard?.writeText(text).catch(() => {
+        /* ignore */
+      });
+      copyBtn.textContent = '✓';
+      setTimeout(() => {
+        copyBtn.textContent = '复制';
+      }, 1200);
+    });
+
+    topRow.appendChild(hint);
+    topRow.appendChild(copyBtn);
+
+    const textarea = document.createElement('textarea');
+    textarea.style.cssText = [
+      'width:280px',
+      'height:140px',
+      'resize:both',
+      `background:${DAISY_COLORS.bg}`,
+      `color:${DAISY_COLORS.text}`,
+      `border:1px solid ${DAISY_COLORS.border}`,
+      'border-radius:4px',
+      'padding:6px',
+      'font-size:12px',
+      'font-family:monospace',
+      'outline:none',
+      'line-height:1.5'
+    ].join(';');
+    try {
+      textarea.value = this.#value != null ? JSON.stringify(this.#value, null, 2) : '';
+    } catch {
+      textarea.value = '';
+    }
+    this.#textarea = textarea;
+
+    const errorEl = document.createElement('div');
+    errorEl.style.cssText = `font-size:12px;color:${DAISY_COLORS.error};min-height:14px;word-break:break-all`;
+    this.#errorEl = errorEl;
+
+    textarea.addEventListener('input', () => this.#validate());
+    textarea.addEventListener('keydown', e => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (this.#tryCommit()) this.#endEdit?.();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#value = this.#originalValue; // 恢复原始值
+        this.#endEdit?.();
+      }
+      // Enter 在 textarea 里正常换行，不拦截
+    });
+
+    panel.appendChild(topRow);
+    panel.appendChild(textarea);
+    panel.appendChild(errorEl);
+    document.body.appendChild(panel);
+    positionOverlayPanel(panel, ctx.referencePosition.rect, ctx.container as HTMLElement, 200, { maxRight: 320 });
+    this.#panel = panel;
+
+    this.#outsideHandler = (e: MouseEvent) => {
+      if (!panel.contains(e.target as Node)) {
+        // 点击外部：best-effort 提交
+        this.#tryCommit();
+        this.#cleanup();
+        this.#endEdit?.();
+      }
+    };
+    scheduleEditorSetup(() => {
+      if (!this.#outsideHandler) return;
+      document.addEventListener('mousedown', this.#outsideHandler, { capture: true });
+      textarea.focus();
+      // 光标移到末尾
+      textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
+    });
+  }
+
+  /** 返回当前编辑值 */
+  getValue(): unknown {
+    return this.#value;
+  }
+
+  /** 结束编辑：清理浮层面板与事件监听 */
+  onEnd(): void {
+    this.#cleanup();
+  }
+
+  /** 判断目标元素是否属于编辑器浮层 */
+  isEditorElement(el: HTMLElement | EventTarget): boolean {
+    return !!this.#panel?.contains(el as Node);
+  }
+
+  #validate(): boolean {
+    const text = (this.#textarea?.value ?? '').trim();
+    if (!text) {
+      if (this.#errorEl) this.#errorEl.textContent = '';
+      return true;
+    }
+    try {
+      JSON.parse(text);
+      if (this.#errorEl) this.#errorEl.textContent = '';
+      return true;
+    } catch (e) {
+      if (this.#errorEl) this.#errorEl.textContent = `⚠ ${(e as Error).message}`;
+      return false;
+    }
+  }
+
+  #tryCommit(): boolean {
+    const text = (this.#textarea?.value ?? '').trim();
+    if (!text) {
+      this.#value = null;
+      return true;
+    }
+    try {
+      this.#value = JSON.parse(text);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  #cleanup(): void {
+    if (this.#outsideHandler) {
+      document.removeEventListener('mousedown', this.#outsideHandler, { capture: true });
+      this.#outsideHandler = null;
+    }
+    this.#panel?.remove();
+    this.#panel = null;
+    this.#textarea = null;
+    this.#errorEl = null;
+  }
+}