rayyy-vue-table-components 2.0.35 → 2.0.37

package/dist/src/components/tables/BaseTable.vue.d.ts

@@ -1,6 +1,7 @@
 import { VNode } from 'vue';
 import { TableColumnCtx } from 'element-plus';
 import { SortChangValue, TableColumn } from '../../types';
+import { Language } from 'element-plus/es/locale';
 declare const _default: <T extends Record<string, unknown> = Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
         readonly "onSelection-change"?: ((selection: T[]) => any) | undefined;
@@ -26,6 +27,7 @@ declare const _default: <T extends Record<string, unknown> = Record<string, unkn
         }) => string) | undefined;
         showCheckBtn?: boolean;
         showEditBtn?: boolean;
+        locale?: Language;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/src/locales/en-US.json.d.ts

@@ -33,7 +33,8 @@ declare const _default: {
   "button.add": "Add",
   "button.delete": "Delete",
   "common.save": "Save",
-  "common.discard": "Discard"
+  "common.discard": "Discard",
+  "table.empty": "No data"
 };
 
 export default _default;

package/dist/src/locales/index.d.ts

@@ -37,6 +37,7 @@ export declare const messages: {
         "button.delete": string;
         "common.save": string;
         "common.discard": string;
+        "table.empty": string;
     };
     'en-US': {
         "common.select": string;
@@ -74,6 +75,7 @@ export declare const messages: {
         "button.delete": string;
         "common.save": string;
         "common.discard": string;
+        "table.empty": string;
     };
 };
 export type LocaleType = keyof typeof messages;

package/dist/src/locales/zh-TW.json.d.ts

@@ -33,7 +33,8 @@ declare const _default: {
   "button.add": "添加",
   "button.delete": "刪除",
   "common.save": "儲存",
-  "common.discard": "捨棄"
+  "common.discard": "捨棄",
+  "table.empty": "暫無資料"
 };
 
 export default _default;

package/package.json

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

package/src/components/tables/BaseTable.vue

@@ -4,6 +4,8 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import type { TableColumnCtx } from 'element-plus'
 import type { SortChangValue, TableColumn } from '@/types'
+import type { Language } from 'element-plus/es/locale'
+import { useComponentElementLocale } from '@/utils/i18n'
 
 const { t } = useI18n()
 
@@ -21,6 +23,7 @@ type Props<T extends Record<string, unknown> = Record<string, unknown>> = {
   baseTableRowClassName?: (data: { row: T; rowIndex: number }) => string
   showCheckBtn?: boolean
   showEditBtn?: boolean
+  locale?: Language // 新增：Element Plus locale
 }
 
 // 組件屬性默認值
@@ -77,76 +80,91 @@ const operatorWidth = computed(() => {
     return 60
   }
 })
+
+// 優先使用 prop，沒有 prop 則使用 composable
+const elementLocale = computed(() => {
+  if (props.locale) {
+    return props.locale
+  }
+  return useComponentElementLocale().value
+})
 </script>
 
 <template>
-  <el-table
-    v-if="data.length > 0"
-    v-loading="loading"
-    :element-loading-text="t('common.loading')"
-    :data="data"
-    border
-    :show-summary="showSummary"
-    :show-overflow-tooltip="showOverFlowTooltip"
-    :summary-method="getSummaries"
-    :row-class-name="tableRowClassName"
-    class="data-table"
-    @selection-change="handleSelectionChange"
-    @current-change="(currentRow: any) => emit('current-change', currentRow)"
-    :sort="() => {}"
-    @sort-change="onSortChange"
-  >
-    <!-- 選擇列 -->
-    <el-table-column v-if="showSelection" type="selection" width="60" fixed="left" align="center" />
-
-    <!-- 數據列 -->
-    <el-table-column v-for="(column, index) in columns" :key="index" v-bind="column">
-      <template #default="{ row }">
-        <div class="cell-content" @click="handleCellClick(column, row)">
-          <template v-if="column.formatter">
-            {{ column.formatter(row) }}
-          </template>
-          <component
-            v-else-if="column.template"
-            :is="{
-              setup() {
-                return () => column.template?.(row)
-              },
-            }"
-          />
-          <span v-else-if="column.prop">{{ row[column.prop] }}</span>
-        </div>
-      </template>
-    </el-table-column>
-    <el-table-column
-      v-if="props.showCheckBtn || props.showEditBtn"
-      :width="operatorWidth"
-      align="center"
-      fixed="right"
+  <el-config-provider :locale="elementLocale">
+    <el-table
+      v-if="data.length > 0"
+      v-loading="loading"
+      :element-loading-text="t('common.loading')"
+      :data="data"
+      border
+      :show-summary="showSummary"
+      :show-overflow-tooltip="showOverFlowTooltip"
+      :summary-method="getSummaries"
+      :row-class-name="tableRowClassName"
+      class="data-table"
+      @selection-change="handleSelectionChange"
+      @current-change="(currentRow: any) => emit('current-change', currentRow)"
+      :sort="() => {}"
+      @sort-change="onSortChange"
     >
-      <template #default="{ row }">
-        <div class="flex items-center justify-center">
-          <p
-            class="blue-text cursor-pointer font-bold"
-            @click="handleOperateClick(row, 'check')"
-            v-if="showCheckBtn"
-          >
-            {{ t('common.view') }}
-          </p>
-          <el-divider direction="vertical" class="!mx-2" v-if="showCheckBtn && showEditBtn" />
-          <p
-            class="blue-text cursor-pointer font-bold"
-            @click="handleOperateClick(row, 'edit')"
-            v-if="showEditBtn"
-          >
-            {{ t('common.edit') }}
-          </p>
-        </div>
-      </template>
-    </el-table-column>
-  </el-table>
+      <!-- 選擇列 -->
+      <el-table-column
+        v-if="showSelection"
+        type="selection"
+        width="60"
+        fixed="left"
+        align="center"
+      />
 
-  <el-empty v-else />
+      <!-- 數據列 -->
+      <el-table-column v-for="(column, index) in columns" :key="index" v-bind="column">
+        <template #default="{ row }">
+          <div class="cell-content" @click="handleCellClick(column, row)">
+            <template v-if="column.formatter">
+              {{ column.formatter(row) }}
+            </template>
+            <component
+              v-else-if="column.template"
+              :is="{
+                setup() {
+                  return () => column.template?.(row)
+                },
+              }"
+            />
+            <span v-else-if="column.prop">{{ row[column.prop] }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        v-if="props.showCheckBtn || props.showEditBtn"
+        :width="operatorWidth"
+        align="center"
+        fixed="right"
+      >
+        <template #default="{ row }">
+          <div class="flex items-center justify-center">
+            <p
+              class="blue-text cursor-pointer font-bold"
+              @click="handleOperateClick(row, 'check')"
+              v-if="showCheckBtn"
+            >
+              {{ t('common.view') }}
+            </p>
+            <el-divider direction="vertical" class="!mx-2" v-if="showCheckBtn && showEditBtn" />
+            <p
+              class="blue-text cursor-pointer font-bold"
+              @click="handleOperateClick(row, 'edit')"
+              v-if="showEditBtn"
+            >
+              {{ t('common.edit') }}
+            </p>
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-empty :description="t('table.empty')" v-else />
+  </el-config-provider>
 </template>
 
 <style scoped lang="scss"></style>

package/src/locales/en-US.json

@@ -33,5 +33,6 @@
   "button.add": "Add",
   "button.delete": "Delete",
   "common.save": "Save",
-  "common.discard": "Discard"
+  "common.discard": "Discard",
+  "table.empty": "No data"
 }

package/src/locales/zh-TW.json

@@ -33,5 +33,6 @@
   "button.add": "添加",
   "button.delete": "刪除",
   "common.save": "儲存",
-  "common.discard": "捨棄"
+  "common.discard": "捨棄",
+  "table.empty": "暫無資料"
 }