windmill-components 1.532.0 → 1.542.4

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -5,7 +5,7 @@ import { Drawer, DrawerContent } from '../common';
 import AddProperty from './AddProperty.svelte';
 import { dragHandle, dragHandleZone } from '@windmill-labs/svelte-dnd-action';
 import { flip } from 'svelte/animate';
-import { emptyString } from '../../utils';
+import { emptyString, generateRandomString } from '../../utils';
 import Button from '../common/button/Button.svelte';
 import { createEventDispatcher, tick } from 'svelte';
 import Label from '../Label.svelte';
@@ -35,19 +35,33 @@ function handleFinalize(e) {
     };
     tick().then(() => dispatch('change', schema));
 }
-let { schema = $bindable(), parentId = undefined, jsonView = $bindable(false) } = $props();
+let { schema = $bindable(), jsonView = $bindable(false), hiddenArgs = undefined } = $props();
 // let schema = $state(structuredClone($state.snapshot(schema)))
 let schemaString = $state(JSON.stringify(schema, null, '\t'));
 let editor = $state(undefined);
 let error = $state(undefined);
 let items = $derived([
-    ...new Set((schema?.order ?? Object.keys(schema?.properties ?? {}))?.map((item, index) => {
+    ...new Set((schema?.order ?? Object.keys(schema?.properties ?? {}))
+        ?.map((item, index) => {
         return { value: item, id: item };
-    }) ?? [])
+    })
+        .filter((item) => !hiddenArgs?.includes(item.value)) ?? [])
 ]);
+const rnd = generateRandomString();
 </script>
 
-<div class="flex flex-col items-end mb-2 w-full">
+<div class="flex flex-wrap justify-between mb-2 w-full items-center gap-y-2">
+	<AddProperty
+		on:change={() => {
+			if (jsonView) {
+				schemaString = JSON.stringify(schema, null, '\t')
+				editor?.setCode(schemaString)
+			}
+		}}
+		bind:schema
+		bind:this={addPropertyComponent}
+	/>
+
 	<Toggle
 		bind:checked={jsonView}
 		label="JSON View"
@@ -65,136 +79,116 @@ let items = $derived([
 	/>
 </div>
 
-<AddProperty
-	on:change={() => {
-		if (jsonView) {
-			schemaString = JSON.stringify(schema, null, '\t')
-			editor?.setCode(schemaString)
-		}
-	}}
-	bind:schema
-	bind:this={addPropertyComponent}
-/>
-
 {#if !jsonView}
-	<div
-		use:dragHandleZone={{
-			items,
-			flipDurationMs,
-			dropTargetStyle: {},
-			type: parentId ? `app-editor-fields-${parentId}` : 'app-editor-fields'
-		}}
-		onconsider={handleConsider}
-		onfinalize={handleFinalize}
-		class="gap-1 flex flex-col mt-2"
-	>
-		{#if items?.length > 0}
-			{#each items as item (item.id)}
-				<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-				<div
-					animate:flip={{ duration: 200 }}
-					class="w-full flex flex-col justify-between border items-center py-1 px-2 rounded-md bg-surface text-sm"
-				>
-					{#if schema.properties?.[item.value]}
-						<div class="flex flex-row justify-between items-center w-full">
-							{`${item.value}${
-								schema.properties?.[item.value]?.title
-									? ` (title: ${schema.properties?.[item.value]?.title})`
-									: ''
-							} `}
-							<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-							<!-- svelte-ignore a11y_no_static_element_interactions -->
-							<div class="flex flex-row gap-1 item-center h-full justify-center">
-								<Button
-									iconOnly
-									size="xs2"
-									color="light"
-									startIcon={{ icon: Trash }}
-									on:click={() => {
-										addPropertyComponent?.handleDeleteArgument([item.value])
-									}}
-								/>
-								<Button
-									iconOnly
-									size="xs2"
-									color="light"
-									startIcon={{ icon: Pen }}
-									on:click={() => {
-										schemaFormDrawer?.openDrawer()
+	{#key rnd}
+		<div
+			use:dragHandleZone={{
+				items,
+				flipDurationMs,
+				dropTargetStyle: {},
+				type: rnd
+			}}
+			onconsider={handleConsider}
+			onfinalize={handleFinalize}
+			class="gap-1 flex flex-col mt-2"
+		>
+			{#if items?.length > 0}
+				{#each items as item (item.id)}
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+					<div
+						animate:flip={{ duration: 200 }}
+						class="w-full flex flex-col justify-between border items-center py-1 px-2 rounded-md bg-surface text-sm"
+					>
+						{#if schema.properties?.[item.value]}
+							<div class="flex flex-row justify-between items-center w-full">
+								{`${item.value}${
+									schema.properties?.[item.value]?.title
+										? ` (title: ${schema.properties?.[item.value]?.title})`
+										: ''
+								} `}
+								<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
+								<div class="flex flex-row gap-1 item-center h-full justify-center">
+									<Button
+										iconOnly
+										size="xs2"
+										color="light"
+										startIcon={{ icon: Trash }}
+										on:click={() => {
+											addPropertyComponent?.handleDeleteArgument([item.value])
+										}}
+									/>
+									<Button
+										iconOnly
+										size="xs2"
+										color="light"
+										startIcon={{ icon: Pen }}
+										on:click={() => {
+											schemaFormDrawer?.openDrawer()
 
-										tick().then(() => {
-											editableSchemaForm?.openField(item.value)
-										})
-									}}
-								/>
+											tick().then(() => {
+												editableSchemaForm?.openField(item.value)
+											})
+										}}
+									/>
 
-								<div class="cursor-move flex items-center handle" use:dragHandle>
-									<GripVertical size={16} />
+									<div class="flex items-center handle" use:dragHandle>
+										<GripVertical size={16} />
+									</div>
 								</div>
 							</div>
-						</div>
 
-						{#if schema.properties[item.value]?.type === 'object' && !(schema.properties[item.value].oneOf && schema.properties[item.value].oneOf.length >= 2)}
-							<div class="flex flex-col w-full mt-2">
-								<Label label="Nested properties">
-									<EditableSchemaDrawer
-										on:change={() => {
-											schema = $state.snapshot(schema)
-											dispatch('change', schema)
-										}}
-										bind:schema={schema.properties[item.value]}
-										parentId={item.value}
-									/>
-								</Label>
-							</div>
+							{#if schema.properties[item.value]?.type === 'object' && !(schema.properties[item.value].oneOf && schema.properties[item.value].oneOf.length >= 2)}
+								<div class="flex flex-col w-full mt-2">
+									<Label label="Nested properties">
+										<EditableSchemaDrawer bind:schema={schema.properties[item.value]} />
+									</Label>
+								</div>
+							{/if}
+						{:else}
+							<div class="text-tertiary"> Value is undefined </div>
 						{/if}
-					{:else}
-						<div class="text-tertiary"> Value is undefined </div>
-					{/if}
-				</div>
-			{/each}
-		{/if}
-	</div>
-
+					</div>
+				{/each}
+			{/if}
+		</div>
+	{/key}
 	<Drawer bind:this={schemaFormDrawer} size="1200px">
-		<DrawerContent title="UI Customisation" on:close={schemaFormDrawer.closeDrawer}>
-			<EditableSchemaForm
-				on:change={(e) => {
-					schema = $state.snapshot(schema)
-					dispatch('change', schema)
-				}}
-				bind:this={editableSchemaForm}
-				bind:schema
-				isAppInput
-				on:edit={(e) => {
-					addPropertyComponent?.openDrawer(e.detail)
-				}}
-				on:delete={(e) => {
-					addPropertyComponent?.handleDeleteArgument([e.detail])
-				}}
-				dndType="drawer"
-				editTab="inputEditor"
-			>
-				{#snippet addProperty()}
-					<AddPropertyV2
-						bind:schema
-						on:change
-						on:addNew={(e) => {
-							schema = $state.snapshot(schema)
-							editableSchemaForm?.openField(e.detail)
-						}}
-					>
-						{#snippet trigger()}
-							<div
-								class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
-							>
-								<Plus size={14} />
-							</div>
-						{/snippet}
-					</AddPropertyV2>
-				{/snippet}
-			</EditableSchemaForm>
-		</DrawerContent>
+		{#snippet children()}
+			<DrawerContent title="UI Customisation" on:close={() => schemaFormDrawer?.closeDrawer()}>
+				<EditableSchemaForm
+					schemaFormClassName="h-full"
+					bind:this={editableSchemaForm}
+					bind:schema
+					isAppInput
+					on:edit={(e) => {
+						addPropertyComponent?.openDrawer(e.detail)
+					}}
+					on:delete={(e) => {
+						addPropertyComponent?.handleDeleteArgument([e.detail])
+					}}
+					{hiddenArgs}
+					editTab="inputEditor"
+				>
+					{#snippet addProperty()}
+						<AddPropertyV2
+							bind:schema
+							onAddNew={(argName) => {
+								editableSchemaForm?.openField(argName)
+							}}
+						>
+							{#snippet trigger()}
+								<div
+									class="w-full py-2 flex justify-center items-center border border-dashed rounded-md hover:bg-surface-hover"
+								>
+									<Plus size={14} />
+								</div>
+							{/snippet}
+						</AddPropertyV2>
+					{/snippet}
+				</EditableSchemaForm>
+			</DrawerContent>
+		{/snippet}
 	</Drawer>
 {:else}
 	<div class="mt-2"></div>

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

@@ -2,8 +2,9 @@ import EditableSchemaDrawer from './EditableSchemaDrawer.svelte';
 import type { Schema } from '../../common';
 interface Props {
     schema: Schema | undefined | any;
-    parentId?: string | undefined;
     jsonView?: boolean;
+    hiddenArgs?: string[];
+    onClose?: () => 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> & {

package/package/components/schema/EditableSchemaSdkWrapper.svelte

@@ -1,6 +1,19 @@
-<script lang="ts">import EditableSchemaWrapper from './EditableSchemaWrapper.svelte';
-let { schema: oldSchema, ...props } = $props();
+<script lang="ts">import { readFieldsRecursively } from '../../utils';
+import { deepEqual } from 'fast-equals';
+import EditableSchemaWrapper from './EditableSchemaWrapper.svelte';
+let { schema: oldSchema, onSchemaChange, ...props } = $props();
 let schema = $state(oldSchema);
+let lastSchema = $state.snapshot(schema);
+$effect(() => {
+    if (onSchemaChange) {
+        readFieldsRecursively(schema);
+        let newSchema = $state.snapshot(schema);
+        if (!deepEqual(lastSchema, newSchema)) {
+            lastSchema = newSchema;
+            onSchemaChange(newSchema);
+        }
+    }
+});
 </script>
 
-<EditableSchemaWrapper {schema} {...props} />
+<EditableSchemaWrapper bind:schema {...props} />

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

@@ -1,4 +1,7 @@
 import type { EditableSchemaWrapperProps } from './editable_schema_wrapper';
-declare const EditableSchemaSdkWrapper: import("svelte").Component<EditableSchemaWrapperProps, {}, "">;
+type $$ComponentProps = EditableSchemaWrapperProps & {
+    onSchemaChange?: (schema: any) => void;
+};
+declare const EditableSchemaSdkWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
 type EditableSchemaSdkWrapper = ReturnType<typeof EditableSchemaSdkWrapper>;
 export default EditableSchemaSdkWrapper;

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -7,7 +7,7 @@ import AddPropertyV2 from './AddPropertyV2.svelte';
 import { Plus } from 'lucide-svelte';
 import Select from '../select/Select.svelte';
 import { safeSelectItems } from '../select/utils.svelte';
-let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), onSchemaChange, customUi } = $props();
+let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined), customUi } = $props();
 let resourceIsTextFile = $state(false);
 let addPropertyComponent = $state(undefined);
 let editableSchemaForm = $state(undefined);
@@ -35,7 +35,6 @@ function switchResourceIsFile() {
             }
         };
     }
-    onSchemaChange?.({ schema: $state.snapshot(schema) });
 }
 let suggestedFileExtensions = $state([
     'json',
@@ -64,9 +63,8 @@ let suggestedFileExtensions = $state([
 				noPopover={customUi?.noAddPopover}
 				bind:schema
 				bind:this={addPropertyComponent}
-				on:change={() => onSchemaChange?.({ schema: $state.snapshot(schema) })}
-				on:addNew={(e) => {
-					editableSchemaForm?.openField(e.detail)
+				onAddNew={(argName) => {
+					editableSchemaForm?.openField(argName)
 				}}
 			>
 				{#snippet trigger()}
@@ -82,11 +80,7 @@ let suggestedFileExtensions = $state([
 			onlyMaskPassword
 			bind:this={editableSchemaForm}
 			bind:schema
-			on:change={() => onSchemaChange?.({ schema: $state.snapshot(schema) })}
 			isFlowInput
-			on:edit={(e) => {
-				addPropertyComponent?.openDrawer(e.detail)
-			}}
 			on:delete={(e) => {
 				addPropertyComponent?.handleDeleteArgument([e.detail])
 			}}
@@ -100,7 +94,6 @@ let suggestedFileExtensions = $state([
 						noPopover={customUi?.noAddPopover}
 						bind:schema
 						bind:this={addPropertyComponent}
-						on:change={() => onSchemaChange?.({ schema })}
 					>
 						{#snippet trigger()}
 							<div