windmill-components 1.79.0 → 1.82.1

package/components/ArgInput.svelte

@@ -164,6 +164,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								use:autosize
 								rows="1"
 								bind:value={description}
+								on:keydown|stopPropagation 
 								placeholder="Field description"
 							/>
 							{#if type == 'string' && format != 'date-time'}
@@ -315,6 +316,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						{autofocus}
 						{disabled}
 						use:autosize
+						on:keydown|stopPropagation 
 						style="max-height: {maxHeight}"
 						on:input={() => {
 							dispatch('input', { rawValue: value, isRaw: false })
@@ -390,6 +392,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 								}}
 								on:blur={() => dispatch('blur')}
 								use:autosize
+								on:keydown|stopPropagation 
 								type="text"
 								{disabled}
 								class="col-span-10 {valid

package/components/ArgInput.svelte.d.ts

@@ -40,6 +40,7 @@ declare const __propDef: {
         focus?: (() => void) | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
         focus: CustomEvent<any>;
         input: CustomEvent<any>;
         blur: CustomEvent<any>;

package/components/DisplayResult.svelte

@@ -5,6 +5,7 @@ import { copyToClipboard, truncate } from '../utils';
 import { Button, Drawer, DrawerContent } from './common';
 import autosize from 'svelte-autosize';
 import { ClipboardCopy } from 'lucide-svelte';
+import Portal from 'svelte-portal';
 export let result;
 export let requireHtmlApproval = false;
 let resultKind;
@@ -74,20 +75,22 @@ let payload = '';
 let jsonViewer;
 </script>
 
-<Drawer bind:this={jsonViewer} size="900px">
-	<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
-		<svelte:fragment slot="actions">
-			<Button
-				on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
-				color="light"
-				size="xs"
-			>
-				<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
-			</Button>
-		</svelte:fragment>
-		<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
-	</DrawerContent>
-</Drawer>
+<Portal>
+	<Drawer bind:this={jsonViewer} size="900px">
+		<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
+			<svelte:fragment slot="actions">
+				<Button
+					on:click={() => copyToClipboard(JSON.stringify(result, null, 4))}
+					color="light"
+					size="xs"
+				>
+					<div class="flex gap-2 items-center">Copy to clipboard <ClipboardCopy /> </div>
+				</Button>
+			</svelte:fragment>
+			<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
+		</DrawerContent>
+	</Drawer>
+</Portal>
 
 <div class="inline-highlight">
 	{#if result != undefined}
@@ -95,7 +98,7 @@ let jsonViewer;
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
 				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
-				class="mb-2 min-w-[400px] text-sm text-gray-700 relative"
+				class="mb-2 min-w-[360px] text-sm text-gray-700 relative"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b>
 				<div class="text-gray-500 text-sm  absolute top-0 right-2">
 					<button on:click={jsonViewer.openDrawer}>Expand JSON</button>

package/components/Multiselect.svelte.d.ts

@@ -4,8 +4,8 @@
 export default class Multiselect extends SvelteComponentTyped<{
     value?: any[] | undefined;
     id?: string | undefined;
-    readonly?: boolean | undefined;
     placeholder?: string | undefined;
+    readonly?: boolean | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,8 +20,8 @@ declare const __propDef: {
     props: {
         value?: any[] | undefined;
         id?: string | undefined;
-        readonly?: boolean | undefined;
         placeholder?: string | undefined;
+        readonly?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/SchemaEditor.svelte

@@ -9,6 +9,7 @@ import TableCustom from './TableCustom.svelte';
 import Toggle from './Toggle.svelte';
 import Tooltip from './Tooltip.svelte';
 import { flip } from 'svelte/animate';
+import Portal from 'svelte-portal';
 const dispatch = createEventDispatcher();
 export let schema = emptySchema();
 if (!schema) {
@@ -166,8 +167,10 @@ let error = '';
 			/>
 			<div class="ml-2">
 				<Tooltip>
-					Arguments can be edited either using the wizard, or by editing their JSON Schema, 
-					<a href="https://docs.windmill.dev/docs/reference/#script-parameters-to-json-schema">see docs</a>
+					Arguments can be edited either using the wizard, or by editing their JSON Schema,
+					<a href="https://docs.windmill.dev/docs/reference/#script-parameters-to-json-schema"
+						>see docs</a
+					>
 				</Tooltip>
 			</div>
 		</div>
@@ -269,11 +272,13 @@ let error = '';
 	</div>
 </div>
 
-<SchemaModal
-	bind:this={schemaModal}
-	bind:property={modalProperty}
-	bind:error={argError}
-	on:save={handleAddOrEditArgument}
-	bind:editing
-	bind:oldArgName
-/>
+<Portal>
+	<SchemaModal
+		bind:this={schemaModal}
+		bind:property={modalProperty}
+		bind:error={argError}
+		on:save={handleAddOrEditArgument}
+		bind:editing
+		bind:oldArgName
+	/>
+</Portal>

package/components/SettingSection.svelte

@@ -38,7 +38,7 @@ let showContent = !accordion;
 	{/if}
 </div>
 {#if showContent}
-	<div transition:slide={{ duration: 300 }}>
+	<div transition:slide|local={{ duration: 300 }}>
 		<slot />
 	</div>
 {/if}

package/components/Toggle.svelte

@@ -5,6 +5,7 @@ export let checked = false;
 export let disabled = false;
 export let textClass = '';
 export let textStyle = '';
+export let color = 'blue';
 export let size = 'sm';
 const id = (Math.random() + 1).toString(36).substring(10);
 const dispatch = createEventDispatcher();
@@ -20,7 +21,7 @@ const dispatch = createEventDispatcher();
 		{#if Boolean(options?.left)}
 			<span
 				class={twMerge(
-					'ml-2 font-medium duration-200',
+					'mr-2 font-medium duration-200',
 					disabled ? 'text-gray-500' : 'text-gray-900',
 					size === 'xs' ? 'text-xs' : 'text-sm',
 					textClass
@@ -49,7 +50,9 @@ const dispatch = createEventDispatcher();
 				class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 
 				peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] 
 				after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 
-				after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"
+				after:border after:rounded-full after:h-5 after:w-5 after:transition-all {color == 'red'
+					? 'peer-checked:bg-red-600'
+					: 'peer-checked:bg-blue-600'}"
 			/>
 		</div>
 		{#if Boolean(options?.right)}

package/components/Toggle.svelte.d.ts

@@ -10,6 +10,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
         textClass?: string | undefined;
         textStyle?: string | undefined;
+        color?: "blue" | "red" | undefined;
         size?: "xs" | "sm" | undefined;
     };
     events: {

package/components/apps/components/buttons/AppButton.svelte

@@ -1,13 +1,12 @@
 <script>import { Button } from '../../../common';
 import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 import { loadIcon } from '../icon';
 import { twMerge } from 'tailwind-merge';
-import { goto } from '$app/navigation';
-import { initOutput } from '../../editor/appUtils';
-import { configurationKeys } from '../../editor/component';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
 export let id;
 export let componentInput;
 export let configuration;
@@ -19,26 +18,20 @@ export let noWFull = false;
 export let preclickAction = undefined;
 export let customCss = undefined;
 export let render;
-export let initializing = true;
+export let initializing = false;
+export let extraKey = undefined;
 export let controls = undefined;
-const { worldStore, app, componentControl } = getContext('AppViewerContext');
+const { worldStore, app, componentControl, selectedComponent } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['buttoncomponent'].initialData.configuration, configuration);
+$: initializing = resolvedConfig?.label == undefined;
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
 if (controls) {
     $componentControl[id] = controls;
 }
 let runnableComponent;
-// let labelValue: string
-// let color: ButtonType.Color
-// let size: ButtonType.Size
-// let disabled: boolean | undefined = undefined
-// let fillContainer: boolean | undefined = undefined
-// let gotoUrl: string | undefined = undefined
-// let gotoNewTab: boolean | undefined = undefined
-let isLoading = false;
-let ownClick = false;
-// let beforeIcon: undefined | string = undefined
-// let afterIcon: undefined | string = undefined
-let resolvedConfig = {};
-$: initializing = resolvedConfig?.label == undefined;
 let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && handleBeforeIcon();
@@ -53,82 +46,68 @@ async function handleAfterIcon() {
         afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
     }
 }
-let outputs = initOutput($worldStore, id, {
-    result: undefined,
-    loading: false
-});
-$: resolvedConfig.triggerOnAppLoad && runnableComponent?.runComponent();
-$: if (outputs?.loading != undefined) {
-    outputs.loading.set(false, true);
-}
-$: outputs?.loading.subscribe({
-    id: 'loading-' + id,
-    next: (value) => {
-        isLoading = value;
-        if (ownClick && !value) {
-            ownClick = false;
-        }
-    }
-});
-$: loading = isLoading && ownClick;
+$: resolvedConfig?.triggerOnAppLoad && runnableComponent?.runComponent();
 let errors = {};
 $: errorsMessage = Object.values(errors)
     .filter((x) => x != '')
     .join('\n');
+let runnableWrapper;
 async function handleClick(event) {
     event?.stopPropagation();
     event?.preventDefault();
+    $selectedComponent = id;
     if (preclickAction) {
         await preclickAction();
     }
-    ownClick = true;
     if (!runnableComponent) {
-        if (resolvedConfig.gotoUrl) {
-            if (resolvedConfig.gotoNewTab) {
-                window.open(resolvedConfig.gotoUrl, '_blank');
-            }
-            else {
-                goto(resolvedConfig.gotoUrl);
-            }
-        }
+        runnableWrapper.onSuccess();
     }
     else {
         await runnableComponent?.runComponent();
     }
 }
+let loading = false;
 </script>
 
-{#each configurationKeys['buttoncomponent'] as key (key)}
-	<InputValue {key} {id} input={configuration[key]} bind:value={resolvedConfig[key]} />
+{#each Object.keys(components['buttoncomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{extraKey}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
 {/each}
 
+<!-- gotoNewTab={resolvedConfig.onSuccess.selected == 'goto'} -->
+
 <RunnableWrapper
+	bind:this={runnableWrapper}
 	{recomputeIds}
 	bind:runnableComponent
+	bind:loading
 	{componentInput}
+	doOnSuccess={resolvedConfig.onSuccess}
 	{id}
 	{extraQueryParams}
 	autoRefresh={false}
-	goto={resolvedConfig.gotoUrl}
-	gotoNewTab={resolvedConfig.gotoNewTab}
 	{render}
+	{outputs}
+	{extraKey}
 >
 	<AlignWrapper {noWFull} {horizontalAlignment} {verticalAlignment}>
 		{#if errorsMessage}
 			<div class="text-red-500 text-xs">{errorsMessage}</div>
 		{/if}
 		<Button
+			on:pointerdown={(e) => e.stopPropagation()}
 			btnClasses={twMerge(
 				$app.css?.['buttoncomponent']?.['button']?.class,
-				customCss?.button.class,
+				customCss?.button?.class,
 				resolvedConfig.fillContainer ? 'w-full h-full' : ''
 			)}
-			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button.style].join(';')}
+			style={[$app.css?.['buttoncomponent']?.['button']?.style, customCss?.button?.style].join(';')}
 			disabled={resolvedConfig.disabled}
-			on:pointerdown={(e) => {
-				e?.stopPropagation()
-				window.dispatchEvent(new Event('pointerup'))
-			}}
 			on:click={handleClick}
 			size={resolvedConfig.size}
 			color={resolvedConfig.color}

package/components/apps/components/buttons/AppButton.svelte.d.ts

@@ -12,9 +12,10 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         noWFull?: boolean | undefined;
         preclickAction?: (() => Promise<void>) | undefined;
-        customCss?: ComponentCustomCSS<'button'> | undefined;
+        customCss?: ComponentCustomCSS<'buttoncomponent'> | undefined;
         render: boolean;
         initializing?: boolean | undefined;
+        extraKey?: string | undefined;
         controls?: {
             left: () => boolean;
             right: () => boolean | string;

package/components/apps/components/buttons/AppForm.svelte

@@ -2,9 +2,11 @@
 import { faUser } from '@fortawesome/free-solid-svg-icons';
 import { getContext } from 'svelte';
 import { Icon } from 'svelte-awesome';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { components } from '../../editor/component';
 import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
 import RunnableWrapper from '../helpers/RunnableWrapper.svelte';
 export let id;
 export let componentInput;
@@ -16,45 +18,43 @@ export let customCss = undefined;
 export let render;
 export const staticOutputs = ['loading', 'result'];
 const { app, worldStore, stateId } = getContext('AppViewerContext');
-let labelValue = 'Default label';
-let color;
-let size;
+let outputs = initOutput($worldStore, id, {
+    result: undefined,
+    loading: false
+});
+let resolvedConfig = initConfig(components['formcomponent'].initialData.configuration, configuration);
 let runnableComponent;
-let goto = undefined;
 let isLoading = false;
 $: noInputs =
     $stateId != undefined &&
         (componentInput?.type != 'runnable' || Object.keys(componentInput?.fields ?? {}).length == 0);
-$: outputs = $worldStore?.outputsById[id];
-$: if (outputs?.loading != undefined) {
-    outputs.loading.set(false, true);
-}
-$: outputs?.loading.subscribe({
-    id: 'loading-' + id,
-    next: (value) => {
-        isLoading = value;
-    }
-});
 $: css = concatCustomCss($app.css?.formcomponent, customCss);
+let loading = false;
 </script>
 
-<InputValue {id} input={configuration.goto} bind:value={goto} />
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-<InputValue {id} input={configuration.color} bind:value={color} />
-<InputValue {id} input={configuration.size} bind:value={size} />
+{#each Object.keys(components['formcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <RunnableWrapper
 	{recomputeIds}
 	{render}
 	bind:runnableComponent
+	bind:loading
 	{componentInput}
 	{id}
-	{goto}
+	doOnSuccess={resolvedConfig.onSuccess}
 	{extraQueryParams}
 	autoRefresh={false}
 	forceSchemaDisplay={true}
 	runnableClass="!block"
-	runnableStyle={css?.container.style}
+	runnableStyle={css?.container?.style}
+	{outputs}
 >
 	<AlignWrapper {horizontalAlignment}>
 		<div
@@ -87,10 +87,10 @@ $: css = concatCustomCss($app.css?.formcomponent, customCss);
 						on:click={() => {
 							runnableComponent?.runComponent()
 						}}
-						{size}
-						{color}
+						size={resolvedConfig.size}
+						color={resolvedConfig.color}
 					>
-						{labelValue}
+						{resolvedConfig.label}
 					</Button>
 				{/if}
 			</div>

package/components/apps/components/buttons/AppForm.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         recomputeIds?: string[] | undefined;
         extraQueryParams?: Record<string, any> | undefined;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        customCss?: ComponentCustomCSS<'container' | 'button'> | undefined;
+        customCss?: ComponentCustomCSS<'formcomponent'> | undefined;
         render: boolean;
         staticOutputs?: string[] | undefined;
     };