@jackuait/blok 0.6.0-beta.0 → 0.6.0-beta.10

package/src/tools/table/table-core.ts

@@ -19,6 +19,8 @@ const CELL_CLASSES = [
   'min-h-[2em]',
   'outline-none',
   'leading-normal',
+  'text-sm',
+  'cursor-text',
 ];
 
 /**
@@ -130,7 +132,7 @@ export class TableGrid {
    * those widths and the new column is added in px mode. This prevents
    * existing columns from shrinking when the table is in percent mode.
    */
-  public addColumn(table: HTMLElement, index?: number, colWidths?: number[]): boolean {
+  public addColumn(table: HTMLElement, index?: number, colWidths?: number[], newColWidth?: number): boolean {
     const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
     const oldColCount = this.getColumnCount(table);
     const hasValidColWidths = colWidths !== undefined && colWidths.length === oldColCount;
@@ -141,7 +143,7 @@ export class TableGrid {
     }
 
     if (usePx) {
-      this.addColumnPx(rows, oldColCount, index);
+      this.addColumnPx(rows, oldColCount, index, newColWidth);
 
       return true;
     }
@@ -169,24 +171,15 @@ export class TableGrid {
   }
 
   /**
-   * Add column in px mode: keep existing widths, add new column at half the average width
+   * Add column in px mode: keep existing widths, add new column at given width or half the average
    */
-  private addColumnPx(rows: NodeListOf<Element>, oldColCount: number, index?: number): void {
-    const firstRow = rows[0];
-    const firstRowCells = firstRow?.querySelectorAll(`[${CELL_ATTR}]`);
-    const totalWidth = Array.from(firstRowCells ?? []).reduce(
-      (sum, node) => sum + (parseFloat((node as HTMLElement).style.width) || 0),
-      0
-    );
-
-    const newColWidth = oldColCount > 0
-      ? Math.round((totalWidth / oldColCount / 2) * 100) / 100
-      : 0;
+  private addColumnPx(rows: NodeListOf<Element>, oldColCount: number, index?: number, newColWidth?: number): void {
+    const computedWidth = newColWidth ?? this.computeHalfAvgPxWidth(rows, oldColCount);
 
     rows.forEach(row => {
       const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
       const isAppend = index === undefined || index >= cells.length;
-      const cell = this.createCell(`${newColWidth}px`);
+      const cell = this.createCell(`${computedWidth}px`);
 
       if (!isAppend) {
         row.insertBefore(cell, cells[index]);
@@ -198,6 +191,19 @@ export class TableGrid {
     });
   }
 
+  private computeHalfAvgPxWidth(rows: NodeListOf<Element>, oldColCount: number): number {
+    const firstRow = rows[0];
+    const firstRowCells = firstRow?.querySelectorAll(`[${CELL_ATTR}]`);
+    const totalWidth = Array.from(firstRowCells ?? []).reduce(
+      (sum, node) => sum + (parseFloat((node as HTMLElement).style.width) || 0),
+      0
+    );
+
+    return oldColCount > 0
+      ? Math.round((totalWidth / oldColCount / 2) * 100) / 100
+      : 0;
+  }
+
   /**
    * Add column in % mode: shrink existing columns slightly and add new column at half the average width
    */
@@ -236,7 +242,6 @@ export class TableGrid {
    */
   public deleteColumn(table: HTMLElement, index: number): void {
     const rows = table.querySelectorAll(`[${ROW_ATTR}]`);
-    const unit = this.detectWidthUnit(table);
 
     rows.forEach(row => {
       const cells = row.querySelectorAll(`[${CELL_ATTR}]`);
@@ -245,23 +250,7 @@ export class TableGrid {
         return;
       }
 
-      const removedWidth = parseFloat((cells[index] as HTMLElement).style.width) || 0;
-
       cells[index].remove();
-
-      // Redistribute removed width to remaining cells
-      const remaining = row.querySelectorAll(`[${CELL_ATTR}]`);
-
-      if (remaining.length > 0 && removedWidth > 0) {
-        const extra = removedWidth / remaining.length;
-
-        remaining.forEach(cell => {
-          const el = cell as HTMLElement;
-          const currentWidth = parseFloat(el.style.width) || 0;
-
-          el.style.width = `${Math.round((currentWidth + extra) * 100) / 100}${unit}`;
-        });
-      }
     });
   }
 

package/src/tools/table/table-grip-visuals.ts

@@ -0,0 +1,96 @@
+export const GRIP_HOVER_SIZE = 16;
+
+/**
+ * Dot positions for vertical layout (2 cols × 3 rows) — used by row grips.
+ */
+const VERTICAL_DOTS: [number, number][] = [
+  [2, 2], [8, 2],
+  [2, 7], [8, 7],
+  [2, 12], [8, 12],
+];
+
+/**
+ * Dot positions for horizontal layout (3 cols × 2 rows) — used by column grips.
+ */
+const HORIZONTAL_DOTS: [number, number][] = [
+  [2, 2], [7, 2], [12, 2],
+  [2, 8], [7, 8], [12, 8],
+];
+
+/**
+ * Creates an SVG element with a dot grid pattern for the drag handle affordance.
+ * Column grips get a horizontal 3×2 layout; row grips get a vertical 2×3 layout.
+ */
+export const createGripDotsSvg = (orientation: 'horizontal' | 'vertical'): SVGElement => {
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  const isHorizontal = orientation === 'horizontal';
+
+  svg.setAttribute('width', isHorizontal ? '14' : '10');
+  svg.setAttribute('height', isHorizontal ? '10' : '14');
+  svg.setAttribute('viewBox', isHorizontal ? '0 0 14 10' : '0 0 10 14');
+  svg.setAttribute('fill', 'currentColor');
+  svg.classList.add(
+    'opacity-0',
+    'transition-opacity',
+    'duration-150',
+    'text-gray-400',
+    'pointer-events-none'
+  );
+
+  const positions = isHorizontal ? HORIZONTAL_DOTS : VERTICAL_DOTS;
+
+  for (const [cx, cy] of positions) {
+    const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+
+    circle.setAttribute('cx', String(cx));
+    circle.setAttribute('cy', String(cy));
+    circle.setAttribute('r', '1.5');
+    svg.appendChild(circle);
+  }
+
+  return svg;
+};
+
+/**
+ * Expand a grip element to the hover state.
+ * Column grips expand height; row grips expand width.
+ */
+export const expandGrip = (grip: HTMLElement, type: 'col' | 'row'): void => {
+  if (type === 'col') {
+    Object.assign(grip.style, { height: `${GRIP_HOVER_SIZE}px` });
+  } else {
+    Object.assign(grip.style, { width: `${GRIP_HOVER_SIZE}px` });
+  }
+
+  grip.classList.add('bg-gray-200');
+  grip.classList.remove('bg-gray-300');
+
+  const svg = grip.querySelector('svg');
+
+  if (svg) {
+    svg.classList.remove('opacity-0');
+    svg.classList.add('opacity-100');
+  }
+};
+
+/**
+ * Collapse a grip element back to its idle pill size.
+ * Column grips shrink height; row grips shrink width.
+ */
+export const collapseGrip = (grip: HTMLElement, type: 'col' | 'row', pillSize: number): void => {
+  if (type === 'col') {
+    Object.assign(grip.style, { height: `${pillSize}px` });
+  } else {
+    Object.assign(grip.style, { width: `${pillSize}px` });
+  }
+
+  grip.classList.remove('bg-gray-200');
+  grip.classList.add('bg-gray-300');
+
+  const svg = grip.querySelector('svg');
+
+  if (svg) {
+    svg.classList.add('opacity-0');
+    svg.classList.remove('opacity-100');
+  }
+};

package/src/tools/table/table-heading-toggle.ts

@@ -0,0 +1,127 @@
+import { twMerge } from '../../components/utils/tw';
+
+/**
+ * Matches the default popover item container styling from popover-item-default.const.ts
+ */
+const TOGGLE_ROW_CLASSES = [
+  'flex',
+  'items-center',
+  'select-none',
+  'border-none',
+  'bg-transparent',
+  'rounded-md',
+  'p-[var(--item-padding)]',
+  'text-text-primary',
+  'mb-px',
+  'cursor-pointer',
+  'can-hover:hover:bg-item-hover-bg',
+];
+
+/**
+ * Matches the default popover item icon styling
+ */
+const ICON_WRAPPER_CLASSES = [
+  'flex',
+  'items-center',
+  'justify-center',
+  'w-[26px]',
+  'h-[26px]',
+  'mr-2',
+  '[&_svg]:w-icon',
+  '[&_svg]:h-icon',
+];
+
+/**
+ * Matches the default popover item title styling
+ */
+const LABEL_CLASSES = [
+  'mr-auto',
+  'truncate',
+  'text-sm',
+  'font-medium',
+  'leading-5',
+];
+
+const TRACK_CLASSES = [
+  'relative',
+  'w-[34px]',
+  'h-[20px]',
+  'rounded-full',
+  'transition-colors',
+  'duration-200',
+  'shrink-0',
+];
+
+const THUMB_CLASSES = [
+  'absolute',
+  'top-[2px]',
+  'w-4',
+  'h-4',
+  'rounded-full',
+  'bg-white',
+  'shadow-sm',
+  'transition-[left]',
+  'duration-200',
+];
+
+interface HeadingToggleOptions {
+  icon: string;
+  label: string;
+  isActive: boolean;
+  onToggle: (isActive: boolean) => void;
+}
+
+/**
+ * Creates a toggle switch element for heading row/column controls.
+ * Returns an HTML element suitable for use as a PopoverItemType.Html item.
+ */
+export const createHeadingToggle = (options: HeadingToggleOptions): HTMLElement => {
+  const { icon, label, isActive, onToggle } = options;
+
+  const state = { active: isActive };
+
+  const row = document.createElement('div');
+
+  row.className = twMerge(TOGGLE_ROW_CLASSES);
+
+  // Icon
+  const iconWrapper = document.createElement('div');
+
+  iconWrapper.className = twMerge(ICON_WRAPPER_CLASSES);
+  iconWrapper.innerHTML = icon;
+  row.appendChild(iconWrapper);
+
+  // Label
+  const labelEl = document.createElement('span');
+
+  labelEl.className = twMerge(LABEL_CLASSES);
+  labelEl.textContent = label;
+  row.appendChild(labelEl);
+
+  // Toggle switch
+  const track = document.createElement('div');
+
+  track.className = twMerge(TRACK_CLASSES);
+
+  const thumb = document.createElement('div');
+
+  thumb.className = twMerge(THUMB_CLASSES);
+  track.appendChild(thumb);
+  row.appendChild(track);
+
+  const applyState = (): void => {
+    track.style.backgroundColor = state.active ? '#3b82f6' : '#d1d5db';
+    thumb.style.left = state.active ? '16px' : '2px';
+  };
+
+  applyState();
+
+  row.addEventListener('click', (e) => {
+    e.stopPropagation();
+    state.active = !state.active;
+    applyState();
+    onToggle(state.active);
+  });
+
+  return row;
+};