rayyy-vue-table-components 2.0.17 → 2.0.19

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 { useI18n, setLocale, useElementLocale, useComponentElementLocale } from './utils/i18n';
+export { useI18n, setLocale, useComponentElementLocale } from './utils/i18n';
 export * from './locales';
 export { BaseTable, BaseBtn, BaseInput, BaseDialog, SortTable, TitleTable, SearchBar };
 export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, PluginOptions, VueTableComponentsPlugin, } from './types/components';

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

@@ -17,189 +17,7 @@ export declare function useComponentI18n(): {
 /**
  * 全域 i18n 實例（用於非組件環境）
  */
-export declare function useI18n(): Composer;
-/**
- * Element Plus locale composable
- * 返回響應式的 Element Plus locale 對象
- */
-export declare function useElementLocale(): import('vue').ComputedRef<{
-    name: string;
-    el: {
-        breadcrumb: {
-            label: string;
-        };
-        colorpicker: {
-            confirm: string;
-            clear: string;
-            defaultLabel: string;
-            description: string;
-            alphaLabel: string;
-        };
-        datepicker: {
-            now: string;
-            today: string;
-            cancel: string;
-            clear: string;
-            confirm: string;
-            dateTablePrompt: string;
-            monthTablePrompt: string;
-            yearTablePrompt: string;
-            selectedDate: string;
-            selectDate: string;
-            selectTime: string;
-            startDate: string;
-            startTime: string;
-            endDate: string;
-            endTime: string;
-            prevYear: string;
-            nextYear: string;
-            prevMonth: string;
-            nextMonth: string;
-            year: string;
-            month1: string;
-            month2: string;
-            month3: string;
-            month4: string;
-            month5: string;
-            month6: string;
-            month7: string;
-            month8: string;
-            month9: string;
-            month10: string;
-            month11: string;
-            month12: string;
-            weeks: {
-                sun: string;
-                mon: string;
-                tue: string;
-                wed: string;
-                thu: string;
-                fri: string;
-                sat: string;
-            };
-            weeksFull: {
-                sun: string;
-                mon: string;
-                tue: string;
-                wed: string;
-                thu: string;
-                fri: string;
-                sat: string;
-            };
-            months: {
-                jan: string;
-                feb: string;
-                mar: string;
-                apr: string;
-                may: string;
-                jun: string;
-                jul: string;
-                aug: string;
-                sep: string;
-                oct: string;
-                nov: string;
-                dec: string;
-            };
-        };
-        inputNumber: {
-            decrease: string;
-            increase: string;
-        };
-        select: {
-            loading: string;
-            noMatch: string;
-            noData: string;
-            placeholder: string;
-        };
-        mention: {
-            loading: string;
-        };
-        dropdown: {
-            toggleDropdown: string;
-        };
-        cascader: {
-            noMatch: string;
-            loading: string;
-            placeholder: string;
-            noData: string;
-        };
-        pagination: {
-            goto: string;
-            pagesize: string;
-            total: string;
-            pageClassifier: string;
-            page: string;
-            prev: string;
-            next: string;
-            currentPage: string;
-            prevPages: string;
-            nextPages: string;
-            deprecationWarning: string;
-        };
-        dialog: {
-            close: string;
-        };
-        drawer: {
-            close: string;
-        };
-        messagebox: {
-            title: string;
-            confirm: string;
-            cancel: string;
-            error: string;
-            close: string;
-        };
-        upload: {
-            deleteTip: string;
-            delete: string;
-            preview: string;
-            continue: string;
-        };
-        slider: {
-            defaultLabel: string;
-            defaultRangeStartLabel: string;
-            defaultRangeEndLabel: string;
-        };
-        table: {
-            emptyText: string;
-            confirmFilter: string;
-            resetFilter: string;
-            clearFilter: string;
-            sumText: string;
-        };
-        tour: {
-            next: string;
-            previous: string;
-            finish: string;
-        };
-        tree: {
-            emptyText: string;
-        };
-        transfer: {
-            noMatch: string;
-            noData: string;
-            titles: string[];
-            filterPlaceholder: string;
-            noCheckedFormat: string;
-            hasCheckedFormat: string;
-        };
-        image: {
-            error: string;
-        };
-        pageHeader: {
-            title: string;
-        };
-        popconfirm: {
-            confirmButtonText: string;
-            cancelButtonText: string;
-        };
-        carousel: {
-            leftArrow: string;
-            rightArrow: string;
-            indicator: string;
-        };
-    };
-}>;
+export declare function useI18n(): Composer<{}, {}, {}, string, never, string>;
 /**
  * 組件庫內部使用的 Element Plus locale composable
  * 專門用於組件庫內部的 Element Plus 組件

package/package.json

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

package/src/components/layout/SearchableListPanel.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { toRefs, computed } from 'vue'
+import { toRefs, computed, watch } from 'vue'
 import type { Pager } from '@/types'
 import { MainPanel, SearchBar } from '@/components'
 import { useComponentElementLocale } from '@/utils/i18n'
 import type { Language } from 'element-plus/es/locale'
-import zhTw from 'element-plus/es/locale/lang/zh-tw'
 
 const props = withDefaults(
   defineProps<{
@@ -56,14 +55,30 @@ const showPager = computed(() => {
   }
 })
 
+// 在 computed 外部調用，保持引用穩定
+const fallbackLocale = useComponentElementLocale()
+
+// 監聽 fallbackLocale 的變化
+watch(fallbackLocale, (newLocale, oldLocale) => {
+  console.log('🔄 [SearchableListPanel] fallbackLocale 變化:', {
+    old: oldLocale?.name,
+    new: newLocale?.name
+  })
+}, { immediate: true })
+
 // 優先使用 prop，沒有 prop 則使用 composable
 const elementLocale = computed(() => {
+  console.log('🔍 [SearchableListPanel] elementLocale computed 執行')
+
   // 檢查 props.locale 是否為真正的 Language 對象（不是預設值）
   if (props.locale && typeof props.locale === 'object' && 'name' in props.locale) {
+    console.log('🔍 [SearchableListPanel] 使用 props.locale:', props.locale.name)
     return props.locale
   }
-  // 回退：使用簡化的 composable
-  return useComponentElementLocale().value
+
+  console.log('🔍 [SearchableListPanel] 使用 fallbackLocale:', fallbackLocale.value.name)
+  // 現在能正確追蹤響應式
+  return fallbackLocale.value
 })
 </script>
 

package/src/utils/i18n.ts

@@ -42,30 +42,44 @@ export function setLocale(locale: string): void {
  * 會優先使用外部專案的 i18n，如果不存在則使用內部 i18n
  */
 export function useComponentI18n() {
+  console.log('🔍 [useComponentI18n] 開始執行')
+
   const instance = getCurrentInstance()
+  console.log('🔍 [useComponentI18n] 獲取 instance:', !!instance)
 
   // 嘗試取得外部專案的 i18n（支援 Composition API 模式）
   let externalI18n: Composer | undefined
   try {
+    console.log('🔍 [useComponentI18n] 嘗試獲取外部 i18n')
     const globalProperties = instance?.appContext.config.globalProperties
+    console.log('🔍 [useComponentI18n] globalProperties:', !!globalProperties)
+
     const externalI18nInstance = globalProperties?.$i18n as I18n | undefined
+    console.log('🔍 [useComponentI18n] externalI18nInstance:', !!externalI18nInstance)
 
     // 如果是 I18n 實例，取得其 global 屬性
     if (externalI18nInstance && 'global' in externalI18nInstance) {
       externalI18n = externalI18nInstance.global as Composer
+      console.log('🔍 [useComponentI18n] 成功獲取外部 i18n，locale:', externalI18n.locale.value)
+    } else {
+      console.log('🔍 [useComponentI18n] 外部 i18n 實例不存在或格式不正確')
     }
   } catch (e) {
+    console.log('❌ [useComponentI18n] 獲取外部 i18n 失敗:', e)
     // 如果取得失敗，繼續使用內部 i18n
     externalI18n = undefined
   }
 
   // 取得內部 i18n
+  console.log('🔍 [useComponentI18n] 獲取內部 i18n')
   const internalI18nInstance = getInternalI18n()
   const internalGlobal = internalI18nInstance.global as Composer
+  console.log('🔍 [useComponentI18n] 內部 i18n locale:', internalGlobal.locale.value)
 
   // 如果存在外部 i18n，優先使用外部的（因為外部可能有覆蓋的翻譯）
   // 但要支援回退到內部 i18n
   const currentI18n = externalI18n || internalGlobal
+  console.log('🔍 [useComponentI18n] 最終使用 i18n:', externalI18n ? '外部' : '內部', 'locale:', currentI18n.locale.value)
 
   // 直接使用 i18n 的 t 函數（它本身就是響應式的）
   // 如果需要回退邏輯，我們需要檢查 key 是否存在
@@ -82,24 +96,11 @@ export function useComponentI18n() {
  * 全域 i18n 實例（用於非組件環境）
  */
 export function useI18n() {
+  console.log('🔍 [useI18n] 開始執行')
   const i18n = getInternalI18n()
-  return i18n.global as Composer
-}
-
-/**
- * Element Plus locale composable
- * 返回響應式的 Element Plus locale 對象
- */
-export function useElementLocale() {
-  try {
-    const { locale } = useI18n()
-    return computed(() => {
-      return locale.value === 'zh-TW' ? zhTw : enUs
-    })
-  } catch (e) {
-    // 防呆：預設中文
-    return computed(() => zhTw)
-  }
+  const global = i18n.global as Composer
+  console.log('🔍 [useI18n] 返回內部 i18n，locale:', global.locale.value)
+  return global
 }
 
 /**
@@ -107,17 +108,28 @@ export function useElementLocale() {
  * 專門用於組件庫內部的 Element Plus 組件
  */
 export function useComponentElementLocale() {
+  console.log('🔍 [useComponentElementLocale] 開始執行')
+
   try {
+    console.log('🔍 [useComponentElementLocale] 嘗試獲取 useI18n()')
     const { locale } = useI18n()
+    console.log('🔍 [useComponentElementLocale] 成功獲取 locale:', locale.value)
+
     return computed(() => {
-      return locale.value === 'zh-TW' ? zhTw : enUs
+      console.log('🔍 [useComponentElementLocale] computed 重新計算，locale.value:', locale.value)
+      const result = locale.value === 'zh-TW' ? zhTw : enUs
+      console.log('🔍 [useComponentElementLocale] 返回結果:', result.name)
+      return result
     })
   } catch (e) {
+    console.log('❌ [useComponentElementLocale] 獲取 useI18n() 失敗:', e)
     // 防呆：預設中文
-    return computed(() => zhTw)
+    return computed(() => {
+      console.log('🔍 [useComponentElementLocale] 使用預設中文')
+      return zhTw
+    })
   }
 }
 
 // 導出類型
 export type { I18n, Composer }
-