pika-ux 1.0.0-beta.0

package/src/pika/pika-table/pika-table-checkbox.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import { Checkbox } from '../../shadcn/checkbox';
+    import type { Checkbox as CheckboxPrimitive, WithoutChildrenOrChild } from 'bits-ui';
+
+    let { checked = false, onCheckedChange = (v) => (checked = v), ...restProps }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+</script>
+
+<Checkbox bind:checked={() => checked, onCheckedChange} {...restProps} />

package/src/pika/pika-table/pika-table-column-header.svelte

@@ -0,0 +1,88 @@
+<script lang="ts" module>
+    type TData = unknown;
+    type TValue = unknown;
+</script>
+
+<script lang="ts" generics="TData, TValue">
+    import ArrowDown from '$icons/lucide/arrow-down';
+    import ArrowDownUp from '$icons/lucide/arrow-down-up';
+    import ArrowUp from '$icons/lucide/arrow-up';
+    import EllipsisVertical from '$icons/lucide/ellipsis-vertical';
+    import EyeOff from '$icons/lucide/eye-off';
+    import Button from '../../shadcn/button/button.svelte';
+    import * as DropdownMenu from '../../shadcn/dropdown-menu';
+    import { cn } from '../../shadcn/utils';
+    import type { Column } from '@tanstack/table-core';
+    import type { WithoutChildren } from 'bits-ui';
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    type Props = HTMLAttributes<HTMLDivElement> & {
+        column: Column<TData, TValue>;
+        title: string;
+    };
+
+    let { column, class: className, title, ...restProps }: WithoutChildren<Props> = $props();
+    let mouseInside = $state(false);
+    let dropdownOpen = $state(false);
+</script>
+
+{#if !column?.getCanSort()}
+    <div class={className} {...restProps}>
+        {title}
+    </div>
+{:else}
+    <!--TODO: why couldn't we add the restProps thing to the button below? {...restProps} -->
+    <Button
+        variant="ghost"
+        onmouseenter={() => (mouseInside = true)}
+        onmouseleave={() => (mouseInside = false)}
+        class={cn('flex items-center min-w-0 gap-1 group pl-0 pr-0', className)}
+        onclick={() => {
+            if (column.getIsSorted() === false) {
+                column.toggleSorting(false);
+            } else if (column.getIsSorted() === 'asc') {
+                column.toggleSorting(true);
+            } else if (column.getIsSorted() === 'desc') {
+                column.clearSorting();
+            }
+        }}
+    >
+        <span class="truncate flex-1">{title}</span>
+        {#if column.getIsSorted() === 'desc'}
+            <ArrowDown class="flex-shrink-0" />
+        {:else if column.getIsSorted() === 'asc'}
+            <ArrowUp class="flex-shrink-0" />
+        {/if}
+
+        <div class="flex-shrink-0 w-3 h-6 flex items-center justify-between {dropdownOpen ? 'visible' : 'invisible'} group-hover:visible">
+            <DropdownMenu.Root bind:open={dropdownOpen}>
+                <DropdownMenu.Trigger>
+                    {#snippet child({ props })}
+                        <Button {...props} variant="ghost" size="icon" class="data-[state=open]:bg-blue-200 h-8 w-8 p-0 hover:bg-blue-200 {dropdownOpen ? 'bg-blue-200' : ''} ">
+                            <EllipsisVertical class="text-muted-foreground/70 size-3.5" />
+                        </Button>
+                    {/snippet}
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="start">
+                    <DropdownMenu.Item disabled={column.getIsSorted() === 'asc'} onclick={() => column.toggleSorting(false)}>
+                        <ArrowUp class="text-muted-foreground/70 mr-2 size-3.5" />
+                        Asc
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item disabled={column.getIsSorted() === 'desc'} onclick={() => column.toggleSorting(true)}>
+                        <ArrowDown class="text-muted-foreground/70 mr-2 size-3.5" />
+                        Desc
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item disabled={!column.getIsSorted()} onclick={() => column.clearSorting()}>
+                        <ArrowDownUp class="text-muted-foreground/70 mr-2 size-3.5" />
+                        UnSort
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Separator />
+                    <DropdownMenu.Item onclick={() => column.toggleVisibility(false)}>
+                        <EyeOff class="text-muted-foreground/70 mr-2 size-3.5" />
+                        Hide
+                    </DropdownMenu.Item>
+                </DropdownMenu.Content>
+            </DropdownMenu.Root>
+        </div>
+    </Button>
+{/if}

package/src/pika/pika-table/pika-table-faceted-filter.svelte

@@ -0,0 +1,109 @@
+<script lang="ts" module>
+    type TData = unknown;
+    type TValue = unknown;
+</script>
+
+<script lang="ts" generics="TData, TValue">
+    import CirclePlus from '$icons/lucide/circle-plus';
+    import Check from '$icons/lucide/check';
+    import { Badge } from '../../shadcn/badge';
+    import { Button } from '../../shadcn/button';
+    import * as Command from '../../shadcn/command';
+    import * as Popover from '../../shadcn/popover';
+    import { Separator } from '../../shadcn/separator';
+    import { cn } from '../../shadcn/utils';
+    import type { Column } from '@tanstack/table-core';
+    import { SvelteSet } from 'svelte/reactivity';
+    import type { FacetedFilterData } from './types';
+
+    type Props<TData, TValue> = {
+        column: Column<TData, TValue>;
+        title: string;
+        options: FacetedFilterData[];
+    };
+
+    let { column, title, options }: Props<TData, TValue> = $props();
+
+    const facets = $derived(column?.getFacetedUniqueValues());
+    const selectedValues = $derived(new SvelteSet(column?.getFilterValue() as string[]));
+</script>
+
+<Popover.Root>
+    <Popover.Trigger>
+        {#snippet child({ props })}
+            <Button {...props} variant="outline" size="sm" class="h-8 border-dashed">
+                <CirclePlus />
+                {title}
+                {#if selectedValues.size > 0}
+                    <Separator orientation="vertical" class="mx-2 h-4" />
+                    <Badge variant="secondary" class="rounded-sm px-1 font-normal lg:hidden">
+                        {selectedValues.size}
+                    </Badge>
+                    <div class="hidden space-x-1 lg:flex">
+                        {#if selectedValues.size > 2}
+                            <Badge variant="secondary" class="rounded-sm px-1 font-normal">
+                                {selectedValues.size} selected
+                            </Badge>
+                        {:else}
+                            {#each options.filter((opt) => selectedValues.has(opt.value)) as option (option)}
+                                <Badge variant="secondary" class="rounded-sm px-1 font-normal">
+                                    {option.label}
+                                </Badge>
+                            {/each}
+                        {/if}
+                    </div>
+                {/if}
+            </Button>
+        {/snippet}
+    </Popover.Trigger>
+    <Popover.Content class="w-[200px] p-0" align="start">
+        <Command.Root>
+            <Command.Input placeholder={title} />
+            <Command.List>
+                <Command.Empty>No results found.</Command.Empty>
+                <Command.Group>
+                    {#each options as option (option)}
+                        {@const isSelected = selectedValues.has(option.value)}
+                        <Command.Item
+                            onSelect={() => {
+                                if (isSelected) {
+                                    selectedValues.delete(option.value);
+                                } else {
+                                    selectedValues.add(option.value);
+                                }
+                                const filterValues = Array.from(selectedValues);
+                                column?.setFilterValue(filterValues.length ? filterValues : undefined);
+                            }}
+                        >
+                            <div
+                                class={cn(
+                                    'border-primary mr-2 flex size-4 items-center justify-center rounded-sm border',
+                                    isSelected ? 'bg-primary text-primary-foreground' : 'opacity-50 [&_svg]:invisible'
+                                )}
+                            >
+                                <Check class="size-4" />
+                            </div>
+                            {#if option.icon}
+                                {@const Icon = option.icon}
+                                <Icon class="text-muted-foreground {option.iconClasses ?? ''}" />
+                            {/if}
+
+                            <span>{option.label}</span>
+                            {#if facets?.get(option.value)}
+                                <span class="ml-auto flex size-4 items-center justify-center font-mono text-xs">
+                                    {facets.get(option.value)}
+                                </span>
+                            {/if}
+                        </Command.Item>
+                    {/each}
+                </Command.Group>
+                {#if selectedValues.size > 0}
+                    <Command.Separator />
+                    <Command.Group>
+                        <Command.Item onSelect={() => column?.setFilterValue(undefined)} class="justify-center text-center">Clear filters</Command.Item>
+                    </Command.Group>
+                {/if}
+            </Command.List>
+        </Command.Root>
+    </Popover.Content>
+</Popover.Root>

package/src/pika/pika-table/pika-table-pagination.svelte

@@ -0,0 +1,95 @@
+<script lang="ts" module>
+    type TData = unknown;
+</script>
+
+<script lang="ts" generics="TData">
+    import ChevronLeft from '$icons/lucide/chevron-left';
+    import ChevronRight from '$icons/lucide/chevron-right';
+    import ChevronsLeft from '$icons/lucide/chevrons-left';
+    import ChevronsRight from '$icons/lucide/chevrons-right';
+    import { Button } from '../../shadcn/button';
+    import * as Select from '../../shadcn/select';
+    import type { Table } from '@tanstack/table-core';
+    import type { ServerSideConfig } from './types';
+
+    interface Props {
+        table: Table<TData>;
+        serverSide: ServerSideConfig;
+    }
+
+    let { table, serverSide }: Props = $props();
+
+    // For cursor-based pagination, we can't jump to arbitrary pages
+    const isCursorBased = $derived(serverSide?.paginationMode === 'cursor');
+</script>
+
+<div class="flex items-center justify-between px-2">
+    <div class="text-muted-foreground flex-1 text-sm">
+        {#if serverSide?.tableState?.totalRecords !== undefined}
+            {table.getFilteredSelectedRowModel().rows.length} of
+            {serverSide.tableState.totalRecords} total row(s) selected.
+        {:else}
+            {table.getFilteredSelectedRowModel().rows.length} of
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+        {/if}
+    </div>
+    <div class="flex items-center space-x-6 lg:space-x-8">
+        <div class="flex items-center space-x-2">
+            <p class="text-sm font-medium">Rows per page</p>
+            <Select.Root
+                allowDeselect={false}
+                type="single"
+                value={`${table.getState().pagination.pageSize}`}
+                onValueChange={(value) => {
+                    table.setPageSize(Number(value));
+                }}
+            >
+                <Select.Trigger class="h-8 w-[70px]">
+                    {String(table.getState().pagination.pageSize)}
+                </Select.Trigger>
+                <Select.Content side="top">
+                    {#each [10, 20, 50, 100, 500, 1000] as pageSize (pageSize)}
+                        <Select.Item value={`${pageSize}`}>
+                            {pageSize}
+                        </Select.Item>
+                    {/each}
+                </Select.Content>
+            </Select.Root>
+        </div>
+        <div class="flex w-[100px] items-center justify-center text-sm font-medium">
+            {#if table.getPageCount() > 0}
+                Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+            {:else}
+                Page {table.getState().pagination.pageIndex + 1}
+            {/if}
+        </div>
+        <div class="flex items-center space-x-2">
+            <Button variant="outline" class="hidden size-8 p-0 lg:flex" onclick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage() || isCursorBased}>
+                <span class="sr-only">Go to first page</span>
+                <ChevronsLeft />
+            </Button>
+            <Button variant="outline" class="size-8 p-0" onclick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+                <span class="sr-only">Go to previous page</span>
+                <ChevronLeft />
+            </Button>
+            <Button variant="outline" class="size-8 p-0" onclick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+                <span class="sr-only">Go to next page</span>
+                <ChevronRight />
+            </Button>
+            <Button
+                variant="outline"
+                class="hidden size-8 p-0 lg:flex"
+                onclick={() => {
+                    const pageCount = table.getPageCount();
+                    if (pageCount > 0) {
+                        table.setPageIndex(pageCount - 1);
+                    }
+                }}
+                disabled={!table.getCanNextPage() || table.getPageCount() <= 0 || isCursorBased}
+            >
+                <span class="sr-only">Go to last page</span>
+                <ChevronsRight />
+            </Button>
+        </div>
+    </div>
+</div>

package/src/pika/pika-table/pika-table-row-actions.svelte

@@ -0,0 +1,58 @@
+<script lang="ts" module>
+    type TData = unknown;
+</script>
+
+<script lang="ts" generics="TData">
+    import type { AppState } from '$client/app/app.state.svelte';
+    import Ellipsis from '$icons/lucide/ellipsis';
+    import Button from '../../shadcn/button/button.svelte';
+    import * as DropdownMenu from '../../shadcn/dropdown-menu';
+    import type { Row } from '@tanstack/table-core';
+    import { getContext } from 'svelte';
+    import type { RowActionMenuItem, RowActionMenuItemSubMenu, RowActionsProps } from './types';
+
+    let { row, actionProps }: { row: Row<TData>; actionProps: RowActionsProps<TData> } = $props();
+    const appState = getContext<AppState>('appState');
+</script>
+
+<DropdownMenu.Root>
+    <DropdownMenu.Trigger>
+        {#snippet child({ props })}
+            <Button {...props} variant="ghost" class="data-[state=open]:bg-muted flex h-8 w-8 p-0">
+                <Ellipsis />
+                <span class="sr-only">Open Menu</span>
+            </Button>
+        {/snippet}
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content class="w-[{actionProps.menuWidth ? actionProps.menuWidth : '160px'}]" align="end">
+        {@render menuItems(actionProps.menuItems)}
+    </DropdownMenu.Content>
+</DropdownMenu.Root>
+
+{#snippet subMenu(props: RowActionMenuItemSubMenu<TData>)}
+    <DropdownMenu.Sub>
+        <DropdownMenu.SubTrigger>{props.label}</DropdownMenu.SubTrigger>
+        <DropdownMenu.SubContent>
+            {@render menuItems(props.menuItems)}
+        </DropdownMenu.SubContent>
+    </DropdownMenu.Sub>
+{/snippet}
+
+{#snippet menuItems(items: RowActionMenuItem<TData>[])}
+    {#each items as item}
+        {#if item === 'Separator'}
+            <DropdownMenu.Separator />
+        {:else if 'menuItems' in item}
+            {@render subMenu(item)}
+        {:else}
+            <DropdownMenu.Item onclick={() => item.onclick?.(row, appState)}>
+                <div class="flex items-center gap-2">
+                    {#if item.icon}
+                        <item.icon />
+                    {/if}
+                    {item.label}
+                </div>
+            </DropdownMenu.Item>
+        {/if}
+    {/each}
+{/snippet}

package/src/pika/pika-table/pika-table-toolbar.svelte

@@ -0,0 +1,88 @@
+<!--TODO Make this a generic component inside of pika-table-->
+<script lang="ts" module>
+    type TData = unknown;
+</script>
+
+<script lang="ts" generics="TData">
+    import X from '$icons/lucide/x';
+    import { PikaTableFacetedFilter, PikaTableViewOptions } from '../../pika/pika-table';
+    import Button from '../../shadcn/button/button.svelte';
+    import { Input } from '../../shadcn/input/index.js';
+    import type { Table } from '@tanstack/table-core';
+    import type { Snippet } from 'svelte';
+    import type { FacetedFilterPropsWithColumn, FacetedFilters, FacetedFiltersWithColumn, GlobalFilterProps } from './types';
+
+    interface Props {
+        table: Table<TData>;
+        globalFilterProps?: GlobalFilterProps;
+        facetedFilters?: FacetedFilters;
+        // If you pass in toolbar content then global filter and faceted filters will be ignored
+        toolbarContent?: Snippet;
+
+        // Appears beneath the toolbar and above the table
+        beneathToolbarContent?: Snippet;
+    }
+
+    let { table, globalFilterProps, facetedFilters = [], toolbarContent, beneathToolbarContent }: Props = $props();
+
+    const isFiltered = $derived(table.getState().columnFilters.length > 0 || table.getState().globalFilter);
+
+    const facetedFilterCols = $derived(
+        facetedFilters.reduce((acc, filter) => {
+            const col = table.getColumn(filter.columnId);
+            if (col) {
+                const propsWithColumn: FacetedFilterPropsWithColumn<TData> = {
+                    ...filter,
+                    column: col
+                };
+                acc.push(propsWithColumn);
+            }
+            return acc;
+        }, [] as FacetedFiltersWithColumn<TData>)
+    );
+</script>
+
+<div class="flex items-start justify-between">
+    {#if toolbarContent}
+        {@render toolbarContent()}
+    {:else}
+        <div class="flex flex-1 items-center space-x-2">
+            {#if globalFilterProps?.showGlobalFilter}
+                <Input
+                    placeholder={globalFilterProps?.globalFilterPlaceholder ?? 'Filter table...'}
+                    value={globalFilterProps?.globalFilterValue}
+                    oninput={(e) => {
+                        globalFilterProps.globalFilterValue = e.currentTarget.value;
+                    }}
+                    onchange={(e) => {
+                        table.setGlobalFilter(e.currentTarget.value);
+                    }}
+                    class="h-8 w-[150px] lg:w-[250px]"
+                />
+            {/if}
+
+            {#each facetedFilterCols as col}
+                <PikaTableFacetedFilter column={col.column} title={col.title} options={col.options} />
+            {/each}
+
+            {#if isFiltered}
+                <Button
+                    variant="ghost"
+                    onclick={() => {
+                        table.resetColumnFilters(true);
+                        table.resetGlobalFilter(true);
+                    }}
+                    class="h-8 px-2 lg:px-3"
+                >
+                    Reset
+                    <X />
+                </Button>
+            {/if}
+        </div>
+    {/if}
+
+    <PikaTableViewOptions {table} />
+</div>
+{#if beneathToolbarContent}
+    {@render beneathToolbarContent()}
+{/if}

package/src/pika/pika-table/pika-table-view-options.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+    type TData = unknown;
+</script>
+
+<script lang="ts" generics="TData">
+    import Settings2 from '$icons/lucide/settings-2';
+    import { buttonVariants } from '../../shadcn/button';
+    import * as DropdownMenu from '../../shadcn/dropdown-menu';
+    import type { Table } from '@tanstack/table-core';
+
+    let { table }: { table: Table<TData> } = $props();
+</script>
+
+<DropdownMenu.Root>
+    <DropdownMenu.Trigger
+        class={buttonVariants({
+            variant: 'outline',
+            size: 'sm',
+            class: 'ml-auto hidden h-8 w-8 lg:flex '
+        })}
+    >
+        <Settings2 />
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content>
+        <DropdownMenu.Group>
+            <DropdownMenu.GroupHeading>Toggle columns</DropdownMenu.GroupHeading>
+            <DropdownMenu.Separator />
+            {#each table.getAllColumns().filter((col) => typeof col.accessorFn !== 'undefined' && col.getCanHide()) as column (column)}
+                <DropdownMenu.CheckboxItem bind:checked={() => column.getIsVisible(), (v) => column.toggleVisibility(!!v)} class="capitalize">
+                    {column.id}
+                </DropdownMenu.CheckboxItem>
+            {/each}
+        </DropdownMenu.Group>
+    </DropdownMenu.Content>
+</DropdownMenu.Root>