rayyy-vue-table-components 1.2.32 → 1.2.34

package/dist/src/index.d.ts

@@ -8,7 +8,6 @@ import { default as SortTable } from './components/tables/SortTable.vue';
 import { default as SearchBar } from './components/items/SearchBar.vue';
 export * from './types';
 export * from './utils/tableHelper';
-export * from './utils/tableStyles';
 export { BaseTable, BaseBtn, BaseInput, FilterBtn, BaseDialog, SortTable, SearchBar };
 export type { BaseTableProps, BaseTableEmits, BaseTableInstance, BaseBtnProps, BaseBtnEmits, BaseBtnInstance, BaseDialogProps, BaseDialogEmits, BaseDialogInstance, PluginOptions, VueTableComponentsPlugin, } from './types/components';
 export * from './components';

package/package.json

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

package/src/assets/styles/_components.scss

@@ -102,11 +102,7 @@
     @apply cursor-pointer text-primary-dark text-xl flex items-center justify-center;
   }
 
-  // FilterBtn
-  .filter-btn {
-    @apply text-sky-500;
-  }
-
+  // FilterBtn 文字和圖標樣式
   .filter-btn-text {
     @apply text-primary-80 ml-2 text-base font-bold;
   }
@@ -136,5 +132,4 @@
   .transfer-arrow-wrapper {
     @apply w-28 text-primary-10;
   }
-
 }

package/src/components/items/FilterBtn.vue

@@ -55,7 +55,7 @@ const submitFilter = () => {
       </el-icon>
     </slot>
   </base-btn>
-  <el-drawer v-model="showDrawer" append-to-body :size="drawerSize">
+  <el-drawer v-model="showDrawer" :size="drawerSize">
     <template #header>
       <div class="flex justify-center text-base text-black font-semibold">
         <span>查詢條件</span>

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

@@ -1,58 +0,0 @@
-/**
- * Table 樣式工具類
- * 注意：樣式定義已移至 src/assets/styles/_components.scss
- * 此檔案僅保留工具函數和類型定義
- */
-export declare const createTableCellClass: (options?: {
-    isDismissed?: boolean;
-    isHeader?: boolean;
-}) => string;
-export declare const createTextClass: (type?: "blue" | "red" | "normal") => "" | "text-blue-10" | "text-redText";
-export declare const STYLE_CLASSES: {
-    readonly tableCell: "table-cell";
-    readonly tableHeader: "table-header";
-    readonly tableCellContent: "table-cell-content";
-    readonly dismissedRow: "dismissed-row";
-    readonly tableFooter: "table-footer";
-    readonly blueText: "blue-text";
-    readonly redText: "red-text";
-    readonly sortTableContainer: "sort-table-container";
-    readonly sortTableFunctionBar: "sort-table-function-bar";
-    readonly sortTableSettingsBtn: "sort-table-settings-btn";
-    readonly filterBtn: "filter-btn";
-    readonly filterBtnText: "filter-btn-text";
-    readonly filterBtnIcon: "filter-btn-icon";
-    readonly transferSortWrapper: "transfer-sort-wrapper";
-    readonly transferActiveBg: "transfer-active-bg";
-    readonly transferActiveBorder: "transfer-active-border";
-    readonly transferItemWrapper: "transfer-item-wrapper";
-    readonly transferArrowWrapper: "transfer-arrow-wrapper";
-    readonly baseDialogTitle: "base-dialog-title";
-    readonly cursorGrab: "cursor-grab";
-    readonly cursorGrabbing: "cursor-grabbing";
-    readonly dataTableConfig: "data-table-config";
-    readonly componentStyles: "component-styles";
-};
-export type StyleClassesType = typeof STYLE_CLASSES;
-export interface TableCellStyleOptions {
-    isDismissed?: boolean;
-    isHeader?: boolean;
-}
-export type TextStyleType = 'blue' | 'red' | 'normal';
-/**
- * 使用方式：
- *
- * 1. 在 Vue 組件中使用樣式類名：
- *    <div :class="STYLE_CLASSES.tableCell">內容</div>
- *
- * 2. 使用樣式組合函數：
- *    <div :class="createTableCellClass({ isHeader: true })">標題</div>
- *
- * 3. 使用文字樣式函數：
- *    <span :class="createTextClass('blue')">藍色文字</span>
- *
- * 4. 在 SCSS 中使用對應的類名：
- *    .my-custom-class {
- *      @extend .table-cell;
- *    }
- */

package/src/utils/tableStyles.ts

@@ -1,107 +0,0 @@
-/**
- * Table 樣式工具類
- * 注意：樣式定義已移至 src/assets/styles/_components.scss
- * 此檔案僅保留工具函數和類型定義
- */
-
-// ==================== 樣式組合函數 ====================
-// 創建表格單元格樣式類名
-export const createTableCellClass = (options?: { isDismissed?: boolean; isHeader?: boolean }) => {
-  const classes = ['p-0 h-10']
-
-  if (options?.isDismissed) {
-    classes.push('bg-blue-20')
-  }
-
-  if (options?.isHeader) {
-    classes.push('bg-primary-15 font-bold text-text text-sm leading-4')
-  }
-
-  return classes.join(' ')
-}
-
-// 創建文字樣式類名
-export const createTextClass = (type: 'blue' | 'red' | 'normal' = 'normal') => {
-  switch (type) {
-    case 'blue':
-      return 'text-blue-10'
-    case 'red':
-      return 'text-redText'
-    default:
-      return ''
-  }
-}
-
-// ==================== 樣式類名常量 ====================
-// 這些常量對應 _components.scss 中定義的 CSS 類名
-export const STYLE_CLASSES = {
-  // 表格基礎樣式
-  tableCell: 'table-cell',
-  tableHeader: 'table-header',
-  tableCellContent: 'table-cell-content',
-  dismissedRow: 'dismissed-row',
-  tableFooter: 'table-footer',
-  blueText: 'blue-text',
-  redText: 'red-text',
-
-  // SortTable 組件樣式
-  sortTableContainer: 'sort-table-container',
-  sortTableFunctionBar: 'sort-table-function-bar',
-  sortTableSettingsBtn: 'sort-table-settings-btn',
-
-  // FilterBtn 組件樣式
-  filterBtn: 'filter-btn',
-  filterBtnText: 'filter-btn-text',
-  filterBtnIcon: 'filter-btn-icon',
-
-  // TransferDialog 組件樣式
-  transferSortWrapper: 'transfer-sort-wrapper',
-  transferActiveBg: 'transfer-active-bg',
-  transferActiveBorder: 'transfer-active-border',
-
-  // TransferItem 組件樣式
-  transferItemWrapper: 'transfer-item-wrapper',
-  transferArrowWrapper: 'transfer-arrow-wrapper',
-
-  // BaseDialog 組件樣式
-  baseDialogTitle: 'base-dialog-title',
-
-  // 通用樣式
-  cursorGrab: 'cursor-grab',
-  cursorGrabbing: 'cursor-grabbing',
-
-  // 配置樣式
-  dataTableConfig: 'data-table-config',
-  componentStyles: 'component-styles',
-} as const
-
-// ==================== 類型定義 ====================
-export type StyleClassesType = typeof STYLE_CLASSES
-
-// 樣式選項類型
-export interface TableCellStyleOptions {
-  isDismissed?: boolean
-  isHeader?: boolean
-}
-
-// 文字樣式類型
-export type TextStyleType = 'blue' | 'red' | 'normal'
-
-// ==================== 使用說明 ====================
-/**
- * 使用方式：
- *
- * 1. 在 Vue 組件中使用樣式類名：
- *    <div :class="STYLE_CLASSES.tableCell">內容</div>
- *
- * 2. 使用樣式組合函數：
- *    <div :class="createTableCellClass({ isHeader: true })">標題</div>
- *
- * 3. 使用文字樣式函數：
- *    <span :class="createTextClass('blue')">藍色文字</span>
- *
- * 4. 在 SCSS 中使用對應的類名：
- *    .my-custom-class {
- *      @extend .table-cell;
- *    }
- */