@lapis-notes/csv 0.0.0-stage → 0.2.0

package/dist/lib/components/csv-data-table-row-actions.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import BetweenVerticalEndIcon from "@lucide/svelte/icons/between-vertical-end";
+  import BetweenVerticalStartIcon from "@lucide/svelte/icons/between-vertical-start";
+  import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
+  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";
+
+  type Props = {
+    onInsertAbove?: () => void;
+    onInsertBelow?: () => void;
+    onDelete?: () => void;
+  };
+
+  let { onInsertAbove, onInsertBelow, onDelete }: Props = $props();
+</script>
+
+<DropdownMenu.Root>
+  <DropdownMenu.Trigger>
+    {#snippet child({ props }: { props: Record<string, unknown> })}
+      <Button
+        {...props}
+        class="csv-data-table__row-actions"
+        size="icon"
+        variant="ghost"
+        aria-label="Row actions"
+      >
+        <EllipsisIcon />
+      </Button>
+    {/snippet}
+  </DropdownMenu.Trigger>
+  <DropdownMenu.Content align="end" class="csv-data-table__menu">
+    <DropdownMenu.Item onclick={() => onInsertAbove?.()}>
+      <BetweenVerticalStartIcon class="csv-data-table__header-icon" />
+      Insert row above
+    </DropdownMenu.Item>
+    <DropdownMenu.Item onclick={() => onInsertBelow?.()}>
+      <BetweenVerticalEndIcon class="csv-data-table__header-icon" />
+      Insert row below
+    </DropdownMenu.Item>
+    <DropdownMenu.Separator />
+    <DropdownMenu.Item onclick={() => onDelete?.()}>
+      <Trash2Icon class="csv-data-table__header-icon" />
+      Delete row
+    </DropdownMenu.Item>
+  </DropdownMenu.Content>
+</DropdownMenu.Root>

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

@@ -0,0 +1,8 @@
+type Props = {
+    onInsertAbove?: () => void;
+    onInsertBelow?: () => void;
+    onDelete?: () => void;
+};
+declare const CsvDataTableRowActions: import("svelte").Component<Props, {}, "">;
+type CsvDataTableRowActions = ReturnType<typeof CsvDataTableRowActions>;
+export default CsvDataTableRowActions;

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

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { createDraggable, createDroppable } from "@dnd-kit/svelte";
+  import GripVertical from "@lucide/svelte/icons/grip-vertical";
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  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;
+    onSelectRow?: () => void;
+    onmousedown?: (event: MouseEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    oncontextmenu?: (event: MouseEvent) => void;
+    children: Snippet;
+  };
+
+  let {
+    rowIndex,
+    colIndex,
+    class: className,
+    dragSource,
+    dragOverIndex,
+    selectedClass,
+    isColDragSource = false,
+    onSelectRow,
+    onmousedown,
+    onmouseenter,
+    oncontextmenu,
+    children,
+  }: Props = $props();
+
+  let cellRef = $state<HTMLElement | null>(null);
+
+  const rowDraggable = createDraggable({
+    get id() {
+      return `csv-row:${rowIndex}`;
+    },
+    type: "csv-table-row",
+    get data() {
+      return { type: "csv-table-row" as const, index: rowIndex };
+    },
+  });
+
+  const rowDroppable = createDroppable({
+    get id() {
+      return `csv-row-drop:${rowIndex}:grip`;
+    },
+    accept: "csv-table-row",
+    get data() {
+      return { type: "csv-table-row" as const, index: rowIndex };
+    },
+  });
+
+  $effect(() => {
+    if (!cellRef) {
+      return;
+    }
+    const cleanupDraggable = rowDraggable.attach(cellRef);
+    const cleanupDroppable = rowDroppable.attach(cellRef);
+    return () => {
+      cleanupDraggable();
+      cleanupDroppable();
+    };
+  });
+</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",
+  )}
+>
+  <Button
+    variant="ghost"
+    size="xs"
+    data-grab-handle=""
+    class="csv-data-table__row-grip"
+    aria-label="Drag row"
+    onclick={() => onSelectRow?.()}
+    {@attach rowDraggable.attachHandle}
+  >
+    <GripVertical />
+  </Button>
+  {@render children()}
+</Table.Cell>

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

@@ -0,0 +1,19 @@
+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;
+    onSelectRow?: () => void;
+    onmousedown?: (event: MouseEvent) => void;
+    onmouseenter?: (event: MouseEvent) => void;
+    oncontextmenu?: (event: MouseEvent) => void;
+    children: Snippet;
+};
+declare const CsvDataTableRowGripCell: import("svelte").Component<Props, {}, "">;
+type CsvDataTableRowGripCell = ReturnType<typeof CsvDataTableRowGripCell>;
+export default CsvDataTableRowGripCell;

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

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import * as Table from "@lapismd/design-core/shadcn/table";
+  import { cn } from "@lapis-notes/ui";
+  import type { Snippet } from "svelte";
+
+  type Props = {
+    rowIndex: number;
+    virtualIndex: number;
+    class?: string;
+    isRowDragSource?: boolean;
+    children: Snippet;
+  };
+
+  let {
+    rowIndex,
+    virtualIndex,
+    class: className,
+    isRowDragSource = false,
+    children,
+  }: Props = $props();
+
+  let hovered = $state(false);
+</script>
+
+<Table.Row
+  data-index={virtualIndex}
+  data-csv-row-index={rowIndex}
+  data-csv-hover={hovered ? "true" : undefined}
+  class={cn(className, isRowDragSource && "is-drag-source is-row-drag-source")}
+  onpointerenter={() => {
+    hovered = true;
+  }}
+  onpointerleave={() => {
+    hovered = false;
+  }}
+>
+  {@render children()}
+</Table.Row>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type Props = {
+    rowIndex: number;
+    virtualIndex: number;
+    class?: string;
+    isRowDragSource?: boolean;
+    children: Snippet;
+};
+declare const CsvDataTableRow: import("svelte").Component<Props, {}, "">;
+type CsvDataTableRow = ReturnType<typeof CsvDataTableRow>;
+export default CsvDataTableRow;