windmill-components 1.362.0 → 1.362.2

package/package/components/EditableSchemaForm.svelte

@@ -70,7 +70,6 @@ function alignOrderWithProperties(schema) {
             hasChanged = hasChanged || alignOrderWithProperties(schema.properties[k]);
         }
         if (!norder.includes(k)) {
-            console.log('adding', k, index);
             norder = [...norder.slice(0, index), k, ...norder.slice(index)];
         }
         index += 1;
@@ -83,20 +82,22 @@ function alignOrderWithProperties(schema) {
     return hasChanged;
 }
 function onSchemaChange() {
-    dispatch('change', schema);
+    let editSchema = false;
     if (alignOrderWithProperties(schema)) {
-        schema = schema;
+        editSchema = true;
     }
     let lkeys = schema?.order ?? Object.keys(schema?.properties ?? {});
     if (schema?.properties && !deepEqual(lkeys, keys)) {
         keys = [...lkeys];
-        schema = schema;
+        editSchema = true;
         if (opened == undefined) {
             opened = keys[0];
         }
     }
+    if (editSchema) {
+        schema = schema;
+    }
 }
-let renderCount = 0;
 let opened = keys[0];
 let selected = '';
 export function openField(key) {
@@ -165,25 +166,25 @@ let editor = undefined;
 		{#if !noPreview}
 			<Pane size={50} minSize={20}>
 				<div class="p-4">
-					{#key renderCount}
-						<SchemaFormDnd
-							{schema}
-							{dndType}
-							bind:args
-							on:click={(e) => {
-								opened = e.detail
-							}}
-							on:reorder={(e) => {
-								schema.order = e.detail
-							}}
-							on:change={() => {
-								schema = schema
-								dispatch('change', schema)
-							}}
-							{lightweightMode}
-							prettifyHeader={isAppInput}
-						/>
-					{/key}
+					<SchemaFormDnd
+						{schema}
+						{dndType}
+						bind:args
+						on:click={(e) => {
+							opened = e.detail
+						}}
+						on:reorder={(e) => {
+							schema.order = e.detail
+							schema = schema
+							dispatch('change', schema)
+						}}
+						on:change={() => {
+							schema = schema
+							dispatch('change', schema)
+						}}
+						{lightweightMode}
+						prettifyHeader={isAppInput}
+					/>
 				</div>
 			</Pane>
 		{/if}
@@ -439,8 +440,9 @@ let editor = undefined;
 																	schema.required = schema.required?.filter((x) => x !== argName)
 																}
 															}}
-															on:schemaChange={() => {
-																renderCount++
+															on:schemaChange={(e) => {
+																schema = schema
+																dispatch('change', schema)
 															}}
 														/>
 													{/if}

package/package/components/schema/EditableSchemaDrawer.svelte

@@ -153,9 +153,10 @@ let error = undefined;
 	<Drawer bind:this={schemaFormDrawer} size="1200px">
 		<DrawerContent noPadding title="UI Customisation" on:close={schemaFormDrawer.closeDrawer}>
 			<svelte:fragment slot="actions">
-				<AddProperty bind:schema />
+				<AddProperty on:change bind:schema />
 			</svelte:fragment>
 			<EditableSchemaForm
+				on:change
 				bind:this={editableSchemaForm}
 				bind:schema
 				isAppInput

package/package/components/schema/EditableSchemaWrapper.svelte

@@ -1,33 +1,22 @@
 <script>import { twMerge } from 'tailwind-merge';
 import EditableSchemaForm from '../EditableSchemaForm.svelte';
 import AddProperty from './AddProperty.svelte';
-import { createEventDispatcher } from 'svelte';
 export let schema;
 export let offset = 0;
 export let uiOnly = false;
 export let noPreview = false;
 export let fullHeight = true;
 export let lightweightMode = false;
-export let watchChanges = false;
-const dispatch = createEventDispatcher();
-$: watchChanges && onChange();
-let firstChange = true;
-function onChange() {
-    if (firstChange) {
-        firstChange = false;
-        return;
-    }
-    dispatch('change', { schema });
-}
 let addProperty = undefined;
 </script>
 
 <div class={twMerge(fullHeight ? 'h-full' : 'h-80', 'border overflow-y-auto rounded-md')}>
 	<div class="p-4 border-b">
-		<AddProperty bind:schema bind:this={addProperty} />
+		<AddProperty on:change bind:schema bind:this={addProperty} />
 	</div>
 	<EditableSchemaForm
 		bind:schema
+		on:change
 		isFlowInput
 		on:edit={(e) => {
 			addProperty?.openDrawer(e.detail)

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

@@ -8,7 +8,6 @@ declare const __propDef: {
         noPreview?: boolean | undefined;
         fullHeight?: boolean | undefined;
         lightweightMode?: boolean | undefined;
-        watchChanges?: boolean | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/package/components/schema/FlowPropertyEditor.svelte

@@ -15,7 +15,7 @@ import Button from '../common/button/Button.svelte';
 import { Pen, Plus, Trash2 } from 'lucide-svelte';
 import Popup from '../common/popup/Popup.svelte';
 import { deepEqual } from 'fast-equals';
-export let format = '';
+export let format = undefined;
 export let contentEncoding = undefined;
 export let type = undefined;
 export let oneOf = undefined;
@@ -52,10 +52,12 @@ function oneOfUpdate(oneOf) {
             !deepEqual(oneOf.map((v) => [v.title, v.order]), schema.oneOf.map((v) => [v.title, v.order]))) {
             // update schema if not exists or order changed
             schema.oneOf = getOneOfWithoutLabel(oneOf);
+            schema = schema;
         }
     }
     else if (!oneOf) {
         schema.oneOf = undefined;
+        schema = schema;
     }
 }
 $: oneOfUpdate(oneOf);
@@ -63,6 +65,7 @@ function orderUpdate(order) {
     if (order && !deepEqual(order, schema.order)) {
         // update from external reordering
         schema.order = order;
+        schema = schema;
     }
 }
 $: orderUpdate(order);
@@ -79,7 +82,6 @@ let schema = {
     required: requiredProperty,
     oneOf: oneOf ? getOneOfWithoutLabel(oneOf) : undefined
 };
-console.log('initial schema', schema);
 function schemaUpdate(changedSchema) {
     if (!deepEqual(changedSchema, {
         properties,
@@ -87,9 +89,9 @@ function schemaUpdate(changedSchema) {
         required: requiredProperty,
         oneOf: oneOf ? getOneOfWithoutLabel(oneOf) : undefined
     })) {
-        properties = changedSchema.properties;
-        order = changedSchema.order;
-        requiredProperty = changedSchema.required;
+        properties = structuredClone(changedSchema.properties);
+        order = structuredClone(changedSchema.order);
+        requiredProperty = structuredClone(changedSchema.required);
         oneOf = changedSchema.oneOf?.map((v) => {
             return {
                 ...v,
@@ -102,7 +104,7 @@ function schemaUpdate(changedSchema) {
                 }
             };
         });
-        dispatch('schemaChange');
+        dispatch('schemaChange', { properties, order, requiredProperty, oneOf });
     }
 }
 $: schemaUpdate(schema);
@@ -140,6 +142,7 @@ function renameVariant(name, selected) {
         variantName = '';
     }
 }
+let initialObjectSelected = Object.keys(schema?.properties ?? {}).length == 0 ? 'resource' : 'custom-object';
 </script>
 
 <div class="flex flex-col gap-2">
@@ -263,7 +266,7 @@ function renameVariant(name, selected) {
 		{/if}
 	{:else if type === 'object' && format !== 'resource-s3_object'}
 		<Tabs
-			selected="resource"
+			selected={initialObjectSelected}
 			on:selected={(e) => {
 				if (e.detail === 'custom-object') {
 					format = ''

package/package/components/schema/PropertyEditor.svelte

@@ -11,7 +11,7 @@ import { deepEqual } from 'fast-equals';
 import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte';
 export let description = '';
-export let format = '';
+export let format = undefined;
 export let contentEncoding = undefined;
 export let type = undefined;
 export let oneOf = undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.362.0",
+	"version": "1.362.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",