windmill-components 1.339.2 → 1.352.0

package/package/assets/app.css

@@ -94,18 +94,6 @@
 	.Template-editor span.mtk20 {
 		color: black !important;
 	}
-
-	::-webkit-scrollbar {
-		width: 9px;
-		height: 9px;
-	}
-	::-webkit-scrollbar-track {
-		background: transparent;
-	}
-	::-webkit-scrollbar-thumb {
-		background-color: rgba(155, 155, 155, 0.5);
-		border: transparent;
-	}
 }
 
 @layer components {

package/package/ata/index.js

@@ -70,6 +70,7 @@ export const setupTypeAcquisition = (config) => {
                     ? f.raw
                     : '/' + config.scriptPath + (f.raw.startsWith('../') ? '/../' : '/.') + f.raw;
                 let url = config.root + path;
+                // console.log('FOO', config.scriptPath, path, f.raw)
                 console.log('fetching local file', url, f.raw);
                 const res = await fetch(url);
                 if (res.ok) {

package/package/autosize.js

@@ -37,7 +37,7 @@ export const action = (node) => {
         node.style.height = height + 'px';
     };
     const setHeight = () => {
-        node.style.height = '0px';
+        node.style.height = 'auto';
         node.style.height = Math.max(node.scrollHeight ?? 0, 30) + 2 + 'px';
     };
     const addStyles = () => {

package/package/common.d.ts

@@ -10,12 +10,13 @@ export interface PropertyDisplayInfo {
     index: number;
     propertiesNumber: number;
 }
+export type EnumType = string[] | undefined;
 export interface SchemaProperty {
     type: string | undefined;
     description?: string;
     pattern?: string;
     default?: any;
-    enum?: string[];
+    enum?: EnumType;
     contentEncoding?: 'base64' | 'binary';
     format?: string;
     items?: {
@@ -40,6 +41,8 @@ export interface SchemaProperty {
     dateFormat?: string;
     title?: string;
     placeholder?: string;
+    oneOf?: SchemaProperty[];
+    originalType?: string;
 }
 export interface ModalSchemaProperty {
     selectedType?: string;
@@ -53,7 +56,7 @@ export interface ModalSchemaProperty {
     multiselect?: boolean;
     format?: string;
     pattern?: string;
-    enum_?: string[];
+    enum_?: EnumType;
     default?: any;
     items?: {
         type?: 'string' | 'number';
@@ -68,6 +71,7 @@ export interface ModalSchemaProperty {
     dateFormat?: string;
     title?: string;
     placeholder?: string;
+    oneOf?: SchemaProperty[];
 }
 export declare function modalToSchema(schema: ModalSchemaProperty): SchemaProperty;
 export type Schema = {

package/package/common.js

@@ -21,7 +21,8 @@ export function modalToSchema(schema) {
         nullable: schema.nullable,
         dateFormat: schema.dateFormat,
         title: schema.title,
-        placeholder: schema.placeholder
+        placeholder: schema.placeholder,
+        oneOf: schema.oneOf
     };
 }
 export function mergeSchema(schema, enum_payload = {}) {

package/package/components/AppConnectDrawer.svelte

@@ -8,7 +8,7 @@ let resourceType = '';
 let step = 1;
 let disabled = false;
 let isGoogleSignin = false;
-let manual = false;
+let manual = true;
 let appConnectInner = undefined;
 let rtToLoad = '';
 export async function open(rt) {

package/package/components/AppConnectInner.svelte

@@ -21,7 +21,7 @@ export let step = 1;
 export let resourceType = '';
 export let isGoogleSignin = false;
 export let disabled = false;
-export let manual = false;
+export let manual = true;
 let isValid = true;
 const nativeLanguagesCategory = [
     'postgresql',
@@ -53,26 +53,19 @@ let description = '';
 let resourceTypeInfo = undefined;
 let pathError = '';
 export async function open(rt) {
+    if (!rt) {
+        loadResourceTypes();
+    }
     step = 1;
     value = '';
     description = '';
     resourceType = rt ?? '';
     valueToken = undefined;
     await loadConnects();
-    const isConnect = connects?.includes(resourceType);
-    if (isConnect) {
-        manual = false;
+    manual = !connects?.includes(resourceType);
+    if (rt) {
         next();
     }
-    else {
-        manual = true;
-        if (rt) {
-            next();
-        }
-        else {
-            loadResourceTypes();
-        }
-    }
 }
 async function loadConnects() {
     if (!connects) {
@@ -156,11 +149,12 @@ async function getResourceTypeInfo() {
 export async function next() {
     if (step == 1) {
         if (manual) {
-            await getResourceTypeInfo();
+            getResourceTypeInfo();
             args = {};
         }
         else {
-            await Promise.all([getScopesAndParams(), getResourceTypeInfo()]);
+            getResourceTypeInfo();
+            getScopesAndParams();
         }
         step += 1;
     }

package/package/components/ArgEnum.svelte

@@ -9,9 +9,11 @@ export let defaultValue;
 export let valid;
 export let create;
 export let required;
+export let enumLabels = undefined;
 const dispatch = createEventDispatcher();
 let customItems = [];
 function onCreate(newItem) {
+    console.log(newItem);
     customItems = [...customItems, newItem];
     return newItem;
 }
@@ -20,7 +22,8 @@ function onCreate(newItem) {
 <div class="w-full flex-col">
 	<div class="w-full">
 		<AutoComplete
-			items={[...(required ? [] : ['']), ...(enum_ ?? []), ...customItems]}
+			items={[...(required ? [] : ['']), ...(enum_ ? enum_ : []), ...customItems]}
+			labelFunction={(val) => (enumLabels ? enumLabels[val] ?? val : val)}
 			bind:selectedItem={value}
 			inputClassName={twMerge(
 				'bg-surface-secondary flex',

package/package/components/ArgEnum.svelte.d.ts

@@ -1,14 +1,16 @@
 import { SvelteComponent } from "svelte";
+import type { EnumType } from '../common';
 declare const __propDef: {
     props: {
         disabled: boolean;
         value: any;
-        enum_: string[] | undefined;
+        enum_: EnumType;
         autofocus: boolean | null;
         defaultValue: string | undefined;
         valid: boolean;
         create: boolean;
         required: boolean;
+        enumLabels?: Record<string, string> | undefined;
     };
     events: {
         focus: CustomEvent<any>;

package/package/components/ArgInput.svelte

@@ -1,23 +1,18 @@
-<script>import { setInputCat as computeInputCat, emptyString, shouldDisplayPlaceholder } 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 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';
@@ -26,8 +21,11 @@ import FileUpload from './common/fileUpload/FileUpload.svelte';
 import autosize from '../autosize';
 import PasswordArgInput from './PasswordArgInput.svelte';
 import Password from './Password.svelte';
-import Label from './Label.svelte';
-import Tooltip from './Tooltip.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;
@@ -35,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;
@@ -64,7 +62,33 @@ export let onlyMaskPassword = false;
 export let nullable = false;
 export let title = undefined;
 export let placeholder = undefined;
-let seeEditable = enum_ != undefined || pattern != 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 = '';
@@ -72,7 +96,6 @@ 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;
@@ -184,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
@@ -212,114 +241,8 @@ 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 label="Description">
-				<textarea
-					class="mb-1"
-					use:autosize
-					rows="1"
-					bind:value={description}
-					on:keydown={onKeyDown}
-					placeholder="Field description"
-				/>
-			</Label>
-			<div class="flex flex-row gap-2 w-full">
-				<Label label="Custom Title" class="w-full">
-					<svelte:fragment slot="header">
-						<Tooltip light>Will be displayed in the UI instead of the field name.</Tooltip>
-					</svelte:fragment>
-					<input class="mb-1" bind:value={title} on:keydown={onKeyDown} placeholder="Field title" />
-				</Label>
-			</div>
 
-			{#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:password={extra['password']}
-									bind:minRows={extra['minRows']}
-									bind:disableCreate={extra['disableCreate']}
-									bind:disableVariablePicker={extra['disableVariablePicker']}
-									bind:dateFormat={extra['dateFormat']}
-								/>
-							{: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 shouldDisplayPlaceholder(type, format, enum_, contentEncoding, pattern)}
-							<Label label="Placeholder" class="pt-2">
-								<textarea placeholder="Enter a placeholder" rows="1" bind:value={placeholder} />
-							</Label>
-						{/if}
-						{#if !required && type === 'string'}
-							<div class="mt-2 border-t pt-4">
-								<Toggle
-									options={{
-										right: 'Nullable',
-										rightTooltip:
-											'If enabled, the default value will be null and not an empty string.'
-									}}
-									size="xs"
-									bind:checked={extra.nullable}
-								/>
-							</div>
-						{/if}
-					{/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 whitespace-normal">{description}</pre>
@@ -329,15 +252,7 @@ function changePosition(i, up) {
 		<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}
@@ -444,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" />
@@ -506,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('_', '')
@@ -561,15 +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
-							{onlyMaskPassword}
-							{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 />
@@ -610,6 +650,7 @@ function changePosition(i, up) {
 						bind:value
 						{enum_}
 						{autofocus}
+						enumLabels={extra['enumLabels']}
 					/>
 				</div>
 			{:else if inputCat == 'date'}
@@ -650,6 +691,7 @@ function changePosition(i, up) {
 					selectFirst
 					{disablePortal}
 					bind:value
+					initialValue={defaultValue}
 					resourceType={format && format.split('-').length > 1
 						? format.substring('resource-'.length)
 						: undefined}
@@ -736,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;
@@ -51,13 +48,16 @@ declare const __propDef: {
         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>;
     };