@jackuait/blok 0.10.0-beta.3 → 0.10.0-beta.5

package/src/tools/database/database-tab-bar.ts

@@ -0,0 +1,532 @@
+import { generateKeyBetween } from 'fractional-indexing';
+import { IconBoard, IconList, IconPencil, IconCopy, IconTrash } from '../../components/icons';
+import { DatabaseViewPopover } from './database-view-popover';
+import type { DatabaseViewConfig, ViewType } from './types';
+
+const DRAG_THRESHOLD = 10;
+
+const VIEW_ICONS: Record<string, string> = {
+  board: IconBoard,
+  list: IconList,
+};
+
+export interface TabBarOptions {
+  views: DatabaseViewConfig[];
+  activeViewId: string;
+  onTabClick: (viewId: string) => void;
+  onAddView: (type: ViewType) => void;
+  onRename: (viewId: string, newName: string) => void;
+  onDuplicate: (viewId: string) => void;
+  onDelete: (viewId: string) => void;
+  onReorder: (viewId: string, newPosition: string) => void;
+}
+
+export class DatabaseTabBar {
+  private readonly options: TabBarOptions;
+  private readonly views: DatabaseViewConfig[];
+  private readonly onReorder: (viewId: string, newPosition: string) => void;
+  private element: HTMLElement | null = null;
+  private barEl: HTMLElement | null = null;
+  private viewPopover: DatabaseViewPopover | null = null;
+  private contextPopoverEl: HTMLElement | null = null;
+  private boundOutsideContextClick: ((e: MouseEvent) => void) | null = null;
+
+  private overflowDropdownEl: HTMLElement | null = null;
+  private boundOverflowClose: ((e: MouseEvent) => void) | null = null;
+  private moreBtnEl: HTMLElement | null = null;
+
+  private isDragging = false;
+  private dragViewId = '';
+  private dragStartX = 0;
+  private ghostEl: HTMLElement | null = null;
+  private readonly boundDragMove: (e: PointerEvent) => void;
+  private readonly boundDragUp: (e: PointerEvent) => void;
+  private readonly boundDragCancel: () => void;
+  private readonly boundDragKeyDown: (e: KeyboardEvent) => void;
+
+  constructor(options: TabBarOptions) {
+    this.options = options;
+    this.views = options.views;
+    this.onReorder = options.onReorder;
+
+    this.boundDragMove = this.handleDragMove.bind(this);
+    this.boundDragUp = this.handleDragUp.bind(this);
+    this.boundDragCancel = this.cleanupDrag.bind(this);
+    this.boundDragKeyDown = (e: KeyboardEvent): void => {
+      if (e.key === 'Escape') { this.cleanupDrag(); }
+    };
+  }
+
+  render(): HTMLElement {
+    const bar = document.createElement('div');
+    bar.setAttribute('data-blok-database-tab-bar', '');
+    this.barEl = bar;
+    this.element = bar;
+
+    const sorted = [...this.options.views].sort((a, b) => (a.position < b.position ? -1 : 1));
+
+    for (const view of sorted) {
+      bar.appendChild(this.createTab(view));
+    }
+
+    const addBtn = document.createElement('button');
+    addBtn.setAttribute('data-blok-database-add-view', '');
+    addBtn.textContent = '+';
+    addBtn.addEventListener('click', () => {
+      this.openViewPopover(addBtn);
+    });
+    bar.appendChild(addBtn);
+
+    bar.addEventListener('click', (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const tab = target.closest('[data-blok-database-tab]');
+      if (!(tab instanceof HTMLElement)) {
+        return;
+      }
+      const viewId = tab.getAttribute('data-view-id');
+      if (viewId === null) {
+        return;
+      }
+      if (tab.hasAttribute('data-active')) {
+        return;
+      }
+      this.options.onTabClick(viewId);
+    });
+
+    bar.addEventListener('contextmenu', (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const tab = target.closest('[data-blok-database-tab]');
+      if (!(tab instanceof HTMLElement)) {
+        return;
+      }
+      e.preventDefault();
+      const viewId = tab.getAttribute('data-view-id');
+      if (viewId === null) {
+        return;
+      }
+      this.openContextPopover(tab, viewId);
+    });
+
+    bar.addEventListener('pointerdown', (e) => {
+      const target = e.target as HTMLElement;
+      const tab = target.closest<HTMLElement>('[data-blok-database-tab]');
+      if (tab === null) return;
+      const viewId = tab.getAttribute('data-view-id');
+      if (viewId === null) return;
+      this.dragViewId = viewId;
+      this.dragStartX = e.clientX;
+      this.isDragging = false;
+      document.addEventListener('pointermove', this.boundDragMove);
+      document.addEventListener('pointerup', this.boundDragUp);
+      document.addEventListener('pointercancel', this.boundDragCancel);
+      document.addEventListener('keydown', this.boundDragKeyDown);
+    });
+
+    if (typeof ResizeObserver !== 'undefined') {
+      const ro = new ResizeObserver(() => {
+        if (this.element === null) {
+          return;
+        }
+
+        const tabs = Array.from(this.element.querySelectorAll<HTMLElement>('[data-blok-database-tab]'));
+
+        for (const tab of tabs) {
+          tab.style.display = '';
+        }
+        this.moreBtnEl?.remove();
+        this.moreBtnEl = null;
+
+        const barWidth = this.element.clientWidth;
+        const addBtnWidth = 40;
+        const visibleCount = tabs.findIndex((_tab, i) => {
+          const consumed = addBtnWidth + tabs.slice(0, i + 1).reduce((w, t) => w + t.offsetWidth + 2, 0);
+
+          return consumed > barWidth;
+        });
+        const resolved = visibleCount === -1 ? tabs.length : visibleCount;
+
+        if (resolved < tabs.length) {
+          this.handleOverflow(resolved);
+        }
+      });
+
+      ro.observe(bar);
+    }
+
+    return bar;
+  }
+
+  private createTab(view: DatabaseViewConfig): HTMLElement {
+    const tab = document.createElement('div');
+    tab.setAttribute('data-blok-database-tab', '');
+    tab.setAttribute('data-view-id', view.id);
+
+    if (view.id === this.options.activeViewId) {
+      tab.setAttribute('data-active', '');
+    }
+
+    const iconSpan = document.createElement('span');
+    iconSpan.innerHTML = VIEW_ICONS[view.type] ?? '';
+    tab.appendChild(iconSpan);
+
+    const nameSpan = document.createElement('span');
+    nameSpan.setAttribute('data-blok-database-tab-name', '');
+    nameSpan.textContent = view.name;
+    tab.appendChild(nameSpan);
+
+    return tab;
+  }
+
+  private openContextPopover(tab: HTMLElement, viewId: string): void {
+    this.closeContextPopover();
+
+    const popover = document.createElement('div');
+    popover.setAttribute('data-blok-popover', '');
+    popover.setAttribute('data-blok-database-tab-context', '');
+    popover.style.position = 'fixed';
+    popover.style.zIndex = '1000';
+
+    const rect = tab.getBoundingClientRect();
+    popover.style.top = `${rect.bottom + 4}px`;
+    popover.style.left = `${rect.left}px`;
+
+    const renameItem = document.createElement('div');
+    renameItem.setAttribute('data-blok-database-tab-action', 'rename');
+    const renameIcon = document.createElement('span');
+    renameIcon.setAttribute('data-blok-database-tab-action-icon', '');
+    renameIcon.innerHTML = IconPencil;
+    renameItem.appendChild(renameIcon);
+    const renameLabel = document.createElement('span');
+    renameLabel.textContent = 'Rename';
+    renameItem.appendChild(renameLabel);
+    renameItem.addEventListener('click', () => {
+      this.closeContextPopover();
+      this.startInlineRename(tab, viewId);
+    });
+    popover.appendChild(renameItem);
+
+    const duplicateItem = document.createElement('div');
+    duplicateItem.setAttribute('data-blok-database-tab-action', 'duplicate');
+    const duplicateIcon = document.createElement('span');
+    duplicateIcon.setAttribute('data-blok-database-tab-action-icon', '');
+    duplicateIcon.innerHTML = IconCopy;
+    duplicateItem.appendChild(duplicateIcon);
+    const duplicateLabel = document.createElement('span');
+    duplicateLabel.textContent = 'Duplicate';
+    duplicateItem.appendChild(duplicateLabel);
+    duplicateItem.addEventListener('click', () => {
+      this.closeContextPopover();
+      this.options.onDuplicate(viewId);
+    });
+    popover.appendChild(duplicateItem);
+
+    const separator = document.createElement('div');
+    separator.setAttribute('data-blok-database-tab-context-separator', '');
+    if (this.options.views.length === 1) {
+      separator.style.display = 'none';
+    }
+    popover.appendChild(separator);
+
+    const deleteItem = document.createElement('div');
+    deleteItem.setAttribute('data-blok-database-tab-action', 'delete');
+    const deleteIcon = document.createElement('span');
+    deleteIcon.setAttribute('data-blok-database-tab-action-icon', '');
+    deleteIcon.innerHTML = IconTrash;
+    deleteItem.appendChild(deleteIcon);
+    const deleteLabel = document.createElement('span');
+    deleteLabel.textContent = 'Delete';
+    deleteItem.appendChild(deleteLabel);
+    if (this.options.views.length === 1) {
+      deleteItem.style.display = 'none';
+    }
+    deleteItem.addEventListener('click', () => {
+      this.closeContextPopover();
+      this.options.onDelete(viewId);
+    });
+    popover.appendChild(deleteItem);
+
+    document.body.appendChild(popover);
+    this.contextPopoverEl = popover;
+
+    this.boundOutsideContextClick = (e: MouseEvent): void => {
+      const target = e.target as HTMLElement;
+      if (!popover.contains(target) && !tab.contains(target)) {
+        this.closeContextPopover();
+      }
+    };
+
+    document.addEventListener('mousedown', this.boundOutsideContextClick);
+  }
+
+  private closeContextPopover(): void {
+    if (this.contextPopoverEl !== null) {
+      this.contextPopoverEl.remove();
+      this.contextPopoverEl = null;
+    }
+    if (this.boundOutsideContextClick !== null) {
+      document.removeEventListener('mousedown', this.boundOutsideContextClick);
+      this.boundOutsideContextClick = null;
+    }
+  }
+
+  private startInlineRename(tab: HTMLElement, viewId: string): void {
+    const nameSpan = tab.querySelector('[data-blok-database-tab-name]');
+    if (!(nameSpan instanceof HTMLElement)) {
+      return;
+    }
+
+    const originalName = nameSpan.textContent ?? '';
+
+    const input = document.createElement('input');
+    input.setAttribute('data-blok-database-tab-rename-input', '');
+    input.value = originalName;
+    nameSpan.replaceWith(input);
+    input.focus();
+    input.select();
+
+    const commit = (): void => {
+      const newName = input.value.trim() || originalName;
+      const newSpan = document.createElement('span');
+      newSpan.setAttribute('data-blok-database-tab-name', '');
+      newSpan.textContent = newName;
+      input.replaceWith(newSpan);
+      if (newName !== originalName) {
+        this.options.onRename(viewId, newName);
+      }
+    };
+
+    input.addEventListener('blur', commit);
+    input.addEventListener('keydown', (e: KeyboardEvent) => {
+      e.stopPropagation();
+      if (e.key === 'Enter') {
+        input.blur();
+      } else if (e.key === 'Escape') {
+        input.removeEventListener('blur', commit);
+        const cancelSpan = document.createElement('span');
+        cancelSpan.setAttribute('data-blok-database-tab-name', '');
+        cancelSpan.textContent = originalName;
+        input.replaceWith(cancelSpan);
+      }
+    });
+  }
+
+  private openViewPopover(anchor: HTMLElement): void {
+    if (this.viewPopover !== null) {
+      this.viewPopover.destroy();
+    }
+    this.viewPopover = new DatabaseViewPopover({
+      onSelect: (type) => {
+        this.options.onAddView(type);
+      },
+    });
+    this.viewPopover.open(anchor);
+  }
+
+  handleOverflow(visibleCount: number): void {
+    if (this.element === null) return;
+
+    // Remove existing more button
+    this.moreBtnEl?.remove();
+
+    const orderedViews = [...this.views].sort((a, b) => (a.position < b.position ? -1 : 1));
+    const hiddenCount = orderedViews.length - visibleCount;
+    if (hiddenCount <= 0) return;
+
+    // Hide overflow tabs
+    const tabs = Array.from(this.element.querySelectorAll<HTMLElement>('[data-blok-database-tab]'));
+
+    for (const tab of tabs.slice(visibleCount)) {
+      tab.style.display = 'none';
+    }
+
+    // Add "N more..." button before the + button
+    const moreBtn = document.createElement('div');
+    moreBtn.setAttribute('data-blok-database-tab-more', '');
+    moreBtn.textContent = `${hiddenCount} more...`;
+    moreBtn.style.cursor = 'pointer';
+    moreBtn.addEventListener('click', () => {
+      this.openOverflowDropdown(moreBtn);
+    });
+
+    const addBtn = this.element.querySelector('[data-blok-database-add-view]');
+    if (addBtn !== null) {
+      this.element.insertBefore(moreBtn, addBtn);
+    } else {
+      this.element.appendChild(moreBtn);
+    }
+    this.moreBtnEl = moreBtn;
+  }
+
+  private openOverflowDropdown(anchor: HTMLElement): void {
+    this.closeOverflowDropdown();
+
+    const dropdown = document.createElement('div');
+    dropdown.setAttribute('data-blok-popover', '');
+    dropdown.setAttribute('data-blok-database-tab-overflow-dropdown', '');
+    dropdown.style.position = 'fixed';
+    dropdown.style.zIndex = '1000';
+
+    const rect = anchor.getBoundingClientRect();
+    dropdown.style.top = `${rect.bottom + 4}px`;
+    dropdown.style.left = `${rect.left}px`;
+
+    const orderedViews = [...this.views].sort((a, b) => (a.position < b.position ? -1 : 1));
+
+    for (const view of orderedViews) {
+      const item = document.createElement('div');
+      item.setAttribute('data-blok-database-tab-overflow-item', '');
+      item.setAttribute('data-view-id', view.id);
+
+      if (view.id === this.options.activeViewId) {
+        item.setAttribute('data-active', '');
+      }
+
+      const iconSpan = document.createElement('span');
+      iconSpan.innerHTML = VIEW_ICONS[view.type] ?? '';
+      item.appendChild(iconSpan);
+
+      const nameSpan = document.createElement('span');
+      nameSpan.textContent = view.name;
+      item.appendChild(nameSpan);
+
+      item.addEventListener('click', () => {
+        if (view.id !== this.options.activeViewId) {
+          this.options.onTabClick(view.id);
+        }
+        this.closeOverflowDropdown();
+      });
+
+      dropdown.appendChild(item);
+    }
+
+    const separator = document.createElement('div');
+    separator.setAttribute('data-blok-database-tab-overflow-separator', '');
+    dropdown.appendChild(separator);
+
+    const addBtn = this.element?.querySelector<HTMLElement>('[data-blok-database-add-view]');
+    const newViewBtn = document.createElement('div');
+    newViewBtn.setAttribute('data-blok-database-tab-overflow-new', '');
+    newViewBtn.textContent = '+ New view';
+    newViewBtn.addEventListener('click', () => {
+      this.closeOverflowDropdown();
+      if (addBtn !== null && addBtn !== undefined) {
+        this.openViewPopover(addBtn);
+      }
+    });
+    dropdown.appendChild(newViewBtn);
+
+    document.body.appendChild(dropdown);
+    this.overflowDropdownEl = dropdown;
+
+    this.boundOverflowClose = (e: MouseEvent): void => {
+      const target = e.target as HTMLElement;
+      if (!dropdown.contains(target) && !anchor.contains(target)) {
+        this.closeOverflowDropdown();
+      }
+    };
+
+    document.addEventListener('mousedown', this.boundOverflowClose);
+  }
+
+  private closeOverflowDropdown(): void {
+    if (this.overflowDropdownEl !== null) {
+      this.overflowDropdownEl.remove();
+      this.overflowDropdownEl = null;
+    }
+    if (this.boundOverflowClose !== null) {
+      document.removeEventListener('mousedown', this.boundOverflowClose);
+      this.boundOverflowClose = null;
+    }
+  }
+
+  private handleDragMove(e: PointerEvent): void {
+    const dx = Math.abs(e.clientX - this.dragStartX);
+    if (!this.isDragging && dx < DRAG_THRESHOLD) return;
+    if (!this.isDragging) {
+      this.isDragging = true;
+      this.element?.setAttribute('data-dragging', '');
+      const sourceTab = this.element?.querySelector(`[data-view-id="${this.dragViewId}"]`) as HTMLElement | null;
+      if (sourceTab !== null) {
+        this.ghostEl = sourceTab.cloneNode(true) as HTMLElement;
+        this.ghostEl.setAttribute('data-blok-database-tab-ghost', '');
+        this.ghostEl.style.position = 'fixed';
+        this.ghostEl.style.pointerEvents = 'none';
+        this.ghostEl.style.zIndex = '50';
+        this.ghostEl.style.opacity = '0.7';
+        const rect = sourceTab.getBoundingClientRect();
+        this.ghostEl.style.top = `${rect.top}px`;
+        this.ghostEl.style.width = `${rect.width}px`;
+        document.body.appendChild(this.ghostEl);
+        sourceTab.style.opacity = '0.4';
+      }
+    }
+    if (this.ghostEl !== null) {
+      this.ghostEl.style.left = `${e.clientX - 50}px`;
+    }
+  }
+
+  private handleDragUp(e: PointerEvent): void {
+    if (!this.isDragging) {
+      this.removeDragListeners();
+      return;
+    }
+    const tabs = Array.from(
+      this.element?.querySelectorAll<HTMLElement>('[data-blok-database-tab]') ?? []
+    ).filter((t) => t.getAttribute('data-view-id') !== this.dragViewId);
+
+    const dropIndex = tabs.findIndex((t) => {
+      const rect = t.getBoundingClientRect();
+      return e.clientX < (rect.left + rect.right) / 2;
+    });
+
+    const beforeViewId = dropIndex >= 0 ? tabs[dropIndex].getAttribute('data-view-id') : null;
+    const afterViewId = ((): string | null => {
+      if (dropIndex > 0) return tabs[dropIndex - 1].getAttribute('data-view-id');
+      if (dropIndex === -1 && tabs.length > 0) return tabs[tabs.length - 1].getAttribute('data-view-id');
+      return null;
+    })();
+
+    const orderedViews = [...this.views].sort((a, b) => (a.position < b.position ? -1 : 1));
+    const beforeView = beforeViewId !== null ? orderedViews.find((v) => v.id === beforeViewId) : null;
+    const afterView = afterViewId !== null ? orderedViews.find((v) => v.id === afterViewId) : null;
+
+    const newPosition = generateKeyBetween(
+      afterView?.position ?? null,
+      beforeView?.position ?? null
+    );
+
+    this.cleanupDrag();
+    this.onReorder(this.dragViewId, newPosition);
+  }
+
+  private cleanupDrag(): void {
+    if (this.ghostEl !== null) {
+      this.ghostEl.remove();
+      this.ghostEl = null;
+    }
+    this.element?.removeAttribute('data-dragging');
+    const sourceTab = this.element?.querySelector(`[data-view-id="${this.dragViewId}"]`) as HTMLElement | null;
+    if (sourceTab !== null) {
+      sourceTab.style.opacity = '';
+    }
+    this.isDragging = false;
+    this.removeDragListeners();
+  }
+
+  private removeDragListeners(): void {
+    document.removeEventListener('pointermove', this.boundDragMove);
+    document.removeEventListener('pointerup', this.boundDragUp);
+    document.removeEventListener('pointercancel', this.boundDragCancel);
+    document.removeEventListener('keydown', this.boundDragKeyDown);
+  }
+
+  destroy(): void {
+    this.cleanupDrag();
+    this.closeContextPopover();
+    this.closeOverflowDropdown();
+    if (this.viewPopover !== null) {
+      this.viewPopover.destroy();
+      this.viewPopover = null;
+    }
+  }
+}

package/src/tools/database/database-view-popover.ts

@@ -0,0 +1,109 @@
+import { IconBoard, IconGallery, IconList, IconTable } from '../../components/icons';
+import type { ViewType } from './types';
+
+interface ViewTypeOption {
+  type: ViewType;
+  icon: string;
+  label: string;
+  disabled?: boolean;
+}
+
+const VIEW_TYPES: ViewTypeOption[] = [
+  { type: 'board', icon: IconBoard, label: 'Board' },
+  { type: 'list', icon: IconList, label: 'List' },
+  { type: 'table', icon: IconTable, label: 'Table', disabled: true },
+  { type: 'gallery', icon: IconGallery, label: 'Gallery', disabled: true },
+];
+
+export interface ViewPopoverOptions {
+  onSelect: (type: ViewType) => void;
+}
+
+export class DatabaseViewPopover {
+  private readonly onSelect: (type: ViewType) => void;
+  private popoverEl: HTMLElement | null = null;
+  private boundOutsideClick: ((e: MouseEvent) => void) | null = null;
+
+  constructor(options: ViewPopoverOptions) {
+    this.onSelect = options.onSelect;
+  }
+
+  open(anchor: HTMLElement): void {
+    this.close();
+
+    const popover = document.createElement('div');
+    popover.setAttribute('data-blok-popover', '');
+    popover.setAttribute('data-blok-database-view-popover', '');
+    popover.style.position = 'fixed';
+    popover.style.zIndex = '1000';
+
+    const rect = anchor.getBoundingClientRect();
+    popover.style.top = `${rect.bottom + 4}px`;
+    popover.style.left = `${rect.left}px`;
+
+    const heading = document.createElement('div');
+    heading.setAttribute('data-blok-database-view-popover-heading', '');
+    heading.textContent = 'Add a new view';
+    popover.appendChild(heading);
+
+    const grid = document.createElement('div');
+    grid.setAttribute('data-blok-database-view-popover-grid', '');
+    grid.style.display = 'grid';
+    grid.style.gridTemplateColumns = '1fr 1fr';
+    grid.style.gap = '2px';
+
+    for (const option of VIEW_TYPES) {
+      const item = document.createElement('div');
+      item.setAttribute('data-blok-database-view-option', option.type);
+
+      const iconEl = document.createElement('div');
+      iconEl.setAttribute('data-blok-database-view-option-icon', '');
+      iconEl.innerHTML = option.icon;
+      item.appendChild(iconEl);
+
+      const label = document.createElement('span');
+      label.textContent = option.label;
+      item.appendChild(label);
+
+      if (option.disabled === true) {
+        item.style.opacity = '0.35';
+        item.style.pointerEvents = 'none';
+      } else {
+        item.addEventListener('click', () => {
+          this.onSelect(option.type);
+          this.close();
+        });
+      }
+
+      grid.appendChild(item);
+    }
+
+    popover.appendChild(grid);
+    document.body.appendChild(popover);
+    this.popoverEl = popover;
+
+    this.boundOutsideClick = (e: MouseEvent): void => {
+      const target = e.target as HTMLElement;
+      if (!popover.contains(target) && !anchor.contains(target)) {
+        this.close();
+      }
+    };
+
+    document.addEventListener('mousedown', this.boundOutsideClick);
+  }
+
+  close(): void {
+    if (this.popoverEl !== null) {
+      this.popoverEl.remove();
+      this.popoverEl = null;
+    }
+    if (this.boundOutsideClick !== null) {
+      document.removeEventListener('mousedown', this.boundOutsideClick);
+      this.boundOutsideClick = null;
+    }
+  }
+
+  destroy(): void {
+    this.close();
+  }
+}

package/src/tools/database/database-view-renderer.ts

@@ -0,0 +1,25 @@
+import type { DatabaseRow, SelectOption } from './types';
+
+/**
+ * Shared contract for all database view renderers (board, list, etc.).
+ * Each implementation receives its data through the constructor and renders via createView().
+ */
+export interface DatabaseViewRenderer {
+  /** Creates the full view DOM. Data is bound at construction time. */
+  createView(): HTMLDivElement;
+
+  /** Appends a row element to the appropriate container within the view. */
+  appendRow(container: HTMLElement, row: DatabaseRow): void;
+
+  /** Removes a row element from the view by its row ID. */
+  removeRow(wrapper: HTMLElement, rowId: string): void;
+
+  /** Updates the visible title of a row element found by its row ID. */
+  updateRowTitle(wrapper: HTMLElement, rowId: string, title: string): void;
+
+  /** Appends a group container (board: column, list: group section). Optional — not all views support it. */
+  appendGroup?(wrapper: HTMLElement, option: SelectOption): void;
+
+  /** Removes a group container by its option ID. Optional. */
+  removeGroup?(wrapper: HTMLElement, optionId: string): void;
+}