@aiao/rxdb-model 0.0.19 → 0.0.26

package/src/entity-table/editors/text-format-editor.ts

@@ -0,0 +1,220 @@
+import type { EditContext, IEditor, RectProps } from '@visactor/vtable-editors';
+import { validateEntityFieldValue } from '../../entity-value.utils.js';
+import { DAISY_COLORS, refocusTable, scheduleEditorSetup } from './global-overlay-editor.js';
+
+type TableLike = { getCellOriginValue(col: number, row: number): unknown } | null;
+
+/** TextFormatEditor 支持的 format 判别 */
+export type TextFormatMode = 'email' | 'phone' | 'url';
+
+/**
+ * 文本语义编辑器（url / email / phone）
+ *
+ * 与普通文本输入一致，但提交时按 format 语义校验（协议白名单 / 邮箱形状 / 电话形状），
+ * 校验失败显示红色错误提示并拒绝提交。
+ */
+export class TextFormatEditor implements IEditor<unknown> {
+  #value: string | null = null;
+  #originalValue: string | null = null;
+  #input: HTMLInputElement | null = null;
+  #tooltip: HTMLDivElement | null = null;
+  #container: HTMLElement | null = null;
+  #endEdit: (() => void) | null = null;
+  #outsideHandler: ((e: MouseEvent) => void) | null = null;
+  readonly #mode: TextFormatMode;
+  readonly #schemes: readonly string[] | undefined;
+
+  /** VTable 编辑器类型标识（注册到 VTable 的编辑器名） */
+  readonly editorType = 'text-format-editor';
+
+  /**
+   * 创建文本语义编辑器
+   *
+   * @param mode - 校验模式
+   * @param schemes - url 模式的协议白名单（不传则不限制协议）
+   */
+  constructor(mode: TextFormatMode, schemes?: readonly string[]) {
+    this.#mode = mode;
+    this.#schemes = schemes;
+  }
+
+  /** 创建并显示输入框与错误提示浮层，绑定校验与提交逻辑 */
+  onStart(ctx: EditContext<unknown>): void {
+    const container = ctx.container as HTMLElement;
+    this.#container = container;
+    this.#endEdit = () => {
+      refocusTable(container);
+      ctx.endEdit();
+    };
+    const origin = (ctx.table as TableLike)?.getCellOriginValue(ctx.col, ctx.row) ?? ctx.value;
+    this.#value = origin != null && origin !== '' ? String(origin) : null;
+    this.#originalValue = this.#value;
+
+    const rect = ctx.referencePosition.rect;
+    const cRect = container.getBoundingClientRect();
+    const absLeft = cRect.left + rect.left;
+    const absTop = cRect.top + rect.top;
+    const w = Math.max(60, rect.width ?? 0);
+    const h = Math.max(24, rect.height ?? 0);
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.inputMode =
+      this.#mode === 'phone' ? 'tel'
+      : this.#mode === 'email' ? 'email'
+      : 'url';
+    input.value = this.#value ?? '';
+    input.style.cssText = [
+      'position:fixed',
+      'z-index:9999',
+      'padding:4px',
+      'box-sizing:border-box',
+      `background:${DAISY_COLORS.bg}`,
+      `color:${DAISY_COLORS.text}`,
+      'border-radius:0',
+      `border:2px solid ${DAISY_COLORS.primary}`,
+      'outline:none',
+      'font-size:13px',
+      `left:${absLeft}px`,
+      `top:${absTop}px`,
+      `width:${w}px`,
+      `height:${h}px`
+    ].join(';');
+
+    const tooltip = document.createElement('div');
+    tooltip.style.cssText = [
+      'position:fixed',
+      'z-index:10000',
+      'padding:4px 8px',
+      'font-size:11px',
+      `color:${DAISY_COLORS.errorContent}`,
+      `background:${DAISY_COLORS.error}`,
+      'border-radius:4px',
+      'box-shadow:0 2px 8px rgba(0,0,0,.15)',
+      'white-space:nowrap',
+      'display:none',
+      'pointer-events:none',
+      `left:${absLeft}px`,
+      `top:${absTop + h + 2}px`
+    ].join(';');
+
+    const setError = (show: boolean, msg?: string) => {
+      if (show && msg) {
+        tooltip.textContent = msg;
+        tooltip.style.display = 'block';
+        input.style.borderColor = DAISY_COLORS.error;
+      } else {
+        tooltip.textContent = '';
+        tooltip.style.display = 'none';
+        input.style.borderColor = DAISY_COLORS.primary;
+      }
+    };
+
+    let commitError = '';
+    const commit = (): boolean => {
+      if (input.value.trim() === '') {
+        this.#value = null;
+        return true;
+      }
+      const error = validateEntityFieldValue(
+        {
+          field: 'value',
+          displayName: '',
+          type: 'string',
+          format: this.#mode === 'url' ? { kind: 'url', schemes: this.#schemes } : { kind: this.#mode }
+        },
+        input.value
+      );
+      if (error) {
+        commitError = error.message.trim();
+        return false;
+      }
+      this.#value = input.value;
+      return true;
+    };
+
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (commit()) {
+          this.#endEdit?.();
+        } else {
+          setError(true, commitError);
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#value = this.#originalValue;
+        this.#endEdit?.();
+      }
+    });
+
+    document.body.appendChild(input);
+    document.body.appendChild(tooltip);
+    this.#input = input;
+    this.#tooltip = tooltip;
+
+    this.#outsideHandler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (target !== input && !tooltip.contains(target)) {
+        if (!commit()) {
+          this.#value = this.#originalValue;
+        }
+        this.#cleanup();
+        this.#endEdit?.();
+      }
+    };
+    scheduleEditorSetup(() => {
+      if (!this.#outsideHandler) return;
+      document.addEventListener('mousedown', this.#outsideHandler, { capture: true });
+      input.focus();
+      input.select();
+    });
+  }
+
+  /** 返回当前文本值，空值为 null */
+  getValue(): string | null {
+    return this.#value;
+  }
+
+  /** 移除输入框与提示浮层，解绑全局点击事件 */
+  onEnd(): void {
+    this.#cleanup();
+  }
+
+  /** 判断目标元素是否属于本编辑器（输入框或错误提示浮层） */
+  isEditorElement(el: HTMLElement | EventTarget): boolean {
+    const node = el as Node;
+    return node === this.#input || this.#tooltip?.contains(node) === true;
+  }
+
+  /** 按新的单元格矩形重新定位输入框与错误提示浮层 */
+  adjustPosition(rect: RectProps): void {
+    const input = this.#input;
+    const container = this.#container;
+    if (!input || !container) return;
+    const cRect = container.getBoundingClientRect();
+    const absLeft = cRect.left + rect.left;
+    const absTop = cRect.top + rect.top;
+    const h = Math.max(24, rect.height ?? 0);
+    input.style.left = `${absLeft}px`;
+    input.style.top = `${absTop}px`;
+    if (this.#tooltip) {
+      this.#tooltip.style.left = `${absLeft}px`;
+      this.#tooltip.style.top = `${absTop + h + 2}px`;
+    }
+  }
+
+  #cleanup(): void {
+    if (this.#outsideHandler) {
+      document.removeEventListener('mousedown', this.#outsideHandler, { capture: true });
+      this.#outsideHandler = null;
+    }
+    this.#input?.remove();
+    this.#input = null;
+    this.#tooltip?.remove();
+    this.#tooltip = null;
+    this.#container = null;
+  }
+}

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

@@ -0,0 +1,198 @@
+import type { EditContext, IEditor, RectProps } from '@visactor/vtable-editors';
+import { UUID_RE } from '../../entity-value.utils.js';
+import { DAISY_COLORS, refocusTable, scheduleEditorSetup } from './global-overlay-editor.js';
+
+type TableLike = { getCellOriginValue(col: number, row: number): unknown } | null;
+
+/** UUID 格式正则（re-export，定义见 entity-value.utils） */
+export { UUID_RE };
+
+/**
+ * UUID 文本编辑器
+ *
+ * 在单元格上方弹出固定定位输入框，提交时校验 UUID 格式（非法则红色提示）。
+ * Enter / Tab 提交；Escape 恢复原值；点击外部提交，非法输入恢复原值。
+ */
+export class UuidEditor implements IEditor<unknown> {
+  #value: string | null = null;
+  #originalValue: string | null = null;
+  #input: HTMLInputElement | null = null;
+  #tooltip: HTMLDivElement | null = null;
+  #container: HTMLElement | null = null;
+  #endEdit: (() => void) | null = null;
+  #outsideHandler: ((e: MouseEvent) => void) | null = null;
+
+  /** VTable 编辑器类型标识（注册到 VTable 的编辑器名） */
+  readonly editorType = 'uuid-editor';
+
+  /** 创建并显示输入框与错误提示浮层，绑定格式校验与提交逻辑 */
+  onStart(ctx: EditContext<unknown>): void {
+    const container = ctx.container as HTMLElement;
+    this.#container = container;
+    this.#endEdit = () => {
+      refocusTable(container);
+      ctx.endEdit();
+    };
+    const origin = (ctx.table as TableLike)?.getCellOriginValue(ctx.col, ctx.row) ?? ctx.value;
+    this.#value = origin != null && origin !== '' ? String(origin).trim() : null;
+    this.#originalValue = this.#value;
+
+    const rect = ctx.referencePosition.rect;
+    const cRect = container.getBoundingClientRect();
+    const absLeft = cRect.left + rect.left;
+    const absTop = cRect.top + rect.top;
+    const w = Math.max(80, rect.width ?? 0);
+    const h = Math.max(24, rect.height ?? 0);
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = this.#value ?? '';
+    input.placeholder = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx';
+    input.style.cssText = [
+      'position:fixed',
+      'z-index:9999',
+      'padding:4px',
+      'box-sizing:border-box',
+      `background:${DAISY_COLORS.bg}`,
+      `color:${DAISY_COLORS.text}`,
+      'border-radius:0',
+      `border:2px solid ${DAISY_COLORS.primary}`,
+      'outline:none',
+      'font-size:13px',
+      `left:${absLeft}px`,
+      `top:${absTop}px`,
+      `width:${w}px`,
+      `height:${h}px`
+    ].join(';');
+
+    const tooltip = document.createElement('div');
+    tooltip.style.cssText = [
+      'position:fixed',
+      'z-index:10000',
+      'padding:4px 8px',
+      'font-size:11px',
+      `color:${DAISY_COLORS.errorContent}`,
+      `background:${DAISY_COLORS.error}`,
+      'border-radius:4px',
+      'box-shadow:0 2px 8px rgba(0,0,0,.15)',
+      'white-space:nowrap',
+      'display:none',
+      'pointer-events:none',
+      `left:${absLeft}px`,
+      `top:${absTop + h + 2}px`
+    ].join(';');
+
+    const setError = (msg: string) => {
+      if (msg) {
+        tooltip.textContent = msg;
+        tooltip.style.display = 'block';
+        input.style.borderColor = DAISY_COLORS.error;
+      } else {
+        tooltip.textContent = '';
+        tooltip.style.display = 'none';
+        input.style.borderColor = DAISY_COLORS.primary;
+      }
+    };
+
+    input.addEventListener('input', () => {
+      const v = input.value.trim();
+      if (v === '' || UUID_RE.test(v)) {
+        setError('');
+      } else {
+        setError('请输入合法的 UUID 格式');
+      }
+    });
+
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        e.stopPropagation();
+        const v = input.value.trim();
+        if (v === '') {
+          this.#value = null;
+          this.#endEdit?.();
+        } else if (UUID_RE.test(v)) {
+          this.#value = v.toLowerCase();
+          this.#endEdit?.();
+        } else {
+          setError('请输入合法的 UUID 格式 (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)');
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#value = this.#originalValue;
+        this.#endEdit?.();
+      }
+    });
+
+    document.body.appendChild(input);
+    document.body.appendChild(tooltip);
+    this.#input = input;
+    this.#tooltip = tooltip;
+
+    this.#outsideHandler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (target !== input && !tooltip.contains(target)) {
+        const v = input.value.trim();
+        if (v === '' || UUID_RE.test(v)) {
+          this.#value = v === '' ? null : v.toLowerCase();
+        } else {
+          this.#value = this.#originalValue;
+        }
+        this.#cleanup();
+        this.#endEdit?.();
+      }
+    };
+    scheduleEditorSetup(() => {
+      if (!this.#outsideHandler) return;
+      document.addEventListener('mousedown', this.#outsideHandler, { capture: true });
+      input.focus();
+      input.select();
+    });
+  }
+
+  /** 返回当前 UUID 值，空值为 null */
+  getValue(): string | null {
+    return this.#value;
+  }
+
+  /** 移除输入框与提示浮层，解绑全局点击事件 */
+  onEnd(): void {
+    this.#cleanup();
+  }
+
+  /** 判断目标元素是否属于本编辑器（输入框或错误提示浮层） */
+  isEditorElement(el: HTMLElement | EventTarget): boolean {
+    const node = el as Node;
+    return node === this.#input || this.#tooltip?.contains(node) === true;
+  }
+
+  /** 按新的单元格矩形重新定位输入框与错误提示浮层 */
+  adjustPosition(rect: RectProps): void {
+    const input = this.#input;
+    const container = this.#container;
+    if (!input || !container) return;
+    const cRect = container.getBoundingClientRect();
+    const absLeft = cRect.left + rect.left;
+    const absTop = cRect.top + rect.top;
+    const h = Math.max(24, rect.height ?? 0);
+    input.style.left = `${absLeft}px`;
+    input.style.top = `${absTop}px`;
+    if (this.#tooltip) {
+      this.#tooltip.style.left = `${absLeft}px`;
+      this.#tooltip.style.top = `${absTop + h + 2}px`;
+    }
+  }
+
+  #cleanup(): void {
+    if (this.#outsideHandler) {
+      document.removeEventListener('mousedown', this.#outsideHandler, { capture: true });
+      this.#outsideHandler = null;
+    }
+    this.#input?.remove();
+    this.#input = null;
+    this.#tooltip?.remove();
+    this.#tooltip = null;
+    this.#container = null;
+  }
+}

package/src/entity-table/index.ts

@@ -0,0 +1,96 @@
+/**
+ * 实体表格模块
+ *
+ * 提供 VTable 驱动的实体表格基础设施：接口与配置、表格工厂/主题/操作、
+ * 自定义编辑器与列构建工具的统一出口。
+ *
+ * @module entity-table
+ */
+// 接口与配置
+export type {
+  BatchChangeItem,
+  CellChangeEvent,
+  EntityTableConfig,
+  EntityTableRecord,
+  PendingWrite,
+  RowDeleteEvent,
+  RowReorderEvent
+} from './interfaces.js';
+
+// VTable 基础设施
+export {
+  TableClipboardManager,
+  applyClipboard,
+  applySystemText,
+  collectDeleteWrites,
+  formatAsTsv,
+  snapshotSelection,
+  type ClipboardCell,
+  type ClipboardContent
+} from './vtable/table-clipboard.js';
+export {
+  _resetEditorRegistry,
+  buildTableOptions,
+  createListTable,
+  ensureBaseEditorRegistered,
+  registerEditor
+} from './vtable/table-factory.js';
+export { handleTableKeydown, type KeyboardHandlerContext } from './vtable/table-keyboard.js';
+export {
+  collectReorderedIds,
+  patchDragIconForReadonlyRows,
+  syncHeaderSortIcon,
+  updateTableRecords,
+  type HeaderSortClick
+} from './vtable/table-operations.js';
+export { createTheme, getCSSVariables, getDefaultColors, type CSSVariables } from './vtable/table-theme.js';
+export { CellTooltipManager, computeTooltipPosition } from './vtable/table-tooltip.js';
+export {
+  ROW_SERIES_COL_OFFSET,
+  changeCellValue,
+  completeTableEdit,
+  getTableContainer,
+  isTableEditing,
+  setCellSwitchState
+} from './vtable/vtable-compat.js';
+
+// 自定义编辑器
+export { ColorEditor } from './editors/color-editor.js';
+export { DateEditor } from './editors/date-editor.js';
+export { EnumEditor, type EnumItem } from './editors/enum-editor.js';
+export {
+  DAISY_COLORS,
+  GlobalOverlayEditor,
+  positionOverlayPanel,
+  scheduleEditorSetup
+} from './editors/global-overlay-editor.js';
+export { IconListEditor, type IconLabeledItem } from './editors/icon-list-editor.js';
+export { JsonEditor } from './editors/json-editor.js';
+export { KeyValueEditor } from './editors/key-value-editor.js';
+export { lucideToSvgElement, type IconData } from './editors/lucide-svg.js';
+export { MultiSelectEditor, type MultiSelectOption } from './editors/multiselect-editor.js';
+export { NumberEditor, type NumberEditorOptions } from './editors/number-editor.js';
+export { RelationEditor } from './editors/relation-editor.js';
+export { SafeListEditor } from './editors/safe-list-editor.js';
+export { TagsEditor, type TagsMode } from './editors/tags-editor.js';
+export { TextFormatEditor, type TextFormatMode } from './editors/text-format-editor.js';
+
+// 列工具
+export {
+  DELETE_COLOR,
+  actionsColumn,
+  buildPropertyColumn,
+  disabledEditorForReadonly,
+  formatDateValue,
+  getCellRecord,
+  isReadonly,
+  isReadonlyOrAddRow,
+  makeDeleteIcons,
+  makeEditorForReadonly,
+  parsePropertyColumnValue,
+  switchDisabledForReadonly,
+  type KVSchemaEntry,
+  type PropertyColumnConfig,
+  type PropertyTypeString,
+  type SwitchDisableCallback
+} from './columns/column-utils.js';

package/src/entity-table/interfaces.ts

@@ -0,0 +1,72 @@
+/**
+ * 通用实体表记录基础接口
+ *
+ * 业务层扩展此接口添加领域字段。
+ * `_` 前缀字段为内部元数据，不会被剪贴板/编辑操作处理。
+ */
+export interface EntityTableRecord {
+  /** 记录字段值（字段名 → 值） */
+  [key: string]: unknown;
+  /** 只读行（不可编辑、不可拖拽、不可删除） */
+  _readonly?: boolean;
+  /** 新增模板行 */
+  _isAddRow?: boolean;
+  /** 树结构子节点 */
+  children?: EntityTableRecord[];
+  /** VTable 树节点展开状态 */
+  hierarchyState?: 'expand' | 'collapse';
+}
+
+/** 单元格变更事件 */
+export interface CellChangeEvent {
+  /** 变更所在列索引 */
+  col: number;
+  /** 变更所在行索引 */
+  row: number;
+  /** 变更的字段名 */
+  field: string;
+  /** 变更后的值 */
+  value: unknown;
+  /** 变更所在行记录 */
+  record: EntityTableRecord;
+}
+
+/** 批量变更项 */
+export interface BatchChangeItem {
+  /** 目标记录 ID */
+  recordId: string;
+  /** 字段名到新值的映射 */
+  changes: Record<string, unknown>;
+}
+
+/** 行删除事件 */
+export interface RowDeleteEvent {
+  /** 被删除的行记录 */
+  record: EntityTableRecord;
+}
+
+/** 行重排事件 */
+export interface RowReorderEvent {
+  /** 重排后的行 ID 顺序列表 */
+  orderedIds: string[];
+}
+
+/** 剪贴板/批量写入的待提交操作 */
+export interface PendingWrite {
+  /** 目标列索引 */
+  col: number;
+  /** 目标行索引 */
+  row: number;
+  /** 待写入的值 */
+  value: unknown;
+  /** 目标列字段名 */
+  field: string;
+  /** 目标行记录快照（写入时刻） */
+  record: EntityTableRecord;
+}
+
+/** 表格配置 */
+export interface EntityTableConfig {
+  /** 单元格错误 tooltip 延迟（毫秒），默认 800 */
+  tooltipDelay?: number;
+}