@aiao/rxdb-model 0.0.19 → 0.0.28

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

@@ -0,0 +1,239 @@
+import type { EditContext, IEditor, RectProps } from '@visactor/vtable-editors';
+import { DAISY_COLORS, refocusTable, scheduleEditorSetup } from './global-overlay-editor.js';
+
+type TableLike = { getCellOriginValue(col: number, row: number): unknown } | null;
+
+/** 十六进制颜色（允许省略 `#`） */
+const HEX_COLOR_RE = /^#?[0-9a-fA-F]{6}$/;
+
+/** 把用户输入规范化为 `#rrggbb`；输入非法返回 null。 */
+const normalizeHexColor = (text: string): string | null => {
+  const trimmed = text.trim();
+  if (!HEX_COLOR_RE.test(trimmed)) return null;
+  return trimmed.startsWith('#') ? trimmed.toLowerCase() : `#${trimmed.toLowerCase()}`;
+};
+
+/**
+ * 颜色编辑器
+ *
+ * 在单元格上方弹出原生取色器 + 十六进制文本输入，两者双向同步。
+ * Enter / Tab 提交；Escape 恢复原值；点击外部提交，提交失败时恢复原值。
+ */
+export class ColorEditor implements IEditor<unknown> {
+  #value: string | null = null;
+  #originalValue: string | null = null;
+  #input: HTMLInputElement | null = null;
+  #picker: 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 = 'color-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;
+    const normalized = origin != null && origin !== '' ? normalizeHexColor(String(origin)) : null;
+    this.#value = normalized;
+    this.#originalValue = normalized;
+
+    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(150, rect.width ?? 0);
+    const h = Math.max(24, rect.height ?? 0);
+
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.placeholder = '#rrggbb';
+    input.value = this.#value ?? '';
+    input.style.cssText = [
+      'position:fixed',
+      'z-index:9999',
+      'padding:4px 6px',
+      '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 + 26}px`,
+      `top:${absTop}px`,
+      `width:${Math.max(60, w - 26)}px`,
+      `height:${h}px`
+    ].join(';');
+
+    const picker = document.createElement('input');
+    picker.type = 'color';
+    picker.value = this.#value ?? '#000000';
+    picker.title = '选择颜色';
+    picker.style.cssText = [
+      'position:fixed',
+      'z-index:9999',
+      'box-sizing:border-box',
+      'padding:0',
+      'border:none',
+      'background:transparent',
+      'cursor:pointer',
+      `left:${absLeft + 4}px`,
+      `top:${absTop + 2}px`,
+      'width:22px',
+      'height:20px'
+    ].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;
+      }
+    };
+
+    picker.addEventListener('input', () => {
+      input.value = picker.value;
+      setError(false);
+    });
+
+    input.addEventListener('input', () => {
+      const normalizedInput = normalizeHexColor(input.value);
+      if (input.value !== '' && normalizedInput !== null) {
+        picker.value = normalizedInput;
+        setError(false);
+      }
+    });
+
+    const commit = (): boolean => {
+      if (input.value.trim() === '') {
+        this.#value = null;
+        return true;
+      }
+      const normalizedInput = normalizeHexColor(input.value);
+      if (normalizedInput === null) return false;
+      this.#value = normalizedInput;
+      return true;
+    };
+
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        e.stopPropagation();
+        if (commit()) {
+          this.#endEdit?.();
+        } else {
+          setError(true, '请输入 #rrggbb 格式的颜色');
+        }
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#value = this.#originalValue;
+        this.#endEdit?.();
+      }
+    });
+
+    document.body.appendChild(picker);
+    document.body.appendChild(input);
+    document.body.appendChild(tooltip);
+    this.#input = input;
+    this.#picker = picker;
+    this.#tooltip = tooltip;
+
+    this.#outsideHandler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (target !== input && target !== picker && !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 || node === this.#picker || 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);
+    if (this.#picker) {
+      this.#picker.style.left = `${absLeft + 4}px`;
+      this.#picker.style.top = `${absTop + 2}px`;
+    }
+    input.style.left = `${absLeft + 26}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.#picker?.remove();
+    this.#picker = null;
+    this.#tooltip?.remove();
+    this.#tooltip = null;
+    this.#container = null;
+  }
+}

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

@@ -0,0 +1,169 @@
+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;
+
+/**
+ * 日期时间选择编辑器
+ *
+ * 直接覆盖单元格显示原生 datetime-local 输入框。
+ * - Enter / Tab：确认
+ * - Escape：取消（恢复原始值）
+ * - 点击外部：确认并关闭
+ * - 「清除」按钮：将值设为 null
+ */
+export class DateEditor implements IEditor<unknown> {
+  #value: Date | null = null;
+  #originalValue: Date | null = null;
+  #panel: HTMLDivElement | null = null;
+  #endEdit: (() => void) | null = null;
+  #outsideHandler: ((e: MouseEvent) => void) | null = null;
+
+  /** VTable 编辑器类型标识（注册到 VTable 的编辑器名） */
+  readonly editorType = 'date-editor';
+
+  /** 打开编辑器：构建浮层面板并初始化原生 datetime-local 输入 */
+  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 (origin instanceof Date) {
+      this.#value = isNaN(origin.getTime()) ? null : new Date(origin.getTime());
+    } else if (origin != null && origin !== '') {
+      const d = new Date(origin as string | number);
+      this.#value = isNaN(d.getTime()) ? null : d;
+    } else {
+      this.#value = null;
+    }
+    this.#originalValue = this.#value ? new Date(this.#value.getTime()) : null;
+
+    const panel = document.createElement('div');
+    panel.style.cssText = [
+      'position:fixed',
+      'z-index:9999',
+      'padding:4px 6px',
+      `background:${DAISY_COLORS.bg}`,
+      `border:1px solid ${DAISY_COLORS.border}`,
+      'border-radius:6px',
+      'box-shadow:0 2px 8px rgba(0,0,0,.15)',
+      'display:flex',
+      'flex-direction:row',
+      'align-items:center',
+      'gap:4px'
+    ].join(';');
+
+    const input = document.createElement('input');
+    input.type = 'datetime-local';
+    input.style.cssText = [
+      `background:${DAISY_COLORS.bg}`,
+      `color:${DAISY_COLORS.text}`,
+      'border:none',
+      'outline:none',
+      'font-size:13px',
+      'flex:1',
+      'min-width:200px'
+    ].join(';');
+    if (this.#value) input.value = this.#formatForInput(this.#value);
+
+    input.addEventListener('change', () => {
+      this.#value = this.#resolveValue(input.value);
+    });
+    input.addEventListener('keydown', e => {
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#value = this.#resolveValue(input.value);
+        this.#endEdit?.();
+      } else if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        this.#value = this.#originalValue; // 恢复原始值
+        this.#endEdit?.();
+      }
+    });
+
+    const clearBtn = document.createElement('button');
+    clearBtn.type = 'button';
+    clearBtn.textContent = '清除';
+    clearBtn.style.cssText = [
+      'font-size:12px',
+      `color:${DAISY_COLORS.text}`,
+      'opacity:0.6',
+      'background:none',
+      'border:none',
+      'cursor:pointer',
+      'white-space:nowrap',
+      'padding:0 2px',
+      'flex-shrink:0'
+    ].join(';');
+    clearBtn.addEventListener('mousedown', e => {
+      e.preventDefault();
+      this.#value = null;
+      this.#endEdit?.();
+    });
+
+    panel.appendChild(input);
+    panel.appendChild(clearBtn);
+    document.body.appendChild(panel);
+    positionOverlayPanel(panel, ctx.referencePosition.rect, ctx.container as HTMLElement, 80, { minWidth: 240 });
+    this.#panel = panel;
+
+    this.#outsideHandler = (e: MouseEvent) => {
+      if (!panel.contains(e.target as Node)) {
+        this.#value = this.#resolveValue(input.value);
+        this.#cleanup();
+        this.#endEdit?.();
+      }
+    };
+    scheduleEditorSetup(() => {
+      if (!this.#outsideHandler) return;
+      document.addEventListener('mousedown', this.#outsideHandler, { capture: true });
+      input.focus();
+    });
+  }
+
+  /** 返回当前选择的日期值 */
+  getValue(): Date | null {
+    return this.#value;
+  }
+
+  /** 结束编辑：清理浮层面板与事件监听 */
+  onEnd(): void {
+    this.#cleanup();
+  }
+
+  /** 判断目标元素是否属于编辑器浮层 */
+  isEditorElement(el: HTMLElement | EventTarget): boolean {
+    return !!this.#panel?.contains(el as Node);
+  }
+
+  /** 将 input.value 解析为 Date，若与原始值等分钟则返回原始值（避免更新毫秒）*/
+  #resolveValue(inputVal: string): Date | null {
+    if (!inputVal) return null;
+    const orig = this.#originalValue;
+    if (orig && inputVal === this.#formatForInput(orig)) {
+      return orig; // 分钟精度未变，返回原值（保留原始毫秒）
+    }
+    const d = new Date(inputVal);
+    d.setSeconds(0, 0); // 输入框不支持秒/毫秒，统一归零
+    return d;
+  }
+
+  #formatForInput(d: Date): string {
+    const pad = (n: number) => String(n).padStart(2, '0');
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  }
+
+  #cleanup(): void {
+    if (this.#outsideHandler) {
+      document.removeEventListener('mousedown', this.#outsideHandler, { capture: true });
+      this.#outsideHandler = null;
+    }
+    this.#panel?.remove();
+    this.#panel = null;
+  }
+}

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

@@ -0,0 +1,167 @@
+import { DAISY_COLORS, GlobalOverlayEditor } from './global-overlay-editor.js';
+import { lucideToSvgElement, type IconData } from './lucide-svg.js';
+
+/** 枚举选项配置 */
+export interface EnumItem {
+  /** 存储值 */
+  value: string;
+  /** 显示文本（默认等于 value） */
+  text?: string;
+  /** Lucide 图标数据（可选，配合 color 使用） */
+  icon?: IconData;
+  /** 图标描边颜色（可选，配合 icon 使用） */
+  color?: string;
+  /** 是否禁用（只影响展示与选择，不改变枚举合法性） */
+  disabled?: boolean;
+}
+
+type VTableWithColumnDef = {
+  getCellOriginValue(col: number, row: number): unknown;
+  getColumnDefine?(col: number): Record<string, unknown> | undefined;
+};
+
+/**
+ * 枚举下拉选择编辑器
+ *
+ * 从列定义的 `menuList` 动态读取可选项，支持键盘导航。
+ * - ↑ ↓：移动选中项
+ * - Enter / 点击：确认选中并关闭
+ * - Delete / Backspace：清空值并关闭
+ * - Escape：取消，恢复原始值
+ *
+ * 未来可扩展 icon、i18n 等字段通过 menuList 传入。
+ */
+export class EnumEditor extends GlobalOverlayEditor {
+  #currentValue = '';
+  #items: EnumItem[] = [];
+  #presetItems: EnumItem[] | null = null;
+
+  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 = 'enum-editor';
+
+  /**
+   * 创建枚举编辑器
+   *
+   * @param presetItems 预设选项；不传时在 onStart 中从列定义 menuList 读取
+   */
+  constructor(presetItems?: EnumItem[]) {
+    super();
+    this.#presetItems = presetItems ?? null;
+  }
+
+  /** 初始化编辑：解析原始值并加载可选项（预设选项优先，其次列定义 menuList） */
+  override onStart(ctx: Parameters<GlobalOverlayEditor['onStart']>[0]): void {
+    const table = ctx.table as VTableWithColumnDef | null;
+    const origin = table?.getCellOriginValue(ctx.col, ctx.row) ?? ctx.value;
+    this.#currentValue = origin != null ? String(origin) : '';
+
+    // 优先使用构造时注入的预设选项，否则从列定义读取
+    const menuList =
+      this.#presetItems ?? (table?.getColumnDefine?.(ctx.col)?.['menuList'] as Array<EnumItem> | undefined);
+    this.#items = (menuList ?? []).map(item => ({
+      ...item,
+      text: item.text ?? item.value
+    }));
+
+    // 是否允许 null（菜单列表中有 value='' 的项）
+    const hasNullOption = this.#items.some(i => i.value === '');
+    const realItems = this.#items.filter(i => i.value !== '');
+
+    if (!hasNullOption && this.#currentValue === '') {
+      // 不允许 null 且当前值为空，自动选择第一项
+      this.#currentValue = realItems[0]?.value ?? '';
+    } else if (!hasNullOption && !this.#items.some(i => i.value === this.#currentValue)) {
+      // 不允许 null 且当前值不在列表中，自动选择第一项
+      this.#currentValue = realItems[0]?.value ?? '';
+    }
+
+    super.onStart(ctx);
+  }
+
+  /** 返回当前选中的枚举值 */
+  override getValue(): string {
+    return this.#currentValue;
+  }
+
+  protected override onDeleteKey(): void {
+    // 仅当列表包含 null 选项时才允许清除
+    if (this.#items.some(i => i.value === '')) {
+      this.#currentValue = '';
+      this.close();
+    }
+  }
+
+  protected buildRows(panel: HTMLDivElement): void {
+    if (this.#items.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 = '暂无可选项';
+      panel.appendChild(empty);
+      return;
+    }
+
+    this.#items.forEach((item, idx) => {
+      const isNullItem = item.value === '';
+      const isSelected = item.value === this.#currentValue;
+      const isDisabled = item.disabled === true;
+      const row = document.createElement('div');
+      row.dataset['value'] = item.value;
+      row.dataset['idx'] = String(idx);
+      row.style.cssText = [
+        'display:flex',
+        'align-items:center',
+        'padding:5px 12px',
+        `cursor:${isDisabled ? 'default' : 'pointer'}`,
+        'font-size:13px',
+        `color:${DAISY_COLORS.text}`,
+        `opacity:${isNullItem || isDisabled ? '0.55' : '1'}`,
+        `font-style:${isNullItem ? 'italic' : 'normal'}`,
+        `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 ?? item.value;
+        row.appendChild(span);
+      } else {
+        row.textContent = item.text ?? item.value;
+      }
+
+      row.addEventListener('mouseenter', () => {
+        if (!isDisabled) this.setFocused(idx);
+      });
+      row.addEventListener('mousedown', e => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!isDisabled) this.onRowClick(idx);
+      });
+
+      panel.appendChild(row);
+    });
+  }
+
+  protected onRowClick(idx: number): void {
+    const item = this.#items[idx];
+    if (!item || item.disabled === true) return;
+    this.#currentValue = item.value;
+    this.close();
+  }
+
+  protected onFocusChange(idx: number, prev: number): void {
+    const prevRow = this.rowAt(prev);
+    if (prevRow) {
+      prevRow.style.background =
+        prevRow.dataset['value'] === this.#currentValue ? DAISY_COLORS.selectedBg : 'transparent';
+    }
+    const nextRow = this.rowAt(idx);
+    if (nextRow) nextRow.style.background = DAISY_COLORS.focusBg;
+  }
+}