Merge branch 'dev' into 0.24

src/lib/cards/acl/GroupListCard.svelte

@@ -102,7 +102,7 @@
 				bind:value={group.name}
 				bind:valueNew={groupNameNew}
 				submit={()=>{ group.name = groupNameNew; return true }}
-				class="font-extralight text-secondary-500 dark:text-secondary-300 rounded-md"
+				classes="font-extralight text-secondary-500 dark:text-secondary-300 rounded-md"
 				showRenameIcon={true}
 			/>
 		</h3>

src/lib/cards/acl/HostListCard.svelte

@@ -130,7 +130,7 @@
 			bind:value={host.name}
 			bind:valueNew={hostNameNew}
 			submit={() => { host.name = hostNameNew; return true }}
-			class="font-extralight rounded-md"
+			classes="font-extralight rounded-md"
 			showRenameIcon={false}
 		/>
 	</div>
@@ -139,7 +139,7 @@
 			bind:value={host.cidr}
 			bind:valueNew={hostCIDRNew}
 			submit={() => { host.cidr = hostCIDRNew; return true }}
-			class="text-sm font-mono rounded-md text-primary-500 dark:text-primary-300"
+			classes="text-sm font-mono rounded-md text-primary-500 dark:text-primary-300"
 			showRenameIcon={false}
 		/>
 	</div>

src/lib/cards/acl/TagOwnerListCard.svelte

@@ -108,7 +108,7 @@
 				bind:value={tag.name}
 				bind:valueNew={tagNameNew}
 				submit={() => { tag.name = tagNameNew; return true}}
-				class="font-extralight text-secondary-500 dark:text-secondary-300 rounded-md"
+				classes="font-extralight text-secondary-500 dark:text-secondary-300 rounded-md"
 				showRenameIcon={true}
 			/>
 		</h3>

src/lib/cards/node/NodeInfo.svelte

@@ -14,7 +14,6 @@
 	import NodeOwner from './NodeOwner.svelte';
 	import NodeLastSeen from './NodeLastSeen.svelte';
 
-	// export let node: Node;
 	type NodeInfoProps = {
 		node: Node,
 		loading?: boolean,

src/lib/parts/Text.svelte

@@ -6,20 +6,29 @@
 	import RawMdiCloseCircleOutline from '~icons/mdi/close-circle-outline';
 	import { slide } from 'svelte/transition';
 
-	export let value: string;
-	export let valueNew: string;
-	export let submit: EventHandler<SubmitEvent, HTMLFormElement>;
-	let classes = '';
-	export { classes as class };
-	export let showRenameIcon = false;
+	type TextProps = {
+		value: string,
+		valueNew: string,
+		submit: EventHandler<SubmitEvent, HTMLFormElement>,
+		showRenameIcon?: boolean,
+		classes?: string,
+	}
 
-	let showModify = false;
+	let {
+		value = $bindable(),
+		valueNew = $bindable(),
+		submit,
+		showRenameIcon = false,
+		classes,
+	}: TextProps = $props()
+
+	let showModify = $state(false);
 </script>
 
 {#if !showModify}
 	<button
 		class="flex flex-row ml-2"
-		on:click={() => {
+		onclick={() => {
 			valueNew = value;
 			showModify = true;
 		}}
@@ -32,17 +41,15 @@
 {:else}
 	<form
         class="flex flex-row ml-2"
-		on:submit|preventDefault={(x) => {
-			if (submit(x)) {
-				showModify = false;
+		onsubmit={(x) => {
+			x.preventDefault()
+			if(submit(x)) {
+				showModify = false
 			}
 		}}
 	>
 		<input
 			use:focus
-			on:blur={() => {
-				showModify = false;
-			}}
 			type="text"
 			class="input {classes} p-0 m-0 text-sm"
 			bind:value={valueNew}
@@ -53,7 +60,7 @@
 			</button>
 			<button
 				type="button"
-				on:click={() => {
+				onclick={() => {
 					showModify = false;
 				}}
 			>

src/routes/deploy/DeployCheck.svelte

@@ -3,14 +3,19 @@
 	import { slide } from 'svelte/transition';
 	import { type PopupSettings, popup } from '@skeletonlabs/skeleton';
 	import { xxHash32 } from 'js-xxhash';
-	import { onMount } from 'svelte';
+	import { type Snippet } from 'svelte';
 
-	export let name: string;
-	export let help: string | undefined = undefined;
-	export let checked: boolean;
+	type DeployCheckTypes = {
+		name: string,
+		help?: string,
+		checked: boolean,
+		children?: Snippet,
+	}
+
+	let { name, help, checked = $bindable(), children = undefined }: DeployCheckTypes = $props()
 
 	const popupId = xxHash32(name).toString();
-	$: popupShow = false;
+	let popupShow = $state(false);
 
 	let timerInfo: ReturnType<typeof setTimeout>;
 
@@ -41,23 +46,23 @@
 </div>
 
 <div class="flex flex-col col-span-12 md:col-span-6 xl:col-span-4 pb-4 mx-4">
-	<label class="flex items-center space-x-2">
+	<div class="flex items-center space-x-2">
 		{#if help !== undefined}
 			<button
 				class="btn p-0 btn-icon variant-soft-secondary w-6 h-6 [&>*]:pointer-events-none"
 				use:popup={popupInfo}
-				on:mouseenter={handleMouseEnter}
-				on:mouseleave={handleMouseLeave}
+				onmouseenter={handleMouseEnter}
+				onmouseleave={handleMouseLeave}
 			>
 				<RawMdiInfo />
 			</button>
 		{/if}
-		<input class="checkbox" type="checkbox" bind:checked />
-		<p>{name}</p>
-	</label>
-	{#if $$slots.default && checked}
+		<input id={"checkbox-" + name} class="checkbox" type="checkbox" bind:checked />
+		<label for={"checkbox-" + name}>{name}</label>
+	</div>
+	{#if children != undefined && checked}
 		<div transition:slide class="pt-4">
-			<slot />
+			{@render children()}
 		</div>
 	{/if}
 </div>