windmill-components 1.70.0 → 1.77.0

package/components/common/button/UndoRedo.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        undoProps?: Record<string, any> | undefined;
+        redoProps?: Record<string, any> | undefined;
+    };
+    events: {
+        undo: CustomEvent<any>;
+        redo: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UndoRedoProps = typeof __propDef.props;
+export type UndoRedoEvents = typeof __propDef.events;
+export type UndoRedoSlots = typeof __propDef.slots;
+export default class UndoRedo extends SvelteComponentTyped<UndoRedoProps, UndoRedoEvents, UndoRedoSlots> {
+}
+export {};

package/components/common/drawer/Drawer.svelte

@@ -61,11 +61,17 @@ onMount(() => {
 
 <svelte:window on:keydown={onKeyDown} />
 
-<aside class="drawer {$$props.class}" class:open class:close={!open && timeout} {style}>
-	<div class="overlay" on:click={handleClickAway} />
-	<div class="panel {placement}" class:size>
+<aside
+	class="drawer {$$props.class} {$$props.positionClass}"
+	class:open
+	class:close={!open && timeout}
+	{style}
+>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="overlay {$$props.positionClass}" on:click={handleClickAway} />
+	<div class="panel {placement} {$$props.positionClass}" class:size>
 		{#if open || !timeout || alwaysOpen}
-			<slot />
+			<slot {open} />
 		{/if}
 	</div>
 </aside>

package/components/common/drawer/Drawer.svelte.d.ts

@@ -20,7 +20,9 @@ declare const __propDef: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        default: {};
+        default: {
+            open: boolean;
+        };
     };
 };
 export type DrawerProps = typeof __propDef.props;

package/components/common/drawer/DrawerContent.svelte

@@ -2,7 +2,7 @@
 import { faClose } from '@fortawesome/free-solid-svg-icons';
 import { createEventDispatcher } from 'svelte';
 import { Icon } from 'svelte-awesome';
-import Button from '../button/Button.svelte';
+import CloseButton from '../CloseButton.svelte';
 export let title = undefined;
 export let overflow_y = true;
 export let noPadding = false;
@@ -13,12 +13,7 @@ const dispatch = createEventDispatcher();
 <div class="flex flex-col divide-y h-screen max-h-screen">
 	<div class="flex justify-between w-wull items-center px-2 py-2 ">
 		<div class="flex items-center gap-2">
-			<button
-				on:click={() => dispatch('close')}
-				class="hover:bg-gray-200 bg-gray-100 rounded-full w-8 h-8 flex items-center justify-center transition-all"
-			>
-				<Icon data={faClose} class="text-gray-500" />
-			</button>
+			<CloseButton on:close />
 
 			<span class="font-semibold truncate text-gray-800">{title}</span>
 		</div>

package/components/common/fileInput/FileInput.svelte

@@ -1,12 +1,14 @@
-<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";
+<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';
+import { twMerge } from 'tailwind-merge';
 let c = '';
 export { c as class };
+export let style = '';
 export let accept = '*';
 export let multiple = false;
-export let convertToBase64 = false;
+export let convertTo = undefined;
 export let hideIcon = false;
 export let iconSize = 36;
 const dispatch = createEventDispatcher();
@@ -26,18 +28,34 @@ async function onChange(fileList) {
         if (file)
             files.push(file);
     }
-    // Needs to be reset so the same file can be selected 
+    // Needs to be reset so the same file can be selected
     // multiple times in a row
     input.value = '';
     dispatchChange();
 }
-async function fileToBase64(file) {
+async function convertFile(file) {
     return new Promise((resolve) => {
+        if (!convertTo) {
+            return resolve(null);
+        }
         const reader = new FileReader();
         reader.onloadend = () => {
             resolve(reader.result);
         };
-        reader.readAsDataURL(file);
+        switch (convertTo) {
+            case 'buffer':
+                reader.readAsArrayBuffer(file);
+                break;
+            case 'binary':
+                reader.readAsBinaryString(file);
+                break;
+            case 'base64':
+                reader.readAsDataURL(file);
+                break;
+            case 'text':
+                reader.readAsText(file);
+                break;
+        }
     });
 }
 function removeFile(index) {
@@ -49,10 +67,10 @@ function removeFile(index) {
 }
 async function dispatchChange() {
     files = files;
-    if (convertToBase64 && files) {
-        const promises = files.map(fileToBase64);
-        const b64s = await Promise.all(promises);
-        dispatch('change', b64s);
+    if (convertTo && files) {
+        const promises = files.map(convertFile);
+        const converted = await Promise.all(promises);
+        dispatch('change', converted);
     }
     else {
         dispatch('change', files);
@@ -61,10 +79,14 @@ async function dispatchChange() {
 </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 ?? ''}"
+	class={twMerge(
+		`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
+	)}
+	{style}
 >
 	{#if !hideIcon && !files}
 		<FileUp size={iconSize} class="mb-2" />
@@ -77,9 +99,11 @@ async function dispatchChange() {
 				</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">
+				{#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"
@@ -104,9 +128,11 @@ async function dispatchChange() {
 		type="file"
 		title={files ? `${files.length} file${files.length > 1 ? 's' : ''} chosen` : 'No file chosen'}
 		bind:this={input}
-		on:change={({currentTarget}) => {onChange(currentTarget.files)}}
+		on:change={({ currentTarget }) => {
+			onChange(currentTarget.files)
+		}}
 		{accept}
 		{multiple}
 		{...$$restProps}
 	/>
-</button>
+</button>

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

@@ -1,11 +1,13 @@
 import { SvelteComponentTyped } from "svelte";
+import type { ReadFileAs } from './model';
 declare const __propDef: {
     props: {
         [x: string]: any;
         class?: string | undefined;
+        style?: string | undefined;
         accept?: string | undefined;
         multiple?: boolean | undefined;
-        convertToBase64?: boolean | undefined;
+        convertTo?: ReadFileAs | undefined;
         hideIcon?: boolean | undefined;
         iconSize?: number | undefined;
     };

package/components/common/fileInput/model.d.ts

@@ -0,0 +1 @@
+export type ReadFileAs = 'buffer' | 'binary' | 'base64' | 'text';

package/components/common/fileInput/model.js

@@ -0,0 +1 @@
+export {};

package/components/common/index.d.ts

@@ -4,6 +4,7 @@ export { default as Badge } from './badge/Badge.svelte';
 export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
+export { default as UndoRedo } from './button/UndoRedo.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';

package/components/common/index.js

@@ -4,6 +4,7 @@ export { default as Badge } from './badge/Badge.svelte';
 export { default as Button } from './button/Button.svelte';
 export { default as ButtonPopup } from './button/ButtonPopup.svelte';
 export { default as ButtonPopupItem } from './button/ButtonPopupItem.svelte';
+export { default as UndoRedo } from './button/UndoRedo.svelte';
 export { default as Drawer } from './drawer/Drawer.svelte';
 export { default as DrawerContent } from './drawer/DrawerContent.svelte';
 export { default as Kbd } from './kbd/Kbd.svelte';

package/components/common/languageIcons/JavaScript.svelte

@@ -0,0 +1,11 @@
+<script>
+	export let width = 16
+	export let height = 16
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 630 630">
+	<rect width="630" height="630" fill="#f7df1e" />
+	<path
+		d="m423.2 492.19c12.69 20.72 29.2 35.95 58.4 35.95 24.53 0 40.2-12.26 40.2-29.2 0-20.3-16.1-27.49-43.1-39.3l-14.8-6.35c-42.72-18.2-71.1-41-71.1-89.2 0-44.4 33.83-78.2 86.7-78.2 37.64 0 64.7 13.1 84.2 47.4l-46.1 29.6c-10.15-18.2-21.1-25.37-38.1-25.37-17.34 0-28.33 11-28.33 25.37 0 17.76 11 24.95 36.4 35.95l14.8 6.34c50.3 21.57 78.7 43.56 78.7 93 0 53.3-41.87 82.5-98.1 82.5-54.98 0-90.5-26.2-107.88-60.54zm-209.13 5.13c9.3 16.5 17.76 30.45 38.1 30.45 19.45 0 31.72-7.61 31.72-37.2v-201.3h59.2v202.1c0 61.3-35.94 89.2-88.4 89.2-47.4 0-74.85-24.53-88.81-54.075z"
+	/>
+</svg>

package/components/common/languageIcons/JavaScript.svelte.d.ts

@@ -0,0 +1,25 @@
+/** @typedef {typeof __propDef.props}  JavaScriptProps */
+/** @typedef {typeof __propDef.events}  JavaScriptEvents */
+/** @typedef {typeof __propDef.slots}  JavaScriptSlots */
+export default class JavaScript extends SvelteComponentTyped<{
+    height?: number | undefined;
+    width?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type JavaScriptProps = typeof __propDef.props;
+export type JavaScriptEvents = typeof __propDef.events;
+export type JavaScriptSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        height?: number | undefined;
+        width?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/common/languageIcons/LanguageIcon.svelte

@@ -1,6 +1,7 @@
 <script>import MySQLIcon from '../../icons/Mysql.svelte';
 import PostgresIcon from '../../icons/PostgresIcon.svelte';
 import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './';
+import JavaScript from './JavaScript.svelte';
 export let lang;
 export let width = 30;
 export let height = 30;
@@ -11,7 +12,8 @@ const langToComponent = {
     deno: TypeScriptIcon,
     bash: BashIcon,
     pgsql: PostgresIcon,
-    mysql: MySQLIcon
+    mysql: MySQLIcon,
+    javascript: JavaScript
 };
 </script>
 

package/components/common/languageIcons/LanguageIcon.svelte.d.ts

@@ -3,7 +3,7 @@ import type { SupportedLanguage } from '../../../common';
 declare const __propDef: {
     props: {
         [x: string]: any;
-        lang: SupportedLanguage | 'pgsql' | 'mysql';
+        lang: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript';
         width?: number | undefined;
         height?: number | undefined;
         scale?: number | undefined;

package/components/common/menu/Menu.svelte

@@ -5,7 +5,7 @@ let current = undefined;
 <script>import { classNames } from '../../../utils';
 import { onMount } from 'svelte';
 export let noMinW = false;
-let show = false;
+export let show = false;
 let menu;
 export let placement = 'bottom-start';
 function handleOutsideClick(event) {
@@ -32,6 +32,7 @@ onMount(() => {
     };
 });
 const placementsClasses = {
+    'bottom-center': 'origin-top-left left-1/2 transform -translate-x-1/2',
     'bottom-start': 'origin-top-left left-0',
     'bottom-end': 'origin-top-right right-0',
     'top-start': 'origin-bottom-left left-0 bottom-0',
@@ -49,7 +50,7 @@ const placementsClasses = {
 			}
 			show = !show
 		}}
-		class="cursor-pointer hover:bg-gray-100/30"
+		class="relative"
 	>
 		<slot class="triggerable" name="trigger" />
 	</div>

package/components/common/menu/Menu.svelte.d.ts

@@ -2,7 +2,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         noMinW?: boolean | undefined;
-        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | undefined;
+        show?: boolean | undefined;
+        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "bottom-center" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/common/modal/Modal.svelte

@@ -1,10 +1,13 @@
-<script>import { classNames } from '../../../utils';
-import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
 import Button from '../button/Button.svelte';
 import Badge from '../badge/Badge.svelte';
+import { twMerge } from 'tailwind-merge';
 export let title;
 export let open = false;
+let c = '';
+export { c as class };
+export let style = '';
 const dispatch = createEventDispatcher();
 function onKeyDown(event) {
     if (open) {
@@ -36,7 +39,7 @@ function fadeFast(node) {
 		role="dialog"
 	>
 		<div
-			class={classNames(
+			class={twMerge(
 				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
 				open ? 'ease-out duration-300 opacity-100' : 'ease-in duration-200 opacity-0'
 			)}
@@ -45,12 +48,14 @@ function fadeFast(node) {
 		<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(
+					class={twMerge(
 						'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',
+						c,
 						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'
 					)}
+					{style}
 				>
 					<div class="flex">
 						<div class="ml-4 text-left flex-1">

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

@@ -3,6 +3,8 @@ declare const __propDef: {
     props: {
         title: string;
         open?: boolean | undefined;
+        class?: string | undefined;
+        style?: string | undefined;
     };
     events: {
         canceled: CustomEvent<any>;

package/components/common/popup/Popup.svelte

@@ -14,6 +14,7 @@ export let closeOn = ['blur'];
 export let innerClasses = '';
 export let outerClasses = '';
 export let transition = slide;
+export { openFocusIn as open, closed as close };
 const states = ['closed', 'open-focus-in', 'open-focus-out'];
 const stateMachine = createStateMachine(states, {
     to: {
@@ -144,7 +145,7 @@ onDestroy(removeAllListeners);
 	{#if $stateMachine.currentState !== 'closed'}
 		<div transition:transition|local={{ duration: 200 }} class={outerClasses}>
 			<div class={innerClasses}>
-				<slot close={closed} />
+				<slot open={openFocusIn} close={closed} />
 			</div>
 		</div>
 	{/if}

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

@@ -10,12 +10,15 @@ declare const __propDef: {
         innerClasses?: string | undefined;
         outerClasses?: string | undefined;
         transition?: ((node: Element, params?: Record<string, any>) => TransitionConfig) | undefined;
+        open?: (() => void) | undefined;
+        close?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
         default: {
+            open: () => void;
             close: () => void;
         };
     };
@@ -45,5 +48,11 @@ export default class Popup extends SvelteComponentTyped<PopupProps, PopupEvents,
     get transition(): ((node: Element, params?: Record<string, any> | undefined) => TransitionConfig) | undefined;
     /**accessor*/
     set transition(_: ((node: Element, params?: Record<string, any> | undefined) => TransitionConfig) | undefined);
+    get open(): (() => void) | undefined;
+    /**accessor*/
+    set open(_: (() => void) | undefined);
+    get close(): (() => void) | undefined;
+    /**accessor*/
+    set close(_: (() => void) | undefined);
 }
 export {};

package/components/common/table/AppRow.svelte

@@ -12,6 +12,7 @@ export let marked;
 export let starred;
 export let shareModal;
 export let moveDrawer;
+export let deleteConfirmedCallback;
 let { summary, path, extra_perms, canWrite, workspace_id } = app;
 const dispatch = createEventDispatcher();
 </script>
@@ -71,7 +72,6 @@ const dispatch = createEventDispatcher();
 		</span>
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View',
@@ -81,7 +81,8 @@ const dispatch = createEventDispatcher();
 				{
 					displayName: 'Edit',
 					icon: faPen,
-					href: `/apps/edit/${path}?nodraft=true`
+					href: `/apps/edit/${path}?nodraft=true`,
+					disabled: !canWrite
 				},
 				{
 					displayName: 'Use as template',
@@ -106,16 +107,21 @@ const dispatch = createEventDispatcher();
 				{
 					displayName: 'Delete',
 					icon: faTrashAlt,
-					action: async () => {
-						await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
-						dispatch('change')
+					action: async (event) => {
+						if (event?.shiftKey) {
+							await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
+							dispatch('change')
+						} else {
+							deleteConfirmedCallback = async () => {
+								await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
+								dispatch('change')
+							}
+						}
 					},
 					type: 'delete',
 					disabled: !canWrite
 				}
 			]}
-		>
-			<MoreVertical size={20} />
-		</Dropdown>
+		/>
 	</svelte:fragment>
 </Row>

package/components/common/table/AppRow.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         starred: boolean;
         shareModal: ShareModal;
         moveDrawer: MoveDrawer;
+        deleteConfirmedCallback: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;

package/components/common/table/FlowRow.svelte

@@ -8,6 +8,7 @@ import { sendUserToast } from '../../../utils';
 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 Badge from '../badge/Badge.svelte';
 import Button from '../button/Button.svelte';
 import Row from './Row.svelte';
 export let flow;
@@ -15,7 +16,8 @@ export let marked;
 export let starred;
 export let shareModal;
 export let moveDrawer;
-let { summary, path, extra_perms, canWrite, workspace_id } = flow;
+export let deleteConfirmedCallback;
+let { summary, path, extra_perms, canWrite, workspace_id, archived } = flow;
 const dispatch = createEventDispatcher();
 async function archiveFlow(path) {
     try {
@@ -53,11 +55,15 @@ let scheduleEditor;
 >
 	<svelte:fragment slot="badges">
 		<SharedBadge {canWrite} extraPerms={extra_perms} />
+
+		{#if archived}
+			<Badge color="red" baseClass="border">archived</Badge>
+		{/if}
 	</svelte:fragment>
 	<svelte:fragment slot="actions">
 		<span class="hidden md:inline-flex gap-x-1">
 			{#if !$userStore?.operator}
-				{#if canWrite}
+				{#if canWrite && !archived}
 					<div>
 						<Button
 							color="light"
@@ -107,7 +113,6 @@ let scheduleEditor;
 
 		<Dropdown
 			placement="bottom-end"
-			btnClasses="!text-gray-700 !bg-transparent hover:!bg-gray-400/20 !p-[6px]"
 			dropdownItems={[
 				{
 					displayName: 'View flow',
@@ -118,7 +123,7 @@ let scheduleEditor;
 					displayName: 'Edit',
 					icon: faEdit,
 					href: `/flows/edit/${path}?nodraft=true`,
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Use as template/Fork',
@@ -136,14 +141,15 @@ let scheduleEditor;
 					action: () => {
 						moveDrawer.openDrawer(path, summary, 'flow')
 					},
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Schedule',
 					icon: faCalendarAlt,
 					action: () => {
 						scheduleEditor.openNew(true, path)
-					}
+					},
+					disabled: archived
 				},
 				{
 					displayName: canWrite ? 'Share' : 'See Permissions',
@@ -159,20 +165,24 @@ let scheduleEditor;
 						path ? archiveFlow(path) : null
 					},
 					type: 'delete',
-					disabled: !canWrite
+					disabled: !canWrite || archived
 				},
 				{
 					displayName: 'Delete',
 					icon: faTrashAlt,
-					action: () => {
-						path ? deleteFlow(path) : null
+					action: (event) => {
+						if (event?.shiftKey) {
+							deleteFlow(path)
+						} else {
+							deleteConfirmedCallback = () => {
+								deleteFlow(path)
+							}
+						}
 					},
 					type: 'delete',
 					disabled: !canWrite
 				}
 			]}
-		>
-			<MoreVertical size={20} />
-		</Dropdown>
+		/>
 	</svelte:fragment>
 </Row>

package/components/common/table/FlowRow.svelte.d.ts

@@ -11,6 +11,7 @@ declare const __propDef: {
         starred: boolean;
         shareModal: ShareModal;
         moveDrawer: MoveDrawer;
+        deleteConfirmedCallback: (() => void) | undefined;
     };
     events: {
         change: CustomEvent<any>;