windmill-components 1.89.0 → 1.103.0

package/package/components/apps/utils.js

@@ -2,6 +2,20 @@ import { FlowService, ScriptService } from '../../gen';
 import { inferArgs } from '../../infer';
 import { emptySchema } from '../../utils';
 import { twMerge } from 'tailwind-merge';
+export const BG_PREFIX = 'bg_';
+export function migrateApp(app) {
+    app.hiddenInlineScripts.forEach((x) => {
+        if (x.type == undefined) {
+            //@ts-ignore
+            x.type = 'runnableByName';
+        }
+        //TODO: remove after migration is done
+        if (x.doNotRecomputeOnInputChanged != undefined) {
+            x.recomputeOnInputChanged = !x.doNotRecomputeOnInputChanged;
+            x.doNotRecomputeOnInputChanged = undefined;
+        }
+    });
+}
 export function allItems(grid, subgrids) {
     if (subgrids == undefined) {
         return grid;
@@ -14,14 +28,14 @@ export async function loadSchema(workspace, path, runType) {
             workspace,
             path
         });
-        return script.schema;
+        return { schema: script.schema, summary: script.summary };
     }
     else if (runType === 'flow') {
         const flow = await FlowService.getFlowByPath({
             workspace,
             path
         });
-        return flow.schema;
+        return { schema: flow.schema, summary: flow.summary };
     }
     else {
         const script = await ScriptService.getHubScriptByPath({
@@ -33,7 +47,7 @@ export async function loadSchema(workspace, path, runType) {
             script.schema = emptySchema();
         }
         await inferArgs(script.language, script.content, script.schema);
-        return script.schema;
+        return { schema: script.schema, summary: script.summary };
     }
 }
 export function schemaToInputsSpec(schema, defaultUserInput) {
@@ -48,6 +62,13 @@ export function schemaToInputsSpec(schema, defaultUserInput) {
             fieldType: property.type,
             format: property.format
         };
+        if (Array.isArray(property.enum)) {
+            accu[key] = {
+                ...accu[key],
+                selectOptions: property.enum,
+                fieldType: 'select'
+            };
+        }
         return accu;
     }, {});
 }
@@ -119,7 +140,7 @@ export function toStatic(app, staticExporter, summary) {
         }
     });
     newApp.hiddenInlineScripts?.forEach((x, i) => {
-        x.noBackendValue = staticExporter[`bg_` + i]();
+        x.noBackendValue = staticExporter[BG_PREFIX + i]();
     });
     return { app: newApp, summary };
 }
@@ -171,7 +192,7 @@ export function toPascalCase(text) {
     return text.replace(/(^\w|-\w)/g, clearAndUpper);
 }
 export function toKebabCase(text) {
-    return text.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    return text.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
 }
 export function concatCustomCss(appCss, componentCss) {
     if (!componentCss)
@@ -212,3 +233,22 @@ export function tailwindVerticalAlignment(alignment) {
     };
     return classes[alignment];
 }
+export const TailwindClassPatterns = {
+    bg: /bg-(?:[^-\s]+-)?(?:[^-\s]+)/g,
+    height: /(h-[^\s]+)/g,
+    width: /(w-[^\s]+)/g
+};
+export function hasTailwindClass(classes, pattern) {
+    return Boolean(classes?.match(pattern));
+}
+export function transformBareBase64IfNecessary(source) {
+    if (!source) {
+        return source;
+    }
+    if (source.startsWith('data:') || !source.includes(',')) {
+        return source;
+    }
+    else {
+        return `data:application/octet-stream;base64,${source}`;
+    }
+}

package/package/components/common/alert/Alert.svelte

@@ -1,9 +1,12 @@
 <script>import { classNames } from '../../../utils';
 import { faCheckCircle, faInfoCircle, faWarning } from '@fortawesome/free-solid-svg-icons';
 import Icon from 'svelte-awesome';
+import Tooltip from '../../Tooltip.svelte';
 export let type = 'info';
 export let title;
 export let notRounded = false;
+export let tooltip = '';
+export let documentationLink = undefined;
 export let size = 'sm';
 const icons = {
     info: faInfoCircle,
@@ -60,7 +63,9 @@ const classes = {
 					classes[type].titleClass
 				)}
 			>
-				{title}
+				{title}&nbsp;{#if tooltip != '' || documentationLink}
+				<Tooltip {documentationLink} scale={0.9}>{tooltip}</Tooltip>
+			{/if}
 			</span>
 			<div
 				class={classNames(

package/package/components/common/alert/Alert.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         type?: AlertType | undefined;
         title: string;
         notRounded?: boolean | undefined;
+        tooltip?: string | undefined;
+        documentationLink?: string | undefined;
         size?: "xs" | "sm" | undefined;
     };
     events: {

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 z-50 flex w-full h-full">
-	<MenuButton class="h-full w-full px-2">
+<Menu let:open as="div" class="relative hover:z-50 flex w-full h-full">
+	<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

@@ -8,6 +8,7 @@ export let inputClass = '';
 export let wrapperClass = '';
 export let buttonClass = '';
 const dispatch = createEventDispatcher();
+let isHovered = false;
 $: isNumeric = ['number', 'range'].includes(type);
 $: dispatch('change', value);
 function handleInput(e) {
@@ -16,9 +17,15 @@ function handleInput(e) {
 function clear() {
     value = '';
 }
+$: if (value === undefined)
+    value = '';
 </script>
 
-<div class="relative grow {wrapperClass}">
+<div
+	class="relative grow {wrapperClass}"
+	on:mouseenter={() => (isHovered = true)}
+	on:mouseleave={() => (isHovered = false)}
+>
 	{#if type === 'textarea'}
 		<textarea
 			{value}
@@ -27,6 +34,7 @@ function clear() {
 			class="resize-y duration-200 {inputClass}"
 			{...$$restProps}
 			on:input={handleInput}
+			on:keydown|stopPropagation
 			on:focus
 			on:blur
 		/>
@@ -35,21 +43,23 @@ 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
 		/>
 	{/if}
-	{#if value}
+	{#if value && isHovered}
 		<button
-			transition:fade|local={{ duration: 100 }}
-			class="absolute z-10 top-1.5 right-1 rounded-full p-1 bg-white/60 duration-200 hover:bg-gray-200 {buttonClass}"
+			transition:fade|local={{ duration: 80 }}
+			class="absolute z-10 top-[9.5px] right-2 rounded-full p-0.5 text-white bg-gray-300
+			duration-200 hover:bg-gray-600 focus:bg-gray-600 {buttonClass}"
 			aria-label="Clear"
 			on:click|preventDefault|stopPropagation={clear}
 		>
-			<X size={14} />
+			<X size={11} class="" />
 		</button>
 	{/if}
 	<slot />

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>;