@lapis-notes/csv 0.0.0-stage → 0.2.0

package/dist/lib/components/csv-cell.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+  import { cn } from "@lapis-notes/ui";
+  import { tick } from "svelte";
+
+  let {
+    value,
+    multiline = false,
+    class: className,
+    onContentChange,
+    onCommit,
+    onNavigate,
+  }: {
+    value: string;
+    multiline?: boolean;
+    class?: string;
+    onContentChange: (value: string) => void;
+    onCommit?: () => void;
+    onNavigate?: (direction: "next" | "prev" | "down" | "up") => void;
+  } = $props();
+
+  let editing = $state(false);
+  let draft = $state("");
+  let editingMultiline = $state(false);
+  let inputEl = $state<HTMLInputElement | HTMLTextAreaElement | null>(null);
+
+  const useMultiline = $derived(
+    multiline || editingMultiline || draft.includes("\n"),
+  );
+
+  $effect(() => {
+    if (!editing) {
+      draft = value;
+      editingMultiline = false;
+    }
+  });
+
+  function startEditing() {
+    draft = value;
+    editingMultiline = multiline || value.includes("\n");
+    editing = true;
+    tick().then(() => inputEl?.focus());
+  }
+
+  function commit() {
+    if (!editing) {
+      return;
+    }
+    editing = false;
+    editingMultiline = false;
+    if (draft !== value) {
+      onContentChange(draft);
+    }
+    onCommit?.();
+  }
+
+  function insertNewlineAtCursor(event: KeyboardEvent) {
+    const target = event.currentTarget as
+      | HTMLInputElement
+      | HTMLTextAreaElement;
+    const start = target.selectionStart ?? draft.length;
+    const end = target.selectionEnd ?? draft.length;
+    draft = `${draft.slice(0, start)}\n${draft.slice(end)}`;
+    editingMultiline = true;
+    const cursor = start + 1;
+    tick().then(() => {
+      inputEl?.focus();
+      if (inputEl instanceof HTMLTextAreaElement) {
+        inputEl.setSelectionRange(cursor, cursor);
+      }
+    });
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      editing = false;
+      editingMultiline = false;
+      draft = value;
+      (event.currentTarget as HTMLElement).blur();
+      event.preventDefault();
+      return;
+    }
+
+    if (event.key === "Enter" && event.shiftKey && !useMultiline) {
+      event.preventDefault();
+      insertNewlineAtCursor(event);
+      return;
+    }
+
+    if (event.key === "Enter" && !useMultiline) {
+      commit();
+      onNavigate?.("down");
+      event.preventDefault();
+      return;
+    }
+
+    if (event.key === "Tab") {
+      commit();
+      onNavigate?.(event.shiftKey ? "prev" : "next");
+      event.preventDefault();
+    }
+  }
+</script>
+
+{#if editing}
+  {#if useMultiline}
+    <textarea
+      bind:this={inputEl}
+      class={cn("csv-cell__input csv-cell__input--multiline", className)}
+      bind:value={draft}
+      onblur={commit}
+      onkeydown={handleKeydown}
+    ></textarea>
+  {:else}
+    <input
+      bind:this={inputEl}
+      class={cn("csv-cell__input", className)}
+      type="text"
+      bind:value={draft}
+      onblur={commit}
+      onkeydown={handleKeydown}
+    />
+  {/if}
+{:else}
+  <button
+    type="button"
+    class={cn(
+      "csv-cell__display",
+      multiline && "csv-cell__display--multiline",
+      className,
+    )}
+    title={value}
+    onclick={startEditing}
+    ondblclick={startEditing}
+  >
+    {value || "\u00a0"}
+  </button>
+{/if}

package/dist/lib/components/csv-cell.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    value: string;
+    multiline?: boolean;
+    class?: string;
+    onContentChange: (value: string) => void;
+    onCommit?: () => void;
+    onNavigate?: (direction: "next" | "prev" | "down" | "up") => void;
+};
+declare const CsvCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type CsvCell = ReturnType<typeof CsvCell>;
+export default CsvCell;

package/dist/lib/components/csv-data-table-column-head.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+  import { createDraggable, createDroppable } from "@dnd-kit/svelte";
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import { cn } from "@lapis-notes/ui";
+  import type { Snippet } from "svelte";
+  import type { Attachment } from "svelte/attachments";
+  import type { CsvTableDragSource } from "./csv-table-dnd";
+  import { dropIndicatorClasses } from "./csv-table-dnd";
+
+  type Props = {
+    colIndex: number;
+    class?: string;
+    dragSource: CsvTableDragSource | null;
+    dragOverIndex: number | null;
+    selectedClass?: string;
+    isDragSource?: boolean;
+    children: Snippet<[{ attachColGripHandle: Attachment }]>;
+  };
+
+  let {
+    colIndex,
+    class: className,
+    dragSource,
+    dragOverIndex,
+    selectedClass,
+    isDragSource = false,
+    children,
+  }: Props = $props();
+
+  let headRef = $state<HTMLElement | null>(null);
+
+  const colDraggable = createDraggable({
+    get id() {
+      return `csv-col:${colIndex}`;
+    },
+    type: "csv-table-col",
+    get data() {
+      return { type: "csv-table-col" as const, index: colIndex };
+    },
+  });
+
+  const colDroppable = createDroppable({
+    get id() {
+      return `csv-col-drop:head:${colIndex}`;
+    },
+    accept: "csv-table-col",
+    get data() {
+      return { type: "csv-table-col" as const, index: colIndex };
+    },
+  });
+
+  $effect(() => {
+    if (!headRef) return;
+    const cleanupDraggable = colDraggable.attach(headRef);
+    const cleanupDroppable = colDroppable.attach(headRef);
+    return () => {
+      cleanupDraggable();
+      cleanupDroppable();
+    };
+  });
+</script>
+
+<Table.Head
+  bind:ref={headRef}
+  data-csv-col-index={colIndex}
+  class={cn(
+    className,
+    selectedClass,
+    isDragSource && "is-drag-source is-col-drag-source",
+    dropIndicatorClasses(dragSource, dragOverIndex, -1, colIndex),
+  )}
+>
+  {@render children({
+    attachColGripHandle: colDraggable.attachHandle as Attachment,
+  })}
+</Table.Head>

package/dist/lib/components/csv-data-table-column-head.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+import type { Attachment } from "svelte/attachments";
+import type { CsvTableDragSource } from "./csv-table-dnd";
+type Props = {
+    colIndex: number;
+    class?: string;
+    dragSource: CsvTableDragSource | null;
+    dragOverIndex: number | null;
+    selectedClass?: string;
+    isDragSource?: boolean;
+    children: Snippet<[{
+        attachColGripHandle: Attachment;
+    }]>;
+};
+declare const CsvDataTableColumnHead: import("svelte").Component<Props, {}, "">;
+type CsvDataTableColumnHead = ReturnType<typeof CsvDataTableColumnHead>;
+export default CsvDataTableColumnHead;

package/dist/lib/components/csv-data-table-column-header.svelte

@@ -0,0 +1,159 @@
+<script lang="ts">
+  import ArrowDownAZIcon from "@lucide/svelte/icons/arrow-down-a-z";
+  import ArrowDownZAIcon from "@lucide/svelte/icons/arrow-down-z-a";
+  import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
+  import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
+  import ArrowUpDownIcon from "@lucide/svelte/icons/arrow-up-down";
+  import BetweenHorizontalEndIcon from "@lucide/svelte/icons/between-horizontal-end";
+  import BetweenHorizontalStartIcon from "@lucide/svelte/icons/between-horizontal-start";
+  import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
+  import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
+  import EllipsisVerticalIcon from "@lucide/svelte/icons/ellipsis-vertical";
+  import GripHorizontal from "@lucide/svelte/icons/grip-horizontal";
+  import Trash2Icon from "@lucide/svelte/icons/trash-2";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import * as DropdownMenu from "@lapismd/design-core/shadcn/dropdown-menu";
+  import { cn } from "@lapis-notes/ui";
+  import type { Attachment } from "svelte/attachments";
+  import CsvCell from "./csv-cell.svelte";
+
+  type Props = {
+    title: string;
+    colIndex: number;
+    colCount: number;
+    isSynthetic?: boolean;
+    class?: string;
+    attachColGripHandle: Attachment;
+    onLabelChange?: (value: string) => void;
+    sortDirection?: "asc" | "desc" | null;
+    onToggleSort?: () => void;
+    onSortAsc?: () => void;
+    onSortDesc?: () => void;
+    onInsertLeft?: () => void;
+    onInsertRight?: () => void;
+    onMoveLeft?: () => void;
+    onMoveRight?: () => void;
+    onDelete?: () => void;
+    onSelectColumn?: () => void;
+  };
+
+  let {
+    title,
+    colIndex,
+    colCount,
+    isSynthetic = false,
+    class: className,
+    attachColGripHandle,
+    onSelectColumn,
+    onLabelChange,
+    sortDirection = null,
+    onToggleSort,
+    onSortAsc,
+    onSortDesc,
+    onInsertLeft,
+    onInsertRight,
+    onMoveLeft,
+    onMoveRight,
+    onDelete,
+  }: Props = $props();
+
+  const canMoveLeft = $derived(colIndex > 0);
+  const canMoveRight = $derived(colIndex < colCount - 1);
+  const sortLabel = $derived(`Sort ${title || `column ${colIndex + 1}`}`);
+</script>
+
+<div class={cn("csv-data-table__header", className)}>
+  <Button
+    variant="ghost"
+    size="xs"
+    data-grab-handle=""
+    class="csv-data-table__col-grip"
+    aria-label="Select column"
+    onclick={(event) => {
+      event.stopPropagation();
+      onSelectColumn?.();
+    }}
+    {@attach attachColGripHandle}
+  >
+    <GripHorizontal />
+  </Button>
+  <div class="csv-data-table__header-label">
+    <CsvCell
+      value={title}
+      class="csv-data-table__header-cell-editor"
+      onContentChange={(value) => onLabelChange?.(value)}
+    />
+  </div>
+  <div class="csv-data-table__header-actions">
+    <Button
+      variant="ghost"
+      size="icon"
+      class="csv-data-table__header-sort"
+      aria-label={sortLabel}
+      aria-pressed={sortDirection != null}
+      onclick={(event) => {
+        event.stopPropagation();
+        onToggleSort?.();
+      }}
+    >
+      {#if sortDirection === "asc"}
+        <ChevronUpIcon class="csv-data-table__header-icon" />
+      {:else if sortDirection === "desc"}
+        <ChevronDownIcon class="csv-data-table__header-icon" />
+      {:else}
+        <ArrowUpDownIcon class="csv-data-table__header-icon" />
+      {/if}
+    </Button>
+    <DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+      {#snippet child({ props }: { props: Record<string, unknown> })}
+        <Button
+          {...props}
+          class="csv-data-table__header-menu"
+          size="icon"
+          variant="ghost"
+          aria-label="Column actions"
+        >
+          <EllipsisVerticalIcon class="csv-data-table__header-icon" />
+        </Button>
+      {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content align="start" class="csv-data-table__menu">
+      <DropdownMenu.Item onclick={() => onSortAsc?.()}>
+        <ArrowDownAZIcon class="csv-data-table__header-icon" />
+        Sort A–Z
+      </DropdownMenu.Item>
+      <DropdownMenu.Item onclick={() => onSortDesc?.()}>
+        <ArrowDownZAIcon class="csv-data-table__header-icon" />
+        Sort Z–A
+      </DropdownMenu.Item>
+      <DropdownMenu.Separator />
+      <DropdownMenu.Item onclick={() => onMoveLeft?.()} disabled={!canMoveLeft}>
+        <ArrowLeftIcon class="csv-data-table__header-icon" />
+        Move column left
+      </DropdownMenu.Item>
+      <DropdownMenu.Item
+        onclick={() => onMoveRight?.()}
+        disabled={!canMoveRight}
+      >
+        <ArrowRightIcon class="csv-data-table__header-icon" />
+        Move column right
+      </DropdownMenu.Item>
+      <DropdownMenu.Separator />
+      <DropdownMenu.Item onclick={() => onInsertLeft?.()}>
+        <BetweenHorizontalStartIcon class="csv-data-table__header-icon" />
+        Insert column left
+      </DropdownMenu.Item>
+      <DropdownMenu.Item onclick={() => onInsertRight?.()}>
+        <BetweenHorizontalEndIcon class="csv-data-table__header-icon" />
+        Insert column right
+      </DropdownMenu.Item>
+      <DropdownMenu.Separator />
+      <DropdownMenu.Item onclick={() => onDelete?.()}>
+        <Trash2Icon class="csv-data-table__header-icon" />
+        Delete column
+      </DropdownMenu.Item>
+    </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  </div>
+</div>

package/dist/lib/components/csv-data-table-column-header.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Attachment } from "svelte/attachments";
+type Props = {
+    title: string;
+    colIndex: number;
+    colCount: number;
+    isSynthetic?: boolean;
+    class?: string;
+    attachColGripHandle: Attachment;
+    onLabelChange?: (value: string) => void;
+    sortDirection?: "asc" | "desc" | null;
+    onToggleSort?: () => void;
+    onSortAsc?: () => void;
+    onSortDesc?: () => void;
+    onInsertLeft?: () => void;
+    onInsertRight?: () => void;
+    onMoveLeft?: () => void;
+    onMoveRight?: () => void;
+    onDelete?: () => void;
+    onSelectColumn?: () => void;
+};
+declare const CsvDataTableColumnHeader: import("svelte").Component<Props, {}, "">;
+type CsvDataTableColumnHeader = ReturnType<typeof CsvDataTableColumnHeader>;
+export default CsvDataTableColumnHeader;

package/dist/lib/components/csv-data-table-data-cell.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { createDroppable } from "@dnd-kit/svelte";
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import { cn } from "@lapis-notes/ui";
+  import type { Snippet } from "svelte";
+  import type { CsvTableDragSource } from "./csv-table-dnd";
+  import { dropIndicatorClasses } from "./csv-table-dnd";
+
+  type Props = {
+    rowIndex: number;
+    colIndex: number;
+    class?: string;
+    dragSource: CsvTableDragSource | null;
+    dragOverIndex: number | null;
+    selectedClass?: string;
+    isColDragSource?: boolean;
+    onmousedown?: (event: MouseEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    oncontextmenu?: (event: MouseEvent) => void;
+    children: Snippet;
+  };
+
+  let {
+    rowIndex,
+    colIndex,
+    class: className,
+    dragSource,
+    dragOverIndex,
+    selectedClass,
+    isColDragSource = false,
+    onmousedown,
+    onmouseenter,
+    oncontextmenu,
+    children,
+  }: Props = $props();
+
+  let cellRef = $state<HTMLElement | null>(null);
+
+  const rowDroppable = createDroppable({
+    get id() {
+      return `csv-row-drop:${rowIndex}:${colIndex}`;
+    },
+    accept: "csv-table-row",
+    get data() {
+      return { type: "csv-table-row" as const, index: rowIndex };
+    },
+  });
+
+  $effect(() => {
+    if (!cellRef) {
+      return;
+    }
+    return rowDroppable.attach(cellRef);
+  });
+</script>
+
+<Table.Cell
+  bind:ref={cellRef}
+  data-csv-col-index={colIndex}
+  {onmousedown}
+  {onmouseenter}
+  {oncontextmenu}
+  class={cn(
+    "csv-data-table__cell",
+    className,
+    selectedClass,
+    dropIndicatorClasses(dragSource, dragOverIndex, rowIndex, colIndex),
+    isColDragSource && "is-drag-source is-col-drag-source",
+  )}
+>
+  {@render children()}
+</Table.Cell>

package/dist/lib/components/csv-data-table-data-cell.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+import type { CsvTableDragSource } from "./csv-table-dnd";
+type Props = {
+    rowIndex: number;
+    colIndex: number;
+    class?: string;
+    dragSource: CsvTableDragSource | null;
+    dragOverIndex: number | null;
+    selectedClass?: string;
+    isColDragSource?: boolean;
+    onmousedown?: (event: MouseEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    oncontextmenu?: (event: MouseEvent) => void;
+    children: Snippet;
+};
+declare const CsvDataTableDataCell: import("svelte").Component<Props, {}, "">;
+type CsvDataTableDataCell = ReturnType<typeof CsvDataTableDataCell>;
+export default CsvDataTableDataCell;

package/dist/lib/components/csv-data-table-drag-overlay.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+  import { DragOverlay } from "@dnd-kit/svelte";
+  import type { Draggable } from "@dnd-kit/dom";
+  import { cn } from "@lapis-notes/ui";
+  import type { CsvTableDragData } from "./csv-table-dnd";
+  import type { CsvDragOverlayMetrics } from "./csv-table-drag-measure";
+
+  type Props = {
+    showRowNumbers: boolean;
+    headerLabels: string[];
+    metrics: CsvDragOverlayMetrics | null;
+    rowValuesForIndex: (rowIndex: number) => string[];
+    columnBodyValuesForIndex: (colIndex: number) => string[];
+    rainbowClass: (colIndex: number, kind: "head" | "cell") => string;
+    displayRowNumberForIndex?: (rowIndex: number) => string | number;
+  };
+
+  let {
+    showRowNumbers,
+    headerLabels,
+    metrics,
+    rowValuesForIndex,
+    columnBodyValuesForIndex,
+    rainbowClass,
+    displayRowNumberForIndex,
+  }: Props = $props();
+
+  function dragData(source: Draggable): CsvTableDragData | null {
+    const data = source.data as CsvTableDragData | undefined;
+    if (data?.type === "csv-table-col" || data?.type === "csv-table-row") {
+      return data;
+    }
+    return null;
+  }
+
+  function rowCellStyle(index: number): string | undefined {
+    const width = metrics?.segmentSizes[index];
+    if (!width) {
+      return undefined;
+    }
+    return `width:${width}px;min-width:${width}px;max-width:${width}px`;
+  }
+
+  function columnCellStyle(index: number): string | undefined {
+    const height = metrics?.segmentSizes[index];
+    const width = metrics?.width;
+    if (!height || !width) {
+      return undefined;
+    }
+    return `width:${width}px;min-width:${width}px;max-width:${width}px;height:${height}px;min-height:${height}px;max-height:${height}px`;
+  }
+</script>
+
+<DragOverlay>
+  {#snippet children(source)}
+    {@const data = dragData(source)}
+    {#if data?.type === "csv-table-row"}
+      {@const values = rowValuesForIndex(data.index)}
+      <div
+        class="csv-data-table__drag-overlay csv-data-table__drag-overlay--row"
+        style={metrics
+          ? `width:${metrics.width}px;height:${metrics.height}px`
+          : undefined}
+        role="presentation"
+      >
+        {#if showRowNumbers}
+          <div
+            class="csv-data-table__drag-overlay-cell csv-data-table__drag-overlay-cell--gutter"
+            style={rowCellStyle(0)}
+          >
+            {displayRowNumberForIndex?.(data.index) ?? data.index + 1}
+          </div>
+        {/if}
+        {#each values as value, colIndex (colIndex)}
+          {@const segmentIndex = showRowNumbers ? colIndex + 1 : colIndex}
+          <div
+            class={cn(
+              "csv-data-table__drag-overlay-cell",
+              rainbowClass(colIndex, "cell"),
+            )}
+            style={rowCellStyle(segmentIndex)}
+          >
+            {value}
+          </div>
+        {/each}
+      </div>
+    {:else if data?.type === "csv-table-col"}
+      {@const bodyValues = columnBodyValuesForIndex(data.index)}
+      <div
+        class="csv-data-table__drag-overlay csv-data-table__drag-overlay--col"
+        style={metrics
+          ? `width:${metrics.width}px;height:${metrics.height}px`
+          : undefined}
+        role="presentation"
+      >
+        <div
+          class={cn(
+            "csv-data-table__drag-overlay-cell csv-data-table__drag-overlay-cell--head csv-data-table__head",
+            rainbowClass(data.index, "head"),
+          )}
+          style={columnCellStyle(0)}
+        >
+          {headerLabels[data.index] ?? ""}
+        </div>
+        {#each bodyValues as value, rowIndex (rowIndex)}
+          <div
+            class={cn(
+              "csv-data-table__drag-overlay-cell",
+              rainbowClass(data.index, "cell"),
+            )}
+            style={columnCellStyle(rowIndex + 1)}
+          >
+            {value}
+          </div>
+        {/each}
+      </div>
+    {/if}
+  {/snippet}
+</DragOverlay>

package/dist/lib/components/csv-data-table-drag-overlay.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { CsvDragOverlayMetrics } from "./csv-table-drag-measure";
+type Props = {
+    showRowNumbers: boolean;
+    headerLabels: string[];
+    metrics: CsvDragOverlayMetrics | null;
+    rowValuesForIndex: (rowIndex: number) => string[];
+    columnBodyValuesForIndex: (colIndex: number) => string[];
+    rainbowClass: (colIndex: number, kind: "head" | "cell") => string;
+    displayRowNumberForIndex?: (rowIndex: number) => string | number;
+};
+declare const CsvDataTableDragOverlay: import("svelte").Component<Props, {}, "">;
+type CsvDataTableDragOverlay = ReturnType<typeof CsvDataTableDragOverlay>;
+export default CsvDataTableDragOverlay;