windmill-components 1.537.1 → 1.542.5

package/package/components/schema/FlowPropertyEditor.svelte

@@ -4,9 +4,7 @@ import Toggle from '../Toggle.svelte';
 import SimpleEditor from '../SimpleEditor.svelte';
 import { createEventDispatcher } from 'svelte';
 import ArgInput from '../ArgInput.svelte';
-import ObjectTypeNarrowing from '../ObjectTypeNarrowing.svelte';
-import Tabs from '../common/tabs/Tabs.svelte';
-import { Tab, TabContent } from '../common';
+import ResourceNarrowing from '../ResourceNarrowing.svelte';
 import EditableSchemaDrawer from './EditableSchemaDrawer.svelte';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
@@ -14,7 +12,7 @@ import Button from '../common/button/Button.svelte';
 import { Pen, Plus, Trash2 } from 'lucide-svelte';
 import Popover from '../meltComponents/Popover.svelte';
 import ResourcePicker from '../ResourcePicker.svelte';
-import Tooltip from '../Tooltip.svelte';
+import { DynamicInput } from '../../utils';
 let { format = $bindable(undefined), contentEncoding = undefined, type = undefined, oneOf = $bindable(undefined), required = false, pattern = undefined, password = undefined, variableEditor = undefined, itemPicker = undefined, nullable = $bindable(undefined), disabled = $bindable(undefined), defaultValue = $bindable(undefined), propsNames = [], showExpr = $bindable(undefined), extra = {}, customErrorMessage = undefined, itemsType = undefined, properties = $bindable(undefined), order = $bindable(undefined), requiredProperty = $bindable(undefined), displayWebhookWarning = true, onDrawerClose = undefined } = $props();
 let oneOfSelected = $state(oneOf?.[0]?.title);
 const dispatch = createEventDispatcher();
@@ -65,229 +63,222 @@ let initialObjectSelected = $state(format === 'json-schema'
         : Object.keys(properties ?? {}).length == 0
             ? 'resource'
             : 'custom-object');
-let isDynSelect = $derived(format?.startsWith('dynselect-') ?? false);
+let isDyn = $derived(DynamicInput.isDynInputFormat(format));
 let customObjectSelected = $state(format?.startsWith('jsonschema-') ? 'json-schema-resource' : 'editor');
 </script>
 
-<div class="flex flex-col gap-2">
+<div class="flex flex-col gap-2 mt-2">
 	{#if type === 'object' && oneOf && oneOf.length >= 2}
-		<div class="flex flex-row gap-1 items-center justify-start">
-			<ToggleButtonGroup
-				bind:selected={oneOfSelected}
-				class="h-auto w-auto"
-				tabListClass="flex-wrap"
-			>
-				{#snippet children({ item })}
-					{#each oneOf ?? [] as obj}
-						<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
-					{/each}
-				{/snippet}
-			</ToggleButtonGroup>
+		<Label label="OneOf properties">
+			<div class="flex flex-row gap-1 items-center justify-start pt-2">
+				<ToggleButtonGroup
+					bind:selected={oneOfSelected}
+					class="h-auto w-auto"
+					tabListClass="flex-wrap"
+				>
+					{#snippet children({ item })}
+						{#each oneOf ?? [] as obj}
+							<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
+						{/each}
+					{/snippet}
+				</ToggleButtonGroup>
 
-			<Popover placement="bottom-end" closeButton>
-				{#snippet trigger()}
-					<Button size="xs2" color="light" nonCaptureEvent startIcon={{ icon: Plus }} />
-				{/snippet}
-				{#snippet content({ close })}
-					<Label label="Label" class="p-2 flex flex-col gap-2">
-						<input
-							type="text"
-							class="w-full !bg-surface"
-							onkeydown={(event) => {
-								if (event.key === 'Enter') {
+				<Popover placement="bottom-end" closeButton>
+					{#snippet trigger()}
+						<Button size="xs2" color="light" nonCaptureEvent startIcon={{ icon: Plus }} />
+					{/snippet}
+					{#snippet content({ close })}
+						<Label label="Label" class="p-2 flex flex-col gap-2">
+							<input
+								type="text"
+								class="w-full !bg-surface"
+								onkeydown={(event) => {
+									if (event.key === 'Enter') {
+										createVariant(variantName)
+										close()
+									}
+								}}
+								bind:value={variantName}
+							/>
+							<Button
+								variant="border"
+								color="light"
+								size="xs"
+								on:click={() => {
 									createVariant(variantName)
 									close()
-								}
-							}}
-							bind:value={variantName}
-						/>
-						<Button
-							variant="border"
-							color="light"
-							size="xs"
-							on:click={() => {
-								createVariant(variantName)
-								close()
-							}}
-							disabled={variantName.length === 0}
-						>
-							Add
-						</Button>
-					</Label>
-				{/snippet}
-			</Popover>
-		</div>
-		<div class="flex flex-row gap-2 items-center">
-			<span class="font-semibold text-sm">{oneOfSelected}</span>
+								}}
+								disabled={variantName.length === 0}
+							>
+								Add
+							</Button>
+						</Label>
+					{/snippet}
+				</Popover>
+			</div>
+			<div class="flex flex-row gap-2 items-center ml-1 mt-4 mb-2">
+				<span class="font-semibold text-sm">{oneOfSelected}</span>
 
-			<Popover
-				floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
-				containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
-				closeButton
-			>
-				{#snippet trigger()}
-					<Button
-						size="xs2"
-						color="light"
-						startIcon={{ icon: Pen }}
-						propagateEvent
-						iconOnly={false}
-						on:click={() => {
-							if (oneOfSelected) {
-								variantName = oneOfSelected
-							}
-						}}
-					/>
-				{/snippet}
-				{#snippet content({ close })}
-					<Label label="Label" class="p-2 flex flex-col gap-2">
-						<input
-							type="text"
-							class="w-full !bg-surface"
-							onkeydown={(event) => {
-								if (event.key === 'Enter') {
-									if (oneOfSelected) {
-										renameVariant(variantName, oneOfSelected)
-										close()
-									}
-								}
-							}}
-							bind:value={variantName}
-						/>
+				<Popover
+					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
+					containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
+					closeButton
+				>
+					{#snippet trigger()}
 						<Button
-							variant="border"
+							size="xs2"
 							color="light"
-							size="xs"
+							startIcon={{ icon: Pen }}
+							propagateEvent
+							iconOnly={false}
 							on:click={() => {
 								if (oneOfSelected) {
-									renameVariant(variantName, oneOfSelected)
-									close()
+									variantName = oneOfSelected
 								}
 							}}
-							disabled={variantName.length === 0}
-						>
-							Rename
-						</Button>
-					</Label>
-				{/snippet}
-			</Popover>
-			<Button
-				size="xs2"
-				color="red"
-				startIcon={{ icon: Trash2 }}
-				iconOnly
-				disabled={(oneOf?.length ?? 0) <= 2}
-				on:click={() => {
-					if (oneOf && oneOfSelected) {
-						const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)
-						oneOf = oneOf.filter((_, i) => i !== idx)
-						oneOfSelected = oneOf[0].title
-					}
-				}}
-			/>
-		</div>
-		{#if oneOfSelected && oneOf}
-			{@const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)}
-			<EditableSchemaDrawer
-				onClose={() => {
-					onDrawerClose?.()
-				}}
-				bind:schema={oneOf[idx]}
-				hiddenArgs={[
-					oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind')) ? 'kind' : 'label'
-				]}
-			/>
-		{/if}
-	{:else if type === 'object' && format !== 'resource-s3_object' && !isDynSelect}
-		<Tabs
-			bind:selected={initialObjectSelected}
-			on:selected={(e) => {
-				if (e.detail === 'json-schema') {
-					format = 'json-schema'
-				} else {
-					format = ''
-				}
-			}}
-		>
-			<Tab value="resource">Resource</Tab>
-			<Tab value="custom-object">Custom Object</Tab>
-			<Tab value="json-schema">
-				JSON Schema
-				<Tooltip>
-					This displays a JSON schema editor, useful when a JSON schema input is expected.
-				</Tooltip>
-			</Tab>
-			{#snippet content()}
-				<div class="pt-2">
-					<TabContent value="custom-object">
-						<ToggleButtonGroup
-							bind:selected={customObjectSelected}
-							class="mb-2"
-							on:selected={(e) => {
-								if (e.detail === 'editor') {
-									format = undefined
-								} else {
-									properties = undefined
-									order = undefined
-									requiredProperty = undefined
-								}
-							}}
-						>
-							{#snippet children({ item })}
-								<ToggleButton value="editor" label="Editor" {item} />
-								<ToggleButton
-									value="json-schema-resource"
-									label="JSON Schema Resource"
-									{item}
-									tooltip="Select a JSON schema resource to specify the object's properties"
-									showTooltipIcon
-								/>
-							{/snippet}
-						</ToggleButtonGroup>
-						{#if customObjectSelected === 'editor'}
-							<EditableSchemaDrawer
-								bind:schema={
-									() => {
-										return {
-											properties: properties,
-											order: order,
-											required: requiredProperty
+						/>
+					{/snippet}
+					{#snippet content({ close })}
+						<Label label="Label" class="p-2 flex flex-col gap-2">
+							<input
+								type="text"
+								class="w-full !bg-surface"
+								onkeydown={(event) => {
+									if (event.key === 'Enter') {
+										if (oneOfSelected) {
+											renameVariant(variantName, oneOfSelected)
+											close()
 										}
-									},
-									(v) => {
-										properties = v.properties
-										order = v.order
-										requiredProperty = v.required
 									}
-								}
+								}}
+								bind:value={variantName}
 							/>
-						{:else if customObjectSelected === 'json-schema-resource'}
-							<ResourcePicker
-								resourceType="json_schema"
-								bind:value={
-									() => {
-										if (format?.startsWith('jsonschema-')) {
-											return format.substring('jsonschema-'.length)
-										}
-										return undefined
-									},
-									(v) => {
-										format = 'jsonschema-' + v
+							<Button
+								variant="border"
+								color="light"
+								size="xs"
+								on:click={() => {
+									if (oneOfSelected) {
+										renameVariant(variantName, oneOfSelected)
+										close()
 									}
-								}
-							/>
-						{/if}
-					</TabContent>
-
-					<TabContent value="resource">
-						<ObjectTypeNarrowing bind:format />
-					</TabContent>
+								}}
+								disabled={variantName.length === 0}
+							>
+								Rename
+							</Button>
+						</Label>
+					{/snippet}
+				</Popover>
+				<Button
+					size="xs2"
+					color="red"
+					startIcon={{ icon: Trash2 }}
+					iconOnly
+					disabled={(oneOf?.length ?? 0) <= 2}
+					on:click={() => {
+						if (oneOf && oneOfSelected) {
+							const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)
+							oneOf = oneOf.filter((_, i) => i !== idx)
+							oneOfSelected = oneOf[0].title
+						}
+					}}
+				/>
+			</div>
+			{#if oneOfSelected && oneOf}
+				{@const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)}
+				<div class="ml-1">
+					<EditableSchemaDrawer
+						onClose={() => {
+							onDrawerClose?.()
+						}}
+						bind:schema={oneOf[idx]}
+						hiddenArgs={[
+							oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
+								? 'kind'
+								: 'label'
+						]}
+					/>
 				</div>
-			{/snippet}
-		</Tabs>
+			{/if}
+		</Label>
+		<div class="py-2"></div>
+	{:else if type === 'object' && format?.startsWith('resource-') && format !== 'resource-s3_object' && !isDyn}
+		<ResourceNarrowing bind:format />
+	{:else if type === 'object' && !format?.startsWith('resource-') && !isDyn}
+		<div class="py-2">
+			<Label label="Object properties">
+				<ToggleButtonGroup
+					bind:selected={customObjectSelected}
+					class="my-2"
+					on:selected={(e) => {
+						if (e.detail === 'editor') {
+							format = undefined
+						} else {
+							properties = undefined
+							order = undefined
+							requiredProperty = undefined
+						}
+					}}
+				>
+					{#snippet children({ item })}
+						<ToggleButton value="editor" label="Custom" {item} />
+						<ToggleButton
+							value="json-schema-resource"
+							label="Template"
+							{item}
+							tooltip="Select a JSON schema resource to specify the object's properties"
+							showTooltipIcon
+						/>
+					{/snippet}
+				</ToggleButtonGroup>
+				{#if customObjectSelected === 'editor'}
+					<EditableSchemaDrawer
+						bind:schema={
+							() => {
+								return {
+									properties: properties,
+									order: order,
+									required: requiredProperty
+								}
+							},
+							(v) => {
+								properties = v.properties
+								order = v.order
+								requiredProperty = v.required
+							}
+						}
+					/>
+				{:else if customObjectSelected === 'json-schema-resource'}
+					{#if format == undefined}
+						<div class="text-xs text-tertiary my-1">
+							Select a <code>json_schema</code> resource as a reusable JSON schema template
+						</div>
+					{/if}
+					<ResourcePicker
+						resourceType="json_schema"
+						bind:value={
+							() => {
+								if (format?.startsWith('jsonschema-')) {
+									return format.substring('jsonschema-'.length)
+								}
+								return undefined
+							},
+							(v) => {
+								if (v) {
+									format = 'jsonschema-' + v
+								} else {
+									format = undefined
+								}
+							}
+						}
+					/>
+				{/if}
+			</Label>
+		</div>
 	{/if}
 
-	{#if !(type === 'object' && oneOf && oneOf.length >= 2) && !(type == 'object' && initialObjectSelected == 'custom-object') && !isDynSelect}
+	{#if !(type === 'object' && oneOf && oneOf.length >= 2) && !(type == 'object' && initialObjectSelected == 'custom-object') && !isDyn}
 		<Label label="Default">
 			<ArgInput
 				noDefaultOnSelectFirst

package/package/components/schema/PropertyEditor.svelte

@@ -150,7 +150,7 @@ $effect(() => {
 				bind:itemsType
 				canEditResourceType={isFlowInput || isAppInput}
 			/>
-		{:else if type == 'string' || ['number', 'integer', 'object'].includes(type ?? '')}
+		{:else if type == 'string' || ['number', 'integer'].includes(type ?? '')}
 			<div>
 				<Label label="Field settings">
 					<div>
@@ -177,44 +177,42 @@ $effect(() => {
 								bind:currency={extra['currency']}
 								bind:currencyLocale={extra['currencyLocale']}
 							/>
-						{:else if type == 'object' && oneOf && oneOf.length >= 2 && !isFlowInput && !isAppInput}
-							<ToggleButtonGroup bind:selected={oneOfSelected} class="mb-2">
-								{#snippet children({ item })}
-									{#each oneOf as obj}
-										<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
-									{/each}
-								{/snippet}
-							</ToggleButtonGroup>
-							{#if oneOfSelected && oneOfSchemas}
-								{@const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)}
-								<div class="border">
-									<EditableSchemaForm
-										on:change
-										noPreview
-										bind:schema={oneOfSchemas[idx]}
-										uiOnly
-										jsonEnabled={false}
-										editTab="inputEditor"
-									/>
-								</div>
-							{/if}
-						{:else if type == 'object' && !format?.startsWith('resource-') && !isFlowInput && !isAppInput}
-							<div class="border">
-								<EditableSchemaForm
-									on:change
-									noPreview
-									bind:schema
-									uiOnly
-									jsonEnabled={false}
-									editTab="inputEditor"
-								/>
-							</div>
-						{:else}
-							<div class="text-tertiary text-xs">No settings available for this field type</div>
 						{/if}
 					</div>
 				</Label>
 			</div>
+		{:else if type == 'object' && oneOf && oneOf.length >= 2 && !isFlowInput && !isAppInput}
+			<ToggleButtonGroup bind:selected={oneOfSelected} class="mb-2">
+				{#snippet children({ item })}
+					{#each oneOf as obj}
+						<ToggleButton value={obj.title ?? ''} label={obj.title} {item} />
+					{/each}
+				{/snippet}
+			</ToggleButtonGroup>
+			{#if oneOfSelected && oneOfSchemas}
+				{@const idx = oneOf.findIndex((obj) => obj.title === oneOfSelected)}
+				<div class="border">
+					<EditableSchemaForm
+						on:change
+						noPreview
+						bind:schema={oneOfSchemas[idx]}
+						uiOnly
+						jsonEnabled={false}
+						editTab="inputEditor"
+					/>
+				</div>
+			{/if}
+		{:else if type == 'object' && !format?.startsWith('resource-') && !isFlowInput && !isAppInput}
+			<div class="border">
+				<EditableSchemaForm
+					on:change
+					noPreview
+					bind:schema
+					uiOnly
+					jsonEnabled={false}
+					editTab="inputEditor"
+				/>
+			</div>
 		{/if}
 
 		{@render children?.()}

package/package/components/schema/SchemaFormDND.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { Schema } from '../../common';
 import type { SchemaDiff } from './schemaUtils.svelte';
-import { type DynamicSelect } from '../../utils';
+import { type DynamicInput } from '../../utils';
 interface Props {
     schema: Schema;
     args?: Record<string, any>;
@@ -19,7 +19,7 @@ interface Props {
     nestedClasses?: string;
     isValid?: boolean;
     noVariablePicker?: boolean;
-    helperScript?: DynamicSelect.HelperScript;
+    helperScript?: DynamicInput.HelperScript;
     className?: string;
     dndType?: string;
 }

package/package/components/search/GlobalSearchModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import { onDestroy, onMount, tick, untrack } from 'svelte';
 import { AppService, FlowService, RawAppService, ScriptService } from '../../gen';
 import { clickOutside, isMac, scroll_into_view_if_needed_polyfill } from '../../utils';
-import { AlertTriangle, BoxesIcon, CalendarIcon, Code2Icon, Database, DollarSignIcon, HomeIcon, LayoutDashboardIcon, PlayIcon, Route, Search, SearchCode, Unplug, WandSparkles } from 'lucide-svelte';
+import { AlertTriangle, BoxesIcon, CalendarIcon, Code2Icon, Database, DollarSignIcon, HomeIcon, LayoutDashboardIcon, MailIcon, PlayIcon, Route, Search, SearchCode, Unplug, WandSparkles } from 'lucide-svelte';
 import Portal from '../Portal.svelte';
 import { twMerge } from 'tailwind-merge';
 import ContentSearchInner from '../ContentSearchInner.svelte';
@@ -101,6 +101,13 @@ let hiddenMenuItems = [
         action: (newtab = false) => gotoPage('/mqtt_triggers', newtab),
         icon: MqttIcon,
         disabled: $userStore?.operator
+    },
+    {
+        search_id: 'nav:email_triggers',
+        label: 'Go to Email triggers',
+        action: (newtab = false) => gotoPage('/email_triggers', newtab),
+        icon: MailIcon,
+        disabled: $userStore?.operator
     }
 ];
 let defaultMenuItems = [

package/package/components/select/DraggableTags.svelte.d.ts

@@ -1,15 +1,25 @@
-declare class __sveltets_Render<Item extends {
+declare function $$render<Item extends {
     label?: string;
     value: any;
-}> {
-    props(): {
-        items?: Item[] | undefined;
+}>(): {
+    props: {
+        items?: Item[];
         allowClear?: boolean;
         onRemove: (item: Item) => void;
-        onReorder?: ((oldIndex: number, newIndex: number) => void) | undefined;
+        onReorder?: (oldIndex: number, newIndex: number) => void;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends {
+    label?: string;
+    value: any;
+}> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/package/components/select/MultiSelect.svelte.d.ts

@@ -1,9 +1,9 @@
-declare class __sveltets_Render<Item extends {
+declare function $$render<Item extends {
     label?: string;
     value: any;
-}> {
-    props(): {
-        items?: Item[] | undefined;
+}>(): {
+    props: {
+        items?: Item[];
         value: Item["value"][];
         placeholder?: string;
         class?: string;
@@ -20,14 +20,24 @@ declare class __sveltets_Render<Item extends {
         selectedUlClass?: string;
         placeholderClass?: string;
         allowClear?: boolean;
-        groupBy?: ((item: Item) => string) | undefined;
-        sortBy?: ((a: Item, b: Item) => number) | undefined;
-        onOpen?: (() => void) | undefined;
-        onClear?: (() => void) | undefined;
-        onCreateItem?: ((value: string) => void) | undefined;
+        groupBy?: (item: Item) => string;
+        sortBy?: (a: Item, b: Item) => number;
+        onOpen?: () => void;
+        onClear?: () => void;
+        onCreateItem?: (value: string) => void;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item extends {
+    label?: string;
+    value: any;
+}> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
     bindings(): "value";
     exports(): {};
 }

package/package/components/select/Select.svelte

@@ -6,7 +6,7 @@ import { untrack } from 'svelte';
 import { getLabel, processItems } from './utils.svelte';
 import SelectDropdown from './SelectDropdown.svelte';
 import { deepEqual } from 'fast-equals';
-let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet } = $props();
+let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet } = $props();
 let disabled = $derived(_disabled || (loading && !value));
 let inputEl = $state();
 let processedItems = $derived.by(() => {
@@ -81,6 +81,7 @@ function clearValue() {
 		autocomplete="off"
 		onpointerdown={() => (open = true)}
 		bind:this={inputEl}
+		{id}
 	/>
 	<SelectDropdown
 		{disablePortal}