rayyy-vue-table-components 1.2.7 → 1.2.9

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

@@ -9,6 +9,20 @@ export declare const dismissedRow = "bg-blue-20";
 export declare const tableFooter = "font-bold";
 export declare const blueText = "text-blue-10";
 export declare const redText = "text-redText";
+export declare const sortTableContainer = "w-full mb-4";
+export declare const sortTableFunctionBar = "flex items-center h-12 bg-primary-20 px-1.5 rounded-t justify-end";
+export declare const sortTableSettingsBtn = "cursor-pointer text-primary-dark text-xl flex items-center justify-center hover:text-primary-40";
+export declare const filterBtn = "text-sky-500 hover:text-white hover:bg-sky-500 disabled:bg-white disabled:opacity-50";
+export declare const filterBtnText = "text-black ml-2 font-bold hover:text-white disabled:text-black/20";
+export declare const filterBtnIcon = "text-xl";
+export declare const transferSortWrapper = "border border-gray-200 h-96 overflow-auto";
+export declare const transferActiveBg = "bg-primary/10";
+export declare const transferActiveBorder = "border border-primary-10 rounded";
+export declare const transferItemWrapper = "border-t border-gray-200 px-4 flex items-center justify-between w-full";
+export declare const transferArrowWrapper = "w-28 text-primary-10";
+export declare const baseDialogTitle = "font-bold text-base";
+export declare const cursorGrab = "cursor-grab";
+export declare const cursorGrabbing = "cursor-grabbing";
 export declare const tableStyles: {
     readonly cell: "p-0 h-10";
     readonly header: "bg-primary-15 font-bold text-text text-sm leading-4";
@@ -18,6 +32,22 @@ export declare const tableStyles: {
     readonly blueText: "text-blue-10";
     readonly redText: "text-redText";
 };
+export declare const componentStyles: {
+    readonly sortTableContainer: "w-full mb-4";
+    readonly sortTableFunctionBar: "flex items-center h-12 bg-primary-20 px-1.5 rounded-t justify-end";
+    readonly sortTableSettingsBtn: "cursor-pointer text-primary-dark text-xl flex items-center justify-center hover:text-primary-40";
+    readonly filterBtn: "text-sky-500 hover:text-white hover:bg-sky-500 disabled:bg-white disabled:opacity-50";
+    readonly filterBtnText: "text-black ml-2 font-bold hover:text-white disabled:text-black/20";
+    readonly filterBtnIcon: "text-xl";
+    readonly transferSortWrapper: "border border-gray-200 h-96 overflow-auto";
+    readonly transferActiveBg: "bg-primary/10";
+    readonly transferActiveBorder: "border border-primary-10 rounded";
+    readonly transferItemWrapper: "border-t border-gray-200 px-4 flex items-center justify-between w-full";
+    readonly transferArrowWrapper: "w-28 text-primary-10";
+    readonly baseDialogTitle: "font-bold text-base";
+    readonly cursorGrab: "cursor-grab";
+    readonly cursorGrabbing: "cursor-grabbing";
+};
 export declare const dataTableConfig: {
     readonly cellClass: "p-0 h-10";
     readonly headerClass: "bg-primary-15 font-bold text-text text-sm leading-4";
@@ -27,10 +57,44 @@ export declare const dataTableConfig: {
     readonly blueTextClass: "text-blue-10";
     readonly redTextClass: "text-redText";
 };
+export declare const allComponentStyles: {
+    readonly dataTableConfig: {
+        readonly cellClass: "p-0 h-10";
+        readonly headerClass: "bg-primary-15 font-bold text-text text-sm leading-4";
+        readonly contentClass: "truncate";
+        readonly dismissedClass: "bg-blue-20";
+        readonly footerClass: "font-bold";
+        readonly blueTextClass: "text-blue-10";
+        readonly redTextClass: "text-redText";
+    };
+    readonly sortTableContainer: "w-full mb-4";
+    readonly sortTableFunctionBar: "flex items-center h-12 bg-primary-20 px-1.5 rounded-t justify-end";
+    readonly sortTableSettingsBtn: "cursor-pointer text-primary-dark text-xl flex items-center justify-center hover:text-primary-40";
+    readonly filterBtn: "text-sky-500 hover:text-white hover:bg-sky-500 disabled:bg-white disabled:opacity-50";
+    readonly filterBtnText: "text-black ml-2 font-bold hover:text-white disabled:text-black/20";
+    readonly filterBtnIcon: "text-xl";
+    readonly transferSortWrapper: "border border-gray-200 h-96 overflow-auto";
+    readonly transferActiveBg: "bg-primary/10";
+    readonly transferActiveBorder: "border border-primary-10 rounded";
+    readonly transferItemWrapper: "border-t border-gray-200 px-4 flex items-center justify-between w-full";
+    readonly transferArrowWrapper: "w-28 text-primary-10";
+    readonly baseDialogTitle: "font-bold text-base";
+    readonly cursorGrab: "cursor-grab";
+    readonly cursorGrabbing: "cursor-grabbing";
+    readonly cell: "p-0 h-10";
+    readonly header: "bg-primary-15 font-bold text-text text-sm leading-4";
+    readonly content: "truncate";
+    readonly dismissed: "bg-blue-20";
+    readonly footer: "font-bold";
+    readonly blueText: "text-blue-10";
+    readonly redText: "text-redText";
+};
 export declare const createTableCellClass: (options?: {
     isDismissed?: boolean;
     isHeader?: boolean;
 }) => string;
 export declare const createTextClass: (type?: "blue" | "red" | "normal") => "" | "text-blue-10" | "text-redText";
 export type TableStylesType = typeof tableStyles;
+export type ComponentStylesType = typeof componentStyles;
 export type DataTableConfigType = typeof dataTableConfig;
+export type AllComponentStylesType = typeof allComponentStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -13,7 +13,6 @@
       "require": "./dist/index.umd.js"
     },
     "./dist/rayyy-vue-table-components.css": "./dist/rayyy-vue-table-components.css",
-    "./components.css": "./dist/components.css",
     "./tailwind-preset": "./tailwind-preset.js",
     "./types": {
       "types": "./src/types/index.ts",

package/src/assets/styles/_components.scss

@@ -0,0 +1,87 @@
+// 組件級樣式 - 從 tailwind-preset.js plugins 轉移而來
+
+// SortTable 組件樣式
+.sort-table-container {
+  @apply w-full mb-4;
+}
+
+.sort-table-function-bar {
+  @apply flex items-center h-12 bg-primary-20 px-1.5 rounded-t justify-end;
+}
+
+.sort-table-settings-btn {
+  @apply cursor-pointer text-primary-dark text-xl flex items-center justify-center;
+
+  &:hover {
+    @apply text-primary-40;
+  }
+}
+
+// FilterBtn 組件樣式
+.filter-btn {
+  @apply text-sky-500;
+
+  p {
+    @apply text-black ml-2 font-bold;
+  }
+
+  i {
+    @apply text-xl;
+  }
+
+  &:hover {
+    @apply text-white bg-sky-500;
+
+    p {
+      @apply text-white;
+    }
+  }
+
+  &:disabled {
+    @apply bg-white opacity-50;
+
+    &:hover {
+      @apply bg-white;
+
+      p {
+        @apply text-black/20;
+      }
+    }
+  }
+}
+
+// TransferItem 組件樣式
+.transfer-item-wrapper {
+  @apply border-t border-gray-200 px-4 flex items-center justify-between w-full;
+}
+
+.transfer-arrow-wrapper {
+  @apply w-28 text-primary-10;
+}
+
+// TransferDialog 組件樣式
+.transfer-sort-wrapper {
+  @apply border border-gray-200 h-96 overflow-auto;
+}
+
+.transfer-active-bg {
+  background-color: rgba(103, 133, 193, 0.1);
+}
+
+.transfer-active-border {
+  @apply border border-primary-10 rounded;
+}
+
+// BaseDialog 組件樣式
+.base-dialog-title {
+  @apply font-bold text-base;
+}
+
+// 通用樣式
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-grabbing {
+  cursor: grabbing;
+}

package/src/assets/styles/tailwind.scss

@@ -1,6 +1,7 @@
 
 @use 'dialog';
 @use "table";
+@use "components";
 
 @tailwind base;
 @tailwind components;

package/src/utils/tableStyles.ts

@@ -24,6 +24,32 @@ export const blueText = 'text-blue-10'
 // 紅色文字樣式
 export const redText = 'text-redText'
 
+// SortTable 組件樣式
+export const sortTableContainer = 'w-full mb-4'
+export const sortTableFunctionBar = 'flex items-center h-12 bg-primary-20 px-1.5 rounded-t justify-end'
+export const sortTableSettingsBtn = 'cursor-pointer text-primary-dark text-xl flex items-center justify-center hover:text-primary-40'
+
+// FilterBtn 組件樣式
+export const filterBtn = 'text-sky-500 hover:text-white hover:bg-sky-500 disabled:bg-white disabled:opacity-50'
+export const filterBtnText = 'text-black ml-2 font-bold hover:text-white disabled:text-black/20'
+export const filterBtnIcon = 'text-xl'
+
+// TransferDialog 組件樣式
+export const transferSortWrapper = 'border border-gray-200 h-96 overflow-auto'
+export const transferActiveBg = 'bg-primary/10'
+export const transferActiveBorder = 'border border-primary-10 rounded'
+
+// TransferItem 組件樣式
+export const transferItemWrapper = 'border-t border-gray-200 px-4 flex items-center justify-between w-full'
+export const transferArrowWrapper = 'w-28 text-primary-10'
+
+// BaseDialog 組件樣式
+export const baseDialogTitle = 'font-bold text-base'
+
+// 通用樣式
+export const cursorGrab = 'cursor-grab'
+export const cursorGrabbing = 'cursor-grabbing'
+
 // 組合樣式對象
 export const tableStyles = {
   cell: tableCell,
@@ -35,6 +61,35 @@ export const tableStyles = {
   redText,
 } as const
 
+// 組件樣式對象
+export const componentStyles = {
+  // SortTable
+  sortTableContainer,
+  sortTableFunctionBar,
+  sortTableSettingsBtn,
+
+  // FilterBtn
+  filterBtn,
+  filterBtnText,
+  filterBtnIcon,
+
+  // TransferDialog
+  transferSortWrapper,
+  transferActiveBg,
+  transferActiveBorder,
+
+  // TransferItem
+  transferItemWrapper,
+  transferArrowWrapper,
+
+  // BaseDialog
+  baseDialogTitle,
+
+  // 通用
+  cursorGrab,
+  cursorGrabbing,
+} as const
+
 // 完整的 data-table 樣式配置
 export const dataTableConfig = {
   // 表格單元格配置
@@ -51,6 +106,18 @@ export const dataTableConfig = {
   redTextClass: redText,
 } as const
 
+// 完整的組件樣式配置
+export const allComponentStyles = {
+  // 表格樣式
+  ...tableStyles,
+
+  // 組件樣式
+  ...componentStyles,
+
+  // 配置對象
+  dataTableConfig,
+} as const
+
 // 樣式組合函數
 export const createTableCellClass = (options?: {
   isDismissed?: boolean
@@ -80,4 +147,6 @@ export const createTextClass = (type: 'blue' | 'red' | 'normal' = 'normal') => {
 
 // 導出類型
 export type TableStylesType = typeof tableStyles
+export type ComponentStylesType = typeof componentStyles
 export type DataTableConfigType = typeof dataTableConfig
+export type AllComponentStylesType = typeof allComponentStyles

package/tailwind-preset.js

@@ -2,31 +2,7 @@
 module.exports = {
   content: [],
   safelist: [
-    // SortTable 組件類別
-    'sort-table-container',
-    'sort-table-function-bar',
-    'sort-table-settings-btn',
-
-    // FilterBtn 組件類別
-    'filter-btn',
-
-    // TransferItem 組件類別
-    'transfer-item-wrapper',
-    'transfer-arrow-wrapper',
-
-    // TransferDialog 組件類別
-    'transfer-sort-wrapper',
-    'transfer-active-bg',
-    'transfer-active-border',
-
-    // BaseDialog 組件類別
-    'base-dialog-title',
-
-    // 通用類別
-    'cursor-grab',
-    'cursor-grabbing',
-
-    // Primary 顏色類別
+    // 保留必要的顏色類別供 Tailwind 使用
     'bg-primary',
     'bg-primary-10',
     'bg-primary-15',
@@ -51,6 +27,21 @@ module.exports = {
     'border-primary-60',
     'border-primary-80',
     'border-primary-dark',
+        'text-blue-10',
+    'text-redText',
+    'bg-blue-20',
+    'border-b-orange',
+    'border-b-blue-10',
+
+    // 組件樣式相關的 Tailwind 類別（用於 SCSS 和 TypeScript 工具）
+    'bg-primary/10',
+    'hover:text-primary-40',
+    'text-sky-500',
+    'hover:bg-sky-500',
+    'disabled:bg-white',
+    'disabled:opacity-50',
+    'disabled:text-black/20',
+    'text-black/20',
   ],
   theme: {
     extend: {
@@ -128,101 +119,6 @@ module.exports = {
     },
   },
   plugins: [
-    function({ addComponents, theme }) {
-      // 組件級樣式
-      addComponents({
-        // SortTable 組件樣式
-        '.sort-table-container': {
-          width: '100%',
-          marginBottom: '1rem',
-        },
-        '.sort-table-function-bar': {
-          display: 'flex',
-          alignItems: 'center',
-          height: '3rem',
-          backgroundColor: theme('colors.primary.20'),
-          padding: '0 0.375rem',
-          borderTopLeftRadius: '0.25rem',
-          borderTopRightRadius: '0.25rem',
-          justifyContent: 'flex-end',
-        },
-        '.sort-table-settings-btn': {
-          cursor: 'pointer',
-          color: theme('colors.primary.dark'),
-          fontSize: '1.25rem',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          '&:hover': {
-            color: theme('colors.primary.40'),
-          },
-        },
-
-        // FilterBtn 組件樣式
-        '.filter-btn': {
-          color: '#0ea5e9',
-          '& p': {
-            color: '#000',
-            marginLeft: '0.5rem',
-            fontWeight: 'bold',
-          },
-          '& i': {
-            fontSize: '1.25rem',
-          },
-          '&:hover': {
-            color: '#fff',
-            backgroundColor: '#0ea5e9',
-            '& p': {
-              color: '#fff',
-            },
-          },
-          '&:disabled': {
-            backgroundColor: '#fff',
-            opacity: '0.5',
-            '&:hover': {
-              backgroundColor: '#fff',
-              '& p': {
-                color: 'rgba(0, 0, 0, 0.2)',
-              },
-            },
-          },
-        },
-
-        // TransferItem 組件樣式
-        '.transfer-item-wrapper': {
-          borderTop: '1px solid #e5e7eb',
-          padding: '0 1rem',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          width: '100%',
-        },
-        '.transfer-arrow-wrapper': {
-          width: '7rem',
-          color: theme('colors.primary.10'),
-        },
-
-        // TransferDialog 組件樣式
-        '.transfer-sort-wrapper': {
-          border: '1px solid #e5e7eb',
-          height: '24rem',
-          overflow: 'auto',
-        },
-        '.transfer-active-bg': {
-          backgroundColor: 'rgba(103, 133, 193, 0.1)',
-        },
-        '.transfer-active-border': {
-          border: '1px solid',
-          borderRadius: '0.25rem',
-          borderColor: theme('colors.primary.10'),
-        },
-
-        // BaseDialog 組件樣式
-        '.base-dialog-title': {
-          fontWeight: 'bold',
-          fontSize: '1rem',
-        },
-      })
-    }
+    // 移除了舊的組件級樣式，現在使用 TypeScript 樣式工具和 Sass 模組
   ],
 }