Skip to content

Commit 8d4bd11

Browse files
SIMULATANSIMULATAN
committed
chore(deps): update dependency @skeletonlabs/skeleton-svelte to v4
1 parent e1eb6ba commit 8d4bd11

File tree

11 files changed

+687
-482
lines changed

11 files changed

+687
-482
lines changed

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@
1111
},
1212
"prepare": "svelte-kit sync",
1313
"devDependencies": {
14-
"@skeletonlabs/skeleton": "^3.1",
15-
"@skeletonlabs/skeleton-svelte": "^1.2",
14+
"@skeletonlabs/skeleton": "^4.0.0",
15+
"@skeletonlabs/skeleton-svelte": "^4.0.0",
16+
"@zag-js/toast": "^1.26",
1617
"@sveltejs/adapter-auto": "^6.0",
1718
"@sveltejs/adapter-cloudflare": "^7.0",
1819
"@sveltejs/adapter-node": "^5.2",
1920
"@sveltejs/kit": "^2.13",
2021
"@sveltejs/vite-plugin-svelte": "^5.0",
2122
"@tailwindcss/forms": "^0.5",
22-
"@zag-js/toast": "^1.8",
2323
"autoprefixer": "^10.4",
24-
"svelte": "~5.25",
24+
"svelte": "~5.39",
2525
"svelte-check": "^4.1",
2626
"tailwindcss": "^4.1",
2727
"tslib": "^2.8",

‎pnpm-lock.yaml‎

Lines changed: 534 additions & 403 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
@import 'tailwindcss';
22
@plugin '@tailwindcss/forms';
33

4-
@source '../node_modules/@skeletonlabs/skeleton-svelte/dist';
5-
4+
@import '@skeletonlabs/skeleton-svelte';
65
@import '@skeletonlabs/skeleton';
76

8-
@import '@skeletonlabs/skeleton/optional/presets';
97
@import '@skeletonlabs/skeleton/themes/cerberus';
108
@import '@skeletonlabs/skeleton/themes/crimson';
119
@import "./dracula.css";

‎src/lib/components/add/AddNodeButton.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import type { NodeDescriptor, NodeId, NodeSettings } from "$lib/model/nodes";
3-
import { ProgressRing } from "@skeletonlabs/skeleton-svelte";
3+
import { Progress } from "@skeletonlabs/skeleton-svelte";
44
import type { ApiProps } from "$lib/api/api";
55
import { createNode, type NodeCreateDTO } from "$lib/api/node_api";
66
import type { NodeCreatedHandler } from "$lib/components/add";
@@ -37,7 +37,7 @@
3737

3838
<button class="btn preset-filled-primary-500 float-right px-10" onclick={submit} disabled={submitting}>
3939
{#if submitting}
40-
<ProgressRing size="size-6" meterStroke="stroke-surface-900-100" trackStroke="stroke-surface-200-800" />
40+
<Progress size="size-6" meterStroke="stroke-surface-900-100" trackStroke="stroke-surface-200-800" />
4141
{:else}
4242
Add this Node
4343
{/if}

‎src/lib/components/confirm/Confirmation.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { Modal } from '@skeletonlabs/skeleton-svelte';
2+
import { Dialog } from '@skeletonlabs/skeleton-svelte';
33
import type { Snippet } from "svelte"
44
55
interface Props {
@@ -21,7 +21,7 @@
2121
}
2222
</style>
2323

24-
<Modal
24+
<Dialog
2525
bind:open
2626
contentBase="card bg-surface-100-900 p-4 space-y-4 shadow-xl max-w-(--breakpoint-sm)"
2727
backdropClasses="backdrop-blur-xs"
@@ -42,4 +42,4 @@
4242
<button type="button" class="btn preset-filled" onclick={onconfirmed}>Confirm</button>
4343
</footer>
4444
{/snippet}
45-
</Modal>
45+
</Dialog>

‎src/lib/components/flow/import/ImportFlowButton.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { Modal, Switch } from "@skeletonlabs/skeleton-svelte";
2+
import { Dialog, Switch } from "@skeletonlabs/skeleton-svelte";
33
import IconUpload from "lucide-svelte/icons/upload";
44
import IconRocket from "lucide-svelte/icons/rocket";
55
import ImportFlow from "$lib/components/flow/import/ImportFlow.svelte";
@@ -41,7 +41,7 @@
4141
}
4242
</script>
4343

44-
<Modal
44+
<Dialog
4545
open={shown}
4646
onOpenChange={(e) => shown = e.open}
4747
triggerBase="px-4 py-2"
@@ -77,4 +77,4 @@
7777
</div>
7878
</div>
7979
{/snippet}
80-
</Modal>
80+
</Dialog>

‎src/lib/components/navigation/NavigationTile.svelte‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script lang="ts">
2+
import { twMerge } from "tailwind-merge";
3+
4+
interface Props {
5+
label: string
6+
labelExpanded: string
7+
8+
class?: string
9+
hover?: string
10+
active?: string
11+
12+
selected: boolean
13+
expanded: boolean
14+
15+
href?: string
16+
onclick?: () => void
17+
}
18+
19+
const { label, labelExpanded, class: userClass, hover: userHover, active: userActive, selected, expanded, href, onclick }: Props = $props();
20+
21+
const element = $derived(href ? "a" : "button");
22+
const classes = $derived(twMerge(
23+
"btn filter-none!",
24+
expanded
25+
? "justify-start px-4 py-2 w-full"
26+
: "flex items-center w-18 rounded-container aspect-square p-2 gap-1 flex-col justify-center",
27+
userHover?.split(" ")?.map(x => `hover:${x}`)?.join(" ") ?? "hover:preset-filled-surface-200-800",
28+
selected ? userActive ?? "bg-surface-300-700" : "",
29+
userClass
30+
))
31+
const actualLabel = $derived(expanded ? labelExpanded : label);
32+
</script>
33+
34+
<svelte:element
35+
this={element}
36+
class={classes}
37+
href={href}
38+
onclick={onclick}
39+
>
40+
<slot/>
41+
{#if actualLabel}<span class={expanded ? "text-md" : "text-xs"}>{actualLabel}</span>{/if}
42+
</svelte:element>

‎src/lib/components/notification/NotificationBadge.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
import { notificationCount } from "$lib/components/notification/notification_store";
33
</script>
44

5-
<span class="badge absolute top-0 right-0 z-10 preset-filled-error-500">{$notificationCount}</span>
5+
<span class="badge absolute px-1.5 py-0.5 top-0 right-0 z-10 preset-filled-error-500">{$notificationCount}</span>

‎src/lib/components/ui/Toast.svelte‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script lang="ts">
2+
import * as toast from "@zag-js/toast";
3+
import { Toast } from "@skeletonlabs/skeleton-svelte";
4+
5+
interface Props {
6+
toaster: toast.Store
7+
}
8+
const { toaster }: Props = $props();
9+
</script>
10+
11+
<Toast.Group {toaster}>
12+
{#snippet children(toast)}
13+
<Toast {toast}>
14+
<Toast.Message>
15+
<Toast.Title>{toast.title}</Toast.Title>
16+
<Toast.Description>{toast.description}</Toast.Description>
17+
</Toast.Message>
18+
{#if toast.closable !== false}<Toast.CloseTrigger />{/if}
19+
</Toast>
20+
{/snippet}
21+
</Toast.Group>

‎src/routes/+layout.svelte‎

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script lang="ts">
22
import "../app.css";
3-
import { Avatar, Navigation, Toaster, createToaster } from "@skeletonlabs/skeleton-svelte";
3+
import { Avatar, Navigation, createToaster } from "@skeletonlabs/skeleton-svelte";
4+
import NavigationTile from "$lib/components/navigation/NavigationTile.svelte";
45
import IconHome from "lucide-svelte/icons/house";
56
import IconWorkflow from "lucide-svelte/icons/workflow";
67
import IconInfo from "lucide-svelte/icons/info";
@@ -12,6 +13,7 @@
1213
import { TemplateAPI } from "$lib/components/template/api";
1314
import { page } from "$app/state";
1415
import { initContext, setColorScheme, setToaster } from "$lib/context/layout_context.svelte";
16+
import Toast from "$lib/components/ui/Toast.svelte";
1517
1618
let expanded = $state(false);
1719
@@ -27,11 +29,6 @@
2729
setColorScheme(document.documentElement.className as App.ColorScheme);
2830
}
2931
30-
const tileProps = {
31-
"active": "bg-surface-300-700",
32-
"hover": "hover:preset-filled-surface-200-800",
33-
};
34-
3532
const apiProps: ApiProps = {
3633
token: data.access_token!!,
3734
fetch: fetch
@@ -45,39 +42,46 @@
4542
placement: "bottom-end"
4643
});
4744
setToaster(toaster);
45+
46+
const tileProps = $derived({
47+
expanded,
48+
hover: "preset-filled-surface-200-800",
49+
});
4850
</script>
4951

5052
<div class="card border-surface-100-900 grid h-full w-full grid-cols-[auto_1fr] border-[1px]">
51-
<Navigation.Rail value="nothing" classes="navbar overflow-y-auto" {expanded}>
52-
{#snippet header()}
53-
<Navigation.Tile labelExpanded="Menu" title="menu" selected={expanded} onclick={() => expanded = !expanded} {...tileProps}>
54-
<IconMenu/>
55-
</Navigation.Tile>
56-
{/snippet}
57-
{#snippet tiles()}
58-
<Navigation.Tile id="home" labelExpanded="Home" label="Home" href="/" selected={activeUrl === "/"} {...tileProps}>
59-
<IconHome/>
60-
</Navigation.Tile>
61-
{#if data.user != null}
62-
<!-- matches /flows and /flow/:id -->
63-
<Navigation.Tile id="flows" labelExpanded="My Flows" label="Flows" href="/flows" selected={activeUrl.startsWith("/flow")} {...tileProps}>
64-
<IconWorkflow/>
65-
</Navigation.Tile>
66-
{/if}
67-
<Navigation.Tile id="about" labelExpanded="About Snoty" label="About" href="/about" selected={activeUrl === "/about"} {...tileProps}>
68-
<IconInfo/>
69-
</Navigation.Tile>
70-
{#if !isErrorJson(data.roles) && data.roles?.includes("admin")}
71-
<Navigation.Tile id="admin" labelExpanded="Admin" label="Admin" href="/admin" selected={activeUrl === "/admin"} {...tileProps}>
72-
<IconMonitorCog/>
73-
</Navigation.Tile>
74-
{/if}
75-
{/snippet}
76-
{#snippet footer()}
77-
<UserMenu {apiProps} user={data.user} {tileProps}/>
78-
{/snippet}
79-
</Navigation.Rail>
80-
<Toaster {toaster} width="min-w-md"/>
53+
<Navigation layout={expanded ? "sidebar" : "rail"} class={`p-1 overflow-y-auto ${expanded ? "grid grid-rows-[1fr_auto_1fr] gap-4" : "w-auto"}`}>
54+
<Navigation.Header>
55+
<NavigationTile labelExpanded="Menu" selected={expanded} onclick={() => expanded = !expanded} {...tileProps}>
56+
<IconMenu/>
57+
</NavigationTile>
58+
</Navigation.Header>
59+
<Navigation.Content>
60+
<Navigation.Menu class="gap-1">
61+
<NavigationTile labelExpanded="Home" label="Home" href="/" selected={activeUrl === "/"} {...tileProps}>
62+
<IconHome/>
63+
</NavigationTile>
64+
{#if data.user != null}
65+
<!-- matches /flows and /flow/:id -->
66+
<NavigationTile labelExpanded="My Flows" label="Flows" href="/flows" selected={activeUrl.startsWith("/flow")} {...tileProps}>
67+
<IconWorkflow/>
68+
</NavigationTile>
69+
{/if}
70+
<NavigationTile labelExpanded="About Snoty" label="About" href="/about" selected={activeUrl === "/about"} {...tileProps}>
71+
<IconInfo/>
72+
</NavigationTile>
73+
{#if !isErrorJson(data.roles) && data.roles?.includes("admin")}
74+
<NavigationTile labelExpanded="Admin" label="Admin" href="/admin" selected={activeUrl === "/admin"} {...tileProps}>
75+
<IconMonitorCog/>
76+
</NavigationTile>
77+
{/if}
78+
</Navigation.Menu>
79+
</Navigation.Content>
80+
<Navigation.Footer class="flex flex-col justify-end">
81+
<UserMenu {apiProps} user={data.user} {tileProps}/>
82+
</Navigation.Footer>
83+
</Navigation>
84+
<Toast {toaster}/>
8185
<div class="flex flex-col gap-2 items-center justify-center h-full overflow-y-auto">
8286
{@render children()}
8387
</div>

0 commit comments

Comments
 (0)