rayyy-vue-table-components 2.0.21 → 2.0.23

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

@@ -3,7 +3,6 @@ export { default as BaseBtn } from './items/BaseBtn.vue';
 export { default as BaseInput } from './form/BaseInput.vue';
 export { default as BaseDialog } from './items/BaseDialog.vue';
 export { default as BaseWaringDialog } from './items/BaseWaringDialog.vue';
-export { default as BaseMultipleInput } from './form/BaseMultipleInput.vue';
 export { default as SortTable } from './tables/SortTable.vue';
 export { default as TitleTable } from './tables/TitleTable.vue';
 export { default as SearchBar } from './items/SearchBar.vue';
@@ -26,7 +25,6 @@ export type { default as SearchBarType } from './items/SearchBar.vue';
 export type { default as TransferDialogType } from './transfer/TransferDialog.vue';
 export type { default as TransferItemType } from './transfer/transferItem.vue';
 export type { default as SearchableListPanelType } from './layout/SearchableListPanel.vue';
-export type { default as BaseMultipleInputType } from './form/BaseMultipleInput.vue';
 export type { default as FunctionHeaderType } from './layout/FunctionHeader.vue';
 export type { default as MainPanelType } from './layout/MainPanel.vue';
 export type { default as DetailLayoutType } from './layout/DetailLayout.vue';

package/dist/src/index.d.ts

@@ -3,14 +3,22 @@ import { default as BaseTable } from './components/tables/BaseTable.vue';
 import { default as BaseBtn } from './components/items/BaseBtn.vue';
 import { default as BaseInput } from './components/form/BaseInput.vue';
 import { default as BaseDialog } from './components/items/BaseDialog.vue';
+import { default as BaseWaringDialog } from './components/items/BaseWaringDialog.vue';
 import { default as SortTable } from './components/tables/SortTable.vue';
 import { default as TitleTable } from './components/tables/TitleTable.vue';
 import { default as SearchBar } from './components/items/SearchBar.vue';
+import { default as TransferDialog } from './components/transfer/TransferDialog.vue';
+import { default as TransferItem } from './components/transfer/transferItem.vue';
+import { default as FunctionHeader } from './components/layout/FunctionHeader.vue';
+import { default as MainPanel } from './components/layout/MainPanel.vue';
+import { default as SearchableListPanel } from './components/layout/SearchableListPanel.vue';
+import { default as DetailLayout } from './components/layout/DetailLayout.vue';
+import { default as FilterLayout } from './components/layout/FilterLayout.vue';
 export * from './types';
 export * from './utils/tableHelper';
 export { useI18n, setLocale, useComponentElementLocale } from './utils/i18n';
 export * from './locales';
-export { BaseTable, BaseBtn, BaseInput, BaseDialog, SortTable, TitleTable, SearchBar };
+export { BaseTable, BaseBtn, BaseInput, BaseDialog, BaseWaringDialog, SortTable, TitleTable, SearchBar, TransferDialog, TransferItem, FunctionHeader, MainPanel, SearchableListPanel, DetailLayout, FilterLayout };
 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?: {

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

@@ -5,7 +5,6 @@ export declare const ROUTES: {
     readonly INSTALL_GUIDE: "/install-guide";
     readonly DOCS_CENTER: "/docs-center";
     readonly SEARCHABLE_LIST_PANEL: "/demo/searchable-list-panel";
-    readonly BASE_MULTIPLE_INPUT: "/demo/base-multiple-input";
     readonly TRANSFER_DIALOG: "/demo/transfer-dialog";
     readonly BASE_BTN: "/demo/base-btn";
     readonly BASE_INPUT: "/demo/base-input";
@@ -28,7 +27,6 @@ export declare const ROUTE_NAMES: {
     readonly INSTALL_GUIDE: "InstallGuide";
     readonly DOCS_CENTER: "DocsCenter";
     readonly SEARCHABLE_LIST_PANEL: "SearchableListPanel";
-    readonly BASE_MULTIPLE_INPUT: "BaseMultipleInput";
     readonly TRANSFER_DIALOG: "TransferDialog";
     readonly BASE_BTN: "BaseBtn";
     readonly BASE_INPUT: "BaseInput";

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

@@ -369,33 +369,6 @@ export interface BaseInputInstance {
   $emit: BaseInputEmits
 }
 
-// ==================== BaseMultipleInput 組件類型 ====================
-
-/** BaseMultipleInput 組件 Props 類型 */
-export interface BaseMultipleInputProps {
-  /** 模型值（字符串數組） */
-  modelValue: string[]
-  /** 輸入框類型 */
-  type?: string
-  /** 驗證規則函數 */
-  validateRule?: (inputString: string) => boolean
-}
-
-/** BaseMultipleInput 組件 Emits 類型 */
-export interface BaseMultipleInputEmits {
-  /** 更新模型值事件 */
-  (e: 'update:modelValue', val: string[]): void
-  /** 輸入錯誤事件 */
-  (e: 'inputError'): void
-}
-
-/** BaseMultipleInput 組件實例類型 */
-export interface BaseMultipleInputInstance {
-  /** 組件 Props */
-  $props: BaseMultipleInputProps
-  /** 組件 Emits */
-  $emit: BaseMultipleInputEmits
-}
 
 // ==================== 搜尋相關組件類型 ====================
 
@@ -774,21 +747,6 @@ export declare const BaseInput: DefineComponent<
   install: (app: App) => void
 }
 
-/** BaseMultipleInput 組件定義 */
-export declare const BaseMultipleInput: DefineComponent<
-  BaseMultipleInputProps,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  BaseMultipleInputEmits
-> & {
-  /** 安裝方法 */
-  install: (app: App) => void
-}
 
 /** SearchBar 組件定義 */
 export declare const SearchBar: DefineComponent<
@@ -934,8 +892,6 @@ export interface VueTableComponentsPlugin {
   TransferDialog: typeof TransferDialog
   /** BaseInput 組件 */
   BaseInput: typeof BaseInput
-  /** BaseMultipleInput 組件 */
-  BaseMultipleInput: typeof BaseMultipleInput
   /** SearchBar 組件 */
   SearchBar: typeof SearchBar
   /** SearchableListPanel 組件 */
@@ -964,7 +920,6 @@ declare module '@vue/runtime-core' {
     BaseWaringDialog: typeof BaseWaringDialog
     TransferDialog: typeof TransferDialog
     BaseInput: typeof BaseInput
-    BaseMultipleInput: typeof BaseMultipleInput
     SearchBar: typeof SearchBar
     SearchableListPanel: typeof SearchableListPanel
     FunctionHeader: typeof FunctionHeader

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

@@ -6,7 +6,7 @@ export declare function setLocale(locale: string): void;
 /**
  * 全域 i18n 實例（用於非組件環境）
  */
-export declare function useI18n(): Composer<{}, {}, {}, string, never, string>;
+export declare function useI18n(): Composer;
 /**
  * 組件庫內部使用的 Element Plus locale composable
  * 專門用於組件庫內部的 Element Plus 組件

package/package.json

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

package/src/components/index.ts

@@ -4,7 +4,6 @@ export { default as BaseBtn } from './items/BaseBtn.vue'
 export { default as BaseInput } from './form/BaseInput.vue'
 export { default as BaseDialog } from './items/BaseDialog.vue'
 export { default as BaseWaringDialog } from './items/BaseWaringDialog.vue'
-export { default as BaseMultipleInput } from './form/BaseMultipleInput.vue'
 export { default as SortTable } from './tables/SortTable.vue'
 export { default as TitleTable } from './tables/TitleTable.vue'
 export { default as SearchBar } from './items/SearchBar.vue'
@@ -97,7 +96,6 @@ export type { default as SearchBarType } from './items/SearchBar.vue'
 export type { default as TransferDialogType } from './transfer/TransferDialog.vue'
 export type { default as TransferItemType } from './transfer/transferItem.vue'
 export type { default as SearchableListPanelType } from './layout/SearchableListPanel.vue'
-export type { default as BaseMultipleInputType } from './form/BaseMultipleInput.vue'
 export type { default as FunctionHeaderType } from './layout/FunctionHeader.vue'
 export type { default as MainPanelType } from './layout/MainPanel.vue'
 export type { default as DetailLayoutType } from './layout/DetailLayout.vue'

package/src/components/items/BaseBtn.vue

@@ -56,14 +56,15 @@ const buttonClass = computed(() => {
 
 <style scoped lang="scss">
 .el-button {
-  @apply text-sm;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
 
   :deep(span) {
-    @apply font-bold #{!important};
+    font-weight: 700 !important;
   }
 
   &:focus-visible {
-    @apply outline-none #{!important};
+    outline: none !important;
   }
 
   // 主要按钮样式
@@ -109,5 +110,136 @@ const buttonClass = computed(() => {
     --el-button-disabled-text-color: var(--el-text-color-placeholder);
     --el-button-text-color: var(--el-text-color-regular);
   }
+
+  // 成功按钮样式
+  &--success {
+    --el-button-bg-color: var(--el-fill-color-blank);
+    --el-button-border-color: var(--el-color-success);
+    --el-button-hover-bg-color: var(--el-color-success);
+    --el-button-hover-border-color: var(--el-color-success);
+    --el-button-hover-text-color: var(--el-fill-color-blank);
+    --el-button-active-bg-color: var(--el-color-success-dark-2);
+    --el-button-active-border-color: var(--el-color-success-dark-2);
+    --el-button-disabled-bg-color: var(--el-fill-color-blank);
+    --el-button-disabled-border-color: var(--el-color-success-light-7);
+    --el-button-disabled-text-color: var(--el-color-success-light-7);
+    --el-button-text-color: var(--el-color-success);
+
+    &.is-fill {
+      --el-button-bg-color: var(--el-color-success);
+      --el-button-border-color: var(--el-color-success);
+      --el-button-hover-bg-color: var(--el-color-success-dark-2);
+      --el-button-hover-border-color: var(--el-color-success-dark-2);
+      --el-button-active-bg-color: var(--el-color-success-dark-2);
+      --el-button-active-border-color: var(--el-color-success-dark-2);
+      --el-button-disabled-bg-color: var(--el-color-success-light-7);
+      --el-button-disabled-border-color: var(--el-color-success-light-7);
+      --el-button-text-color: var(--el-fill-color-blank);
+      --el-button-hover-text-color: var(--el-fill-color-blank);
+    }
+  }
+
+  // 警告按钮样式
+  &--warning {
+    --el-button-bg-color: var(--el-fill-color-blank);
+    --el-button-border-color: var(--el-color-warning);
+    --el-button-hover-bg-color: var(--el-color-warning);
+    --el-button-hover-border-color: var(--el-color-warning);
+    --el-button-hover-text-color: var(--el-fill-color-blank);
+    --el-button-active-bg-color: var(--el-color-warning-dark-2);
+    --el-button-active-border-color: var(--el-color-warning-dark-2);
+    --el-button-disabled-bg-color: var(--el-fill-color-blank);
+    --el-button-disabled-border-color: var(--el-color-warning-light-7);
+    --el-button-disabled-text-color: var(--el-color-warning-light-7);
+    --el-button-text-color: var(--el-color-warning);
+
+    &.is-fill {
+      --el-button-bg-color: var(--el-color-warning);
+      --el-button-border-color: var(--el-color-warning);
+      --el-button-hover-bg-color: var(--el-color-warning-dark-2);
+      --el-button-hover-border-color: var(--el-color-warning-dark-2);
+      --el-button-active-bg-color: var(--el-color-warning-dark-2);
+      --el-button-active-border-color: var(--el-color-warning-dark-2);
+      --el-button-disabled-bg-color: var(--el-color-warning-light-7);
+      --el-button-disabled-border-color: var(--el-color-warning-light-7);
+      --el-button-text-color: var(--el-fill-color-blank);
+      --el-button-hover-text-color: var(--el-fill-color-blank);
+    }
+  }
+
+  // 危险按钮样式
+  &--danger {
+    --el-button-bg-color: var(--el-fill-color-blank);
+    --el-button-border-color: var(--el-color-danger);
+    --el-button-hover-bg-color: var(--el-color-danger);
+    --el-button-hover-border-color: var(--el-color-danger);
+    --el-button-hover-text-color: var(--el-fill-color-blank);
+    --el-button-active-bg-color: var(--el-color-danger-dark-2);
+    --el-button-active-border-color: var(--el-color-danger-dark-2);
+    --el-button-disabled-bg-color: var(--el-fill-color-blank);
+    --el-button-disabled-border-color: var(--el-color-danger-light-7);
+    --el-button-disabled-text-color: var(--el-color-danger-light-7);
+    --el-button-text-color: var(--el-color-danger);
+
+    &.is-fill {
+      --el-button-bg-color: var(--el-color-danger);
+      --el-button-border-color: var(--el-color-danger);
+      --el-button-hover-bg-color: var(--el-color-danger-dark-2);
+      --el-button-hover-border-color: var(--el-color-danger-dark-2);
+      --el-button-active-bg-color: var(--el-color-danger-dark-2);
+      --el-button-active-border-color: var(--el-color-danger-dark-2);
+      --el-button-disabled-bg-color: var(--el-color-danger-light-7);
+      --el-button-disabled-border-color: var(--el-color-danger-light-7);
+      --el-button-text-color: var(--el-fill-color-blank);
+      --el-button-hover-text-color: var(--el-fill-color-blank);
+    }
+  }
+
+  // 信息按钮样式
+  &--info {
+    --el-button-bg-color: var(--el-fill-color-blank);
+    --el-button-border-color: var(--el-color-info);
+    --el-button-hover-bg-color: var(--el-color-info);
+    --el-button-hover-border-color: var(--el-color-info);
+    --el-button-hover-text-color: var(--el-fill-color-blank);
+    --el-button-active-bg-color: var(--el-color-info-dark-2);
+    --el-button-active-border-color: var(--el-color-info-dark-2);
+    --el-button-disabled-bg-color: var(--el-fill-color-blank);
+    --el-button-disabled-border-color: var(--el-color-info-light-7);
+    --el-button-disabled-text-color: var(--el-color-info-light-7);
+    --el-button-text-color: var(--el-color-info);
+
+    &.is-fill {
+      --el-button-bg-color: var(--el-color-info);
+      --el-button-border-color: var(--el-color-info);
+      --el-button-hover-bg-color: var(--el-color-info-dark-2);
+      --el-button-hover-border-color: var(--el-color-info-dark-2);
+      --el-button-active-bg-color: var(--el-color-info-dark-2);
+      --el-button-active-border-color: var(--el-color-info-dark-2);
+      --el-button-disabled-bg-color: var(--el-color-info-light-7);
+      --el-button-disabled-border-color: var(--el-color-info-light-7);
+      --el-button-text-color: var(--el-fill-color-blank);
+      --el-button-hover-text-color: var(--el-fill-color-blank);
+    }
+  }
+
+  // 通用禁用样式
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    &:hover {
+      transform: none;
+    }
+
+    &:active {
+      transform: none;
+    }
+  }
+
+  // 填充樣式的禁用狀態 - 使用白色文字
+  &.is-fill.is-disabled {
+    color: white !important;
+  }
 }
 </style>

package/src/components/layout/SearchableListPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { toRefs, computed, watch } from 'vue'
+import { toRefs, computed } from 'vue'
 import type { Pager } from '@/types'
 import { MainPanel, SearchBar } from '@/components'
 import { useComponentElementLocale } from '@/utils/i18n'
@@ -55,30 +55,13 @@ const showPager = computed(() => {
   }
 })
 
-// 在 computed 外部調用，保持引用穩定
-const fallbackLocale = useComponentElementLocale()
-
-// 監聽 fallbackLocale 的變化
-watch(fallbackLocale, (newLocale, oldLocale) => {
-  console.log('🔄 [SearchableListPanel] fallbackLocale 變化:', {
-    old: oldLocale?.name,
-    new: newLocale?.name
-  })
-}, { immediate: true })
-
 // 優先使用 prop，沒有 prop 則使用 composable
 const elementLocale = computed(() => {
-  console.log('🔍 [SearchableListPanel] elementLocale computed 執行')
-
-  // 檢查 props.locale 是否為真正的 Language 對象（不是預設值）
-  if (props.locale && typeof props.locale === 'object' && 'name' in props.locale) {
-    console.log('🔍 [SearchableListPanel] 使用 props.locale:', props.locale.name)
+  if (props.locale) {
     return props.locale
   }
-
-  console.log('🔍 [SearchableListPanel] 使用 fallbackLocale:', fallbackLocale.value.name)
-  // 現在能正確追蹤響應式
-  return fallbackLocale.value
+  // 回退：使用簡化的 composable
+  return useComponentElementLocale().value
 })
 </script>
 

package/src/types/components.d.ts

@@ -370,33 +370,6 @@ export interface BaseInputInstance {
   $emit: BaseInputEmits
 }
 
-// ==================== BaseMultipleInput 組件類型 ====================
-
-/** BaseMultipleInput 組件 Props 類型 */
-export interface BaseMultipleInputProps {
-  /** 模型值（字符串數組） */
-  modelValue: string[]
-  /** 輸入框類型 */
-  type?: string
-  /** 驗證規則函數 */
-  validateRule?: (inputString: string) => boolean
-}
-
-/** BaseMultipleInput 組件 Emits 類型 */
-export interface BaseMultipleInputEmits {
-  /** 更新模型值事件 */
-  (e: 'update:modelValue', val: string[]): void
-  /** 輸入錯誤事件 */
-  (e: 'inputError'): void
-}
-
-/** BaseMultipleInput 組件實例類型 */
-export interface BaseMultipleInputInstance {
-  /** 組件 Props */
-  $props: BaseMultipleInputProps
-  /** 組件 Emits */
-  $emit: BaseMultipleInputEmits
-}
 
 // ==================== 搜尋相關組件類型 ====================
 
@@ -775,21 +748,6 @@ export declare const BaseInput: DefineComponent<
   install: (app: App) => void
 }
 
-/** BaseMultipleInput 組件定義 */
-export declare const BaseMultipleInput: DefineComponent<
-  BaseMultipleInputProps,
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  {},
-  BaseMultipleInputEmits
-> & {
-  /** 安裝方法 */
-  install: (app: App) => void
-}
 
 /** SearchBar 組件定義 */
 export declare const SearchBar: DefineComponent<
@@ -935,8 +893,6 @@ export interface VueTableComponentsPlugin {
   TransferDialog: typeof TransferDialog
   /** BaseInput 組件 */
   BaseInput: typeof BaseInput
-  /** BaseMultipleInput 組件 */
-  BaseMultipleInput: typeof BaseMultipleInput
   /** SearchBar 組件 */
   SearchBar: typeof SearchBar
   /** SearchableListPanel 組件 */
@@ -965,7 +921,6 @@ declare module '@vue/runtime-core' {
     BaseWaringDialog: typeof BaseWaringDialog
     TransferDialog: typeof TransferDialog
     BaseInput: typeof BaseInput
-    BaseMultipleInput: typeof BaseMultipleInput
     SearchBar: typeof SearchBar
     SearchableListPanel: typeof SearchableListPanel
     FunctionHeader: typeof FunctionHeader

package/src/utils/i18n.ts

@@ -1,8 +1,7 @@
 import { createI18n, type I18n, type Composer } from 'vue-i18n'
-import { getCurrentInstance, computed } from 'vue'
+import { 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
@@ -41,11 +40,8 @@ export function setLocale(locale: string): void {
  * 全域 i18n 實例（用於非組件環境）
  */
 export function useI18n() {
-  console.log('🔍 [useI18n] 開始執行')
   const i18n = getInternalI18n()
-  const global = i18n.global as Composer
-  console.log('🔍 [useI18n] 返回內部 i18n，locale:', global.locale.value)
-  return global
+  return i18n.global as Composer
 }
 
 /**
@@ -53,42 +49,8 @@ export function useI18n() {
  * 專門用於組件庫內部的 Element Plus 組件
  */
 export function useComponentElementLocale() {
-  console.log('🔍 [useComponentElementLocale] 開始執行')
-
-  return computed(() => {
-    console.log('🔍 [useComponentElementLocale] computed 開始執行')
-
-    // 在 computed 內部嘗試獲取外部 i18n（確保響應式）
-    const instance = getCurrentInstance()
-    let externalLocale: any = undefined
-
-    try {
-      console.log('🔍 [useComponentElementLocale] 嘗試獲取外部 i18n')
-      const globalProperties = instance?.appContext.config.globalProperties
-      const externalI18nInstance = globalProperties?.$i18n as I18n | undefined
-
-      if (externalI18nInstance && 'global' in externalI18nInstance) {
-        externalLocale = externalI18nInstance.global.locale
-        console.log('🔍 [useComponentElementLocale] 成功獲取外部 locale:', externalLocale.value)
-      } else {
-        console.log('🔍 [useComponentElementLocale] 外部 i18n 不存在')
-      }
-    } catch (e) {
-      console.log('❌ [useComponentElementLocale] 獲取外部 i18n 失敗:', e)
-    }
-
-    // 獲取內部 i18n（回退）
-    const { locale: internalLocale } = useI18n()
-    console.log('🔍 [useComponentElementLocale] 內部 locale:', internalLocale.value)
-
-    // 決定使用哪個 locale
-    const currentLocale = externalLocale || internalLocale
-    console.log('🔍 [useComponentElementLocale] 最終使用 locale:', currentLocale.value)
-
-    const result = currentLocale.value === 'zh-TW' ? zhTw : enUs
-    console.log('🔍 [useComponentElementLocale] 返回結果:', result.name)
-    return result
-  })
+  // 直接返回預設中文
+  return computed(() => zhTw)
 }
 
 // 導出類型