windmill-components 1.558.4 → 1.596.0

package/package/components/select/MultiSelect.svelte

@@ -6,8 +6,8 @@ import CloseButton from '../common/CloseButton.svelte';
 import DraggableTags from './DraggableTags.svelte';
 import { Search } from 'lucide-svelte';
 import { twMerge } from 'tailwind-merge';
-import TextInput, { inputBorderClass } from '../text_input/TextInput.svelte';
-let { items, placeholder = 'Select items', value = $bindable(), class: className = '', style, listAutoWidth = true, disabled = false, disablePortal = false, createText, reorderable = true, noItemsMsg, selectedUlClass = '', placeholderClass = '', allowClear = true, hideMainClearBtn = false, onOpen, groupBy, sortBy, onCreateItem } = $props();
+import TextInput, { inputBaseClass, inputBorderClass, inputSizeClasses } from '../text_input/TextInput.svelte';
+let { items, placeholder = 'Select items', value = $bindable(), class: className = '', style, listAutoWidth = true, disabled = false, disablePortal = false, createText, reorderable = true, noItemsMsg, selectedUlClass = '', placeholderClass = '', allowClear = true, hideMainClearBtn = false, size = 'md', id, error = false, onOpen, groupBy, sortBy, onCreateItem } = $props();
 let filterText = $state('');
 let open = $state(false);
 let wrapperEl = $state();
@@ -40,13 +40,18 @@ function clearValue() {
     filterText = '';
     value = [];
 }
+export function getFilteredInputText() {
+    return filterText;
+}
 </script>
 
 <div
 	bind:this={wrapperEl}
 	class={twMerge(
-		'relative min-h-10 flex items-center w-full bg-surface-secondary !text-secondary rounded-md',
-		inputBorderClass({ forceFocus: open && !disabled }),
+		'flex items-center flex-wrap relative',
+		inputBaseClass,
+		inputSizeClasses[size],
+		inputBorderClass({ forceFocus: open && !disabled, error }),
 		disabled ? 'pointer-events-none' : '',
 		open && !disabled ? 'open' : '',
 		disabled ? 'disabled' : '',
@@ -55,20 +60,19 @@ function clearValue() {
 	{style}
 	onpointerup={() => (open = true)}
 	use:clickOutside={{ onClickOutside: () => (open = false) }}
+	{id}
 >
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 
 	{#if value.length === 0}
-		<span
-			class={twMerge('text-sm ml-4 h-full flex items-center flex-1 text-hint', placeholderClass)}
-		>
+		<span class={twMerge('text-xs h-full flex items-center flex-1 text-hint', placeholderClass)}>
 			{placeholder}
 		</span>
 	{:else}
 		<ul
 			class={twMerge(
-				'overflow-clip overflow-x-hidden h-full cursor-pointer items-center flex flex-wrap gap-1 py-0.5 px-0.5 flex-1 text-primary',
+				'overflow-clip overflow-x-hidden h-full cursor-pointer items-center flex flex-wrap gap-1 py-0.5 flex-1 text-primary',
 				selectedUlClass
 			)}
 			role="list"
@@ -121,7 +125,7 @@ function clearValue() {
 						}}
 						class="!pr-7 !bg-surface"
 					/>
-					<Search size={16} class="absolute right-2 text-tertiary" />
+					<Search size={16} class="absolute right-2 text-primary" />
 				</div>
 			{/if}
 		{/snippet}

package/package/components/select/MultiSelect.svelte.d.ts

@@ -1,3 +1,4 @@
+import { inputSizeClasses } from '../text_input/TextInput.svelte';
 declare function $$render<Item extends {
     label?: string;
     value: any;
@@ -21,13 +22,18 @@ declare function $$render<Item extends {
         placeholderClass?: string;
         allowClear?: boolean;
         hideMainClearBtn?: boolean;
+        size?: keyof typeof inputSizeClasses;
+        id?: string;
+        error?: boolean;
         groupBy?: (item: Item) => string;
         sortBy?: (a: Item, b: Item) => number;
         onOpen?: () => void;
         onClear?: () => void;
         onCreateItem?: (value: string) => void;
     };
-    exports: {};
+    exports: {
+        getFilteredInputText: () => string;
+    };
     bindings: "value";
     slots: {};
     events: {};
@@ -40,7 +46,9 @@ declare class __sveltets_Render<Item extends {
     events(): ReturnType<typeof $$render<Item>>['events'];
     slots(): ReturnType<typeof $$render<Item>>['slots'];
     bindings(): "value";
-    exports(): {};
+    exports(): {
+        getFilteredInputText: () => string;
+    };
 }
 interface $$IsomorphicComponent {
     new <Item extends {

package/package/components/select/Select.svelte

@@ -1,4 +1,7 @@
-<script lang="ts" generics="Item extends { label?: string; value: any; subtitle?: string }">import { clickOutside } from '../../utils';
+<script
+	lang="ts"
+	generics="Item extends { label?: string; value: any; subtitle?: string; disabled?: boolean }"
+>import { clickOutside } from '../../utils';
 import { twMerge } from 'tailwind-merge';
 import CloseButton from '../common/CloseButton.svelte';
 import { Loader2 } from 'lucide-svelte';
@@ -6,9 +9,11 @@ import { untrack } from 'svelte';
 import { getLabel, processItems } from './utils.svelte';
 import SelectDropdown from './SelectDropdown.svelte';
 import { deepEqual } from 'fast-equals';
-import { inputBaseClass, inputBorderClass } from '../text_input/TextInput.svelte';
-let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, error = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, itemLabelWrapperClasses, itemButtonWrapperClasses, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet, endSnippet, bottomSnippet } = $props();
+import { inputBaseClass, inputBorderClass, inputSizeClasses } from '../text_input/TextInput.svelte';
+import { ButtonType } from '../common/button/model';
+let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, error = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), id, itemLabelWrapperClasses, itemButtonWrapperClasses, size = 'md', showPlaceholderOnOpen = false, transformInputSelectedText, groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem, startSnippet, endSnippet, bottomSnippet } = $props();
 let disabled = $derived(_disabled || (loading && !value));
+let iconSize = $derived(ButtonType.UnifiedIconSizes[size]);
 let inputEl = $state();
 let processedItems = $derived.by(() => {
     let args = { items, createText, filterText, groupBy, onCreateItem, sortBy };
@@ -40,6 +45,10 @@ function clearValue() {
     else
         value = undefined;
 }
+let inputText = $derived.by(() => {
+    let text = valueEntry?.label ?? getLabel({ value }) ?? '';
+    return transformInputSelectedText?.(text) ?? text;
+});
 </script>
 
 <div
@@ -51,15 +60,20 @@ function clearValue() {
 >
 	{#if loading}
 		<div class="absolute z-10 right-2 h-full flex items-center">
-			<Loader2 size={18} class="animate-spin" />
+			<Loader2 size={iconSize} class="animate-spin" />
 		</div>
 	{:else if clearable && !disabled && value}
 		<div class="absolute z-10 right-2 h-full flex items-center">
-			<CloseButton class="bg-transparent text-hint" noBg small on:close={clearValue} />
+			<CloseButton
+				class="bg-transparent text-secondary hover:text-primary"
+				noBg
+				small
+				on:close={clearValue}
+			/>
 		</div>
 	{:else if RightIcon}
 		<div class="absolute z-10 right-2 h-full flex items-center">
-			<RightIcon size={18} class="text-tertiary/35" />
+			<RightIcon size={iconSize} class="text-secondary" />
 		</div>
 	{/if}
 	<!-- svelte-ignore a11y_autofocus -->
@@ -67,17 +81,22 @@ function clearValue() {
 		{autofocus}
 		{disabled}
 		type="text"
-		bind:value={() => filterText, (v) => (filterText = v)}
+		bind:value={() => (open ? filterText : inputText), (v) => open && (filterText = v)}
 		placeholder={loading && !value
 			? 'Loading...'
-			: (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
+			: value && !showPlaceholderOnOpen
+				? inputText
+				: placeholder}
 		style={containerStyle}
 		class={twMerge(
 			inputBaseClass,
+			inputSizeClasses[size],
+			ButtonType.UnifiedHeightClasses[size],
 			inputBorderClass({ error, forceFocus: open }),
 			'w-full',
 			open ? '' : 'cursor-pointer',
-			!loading && value && !disabled ? '!placeholder-secondary' : 'placeholder-hint',
+			// Show value as placeholder when opening the dropdown and the search is empty
+			!value ? 'placeholder-hint' : '!placeholder-primary',
 			(clearable || RightIcon) && !disabled && value ? 'pr-8' : '',
 			inputClass ?? ''
 		)}

package/package/components/select/Select.svelte.d.ts

@@ -4,6 +4,7 @@ declare function $$render<Item extends {
     label?: string;
     value: any;
     subtitle?: string;
+    disabled?: boolean;
 }>(): {
     props: {
         items?: Item[];
@@ -27,6 +28,9 @@ declare function $$render<Item extends {
         id?: string;
         itemLabelWrapperClasses?: string;
         itemButtonWrapperClasses?: string;
+        size?: "sm" | "md" | "lg";
+        showPlaceholderOnOpen?: boolean;
+        transformInputSelectedText?: (text: string) => string;
         groupBy?: (item: Item) => string;
         sortBy?: (a: Item, b: Item) => number;
         onFocus?: () => void;
@@ -54,6 +58,7 @@ declare class __sveltets_Render<Item extends {
     label?: string;
     value: any;
     subtitle?: string;
+    disabled?: boolean;
 }> {
     props(): ReturnType<typeof $$render<Item>>['props'];
     events(): ReturnType<typeof $$render<Item>>['events'];
@@ -66,6 +71,7 @@ interface $$IsomorphicComponent {
         label?: string;
         value: any;
         subtitle?: string;
+        disabled?: boolean;
     }>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
         $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
     } & ReturnType<__sveltets_Render<Item>['exports']>;
@@ -73,6 +79,7 @@ interface $$IsomorphicComponent {
         label?: string;
         value: any;
         subtitle?: string;
+        disabled?: boolean;
     }>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
@@ -81,5 +88,6 @@ type Select<Item extends {
     label?: string;
     value: any;
     subtitle?: string;
+    disabled?: boolean;
 }> = InstanceType<typeof Select<Item>>;
 export default Select;

package/package/components/select/SelectDropdown.svelte

@@ -2,6 +2,7 @@
 import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
 import { untrack } from 'svelte';
 import { twMerge } from 'tailwind-merge';
+import { PlusIcon } from 'lucide-svelte';
 let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', itemLabelWrapperClasses = '', itemButtonWrapperClasses = '', header, getInputRect, onSelectValue, startSnippet, endSnippet, bottomSnippet } = $props();
 let processedItems = $derived(!filterText
     ? _processedItems
@@ -102,7 +103,7 @@ $effect(() => {
 		<div
 			class={twMerge(
 				disablePortal ? 'absolute' : 'fixed',
-				'z-[5001] text-tertiary text-sm select-none',
+				'z-[5002] text-primary text-sm select-none',
 				dropdownPos.isBelow ? '' : 'flex flex-col justify-end',
 				uiState.visible ? '' : 'pointer-events-none',
 				className
@@ -113,22 +114,22 @@ $effect(() => {
 		>
 			<div
 				class={twMerge(
-					'overflow-clip rounded-md bg-surface-secondary shadow-lg transition-height',
+					'overflow-clip rounded-md drop-shadow-base transition-height',
 					dropdownPos.isBelow ? '' : 'flex flex-col justify-end'
 				)}
 				style="height: {uiState.visible ? dropdownPos.height : 0}px;"
 			>
-				<div bind:this={listEl} class="flex flex-col max-h-64 border rounded-md overflow-clip">
+				<div bind:this={listEl} class="flex flex-col max-h-64 rounded-md bg-surface-input">
 					{@render header?.()}
 					{#if processedItems?.length === 0}
-						<div class="py-8 px-4 text-center text-primary">{noItemsMsg}</div>
+						<div class="py-8 px-4 text-center text-primary text-xs">{noItemsMsg}</div>
 					{/if}
 					<ul class={twMerge('flex-1 overflow-y-auto flex flex-col', ulClass)}>
 						{#each processedItems ?? [] as item, itemIndex}
 							{#if (item.__select_group && itemIndex === 0) || processedItems?.[itemIndex - 1]?.__select_group !== item.__select_group}
 								<li
 									class={twMerge(
-										'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b',
+										'mx-4 pb-1 mb-2 text-xs font-semibold text-primary border-b border-border-light',
 										itemIndex === 0 ? 'mt-3' : 'mt-6'
 									)}
 								>
@@ -138,23 +139,30 @@ $effect(() => {
 							<li>
 								<button
 									class={twMerge(
-										'py-2 px-4 w-full font-normal text-left text-primary',
-										itemIndex === keyArrowPos ? 'bg-surface-hover' : '',
-										item.value === value ? 'bg-surface-selected' : 'hover:bg-surface-hover',
-										itemButtonWrapperClasses
+										'py-2 px-4 w-full font-normal text-left text-primary text-xs',
+										itemIndex === keyArrowPos || item.value === value
+											? 'bg-surface-secondary dark:bg-surface-tertiary'
+											: 'hover:bg-surface-hover',
+										endSnippet || item.__is_create ? 'flex items-center justify-between gap-2' : '',
+										itemButtonWrapperClasses,
+										item.disabled ? 'cursor-not-allowed text-disabled' : ''
 									)}
 									onclick={(e) => {
 										e.stopImmediatePropagation()
-										onSelectValue(item)
+										if (!item.disabled) onSelectValue(item)
 									}}
 								>
 									{@render startSnippet?.({ item, close: () => (open = false) })}
 									<span class={itemLabelWrapperClasses}>
 										{item.label || '\xa0'}
 									</span>
-									{@render endSnippet?.({ item, close: () => (open = false) })}
+									{#if item.__is_create}
+										<PlusIcon class="inline ml-auto" size={16} />
+									{:else}
+										{@render endSnippet?.({ item, close: () => (open = false) })}
+									{/if}
 									{#if item.subtitle}
-										<div class="text-xs text-tertiary">{item.subtitle}</div>
+										<div class="text-2xs text-secondary">{item.subtitle}</div>
 									{/if}
 								</button>
 							</li>

package/package/components/select/utils.svelte.d.ts

@@ -15,6 +15,7 @@ export type ProcessedItem<T> = {
     label: string;
     value: T;
     subtitle?: string;
+    disabled?: boolean;
 };
 export declare function getLabel<T>(item: {
     label?: string;

package/package/components/select/utils.svelte.js

@@ -31,9 +31,8 @@ export function getLabel(item) {
         return item.value;
     if (typeof item.value == 'number' || typeof item.value == 'boolean')
         return item.value.toString();
-    if (item.value == null) {
+    if (item.value == null)
         return undefined;
-    }
     return JSON.stringify(item.value);
 }
 export function safeSelectItems(list) {

package/package/components/settings/AIUserSettings.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { codeCompletionSessionEnabled, metadataCompletionEnabled, stepInputCompletionEnabled } from '../../stores';
 import { getLocalSetting, storeLocalSetting } from '../../utils';
 import Toggle from '../Toggle.svelte';
+import UserAIPromptsSettings from './UserAIPromptsSettings.svelte';
 $effect(() => {
     loadSettings();
 });
@@ -17,10 +18,10 @@ function updateSetting(store, value, setting) {
 }
 </script>
 
-<div>
-	<h2 class="border-b">AI user settings</h2>
+<div class="border border-border-light rounded-md p-4 h-full">
+	<h2 class="text-emphasis text-sm font-semibold mb-2">AI user settings</h2>
 
-	<div class="flex flex-col gap-4 mt-2">
+	<div class="flex flex-col gap-4">
 		<Toggle
 			on:change={(e) => {
 				updateSetting(codeCompletionSessionEnabled, e.detail, 'codeCompletionSessionEnabled')
@@ -31,6 +32,7 @@ function updateSetting(store, value, setting) {
 				rightTooltip: 'AI completion in the code editors'
 			}}
 		/>
+
 		<Toggle
 			on:change={(e) => {
 				updateSetting(metadataCompletionEnabled, e.detail, 'metadataCompletionEnabled')
@@ -52,4 +54,6 @@ function updateSetting(store, value, setting) {
 			}}
 		/>
 	</div>
+
+	<UserAIPromptsSettings />
 </div>

package/package/components/settings/ChangeWorkspaceColor.svelte

@@ -42,8 +42,8 @@ async function changeWorkspaceColor() {
 }
 </script>
 
-<div>
-	<p class="font-semibold text-sm">Workspace color</p>
+<div class="flex flex-col gap-1">
+	<p class="font-medium text-xs text-emphasis">Workspace color</p>
 	<div class="flex flex-row gap-0.5 items-center">
 		{#if $workspaceColor}
 			<div
@@ -51,7 +51,7 @@ async function changeWorkspaceColor() {
 				style="background-color: {$workspaceColor}"
 			></div>
 		{:else}
-			<span class="text-xs text-secondary">No color set</span>
+			<span class="text-xs font-normal text-primary">No color set</span>
 		{/if}
 		<Button
 			on:click={() => {
@@ -66,7 +66,9 @@ async function changeWorkspaceColor() {
 			}}
 		/>
 	</div>
-	<p class="italic text-xs"> Color to identify the current workspace in the list of workspaces </p>
+	<p class="text-2xs text-secondary font-normal">
+		Color to identify the current workspace in the list of workspaces
+	</p>
 </div>
 
 <Modal bind:open title="Change Workspace Color">

package/package/components/settings/ChangeWorkspaceId.svelte

@@ -52,10 +52,10 @@ async function renameWorkspace() {
 export let open = false;
 </script>
 
-<div>
-	<p class="font-semibold text-sm">Workspace ID</p>
+<div class="flex flex-col gap-1">
+	<p class="font-medium text-xs text-emphasis">Workspace ID</p>
 	<div class="flex flex-row gap-0.5 items-center">
-		<p class="text-sm text-secondary">{$workspaceStore ?? ''}</p>
+		<p class="text-xs font-normal text-primary">{$workspaceStore ?? ''}</p>
 		{#if !isCloudHosted() || $superadmin}
 			<Button
 				on:click={() => {
@@ -71,7 +71,7 @@ export let open = false;
 			/>
 		{/if}
 	</div>
-	<p class="italic text-xs">Slug to uniquely identify your workspace</p>
+	<p class="text-xs text-secondary font-normal">Slug to uniquely identify your workspace</p>
 </div>
 
 <Modal bind:open title="Change workspace ID">

package/package/components/settings/ChangeWorkspaceName.svelte

@@ -30,10 +30,10 @@ async function renameWorkspace() {
 }
 </script>
 
-<div>
-	<p class="font-semibold text-sm">Workspace name</p>
+<div class="flex flex-col gap-1">
+	<p class="font-medium text-xs text-emphasis">Workspace name</p>
 	<div class="flex flex-row gap-0.5 items-center">
-		<p class="text-sm text-secondary">{currentName}</p>
+		<p class="text-xs font-normal text-primary">{currentName}</p>
 		<Button
 			on:click={() => {
 				open = true
@@ -48,7 +48,7 @@ async function renameWorkspace() {
 		/>
 	</div>
 
-	<p class="italic text-xs"> Displayable name </p>
+	<p class="text-2xs text-secondary font-normal"> Displayable name </p>
 </div>
 
 <Modal bind:open title="Change workspace name">