windmill-components 1.309.7 → 1.339.2

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/AppSelect.svelte

@@ -41,12 +41,24 @@ let resolvedConfig = initConfig(components['selectcomponent'].initialData.config
 let outputs = initOutput($worldStore, id, {
     result: undefined
 });
-let value = noDefault ? undefined : outputs?.result.peak();
+// The library expects double quotes around the value
+let value = noDefault
+    ? undefined
+    : outputs?.result.peak()
+        ? JSON.stringify(outputs?.result.peak())
+        : undefined;
 $: resolvedConfig.items && handleItems();
 let listItems = [];
 function handleItems() {
     listItems = Array.isArray(resolvedConfig.items)
         ? resolvedConfig.items.map((item) => {
+            if (!item || typeof item !== 'object') {
+                console.error('Select component items should be an array of objects');
+                return {
+                    label: 'not object',
+                    value: 'not object'
+                };
+            }
             return {
                 label: item?.label ?? 'undefined',
                 value: item?.value != undefined ? JSON.stringify(item.value) : 'undefined'
@@ -60,7 +72,7 @@ function handleItems() {
     else if (listItems.length > 0 && resolvedConfig?.preselectFirst) {
         rawValue = resolvedConfig.items[0].value;
     }
-    if (rawValue !== undefined) {
+    if (rawValue !== undefined && rawValue !== null) {
         value = JSON.stringify(rawValue);
         outputs?.result.set(rawValue);
     }
@@ -170,11 +182,12 @@ let filterText = '';
 			}
 		}}
 	>
-		{#if Array.isArray(listItems) && listItems.every((x) => typeof x == 'object' && typeof x['label'] == 'string' && `value` in x)}
+		{#if Array.isArray(listItems) && listItems.every((x) => x && typeof x == 'object' && typeof x['label'] == 'string' && `value` in x)}
 			<Select
 				inAppEditor={true}
-				--border-radius="0"
-				--border-color="#999"
+				--border-radius="0.250rem"
+				--clear-icon-color="#6b7280"
+				--border={$darkMode ? '1px solid #6b7280' : '1px solid #d1d5db'}
 				bind:filterText
 				on:filter={handleFilter}
 				on:clear={onClear}
@@ -182,11 +195,9 @@ let filterText = '';
 				items={listItems}
 				listAutoWidth={resolvedConfig.fullWidth}
 				inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles}
-				containerStyles={'border-color: #999;' +
-					($darkMode
-						? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
-						: SELECT_INPUT_DEFAULT_STYLE.containerStyles) +
-					css?.input?.style}
+				containerStyles={($darkMode
+					? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark
+					: SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style}
 				{value}
 				class={css?.input?.class}
 				placeholder={resolvedConfig.placeholder}

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

@@ -55,7 +55,6 @@ $: if (css && slider && lastStyle !== css?.handle?.style) {
         handle.style.cssText = css?.handle?.style ?? '';
     }
 }
-let width = 0;
 const spanClass = 'text-center text-sm font-medium bg-blue-100 text-blue-800 rounded px-2.5 py-0.5';
 function computeWidth() {
     let maxValue = resolvedConfig.max ?? 0 + (resolvedConfig.step ?? 0);
@@ -67,7 +66,6 @@ function computeWidth() {
         span.className = spanClass;
         span.textContent = maxValue.toString();
         document.body.appendChild(span);
-        width = span?.offsetWidth;
         document.body.removeChild(span);
     }
 }
@@ -98,15 +96,7 @@ $: if (resolvedConfig.max != undefined && resolvedConfig.step && render) {
 <InitializeComponent {id} />
 
 <AlignWrapper {render} hFull {verticalAlignment}>
-	<div
-		class="flex {resolvedConfig.vertical ? 'flex-col' : ''} items-center w-full h-full gap-1 px-1"
-	>
-		<span
-			class={twMerge(css?.limits?.class, 'font-mono wm-slider-limits')}
-			style={css?.limits?.style ?? ''}
-		>
-			{resolvedConfig.vertical ? +(resolvedConfig?.max ?? 0) : +(resolvedConfig?.min ?? 0)}
-		</span>
+	<div class="flex {resolvedConfig.vertical ? 'flex-col' : ''} items-center w-full h-full gap-1">
 		<div
 			class={twMerge(
 				'grow',
@@ -114,39 +104,44 @@ $: if (resolvedConfig.max != undefined && resolvedConfig.step && render) {
 				'font-mono wm-slider-bar',
 				resolvedConfig?.vertical ? 'h-full' : 'w-full'
 			)}
-			style={css?.bar?.style}
+			style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; {css?.bar?.style ??
+				''}"
 			on:pointerdown|stopPropagation={() => ($selectedComponent = [id])}
 		>
 			<RangeSlider
+				id="slider-input"
 				springValues={{ stiffness: 1, damping: 1 }}
 				vertical={resolvedConfig.vertical}
 				bind:slider
 				bind:values
-				step={resolvedConfig.step}
+				step={resolvedConfig.step ?? 1}
+				pipstep={(resolvedConfig.axisStep ?? 1) / (resolvedConfig.step ?? 1)}
 				min={+(resolvedConfig?.min ?? 0)}
 				max={+(resolvedConfig?.max ?? 0)}
 				disabled={resolvedConfig.disabled}
+				pips
+				float
+				first="label"
+				last="label"
 			/>
 		</div>
-		<span
-			class={twMerge(css?.limits?.class, 'font-mono wm-slider-limits')}
-			style={css?.limits?.style ?? ''}
-		>
-			{resolvedConfig.vertical ? +(resolvedConfig?.min ?? 0) : +(resolvedConfig?.max ?? 1)}
-		</span>
-		<span class="mx-2">
-			<span
-				class={twMerge(spanClass, css?.value?.class ?? '', 'font-mono wm-slider-value')}
-				style={`${css?.value?.style ?? ''} ${width ? `width: ${width}px;` : ''}`}
-			>
-				{values[0]}
-			</span>
-		</span>
 	</div>
 </AlignWrapper>
 
-<style global>
-	:global(.rangeSlider.vertical) {
-		height: 80%;
-		min-height: 10px !important;
+<style>
+	:global(#slider-input.rangeSlider) {
+		font-size: 12px;
+		text-transform: uppercase;
+	}
+
+	:global(#slider-input.rangeSlider .rangeHandle) {
+		width: 2em;
+		height: 2em;
+	}
+
+	:global(#slider-input.rangeSlider .rangeFloat) {
+		opacity: 1;
+		background: transparent;
+		top: 50%;
+		transform: translate(-50%, -50%);
 	}</style>

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

@@ -43,7 +43,7 @@ function handleDefault(defaultValue) {
     value = defaultValue;
 }
 let css = initCss($app.css?.[appCssKey], customCss);
-$: classInput = twMerge('windmillapp w-full  py-1.5 text-sm focus:ring-indigo-100 px-2', css?.input?.class ?? '', resolvedConfig.disabled ? 'placeholder:text-gray-400 dark:placeholder:text-gray-600' : '', 'wm-text-input');
+$: classInput = twMerge('windmillapp w-full py-1.5 px-2 text-sm', 'app-editor-input', css?.input?.class ?? '', resolvedConfig.disabled ? 'placeholder:text-gray-400 dark:placeholder:text-gray-600' : '', 'wm-input', 'wm-text-input');
 let beforeIconComponent;
 let afterIconComponent;
 $: resolvedConfig.beforeIcon && beforeIconComponent && handleBeforeIcon();