windmill-components 1.309.7 → 1.352.0

package/package/components/ArgInput.svelte

@@ -1,29 +1,31 @@
-<script>import { setInputCat as computeInputCat, emptyString } from '../utils';
-import { ChevronDown, DollarSign, Pipette, Plus, X } from 'lucide-svelte';
-import { createEventDispatcher } from 'svelte';
+<script>import { setInputCat as computeInputCat, debounce, emptyString } from '../utils';
+import { DollarSign, Pipette, Plus, X } from 'lucide-svelte';
+import { createEventDispatcher, tick } from 'svelte';
 import Multiselect from 'svelte-multiselect';
 import { fade } from 'svelte/transition';
 import JsonEditor from './apps/editor/settingsPanel/inputEditor/JsonEditor.svelte';
-import { Badge, Button, SecondsInput } from './common';
+import { Button, SecondsInput } from './common';
 import FieldHeader from './FieldHeader.svelte';
-import NumberTypeNarrowing from './NumberTypeNarrowing.svelte';
 import ObjectResourceInput from './ObjectResourceInput.svelte';
-import ObjectTypeNarrowing from './ObjectTypeNarrowing.svelte';
-import Password from './Password.svelte';
 import Range from './Range.svelte';
 import ResourcePicker from './ResourcePicker.svelte';
-import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
-import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import Toggle from './Toggle.svelte';
 import { twMerge } from 'tailwind-merge';
 import ArgEnum from './ArgEnum.svelte';
-import ArrayTypeNarrowing from './ArrayTypeNarrowing.svelte';
 import DateTimeInput from './DateTimeInput.svelte';
+import DateInput from './DateInput.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
 import CurrencyInput from './apps/components/inputs/currency/CurrencyInput.svelte';
 import FileUpload from './common/fileUpload/FileUpload.svelte';
 import autosize from '../autosize';
+import PasswordArgInput from './PasswordArgInput.svelte';
+import Password from './Password.svelte';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import SchemaFormDnd from './schema/SchemaFormDND.svelte';
+import SchemaForm from './SchemaForm.svelte';
+import { deepEqual } from 'fast-equals';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -31,12 +33,12 @@ export let description = '';
 export let format = '';
 export let contentEncoding = undefined;
 export let type = undefined;
+export let oneOf = undefined;
 export let required = false;
 export let pattern = undefined;
 export let valid = true;
 export let enum_ = undefined;
 export let disabled = false;
-export let editableSchema = undefined;
 export let itemsType = undefined;
 export let displayHeader = true;
 export let properties = undefined;
@@ -56,7 +58,37 @@ export let disablePortal = false;
 export let showSchemaExplorer = false;
 export let simpleTooltip = undefined;
 export let customErrorMessage = undefined;
-let seeEditable = enum_ != undefined || pattern != undefined;
+export let onlyMaskPassword = false;
+export let nullable = false;
+export let title = undefined;
+export let placeholder = undefined;
+export let order = undefined;
+export let editor = undefined;
+export let orderEditable = false;
+export let shouldDispatchChanges = false;
+let oneOfSelected = undefined;
+async function updateOneOfSelected(oneOf) {
+    if (oneOf &&
+        oneOf.length >= 2 &&
+        (!oneOfSelected || !oneOf.some((o) => o.title === oneOfSelected))) {
+        if (value && value['label'] && oneOf.some((o) => o.title === value['label'])) {
+            const existingValue = JSON.parse(JSON.stringify(value));
+            oneOfSelected = value['label'];
+            await tick();
+            value = existingValue;
+        }
+        else {
+            oneOfSelected = oneOf[0]['title'];
+        }
+    }
+}
+$: updateOneOfSelected(oneOf);
+function updateOneOfSelectedValue(oneOfSelected) {
+    if (oneOfSelected) {
+        value = { label: oneOfSelected };
+    }
+}
+$: updateOneOfSelectedValue(oneOfSelected);
 const dispatch = createEventDispatcher();
 let ignoreValueUndefined = false;
 let error = '';
@@ -64,16 +96,15 @@ let s3FilePicker;
 let s3FileUploadRawMode;
 let isListJson = false;
 let el = undefined;
-export let editor = undefined;
 let inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncoding);
 let rawValue = undefined;
-function computeDefaultValue(nvalue, inputCat, defaultValue) {
+function computeDefaultValue(nvalue, inputCat, defaultValue, nnullable) {
     if ((value == undefined || value == null) && !ignoreValueUndefined) {
         value = defaultValue;
         if (defaultValue === undefined || defaultValue === null) {
             if (inputCat === 'string') {
-                value = '';
+                value = nullable ? null : '';
             }
             else if (inputCat == 'enum' && required) {
                 value = enum_?.[0];
@@ -89,9 +120,12 @@ function computeDefaultValue(nvalue, inputCat, defaultValue) {
             evalValueToRaw();
         }
     }
+    if (nnullable && type === 'string' && value === '') {
+        value = null;
+    }
 }
 computeDefaultValue();
-$: computeDefaultValue(value, inputCat, defaultValue);
+$: computeDefaultValue(value, inputCat, defaultValue, nullable);
 $: defaultValue != undefined && handleDefaultValueChange();
 let oldDefaultValue = defaultValue;
 function handleDefaultValueChange() {
@@ -128,7 +162,11 @@ export function focus() {
     }
 }
 function validateInput(pattern, v, required) {
-    if (required && (v == undefined || v == null || v === '')) {
+    if (nullable && emptyString(v)) {
+        error = '';
+        valid && (valid = true);
+    }
+    else if (required && (v == undefined || v == null || v === '')) {
         error = 'Required';
         valid && (valid = false);
     }
@@ -169,9 +207,15 @@ function onKeyDown(e) {
 let redraw = 0;
 let itemsLimit = 50;
 $: validateInput(pattern, value, required);
-function changePosition(i, up) {
-    dispatch('changePosition', { i, up });
+let oldValue = value;
+function compareValues(value) {
+    if (!deepEqual(oldValue, value)) {
+        oldValue = value;
+        dispatch('change');
+    }
 }
+let debounced = debounce(() => compareValues(value), 50);
+$: shouldDispatchChanges && debounced(value);
 </script>
 
 <S3FilePicker
@@ -183,14 +227,13 @@ function changePosition(i, up) {
 	}}
 	readOnlyMode={false}
 />
-
 <!-- svelte-ignore a11y-autofocus -->
 <div class="flex flex-col w-full {minW ? 'min-w-[250px]' : ''}">
 	<div>
 		{#if displayHeader}
 			<FieldHeader
 				prettify={prettifyHeader}
-				{label}
+				label={title && !emptyString(title) ? title : label}
 				{disabled}
 				{required}
 				{type}
@@ -198,102 +241,18 @@ function changePosition(i, up) {
 				{format}
 				{simpleTooltip}
 			/>
-			{#if editableSchema}
-				<span class="mx-8" />
-				{#if editableSchema.i > 0}
-					<button
-						on:click={() => changePosition(editableSchema?.i ?? 0, true)}
-						class="text-lg mr-2"
-					>
-						&uparrow;</button
-					>
-				{/if}
-				{#if editableSchema.i < editableSchema.total - 1}
-					<button
-						on:click={() => changePosition(editableSchema?.i ?? 0, false)}
-						class="text-lg mr-2">&downarrow;</button
-					>
-				{/if}
-			{/if}
 		{/if}
-		{#if editableSchema}
-			<label class="text-secondary">
-				<textarea
-					class="mb-1"
-					use:autosize
-					rows="1"
-					bind:value={description}
-					on:keydown={onKeyDown}
-					placeholder="Field description"
-				/>
-			</label>
-
-			{#if type == 'array'}
-				<ArrayTypeNarrowing bind:itemsType />
-			{:else if type == 'string' || ['number', 'integer', 'object'].includes(type ?? '')}
-				<div class="p-2 my-2 mv-1 text-xs border-solid border rounded-lg">
-					<div class="w-min">
-						<Button
-							on:click={() => {
-								seeEditable = !seeEditable
-							}}
-							endIcon={{
-								icon: ChevronDown,
-								classes: twMerge('rotate-0 duration-300', seeEditable ? '!rotate-180' : '')
-							}}
-							color="light"
-							size="xs"
-						>
-							Customize
-						</Button>
-					</div>
 
-					{#if seeEditable}
-						<div class="mt-2">
-							{#if type == 'string'}
-								<StringTypeNarrowing
-									bind:customErrorMessage
-									bind:format
-									bind:pattern
-									bind:enum_
-									bind:contentEncoding
-									bind:minRows={extra['minRows']}
-									bind:disableCreate={extra['disableCreate']}
-									bind:disableVariablePicker={extra['disableVariablePicker']}
-								/>
-							{:else if type == 'number' || type == 'integer'}
-								<NumberTypeNarrowing
-									bind:min={extra['min']}
-									bind:max={extra['max']}
-									bind:currency={extra['currency']}
-									bind:currencyLocale={extra['currencyLocale']}
-								/>
-							{:else if type == 'object'}
-								<ObjectTypeNarrowing bind:format />
-							{/if}
-						</div>
-					{/if}
-				</div>
-			{/if}
-			<span class="text-2xs font-semibold">Preview:</span>
-		{/if}
 		{#if description}
 			<div class="text-xs italic pb-1 text-secondary">
-				<pre class="font-main">{description}</pre>
+				<pre class="font-main whitespace-normal">{description}</pre>
 			</div>
 		{/if}
+
 		<div class="flex space-x-1">
 			{#if inputCat == 'number'}
 				{#if extra['min'] != undefined && extra['max'] != undefined}
-					<div class="flex w-full gap-1">
-						<span>{extra['min']}</span>
-
-						<div class="grow">
-							<Range bind:value min={extra['min']} max={extra['max']} />
-						</div>
-						<span>{extra['max']}</span>
-						<span class="mx-2"><Badge large color="blue">{value}</Badge></span>
-					</div>
+					<Range bind:value min={extra['min']} max={extra['max']} {defaultValue} />
 				{:else if extra['seconds'] !== undefined}
 					<SecondsInput bind:seconds={value} on:focus />
 				{:else if extra?.currency}
@@ -322,7 +281,7 @@ function changePosition(i, up) {
 							class={valid
 								? ''
 								: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}
-							placeholder={defaultValue ?? ''}
+							placeholder={placeholder ?? defaultValue ?? ''}
 							bind:value
 							min={extra['min']}
 							max={extra['max']}
@@ -400,6 +359,7 @@ function changePosition(i, up) {
 															{autofocus}
 															bind:value={v}
 															enum_={itemsType?.enum ?? []}
+															enumLabels={extra['enumLabels']}
 														/>
 													{:else}
 														<input type="text" bind:value={v} id="arg-input-array" />
@@ -462,7 +422,14 @@ function changePosition(i, up) {
 			{:else if inputCat == 'resource-object' && resourceTypes == undefined}
 				<span class="text-2xs text-tertiary">Loading resource types...</span>
 			{:else if inputCat == 'resource-object' && (resourceTypes == undefined || (format.split('-').length > 1 && resourceTypes.includes(format.substring('resource-'.length))))}
-				<ObjectResourceInput selectFirst {disablePortal} {format} bind:value {showSchemaExplorer} />
+				<ObjectResourceInput
+					{defaultValue}
+					selectFirst
+					{disablePortal}
+					{format}
+					bind:value
+					{showSchemaExplorer}
+				/>
 			{:else if inputCat == 'resource-object' && format.split('-').length > 1 && format
 					.replace('resource-', '')
 					.replace('_', '')
@@ -517,14 +484,132 @@ function changePosition(i, up) {
 					{/if}
 				</div>
 			{:else if inputCat == 'object' || inputCat == 'resource-object' || isListJson}
-				{#if properties && Object.keys(properties).length > 0}
-					<div class="p-4 pl-8 border rounded w-full">
-						<SchemaForm
-							{disablePortal}
-							{disabled}
-							schema={{ properties, $schema: '', required: nestedRequired ?? [], type: 'object' }}
-							bind:args={value}
-						/>
+				{#if oneOf && oneOf.length >= 2}
+					<div class="flex flex-col gap-2 w-full">
+						{#if oneOf && oneOf.length >= 2}
+							<ToggleButtonGroup bind:selected={oneOfSelected}>
+								{#each oneOf as obj}
+									<ToggleButton value={obj.title} label={obj.title} />
+								{/each}
+							</ToggleButtonGroup>
+
+							{#if oneOfSelected}
+								{@const objIdx = oneOf.findIndex((o) => o.title === oneOfSelected)}
+								{@const obj = oneOf[objIdx]}
+								{#if obj && obj.properties && Object.keys(obj.properties).length > 0}
+									<div class="p-4 pl-8 border rounded w-full">
+										{#if orderEditable}
+											<SchemaFormDnd
+												{onlyMaskPassword}
+												{disablePortal}
+												{disabled}
+												schema={{
+													properties: Object.fromEntries(
+														Object.entries(obj.properties).filter(([k, v]) => k !== 'label')
+													),
+													order: obj.order?.filter((k) => k !== 'label') ?? undefined,
+													$schema: '',
+													required: obj.required ?? [],
+													type: 'object'
+												}}
+												args={value}
+												dndType={`nested-${title}`}
+												on:reorder={(e) => {
+													if (oneOf && oneOf[objIdx]) {
+														const keys = e.detail
+														oneOf[objIdx].order = keys
+													}
+												}}
+												on:change
+											/>
+										{:else}
+											<SchemaForm
+												{onlyMaskPassword}
+												{disablePortal}
+												{disabled}
+												noDelete
+												schema={{
+													properties: Object.fromEntries(
+														Object.entries(obj.properties).filter(([k, v]) => k !== 'label')
+													),
+													order: obj.order?.filter((k) => k !== 'label') ?? undefined,
+													$schema: '',
+													required: obj.required ?? [],
+													type: 'object'
+												}}
+												bind:args={value}
+											/>
+										{/if}
+									</div>
+								{:else if disabled}
+									<textarea disabled />
+								{:else}
+									<JsonEditor
+										bind:editor
+										on:focus={(e) => {
+											dispatch('focus')
+										}}
+										on:blur={(e) => {
+											dispatch('blur')
+										}}
+										code={rawValue}
+										bind:value
+									/>
+								{/if}
+							{/if}
+						{:else if disabled}
+							<textarea disabled />
+						{:else}
+							<JsonEditor
+								bind:editor
+								on:focus={(e) => {
+									dispatch('focus')
+								}}
+								on:blur={(e) => {
+									dispatch('blur')
+								}}
+								code={rawValue}
+								bind:value
+							/>
+						{/if}
+					</div>
+				{:else if properties && Object.keys(properties).length > 0}
+					<div class="p-4 pl-8 border rounded-md w-full">
+						{#if orderEditable}
+							<SchemaFormDnd
+								{onlyMaskPassword}
+								{disablePortal}
+								{disabled}
+								schema={{
+									properties,
+									$schema: '',
+									required: nestedRequired ?? [],
+									type: 'object',
+									order
+								}}
+								args={value}
+								dndType={`nested-${title}`}
+								on:reorder={(e) => {
+									const keys = e.detail
+									order = keys
+								}}
+								on:change
+							/>
+						{:else}
+							<SchemaForm
+								{onlyMaskPassword}
+								{disablePortal}
+								{disabled}
+								schema={{
+									properties,
+									order,
+									$schema: '',
+									required: nestedRequired ?? [],
+									type: 'object'
+								}}
+								bind:args={value}
+							/>
+						{/if}
 					</div>
 				{:else if disabled}
 					<textarea disabled />
@@ -565,10 +650,15 @@ function changePosition(i, up) {
 						bind:value
 						{enum_}
 						{autofocus}
+						enumLabels={extra['enumLabels']}
 					/>
 				</div>
 			{:else if inputCat == 'date'}
-				<DateTimeInput useDropdown {autofocus} bind:value />
+				{#if format === 'date'}
+					<DateInput {autofocus} bind:value dateFormat={extra?.['dateFormat']} />
+				{:else}
+					<DateTimeInput useDropdown {autofocus} bind:value />
+				{/if}
 			{:else if inputCat == 'sql' || inputCat == 'yaml'}
 				<div class="border my-1 mb-4 w-full border-primary">
 					<SimpleEditor
@@ -601,6 +691,7 @@ function changePosition(i, up) {
 					selectFirst
 					{disablePortal}
 					bind:value
+					initialValue={defaultValue}
 					resourceType={format && format.split('-').length > 1
 						? format.substring('resource-'.length)
 						: undefined}
@@ -616,14 +707,22 @@ function changePosition(i, up) {
 					class={valid
 						? ''
 						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'}
-					placeholder={defaultValue ?? ''}
+					placeholder={placeholder ?? defaultValue ?? ''}
 					bind:value
 				/>
 			{:else if inputCat == 'string'}
 				<div class="flex flex-col w-full">
 					<div class="flex flex-row w-full items-center justify-between relative">
 						{#if password || extra?.['password'] == true}
-							<Password {disabled} bind:password={value} />
+							{#if onlyMaskPassword}
+								<Password
+									{disabled}
+									bind:password={value}
+									placeholder={placeholder ?? defaultValue ?? ''}
+								/>
+							{:else}
+								<PasswordArgInput {disabled} bind:value />
+							{/if}
 						{:else}
 							{#key extra?.['minRows']}
 								<textarea
@@ -645,7 +744,7 @@ function changePosition(i, up) {
 											? ''
 											: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-3'
 									)}
-									placeholder={defaultValue ?? ''}
+									placeholder={placeholder ?? defaultValue ?? ''}
 									bind:value
 								/>
 							{/key}
@@ -679,6 +778,7 @@ function changePosition(i, up) {
 			{/if}
 			<slot name="actions" />
 		</div>
+
 		{#if !compact || (error && error != '')}
 			<div class="text-right text-xs text-red-600 dark:text-red-400">
 				{#if disabled || error === ''}

package/package/components/ArgInput.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SchemaProperty } from '../common';
+import type { EnumType, SchemaProperty } from '../common';
 import type ItemPicker from './ItemPicker.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import type VariableEditor from './VariableEditor.svelte';
@@ -12,15 +12,12 @@ declare const __propDef: {
         format?: string | undefined;
         contentEncoding?: 'base64' | 'binary' | undefined;
         type?: string | undefined;
+        oneOf?: SchemaProperty[] | undefined;
         required?: boolean | undefined;
         pattern?: undefined | string;
         valid?: boolean | undefined;
-        enum_?: string[] | undefined;
+        enum_?: EnumType;
         disabled?: boolean | undefined;
-        editableSchema?: {
-            i: number;
-            total: number;
-        } | undefined;
         itemsType?: {
             type?: "string" | "number" | "object" | "bytes" | undefined;
             contentEncoding?: "base64" | undefined;
@@ -47,13 +44,20 @@ declare const __propDef: {
         showSchemaExplorer?: boolean | undefined;
         simpleTooltip?: string | undefined;
         customErrorMessage?: string | undefined;
+        onlyMaskPassword?: boolean | undefined;
+        nullable?: boolean | undefined;
+        title?: string | undefined;
+        placeholder?: string | undefined;
+        order?: string[] | undefined;
         editor?: SimpleEditor | undefined;
+        orderEditable?: boolean | undefined;
+        shouldDispatchChanges?: boolean | undefined;
         focus?: (() => void) | undefined;
     };
     events: {
         focus: CustomEvent<any>;
         blur: CustomEvent<any>;
-        changePosition: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/package/components/ArrayTypeNarrowing.svelte

@@ -1,6 +1,7 @@
 <script>import { Plus, X } from 'lucide-svelte';
 import { Button } from './common';
 import { fade } from 'svelte/transition';
+import Label from './Label.svelte';
 export let itemsType;
 let selected = itemsType?.type != 'string'
     ? itemsType?.type
@@ -9,34 +10,35 @@ let selected = itemsType?.type != 'string'
         : 'string';
 </script>
 
-<select
-	bind:value={selected}
-	on:change={() => {
-		if (selected == 'enum') {
-			itemsType = { type: 'string', enum: [] }
-		} else if (selected == 'string') {
-			itemsType = { type: 'string' }
-		} else if (selected == 'number') {
-			itemsType = { type: 'number' }
-		} else if (selected == 'object') {
-			itemsType = { type: 'object' }
-		} else if (selected == 'bytes') {
-			itemsType = { type: 'string', contentEncoding: 'base64' }
-		} else {
-			itemsType = undefined
-		}
-	}}
-	id="array-type-narrowing"
->
-	<option value="string"> Items are strings</option>
-	<option value="enum">Items are strings from an enum</option>
-	<option value="object"> Items are objects (JSON)</option>
-	<option value="number">Items are numbers</option>
-	<option value="bytes">Items are bytes</option>
-</select>
+<Label label="Items type">
+	<select
+		bind:value={selected}
+		on:change={() => {
+			if (selected == 'enum') {
+				itemsType = { type: 'string', enum: [] }
+			} else if (selected == 'string') {
+				itemsType = { type: 'string' }
+			} else if (selected == 'number') {
+				itemsType = { type: 'number' }
+			} else if (selected == 'object') {
+				itemsType = { type: 'object' }
+			} else if (selected == 'bytes') {
+				itemsType = { type: 'string', contentEncoding: 'base64' }
+			} else {
+				itemsType = undefined
+			}
+		}}
+		id="array-type-narrowing"
+	>
+		<option value="string"> Items are strings</option>
+		<option value="enum">Items are strings from an enum</option>
+		<option value="object"> Items are objects (JSON)</option>
+		<option value="number">Items are numbers</option>
+		<option value="bytes">Items are bytes</option>
+	</select>
+</Label>
 {#if Array.isArray(itemsType?.enum)}
-	<div class="pt-1" />
-	<label for="input" class="mb-2 text-secondary text-xs">
+	<label for="input" class="text-secondary text-xs">
 		Enums
 		<div class="flex flex-col gap-1">
 			{#each itemsType?.enum || [] as e}

package/package/components/CenteredPage.svelte

@@ -2,8 +2,8 @@
 	import { twMerge } from 'tailwind-merge'
 </script>
 
-<div class="pb-8 h-fit-content">
-	<div class={twMerge('max-w-7xl mx-auto px-4 sm:px-6 md:px-8 h-fit-content', $$restProps.class)}>
+<div class="pb-8">
+	<div class={twMerge('max-w-7xl mx-auto px-4 sm:px-6 md:px-8', $$restProps.class)}>
 		<slot />
 	</div>
 </div>