Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Access svelte writable located in object

$
0
0

In shadcn ui port for svelte 5 - Select component (using bitsui select) bind:value asks for state(string), but Writable<string> works too as well, so bind:value={$theme or $language} is properly getting and setting value. But my settings component works with additional setting passed to it as props with store as one of elements of object and i have trouble getting writable properly work from object.

<script lang="ts" module>    interface SelectItem {        label: string;        labelRu: string;        value: string;    }    export interface Setting {        store: Writable<string>;        name: string;        nameRu: string;        values: SelectItem[];    }</script><script lang="ts">    import * as Select from '$shared/components/ui/select/index.js';    import { theme } from '$shared/stores/theme';    import { language } from '$shared/stores/language';    import { derived, type Writable } from 'svelte/store';    let { additionalSettings = null }: { additionalSettings?: { [key: string]: Setting } | null } =        $props();    let clazz = $state('');    export { clazz as class };    let settings: { [key: string]: Setting } = {        theme: {            store: theme,            name: 'Theme',            nameRu: 'Тема',            values: [                { label: 'Light', labelRu: 'Светлая', value: 'light' },                { label: 'Dark', labelRu: 'Темная', value: 'dark' }            ]        },        language: {            store: language,            name: 'Lingo',            nameRu: 'Язык',            values: [                { label: 'English', labelRu: 'Английский', value: 'en' },                { label: 'Russian', labelRu: 'Русский', value: 'ru' }            ]        }    };    settings = { ...settings, ...(additionalSettings ?? {}) };    const settingLabel = Object.fromEntries(        Object.entries(settings).map(([key, setting]) => [            key,            derived([setting.store, language], ([$store, $language]) => {                const selectedValue = setting.values.find((value) => value.value === $store);                return $language === 'ru' ? selectedValue?.labelRu : selectedValue?.label;            })        ])    );</script><div    class="{clazz !== '' ? clazz +'' : ''}flex min-w-[240px] flex-col space-y-4 px-2 py-4 text-sm">    {#each Object.entries(settings) as [key, setting]}<div class="flex items-center space-x-2"><p class="min-w-[48px]">{$language === 'ru' ? setting.nameRu : setting.name}:</p><Select.Root type="single" name={key} bind:value={$setting.store}><Select.Trigger>                    {#await settingLabel[key] then label}                        {(label ?? $language === 'ru')                            ? 'Выберите'+ setting.nameRu                            : 'Select '+ setting.name}                    {/await}</Select.Trigger><Select.Content>                    {#each setting.values as value}<Select.Item value={value.value}>                            {$language === 'ru' ? value.labelRu : value.label}</Select.Item>                    {/each}</Select.Content></Select.Root></div>    {/each}</div>

I'm newby to Svelte 5 reactive functionality, so maybe i'm asking something easy fixing. Sorry for this(


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>