From 9aee6f78d0a2ac08e12d982c21fa5234a4ad1727 Mon Sep 17 00:00:00 2001 From: Clement Zhang Date: Mon, 4 Nov 2024 16:44:53 +0100 Subject: [PATCH 01/21] change input type --- .../components/inputs/AppMultiSelectV2.svelte | 55 ++++++++++++++----- .../apps/editor/component/components.ts | 7 ++- 2 files changed, 46 insertions(+), 16 deletions(-) diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte index 261fea0317..356d9cafb7 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte @@ -30,21 +30,23 @@ const { app, worldStore, selectedComponent, componentControl } = getContext('AppViewerContext') - let items: string[] + let items: { label: string; value: string; created?: boolean }[] const resolvedConfig = initConfig( - components['multiselectcomponent'].initialData.configuration, + components['multiselectcomponentv2'].initialData.configuration, configuration ) const outputs = initOutput($worldStore, id, { - result: [] as string[] + result: [] as { label: string; value: string; created?: boolean }[] }) - let value: string[] | undefined = [...new Set(outputs?.result.peak())] as string[] + let value: { label: string; value: string; created?: boolean }[] | undefined = [ + ...new Set(outputs?.result.peak()) + ] as { label: string; value: string; created?: boolean }[] $componentControl[id] = { - setValue(nvalue: string[]) { + setValue(nvalue: { label: string; value: string; created?: boolean }[]) { value = [...new Set(nvalue)] outputs?.result.set([...(value ?? [])]) } @@ -53,9 +55,21 @@ $: resolvedConfig.items && handleItems() function handleItems() { - if (Array.isArray(resolvedConfig.items)) { - items = resolvedConfig.items?.map((label) => { - return typeof label === 'string' ? label : `NOT_STRING` + if (!Array.isArray(resolvedConfig.items)) { + items = [] + } else { + 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' + } }) } } @@ -63,13 +77,26 @@ $: resolvedConfig.defaultItems && handleDefaultItems() function handleDefaultItems() { - if (Array.isArray(resolvedConfig.defaultItems)) { - const nvalue = resolvedConfig.defaultItems?.map((label) => { - return typeof label === 'string' ? label : `NOT_STRING` + let nvalue: { label: string; value: string; created?: boolean }[] + if (!Array.isArray(resolvedConfig.defaultItems)) { + nvalue = [] + } else { + nvalue = resolvedConfig.defaultItems?.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' + } }) - value = [...new Set(nvalue)] - outputs?.result.set([...(value ?? [])]) } + value = [...new Set(nvalue)] + outputs?.result.set([...(value ?? [])]) } let css = initCss($app.css?.multiselectcomponent, customCss) @@ -181,7 +208,7 @@ e.target?.['parentElement']?.dispatchEvent(newe) }} > - {option} + {option.label} diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index 34b6faca78..5fff829890 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -2199,8 +2199,11 @@ This is a paragraph. items: { type: 'static', fieldType: 'array', - subFieldType: 'text', - value: ['Foo', 'Bar'] + subFieldType: 'labeledselect', + value: [ + { value: 'foo', label: 'Foo' }, + { value: 'bar', label: 'Bar' } + ] } as StaticAppInput, defaultItems: { type: 'static', From 0ae0321e4b2d551ac7b5cf2af7ff0ab8a0a2655a Mon Sep 17 00:00:00 2001 From: Clement Zhang Date: Mon, 4 Nov 2024 17:35:21 +0100 Subject: [PATCH 02/21] fix default items --- .../components/inputs/AppMultiSelectV2.svelte | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte index 356d9cafb7..c72f341ac2 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte @@ -81,19 +81,12 @@ if (!Array.isArray(resolvedConfig.defaultItems)) { nvalue = [] } else { - nvalue = resolvedConfig.defaultItems?.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' - } - }) + let rawNvalue = new Set( + resolvedConfig.defaultItems?.map((value) => { + return typeof value === 'string' ? value : `NOT_STRING` + }) + ) + nvalue = items?.filter((item) => rawNvalue.has(item.value)) } value = [...new Set(nvalue)] outputs?.result.set([...(value ?? [])]) From 32f8127e02d11ea9037139c03cb9341e45d6790b Mon Sep 17 00:00:00 2001 From: Clement Zhang Date: Mon, 4 Nov 2024 17:53:50 +0100 Subject: [PATCH 03/21] addressing ellipsis bot PR comments --- .../apps/components/inputs/AppMultiSelectV2.svelte | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte index c72f341ac2..67847ee49c 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte @@ -68,7 +68,10 @@ } return { label: item?.label ?? 'undefined', - value: item?.value != undefined ? JSON.stringify(item.value) : 'undefined' + value: + typeof item?.value === 'object' + ? JSON.stringify(item.value) + : item?.value ?? 'undefined' } }) } @@ -82,9 +85,7 @@ nvalue = [] } else { let rawNvalue = new Set( - resolvedConfig.defaultItems?.map((value) => { - return typeof value === 'string' ? value : `NOT_STRING` - }) + resolvedConfig.defaultItems?.filter((value) => typeof value === 'string') ) nvalue = items?.filter((item) => rawNvalue.has(item.value)) } From 546da5b983e2cb003868f6553caaf2d992666268 Mon Sep 17 00:00:00 2001 From: Clement Zhang Date: Mon, 4 Nov 2024 19:00:23 +0100 Subject: [PATCH 04/21] use the same editor as {#if resolvedConfig.placeholder} {/if} - {#each listItems as item (item.value)} + {#each options as item (item.value)} {/each} @@ -231,7 +228,7 @@ on:filter={handleFilter} on:clear={onClear} on:change={onChange} - items={listItems} + items={options} listAutoWidth={resolvedConfig.fullWidth} inputStyles={SELECT_INPUT_DEFAULT_STYLE.inputStyles} containerStyles={($darkMode @@ -266,7 +263,7 @@ The selectable items should be an array of {'{"value": any, "label":}'}. Found: 
{JSON.stringify(listItems, null, 4)}
{JSON.stringify(options, null, 4)} From e338c287134c58074175088693a20c9ece4b19c5 Mon Sep 17 00:00:00 2001 From: Clement Zhang Date: Thu, 7 Nov 2024 16:39:32 +0100 Subject: [PATCH 19/21] add multiselect novelties to , harmonize, clean --- .../components/inputs/AppMultiSelect.svelte | 8 +- .../components/inputs/AppMultiSelectV2.svelte | 66 +++------------ .../apps/components/inputs/AppSelect.svelte | 80 +++++++------------ .../apps/components/inputs/utils.ts | 48 +++++++++++ .../apps/editor/component/components.ts | 7 +- .../ArrayStaticInputEditor.svelte | 2 +- 6 files changed, 95 insertions(+), 116 deletions(-) create mode 100644 frontend/src/lib/components/apps/components/inputs/utils.ts diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte index 7b75d6391e..f6686b9a9b 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte @@ -60,11 +60,11 @@ } } - $: resolvedConfig.defaultItems && handleDefaultItems() + $: resolvedConfig.defaultValues && handleDefaultValues() - function handleDefaultItems() { - if (Array.isArray(resolvedConfig.defaultItems)) { - const nvalue = resolvedConfig.defaultItems?.map((label) => { + function handleDefaultValues() { + if (Array.isArray(resolvedConfig.defaultValues)) { + const nvalue = resolvedConfig.defaultValues?.map((label) => { return typeof label === 'string' ? label : `NOT_STRING` }) value = [...new Set(nvalue)] diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte index 9f75764e29..e5c99d4996 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte @@ -16,7 +16,8 @@ import { offset, flip, shift } from 'svelte-floating-ui/dom' import ResolveStyle from '../helpers/ResolveStyle.svelte' import MultiSelect from '$lib/components/multiselect/MultiSelect.svelte' - import { isObjectOptionArray, isStringArray, type ObjectOption } from '../../../multiselect/types' + import type { ObjectOption } from '../../../multiselect/types' + import { parseConfigOptions } from './utils' export let configuration: RichConfigurations export let customCss: ComponentCustomCSS<'multiselectcomponent'> | undefined = undefined @@ -56,7 +57,9 @@ } } - $: resolvedConfig.defaultItems && parseDefaultItems() + $: if (resolvedConfig.defaultValues) { + selectOptionsByValue(resolvedConfig.defaultValues) + } $: outerDiv && portalRef && @@ -75,65 +78,14 @@ } function selectOptionsByValue(values: any[]) { + if (!Array.isArray(values)) { + outputs?.result.set([]) + } + selectedOptions = findOptionsByValue(values) outputs?.result.set([...(selectedOptions.map((option) => option.value) ?? [])]) } - function parseConfigOptions(resolvedConfigItems) { - if (!resolvedConfigItems) { - return [] - } - if (isObjectOptionArray(resolvedConfigItems)) { - return parseLabeledItems(resolvedConfigItems) - } else if (isStringArray(resolvedConfigItems)) { - return parseStringItems(resolvedConfigItems) - } - return [] - } - - function parseLabeledItems(resolvedConfigItems: ObjectOption[]) { - return resolvedConfigItems?.map((item: ObjectOption) => { - if (!item || typeof item !== 'object') { - console.error( - 'When labeled, MultiSelect component items should be an array of { label: string, value: string }.' - ) - return { - label: 'not object', - value: 'not object' - } - } - return { - label: item?.label ?? 'undefined', - value: - typeof item?.value === 'object' ? JSON.stringify(item.value) : item?.value ?? 'undefined' - } - }) - } - - function parseStringItems(resolvedConfigItems: any[]): ObjectOption[] { - return resolvedConfigItems?.map((option: string) => { - if (option === null || option === undefined || typeof option !== 'string') { - console.error( - 'When not labeled, MultiSelect component items should be an array of strings.' - ) - return { label: 'not string', value: 'not string' } - } - if (option === '') { - return { label: 'empty string', value: 'empty string' } - } - return { label: option, value: option } - }) - } - - function parseDefaultItems() { - if (!Array.isArray(resolvedConfig.defaultItems)) { - outputs?.result.set([]) - return - } - - selectOptionsByValue(resolvedConfig.defaultItems) - } - function setOuterDivStyle(outerDiv: HTMLDivElement, portalRef: HTMLDivElement, style: string) { outerDiv.setAttribute('style', style) // find ul in portalRef and set style diff --git a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte index ce3a551131..5e953e7637 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppSelect.svelte @@ -16,6 +16,7 @@ import Popover from '$lib/components/Popover.svelte' import ResolveStyle from '../helpers/ResolveStyle.svelte' import type { ObjectOption } from '$lib/components/multiselect/types' + import { parseConfigOptions } from './utils' export let id: string export let configuration: RichConfigurations @@ -42,8 +43,8 @@ } = getContext('AppViewerContext') $componentControl[id] = { - setValue(nvalue: string) { - setValue(JSON.stringify(nvalue)) + setValue(newValue: any) { + setValue(newValue) } } if (controls) { @@ -60,13 +61,12 @@ }) // The library expects double quotes around the value - let value: string | undefined = noDefault - ? undefined - : outputs?.result.peak() - ? JSON.stringify(outputs?.result.peak()) - : undefined + let selectedValue: string | undefined - $: resolvedConfig.items && handleItems() + $: if (resolvedConfig.items) { + options = parseConfigOptions(resolvedConfig.items) + updateSelectedValue() + } $: resolvedConfig.defaultValue != undefined && handleDefault() let filterText = '' @@ -74,35 +74,20 @@ let previsousFilter = '' - function handleItems() { - options = 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' - } - }) - : [] - - if (value != undefined && options.some((x) => x.value === value)) { + function updateSelectedValue() { + if (selectedValue != undefined && options.some((x) => x.value === selectedValue)) { return } - let rawValue + let newValue: string | undefined if (resolvedConfig.defaultValue !== undefined) { - rawValue = resolvedConfig.defaultValue + newValue = resolvedConfig.defaultValue } else if (options.length > 0 && resolvedConfig?.preselectFirst) { - rawValue = resolvedConfig.items[0].value + newValue = resolvedConfig.items[0].value } - if (rawValue !== undefined && rawValue !== null) { - value = JSON.stringify(rawValue) - outputs?.result.set(rawValue) + + if (newValue !== undefined && newValue !== null) { + selectedValue = newValue + outputs?.result.set(newValue) } } @@ -128,13 +113,9 @@ setValue(value) } - function setValue(nvalue: any) { - let result: any = undefined - try { - result = JSON.parse(nvalue) - } catch (_) {} - value = nvalue - outputs?.result.set(result) + function setValue(newValue: any) { + selectedValue = newValue + outputs?.result.set(newValue) if (recomputeIds) { recomputeIds.forEach((id) => $runnableComponents?.[id]?.cb?.forEach((f) => f())) @@ -142,11 +123,11 @@ } function onClear() { - value = undefined + selectedValue = undefined outputs?.result.set(undefined, true) } - function handleFilter(e) { + function handleFilter() { if (resolvedConfig.create && filterText !== previsousFilter) { previsousFilter = filterText if (filterText.length > 0) { @@ -156,21 +137,18 @@ (item) => item.label.toString().toLowerCase() === filterText.toLowerCase() ) if (!exists) { - options = [ - ...prev, - { value: JSON.stringify(filterText), label: filterText, created: true } - ] + options = [...prev, { value: filterText, label: filterText, created: true }] } } } } function handleDefault() { - if (resolvedConfig.defaultValue != undefined) { - const nvalue = resolvedConfig.defaultValue - value = JSON.stringify(nvalue) - outputs?.result.set(nvalue) + if (!!noDefault || resolvedConfig.defaultValue !== undefined) { + return } + selectedValue = resolvedConfig.defaultValue + outputs?.result.set(resolvedConfig.defaultValue) } @@ -215,7 +193,7 @@ {/if} {#each options as item (item.value)} - + {/each} {:else} @@ -234,7 +212,7 @@ containerStyles={($darkMode ? SELECT_INPUT_DEFAULT_STYLE.containerStylesDark : SELECT_INPUT_DEFAULT_STYLE.containerStyles) + css?.input?.style} - {value} + value={selectedValue} class={css?.input?.class} placeholder={resolvedConfig.placeholder} disabled={resolvedConfig.disabled} diff --git a/frontend/src/lib/components/apps/components/inputs/utils.ts b/frontend/src/lib/components/apps/components/inputs/utils.ts new file mode 100644 index 0000000000..5dc84dc088 --- /dev/null +++ b/frontend/src/lib/components/apps/components/inputs/utils.ts @@ -0,0 +1,48 @@ +import { + type ObjectOption, + isObjectOptionArray, + isStringArray +} from '$lib/components/multiselect/types' +import type { StaticAppInput } from '../../inputType' + +export function parseConfigOptions(resolvedConfigItems: StaticAppInput) { + if (!resolvedConfigItems) { + return [] + } + if (isObjectOptionArray(resolvedConfigItems)) { + return parseLabeledItems(resolvedConfigItems) + } else if (isStringArray(resolvedConfigItems)) { + return parseStringItems(resolvedConfigItems) + } + return [] +} +export function parseLabeledItems(resolvedConfigItems: ObjectOption[]) { + return resolvedConfigItems?.map((item: ObjectOption) => { + if (!item || typeof item !== 'object') { + console.error( + 'When labeled, MultiSelect component items should be an array of { label: string, value: string }.' + ) + return { + label: 'not object', + value: 'not object' + } + } + return { + label: item?.label ?? 'undefined', + value: + typeof item?.value === 'object' ? JSON.stringify(item.value) : item?.value ?? 'undefined' + } + }) +} +export function parseStringItems(resolvedConfigItems: string[]): ObjectOption[] { + return resolvedConfigItems?.map((option: string) => { + if (option === null || option === undefined || typeof option !== 'string') { + console.error('When not labeled, MultiSelect component items should be an array of strings.') + return { label: 'not string', value: 'not string' } + } + if (option === '') { + return { label: 'empty string', value: 'empty string' } + } + return { label: option, value: option } + }) +} diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index 6ce8fb9f05..3ac23aad6c 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -2079,7 +2079,8 @@ This is a paragraph. value: [ { value: 'foo', label: 'Foo' }, { value: 'bar', label: 'Bar' } - ] + ], + hasLabeledMode: true } as StaticAppInput, create: { type: 'static', @@ -2150,7 +2151,7 @@ This is a paragraph. subFieldType: 'text', value: ['Foo', 'Bar'] } as StaticAppInput, - defaultItems: { + defaultValues: { type: 'static', fieldType: 'array', subFieldType: 'text', @@ -2203,7 +2204,7 @@ This is a paragraph. value: ['Foo', 'Bar'], hasLabeledMode: true } as StaticAppInput, - defaultItems: { + defaultValues: { type: 'static', fieldType: 'array', subFieldType: 'simplestringselect', diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte index 29bd8f9e5d..3bd716c881 100644 --- a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte +++ b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte @@ -232,7 +232,7 @@ dispatch('componentInputChange', newComponentInput) } - /** Transforms items string[] to ObjectOption[ and vice versa. Mutating items will fire handleItemsChange. */ + /** Transforms items string[] to ObjectOption] and vice versa. Mutating items will fire handleItemsChange. */ function handleLabeledChange() { if (labeled && isStringArray(items.map((item) => item.value))) { for (let i = 0; i < items.length; i++) { From d4a556d0f66936f4e0acedb5c10c4875509716ff Mon Sep 17 00:00:00 2001 From: Clement Zhang Date: Fri, 8 Nov 2024 11:26:42 +0100 Subject: [PATCH 20/21] multiselect: keep defaultItems (no breaking change) --- .../apps/components/inputs/AppMultiSelect.svelte | 8 ++++---- .../apps/components/inputs/AppMultiSelectV2.svelte | 4 ++-- .../lib/components/apps/editor/component/components.ts | 4 ++-- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte index f6686b9a9b..7b75d6391e 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelect.svelte @@ -60,11 +60,11 @@ } } - $: resolvedConfig.defaultValues && handleDefaultValues() + $: resolvedConfig.defaultItems && handleDefaultItems() - function handleDefaultValues() { - if (Array.isArray(resolvedConfig.defaultValues)) { - const nvalue = resolvedConfig.defaultValues?.map((label) => { + function handleDefaultItems() { + if (Array.isArray(resolvedConfig.defaultItems)) { + const nvalue = resolvedConfig.defaultItems?.map((label) => { return typeof label === 'string' ? label : `NOT_STRING` }) value = [...new Set(nvalue)] diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte index e5c99d4996..852d9603a1 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte @@ -57,8 +57,8 @@ } } - $: if (resolvedConfig.defaultValues) { - selectOptionsByValue(resolvedConfig.defaultValues) + $: if (resolvedConfig.defaultItems) { + selectOptionsByValue(resolvedConfig.defaultItems) } $: outerDiv && diff --git a/frontend/src/lib/components/apps/editor/component/components.ts b/frontend/src/lib/components/apps/editor/component/components.ts index 3ac23aad6c..9f6f6a2994 100644 --- a/frontend/src/lib/components/apps/editor/component/components.ts +++ b/frontend/src/lib/components/apps/editor/component/components.ts @@ -2151,7 +2151,7 @@ This is a paragraph. subFieldType: 'text', value: ['Foo', 'Bar'] } as StaticAppInput, - defaultValues: { + defaultItems: { type: 'static', fieldType: 'array', subFieldType: 'text', @@ -2204,7 +2204,7 @@ This is a paragraph. value: ['Foo', 'Bar'], hasLabeledMode: true } as StaticAppInput, - defaultValues: { + defaultItems: { type: 'static', fieldType: 'array', subFieldType: 'simplestringselect', From d04620e86e416b13885828c87dc9f4b8311f5b48 Mon Sep 17 00:00:00 2001 From: Clement Zhang Date: Fri, 8 Nov 2024 13:41:30 +0100 Subject: [PATCH 21/21] result as string[] --- .../apps/components/inputs/AppMultiSelectV2.svelte | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte index 852d9603a1..912a2aca77 100644 --- a/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte +++ b/frontend/src/lib/components/apps/components/inputs/AppMultiSelectV2.svelte @@ -37,7 +37,7 @@ components['multiselectcomponentv2'].initialData.configuration, configuration ) - const outputs = initOutput($worldStore, id, { result: [] as any[] }) + const outputs = initOutput($worldStore, id, { result: [] as string[] }) let options: ObjectOption[] = [] let selectedOptions: ObjectOption[] = [...new Set(findOptionsByValue(outputs?.result.peak()))] @@ -83,7 +83,14 @@ } selectedOptions = findOptionsByValue(values) - outputs?.result.set([...(selectedOptions.map((option) => option.value) ?? [])]) + outputs?.result.set([...toStringValues(selectedOptions)]) + } + + function toStringValues(options: ObjectOption[] | undefined) { + if (!options) { + return [] + } + return options.map((o) => (typeof o.value === 'string' ? o.value : JSON.stringify(o.value))) } function setOuterDivStyle(outerDiv: HTMLDivElement, portalRef: HTMLDivElement, style: string) { @@ -154,7 +161,7 @@ if (event?.detail?.type === 'removeAll') { outputs?.result.set([]) } else { - outputs?.result.set([...(selectedOptions.map((option) => option.value) ?? [])]) + outputs?.result.set([...toStringValues(selectedOptions)]) } }} on:open={() => {