@aiao/rxdb-model 0.0.19 → 0.0.28

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

@@ -0,0 +1,316 @@
+import type { EditContext, IEditor, RectProps } from '@visactor/vtable-editors';
+import type { RelatedEntityItem } from '../../entity-form/interfaces.js';
+import { DAISY_COLORS, positionOverlayPanel, refocusTable } from './global-overlay-editor.js';
+
+/** 关联实体选项项 */
+// Re-export for convenience
+export { type RelatedEntityItem };
+
+/**
+ * 关系字段搜索下拉编辑器（oneToOne / manyToOne）
+ *
+ * - 顶部搜索框：实时过滤可选实体列表
+ * - 键盘导航：↑ ↓ 移动焦点，Enter / 点击确认，Escape 取消
+ * - 空值支持：nullable=true 时列表首项为"(空)"
+ * - 存储外键 ID，显示关联实体的 displayName
+ */
+export class RelationEditor implements IEditor<string> {
+  #currentValue = '';
+  #originalValue = '';
+  readonly #itemsSource: RelatedEntityItem[] | (() => RelatedEntityItem[]);
+  /** 每次 onStart 时从 source 解析出的本轮候选列表 */
+  #resolvedItems: RelatedEntityItem[] = [];
+  #filteredItems: RelatedEntityItem[] = [];
+  readonly #nullable: boolean;
+  #focusedIndex = -1;
+
+  #panel: HTMLDivElement | null = null;
+  #listContainer: HTMLDivElement | null = null;
+  #searchInput: HTMLInputElement | null = null;
+  #endEdit: (() => void) | null = null;
+  #container: HTMLElement | null = null;
+
+  readonly #handleOutsideMouseDown: (e: MouseEvent) => void;
+  readonly #handleKeydown: (e: KeyboardEvent) => void;
+  /** VTable 编辑器类型标识（注册到 VTable 的编辑器名） */
+  readonly editorType = 'relation-editor';
+
+  /**
+   * 创建关系下拉编辑器
+   *
+   * @param items - 候选实体列表，或每次打开时重新求值的工厂函数
+   * @param nullable - 是否允许空值，为 true 时列表首项为“(空)”
+   */
+  constructor(items: RelatedEntityItem[] | (() => RelatedEntityItem[]) = [], nullable = false) {
+    this.#itemsSource = items;
+    this.#nullable = nullable;
+
+    this.#handleOutsideMouseDown = (e: MouseEvent) => {
+      if (!this.#panel?.contains(e.target as HTMLElement)) {
+        this.#cancelEdit();
+      }
+    };
+
+    this.#handleKeydown = (e: KeyboardEvent) => {
+      const inSearch = document.activeElement === this.#searchInput;
+      switch (e.key) {
+        case 'Escape':
+          e.preventDefault();
+          e.stopPropagation();
+          this.#cancelEdit();
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          e.stopPropagation();
+          this.#moveFocus(1);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          e.stopPropagation();
+          this.#moveFocus(-1);
+          break;
+        case 'Enter':
+          if (this.#focusedIndex >= 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.#selectAt(this.#focusedIndex);
+          }
+          break;
+        case 'Delete':
+        case 'Backspace':
+          if (!inSearch && this.#nullable) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.#currentValue = '';
+            this.#commitEdit();
+          }
+          break;
+      }
+    };
+  }
+
+  /** 弹出搜索浮层，解析候选列表并绑定键盘与点击事件 */
+  onStart(ctx: EditContext<string>): void {
+    const table = ctx.table as { getCellOriginValue(col: number, row: number): unknown } | null;
+    const origin = table?.getCellOriginValue(ctx.col, ctx.row) ?? ctx.value;
+    this.#currentValue = origin != null ? String(origin) : '';
+    this.#originalValue = this.#currentValue;
+    this.#container = ctx.container;
+    this.#endEdit = ctx.endEdit;
+
+    // 每次打开编辑器时重新解析候选列表（支持动态 provider）
+    this.#resolvedItems = typeof this.#itemsSource === 'function' ? this.#itemsSource() : this.#itemsSource;
+
+    this.#buildFilteredItems('');
+
+    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:0',
+      'box-shadow:0 4px 16px rgba(0,0,0,.15)',
+      'min-width:200px',
+      'max-width:340px',
+      'display:flex',
+      'flex-direction:column',
+      'overflow:hidden'
+    ].join(';');
+
+    // 搜索框
+    const searchWrap = document.createElement('div');
+    searchWrap.style.cssText = `padding:6px 8px;border-bottom:1px solid ${DAISY_COLORS.border};flex-shrink:0`;
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.placeholder = '搜索…';
+    input.style.cssText = [
+      'width:100%',
+      'box-sizing:border-box',
+      'padding:4px 8px',
+      'font-size:12px',
+      `background:${DAISY_COLORS.hover}`,
+      `color:${DAISY_COLORS.text}`,
+      `border:1px solid ${DAISY_COLORS.border}`,
+      'border-radius:4px',
+      'outline:none'
+    ].join(';');
+    input.addEventListener('input', () => {
+      this.#buildFilteredItems(input.value);
+      this.#renderItems();
+    });
+    searchWrap.appendChild(input);
+    panel.appendChild(searchWrap);
+
+    // 列表容器
+    const listContainer = document.createElement('div');
+    listContainer.style.cssText = 'max-height:200px;overflow-y:auto;overscroll-behavior:contain;padding:4px 0';
+    panel.appendChild(listContainer);
+
+    this.#panel = panel;
+    this.#listContainer = listContainer;
+    this.#searchInput = input;
+
+    this.#renderItems();
+    document.body.appendChild(panel);
+
+    positionOverlayPanel(panel, ctx.referencePosition.rect, ctx.container, 280, { minWidth: 200 });
+
+    document.addEventListener('mousedown', this.#handleOutsideMouseDown, { capture: true });
+    document.addEventListener('keydown', this.#handleKeydown, { capture: true });
+
+    setTimeout(() => {
+      input.focus();
+      this.#focusedIndex = this.#filteredItems.findIndex(i => i.id === this.#currentValue);
+      if (this.#focusedIndex >= 0) {
+        this.#listContainer?.querySelector<HTMLElement>(`[data-idx="${this.#focusedIndex}"]`)?.scrollIntoView({
+          block: 'nearest'
+        });
+      }
+    }, 10);
+  }
+
+  /** 移除浮层并解绑全局事件 */
+  onEnd(): void {
+    this.#panel?.remove();
+    this.#panel = null;
+    this.#listContainer = null;
+    this.#searchInput = null;
+    document.removeEventListener('mousedown', this.#handleOutsideMouseDown, { capture: true });
+    document.removeEventListener('keydown', this.#handleKeydown, { capture: true });
+    this.#endEdit = null;
+    this.#container = null;
+  }
+
+  /** 返回当前选中的关联实体 ID（未选中为空字符串） */
+  getValue(): string {
+    return this.#currentValue;
+  }
+
+  /** 判断目标元素是否位于本编辑器浮层内 */
+  isEditorElement(target: HTMLElement): boolean {
+    return this.#panel?.contains(target) ?? false;
+  }
+
+  /** 按新的单元格矩形重新定位浮层 */
+  adjustPosition(rect: RectProps): void {
+    if (this.#panel) positionOverlayPanel(this.#panel, rect, this.#container, 280, { minWidth: 200 });
+  }
+
+  #buildFilteredItems(query: string): void {
+    const base: RelatedEntityItem[] =
+      this.#nullable ? [{ id: '', displayName: '(空)' }, ...this.#resolvedItems] : [...this.#resolvedItems];
+    if (!query.trim()) {
+      this.#filteredItems = base;
+      return;
+    }
+    const q = query.toLowerCase();
+    this.#filteredItems = base.filter(i => i.displayName.toLowerCase().includes(q) || i.id.toLowerCase().includes(q));
+    this.#focusedIndex = -1;
+  }
+
+  #renderItems(): void {
+    const list = this.#listContainer;
+    if (!list) return;
+    list.textContent = '';
+
+    if (this.#filteredItems.length === 0) {
+      const empty = document.createElement('div');
+      empty.style.cssText = `padding:8px 12px;font-size:12px;opacity:0.45;color:${DAISY_COLORS.text}`;
+      empty.textContent = '无匹配结果';
+      list.appendChild(empty);
+      return;
+    }
+
+    this.#filteredItems.forEach((item, idx) => {
+      const isNullItem = item.id === '';
+      const isSelected = item.id === this.#currentValue;
+      const isFocused = idx === this.#focusedIndex;
+
+      const row = document.createElement('div');
+      row.dataset['idx'] = String(idx);
+      row.style.cssText = [
+        'display:flex',
+        'align-items:center',
+        'padding:5px 12px',
+        'cursor:pointer',
+        'font-size:13px',
+        `color:${DAISY_COLORS.text}`,
+        `opacity:${isNullItem ? '0.55' : '1'}`,
+        `font-style:${isNullItem ? 'italic' : 'normal'}`,
+        `background:${
+          isFocused ? DAISY_COLORS.focusBg
+          : isSelected ? DAISY_COLORS.selectedBg
+          : 'transparent'
+        }`
+      ].join(';');
+      row.textContent = item.displayName;
+
+      row.addEventListener('mouseenter', () => {
+        const prev = this.#focusedIndex;
+        this.#focusedIndex = idx;
+        this.#updateRowStyle(prev);
+        this.#updateRowStyle(idx);
+      });
+      row.addEventListener('mousedown', e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#selectAt(idx);
+      });
+
+      list.appendChild(row);
+    });
+  }
+
+  #updateRowStyle(idx: number): void {
+    if (idx < 0) return;
+    const row = this.#listContainer?.querySelector<HTMLElement>(`[data-idx="${idx}"]`);
+    if (!row) return;
+    const item = this.#filteredItems[idx];
+    const isNullItem = item?.id === '';
+    const isSelected = item?.id === this.#currentValue;
+    const isFocused = idx === this.#focusedIndex;
+    row.style.background =
+      isFocused ? DAISY_COLORS.focusBg
+      : isSelected ? DAISY_COLORS.selectedBg
+      : 'transparent';
+    row.style.opacity = isNullItem ? '0.55' : '1';
+  }
+
+  #moveFocus(delta: number): void {
+    const count = this.#filteredItems.length;
+    if (count === 0) return;
+    const prev = this.#focusedIndex;
+    this.#focusedIndex =
+      prev < 0 ?
+        delta > 0 ?
+          0
+        : count - 1
+      : Math.max(0, Math.min(count - 1, prev + delta));
+    this.#updateRowStyle(prev);
+    this.#updateRowStyle(this.#focusedIndex);
+    this.#listContainer
+      ?.querySelector<HTMLElement>(`[data-idx="${this.#focusedIndex}"]`)
+      ?.scrollIntoView({ block: 'nearest' });
+  }
+
+  #selectAt(idx: number): void {
+    const item = this.#filteredItems[idx];
+    if (!item) return;
+    this.#currentValue = item.id;
+    this.#commitEdit();
+  }
+
+  #commitEdit(): void {
+    refocusTable(this.#container);
+    this.#endEdit?.();
+  }
+
+  #cancelEdit(): void {
+    this.#currentValue = this.#originalValue;
+    refocusTable(this.#container);
+    this.#endEdit?.();
+  }
+}

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

@@ -0,0 +1,17 @@
+import { ListEditor } from '@visactor/vtable-editors';
+
+/**
+ * Workaround for VTable `ListEditor` bug:
+ * `onEnd` throws TypeError when `element.parentNode` is null
+ * during keyboard-triggered cell navigation.
+ */
+export class SafeListEditor extends ListEditor {
+  /** 调用父类 onEnd，吞掉键盘导航场景下 parentNode 为 null 引发的 TypeError */
+  override onEnd(): void {
+    try {
+      super.onEnd();
+    } catch (e) {
+      if (!(e instanceof TypeError)) throw e;
+    }
+  }
+}

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

@@ -0,0 +1,239 @@
+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;
+
+/** 标签编辑器模式：'string' 字符串标签 / 'number' 数字标签 */
+export type TagsMode = 'string' | 'number';
+
+/**
+ * 标签（数组）输入编辑器
+ *
+ * 浮层显示标签芯片 + 输入框，适合编辑 stringArray / numberArray 类型。
+ * - Enter 或逗号：添加当前输入为新标签
+ * - Backspace（输入框为空时）：移除最后一个标签
+ * - 点击 × ：移除对应标签
+ * - Escape：取消（恢复原始标签）
+ * - 点击外部 / Tab：提交当前输入（若有内容）并关闭
+ *
+ * 数字模式下（TagsMode='number'）仅接受有效数字。
+ */
+export class TagsEditor implements IEditor<unknown> {
+  readonly #mode: TagsMode;
+  #tags: string[] = [];
+  #originalTags: string[] = [];
+  #panel: HTMLDivElement | null = null;
+  #chipsEl: HTMLDivElement | null = null;
+  #input: HTMLInputElement | null = null;
+  #endEdit: (() => void) | null = null;
+  #outsideHandler: ((e: MouseEvent) => void) | null = null;
+
+  /** VTable 编辑器类型标识（注册到 VTable 的编辑器名） */
+  readonly editorType: string;
+
+  /**
+   * 创建标签编辑器
+   *
+   * @param mode - 标签模式，'string'（默认）或 'number'
+   */
+  constructor(mode: TagsMode = 'string') {
+    this.#mode = mode;
+    this.editorType = mode === 'number' ? 'number-tags-editor' : 'tags-editor';
+  }
+
+  /** 弹出标签编辑浮层，从单元格值解析初始标签并绑定交互事件 */
+  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;
+
+    if (Array.isArray(origin)) {
+      this.#tags = (origin as unknown[]).map(String).filter(Boolean);
+    } else if (origin != null && origin !== '') {
+      this.#tags = String(origin)
+        .split(',')
+        .map(x => x.trim())
+        .filter(Boolean);
+    } else {
+      this.#tags = [];
+    }
+    this.#originalTags = [...this.#tags];
+
+    const panel = document.createElement('div');
+    panel.style.cssText = [
+      'position:fixed',
+      'z-index:9999',
+      'padding:8px',
+      'min-width:220px',
+      'max-width:360px',
+      `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:6px'
+    ].join(';');
+
+    const chipsEl = document.createElement('div');
+    chipsEl.style.cssText = ['display:flex', 'flex-wrap:wrap', 'gap:4px', 'min-height:20px'].join(';');
+    this.#chipsEl = chipsEl;
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    if (this.#mode === 'number') input.inputMode = 'decimal';
+    input.placeholder = this.#mode === 'number' ? '输入数字 Enter 添加' : '输入后 Enter 添加';
+    input.style.cssText = [
+      'width:100%',
+      `background:${DAISY_COLORS.bg}`,
+      `color:${DAISY_COLORS.text}`,
+      `border:1px solid ${DAISY_COLORS.border}`,
+      'border-radius:4px',
+      'padding:3px 6px',
+      'font-size:12px',
+      'outline:none',
+      `placeholder-color:${DAISY_COLORS.text}`
+    ].join(';');
+    this.#input = input;
+
+    const hint = document.createElement('div');
+    hint.style.cssText = `font-size:12px;opacity:0.4;color:${DAISY_COLORS.text}`;
+    hint.textContent = 'Enter /逗号 添加 · Backspace 删除 · Esc 取消';
+
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === ',') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#addTag(input.value.trim());
+        input.value = '';
+      } else if (e.key === 'Backspace' && input.value === '' && this.#tags.length > 0) {
+        this.#tags.pop();
+        this.#renderChips();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#tags = [...this.#originalTags]; // 恢复原始值
+        this.#endEdit?.();
+      } else if (e.key === 'Tab') {
+        const trimmed = input.value.trim();
+        if (trimmed) {
+          e.preventDefault();
+          this.#addTag(trimmed);
+          input.value = '';
+        }
+      }
+    });
+
+    panel.appendChild(chipsEl);
+    panel.appendChild(input);
+    panel.appendChild(hint);
+    document.body.appendChild(panel);
+    positionOverlayPanel(panel, ctx.referencePosition.rect, ctx.container as HTMLElement, 120, { maxRight: 380 });
+    this.#panel = panel;
+    this.#renderChips();
+
+    this.#outsideHandler = (e: MouseEvent) => {
+      if (!panel.contains(e.target as Node)) {
+        const trimmed = (this.#input?.value ?? '').trim();
+        if (trimmed) this.#addTag(trimmed);
+        this.#cleanup();
+        this.#endEdit?.();
+      }
+    };
+    scheduleEditorSetup(() => {
+      if (!this.#outsideHandler) return;
+      document.addEventListener('mousedown', this.#outsideHandler, { capture: true });
+      input.focus();
+    });
+  }
+
+  /** 返回标签数组；number 模式下返回数字数组 */
+  getValue(): string[] | number[] {
+    if (this.#mode === 'number') {
+      return this.#tags.map(Number).filter(n => !isNaN(n));
+    }
+    return [...this.#tags];
+  }
+
+  /** 移除浮层并解绑全局点击事件 */
+  onEnd(): void {
+    this.#cleanup();
+  }
+
+  /** 判断目标元素是否位于本编辑器浮层内 */
+  isEditorElement(el: HTMLElement | EventTarget): boolean {
+    return !!this.#panel?.contains(el as Node);
+  }
+
+  #addTag(value: string): void {
+    if (!value) return;
+    if (this.#mode === 'number') {
+      const n = Number(value);
+      if (isNaN(n)) return;
+      this.#tags.push(String(n)); // 允许重复
+    } else {
+      this.#tags.push(value); // 允许重复
+    }
+    this.#renderChips();
+  }
+
+  #renderChips(): void {
+    const el = this.#chipsEl;
+    if (!el) return;
+    el.textContent = '';
+    this.#tags.forEach((tag, idx) => {
+      const chip = document.createElement('span');
+      chip.style.cssText = [
+        'display:inline-flex',
+        'align-items:center',
+        'gap:2px',
+        'padding:1px 6px 1px 8px',
+        'border-radius:9999px',
+        'font-size:12px',
+        `background:${DAISY_COLORS.hover}`,
+        `color:${DAISY_COLORS.text}`,
+        `border:1px solid ${DAISY_COLORS.border}`,
+        'user-select:none'
+      ].join(';');
+
+      const label = document.createTextNode(tag);
+      const removeBtn = document.createElement('button');
+      removeBtn.type = 'button';
+      removeBtn.textContent = '×';
+      removeBtn.style.cssText = [
+        'background:none',
+        'border:none',
+        'cursor:pointer',
+        'font-size:13px',
+        'line-height:1',
+        'padding:0 1px',
+        `color:${DAISY_COLORS.text}`,
+        'opacity:0.5'
+      ].join(';');
+      removeBtn.addEventListener('mousedown', e => {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#tags.splice(idx, 1);
+        this.#renderChips();
+      });
+
+      chip.appendChild(label);
+      chip.appendChild(removeBtn);
+      el.appendChild(chip);
+    });
+  }
+
+  #cleanup(): void {
+    if (this.#outsideHandler) {
+      document.removeEventListener('mousedown', this.#outsideHandler, { capture: true });
+      this.#outsideHandler = null;
+    }
+    this.#panel?.remove();
+    this.#panel = null;
+    this.#chipsEl = null;
+    this.#input = null;
+  }
+}