windmill-components 1.46.3 → 1.55.0

package/components/AppConnect.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        newPageOAuth?: boolean | undefined;
         open?: ((rt?: string) => Promise<void>) | undefined;
         openFromOauth?: ((rt: string) => void) | undefined;
     };
@@ -12,9 +13,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type AppConnectProps = typeof __propDef.props;
-export declare type AppConnectEvents = typeof __propDef.events;
-export declare type AppConnectSlots = typeof __propDef.slots;
+export type AppConnectProps = typeof __propDef.props;
+export type AppConnectEvents = typeof __propDef.events;
+export type AppConnectSlots = typeof __propDef.slots;
 export default class AppConnect extends SvelteComponentTyped<AppConnectProps, AppConnectEvents, AppConnectSlots> {
     get open(): (rt?: string | undefined) => Promise<void>;
     get openFromOauth(): (rt: string) => void;

package/components/ArgInfo.svelte

@@ -20,8 +20,12 @@ async function getResource(path) {
 </script>
 
 <Drawer bind:this={jsonViewer} size="800px">
-	<DrawerContent title="See JSON" on:close={jsonViewer.toggleDrawer}>
-		<Highlight language={json} code={JSON.stringify(jsonViewerContent, null, 4)} />
+	<DrawerContent title="Argument Details" on:close={jsonViewer.toggleDrawer}>
+		{#if isString(jsonViewerContent)}
+			<pre>{jsonViewerContent}</pre>
+		{:else}
+			<ObjectViewer pureViewer json={jsonViewerContent} />
+		{/if}
 	</DrawerContent>
 </Drawer>
 
@@ -39,8 +43,8 @@ async function getResource(path) {
 		}}>{value}</button
 	>
 {:else if typeof value !== 'object'}
-	{truncate(JSON.stringify(value), 40)}
-	{#if JSON.stringify(value).length > 40}
+	{truncate(JSON.stringify(value), 100)}
+	{#if JSON.stringify(value).length > 100}
 		<button
 			class="text-xs text-blue-500"
 			on:click={() => {

package/components/ArgInfo.svelte.d.ts

@@ -8,9 +8,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export declare type ArgInfoProps = typeof __propDef.props;
-export declare type ArgInfoEvents = typeof __propDef.events;
-export declare type ArgInfoSlots = typeof __propDef.slots;
+export type ArgInfoProps = typeof __propDef.props;
+export type ArgInfoEvents = typeof __propDef.events;
+export type ArgInfoSlots = typeof __propDef.slots;
 export default class ArgInfo extends SvelteComponentTyped<ArgInfoProps, ArgInfoEvents, ArgInfoSlots> {
 }
 export {};

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';
@@ -11,7 +11,9 @@ import StringTypeNarrowing from './StringTypeNarrowing.svelte';
 import SchemaForm from './SchemaForm.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
 import autosize from 'svelte-autosize';
+import * as autosizeLib from 'autosize';
 import Toggle from './Toggle.svelte';
+import Password from './Password.svelte';
 export let label = '';
 export let value;
 export let defaultValue = undefined;
@@ -30,6 +32,12 @@ 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;
+export let noMargin = false;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
 $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
@@ -42,6 +50,7 @@ $: {
     if (rawValue) {
         try {
             value = JSON.parse(rawValue);
+            error = '';
         }
         catch (err) {
             error = err.toString();
@@ -49,6 +58,7 @@ $: {
     }
 }
 $: {
+    error = '';
     if (inputCat === 'object') {
         evalValueToRaw();
         validateInput(pattern, value);
@@ -74,6 +84,10 @@ function fileChanged(e, cb) {
 }
 export function focus() {
     el?.focus();
+    if (el) {
+        el.style.height = '5px';
+        el.style.height = el.scrollHeight + 50 + 'px';
+    }
 }
 function validateInput(pattern, v) {
     if (required && (v == undefined || v == null || v === '')) {
@@ -103,9 +117,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 +143,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 +251,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('')
@@ -312,24 +330,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 && typeof value == 'string' && 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 +398,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 if !noMargin}
+			<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,12 @@ 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;
+        noMargin?: boolean | undefined;
         editor?: SimpleEditor | undefined;
         evalValueToRaw?: (() => void) | undefined;
         focus?: (() => void) | undefined;
@@ -43,9 +51,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/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/CenteredPage.svelte

@@ -1,4 +1,4 @@
-<div class="pb-6 h-fit-content">
+<div class="pb-8 h-fit-content">
 	<div class="max-w-6xl mx-auto px-4 sm:px-6 md:px-8 h-fit-content">
 		<slot />
 	</div>

package/components/CenteredPage.svelte.d.ts

@@ -1,7 +1,9 @@
 /** @typedef {typeof __propDef.props}  CenteredPageProps */
 /** @typedef {typeof __propDef.events}  CenteredPageEvents */
 /** @typedef {typeof __propDef.slots}  CenteredPageSlots */
-export default class CenteredPage extends SvelteComponentTyped<{}, {
+export default class CenteredPage extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
@@ -12,7 +14,9 @@ export type CenteredPageEvents = typeof __propDef.events;
 export type CenteredPageSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
-    props: {};
+    props: {
+        [x: string]: never;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

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 * * *'
@@ -74,7 +74,7 @@ async function handleScheduleInput(input) {
 			<div class="flex flex-row justify-between">The next runs will be scheduled at:</div>
 			<ul class="list-disc mx-12">
 				{#each preview.slice(0, limit) as p}
-					<li class="mx-2 text-gray-700 text-sm">{displayDate(p)}</li>
+					<li class="mx-2 text-gray-700 text-sm">{displayDate(p, true)}</li>
 				{/each}
 				<li class="text-sm mx-2">...</li>
 				{#if limit != 10}

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

@@ -2,8 +2,11 @@
 import { json } from 'svelte-highlight/languages';
 import TableCustom from './TableCustom.svelte';
 import { truncate } from '../utils';
+import { Button } from './common';
+import autosize from 'svelte-autosize';
 export let result;
-let resultKind = inferResultKind(result);
+let resultKind;
+$: resultKind = inferResultKind(result);
 let forceJson = false;
 function isRectangularArray(obj) {
     if (!Array.isArray(obj) || obj.length == 0) {
@@ -44,18 +47,25 @@ function inferResultKind(result) {
             else if (keys.length == 1 && keys[0] == 'error' && typeof result['error'] == 'string') {
                 return 'error';
             }
+            else if (keys.length == 3 &&
+                keys.includes('resume') &&
+                keys.includes('cancel') &&
+                keys.includes('approvalPage')) {
+                return 'approval';
+            }
         }
         catch (err) { }
     }
     return 'json';
 }
+let payload = '';
 </script>
 
 <div class="inline-highlight">
 	{#if result != undefined}
 		{#if resultKind && resultKind != 'json'}
 			<div class="mb-2 text-gray-500 text-sm bg-gray-50/20">
-				as JSON <input type="checkbox" bind:checked={forceJson} /></div
+				as JSON&nbsp;<input type="checkbox" bind:checked={forceJson} /></div
 			>{/if}{#if typeof result == 'object' && Object.keys(result).length > 0}<div
 				class="mb-2 text-sm text-gray-700"
 				>The result keys are: <b>{truncate(Object.keys(result).join(', '), 50)}</b></div
@@ -119,10 +129,37 @@ function inferResultKind(result) {
 		{:else if !forceJson && resultKind == 'error'}<div
 				><pre class="text-sm text-red-500 whitespace-pre-wrap">{result.error}</pre>
 			</div>
+		{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-1 mx-4">
+				<Button
+					color="green"
+					variant="border"
+					on:click={() =>
+						fetch(result['resume'], {
+							method: 'POST',
+							body: JSON.stringify(payload),
+							headers: { 'Content-Type': 'application/json' }
+						})}
+				>
+					Resume</Button
+				>
+				<Button color="red" variant="border" on:click={() => fetch(result['cancel'])}>Cancel</Button
+				>
+				<div>
+					<h3>Payload</h3>
+					<div class="border border-black">
+						<input type="text" bind:value={payload} use:autosize />
+					</div>
+				</div>
+				<div class="center-center"
+					><a rel="noreferrer" target="_blank" href={result['approvalPage']}>Approval Page</a></div
+				>
+			</div>
 		{:else}<Highlight
 				language={json}
 				code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
 			/>
 		{/if}
+	{:else}
+		<div class="text-gray-500 text-sm">No result</div>
 	{/if}
 </div>

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 {};