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

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

@@ -1,301 +0,0 @@
-import type { I18n } from '../../../types';
-import type { SelectOption, DatabaseRow } from './types';
-import type { DatabaseViewRenderer } from './database-view-renderer';
-
-interface DatabaseBoardViewOptions {
-  readOnly: boolean;
-  i18n: I18n;
-  options: SelectOption[];
-  getRows: (optionId: string) => DatabaseRow[];
-  titlePropertyId: string;
-}
-
-/**
- * DOM rendering layer for the kanban board.
- * Receives ordered data and creates plain DOM elements (NOT contenteditable).
- * All interactive elements use data-blok-database-* attributes for test selectors and event delegation.
- */
-export class DatabaseBoardView implements DatabaseViewRenderer {
-  private readonly readOnly: boolean;
-  private readonly i18n: I18n;
-  private readonly options: SelectOption[];
-  private readonly getRows: (optionId: string) => DatabaseRow[];
-  private readonly titlePropertyId: string;
-
-  constructor({ readOnly, i18n, options, getRows, titlePropertyId }: DatabaseBoardViewOptions) {
-    this.readOnly = readOnly;
-    this.i18n = i18n;
-    this.options = options;
-    this.getRows = getRows;
-    this.titlePropertyId = titlePropertyId;
-  }
-
-  /**
-   * Creates the full board DOM from option and row data.
-   */
-  createView(): HTMLDivElement {
-    const wrapper = document.createElement('div');
-
-    wrapper.setAttribute('data-blok-tool', 'database');
-    wrapper.setAttribute('role', 'region');
-    wrapper.setAttribute('aria-label', 'Kanban board');
-    wrapper.style.display = 'flex';
-
-    const boardArea = document.createElement('div');
-
-    boardArea.setAttribute('data-blok-database-board', '');
-    boardArea.style.display = 'flex';
-    boardArea.style.overflowX = 'auto';
-    boardArea.style.alignItems = 'flex-start';
-    boardArea.style.gap = '12px';
-    boardArea.style.paddingTop = '6px';
-    boardArea.style.paddingBottom = '24px';
-    boardArea.style.flex = '1';
-    boardArea.style.minWidth = '0';
-
-    for (const option of this.options) {
-      const columnEl = this.createColumnElement(option, this.getRows(option.id), this.titlePropertyId);
-
-      boardArea.appendChild(columnEl);
-    }
-
-    if (!this.readOnly) {
-      const addColumnBtn = document.createElement('button');
-
-      addColumnBtn.setAttribute('data-blok-database-add-column', '');
-      addColumnBtn.setAttribute('aria-label', this.i18n.t('tools.database.addColumn'));
-      addColumnBtn.textContent = '+ ' + this.i18n.t('tools.database.addColumn');
-      addColumnBtn.style.minWidth = '260px';
-      addColumnBtn.style.flex = '0 0 260px';
-      boardArea.appendChild(addColumnBtn);
-    }
-
-    wrapper.appendChild(boardArea);
-
-    return wrapper;
-  }
-
-  /**
-   * Creates and appends a row element to a cards container.
-   */
-  appendRow(cardsContainer: HTMLElement, row: DatabaseRow): void {
-    const cardEl = this.createCardElement(row, this.titlePropertyId);
-
-    cardsContainer.appendChild(cardEl);
-    this.updateColumnCount(cardsContainer);
-  }
-
-  /**
-   * Removes a row element from the wrapper by its data-row-id.
-   */
-  removeRow(wrapper: HTMLElement, rowId: string): void {
-    const cardEl = wrapper.querySelector(`[data-row-id="${rowId}"]`);
-    const cardsContainer = cardEl?.closest('[data-blok-database-cards]') as HTMLElement | null;
-
-    cardEl?.remove();
-
-    if (cardsContainer !== null) {
-      this.updateColumnCount(cardsContainer);
-    }
-  }
-
-  /**
-   * Updates the visible title of a row element found by its data-row-id.
-   */
-  updateRowTitle(wrapper: HTMLElement, rowId: string, title: string): void {
-    const cardEl = wrapper.querySelector(`[data-row-id="${rowId}"]`);
-    const titleEl = cardEl?.querySelector('[data-blok-database-card-title]');
-
-    if (titleEl !== null && titleEl !== undefined) {
-      if (title) {
-        titleEl.textContent = title;
-        titleEl.removeAttribute('data-placeholder');
-      } else {
-        titleEl.textContent = this.i18n.t('tools.database.cardTitlePlaceholder');
-        titleEl.setAttribute('data-placeholder', '');
-      }
-    }
-  }
-
-  /**
-   * Creates and inserts a group (column) element before the add-column button.
-   */
-  appendGroup(wrapper: HTMLElement, option: SelectOption): void {
-    const columnEl = this.createColumnElement(option, [], '');
-    const boardArea = wrapper.querySelector('[data-blok-database-board]');
-    const container = (boardArea as HTMLElement | null) ?? wrapper;
-    const addColumnBtn = container.querySelector('[data-blok-database-add-column]');
-
-    if (addColumnBtn) {
-      container.insertBefore(columnEl, addColumnBtn);
-    } else {
-      container.appendChild(columnEl);
-    }
-  }
-
-  /**
-   * Removes a group (column) element from the wrapper by its data-option-id.
-   */
-  removeGroup(wrapper: HTMLElement, optionId: string): void {
-    const columnEl = wrapper.querySelector(`[data-option-id="${optionId}"]`);
-
-    columnEl?.remove();
-  }
-
-  /**
-   * Creates a single column element with header, cards container, and optional add-card button.
-   */
-  private createColumnElement(option: SelectOption, rows: DatabaseRow[], titlePropertyId: string): HTMLDivElement {
-    const columnEl = document.createElement('div');
-
-    columnEl.setAttribute('data-blok-database-column', '');
-    columnEl.setAttribute('data-option-id', option.id);
-    columnEl.setAttribute('role', 'group');
-    columnEl.setAttribute('aria-label', option.label);
-    columnEl.style.display = 'flex';
-    columnEl.style.flexDirection = 'column';
-    columnEl.style.minWidth = '260px';
-    columnEl.style.flex = '0 0 260px';
-
-    if (option.color !== undefined) {
-      columnEl.style.backgroundColor = `var(--blok-color-${option.color}-bg)`;
-    }
-
-    const header = document.createElement('div');
-
-    header.setAttribute('data-blok-database-column-header', '');
-    header.style.display = 'flex';
-    header.style.alignItems = 'center';
-    header.style.padding = '6px 8px';
-    header.style.borderRadius = '4px';
-    header.style.gap = '6px';
-    header.style.cursor = 'grab';
-
-    const pill = document.createElement('div');
-
-    pill.setAttribute('data-blok-database-column-pill', '');
-
-    if (option.color !== undefined) {
-      const dot = document.createElement('span');
-
-      dot.setAttribute('data-blok-database-column-dot', '');
-      dot.style.backgroundColor = `var(--blok-color-${option.color}-text)`;
-      pill.appendChild(dot);
-    }
-
-    const titleEl = document.createElement('div');
-
-    titleEl.setAttribute('data-blok-database-column-title', '');
-    titleEl.style.fontWeight = '600';
-    titleEl.textContent = option.label;
-    pill.appendChild(titleEl);
-
-    header.appendChild(pill);
-
-    const countEl = document.createElement('span');
-
-    countEl.setAttribute('data-blok-database-column-count', '');
-    countEl.textContent = String(rows.length);
-    header.appendChild(countEl);
-
-    columnEl.appendChild(header);
-
-    const cardsContainer = document.createElement('div');
-
-    cardsContainer.setAttribute('data-blok-database-cards', '');
-    cardsContainer.setAttribute('role', 'list');
-    cardsContainer.style.display = 'flex';
-    cardsContainer.style.flexDirection = 'column';
-    cardsContainer.style.gap = '8px';
-    cardsContainer.style.paddingTop = '6px';
-    cardsContainer.style.minHeight = '40px';
-
-    for (const row of rows) {
-      const cardEl = this.createCardElement(row, titlePropertyId);
-
-      cardsContainer.appendChild(cardEl);
-    }
-
-    columnEl.appendChild(cardsContainer);
-
-    if (!this.readOnly) {
-      const addCardBtn = document.createElement('button');
-
-      addCardBtn.setAttribute('data-blok-database-add-card', '');
-      addCardBtn.setAttribute('data-option-id', option.id);
-      addCardBtn.setAttribute('aria-label', this.i18n.t('tools.database.addCard'));
-      addCardBtn.textContent = '+ ' + this.i18n.t('tools.database.newPage');
-
-      if (option.color !== undefined) {
-        addCardBtn.style.borderColor = `color-mix(in srgb, var(--blok-color-${option.color}-text) 30%, transparent)`;
-      }
-
-      columnEl.appendChild(addCardBtn);
-    }
-
-    return columnEl;
-  }
-
-  /**
-   * Creates a single card element.
-   */
-  private createCardElement(row: DatabaseRow, titlePropertyId: string): HTMLDivElement {
-    const cardEl = document.createElement('div');
-    const title = (row.properties[titlePropertyId] as string) ?? '';
-
-    cardEl.setAttribute('data-blok-database-card', '');
-    cardEl.setAttribute('data-row-id', row.id);
-    cardEl.setAttribute('role', 'listitem');
-    cardEl.style.padding = '10px 12px';
-    cardEl.style.borderRadius = '12px';
-    cardEl.style.cursor = 'pointer';
-    cardEl.style.position = 'relative';
-
-    const titleEl = document.createElement('div');
-
-    titleEl.setAttribute('data-blok-database-card-title', '');
-
-    if (title) {
-      titleEl.textContent = title;
-    } else {
-      titleEl.textContent = this.i18n.t('tools.database.cardTitlePlaceholder');
-      titleEl.setAttribute('data-placeholder', '');
-    }
-
-    cardEl.appendChild(titleEl);
-
-    if (!this.readOnly) {
-      const deleteBtn = document.createElement('button');
-
-      deleteBtn.setAttribute('data-blok-database-delete-card', '');
-      deleteBtn.setAttribute('data-row-id', row.id);
-      deleteBtn.setAttribute('aria-label', this.i18n.t('tools.database.deleteCard'));
-      deleteBtn.style.position = 'absolute';
-      deleteBtn.style.top = '4px';
-      deleteBtn.style.right = '4px';
-      deleteBtn.textContent = '\u00d7';
-      cardEl.appendChild(deleteBtn);
-    }
-
-    return cardEl;
-  }
-
-  /**
-   * Updates the card count badge for the column containing the given cards container.
-   */
-  private updateColumnCount(cardsContainer: HTMLElement): void {
-    const columnEl = cardsContainer.closest('[data-blok-database-column]');
-
-    if (columnEl === null) {
-      return;
-    }
-
-    const countEl = columnEl.querySelector('[data-blok-database-column-count]');
-
-    if (countEl !== null) {
-      const cardCount = cardsContainer.querySelectorAll('[data-blok-database-card]').length;
-
-      countEl.textContent = String(cardCount);
-    }
-  }
-}

package/src/tools/database/database-card-drag.ts

@@ -1,306 +0,0 @@
-const DRAG_THRESHOLD = 10;
-
-export interface CardDragResult {
-  rowId: string;
-  toOptionId: string;
-  beforeRowId: string | null;
-  afterRowId: string | null;
-}
-
-export interface CardDragOptions {
-  wrapper: HTMLElement;
-  onDrop: (result: CardDragResult) => void;
-}
-
-/**
- * Handles pointer-based drag-and-drop for kanban cards.
- * Supports 2D movement: across columns (horizontal) and within columns (vertical).
- */
-export class DatabaseCardDrag {
-  private readonly wrapper: HTMLElement;
-  private readonly onDrop: (result: CardDragResult) => void;
-
-  private isDragging = false;
-  private rowId = '';
-  private startX = 0;
-  private startY = 0;
-  private ghostEl: HTMLElement | null = null;
-  private sourceCard: HTMLElement | null = null;
-  private sourceCardHeight = 0;
-  private ghostOffsetX = 0;
-  private ghostOffsetY = 0;
-  private gapTarget: HTMLElement | null = null;
-  private gapContainer: HTMLElement | null = null;
-
-  private readonly boundPointerMove: (e: PointerEvent) => void;
-  private readonly boundPointerUp: (e: PointerEvent) => void;
-  private readonly boundPointerCancel: () => void;
-  private readonly boundKeyDown: (e: KeyboardEvent) => void;
-
-  constructor(options: CardDragOptions) {
-    this.wrapper = options.wrapper;
-    this.onDrop = options.onDrop;
-
-    this.boundPointerMove = this.handlePointerMove.bind(this);
-    this.boundPointerUp = this.handlePointerUp.bind(this);
-    this.boundPointerCancel = this.handlePointerCancel.bind(this);
-    this.boundKeyDown = this.handleKeyDown.bind(this);
-  }
-
-  /**
-   * Start tracking pointer after a pointerdown on a card.
-   */
-  public beginTracking(rowId: string, startX: number, startY: number): void {
-    this.cleanup();
-    this.rowId = rowId;
-    this.startX = startX;
-    this.startY = startY;
-    this.isDragging = false;
-    this.sourceCard = this.wrapper.querySelector(`[data-row-id="${rowId}"]`);
-
-    document.addEventListener('pointermove', this.boundPointerMove);
-    document.addEventListener('pointerup', this.boundPointerUp);
-    document.addEventListener('pointercancel', this.boundPointerCancel);
-    document.addEventListener('keydown', this.boundKeyDown);
-  }
-
-  public cleanup(): void {
-    document.removeEventListener('pointermove', this.boundPointerMove);
-    document.removeEventListener('pointerup', this.boundPointerUp);
-    document.removeEventListener('pointercancel', this.boundPointerCancel);
-    document.removeEventListener('keydown', this.boundKeyDown);
-
-    this.ghostEl?.remove();
-    this.ghostEl = null;
-
-    this.clearGap();
-    this.wrapper.removeAttribute('data-blok-database-dragging');
-
-    if (this.sourceCard) {
-      this.sourceCard.style.opacity = '';
-      this.sourceCard = null;
-    }
-
-    this.isDragging = false;
-    this.rowId = '';
-    this.sourceCardHeight = 0;
-    this.ghostOffsetX = 0;
-    this.ghostOffsetY = 0;
-  }
-
-  public destroy(): void {
-    this.cleanup();
-  }
-
-  private handlePointerMove(e: PointerEvent): void {
-    const dx = Math.abs(e.clientX - this.startX);
-    const dy = Math.abs(e.clientY - this.startY);
-
-    if (!this.isDragging && (dx > DRAG_THRESHOLD || dy > DRAG_THRESHOLD)) {
-      this.isDragging = true;
-      this.startActiveDrag(e);
-    }
-
-    if (this.isDragging) {
-      this.updateGhostPosition(e);
-      this.updateDropIndicator(e);
-    }
-  }
-
-  private handlePointerUp(e: PointerEvent): void {
-    if (this.isDragging) {
-      this.commitDrop(e);
-    }
-
-    this.cleanup();
-  }
-
-  private handlePointerCancel(): void {
-    this.cleanup();
-  }
-
-  private handleKeyDown(e: KeyboardEvent): void {
-    if (e.key === 'Escape') {
-      this.cleanup();
-    }
-  }
-
-  private startActiveDrag(e: PointerEvent): void {
-    if (this.sourceCard) {
-      const rect = this.sourceCard.getBoundingClientRect();
-
-      this.sourceCardHeight = rect.height;
-      this.ghostOffsetX = this.startX - rect.left;
-      this.ghostOffsetY = this.startY - rect.top;
-      this.sourceCard.style.opacity = '0.4';
-    }
-
-    this.wrapper.setAttribute('data-blok-database-dragging', '');
-    this.createGhost(e);
-  }
-
-  private createGhost(e: PointerEvent): void {
-    const ghost = document.createElement('div');
-
-    ghost.setAttribute('data-blok-database-ghost', '');
-    ghost.setAttribute('contenteditable', 'false');
-
-    const style = ghost.style;
-
-    style.position = 'fixed';
-    style.pointerEvents = 'none';
-    style.opacity = '0.85';
-    style.zIndex = '50';
-    style.boxShadow = '0 12px 28px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(0, 0, 0, 0.1)';
-    style.borderRadius = '8px';
-    style.overflow = 'hidden';
-    style.transform = 'rotate(2deg) scale(1.02)';
-    style.transformOrigin = 'center center';
-
-    if (this.sourceCard) {
-      const clone = this.sourceCard.cloneNode(true) as HTMLElement;
-
-      clone.style.opacity = '';
-      ghost.appendChild(clone);
-
-      const rect = this.sourceCard.getBoundingClientRect();
-
-      style.left = `${e.clientX - this.ghostOffsetX}px`;
-      style.top = `${e.clientY - this.ghostOffsetY}px`;
-      style.width = `${rect.width}px`;
-    } else {
-      style.left = `${e.clientX}px`;
-      style.top = `${e.clientY}px`;
-    }
-
-    document.body.appendChild(ghost);
-    this.ghostEl = ghost;
-  }
-
-  private updateGhostPosition(e: PointerEvent): void {
-    if (!this.ghostEl) {
-      return;
-    }
-
-    this.ghostEl.style.left = `${e.clientX - this.ghostOffsetX}px`;
-    this.ghostEl.style.top = `${e.clientY - this.ghostOffsetY}px`;
-  }
-
-  private updateDropIndicator(e: PointerEvent): void {
-    const targetColumn = this.findTargetColumn(e.clientX);
-
-    if (!targetColumn) {
-      this.clearGap();
-
-      return;
-    }
-
-    const position = this.getDropPosition(targetColumn, e.clientY);
-    const beforeEl = position.beforeEl as HTMLElement | null;
-
-    if (beforeEl) {
-      if (beforeEl === this.gapTarget) {
-        return;
-      }
-
-      this.clearGap();
-      beforeEl.style.marginTop = `${this.sourceCardHeight}px`;
-      this.gapTarget = beforeEl;
-    } else {
-      const cardsContainer = targetColumn.querySelector<HTMLElement>(
-        '[data-blok-database-cards]'
-      );
-
-      if (!cardsContainer) {
-        this.clearGap();
-
-        return;
-      }
-
-      if (cardsContainer === this.gapContainer) {
-        return;
-      }
-
-      this.clearGap();
-      cardsContainer.style.paddingBottom = `${this.sourceCardHeight}px`;
-      this.gapContainer = cardsContainer;
-    }
-  }
-
-  private clearGap(): void {
-    if (this.gapTarget) {
-      this.gapTarget.style.marginTop = '';
-      this.gapTarget = null;
-    }
-
-    if (this.gapContainer) {
-      this.gapContainer.style.paddingBottom = '';
-      this.gapContainer = null;
-    }
-  }
-
-  private findTargetColumn(clientX: number): HTMLElement | null {
-    const columns = Array.from(this.wrapper.querySelectorAll<HTMLElement>('[data-blok-database-column]'));
-
-    for (const col of columns) {
-      const rect = col.getBoundingClientRect();
-
-      if (clientX >= rect.left && clientX <= rect.right) {
-        return col;
-      }
-    }
-
-    return null;
-  }
-
-  private getDropPosition(column: HTMLElement, clientY: number): { beforeEl: Element | null } {
-    const cards = Array.from(column.querySelectorAll<HTMLElement>('[data-blok-database-card]'))
-      .filter((card) => card.getAttribute('data-row-id') !== this.rowId);
-
-    for (const card of cards) {
-      const rect = card.getBoundingClientRect();
-      const midY = rect.top + rect.height / 2;
-
-      if (clientY < midY) {
-        return { beforeEl: card };
-      }
-    }
-
-    return { beforeEl: null };
-  }
-
-  private resolveAfterRowId(
-    beforeEl: Element | null,
-    cards: HTMLElement[],
-    beforeIndex: number
-  ): string | null {
-    if (beforeEl) {
-      return beforeIndex > 0 ? cards[beforeIndex - 1].getAttribute('data-row-id') : null;
-    }
-
-    return cards.length > 0 ? cards[cards.length - 1].getAttribute('data-row-id') : null;
-  }
-
-  private commitDrop(e: PointerEvent): void {
-    const targetColumn = this.findTargetColumn(e.clientX);
-
-    if (!targetColumn) {
-      return;
-    }
-
-    const toOptionId = targetColumn.getAttribute('data-option-id') ?? '';
-    const position = this.getDropPosition(targetColumn, e.clientY);
-    const cards = Array.from(targetColumn.querySelectorAll<HTMLElement>('[data-blok-database-card]'))
-      .filter((card) => card.getAttribute('data-row-id') !== this.rowId);
-
-    const beforeRowId: string | null = position.beforeEl
-      ? position.beforeEl.getAttribute('data-row-id')
-      : null;
-
-    const beforeIndex = position.beforeEl ? cards.indexOf(position.beforeEl as HTMLElement) : -1;
-
-    const afterRowId = this.resolveAfterRowId(position.beforeEl, cards, beforeIndex);
-
-    this.onDrop({ rowId: this.rowId, toOptionId, beforeRowId, afterRowId });
-  }
-}