Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(examples): add sidebars on tasks example #410

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat(examples): add sidebars on tasks example #410

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
1d3e8bc
fix(lib): rename className attr to class
fernandolguevara Nov 7, 2023
0b4843f
fix(lib): make table full height
fernandolguevara Nov 7, 2023
2a4dc44
feat(example): add icons for sort column header
fernandolguevara Nov 7, 2023
e5375d6
feat(example): add sidebars on tasks examples
fernandolguevara Nov 7, 2023
336f8d0
fix(examples/tasks): add click handler
fernandolguevara Nov 7, 2023
79d1053
fix(examples/tasks): add hack to generate dynamic css classes
fernandolguevara Nov 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/example/button-icon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
</script>

<Button variant="outline" size="icon">
<ChevronRight className="h-4 w-4" />
<ChevronRight class="h-4 w-4" />
</Button>
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/default/ui/table/table.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
export { className as class };
</script>

<div class="w-full overflow-auto">
<div class="w-full h-full overflow-auto">
<table
class={cn("w-full caption-bottom text-sm", className)}
{...$$restProps}
Expand Down
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/new-york/example/button-icon.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
</script>

<Button variant="outline" size="icon">
<ChevronRight className="h-4 w-4" />
<ChevronRight class="h-4 w-4" />
</Button>
2 changes: 1 addition & 1 deletion apps/www/src/lib/registry/new-york/ui/table/table.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
export { className as class };
</script>

<div class="w-full overflow-auto">
<div class="w-full h-full overflow-auto">
<table
class={cn("w-full caption-bottom text-sm", className)}
{...$$restProps}
Expand Down
14 changes: 8 additions & 6 deletions apps/www/src/routes/examples/tasks/(components)/data-table-column-header.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,14 @@
</Button>
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item on:click={handleAscSort}
>Asc</DropdownMenu.Item
>
<DropdownMenu.Item on:click={handleDescSort}
>Desc</DropdownMenu.Item
>
<DropdownMenu.Item on:click={handleAscSort}>
<ArrowUp class="mr-2 h-4 w-4" />
Asc
</DropdownMenu.Item>
<DropdownMenu.Item on:click={handleDescSort}>
<ArrowDown class="mr-2 h-4 w-4" />
Desc
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
Expand Down
164 changes: 113 additions & 51 deletions apps/www/src/routes/examples/tasks/(components)/data-table-faceted-filter.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
export let filterValues: string[] = [];
export let title: string;
export let options = [] as typeof statuses;

export let view: "pill" | "list" = "pill";
let open = false;

const handleSelect = (currentValue: string) => {
Expand All @@ -29,48 +29,9 @@
};
</script>

<Popover.Root bind:open positioning={{ placement: "bottom-start" }}>
<Popover.Trigger asChild let:builder>
<Button
builders={[builder]}
variant="outline"
size="sm"
class="h-8 border-dashed"
>
<PlusCircled class="mr-2 h-4 w-4" />
{title}

{#if filterValues.length > 0}
<Separator orientation="vertical" class="mx-2 h-4" />
<Badge
variant="secondary"
class="rounded-sm px-1 font-normal lg:hidden"
>
{filterValues.length}
</Badge>
<div class="hidden space-x-1 lg:flex">
{#if filterValues.length > 2}
<Badge
variant="secondary"
class="rounded-sm px-1 font-normal"
>
{filterValues.length} Selected
</Badge>
{:else}
{#each filterValues as option}
<Badge
variant="secondary"
class="rounded-sm px-1 font-normal"
>
{option}
</Badge>
{/each}
{/if}
</div>
{/if}
</Button>
</Popover.Trigger>
<Popover.Content class="w-[200px] p-0">
{#if view === "list"}
<div>
<span class="text-xs font-medium">{title}</span>
<Command.Root>
<Command.Input placeholder={title} />
<Command.List>
Expand All @@ -91,26 +52,127 @@
: "opacity-50 [&_svg]:invisible"
)}
>
<Check className={cn("h-4 w-4")} />
<Check class={cn("h-4 w-4")} />
</div>
<span>
{option.label}
</span>
</Command.Item>
{/each}
</Command.Group>

<Command.Separator />
<Command.Item
class="justify-center text-center"
onSelect={() => {
filterValues =
filterValues.length > 0
? []
: options.map(({ value }) => value);
}}
>
{#if filterValues.length > 0}
Clear filters
{:else}
Select all
{/if}
</Command.Item>
</Command.List>
</Command.Root>
</div>
{:else}
<Popover.Root bind:open positioning={{ placement: "bottom-start" }}>
<Popover.Trigger asChild let:builder>
<Button
title={filterValues.length
? `${title}: ${filterValues.join(", ")} selected.`
: `${title}: not selected.`}
builders={[builder]}
variant="outline"
size="sm"
class="h-8 border-dashed"
>
<PlusCircled class="mr-2 h-4 w-4" />
{title}

{#if filterValues.length > 0}
<Separator orientation="vertical" class="mx-2 h-4" />
<Badge
variant="secondary"
class="rounded-sm px-1 font-normal lg:hidden"
>
{filterValues.length}
</Badge>
<div class="hidden space-x-1 lg:flex">
{#if filterValues.length > 2}
<Badge
variant="secondary"
class="rounded-sm px-1 font-normal"
>
{filterValues.length} Selected
</Badge>
{:else}
{#each filterValues as option}
<Badge
variant="secondary"
class="rounded-sm px-1 font-normal"
>
{option}
</Badge>
{/each}
{/if}
</div>
{/if}
</Button>
</Popover.Trigger>
<Popover.Content class="w-[200px] p-0">
<Command.Root>
<Command.Input placeholder={title} />
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group>
{#each options as option}
<Command.Item
value={option.value}
onSelect={(currentValue) => {
handleSelect(currentValue);
}}
>
<div
class={cn(
"mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
filterValues.includes(option.value)
? "bg-primary text-primary-foreground"
: "opacity-50 [&_svg]:invisible"
)}
>
<Check class={cn("h-4 w-4")} />
</div>
<span>
{option.label}
</span>
</Command.Item>
{/each}
</Command.Group>

<Command.Separator />
<Command.Item
class="justify-center text-center"
onSelect={() => {
filterValues = [];
filterValues =
filterValues.length > 0
? []
: options.map(({ value }) => value);
}}
>
Clear filters
{#if filterValues.length > 0}
Clear filters
{:else}
Select all
{/if}
</Command.Item>
{/if}
</Command.List>
</Command.Root>
</Popover.Content>
</Popover.Root>
</Command.List>
</Command.Root>
</Popover.Content>
</Popover.Root>
{/if}
69 changes: 69 additions & 0 deletions apps/www/src/routes/examples/tasks/(components)/data-table-filter-left-sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<script lang="ts">
import Input from "@/registry/new-york/ui/input/input.svelte";
import type { TableViewModel } from "svelte-headless-table/lib/createViewModel";
import type { AnyPlugins } from "svelte-headless-table/lib/types/TablePlugin";
import type { Writable } from "svelte/store";
import { DataTableFacetedFilter } from ".";
import { priorities, statuses } from "../(data)/data";
import type { Task } from "../(data)/schemas";

export let tableModel: TableViewModel<Task, AnyPlugins>;

const { pluginStates } = tableModel;
const {
filterValue
}: {
filterValue: Writable<string>;
} = pluginStates.filter;

const {
filterValues
}: {
filterValues: Writable<{
status: string[];
priority: string[];
}>;
} = pluginStates.colFilter;
</script>

<aside class="col-span-2 border-r border-b p-2">
<div class="sticky top-12">
<div class="flex flex-col space-y-2">
<span class="text-sm font-medium">Filters</span>
<Input
placeholder="Filter tasks..."
class="h-8 w-full"
type="text"
bind:value={$filterValue}
/>

<DataTableFacetedFilter
bind:filterValues={$filterValues.status}
title="Status"
view="list"
options={statuses}
/>

<DataTableFacetedFilter
bind:filterValues={$filterValues.priority}
title="Priority"
view="list"
options={priorities}
/>

<!-- {#if showReset}
<Button
on:click={() => {
$filterValues.status = [];
$filterValues.priority = [];
}}
variant="ghost"
class="h-8 px-2 lg:px-3"
>
Reset
<Cross2 class="ml-2 h-4 w-4" />
</Button>
{/if} -->
</div>
</div>
</aside>
Loading