diff --git a/frontend/src/lib/components/AppConnectDrawer.svelte b/frontend/src/lib/components/AppConnectDrawer.svelte index d8ad4cd389..f9f7db9d07 100644 --- a/frontend/src/lib/components/AppConnectDrawer.svelte +++ b/frontend/src/lib/components/AppConnectDrawer.svelte @@ -1,4 +1,6 @@ @@ -68,7 +76,7 @@ {/if} {#if isGoogleSignin} - diff --git a/frontend/src/lib/components/Description.svelte b/frontend/src/lib/components/Description.svelte index c3cd74c7d6..16c5b13f11 100644 --- a/frontend/src/lib/components/Description.svelte +++ b/frontend/src/lib/components/Description.svelte @@ -2,11 +2,17 @@ import { ExternalLink } from 'lucide-svelte' import { twMerge } from 'tailwind-merge' - export let link: string | undefined = undefined + interface Props { + link?: string | undefined + class?: string + children?: import('svelte').Snippet + } + + let { link = undefined, class: c = '', children }: Props = $props() -
- +
+ {@render children?.()} {#if link} Learn more void + onClose?: () => void } let { @@ -64,7 +66,9 @@ btnId = undefined, buttonReplacement, menu, - maxHeight = undefined + maxHeight = undefined, + onOpen: onOpenProp = undefined, + onClose: onCloseProp = undefined }: Props = $props() let buttonEl: HTMLButtonElement | undefined = $state(undefined) @@ -121,7 +125,7 @@ } - + - - {/each} - + > + + {/each} + + {/snippet} {:else}
diff --git a/frontend/src/lib/components/InstanceNameEditor.svelte b/frontend/src/lib/components/InstanceNameEditor.svelte index 31fc3d738b..d20f9c3d89 100644 --- a/frontend/src/lib/components/InstanceNameEditor.svelte +++ b/frontend/src/lib/components/InstanceNameEditor.svelte @@ -1,4 +1,7 @@
- +
+ {/snippet} diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte index 07b02227d4..556ac1b0cc 100644 --- a/frontend/src/lib/components/PageHeader.svelte +++ b/frontend/src/lib/components/PageHeader.svelte @@ -1,11 +1,23 @@
@@ -31,9 +43,9 @@ {/if} - {#if $$slots.default} + {#if children}
- + {@render children?.()}
{/if}
diff --git a/frontend/src/lib/components/ParqetCsvTableRenderer.svelte b/frontend/src/lib/components/ParqetCsvTableRenderer.svelte index 07a8c267a9..7d35e11617 100644 --- a/frontend/src/lib/components/ParqetCsvTableRenderer.svelte +++ b/frontend/src/lib/components/ParqetCsvTableRenderer.svelte @@ -1,4 +1,6 @@ @@ -182,7 +195,7 @@
- mountGrid()}> diff --git a/frontend/src/lib/components/PermissionHistory.svelte b/frontend/src/lib/components/PermissionHistory.svelte index 82d646bd53..6a1398b5d4 100644 --- a/frontend/src/lib/components/PermissionHistory.svelte +++ b/frontend/src/lib/components/PermissionHistory.svelte @@ -79,12 +79,14 @@

No permission changes recorded yet

{:else} - - Changed By - Change Type - Affected - Date - + {#snippet header_row()} + + Changed By + Change Type + Affected + Date + + {/snippet} {#snippet body()} {#each history as change} diff --git a/frontend/src/lib/components/PersistentScriptDrawer.svelte b/frontend/src/lib/components/PersistentScriptDrawer.svelte index aa5c869f31..420b8fc56d 100644 --- a/frontend/src/lib/components/PersistentScriptDrawer.svelte +++ b/frontend/src/lib/components/PersistentScriptDrawer.svelte @@ -10,19 +10,19 @@ import { Hourglass, Loader2, Play, RefreshCw } from 'lucide-svelte' let dispatch = createEventDispatcher() - let drawer: Drawer + let drawer: Drawer = $state() - let script: Script - let loadQueuedJobs = true - let queuedJobsLoading = false + let script: Script = $state() + let loadQueuedJobs = $state(true) + let queuedJobsLoading = $state(false) let queuedJobs: { status: 'running' | 'queued' jobId: string scheduledFor: string scriptHash: string - }[] = [] + }[] = $state([]) - let cancellingInProgress = false + let cancellingInProgress = $state(false) async function continuouslyLoadQueuedJobs() { while (loadQueuedJobs) { @@ -124,44 +124,48 @@
- - Script Hash - Job ID - Status - Scheduled For - - - {#each queuedJobs as { jobId, status, scriptHash, scheduledFor }} - - - - {scriptHash} - - - - {jobId.substring(24)} - - - {#if status === 'running'} - - - - {:else} - - - - {/if} - - {scheduledFor} - - {/each} - + {#snippet header_row()} + + Script Hash + Job ID + Status + Scheduled For + + {/snippet} + {#snippet body()} + + {#each queuedJobs as { jobId, status, scriptHash, scheduledFor }} + + + + {scriptHash} + + + + {jobId.substring(24)} + + + {#if status === 'running'} + + + + {:else} + + + + {/if} + + {scheduledFor} + + {/each} + + {/snippet} {#snippet actions()} diff --git a/frontend/src/lib/components/QueueMetricsDrawer.svelte b/frontend/src/lib/components/QueueMetricsDrawer.svelte index 4b05c41899..dcc95e8f92 100644 --- a/frontend/src/lib/components/QueueMetricsDrawer.svelte +++ b/frontend/src/lib/components/QueueMetricsDrawer.svelte @@ -3,7 +3,7 @@ import QueueMetricsDrawerInner from './QueueMetricsDrawerInner.svelte' import QueueAlerts from './QueueAlerts.svelte' - let drawer: Drawer + let drawer: Drawer = $state() export function openDrawer() { drawer?.openDrawer() } diff --git a/frontend/src/lib/components/QueueMetricsDrawerInner.svelte b/frontend/src/lib/components/QueueMetricsDrawerInner.svelte index f6cc720b88..3b25513b4d 100644 --- a/frontend/src/lib/components/QueueMetricsDrawerInner.svelte +++ b/frontend/src/lib/components/QueueMetricsDrawerInner.svelte @@ -1,4 +1,6 @@ diff --git a/frontend/src/lib/components/RadioButton.svelte b/frontend/src/lib/components/RadioButton.svelte index efa9a62b40..c7e5dc8dce 100644 --- a/frontend/src/lib/components/RadioButton.svelte +++ b/frontend/src/lib/components/RadioButton.svelte @@ -1,13 +1,24 @@ @@ -28,7 +39,7 @@ class="sr-only" bind:group={value} aria-labelledby="memory-option-0-label" - on:click={() => dispatch('change', val)} + onclick={() => dispatch('change', val)} />

{#if typeof label !== 'string'} diff --git a/frontend/src/lib/components/Range.svelte b/frontend/src/lib/components/Range.svelte index 0e92ac72de..a3e5d81af1 100644 --- a/frontend/src/lib/components/Range.svelte +++ b/frontend/src/lib/components/Range.svelte @@ -1,29 +1,47 @@

- +
{#if max <= min}
Impossible to display range: {`max (${max}) <= min (${min})`}
- export let required: boolean - export let detail = '' + interface Props { + required: boolean + detail?: string + class?: string + } + + let { required, detail = '', class: c = '' }: Props = $props() {#if required} - * + * {:else if detail || detail != ''} - ({detail != '' ? `${detail}` : ''}) {/if} diff --git a/frontend/src/lib/components/ResourceEditorDrawer.svelte b/frontend/src/lib/components/ResourceEditorDrawer.svelte index 50db916f13..0b4dea3d90 100644 --- a/frontend/src/lib/components/ResourceEditorDrawer.svelte +++ b/frontend/src/lib/components/ResourceEditorDrawer.svelte @@ -1,21 +1,23 @@ diff --git a/frontend/src/lib/components/RunForm.svelte b/frontend/src/lib/components/RunForm.svelte index 969576a06b..da0c87a15f 100644 --- a/frontend/src/lib/components/RunForm.svelte +++ b/frontend/src/lib/components/RunForm.svelte @@ -15,7 +15,7 @@ import Popover from './meltComponents/Popover.svelte' import { Calendar, Check, CornerDownLeft } from 'lucide-svelte' import RunFormAdvancedPopup from './RunFormAdvancedPopup.svelte' - import { page } from '$app/stores' + import { page } from '$app/state' import { replaceState } from '$app/navigation' import JsonInputs from '$lib/components/JsonInputs.svelte' import { triggerableByAI } from '$lib/actions/triggerableByAI.svelte' @@ -108,7 +108,7 @@ nurl.hash = computeSharableHash(args) try { - replaceState(nurl.toString(), $page.state) + replaceState(nurl.toString(), page.state) } catch (e) { console.error(e) } diff --git a/frontend/src/lib/components/RunFormAdvancedPopup.svelte b/frontend/src/lib/components/RunFormAdvancedPopup.svelte index 7d6ef01bb2..399e55f772 100644 --- a/frontend/src/lib/components/RunFormAdvancedPopup.svelte +++ b/frontend/src/lib/components/RunFormAdvancedPopup.svelte @@ -8,7 +8,9 @@ import { WorkerService } from '$lib/gen' import DateTimeInput from './DateTimeInput.svelte' - export let runnable: + + interface Props { + runnable: | { summary?: string description?: string @@ -21,11 +23,18 @@ created_by?: string extra_perms?: Record } - | undefined + | undefined; + scheduledForStr: string | undefined; + invisible_to_owner: boolean | undefined; + overrideTag: string | undefined; + } - export let scheduledForStr: string | undefined - export let invisible_to_owner: boolean | undefined - export let overrideTag: string | undefined + let { + runnable, + scheduledForStr = $bindable(), + invisible_to_owner = $bindable(), + overrideTag = $bindable() + }: Props = $props(); loadWorkerGroups() async function loadWorkerGroups() { diff --git a/frontend/src/lib/components/S3ObjectPicker.svelte b/frontend/src/lib/components/S3ObjectPicker.svelte index c70983ee83..3a8b3b2a5c 100644 --- a/frontend/src/lib/components/S3ObjectPicker.svelte +++ b/frontend/src/lib/components/S3ObjectPicker.svelte @@ -11,15 +11,19 @@ import S3FilePicker from './S3FilePicker.svelte' import FileUpload from './common/fileUpload/FileUpload.svelte' - export let value: any - export let editor: SimpleEditor | undefined = undefined + interface Props { + value: any; + editor?: SimpleEditor | undefined; + } + + let { value = $bindable(), editor = $bindable(undefined) }: Props = $props(); const dispatch = createEventDispatcher() - let s3FilePicker: S3FilePicker - let s3FileUploadRawMode: false + let s3FilePicker: S3FilePicker = $state() + let s3FileUploadRawMode: false = $state() let el: HTMLTextAreaElement | undefined = undefined - let rawValue: string | undefined = undefined + let rawValue: string | undefined = $state(undefined) function evalValueToRaw() { rawValue = JSON.stringify(value, null, 2) diff --git a/frontend/src/lib/components/SaveInputsButton.svelte b/frontend/src/lib/components/SaveInputsButton.svelte index 414e5ff205..4bddde54ca 100644 --- a/frontend/src/lib/components/SaveInputsButton.svelte +++ b/frontend/src/lib/components/SaveInputsButton.svelte @@ -10,14 +10,25 @@ const dispatch = createEventDispatcher() - export let runnableId: string | undefined - export let runnableType: RunnableType | undefined - export let args: object - export let disabled: boolean = false - export let small: boolean | undefined = undefined - export let showTooltip: boolean | undefined = undefined + interface Props { + runnableId: string | undefined; + runnableType: RunnableType | undefined; + args: object; + disabled?: boolean; + small?: boolean | undefined; + showTooltip?: boolean | undefined; + } - let savingInputs = false + let { + runnableId, + runnableType, + args, + disabled = false, + small = undefined, + showTooltip = undefined + }: Props = $props(); + + let savingInputs = $state(false) async function saveInput(args: object) { savingInputs = true diff --git a/frontend/src/lib/components/SavedInputsPicker.svelte b/frontend/src/lib/components/SavedInputsPicker.svelte index 87cdd8e2fc..057a405ac4 100644 --- a/frontend/src/lib/components/SavedInputsPicker.svelte +++ b/frontend/src/lib/components/SavedInputsPicker.svelte @@ -285,8 +285,8 @@ {limitPayloadSize} {hover} {viewerOpen} - on:openChange={(e) => { - updateViewerOpenState(item.id, e.detail) + onOpenChange={(isOpen) => { + updateViewerOpenState(item.id, isOpen) }} maxWidth={clientWidth} {editOptions} diff --git a/frontend/src/lib/components/SavedInputsPickerViewer.svelte b/frontend/src/lib/components/SavedInputsPickerViewer.svelte index 150e2b9b97..ac9f643421 100644 --- a/frontend/src/lib/components/SavedInputsPickerViewer.svelte +++ b/frontend/src/lib/components/SavedInputsPickerViewer.svelte @@ -4,16 +4,25 @@ import ObjectViewerWrapper from '$lib/components/propertyPicker/ObjectViewerWrapper.svelte' import { copyToClipboard, isObjectTooBig } from '$lib/utils' import { Eye, CopyIcon, Loader2 } from 'lucide-svelte' - import { createEventDispatcher } from 'svelte' + interface Props { + payloadData: any; + limitPayloadSize?: boolean; + hover?: boolean; + viewerOpen?: boolean; + maxWidth?: number | undefined; + editOptions?: boolean; + onOpenChange?: (isOpen: boolean) => void; + } - export let payloadData: any - export let limitPayloadSize: boolean = false - export let hover: boolean = false - export let viewerOpen: boolean = false - export let maxWidth: number | undefined = undefined - export let editOptions: boolean = true - - const dispatch = createEventDispatcher() + let { + payloadData, + limitPayloadSize = false, + hover = false, + viewerOpen = false, + maxWidth = undefined, + editOptions = true, + onOpenChange = undefined + }: Props = $props(); const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData) const buttonWidth = 34 const floatingConfig = { @@ -32,14 +41,13 @@ } const xOffset = editOptions ? 218 : 168 // width of the optional buttons on the right - let popover: Popover | undefined + let popover: Popover | undefined = $state() let popoverOpen = false let hoverTimeout: ReturnType | undefined - let objectViewerLoaded = false - let popoverFullyOpened = false + let objectViewerLoaded = $state(false) + let popoverFullyOpened = $state(false) - function handlePopoverChange(event: CustomEvent) { - const isOpen = event.detail + function handlePopoverChange(isOpen: boolean) { popoverOpen = isOpen if (!isOpen) { @@ -53,7 +61,7 @@ }, 50) } - dispatch('openChange', isOpen) + onOpenChange?.(isOpen) } function handleHoverChange(isHovering: boolean) { @@ -73,90 +81,101 @@ } } - $: handleHoverChange(hover) - $: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined + $effect(() => { + handleHoverChange(hover) + }); + let ajustedWidth = $derived(maxWidth ? Math.abs(maxWidth - xOffset) : undefined) { + onOpenChange={handlePopoverChange} + onclick={(e) => { e.stopPropagation() }} closeOnOtherPopoverOpen closeOnClickOutside={false} usePointerDownOutside > - -
- {/if} - -
-
-
- {/if} -
- + {/if} +
+ + {/snippet} diff --git a/frontend/src/lib/components/SavedInputsV2.svelte b/frontend/src/lib/components/SavedInputsV2.svelte index 0b302625d5..7823a7caaf 100644 --- a/frontend/src/lib/components/SavedInputsV2.svelte +++ b/frontend/src/lib/components/SavedInputsV2.svelte @@ -89,7 +89,7 @@ class="w-fit" usePointerDownOutside closeOnOtherPopoverOpen - on:click={(e) => { + onclick={(e) => { e.stopPropagation() }} floatingConfig={{ placement: 'top-end' }} diff --git a/frontend/src/lib/components/SchemaEditorProperty.svelte b/frontend/src/lib/components/SchemaEditorProperty.svelte index 611e178981..fa12138c0d 100644 --- a/frontend/src/lib/components/SchemaEditorProperty.svelte +++ b/frontend/src/lib/components/SchemaEditorProperty.svelte @@ -2,7 +2,11 @@ import type { SchemaProperty } from '$lib/common' import Badge from './common/badge/Badge.svelte' - export let property: SchemaProperty + interface Props { + property: SchemaProperty; + } + + let { property }: Props = $props();
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte index e79e888075..a649eabf99 100644 --- a/frontend/src/lib/components/ScriptBuilder.svelte +++ b/frontend/src/lib/components/ScriptBuilder.svelte @@ -1230,7 +1230,10 @@ {#if script.schema && !disableAi && !customUi?.settingsPanel?.metadata?.disableAiFilling}
script.schema!.prompt_for_ai as string | undefined, + (v) => (script.schema!.prompt_for_ai = v) + } type="script" />
diff --git a/frontend/src/lib/components/Scrollable.svelte b/frontend/src/lib/components/Scrollable.svelte index 37e3ae2933..540f43b9dc 100644 --- a/frontend/src/lib/components/Scrollable.svelte +++ b/frontend/src/lib/components/Scrollable.svelte @@ -2,14 +2,24 @@ import { onMount, onDestroy } from 'svelte' import { twMerge } from 'tailwind-merge' - let isAtBottom: boolean = false - let isScrollable = false + let isAtBottom: boolean = $state(false) + let isScrollable = $state(false) - export let id: string | null | undefined = undefined - export let scrollableClass: string = '' - export let shiftedShadow: boolean = false + interface Props { + id?: string | null | undefined; + scrollableClass?: string; + shiftedShadow?: boolean; + children?: import('svelte').Snippet; + } + + let { + id = undefined, + scrollableClass = '', + shiftedShadow = false, + children + }: Props = $props(); let mutationObserver: MutationObserver - let el: HTMLDivElement + let el: HTMLDivElement = $state() function handleScroll(event) { const scrollableElement = event.target @@ -45,8 +55,8 @@
-
- +
+ {@render children?.()}
{#if !isAtBottom && isScrollable}
{ + onclick={() => { let logLineNumber = document.line_number[0] let logFile = document.file_name[0] let host = document.host[0] diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte index e5ad54f88b..0389ec5168 100644 --- a/frontend/src/lib/components/ShareModal.svelte +++ b/frontend/src/lib/components/ShareModal.svelte @@ -154,12 +154,13 @@ {/if} {#if acls?.length > 0} - - - owner - - - + {#snippet header_row()} + + owner + + + + {/snippet} {#snippet body()} {#each acls as [owner, write]} diff --git a/frontend/src/lib/components/Slider.svelte b/frontend/src/lib/components/Slider.svelte index c2ca0abbdd..e3269cde09 100644 --- a/frontend/src/lib/components/Slider.svelte +++ b/frontend/src/lib/components/Slider.svelte @@ -5,10 +5,21 @@ import Tooltip from './Tooltip.svelte' import { twMerge } from 'tailwind-merge' - export let text: string - export let tooltip: string | undefined = undefined - export let view = false - export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md' + interface Props { + text: string; + tooltip?: string | undefined; + view?: boolean; + size?: 'xs' | 'sm' | 'md' | 'lg'; + children?: import('svelte').Snippet; + } + + let { + text, + tooltip = undefined, + view = $bindable(false), + size = 'md', + children + }: Props = $props(); diff --git a/frontend/src/lib/components/TestConnection.svelte b/frontend/src/lib/components/TestConnection.svelte index 576bbc9334..7c59a2a324 100644 --- a/frontend/src/lib/components/TestConnection.svelte +++ b/frontend/src/lib/components/TestConnection.svelte @@ -7,10 +7,19 @@ import { workspaceStore } from '$lib/stores' import { tryEvery } from '$lib/utils' - export let workspaceOverride: string | undefined = undefined - export let resourceType: string | undefined - export let args: Record | any = {} - export let buttonTextOverride: string | undefined = undefined + interface Props { + workspaceOverride?: string | undefined; + resourceType: string | undefined; + args?: Record | any; + buttonTextOverride?: string | undefined; + } + + let { + workspaceOverride = undefined, + resourceType, + args = {}, + buttonTextOverride = undefined + }: Props = $props(); const scripts: { [key: string]: { @@ -166,7 +175,7 @@ export async function main(bucket: any) { } } - let loading = false + let loading = $state(false) async function testConnection() { if (!resourceType) return loading = true diff --git a/frontend/src/lib/components/TooltipInner.svelte b/frontend/src/lib/components/TooltipInner.svelte index 437fbc1c02..215d58a499 100644 --- a/frontend/src/lib/components/TooltipInner.svelte +++ b/frontend/src/lib/components/TooltipInner.svelte @@ -4,9 +4,19 @@ import { gfmPlugin } from 'svelte-exmarkdown/gfm' import { twMerge } from 'tailwind-merge' - export let documentationLink: string | undefined = undefined - export let markdownTooltip: string | undefined = undefined - export let customBgClass: string | undefined = undefined + interface Props { + documentationLink?: string | undefined; + markdownTooltip?: string | undefined; + customBgClass?: string | undefined; + children?: import('svelte').Snippet; + } + + let { + documentationLink = undefined, + markdownTooltip = undefined, + customBgClass = undefined, + children + }: Props = $props(); const plugins = [gfmPlugin()] @@ -21,7 +31,7 @@
{:else} - + {@render children?.()} {/if} {#if documentationLink} diff --git a/frontend/src/lib/components/Uptodate.svelte b/frontend/src/lib/components/Uptodate.svelte index de5a459083..40a231e6be 100644 --- a/frontend/src/lib/components/Uptodate.svelte +++ b/frontend/src/lib/components/Uptodate.svelte @@ -3,7 +3,7 @@ import { isCloudHosted } from '$lib/cloud' import Tooltip from './Tooltip.svelte' - let uptodate: string | undefined = undefined + let uptodate: string | undefined = $state(undefined) async function loadVersion() { try { diff --git a/frontend/src/lib/components/Urlize.svelte b/frontend/src/lib/components/Urlize.svelte index 060ec9f141..d682a39ca9 100644 --- a/frontend/src/lib/components/Urlize.svelte +++ b/frontend/src/lib/components/Urlize.svelte @@ -1,8 +1,12 @@ {@html parsed} diff --git a/frontend/src/lib/components/Version.svelte b/frontend/src/lib/components/Version.svelte index 9406bed01f..aa0b58624d 100644 --- a/frontend/src/lib/components/Version.svelte +++ b/frontend/src/lib/components/Version.svelte @@ -1,7 +1,7 @@ {#if flow_status} diff --git a/frontend/src/lib/components/ZitadelSetting.svelte b/frontend/src/lib/components/ZitadelSetting.svelte index ce8b879db9..430c4c588c 100644 --- a/frontend/src/lib/components/ZitadelSetting.svelte +++ b/frontend/src/lib/components/ZitadelSetting.svelte @@ -1,16 +1,20 @@
- +