negodesign 0.0.1 → 0.0.3

package/dist/components/core/datatable/ui/DataTableCore.svelte

@@ -1,144 +1,151 @@
-<script lang="ts" generics="T">
-    import {
-        type CellContext,
-        type ColumnDef,
-        type ColumnFiltersState,
-        type PaginationState,
-        type RowSelectionState,
-        type SortingState,
-        type VisibilityState,
-        getCoreRowModel,
-        getFilteredRowModel,
-        getPaginationRowModel,
-        getSortedRowModel,
-    } from "@tanstack/table-core";
-    import type { DataTableItem } from "../data/data-table";
-    import { resolveHeader } from "../data/resolve-header.svelte";
-    import { resolveCellBadge } from "../data/resolve-cell-badge.svelte";
-    import {
-        createDragColumn,
-        createSelectColumn,
-    } from "../data/columns-create";
-    import {
-        createSvelteTable,
-        renderComponent,
-    } from "../../../ui/data-table";
-    import DataTableListFilter from "./DataTableListFilter.svelte";
-    import DataTableContent from "./DataTableContent.svelte";
-    import DataTableListPagination from "./DataTableListPagination.svelte";
-
-    let { config, columnFilter, actions, items = [] }: DataTableItem<T> = $props();
-
-    let columns: ColumnDef<T>[] = $derived([
-        createDragColumn<T>(),
-        createSelectColumn<T>(),
-        ...config.map((it) => ({
-            accessorKey: it.accessorKey,
-            header: resolveHeader(it.header),
-            cell: resolveCellBadge(it.cell, it.badge),
-            enableSorting: it.enableSorting,
-            enableHiding: it.enableHiding,
-        })),
-        ...(actions
-            ? [{
-                  id: "actions",
-                  cell: (ctx: CellContext<T, unknown>) => renderComponent(actions, ctx as any),
-                  enableSorting: false,
-                  enableHiding: false,
-              } satisfies ColumnDef<T>]
-            : []),
-    ]);
-
-    let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
-    let columnFilters = $state<ColumnFiltersState>([]);
-    let columnVisibility = $state<VisibilityState>({});
-    let rowSelection = $state<RowSelectionState>({});
-    let sorting = $state<SortingState>([]);
-
-    let table = $derived(
-        createSvelteTable({
-            data: items,
-            columns,
-            state: {
-                get pagination() {
-                    return pagination;
-                },
-                get sorting() {
-                    return sorting;
-                },
-                get columnVisibility() {
-                    return columnVisibility;
-                },
-                get rowSelection() {
-                    return rowSelection;
-                },
-                get columnFilters() {
-                    return columnFilters;
-                },
-            },
-            getCoreRowModel: getCoreRowModel(),
-            getPaginationRowModel: getPaginationRowModel(),
-            getSortedRowModel: getSortedRowModel(),
-            getFilteredRowModel: getFilteredRowModel(),
-            onPaginationChange: (
-                updater:
-                    | PaginationState
-                    | ((arg0: PaginationState) => PaginationState),
-            ) => {
-                if (typeof updater === "function") {
-                    pagination = updater(pagination);
-                } else {
-                    pagination = updater;
-                }
-            },
-            onSortingChange: (
-                updater: SortingState | ((arg0: SortingState) => SortingState),
-            ) => {
-                if (typeof updater === "function") {
-                    sorting = updater(sorting);
-                } else {
-                    sorting = updater;
-                }
-            },
-            onColumnFiltersChange: (
-                updater:
-                    | ColumnFiltersState
-                    | ((arg0: ColumnFiltersState) => ColumnFiltersState),
-            ) => {
-                if (typeof updater === "function") {
-                    columnFilters = updater(columnFilters);
-                } else {
-                    columnFilters = updater;
-                }
-            },
-            onColumnVisibilityChange: (
-                updater:
-                    | VisibilityState
-                    | ((arg0: VisibilityState) => VisibilityState),
-            ) => {
-                if (typeof updater === "function") {
-                    columnVisibility = updater(columnVisibility);
-                } else {
-                    columnVisibility = updater;
-                }
-            },
-            onRowSelectionChange: (
-                updater:
-                    | RowSelectionState
-                    | ((arg0: RowSelectionState) => RowSelectionState),
-            ) => {
-                if (typeof updater === "function") {
-                    rowSelection = updater(rowSelection);
-                } else {
-                    rowSelection = updater;
-                }
-            },
-        }),
-    );
-</script>
-
-<div class="-mb-8 w-full">
-    <DataTableListFilter {table} column={columnFilter} />
-    <DataTableContent {table} {columns} />
-    <DataTableListPagination {table} />
-</div>
+<script lang="ts" generics="T">
+    import {
+        type CellContext,
+        type ColumnDef,
+        type ColumnFiltersState,
+        type PaginationState,
+        type RowSelectionState,
+        type SortingState,
+        type VisibilityState,
+        getCoreRowModel,
+        getFilteredRowModel,
+        getPaginationRowModel,
+        getSortedRowModel,
+    } from "@tanstack/table-core";
+    import type { DataTableItem } from "../data/data-table";
+    import { resolveHeader } from "../data/resolve-header.svelte";
+    import { resolveCellBadge } from "../data/resolve-cell-badge.svelte";
+    import {
+        createDragColumn,
+        createSelectColumn,
+    } from "../data/columns-create";
+    import {
+        createSvelteTable,
+        renderComponent,
+    } from "../../../ui/data-table";
+    import DataTableListFilter from "./DataTableListFilter.svelte";
+    import DataTableContent from "./DataTableContent.svelte";
+    import DataTableListPagination from "./DataTableListPagination.svelte";
+
+    /**
+     * Tabela de dados genérica com paginação, ordenação e filtros.
+     * @property {DataTableItem<T>["config"]} config - Definição das colunas
+     * @property {keyof T} columnFilter - Chave para filtro por coluna
+     * @property {Component} actions - Componente de ações por linha
+     * @property {T[]} items - Dados da tabela
+     */
+    let { config, columnFilter, actions, items = [] }: DataTableItem<T> = $props();
+
+    let columns: ColumnDef<T>[] = $derived([
+        createDragColumn<T>(),
+        createSelectColumn<T>(),
+        ...config.map((it) => ({
+            accessorKey: it.accessorKey,
+            header: resolveHeader(it.header),
+            cell: resolveCellBadge(it.cell, it.badge),
+            enableSorting: it.enableSorting,
+            enableHiding: it.enableHiding,
+        })),
+        ...(actions
+            ? [{
+                  id: "actions",
+                  cell: (ctx: CellContext<T, unknown>) => renderComponent(actions, ctx as unknown),
+                  enableSorting: false,
+                  enableHiding: false,
+              } satisfies ColumnDef<T>]
+            : []),
+    ]);
+
+    let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 10 });
+    let columnFilters = $state<ColumnFiltersState>([]);
+    let columnVisibility = $state<VisibilityState>({});
+    let rowSelection = $state<RowSelectionState>({});
+    let sorting = $state<SortingState>([]);
+
+    let table = $derived(
+        createSvelteTable({
+            data: items,
+            columns,
+            state: {
+                get pagination() {
+                    return pagination;
+                },
+                get sorting() {
+                    return sorting;
+                },
+                get columnVisibility() {
+                    return columnVisibility;
+                },
+                get rowSelection() {
+                    return rowSelection;
+                },
+                get columnFilters() {
+                    return columnFilters;
+                },
+            },
+            getCoreRowModel: getCoreRowModel(),
+            getPaginationRowModel: getPaginationRowModel(),
+            getSortedRowModel: getSortedRowModel(),
+            getFilteredRowModel: getFilteredRowModel(),
+            onPaginationChange: (
+                updater:
+                    | PaginationState
+                    | ((arg0: PaginationState) => PaginationState),
+            ) => {
+                if (typeof updater === "function") {
+                    pagination = updater(pagination);
+                } else {
+                    pagination = updater;
+                }
+            },
+            onSortingChange: (
+                updater: SortingState | ((arg0: SortingState) => SortingState),
+            ) => {
+                if (typeof updater === "function") {
+                    sorting = updater(sorting);
+                } else {
+                    sorting = updater;
+                }
+            },
+            onColumnFiltersChange: (
+                updater:
+                    | ColumnFiltersState
+                    | ((arg0: ColumnFiltersState) => ColumnFiltersState),
+            ) => {
+                if (typeof updater === "function") {
+                    columnFilters = updater(columnFilters);
+                } else {
+                    columnFilters = updater;
+                }
+            },
+            onColumnVisibilityChange: (
+                updater:
+                    | VisibilityState
+                    | ((arg0: VisibilityState) => VisibilityState),
+            ) => {
+                if (typeof updater === "function") {
+                    columnVisibility = updater(columnVisibility);
+                } else {
+                    columnVisibility = updater;
+                }
+            },
+            onRowSelectionChange: (
+                updater:
+                    | RowSelectionState
+                    | ((arg0: RowSelectionState) => RowSelectionState),
+            ) => {
+                if (typeof updater === "function") {
+                    rowSelection = updater(rowSelection);
+                } else {
+                    rowSelection = updater;
+                }
+            },
+        }),
+    );
+</script>
+
+<div class="-mb-8 w-full">
+    <DataTableListFilter {table} column={columnFilter} />
+    <DataTableContent {table} {columns} />
+    <DataTableListPagination {table} />
+</div>

package/dist/components/core/datatable/ui/DataTableDragHandle.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">
-    import { GripVerticalIcon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-</script>
-
-<button class="cursor-grab opacity-60 hover:opacity-100 w-min">
-    <HugeiconsIcon icon={GripVerticalIcon} class="size-4" />
-</button>
+<script lang="ts">
+    import { GripVerticalIcon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+</script>
+
+<button class="cursor-grab opacity-60 hover:opacity-100 w-min">
+    <HugeiconsIcon icon={GripVerticalIcon} class="size-4" />
+</button>

package/dist/components/core/datatable/ui/DataTableListFilter.svelte

@@ -1,59 +1,59 @@
-<script lang="ts" generics="T">
-    import Button from "../../../button.svelte";
-    import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
-    import { Input } from "../../../ui/input/index.js";
-    import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
-    import { HugeiconsIcon } from "@hugeicons/svelte";
-    import type { Table } from "@tanstack/table-core";
-
-    type Props = {
-        table: Table<T>;
-        column?: keyof T & string;
-    };
-
-    let { table, column }: Props = $props();
-</script>
-
-<div class="flex items-center py-4">
-    <Input
-        placeholder="Filter emails..."
-        value={(column
-            ? (table.getColumn(column)?.getFilterValue() as string)
-            : "") ?? ""}
-        oninput={(e) =>
-            column &&
-            table.getColumn(column)?.setFilterValue(e.currentTarget.value)}
-        onchange={(e) => {
-            column &&
-                table.getColumn(column)?.setFilterValue(e.currentTarget.value);
-        }}
-        class="max-w-sm"
-    />
-    <DropdownMenu.Root>
-        <DropdownMenu.Trigger>
-            {#snippet child({ props })}
-                <Button {...props} variant="outline" class="ms-auto">
-                    Columns <HugeiconsIcon
-                        icon={ArrowDown01Icon}
-                        class="ms-2 size-4"
-                    />
-                </Button>
-            {/snippet}
-        </DropdownMenu.Trigger>
-        <DropdownMenu.Content align="end">
-            {#each table
-                .getAllColumns()
-                .filter((col) => col.getCanHide()) as col (col.id)}
-                <DropdownMenu.CheckboxItem
-                    class="capitalize"
-                    bind:checked={
-                        () => col.getIsVisible(),
-                        (v) => col.toggleVisibility(!!v)
-                    }
-                >
-                    {col.id}
-                </DropdownMenu.CheckboxItem>
-            {/each}
-        </DropdownMenu.Content>
-    </DropdownMenu.Root>
-</div>
+<script lang="ts" generics="T">
+    import Button from "../../../button.svelte";
+    import * as DropdownMenu from "../../../ui/dropdown-menu/index.js";
+    import { Input } from "../../../ui/input/index.js";
+    import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
+    import { HugeiconsIcon } from "@hugeicons/svelte";
+    import type { Table } from "@tanstack/table-core";
+
+    type Props = {
+        table: Table<T>;
+        column?: keyof T & string;
+    };
+
+    let { table, column }: Props = $props();
+</script>
+
+<div class="flex items-center py-4">
+    <Input
+        placeholder="Filter emails..."
+        value={(column
+            ? (table.getColumn(column)?.getFilterValue() as string)
+            : "") ?? ""}
+        oninput={(e) =>
+            column &&
+            table.getColumn(column)?.setFilterValue(e.currentTarget.value)}
+        onchange={(e) => {
+            column &&
+                table.getColumn(column)?.setFilterValue(e.currentTarget.value);
+        }}
+        class="max-w-sm"
+    />
+    <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+            {#snippet child({ props })}
+                <Button {...props} variant="outline" class="ms-auto">
+                    Columns <HugeiconsIcon
+                        icon={ArrowDown01Icon}
+                        class="ms-2 size-4"
+                    />
+                </Button>
+            {/snippet}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end">
+            {#each table
+                .getAllColumns()
+                .filter((col) => col.getCanHide()) as col (col.id)}
+                <DropdownMenu.CheckboxItem
+                    class="capitalize"
+                    bind:checked={
+                        () => col.getIsVisible(),
+                        (v) => col.toggleVisibility(!!v)
+                    }
+                >
+                    {col.id}
+                </DropdownMenu.CheckboxItem>
+            {/each}
+        </DropdownMenu.Content>
+    </DropdownMenu.Root>
+</div>

package/dist/components/core/datatable/ui/DataTableListPagination.svelte

@@ -1,35 +1,35 @@
-<script lang="ts" generics="T">
-    import Button from "../../../button.svelte";
-    import type { Table } from "@tanstack/table-core";
-
-    type Props = {
-        table: Table<T>;
-    };
-
-    let { table }: Props = $props();
-</script>
-
-<div class="flex items-center justify-end space-x-2 pt-4">
-    <div class="text-muted-foreground flex-1 text-sm">
-        {table.getFilteredSelectedRowModel().rows.length} of
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-    </div>
-    <div class="space-x-2">
-        <Button
-            variant="outline"
-            size="sm"
-            onclick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-        >
-            Previous
-        </Button>
-        <Button
-            variant="outline"
-            size="sm"
-            onclick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-        >
-            Next
-        </Button>
-    </div>
-</div>
+<script lang="ts" generics="T">
+    import Button from "../../../button.svelte";
+    import type { Table } from "@tanstack/table-core";
+
+    type Props = {
+        table: Table<T>;
+    };
+
+    let { table }: Props = $props();
+</script>
+
+<div class="flex items-center justify-end space-x-2 pt-4">
+    <div class="text-muted-foreground flex-1 text-sm">
+        {table.getFilteredSelectedRowModel().rows.length} of
+        {table.getFilteredRowModel().rows.length} row(s) selected.
+    </div>
+    <div class="space-x-2">
+        <Button
+            variant="outline"
+            size="sm"
+            onclick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+        >
+            Previous
+        </Button>
+        <Button
+            variant="outline"
+            size="sm"
+            onclick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+        >
+            Next
+        </Button>
+    </div>
+</div>