windmill-components 1.89.1 → 1.103.1

package/package/components/common/button/Button.svelte

@@ -1,7 +1,6 @@
 <script>import { createEventDispatcher } from 'svelte';
 import Icon from 'svelte-awesome';
 import { ButtonType } from './model';
-import { goto } from '$app/navigation';
 import { Loader2 } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
 import ButtonDropdown from './ButtonDropdown.svelte';
@@ -13,19 +12,20 @@ export let color = 'blue';
 export let variant = 'contained';
 export let btnClasses = '';
 export let wrapperClasses = '';
+export let wrapperStyle = '';
 export let disabled = false;
 export let href = undefined;
-export let target = '_self';
+export let target = undefined;
 export let iconOnly = false;
 export let startIcon = undefined;
 export let endIcon = undefined;
 export let element = undefined;
 export let id = '';
 export let nonCaptureEvent = false;
-export let buttonType = 'button';
 export let loading = false;
 export let title = undefined;
 export let style = '';
+export let download = undefined;
 export let dropdownItems = undefined;
 function computeDropdowns() {
     if (typeof dropdownItems === 'function') {
@@ -74,30 +74,11 @@ const colorVariants = {
         divider: 'divide-x divide-gray-100'
     }
 };
-$: buttonProps = {
-    id,
-    href,
-    target,
-    tabindex: disabled ? -1 : 0,
-    type: buttonType,
-    title,
-    ...$$restProps
-};
 async function onClick(event) {
     if (!nonCaptureEvent) {
         event.preventDefault();
         event.stopPropagation();
         dispatch('click', event);
-        if (href) {
-            if (href.startsWith('http') || target == '_blank') {
-                window.open(href, target);
-            }
-            else {
-                loading = true;
-                await goto(href);
-                loading = false;
-            }
-        }
     }
 }
 $: isSmall = size === 'xs' || size === 'sm';
@@ -106,33 +87,79 @@ $: endIconClass = twMerge(iconOnly ? undefined : isSmall ? 'ml-1' : 'ml-2', endI
 $: buttonClass = twMerge('w-full', colorVariants?.[color]?.[variant], variant === 'border' ? 'border' : '', ButtonType.FontSizeClasses[size], ButtonType.SpacingClasses[spacingSize][variant], 'focus:ring-2 font-semibold', dropdownItems ? 'rounded-l-md h-full' : 'rounded-md', 'justify-center items-center text-center whitespace-nowrap inline-flex', btnClasses, 'transition-all ');
 </script>
 
-<div class="{dropdownItems ? colorVariants[color].divider : ''} {wrapperClasses} flex flex-row">
-	<svelte:element
-		this={href ? 'a' : 'button'}
-		bind:this={element}
-		on:pointerdown
-		on:click={onClick}
-		on:focus
-		on:blur
-		class={twMerge(buttonClass, disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : '')}
-		{...buttonProps}
-		disabled={disabled || loading}
-		type="submit"
-		{style}
-	>
-		{#if loading}
-			<Loader2 class="animate-spin mr-1" size={14} />
-		{:else if startIcon}
-			<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
-		{/if}
+<div
+	class="{dropdownItems ? colorVariants[color].divider : ''} {wrapperClasses} flex flex-row"
+	style={wrapperStyle}
+>
+	{#if href}
+		<a
+			data-sveltekit-preload-code="hover"
+			bind:this={element}
+			on:pointerdown
+			on:focus
+			on:blur
+			on:click={() => {
+				loading = true
+				dispatch('click', event)
+				loading = false
+			}}
+			{href}
+			{download}
+			class={twMerge(
+				buttonClass,
+				disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''
+			)}
+			{id}
+			{target}
+			tabindex={disabled ? -1 : 0}
+			{...$$restProps}
+			{style}
+		>
+			{#if loading}
+				<Loader2 class="animate-spin mr-1" size={14} />
+			{:else if startIcon}
+				<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
+			{/if}
+
+			{#if !iconOnly}
+				<slot />
+			{/if}
+			{#if endIcon}
+				<Icon data={endIcon.icon} class={endIconClass} scale={ButtonType.IconScale[size]} />
+			{/if}
+		</a>
+	{:else}
+		<button
+			bind:this={element}
+			on:pointerdown
+			on:click={onClick}
+			on:focus
+			on:blur
+			class={twMerge(
+				buttonClass,
+				disabled ? '!bg-gray-300 !text-gray-600 !cursor-not-allowed' : ''
+			)}
+			{id}
+			tabindex={disabled ? -1 : 0}
+			{title}
+			{...$$restProps}
+			disabled={disabled || loading}
+			{style}
+		>
+			{#if loading}
+				<Loader2 class="animate-spin mr-1" size={14} />
+			{:else if startIcon}
+				<Icon data={startIcon.icon} class={startIconClass} scale={ButtonType.IconScale[size]} />
+			{/if}
 
-		{#if !iconOnly}
-			<slot />
-		{/if}
-		{#if endIcon}
-			<Icon data={endIcon.icon} class={endIconClass} scale={ButtonType.IconScale[size]} />
-		{/if}
-	</svelte:element>
+			{#if !iconOnly}
+				<slot />
+			{/if}
+			{#if endIcon}
+				<Icon data={endIcon.icon} class={endIconClass} scale={ButtonType.IconScale[size]} />
+			{/if}
+		</button>
+	{/if}
 
 	{#if dropdownItems}
 		<div class={twMerge(buttonClass, 'rounded-r-md rounded-l-none m-0 p-0 h-auto')}>

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

@@ -10,19 +10,20 @@ declare const __propDef: {
         variant?: ButtonType.Variant | undefined;
         btnClasses?: string | undefined;
         wrapperClasses?: string | undefined;
+        wrapperStyle?: string | undefined;
         disabled?: boolean | undefined;
         href?: string | undefined;
-        target?: ButtonType.Target | undefined;
+        target?: '_self' | '_blank' | undefined;
         iconOnly?: boolean | undefined;
         startIcon?: ButtonType.Icon | undefined;
         endIcon?: ButtonType.Icon | undefined;
         element?: ButtonType.Element | undefined;
         id?: string | undefined;
         nonCaptureEvent?: boolean | undefined;
-        buttonType?: "button" | "submit" | "reset" | undefined;
         loading?: boolean | undefined;
         title?: string | undefined;
         style?: string | undefined;
+        download?: string | undefined;
         dropdownItems?: {
             label: string;
             onClick?: (() => void) | undefined;

package/package/components/common/button/ButtonDropdown.svelte

@@ -1,18 +1,19 @@
-<script>
-	import { Menu, Transition, MenuButton, MenuItems } from '@rgossiaux/svelte-headlessui'
-	import { ChevronDown } from 'lucide-svelte'
+<script>import { Menu, Transition, MenuButton, MenuItems } from '@rgossiaux/svelte-headlessui';
+import { ChevronDown } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+export let hasPadding = true;
 </script>
 
 <Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
-	<MenuButton class="h-full w-full px-2">
+	<MenuButton class={twMerge('h-full w-full', hasPadding ? 'px-2' : '')}>
 		<ChevronDown class="w-5 h-5" />
 	</MenuButton>
 	<Transition
 		show={open}
-		enter="transition ease-out duration-75"
+		enter="transition ease-out duration-[25ms]"
 		enterFrom="transform opacity-0 scale-95"
 		enterTo="transform opacity-100 scale-100"
-		leave="transition ease-in duration-75"
+		leave="transition ease-in duration-[25ms]"
 		leaveFrom="transform opacity-100 scale-100"
 		leaveTo="transform opacity-0 scale-95"
 	>

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

@@ -1,21 +1,7 @@
-/** @typedef {typeof __propDef.props}  ButtonDropdownProps */
-/** @typedef {typeof __propDef.events}  ButtonDropdownEvents */
-/** @typedef {typeof __propDef.slots}  ButtonDropdownSlots */
-export default class ButtonDropdown extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    items: {};
-}> {
-}
-export type ButtonDropdownProps = typeof __propDef.props;
-export type ButtonDropdownEvents = typeof __propDef.events;
-export type ButtonDropdownSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: never;
+        hasPadding?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,4 +10,9 @@ declare const __propDef: {
         items: {};
     };
 };
+export type ButtonDropdownProps = typeof __propDef.props;
+export type ButtonDropdownEvents = typeof __propDef.events;
+export type ButtonDropdownSlots = typeof __propDef.slots;
+export default class ButtonDropdown extends SvelteComponentTyped<ButtonDropdownProps, ButtonDropdownEvents, ButtonDropdownSlots> {
+}
 export {};

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

@@ -17,6 +17,8 @@ function handleInput(e) {
 function clear() {
     value = '';
 }
+$: if (value === undefined)
+    value = '';
 </script>
 
 <div
@@ -32,6 +34,7 @@ function clear() {
 			class="resize-y duration-200 {inputClass}"
 			{...$$restProps}
 			on:input={handleInput}
+			on:keydown|stopPropagation
 			on:focus
 			on:blur
 		/>
@@ -40,9 +43,10 @@ function clear() {
 			{type}
 			{value}
 			{placeholder}
-			class="duration-200 {(type === 'number' && value ? '!pr-[26px] ' : '') + inputClass}"
+			class="duration-200 {(value ? '!pr-[26px] ' : '') + inputClass}"
 			{...$$restProps}
 			on:input={handleInput}
+			on:keydown|stopPropagation
 			on:focus
 			on:blur
 		/>

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

@@ -10,6 +10,7 @@ declare const __propDef: {
         buttonClass?: string | undefined;
     };
     events: {
+        keydown: KeyboardEvent;
         focus: FocusEvent;
         blur: FocusEvent;
         change: CustomEvent<any>;

package/package/components/common/confirmationModal/UnsavedConfirmationModal.svelte

@@ -41,9 +41,6 @@ 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 the changes you have made? </span>
 	</div>
 </ConfirmationModal>

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

@@ -1,6 +1,6 @@
 <script>import { onMount } from 'svelte';
 import { createEventDispatcher } from 'svelte';
-import { browser } from '$app/environment';
+import { BROWSER } from 'esm-env';
 export let open = false;
 export let duration = 0.3;
 export let placement = 'right';
@@ -26,7 +26,7 @@ let mounted = false;
 const dispatch = createEventDispatcher();
 $: style = `--duration: ${duration}s; --size: ${size};`;
 function scrollLock(open) {
-    if (browser) {
+    if (BROWSER) {
         const body = document.querySelector('body');
         if (mounted && body) {
             body.style.overflowY = open ? 'hidden' : 'auto';

package/package/components/common/drawer/DrawerContent.svelte

@@ -1,17 +1,25 @@
-<script>import { classNames } from '../../../utils';
+<script>import Tooltip from '../../Tooltip.svelte';
+import { classNames } from '../../../utils';
 import CloseButton from '../CloseButton.svelte';
 export let title = undefined;
 export let overflow_y = true;
 export let noPadding = false;
 export let forceOverflowVisible = false;
+export let tooltip = '';
+export let documentationLink = undefined;
 </script>
 
 <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">
+	<div class="flex justify-between w-full items-center px-2 py-2 gap-2">
+		<div class="flex items-center gap-2 min-w-0">
 			<CloseButton on:close />
 
-			<span class="font-semibold truncate text-gray-800">{title ?? ''}</span>
+			<span class="font-semibold truncate text-gray-800"
+				>{title ?? ''}
+				{#if tooltip != '' || documentationLink}
+					<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+				{/if}</span
+			>
 		</div>
 		{#if $$slots.actions}
 			<div class="flex gap-2 items-center justify-end">

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

@@ -5,6 +5,8 @@ declare const __propDef: {
         overflow_y?: boolean | undefined;
         noPadding?: boolean | undefined;
         forceOverflowVisible?: boolean | undefined;
+        tooltip?: string | undefined;
+        documentationLink?: string | undefined;
     };
     events: {
         close: CustomEvent<any>;

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

@@ -1,8 +1,17 @@
 <script>export let kbdClass = '';
+export let small = false;
+if (small) {
+    kbdClass += ' !text-[10px] -my-1 px-1';
+}
+else {
+    kbdClass += ' !text-xs px-1.5';
+}
 </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"
+	class="{$$props.class} {small
+		? 'h-4  center-center'
+		: ''} -py-0.5 ml-0.5 rounded border bg-white/70 text-gray-600 shadow-sm font-light transition-all group-hover:border-primary-500 group-hover:text-primary-500"
 >
 	<kbd class={kbdClass}>
 		<slot />

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         kbdClass?: string | undefined;
+        small?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,6 +3,7 @@ import PostgresIcon from '../../icons/PostgresIcon.svelte';
 import { BashIcon, GoIcon, PythonIcon, TypeScriptIcon } from './';
 import JavaScript from './JavaScript.svelte';
 import FetchIcon from './FetchIcon.svelte';
+import DockerIcon from '../../icons/DockerIcon.svelte';
 export let lang;
 export let width = 30;
 export let height = 30;
@@ -15,7 +16,8 @@ const langToComponent = {
     pgsql: PostgresIcon,
     mysql: MySQLIcon,
     javascript: JavaScript,
-    fetch: FetchIcon
+    fetch: FetchIcon,
+    docker: DockerIcon
 };
 </script>
 

package/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' | 'javascript' | 'fetch';
+        lang: SupportedLanguage | 'pgsql' | 'mysql' | 'javascript' | 'fetch' | 'docker';
         width?: number | undefined;
         height?: number | undefined;
         scale?: number | undefined;

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

@@ -9,7 +9,7 @@ export let noMinW = false;
 export let show = false;
 export let wrapperClasses = '';
 export let popupClasses = '';
-export let transitionDuration = 100;
+export let transitionDuration = 25;
 let menu;
 export let placement = 'bottom-start';
 function handleOutsideClick(event) {

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

@@ -6,7 +6,7 @@ declare const __propDef: {
         wrapperClasses?: string | undefined;
         popupClasses?: string | undefined;
         transitionDuration?: number | undefined;
-        placement?: "top-start" | "top-end" | "top-center" | "bottom-start" | "bottom-end" | "bottom-center" | undefined;
+        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end" | "top-center" | "bottom-center" | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,109 +1,72 @@
-<script context="module">let onTop;
-const modals = {};
-export function getModal(id = '') {
-    return modals[id];
-}
-</script>
-
-<script>import { onDestroy } from 'svelte';
+<script>import { Dialog, DialogOverlay, DialogTitle, Transition, TransitionChild } from '@rgossiaux/svelte-headlessui';
+import Portal from 'svelte-portal';
 import { twMerge } from 'tailwind-merge';
-import { Badge } from '..';
 import Button from '../button/Button.svelte';
-let topDiv;
-let visible = false;
-let prevOnTop;
+import Badge from '../badge/Badge.svelte';
 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;
-        }
-    }
+let isOpen = false;
+export function close() {
+    isOpen = false;
 }
-function open() {
-    if (visible) {
-        return;
-    }
-    prevOnTop = onTop;
-    onTop = topDiv;
-    window.addEventListener('keydown', onKeyDown);
-    document.body.style.overflow = 'hidden';
-    visible = true;
-    document.body.appendChild(topDiv);
+export function open() {
+    isOpen = true;
 }
-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"
+<Portal target="#app-editor-top-level-drawer">
+	<Transition show={isOpen}>
+		<Dialog as="div" class="absolute inset-0 overflow-y-auto z-50" on:close={close}>
+			<div class="min-h-screen px-4 text-center">
+				<TransitionChild
+					enter="ease-out duration-100"
+					enterFrom="opacity-0"
+					enterTo="opacity-100"
+					leave="ease-in duration-100"
+					leaveFrom="opacity-100"
+					leaveTo="opacity-0"
 				>
-					<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;
-	}
+					<DialogOverlay class="fixed inset-0 bg-gray-800/50 " />
+				</TransitionChild>
 
-	.visible {
-		visibility: visible !important;
-	}</style>
+				<TransitionChild
+					enter="ease-out duration-[50ms]"
+					enterFrom="opacity-0 scale-95"
+					enterTo="opacity-100 scale-100"
+					leave="ease-in dduration-[50ms]"
+					leaveFrom="opacity-100 scale-100"
+					leaveTo="opacity-0 scale-95"
+				>
+					<!-- This element is to trick the browser into centering the modal contents. -->
+					<span class="inline-block h-screen align-middle" aria-hidden="true"> &#8203; </span>
+					<div
+						class="inline-block w-full max-w-md p-6 text-left align-middle transition-all transform bg-white shadow-xl rounded-md"
+					>
+						<DialogTitle class="text-lg font-medium leading-6 text-gray-900">
+							{title}
+						</DialogTitle>
+						<!-- svelte-ignore a11y-click-events-have-key-events -->
+						<div class="relative bg-white rounded-md" on:click|stopPropagation={() => {}}>
+							<div
+								class={twMerge(
+									'max-w-screen-lg max-h-screen-80 overflow-auto flex flex-col',
+									$$props.class
+								)}
+								{style}
+							>
+								<div class="flex-1">
+									<slot />
+								</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>
+				</TransitionChild>
+			</div>
+		</Dialog>
+	</Transition>
+</Portal>

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

@@ -1,11 +1,11 @@
 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;
+        close?: (() => void) | undefined;
+        open?: (() => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -18,5 +18,7 @@ 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> {
+    get close(): () => void;
+    get open(): () => void;
 }
 export {};