windmill-components 1.493.10 → 1.501.5

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -1,4 +1,5 @@
-<script lang="ts">import { GripVertical, Pen, Trash, Plus } from 'lucide-svelte';
+<script lang="ts">import EditableSchemaDrawer from './EditableSchemaDrawer.svelte';
+import { GripVertical, Pen, Trash, Plus } from 'lucide-svelte';
 import EditableSchemaForm from '../EditableSchemaForm.svelte';
 import { Drawer, DrawerContent } from '../common';
 import AddProperty from './AddProperty.svelte';
@@ -11,16 +12,11 @@ import Label from '../Label.svelte';
 import Toggle from '../Toggle.svelte';
 import SimpleEditor from '../SimpleEditor.svelte';
 import AddPropertyV2 from './AddPropertyV2.svelte';
-export let schema;
-export let parentId = undefined;
 const flipDurationMs = 200;
 const dispatch = createEventDispatcher();
-let addProperty = undefined;
-let schemaFormDrawer = undefined;
-let editableSchemaForm = undefined;
-$: items = ((schema?.order ?? Object.keys(schema?.properties ?? {}))?.map((item, index) => {
-    return { value: item, id: item };
-}) ?? []);
+let addPropertyComponent = $state(undefined);
+let schemaFormDrawer = $state(undefined);
+let editableSchemaForm = $state(undefined);
 function handleConsider(e) {
     const { items: newItems } = e.detail;
     items = newItems;
@@ -29,18 +25,26 @@ function handleFinalize(e) {
     const { items: newItems } = e.detail;
     items = newItems;
     const keys = items.map((item) => item.value);
-    schema.properties = keys.reduce((acc, key) => {
-        acc[key] = schema.properties[key];
-        return acc;
-    }, {});
-    schema.order = keys;
-    schema = { ...schema };
+    schema = {
+        ...schema,
+        properties: keys.reduce((acc, key) => {
+            acc[key] = schema.properties[key];
+            return acc;
+        }, {}),
+        order: keys
+    };
     tick().then(() => dispatch('change', schema));
 }
-export let jsonView = false;
-let schemaString = JSON.stringify(schema, null, '\t');
-let editor = undefined;
-let error = undefined;
+let { schema = $bindable(), parentId = undefined, jsonView = $bindable(false) } = $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) => {
+        return { value: item, id: item };
+    }) ?? [])
+]);
 </script>
 
 <div class="flex flex-col items-end mb-2 w-full">
@@ -51,7 +55,7 @@ let error = undefined;
 		options={{
 			right: 'JSON editor',
 			rightTooltip:
-				'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
+				'Arguments can be edited either using the wizard, or by editing their JSON schema.'
 		}}
 		lightMode
 		on:change={() => {
@@ -67,18 +71,9 @@ let error = undefined;
 			schemaString = JSON.stringify(schema, null, '\t')
 			editor?.setCode(schemaString)
 		}
-		// TODO: find out why this work.
-		// Solves a bug where adding a new field in a OneOf input in a flow did not do anything
-		//
-		// It seemed that the schema was correctly changed but then reset higher in the component
-		// tree due to the change event, as removing the dispatched removed the bug.
-		// I already spent way too long trying to figure out the chain of effects
-		setTimeout(() => {
-			dispatch('change', schema)
-		}, 0.5)
 	}}
 	bind:schema
-	bind:this={addProperty}
+	bind:this={addPropertyComponent}
 />
 
 {#if !jsonView}
@@ -89,13 +84,13 @@ let error = undefined;
 			dropTargetStyle: {},
 			type: parentId ? `app-editor-fields-${parentId}` : 'app-editor-fields'
 		}}
-		on:consider={handleConsider}
-		on:finalize={handleFinalize}
+		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 -->
+				<!-- 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"
@@ -107,8 +102,8 @@ let error = undefined;
 									? ` (title: ${schema.properties?.[item.value]?.title})`
 									: ''
 							} `}
-							<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
+							<!-- 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
@@ -116,7 +111,7 @@ let error = undefined;
 									color="light"
 									startIcon={{ icon: Trash }}
 									on:click={() => {
-										addProperty?.handleDeleteArgument([item.value])
+										addPropertyComponent?.handleDeleteArgument([item.value])
 									}}
 								/>
 								<Button
@@ -142,9 +137,9 @@ let error = undefined;
 						{#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">
-									<svelte:self
+									<EditableSchemaDrawer
 										on:change={() => {
-											schema = schema
+											schema = $state.snapshot(schema)
 											dispatch('change', schema)
 										}}
 										bind:schema={schema.properties[item.value]}
@@ -164,36 +159,40 @@ let error = undefined;
 	<Drawer bind:this={schemaFormDrawer} size="1200px">
 		<DrawerContent title="UI Customisation" on:close={schemaFormDrawer.closeDrawer}>
 			<EditableSchemaForm
-				on:change
+				on:change={(e) => {
+					schema = $state.snapshot(schema)
+					dispatch('change', schema)
+				}}
 				bind:this={editableSchemaForm}
 				bind:schema
 				isAppInput
 				on:edit={(e) => {
-					addProperty?.openDrawer(e.detail)
+					addPropertyComponent?.openDrawer(e.detail)
 				}}
 				on:delete={(e) => {
-					addProperty?.handleDeleteArgument([e.detail])
+					addPropertyComponent?.handleDeleteArgument([e.detail])
 				}}
 				dndType="drawer"
 				editTab="inputEditor"
 			>
-				<svelte:fragment slot="addProperty">
+				{#snippet addProperty()}
 					<AddPropertyV2
 						bind:schema
 						on:change
 						on:addNew={(e) => {
+							schema = $state.snapshot(schema)
 							editableSchemaForm?.openField(e.detail)
 						}}
 					>
-						<svelte:fragment slot="trigger">
+						{#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>
-						</svelte:fragment>
+						{/snippet}
 					</AddPropertyV2>
-				</svelte:fragment>
+				{/snippet}
 			</EditableSchemaForm>
 		</DrawerContent>
 	</Drawer>

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

@@ -1,4 +1,10 @@
+import EditableSchemaDrawer from './EditableSchemaDrawer.svelte';
 import type { Schema } from '../../common';
+interface Props {
+    schema: Schema | undefined | any;
+    parentId?: string | undefined;
+    jsonView?: boolean;
+}
 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> & {
         $$bindings?: Bindings;
@@ -12,14 +18,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const EditableSchemaDrawer: $$__sveltets_2_IsomorphicComponent<{
-    schema: Schema | undefined | any;
-    parentId?: string | undefined;
-    jsonView?: boolean;
-}, {
+declare const EditableSchemaDrawer: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "schema" | "jsonView">;
 type EditableSchemaDrawer = InstanceType<typeof EditableSchemaDrawer>;
 export default EditableSchemaDrawer;

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -3,24 +3,24 @@ import EditableSchemaForm from '../EditableSchemaForm.svelte';
 import { createEventDispatcher } from 'svelte';
 import Toggle from '../Toggle.svelte';
 import { emptySchema, validateFileExtension } from '../../utils';
-import AutoComplete from 'simple-svelte-autocomplete';
 import { Alert } from '../common';
 import AddPropertyV2 from './AddPropertyV2.svelte';
 import { Plus } from 'lucide-svelte';
-export let schema;
-export let uiOnly = false;
-export let noPreview = false;
-export let fullHeight = true;
-export let formatExtension = undefined;
-let resourceIsTextFile = false;
-let addProperty = undefined;
-let editableSchemaForm = undefined;
+import Select from '../select/Select.svelte';
+import { safeSelectItems } from '../select/utils.svelte';
+let { schema = $bindable(), uiOnly = false, noPreview = false, fullHeight = true, formatExtension = $bindable(undefined) } = $props();
+let resourceIsTextFile = $state(false);
+let addPropertyComponent = $state(undefined);
+let editableSchemaForm = $state(undefined);
 const dispatch = createEventDispatcher();
-$: !resourceIsTextFile && (formatExtension = undefined);
-$: invalidExtension =
-    formatExtension && formatExtension != ''
-        ? !validateFileExtension(formatExtension ?? 'txt')
-        : false;
+$effect(() => {
+    if (!resourceIsTextFile && formatExtension !== undefined) {
+        formatExtension = undefined;
+    }
+});
+let invalidExtension = $derived(formatExtension && formatExtension != ''
+    ? !validateFileExtension(formatExtension ?? 'txt')
+    : false);
 function switchResourceIsFile() {
     if (!resourceIsTextFile) {
         schema = emptySchema();
@@ -39,20 +39,7 @@ function switchResourceIsFile() {
     }
     dispatch('change', schema);
 }
-function numberOfMatches(listItem, searchWords) {
-    if (!listItem) {
-        return 0;
-    }
-    let matches = 0;
-    searchWords.forEach((searchWord) => {
-        const searchLetters = searchWord.split('');
-        if (searchLetters.every((l) => listItem.includes(l))) {
-            matches++;
-        }
-    });
-    return matches;
-}
-let suggestedFileExtensions = [
+let suggestedFileExtensions = $state([
     'json',
     'yaml',
     'jinja',
@@ -63,8 +50,7 @@ let suggestedFileExtensions = [
     'html',
     'xml',
     'yml'
-];
-let autocompleteExtension = true;
+]);
 </script>
 
 {#if !resourceIsTextFile}
@@ -78,19 +64,19 @@ let autocompleteExtension = true;
 		{#if noPreview}
 			<AddPropertyV2
 				bind:schema
-				bind:this={addProperty}
+				bind:this={addPropertyComponent}
 				on:change={() => dispatch('change', schema)}
 				on:addNew={(e) => {
 					editableSchemaForm?.openField(e.detail)
 				}}
 			>
-				<svelte:fragment slot="trigger">
+				{#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>
-				</svelte:fragment>
+				{/snippet}
 			</AddPropertyV2>
 		{/if}
 		<EditableSchemaForm
@@ -100,85 +86,48 @@ let autocompleteExtension = true;
 			on:change={() => dispatch('change', schema)}
 			isFlowInput
 			on:edit={(e) => {
-				addProperty?.openDrawer(e.detail)
+				addPropertyComponent?.openDrawer(e.detail)
 			}}
 			on:delete={(e) => {
-				addProperty?.handleDeleteArgument([e.detail])
+				addPropertyComponent?.handleDeleteArgument([e.detail])
 			}}
 			{uiOnly}
 			{noPreview}
 			editTab="inputEditor"
 		>
-			<svelte:fragment slot="addProperty">
+			{#snippet addProperty()}
 				{#if !noPreview}
 					<AddPropertyV2
 						bind:schema
-						bind:this={addProperty}
+						bind:this={addPropertyComponent}
 						on:change={() => dispatch('change', schema)}
 					>
-						<svelte:fragment slot="trigger">
+						{#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>
-						</svelte:fragment>
+						{/snippet}
 					</AddPropertyV2>
 				{/if}
-			</svelte:fragment>
+			{/snippet}
 		</EditableSchemaForm>
 	</div>
 {/if}
 {#if resourceIsTextFile}
-	<div class="flex items-center space-x-2 w-5/12">
-		<label for="format-extension" class="text-base font-medium whitespace-nowrap">
-			File extension{autocompleteExtension ? '' : ' (free text)'}:
-		</label>
-		{#if autocompleteExtension}
-			<AutoComplete
-				inputId="format-extension"
-				autofocus={true}
-				items={[...suggestedFileExtensions, 'Choose another extension']}
-				onChange={(a) => {
-					if (a == 'Choose another extension') {
-						formatExtension = ''
-						autocompleteExtension = false
-					}
-				}}
-				itemFilterFunction={(listItem, searchWords) => {
-					if (searchWords.length == 0 || listItem === 'Choose another extension') {
-						return true
-					}
-					return numberOfMatches(listItem, searchWords) > 0
-				}}
-				noResultsText="No matches, try the 'Choose another extension' option"
-				bind:selectedItem={formatExtension}
-				inputClassName="!h-[32px] py-1 !text-xs !w-64"
-				hideArrow
-				className={'!font-bold'}
-				dropdownClassName="!font-normal !w-64 !max-w-64"
-				maxItemsToShowInList={8}
-				moreItemsText={null}
-				lock={true}
-			/>
-		{:else}
-			<!-- svelte-ignore a11y-autofocus -->
-			<input
-				autofocus={true}
-				bind:value={formatExtension}
-				class="!h-[32px] py-1 !text-xs !w-64"
-				placeholder="Enter your extension"
-				on:keydown={(event) => {
-					if (event.key === 'Enter') {
-						if (formatExtension && !suggestedFileExtensions.includes(formatExtension))
-							suggestedFileExtensions.push(formatExtension)
-
-						autocompleteExtension = true
-					}
-				}}
-			/>
-		{/if}
-	</div>
+	<label
+		for="format-extension"
+		class="text-base font-medium whitespace-nowrap flex items-center gap-4"
+	>
+		File extension :
+		<Select
+			autofocus
+			items={safeSelectItems(suggestedFileExtensions)}
+			bind:value={formatExtension}
+			onCreateItem={(ext) => ((formatExtension = ext), suggestedFileExtensions.push(ext))}
+		/>
+	</label>
 
 	{#if invalidExtension}
 		<Alert title="Invalid file extension" type="error">

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

@@ -1,4 +1,11 @@
 import type { Schema } from '../../common';
+interface Props {
+    schema: Schema | undefined | any;
+    uiOnly?: boolean;
+    noPreview?: boolean;
+    fullHeight?: boolean;
+    formatExtension?: string | undefined;
+}
 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> & {
         $$bindings?: Bindings;
@@ -12,16 +19,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const EditableSchemaWrapper: $$__sveltets_2_IsomorphicComponent<{
-    schema: Schema | undefined | any;
-    uiOnly?: boolean;
-    noPreview?: boolean;
-    fullHeight?: boolean;
-    formatExtension?: string | undefined;
-}, {
+declare const EditableSchemaWrapper: $$__sveltets_2_IsomorphicComponent<Props, {
     change: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "schema" | "formatExtension">;
 type EditableSchemaWrapper = InstanceType<typeof EditableSchemaWrapper>;
 export default EditableSchemaWrapper;