windmill-components 1.493.10 → 1.501.4

package/package/components/select/MultiSelect.svelte

@@ -0,0 +1,123 @@
+<script lang="ts" generics="Item extends { label?: string; value: any; }">import { clickOutside, reorder } from '../../utils';
+import { untrack } from 'svelte';
+import { processItems } from './utils.svelte';
+import SelectDropdown from './SelectDropdown.svelte';
+import CloseButton from '../common/CloseButton.svelte';
+import DraggableTags from './DraggableTags.svelte';
+import { Search } from 'lucide-svelte';
+import { twMerge } from 'tailwind-merge';
+let { items, placeholder = 'Select items', value = $bindable(), class: className = '', style, listAutoWidth = true, disabled = false, disablePortal = false, createText, reorderable = true, noItemsMsg, selectedUlClass = '', placeholderClass = '', allowClear = true, onOpen, groupBy, sortBy, onCreateItem } = $props();
+let filterText = $state('');
+let open = $state(false);
+let wrapperEl = $state();
+let searchInputEl = $state();
+$effect(() => searchInputEl?.focus());
+let processedItems = $derived.by(() => {
+    let args = { items, createText, filterText, groupBy, onCreateItem, sortBy };
+    return untrack(() => processItems(args));
+});
+$effect(() => {
+    if (!open)
+        filterText = '';
+});
+$effect(() => {
+    open && untrack(() => onOpen?.());
+});
+let valueEntry = $derived(value.map((v) => processedItems.find((item) => item.value === v) ?? { value: v, label: v }));
+function onAddValue(item) {
+    if (item.__is_create && onCreateItem) {
+        onCreateItem(item.value);
+    }
+    else {
+        value = [...value, item.value];
+    }
+}
+function onRemoveValue(item) {
+    value = value.filter((v) => v !== item.value);
+}
+function clearValue() {
+    filterText = '';
+    value = [];
+}
+</script>
+
+<div
+	bind:this={wrapperEl}
+	class={twMerge(
+		'relative min-h-8 flex items-center w-full bg-surface border border-gray-300 rounded-md text-tertiary',
+		disabled ? 'pointer-events-none' : '',
+		open && !disabled ? 'open' : '',
+		disabled ? 'disabled' : '',
+		className
+	)}
+	{style}
+	onpointerup={() => (open = true)}
+	use:clickOutside={{ onClickOutside: () => (open = false) }}
+>
+	<!-- 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-2 h-full flex items-center flex-1', 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',
+				selectedUlClass
+			)}
+			role="list"
+		>
+			<DraggableTags
+				items={valueEntry}
+				{allowClear}
+				onRemove={onRemoveValue}
+				onReorder={reorderable
+					? (oldIdx, newIdx) => (value = reorder(value, oldIdx, newIdx))
+					: undefined}
+			/>
+		</ul>
+	{/if}
+	{#if allowClear}
+		<CloseButton
+			noBg
+			class="mr-1 remove-all"
+			small
+			on:close={(e) => (clearValue(), e.stopPropagation())}
+		/>
+	{/if}
+	<SelectDropdown
+		{disablePortal}
+		onSelectValue={onAddValue}
+		{open}
+		processedItems={processedItems.filter((item) => !value.includes(item.value))}
+		value={undefined}
+		{disabled}
+		{filterText}
+		getInputRect={wrapperEl && (() => wrapperEl!.getBoundingClientRect())}
+		{listAutoWidth}
+		{noItemsMsg}
+		class={twMerge(
+			'multiselect dropdown',
+			open && !disabled ? 'open' : '',
+			disabled ? 'disabled' : ''
+		)}
+		ulClass="options"
+	>
+		{#snippet header()}
+			{#if processedItems.length - value.length > 0 || onCreateItem}
+				<div class="mx-2 mb-1 mt-2 flex items-center relative">
+					<input
+						bind:this={searchInputEl}
+						bind:value={filterText}
+						onblur={(e) => (e.preventDefault(), searchInputEl?.focus())}
+						placeholder="Search"
+						class="!pr-7"
+					/>
+					<Search size={16} class="absolute right-2 text-tertiary" />
+				</div>
+			{/if}
+		{/snippet}
+	</SelectDropdown>
+</div>

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

@@ -0,0 +1,52 @@
+declare class __sveltets_Render<Item extends {
+    label?: string;
+    value: any;
+}> {
+    props(): {
+        items?: Item[] | undefined;
+        value: Item["value"][];
+        placeholder?: string;
+        class?: string;
+        style?: string;
+        filterText?: string;
+        disabled?: boolean;
+        listAutoWidth?: boolean;
+        containerStyle?: string;
+        inputClass?: string;
+        disablePortal?: boolean;
+        createText?: string;
+        reorderable?: boolean;
+        noItemsMsg?: string;
+        selectedUlClass?: string;
+        placeholderClass?: string;
+        allowClear?: boolean;
+        groupBy?: ((item: Item) => string) | undefined;
+        sortBy?: ((a: Item, b: Item) => number) | undefined;
+        onOpen?: (() => void) | undefined;
+        onClear?: (() => void) | undefined;
+        onCreateItem?: ((value: string) => void) | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item extends {
+        label?: string;
+        value: any;
+    }>(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']>;
+    <Item extends {
+        label?: string;
+        value: any;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const MultiSelect: $$IsomorphicComponent;
+type MultiSelect<Item extends {
+    label?: string;
+    value: any;
+}> = InstanceType<typeof MultiSelect<Item>>;
+export default MultiSelect;

package/package/components/select/Select.svelte

@@ -0,0 +1,95 @@
+<script lang="ts" generics="Item extends { label?: string; value: any; subtitle?: string }">import { clickOutside } from '../../utils';
+import { twMerge } from 'tailwind-merge';
+import CloseButton from '../common/CloseButton.svelte';
+import { Loader2 } from 'lucide-svelte';
+import { untrack } from 'svelte';
+import { getLabel, processItems } from './utils.svelte';
+import SelectDropdown from './SelectDropdown.svelte';
+import { deepEqual } from 'fast-equals';
+let { items, placeholder = 'Please select', value = $bindable(), filterText = $bindable(''), class: className = '', clearable = false, listAutoWidth = true, disabled: _disabled = false, containerStyle = '', inputClass = '', disablePortal = false, loading = false, autofocus, RightIcon, createText, noItemsMsg, open = $bindable(false), groupBy, sortBy, onFocus, onBlur, onClear, onCreateItem } = $props();
+let disabled = $derived(_disabled || loading);
+let inputEl = $state();
+let processedItems = $derived.by(() => {
+    let args = { items, createText, filterText, groupBy, onCreateItem, sortBy };
+    return untrack(() => processItems(args));
+});
+$effect(() => {
+    if (filterText)
+        open = true;
+});
+$effect(() => {
+    if (!open)
+        filterText = '';
+});
+let valueEntry = $derived(value && processedItems?.find((item) => deepEqual(item.value, value)));
+function setValue(item) {
+    if (item.__is_create && onCreateItem) {
+        onCreateItem(item.value);
+    }
+    else {
+        value = item.value;
+    }
+    filterText = '';
+    open = false;
+}
+function clearValue() {
+    filterText = '';
+    if (onClear)
+        onClear();
+    else
+        value = undefined;
+}
+</script>
+
+<div
+	class={`relative ${className}`}
+	use:clickOutside={{ onClickOutside: () => (open = false) }}
+	onpointerdown={() => onFocus?.()}
+	onfocus={() => onFocus?.()}
+	onblur={() => onBlur?.()}
+>
+	{#if loading}
+		<div class="absolute z-10 right-2 h-full flex items-center">
+			<Loader2 size={18} class="animate-spin" />
+		</div>
+	{:else if clearable && !disabled && value}
+		<div class="absolute z-10 right-2 h-full flex items-center">
+			<CloseButton 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" />
+		</div>
+	{/if}
+	<!-- svelte-ignore a11y_autofocus -->
+	<input
+		{autofocus}
+		{disabled}
+		type="text"
+		bind:value={() => filterText, (v) => (filterText = v)}
+		placeholder={loading ? 'Loading...' : (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
+		style={containerStyle}
+		class={twMerge(
+			'!bg-surface text-ellipsis',
+			open ? '' : 'cursor-pointer',
+			value && !loading ? '!placeholder-primary' : '',
+			(clearable || RightIcon) && !disabled && value ? '!pr-8' : '',
+			inputClass ?? ''
+		)}
+		autocomplete="off"
+		onpointerdown={() => (open = true)}
+		bind:this={inputEl}
+	/>
+	<SelectDropdown
+		{disablePortal}
+		onSelectValue={setValue}
+		{open}
+		{processedItems}
+		{value}
+		{disabled}
+		{filterText}
+		getInputRect={inputEl && (() => inputEl!.getBoundingClientRect())}
+		{listAutoWidth}
+		{noItemsMsg}
+	/>
+</div>

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

@@ -0,0 +1,57 @@
+declare class __sveltets_Render<Item extends {
+    label?: string;
+    value: any;
+    subtitle?: string;
+}> {
+    props(): {
+        items?: Item[] | undefined;
+        value: Item["value"] | undefined;
+        placeholder?: string;
+        class?: string;
+        clearable?: boolean;
+        filterText?: string;
+        disabled?: boolean;
+        listAutoWidth?: boolean;
+        containerStyle?: string;
+        inputClass?: string;
+        disablePortal?: boolean;
+        loading?: boolean;
+        autofocus?: boolean;
+        RightIcon?: any;
+        createText?: string;
+        noItemsMsg?: string;
+        open?: boolean;
+        groupBy?: ((item: Item) => string) | undefined;
+        sortBy?: ((a: Item, b: Item) => number) | undefined;
+        onFocus?: (() => void) | undefined;
+        onBlur?: (() => void) | undefined;
+        onClear?: (() => void) | undefined;
+        onCreateItem?: ((value: string) => void) | undefined;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "value" | "open" | "filterText";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item extends {
+        label?: string;
+        value: any;
+        subtitle?: string;
+    }>(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']>;
+    <Item extends {
+        label?: string;
+        value: any;
+        subtitle?: string;
+    }>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<Item extends {
+    label?: string;
+    value: any;
+    subtitle?: string;
+}> = InstanceType<typeof Select<Item>>;
+export default Select;

package/package/components/select/SelectDropdown.svelte

@@ -0,0 +1,115 @@
+<script lang="ts" generics="T">import { deepEqual } from 'fast-equals';
+import ConditionalPortal from '../common/drawer/ConditionalPortal.svelte';
+import { untrack } from 'svelte';
+import { twMerge } from 'tailwind-merge';
+let { processedItems: _processedItems, value, filterText, listAutoWidth = true, disabled, disablePortal = false, open, noItemsMsg = 'No items found', class: className = '', ulClass = '', header, getInputRect, onSelectValue } = $props();
+let processedItems = $derived(!filterText
+    ? _processedItems
+    : _processedItems?.filter((item) => item.__is_create || item?.label?.toLowerCase().includes(filterText?.toLowerCase())));
+let listEl = $state();
+let dropdownPos = $state(computeDropdownPos());
+let keyArrowPos = $state();
+function computeDropdownPos() {
+    if (!getInputRect || !listEl)
+        return { width: 0, x: 0, y: 0 };
+    let inputR = getInputRect();
+    const listR = listEl.getBoundingClientRect();
+    const openBelow = inputR.y + inputR.height + listR.height <= window.innerHeight;
+    let [x, y] = disablePortal ? [0, 0] : [inputR.x, inputR.y];
+    if (openBelow)
+        return { width: inputR.width, x: x, y: y + inputR.height };
+    else {
+        return { width: inputR.width, x: x, y: y - listR.height };
+    }
+}
+$effect(() => {
+    function updateDropdownPos() {
+        let nPos = computeDropdownPos();
+        if (!deepEqual(nPos, dropdownPos))
+            dropdownPos = nPos;
+        if (open)
+            requestAnimationFrame(updateDropdownPos);
+    }
+    if (open)
+        untrack(() => updateDropdownPos());
+});
+$effect(() => {
+    ;
+    [open, processedItems];
+    untrack(() => (keyArrowPos = open && filterText ? 0 : undefined));
+});
+</script>
+
+<svelte:window
+	on:keydown={(e) => {
+		if (!open || !processedItems?.length) return
+		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
+			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1
+		} else if (e.key === 'ArrowDown') {
+			if (keyArrowPos === undefined) {
+				keyArrowPos = 0
+			} else {
+				keyArrowPos = Math.min(processedItems.length - 1, keyArrowPos + 1)
+			}
+		} else if (e.key === 'Enter' && keyArrowPos !== undefined && processedItems?.[keyArrowPos]) {
+			onSelectValue(processedItems[keyArrowPos])
+		} else {
+			keyArrowPos = undefined
+			return
+		}
+		e.preventDefault()
+	}}
+/>
+
+<ConditionalPortal condition={!disablePortal} name="select-dropdown-portal">
+	{#if open && !disabled}
+		<div
+			class={twMerge(
+				disablePortal ? 'absolute' : 'fixed',
+				'flex flex-col z-[5001] max-h-64 overflow-y-auto bg-surface-secondary text-tertiary text-sm select-none border rounded-lg shadow-lg',
+				className
+			)}
+			style="{`top: ${dropdownPos.y}px; left: ${dropdownPos.x}px;`} {listAutoWidth
+				? `min-width: ${dropdownPos.width}px;`
+				: ''}"
+			bind:this={listEl}
+		>
+			{@render header?.()}
+			{#if processedItems?.length === 0}
+				<div class="py-8 px-4 text-center text-primary">{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',
+								itemIndex === 0 ? 'mt-3' : 'mt-6'
+							)}
+						>
+							{item.__select_group}
+						</li>
+					{/if}
+					<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'
+							)}
+							onclick={(e) => {
+								e.stopImmediatePropagation()
+								onSelectValue(item)
+							}}
+						>
+							{item.label || '\xa0'}
+							{#if item.subtitle}
+								<div class="text-xs text-tertiary">{item.subtitle}</div>
+							{/if}
+						</button>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+</ConditionalPortal>

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

@@ -0,0 +1,33 @@
+import { type Snippet } from 'svelte';
+import type { ProcessedItem } from './utils.svelte';
+declare class __sveltets_Render<T> {
+    props(): {
+        processedItems?: ProcessedItem<T>[] | undefined;
+        value: T | undefined;
+        filterText?: string;
+        listAutoWidth?: Boolean;
+        disabled?: boolean;
+        disablePortal?: boolean;
+        open: boolean;
+        noItemsMsg?: string;
+        class?: string;
+        ulClass?: string;
+        header?: Snippet;
+        getInputRect?: (() => DOMRect) | undefined;
+        onSelectValue: (item: ProcessedItem<T>) => void;
+    };
+    events(): {};
+    slots(): {};
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SelectDropdown: $$IsomorphicComponent;
+type SelectDropdown<T> = InstanceType<typeof SelectDropdown<T>>;
+export default SelectDropdown;

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

@@ -0,0 +1,29 @@
+export declare function processItems<Item extends {
+    label?: string;
+    value: any;
+}>({ items, filterText, groupBy, sortBy, onCreateItem, createText }: {
+    items?: Item[];
+    filterText?: string;
+    groupBy?: (item: Item) => string;
+    sortBy?: (a: Item, b: Item) => number;
+    onCreateItem?: (value: string) => void;
+    createText?: string;
+}): ProcessedItem<Item['value']>[];
+export type ProcessedItem<T> = {
+    __select_group?: string;
+    __is_create?: true;
+    label: string;
+    value: T;
+    subtitle?: string;
+};
+export declare function getLabel<T>(item: {
+    label?: string;
+    value: T;
+} | undefined): string;
+export declare function safeSelectItems<T>(list: (T | {
+    value: T;
+    label?: string;
+} | undefined | null)[] | undefined | null): {
+    value: T;
+    label?: string;
+}[];

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

@@ -0,0 +1,50 @@
+export function processItems({ items, filterText, groupBy, sortBy, onCreateItem, createText }) {
+    let items2 = items?.map((item) => ({
+        ...item,
+        label: getLabel(item)
+    })) ?? [];
+    if (groupBy) {
+        items2 =
+            items2?.map((item) => ({
+                ...item,
+                __select_group: groupBy(item)
+            })) ?? [];
+    }
+    if (sortBy) {
+        items2 = items2?.sort(sortBy);
+    }
+    if (onCreateItem && filterText && !items2.some((item) => item.label === filterText)) {
+        items2.push({
+            label: createText ?? `Add new: "${filterText}"`,
+            value: filterText,
+            __is_create: true
+        });
+    }
+    return items2;
+}
+export function getLabel(item) {
+    if (!item)
+        return '';
+    if (item.label)
+        return item.label;
+    if (typeof item.value === 'string')
+        return item.value;
+    if (typeof item.value == 'number' || typeof item.value == 'boolean')
+        return item.value.toString();
+    return JSON.stringify(item.value);
+}
+export function safeSelectItems(list) {
+    if (!list)
+        return [];
+    return list
+        .filter((item) => item !== undefined && item !== null)
+        .map((item) => {
+        if (typeof item === 'string' || typeof item === 'number' || typeof item === 'boolean') {
+            return { value: item };
+        }
+        if (typeof item === 'object' && 'value' in item) {
+            return item;
+        }
+        return { value: null, label: 'UNKNOWN_ITEM' };
+    });
+}

package/package/components/settings/ChangeWorkspaceId.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">import { workspaceStore } from '../../stores';
+<script lang="ts">import { workspaceStore, superadmin } from '../../stores';
 import Alert from '../common/alert/Alert.svelte';
 import Button from '../common/button/Button.svelte';
 import { sendUserToast } from '../../toast';
@@ -56,7 +56,7 @@ export let open = false;
 	<p class="font-semibold text-sm">Workspace ID</p>
 	<div class="flex flex-row gap-0.5 items-center">
 		<p class="text-sm text-secondary">{$workspaceStore ?? ''}</p>
-		{#if !isCloudHosted()}
+		{#if !isCloudHosted() || $superadmin}
 			<Button
 				on:click={() => {
 					open = true

package/package/components/settings/ChangeWorkspaceName.svelte

@@ -4,12 +4,13 @@ import { sendUserToast } from '../../toast';
 import { WorkspaceService } from '../../gen';
 import Modal from '../common/modal/Modal.svelte';
 import { Pen } from 'lucide-svelte';
+import { untrack } from 'svelte';
 let { open = false } = $props();
 let newName = $state('');
 let currentName = $state('');
 $effect(() => {
     if ($workspaceStore) {
-        getWorkspaceName();
+        untrack(() => getWorkspaceName());
     }
 });
 async function getWorkspaceName() {