windmill-components 1.35.42 → 1.36.0

package/components/AppConnect.svelte

@@ -28,6 +28,7 @@ import Icon from 'svelte-awesome';
 import Modal from './Modal.svelte';
 import Password from './Password.svelte';
 import Path from './Path.svelte';
+import { Button } from './common';
 let manual = false;
 let value = '';
 let valueToken;
@@ -156,6 +157,10 @@ $: isGoogleSignin =
             resource_type == 'gcal' ||
             resource_type == 'gdrive' ||
             resource_type == 'gsheets');
+$: disabled =
+    (step == 1 && resource_type == '') ||
+        (step == 2 && value == '') ||
+        (step == 3 && pathError != '');
 </script>
 
 <Modal
@@ -185,8 +190,10 @@ $: isGoogleSignin =
 			<PageHeader title="OAuth APIs" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each Object.entries(connects).sort((a, b) => a[0].localeCompare(b[0])) as [key, values]}
-					<button
-						class="px-4 h-8 {key == resource_type ? 'item-button-selected' : 'item-button'}"
+					<Button
+						variant="border"
+						color={key === resource_type ? 'blue' : 'dark'}
+						btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 						on:click={() => {
 							manual = false
 							resource_type = key
@@ -197,64 +204,93 @@ $: isGoogleSignin =
 						}}
 					>
 						<IconedResourceType name={key} after={true} />
-					</button>
+					</Button>
 				{/each}
 			</div>
-			<PageHeader title="scopes" primary={false} />
+			<PageHeader title="Scopes" primary={false} />
 			{#if !manual && resource_type != ''}
 				{#each scopes as v}
-					<div class="flex flex-row max-w-md">
+					<div class="flex flex-row max-w-md mb-2">
 						<input type="text" bind:value={v} />
-						<button
-							class="default-button-secondary mx-6"
+						<Button
+							variant="border"
+							color="red"
+							size="xs"
+							btnClasses="mx-6"
 							on:click={() => {
 								scopes = scopes.filter((el) => el != v)
-							}}><Icon data={faMinus} class="mb-1" /></button
+							}}
 						>
+							<Icon data={faMinus} />
+						</Button>
 					</div>
 				{/each}
-				<button
-					class="default-button-secondary mt-1"
-					on:click={() => {
-						scopes = scopes.concat('')
-					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
-				><span class="ml-2">{(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''}</span
-				>
+				<div class="flex items-center mt-1">
+					<Button
+						variant="border"
+						color="blue"
+						size="sm"
+						endIcon={{ icon: faPlus }}
+						on:click={() => {
+							scopes = scopes.concat('')
+						}}
+					>
+						Add item
+					</Button>
+					<span class="ml-2 text-sm text-gray-500">
+						({(scopes ?? []).length} item{(scopes ?? []).length > 1 ? 's' : ''})
+					</span>
+				</div>
 			{:else}
 				<p class="italic text-sm">Pick an OAuth API and customize the scopes here</p>
 			{/if}
 			<PageHeader title="Extra Params" primary={false} />
 			{#if !manual && resource_type != ''}
 				{#each extra_params as [k, v]}
-					<div class="flex flex-row max-w-md">
-						<input type="text" bind:value={k} />
+					<div class="flex flex-row max-w-md mb-2">
+						<input type="text" bind:value={k} class="mr-2" />
 						<input type="text" bind:value={v} />
 
-						<button
-							class="default-button-secondary mx-6"
+						<Button
+							variant="border"
+							color="red"
+							size="xs"
+							btnClasses="mx-6"
 							on:click={() => {
 								extra_params = extra_params.filter((el) => el[0] != k)
-							}}><Icon data={faMinus} class="mb-1" /></button
+							}}
 						>
+							<Icon data={faMinus} />
+						</Button>
 					</div>
 				{/each}
-				<button
-					class="default-button-secondary mt-1"
-					on:click={() => {
-						extra_params.push(['', ''])
-						extra_params = extra_params
-					}}>Add item &nbsp;<Icon data={faPlus} class="mb-1" /></button
-				><span class="ml-2"
-					>{(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''}</span
-				>
+				<div class="flex items-center mt-1">
+					<Button
+						variant="border"
+						color="blue"
+						size="sm"
+						endIcon={{ icon: faPlus }}
+						on:click={() => {
+							extra_params.push(['', ''])
+							extra_params = extra_params
+						}}
+					>
+						Add item
+					</Button>
+					<span class="ml-2 text-sm text-gray-500">
+						({(extra_params ?? []).length} item{(extra_params ?? []).length > 1 ? 's' : ''})
+					</span>
+				</div>
 			{:else}
 				<p class="italic text-sm">Pick an OAuth API and customize the extra parameters here</p>
 			{/if}
 			<PageHeader title="Non OAuth APIs" />
 			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-x-2 gap-y-1 items-center mb-2">
 				{#each connectsManual as [key, instructions]}
-					<button
-						class="px-4 h-8 {key == resource_type ? 'item-button-selected' : 'item-button'}"
+					<Button
+						variant="border"
+						color={key === resource_type ? 'blue' : 'dark'}
+						btnClasses={key === resource_type ? '!border-2 !bg-blue-50/75' : 'm-[1px]'}
 						on:click={() => {
 							manual = true
 							resource_type = key
@@ -262,7 +298,7 @@ $: isGoogleSignin =
 						}}
 					>
 						<IconedResourceType name={key} after={true} />
-					</button>
+					</Button>
 				{/each}
 			</div>
 		{:else if step == 2}
@@ -310,34 +346,24 @@ $: isGoogleSignin =
 			</ul>
 		{/if}
 	</div>
-	<div slot="submission">
+	<div slot="submission" class="flex items-center gap-4">
 		{#if step > 1 && !no_back}
-			<button class="default-button px-4 py-2 font-semibold" on:click={back}>Back</button>
+			<Button variant="border" on:click={back}>Back</Button>
+		{/if}
+		{#if isGoogleSignin}
+			<button {disabled} on:click={next}>
+				<img class="h-10 w-auto" src="/google_signin.png" alt="Google sign-in" />
+			</button>
+		{:else}
+			<Button {disabled} on:click={next}>
+				{#if step == 1 && !manual}
+					Connect
+				{:else if step == 3}
+					Add resource
+				{:else}
+					Next
+				{/if}
+			</Button>
 		{/if}
-		<button
-			class={isGoogleSignin ? '' : 'default-button px-4 py-2 font-semibold'}
-			class:default-button-disabled={(step == 1 && resource_type == '') ||
-				(step == 2 && value == '') ||
-				(step == 3 && pathError != '')}
-			on:click={next}
-		>
-			{#if isGoogleSignin}
-				<img src="/google_signin.png" alt="Google sign-in" />
-			{:else if step == 1 && !manual}
-				Connect
-			{:else if step == 3}
-				Add resource
-			{:else}
-				Next
-			{/if}
-		</button>
 	</div>
 </Modal>
-
-<style>
-	.selected:hover {
-    border-radius: 0.375rem;
-    border-width: 1px;
-    border-color: rgb(156 163 175 / var(--tw-border-opacity));
-    --tw-border-opacity: 0.5
-}</style>

package/components/ArgInput.svelte

@@ -1,7 +1,7 @@
 <script>import { slide } from 'svelte/transition';
-import { faArrowRotateLeft, faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faChevronDown, faChevronUp, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { setInputCat as computeInputCat } from '../utils';
-import { Button, Tooltip } from 'flowbite-svelte';
+import { Button } from './common';
 import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import FieldHeader from './FieldHeader.svelte';
@@ -31,10 +31,10 @@ export let displayHeader = true;
 export let properties = undefined;
 let seeEditable = enum_ != undefined || pattern != undefined;
 const dispatch = createEventDispatcher();
-$: minHeight = `${1 + minRows * 1.2}em`;
 $: maxHeight = maxRows ? `${1 + maxRows * 1.2}em` : `auto`;
 $: validateInput(pattern, value);
 let error = '';
+let el = undefined;
 export let editor = undefined;
 let rawValue = undefined;
 $: {
@@ -83,7 +83,7 @@ function fileChanged(e, cb) {
     }
 }
 function validateInput(pattern, v) {
-    if (required && (v == undefined || v == null)) {
+    if (required && (v == undefined || v == null || v === '')) {
         error = 'This field is required';
         valid = false;
     }
@@ -108,8 +108,11 @@ function testRegex(pattern, value) {
     }
 }
 $: {
-    if (value == undefined) {
+    if (value == undefined || value == null) {
         value = defaultValue;
+        if ((defaultValue === undefined || defaultValue === null) && inputCat === 'string') {
+            value = '';
+        }
     }
 }
 export let inputCat = 'string';
@@ -156,25 +159,19 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					</div>
 				{/if}
 			</div>
-			<span class="text-2xs">Preview:</span>
+			<span class="text-2xs">Input preview:</span>
 		{/if}
 
-		<div class="grid grid-cols-2">
-			{#if description || error}
-				<div class="text-sm italic pb-1">
-					{description}
-				</div>
-				<div class="text-right text-xs {error === '' ? 'text-white' : 'font-bold text-red-600'}">
-					{error === '' ? '...' : error}
-				</div>
-			{:else}
-				<div class="mt-1" />
-			{/if}
-		</div>
+		{#if description}
+			<div class="text-sm italic pb-1">
+				{description}
+			</div>
+		{/if}
 
 		<div class="flex space-x-1">
 			{#if inputCat == 'number'}
 				<input
+					on:focus
 					{disabled}
 					type="number"
 					class={valid
@@ -199,7 +196,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 			{:else if inputCat == 'list'}
 				<div>
 					<div>
-						{#each value ?? [] as v}
+						{#each value ?? [] as v, i}
 							<div class="flex flex-row max-w-md mt-1">
 								{#if itemsType?.type == 'number'}
 									<input type="number" bind:value={v} />
@@ -207,14 +204,17 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 									<input
 										type="file"
 										class="my-6"
-										on:change={(x) => fileChanged(x, (val) => (v = val))}
+										on:change={(x) => fileChanged(x, (val) => (value[i] = val))}
 										multiple={false}
 									/>
 								{:else}
 									<input type="text" bind:value={v} />
 								{/if}
-								<button
-									class="default-button-secondary mx-6"
+								<Button
+									variant="border"
+									color="red"
+									size="sm"
+									btnClasses="mx-6"
 									on:click={() => {
 										value = value.filter((el) => el != v)
 										if (value.length == 0) {
@@ -222,13 +222,16 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 										}
 									}}
 								>
-									<Icon data={faMinus} class="mb-1" />
-								</button>
+									<Icon data={faMinus} />
+								</Button>
 							</div>
 						{/each}
 					</div>
-					<button
-						class="default-button-secondary mt-1"
+					<Button
+						variant="border"
+						color="blue"
+						size="sm"
+						btnClasses="mt-1"
 						on:click={() => {
 							if (value == undefined) {
 								value = []
@@ -238,7 +241,7 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					>
 						<Icon data={faPlus} class="mr-2" />
 						Add item
-					</button>
+					</Button>
 					<span class="ml-2">
 						{(value ?? []).length} item{(value ?? []).length > 1 ? 's' : ''}
 					</span>
@@ -255,9 +258,16 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					</div>
 				{:else}
 					<textarea
+						bind:this={el}
+						on:focus
 						{disabled}
-						style="min-height: {minHeight}; max-height: {maxHeight}"
-						on:input={async () => recomputeRowSize(rawValue ?? '')}
+						style="max-height: {maxHeight}"
+						on:input={(e) => {
+							if (el) {
+								el.style.height = '5px'
+								el.style.height = el.scrollHeight + 'px'
+							}
+						}}
 						class="col-span-10 {valid
 							? ''
 							: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
@@ -303,23 +313,27 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 				/>
 			{:else if inputCat == 'string'}
 				<textarea
+					bind:this={el}
 					on:focus={() => dispatch('focus')}
 					on:blur={() => dispatch('blur')}
 					{disabled}
-					style="height: {minHeight}; max-height: {maxHeight}"
+					style="height: 30px; max-height: {maxHeight}"
 					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={async () => {
-						recomputeRowSize(value)
+						if (el) {
+							el.style.height = '30px'
+							el.style.height = el.scrollHeight + 'px'
+						}
 						dispatch('input', { rawValue: value, isRaw: false })
 					}}
 				/>
 			{/if}
 			{#if !required && inputCat != 'resource-object'}
-				<Tooltip placement="bottom" content="Reset to default value">
+				<!-- <Tooltip placement="bottom" content="Reset to default value">
 					<Button
 						on:click={() => (value = undefined)}
 						{disabled}
@@ -329,9 +343,12 @@ $: inputCat = computeInputCat(type, format, itemsType?.type, enum_, contentEncod
 					>
 						<Icon data={faArrowRotateLeft} />
 					</Button>
-				</Tooltip>
+				</Tooltip> -->
 			{/if}
 			<slot name="actions" />
 		</div>
+		<div class="text-right text-xs {error === '' ? 'text-white' : 'font-bold text-red-600'}">
+			{error === '' ? '...' : error}
+		</div>
 	</div>
 </div>

package/components/ArgInput.svelte.d.ts

@@ -32,8 +32,8 @@ declare const __propDef: {
         inputCat?: InputCat | undefined;
     };
     events: {
-        input: CustomEvent<any>;
         focus: CustomEvent<any>;
+        input: CustomEvent<any>;
         blur: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;

package/components/Button.svelte

@@ -1,16 +1,25 @@
 <script>import { faArchive, faEdit, faList, faPlay, faShare, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 export let category;
 export let disabled = false;
-const dispatch = createEventDispatcher();
+const colors = {
+    red: 'bg-transparent hover:bg-red-600 text-red-600 font-normal hover:text-white border-red-600 hover:border-transparent rounded',
+    blue: 'hover:bg-blue-500 hover:text-white'
+};
+const getCategoryClasses = () => {
+    if (category === 'delete' || category === 'archive')
+        return colors.red;
+    else if (category === 'edit' || category === 'list' || category === 'share')
+        return colors.blue;
+    return '';
+};
 </script>
 
 <button
-	class="{$$props.class} inline-flex items-center default-button py-0 px-1 {category} default-button-secondary"
-	on:click={() => {
-		dispatch('click')
-	}}
+	class="{$$props.class} inline-flex items-center bg-blue-500 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
 	{disabled}
 >
 	<div class="inline-flex items-center justify-center">
@@ -47,45 +56,3 @@ const dispatch = createEventDispatcher();
 		{/if}
 	</div>
 </button>
-
-<style>
-	.delete, 
-	.archive {
-    background-color: transparent
-}
-.delete:hover, 
-	.archive:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(224 36 36 / var(--tw-bg-opacity))
-}
-	.delete, 
-	.archive {
-    font-weight: 400;
-    --tw-text-opacity: 1;
-    color: rgb(224 36 36 / var(--tw-text-opacity))
-}
-	.delete:hover, 
-	.archive:hover {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity))
-}
-	.delete, 
-	.archive {
-    border-radius: 0.25rem;
-    --tw-border-opacity: 1;
-    border-color: rgb(224 36 36 / var(--tw-border-opacity))
-}
-	.delete:hover, 
-	.archive:hover {
-    border-color: transparent
-}
-
-	.edit:hover, 
-	.play:hover, 
-	.list:hover, 
-	.share:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(63 131 248 / var(--tw-bg-opacity));
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity))
-}</style>

package/components/Button.svelte.d.ts

@@ -6,7 +6,7 @@ declare const __propDef: {
         disabled?: boolean | undefined;
     };
     events: {
-        click: CustomEvent<any>;
+        click: MouseEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/components/CronInput.svelte

@@ -32,7 +32,7 @@ async function handleScheduleInput(input) {
 }
 </script>
 
-<div class="text-purple-500 text-2xs grow">{cronError}</div>
+<div class="text-red-600 text-2xs grow">{cronError}</div>
 <div class="flex flex-row items-end max-w-5xl">
 	<label class="text-xs min-w-max mr-2 self-center" for="cron-schedule">CRON expression</label>
 	<input