windmill-components 1.532.0 → 1.542.4

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,9 +12,9 @@ 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';
-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 } = $props();
-let oneOfSelected = $state(undefined);
+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();
 function getResourceTypesFromFormat(format) {
     if (format?.startsWith('resource-')) {
@@ -65,261 +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}
-						/>
+								}}
+								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
-							variant="border"
+							size="xs2"
 							color="light"
-							size="xs"
+							startIcon={{ icon: Pen }}
+							propagateEvent
+							iconOnly={false}
 							on:click={() => {
-								createVariant(variantName)
-								close()
+								if (oneOfSelected) {
+									variantName = oneOfSelected
+								}
 							}}
-							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>
-
-			<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') {
+						/>
+					{/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}
+							/>
+							<Button
+								variant="border"
+								color="light"
+								size="xs"
+								on:click={() => {
 									if (oneOfSelected) {
 										renameVariant(variantName, oneOfSelected)
 										close()
 									}
-								}
-							}}
-							bind:value={variantName}
-						/>
-						<Button
-							variant="border"
-							color="light"
-							size="xs"
-							on:click={() => {
-								if (oneOfSelected) {
-									renameVariant(variantName, oneOfSelected)
-									close()
-								}
-							}}
-							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
-				bind:schema={
-					() => {
-						if (oneOf?.[idx]) {
-							let properties = Object.fromEntries(
-								Object.entries(oneOf[idx].properties ?? {}).filter(
-									([k]) => k !== 'label' && k !== 'kind'
-								)
-							)
-							return {
-								...oneOf[idx],
-								properties: properties,
-								order: Object.keys(properties),
-								required: oneOf[idx].required ?? []
-							}
+								}}
+								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
 						}
-					},
-					(v) => {
-						if (oneOf?.[idx]) {
-							const tagKey = oneOf?.find((o) => Object.keys(o.properties ?? {}).includes('kind'))
+					}}
+				/>
+			</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'
-							oneOf[idx] = {
-								...(v ?? {}),
-								type: 'object',
-								properties: {
-									...(v?.properties ?? {}),
-									[tagKey]: {
-										type: 'string',
-										enum: [v?.title ?? '']
-									}
+						]}
+					/>
+				</div>
+			{/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
 							}
 						}
-					}
-				}
-				on:change={() => {
-					dispatch('schemaChange')
-				}}
-			/>
-		{/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
-										}
-									},
-									(v) => {
-										properties = v.properties
-										order = v.order
-										requiredProperty = v.required
-										dispatch('schemaChange')
-									}
+					/>
+				{: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)
 								}
-							/>
-						{: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
-									}
+								return undefined
+							},
+							(v) => {
+								if (v) {
+									format = 'jsonschema-' + v
+								} else {
+									format = undefined
 								}
-							/>
-						{/if}
-					</TabContent>
-
-					<TabContent value="resource">
-						<ObjectTypeNarrowing on:change={() => dispatch('schemaChange')} bind:format />
-					</TabContent>
-				</div>
-			{/snippet}
-		</Tabs>
+							}
+						}
+					/>
+				{/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/FlowPropertyEditor.svelte.d.ts

@@ -28,6 +28,7 @@ interface Props {
     order?: string[] | undefined;
     requiredProperty?: string[] | undefined;
     displayWebhookWarning?: boolean;
+    onDrawerClose?: () => void;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -43,7 +44,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     z_$$bindings?: Bindings;
 }
 declare const FlowPropertyEditor: $$__sveltets_2_IsomorphicComponent<Props, {
-    schemaChange: CustomEvent<any>;
     requiredChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

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

@@ -3,7 +3,8 @@ import { dragHandle } from '@windmill-labs/svelte-dnd-action';
 import SchemaForm from '../SchemaForm.svelte';
 import { GripVertical } from 'lucide-svelte';
 import { deepEqual } from 'fast-equals';
-let { dndType = undefined, schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, helperScript = undefined, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false } = $props();
+import { generateRandomString } from '../../utils';
+let { schema = $bindable(), args = $bindable(undefined), prettifyHeader = false, onlyMaskPassword = false, disablePortal = false, disabled = false, hiddenArgs = [], nestedParent = undefined, disableDnd = false, shouldDispatchChanges = false, helperScript = undefined, diff = {}, nestedClasses = '', isValid = $bindable(true), noVariablePicker = false, className = '', dndType = generateRandomString() } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -12,9 +13,9 @@ $effect.pre(() => {
 const dispatch = createEventDispatcher();
 const flipDurationMs = 200;
 let items = $state(computeItems());
-let dragDisabled = $state(true);
+let dragDisabledState = $state(true);
 function computeItems() {
-    return ((schema?.order ?? Object.keys(schema?.properties ?? {}) ?? []).map((key) => ({
+    return (($state.snapshot(schema?.order) ?? Object.keys(schema?.properties ?? {}) ?? []).map((key) => ({
         id: key,
         value: key
     })) ?? []);
@@ -26,20 +27,19 @@ function updateItems() {
     }
 }
 function handleConsider(e) {
-    dragDisabled = false;
+    dragDisabledState = false;
     const { items: newItems } = e.detail;
-    items = newItems;
+    items = $state.snapshot(newItems);
 }
 function handleFinalize(e) {
     const { items: newItems } = e.detail;
-    dragDisabled = true;
-    items = newItems;
+    dragDisabledState = true;
+    items = $state.snapshot(newItems);
     const newOrder = items.map((item) => item.value);
-    // console.log('handleFinalize', newOrder, e.detail)
     dispatch('reorder', newOrder);
 }
 $effect(() => {
-    schema && dragDisabled && untrack(() => updateItems());
+    schema && dragDisabledState && untrack(() => updateItems());
 });
 </script>
 
@@ -67,6 +67,7 @@ $effect(() => {
 	{disablePortal}
 	{disabled}
 	{helperScript}
+	{className}
 	bind:schema
 	dndConfig={disableDnd
 		? undefined
@@ -74,7 +75,7 @@ $effect(() => {
 				items,
 				flipDurationMs,
 				dropTargetStyle: {},
-				type: dndType ?? 'top-level'
+				type: dndType
 			}}
 	{items}
 	{diff}

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

@@ -1,8 +1,7 @@
 import type { Schema } from '../../common';
 import type { SchemaDiff } from './schemaUtils.svelte';
-import type { DynamicSelect } from '../../utils';
+import { type DynamicInput } from '../../utils';
 interface Props {
-    dndType?: string | undefined;
     schema: Schema;
     args?: Record<string, any>;
     prettifyHeader?: boolean;
@@ -20,7 +19,9 @@ interface Props {
     nestedClasses?: string;
     isValid?: boolean;
     noVariablePicker?: boolean;
-    helperScript?: DynamicSelect.HelperScript;
+    helperScript?: DynamicInput.HelperScript;
+    className?: string;
+    dndType?: string;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/package/components/schema/editable_schema_wrapper.d.ts

@@ -8,7 +8,4 @@ export type EditableSchemaWrapperProps = {
     customUi?: {
         noAddPopover?: boolean;
     };
-    onSchemaChange?: ({ schema }: {
-        schema: Schema;
-    }) => void;
 };