rayyy-vue-table-components 1.3.21 → 1.3.23

package/dist/src/components/items/BaseWaringDialog.vue.d.ts

@@ -20,10 +20,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onUpdate:submit"?: (() => any) | undefined;
-}>, {
-    waringText: string;
-    titleText: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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 { switchLanguage, getCurrentLocale, availableLocales, getLanguageName, initLanguageSwitcher, configureLanguageSwitcher, type LocaleCode, type LanguageConfig, type ExternalI18nHandler } from './utils/languageSwitcher';
+export { switchLanguage, getCurrentLocale, availableLocales, getLanguageName, getLocaleConfig, getCurrentLocaleConfig, initLanguageSwitcher, configureLanguageSwitcher, type LocaleCode, type LocaleConfig, type LanguageConfig, type ExternalI18nHandler } from './utils/languageSwitcher';
 export { BaseTable, BaseBtn, BaseInput, BaseDialog, SortTable, TitleTable, SearchBar };
 export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, PluginOptions, VueTableComponentsPlugin, } from './types/components';
 export * from './components';

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

@@ -1,3 +1,85 @@
+export declare const localeConfig: {
+    'zh-TW': {
+        name: string;
+        messages: {
+            "common.select": string;
+            "common.confirm": string;
+            "common.cancel": string;
+            "dialog.confirmRemoveUser": string;
+            "common.warning": string;
+            "search.placeholder": string;
+            "common.execute": string;
+            "common.reset": string;
+            "common.loading": string;
+            "common.view": string;
+            "common.edit": string;
+            "common.column": string;
+            "common.back": string;
+            "demo.componentDemo": string;
+            "button.title": string;
+            "button.primary ": string;
+            "button.default": string;
+            "button.danger": string;
+            "button.success": string;
+            "button.warning": string;
+            "button.info": string;
+            "button.style": string;
+            "button.size": string;
+            "button.small": string;
+            "button.medium": string;
+            "button.large ": string;
+            "status.title": string;
+            "status.normal ": string;
+            "status.loading": string;
+            "status.disabled": string;
+            "button.withIcon ": string;
+            "button.add": string;
+            "button.delete": string;
+            "common.save": string;
+            "common.discard": string;
+        };
+    };
+    'en-US': {
+        name: string;
+        messages: {
+            "common.select": string;
+            "common.confirm": string;
+            "common.cancel": string;
+            "dialog.confirmRemoveUser": string;
+            "common.warning": string;
+            "search.placeholder": string;
+            "common.execute": string;
+            "common.reset": string;
+            "common.loading": string;
+            "common.view": string;
+            "common.edit": string;
+            "common.column": string;
+            "common.back": string;
+            "demo.componentDemo": string;
+            "button.title": string;
+            "button.primary ": string;
+            "button.default": string;
+            "button.danger": string;
+            "button.success": string;
+            "button.warning": string;
+            "button.info": string;
+            "button.style": string;
+            "button.size": string;
+            "button.small": string;
+            "button.medium": string;
+            "button.large ": string;
+            "status.title": string;
+            "status.normal ": string;
+            "status.loading": string;
+            "status.disabled": string;
+            "button.withIcon ": string;
+            "button.add": string;
+            "button.delete": string;
+            "common.save": string;
+            "common.discard": string;
+        };
+    };
+};
 export declare const i18n: import('vue-i18n').I18n<{
     'zh-TW': {
         "common.select": string;
@@ -33,6 +115,8 @@ export declare const i18n: import('vue-i18n').I18n<{
         "button.withIcon ": string;
         "button.add": string;
         "button.delete": string;
+        "common.save": string;
+        "common.discard": string;
     };
     'en-US': {
         "common.select": string;
@@ -68,12 +152,94 @@ export declare const i18n: import('vue-i18n').I18n<{
         "button.withIcon ": string;
         "button.add": string;
         "button.delete": string;
+        "common.save": string;
+        "common.discard": string;
     };
 }, {}, {}, string, false>;
 export declare const switchLanguage: (locale: "zh-TW" | "en-US") => void;
 export declare const getCurrentLocale: () => "zh-TW" | "en-US";
+export declare const getCurrentLocaleConfig: () => {
+    name: string;
+    messages: {
+        "common.select": string;
+        "common.confirm": string;
+        "common.cancel": string;
+        "dialog.confirmRemoveUser": string;
+        "common.warning": string;
+        "search.placeholder": string;
+        "common.execute": string;
+        "common.reset": string;
+        "common.loading": string;
+        "common.view": string;
+        "common.edit": string;
+        "common.column": string;
+        "common.back": string;
+        "demo.componentDemo": string;
+        "button.title": string;
+        "button.primary ": string;
+        "button.default": string;
+        "button.danger": string;
+        "button.success": string;
+        "button.warning": string;
+        "button.info": string;
+        "button.style": string;
+        "button.size": string;
+        "button.small": string;
+        "button.medium": string;
+        "button.large ": string;
+        "status.title": string;
+        "status.normal ": string;
+        "status.loading": string;
+        "status.disabled": string;
+        "button.withIcon ": string;
+        "button.add": string;
+        "button.delete": string;
+        "common.save": string;
+        "common.discard": string;
+    };
+} | {
+    name: string;
+    messages: {
+        "common.select": string;
+        "common.confirm": string;
+        "common.cancel": string;
+        "dialog.confirmRemoveUser": string;
+        "common.warning": string;
+        "search.placeholder": string;
+        "common.execute": string;
+        "common.reset": string;
+        "common.loading": string;
+        "common.view": string;
+        "common.edit": string;
+        "common.column": string;
+        "common.back": string;
+        "demo.componentDemo": string;
+        "button.title": string;
+        "button.primary ": string;
+        "button.default": string;
+        "button.danger": string;
+        "button.success": string;
+        "button.warning": string;
+        "button.info": string;
+        "button.style": string;
+        "button.size": string;
+        "button.small": string;
+        "button.medium": string;
+        "button.large ": string;
+        "status.title": string;
+        "status.normal ": string;
+        "status.loading": string;
+        "status.disabled": string;
+        "button.withIcon ": string;
+        "button.add": string;
+        "button.delete": string;
+        "common.save": string;
+        "common.discard": string;
+    };
+};
 export declare const availableLocales: {
     value: string;
     label: string;
 }[];
+export declare const getLanguageName: (locale: string) => string;
 export declare const initLocale: () => void;

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

@@ -1,5 +1,6 @@
 /**
  * 語言切換工具
+ * 參考 Element Plus 的 i18n 處理方式
  * 供外部專案使用的語言切換功能
  */
 declare const defaultLocales: readonly [{
@@ -10,6 +11,10 @@ declare const defaultLocales: readonly [{
     readonly label: "English";
 }];
 export type LocaleCode = typeof defaultLocales[number]['value'];
+export interface LocaleConfig {
+    name: string;
+    messages: Record<string, any>;
+}
 export interface ExternalI18nHandler {
     switchLanguage: (locale: string) => void;
     getCurrentLocale: () => string;
@@ -18,6 +23,7 @@ export interface ExternalI18nHandler {
         label: string;
     }>;
     getLanguageName?: (locale: string) => string;
+    getLocaleConfig?: (locale: string) => LocaleConfig;
 }
 export interface LanguageConfig {
     locales: Array<{
@@ -27,6 +33,7 @@ export interface LanguageConfig {
     defaultLocale: string;
     storageKey?: string;
     externalHandler?: ExternalI18nHandler;
+    localeConfigs?: Record<string, LocaleConfig>;
 }
 export declare const availableLocales: () => {
     value: string;
@@ -36,5 +43,7 @@ export declare const configureLanguageSwitcher: (config: Partial<LanguageConfig>
 export declare const switchLanguage: (locale: string) => void;
 export declare const getCurrentLocale: () => string;
 export declare const getLanguageName: (locale: string) => string;
+export declare const getLocaleConfig: (locale: string) => LocaleConfig | undefined;
+export declare const getCurrentLocaleConfig: () => LocaleConfig | undefined;
 export declare const initLanguageSwitcher: () => string;
 export {};

package/package.json

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

package/src/components/items/BaseWaringDialog.vue

@@ -1,20 +1,17 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import BaseDialog from './BaseDialog.vue'
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean
-    waringText?: string
-    subWaringText?: string
-    titleText?: string
-    modalWidth?: string
-  }>(),
-  {
-    waringText: '請問是否確認移除該使用者',
-    titleText: '警告',
-  },
-)
+const { t } = useI18n()
+
+const props = defineProps<{
+  modelValue: boolean
+  waringText?: string
+  subWaringText?: string
+  titleText?: string
+  modalWidth?: string
+}>()
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void

package/src/components/items/SearchBar.vue

@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import { ref, useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 import BaseInput from '../form/BaseInput.vue'
 
+const { t } = useI18n()
+
 defineProps<{
   showSearch?: boolean
 }>()
@@ -38,7 +41,7 @@ const resetFilter = () => {
       <div v-if="showSearch" class="search-input">
         <base-input
           v-model="keyword"
-          placeholder="請輸入關鍵字搜尋列表"
+          :placeholder="t('search.placeholder')"
           :show-word-limit="true"
           @keydown.enter="doSearch"
           @update:clearValue="clearableClick"

package/src/components/layout/DetailLayout.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { MainPanel, BaseBtn, SearchableListPanel } from '@/components'
+import { useI18n } from 'vue-i18n'
+import { MainPanel, BaseBtn } from '@/components'
+
+const { t } = useI18n()
 
 defineProps<{
   title: string
@@ -39,8 +42,8 @@ const handleBackClick = () => {
 
     <template #footer>
       <div class="border-t pt-4 w-full flex items-center justify-end" v-if="isEditable">
-        <BaseBtn text="儲存" type="primary" is-fill @click="saveDetailEdit" />
-        <BaseBtn text="捨棄" type="primary" @click="cancelDetailEdit" />
+        <BaseBtn :text="t('common.save')" type="primary" is-fill @click="saveDetailEdit" />
+        <BaseBtn :text="t('common.discard')" type="primary" @click="cancelDetailEdit" />
       </div>
     </template>
   </MainPanel>

package/src/components/layout/FilterLayout.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { MainPanel, BaseBtn } from '@/components'
 
+const { t } = useI18n()
+
 defineProps<{
   mainTitle: string
   showBack?: boolean | string | object
@@ -36,8 +39,8 @@ const handleBackClick = () => {
     </template>
     <template #footer>
       <div class="submit-row">
-        <base-btn text="執行" is-fill type="primary" @click="doFilter" />
-        <base-btn text="重設" type="primary" @click="resetFilter" />
+        <base-btn :text="t('common.execute')" is-fill type="primary" @click="doFilter" />
+        <base-btn :text="t('common.reset')" type="primary" @click="resetFilter" />
       </div>
     </template>
   </MainPanel>

package/src/components/tables/BaseTable.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts" generic="T extends Record<string, unknown> = Record<string, unknown>">
 import type { VNode } from 'vue'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { TableColumnCtx } from 'element-plus'
 import type { SortChangValue, TableColumn } from '@/types'
 
+const { t } = useI18n()
+
 type Props<T extends Record<string, unknown> = Record<string, unknown>> = {
   loading?: boolean
   data: T[]
@@ -79,7 +82,7 @@ const operatorWidth = computed(() => {
 <template>
   <el-table
     v-loading="loading"
-    element-loading-text="數據加載中..."
+    :element-loading-text="t('common.loading')"
     :data="data"
     border
     :show-summary="showSummary"
@@ -127,7 +130,7 @@ const operatorWidth = computed(() => {
             @click="handleOperateClick(row, 'check')"
             v-if="showCheckBtn"
           >
-            查看
+            {{ t('common.view') }}
           </p>
           <el-divider direction="vertical" class="!mx-2" v-if="showCheckBtn && showEditBtn" />
           <p
@@ -135,7 +138,7 @@ const operatorWidth = computed(() => {
             @click="handleOperateClick(row, 'edit')"
             v-if="showEditBtn"
           >
-            编辑
+            {{ t('common.edit') }}
           </p>
         </div>
       </template>

package/src/utils/languageSwitcher.ts

@@ -1,5 +1,6 @@
 /**
  * 語言切換工具
+ * 參考 Element Plus 的 i18n 處理方式
  * 供外部專案使用的語言切換功能
  */
 
@@ -11,12 +12,19 @@ const defaultLocales = [
 
 export type LocaleCode = typeof defaultLocales[number]['value']
 
+// 語言配置接口（參考 Element Plus 的 locale 配置）
+export interface LocaleConfig {
+  name: string
+  messages: Record<string, any>
+}
+
 // 外部 i18n 切換函數接口
 export interface ExternalI18nHandler {
   switchLanguage: (locale: string) => void
   getCurrentLocale: () => string
   availableLocales: () => Array<{ value: string; label: string }>
   getLanguageName?: (locale: string) => string
+  getLocaleConfig?: (locale: string) => LocaleConfig
 }
 
 // 語言配置接口
@@ -25,6 +33,8 @@ export interface LanguageConfig {
   defaultLocale: string
   storageKey?: string
   externalHandler?: ExternalI18nHandler
+  // 新增：語言配置映射
+  localeConfigs?: Record<string, LocaleConfig>
 }
 
 // 全域語言配置
@@ -71,7 +81,10 @@ export const switchLanguage = (locale: string) => {
 
   // 觸發自定義事件，讓外部專案監聽
   window.dispatchEvent(new CustomEvent('languageChanged', {
-    detail: { locale }
+    detail: {
+      locale,
+      localeConfig: languageConfig.localeConfigs?.[locale]
+    }
   }))
 }
 
@@ -99,13 +112,33 @@ export const getLanguageName = (locale: string): string => {
   return language?.label || languageConfig.locales[0]?.label || 'Unknown'
 }
 
+// 獲取語言配置（參考 Element Plus 的 locale 配置方式）
+export const getLocaleConfig = (locale: string): LocaleConfig | undefined => {
+  // 如果有外部處理器且提供此功能
+  if (languageConfig.externalHandler?.getLocaleConfig) {
+    return languageConfig.externalHandler.getLocaleConfig(locale)
+  }
+
+  return languageConfig.localeConfigs?.[locale]
+}
+
+// 獲取當前語言配置
+export const getCurrentLocaleConfig = (): LocaleConfig | undefined => {
+  const currentLocale = getCurrentLocale()
+  return getLocaleConfig(currentLocale)
+}
+
 // 初始化語言設定（供外部專案調用）
 export const initLanguageSwitcher = () => {
   const currentLocale = getCurrentLocale()
+  const localeConfig = getCurrentLocaleConfig()
 
   // 觸發初始化事件
   window.dispatchEvent(new CustomEvent('languageInitialized', {
-    detail: { locale: currentLocale }
+    detail: {
+      locale: currentLocale,
+      localeConfig
+    }
   }))
 
   return currentLocale