windmill-components 1.532.0 → 1.542.4

package/package/components/home/TreeViewRoot.svelte.d.ts

@@ -1,3 +1,11 @@
+import { type ItemType } from './treeViewUtils';
+interface Props {
+    collapseAll: boolean;
+    showCode: (path: string, summary: string) => void;
+    nbDisplayed: number;
+    items: ItemType[] | undefined;
+    isSearching?: boolean;
+}
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -11,20 +19,14 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const TreeViewRoot: $$__sveltets_2_IsomorphicComponent<{
-    collapseAll: boolean;
-    showCode: (path: string, summary: string) => void;
-    nbDisplayed: number;
-    items: any[] | undefined;
-    isSearching?: boolean;
-}, {
-    scriptChanged: CustomEvent<any>;
-    flowChanged: CustomEvent<any>;
-    appChanged: CustomEvent<any>;
-    rawAppChanged: CustomEvent<any>;
-    reload: CustomEvent<any>;
+declare const TreeViewRoot: $$__sveltets_2_IsomorphicComponent<Props, {
+    scriptChanged: any;
+    flowChanged: any;
+    appChanged: any;
+    rawAppChanged: any;
+    reload: any;
 } & {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
+}, {}, {}, "nbDisplayed">;
 type TreeViewRoot = InstanceType<typeof TreeViewRoot>;
 export default TreeViewRoot;

package/package/components/icons/GitIcon.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">"use strict";
-let { height = '24px', width = '24px' } = $props();
+let { height, width, size = 24 } = $props();
+let derivedWidth = $derived(width || `${size}px`);
+let derivedHeight = $derived(height || `${size}px`);
 </script>
 
-<svg {width} {height} viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg
+	width={derivedWidth}
+	height={derivedHeight}
+	viewBox="0 0 100 100"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+>
 	<path
 		fill="#F05133"
 		d="M92.71 44.408 52.591 4.291c-2.31-2.311-6.057-2.311-8.369 0l-8.33 8.332L46.459 23.19c2.456-.83 5.272-.273 7.229 1.685 1.969 1.97 2.521 4.81 1.67 7.275l10.186 10.185c2.465-.85 5.307-.3 7.275 1.671 2.75 2.75 2.75 7.206 0 9.958-2.752 2.751-7.208 2.751-9.961 0-2.068-2.07-2.58-5.11-1.531-7.658l-9.5-9.499v24.997c.67.332 1.303.774 1.861 1.332 2.75 2.75 2.75 7.206 0 9.959-2.75 2.749-7.209 2.749-9.957 0-2.75-2.754-2.75-7.21 0-9.959.68-.679 1.467-1.193 2.307-1.537v-25.23c-.84-.344-1.625-.853-2.307-1.537-2.083-2.082-2.584-5.14-1.516-7.698L31.798 16.715 4.288 44.222c-2.311 2.313-2.311 6.06 0 8.371l40.121 40.118c2.31 2.311 6.056 2.311 8.369 0L92.71 52.779c2.311-2.311 2.311-6.06 0-8.371z"

package/package/components/icons/GitIcon.svelte.d.ts

@@ -1,6 +1,7 @@
 interface Props {
     height?: string;
     width?: string;
+    size?: number;
 }
 declare const GitIcon: import("svelte").Component<Props, {}, "">;
 type GitIcon = ReturnType<typeof GitIcon>;

package/package/components/meltComponents/MeltButton.svelte.d.ts

@@ -28,7 +28,7 @@ declare const MeltButton: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_Prop
 }, {
     default: {};
 }>, {
-    click: MouseEvent;
+    click: PointerEvent;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {

package/package/components/meltComponents/Popover.svelte

@@ -8,7 +8,7 @@ const activePopover = writable({
 <script lang="ts">import { createPopover, createSync, melt } from '@melt-ui/svelte';
 import { fade } from 'svelte/transition';
 import { X, Minimize2, Maximize2 } from 'lucide-svelte';
-import { pointerDownOutside } from '../../utils';
+import { debounce, pointerDownOutside } from '../../utils';
 import { twMerge } from 'tailwind-merge';
 import { createEventDispatcher } from 'svelte';
 import { Button } from '../common';
@@ -18,6 +18,7 @@ export let displayArrow = false;
 export let placement = 'bottom';
 export let disablePopup = false;
 export let openOnHover = false;
+export let debounceDelay = 0;
 export let floatingConfig = undefined;
 export let usePointerDownOutside = false;
 export let closeOnOutsideClick = true;
@@ -33,6 +34,12 @@ export let disableFocusTrap = false;
 export let escapeBehavior = 'close';
 let fullScreen = false;
 const dispatch = createEventDispatcher();
+function clearTimers() {
+    clearDebounceClose();
+}
+// Cleanup timers on component destruction
+import { onDestroy } from 'svelte';
+onDestroy(clearTimers);
 const { elements: { trigger, content, arrow, close: closeElement, overlay }, states, options: { closeOnOutsideClick: closeOnOutsideClickOption, positioning }, ids: { content: popoverId } } = createPopover({
     forceVisible: true,
     portal,
@@ -89,6 +96,7 @@ export function updatePositioning(pos) {
 async function getMenuElements() {
     return Array.from(document.querySelectorAll('[data-popover]'));
 }
+let { debounced: debounceClose, clearDebounce: clearDebounceClose } = debounce(() => openOnHover && close(), debounceDelay);
 </script>
 
 <button
@@ -96,8 +104,13 @@ async function getMenuElements() {
 	{...$trigger} use:$trigger.action
 	aria-label="Popup button"
 	disabled={disablePopup || disabled}
-	on:mouseenter={() => (openOnHover ? open() : null)}
-	on:mouseleave={() => (openOnHover ? close() : null)}
+	on:mouseenter={() => {
+		if (openOnHover) {
+			open()
+			clearDebounceClose()
+		}
+	}}
+	on:mouseleave={debounceClose}
 	use:pointerDownOutside={{
 		capture: true,
 		stopPropagation: false,
@@ -121,6 +134,13 @@ async function getMenuElements() {
 
 {#if isOpen && !disablePopup}
 	<div
+		on:mouseenter={() => {
+			if (openOnHover) {
+				open()
+				clearDebounceClose()
+			}
+		}}
+		on:mouseleave={debounceClose}
 		{...$content} use:$content.action
 		transition:fade={{ duration: 0 }}
 		class={twMerge(

package/package/components/meltComponents/Popover.svelte.d.ts

@@ -21,6 +21,7 @@ declare const Popover: $$__sveltets_2_IsomorphicComponent<{
     placement?: Placement | undefined;
     disablePopup?: boolean | undefined;
     openOnHover?: boolean | undefined;
+    debounceDelay?: number | undefined;
     floatingConfig?: any | undefined;
     usePointerDownOutside?: boolean | undefined;
     closeOnOutsideClick?: boolean | undefined;
@@ -40,7 +41,7 @@ declare const Popover: $$__sveltets_2_IsomorphicComponent<{
     isOpened?: (() => boolean) | undefined;
     updatePositioning?: ((pos: FloatingConfig) => void) | undefined;
 }, {
-    click: MouseEvent;
+    click: PointerEvent;
     openChange: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

package/package/components/monacoLanguagesOptions.d.ts

@@ -0,0 +1,3 @@
+export declare function setMonacoJsonOptions(): void;
+export declare function setMonacoTypescriptOptions(): void;
+export declare function setMonacoJavascriptOptions(): void;

package/package/components/monacoLanguagesOptions.js

@@ -0,0 +1,109 @@
+import { languages } from 'monaco-editor';
+import processStdContent from '../process.d.ts.txt?raw';
+let jsonInitialized = false;
+export function setMonacoJsonOptions() {
+    if (jsonInitialized)
+        return;
+    jsonInitialized = true;
+    languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: true,
+        allowComments: false,
+        schemas: [],
+        enableSchemaRequest: true
+    });
+    languages.json.jsonDefaults.setModeConfiguration({
+        documentRangeFormattingEdits: false,
+        documentFormattingEdits: true,
+        hovers: true,
+        completionItems: true,
+        documentSymbols: true,
+        tokens: true,
+        colors: true,
+        foldingRanges: true,
+        selectionRanges: true,
+        diagnostics: true
+    });
+}
+let typescriptInitialized = false;
+export function setMonacoTypescriptOptions() {
+    if (typescriptInitialized)
+        return;
+    typescriptInitialized = true;
+    languages.typescript.typescriptDefaults.addExtraLib(processStdContent, 'process.d.ts');
+    languages.typescript.typescriptDefaults.setModeConfiguration({
+        completionItems: true,
+        hovers: true,
+        documentSymbols: true,
+        definitions: true,
+        references: true,
+        documentHighlights: true,
+        rename: true,
+        diagnostics: true,
+        documentRangeFormattingEdits: true,
+        signatureHelp: true,
+        onTypeFormattingEdits: true,
+        codeActions: true,
+        inlayHints: true
+    });
+    // languages.typescript.javascriptDefaults.setEagerModelSync(true)
+    languages.typescript.typescriptDefaults.setEagerModelSync(true);
+    // languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+    // 	noSemanticValidation: false,
+    // 	noSyntaxValidation: false,
+    // 	noSuggestionDiagnostics: false,
+    // 	diagnosticCodesToIgnore: [1108]
+    // })
+    languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+        noSuggestionDiagnostics: false,
+        diagnosticCodesToIgnore: [1108, 7006, 7034, 7019, 7005]
+    });
+    languages.typescript.typescriptDefaults.setCompilerOptions({
+        target: languages.typescript.ScriptTarget.Latest,
+        allowNonTsExtensions: true,
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+        completionItems: true,
+        hovers: true,
+        documentSymbols: true,
+        definitions: true,
+        references: true,
+        documentHighlights: true,
+        rename: true,
+        diagnostics: true,
+        documentRangeFormattingEdits: true,
+        signatureHelp: true,
+        onTypeFormattingEdits: true,
+        codeActions: true,
+        inlayHints: true,
+        checkJs: true,
+        allowJs: true,
+        noUnusedLocals: true,
+        strict: true,
+        noLib: false,
+        allowImportingTsExtensions: true,
+        allowSyntheticDefaultImports: true,
+        moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs,
+        jsx: languages.typescript.JsxEmit.React
+    });
+}
+let javascriptInitialized = false;
+export function setMonacoJavascriptOptions() {
+    if (javascriptInitialized)
+        return;
+    javascriptInitialized = true;
+    languages.typescript.javascriptDefaults.setCompilerOptions({
+        target: languages.typescript.ScriptTarget.Latest,
+        allowNonTsExtensions: true,
+        noSemanticValidation: false,
+        noLib: true,
+        moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs
+    });
+    languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: false,
+        noSyntaxValidation: false,
+        noSuggestionDiagnostics: false,
+        diagnosticCodesToIgnore: [1108]
+    });
+}

package/package/components/propertyPicker/ObjectViewer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import ObjectViewer from './ObjectViewer.svelte';
 import { copyToClipboard, truncate } from '../../utils';
-import { createEventDispatcher, untrack } from 'svelte';
+import { createEventDispatcher, tick, untrack } from 'svelte';
 import { computeKey, keepByKeyOrValue } from './utils';
 import { NEVER_TESTED_THIS_FAR } from '../flows/models';
 import Portal from '../Portal.svelte';
@@ -40,6 +40,11 @@ export function getTypeAsString(arg) {
     if (Object.keys(arg).length === 1 && Object.keys(arg).includes('s3')) {
         return 's3object';
     }
+    if (Object.keys(arg).length === 2 &&
+        Object.keys(arg).includes('s3') &&
+        Object.keys(arg).includes('filename')) {
+        return 's3object';
+    }
     return typeof arg;
 }
 function collapse() {
@@ -83,6 +88,7 @@ let openBracket = $derived(isArray ? '[' : '{');
 let closeBracket = $derived(isArray ? ']' : '}');
 let keyLimit = $derived(isArray ? 5 : 100);
 let fullyCollapsed = $derived(keys.length > 1 && collapsed);
+let searchInput = $state(undefined);
 </script>
 
 {#snippet renderScalar(k: string, v: any)}
@@ -123,9 +129,12 @@ let fullyCollapsed = $derived(keys.length > 1 && collapsed);
 	</span>
 {/snippet}
 
-<Portal name="object-viewer">
-	<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
-</Portal>
+{#if getTypeAsString(jsonFiltered) === 's3object'}
+	<Portal name="object-viewer">
+		<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />
+	</Portal>
+{/if}
+
 {#if level == 0}
 	<div class="float-right">
 		{#if searchOpen}
@@ -141,6 +150,7 @@ let fullyCollapsed = $derived(keys.length > 1 && collapsed);
 					class="!h-6 !text-2xs mt-0.5"
 					bind:value={search}
 					placeholder="Search..."
+					bind:this={searchInput}
 				/>
 				<button
 					class="absolute right-2 top-1 rounded-full hover:bg-surface-hover focus:bg-surface-hover text-secondary p-0.5"
@@ -156,7 +166,10 @@ let fullyCollapsed = $derived(keys.length > 1 && collapsed);
 				iconOnly
 				btnClasses="text-tertiary hover:text-primary"
 				startIcon={{ icon: Search }}
-				on:click={() => (searchOpen = true)}
+				on:click={() => {
+					searchOpen = true
+					tick().then(() => searchInput?.focus())
+				}}
 			></Button>
 		{/if}
 	</div>

package/package/components/propertyPicker/PropPicker.svelte

@@ -149,7 +149,7 @@ async function updateState() {
     await filterPickableProperties();
     await updateCollapsable();
 }
-$: search, $inputMatches, $propPickerConfig, pickableProperties, updateState();
+$: (search, $inputMatches, $propPickerConfig, pickableProperties, updateState());
 onDestroy(() => {
     clearTimeout(timeout);
 });

package/package/components/propertyPicker/utils.js

@@ -1,19 +1,26 @@
 function filterObject(obj, key, filterValue) {
+    const keyLower = key.toLowerCase();
     if (typeof obj !== 'object' || obj === null) {
         if (!filterValue || obj === undefined || obj === null) {
             return undefined;
         }
         else {
-            return obj.toString().includes(key) ? obj : undefined;
+            return obj.toString().toLowerCase().includes(keyLower) ? obj : undefined;
         }
     }
     else if (Array.isArray(obj)) {
         let a = obj
-            .map((k, o) => typeof o == 'object'
-            ? filterObject(o, key, filterValue)
-            : String(k - 1).includes(key)
-                ? o
-                : undefined)
+            .map((o, k) => {
+            // match index
+            if (String(k).toLowerCase().includes(keyLower)) {
+                return o;
+            }
+            return typeof o == 'object'
+                ? filterObject(o, key, filterValue)
+                : filterValue && String(o).toLowerCase().includes(keyLower)
+                    ? o
+                    : undefined;
+        })
             .filter((v) => v !== undefined);
         if (a.length === 0) {
             return undefined;
@@ -24,7 +31,7 @@ function filterObject(obj, key, filterValue) {
     }
     else {
         let o = Object.fromEntries(Object.entries(obj)
-            .map(([k, v]) => (k.includes(key) ? [k, v] : [k, filterObject(v, key, filterValue)]))
+            .map(([k, v]) => k.toLowerCase().includes(keyLower) ? [k, v] : [k, filterObject(v, key, filterValue)])
             .filter(([k, v]) => v !== undefined));
         if (Object.keys(o).length === 0) {
             return undefined;

package/package/components/raw_apps/RawAppInlineScriptEditor.svelte

@@ -186,7 +186,7 @@ let drawerIsOpen = undefined;
 				<DiffEditor
 					open={false}
 					bind:this={diffEditor}
-					class="h-full"
+					className="h-full"
 					automaticLayout
 					fixedOverflowWidgets
 					defaultLang={scriptLangToEditorLang(inlineScript?.language)}