windmill-components 1.537.1 → 1.542.4

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';
@@ -88,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)}
@@ -149,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"
@@ -164,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;