windmill-components 1.60.3 → 1.70.0

package/components/common/button/model.js

@@ -1,4 +1,4 @@
-export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray'];
+export const BUTTON_COLORS = ['blue', 'red', 'dark', 'light', 'green', 'gray', 'none'];
 export var ButtonType;
 (function (ButtonType) {
     ButtonType.FontSizeClasses = {
@@ -9,11 +9,26 @@ export var ButtonType;
         xl: 'text-xl'
     };
     ButtonType.SpacingClasses = {
-        xs: 'px-3 py-1.5',
-        sm: 'px-3 py-1.5',
-        md: 'px-3 py-1.5',
-        lg: 'px-4 py-2',
-        xl: 'px-4 py-2'
+        xs: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]'
+        },
+        sm: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]'
+        },
+        md: {
+            border: 'px-3 py-[6px]',
+            contained: 'px-3 py-[7px]'
+        },
+        lg: {
+            border: 'px-4 py-[8px]',
+            contained: 'px-4 py-[9px]'
+        },
+        xl: {
+            border: 'px-4 py-[8px]',
+            contained: 'px-4 py-[9px]'
+        },
     };
     ButtonType.IconScale = {
         xs: 0.7,

package/components/common/confirmationModal/ConfirmationModal.svelte

@@ -23,12 +23,19 @@ function onKeyDown(event) {
         }
     }
 }
+function fadeFast(node) {
+    return fade(node, { duration: 100 });
+}
 </script>
 
 <svelte:window on:keydown={onKeyDown} />
 
 {#if open}
-	<div transition:fade={{ duration: 100 }} class={'relative  z-50'} role="dialog">
+	<div
+		transition:fadeFast|local
+		class={'absolute top-0 bottom-0 left-0 right-0 z-50'}
+		role="dialog"
+	>
 		<div
 			class={classNames(
 				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',

package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -41,9 +41,9 @@ onDestroy(() => {
 	}}
 >
 	<div class="flex flex-col w-full space-y-4">
-		<span
-			>Are you sure you want to discard change you have made? (A draft has been temporarily and
-			locally saved)</span
-		>
+		<span>
+			Are you sure you want to discard change you have made? (A draft has been temporarily and
+			locally saved)
+		</span>
 	</div>
 </ConfirmationModal>

package/components/common/drawer/Drawer.svelte

@@ -42,8 +42,10 @@ function onKeyDown(event) {
     if (open) {
         switch (event.key) {
             case 'Escape':
-                open = false;
                 event.preventDefault();
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+                open = false;
                 break;
         }
     }

package/components/common/fileInput/FileInput.svelte

@@ -0,0 +1,112 @@
+<script>import { createEventDispatcher } from "svelte";
+import { FileUp } from "lucide-svelte";
+import Button from "../../common/button/Button.svelte";
+import { faTrash } from "@fortawesome/free-solid-svg-icons";
+let c = '';
+export { c as class };
+export let accept = '*';
+export let multiple = false;
+export let convertToBase64 = false;
+export let hideIcon = false;
+export let iconSize = 36;
+const dispatch = createEventDispatcher();
+let input;
+let files = undefined;
+async function onChange(fileList) {
+    if (!fileList || !fileList.length) {
+        files = undefined;
+        dispatch('change', files);
+        return;
+    }
+    if (!multiple || !files) {
+        files = [];
+    }
+    for (let i = 0; i < fileList.length; i++) {
+        const file = fileList.item(i);
+        if (file)
+            files.push(file);
+    }
+    // Needs to be reset so the same file can be selected 
+    // multiple times in a row
+    input.value = '';
+    dispatchChange();
+}
+async function fileToBase64(file) {
+    return new Promise((resolve) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            resolve(reader.result);
+        };
+        reader.readAsDataURL(file);
+    });
+}
+function removeFile(index) {
+    if (!files)
+        return;
+    files.splice(index, 1);
+    files = files.length ? files : undefined;
+    dispatchChange();
+}
+async function dispatchChange() {
+    files = files;
+    if (convertToBase64 && files) {
+        const promises = files.map(fileToBase64);
+        const b64s = await Promise.all(promises);
+        dispatch('change', b64s);
+    }
+    else {
+        dispatch('change', files);
+    }
+}
+</script>
+
+<button
+	class="relative center-center flex-col text-center font-medium text-gray-600 
+	border-2 border-dashed border-gray-400 hover:border-blue-500 
+	focus-within:border-blue-500 hover:bg-blue-50 focus-within:bg-blue-50 
+	duration-200 rounded-lg p-1 {c ?? ''}"
+>
+	{#if !hideIcon && !files}
+		<FileUp size={iconSize} class="mb-2" />
+	{/if}
+	{#if files}
+		<div class="w-full max-h-full overflow-auto px-6">
+			<slot name="selected-title">
+				<div class="text-center mb-2 px-2">
+					Selected file{files.length > 1 ? 's' : ''}:
+				</div>
+			</slot>
+			<ul class="relative z-20 max-w-[250px] bg-white rounded-lg overflow-hidden mx-auto">
+				{#each files as {name}, i}
+					<li class="flex justify-between items-center font-normal text-sm
+					hover:bg-gray-300/20 duration-200 py-1 px-2 cursor-default">
+						<span class="pr-2 ellipsize">{name}</span>
+						<Button
+							size="xs"
+							color="red"
+							variant="border"
+							iconOnly
+							btnClasses="bg-transparent"
+							startIcon={{ icon: faTrash }}
+							on:click={() => removeFile(i)}
+						/>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	{:else}
+		<slot>
+			<span>Drag and drop {multiple ? 'files' : 'a file'}</span>
+		</slot>
+	{/if}
+	<input
+		class="!absolute !inset-0 !z-10 !opacity-0 !cursor-pointer"
+		type="file"
+		title={files ? `${files.length} file${files.length > 1 ? 's' : ''} chosen` : 'No file chosen'}
+		bind:this={input}
+		on:change={({currentTarget}) => {onChange(currentTarget.files)}}
+		{accept}
+		{multiple}
+		{...$$restProps}
+	/>
+</button>

package/components/common/fileInput/FileInput.svelte.d.ts

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string | undefined;
+        accept?: string | undefined;
+        multiple?: boolean | undefined;
+        convertToBase64?: boolean | undefined;
+        hideIcon?: boolean | undefined;
+        iconSize?: number | undefined;
+    };
+    events: {
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        'selected-title': {};
+        default: {};
+    };
+};
+export type FileInputProps = typeof __propDef.props;
+export type FileInputEvents = typeof __propDef.events;
+export type FileInputSlots = typeof __propDef.slots;
+export default class FileInput extends SvelteComponentTyped<FileInputProps, FileInputEvents, FileInputSlots> {
+}
+export {};

package/components/common/index.d.ts

@@ -17,6 +17,7 @@ export { default as Tabs } from './tabs/Tabs.svelte';
 export { default as ToggleButton } from './toggleButton/ToggleButton.svelte';
 export { default as ToggleButtonGroup } from './toggleButton/ToggleButtonGroup.svelte';
 export { default as Breadcrumb } from './breadcrumb/Breadcrumb.svelte';
+export { default as FileInput } from './fileInput/FileInput.svelte';
 export * from './alert/model';
 export * from './badge/model';
 export * from './button/model';

package/components/common/index.js

@@ -17,6 +17,7 @@ export { default as Tabs } from './tabs/Tabs.svelte';
 export { default as ToggleButton } from './toggleButton/ToggleButton.svelte';
 export { default as ToggleButtonGroup } from './toggleButton/ToggleButtonGroup.svelte';
 export { default as Breadcrumb } from './breadcrumb/Breadcrumb.svelte';
+export { default as FileInput } from './fileInput/FileInput.svelte';
 export * from './alert/model';
 export * from './badge/model';
 export * from './button/model';

package/components/common/kbd/Kbd.svelte.d.ts

@@ -2,7 +2,7 @@
 /** @typedef {typeof __propDef.events}  KbdEvents */
 /** @typedef {typeof __propDef.slots}  KbdSlots */
 export default class Kbd extends SvelteComponentTyped<{
-    [x: string]: never;
+    [x: string]: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -15,7 +15,7 @@ export type KbdSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/common/modal/Modal.svelte

@@ -0,0 +1,74 @@
+<script>import { classNames } from '../../../utils';
+import { createEventDispatcher } from 'svelte';
+import { fade } from 'svelte/transition';
+import Button from '../button/Button.svelte';
+import Badge from '../badge/Badge.svelte';
+export let title;
+export let open = false;
+const dispatch = createEventDispatcher();
+function onKeyDown(event) {
+    if (open) {
+        switch (event.key) {
+            case 'Enter':
+                event.stopPropagation();
+                event.preventDefault();
+                dispatch('confirmed');
+                break;
+            case 'Escape':
+                event.stopPropagation();
+                event.preventDefault();
+                dispatch('canceled');
+                break;
+        }
+    }
+}
+function fadeFast(node) {
+    return fade(node, { duration: 100 });
+}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+{#if open}
+	<div
+		transition:fadeFast|local
+		class={'absolute top-0 bottom-0 left-0 right-0 z-50'}
+		role="dialog"
+	>
+		<div
+			class={classNames(
+				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
+				open ? 'ease-out duration-300 opacity-100' : 'ease-in duration-200 opacity-0'
+			)}
+		/>
+
+		<div class="fixed inset-0 z-10 overflow-y-auto">
+			<div class="flex min-h-full items-center justify-center p-4">
+				<div
+					class={classNames(
+						'relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
+						open
+							? 'ease-out duration-300 opacity-100 translate-y-0 sm:scale-100'
+							: 'ease-in duration-200 opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+					)}
+				>
+					<div class="flex">
+						<div class="ml-4 text-left flex-1">
+							<h3 class="text-lg font-medium text-gray-900">
+								{title}
+							</h3>
+							<div class="mt-2 text-sm text-gray-500">
+								<slot />
+							</div>
+						</div>
+					</div>
+					<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
+						<Button on:click={() => dispatch('canceled')} color="light" size="sm">
+							<span class="gap-2">Cancel <Badge color="dark-gray">Escape</Badge></span>
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}

package/components/common/modal/Modal.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        open?: boolean | undefined;
+    };
+    events: {
+        canceled: CustomEvent<any>;
+        confirmed: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
+export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
+}
+export {};

package/components/common/popup/Popup.svelte

@@ -1,43 +1,46 @@
 <svelte:options accessors />
 
-<script>import { onMount, onDestroy } from 'svelte';
+<script>import { onDestroy } from 'svelte';
 import { slide } from 'svelte/transition';
 import { createPopperActions } from 'svelte-popperjs';
 import { clickOutside } from '../../../utils';
 import { createStateMachine } from '../../../stateMachine';
 export let ref;
-export let options = { placement: 'auto' };
+export let options = { placement: 'auto', strategy: 'fixed' };
 /** Events on the reference element */
 export let openOn = ['focus'];
 /** Events on the reference element */
 export let closeOn = ['blur'];
 export let innerClasses = '';
 export let outerClasses = '';
+export let transition = slide;
 const states = ['closed', 'open-focus-in', 'open-focus-out'];
 const stateMachine = createStateMachine(states, {
     to: {
         closed: ({ previousState, currentState }) => {
-            const activeElem = document.activeElement;
-            const revert = popup.contains(activeElem) || ref.contains(activeElem);
-            return revert ? previousState : currentState;
+            return isFocusContained() ? previousState : currentState;
         }
     }
 });
-const [popperRef, popperContent] = createPopperActions();
+const [popperRef, popperContent, getInstance] = createPopperActions();
 let popup;
 let focusableElements;
 function getFocusableElements() {
     let elements = [];
     popup
-        .querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')
+        ?.querySelectorAll('a[href], button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])')
         .forEach((elem) => elements.push(elem));
     focusableElements = elements.filter((el) => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'));
     focusableElements.forEach((el) => {
         el.tabIndex = -1;
         el.addEventListener('click', openFocusIn);
-        el.addEventListener('blur', closed);
+        el.addEventListener('blur', conditionalClosed);
     });
 }
+function isFocusContained() {
+    const activeElem = document.activeElement;
+    return popup?.contains(activeElem) || ref?.contains(activeElem);
+}
 function closed() {
     if ($stateMachine.currentState === 'open-focus-out') {
         setTimeout(() => {
@@ -48,6 +51,11 @@ function closed() {
         stateMachine.setState('closed');
     }
 }
+function conditionalClosed() {
+    if (isFocusContained())
+        return;
+    closed();
+}
 function openFocusOut() {
     stateMachine.setState('open-focus-out');
 }
@@ -62,18 +70,20 @@ function keyDown(event) {
     if (event.key === 'Escape') {
         return document.activeElement?.blur();
     }
-    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown')
+    const prev = ['Up', 'Left'];
+    const next = ['Down', 'Right'];
+    if (![...prev, ...next].some((dir) => `Arrow${dir}` === event.key))
         return;
     event.preventDefault();
-    if (popup.contains(document.activeElement)) {
+    if (popup?.contains(document.activeElement)) {
         const index = focusableElements.findIndex((elem) => elem === document.activeElement);
         if (index === -1)
             return;
         let targetIndex = undefined;
-        if (event.key === 'ArrowUp') {
+        if (prev.some((dir) => `Arrow${dir}` === event.key)) {
             targetIndex = index === 0 ? focusableElements.length - 1 : index - 1;
         }
-        else if (event.key === 'ArrowDown') {
+        else if (next.some((dir) => `Arrow${dir}` === event.key)) {
             targetIndex = index + 1 === focusableElements.length ? 0 : index + 1;
         }
         if (targetIndex !== undefined) {
@@ -90,12 +100,16 @@ function keyDown(event) {
     }
 }
 function addRefListeners() {
+    if (!ref)
+        return;
     openOn.forEach((action) => ref.addEventListener(action, openFocusOut));
     closeOn.forEach((action) => ref.addEventListener(action, closed));
 }
 function removeAllListeners() {
     focusableElements?.forEach((el) => el.removeEventListener('click', openFocusIn));
-    focusableElements?.forEach((el) => el.removeEventListener('blur', closed));
+    focusableElements?.forEach((el) => el.removeEventListener('blur', conditionalClosed));
+    if (!ref)
+        return;
     openOn.forEach((action) => ref.removeEventListener(action, openFocusOut));
     closeOn.forEach((action) => ref.removeEventListener(action, closed));
 }
@@ -105,18 +119,21 @@ $: if ($stateMachine.currentState === 'closed') {
 else {
     setTimeout(() => {
         getFocusableElements();
+        getInstance()?.update();
     }, 0);
 }
-onMount(() => {
+$: if (ref) {
     popperRef(ref);
     addRefListeners();
-});
+}
+$: $$slots.default && getInstance()?.update();
 onDestroy(removeAllListeners);
 </script>
 
 <svelte:window on:keydown={keyDown} />
 
 <div
+	class="z-50"
 	bind:this={popup}
 	use:popperContent={options}
 	use:clickOutside
@@ -125,9 +142,9 @@ onDestroy(removeAllListeners);
 	aria-expanded={$stateMachine.currentState !== 'closed'}
 >
 	{#if $stateMachine.currentState !== 'closed'}
-		<div transition:slide|local={{ duration: 200 }} class={outerClasses}>
+		<div transition:transition|local={{ duration: 200 }} class={outerClasses}>
 			<div class={innerClasses}>
-				<slot />
+				<slot close={closed} />
 			</div>
 		</div>
 	{/if}

package/components/common/popup/Popup.svelte.d.ts

@@ -1,28 +1,32 @@
 import { SvelteComponentTyped } from "svelte";
+import { type TransitionConfig } from 'svelte/transition';
 import { type PopperOptions } from 'svelte-popperjs';
 declare const __propDef: {
     props: {
-        ref: HTMLElement;
+        ref: HTMLElement | undefined;
         options?: PopperOptions<any>;
         /** Events on the reference element */ openOn?: (keyof HTMLElementEventMap)[] | undefined;
         /** Events on the reference element */ closeOn?: (keyof HTMLElementEventMap)[] | undefined;
         innerClasses?: string | undefined;
         outerClasses?: string | undefined;
+        transition?: ((node: Element, params?: Record<string, any>) => TransitionConfig) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            close: () => void;
+        };
     };
 };
 export type PopupProps = typeof __propDef.props;
 export type PopupEvents = typeof __propDef.events;
 export type PopupSlots = typeof __propDef.slots;
 export default class Popup extends SvelteComponentTyped<PopupProps, PopupEvents, PopupSlots> {
-    get ref(): HTMLElement;
+    get ref(): HTMLElement | undefined;
     /**accessor*/
-    set ref(_: HTMLElement);
+    set ref(_: HTMLElement | undefined);
     get options(): PopperOptions<any>;
     /**accessor*/
     set options(_: PopperOptions<any>);
@@ -38,5 +42,8 @@ export default class Popup extends SvelteComponentTyped<PopupProps, PopupEvents,
     get outerClasses(): string | undefined;
     /**accessor*/
     set outerClasses(_: string | undefined);
+    get transition(): ((node: Element, params?: Record<string, any> | undefined) => TransitionConfig) | undefined;
+    /**accessor*/
+    set transition(_: ((node: Element, params?: Record<string, any> | undefined) => TransitionConfig) | undefined);
 }
 export {};

package/components/common/table/FlowRow.svelte

@@ -5,7 +5,7 @@ import SharedBadge from '../../SharedBadge.svelte';
 import { FlowService } from '../../../gen';
 import { userStore, workspaceStore } from '../../../stores';
 import { sendUserToast } from '../../../utils';
-import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare } from '@fortawesome/free-solid-svg-icons';
+import { faArchive, faCalendarAlt, faCodeFork, faEdit, faEye, faFileExport, faList, faPlay, faShare, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { MoreVertical } from 'lucide-svelte';
 import { createEventDispatcher } from 'svelte';
 import Button from '../button/Button.svelte';
@@ -27,6 +27,16 @@ async function archiveFlow(path) {
         sendUserToast(`Could not archive this flow ${err.body}`, true);
     }
 }
+async function deleteFlow(path) {
+    try {
+        await FlowService.deleteFlowByPath({ workspace: $workspaceStore, path });
+        dispatch('change');
+        sendUserToast(`Deleted flow ${path}`);
+    }
+    catch (err) {
+        sendUserToast(`Could not delete this flow ${err.body}`, true);
+    }
+}
 let scheduleEditor;
 </script>
 
@@ -75,7 +85,7 @@ let scheduleEditor;
 			{/if}
 
 			<Button
-				href="/flows/get/{path}"
+				href="/flows/get/{path}?workspace_id={$workspaceStore}"
 				color="light"
 				variant="border"
 				size="xs"
@@ -102,7 +112,7 @@ let scheduleEditor;
 				{
 					displayName: 'View flow',
 					icon: faEye,
-					href: `/flows/get/${path}`
+					href: `/flows/get/${path}?workspace_id=${$workspaceStore}`
 				},
 				{
 					displayName: 'Edit',
@@ -150,6 +160,15 @@ let scheduleEditor;
 					},
 					type: 'delete',
 					disabled: !canWrite
+				},
+				{
+					displayName: 'Delete',
+					icon: faTrashAlt,
+					action: () => {
+						path ? deleteFlow(path) : null
+					},
+					type: 'delete',
+					disabled: !canWrite
 				}
 			]}
 		>

package/components/common/table/LanguageBadge.svelte

@@ -2,6 +2,7 @@
 import { classNames } from '../../../utils';
 import Badge from '../badge/Badge.svelte';
 import { LanguageIcon } from '../languageIcons';
+import Popover from '../../Popover.svelte';
 export let language;
 const languageLabel = {
     [Script.language.PYTHON3]: 'Python',
@@ -27,8 +28,13 @@ const colorByLanguage = {
 	color={colorByLanguage}
 	baseClass={classNames(baseClassByLanguage, 'flex gap-1 items-center')}
 >
-	<LanguageIcon lang={language} width={12} height={12} />
-	<span class="hidden lg:inline">
-		{languageLabel}
-	</span>
+	<Popover notClickable>
+		<LanguageIcon lang={language} width={12} height={12} />
+		<span slot="text">
+			{languageLabel}
+		</span>
+	</Popover>
+
+	<!-- <span class="hidden xl:inline">
+	</span> -->
 </Badge>

package/components/common/table/Row.svelte

@@ -36,7 +36,7 @@ first-of-type:rounded-t-md last-of-type:rounded-b-md {color}"
 		</div>
 	</a>
 	{#if $$slots.badges}
-		<div class="hidden md:flex flex-row gap-1 items-start flex-wrap">
+		<div class="hidden lg:flex flex-row gap-1 items-start">
 			<slot name="badges" />
 		</div>
 	{/if}

package/components/common/table/ScriptRow.svelte

@@ -82,7 +82,7 @@ let scheduleEditor;
 			{/if}
 
 			<Button
-				href="/scripts/get/{hash}"
+				href="/scripts/get/{hash}?workspace_id={$workspaceStore}"
 				color="light"
 				variant="border"
 				size="xs"
@@ -108,7 +108,7 @@ let scheduleEditor;
 				{
 					displayName: 'View script',
 					icon: faEye,
-					href: `/scripts/get/${hash}`
+					href: `/scripts/get/${hash}?workspace_id=${$workspaceStore}`
 				},
 
 				{