windmill-components 1.46.3 → 1.52.0

package/components/ArgInput.svelte

@@ -1,4 +1,4 @@
-<script>import { faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+<script>import { faChevronDown, faChevronUp, faDollarSign, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
 import { Button } from './common';
 import { createEventDispatcher } from 'svelte';
@@ -12,6 +12,7 @@ import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import autosize from 'svelte-autosize';
 import Toggle from './Toggle.svelte';
+import Password from './Password.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -30,6 +31,11 @@ export let itemsType = undefined;
 export let displayHeader = true;
 export let properties = undefined;
 export let autofocus = false;
+export let compact = false;
+export let password = false;
+export let pickForField = undefined;
+export let variableEditor = undefined;
+export let itemPicker = undefined;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
@@ -42,6 +48,7 @@ $: {
     if (rawValue) {
         try {
             value = JSON.parse(rawValue);
+            error = '';
         }
         catch (err) {
             error = err.toString();
@@ -49,6 +56,7 @@ $: {
     }
 }
 $: {
+    error = '';
     if (inputCat === 'object') {
         evalValueToRaw();
         validateInput(pattern, value);
@@ -103,9 +111,13 @@ function testRegex(pattern, value) {
 $: {
     if (value == undefined || value == null) {
         value = defaultValue;
-        if ((defaultValue === undefined || defaultValue === null) && inputCat === 'string') {
-            value = '';
-        }
+        if (defaultValue === undefined || defaultValue === null)
+            if (inputCat === 'string') {
+                value = '';
+            }
+            else if (inputCat == 'enum') {
+                value = enum_?.[0];
+            }
     }
 }
 export let inputCat = 'string';
@@ -125,7 +137,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						seeEditable = !seeEditable
 					}}
 				>
-					Customize argument
+					Customize property
 					<Icon class="ml-2" data={seeEditable ? faChevronUp : faChevronDown} scale={0.7} />
 				</span>
 
@@ -233,7 +245,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						size="sm"
 						btnClasses="mt-1"
 						on:click={() => {
-							if (value == undefined) {
+							if (value == undefined || !Array.isArray(value)) {
 								value = []
 							}
 							value = value.concat('')
@@ -247,7 +259,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					</span>
 				</div>
 			{:else if inputCat == 'resource-object'}
-				<ObjectResourceInput {format} bind:value />
+				<ObjectResourceInput {compact} {format} bind:value />
 			{:else if inputCat == 'object'}
 				{#if properties && Object.keys(properties).length > 0}
 					<div class="p-4 pl-8 border rounded w-full">
@@ -312,24 +324,58 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 						: undefined}
 				/>
 			{:else if inputCat == 'string'}
-				<textarea
-					{autofocus}
-					rows="1"
-					bind:this={el}
-					on:focus={() => dispatch('focus')}
-					on:blur={() => dispatch('blur')}
-					use:autosize
-					type="text"
-					{disabled}
-					class="col-span-10 {valid
-						? ''
-						: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
-					placeholder={defaultValue ?? ''}
-					bind:value
-					on:input={() => {
-						dispatch('input', { rawValue: value, isRaw: false })
-					}}
-				/>
+				<div class="flex flex-col w-full">
+					<div class="flex flex-row w-full items- justify-between">
+						{#if password}
+							<Password {disabled} bind:password={value} />
+						{:else}
+							<textarea
+								{autofocus}
+								rows="1"
+								bind:this={el}
+								on:focus={() => dispatch('focus')}
+								on:blur={() => dispatch('blur')}
+								use:autosize
+								type="text"
+								{disabled}
+								class="col-span-10 {valid
+									? ''
+									: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
+								placeholder={defaultValue ?? ''}
+								bind:value
+								on:input={() => {
+									dispatch('input', { rawValue: value, isRaw: false })
+								}}
+							/>
+							{#if itemPicker}
+								<div class="ml-1 relative">
+									<Button
+										{disabled}
+										variant="border"
+										color="blue"
+										size="sm"
+										btnClasses="min-w-min items-center leading-4 py-0"
+										on:click={() => {
+											pickForField = label
+											itemPicker?.openDrawer?.()
+										}}><Icon data={faDollarSign} /></Button
+									>
+								</div>
+							{/if}
+						{/if}
+					</div>
+					{#if variableEditor}
+						<div class="text-sm text-gray-600">
+							{#if value?.startsWith('$var:')}
+								Linked to variable <button
+									class="text-blue-500 underline"
+									on:click={() => variableEditor?.editVariable?.(value.slice(5))}
+									>{value.slice(5)}</button
+								>
+							{/if}
+						</div>
+					{/if}
+				</div>
 			{/if}
 			{#if !required && inputCat != 'resource-object'}
 				<!-- <Tooltip placement="bottom" content="Reset to default value">
@@ -346,8 +392,16 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{/if}
 			<slot name="actions" />
 		</div>
-		<div class="text-right text-xs {error === '' ? 'text-white' : 'text-red-600'}">
-			{error === '' ? '...' : error}
-		</div>
+		{#if !compact || (error && error != '')}
+			<div class="text-right text-xs text-red-600">
+				{#if error === ''}
+					&nbsp;
+				{:else}
+					{error}
+				{/if}
+			</div>
+		{:else}
+			<div class="mb-2" />
+		{/if}
 	</div>
 </div>

package/components/ArgInput.svelte.d.ts

@@ -2,6 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 import { type InputCat } from '../utils';
 import type { SchemaProperty } from '../common';
 import SimpleEditor from './SimpleEditor.svelte';
+import type VariableEditor from './VariableEditor.svelte';
+import type ItemPicker from './ItemPicker.svelte';
 declare const __propDef: {
     props: {
         label?: string | undefined;
@@ -27,6 +29,11 @@ declare const __propDef: {
             [name: string]: SchemaProperty;
         } | undefined;
         autofocus?: boolean | undefined;
+        compact?: boolean | undefined;
+        password?: boolean | undefined;
+        pickForField?: string | undefined;
+        variableEditor?: VariableEditor | undefined;
+        itemPicker?: ItemPicker | undefined;
         editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;
@@ -43,9 +50,9 @@ declare const __propDef: {
         actions: {};
     };
 };
-export declare type ArgInputProps = typeof __propDef.props;
-export declare type ArgInputEvents = typeof __propDef.events;
-export declare type ArgInputSlots = typeof __propDef.slots;
+export type ArgInputProps = typeof __propDef.props;
+export type ArgInputEvents = typeof __propDef.events;
+export type ArgInputSlots = typeof __propDef.slots;
 export default class ArgInput extends SvelteComponentTyped<ArgInputProps, ArgInputEvents, ArgInputSlots> {
     get evalValueToRaw(): () => void;
     get focus(): () => void;

package/components/Badge.svelte.d.ts

@@ -12,9 +12,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type BadgeProps = typeof __propDef.props;
-export declare type BadgeEvents = typeof __propDef.events;
-export declare type BadgeSlots = typeof __propDef.slots;
+export type BadgeProps = typeof __propDef.props;
+export type BadgeEvents = typeof __propDef.events;
+export type BadgeSlots = typeof __propDef.slots;
 export default class Badge extends SvelteComponentTyped<BadgeProps, BadgeEvents, BadgeSlots> {
 }
 export {};

package/components/Button.svelte

@@ -16,7 +16,7 @@ const getCategoryClasses = () => {
 </script>
 
 <button
-	class="{$$props.class} inline-flex items-center bg-blue-500 hover:bg-blue-700 text-white 
+	class="{$$props.class} inline-flex items-center bg-[#5e81ac] hover:bg-blue-700 text-white 
 	font-bold py-1 px-2 border rounded border-blue-500 hover:border-blue-700 w-min min-w-max 
 	text-sm {getCategoryClasses()}"
 	on:click

package/components/Button.svelte.d.ts

@@ -15,9 +15,9 @@ declare const __propDef: {
         'text-gray-500': {};
     };
 };
-export declare type ButtonProps = typeof __propDef.props;
-export declare type ButtonEvents = typeof __propDef.events;
-export declare type ButtonSlots = typeof __propDef.slots;
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
 export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
 }
 export {};

package/components/ButtonAndDropdown.svelte.d.ts

@@ -15,9 +15,9 @@ declare const __propDef: {
         name: {};
     };
 };
-export declare type ButtonAndDropdownProps = typeof __propDef.props;
-export declare type ButtonAndDropdownEvents = typeof __propDef.events;
-export declare type ButtonAndDropdownSlots = typeof __propDef.slots;
+export type ButtonAndDropdownProps = typeof __propDef.props;
+export type ButtonAndDropdownEvents = typeof __propDef.events;
+export type ButtonAndDropdownSlots = typeof __propDef.slots;
 export default class ButtonAndDropdown extends SvelteComponentTyped<ButtonAndDropdownProps, ButtonAndDropdownEvents, ButtonAndDropdownSlots> {
 }
 export {};

package/components/CenteredModal.svelte

@@ -1,4 +1,5 @@
 <script>import { SettingsService } from '../gen';
+import WindmillIcon from './icons/WindmillIcon.svelte';
 export let subtitle = undefined;
 export let title = 'Windmill';
 let version = '';
@@ -7,24 +8,30 @@ SettingsService.backendVersion().then((x) => {
 });
 </script>
 
-<div class="flex justify-center min-h-screen bg-gray-50 pt-10">
-	<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:4/12 m-auto">
-		<h1 class="justify-center text-center font-medium pb-2 text-gray-700">
-			{title}
-		</h1>
-		{#if subtitle}
-			<p class="justify-center text-center font-medium pb-2 text-gray-700 text-xs">
-				{subtitle}
-			</p>
-		{/if}
-		<div class="border rounded-md py-12 px-16 shadow-md bg-white">
+<div class="flex justify-center min-h-screen pt-10 relative bg-[#3b4252]">
+	<div class="w-10/12 md:w-7/12 lg:w-6/12 xl:4/12 m-auto z-10">
+		<div class="border rounded-md py-4 px-16 shadow-md bg-gray-50">
+			<h1 class="justify-center text-center font-medium pb-4">
+				{title}
+			</h1>
+			{#if subtitle}
+				<p class="justify-center text-center font-medium pb-2 text-xs">
+					{subtitle}
+				</p>
+			{/if}
 			<slot />
 		</div>
 
 		<!-- empty row to make the form a little bit above vertical centering-->
 		<div class="py-12" />
 	</div>
-	<div class="absolute top-0 right-0 text-2xs text-gray-500 italic px-3 py-1">
-		windmill.dev backend v. <span class="font-mono">{version}</span>
+	<div class="hidden lg:block absolute top-10 right-50">
+		<div class="animate-[spin_100s_linear_infinite] ">
+			<WindmillIcon white height="100px" width="100px" />
+		</div>
+		<h2 class="text-center pt-2 text-gray-100">Windmill</h2>
+	</div>
+	<div class="absolute top-0 right-0 text-2xs text-gray-300 italic px-3 py-1">
+		<span class="font-mono">{version}</span>
 	</div>
 </div>

package/components/CenteredModal.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type CenteredModalProps = typeof __propDef.props;
-export declare type CenteredModalEvents = typeof __propDef.events;
-export declare type CenteredModalSlots = typeof __propDef.slots;
+export type CenteredModalProps = typeof __propDef.props;
+export type CenteredModalEvents = typeof __propDef.events;
+export type CenteredModalSlots = typeof __propDef.slots;
 export default class CenteredModal extends SvelteComponentTyped<CenteredModalProps, CenteredModalEvents, CenteredModalSlots> {
 }
 export {};

package/components/ChevronButton.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type ChevronButtonProps = typeof __propDef.props;
-export declare type ChevronButtonEvents = typeof __propDef.events;
-export declare type ChevronButtonSlots = typeof __propDef.slots;
+export type ChevronButtonProps = typeof __propDef.props;
+export type ChevronButtonEvents = typeof __propDef.events;
+export type ChevronButtonSlots = typeof __propDef.slots;
 export default class ChevronButton extends SvelteComponentTyped<ChevronButtonProps, ChevronButtonEvents, ChevronButtonSlots> {
 }
 export {};

package/components/CollapseLink.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type CollapseLinkProps = typeof __propDef.props;
-export declare type CollapseLinkEvents = typeof __propDef.events;
-export declare type CollapseLinkSlots = typeof __propDef.slots;
+export type CollapseLinkProps = typeof __propDef.props;
+export type CollapseLinkEvents = typeof __propDef.events;
+export type CollapseLinkSlots = typeof __propDef.slots;
 export default class CollapseLink extends SvelteComponentTyped<CollapseLinkProps, CollapseLinkEvents, CollapseLinkSlots> {
 }
 export {};

package/components/CronInput.svelte

@@ -46,7 +46,7 @@ async function handleScheduleInput(input) {
 	/>
 </div>
 {#if !disabled}
-	<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28">
+	<div class="flex flex-row text-xs text-blue-500 gap-3 pl-28 mb-2">
 		<button
 			on:click={() => {
 				schedule = '0 */15 * * *'

package/components/CronInput.svelte.d.ts

@@ -11,9 +11,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type CronInputProps = typeof __propDef.props;
-export declare type CronInputEvents = typeof __propDef.events;
-export declare type CronInputSlots = typeof __propDef.slots;
+export type CronInputProps = typeof __propDef.props;
+export type CronInputEvents = typeof __propDef.events;
+export type CronInputSlots = typeof __propDef.slots;
 export default class CronInput extends SvelteComponentTyped<CronInputProps, CronInputEvents, CronInputSlots> {
 }
 export {};

package/components/DisplayResult.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type DisplayResultProps = typeof __propDef.props;
-export declare type DisplayResultEvents = typeof __propDef.events;
-export declare type DisplayResultSlots = typeof __propDef.slots;
+export type DisplayResultProps = typeof __propDef.props;
+export type DisplayResultEvents = typeof __propDef.events;
+export type DisplayResultSlots = typeof __propDef.slots;
 export default class DisplayResult extends SvelteComponentTyped<DisplayResultProps, DisplayResultEvents, DisplayResultSlots> {
 }
 export {};

package/components/Dropdown.svelte

@@ -22,7 +22,7 @@ function handleClickOutsideMenu(event) {
 </script>
 
 <div
-	class="ml-2 {relative ? 'relative' : ''} {$$props.class}"
+	class="{relative ? 'relative' : ''} {$$props.class}"
 	use:clickOutside
 	on:click_outside={handleClickOutsideMenu}
 >
@@ -71,7 +71,8 @@ function handleClickOutsideMenu(event) {
 								scale={0.6}
 								class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
 							/>
-						{/if}{item.displayName}
+						{/if}
+						{item.displayName}
 					</button>
 				{:else if item.href}
 					<a
@@ -86,21 +87,26 @@ function handleClickOutsideMenu(event) {
 						tabindex="-1"
 						id="user-menu-item-{name}-{i}}"
 						class:disabled={item.disabled}
-						>{#if item.icon}
+					>
+						{#if item.icon}
 							<Icon
 								data={item.icon}
 								scale={0.6}
 								class="inline mr-2 {item.type == 'delete' ? 'text-red-500' : 'text-gray-700'}"
 							/>
-						{/if}{item.displayName}</a
-					>
+						{/if}
+						{item.displayName}
+					</a>
 				{:else}
 					<span
 						class="block px-4 py-2 text-sm text-gray-700"
 						role="menuitem"
 						tabindex="-1"
-						id="user-menu-item-{name}-{i}}">{item.displayName}</span
-					>{/if}
+						id="user-menu-item-{name}-{i}}"
+					>
+						{item.displayName}
+					</span>
+				{/if}
 			{/each}
 		{/if}
 	</div>

package/components/Dropdown.svelte.d.ts

@@ -17,9 +17,9 @@ declare const __propDef: {
         default: {};
     };
 };
-export declare type DropdownProps = typeof __propDef.props;
-export declare type DropdownEvents = typeof __propDef.events;
-export declare type DropdownSlots = typeof __propDef.slots;
+export type DropdownProps = typeof __propDef.props;
+export type DropdownEvents = typeof __propDef.events;
+export type DropdownSlots = typeof __propDef.slots;
 export default class Dropdown extends SvelteComponentTyped<DropdownProps, DropdownEvents, DropdownSlots> {
 }
 export {};

package/components/Editor.svelte

@@ -41,6 +41,7 @@ export let formatAction = undefined;
 export let automaticLayout = true;
 export let websocketAlive = { pyright: false, black: false, deno: false, go: false };
 export let shouldBindKey = true;
+export let fixedOverflowWidgets = true;
 let websockets = [];
 let websocketInterval;
 let lastWsAttempt = new Date();
@@ -343,15 +344,15 @@ async function closeWebsockets() {
 async function loadMonaco() {
     const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(uri));
     model.updateOptions(updateOptions);
-    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout));
+    editor = monaco.editor.create(divEl, editorConfig(model, code, lang, automaticLayout, fixedOverflowWidgets));
     let timeoutModel = undefined;
     editor.onDidChangeModelContent((event) => {
         $dirtyStore = true;
         timeoutModel && clearTimeout(timeoutModel);
         timeoutModel = setTimeout(() => {
             code = getCode();
+            dispatch('change');
         }, 500);
-        dispatch('change');
     });
     editor.onDidFocusEditorText(() => {
         dispatch('focus');

package/components/Editor.svelte.d.ts

@@ -16,6 +16,7 @@ declare const __propDef: {
             go: boolean;
         } | undefined;
         shouldBindKey?: boolean | undefined;
+        fixedOverflowWidgets?: boolean | undefined;
         getCode?: (() => string) | undefined;
         insertAtCursor?: ((code: string) => void) | undefined;
         insertAtBeginning?: ((code: string) => void) | undefined;
@@ -34,9 +35,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type EditorProps = typeof __propDef.props;
-export declare type EditorEvents = typeof __propDef.events;
-export declare type EditorSlots = typeof __propDef.slots;
+export type EditorProps = typeof __propDef.props;
+export type EditorEvents = typeof __propDef.events;
+export type EditorSlots = typeof __propDef.slots;
 export default class Editor extends SvelteComponentTyped<EditorProps, EditorEvents, EditorSlots> {
     get getCode(): () => string;
     get insertAtCursor(): (code: string) => void;