windmill-components 1.82.6 → 1.82.7

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;
 export let show = false;
+export let wrapperClasses = '';
+export let popupClasses = '';
+export let transitionDuration = 100;
 let menu;
 export let placement = 'bottom-start';
 function handleOutsideClick(event) {
@@ -40,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={() => {
@@ -56,10 +60,12 @@ const placementsClasses = {
 	</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

@@ -3,7 +3,10 @@ declare const __propDef: {
     props: {
         noMinW?: boolean | undefined;
         show?: boolean | undefined;
-        placement?: "top-start" | "top-end" | "top-center" | "bottom-start" | "bottom-end" | "bottom-center" | 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 {};

package/components/flows/map/MapItem.svelte

@@ -63,9 +63,9 @@ let openMenu2 = undefined;
 	<div class="relative">
 		{#if moving == mod.id}
 			<div class="absolute z-10 right-20 top-0.5 center-center">
-				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border"
-					>Cancel move</Button
-				>
+				<Button color="dark" on:click={() => dispatch('move')} size="xs" variant="border">
+					Cancel move
+				</Button>
 			</div>
 		{/if}
 

package/components/scriptEditor/LogPanel.svelte

@@ -76,10 +76,10 @@ function closeDrawer() {
 						/>
 					</Pane>
 					<Pane>
-						{#if previewJob != undefined && 'result' in previewJob && previewJob.result != undefined}
-							<pre class="relative w-full h-full p-2"
+						{#if previewJob != undefined && 'result' in previewJob}
+							<div class="relative w-full h-full p-2"
 								><DisplayResult result={previewJob.result} />
-						</pre>
+							</div>
 						{:else}
 							<div class="text-sm text-gray-600 p-2">
 								{#if previewIsLoading}

package/infer.js

@@ -113,6 +113,9 @@ function argSigToJsonSchemaType(t, oldS) {
         else if (t.list === 'bytes') {
             newS.items = { type: 'string', contentEncoding: 'base64' };
         }
+        else if (t.list && typeof t.list == 'object' && `object` in t.list) {
+            newS.items = { type: 'object' };
+        }
         else {
             newS.items = { type: 'string' };
         }
@@ -122,12 +125,14 @@ function argSigToJsonSchemaType(t, oldS) {
     }
     if (oldS.type != newS.type) {
         for (const prop of Object.getOwnPropertyNames(newS)) {
-            if (prop != "description") {
+            if (prop != 'description') {
                 delete oldS[prop];
             }
         }
     }
+    let oldDescription = oldS.description;
     Object.assign(oldS, newS);
+    oldS.description = oldDescription;
     if (oldS.format?.startsWith('resource-') && newS.type != 'object') {
         oldS.format = undefined;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "windmill-components",
-	"version": "1.82.6",
+	"version": "1.82.7",
 	"devDependencies": {
 		"@playwright/test": "^1.31.1",
 		"@sveltejs/adapter-static": "^1.0.0",
@@ -31,6 +31,7 @@
 		"prettier": "^2.8.3",
 		"prettier-plugin-svelte": "^2.9.0",
 		"simple-svelte-autocomplete": "^2.5.1",
+		"style-to-object": "^0.4.1",
 		"stylelint-config-recommended": "^9.0.0",
 		"svelte": "^3.55.1",
 		"svelte-awesome": "^3.0.0",
@@ -262,7 +263,10 @@
 		"./components/apps/editor/componentsPanel/CssProperty.svelte": "./components/apps/editor/componentsPanel/CssProperty.svelte",
 		"./components/apps/editor/componentsPanel/CssSettings.svelte": "./components/apps/editor/componentsPanel/CssSettings.svelte",
 		"./components/apps/editor/componentsPanel/ListItem.svelte": "./components/apps/editor/componentsPanel/ListItem.svelte",
+		"./components/apps/editor/componentsPanel/QuickStyleMenu.svelte": "./components/apps/editor/componentsPanel/QuickStyleMenu.svelte",
+		"./components/apps/editor/componentsPanel/QuickStyleProperty.svelte": "./components/apps/editor/componentsPanel/QuickStyleProperty.svelte",
 		"./components/apps/editor/componentsPanel/componentDefaultProps": "./components/apps/editor/componentsPanel/componentDefaultProps.js",
+		"./components/apps/editor/componentsPanel/quickStyleProperties": "./components/apps/editor/componentsPanel/quickStyleProperties.js",
 		"./components/apps/editor/componentsPanel/store": "./components/apps/editor/componentsPanel/store.js",
 		"./components/apps/editor/contextPanel/ComponentOutput.svelte": "./components/apps/editor/contextPanel/ComponentOutput.svelte",
 		"./components/apps/editor/contextPanel/ComponentOutputViewer.svelte": "./components/apps/editor/contextPanel/ComponentOutputViewer.svelte",
@@ -270,7 +274,6 @@
 		"./components/apps/editor/contextPanel/SubGridOutput.svelte": "./components/apps/editor/contextPanel/SubGridOutput.svelte",
 		"./components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte": "./components/apps/editor/contextPanel/components/BackgroundScriptOutput.svelte",
 		"./components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte": "./components/apps/editor/contextPanel/components/BackgroundScriptsOutput.svelte",
-		"./components/apps/editor/contextPanel/components/MinMaxButton.svelte": "./components/apps/editor/contextPanel/components/MinMaxButton.svelte",
 		"./components/apps/editor/contextPanel/components/OutputHeader.svelte": "./components/apps/editor/contextPanel/components/OutputHeader.svelte",
 		"./components/apps/editor/contextPanel/components/TableActionOutput.svelte": "./components/apps/editor/contextPanel/components/TableActionOutput.svelte",
 		"./components/apps/editor/contextPanel/components/TableActionsOutput.svelte": "./components/apps/editor/contextPanel/components/TableActionsOutput.svelte",
@@ -295,6 +298,7 @@
 		"./components/apps/editor/settingsPanel/PickInlineScript.svelte": "./components/apps/editor/settingsPanel/PickInlineScript.svelte",
 		"./components/apps/editor/settingsPanel/Recompute.svelte": "./components/apps/editor/settingsPanel/Recompute.svelte",
 		"./components/apps/editor/settingsPanel/SelectedRunnable.svelte": "./components/apps/editor/settingsPanel/SelectedRunnable.svelte",
+		"./components/apps/editor/settingsPanel/StylePanel.svelte": "./components/apps/editor/settingsPanel/StylePanel.svelte",
 		"./components/apps/editor/settingsPanel/SubTypeEditor.svelte": "./components/apps/editor/settingsPanel/SubTypeEditor.svelte",
 		"./components/apps/editor/settingsPanel/TableActionLabel.svelte": "./components/apps/editor/settingsPanel/TableActionLabel.svelte",
 		"./components/apps/editor/settingsPanel/TableActions.svelte": "./components/apps/editor/settingsPanel/TableActions.svelte",
@@ -313,6 +317,9 @@
 		"./components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte": "./components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte",
 		"./components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte": "./components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte",
 		"./components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte": "./components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte",
+		"./components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte": "./components/apps/editor/settingsPanel/secondaryMenu/SecondaryMenu.svelte",
+		"./components/apps/editor/settingsPanel/secondaryMenu": "./components/apps/editor/settingsPanel/secondaryMenu/index.js",
+		"./components/apps/editor/settingsPanel/secondaryMenu/menuStore": "./components/apps/editor/settingsPanel/secondaryMenu/menuStore.js",
 		"./components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte": "./components/apps/editor/settingsPanel/triggerLists/BackgroundScriptTriggerList.svelte",
 		"./components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte": "./components/apps/editor/settingsPanel/triggerLists/ComponentTriggerList.svelte",
 		"./components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte": "./components/apps/editor/settingsPanel/triggerLists/TriggerBadgesList.svelte",
@@ -343,6 +350,7 @@
 		"./components/common/button/ButtonPopupItem.svelte": "./components/common/button/ButtonPopupItem.svelte",
 		"./components/common/button/UndoRedo.svelte": "./components/common/button/UndoRedo.svelte",
 		"./components/common/button/model": "./components/common/button/model.js",
+		"./components/common/clearableInput/ClearableInput.svelte": "./components/common/clearableInput/ClearableInput.svelte",
 		"./components/common/confirmationModal/ConfirmationModal.svelte": "./components/common/confirmationModal/ConfirmationModal.svelte",
 		"./components/common/confirmationModal/UnsavedConfirmationModal.svelte": "./components/common/confirmationModal/UnsavedConfirmationModal.svelte",
 		"./components/common/confirmationModal/dirtyStore": "./components/common/confirmationModal/dirtyStore.js",
@@ -361,6 +369,7 @@
 		"./components/common/languageIcons": "./components/common/languageIcons/index.js",
 		"./components/common/menu/Menu.svelte": "./components/common/menu/Menu.svelte",
 		"./components/common/menu/MenuItem.svelte": "./components/common/menu/MenuItem.svelte",
+		"./components/common/modal/AlwaysMountedModal.svelte": "./components/common/modal/AlwaysMountedModal.svelte",
 		"./components/common/modal/Modal.svelte": "./components/common/modal/Modal.svelte",
 		"./components/common/popup/Popup.svelte": "./components/common/popup/Popup.svelte",
 		"./components/common/skeleton/Skeleton.svelte": "./components/common/skeleton/Skeleton.svelte",

package/utils.d.ts

@@ -116,3 +116,4 @@ export declare function debounce(func: (...args: any[]) => any, wait: number): (
 export declare function throttle<T>(func: (...args: any[]) => T, wait: number): (...args: any[]) => void;
 export declare function isMac(): boolean;
 export declare function getModifierKey(): string;
+export declare function isValidHexColor(color: string): boolean;

package/utils.js

@@ -607,3 +607,6 @@ export function isMac() {
 export function getModifierKey() {
     return isMac() ? '⌘' : 'CTRL';
 }
+export function isValidHexColor(color) {
+    return /^#(([A-F0-9]{2}){3,4}|[A-F0-9]{3})$/i.test(color);
+}

package/components/apps/editor/contextPanel/components/MinMaxButton.svelte

@@ -1,25 +0,0 @@
-<script>import Button from '../../../../common/button/Button.svelte';
-import { Maximize, Minimize } from 'lucide-svelte';
-export let expanded = false;
-</script>
-
-<Button
-	on:click={() => {
-		expanded = !expanded
-	}}
-	color="light"
-	size="xs"
-	variant="border"
->
-	{#if !expanded}
-		<div class="flex flex-row gap-2">
-			<Maximize size="14" />
-			Expand all
-		</div>
-	{:else}
-		<div class="flex flex-row gap-2">
-			<Minimize size="14" />
-			Collapse all
-		</div>
-	{/if}
-</Button>

package/components/apps/editor/contextPanel/components/MinMaxButton.svelte.d.ts

@@ -1,16 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        expanded?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type MinMaxButtonProps = typeof __propDef.props;
-export type MinMaxButtonEvents = typeof __propDef.events;
-export type MinMaxButtonSlots = typeof __propDef.slots;
-export default class MinMaxButton extends SvelteComponentTyped<MinMaxButtonProps, MinMaxButtonEvents, MinMaxButtonSlots> {
-}
-export {};