windmill-components 1.35.1 → 1.35.43

package/components/ArgInput.svelte

@@ -4,13 +4,13 @@ import { setInputCat as computeInputCat } from '../utils';
 import { Button, Tooltip } from 'flowbite-svelte';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
-import Editor from './Editor.svelte';
 import FieldHeader from './FieldHeader.svelte';
 import ObjectResourceInput from './ObjectResourceInput.svelte';
 import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
 import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import SchemaForm from './SchemaForm.svelte';
+import SimpleEditor from './SimpleEditor.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -83,7 +83,7 @@ function fileChanged(e, cb) {
     }
 }
 function validateInput(pattern, v) {
-    if (required && (v == undefined || v == null)) {
+    if (required && (v == undefined || v == null || v === '')) {
         error = 'This field is required';
         valid = false;
     }
@@ -108,8 +108,11 @@ function testRegex(pattern, value) {
     }
 }
 $: {
-    if (value == undefined) {
+    if (value == undefined || value == null) {
         value = defaultValue;
+        if ((defaultValue === undefined || defaultValue === null) && inputCat === 'string') {
+            value = '';
+        }
     }
 }
 export let inputCat = 'string';
@@ -156,25 +159,19 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					</div>
 				{/if}
 			</div>
-			<span class="text-2xs">Preview:</span>
+			<span class="text-2xs">Input preview:</span>
 		{/if}
 
-		<div class="grid grid-cols-2">
-			{#if description || error}
-				<div class="text-sm italic pb-1">
-					{description}
-				</div>
-				<div class="text-right text-xs {error === '' ? 'text-white' : 'font-bold text-red-600'}">
-					{error === '' ? '...' : error}
-				</div>
-			{:else}
-				<div class="mt-1" />
-			{/if}
-		</div>
+		{#if description}
+			<div class="text-sm italic pb-1">
+				{description}
+			</div>
+		{/if}
 
 		<div class="flex space-x-1">
 			{#if inputCat == 'number'}
 				<input
+					on:focus
 					{disabled}
 					type="number"
 					class={valid
@@ -199,7 +196,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'list'}
 				<div>
 					<div>
-						{#each value ?? [] as v}
+						{#each value ?? [] as v, i}
 							<div class="flex flex-row max-w-md mt-1">
 								{#if itemsType?.type == 'number'}
 									<input type="number" bind:value={v} />
@@ -207,7 +204,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 									<input
 										type="file"
 										class="my-6"
-										on:change={(x) => fileChanged(x, (val) => (v = val))}
+										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
 										multiple={false}
 									/>
 								{:else}
@@ -275,7 +272,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				<input class="inline-block" type="datetime-local" bind:value />
 			{:else if inputCat == 'sql'}
 				<div class="border rounded mb-4 w-full border-gray-700">
-					<Editor
+					<SimpleEditor
 						on:focus={() => dispatch('focus')}
 						on:blur={() => dispatch('blur')}
 						bind:this={editor}
@@ -319,7 +316,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				/>
 			{/if}
 			{#if !required && inputCat != 'resource-object'}
-				<Tooltip placement="bottom" content="Reset to default value">
+				<!-- <Tooltip placement="bottom" content="Reset to default value">
 					<Button
 						on:click={() => (value = undefined)}
 						{disabled}
@@ -329,9 +326,12 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					>
 						<Icon data={faArrowRotateLeft} />
 					</Button>
-				</Tooltip>
+				</Tooltip> -->
 			{/if}
 			<slot name="actions" />
 		</div>
+		<div class="text-right text-xs {error === '' ? 'text-white' : 'font-bold text-red-600'}">
+			{error === '' ? '...' : error}
+		</div>
 	</div>
 </div>

package/components/ArgInput.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 import { type InputCat } from '../utils';
-import Editor from './Editor.svelte';
 import type { SchemaProperty } from '../common';
+import SimpleEditor from './SimpleEditor.svelte';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -27,13 +27,13 @@ declare const __propDef: {
         properties?: {
             [name: string]: SchemaProperty;
         } | undefined;
-        editor?: Editor | undefined;
+        editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         inputCat?: InputCat | undefined;
     };
     events: {
-        input: CustomEvent<any>;
         focus: CustomEvent<any>;
+        input: CustomEvent<any>;
         blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/DisplayResult.svelte

@@ -47,74 +47,80 @@ function inferResultKind(result) {
 }
 </script>
 
-{#if result}
-	{#if typeof result == 'object' && Object.keys(result).length > 0}<div>
-			The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
-		</div>
-	{/if}
-	{#if resultKind == 'table-col'}
-		<div class="grid grid-flow-col-dense border border-gray-200 rounded-md ">
-			{#each Object.keys(result) as col}
-				<div class="flex flex-col max-h-40 min-w-full overflow-auto">
-					<div class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md ">
-						{col}
+<div>
+	{#if result}
+		{#if typeof result == 'object' && Object.keys(result).length > 0}
+			<div>
+				The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
+			</div>{/if}{#if resultKind == 'table-col'}
+			<div class="grid grid-flow-col-dense border border-gray-200 rounded-md ">
+				{#each Object.keys(result) as col}
+					<div class="flex flex-col max-h-40 min-w-full overflow-auto">
+						<div
+							class="px-12 text-left uppercase border-b bg-gray-50 overflow-hidden rounded-t-md "
+						>
+							{col}
+						</div>
+						{#if Array.isArray(result[col])}
+							{#each result[col] as item}
+								<div class="px-12 text-left  whitespace-nowrap">
+									{typeof item === 'string' ? item : JSON.stringify(item)}
+								</div>
+							{/each}
+						{/if}
 					</div>
-					{#if Array.isArray(result[col])}
-						{#each result[col] as item}
-							<div class="px-12 text-left  whitespace-nowrap">
-								{typeof item === 'string' ? item : JSON.stringify(item)}
-							</div>
+				{/each}
+			</div>
+		{:else if resultKind == 'table-row'}<div
+				class="grid grid-flow-col-dense border border-gray-200 rounded-md "
+			>
+				<TableCustom>
+					<tbody slot="body">
+						{#each asListOfList(result) as row}
+							<tr>
+								{#each row as v}
+									<td>{truncate(JSON.stringify(v), 200) ?? ''}</td>
+								{/each}
+							</tr>
 						{/each}
-					{/if}
-				</div>
-			{/each}
-		</div>
-	{:else if resultKind == 'table-row'}<div
-			class="grid grid-flow-col-dense border border-gray-200 rounded-md "
-		>
-			<TableCustom>
-				<tbody slot="body">
-					{#each asListOfList(result) as row}
-						<tr>
-							{#each row as v}
-								<td>{truncate(JSON.stringify(v), 200) ?? ''}</td>
-							{/each}
-						</tr>
-					{/each}
-				</tbody>
-			</TableCustom>
-		</div>
-	{:else if resultKind == 'png'}
-		<div class="h-full">
-			Result is an image: <img
-				alt="png rendered"
-				class="w-auto h-full"
-				src="data:image/png;base64,{result.png}"
+					</tbody>
+				</TableCustom>
+			</div>
+		{:else if resultKind == 'png'}
+			<div class="h-full">
+				Result is an image: <img
+					alt="png rendered"
+					class="w-auto h-full"
+					src="data:image/png;base64,{result.png}"
+				/>
+			</div>
+		{:else if resultKind == 'jpeg'}
+			<div class="h-full">
+				Result is an image: <img
+					alt="jpeg rendered"
+					class="w-auto h-full"
+					src="data:image/jpeg;base64,{result.jpeg}"
+				/>
+			</div>
+		{:else if resultKind == 'gif'}
+			<div class="h-full">
+				Result is an image: <img
+					alt="gif rendered"
+					class="w-auto h-full"
+					src="data:image/gif;base64,{result.gif}"
+				/>
+			</div>
+		{:else if resultKind == 'file'}
+			<div>
+				Result is a file: <a
+					download="windmill.file"
+					href="data:application/octet-stream;base64,{result.file}">Download</a
+				>
+			</div>
+		{:else}<Highlight
+				language={json}
+				code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
 			/>
-		</div>
-	{:else if resultKind == 'jpeg'}
-		<div class="h-full">
-			Result is an image: <img
-				alt="jpeg rendered"
-				class="w-auto h-full"
-				src="data:image/jpeg;base64,{result.jpeg}"
-			/>
-		</div>
-	{:else if resultKind == 'gif'}
-		<div class="h-full">
-			Result is an image: <img
-				alt="gif rendered"
-				class="w-auto h-full"
-				src="data:image/gif;base64,{result.gif}"
-			/>
-		</div>
-	{:else if resultKind == 'file'}
-		<div>
-			Result is a file: <a
-				download="windmill.file"
-				href="data:application/octet-stream;base64,{result.file}">Download</a
-			>
-		</div>
-	{:else}<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+		{/if}
 	{/if}
-{/if}
+</div>