rayyy-vue-table-components 2.0.15 → 2.0.17

package/dist/src/components/layout/SearchableListPanel.vue.d.ts

@@ -1,4 +1,5 @@
 import { Pager } from '../../types';
+import { Language } from 'element-plus/es/locale';
 type __VLS_Props = {
     title: string;
     pagination: Pager;
@@ -6,6 +7,7 @@ type __VLS_Props = {
     showSearch?: boolean;
     pageSizeList?: number[];
     showPagination?: boolean;
+    locale?: Language;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/src/types/components.d.ts

@@ -447,6 +447,10 @@ export interface SearchableListPanelProps {
   showSearch?: boolean
   /** 分頁大小選項列表 */
   pageSizeList?: number[]
+  /** 是否顯示分頁 */
+  showPagination?: boolean
+  /** Element Plus 語系設定 */
+  locale?: import('element-plus/es/locale').Language
 }
 
 /** SearchableListPanel 組件 Emits 類型 */

package/package.json

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

package/src/components/layout/SearchableListPanel.vue

@@ -3,6 +3,8 @@ import { toRefs, computed } 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<{
@@ -12,6 +14,7 @@ const props = withDefaults(
     showSearch?: boolean
     pageSizeList?: number[]
     showPagination?: boolean
+    locale?: Language // 新增：Element Plus locale
   }>(),
   {
     pageSizeList: () => [10, 25, 50, 100, 200],
@@ -49,12 +52,19 @@ const showPager = computed(() => {
   if (props.showPagination) {
     return props.showPagination
   } else {
-return props.pagination.totalCount > 0
+    return props.pagination.totalCount > 0
   }
 })
 
-// 取得響應式的 Element Plus locale
-const elementLocale = useComponentElementLocale()
+// 優先使用 prop，沒有 prop 則使用 composable
+const elementLocale = computed(() => {
+  // 檢查 props.locale 是否為真正的 Language 對象（不是預設值）
+  if (props.locale && typeof props.locale === 'object' && 'name' in props.locale) {
+    return props.locale
+  }
+  // 回退：使用簡化的 composable
+  return useComponentElementLocale().value
+})
 </script>
 
 <template>

package/src/types/components.d.ts

@@ -448,6 +448,10 @@ export interface SearchableListPanelProps {
   showSearch?: boolean
   /** 分頁大小選項列表 */
   pageSizeList?: number[]
+  /** 是否顯示分頁 */
+  showPagination?: boolean
+  /** Element Plus 語系設定 */
+  locale?: import('element-plus/es/locale').Language
 }
 
 /** SearchableListPanel 組件 Emits 類型 */

package/src/utils/i18n.ts

@@ -91,36 +91,15 @@ export function useI18n() {
  * 返回響應式的 Element Plus locale 對象
  */
 export function useElementLocale() {
-  const instance = getCurrentInstance()
-
-  // 在 computed 外部一次性獲取 i18n 引用
-  let externalI18n: Composer | undefined
   try {
-    const globalProperties = instance?.appContext.config.globalProperties
-    const externalI18nInstance = globalProperties?.$i18n as I18n | undefined
-
-    // 如果是 I18n 實例，取得其 global 屬性
-    if (externalI18nInstance && 'global' in externalI18nInstance) {
-      externalI18n = externalI18nInstance.global as Composer
-    }
+    const { locale } = useI18n()
+    return computed(() => {
+      return locale.value === 'zh-TW' ? zhTw : enUs
+    })
   } catch (e) {
-    // 如果取得失敗，繼續使用內部 i18n
-    externalI18n = undefined
+    // 防呆：預設中文
+    return computed(() => zhTw)
   }
-
-  // 取得內部 i18n
-  const internalI18nInstance = getInternalI18n()
-  const internalGlobal = internalI18nInstance.global as Composer
-
-  // 決定使用哪個 i18n（在 computed 外部決定）
-  const currentI18n = externalI18n || internalGlobal
-
-  // 返回響應式的 Element Plus locale
-  // 現在 Vue 可以正確追蹤 currentI18n.locale.value 的變化
-  return computed(() => {
-    const locale = currentI18n.locale.value  // ✅ Vue 可以追蹤！
-    return locale === 'zh-TW' ? zhTw : enUs
-  })
 }
 
 /**
@@ -128,34 +107,15 @@ export function useElementLocale() {
  * 專門用於組件庫內部的 Element Plus 組件
  */
 export function useComponentElementLocale() {
-  const instance = getCurrentInstance()
-
-  // 在 computed 外部一次性獲取 i18n 引用
-  let externalI18n: Composer | undefined
   try {
-    const globalProperties = instance?.appContext.config.globalProperties
-    const externalI18nInstance = globalProperties?.$i18n as I18n | undefined
-
-    if (externalI18nInstance && 'global' in externalI18nInstance) {
-      externalI18n = externalI18nInstance.global as Composer
-    }
+    const { locale } = useI18n()
+    return computed(() => {
+      return locale.value === 'zh-TW' ? zhTw : enUs
+    })
   } catch (e) {
-    externalI18n = undefined
+    // 防呆：預設中文
+    return computed(() => zhTw)
   }
-
-  // 取得內部 i18n
-  const internalI18nInstance = getInternalI18n()
-  const internalGlobal = internalI18nInstance.global as Composer
-
-  // 決定使用哪個 i18n（在 computed 外部決定）
-  const currentI18n = externalI18n || internalGlobal
-
-  // 返回響應式的 Element Plus locale
-  // 現在 Vue 可以正確追蹤 currentI18n.locale.value 的變化
-  return computed(() => {
-    const locale = currentI18n.locale.value  // ✅ Vue 可以追蹤！
-    return locale === 'zh-TW' ? zhTw : enUs
-  })
 }
 
 // 導出類型