rayyy-vue-table-components 2.0.11 → 2.0.13

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 } from './utils/i18n';
+export { useI18n, setLocale, useElementLocale, 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

@@ -18,4 +18,368 @@ 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;
+        };
+    };
+}>;
+/**
+ * 組件庫內部使用的 Element Plus locale composable
+ * 專門用於組件庫內部的 Element Plus 組件
+ */
+export declare function useComponentElementLocale(): 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 type { I18n, Composer };

package/package.json

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

package/src/components/layout/SearchableListPanel.vue

@@ -2,6 +2,7 @@
 import { toRefs, computed } from 'vue'
 import type { Pager } from '@/types'
 import { MainPanel, SearchBar } from '@/components'
+import { useComponentElementLocale } from '@/utils/i18n'
 
 const props = withDefaults(
   defineProps<{
@@ -48,9 +49,12 @@ 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()
 </script>
 
 <template>
@@ -72,16 +76,18 @@ const showPager = computed(() => {
     </template>
 
     <template #footer>
-      <el-pagination
-        v-if="showPager"
-        layout="jumper, prev, pager, next, total, sizes"
-        :page-sizes="pageSizeList"
-        :current-page="pagination.page"
-        :page-size="pagination.limit"
-        :total="pagination.totalCount"
-        @current-change="updatePage"
-        @size-change="changePageSize"
-      />
+      <el-config-provider :locale="elementLocale">
+        <el-pagination
+          v-if="showPager"
+          layout="jumper, prev, pager, next, total, sizes"
+          :page-sizes="pageSizeList"
+          :current-page="pagination.page"
+          :page-size="pagination.limit"
+          :total="pagination.totalCount"
+          @current-change="updatePage"
+          @size-change="changePageSize"
+        />
+      </el-config-provider>
     </template>
   </main-panel>
 </template>

package/src/utils/i18n.ts

@@ -1,6 +1,8 @@
 import { createI18n, type I18n, type Composer } from 'vue-i18n'
 import { getCurrentInstance, computed } from 'vue'
 import { messages } from '../locales'
+import zhTw from 'element-plus/es/locale/lang/zh-tw'
+import enUs from 'element-plus/es/locale/lang/en'
 
 // 內部 i18n 實例
 let internalI18n: I18n | null = null
@@ -84,6 +86,78 @@ export function useI18n() {
   return i18n.global as Composer
 }
 
+/**
+ * Element Plus locale composable
+ * 返回響應式的 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
+    }
+  } catch (e) {
+    // 如果取得失敗，繼續使用內部 i18n
+    externalI18n = undefined
+  }
+
+  // 取得內部 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
+  })
+}
+
+/**
+ * 組件庫內部使用的 Element Plus locale composable
+ * 專門用於組件庫內部的 Element Plus 組件
+ */
+export function useComponentElementLocale() {
+  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
+    }
+  } catch (e) {
+    // 如果取得失敗，繼續使用內部 i18n
+    externalI18n = undefined
+  }
+
+  // 取得內部 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
+  })
+}
+
 // 導出類型
 export type { I18n, Composer }