rayyy-vue-table-components 1.3.19 → 1.3.21

package/dist/src/index.d.ts

@@ -8,7 +8,7 @@ import { default as TitleTable } from './components/tables/TitleTable.vue';
 import { default as SearchBar } from './components/items/SearchBar.vue';
 export * from './types';
 export * from './utils/tableHelper';
-export { switchLanguage, getCurrentLocale, availableLocales, getLanguageName, initLanguageSwitcher, type LocaleCode } from './utils/languageSwitcher';
+export { switchLanguage, getCurrentLocale, availableLocales, getLanguageName, initLanguageSwitcher, configureLanguageSwitcher, type LocaleCode, type LanguageConfig, type ExternalI18nHandler } from './utils/languageSwitcher';
 export { BaseTable, BaseBtn, BaseInput, BaseDialog, SortTable, TitleTable, SearchBar };
 export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, PluginOptions, VueTableComponentsPlugin, } from './types/components';
 export * from './components';

package/dist/src/plugins/i18n.d.ts

@@ -73,7 +73,7 @@ export declare const i18n: import('vue-i18n').I18n<{
 export declare const switchLanguage: (locale: "zh-TW" | "en-US") => void;
 export declare const getCurrentLocale: () => "zh-TW" | "en-US";
 export declare const availableLocales: {
-    code: string;
-    name: string;
+    value: string;
+    label: string;
 }[];
 export declare const initLocale: () => void;

package/dist/src/utils/languageSwitcher.d.ts

@@ -2,15 +2,39 @@
  * 語言切換工具
  * 供外部專案使用的語言切換功能
  */
-export declare const availableLocales: readonly [{
-    readonly code: "zh-TW";
-    readonly name: "繁體中文";
+declare const defaultLocales: readonly [{
+    readonly value: "zh-TW";
+    readonly label: "繁體中文";
 }, {
-    readonly code: "en-US";
-    readonly name: "English";
+    readonly value: "en-US";
+    readonly label: "English";
 }];
-export type LocaleCode = typeof availableLocales[number]['code'];
-export declare const switchLanguage: (locale: LocaleCode) => void;
-export declare const getCurrentLocale: () => LocaleCode;
-export declare const getLanguageName: (locale: LocaleCode) => string;
-export declare const initLanguageSwitcher: () => "zh-TW" | "en-US";
+export type LocaleCode = typeof defaultLocales[number]['value'];
+export interface ExternalI18nHandler {
+    switchLanguage: (locale: string) => void;
+    getCurrentLocale: () => string;
+    availableLocales: () => Array<{
+        value: string;
+        label: string;
+    }>;
+    getLanguageName?: (locale: string) => string;
+}
+export interface LanguageConfig {
+    locales: Array<{
+        value: string;
+        label: string;
+    }>;
+    defaultLocale: string;
+    storageKey?: string;
+    externalHandler?: ExternalI18nHandler;
+}
+export declare const availableLocales: () => {
+    value: string;
+    label: string;
+}[];
+export declare const configureLanguageSwitcher: (config: Partial<LanguageConfig>) => void;
+export declare const switchLanguage: (locale: string) => void;
+export declare const getCurrentLocale: () => string;
+export declare const getLanguageName: (locale: string) => string;
+export declare const initLanguageSwitcher: () => string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.3.19",
+  "version": "1.3.21",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",

package/src/components/LanguageSwitcher.vue

@@ -12,8 +12,8 @@ const handleLanguageChange = (newLocale: "zh-TW" | "en-US") => {
 
 // 當前語言顯示名稱
 const currentLanguageName = computed(() => {
-  const currentLocale = availableLocales.find(l => l.code === locale.value)
-  return currentLocale?.name || '繁體中文'
+  const currentLocale = availableLocales.find(l => l.value === locale.value)
+  return currentLocale?.label || '繁體中文'
 })
 </script>
 
@@ -38,10 +38,10 @@ const currentLanguageName = computed(() => {
         <el-dropdown-menu>
           <el-dropdown-item
             v-for="item in availableLocales"
-            :key="item.code"
-            :command="item.code"
+            :key="item.value"
+            :command="item.value"
           >
-            {{ item.name }}
+            {{ item.label }}
           </el-dropdown-item>
         </el-dropdown-menu>
       </template>

package/src/utils/languageSwitcher.ts

@@ -3,18 +3,71 @@
  * 供外部專案使用的語言切換功能
  */
 
-// 可用的語言列表
-export const availableLocales = [
-  { code: 'zh-TW', name: '繁體中文' },
-  { code: 'en-US', name: 'English' },
+// 預設語言列表
+const defaultLocales = [
+  { value: 'zh-TW', label: '繁體中文' },
+  { value: 'en-US', label: 'English' },
 ] as const
 
-export type LocaleCode = typeof availableLocales[number]['code']
+export type LocaleCode = typeof defaultLocales[number]['value']
+
+// 外部 i18n 切換函數接口
+export interface ExternalI18nHandler {
+  switchLanguage: (locale: string) => void
+  getCurrentLocale: () => string
+  availableLocales: () => Array<{ value: string; label: string }>
+  getLanguageName?: (locale: string) => string
+}
+
+// 語言配置接口
+export interface LanguageConfig {
+  locales: Array<{ value: string; label: string }>
+  defaultLocale: string
+  storageKey?: string
+  externalHandler?: ExternalI18nHandler
+}
+
+// 全域語言配置
+let languageConfig: LanguageConfig = {
+  locales: [...defaultLocales],
+  defaultLocale: 'zh-TW',
+  storageKey: 'locale'
+}
+
+// 可用的語言列表（動態）
+export const availableLocales = () => {
+  // 如果有外部處理器，使用外部處理器
+  if (languageConfig.externalHandler) {
+    return languageConfig.externalHandler.availableLocales()
+  }
+
+  return languageConfig.locales
+}
+
+// 配置語言切換器
+export const configureLanguageSwitcher = (config: Partial<LanguageConfig>) => {
+  languageConfig = {
+    ...languageConfig,
+    ...config
+  }
+}
 
 // 語言切換功能
-export const switchLanguage = (locale: LocaleCode) => {
+export const switchLanguage = (locale: string) => {
+  // 如果有外部處理器，使用外部處理器
+  if (languageConfig.externalHandler) {
+    languageConfig.externalHandler.switchLanguage(locale)
+    return
+  }
+
+  // 檢查語言是否在配置中
+  if (!languageConfig.locales.some(l => l.value === locale)) {
+    console.warn(`Language ${locale} is not configured`)
+    return
+  }
+
   // 保存到 localStorage
-  localStorage.setItem('locale', locale)
+  localStorage.setItem(languageConfig.storageKey!, locale)
 
   // 觸發自定義事件，讓外部專案監聽
   window.dispatchEvent(new CustomEvent('languageChanged', {
@@ -23,17 +76,27 @@ export const switchLanguage = (locale: LocaleCode) => {
 }
 
 // 獲取當前語言
-export const getCurrentLocale = (): LocaleCode => {
-  const savedLocale = localStorage.getItem('locale') as LocaleCode
-  return savedLocale && availableLocales.some(l => l.code === savedLocale)
+export const getCurrentLocale = (): string => {
+  // 如果有外部處理器，使用外部處理器
+  if (languageConfig.externalHandler) {
+    return languageConfig.externalHandler.getCurrentLocale()
+  }
+
+  const savedLocale = localStorage.getItem(languageConfig.storageKey!)
+  return savedLocale && languageConfig.locales.some(l => l.value === savedLocale)
     ? savedLocale
-    : 'zh-TW'
+    : languageConfig.defaultLocale
 }
 
 // 獲取語言顯示名稱
-export const getLanguageName = (locale: LocaleCode): string => {
-  const language = availableLocales.find(l => l.code === locale)
-  return language?.name || '繁體中文'
+export const getLanguageName = (locale: string): string => {
+  // 如果有外部處理器且提供此功能
+  if (languageConfig.externalHandler?.getLanguageName) {
+    return languageConfig.externalHandler.getLanguageName(locale)
+  }
+
+  const language = languageConfig.locales.find(l => l.value === locale)
+  return language?.label || languageConfig.locales[0]?.label || 'Unknown'
 }
 
 // 初始化語言設定（供外部專案調用）