windmill-components 1.70.0 → 1.77.0

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

@@ -0,0 +1,82 @@
+<script>import { getContext } from 'svelte';
+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';
+export const staticOutputs = ['result'];
+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';
+$: outputs = $worldStore?.outputsById[id];
+// $: outputs && handleOutputs()
+// function handleOutputs() {
+// 	value = outputs.result.peak()
+// }
+let value = outputs?.result.peak();
+$: labels && handleItems();
+let labels = [];
+function handleItems() {
+    if (labels) {
+        items = labels?.map((label) => {
+            return {
+                label,
+                value: label
+            };
+        });
+    }
+}
+$: value && outputs?.result.set(value.map((v) => v.value));
+$: css = concatCustomCss($app.css?.selectcomponent, customCss);
+</script>
+
+<InputValue {id} input={configuration.items} bind:value={labels} />
+<InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+	<div class="app-select w-full mx-0.5" style="height: 34px" on:pointerdown|stopPropagation>
+		{#if !value || Array.isArray(value)}
+			<Select
+				--border-radius="0"
+				--border-color="#999"
+				multiple
+				on:change={(e) => e.stopPropagation()}
+				{items}
+				class={css?.input?.class ?? ''}
+				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+				containerStyles={'border-color: #999;' +
+					SELECT_INPUT_DEFAULT_STYLE.containerStyles +
+					css?.input?.style}
+				bind:value
+				{placeholder}
+				on:click={() => {
+					if (!$connectingInput.opened) {
+						$selectedComponent = id
+					}
+				}}
+				on:focus={() => {
+					$selectedComponent = id
+				}}
+				floatingConfig={{
+					strategy: 'fixed'
+				}}
+			/>
+		{:else}
+			Value {value} is not an array
+		{/if}
+	</div>
+</AlignWrapper>
+
+<style global>
+	:global(.app-select) :global(.value-container) {
+		padding: 0 !important;
+	}
+	:global(.svelte-select-list) {
+		z-index: 1000 !important;
+	}</style>

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

@@ -0,0 +1,27 @@
+import { SvelteComponentTyped } from "svelte";
+import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
+declare const __propDef: {
+    props: {
+        staticOutputs?: string[] | undefined;
+        id: string;
+        configuration: Record<string, AppInput>;
+        horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
+        verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'input'> | undefined;
+        render: boolean;
+    };
+    events: {
+        pointerdown: PointerEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AppMultiSelectProps = typeof __propDef.props;
+export type AppMultiSelectEvents = typeof __propDef.events;
+export type AppMultiSelectSlots = typeof __propDef.slots;
+export default class AppMultiSelect extends SvelteComponentTyped<AppMultiSelectProps, AppMultiSelectEvents, AppMultiSelectSlots> {
+    get staticOutputs(): string[];
+}
+export {};

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

@@ -1,25 +1,28 @@
 <script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputDefaultValue from '../helpers/InputDefaultValue.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
 export let verticalAlignment = undefined;
 export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
-let input;
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
 let defaultValue = undefined;
 let placeholder = undefined;
+let value = undefined;
 let min = undefined;
 let max = undefined;
 let step = 1;
 $: outputs = $worldStore?.outputsById[id];
-function handleInput() {
-    const value = input?.value;
-    const num = isNaN(+value) ? null : +value;
-    outputs?.result.set(num);
+$: handleDefault(defaultValue);
+$: outputs?.result.set(value);
+function handleDefault(defaultValue) {
+    value = defaultValue;
 }
-$: input && handleInput();
+$: css = concatCustomCss($app.css?.numberinputcomponent, customCss);
 </script>
 
 <InputValue {id} input={configuration.step} bind:value={step} />
@@ -27,16 +30,17 @@ $: input && handleInput();
 <InputValue {id} input={configuration.max} bind:value={max} />
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-<InputDefaultValue bind:input {defaultValue} />
 
-<AlignWrapper {verticalAlignment}>
+<AlignWrapper {render} {verticalAlignment}>
 	<input
-		bind:this={input}
-		on:input={handleInput}
-		on:focus={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
+		on:pointerdown|stopPropagation
+		on:focus={() => ($selectedComponent = id)}
+		class={twMerge(
+			'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+			css?.input?.class ?? ''
+		)}
+		style={css?.input?.style ?? ''}
+		bind:value
 		{min}
 		{max}
 		{step}

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

@@ -1,13 +1,18 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'input'> | undefined;
+        render: boolean;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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

@@ -2,18 +2,31 @@
 import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
-import { Badge } from '../../../common';
+import { concatCustomCss } from '../../utils';
+import { twMerge } from 'tailwind-merge';
 export let id;
 export let configuration;
 export let verticalAlignment = undefined;
 export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
+export let customCss = undefined;
+export let render;
+const { app, worldStore } = getContext('AppViewerContext');
 let min = 0;
 let max = 42;
 let step = 1;
+let slider;
 let values = [0, 0];
 $: outputs = $worldStore?.outputsById[id];
 $: outputs?.result.set(values);
+$: css = concatCustomCss($app.css?.rangecomponent, customCss);
+let lastStyle = undefined;
+$: if (css && slider && lastStyle !== css?.handles?.style) {
+    const handles = slider.querySelectorAll('.rangeNub');
+    if (handles) {
+        lastStyle = css?.handles?.style;
+        handles.forEach((handle) => (handle.style.cssText = css?.handles?.style ?? ''));
+    }
+}
 </script>
 
 <InputValue {id} input={configuration.step} bind:value={step} />
@@ -22,23 +35,51 @@ $: outputs?.result.set(values);
 <InputValue {id} input={configuration.defaultLow} bind:value={values[0]} />
 <InputValue {id} input={configuration.defaultHigh} bind:value={values[1]} />
 
-<AlignWrapper {verticalAlignment}>
+<AlignWrapper {render} {verticalAlignment}>
 	<div class="flex flex-col w-full">
 		<div class="flex items-center w-full gap-1 px-1">
-			<span>{min}</span>
-			<div class="grow" on:pointerdown|stopPropagation>
-				<RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values />
-				<!-- <DoubleRange bind:start bind:end /> -->
+			<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
+				{+min}
+			</span>
+			<div
+				class="grow"
+				style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
+					''}"
+				on:pointerdown|stopPropagation
+			>
+				<RangeSlider
+					bind:slider
+					bind:values
+					{step}
+					min={!min ? 0 : +min}
+					max={!max ? 1 : +max}
+					range
+				/>
+				<!-- <RangeSlider {step} range min={min ?? 0} max={max ?? 1} bind:values /> -->
 			</div>
-			<span>{max}</span>
+			<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
+				{+max}
+			</span>
 		</div>
 		<div class="flex justify-between px-1">
-			<div>
-				<Badge color="blue">{values[0]}</Badge>
-			</div>
-			<div>
-				<Badge color="blue">{values[1]}</Badge>
-			</div>
+			<span
+				class={twMerge(
+					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
+					css?.values?.class ?? ''
+				)}
+				style={css?.values?.style ?? ''}
+			>
+				{values[0]}
+			</span>
+			<span
+				class={twMerge(
+					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
+					css?.values?.class ?? ''
+				)}
+				style={css?.values?.style ?? ''}
+			>
+				{values[1]}
+			</span>
 		</div>
 	</div>
 </AlignWrapper>

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

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'handles' | 'bar' | 'limits' | 'values'> | undefined;
+        render: boolean;
     };
     events: {
         pointerdown: PointerEvent;

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

@@ -1,21 +1,20 @@
 <script>import { getContext } from 'svelte';
 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';
 export const staticOutputs = ['result'];
 export let id;
 export let configuration;
 export let horizontalAlignment = undefined;
 export let verticalAlignment = undefined;
-const { worldStore, connectingInput, selectedComponent } = getContext('AppEditorContext');
+export let customCss = undefined;
+export let render;
+const { app, worldStore, connectingInput, selectedComponent } = getContext('AppViewerContext');
 let items;
-let multiple = false;
 let placeholder = 'Select an item';
 $: outputs = $worldStore?.outputsById[id];
-// $: outputs && handleOutputs()
-// function handleOutputs() {
-// 	value = outputs.result.peak()
-// }
 let value = outputs?.result.peak();
 $: items && handleItems();
 let listItems = [];
@@ -28,21 +27,22 @@ function handleItems() {
             };
         })
         : [];
-    const valuePeak = outputs?.result.peak();
-    if (!valuePeak) {
-        const value0 = items?.[0]?.['value'];
-        if (value0 != value && !items.includes(value0)) {
-            value = JSON.stringify(value0);
-            outputs?.result.set(value0);
-        }
+    if (defaultValue) {
+        value = JSON.stringify(defaultValue);
     }
-    else {
-        value = valuePeak;
+    else if (listItems.length > 0) {
+        value = listItems[0]?.value;
     }
 }
 function onChange(e) {
     e?.stopPropagation();
     window.dispatchEvent(new Event('pointerup'));
+    if (create) {
+        listItems = listItems.map((i) => {
+            delete i.created;
+            return i;
+        });
+    }
     let result = undefined;
     try {
         result = JSON.parse(e.detail?.['value']);
@@ -50,20 +50,49 @@ function onChange(e) {
     catch (_) { }
     outputs?.result.set(result);
 }
+$: css = concatCustomCss($app.css?.selectcomponent, customCss);
+let defaultValue = undefined;
+function handleFilter(e) {
+    if (create) {
+        if (e.detail.length === 0 && filterText.length > 0) {
+            const prev = listItems.filter((i) => !i.created);
+            listItems = [
+                ...prev,
+                { value: JSON.stringify(filterText), label: filterText, created: true }
+            ];
+        }
+    }
+}
+$: defaultValue && handleDefault();
+function handleDefault() {
+    if (defaultValue) {
+        value = JSON.stringify(defaultValue);
+        outputs?.result.set(defaultValue);
+    }
+}
+let create = false;
+let filterText = '';
 </script>
 
 <InputValue {id} input={configuration.items} bind:value={items} />
-<InputValue {id} input={configuration.multiple} bind:value={multiple} />
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
+<InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
+<InputValue {id} input={configuration.create} bind:value={create} />
 
-<AlignWrapper {horizontalAlignment} {verticalAlignment}>
-	<div class="app-select w-full" style="height: 34px" on:pointerdown|stopPropagation>
+<AlignWrapper {render} {horizontalAlignment} {verticalAlignment}>
+	<div class="app-select w-full mx-0.5" style="height: 34px;" on:pointerdown|stopPropagation>
 		<Select
-			--height="34px"
-			{multiple}
+			--border-radius="0"
+			--border-color="#999"
+			bind:filterText
+			on:filter={handleFilter}
 			on:clear={onChange}
 			on:change={onChange}
 			items={listItems}
+			inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
+			containerStyles={'border-color: #999;' +
+				SELECT_INPUT_DEFAULT_STYLE.containerStyles +
+				css?.input?.style}
 			{value}
 			{placeholder}
 			on:click={() => {
@@ -77,7 +106,15 @@ function onChange(e) {
 			floatingConfig={{
 				strategy: 'fixed'
 			}}
-		/>
+		>
+			<div slot="item" let:item>
+				{#if create}
+					{item.created ? 'Add new: ' : ''}
+				{/if}
+
+				{item.label}
+			</div>
+		</Select>
 	</div>
 </AlignWrapper>
 

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         staticOutputs?: string[] | undefined;
@@ -7,6 +8,8 @@ declare const __propDef: {
         configuration: Record<string, AppInput>;
         horizontalAlignment?: 'left' | 'center' | 'right' | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
+        customCss?: ComponentCustomCSS<'input'> | undefined;
+        render: boolean;
     };
     events: {
         pointerdown: PointerEvent;

package/components/apps/components/inputs/AppSliderInputs.svelte

@@ -1,16 +1,20 @@
-<script>import { Badge } from '../../../common';
-import RangeSlider from 'svelte-range-slider-pips';
+<script>import RangeSlider from 'svelte-range-slider-pips';
 import { getContext } from 'svelte';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
 import InputValue from '../helpers/InputValue.svelte';
+import { twMerge } from 'tailwind-merge';
+import { concatCustomCss } from '../../utils';
 export let id;
 export let configuration;
 export let verticalAlignment = undefined;
 export const staticOutputs = ['result'];
-const { worldStore, selectedComponent } = getContext('AppEditorContext');
+export let customCss = undefined;
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
 let min = 0;
 let max = 42;
 let step = 1;
+let slider;
 $: outputs = $worldStore?.outputsById[id];
 let values = [outputs?.result.peak() ?? 0];
 $: values && handleValues();
@@ -22,6 +26,15 @@ function handleValues() {
     const num = isNaN(+values[0]) ? null : +values[0];
     outputs?.result.set(num);
 }
+$: css = concatCustomCss($app.css?.slidercomponent, customCss);
+let lastStyle = undefined;
+$: if (css && slider && lastStyle !== css?.handle?.style) {
+    const handle = slider.querySelector('.rangeNub');
+    if (handle) {
+        lastStyle = css?.handle?.style;
+        handle.style.cssText = css?.handle?.style ?? '';
+    }
+}
 </script>
 
 <InputValue {id} input={configuration.step} bind:value={step} />
@@ -29,13 +42,32 @@ function handleValues() {
 <InputValue {id} input={configuration.max} bind:value={max} />
 <InputValue {id} input={configuration.defaultValue} bind:value={values[0]} />
 
-<AlignWrapper {verticalAlignment}>
+<AlignWrapper {render} {verticalAlignment}>
 	<div class="flex items-center w-full gap-1 px-1">
-		<span>{min}</span>
-		<div class="grow" on:pointerdown|stopPropagation={() => ($selectedComponent = id)}>
-			<RangeSlider {step} min={min ?? 0} max={max ?? 1} bind:values />
+		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
+			{+min}
+		</span>
+		<div
+			class="grow"
+			style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
+				''}"
+			on:pointerdown|stopPropagation={() => ($selectedComponent = id)}
+		>
+			<RangeSlider bind:slider bind:values {step} min={+min} max={+max} />
 		</div>
-		<span>{max}</span>
-		<span class="mx-2"><Badge large color="blue">{values[0]}</Badge></span>
+		<span class={css?.limits?.class ?? ''} style={css?.limits?.style ?? ''}>
+			{+max}
+		</span>
+		<span class="mx-2">
+			<span
+				class={twMerge(
+					'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5',
+					css?.value?.class ?? ''
+				)}
+				style={css?.value?.style ?? ''}
+			>
+				{values[0]}
+			</span>
+		</span>
 	</div>
 </AlignWrapper>

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

@@ -1,11 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
         configuration: Record<string, AppInput>;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'handle' | 'limits' | 'value' | 'bar'> | undefined;
+        render: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/apps/components/inputs/AppTextInput.svelte

@@ -1,37 +1,71 @@
 <script>import { getContext } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+import { concatCustomCss } from '../../utils';
 import AlignWrapper from '../helpers/AlignWrapper.svelte';
-import InputDefaultValue from '../helpers/InputDefaultValue.svelte';
 import InputValue from '../helpers/InputValue.svelte';
 export let id;
 export let configuration;
 export let inputType = 'text';
 export let verticalAlignment = undefined;
 export const staticOutputs = ['result'];
-const { worldStore } = getContext('AppEditorContext');
-let input;
+export let customCss = undefined;
+export let appCssKey = 'textinputcomponent';
+export let render;
+const { app, worldStore, selectedComponent } = getContext('AppViewerContext');
 let placeholder = undefined;
 let defaultValue = undefined;
+let value = undefined;
 $: outputs = $worldStore?.outputsById[id];
-function handleInput() {
-    outputs?.result.set(input.value);
+$: handleDefault(defaultValue);
+$: outputs?.result.set(value);
+function handleDefault(defaultValue) {
+    value = defaultValue;
 }
-$: input && handleInput();
+$: css = concatCustomCss($app.css?.[appCssKey], customCss);
 </script>
 
 <InputValue {id} input={configuration.placeholder} bind:value={placeholder} />
 <InputValue {id} input={configuration.defaultValue} bind:value={defaultValue} />
-<InputDefaultValue bind:input {defaultValue} />
 
-<AlignWrapper {verticalAlignment}>
-	<input
-		class="mx-0.5"
-		on:focus={(e) => {
-			e?.stopPropagation()
-			window.dispatchEvent(new Event('pointerup'))
-		}}
-		type={inputType}
-		bind:this={input}
-		on:input={handleInput}
-		{placeholder}
-	/>
+<AlignWrapper {render} {verticalAlignment}>
+	{#if inputType === 'password'}
+		<input
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				css?.input?.class ?? ''
+			)}
+			style={css?.input?.style ?? ''}
+			on:pointerdown|stopPropagation
+			on:focus={() => ($selectedComponent = id)}
+			type="password"
+			bind:value
+			{placeholder}
+		/>
+	{:else if inputType === 'text'}
+		<input
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				css?.input?.class ?? ''
+			)}
+			style={css?.input?.style ?? ''}
+			on:pointerdown|stopPropagation
+			on:focus={() => ($selectedComponent = id)}
+			type="text"
+			bind:value
+			{placeholder}
+		/>
+	{:else if inputType === 'email'}
+		<input
+			class={twMerge(
+				'windmillapp w-full py-1.5 text-sm focus:ring-indigo-100 px-2 mx-0.5',
+				css?.input?.class ?? ''
+			)}
+			style={css?.input?.style ?? ''}
+			on:pointerdown|stopPropagation
+			on:focus={() => ($selectedComponent = id)}
+			type="email"
+			bind:value
+			{placeholder}
+		/>
+	{/if}
 </AlignWrapper>

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { AppInput } from '../../inputType';
+import type { ComponentCustomCSS } from '../../types';
 declare const __propDef: {
     props: {
         id: string;
@@ -7,8 +8,13 @@ declare const __propDef: {
         inputType?: string | undefined;
         verticalAlignment?: 'top' | 'center' | 'bottom' | undefined;
         staticOutputs?: string[] | undefined;
+        customCss?: ComponentCustomCSS<'input'> | undefined;
+        appCssKey?: "textinputcomponent" | "passwordinputcomponent" | "emailinputcomponent" | undefined;
+        render: boolean;
     };
     events: {
+        pointerdown: PointerEvent;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};