Skip to content
GeoViewer 5

Source LangSwitch

Source LangSwitch

Cette page est générée automatiquement à partir du dépôt local au moment de la génération de la documentation.

Fichiers inclus

packages/common/src/lib/widgets/lang-switch/lang-switch.declaration.ts

packages/common/src/lib/widgets/lang-switch/lang-switch.declaration.ts
import { widgetFactorySvelte, type WidgetProps } from '$lib/api/managers/widget';
import { type LangSwitchConfig, langSwitchConfig } from './LangSwitch.config';
import type { WidgetDeclaration } from '$lib/api/managers/widget/widget-declaration';


export const declaration = {
    factory: () => import('./LangSwitch.svelte').then((LangSwitch) => widgetFactorySvelte(LangSwitch)),
    schema: () => langSwitchConfig,
} satisfies WidgetDeclaration;


export type LangSwitchProps = WidgetProps<LangSwitchConfig>;

packages/common/src/lib/widgets/lang-switch/LangSwitch.config.ts

packages/common/src/lib/widgets/lang-switch/LangSwitch.config.ts
import { defineWidgetConfig } from '$lib/api/managers/configuration/models/widget/widget-configuration.schema';
import { inToolbarSchemaFrom } from '$lib/api/managers/configuration/models/widget/widget-in-toolbar.schema';
import { i18nSchemaFrom, type SupportedLanguages } from '$lib/api/managers/i18n/i18n.schema';
import { z } from 'zod';


const i18n = i18nSchemaFrom({});


export const langSwitchConfig = defineWidgetConfig({
    title: {
        fr: 'Langue',
        nl: 'Taal',
    },
    inToolbar: inToolbarSchemaFrom({
        type: 'integrated',
    }),
    container: 'hidden',
    i18n: i18n,
    active: true,
    config: z
        .object({
            supportedLanguages: z
                .array(z.custom<SupportedLanguages>((v) => typeof v === 'string'))
                .default(['fr', 'nl']),
            vertical: z.boolean().optional(),
        })
        .prefault({}),
});


export type LangSwitchConfig = z.infer<typeof langSwitchConfig>;

packages/common/src/lib/widgets/lang-switch/LangSwitch.svelte

packages/common/src/lib/widgets/lang-switch/LangSwitch.svelte
<script lang="ts">
    import { getI18nManager } from '$lib/api/managers/i18n';
    import { Root as TabsRoot, TabsList, TabsTrigger } from '$lib/components/shadcn/ui/tabs';
    import { cn } from '$lib/components/shadcn/utils';
    import type { LangSwitchProps } from './lang-switch.declaration';


    const { fullConfig }: LangSwitchProps = $props();


    const i18nManager = getI18nManager();


    let lang = $state(i18nManager.locale);
    $effect(() => i18nManager.setLocale(lang));
    $effect(() => {
        if (i18nManager.locale !== lang) {
            lang = i18nManager.locale;
        }
    });
</script>


<TabsRoot bind:value={lang}>
    <TabsList
        class={cn('gv-flex gv-w-full gv-rounded-none', fullConfig.config.vertical && 'gv-flex-col gv-px-0 gv-h-auto')}
    >
        {#each fullConfig.config.supportedLanguages as supportedLang}
            <TabsTrigger value={supportedLang} class="gv-capitalize ">{supportedLang}</TabsTrigger>
        {/each}
    </TabsList>
</TabsRoot>

Aller plus loin