@warkypublic/svelix 0.1.0

package/dist/components/Gridler/Gridler.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { GridlerProps, GridlerColumn, GridlerCell, Item } from './types';
+export interface Props extends Partial<GridlerProps> {
+    columns: GridlerColumn[];
+    rows: number;
+    getCellContent: (item: Item) => GridlerCell;
+    children?: Snippet;
+}
+declare const Gridler: import("svelte").Component<Props, {}, "">;
+type Gridler = ReturnType<typeof Gridler>;
+export default Gridler;

package/dist/components/Gridler/GridlerHeader.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+  import type { GridlerColumn, GridlerTheme } from './types';
+  import { DEFAULT_THEME } from './types';
+  import { drawHeaderCell } from './utils/rendering';
+  import { getColumnX } from './utils/scrolling';
+
+  export interface Props {
+    columns: GridlerColumn[];
+    scrollX: number;
+    headerHeight: number;
+    width: number;
+    theme?: Partial<GridlerTheme>;
+    onColumnResize?: (index: number, width: number) => void;
+    onColumnMove?: (startIndex: number, endIndex: number) => void;
+  }
+
+  const {
+    columns,
+    scrollX,
+    headerHeight,
+    width,
+    theme = {},
+    onColumnResize,
+    onColumnMove,
+  }: Props = $props();
+
+  const mergedTheme: GridlerTheme = $derived({ ...DEFAULT_THEME, ...theme });
+
+  let canvasRef: HTMLCanvasElement | undefined = $state();
+  let ctx: CanvasRenderingContext2D | null = $derived(canvasRef?.getContext('2d') ?? null);
+
+  let resizingColumn = $state<number | null>(null);
+  let resizingStartX = $state(0);
+  let resizingStartWidth = $state(0);
+
+  let draggingColumn = $state<number | null>(null);
+  let dragOffsetX = $state(0);
+
+  $effect(() => {
+    if (ctx && width > 0) {
+      renderHeaders();
+    }
+  });
+
+  function renderHeaders() {
+    if (!ctx || !canvasRef) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    canvasRef.width = width * dpr;
+    canvasRef.height = headerHeight * dpr;
+    canvasRef.style.width = `${width}px`;
+    canvasRef.style.height = `${headerHeight}px`;
+    ctx.scale(dpr, dpr);
+
+    ctx.fillStyle = mergedTheme.bgHeader;
+    ctx.fillRect(0, 0, width, headerHeight);
+
+    for (let i = 0; i < columns.length; i++) {
+      const column = columns[i];
+      const x = getColumnX(columns, i) - scrollX;
+      
+      if (x + column.width < 0 || x > width) continue;
+      
+      drawHeaderCell(ctx, x, 0, column.width, headerHeight, column.title, mergedTheme);
+    }
+
+    if (draggingColumn !== null) {
+      const col = columns[draggingColumn];
+      const x = dragOffsetX;
+      ctx.globalAlpha = 0.8;
+      drawHeaderCell(ctx, x, 0, col.width, headerHeight, col.title, mergedTheme);
+      ctx.globalAlpha = 1;
+    }
+  }
+
+  function getResizeColumn(x: number): number | null {
+    const adjustedX = x + scrollX;
+    let colX = 0;
+    const handleWidth = 8;
+
+    for (let i = 0; i < columns.length; i++) {
+      colX += columns[i].width;
+      if (Math.abs(adjustedX - colX) < handleWidth / 2) {
+        return i;
+      }
+    }
+    return null;
+  }
+
+  function getColumnFromX(x: number): number {
+    const adjustedX = x + scrollX;
+    let colX = 0;
+
+    for (let i = 0; i < columns.length; i++) {
+      if (adjustedX >= colX && adjustedX < colX + columns[i].width) {
+        return i;
+      }
+      colX += columns[i].width;
+    }
+    return -1;
+  }
+
+  function handleMouseDown(e: MouseEvent) {
+    const resizeCol = getResizeColumn(e.offsetX);
+    
+    if (resizeCol !== null) {
+      resizingColumn = resizeCol;
+      resizingStartX = e.clientX;
+      resizingStartWidth = columns[resizeCol].width;
+      return;
+    }
+
+    const col = getColumnFromX(e.offsetX);
+    if (col !== -1) {
+      draggingColumn = col;
+      dragOffsetX = e.offsetX;
+    }
+  }
+
+  function handleMouseMove(e: MouseEvent) {
+    if (resizingColumn !== null) {
+      const deltaX = e.clientX - resizingStartX;
+      const newWidth = Math.max(50, resizingStartWidth + deltaX);
+      
+      if (onColumnResize) {
+        onColumnResize(resizingColumn, newWidth);
+      } else {
+        columns[resizingColumn].width = newWidth;
+        renderHeaders();
+      }
+      return;
+    }
+
+    if (draggingColumn !== null) {
+      dragOffsetX = e.offsetX;
+      renderHeaders();
+      return;
+    }
+
+    const resizeCol = getResizeColumn(e.offsetX);
+    if (resizeCol !== null) {
+      if (canvasRef) canvasRef.style.cursor = 'col-resize';
+    } else {
+      if (canvasRef) canvasRef.style.cursor = 'default';
+    }
+  }
+
+  function handleMouseUp(e: MouseEvent) {
+    if (draggingColumn !== null && draggingColumn !== getColumnFromX(e.offsetX)) {
+      const targetCol = getColumnFromX(e.offsetX);
+      if (targetCol !== -1 && onColumnMove) {
+        onColumnMove(draggingColumn, targetCol);
+      }
+    }
+
+    resizingColumn = null;
+    draggingColumn = null;
+  }
+</script>
+
+<canvas
+  bind:this={canvasRef}
+  class="gridler-header"
+  role="row"
+  aria-hidden="true"
+  {width}
+  height={headerHeight}
+  onmousedown={handleMouseDown}
+  onmousemove={handleMouseMove}
+  onmouseup={handleMouseUp}
+  onmouseleave={handleMouseUp}
+></canvas>
+
+<style>
+  .gridler-header {
+    display: block;
+    user-select: none;
+  }
+</style>

package/dist/components/Gridler/GridlerHeader.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { GridlerColumn, GridlerTheme } from './types';
+export interface Props {
+    columns: GridlerColumn[];
+    scrollX: number;
+    headerHeight: number;
+    width: number;
+    theme?: Partial<GridlerTheme>;
+    onColumnResize?: (index: number, width: number) => void;
+    onColumnMove?: (startIndex: number, endIndex: number) => void;
+}
+declare const GridlerHeader: import("svelte").Component<Props, {}, "">;
+type GridlerHeader = ReturnType<typeof GridlerHeader>;
+export default GridlerHeader;