windmill-components 1.305.4 → 1.305.6

package/package/components/apps/components/buttons/AppButton.svelte

@@ -45,17 +45,17 @@ if (controls) {
 let runnableComponent;
 let beforeIconComponent;
 let afterIconComponent;
-$: resolvedConfig.beforeIcon && handleBeforeIcon();
-$: resolvedConfig.afterIcon && handleAfterIcon();
+$: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();
+$: resolvedConfig.afterIcon && afterIconComponent && handleAfterIcon();
 let confirmedCallback = undefined;
 async function handleBeforeIcon() {
     if (resolvedConfig.beforeIcon) {
-        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon);
+        beforeIconComponent = await loadIcon(resolvedConfig.beforeIcon, beforeIconComponent, 14, undefined, undefined);
     }
 }
 async function handleAfterIcon() {
     if (resolvedConfig.afterIcon) {
-        afterIconComponent = await loadIcon(resolvedConfig.afterIcon);
+        afterIconComponent = await loadIcon(resolvedConfig.afterIcon, afterIconComponent, 14, undefined, undefined);
     }
 }
 onDestroy(() => {
@@ -177,17 +177,17 @@ let css = initCss($app.css?.buttoncomponent, customCss);
 				on:click={handleClick}
 				size={resolvedConfig.size}
 				color={resolvedConfig.color}
-				startIcon={{
-					icon: resolvedConfig.beforeIcon ? beforeIconComponent : undefined
-				}}
-				endIcon={{
-					icon: resolvedConfig.afterIcon ? afterIconComponent : undefined
-				}}
 				{loading}
 			>
+				{#if resolvedConfig.beforeIcon}
+					<div class="min-w-4" bind:this={beforeIconComponent} />
+				{/if}
 				{#if resolvedConfig.label?.toString() && resolvedConfig.label?.toString()?.length > 0}
 					<div>{resolvedConfig.label.toString()}</div>
 				{/if}
+				{#if resolvedConfig.afterIcon}
+					<div class="min-w-4" bind:this={afterIconComponent} />
+				{/if}
 			</Button>
 		{/key}
 	</AlignWrapper>

package/package/components/apps/components/display/AppIcon.svelte

@@ -19,9 +19,11 @@ let resolvedConfig = initConfig(components['iconcomponent'].initialData.configur
 //used so that we can count number of outputs setup for first refresh
 initOutput($worldStore, id, {});
 let iconComponent;
-$: handleIcon(resolvedConfig.icon);
-async function handleIcon(i) {
-    iconComponent = i ? await loadIcon(i) : undefined;
+$: handleIcon(resolvedConfig, iconComponent);
+async function handleIcon(conf, comp) {
+    if (conf.icon && comp) {
+        await loadIcon(conf.icon, iconComponent, conf.size, conf.strokeWidth, conf.color);
+    }
 }
 let css = initCss($app.css?.iconcomponent, customCss);
 </script>
@@ -54,12 +56,9 @@ let css = initCss($app.css?.iconcomponent, customCss);
 	class={twMerge(css?.container?.class, 'wm-icon-container')}
 	style={css?.container?.style ?? ''}
 >
-	{#if resolvedConfig.icon && iconComponent}
-		<svelte:component
-			this={iconComponent}
-			size={resolvedConfig.size || 24}
-			color={resolvedConfig.color || 'currentColor'}
-			strokeWidth={resolvedConfig.strokeWidth || 2}
+	{#if resolvedConfig.icon}
+		<div
+			bind:this={iconComponent}
 			class={twMerge(css?.icon?.class, 'wm-icon')}
 			style={css?.icon?.style ?? ''}
 		/>

package/package/components/apps/components/icon.d.ts

@@ -1 +1 @@
-export declare function loadIcon(name: string): Promise<any>;
+export declare function loadIcon(name: string, parent: HTMLElement, size: number | undefined, strokeWidth: number | undefined, color: string | undefined): Promise<any>;

package/package/components/apps/components/icon.js

@@ -5,19 +5,28 @@ function toKebabCase(str) {
         .replace(/([a-z])([0-9])/g, '$1-$2') // Separate letters from digits
         .toLowerCase();
 }
-export async function loadIcon(name) {
-    let iconComponent;
+export async function loadIcon(name, parent, size, strokeWidth, color) {
     try {
         if (name) {
-            iconComponent = (await import(`../../../../../node_modules/lucide-svelte/dist/svelte/icons/${toKebabCase(name)}.svelte`)).default;
-            return iconComponent;
+            await fetch(`https://cdn.jsdelivr.net/npm/lucide-static@0.367.0/icons/${toKebabCase(name)}.svg`)
+                .then((response) => response.text())
+                .then((svg) => (parent.innerHTML = svg));
+            let elem = parent.children?.[0];
+            if (elem) {
+                elem.setAttribute('width', size?.toString() ?? '24');
+                elem.setAttribute('height', size?.toString() ?? '24');
+                if (strokeWidth) {
+                    elem.setAttribute('stroke-width', strokeWidth.toString());
+                }
+                if (color) {
+                    elem.setAttribute('stroke', color);
+                }
+            }
         }
         else {
-            iconComponent = undefined;
         }
     }
     catch (error) {
         console.error(error);
-        iconComponent = undefined;
     }
 }

package/package/components/apps/editor/settingsPanel/inputEditor/IconSelectInput.svelte

@@ -1,5 +1,6 @@
 <script>import { Loader2 } from 'lucide-svelte';
 import { ClearableInput, Popup } from '../../../../common';
+import { AllIcons } from './icons';
 export let componentInput;
 let loading = false;
 let items;
@@ -7,21 +8,16 @@ let filteredItems;
 let search = '';
 $: if (search) {
     filteredItems = items.filter((item) => {
-        return item.label.toLowerCase().includes(search.toLowerCase());
+        return item.toLowerCase().includes(search.toLowerCase());
     });
 }
 else {
     filteredItems = items;
 }
 async function getData() {
-    if (items) {
-    }
     loading = true;
     // @ts-ignore
-    const data = await import('lucide-svelte/icons');
-    filteredItems = items = Object.entries(data)
-        .filter(([key]) => !(key.endsWith('Icon') || key.startsWith('Lucide')))
-        .map(([key, icon]) => ({ label: key, icon }));
+    items = AllIcons;
     loading = false;
 }
 function select(label) {
@@ -71,7 +67,7 @@ function select(label) {
 					class="col-span-4 mb-2"
 				/>
 				<div class="grid gap-1 grid-cols-4 max-h-[300px] overflow-auto">
-					{#each filteredItems as { label, icon }}
+					{#each filteredItems as label}
 						<button
 							type="button"
 							title={label}
@@ -83,7 +79,10 @@ function select(label) {
 									hover:bg-gray-100 focus:bg-gray-100 rounded duration-200 dark:hover:bg-frost-900 dark:focus:bg-frost-900
 									{label === componentInput.value ? 'text-blue-600 bg-blue-50 pointer-events-none' : ''}"
 						>
-							<svelte:component this={icon} size={22} />
+							<img
+								loading="lazy"
+								src="https://cdn.jsdelivr.net/npm/lucide-static@0.367.0/icons/{label}.svg"
+							/>
 							<span class="inline-block w-full text-[10px] ellipsize pt-0.5">
 								{label}
 							</span>

package/package/components/apps/editor/settingsPanel/inputEditor/icons.d.ts

@@ -0,0 +1 @@
+export declare const AllIcons: string[];