feat(docs): add locale toggler component and support for multiple languages in layouts

Author: honghuangdc

docs/locales/en.yml

@@ -12,3 +12,10 @@ intro:
   aka: Also known as
   whats-your-name: What's your name?
 not-found: Not found
+locale:
+  en: English
+  zh-CN: Chinese
+layout:
+  default: Default Layout
+  home: Home Layout
+  about: About Layout

docs/locales/zh-CN.yml

@@ -12,3 +12,10 @@ intro:
   aka: 也叫
   whats-your-name: 输入你的名字
 not-found: 未找到页面
+locale:
+  en: 英语
+  zh-CN: 中文
+layout:
+  default: 默认布局
+  home: 首页布局
+  about: 关于布局

docs/src/components/locale-toggler.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { MenuOptionData } from '@soybeanjs/ui';
+import { availableLocales, loadLanguageAsync } from '@/modules/i18n';
+
+const { t, locale } = useI18n();
+
+const items = computed(() => {
+  return availableLocales.map(item => {
+    return {
+      label: t(`locale.${item}`),
+      value: item
+    };
+  });
+});
+
+const onSelectLocale = async (item: MenuOptionData<string>) => {
+  await loadLanguageAsync(item.value);
+  locale.value = item.value;
+};
+</script>
+
+<template>
+  <SDropdownMenuRadio :model-value="locale" :items="items" @select="onSelectLocale">
+    <template #trigger>
+      <SButtonIcon icon="lucide:languages" size="lg" />
+    </template>
+  </SDropdownMenuRadio>
+</template>

docs/src/components/tool-bar.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <LocaleToggler />
+    <ThemeSchemaToggler />
+  </div>
+</template>

docs/src/layouts/404.vue

@@ -18,7 +18,7 @@ useHead({
   <div class="h-full p-4">
     <SCard :title="t('not-found')" class="h-full">
       <template #extra>
-        <ThemeSchemaToggler />
+        <ToolBar />
       </template>
       <div>
         <h3 class="text-center">The page {{ route.path }} is {{ t('not-found') }}</h3>

docs/src/layouts/default.vue

@@ -1,8 +1,16 @@
+<script setup lang="ts">
+const { t } = useI18n();
+
+useHead({
+  title: () => t('layout.default')
+});
+</script>
+
 <template>
   <div class="h-full p-4">
-    <SCard title="Default Layout" class="h-full">
+    <SCard :title="t('layout.default')" class="h-full">
       <template #extra>
-        <ThemeSchemaToggler />
+        <ToolBar />
       </template>
       <RouterView />
     </SCard>

docs/src/layouts/home.vue

@@ -1,8 +1,16 @@
+<script setup lang="ts">
+const { t } = useI18n();
+
+useHead({
+  title: () => t('layout.home')
+});
+</script>
+
 <template>
   <div class="h-full p-4">
-    <SCard title="Home Layout" class="h-full">
+    <SCard :title="t('layout.home')" class="h-full">
       <template #extra>
-        <ThemeSchemaToggler />
+        <ToolBar />
       </template>
       <RouterView />
     </SCard>

docs/src/typings/components.d.ts

@@ -12,29 +12,39 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    LocaleToggler: typeof import('./../components/locale-toggler.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SButton: typeof import('@soybeanjs/ui')['SButton']
+    SButtonIcon: typeof import('@soybeanjs/ui')['SButtonIcon']
     SButtonLink: typeof import('@soybeanjs/ui')['SButtonLink']
     SCard: typeof import('@soybeanjs/ui')['SCard']
     SConfigProvider: typeof import('@soybeanjs/ui')['SConfigProvider']
     SDialog: typeof import('@soybeanjs/ui')['SDialog']
+    SDropdownMenu: typeof import('@soybeanjs/ui')['SDropdownMenu']
+    SDropdownMenuRadio: typeof import('@soybeanjs/ui')['SDropdownMenuRadio']
     SIcon: typeof import('@soybeanjs/ui')['SIcon']
     SSwitch: typeof import('@soybeanjs/ui')['SSwitch']
     ThemeSchemaToggler: typeof import('./../components/theme-schema-toggler.vue')['default']
+    ToolBar: typeof import('./../components/tool-bar.vue')['default']
   }
 }
 
 // For TSX support
 declare global {
+  const LocaleToggler: typeof import('./../components/locale-toggler.vue')['default']
   const RouterLink: typeof import('vue-router')['RouterLink']
   const RouterView: typeof import('vue-router')['RouterView']
   const SButton: typeof import('@soybeanjs/ui')['SButton']
+  const SButtonIcon: typeof import('@soybeanjs/ui')['SButtonIcon']
   const SButtonLink: typeof import('@soybeanjs/ui')['SButtonLink']
   const SCard: typeof import('@soybeanjs/ui')['SCard']
   const SConfigProvider: typeof import('@soybeanjs/ui')['SConfigProvider']
   const SDialog: typeof import('@soybeanjs/ui')['SDialog']
+  const SDropdownMenu: typeof import('@soybeanjs/ui')['SDropdownMenu']
+  const SDropdownMenuRadio: typeof import('@soybeanjs/ui')['SDropdownMenuRadio']
   const SIcon: typeof import('@soybeanjs/ui')['SIcon']
   const SSwitch: typeof import('@soybeanjs/ui')['SSwitch']
   const ThemeSchemaToggler: typeof import('./../components/theme-schema-toggler.vue')['default']
+  const ToolBar: typeof import('./../components/tool-bar.vue')['default']
 }