rayyy-vue-table-components 1.4.5 → 2.0.0

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,12 +8,15 @@ 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 { useComponentI18n, useI18n, setLocale } 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';
 export * from './components';
 export declare function install(app: App, options?: {
     autoImportStyles?: boolean;
     prefix?: string;
+    locale?: string;
 }): void;
 declare const _default: {
     length: number;

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

@@ -0,0 +1,39 @@
+declare const _default: {
+  "common.select": "Please select",
+  "common.confirm": "Confirm",
+  "common.cancel": "Cancel",
+  "dialog.confirmRemoveUser": "Are you sure you want to remove this user?",
+  "common.warning": "Warning",
+  "search.placeholder": "Please enter keywords to search the list",
+  "common.execute": "Execute",
+  "common.reset": "Reset",
+  "common.loading": "Data loading",
+  "common.view": "View",
+  "common.edit": "Edit",
+  "common.column": "Column",
+  "common.back": "      Back",
+  "demo.componentDemo": "Component Demo",
+  "button.title": "Button",
+  "button.primary ": "Primary",
+  "button.default": "Default",
+  "button.danger": "Danger",
+  "button.success": "Success",
+  "button.warning": "Warning",
+  "button.info": "Info",
+  "button.style": "Style",
+  "button.size": "Size",
+  "button.small": "Small",
+  "button.medium": "Medium",
+  "button.large ": "Large",
+  "status.title": "Status",
+  "status.normal ": "Normal",
+  "status.loading": "Loading",
+  "status.disabled": "Disabled",
+  "button.withIcon ": "With Icon",
+  "button.add": "Add",
+  "button.delete": "Delete",
+  "common.save": "Save",
+  "common.discard": "Discard"
+};
+
+export default _default;

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

@@ -0,0 +1,80 @@
+import { default as zhTW } from './zh-TW.json';
+import { default as enUS } from './en-US.json';
+export declare const messages: {
+    'zh-TW': {
+        "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': {
+        "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 type LocaleType = keyof typeof messages;
+export { zhTW, enUS };

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

@@ -0,0 +1,39 @@
+declare const _default: {
+  "common.select": "請選擇",
+  "common.confirm": "確定",
+  "common.cancel": "取消",
+  "dialog.confirmRemoveUser": "請問是否確認移除該使用者",
+  "common.warning": "警告",
+  "search.placeholder": "請輸入關鍵字搜尋列表",
+  "common.execute": "執行",
+  "common.reset": "重設",
+  "common.loading": "數據加載中",
+  "common.view": "查看",
+  "common.edit": "編輯",
+  "common.column": "欄",
+  "common.back": "回到前一頁",
+  "demo.componentDemo": "組件示範",
+  "button.title": "按鈕",
+  "button.primary ": "主要",
+  "button.default": "默認",
+  "button.danger": "危險",
+  "button.success": "成功",
+  "button.warning": "警告",
+  "button.info": "信息",
+  "button.style": "樣式",
+  "button.size": "尺寸",
+  "button.small": "小",
+  "button.medium": "中",
+  "button.large ": "大",
+  "status.title": "狀態",
+  "status.normal ": "正常",
+  "status.loading": "載入中",
+  "status.disabled": "禁用",
+  "button.withIcon ": "帶圖標的",
+  "button.add": "添加",
+  "button.delete": "刪除",
+  "common.save": "儲存",
+  "common.discard": "捨棄"
+};
+
+export default _default;

package/dist/src/router/constants.d.ts

@@ -18,6 +18,7 @@ export declare const ROUTES: {
     readonly MAIN_PANEL: "/demo/main-panel";
     readonly DETAIL_LAYOUT: "/demo/detail-layout";
     readonly FILTER_LAYOUT: "/demo/filter-layout";
+    readonly I18N_TEST: "/demo/i18n-test";
     readonly NOT_FOUND: "/:catchAll(.*)";
 };
 export declare const ROUTE_NAMES: {
@@ -39,5 +40,6 @@ export declare const ROUTE_NAMES: {
     readonly MAIN_PANEL: "MainPanel";
     readonly DETAIL_LAYOUT: "DetailLayout";
     readonly FILTER_LAYOUT: "FilterLayout";
+    readonly I18N_TEST: "I18nTest";
     readonly NOT_FOUND: "NotFoundPage";
 };

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

@@ -906,6 +906,8 @@ export interface PluginOptions {
   autoImportStyles?: boolean
   /** 自定義前綴 */
   prefix?: string
+  /** 預設語系 (預設: 'zh-TW') */
+  locale?: string
 }
 
 /** 插件實例類型 */

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

@@ -0,0 +1,21 @@
+import { I18n, Composer } from 'vue-i18n';
+/**
+ * 設定內部 i18n 的語系
+ */
+export declare function setLocale(locale: string): void;
+/**
+ * 組件內使用的 i18n composable
+ * 會優先使用外部專案的 i18n，如果不存在則使用內部 i18n
+ */
+export declare function useComponentI18n(): {
+    t: import('vue-i18n').ComposerTranslation<{}, string, import('@intlify/core-base').RemoveIndexSignature<{
+        [x: string]: import('vue-i18n').LocaleMessageValue<import('vue-i18n').VueMessageType>;
+    }>, never, never, never>;
+    locale: import('vue').WritableComputedRef<string, string>;
+    i18n: Composer<{}, {}, {}, string, never, string>;
+};
+/**
+ * 全域 i18n 實例（用於非組件環境）
+ */
+export declare function useI18n(): Composer;
+export type { I18n, Composer };

package/dist/src/views/demo/I18nTestDemo.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.4.5",
+  "version": "2.0.0",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -33,6 +33,10 @@
       "types": "./dist/src/utils/tableStyles.d.ts",
       "import": "./src/utils/tableStyles.ts"
     },
+    "./locales": {
+      "types": "./src/locales/index.d.ts",
+      "import": "./src/locales/index.ts"
+    },
     "./styles": "./dist/rayyy-vue-table-components.css",
     "./styles/element": "./src/assets/styles/element/index.scss"
   },
@@ -43,6 +47,7 @@
     "src/types/*",
     "src/types/components.d.ts",
     "src/utils/*",
+    "src/locales/*",
     "src/assets/styles/*",
     "tailwind-preset.js",
     "README.md"
@@ -82,13 +87,15 @@
     "lint": "eslint . --fix",
     "format": "prettier --write src/",
     "prepublishOnly": "npm run build",
+    "fetchI18n": "node ./scripts/fetch-i18n.js",
     "release:patch": "./scripts/release.sh patch",
     "release:minor": "./scripts/release.sh minor",
     "release:major": "./scripts/release.sh major"
   },
   "peerDependencies": {
     "element-plus": "^2.9.3",
-    "vue": "^3.0.0"
+    "vue": "^3.0.0",
+    "vue-i18n": "^10.0.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
@@ -126,6 +133,7 @@
     "vite-plugin-vue-devtools": "^7.7.2",
     "vitest": "^3.0.8",
     "vue": "^3.5.13",
+    "vue-i18n": "^10.0.5",
     "vue-router": "^4.5.0",
     "vue-tsc": "^2.2.8",
     "vuedraggable": "^4.1.0"

package/src/components/form/BaseSelector.vue

@@ -3,7 +3,7 @@
     v-bind="attrs"
     :model-value="modelValue"
     :class="props.class"
-    :placeholder="props.placeholder"
+    :placeholder="props.placeholder || t('common.select')"
     :clearable="props.clearable"
     :collapse-tags="props.collapseTags"
     :collapse-tags-tooltip="props.collapseTagsTooltip"
@@ -19,8 +19,11 @@
 
 <script lang="ts" setup>
 import { useAttrs } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { ElOptions } from '@/types/OptionDto.ts'
 
+const { t } = useI18n()
+
 export type Selection = string | string[]
 
 const props = withDefaults(
@@ -38,7 +41,7 @@ const props = withDefaults(
   {
     modelValue: () => '',
     options: () => [{ value: '', label: '' }],
-    placeholder: '請選擇',
+    placeholder: '',
     class: 'w-full',
   },
 )

package/src/components/items/BaseDialog.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useWindowSize } from '@vueuse/core'
 import BaseBtn from './BaseBtn.vue'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   modelValue: boolean
   title?: string
@@ -81,16 +84,22 @@ const handleSubmit = () => {
     <template #footer>
       <footer>
         <slot name="customFooter">
-          <base-btn text="關閉" type="primary" is-fill @click="handleCancel" v-if="showClose" />
+          <base-btn
+            :text="t('common.back')"
+            type="primary"
+            is-fill
+            @click="handleCancel"
+            v-if="showClose"
+          />
           <template v-if="!showClose">
             <base-btn
-              text="確定"
+              :text="t('common.confirm')"
               type="primary"
               is-fill
               @click="handleSubmit"
               :loading="submitLoading"
             />
-            <base-btn text="取消" type="primary" @click="handleCancel" />
+            <base-btn :text="t('common.cancel')" type="primary" @click="handleCancel" />
           </template>
         </slot>
       </footer>

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<{
+const { t } = useI18n()
+
+const props = defineProps<{
     modelValue: boolean
     waringText?: string
     subWaringText?: string
     titleText?: string
     modalWidth?: string
-  }>(),
-  {
-    waringText: '請問是否確認移除該使用者',
-    titleText: '警告',
-  },
-)
+  }>()
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: boolean): void
@@ -33,7 +30,7 @@ const handleSubmit = () => {
 <template>
   <base-dialog
     v-model="dialogVisible"
-    :title="titleText"
+    :title="titleText || t('common.warning')"
     :custom-width="modalWidth"
     :is-waring="true"
     @click:submit="handleSubmit"
@@ -41,7 +38,7 @@ const handleSubmit = () => {
     <div class="w-full h-16 flex items-center justify-center flex-col">
       <slot>
         <p>{{ subWaringText }}</p>
-        <p>{{ waringText }} ?</p>
+        <p>{{ waringText || t('dialog.confirmRemoveUser') }} ?</p>
       </slot>
     </div>
   </base-dialog>

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"
           :show-search="true"
           @keydown.enter="doSearch"

package/src/components/layout/DetailLayout.vue

@@ -1,6 +1,9 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import { MainPanel, BaseBtn, SearchableListPanel } from '@/components'
 
+const { t } = useI18n()
+
 defineProps<{
   title: string
   showBack?: boolean | string | object
@@ -39,8 +42,8 @@ const handleBackClick = () => {
 
     <template #footer>
       <div class="border-t py-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/layout/SearchableListPanel.vue

@@ -45,7 +45,7 @@ const onBackClick = () => {
   emits('click:back')
 }
 const showPager = computed(() => {
-  if (props.showPagination) {
+  if (typeof props.showBack === 'boolean') {
     return props.showPagination
   } else {
     return props.pagination.totalCount > 0

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/components/tables/SortTable.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts" generic="T extends Record<string, unknown>">
 import type { SortChangValue, TableColumn } from '@/types'
 import type { TableColumnCtx } from 'element-plus'
-import { computed, reactive, type VNode } from 'vue'
+import {  reactive, type VNode } from 'vue'
 import { Setting } from '@element-plus/icons-vue'
 import { BaseTable } from '@/components'
 
+
 defineProps<{
   data: T[]
   columns: TableColumn<T>[]
@@ -99,7 +100,6 @@ const state = reactive({
 
     <base-table
       v-loading="loading"
-      element-loading-text="數據加載中..."
       :data="data"
       :columns="columns"
       :show-summary="showSummary"

package/src/components/tables/TitleTable.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts" generic="T extends Record<string, unknown>">
 import type { VNode } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { TableColumnCtx } from 'element-plus'
 import type { TableColumn } from 'src/types'
 import { BaseTable, BaseBtn } from '@/components'
 
+const { t } = useI18n()
+
 // 使用泛型 T 來定義數據類型
 defineProps<{
   data: T[]
@@ -68,8 +71,18 @@ const handleEditClick = (row: T) => {
         <slot name="tableSearch" />
 
         <div class="flex items-center" v-if="propIsEditable">
-          <BaseBtn text="新增" type="primary" @click="addInvoiceDetail" v-if="!onlyDelete" />
-          <BaseBtn text="刪除" type="primary" @click="deleteSelectRow" v-if="showDelete" />
+          <BaseBtn
+            :text="t('button.add')"
+            type="primary"
+            @click="addInvoiceDetail"
+            v-if="!onlyDelete"
+          />
+          <BaseBtn
+            :text="t('button.delete')"
+            type="primary"
+            @click="deleteSelectRow"
+            v-if="showDelete"
+          />
         </div>
       </div>
     </div>
@@ -77,7 +90,6 @@ const handleEditClick = (row: T) => {
     <!-- 表格主體 -->
     <base-table
       v-loading="loading"
-      element-loading-text="數據加載中..."
       :data="data"
       :columns="columns"
       :show-summary="showSummary"

package/src/components/transfer/TransferDialog.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="T = Record<string, unknown>">
 import { computed, reactive, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { TableColumn } from 'src/types'
 import _ from 'lodash'
 import type { CheckboxValueType } from 'element-plus'
@@ -7,6 +8,8 @@ import BaseDialog from '../items/BaseDialog.vue'
 import TransferItem from '@/components/transfer/transferItem.vue'
 import SearchBar from '../items/SearchBar.vue'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   modelValue: boolean
   columnsValue: TableColumn<T>[]
@@ -147,7 +150,7 @@ const doFilterColumn = (keyword: string) => {
     </div>
     <div class="transfer-sort-wrapper">
       <el-checkbox v-model="checkAll" class="px-4" @change="handleCheckAllChange">
-        欄 ({{ state.checkList.length }}/{{ state.localColumns.length }})
+        {{ t('common.column') }} ({{ state.checkList.length }}/{{ state.localColumns.length }})
       </el-checkbox>
       <el-checkbox-group v-model="state.checkList" @change="handleCheckChange">
         <!-- 自定義列表容器 slot，讓外部可以選擇是否使用 draggable -->

package/src/locales/en-US.json

@@ -0,0 +1,37 @@
+{
+  "common.select": "Please select",
+  "common.confirm": "Confirm",
+  "common.cancel": "Cancel",
+  "dialog.confirmRemoveUser": "Are you sure you want to remove this user?",
+  "common.warning": "Warning",
+  "search.placeholder": "Please enter keywords to search the list",
+  "common.execute": "Execute",
+  "common.reset": "Reset",
+  "common.loading": "Data loading",
+  "common.view": "View",
+  "common.edit": "Edit",
+  "common.column": "Column",
+  "common.back": "      Back",
+  "demo.componentDemo": "Component Demo",
+  "button.title": "Button",
+  "button.primary ": "Primary",
+  "button.default": "Default",
+  "button.danger": "Danger",
+  "button.success": "Success",
+  "button.warning": "Warning",
+  "button.info": "Info",
+  "button.style": "Style",
+  "button.size": "Size",
+  "button.small": "Small",
+  "button.medium": "Medium",
+  "button.large ": "Large",
+  "status.title": "Status",
+  "status.normal ": "Normal",
+  "status.loading": "Loading",
+  "status.disabled": "Disabled",
+  "button.withIcon ": "With Icon",
+  "button.add": "Add",
+  "button.delete": "Delete",
+  "common.save": "Save",
+  "common.discard": "Discard"
+}

package/src/locales/index.d.ts

@@ -0,0 +1,10 @@
+export declare const messages: {
+  'zh-TW': Record<string, string>
+  'en-US': Record<string, string>
+}
+
+export type LocaleType = 'zh-TW' | 'en-US'
+
+export declare const zhTW: Record<string, string>
+export declare const enUS: Record<string, string>
+