Spaces:
Running
Running
Clean up and fix icon
Browse filesThis view is limited to 50 files because it contains too many changes.
See raw diff
- package.json +0 -5
- src-python/src/main.py +7 -0
- src/lib/components/ui/aspect-ratio/aspect-ratio.svelte +0 -7
- src/lib/components/ui/aspect-ratio/index.ts +0 -3
- src/lib/components/ui/avatar/avatar-fallback.svelte +0 -17
- src/lib/components/ui/avatar/avatar-image.svelte +0 -17
- src/lib/components/ui/avatar/avatar.svelte +0 -17
- src/lib/components/ui/avatar/index.ts +0 -13
- src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte +0 -23
- src/lib/components/ui/breadcrumb/breadcrumb-item.svelte +0 -20
- src/lib/components/ui/breadcrumb/breadcrumb-link.svelte +0 -31
- src/lib/components/ui/breadcrumb/breadcrumb-list.svelte +0 -23
- src/lib/components/ui/breadcrumb/breadcrumb-page.svelte +0 -23
- src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte +0 -27
- src/lib/components/ui/breadcrumb/breadcrumb.svelte +0 -21
- src/lib/components/ui/breadcrumb/index.ts +0 -25
- src/lib/components/ui/carousel/carousel-content.svelte +0 -43
- src/lib/components/ui/carousel/carousel-item.svelte +0 -30
- src/lib/components/ui/carousel/carousel-next.svelte +0 -38
- src/lib/components/ui/carousel/carousel-previous.svelte +0 -38
- src/lib/components/ui/carousel/carousel.svelte +0 -100
- src/lib/components/ui/carousel/context.ts +0 -56
- src/lib/components/ui/carousel/index.ts +0 -19
- src/lib/components/ui/chart/chart-container.svelte +0 -83
- src/lib/components/ui/chart/chart-style.svelte +0 -36
- src/lib/components/ui/chart/chart-tooltip.svelte +0 -155
- src/lib/components/ui/chart/chart-utils.ts +0 -66
- src/lib/components/ui/chart/index.ts +0 -6
- src/lib/components/ui/data-table/data-table.svelte.ts +0 -141
- src/lib/components/ui/data-table/flex-render.svelte +0 -36
- src/lib/components/ui/data-table/index.ts +0 -3
- src/lib/components/ui/data-table/render-helpers.ts +0 -111
- src/lib/components/ui/drawer/drawer-close.svelte +0 -7
- src/lib/components/ui/drawer/drawer-content.svelte +0 -37
- src/lib/components/ui/drawer/drawer-description.svelte +0 -17
- src/lib/components/ui/drawer/drawer-footer.svelte +0 -20
- src/lib/components/ui/drawer/drawer-header.svelte +0 -20
- src/lib/components/ui/drawer/drawer-nested.svelte +0 -12
- src/lib/components/ui/drawer/drawer-overlay.svelte +0 -20
- src/lib/components/ui/drawer/drawer-title.svelte +0 -17
- src/lib/components/ui/drawer/drawer-trigger.svelte +0 -7
- src/lib/components/ui/drawer/drawer.svelte +0 -12
- src/lib/components/ui/drawer/index.ts +0 -41
- src/lib/components/ui/input-otp/index.ts +0 -15
- src/lib/components/ui/input-otp/input-otp-group.svelte +0 -20
- src/lib/components/ui/input-otp/input-otp-separator.svelte +0 -19
- src/lib/components/ui/input-otp/input-otp-slot.svelte +0 -31
- src/lib/components/ui/input-otp/input-otp.svelte +0 -22
- src/lib/components/ui/pagination/index.ts +0 -25
- src/lib/components/ui/pagination/pagination-content.svelte +0 -20
package.json
CHANGED
@@ -25,16 +25,13 @@
|
|
25 |
"@sveltejs/kit": "^2.16.0",
|
26 |
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
27 |
"@tailwindcss/vite": "^4.0.0",
|
28 |
-
"@tanstack/table-core": "^8.20.5",
|
29 |
"bits-ui": "^2.4.1",
|
30 |
-
"embla-carousel-svelte": "^8.6.0",
|
31 |
"eslint": "^9.18.0",
|
32 |
"eslint-config-prettier": "^10.0.1",
|
33 |
"eslint-plugin-svelte": "^3.0.0",
|
34 |
"globals": "^16.0.0",
|
35 |
"layerchart": "2.0.0-next.10",
|
36 |
"mode-watcher": "^1.0.6",
|
37 |
-
"paneforge": "^1.0.0-next.5",
|
38 |
"prettier": "^3.4.2",
|
39 |
"prettier-plugin-svelte": "^3.3.3",
|
40 |
"prettier-plugin-tailwindcss": "^0.6.11",
|
@@ -46,7 +43,6 @@
|
|
46 |
"tw-animate-css": "^1.3.3",
|
47 |
"typescript": "^5.0.0",
|
48 |
"typescript-eslint": "^8.20.0",
|
49 |
-
"vaul-svelte": "^1.0.0-next.7",
|
50 |
"vite": "^6.2.6"
|
51 |
},
|
52 |
"dependencies": {
|
@@ -57,7 +53,6 @@
|
|
57 |
"feetech.js": "file:packages/feetech.js",
|
58 |
"tailwind-merge": "^3.3.0",
|
59 |
"three": "^0.177.0",
|
60 |
-
"threlte-postprocessing": "^0.0.9",
|
61 |
"zod": "^3.25.42"
|
62 |
}
|
63 |
}
|
|
|
25 |
"@sveltejs/kit": "^2.16.0",
|
26 |
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
27 |
"@tailwindcss/vite": "^4.0.0",
|
|
|
28 |
"bits-ui": "^2.4.1",
|
|
|
29 |
"eslint": "^9.18.0",
|
30 |
"eslint-config-prettier": "^10.0.1",
|
31 |
"eslint-plugin-svelte": "^3.0.0",
|
32 |
"globals": "^16.0.0",
|
33 |
"layerchart": "2.0.0-next.10",
|
34 |
"mode-watcher": "^1.0.6",
|
|
|
35 |
"prettier": "^3.4.2",
|
36 |
"prettier-plugin-svelte": "^3.3.3",
|
37 |
"prettier-plugin-tailwindcss": "^0.6.11",
|
|
|
43 |
"tw-animate-css": "^1.3.3",
|
44 |
"typescript": "^5.0.0",
|
45 |
"typescript-eslint": "^8.20.0",
|
|
|
46 |
"vite": "^6.2.6"
|
47 |
},
|
48 |
"dependencies": {
|
|
|
53 |
"feetech.js": "file:packages/feetech.js",
|
54 |
"tailwind-merge": "^3.3.0",
|
55 |
"three": "^0.177.0",
|
|
|
56 |
"zod": "^3.25.42"
|
57 |
}
|
58 |
}
|
src-python/src/main.py
CHANGED
@@ -120,6 +120,13 @@ if robot_assets_dir:
|
|
120 |
return FileResponse(favicon_path)
|
121 |
raise HTTPException(status_code=404, detail="Favicon not found")
|
122 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
123 |
logger.info(f"🤖 Serving robot assets from: {robot_assets_dir}")
|
124 |
else:
|
125 |
logger.warning(
|
|
|
120 |
return FileResponse(favicon_path)
|
121 |
raise HTTPException(status_code=404, detail="Favicon not found")
|
122 |
|
123 |
+
@app.get("/favicon_1024.png")
|
124 |
+
async def get_favicon_1024():
|
125 |
+
favicon_path = os.path.join(robot_assets_dir, "favicon_1024.png")
|
126 |
+
if os.path.exists(favicon_path):
|
127 |
+
return FileResponse(favicon_path)
|
128 |
+
raise HTTPException(status_code=404, detail="Favicon not found")
|
129 |
+
|
130 |
logger.info(f"🤖 Serving robot assets from: {robot_assets_dir}")
|
131 |
else:
|
132 |
logger.warning(
|
src/lib/components/ui/aspect-ratio/aspect-ratio.svelte
DELETED
@@ -1,7 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
|
3 |
-
|
4 |
-
let { ref = $bindable(null), ...restProps }: AspectRatioPrimitive.RootProps = $props();
|
5 |
-
</script>
|
6 |
-
|
7 |
-
<AspectRatioPrimitive.Root bind:ref data-slot="aspect-ratio" {...restProps} />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/aspect-ratio/index.ts
DELETED
@@ -1,3 +0,0 @@
|
|
1 |
-
import Root from "./aspect-ratio.svelte";
|
2 |
-
|
3 |
-
export { Root, Root as AspectRatio };
|
|
|
|
|
|
|
|
src/lib/components/ui/avatar/avatar-fallback.svelte
DELETED
@@ -1,17 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Avatar as AvatarPrimitive } from "bits-ui";
|
3 |
-
import { cn } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
...restProps
|
9 |
-
}: AvatarPrimitive.FallbackProps = $props();
|
10 |
-
</script>
|
11 |
-
|
12 |
-
<AvatarPrimitive.Fallback
|
13 |
-
bind:ref
|
14 |
-
data-slot="avatar-fallback"
|
15 |
-
class={cn("bg-muted flex size-full items-center justify-center rounded-full", className)}
|
16 |
-
{...restProps}
|
17 |
-
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/avatar/avatar-image.svelte
DELETED
@@ -1,17 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Avatar as AvatarPrimitive } from "bits-ui";
|
3 |
-
import { cn } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
...restProps
|
9 |
-
}: AvatarPrimitive.ImageProps = $props();
|
10 |
-
</script>
|
11 |
-
|
12 |
-
<AvatarPrimitive.Image
|
13 |
-
bind:ref
|
14 |
-
data-slot="avatar-image"
|
15 |
-
class={cn("aspect-square size-full", className)}
|
16 |
-
{...restProps}
|
17 |
-
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/avatar/avatar.svelte
DELETED
@@ -1,17 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Avatar as AvatarPrimitive } from "bits-ui";
|
3 |
-
import { cn } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
...restProps
|
9 |
-
}: AvatarPrimitive.RootProps = $props();
|
10 |
-
</script>
|
11 |
-
|
12 |
-
<AvatarPrimitive.Root
|
13 |
-
bind:ref
|
14 |
-
data-slot="avatar"
|
15 |
-
class={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
|
16 |
-
{...restProps}
|
17 |
-
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/avatar/index.ts
DELETED
@@ -1,13 +0,0 @@
|
|
1 |
-
import Root from "./avatar.svelte";
|
2 |
-
import Image from "./avatar-image.svelte";
|
3 |
-
import Fallback from "./avatar-fallback.svelte";
|
4 |
-
|
5 |
-
export {
|
6 |
-
Root,
|
7 |
-
Image,
|
8 |
-
Fallback,
|
9 |
-
//
|
10 |
-
Root as Avatar,
|
11 |
-
Image as AvatarImage,
|
12 |
-
Fallback as AvatarFallback
|
13 |
-
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/breadcrumb/breadcrumb-ellipsis.svelte
DELETED
@@ -1,23 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import EllipsisIcon from "@lucide/svelte/icons/ellipsis";
|
3 |
-
import type { HTMLAttributes } from "svelte/elements";
|
4 |
-
import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
|
5 |
-
|
6 |
-
let {
|
7 |
-
ref = $bindable(null),
|
8 |
-
class: className,
|
9 |
-
...restProps
|
10 |
-
}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<span
|
14 |
-
bind:this={ref}
|
15 |
-
data-slot="breadcrumb-ellipsis"
|
16 |
-
role="presentation"
|
17 |
-
aria-hidden="true"
|
18 |
-
class={cn("flex size-9 items-center justify-center", className)}
|
19 |
-
{...restProps}
|
20 |
-
>
|
21 |
-
<EllipsisIcon class="size-4" />
|
22 |
-
<span class="sr-only">More</span>
|
23 |
-
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/breadcrumb/breadcrumb-item.svelte
DELETED
@@ -1,20 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import type { HTMLLiAttributes } from "svelte/elements";
|
3 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
children,
|
9 |
-
...restProps
|
10 |
-
}: WithElementRef<HTMLLiAttributes> = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<li
|
14 |
-
bind:this={ref}
|
15 |
-
data-slot="breadcrumb-item"
|
16 |
-
class={cn("inline-flex items-center gap-1.5", className)}
|
17 |
-
{...restProps}
|
18 |
-
>
|
19 |
-
{@render children?.()}
|
20 |
-
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/breadcrumb/breadcrumb-link.svelte
DELETED
@@ -1,31 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import type { HTMLAnchorAttributes } from "svelte/elements";
|
3 |
-
import type { Snippet } from "svelte";
|
4 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
5 |
-
|
6 |
-
let {
|
7 |
-
ref = $bindable(null),
|
8 |
-
class: className,
|
9 |
-
href = undefined,
|
10 |
-
child,
|
11 |
-
children,
|
12 |
-
...restProps
|
13 |
-
}: WithElementRef<HTMLAnchorAttributes> & {
|
14 |
-
child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
|
15 |
-
} = $props();
|
16 |
-
|
17 |
-
const attrs = $derived({
|
18 |
-
"data-slot": "breadcrumb-link",
|
19 |
-
class: cn("hover:text-foreground transition-colors", className),
|
20 |
-
href,
|
21 |
-
...restProps
|
22 |
-
});
|
23 |
-
</script>
|
24 |
-
|
25 |
-
{#if child}
|
26 |
-
{@render child({ props: attrs })}
|
27 |
-
{:else}
|
28 |
-
<a bind:this={ref} {...attrs}>
|
29 |
-
{@render children?.()}
|
30 |
-
</a>
|
31 |
-
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/breadcrumb/breadcrumb-list.svelte
DELETED
@@ -1,23 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import type { HTMLOlAttributes } from "svelte/elements";
|
3 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
children,
|
9 |
-
...restProps
|
10 |
-
}: WithElementRef<HTMLOlAttributes> = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<ol
|
14 |
-
bind:this={ref}
|
15 |
-
data-slot="breadcrumb-list"
|
16 |
-
class={cn(
|
17 |
-
"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
|
18 |
-
className
|
19 |
-
)}
|
20 |
-
{...restProps}
|
21 |
-
>
|
22 |
-
{@render children?.()}
|
23 |
-
</ol>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/breadcrumb/breadcrumb-page.svelte
DELETED
@@ -1,23 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import type { HTMLAttributes } from "svelte/elements";
|
3 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
children,
|
9 |
-
...restProps
|
10 |
-
}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<span
|
14 |
-
bind:this={ref}
|
15 |
-
data-slot="breadcrumb-page"
|
16 |
-
role="link"
|
17 |
-
aria-disabled="true"
|
18 |
-
aria-current="page"
|
19 |
-
class={cn("text-foreground font-normal", className)}
|
20 |
-
{...restProps}
|
21 |
-
>
|
22 |
-
{@render children?.()}
|
23 |
-
</span>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/breadcrumb/breadcrumb-separator.svelte
DELETED
@@ -1,27 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
|
3 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
4 |
-
import type { HTMLLiAttributes } from "svelte/elements";
|
5 |
-
|
6 |
-
let {
|
7 |
-
ref = $bindable(null),
|
8 |
-
class: className,
|
9 |
-
children,
|
10 |
-
...restProps
|
11 |
-
}: WithElementRef<HTMLLiAttributes> = $props();
|
12 |
-
</script>
|
13 |
-
|
14 |
-
<li
|
15 |
-
bind:this={ref}
|
16 |
-
data-slot="breadcrumb-separator"
|
17 |
-
role="presentation"
|
18 |
-
aria-hidden="true"
|
19 |
-
class={cn("[&>svg]:size-3.5", className)}
|
20 |
-
{...restProps}
|
21 |
-
>
|
22 |
-
{#if children}
|
23 |
-
{@render children?.()}
|
24 |
-
{:else}
|
25 |
-
<ChevronRightIcon />
|
26 |
-
{/if}
|
27 |
-
</li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/breadcrumb/breadcrumb.svelte
DELETED
@@ -1,21 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import type { WithElementRef } from "$lib/utils.js";
|
3 |
-
import type { HTMLAttributes } from "svelte/elements";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
children,
|
9 |
-
...restProps
|
10 |
-
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<nav
|
14 |
-
bind:this={ref}
|
15 |
-
data-slot="breadcrumb"
|
16 |
-
class={className}
|
17 |
-
aria-label="breadcrumb"
|
18 |
-
{...restProps}
|
19 |
-
>
|
20 |
-
{@render children?.()}
|
21 |
-
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/breadcrumb/index.ts
DELETED
@@ -1,25 +0,0 @@
|
|
1 |
-
import Root from "./breadcrumb.svelte";
|
2 |
-
import Ellipsis from "./breadcrumb-ellipsis.svelte";
|
3 |
-
import Item from "./breadcrumb-item.svelte";
|
4 |
-
import Separator from "./breadcrumb-separator.svelte";
|
5 |
-
import Link from "./breadcrumb-link.svelte";
|
6 |
-
import List from "./breadcrumb-list.svelte";
|
7 |
-
import Page from "./breadcrumb-page.svelte";
|
8 |
-
|
9 |
-
export {
|
10 |
-
Root,
|
11 |
-
Ellipsis,
|
12 |
-
Item,
|
13 |
-
Separator,
|
14 |
-
Link,
|
15 |
-
List,
|
16 |
-
Page,
|
17 |
-
//
|
18 |
-
Root as Breadcrumb,
|
19 |
-
Ellipsis as BreadcrumbEllipsis,
|
20 |
-
Item as BreadcrumbItem,
|
21 |
-
Separator as BreadcrumbSeparator,
|
22 |
-
Link as BreadcrumbLink,
|
23 |
-
List as BreadcrumbList,
|
24 |
-
Page as BreadcrumbPage
|
25 |
-
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/carousel/carousel-content.svelte
DELETED
@@ -1,43 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import emblaCarouselSvelte from "embla-carousel-svelte";
|
3 |
-
import type { HTMLAttributes } from "svelte/elements";
|
4 |
-
import { getEmblaContext } from "./context.js";
|
5 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
6 |
-
|
7 |
-
let {
|
8 |
-
ref = $bindable(null),
|
9 |
-
class: className,
|
10 |
-
children,
|
11 |
-
...restProps
|
12 |
-
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
13 |
-
|
14 |
-
const emblaCtx = getEmblaContext("<Carousel.Content/>");
|
15 |
-
</script>
|
16 |
-
|
17 |
-
<div
|
18 |
-
data-slot="carousel-content"
|
19 |
-
class="overflow-hidden"
|
20 |
-
use:emblaCarouselSvelte={{
|
21 |
-
options: {
|
22 |
-
container: "[data-embla-container]",
|
23 |
-
slides: "[data-embla-slide]",
|
24 |
-
...emblaCtx.options,
|
25 |
-
axis: emblaCtx.orientation === "horizontal" ? "x" : "y"
|
26 |
-
},
|
27 |
-
plugins: emblaCtx.plugins
|
28 |
-
}}
|
29 |
-
onemblaInit={emblaCtx.onInit}
|
30 |
-
>
|
31 |
-
<div
|
32 |
-
bind:this={ref}
|
33 |
-
class={cn(
|
34 |
-
"flex",
|
35 |
-
emblaCtx.orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
36 |
-
className
|
37 |
-
)}
|
38 |
-
data-embla-container=""
|
39 |
-
{...restProps}
|
40 |
-
>
|
41 |
-
{@render children?.()}
|
42 |
-
</div>
|
43 |
-
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/carousel/carousel-item.svelte
DELETED
@@ -1,30 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import type { HTMLAttributes } from "svelte/elements";
|
3 |
-
import { getEmblaContext } from "./context.js";
|
4 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
5 |
-
|
6 |
-
let {
|
7 |
-
ref = $bindable(null),
|
8 |
-
class: className,
|
9 |
-
children,
|
10 |
-
...restProps
|
11 |
-
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
12 |
-
|
13 |
-
const emblaCtx = getEmblaContext("<Carousel.Item/>");
|
14 |
-
</script>
|
15 |
-
|
16 |
-
<div
|
17 |
-
bind:this={ref}
|
18 |
-
data-slot="carousel-item"
|
19 |
-
role="group"
|
20 |
-
aria-roledescription="slide"
|
21 |
-
class={cn(
|
22 |
-
"min-w-0 shrink-0 grow-0 basis-full",
|
23 |
-
emblaCtx.orientation === "horizontal" ? "pl-4" : "pt-4",
|
24 |
-
className
|
25 |
-
)}
|
26 |
-
data-embla-slide=""
|
27 |
-
{...restProps}
|
28 |
-
>
|
29 |
-
{@render children?.()}
|
30 |
-
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/carousel/carousel-next.svelte
DELETED
@@ -1,38 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
|
3 |
-
import type { WithoutChildren } from "bits-ui";
|
4 |
-
import { getEmblaContext } from "./context.js";
|
5 |
-
import { cn } from "$lib/utils.js";
|
6 |
-
import { Button, type Props } from "@/components/ui/button/index.js";
|
7 |
-
|
8 |
-
let {
|
9 |
-
ref = $bindable(null),
|
10 |
-
class: className,
|
11 |
-
variant = "outline",
|
12 |
-
size = "icon",
|
13 |
-
...restProps
|
14 |
-
}: WithoutChildren<Props> = $props();
|
15 |
-
|
16 |
-
const emblaCtx = getEmblaContext("<Carousel.Next/>");
|
17 |
-
</script>
|
18 |
-
|
19 |
-
<Button
|
20 |
-
data-slot="carousel-next"
|
21 |
-
{variant}
|
22 |
-
{size}
|
23 |
-
class={cn(
|
24 |
-
"absolute size-8 rounded-full",
|
25 |
-
emblaCtx.orientation === "horizontal"
|
26 |
-
? "top-1/2 -right-12 -translate-y-1/2"
|
27 |
-
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
28 |
-
className
|
29 |
-
)}
|
30 |
-
disabled={!emblaCtx.canScrollNext}
|
31 |
-
onclick={emblaCtx.scrollNext}
|
32 |
-
onkeydown={emblaCtx.handleKeyDown}
|
33 |
-
bind:ref
|
34 |
-
{...restProps}
|
35 |
-
>
|
36 |
-
<ArrowRightIcon class="size-4" />
|
37 |
-
<span class="sr-only">Next slide</span>
|
38 |
-
</Button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/carousel/carousel-previous.svelte
DELETED
@@ -1,38 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
|
3 |
-
import type { WithoutChildren } from "bits-ui";
|
4 |
-
import { getEmblaContext } from "./context.js";
|
5 |
-
import { cn } from "$lib/utils.js";
|
6 |
-
import { Button, type Props } from "@/components/ui/button/index.js";
|
7 |
-
|
8 |
-
let {
|
9 |
-
ref = $bindable(null),
|
10 |
-
class: className,
|
11 |
-
variant = "outline",
|
12 |
-
size = "icon",
|
13 |
-
...restProps
|
14 |
-
}: WithoutChildren<Props> = $props();
|
15 |
-
|
16 |
-
const emblaCtx = getEmblaContext("<Carousel.Previous/>");
|
17 |
-
</script>
|
18 |
-
|
19 |
-
<Button
|
20 |
-
data-slot="carousel-previous"
|
21 |
-
{variant}
|
22 |
-
{size}
|
23 |
-
class={cn(
|
24 |
-
"absolute size-8 rounded-full",
|
25 |
-
emblaCtx.orientation === "horizontal"
|
26 |
-
? "top-1/2 -left-12 -translate-y-1/2"
|
27 |
-
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
28 |
-
className
|
29 |
-
)}
|
30 |
-
disabled={!emblaCtx.canScrollPrev}
|
31 |
-
onclick={emblaCtx.scrollPrev}
|
32 |
-
onkeydown={emblaCtx.handleKeyDown}
|
33 |
-
{...restProps}
|
34 |
-
bind:ref
|
35 |
-
>
|
36 |
-
<ArrowLeftIcon class="size-4" />
|
37 |
-
<span class="sr-only">Previous slide</span>
|
38 |
-
</Button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/carousel/carousel.svelte
DELETED
@@ -1,100 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import {
|
3 |
-
type CarouselAPI,
|
4 |
-
type CarouselProps,
|
5 |
-
type EmblaContext,
|
6 |
-
setEmblaContext
|
7 |
-
} from "./context.js";
|
8 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
9 |
-
|
10 |
-
let {
|
11 |
-
ref = $bindable(null),
|
12 |
-
opts = {},
|
13 |
-
plugins = [],
|
14 |
-
setApi = () => {},
|
15 |
-
orientation = "horizontal",
|
16 |
-
class: className,
|
17 |
-
children,
|
18 |
-
...restProps
|
19 |
-
}: WithElementRef<CarouselProps> = $props();
|
20 |
-
|
21 |
-
let carouselState = $state<EmblaContext>({
|
22 |
-
api: undefined,
|
23 |
-
scrollPrev,
|
24 |
-
scrollNext,
|
25 |
-
orientation,
|
26 |
-
canScrollNext: false,
|
27 |
-
canScrollPrev: false,
|
28 |
-
handleKeyDown,
|
29 |
-
options: opts,
|
30 |
-
plugins,
|
31 |
-
onInit,
|
32 |
-
scrollSnaps: [],
|
33 |
-
selectedIndex: 0,
|
34 |
-
scrollTo
|
35 |
-
});
|
36 |
-
|
37 |
-
setEmblaContext(carouselState);
|
38 |
-
|
39 |
-
function scrollPrev() {
|
40 |
-
carouselState.api?.scrollPrev();
|
41 |
-
}
|
42 |
-
function scrollNext() {
|
43 |
-
carouselState.api?.scrollNext();
|
44 |
-
}
|
45 |
-
function scrollTo(index: number, jump?: boolean) {
|
46 |
-
carouselState.api?.scrollTo(index, jump);
|
47 |
-
}
|
48 |
-
|
49 |
-
function onSelect(api: CarouselAPI) {
|
50 |
-
if (!api) return;
|
51 |
-
carouselState.canScrollPrev = api.canScrollPrev();
|
52 |
-
carouselState.canScrollNext = api.canScrollNext();
|
53 |
-
carouselState.selectedIndex = api.selectedScrollSnap();
|
54 |
-
}
|
55 |
-
|
56 |
-
$effect(() => {
|
57 |
-
if (carouselState.api) {
|
58 |
-
onSelect(carouselState.api);
|
59 |
-
carouselState.api.on("select", onSelect);
|
60 |
-
carouselState.api.on("reInit", onSelect);
|
61 |
-
}
|
62 |
-
});
|
63 |
-
|
64 |
-
function handleKeyDown(e: KeyboardEvent) {
|
65 |
-
if (e.key === "ArrowLeft") {
|
66 |
-
e.preventDefault();
|
67 |
-
scrollPrev();
|
68 |
-
} else if (e.key === "ArrowRight") {
|
69 |
-
e.preventDefault();
|
70 |
-
scrollNext();
|
71 |
-
}
|
72 |
-
}
|
73 |
-
|
74 |
-
$effect(() => {
|
75 |
-
setApi(carouselState.api);
|
76 |
-
});
|
77 |
-
|
78 |
-
function onInit(event: CustomEvent<CarouselAPI>) {
|
79 |
-
carouselState.api = event.detail;
|
80 |
-
|
81 |
-
carouselState.scrollSnaps = carouselState.api.scrollSnapList();
|
82 |
-
}
|
83 |
-
|
84 |
-
$effect(() => {
|
85 |
-
return () => {
|
86 |
-
carouselState.api?.off("select", onSelect);
|
87 |
-
};
|
88 |
-
});
|
89 |
-
</script>
|
90 |
-
|
91 |
-
<div
|
92 |
-
bind:this={ref}
|
93 |
-
data-slot="carousel"
|
94 |
-
class={cn("relative", className)}
|
95 |
-
role="region"
|
96 |
-
aria-roledescription="carousel"
|
97 |
-
{...restProps}
|
98 |
-
>
|
99 |
-
{@render children?.()}
|
100 |
-
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/carousel/context.ts
DELETED
@@ -1,56 +0,0 @@
|
|
1 |
-
import type { WithElementRef } from "$lib/utils.js";
|
2 |
-
import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
|
3 |
-
import type emblaCarouselSvelte from "embla-carousel-svelte";
|
4 |
-
import { getContext, hasContext, setContext } from "svelte";
|
5 |
-
import type { HTMLAttributes } from "svelte/elements";
|
6 |
-
|
7 |
-
export type CarouselAPI =
|
8 |
-
NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (
|
9 |
-
evt: CustomEvent<infer CarouselAPI>
|
10 |
-
) => void
|
11 |
-
? CarouselAPI
|
12 |
-
: never;
|
13 |
-
|
14 |
-
type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
|
15 |
-
|
16 |
-
export type CarouselOptions = EmblaCarouselConfig["options"];
|
17 |
-
export type CarouselPlugins = EmblaCarouselConfig["plugins"];
|
18 |
-
|
19 |
-
////
|
20 |
-
|
21 |
-
export type CarouselProps = {
|
22 |
-
opts?: CarouselOptions;
|
23 |
-
plugins?: CarouselPlugins;
|
24 |
-
setApi?: (api: CarouselAPI | undefined) => void;
|
25 |
-
orientation?: "horizontal" | "vertical";
|
26 |
-
} & WithElementRef<HTMLAttributes<HTMLDivElement>>;
|
27 |
-
|
28 |
-
const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
|
29 |
-
|
30 |
-
export type EmblaContext = {
|
31 |
-
api: CarouselAPI | undefined;
|
32 |
-
orientation: "horizontal" | "vertical";
|
33 |
-
scrollNext: () => void;
|
34 |
-
scrollPrev: () => void;
|
35 |
-
canScrollNext: boolean;
|
36 |
-
canScrollPrev: boolean;
|
37 |
-
handleKeyDown: (e: KeyboardEvent) => void;
|
38 |
-
options: CarouselOptions;
|
39 |
-
plugins: CarouselPlugins;
|
40 |
-
onInit: (e: CustomEvent<CarouselAPI>) => void;
|
41 |
-
scrollTo: (index: number, jump?: boolean) => void;
|
42 |
-
scrollSnaps: number[];
|
43 |
-
selectedIndex: number;
|
44 |
-
};
|
45 |
-
|
46 |
-
export function setEmblaContext(config: EmblaContext): EmblaContext {
|
47 |
-
setContext(EMBLA_CAROUSEL_CONTEXT, config);
|
48 |
-
return config;
|
49 |
-
}
|
50 |
-
|
51 |
-
export function getEmblaContext(name = "This component") {
|
52 |
-
if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
|
53 |
-
throw new Error(`${name} must be used within a <Carousel.Root> component`);
|
54 |
-
}
|
55 |
-
return getContext<ReturnType<typeof setEmblaContext>>(EMBLA_CAROUSEL_CONTEXT);
|
56 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/carousel/index.ts
DELETED
@@ -1,19 +0,0 @@
|
|
1 |
-
import Root from "./carousel.svelte";
|
2 |
-
import Content from "./carousel-content.svelte";
|
3 |
-
import Item from "./carousel-item.svelte";
|
4 |
-
import Previous from "./carousel-previous.svelte";
|
5 |
-
import Next from "./carousel-next.svelte";
|
6 |
-
|
7 |
-
export {
|
8 |
-
Root,
|
9 |
-
Content,
|
10 |
-
Item,
|
11 |
-
Previous,
|
12 |
-
Next,
|
13 |
-
//
|
14 |
-
Root as Carousel,
|
15 |
-
Content as CarouselContent,
|
16 |
-
Item as CarouselItem,
|
17 |
-
Previous as CarouselPrevious,
|
18 |
-
Next as CarouselNext
|
19 |
-
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/chart/chart-container.svelte
DELETED
@@ -1,83 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
3 |
-
import type { HTMLAttributes } from "svelte/elements";
|
4 |
-
import ChartStyle from "./chart-style.svelte";
|
5 |
-
import { setChartContext, type ChartConfig } from "./chart-utils.js";
|
6 |
-
|
7 |
-
const uid = $props.id();
|
8 |
-
|
9 |
-
let {
|
10 |
-
ref = $bindable(null),
|
11 |
-
id = uid,
|
12 |
-
class: className,
|
13 |
-
children,
|
14 |
-
config,
|
15 |
-
...restProps
|
16 |
-
}: WithElementRef<HTMLAttributes<HTMLElement>> & {
|
17 |
-
config: ChartConfig;
|
18 |
-
} = $props();
|
19 |
-
|
20 |
-
const chartId = `chart-${id || uid.replace(/:/g, "")}`;
|
21 |
-
|
22 |
-
setChartContext({
|
23 |
-
get config() {
|
24 |
-
return config;
|
25 |
-
}
|
26 |
-
});
|
27 |
-
</script>
|
28 |
-
|
29 |
-
<div
|
30 |
-
bind:this={ref}
|
31 |
-
data-chart={chartId}
|
32 |
-
data-slot="chart"
|
33 |
-
class={cn(
|
34 |
-
"flex aspect-video justify-center overflow-visible text-xs",
|
35 |
-
// Overrides
|
36 |
-
//
|
37 |
-
// Stroke around dots/marks when hovering
|
38 |
-
"[&_.stroke-white]:stroke-transparent",
|
39 |
-
// override the default stroke color of lines
|
40 |
-
"[&_.lc-line]:stroke-border/50",
|
41 |
-
|
42 |
-
// by default, layerchart shows a line intersecting the point when hovering, this hides that
|
43 |
-
"[&_.lc-highlight-line]:stroke-0",
|
44 |
-
|
45 |
-
// prevent text from being cut off
|
46 |
-
"[&_.lc-text-svg]:overflow-visible",
|
47 |
-
|
48 |
-
// by default, when you hover a point on a stacked series chart, it will drop the opacity
|
49 |
-
// of the other series, this overrides that
|
50 |
-
"[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs",
|
51 |
-
|
52 |
-
// We don't want the little tick lines between the axis labels and the chart, so we remove
|
53 |
-
// the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
|
54 |
-
// chart.
|
55 |
-
"[&_.lc-axis-tick]:stroke-0",
|
56 |
-
|
57 |
-
// We don't want to display the rule on the x/y axis, as there is already going to be
|
58 |
-
// a grid line there and rule ends up overlapping the marks because it is rendered after
|
59 |
-
// the marks
|
60 |
-
"[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0",
|
61 |
-
"[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border",
|
62 |
-
"[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border",
|
63 |
-
|
64 |
-
// Legend adjustments
|
65 |
-
"[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5",
|
66 |
-
"[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4",
|
67 |
-
"[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]",
|
68 |
-
|
69 |
-
// Labels
|
70 |
-
"[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent",
|
71 |
-
|
72 |
-
// Tick labels on th x/y axes
|
73 |
-
"[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal",
|
74 |
-
"[&_.lc-tooltip-rects-g]:fill-transparent",
|
75 |
-
"[&_.lc-layout-svg-g]:fill-transparent",
|
76 |
-
"[&_.lc-root-container]:w-full",
|
77 |
-
className
|
78 |
-
)}
|
79 |
-
{...restProps}
|
80 |
-
>
|
81 |
-
<ChartStyle id={chartId} {config} />
|
82 |
-
{@render children?.()}
|
83 |
-
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/chart/chart-style.svelte
DELETED
@@ -1,36 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { THEMES, type ChartConfig } from "./chart-utils.js";
|
3 |
-
|
4 |
-
let { id, config }: { id: string; config: ChartConfig } = $props();
|
5 |
-
|
6 |
-
const colorConfig = $derived(
|
7 |
-
config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null
|
8 |
-
);
|
9 |
-
|
10 |
-
const styleOpen = ">elyts<".split("").reverse().join("");
|
11 |
-
const styleClose = ">elyts/<".split("").reverse().join("");
|
12 |
-
</script>
|
13 |
-
|
14 |
-
{#if colorConfig && colorConfig.length}
|
15 |
-
{@const themeContents = Object.entries(THEMES)
|
16 |
-
.map(
|
17 |
-
([theme, prefix]) => `
|
18 |
-
${prefix} [data-chart=${id}] {
|
19 |
-
${colorConfig
|
20 |
-
.map(([key, itemConfig]) => {
|
21 |
-
const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
|
22 |
-
return color ? ` --color-${key}: ${color};` : null;
|
23 |
-
})
|
24 |
-
.join("\n")}
|
25 |
-
}
|
26 |
-
`
|
27 |
-
)
|
28 |
-
.join("\n")}
|
29 |
-
|
30 |
-
{#key id}
|
31 |
-
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
|
32 |
-
{@html `${styleOpen}
|
33 |
-
${themeContents}
|
34 |
-
${styleClose}`}
|
35 |
-
{/key}
|
36 |
-
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/chart/chart-tooltip.svelte
DELETED
@@ -1,155 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
|
3 |
-
import type { HTMLAttributes } from "svelte/elements";
|
4 |
-
import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from "./chart-utils.js";
|
5 |
-
import { getTooltipContext, Tooltip as TooltipPrimitive } from "layerchart";
|
6 |
-
import type { Snippet } from "svelte";
|
7 |
-
|
8 |
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
9 |
-
function defaultFormatter(value: any, _payload: TooltipPayload[]) {
|
10 |
-
return `${value}`;
|
11 |
-
}
|
12 |
-
|
13 |
-
let {
|
14 |
-
ref = $bindable(null),
|
15 |
-
class: className,
|
16 |
-
hideLabel = false,
|
17 |
-
indicator = "dot",
|
18 |
-
hideIndicator = false,
|
19 |
-
labelKey,
|
20 |
-
label,
|
21 |
-
labelFormatter = defaultFormatter,
|
22 |
-
labelClassName,
|
23 |
-
formatter,
|
24 |
-
nameKey,
|
25 |
-
color,
|
26 |
-
...restProps
|
27 |
-
}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
|
28 |
-
hideLabel?: boolean;
|
29 |
-
label?: string;
|
30 |
-
indicator?: "line" | "dot" | "dashed";
|
31 |
-
nameKey?: string;
|
32 |
-
labelKey?: string;
|
33 |
-
hideIndicator?: boolean;
|
34 |
-
labelClassName?: string;
|
35 |
-
labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
36 |
-
((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
|
37 |
-
formatter?: Snippet<
|
38 |
-
[
|
39 |
-
{
|
40 |
-
value: unknown;
|
41 |
-
name: string;
|
42 |
-
item: TooltipPayload;
|
43 |
-
index: number;
|
44 |
-
payload: TooltipPayload[];
|
45 |
-
}
|
46 |
-
]
|
47 |
-
>;
|
48 |
-
} = $props();
|
49 |
-
|
50 |
-
const chart = useChart();
|
51 |
-
const tooltipCtx = getTooltipContext();
|
52 |
-
|
53 |
-
const formattedLabel = $derived.by(() => {
|
54 |
-
if (hideLabel || !tooltipCtx.payload?.length) return null;
|
55 |
-
|
56 |
-
const [item] = tooltipCtx.payload;
|
57 |
-
const key = labelKey || item?.label || item?.name || "value";
|
58 |
-
|
59 |
-
const itemConfig = getPayloadConfigFromPayload(chart.config, item, key);
|
60 |
-
|
61 |
-
const value =
|
62 |
-
!labelKey && typeof label === "string"
|
63 |
-
? chart.config[label as keyof typeof chart.config]?.label || label
|
64 |
-
: (itemConfig?.label ?? item.label);
|
65 |
-
|
66 |
-
if (!value) return null;
|
67 |
-
if (!labelFormatter) return value;
|
68 |
-
return labelFormatter(value, tooltipCtx.payload);
|
69 |
-
});
|
70 |
-
|
71 |
-
const nestLabel = $derived(tooltipCtx.payload.length === 1 && indicator !== "dot");
|
72 |
-
</script>
|
73 |
-
|
74 |
-
{#snippet TooltipLabel()}
|
75 |
-
{#if formattedLabel}
|
76 |
-
<div class={cn("font-medium", labelClassName)}>
|
77 |
-
{#if typeof formattedLabel === "function"}
|
78 |
-
{@render formattedLabel()}
|
79 |
-
{:else}
|
80 |
-
{formattedLabel}
|
81 |
-
{/if}
|
82 |
-
</div>
|
83 |
-
{/if}
|
84 |
-
{/snippet}
|
85 |
-
|
86 |
-
<TooltipPrimitive.Root variant="none">
|
87 |
-
<div
|
88 |
-
class={cn(
|
89 |
-
"border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
|
90 |
-
className
|
91 |
-
)}
|
92 |
-
{...restProps}
|
93 |
-
>
|
94 |
-
{#if !nestLabel}
|
95 |
-
{@render TooltipLabel()}
|
96 |
-
{/if}
|
97 |
-
<div class="grid gap-1.5">
|
98 |
-
{#each tooltipCtx.payload as item, i (item.key + i)}
|
99 |
-
{@const key = `${nameKey || item.key || item.name || "value"}`}
|
100 |
-
{@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key)}
|
101 |
-
{@const indicatorColor = color || item.payload?.color || item.color}
|
102 |
-
<div
|
103 |
-
class={cn(
|
104 |
-
"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
|
105 |
-
indicator === "dot" && "items-center"
|
106 |
-
)}
|
107 |
-
>
|
108 |
-
{#if formatter && item.value !== undefined && item.name}
|
109 |
-
{@render formatter({
|
110 |
-
value: item.value,
|
111 |
-
name: item.name,
|
112 |
-
item,
|
113 |
-
index: i,
|
114 |
-
payload: tooltipCtx.payload
|
115 |
-
})}
|
116 |
-
{:else}
|
117 |
-
{#if itemConfig?.icon}
|
118 |
-
<itemConfig.icon />
|
119 |
-
{:else if !hideIndicator}
|
120 |
-
<div
|
121 |
-
style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
|
122 |
-
class={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
|
123 |
-
"size-2.5": indicator === "dot",
|
124 |
-
"h-full w-1": indicator === "line",
|
125 |
-
"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
|
126 |
-
"my-0.5": nestLabel && indicator === "dashed"
|
127 |
-
})}
|
128 |
-
></div>
|
129 |
-
{/if}
|
130 |
-
<div
|
131 |
-
class={cn(
|
132 |
-
"flex flex-1 shrink-0 justify-between leading-none",
|
133 |
-
nestLabel ? "items-end" : "items-center"
|
134 |
-
)}
|
135 |
-
>
|
136 |
-
<div class="grid gap-1.5">
|
137 |
-
{#if nestLabel}
|
138 |
-
{@render TooltipLabel()}
|
139 |
-
{/if}
|
140 |
-
<span class="text-muted-foreground">
|
141 |
-
{itemConfig?.label || item.name}
|
142 |
-
</span>
|
143 |
-
</div>
|
144 |
-
{#if item.value}
|
145 |
-
<span class="text-foreground font-mono font-medium tabular-nums">
|
146 |
-
{item.value.toLocaleString()}
|
147 |
-
</span>
|
148 |
-
{/if}
|
149 |
-
</div>
|
150 |
-
{/if}
|
151 |
-
</div>
|
152 |
-
{/each}
|
153 |
-
</div>
|
154 |
-
</div>
|
155 |
-
</TooltipPrimitive.Root>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/chart/chart-utils.ts
DELETED
@@ -1,66 +0,0 @@
|
|
1 |
-
import type { Tooltip } from "layerchart";
|
2 |
-
import { getContext, setContext, type Component, type ComponentProps, type Snippet } from "svelte";
|
3 |
-
|
4 |
-
export const THEMES = { light: "", dark: ".dark" } as const;
|
5 |
-
|
6 |
-
export type ChartConfig = {
|
7 |
-
[k in string]: {
|
8 |
-
label?: string;
|
9 |
-
icon?: Component;
|
10 |
-
} & (
|
11 |
-
| { color?: string; theme?: never }
|
12 |
-
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
13 |
-
);
|
14 |
-
};
|
15 |
-
|
16 |
-
export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
|
17 |
-
|
18 |
-
export type TooltipPayload = ExtractSnippetParams<
|
19 |
-
ComponentProps<typeof Tooltip.Root>["children"]
|
20 |
-
>["payload"][number];
|
21 |
-
|
22 |
-
// Helper to extract item config from a payload.
|
23 |
-
export function getPayloadConfigFromPayload(
|
24 |
-
config: ChartConfig,
|
25 |
-
payload: TooltipPayload,
|
26 |
-
key: string
|
27 |
-
) {
|
28 |
-
if (typeof payload !== "object" || payload === null) return undefined;
|
29 |
-
|
30 |
-
const payloadPayload =
|
31 |
-
"payload" in payload && typeof payload.payload === "object" && payload.payload !== null
|
32 |
-
? payload.payload
|
33 |
-
: undefined;
|
34 |
-
|
35 |
-
let configLabelKey: string = key;
|
36 |
-
|
37 |
-
if (payload.key === key) {
|
38 |
-
configLabelKey = payload.key;
|
39 |
-
} else if (payload.name === key) {
|
40 |
-
configLabelKey = payload.name;
|
41 |
-
} else if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
|
42 |
-
configLabelKey = payload[key as keyof typeof payload] as string;
|
43 |
-
} else if (
|
44 |
-
payloadPayload &&
|
45 |
-
key in payloadPayload &&
|
46 |
-
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
47 |
-
) {
|
48 |
-
configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
|
49 |
-
}
|
50 |
-
|
51 |
-
return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
|
52 |
-
}
|
53 |
-
|
54 |
-
type ChartContextValue = {
|
55 |
-
config: ChartConfig;
|
56 |
-
};
|
57 |
-
|
58 |
-
const chartContextKey = Symbol("chart-context");
|
59 |
-
|
60 |
-
export function setChartContext(value: ChartContextValue) {
|
61 |
-
return setContext(chartContextKey, value);
|
62 |
-
}
|
63 |
-
|
64 |
-
export function useChart() {
|
65 |
-
return getContext<ChartContextValue>(chartContextKey);
|
66 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/chart/index.ts
DELETED
@@ -1,6 +0,0 @@
|
|
1 |
-
import ChartContainer from "./chart-container.svelte";
|
2 |
-
import ChartTooltip from "./chart-tooltip.svelte";
|
3 |
-
|
4 |
-
export { getPayloadConfigFromPayload, type ChartConfig } from "./chart-utils.js";
|
5 |
-
|
6 |
-
export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/data-table/data-table.svelte.ts
DELETED
@@ -1,141 +0,0 @@
|
|
1 |
-
import {
|
2 |
-
type RowData,
|
3 |
-
type TableOptions,
|
4 |
-
type TableOptionsResolved,
|
5 |
-
type TableState,
|
6 |
-
createTable
|
7 |
-
} from "@tanstack/table-core";
|
8 |
-
|
9 |
-
/**
|
10 |
-
* Creates a reactive TanStack table object for Svelte.
|
11 |
-
* @param options Table options to create the table with.
|
12 |
-
* @returns A reactive table object.
|
13 |
-
* @example
|
14 |
-
* ```svelte
|
15 |
-
* <script>
|
16 |
-
* const table = createSvelteTable({ ... })
|
17 |
-
* </script>
|
18 |
-
*
|
19 |
-
* <table>
|
20 |
-
* <thead>
|
21 |
-
* {#each table.getHeaderGroups() as headerGroup}
|
22 |
-
* <tr>
|
23 |
-
* {#each headerGroup.headers as header}
|
24 |
-
* <th colspan={header.colSpan}>
|
25 |
-
* <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
|
26 |
-
* </th>
|
27 |
-
* {/each}
|
28 |
-
* </tr>
|
29 |
-
* {/each}
|
30 |
-
* </thead>
|
31 |
-
* <!-- ... -->
|
32 |
-
* </table>
|
33 |
-
* ```
|
34 |
-
*/
|
35 |
-
export function createSvelteTable<TData extends RowData>(options: TableOptions<TData>) {
|
36 |
-
const resolvedOptions: TableOptionsResolved<TData> = mergeObjects(
|
37 |
-
{
|
38 |
-
state: {},
|
39 |
-
onStateChange() {},
|
40 |
-
renderFallbackValue: null,
|
41 |
-
mergeOptions: (
|
42 |
-
defaultOptions: TableOptions<TData>,
|
43 |
-
options: Partial<TableOptions<TData>>
|
44 |
-
) => {
|
45 |
-
return mergeObjects(defaultOptions, options);
|
46 |
-
}
|
47 |
-
},
|
48 |
-
options
|
49 |
-
);
|
50 |
-
|
51 |
-
const table = createTable(resolvedOptions);
|
52 |
-
let state = $state<Partial<TableState>>(table.initialState);
|
53 |
-
|
54 |
-
function updateOptions() {
|
55 |
-
table.setOptions((prev) => {
|
56 |
-
return mergeObjects(prev, options, {
|
57 |
-
state: mergeObjects(state, options.state || {}),
|
58 |
-
|
59 |
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
60 |
-
onStateChange: (updater: any) => {
|
61 |
-
if (updater instanceof Function) state = updater(state);
|
62 |
-
else state = mergeObjects(state, updater);
|
63 |
-
|
64 |
-
options.onStateChange?.(updater);
|
65 |
-
}
|
66 |
-
});
|
67 |
-
});
|
68 |
-
}
|
69 |
-
|
70 |
-
updateOptions();
|
71 |
-
|
72 |
-
$effect.pre(() => {
|
73 |
-
updateOptions();
|
74 |
-
});
|
75 |
-
|
76 |
-
return table;
|
77 |
-
}
|
78 |
-
|
79 |
-
type MaybeThunk<T extends object> = T | (() => T | null | undefined);
|
80 |
-
type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R]
|
81 |
-
? H & Intersection<R>
|
82 |
-
: unknown) & {};
|
83 |
-
|
84 |
-
/**
|
85 |
-
* Lazily merges several objects (or thunks) while preserving
|
86 |
-
* getter semantics from every source.
|
87 |
-
*
|
88 |
-
* Proxy-based to avoid known WebKit recursion issue.
|
89 |
-
*/
|
90 |
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
91 |
-
export function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(
|
92 |
-
...sources: Sources
|
93 |
-
): Intersection<{ [K in keyof Sources]: Sources[K] }> {
|
94 |
-
const resolve = <T extends object>(src: MaybeThunk<T>): T | undefined =>
|
95 |
-
typeof src === "function" ? (src() ?? undefined) : src;
|
96 |
-
|
97 |
-
const findSourceWithKey = (key: PropertyKey) => {
|
98 |
-
for (let i = sources.length - 1; i >= 0; i--) {
|
99 |
-
const obj = resolve(sources[i]);
|
100 |
-
if (obj && key in obj) return obj;
|
101 |
-
}
|
102 |
-
return undefined;
|
103 |
-
};
|
104 |
-
|
105 |
-
return new Proxy(Object.create(null), {
|
106 |
-
get(_, key) {
|
107 |
-
const src = findSourceWithKey(key);
|
108 |
-
|
109 |
-
return src?.[key as never];
|
110 |
-
},
|
111 |
-
|
112 |
-
has(_, key) {
|
113 |
-
return !!findSourceWithKey(key);
|
114 |
-
},
|
115 |
-
|
116 |
-
ownKeys(): (string | symbol)[] {
|
117 |
-
const all = new Set<string | symbol>();
|
118 |
-
for (const s of sources) {
|
119 |
-
const obj = resolve(s);
|
120 |
-
if (obj) {
|
121 |
-
for (const k of Reflect.ownKeys(obj) as (string | symbol)[]) {
|
122 |
-
all.add(k);
|
123 |
-
}
|
124 |
-
}
|
125 |
-
}
|
126 |
-
return [...all];
|
127 |
-
},
|
128 |
-
|
129 |
-
getOwnPropertyDescriptor(_, key) {
|
130 |
-
const src = findSourceWithKey(key);
|
131 |
-
if (!src) return undefined;
|
132 |
-
return {
|
133 |
-
configurable: true,
|
134 |
-
enumerable: true,
|
135 |
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
136 |
-
value: (src as any)[key],
|
137 |
-
writable: true
|
138 |
-
};
|
139 |
-
}
|
140 |
-
}) as Intersection<{ [K in keyof Sources]: Sources[K] }>;
|
141 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/data-table/flex-render.svelte
DELETED
@@ -1,36 +0,0 @@
|
|
1 |
-
<script
|
2 |
-
lang="ts"
|
3 |
-
generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
|
4 |
-
>
|
5 |
-
import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
|
6 |
-
import { RenderComponentConfig, RenderSnippetConfig } from "./render-helpers.js";
|
7 |
-
type Props = {
|
8 |
-
/** The cell or header field of the current cell's column definition. */
|
9 |
-
content?: TContext extends HeaderContext<TData, TValue>
|
10 |
-
? ColumnDefTemplate<HeaderContext<TData, TValue>>
|
11 |
-
: TContext extends CellContext<TData, TValue>
|
12 |
-
? ColumnDefTemplate<CellContext<TData, TValue>>
|
13 |
-
: never;
|
14 |
-
/** The result of the `getContext()` function of the header or cell */
|
15 |
-
context: TContext;
|
16 |
-
};
|
17 |
-
|
18 |
-
let { content, context }: Props = $props();
|
19 |
-
</script>
|
20 |
-
|
21 |
-
{#if typeof content === "string"}
|
22 |
-
{content}
|
23 |
-
{:else if content instanceof Function}
|
24 |
-
<!-- It's unlikely that a CellContext will be passed to a Header -->
|
25 |
-
<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
|
26 |
-
{@const result = content(context as any)}
|
27 |
-
{#if result instanceof RenderComponentConfig}
|
28 |
-
{@const { component: Component, props } = result}
|
29 |
-
<Component {...props} />
|
30 |
-
{:else if result instanceof RenderSnippetConfig}
|
31 |
-
{@const { snippet, params } = result}
|
32 |
-
{@render snippet(params)}
|
33 |
-
{:else}
|
34 |
-
{result}
|
35 |
-
{/if}
|
36 |
-
{/if}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/data-table/index.ts
DELETED
@@ -1,3 +0,0 @@
|
|
1 |
-
export { default as FlexRender } from "./flex-render.svelte";
|
2 |
-
export { renderComponent, renderSnippet } from "./render-helpers.js";
|
3 |
-
export { createSvelteTable } from "./data-table.svelte.js";
|
|
|
|
|
|
|
|
src/lib/components/ui/data-table/render-helpers.ts
DELETED
@@ -1,111 +0,0 @@
|
|
1 |
-
import type { Component, ComponentProps, Snippet } from "svelte";
|
2 |
-
|
3 |
-
/**
|
4 |
-
* A helper class to make it easy to identify Svelte components in
|
5 |
-
* `columnDef.cell` and `columnDef.header` properties.
|
6 |
-
*
|
7 |
-
* > NOTE: This class should only be used internally by the adapter. If you're
|
8 |
-
* reading this and you don't know what this is for, you probably don't need it.
|
9 |
-
*
|
10 |
-
* @example
|
11 |
-
* ```svelte
|
12 |
-
* {@const result = content(context as any)}
|
13 |
-
* {#if result instanceof RenderComponentConfig}
|
14 |
-
* {@const { component: Component, props } = result}
|
15 |
-
* <Component {...props} />
|
16 |
-
* {/if}
|
17 |
-
* ```
|
18 |
-
*/
|
19 |
-
export class RenderComponentConfig<TComponent extends Component> {
|
20 |
-
component: TComponent;
|
21 |
-
props: ComponentProps<TComponent> | Record<string, never>;
|
22 |
-
constructor(
|
23 |
-
component: TComponent,
|
24 |
-
props: ComponentProps<TComponent> | Record<string, never> = {}
|
25 |
-
) {
|
26 |
-
this.component = component;
|
27 |
-
this.props = props;
|
28 |
-
}
|
29 |
-
}
|
30 |
-
|
31 |
-
/**
|
32 |
-
* A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
|
33 |
-
*
|
34 |
-
* > NOTE: This class should only be used internally by the adapter. If you're
|
35 |
-
* reading this and you don't know what this is for, you probably don't need it.
|
36 |
-
*
|
37 |
-
* @example
|
38 |
-
* ```svelte
|
39 |
-
* {@const result = content(context as any)}
|
40 |
-
* {#if result instanceof RenderSnippetConfig}
|
41 |
-
* {@const { snippet, params } = result}
|
42 |
-
* {@render snippet(params)}
|
43 |
-
* {/if}
|
44 |
-
* ```
|
45 |
-
*/
|
46 |
-
export class RenderSnippetConfig<TProps> {
|
47 |
-
snippet: Snippet<[TProps]>;
|
48 |
-
params: TProps;
|
49 |
-
constructor(snippet: Snippet<[TProps]>, params: TProps) {
|
50 |
-
this.snippet = snippet;
|
51 |
-
this.params = params;
|
52 |
-
}
|
53 |
-
}
|
54 |
-
|
55 |
-
/**
|
56 |
-
* A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
|
57 |
-
*
|
58 |
-
* This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
|
59 |
-
*
|
60 |
-
* @param component A Svelte component
|
61 |
-
* @param props The props to pass to `component`
|
62 |
-
* @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
|
63 |
-
* @example
|
64 |
-
* ```ts
|
65 |
-
* // +page.svelte
|
66 |
-
* const defaultColumns = [
|
67 |
-
* columnHelper.accessor('name', {
|
68 |
-
* header: header => renderComponent(SortHeader, { label: 'Name', header }),
|
69 |
-
* }),
|
70 |
-
* columnHelper.accessor('state', {
|
71 |
-
* header: header => renderComponent(SortHeader, { label: 'State', header }),
|
72 |
-
* }),
|
73 |
-
* ]
|
74 |
-
* ```
|
75 |
-
* @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
|
76 |
-
*/
|
77 |
-
export function renderComponent<
|
78 |
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
79 |
-
T extends Component<any>,
|
80 |
-
Props extends ComponentProps<T>
|
81 |
-
>(component: T, props: Props = {} as Props) {
|
82 |
-
return new RenderComponentConfig(component, props);
|
83 |
-
}
|
84 |
-
|
85 |
-
/**
|
86 |
-
* A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
|
87 |
-
*
|
88 |
-
* The snippet must only take one parameter.
|
89 |
-
*
|
90 |
-
* This is only to be used with Snippets - use `renderComponent` for Svelte Components.
|
91 |
-
*
|
92 |
-
* @param snippet
|
93 |
-
* @param params
|
94 |
-
* @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
|
95 |
-
* @example
|
96 |
-
* ```ts
|
97 |
-
* // +page.svelte
|
98 |
-
* const defaultColumns = [
|
99 |
-
* columnHelper.accessor('name', {
|
100 |
-
* cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
|
101 |
-
* }),
|
102 |
-
* columnHelper.accessor('state', {
|
103 |
-
* cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
|
104 |
-
* }),
|
105 |
-
* ]
|
106 |
-
* ```
|
107 |
-
* @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
|
108 |
-
*/
|
109 |
-
export function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params: TProps = {} as TProps) {
|
110 |
-
return new RenderSnippetConfig(snippet, params);
|
111 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/drawer-close.svelte
DELETED
@@ -1,7 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
3 |
-
|
4 |
-
let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
|
5 |
-
</script>
|
6 |
-
|
7 |
-
<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/drawer-content.svelte
DELETED
@@ -1,37 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
3 |
-
import DrawerOverlay from "./drawer-overlay.svelte";
|
4 |
-
import { cn } from "$lib/utils.js";
|
5 |
-
|
6 |
-
let {
|
7 |
-
ref = $bindable(null),
|
8 |
-
class: className,
|
9 |
-
portalProps,
|
10 |
-
children,
|
11 |
-
...restProps
|
12 |
-
}: DrawerPrimitive.ContentProps & {
|
13 |
-
portalProps?: DrawerPrimitive.PortalProps;
|
14 |
-
} = $props();
|
15 |
-
</script>
|
16 |
-
|
17 |
-
<DrawerPrimitive.Portal {...portalProps}>
|
18 |
-
<DrawerOverlay />
|
19 |
-
<DrawerPrimitive.Content
|
20 |
-
bind:ref
|
21 |
-
data-slot="drawer-content"
|
22 |
-
class={cn(
|
23 |
-
"group/drawer-content bg-background fixed z-50 flex h-auto flex-col gap-4 p-4",
|
24 |
-
"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
|
25 |
-
"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
|
26 |
-
"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
|
27 |
-
"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
|
28 |
-
className
|
29 |
-
)}
|
30 |
-
{...restProps}
|
31 |
-
>
|
32 |
-
<div
|
33 |
-
class="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
|
34 |
-
></div>
|
35 |
-
{@render children?.()}
|
36 |
-
</DrawerPrimitive.Content>
|
37 |
-
</DrawerPrimitive.Portal>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/drawer-description.svelte
DELETED
@@ -1,17 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
3 |
-
import { cn } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
...restProps
|
9 |
-
}: DrawerPrimitive.DescriptionProps = $props();
|
10 |
-
</script>
|
11 |
-
|
12 |
-
<DrawerPrimitive.Description
|
13 |
-
bind:ref
|
14 |
-
data-slot="drawer-description"
|
15 |
-
class={cn("text-muted-foreground text-sm", className)}
|
16 |
-
{...restProps}
|
17 |
-
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/drawer-footer.svelte
DELETED
@@ -1,20 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
3 |
-
import type { HTMLAttributes } from "svelte/elements";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
children,
|
9 |
-
...restProps
|
10 |
-
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<div
|
14 |
-
bind:this={ref}
|
15 |
-
data-slot="drawer-footer"
|
16 |
-
class={cn("mt-auto flex flex-col gap-2", className)}
|
17 |
-
{...restProps}
|
18 |
-
>
|
19 |
-
{@render children?.()}
|
20 |
-
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/drawer-header.svelte
DELETED
@@ -1,20 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import type { HTMLAttributes } from "svelte/elements";
|
3 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
children,
|
9 |
-
...restProps
|
10 |
-
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<div
|
14 |
-
bind:this={ref}
|
15 |
-
data-slot="drawer-header"
|
16 |
-
class={cn("flex flex-col gap-1.5", className)}
|
17 |
-
{...restProps}
|
18 |
-
>
|
19 |
-
{@render children?.()}
|
20 |
-
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/drawer-nested.svelte
DELETED
@@ -1,12 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
3 |
-
|
4 |
-
let {
|
5 |
-
shouldScaleBackground = true,
|
6 |
-
open = $bindable(false),
|
7 |
-
activeSnapPoint = $bindable(null),
|
8 |
-
...restProps
|
9 |
-
}: DrawerPrimitive.RootProps = $props();
|
10 |
-
</script>
|
11 |
-
|
12 |
-
<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/drawer-overlay.svelte
DELETED
@@ -1,20 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
3 |
-
import { cn } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
...restProps
|
9 |
-
}: DrawerPrimitive.OverlayProps = $props();
|
10 |
-
</script>
|
11 |
-
|
12 |
-
<DrawerPrimitive.Overlay
|
13 |
-
bind:ref
|
14 |
-
data-slot="drawer-overlay"
|
15 |
-
class={cn(
|
16 |
-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
|
17 |
-
className
|
18 |
-
)}
|
19 |
-
{...restProps}
|
20 |
-
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/drawer-title.svelte
DELETED
@@ -1,17 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
3 |
-
import { cn } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
...restProps
|
9 |
-
}: DrawerPrimitive.TitleProps = $props();
|
10 |
-
</script>
|
11 |
-
|
12 |
-
<DrawerPrimitive.Title
|
13 |
-
bind:ref
|
14 |
-
data-slot="drawer-title"
|
15 |
-
class={cn("text-foreground font-semibold", className)}
|
16 |
-
{...restProps}
|
17 |
-
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/drawer-trigger.svelte
DELETED
@@ -1,7 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
3 |
-
|
4 |
-
let { ref = $bindable(null), ...restProps }: DrawerPrimitive.TriggerProps = $props();
|
5 |
-
</script>
|
6 |
-
|
7 |
-
<DrawerPrimitive.Trigger bind:ref data-slot="drawer-trigger" {...restProps} />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/drawer.svelte
DELETED
@@ -1,12 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
3 |
-
|
4 |
-
let {
|
5 |
-
shouldScaleBackground = true,
|
6 |
-
open = $bindable(false),
|
7 |
-
activeSnapPoint = $bindable(null),
|
8 |
-
...restProps
|
9 |
-
}: DrawerPrimitive.RootProps = $props();
|
10 |
-
</script>
|
11 |
-
|
12 |
-
<DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/drawer/index.ts
DELETED
@@ -1,41 +0,0 @@
|
|
1 |
-
import { Drawer as DrawerPrimitive } from "vaul-svelte";
|
2 |
-
|
3 |
-
import Root from "./drawer.svelte";
|
4 |
-
import Content from "./drawer-content.svelte";
|
5 |
-
import Description from "./drawer-description.svelte";
|
6 |
-
import Overlay from "./drawer-overlay.svelte";
|
7 |
-
import Footer from "./drawer-footer.svelte";
|
8 |
-
import Header from "./drawer-header.svelte";
|
9 |
-
import Title from "./drawer-title.svelte";
|
10 |
-
import NestedRoot from "./drawer-nested.svelte";
|
11 |
-
import Close from "./drawer-close.svelte";
|
12 |
-
import Trigger from "./drawer-trigger.svelte";
|
13 |
-
|
14 |
-
const Portal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal;
|
15 |
-
|
16 |
-
export {
|
17 |
-
Root,
|
18 |
-
NestedRoot,
|
19 |
-
Content,
|
20 |
-
Description,
|
21 |
-
Overlay,
|
22 |
-
Footer,
|
23 |
-
Header,
|
24 |
-
Title,
|
25 |
-
Trigger,
|
26 |
-
Portal,
|
27 |
-
Close,
|
28 |
-
|
29 |
-
//
|
30 |
-
Root as Drawer,
|
31 |
-
NestedRoot as DrawerNestedRoot,
|
32 |
-
Content as DrawerContent,
|
33 |
-
Description as DrawerDescription,
|
34 |
-
Overlay as DrawerOverlay,
|
35 |
-
Footer as DrawerFooter,
|
36 |
-
Header as DrawerHeader,
|
37 |
-
Title as DrawerTitle,
|
38 |
-
Trigger as DrawerTrigger,
|
39 |
-
Portal as DrawerPortal,
|
40 |
-
Close as DrawerClose
|
41 |
-
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/input-otp/index.ts
DELETED
@@ -1,15 +0,0 @@
|
|
1 |
-
import Root from "./input-otp.svelte";
|
2 |
-
import Group from "./input-otp-group.svelte";
|
3 |
-
import Slot from "./input-otp-slot.svelte";
|
4 |
-
import Separator from "./input-otp-separator.svelte";
|
5 |
-
|
6 |
-
export {
|
7 |
-
Root,
|
8 |
-
Group,
|
9 |
-
Slot,
|
10 |
-
Separator,
|
11 |
-
Root as InputOTP,
|
12 |
-
Group as InputOTPGroup,
|
13 |
-
Slot as InputOTPSlot,
|
14 |
-
Separator as InputOTPSeparator
|
15 |
-
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/input-otp/input-otp-group.svelte
DELETED
@@ -1,20 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import type { HTMLAttributes } from "svelte/elements";
|
3 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
children,
|
9 |
-
...restProps
|
10 |
-
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<div
|
14 |
-
bind:this={ref}
|
15 |
-
data-slot="input-otp-group"
|
16 |
-
class={cn("flex items-center", className)}
|
17 |
-
{...restProps}
|
18 |
-
>
|
19 |
-
{@render children?.()}
|
20 |
-
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/input-otp/input-otp-separator.svelte
DELETED
@@ -1,19 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import type { HTMLAttributes } from "svelte/elements";
|
3 |
-
import type { WithElementRef } from "$lib/utils.js";
|
4 |
-
import DotIcon from "@lucide/svelte/icons/dot";
|
5 |
-
|
6 |
-
let {
|
7 |
-
ref = $bindable(null),
|
8 |
-
children,
|
9 |
-
...restProps
|
10 |
-
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<div bind:this={ref} data-slot="input-otp-separator" role="separator" {...restProps}>
|
14 |
-
{#if children}
|
15 |
-
{@render children?.()}
|
16 |
-
{:else}
|
17 |
-
<DotIcon />
|
18 |
-
{/if}
|
19 |
-
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/input-otp/input-otp-slot.svelte
DELETED
@@ -1,31 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { PinInput as InputOTPPrimitive } from "bits-ui";
|
3 |
-
import { cn } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
cell,
|
8 |
-
class: className,
|
9 |
-
...restProps
|
10 |
-
}: InputOTPPrimitive.CellProps = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<InputOTPPrimitive.Cell
|
14 |
-
{cell}
|
15 |
-
bind:ref
|
16 |
-
data-slot="input-otp-slot"
|
17 |
-
class={cn(
|
18 |
-
"border-input aria-invalid:border-destructive dark:bg-input/30 relative flex size-10 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md",
|
19 |
-
cell.isActive &&
|
20 |
-
"border-ring ring-ring/50 aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 aria-invalid:ring-destructive/20 ring-offset-background z-10 ring-[3px]",
|
21 |
-
className
|
22 |
-
)}
|
23 |
-
{...restProps}
|
24 |
-
>
|
25 |
-
{cell.char}
|
26 |
-
{#if cell.hasFakeCaret}
|
27 |
-
<div class="pointer-events-none absolute inset-0 flex items-center justify-center">
|
28 |
-
<div class="animate-caret-blink bg-foreground h-4 w-px duration-1000"></div>
|
29 |
-
</div>
|
30 |
-
{/if}
|
31 |
-
</InputOTPPrimitive.Cell>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/input-otp/input-otp.svelte
DELETED
@@ -1,22 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import { PinInput as InputOTPPrimitive } from "bits-ui";
|
3 |
-
import { cn } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
value = $bindable(""),
|
9 |
-
...restProps
|
10 |
-
}: InputOTPPrimitive.RootProps = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<InputOTPPrimitive.Root
|
14 |
-
bind:ref
|
15 |
-
bind:value
|
16 |
-
data-slot="input-otp"
|
17 |
-
class={cn(
|
18 |
-
"flex items-center gap-2 has-disabled:opacity-50 [&_input]:disabled:cursor-not-allowed",
|
19 |
-
className
|
20 |
-
)}
|
21 |
-
{...restProps}
|
22 |
-
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/pagination/index.ts
DELETED
@@ -1,25 +0,0 @@
|
|
1 |
-
import Root from "./pagination.svelte";
|
2 |
-
import Content from "./pagination-content.svelte";
|
3 |
-
import Item from "./pagination-item.svelte";
|
4 |
-
import Link from "./pagination-link.svelte";
|
5 |
-
import PrevButton from "./pagination-prev-button.svelte";
|
6 |
-
import NextButton from "./pagination-next-button.svelte";
|
7 |
-
import Ellipsis from "./pagination-ellipsis.svelte";
|
8 |
-
|
9 |
-
export {
|
10 |
-
Root,
|
11 |
-
Content,
|
12 |
-
Item,
|
13 |
-
Link,
|
14 |
-
PrevButton,
|
15 |
-
NextButton,
|
16 |
-
Ellipsis,
|
17 |
-
//
|
18 |
-
Root as Pagination,
|
19 |
-
Content as PaginationContent,
|
20 |
-
Item as PaginationItem,
|
21 |
-
Link as PaginationLink,
|
22 |
-
PrevButton as PaginationPrevButton,
|
23 |
-
NextButton as PaginationNextButton,
|
24 |
-
Ellipsis as PaginationEllipsis
|
25 |
-
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
src/lib/components/ui/pagination/pagination-content.svelte
DELETED
@@ -1,20 +0,0 @@
|
|
1 |
-
<script lang="ts">
|
2 |
-
import type { HTMLAttributes } from "svelte/elements";
|
3 |
-
import { cn, type WithElementRef } from "$lib/utils.js";
|
4 |
-
|
5 |
-
let {
|
6 |
-
ref = $bindable(null),
|
7 |
-
class: className,
|
8 |
-
children,
|
9 |
-
...restProps
|
10 |
-
}: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();
|
11 |
-
</script>
|
12 |
-
|
13 |
-
<ul
|
14 |
-
bind:this={ref}
|
15 |
-
data-slot="pagination-content"
|
16 |
-
class={cn("flex flex-row items-center gap-1", className)}
|
17 |
-
{...restProps}
|
18 |
-
>
|
19 |
-
{@render children?.()}
|
20 |
-
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|