nikdoof/pocket-id
1
0
Fork 0
mirror of https://github.com/nikdoof/pocket-id.git synced 2025-12-14 15:22:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add list empty indicator

Browse Source
This commit is contained in:
Elias Schneider
2024-11-01 23:52:01 +01:00
parent 376d747616
commit becfc0004a
2 changed files with 123 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/lib/components/advanced-table.svelte
View File

@@ -4,6 +4,7 @@
import * as Pagination from '$lib/components/ui/pagination'; import * as Pagination from '$lib/components/ui/pagination';
import * as Select from '$lib/components/ui/select'; import * as Select from '$lib/components/ui/select';
import * as Table from '$lib/components/ui/table/index.js'; import * as Table from '$lib/components/ui/table/index.js';
import Empty from '$lib/icons/empty.svelte';
import type { Paginated } from '$lib/types/pagination.type'; import type { Paginated } from '$lib/types/pagination.type';
import { debounced } from '$lib/utils/debounce-util'; import { debounced } from '$lib/utils/debounce-util';
import type { Snippet } from 'svelte'; import type { Snippet } from 'svelte';
@@ -66,6 +67,12 @@
} }
</script> </script>
{#if items.data.length === 0}
<div class="my-5 flex flex-col items-center">
<Empty class="text-muted-foreground h-20" />
<p class="text-muted-foreground mt-3 text-sm">No items found</p>
</div>
{:else}
<div class="w-full"> <div class="w-full">
{#if !withoutSearch} {#if !withoutSearch}
<Input <Input
@@ -75,6 +82,7 @@
oninput={(e) => onSearch((e.target as HTMLInputElement).value)} oninput={(e) => onSearch((e.target as HTMLInputElement).value)}
/> />
{/if} {/if}
<Table.Root> <Table.Root>
<Table.Header> <Table.Header>
<Table.Row> <Table.Row>
@@ -108,6 +116,7 @@
{/each} {/each}
</Table.Body> </Table.Body>
</Table.Root> </Table.Root>
<div class="mt-5 flex items-center justify-between space-x-2"> <div class="mt-5 flex items-center justify-between space-x-2">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<p class="text-sm font-medium">Items per page</p> <p class="text-sm font-medium">Items per page</p>
@@ -156,3 +165,4 @@
</Pagination.Root> </Pagination.Root>
</div> </div>
</div> </div>
{/if}

24
frontend/src/lib/icons/empty.svelte Normal file
View File

@@ -0,0 +1,24 @@
<script lang="ts">
let {
class: className
}: {
class?: string;
} = $props();
</script>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 336.19673868301203 129.38671875"
class={className}
>
<g stroke-linecap="round" transform="translate(10 10) rotate(0 158.09836934150601 54.693359375)">
<path
d="M27.35 0 C121.36 -0.62, 208.79 0.52, 288.85 0 M288.85 0 C305.5 3.32, 316.8 6.14, 316.2 27.35 M316.2 27.35 C315.58 42.15, 314.92 54.54, 316.2 82.04 M316.2 82.04 C313.79 100.68, 304.9 110.1, 288.85 109.39 M288.85 109.39 C192.86 108.68, 93.17 110.07, 27.35 109.39 M27.35 109.39 C13.09 109.46, -1.61 102.22, 0 82.04 M0 82.04 C-0.35 60.8, -1.11 41.01, 0 27.35 M0 27.35 C1.94 9.62, 8.6 1.41, 27.35 0"
stroke="#A1A1AA"
stroke-width="4.5"
fill="none"
stroke-dasharray="8 12"
></path>
</g>
</svg>