windmill-components 1.309.7 → 1.352.0

package/package/components/apps/components/helpers/eval.js

@@ -1,4 +1,3 @@
-import { isPlainObject } from 'lodash';
 import { sendUserToast } from '../../../../toast';
 export function computeGlobalContext(world, extraContext = {}) {
     return {
@@ -41,35 +40,6 @@ function make_context_evaluator(eval_string, contextKeys, noReturn) {
     functorCache[cacheKey] = r;
     return r;
 }
-function isSerializable(obj) {
-    var isNestedSerializable;
-    function isPlain(val) {
-        return (val == null ||
-            typeof val === 'undefined' ||
-            typeof val === 'string' ||
-            typeof val === 'boolean' ||
-            typeof val === 'number' ||
-            Array.isArray(val) ||
-            isPlainObject(val));
-    }
-    if (!isPlain(obj)) {
-        return false;
-    }
-    for (var property in obj) {
-        if (obj.hasOwnProperty(property)) {
-            if (!isPlain(obj[property])) {
-                return false;
-            }
-            if (typeof obj[property] == 'object') {
-                isNestedSerializable = isSerializable(obj[property]);
-                if (!isNestedSerializable) {
-                    return false;
-                }
-            }
-        }
-    }
-    return true;
-}
 function hashCode(s) {
     var hash = 0, i, chr;
     if (s.length === 0)
@@ -89,12 +59,7 @@ export async function eval_like(text, context = {}, state, editor, controlCompon
             }
             target[key] = value;
             let o = worldStore?.newOutput('state', key, value);
-            if (isSerializable(value)) {
-                o?.set(value, true);
-            }
-            else {
-                o?.set('Not serializable object usable only by frontend scripts', true);
-            }
+            o?.set(value, true);
             return true;
         }
     });

package/package/components/apps/components/inputs/AppDateInput.svelte

@@ -83,7 +83,11 @@ let css = initCss($app.css?.dateinputcomponent, customCss);
 			min={resolvedConfig.minDate}
 			max={resolvedConfig.maxDate}
 			placeholder="Type..."
-			class={twMerge('windmillapp w-full py-1.5 text-sm px-2', css?.input?.class, 'wm-date-input')}
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm px-1 app-editor-input',
+				css?.input?.class,
+				'wm-date-input'
+			)}
 			style={css?.input?.style ?? ''}
 		/>
 	{/if}

package/package/components/apps/components/inputs/AppFileInput.svelte

@@ -10,7 +10,8 @@ export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
-const { app, worldStore, componentControl } = getContext('AppViewerContext');
+export let onFileChange = undefined;
+const { app, worldStore, componentControl, mode, runnableComponents } = getContext('AppViewerContext');
 let acceptedFileTypes = undefined;
 let allowMultiple = undefined;
 let text = undefined;
@@ -28,6 +29,7 @@ async function handleChange(files) {
         });
     }
     outputs?.result.set(files);
+    onFileChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()));
 }
 let css = initCss($app.css?.fileinputcomponent, customCss);
 let fileInput = undefined;
@@ -36,6 +38,14 @@ $componentControl[id] = {
         fileInput?.clearFiles();
     }
 };
+let files = undefined;
+function preFillFiles() {
+    const data = outputs?.result?.peak();
+    if (data && Array.isArray(data) && data.length > 0) {
+        files = data.map((file) => new File([], file?.name));
+    }
+}
+$: outputs.result && files === undefined && $mode === 'dnd' && preFillFiles();
 </script>
 
 {#each Object.keys(css ?? {}) as key (key)}
@@ -67,7 +77,7 @@ $componentControl[id] = {
 <InitializeComponent {id} />
 
 {#if render}
-	<div class="w-full h-full p-1">
+	<div class="w-full h-full">
 		<FileInput
 			bind:this={fileInput}
 			accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}
@@ -80,6 +90,7 @@ $componentControl[id] = {
 			class={twMerge('w-full h-full', css?.container?.class, 'wm-file-input')}
 			style={css?.container?.style}
 			submittedText={submittedFileText}
+			bind:files
 		>
 			{text}
 		</FileInput>

package/package/components/apps/components/inputs/AppFileInput.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         configuration: RichConfigurations;
         customCss?: ComponentCustomCSS<'fileinputcomponent'> | undefined;
         render: boolean;
+        onFileChange?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/inputs/AppMultiSelect.svelte

@@ -17,6 +17,7 @@ export let id;
 export let configuration;
 export let customCss = undefined;
 export let render;
+export let verticalAlignment = undefined;
 const [floatingRef, floatingContent] = createFloatingActions({
     strategy: 'absolute',
     middleware: [offset(5), flip(), shift()]
@@ -79,7 +80,6 @@ $: if (render && portalRef && outerDiv && items?.length > 0) {
     });
 }
 let w = 0;
-let h = 0;
 let open = false;
 </script>
 
@@ -104,68 +104,74 @@ let open = false;
 
 <InitializeComponent {id} />
 
-<AlignWrapper {render} hFull>
+<AlignWrapper {render} hFull {verticalAlignment}>
 	<div
-		class="w-full h-full"
+		class="w-full app-editor-input"
 		on:pointerdown={(e) => {
+			$selectedComponent = [id]
+
 			if (!e.shiftKey) {
 				e.stopPropagation()
 			}
+			selectedComponent.set([id])
 		}}
 		use:floatingRef
 		bind:clientWidth={w}
-		bind:clientHeight={h}
 	>
 		{#if !value || Array.isArray(value)}
-			<div style={`height:${h}px;`}>
-				<MultiSelect
-					bind:outerDiv
-					outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
-					ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
-					ulOptionsClass={'p-2 !bg-surface-secondary'}
-					bind:selected={value}
-					options={Array.isArray(items) ? items : []}
-					placeholder={resolvedConfig.placeholder}
-					allowUserOptions={resolvedConfig.create}
-					on:change={(event) => {
-						if (event?.detail?.type === 'removeAll') {
-							outputs?.result.set([])
-						} else {
-							outputs?.result.set([...(value ?? [])])
-						}
-					}}
-					on:open={() => {
-						$selectedComponent = [id]
-						open = true
-					}}
-					on:close={() => {
-						open = false
+			<MultiSelect
+				bind:outerDiv
+				outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
+				ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
+				ulOptionsClass={'p-2 !bg-surface-secondary'}
+				--sms-border={'none'}
+				--sms-min-height={'32px'}
+				--sms-focus-border={'none'}
+				bind:selected={value}
+				options={Array.isArray(items) ? items : []}
+				placeholder={resolvedConfig.placeholder}
+				allowUserOptions={resolvedConfig.create}
+				on:change={(event) => {
+					if (event?.detail?.type === 'removeAll') {
+						outputs?.result.set([])
+					} else {
+						outputs?.result.set([...(value ?? [])])
+					}
+				}}
+				on:open={() => {
+					$selectedComponent = [id]
+					open = true
+				}}
+				on:close={() => {
+					open = false
+				}}
+				let:option
+			>
+				<!-- needed because portal doesn't work for mouseup event en mobile -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div
+					class="w-full"
+					on:mouseup|stopPropagation
+					on:pointerdown|stopPropagation={(e) => {
+						let newe = new MouseEvent('mouseup')
+						e.target?.['parentElement']?.dispatchEvent(newe)
 					}}
-					let:option
 				>
-					<!-- needed because portal doesn't work for mouseup event en mobile -->
+					{option}
+				</div>
+			</MultiSelect>
+			<Portal>
+				<div use:floatingContent class="z5000" hidden={!open}>
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
 					<div
-						class="w-full"
-						on:mouseup|stopPropagation
-						on:pointerdown|stopPropagation={(e) => {
-							let newe = new MouseEvent('mouseup')
-							e.target?.['parentElement']?.dispatchEvent(newe)
-						}}>{option}</div
-					>
-				</MultiSelect>
-				<Portal>
-					<div use:floatingContent class="z5000" hidden={!open}>
-						<!-- svelte-ignore a11y-no-static-element-interactions -->
-						<!-- svelte-ignore a11y-click-events-have-key-events -->
-						<div
-							bind:this={portalRef}
-							class="multiselect"
-							style={`min-width: ${w}px;`}
-							on:click|stopPropagation
-						/>
-					</div>
-				</Portal>
-			</div>
+						bind:this={portalRef}
+						class="multiselect"
+						style={`min-width: ${w}px;`}
+						on:click|stopPropagation
+					/>
+				</div>
+			</Portal>
 		{:else}
 			Value {value} is not an array
 		{/if}

package/package/components/apps/components/inputs/AppMultiSelect.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         configuration: RichConfigurations;
         customCss?: ComponentCustomCSS<'multiselectcomponent'> | undefined;
         render: boolean;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
     };
     events: {
         mouseup: MouseEvent;

package/package/components/apps/components/inputs/AppMultiSelectV2.svelte

@@ -0,0 +1,178 @@
+<script>import { getContext } from 'svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import { initCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+// @ts-ignore
+import Portal from 'svelte-portal';
+import { createFloatingActions } from 'svelte-floating-ui';
+import { extractCustomProperties } from '../../../../utils';
+import { tick } from 'svelte';
+import { offset, flip, shift } from 'svelte-floating-ui/dom';
+import ResolveStyle from '../helpers/ResolveStyle.svelte';
+import MultiSelect from '../../../multiselect/MultiSelect.svelte';
+export let id;
+export let configuration;
+export let customCss = undefined;
+export let render;
+export let verticalAlignment = undefined;
+const [floatingRef, floatingContent] = createFloatingActions({
+    strategy: 'absolute',
+    middleware: [offset(5), flip(), shift()]
+});
+const { app, worldStore, selectedComponent, componentControl } = getContext('AppViewerContext');
+let items;
+const resolvedConfig = initConfig(components['multiselectcomponent'].initialData.configuration, configuration);
+const outputs = initOutput($worldStore, id, {
+    result: []
+});
+let value = [...new Set(outputs?.result.peak())];
+$componentControl[id] = {
+    setValue(nvalue) {
+        value = [...new Set(nvalue)];
+        outputs?.result.set([...(value ?? [])]);
+    }
+};
+$: resolvedConfig.items && handleItems();
+function handleItems() {
+    if (Array.isArray(resolvedConfig.items)) {
+        items = resolvedConfig.items?.map((label) => {
+            return typeof label === 'string' ? label : `NOT_STRING`;
+        });
+    }
+}
+$: resolvedConfig.defaultItems && handleDefaultItems();
+function handleDefaultItems() {
+    if (Array.isArray(resolvedConfig.defaultItems)) {
+        const nvalue = resolvedConfig.defaultItems?.map((label) => {
+            return typeof label === 'string' ? label : `NOT_STRING`;
+        });
+        value = [...new Set(nvalue)];
+        outputs?.result.set([...(value ?? [])]);
+    }
+}
+let css = initCss($app.css?.multiselectcomponent, customCss);
+function setOuterDivStyle(outerDiv, portalRef, style) {
+    outerDiv.setAttribute('style', style);
+    // find ul in portalRef and set style
+    const ul = portalRef.querySelector('ul');
+    ul?.setAttribute('style', extractCustomProperties(style));
+}
+$: outerDiv &&
+    portalRef &&
+    css?.multiselect?.style &&
+    setOuterDivStyle(outerDiv, portalRef, css?.multiselect?.style);
+let outerDiv = undefined;
+let portalRef = undefined;
+function moveOptionsToPortal() {
+    // Find ul element with class 'options' within the outerDiv
+    const ul = outerDiv?.querySelector('.options');
+    if (ul) {
+        // Move the ul element to the portal
+        portalRef?.appendChild(ul);
+    }
+}
+$: if (render && portalRef && outerDiv && items?.length > 0) {
+    tick().then(() => {
+        moveOptionsToPortal();
+    });
+}
+let w = 0;
+let open = false;
+</script>
+
+{#each Object.keys(components['multiselectcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+{#each Object.keys(css ?? {}) as key (key)}
+	<ResolveStyle
+		{id}
+		{customCss}
+		{key}
+		bind:css={css[key]}
+		componentStyle={$app.css?.multiselectcomponent}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+<AlignWrapper {render} hFull {verticalAlignment}>
+	<div
+		class="w-full app-editor-input"
+		on:pointerdown={(e) => {
+			$selectedComponent = [id]
+
+			if (!e.shiftKey) {
+				e.stopPropagation()
+			}
+			selectedComponent.set([id])
+		}}
+		use:floatingRef
+		bind:clientWidth={w}
+	>
+		{#if !value || Array.isArray(value)}
+			<MultiSelect
+				bind:outerDiv
+				outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
+				ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
+				--sms-border={'none'}
+				--sms-min-height={'32px'}
+				--sms-focus-border={'none'}
+				bind:selected={value}
+				options={items}
+				placeholder={resolvedConfig.placeholder}
+				allowUserOptions={resolvedConfig.create}
+				on:change={(event) => {
+					if (event?.detail?.type === 'removeAll') {
+						outputs?.result.set([])
+					} else {
+						outputs?.result.set([...(value ?? [])])
+					}
+				}}
+				on:open={() => {
+					$selectedComponent = [id]
+					open = true
+				}}
+				on:close={() => {
+					open = false
+				}}
+				let:option
+			>
+				<!-- needed because portal doesn't work for mouseup event en mobile -->
+				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<div
+					class="w-full"
+					on:mouseup|stopPropagation
+					on:pointerdown|stopPropagation={(e) => {
+						let newe = new MouseEvent('mouseup')
+						e.target?.['parentElement']?.dispatchEvent(newe)
+					}}
+				>
+					{option}
+				</div>
+			</MultiSelect>
+			<Portal>
+				<div use:floatingContent class="z5000" hidden={!open}>
+					<!-- svelte-ignore a11y-click-events-have-key-events -->
+					<!-- svelte-ignore a11y-no-static-element-interactions -->
+					<div
+						bind:this={portalRef}
+						class="multiselect"
+						style={`min-width: ${w}px;`}
+						on:click|stopPropagation
+					/>
+				</div>
+			</Portal>
+		{:else}
+			Value {value} is not an array
+		{/if}
+	</div>
+</AlignWrapper>

package/package/components/apps/components/inputs/AppMultiSelectV2.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { ComponentCustomCSS, RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        customCss?: ComponentCustomCSS<'multiselectcomponent'> | undefined;
+        render: boolean;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+    };
+    events: {
+        mouseup: MouseEvent;
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppMultiSelectV2Props = typeof __propDef.props;
+export type AppMultiSelectV2Events = typeof __propDef.events;
+export type AppMultiSelectV2Slots = typeof __propDef.slots;
+export default class AppMultiSelectV2 extends SvelteComponent<AppMultiSelectV2Props, AppMultiSelectV2Events, AppMultiSelectV2Slots> {
+}
+export {};

package/package/components/apps/components/inputs/AppNumberInput.svelte

@@ -67,7 +67,7 @@ let css = initCss($app.css?.numberinputcomponent, customCss);
 		on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
 		on:focus={() => ($selectedComponent = [id])}
 		class={twMerge(
-			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2',
+			'windmillapp w-full py-1.5 px-2 text-sm  app-editor-input',
 			css?.input?.class ?? '',
 			'wm-number-input'
 		)}

package/package/components/apps/components/inputs/AppQuillEditor.svelte

@@ -83,12 +83,26 @@ function handleDefault(defaultValue) {
 {/if}
 
 <style>
+	:global(.ql-toolbar) {
+		border-top-left-radius: 0.375rem;
+		border-top-right-radius: 0.375rem;
+}
+
+	:global(.dark .ql-toolbar) {
+		--tw-border-opacity: 1;
+		border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
 	:global(.ql-toolbar .ql-stroke) {
 		fill: none;
+		border-top-left-radius: 0.375rem;
+		border-top-right-radius: 0.375rem;
 		stroke: rgb(var(--color-text-primary) / 1);
 	}
 
 	:global(.ql-toolbar .ql-fill) {
+		--tw-bg-opacity: 1;
+		background-color: rgb(239 68 68 / var(--tw-bg-opacity));
 		fill: rgb(var(--color-text-primary) / 1);
 		stroke: none;
 }
@@ -99,6 +113,18 @@ function handleDefault(defaultValue) {
 }
 
 	:global(.ql-container) {
+		border-bottom-right-radius: 0.375rem;
+		border-bottom-left-radius: 0.375rem;
 		--tw-text-opacity: 1;
 		color: rgb(var(--color-text-primary) / var(--tw-text-opacity));
+}
+
+	:global(.dark .ql-container) {
+		--tw-border-opacity: 1;
+		border-color: rgb(107 114 128 / var(--tw-border-opacity));
+}
+
+	:global(.dark .ql-container > .ql-editor.ql-blank)::before {
+		--tw-text-opacity: 1;
+		color: rgb(107 114 128 / var(--tw-text-opacity));
 }</style>

package/package/components/apps/components/inputs/AppRangeInput.svelte

@@ -50,6 +50,9 @@ $: if (css && slider && lastStyle !== css?.handles?.style) {
         handles.forEach((handle) => (handle.style.cssText = css?.handles?.style ?? ''));
     }
 }
+const format = (v, i, p) => {
+    return `${v}`;
+};
 </script>
 
 {#each Object.keys(components['rangecomponent'].initialData.configuration) as key (key)}
@@ -75,13 +78,7 @@ $: if (css && slider && lastStyle !== css?.handles?.style) {
 
 <AlignWrapper {render} {verticalAlignment}>
 	<div class="flex flex-col w-full">
-		<div class="flex items-center w-full gap-1 px-1">
-			<span
-				class={twMerge(css?.limits?.class ?? '', 'font-mono wm-slider-limits')}
-				style={css?.limits?.style ?? ''}
-			>
-				{+(resolvedConfig.min ?? 0)}
-			</span>
+		<div class="flex items-center w-full gap-1">
 			<div
 				class={twMerge('grow', 'wm-slider-bar')}
 				style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
@@ -89,45 +86,49 @@ $: if (css && slider && lastStyle !== css?.handles?.style) {
 				on:pointerdown|stopPropagation
 			>
 				<RangeSlider
+					id="range-slider"
 					springValues={{ stiffness: 1, damping: 1 }}
 					bind:slider
 					bind:values
-					step={resolvedConfig.step}
 					min={resolvedConfig.min == undefined ? 0 : +resolvedConfig.min}
 					max={resolvedConfig.max == undefined ? 1 : +resolvedConfig.max}
 					range
 					disabled={resolvedConfig.disabled}
+					pips
+					float
+					first="label"
+					last="label"
+					step={resolvedConfig.step ?? 1}
+					pipstep={(resolvedConfig.axisStep ?? 1) / (resolvedConfig.step ?? 1)}
+					formatter={format}
 				/>
-				<!-- <RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values /> -->
 			</div>
-			<span
-				class={twMerge(css?.limits?.class ?? '', 'font-mono wm-slider-limits')}
-				style={css?.limits?.style ?? ''}
-			>
-				{+(resolvedConfig.max ?? 1)}
-			</span>
-		</div>
-		<div class="flex justify-between px-1">
-			<span
-				class={twMerge(
-					'font-mono text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
-					css?.values?.class ?? '',
-					'wm-slider-value'
-				)}
-				style={css?.values?.style ?? ''}
-			>
-				{values[0]}
-			</span>
-			<span
-				class={twMerge(
-					'font-mono text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
-					css?.values?.class ?? '',
-					'wm-slider-value'
-				)}
-				style={css?.values?.style ?? ''}
-			>
-				{values[1]}
-			</span>
 		</div>
 	</div>
 </AlignWrapper>
+
+<style>
+	:global(#range-slider.rangeSlider) {
+		font-size: 12px;
+		text-transform: uppercase;
+	}
+
+	:global(.dark #range-slider.rangeSlider) {
+		background-color: #3b4252;
+	}
+
+	:global(#range-slider.rangeSlider .rangeHandle) {
+		width: 2em;
+		height: 2em;
+	}
+
+	:global(#range-slider.rangeSlider .rangeFloat) {
+		opacity: 1;
+		background: transparent;
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	:global(.dark #range-slider.rangeSlider > .rangePips > .pip) {
+		color: #eeeeee;
+	}</style>

package/package/components/apps/components/inputs/AppS3FileInput.svelte

@@ -12,9 +12,10 @@ export let configuration;
 export let customCss = undefined;
 export let render;
 export let extraKey = undefined;
+export let onFileChange = undefined;
 let resolvedConfig = initConfig(components['s3fileinputcomponent'].initialData.configuration, configuration);
 let fileUploads = writable([]);
-const { app, worldStore, componentControl } = getContext('AppViewerContext');
+const { app, worldStore, componentControl, runnableComponents } = getContext('AppViewerContext');
 $componentControl[id] = {
     clearFiles: () => {
         outputs.result.set([]);
@@ -102,6 +103,7 @@ let forceDisplayUploads = false;
 		on:addition={(evt) => {
 			const curr = outputs.result.peak()
 			outputs.result.set(curr.concat(evt.detail))
+			onFileChange?.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((cb) => cb?.()))
 		}}
 		on:deletion={(evt) => {
 			const curr = outputs.result.peak()

package/package/components/apps/components/inputs/AppS3FileInput.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         customCss?: ComponentCustomCSS<'s3fileinputcomponent'> | undefined;
         render: boolean;
         extraKey?: string | undefined;
+        onFileChange?: string[] | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;