fix(frontend): improve disable style of the select component (#3938)

* feat(frontend): improve disable style of the select component

* fix(frontend): improve inputs style

* fix(frontend): fix build

* fix(frontend): revert unnecessary changes

frontend/src/lib/assets/app.css

@@ -145,5 +145,7 @@
 
 .app-editor-input {
 	@apply rounded-component border border-gray-300 dark:border-gray-500 focus:border-gray-300 focus:dark:border-gray-500 focus:!ring-1 focus:!ring-blue-300;
-	@apply placeholder:text-gray-400 dark:placeholder:text-gray-600;
+	@apply placeholder:text-gray-400 dark:placeholder:text-gray-200;
+	@apply bg-surface;
+	@apply disabled:placeholder:text-gray-200 disabled:placeholder:dark:text-gray-500 disabled:text-gray-200 disabled:dark:text-gray-500 disabled:border-gray-200 disabled:dark:border-gray-600;
 }

frontend/src/lib/components/DateTimeInput.svelte

@@ -2,6 +2,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Button } from './common'
 	import { Clock } from 'lucide-svelte'
+	import { twMerge } from 'tailwind-merge'
 	// import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	// import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 
@@ -11,6 +12,8 @@
 	export let useDropdown: boolean = false
 	export let minDate: string | undefined = undefined
 	export let maxDate: string | undefined = undefined
+	export let disabled: boolean | undefined = undefined
+	export let inputClass: string | undefined = undefined
 
 	let date: string | undefined = undefined
 	let time: string | undefined = undefined
@@ -72,17 +75,25 @@
 		type="date"
 		bind:value={date}
 		{autofocus}
-		class="!w-3/4 app-editor-input"
+		{disabled}
+		class={twMerge('h-8 text-sm !w-3/4 ', inputClass)}
 		min={minDate}
 		max={maxDate}
 	/>
-	<input type="time" bind:value={time} class="!w-1/4 min-w-[100px] app-editor-input" />
+	<input
+		type="time"
+		bind:value={time}
+		class={twMerge('h-8 text-sm !w-1/4 min-w-[100px] ', inputClass)}
+		{disabled}
+	/>
 	<Button
 		variant="border"
 		color="light"
+		wrapperClasses="h-8"
 		startIcon={{
 			icon: Clock
 		}}
+		{disabled}
 		size="xs"
 		portalTarget={`#${randomId}`}
 		dropdownItems={useDropdown

frontend/src/lib/components/apps/components/inputs/AppDateTimeInput.svelte

@@ -138,6 +138,7 @@
 					e.stopPropagation()
 					$selectedComponent = [id]
 				}}
+				inputClass={twMerge('windmillapp w-full py-1.5 px-2 text-sm', 'app-editor-input')}
 				minDate={resolvedConfig.minDateTime
 					? formatDate(resolvedConfig.minDateTime, 'yyyy-MM-dd')
 					: undefined}
@@ -145,6 +146,7 @@
 					? formatDate(resolvedConfig.maxDateTime, 'yyyy-MM-dd')
 					: undefined}
 				on:focus={() => ($selectedComponent = [id])}
+				disabled={resolvedConfig.disabled}
 			/>
 		{/if}
 	</div>

frontend/src/lib/components/apps/components/inputs/AppFileInput.svelte

@@ -2,35 +2,36 @@
 	import { getContext } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 	import { FileInput } from '../../../common'
-	import { initOutput } from '../../editor/appUtils'
+	import { initConfig, initOutput } from '../../editor/appUtils'
 	import type { AppViewerContext, ComponentCustomCSS, RichConfigurations } from '../../types'
 	import { initCss } from '../../utils'
-	import InputValue from '../helpers/InputValue.svelte'
 	import InitializeComponent from '../helpers/InitializeComponent.svelte'
 	import ResolveStyle from '../helpers/ResolveStyle.svelte'
+	import { components } from '../../editor/component'
+	import ResolveConfig from '../helpers/ResolveConfig.svelte'
 
 	export let id: string
 	export let configuration: RichConfigurations
 	export let customCss: ComponentCustomCSS<'fileinputcomponent'> | undefined = undefined
 	export let render: boolean
 	export let onFileChange: string[] | undefined = undefined
+	export let extraKey: string | undefined = undefined
 
 	const { app, worldStore, componentControl, mode, runnableComponents } =
 		getContext<AppViewerContext>('AppViewerContext')
 
-	let acceptedFileTypes: string[] | undefined = undefined
-	let allowMultiple: boolean | undefined = undefined
-	let text: string | undefined = undefined
-	let includeMimeType: boolean | undefined = undefined
-	let submittedFileText: string | undefined = undefined
-
 	let outputs = initOutput($worldStore, id, {
 		result: [] as { name: string; data: string }[] | undefined
 	})
 
+	let resolvedConfig = initConfig(
+		components['fileinputcomponent'].initialData.configuration,
+		configuration
+	)
+
 	// Receives Base64 encoded strings from the input component
 	async function handleChange(files: { name: string; data: string }[] | undefined) {
-		if (includeMimeType === false) {
+		if (resolvedConfig?.includeMimeType === false) {
 			files = files?.map((file) => {
 				const [_, data] = file.data.split('base64,')
 				return { name: file.name, data }
@@ -73,21 +74,15 @@
 	/>
 {/each}
 
-<InputValue
-	key="accepted"
-	{id}
-	input={configuration.acceptedFileTypes}
-	bind:value={acceptedFileTypes}
-/>
-<InputValue key="multiple" {id} input={configuration.allowMultiple} bind:value={allowMultiple} />
-<InputValue key="text" {id} input={configuration.text} bind:value={text} />
-<InputValue key="mime" {id} input={configuration.includeMimeType} bind:value={includeMimeType} />
-<InputValue
-	key="submittedFileText"
-	{id}
-	input={configuration.submittedFileText}
-	bind:value={submittedFileText}
-/>
+{#each Object.keys(components['fileinputcomponent'].initialData.configuration) as key (key)}
+	<ResolveConfig
+		{id}
+		{extraKey}
+		{key}
+		bind:resolvedConfig={resolvedConfig[key]}
+		configuration={configuration[key]}
+	/>
+{/each}
 
 <InitializeComponent {id} />
 
@@ -95,8 +90,10 @@
 	<div class="w-full h-full">
 		<FileInput
 			bind:this={fileInput}
-			accept={acceptedFileTypes?.length ? acceptedFileTypes?.join(', ') : undefined}
-			multiple={allowMultiple}
+			accept={resolvedConfig?.acceptedFileTypes?.length
+				? resolvedConfig?.acceptedFileTypes?.join(', ')
+				: undefined}
+			multiple={resolvedConfig?.allowMultiple}
 			convertTo="base64"
 			returnFileNames
 			on:change={({ detail }) => {
@@ -104,10 +101,11 @@
 			}}
 			class={twMerge('w-full h-full', css?.container?.class, 'wm-file-input')}
 			style={css?.container?.style}
-			submittedText={submittedFileText}
+			submittedText={resolvedConfig?.submittedFileText}
+			disabled={resolvedConfig.disabled}
 			bind:files
 		>
-			{text}
+			{resolvedConfig?.text}
 		</FileInput>
 	</div>
 {/if}

frontend/src/lib/components/apps/components/inputs/AppTextInput.svelte

@@ -76,7 +76,6 @@
 		'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'
 	)

frontend/src/lib/components/apps/editor/component/components.ts

@@ -2189,6 +2189,11 @@ This is a paragraph.
 					value: true,
 
 					tooltip: 'Set the width of the options popup to 100% of the select width'
+				},
+				disabled: {
+					type: 'static',
+					fieldType: 'boolean',
+					value: false
 				}
 			}
 		}
@@ -2627,6 +2632,11 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 					type: 'static',
 					value: undefined,
 					fieldType: 'datetime'
+				},
+				disabled: {
+					type: 'static',
+					value: false,
+					fieldType: 'boolean'
 				}
 			}
 		}
@@ -2893,6 +2903,11 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 					type: 'static',
 					value: 'Selected file',
 					fieldType: 'text'
+				},
+				disabled: {
+					type: 'static',
+					value: false,
+					fieldType: 'boolean'
 				}
 			}
 		}
@@ -3551,7 +3566,12 @@ See date-fns format for more information. By default, it is 'dd.MM.yyyy HH:mm'
 								fieldType: 'template',
 								connections: [],
 								onDemandOnly: true
-							} as EvalV2AppInput
+							} as EvalV2AppInput,
+							disabled: {
+								type: 'static',
+								value: false,
+								fieldType: 'boolean'
+							}
 						}
 					}
 				} as const

frontend/src/lib/components/apps/svelte-select/lib/Select.svelte

@@ -668,7 +668,6 @@
 			bind:value={filterText}
 			placeholder={placeholderText}
 			style={inputStyles}
-			{disabled}
 		/>
 	</div>
 
@@ -867,7 +866,7 @@
 
 	.disabled input::placeholder {
 		color: var(--disabled-placeholder-color, #c1c6cc);
-		opacity: var(--disabled-placeholder-opacity, 1);
+		opacity: var(--disabled-placeholder-opacity, 0.8);
 	}
 
 	.selected-item {

frontend/src/lib/components/common/fileInput/FileInput.svelte

@@ -18,6 +18,7 @@
 	export let returnFileNames = false
 	export let submittedText: string | undefined = undefined
 	export let defaultFile: string | undefined = undefined
+	export let disabled: boolean | undefined = undefined
 
 	const dispatch = createEventDispatcher()
 	let input: HTMLInputElement
@@ -133,6 +134,7 @@
 	on:dragover={handleDragOver}
 	on:drop={handleDrop}
 	{style}
+	{disabled}
 >
 	{#if !hideIcon && !files}
 		<FileUp size={iconSize} class="mb-2" />

frontend/src/lib/defaults.ts

@@ -2,5 +2,5 @@ export const SELECT_INPUT_DEFAULT_STYLE = {
 	inputStyles: 'border-radius: 0;',
 	containerStyles: '--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem;',
 	containerStylesDark:
-		'--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --background: #3b4252; --disabled-background: #2a2f3a; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
+		'--height: 34px; --padding: 0 0 0 8px; --font-size: 0.875rem; --disabled-border-color: #3e4c60; --background: #2e3440; --disabled-background: transparent; --list-background: #3b4252;--item-is-active-bg:#434c5e;--item-hover-bg:#4c566a;'
 } as const