rayyy-vue-table-components 2.0.14 → 2.0.16

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<{}>;
@@ -31,6 +33,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
     onUpdatePage?: ((page: number) => any) | undefined;
     onUpdatePageSize?: ((limit: number) => any) | undefined;
 }>, {
+    locale: Language;
     pageSizeList: number[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

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.14",
+  "version": "2.0.16",
   "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,9 +14,11 @@ const props = withDefaults(
     showSearch?: boolean
     pageSizeList?: number[]
     showPagination?: boolean
+    locale?: Language  // 新增：Element Plus locale
   }>(),
   {
     pageSizeList: () => [10, 25, 50, 100, 200],
+    locale: () => zhTw,  // 預設值：中文
   },
 )
 
@@ -53,8 +57,14 @@ return props.pagination.totalCount > 0
   }
 })
 
-// 取得響應式的 Element Plus locale
-const elementLocale = useComponentElementLocale()
+// 優先使用 prop，沒有 prop 則使用 composable
+const elementLocale = computed(() => {
+  if (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,35 +91,15 @@ export function useI18n() {
  * 返回響應式的 Element Plus locale 對象
  */
 export function useElementLocale() {
-  const instance = getCurrentInstance()
-
-  // 嘗試取得外部專案的 i18n（支援 Composition API 模式）
-  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，優先使用外部的，否則使用內部的
-  const currentI18n = externalI18n || internalGlobal
-
-  // 返回響應式的 Element Plus locale
-  return computed(() => {
-    const locale = currentI18n.locale.value
-    return locale === 'zh-TW' ? zhTw : enUs
-  })
 }
 
 /**
@@ -127,34 +107,15 @@ export function useElementLocale() {
  * 專門用於組件庫內部的 Element Plus 組件
  */
 export function useComponentElementLocale() {
-  const instance = getCurrentInstance()
-
-  // 取得內部 i18n
-  const internalI18nInstance = getInternalI18n()
-  const internalGlobal = internalI18nInstance.global as Composer
-
-  // 返回響應式的 Element Plus locale
-  return 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
-      }
-    } catch (e) {
-      // 如果取得失敗，繼續使用內部 i18n
-      externalI18n = undefined
-    }
-
-    // 如果存在外部 i18n，優先使用外部的，否則使用內部的
-    const currentI18n = externalI18n || internalGlobal
-    const locale = currentI18n.locale.value
-    return locale === 'zh-TW' ? zhTw : enUs
-  })
+  try {
+    const { locale } = useI18n()
+    return computed(() => {
+      return locale.value === 'zh-TW' ? zhTw : enUs
+    })
+  } catch (e) {
+    // 防呆：預設中文
+    return computed(() => zhTw)
+  }
 }
 
 // 導出類型