windmill-components 1.60.4 → 1.83.1

package/components/common/clearableInput/ClearableInput.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        value?: any;
+        placeholder?: string | undefined;
+        type?: "number" | "text" | "textarea" | undefined;
+        inputClass?: string | undefined;
+        wrapperClass?: string | undefined;
+        buttonClass?: string | undefined;
+    };
+    events: {
+        focus: FocusEvent;
+        blur: FocusEvent;
+        change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ClearableInputProps = typeof __propDef.props;
+export type ClearableInputEvents = typeof __propDef.events;
+export type ClearableInputSlots = typeof __propDef.slots;
+export default class ClearableInput extends SvelteComponentTyped<ClearableInputProps, ClearableInputEvents, ClearableInputSlots> {
+}
+export {};

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;
         }
     }
@@ -59,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

@@ -0,0 +1,138 @@
+<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 convertTo = undefined;
+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 convertFile(file) {
+    return new Promise((resolve) => {
+        if (!convertTo) {
+            return resolve(null);
+        }
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            resolve(reader.result);
+        };
+        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) {
+    if (!files)
+        return;
+    files.splice(index, 1);
+    files = files.length ? files : undefined;
+    dispatchChange();
+}
+async function dispatchChange() {
+    files = files;
+    if (convertTo && files) {
+        const promises = files.map(convertFile);
+        const converted = await Promise.all(promises);
+        dispatch('change', converted);
+    }
+    else {
+        dispatch('change', files);
+    }
+}
+</script>
+
+<button
+	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" />
+	{/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,29 @@
+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;
+        convertTo?: ReadFileAs | 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/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,8 @@ 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 ClearableInput } from './clearableInput/ClearableInput.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';
@@ -17,6 +19,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

@@ -4,6 +4,8 @@ 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 ClearableInput } from './clearableInput/ClearableInput.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';
@@ -17,6 +19,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

@@ -1,7 +1,10 @@
+<script>export let kbdClass = '';
+</script>
+
 <span
 	class="{$$props.class} rounded border bg-white/70 px-1.5 !text-xs text-gray-600 shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-500"
 >
-	<kbd>
+	<kbd class={kbdClass}>
 		<slot />
 	</kbd>
 </span>

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

@@ -1,21 +1,8 @@
-/** @typedef {typeof __propDef.props}  KbdProps */
-/** @typedef {typeof __propDef.events}  KbdEvents */
-/** @typedef {typeof __propDef.slots}  KbdSlots */
-export default class Kbd extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}> {
-}
-export type KbdProps = typeof __propDef.props;
-export type KbdEvents = typeof __propDef.events;
-export type KbdSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        [x: string]: any;
+        kbdClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +11,9 @@ declare const __propDef: {
         default: {};
     };
 };
+export type KbdProps = typeof __propDef.props;
+export type KbdEvents = typeof __propDef.events;
+export type KbdSlots = typeof __propDef.slots;
+export default class Kbd extends SvelteComponentTyped<KbdProps, KbdEvents, KbdSlots> {
+}
 export {};

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

@@ -4,8 +4,12 @@ let current = undefined;
 
 <script>import { classNames } from '../../../utils';
 import { onMount } from 'svelte';
+import { fade } from 'svelte/transition';
 export let noMinW = false;
-let show = false;
+export let show = false;
+export let wrapperClasses = '';
+export let popupClasses = '';
+export let transitionDuration = 100;
 let menu;
 export let placement = 'bottom-start';
 function handleOutsideClick(event) {
@@ -32,6 +36,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',
@@ -39,7 +44,7 @@ const placementsClasses = {
 };
 </script>
 
-<div class="relative" bind:this={menu}>
+<div class="relative {wrapperClasses}" bind:this={menu}>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		on:click|stopPropagation={() => {
@@ -49,16 +54,18 @@ const placementsClasses = {
 			}
 			show = !show
 		}}
-		class="cursor-pointer hover:bg-gray-100/30"
+		class="relative"
 	>
 		<slot class="triggerable" name="trigger" />
 	</div>
 	{#if show}
 		<div
+			transition:fade|local={{ duration: transitionDuration }}
 			class={classNames(
 				'z-50 absolute mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none',
 				placementsClasses[placement],
-				noMinW ? 'min-w-0' : 'w-60'
+				noMinW ? 'min-w-0' : 'w-60',
+				popupClasses
 			)}
 			role="menu"
 			tabindex="-1"

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

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

package/components/common/modal/AlwaysMountedModal.svelte

@@ -0,0 +1,109 @@
+<script context="module">let onTop;
+const modals = {};
+export function getModal(id = '') {
+    return modals[id];
+}
+</script>
+
+<script>import { onDestroy } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { Badge } from '..';
+import Button from '../button/Button.svelte';
+let topDiv;
+let visible = false;
+let prevOnTop;
+export let title;
+export let style = '';
+export let id = '';
+function onKeyDown(event) {
+    if (onTop == topDiv) {
+        switch (event.key) {
+            case 'Enter':
+                event.stopPropagation();
+                event.preventDefault();
+                break;
+            case 'Escape':
+                event.stopPropagation();
+                event.preventDefault();
+                close();
+                break;
+        }
+    }
+}
+function open() {
+    if (visible) {
+        return;
+    }
+    prevOnTop = onTop;
+    onTop = topDiv;
+    window.addEventListener('keydown', onKeyDown);
+    document.body.style.overflow = 'hidden';
+    visible = true;
+    document.body.appendChild(topDiv);
+}
+function close() {
+    if (!visible) {
+        return;
+    }
+    window.removeEventListener('keydown', onKeyDown);
+    onTop = prevOnTop;
+    if (onTop == null) {
+        document.body.style.overflow = '';
+    }
+    visible = false;
+}
+modals[id] = { open, close };
+onDestroy(() => {
+    delete modals[id];
+    window.removeEventListener('keydown', onKeyDown);
+});
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div id="topModal" class:visible bind:this={topDiv} on:click={() => close()}>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div class="relative bg-white p-4 rounded-md" on:click|stopPropagation={() => {}}>
+		<div class={twMerge('max-w-screen-lg max-h-screen-80 overflow-auto', $$props.class)} {style}>
+			<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={() => {
+						close()
+					}}
+					color="light"
+					size="sm"
+				>
+					<span class="gap-2">Cancel <Badge color="dark-gray">Escape</Badge></span>
+				</Button>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	#topModal {
+		visibility: hidden;
+		z-index: 9999;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: #4448;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.visible {
+		visibility: visible !important;
+	}</style>

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

@@ -0,0 +1,22 @@
+import { SvelteComponentTyped } from "svelte";
+export declare function getModal(id?: string): any;
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        title: string;
+        style?: string | undefined;
+        id?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AlwaysMountedModalProps = typeof __propDef.props;
+export type AlwaysMountedModalEvents = typeof __propDef.events;
+export type AlwaysMountedModalSlots = typeof __propDef.slots;
+export default class AlwaysMountedModal extends SvelteComponentTyped<AlwaysMountedModalProps, AlwaysMountedModalEvents, AlwaysMountedModalSlots> {
+}
+export {};