windmill-components 1.405.0 → 1.406.0

package/package/assets/app.css

@@ -145,3 +145,23 @@ svelte-virtual-list-contents > * + * {
 		rgba(255, 69, 58, 0.2) 20px
 	);
 }
+
+.bg-draggedover {
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgba(0, 0, 128, 0.2),
+		rgba(0, 0, 192, 0.2) 10px,
+		rgba(0, 0, 128, 0.2) 10px,
+		rgba(0, 0, 192, 0.2) 20px
+	);
+}
+
+.bg-draggedover-dark {
+	background-image: repeating-linear-gradient(
+		-45deg,
+		rgba(0, 0, 128, 0.6),
+		rgba(0, 0, 192, 0.6) 10px,
+		rgba(0, 0, 128, 0.6) 10px,
+		rgba(0, 0, 192, 0.6) 20px
+	);
+}

package/package/components/AppConnectLightweightResourcePicker.svelte

@@ -0,0 +1,66 @@
+<script>import { base } from '$app/paths';
+import AppConnectInner from './AppConnectInner.svelte';
+import DarkModeObserver from './DarkModeObserver.svelte';
+import { Button } from './common';
+import { workspaceStore } from '../stores';
+import { onMount } from 'svelte';
+export let resourceType = undefined;
+export let workspace;
+export let express = false;
+let step = 1;
+let disabled = false;
+let isGoogleSignin = false;
+let manual = true;
+let appConnect = undefined;
+let darkMode = false;
+if (workspace) {
+    $workspaceStore = workspace;
+}
+onMount(async () => {
+    if (resourceType) {
+        appConnect?.open(resourceType, express);
+    }
+});
+</script>
+
+<DarkModeObserver bind:darkMode />
+
+<div>
+	<div class="flex flex-row-reverse w-full">
+		<div class="flex gap-2">
+			{#if step > 2}
+				<Button variant="border" on:click={appConnect?.back}>Back</Button>
+			{/if}
+
+			{#if isGoogleSignin}
+				<button {disabled} on:click={appConnect?.next}>
+					<img
+						class="h-10 w-auto object-contain"
+						src={darkMode ? base + '/google_signin_dark.png' : base + '/google_signin_light.png'}
+						alt="Google sign-in"
+					/>
+				</button>
+			{:else}
+				<Button {disabled} on:click={appConnect?.next}>
+					{#if step == 2 && !manual}
+						Connect
+					{:else if step == 1}
+						Next
+					{:else}
+						Save
+					{/if}
+				</Button>
+			{/if}
+		</div>
+	</div>
+	<AppConnectInner
+		bind:this={appConnect}
+		bind:step
+		bind:resourceType
+		bind:isGoogleSignin
+		bind:disabled
+		bind:manual
+		on:error
+		on:refresh
+	/>
+</div>

package/package/components/AppConnectLightweightResourcePicker.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        resourceType?: string | undefined;
+        workspace: string;
+        express?: boolean | undefined;
+    };
+    events: {
+        error: CustomEvent<any>;
+        refresh: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppConnectLightweightResourcePickerProps = typeof __propDef.props;
+export type AppConnectLightweightResourcePickerEvents = typeof __propDef.events;
+export type AppConnectLightweightResourcePickerSlots = typeof __propDef.slots;
+export default class AppConnectLightweightResourcePicker extends SvelteComponent<AppConnectLightweightResourcePickerProps, AppConnectLightweightResourcePickerEvents, AppConnectLightweightResourcePickerSlots> {
+}
+export {};

package/package/components/ArgInput.svelte

@@ -67,6 +67,7 @@ export let order = undefined;
 export let editor = undefined;
 export let orderEditable = false;
 export let shouldDispatchChanges = false;
+export let noDefaultOnSelectFirst = false;
 export let helperScript = undefined;
 export let otherArgs = {};
 let oneOfSelected = undefined;
@@ -495,11 +496,14 @@ $: shouldDispatchChanges && debounced(value);
 			{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
 				<ObjectResourceInput
 					{defaultValue}
-					selectFirst
+					selectFirst={!noDefaultOnSelectFirst}
 					{disablePortal}
 					{format}
 					bind:value
 					bind:editor
+					on:clear={() => {
+						defaultValue = null
+					}}
 					{showSchemaExplorer}
 				/>
 			{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format
@@ -765,7 +769,7 @@ $: shouldDispatchChanges && debounced(value);
 				</div>
 			{:else if inputCat == 'resource-string'}
 				<ResourcePicker
-					selectFirst
+					selectFirst={noDefaultOnSelectFirst}
 					{disablePortal}
 					bind:value
 					initialValue={defaultValue}

package/package/components/ArgInput.svelte.d.ts

@@ -57,6 +57,7 @@ declare const __propDef: {
         editor?: SimpleEditor | undefined;
         orderEditable?: boolean | undefined;
         shouldDispatchChanges?: boolean | undefined;
+        noDefaultOnSelectFirst?: boolean | undefined;
         helperScript?: {
             type: 'inline';
             path?: string | undefined;

package/package/components/CustomPopover.svelte

@@ -59,7 +59,7 @@ $: focusEl && focusEl?.focus();
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
-	<Portal>
+	<Portal name="custom-popover">
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			use:popperContent={popperOptions}

package/package/components/DisplayResult.svelte

@@ -774,7 +774,7 @@ let seeS3PreviewFileFromList = '';
 			</DrawerContent>
 		</Drawer>
 
-		<Portal>
+		<Portal name="s3filepicker">
 			<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
 		</Portal>
 	{/if}

package/package/components/FlowBuilder.svelte

@@ -48,6 +48,7 @@ export let savedFlow = undefined;
 export let diffDrawer = undefined;
 export let customUi = {};
 export let disableAi = false;
+export let disabledFlowInputs = false;
 $: setContext('customUi', customUi);
 const dispatch = createEventDispatcher();
 async function createSchedule(path) {
@@ -1134,6 +1135,7 @@ let msgInput = undefined;
 			<!-- metadata -->
 			{#if $flowStateStore}
 				<FlowEditor
+					{disabledFlowInputs}
 					disableAi={disableAi || customUi?.stepInputs?.ai == false}
 					disableSettings={customUi?.settingsPanel === false}
 					{loading}

package/package/components/FlowBuilder.svelte.d.ts

@@ -20,6 +20,7 @@ declare const __propDef: {
         diffDrawer?: DiffDrawer | undefined;
         customUi?: FlowBuilderWhitelabelCustomUi | undefined;
         disableAi?: boolean | undefined;
+        disabledFlowInputs?: boolean | undefined;
         computeUnlockedSteps?: ((flow: Flow) => {
             [k: string]: string;
         }) | undefined;

package/package/components/FlowInputViewer.svelte

@@ -0,0 +1,25 @@
+<script>import FieldHeader from './FieldHeader.svelte';
+export let schema;
+</script>
+
+<ul class="my-2">
+	{#if schema == undefined}
+		<li class="text-secondary text-xs italic mb-4">No inputs</li>
+	{:else}
+		{#each Object.entries(schema.properties ?? {}) as [inp, v]}
+			<li class="list-disc flex flex-row items-center">
+				<FieldHeader
+					label={inp}
+					required={Array.isArray(schema.required) && schema.required?.includes(inp)}
+					type={v?.type}
+					contentEncoding={v?.contentEncoding}
+					format={v?.format}
+				/><span class="ml-4 mt-1 text-xs"
+					>{v?.default != undefined && v?.default != ''
+						? 'default: ' + JSON.stringify(v?.default)
+						: ''}</span
+				>
+			</li>
+		{/each}
+	{/if}
+</ul>

package/package/components/FlowInputViewer.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { Schema } from '../common';
+declare const __propDef: {
+    props: {
+        schema: Schema | {
+            [key: string]: unknown;
+        } | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FlowInputViewerProps = typeof __propDef.props;
+export type FlowInputViewerEvents = typeof __propDef.events;
+export type FlowInputViewerSlots = typeof __propDef.slots;
+export default class FlowInputViewer extends SvelteComponent<FlowInputViewerProps, FlowInputViewerEvents, FlowInputViewerSlots> {
+}
+export {};

package/package/components/FlowJobResult.svelte

@@ -18,6 +18,7 @@ export let tag = undefined;
 export let workspaceId = undefined;
 export let refreshLog = false;
 export let durationStates;
+export let downloadLogs = true;
 let lastJobId = undefined;
 let drawer = undefined;
 $: jobId != lastJobId && diffJobId();
@@ -76,6 +77,12 @@ async function getLogs() {
 		<div class="absolute z-40 text-xs top-0 left-1"
 			><button class="" on:click={drawer.openDrawer}>explore all steps' logs</button></div
 		>
-		<LogViewer content={logs ?? ''} {jobId} isLoading={waitingForExecutor} {tag} />
+		<LogViewer
+			download={downloadLogs}
+			content={logs ?? ''}
+			{jobId}
+			isLoading={waitingForExecutor}
+			{tag}
+		/>
 	</div>
 </div>

package/package/components/FlowJobResult.svelte.d.ts

@@ -15,6 +15,7 @@ declare const __propDef: {
         workspaceId?: string | undefined;
         refreshLog?: boolean | undefined;
         durationStates: Writable<Record<string, DurationStatus>> | undefined;
+        downloadLogs?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/FlowMetadata.svelte

@@ -24,7 +24,7 @@ export let scheduleEditor;
 			{#if job['success'] != undefined}
 				Received job: {displayDate(job.created_at ?? '')}
 			{:else}
-				Received job <TimeAgo withDate date={job.created_at ?? ''} />
+				Received job <TimeAgo date={job.created_at ?? ''} />
 			{/if}
 			<Tooltip small>{job?.created_at}</Tooltip>
 		</span>
@@ -33,7 +33,7 @@ export let scheduleEditor;
 		<div class="flex flex-row gap-2 items-center text-sm">
 			<Clock size={SMALL_ICON_SIZE} class="text-secondary min-w-3.5" />
 			<span class="whitespace-nowrap">
-				Started <TimeAgo withDate agoOnlyIfRecent date={job.started_at ?? ''} />
+				Started <TimeAgo agoOnlyIfRecent date={job.started_at ?? ''} />
 				<Tooltip small>{job?.started_at}</Tooltip>
 			</span>
 		</div>

package/package/components/FlowPreviewContent.svelte

@@ -28,7 +28,7 @@ let jobProgressReset;
 export function test() {
     runPreview($previewArgs, undefined);
 }
-const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, initialPath } = getContext('FlowEditorContext');
+const { selectedId, previewArgs, flowStateStore, flowStore, pathStore, initialPath, customUi } = getContext('FlowEditorContext');
 const dispatch = createEventDispatcher();
 function extractFlow(previewMode) {
     if (previewMode === 'whole') {
@@ -310,6 +310,7 @@ let renderCount = 0;
 		<div class="pt-4 flex flex-col grow">
 			{#if jobId}
 				<FlowStatusViewer
+					hideDownloadInGraph={customUi?.downloadLogs === false}
 					wideResults
 					{flowStateStore}
 					{jobId}

package/package/components/FlowStatusViewer.svelte

@@ -13,6 +13,7 @@ export let hideTimeline = false;
 export let hideDownloadInGraph = false;
 export let hideNodeDefinition = false;
 export let hideJobId = false;
+export let hideDownloadLogs = false;
 export let isOwner = false;
 export let wideResults = false;
 let lastJobId = jobId;
@@ -25,7 +26,8 @@ setContext('FlowStatusViewer', {
     hideDownloadInGraph,
     hideNodeDefinition,
     hideTimeline,
-    hideJobId
+    hideJobId,
+    hideDownloadLogs
 });
 function loadOwner(path) {
     isOwner = loadIsOwner(path, $userStore, workspaceId ?? $workspaceStore);

package/package/components/FlowStatusViewer.svelte.d.ts

@@ -14,6 +14,7 @@ declare const __propDef: {
         hideDownloadInGraph?: boolean | undefined;
         hideNodeDefinition?: boolean | undefined;
         hideJobId?: boolean | undefined;
+        hideDownloadLogs?: boolean | undefined;
         isOwner?: boolean | undefined;
         wideResults?: boolean | undefined;
     };

package/package/components/FlowStatusViewerInner.svelte

@@ -22,7 +22,7 @@ import Alert from './common/alert/Alert.svelte';
 import FlowGraphViewerStep from './FlowGraphViewerStep.svelte';
 import FlowGraphV2 from './graph/FlowGraphV2.svelte';
 const dispatch = createEventDispatcher();
-let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition } = getContext('FlowStatusViewer');
+let { flowStateStore, retryStatus, suspendStatus, hideDownloadInGraph, hideTimeline, hideNodeDefinition, hideDownloadLogs } = getContext('FlowStatusViewer');
 export let jobId;
 export let initialJob = undefined;
 export let workspaceId = undefined;
@@ -540,6 +540,7 @@ let wrapperHeight = 0;
 								result={job.result}
 								logs={job.logs}
 								durationStates={localDurationStatuses}
+								downloadLogs={!hideDownloadLogs}
 							/>
 						</div>
 					{/if}
@@ -897,6 +898,7 @@ let wrapperHeight = 0;
 											result={job['result']}
 											logs={job.logs ?? ''}
 											durationStates={localDurationStatuses}
+											downloadLogs={!hideDownloadLogs}
 										/>
 									{:else if selectedNode == 'start'}
 										{#if job.args}
@@ -972,6 +974,7 @@ let wrapperHeight = 0;
 											tag={node.tag}
 											logs={node.logs}
 											durationStates={localDurationStatuses}
+											downloadLogs={!hideDownloadLogs}
 										/>
 									{:else}
 										<p class="p-2 text-tertiary italic"

package/package/components/FlowViewer.svelte

@@ -1,9 +1,9 @@
 <script>import { Tab, Tabs, TabContent } from './common';
 import SchemaViewer from './SchemaViewer.svelte';
-import FieldHeader from './FieldHeader.svelte';
 import FlowGraphViewer from './FlowGraphViewer.svelte';
 import HighlightTheme from './HighlightTheme.svelte';
 import FlowViewerInner from './FlowViewerInner.svelte';
+import FlowInputViewer from './FlowInputViewer.svelte';
 export let flow;
 export let initialOpen = undefined;
 export let noSide = false;
@@ -15,9 +15,6 @@ let open = {};
 if (initialOpen) {
     open[initialOpen] = true;
 }
-function toAny(x) {
-    return x;
-}
 </script>
 
 <HighlightTheme />
@@ -41,23 +38,7 @@ function toAny(x) {
 					<span>Flow Input</span>
 				</p>
 				{#if flow.schema && flow.schema.properties && Object.keys(flow.schema.properties).length > 0 && flow.schema}
-					<ul class="my-2">
-						{#each Object.entries(flow.schema.properties) as [inp, v]}
-							<li class="list-disc flex flex-row">
-								<FieldHeader
-									label={inp}
-									required={flow.schema.required?.includes(inp)}
-									type={toAny(v)?.type}
-									contentEncoding={toAny(v)?.contentEncoding}
-									format={toAny(v)?.format}
-								/><span class="ml-4 mt-2 text-xs"
-									>{toAny(v)?.default != undefined
-										? 'default: ' + JSON.stringify(toAny(v)?.default)
-										: ''}</span
-								>
-							</li>
-						{/each}
-					</ul>
+					<FlowInputViewer schema={flow.schema} />
 				{:else}
 					<div class="text-secondary text-xs italic mb-4">No inputs</div>
 				{/if}

package/package/components/LightweightResourcePicker.svelte

@@ -1,12 +1,11 @@
 <script>import { ResourceService } from '../gen';
-import { base } from '../base';
 import { workspaceStore } from '../stores';
 import { createEventDispatcher, getContext } from 'svelte';
 import Select from './apps/svelte-select/lib/index';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../defaults';
 import DarkModeObserver from './DarkModeObserver.svelte';
 import { Button, Drawer, DrawerContent } from './common';
-import { Plus } from 'lucide-svelte';
+import { Plus, Loader2 } from 'lucide-svelte';
 import { sendUserToast } from '../toast';
 const dispatch = createEventDispatcher();
 export let initialValue = undefined;
@@ -47,21 +46,6 @@ export function askNewResource() {
     refreshCount += 1;
     open = true;
 }
-function processEvent(event) {
-    if (event.origin !== window.location.origin) {
-        return;
-    }
-    if (event.data.type === 'error') {
-        sendUserToast(event.data.error, true);
-    }
-    if (event.data.type === 'refresh') {
-        window.removeEventListener('message', processEvent);
-        value = event.data.detail;
-        valueSelect = { value, label: value };
-        drawer?.closeDrawer?.();
-        open = false;
-    }
-}
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -69,12 +53,15 @@ function processEvent(event) {
 {#if expressOAuthSetup}
 	{#if open}
 		{#key refreshCount}
-			<iframe
-				title="App connection"
-				class="w-full h-full hidden"
-				src="{base}/embed_connect?resource_type={resourceType}&workspace={appViewerContext?.workspace ??
-					$workspaceStore}&express=true"
-			/>
+			{#await import('./AppConnectLightweightResourcePicker.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default
+					workspace={appViewerContext?.workspace ?? $workspaceStore}
+					{resourceType}
+					express={true}
+				/>
+			{/await}
 		{/key}
 	{/if}
 {:else}
@@ -85,12 +72,31 @@ function processEvent(event) {
 			tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 			documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
 		>
-			<iframe
+			{#await import('./AppConnectLightweightResourcePicker.svelte')}
+				<Loader2 class="animate-spin" />
+			{:then Module}
+				<Module.default
+					workspace={appViewerContext?.workspace ?? $workspaceStore}
+					{resourceType}
+					express={false}
+					on:error={(e) => {
+						sendUserToast(e.detail, true)
+					}}
+					on:refresh={(e) => {
+						value = e.detail
+						valueSelect = { value, label: value }
+						drawer?.closeDrawer?.()
+						open = false
+					}}
+				/>
+			{/await}
+
+			<!-- <iframe
 				title="App connection"
 				class="w-full h-full"
 				src="{base}/embed_connect?resource_type={resourceType}&workspace={appViewerContext?.workspace ??
 					$workspaceStore}&express=false"
-			/>
+			/> -->
 		</DrawerContent>
 	</Drawer>
 {/if}
@@ -122,13 +128,11 @@ function processEvent(event) {
 			<Button
 				{disabled}
 				color="light"
-				variant="border"
-				size="xs"
+				variant="contained"
+				btnClasses="w-8 px-0.5 py-1.5"
+				size="sm"
 				on:click={() => {
 					open = true
-					window.removeEventListener('message', processEvent)
-					window.addEventListener('message', processEvent)
-
 					drawer?.openDrawer?.()
 				}}
 				startIcon={{ icon: Plus }}

package/package/components/LogViewer.svelte

@@ -26,6 +26,7 @@ export let small = false;
 export let drawerOpen = false;
 export let noMaxH = false;
 export let noAutoScroll = false;
+export let download = true;
 // @ts-ignore
 const ansi_up = new AnsiUp();
 ansi_up.use_classes = true;
@@ -75,7 +76,7 @@ $: truncatedContent = truncateContent(content, loadedFromObjectStore, LOG_LIMIT)
 $: prefixIndex = findPrefixIndex(truncatedContent);
 $: downloadStartUrl = findStartUrl(truncatedContent, prefixIndex);
 function truncateContent(jobContent, loadedFromObjectStore, limit) {
-    let content = loadedFromObjectStore + jobContent ?? '';
+    let content = loadedFromObjectStore + (jobContent ?? '');
     if (content.length > limit) {
         return content.substring(content.length - limit);
     }
@@ -121,7 +122,7 @@ function showMoreTruncate(len) {
 <Drawer bind:this={logViewer} bind:open={drawerOpen} size="900px">
 	<DrawerContent title="Expanded Logs" on:close={logViewer.closeDrawer}>
 		<svelte:fragment slot="actions">
-			{#if jobId}
+			{#if jobId && download}
 				<Button
 					href="{base}/api/w/{$workspaceStore}/jobs_u/get_logs/{jobId}"
 					download="windmill_logs_{jobId}.txt"
@@ -169,7 +170,7 @@ function showMoreTruncate(len) {
 	>
 		<div class="sticky z-10 top-0 right-0 w-full flex flex-row-reverse justify-between text-sm">
 			<div class="flex gap-2 pl-0.5 bg-surface-secondary">
-				{#if jobId}
+				{#if jobId && download}
 					<div class="flex items-center">
 						<a
 							class="text-primary pb-0.5"

package/package/components/LogViewer.svelte.d.ts

@@ -12,6 +12,7 @@ declare const __propDef: {
         drawerOpen?: boolean | undefined;
         noMaxH?: boolean | undefined;
         noAutoScroll?: boolean | undefined;
+        download?: boolean | undefined;
         scrollToBottom?: (() => void) | undefined;
     };
     events: {

package/package/components/ManualPopover.svelte

@@ -20,7 +20,7 @@ export function close() {
 	<slot />
 </fragment>
 {#if showTooltip}
-	<Portal>
+	<Portal name="manual-popover">
 		<div
 			use:popperContent
 			class={twMerge('z-[901] rounded-lg shadow-md border p-4 bg-surface', $$props.class)}

package/package/components/ObjectResourceInput.svelte

@@ -14,7 +14,7 @@ function isString(value) {
 }
 export let path = '';
 function resourceToValue() {
-    if (path) {
+    if (path && path != '') {
         value = `$res:${path}`;
     }
     else {
@@ -43,8 +43,11 @@ $: value && valueToPath();
 				path = e.detail
 				resourceToValue()
 			}}
+			on:clear
 			bind:value={path}
-			initialValue={defaultValue}
+			initialValue={typeof defaultValue == 'string' && defaultValue.startsWith('$res:')
+				? defaultValue.substr('$res:'.length)
+				: defaultValue}
 			resourceType={format.split('-').length > 1 ? format.substring('resource-'.length) : undefined}
 			{showSchemaExplorer}
 		/>

package/package/components/ObjectResourceInput.svelte.d.ts

@@ -12,6 +12,8 @@ declare const __propDef: {
         path?: string | undefined;
     };
     events: {
+        clear: CustomEvent<any>;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/package/components/Popover.svelte

@@ -60,7 +60,7 @@ function close() {
 	</button>
 {/if}
 {#if showTooltip && !disablePopup}
-	<Portal>
+	<Portal name="popover">
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			use:popperContent={popperOptions}

package/package/components/Portal.svelte

@@ -1,13 +1,8 @@
 <script context="module">
 	import { tick } from 'svelte'
 
-	/**
-	 * Usage: <div use:portal={'css selector'}> or <div use:portal={document.body}>
-	 *
-	 * @param {HTMLElement} el
-	 * @param {HTMLElement|string} target DOM Element or CSS Selector
-	 */
-	export function portal(el, target = 'body') {
+	export function portal(el, options) {
+		let { target, name } = options
 		let targetEl
 		async function update(newTarget) {
 			target = newTarget
@@ -32,6 +27,9 @@
 			if (!el.classList.contains('windmill-app')) {
 				el.classList.add('windmill-app')
 			}
+			if (name && !el.classList.contains(name)) {
+				el.classList.add(name)
+			}
 			targetEl.appendChild(el)
 			el.hidden = false
 		}
@@ -56,8 +54,9 @@
 	 * @type { HTMLElement|string}
 	 */
 	export let target = 'body'
+	export let name = undefined
 </script>
 
-<div use:portal={target} hidden>
+<div use:portal={{ target, name }} hidden>
 	<slot />
 </div>