rayyy-vue-table-components 1.2.6 → 1.2.7

package/dist/src/index.d.ts

@@ -7,6 +7,8 @@ import { default as BaseDialog } from './components/BaseDialog.vue';
 import { default as SortTable } from './components/tables/SortTable.vue';
 import { default as SearchBar } from './components/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/dist/src/utils/tableStyles.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Table 樣式工具類
+ * 將原本的 SCSS 樣式轉換為 Tailwind CSS 類名
+ */
+export declare const tableCell = "p-0 h-10";
+export declare const tableHeader = "bg-primary-15 font-bold text-text text-sm leading-4";
+export declare const tableCellContent = "truncate";
+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 tableStyles: {
+    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 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";
+};
+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 DataTableConfigType = typeof dataTableConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rayyy-vue-table-components",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Vue 3 + Element Plus 表格組件庫",
   "type": "module",
   "main": "./dist/index.umd.js",
@@ -30,7 +30,13 @@
     "./utils": {
       "types": "./dist/src/utils/tableHelper.d.ts",
       "import": "./src/utils/tableHelper.ts"
-    }
+    },
+    "./utils/styles": {
+      "types": "./dist/src/utils/tableStyles.d.ts",
+      "import": "./src/utils/tableStyles.ts"
+    },
+    "./styles": "./dist/rayyy-vue-table-components.css",
+    "./styles/element": "./src/assets/styles/element/index.scss"
   },
   "files": [
     "dist/*",
@@ -39,6 +45,7 @@
     "src/types/*",
     "src/types/components.d.ts",
     "src/utils/*",
+    "src/assets/styles/*",
     "tailwind-preset.js",
     "README.md"
   ],

package/src/assets/styles/_dialog.scss

@@ -0,0 +1,44 @@
+.el-dialog.base-dialog {
+  @apply p-0 #{!important};
+
+  .el-dialog__header {
+    @apply h-12 pt-2 bg-primary-15 border-b;
+
+    .el-dialog__title {
+      @apply text-base leading-8;
+    }
+  }
+
+  .el-dialog__body {
+    @apply p-4 overflow-auto;
+    max-height: calc(100vh - 200px);
+
+    .sub-title {
+      @apply pb-2 font-bold text-base;
+    }
+  }
+
+  .el-dialog__footer {
+    @apply py-1 px-2 border-t;
+    @apply flex items-center justify-end;
+  }
+}
+
+.waring-dialog {
+  .el-dialog__header {
+    @apply border-b-orange;
+  }
+}
+
+.upload-result-dialog {
+  .el-dialog__header {
+    @apply border-b-blue-10;
+  }
+}
+
+.context-wrapper {
+  @apply w-full flex items-center justify-center flex-col gap-2;
+  p {
+    @apply font-bold text-xl;
+  }
+}

package/src/assets/styles/_table.scss

@@ -0,0 +1,49 @@
+.data-table {
+  .el-table__cell {
+    @apply p-0 #{!important};
+    @apply h-10 #{!important};
+
+    .el-tooltip {
+      .cell-content {
+        @apply truncate;
+      }
+    }
+  }
+
+  .is-dismissed {
+    @apply bg-blue-20;
+  }
+
+  .el-table__header {
+    th {
+      @apply bg-primary-15 #{!important};
+
+      .cell {
+        @apply font-bold text-text text-sm leading-4;
+        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
+      }
+    }
+
+    th.el-table-fixed-column--left,
+    th.el-table-fixed-column--right {
+      @apply bg-primary-15;
+    }
+  }
+
+  .el-table__footer {
+    .el-table__cell {
+      .cell {
+        @apply font-bold;
+      }
+    }
+
+    .el-table__cell:nth-child(n + 2) {
+      .blue-text {
+        @apply text-blue-10;
+      }
+      .red-text {
+        @apply text-redText;
+      }
+    }
+  }
+}

package/src/assets/styles/element/index.scss

@@ -0,0 +1,103 @@
+// 導入 Element Plus 配置
+//@use 'element-plus/theme-chalk/src/mixins/config.scss' as *;
+
+// 聲明變數
+$namespace: 'ep';
+$colors: (
+  'main': (
+    'base': #0072bc,
+    'light-3': #3391c9,
+    'light-5': #66b0d6,
+    'light-7': #99cfe3,
+    'light-8': #b3def0,
+    'light-9': #ccedf7,
+    'dark-2': #005b96
+  )
+);
+
+// 主題變數覆蓋
+:root {
+  // Tailwind 自定義顏色
+  --color-primary: #6785c1;
+  --color-primary-10: #e0e0e0;
+  --color-primary-15: #F5F5F5;
+  --color-primary-20: #E0E0E0;
+  --color-primary-40: #b1c4e4;
+  --color-primary-60: #8facd9;
+  --color-primary-80: #7198ce;
+  --color-primary-dark: #4566a8;
+
+  // 主色系
+  --main-color: #0072bc;
+  --main-color-light-3: #3391c9;
+  --main-color-light-5: #66b0d6;
+  --main-color-light-7: #99cfe3;
+  --main-color-light-8: #b3def0;
+  --main-color-light-9: #ccedf7;
+  --main-color-dark-2: #005b96;
+  --main-color-border: #606266;
+
+  // 成功色系
+  --el-color-success: #67c23a;
+  --el-color-success-light-3: #85ce61;
+  --el-color-success-light-5: #a3e19d;
+  --el-color-success-light-7: #c1e3d1;
+  --el-color-success-light-8: #d0edc4;
+  --el-color-success-light-9: #e1f3d8;
+  --el-color-success-dark-2: #529b2e;
+
+  // 警告色系
+  --el-color-warning: #e6a23c;
+  --el-color-warning-light-3: #ebb563;
+  --el-color-warning-light-5: #efc48d;
+  --el-color-warning-light-7: #f3d19e;
+  --el-color-warning-light-8: #f5dab1;
+  --el-color-warning-light-9: #faeec5;
+  --el-color-warning-dark-2: #b88230;
+
+  // 危險色系
+  --el-color-danger: #f56c6c;
+  --el-color-danger-light-3: #f78989;
+  --el-color-danger-light-5: #f9a7a7;
+  --el-color-danger-light-7: #fbc4c4;
+  --el-color-danger-light-8: #fcd3d3;
+  --el-color-danger-light-9: #fde2e2;
+  --el-color-danger-dark-2: #c45656;
+
+  // 資訊色系
+  --el-color-info: #909399;
+  --el-color-info-light-3: #a6a9ad;
+  --el-color-info-light-5: #bcbfc4;
+  --el-color-info-light-7: #d3d4d6;
+  --el-color-info-light-8: #dcdfe6;
+  --el-color-info-light-9: #e4e7ed;
+  --el-color-info-dark-2: #73767a;
+
+  // 文字顏色
+  --el-text-color-primary: #303133;
+  --el-text-color-regular: #606266;
+  --el-text-color-secondary: #909399;
+  --el-text-color-placeholder: #a8abb2;
+  --el-text-color-disabled: #c0c4cc;
+
+  // 邊框顏色
+  --el-border-color: #dcdfe6;
+  --el-border-color-light: #e4e7ed;
+  --el-border-color-lighter: #ebeef5;
+  --el-border-color-extra-light: #f2f6fc;
+
+  // 填充顏色
+  --el-fill-color: #f0f2f5;
+  --el-fill-color-light: #f5f7fa;
+  --el-fill-color-lighter: #fafafa;
+  --el-fill-color-extra-light: #fafcff;
+  --el-fill-color-dark: #ebedf0;
+  --el-fill-color-darker: #e6e8eb;
+  --el-fill-color-blank: #ffffff;
+
+  // 陰影
+  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08);
+  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
+  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08), 0px 12px 32px rgba(0, 0, 0, 0.12);
+}

package/src/assets/styles/tailwind.scss

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

package/src/components/BaseDialog.vue

@@ -52,17 +52,14 @@ const handleSubmit = () => {
     :before-close="props.beforeClose"
     :close-on-click-modal="false"
     center
-    class="rounded-md"
+    class="rounded-md base-dialog"
     :class="{ 'waring-dialog': props.isWaring, 'upload-result-dialog': props.isPrimary }"
     align-center
     destroy-on-close
-    header-class="h-12 pt-2 bg-primary-15 border-b"
-    body-class="p-4 overflow-auto max-h-[calc(100vh-200px)]"
-    footer-class="py-1 px-2 border-t flex items-center justify-end"
   >
     <template #header="{ titleId, titleClass }">
       <slot name="customHeader">
-        <p :id="titleId" class="ext-base leading-8" :class="titleClass">
+        <p :id="titleId" class="base-dialog-title" :class="titleClass">
           {{ props.title }}
         </p>
       </slot>
@@ -70,7 +67,7 @@ const handleSubmit = () => {
 
     <div class="p-2" v-loading="bodyLoading">
       <div
-        class=" pb-2 font-bold text-base"
+        class="sub-title"
         :class="{
           'border-b mb-4': typeof subTitle == 'string',
         }"
@@ -81,7 +78,7 @@ const handleSubmit = () => {
       <slot></slot>
     </div>
     <template #footer>
-      <footer >
+      <footer>
         <slot name="customFooter">
           <base-btn
             text="確定"
@@ -97,5 +94,4 @@ const handleSubmit = () => {
   </el-dialog>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

package/src/utils/tableStyles.ts

@@ -0,0 +1,83 @@
+/**
+ * Table 樣式工具類
+ * 將原本的 SCSS 樣式轉換為 Tailwind CSS 類名
+ */
+
+// 表格單元格樣式
+export const tableCell = 'p-0 h-10'
+
+// 表格標題樣式
+export const tableHeader = 'bg-primary-15 font-bold text-text text-sm leading-4'
+
+// 表格內容樣式
+export const tableCellContent = 'truncate'
+
+// 被駁回行的樣式
+export const dismissedRow = 'bg-blue-20'
+
+// 表格底部樣式
+export const tableFooter = 'font-bold'
+
+// 藍色文字樣式
+export const blueText = 'text-blue-10'
+
+// 紅色文字樣式
+export const redText = 'text-redText'
+
+// 組合樣式對象
+export const tableStyles = {
+  cell: tableCell,
+  header: tableHeader,
+  content: tableCellContent,
+  dismissed: dismissedRow,
+  footer: tableFooter,
+  blueText,
+  redText,
+} as const
+
+// 完整的 data-table 樣式配置
+export const dataTableConfig = {
+  // 表格單元格配置
+  cellClass: tableCell,
+  headerClass: tableHeader,
+
+  // 內容相關類名
+  contentClass: tableCellContent,
+  dismissedClass: dismissedRow,
+  footerClass: tableFooter,
+
+  // 文字顏色類名
+  blueTextClass: blueText,
+  redTextClass: redText,
+} as const
+
+// 樣式組合函數
+export const createTableCellClass = (options?: {
+  isDismissed?: boolean
+  isHeader?: boolean
+}) => {
+  const baseClass = tableCell
+  const classes = [baseClass]
+
+  if (options?.isDismissed) {
+    classes.push(dismissedRow)
+  }
+
+  if (options?.isHeader) {
+    classes.push(tableHeader)
+  }
+
+  return classes.join(' ')
+}
+
+export const createTextClass = (type: 'blue' | 'red' | 'normal' = 'normal') => {
+  switch (type) {
+    case 'blue': return blueText
+    case 'red': return redText
+    default: return ''
+  }
+}
+
+// 導出類型
+export type TableStylesType = typeof tableStyles
+export type DataTableConfigType = typeof dataTableConfig