windmill-components 1.89.1 → 1.103.0

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

@@ -3,8 +3,7 @@ export async function loadIcon(name) {
     let iconComponent;
     try {
         if (name) {
-            name = toKebabCase(name).replace(/([a-z])(\d)/i, '$1-$2');
-            iconComponent = (await import(`../../../../../node_modules/lucide-svelte/dist/svelte/icons/${name}.svelte`)).default;
+            iconComponent = (await import(`../../../../../node_modules/lucide-svelte/dist/svelte/icons/${toKebabCase(name)}.svelte`)).default;
             return iconComponent;
         }
         else {

package/package/components/apps/components/inputs/AppCheckbox.svelte

@@ -1,41 +1,60 @@
 <script>import Toggle from '../../../Toggle.svelte';
 import { getContext } from 'svelte';
-import { initOutput } from '../../editor/appUtils';
+import { initConfig, initOutput } from '../../editor/appUtils';
 import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { components } from '../../editor/component';
 export let id;
 export let configuration;
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
+export let recomputeIds = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore } = getContext('AppViewerContext');
-let defaultValue = undefined;
-let labelValue = '';
+export let extraKey = undefined;
+export let preclickAction = undefined;
+export let controls = undefined;
+const { app, worldStore, componentControl, runnableComponents } = getContext('AppViewerContext');
+let resolvedConfig = initConfig(components['checkboxcomponent'].initialData.configuration, configuration);
+if (controls) {
+    $componentControl[id] = controls;
+}
 // As the checkbox is a special case and has no input
 // we need to manually set the output
 let outputs = initOutput($worldStore, id, {
     result: false
 });
-$: defaultValue != undefined && outputs?.result.set(defaultValue);
+$: resolvedConfig.defaultValue != undefined && outputs?.result.set(resolvedConfig.defaultValue);
 $: css = concatCustomCss($app.css?.checkboxcomponent, customCss);
 </script>
 
-<InputValue {id} input={configuration.label} bind:value={labelValue} />
-<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+{#each Object.keys(components['checkboxcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{extraKey}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <InitializeComponent {id} />
 
 <AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
 	<Toggle
-		checked={defaultValue}
-		options={{ right: labelValue }}
+		size="sm"
+		checked={resolvedConfig.defaultValue}
+		options={{ right: resolvedConfig.label }}
 		textClass={css?.text?.class ?? ''}
 		textStyle={css?.text?.style ?? ''}
 		on:change={(e) => {
+			preclickAction?.()
 			outputs.result.set(e.detail)
+			if (recomputeIds) {
+				recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb())
+			}
 		}}
 	/>
 </AlignWrapper>

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

@@ -6,8 +6,15 @@ declare const __propDef: {
         configuration: RichConfigurations;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        recomputeIds?: string[] | undefined;
         customCss?: ComponentCustomCSS<'checkboxcomponent'> | undefined;
         render: boolean;
+        extraKey?: string | undefined;
+        preclickAction?: (() => Promise<void>) | undefined;
+        controls?: {
+            left: () => boolean;
+            right: () => boolean | string;
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,53 +1,55 @@
 <script>import { getContext } from 'svelte';
-import Select from 'svelte-select';
-import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
-import { initOutput } from '../../editor/appUtils';
+// import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults'
+import { initConfig, initOutput } from '../../editor/appUtils';
 import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+// @ts-ignore
+import MultiSelect from 'svelte-multiselect';
 export let id;
 export let configuration;
-export let horizontalAlignment = undefined;
-export let verticalAlignment = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
 let items;
-let placeholder = 'Select an item';
 let outputs = initOutput($worldStore, id, {
     result: []
 });
+let resolvedConfig = initConfig(components['multiselectcomponent'].initialData.configuration, configuration);
 // $: outputs && handleOutputs()
 // function handleOutputs() {
 // 	value = outputs.result.peak()
 // }
 let value = outputs?.result.peak();
-$: labels && handleItems();
-let labels = [];
+$: resolvedConfig.items && handleItems();
 function handleItems() {
-    if (labels) {
-        items = labels?.map((label) => {
-            return {
-                label,
-                value: label
-            };
+    if (Array.isArray(resolvedConfig.items)) {
+        items = resolvedConfig.items?.map((label) => {
+            return typeof label === 'string' ? label : `NOT_STRING`;
         });
     }
 }
-$: value && outputs?.result.set(value.map((v) => v.value));
 $: css = concatCustomCss($app.css?.multiselectcomponent, customCss);
+$: outerDiv && css?.multiselect?.style && outerDiv.setAttribute('style', css?.multiselect?.style);
+let outerDiv = undefined;
 </script>
 
-<InputValue {id} input={configuration.items} bind:value={labels} />
-<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+{#each Object.keys(components['multiselectcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <InitializeComponent {id} />
 
-<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+<AlignWrapper {render} hFull>
 	<div
-		class="app-select w-full"
-		style="height: 100%; overflow: auto;"
+		class="app-select w-full h-full"
 		on:pointerdown={(e) => {
 			if (!e.shiftKey) {
 				e.stopPropagation()
@@ -55,30 +57,19 @@ $: css = concatCustomCss($app.css?.multiselectcomponent, customCss);
 		}}
 	>
 		{#if !value || Array.isArray(value)}
-			<Select
-				--border-radius="0"
-				--border-color="#999"
-				multiple
-				on:change={(e) => e.stopPropagation()}
-				{items}
-				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={'border-color: #999; min-height: 100%;' +
-					SELECT_INPUT_DEFAULT_STYLE.containerStyles +
-					css?.input?.style}
-				bind:value
-				{placeholder}
-				on:click={() => {
-					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
-					}
+			<MultiSelect
+				bind:outerDiv
+				outerDivClass={`${resolvedConfig.allowOverflow ? '' : 'h-full'}`}
+				ulSelectedClass={`${resolvedConfig.allowOverflow ? '' : 'overflow-auto max-h-full'} `}
+				bind:selected={value}
+				on:change={() => {
+					outputs?.result.set([...(value ?? [])])
 				}}
-				on:focus={() => {
-					if (!$connectingInput.opened) {
-						$selectedComponent = [id]
-					}
-				}}
-				floatingConfig={{
-					strategy: 'fixed'
+				options={items}
+				placeholder={resolvedConfig.placeholder}
+				allowUserOptions={resolvedConfig.create}
+				on:open={() => {
+					$selectedComponent = [id]
 				}}
 			/>
 		{:else}
@@ -90,6 +81,7 @@ $: css = concatCustomCss($app.css?.multiselectcomponent, customCss);
 <style global>
 	:global(.app-select) :global(.value-container) {
 		padding: 0 !important;
+		overflow: auto;
 	}
 	:global(.svelte-select-list) {
 		z-index: 1000 !important;

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

@@ -4,8 +4,6 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: RichConfigurations;
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
-        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         customCss?: ComponentCustomCSS<'multiselectcomponent'> | undefined;
         render: boolean;
     };

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

@@ -11,7 +11,6 @@ export let configuration;
 export let verticalAlignment = undefined;
 export let customCss = undefined;
 export let render;
-export let initializing = true;
 const { app, worldStore } = getContext('AppViewerContext');
 let min = 0;
 let max = 42;
@@ -38,12 +37,7 @@ $: if (css && slider && lastStyle !== css?.handles?.style) {
 <InputValue {id} input={configuration.min} bind:value={min} />
 <InputValue {id} input={configuration.max} bind:value={max} />
 <InputValue {id} input={configuration.defaultLow} bind:value={values[0]} />
-<InputValue
-	on:done={() => (initializing = false)}
-	{id}
-	input={configuration.defaultHigh}
-	bind:value={values[1]}
-/>
+<InputValue {id} input={configuration.defaultHigh} bind:value={values[1]} />
 
 <InitializeComponent {id} />
 

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

@@ -7,7 +7,6 @@ declare const __propDef: {
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         customCss?: ComponentCustomCSS<'rangecomponent'> | undefined;
         render: boolean;
-        initializing?: boolean | undefined;
     };
     events: {
         pointerdown: PointerEvent;

package/package/components/apps/components/inputs/AppSelect.svelte

@@ -2,28 +2,34 @@
 import Select from 'svelte-select';
 import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputValue from '../helpers/InputValue.svelte';
 import { SELECT_INPUT_DEFAULT_STYLE } from '../../../../defaults';
-import { initOutput } from '../../editor/appUtils';
+import { initConfig, initOutput } from '../../editor/appUtils';
 import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import { components } from '../../editor/component';
 export let id;
 export let configuration;
-export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
 export let customCss = undefined;
 export let render;
-const { app, worldStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
-let items;
-let placeholder = 'Select an item';
+export let extraKey = undefined;
+export let preclickAction = undefined;
+export let recomputeIds = undefined;
+export let controls = undefined;
+const { app, worldStore, connectingInput, selectedComponent, runnableComponents, componentControl } = getContext('AppViewerContext');
+if (controls) {
+    $componentControl[id] = controls;
+}
+let resolvedConfig = initConfig(components['selectcomponent'].initialData.configuration, configuration);
 let outputs = initOutput($worldStore, id, {
     result: undefined
 });
 let value = outputs?.result.peak();
-$: items && handleItems();
+$: resolvedConfig.items && handleItems();
 let listItems = [];
 function handleItems() {
-    listItems = Array.isArray(items)
-        ? items.map((item) => {
+    listItems = Array.isArray(resolvedConfig.items)
+        ? resolvedConfig.items.map((item) => {
             return {
                 label: item.label,
                 value: JSON.stringify(item.value)
@@ -31,11 +37,11 @@ function handleItems() {
         })
         : [];
     let rawValue;
-    if (defaultValue !== undefined) {
-        rawValue = defaultValue;
+    if (resolvedConfig.defaultValue !== undefined) {
+        rawValue = resolvedConfig.defaultValue;
     }
     else if (listItems.length > 0) {
-        rawValue = items[0].value;
+        rawValue = resolvedConfig.items[0].value;
     }
     if (rawValue !== undefined) {
         value = JSON.stringify(rawValue);
@@ -44,12 +50,13 @@ function handleItems() {
 }
 function onChange(e) {
     e?.stopPropagation();
-    if (create) {
+    if (resolvedConfig.create) {
         listItems = listItems.map((i) => {
             delete i.created;
             return i;
         });
     }
+    preclickAction?.();
     let result = undefined;
     try {
         result = JSON.parse(e.detail?.['value']);
@@ -57,11 +64,13 @@ function onChange(e) {
     catch (_) { }
     value = e.detail?.['value'];
     outputs?.result.set(result);
+    if (recomputeIds) {
+        recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb());
+    }
 }
 $: css = concatCustomCss($app.css?.selectcomponent, customCss);
-let defaultValue = undefined;
 function handleFilter(e) {
-    if (create) {
+    if (resolvedConfig.create) {
         if (e.detail.length === 0 && filterText.length > 0) {
             const prev = listItems.filter((i) => !i.created);
             listItems = [
@@ -71,25 +80,28 @@ function handleFilter(e) {
         }
     }
 }
-$: defaultValue && handleDefault();
+$: resolvedConfig.defaultValue && handleDefault();
 function handleDefault() {
-    if (defaultValue) {
-        value = JSON.stringify(defaultValue);
-        outputs?.result.set(defaultValue);
+    if (resolvedConfig.defaultValue) {
+        value = JSON.stringify(resolvedConfig.defaultValue);
+        outputs?.result.set(resolvedConfig.defaultValue);
     }
 }
-let create = false;
 let filterText = '';
 </script>
 
-<InputValue {id} input={configuration.items} bind:value={items} />
-<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
-<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-<InputValue {id} input={configuration.create} bind:value={create} />
-
+{#each Object.keys(components['selectcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{extraKey}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 <InitializeComponent {id} />
 
-<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+<AlignWrapper {render} {verticalAlignment}>
 	<div
 		class="app-select w-full"
 		style="height: 34px;"
@@ -107,23 +119,21 @@ let filterText = '';
 			on:clear={onChange}
 			on:change={onChange}
 			items={listItems}
+			listAutoWidth={resolvedConfig.fullWidth}
 			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
 			containerStyles={'border-color: #999;' +
 				SELECT_INPUT_DEFAULT_STYLE.containerStyles +
 				css?.input?.style}
 			{value}
-			{placeholder}
+			placeholder={resolvedConfig.placeholder}
 			on:focus={() => {
 				if (!$connectingInput.opened) {
 					$selectedComponent = [id]
 				}
 			}}
 		>
-			<div slot="item" let:item>
-				{#if create}
-					{item.created ? 'Add new: ' : ''}
-				{/if}
-				{item.label}
+			<div slot="item" let:item
+				>{#if resolvedConfig.create}{item.created ? 'Add new: ' : ''}{/if}{item.label}
 			</div>
 		</Select>
 	</div>

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

@@ -4,10 +4,16 @@ declare const __propDef: {
     props: {
         id: string;
         configuration: RichConfigurations;
-        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         customCss?: ComponentCustomCSS<'selectcomponent'> | undefined;
         render: boolean;
+        extraKey?: string | undefined;
+        preclickAction?: (() => Promise<void>) | undefined;
+        recomputeIds?: string[] | undefined;
+        controls?: {
+            left: () => boolean;
+            right: () => boolean | string;
+        } | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/components/apps/components/inputs/AppSelectStep.svelte

@@ -0,0 +1,65 @@
+<script>import { getContext } from 'svelte';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+import Stepper from '../../../common/stepper/Stepper.svelte';
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let render;
+const { worldStore } = getContext('AppViewerContext');
+const resolvedConfig = initConfig(components['selectstepcomponent'].initialData.configuration, configuration);
+const outputs = initOutput($worldStore, id, {
+    result: undefined
+});
+let selected = '';
+$: selected === '' && resolvedConfig && setDefaultValue();
+function setDefaultValue() {
+    if (resolvedConfig.defaultValue === undefined) {
+        selected = resolvedConfig.items[0].value;
+    }
+    else if (resolvedConfig.defaultValue?.value) {
+        selected = resolvedConfig.defaultValue?.value;
+    }
+}
+function handleSelection(value) {
+    outputs?.result.set(value);
+}
+function onPointerDown(e) {
+    if (!e.shiftKey) {
+        e.stopPropagation();
+    }
+}
+$: selected && handleSelection(selected);
+let selectedIndex = 0;
+</script>
+
+{#each Object.keys(components['selectstepcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+	<div class="w-full" on:pointerdown={onPointerDown}>
+		<Stepper
+			tabs={(resolvedConfig?.items ?? []).map((item) => item.label)}
+			hasValidations={false}
+			allowStepNavigation={true}
+			{selectedIndex}
+			on:click={(e) => {
+				const index = e.detail.index
+				selectedIndex = index
+				outputs?.result.set(resolvedConfig?.items[index].value)
+			}}
+		/>
+	</div>
+</AlignWrapper>

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

@@ -0,0 +1,21 @@
+import { SvelteComponentTyped } from "svelte";
+import type { RichConfigurations } from '../../types';
+declare const __propDef: {
+    props: {
+        id: string;
+        configuration: RichConfigurations;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        render: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppSelectStepProps = typeof __propDef.props;
+export type AppSelectStepEvents = typeof __propDef.events;
+export type AppSelectStepSlots = typeof __propDef.slots;
+export default class AppSelectStep extends SvelteComponentTyped<AppSelectStepProps, AppSelectStepEvents, AppSelectStepSlots> {
+}
+export {};

package/package/components/apps/components/inputs/AppSelectTab.svelte

@@ -0,0 +1,70 @@
+<script>import { getContext } from 'svelte';
+import { concatCustomCss } from '../../utils';
+import AlignWrapper from '../helpers/AlignWrapper.svelte';
+import { initConfig, initOutput } from '../../editor/appUtils';
+import InitializeComponent from '../helpers/InitializeComponent.svelte';
+import { Tab, Tabs } from '../../../common';
+import { components } from '../../editor/component';
+import ResolveConfig from '../helpers/ResolveConfig.svelte';
+export let id;
+export let configuration;
+export let horizontalAlignment = undefined;
+export let verticalAlignment = undefined;
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
+const resolvedConfig = initConfig(components['selecttabcomponent'].initialData.configuration, configuration);
+const outputs = initOutput($worldStore, id, {
+    result: undefined
+});
+let selected = '';
+$: selected === '' && resolvedConfig && setDefaultValue();
+function setDefaultValue() {
+    if (resolvedConfig.defaultValue === undefined) {
+        selected = resolvedConfig.items[0].value;
+    }
+    else if (resolvedConfig.defaultValue?.value) {
+        selected = resolvedConfig.defaultValue?.value;
+    }
+}
+function handleSelection(value) {
+    outputs?.result.set(value);
+}
+function onPointerDown(e) {
+    if (!e.shiftKey) {
+        e.stopPropagation();
+    }
+}
+$: selected && handleSelection(selected);
+$: css = concatCustomCss($app.css?.selecttabcomponent, customCss);
+</script>
+
+{#each Object.keys(components['selecttabcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
+
+<InitializeComponent {id} />
+
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+	<div class="w-full" on:pointerdown={onPointerDown}>
+		<Tabs bind:selected class={css?.tabRow?.class} style={css?.tabRow?.style}>
+			{#each resolvedConfig?.items ?? [] as item}
+				<Tab
+					value={item.value}
+					class={css?.allTabs?.class}
+					style={css?.allTabs?.style}
+					selectedClass={css?.selectedTab?.class}
+					selectedStyle={css?.selectedTab?.style}
+					size={resolvedConfig?.tabSize}
+				>
+					<span class="font-semibold text-md">{item.label}</span>
+				</Tab>
+			{/each}
+		</Tabs>
+	</div>
+</AlignWrapper>

package/{dist/components/apps/components/display/AppIcon.svelte.d.ts → package/components/apps/components/inputs/AppSelectTab.svelte.d.ts}

@@ -3,10 +3,10 @@ import type { ComponentCustomCSS, RichConfigurations } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
+        configuration: RichConfigurations;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
-        configuration: RichConfigurations;
-        customCss?: ComponentCustomCSS<'iconcomponent'> | undefined;
+        customCss?: ComponentCustomCSS<'selecttabcomponent'> | undefined;
         render: boolean;
     };
     events: {
@@ -14,9 +14,9 @@ declare const __propDef: {
     };
     slots: {};
 };
-export type AppIconProps = typeof __propDef.props;
-export type AppIconEvents = typeof __propDef.events;
-export type AppIconSlots = typeof __propDef.slots;
-export default class AppIcon extends SvelteComponentTyped<AppIconProps, AppIconEvents, AppIconSlots> {
+export type AppSelectTabProps = typeof __propDef.props;
+export type AppSelectTabEvents = typeof __propDef.events;
+export type AppSelectTabSlots = typeof __propDef.slots;
+export default class AppSelectTab extends SvelteComponentTyped<AppSelectTabProps, AppSelectTabEvents, AppSelectTabSlots> {
 }
 export {};