hy-app 0.5.11 → 0.5.13

package/components/hy-table/index.scss

@@ -1,197 +1,172 @@
 @use "../../libs/css/theme" as *;
 @use "../../libs/css/mixin" as *;
 
-/* 变量定义 */
-$border-color: #ebeef5;
-$header-bg: $hy-background--table-header;
-$text-color: #606266;
 $header-text-color: #909399;
 $stripe-bg: $hy-background--table-header;
-$hover-bg: #f5f7fa;
-
-/*#1d1d1d*/
 
 @include b(table) {
+  position: relative;
   width: 100%;
-  background-color: $hy-background--container;
+  overflow: hidden;
   border: $hy-border-line;
-  position: relative;
-  display: flex;
-  flex-direction: column;
+  @include flex(column);
 
-  @include e(container) {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-  }
-
-  /* 表头区域 */
+  /* 表格头部 */
   @include e(header) {
-    display: flex;
-    position: sticky;
-    top: 0;
+    position: relative;
     z-index: 10;
-    background-color: $header-bg;
-    border-bottom: $hy-border-line;
-  }
-
-  /* 左固定表头 */
-  @include e(header--left) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: flex;
-    background-color: $header-bg;
-    z-index: 12;
-  }
-
-  /* 中间表头 */
-  @include e(header--center) {
-    display: flex;
-    flex: 1;
-    overflow-x: hidden;
-  }
-
-  /* 右固定表头 */
-  @include e(header--right) {
-    position: absolute;
-    right: 0;
-    top: 0;
-    display: flex;
-    background-color: $header-bg;
-    z-index: 12;
-  }
-
-  /* 表头单元格 */
-  @include e(header__th) {
-    @include flex(center);
-    padding: 0 20rpx;
-    height: 88rpx;
-    box-sizing: border-box;
-    background-color: $header-bg;
-    font-size: 28rpx;
-    color: $header-text-color;
-    font-weight: bold;
     border-bottom: $hy-border-line;
-    border-right: $hy-border-line;
 
-    &:last-child {
-      border-right: none;
+    @include m(scroll) {
+      width: 100%;
+      height: 50px;
+      white-space: nowrap;
     }
-  }
 
-  /* 表头文本 */
-  @include e(header__th--text) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
-  }
+    @include m(wrapper) {
+      display: flex;
+      height: 100%;
+
+      @include e(cell) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        padding: 0 20rpx;
+        font-weight: bold;
+        color: $header-text-color;
+        font-size: 28rpx;
+        border-right: $hy-border-line;
+        box-sizing: border-box;
+        position: relative;
+        flex-shrink: 0;
+        background-color: $hy-background--table-header;
+        &:last-child {
+          border-right: none;
+        }
+
+        @include m(sortable) {
+          :deep(.is-active) {
+            color: $hy-primary;
+          }
+        }
+      }
 
-  /* 表头排序 */
-  @include e(header__th--sort) {
-    @include flex(column);
-    margin-left: 8rpx;
+      @include e(left, center, right) {
+        display: flex;
+        height: 100%;
+      }
 
-    .hy-icon {
-      color: $text-color;
-      opacity: 0.3;
-      margin-bottom: 2rpx;
+      @include e(left, right) {
+        position: sticky;;
+      }
 
-      &:last-child {
-        margin-bottom: 0;
+      @include e(left) {
+        left: 0;
+        border-right: $hy-border-line;
+        @include is(shadow) {
+          box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+        }
       }
 
-      &.is-active {
-        color: $hy-primary;
-        opacity: 1;
+      @include e(right) {
+        right: 0;
+        border-left: $hy-border-line;
       }
     }
   }
 
-  /* 内容区域 */
+  /* 表格主体 */
   @include e(body) {
-    flex: 1;
-    overflow-y: auto;
     position: relative;
-    z-index: 1;
-  }
-
-  /* 内容包装器 */
-  @include e(body__wrapper) {
-    display: flex;
     width: 100%;
-    min-height: 100%;
-  }
-
-  /* 左固定内容 */
-  @include e(body--left) {
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: flex;
-    flex-direction: column;
-    background-color: $hy-background--container;
-    z-index: 11;
-  }
-
-  /* 中间内容 */
-  @include e(body--center) {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow-x: hidden;
-  }
-
-  /* 右固定内容 */
-  @include e(body--right) {
-    position: absolute;
-    right: 0;
-    top: 0;
-    display: flex;
-    flex-direction: column;
-    background-color: $hy-background--container;
-    z-index: 11;
-  }
+    height: 100%;
 
-  /* 行 */
-  @include e(body__tr) {
-    @include flex(row);
-    box-sizing: border-box;
-    width: 100%;
+    /* 加载状态 */
+    @include m(loading) {
+      z-index: 999;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: $hy-background--container;
+    }
 
-    &:nth-child(even) {
-      background-color: $stripe-bg;
+    /* 空状态 */
+    @include m(empty) {
+      width: 100%;
+      height: 100%;
     }
-  }
 
-  /* 单元格 */
-  @include e(body__td) {
-    @include flex(center);
-    padding: 0 20rpx;
-    height: 88rpx;
-    box-sizing: border-box;
-    font-size: 28rpx;
-    color: $text-color;
-    border-bottom: $hy-border-line;
-    border-right: $hy-border-line;
+    @include m(content) {
+      display: flex;
+      flex-direction: column;
+
+      @include e(row) {
+        display: flex;
+        width: 100%;
+        border-bottom: $hy-border-line;
+        box-sizing: border-box;
+        background-color: $hy-background--container;
+        &:last-child {
+          border-right: none;
+        }
+
+        @include is(stripe) {
+          background: $stripe-bg;
+        }
+
+        @include m(cell) {
+          display: flex;
+          align-items: center;
+          padding: 0 8px;
+          font-size: 14px;
+          border-right: $hy-border-line;
+          box-sizing: border-box;
+          flex-shrink: 0;
+          white-space: nowrap;
+
+          @include e(text) {
+            width: 100%;
+            overflow: hidden;
+
+            @include is(ellipsis) {
+              text-overflow: ellipsis;
+              overflow: hidden;
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+    }
 
-    &:last-child {
-      border-right: none;
+    @include m(center) {
+      position: absolute;
+      top: 0;
+      z-index: 1;
+      overflow: scroll;
     }
-  }
 
-  /* 省略号 */
-  @include e(body__td--ellipsis) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: block;
-  }
+    @include m(left, right) {
+      position: absolute;
+      top: 0;
+      z-index: 5;
+      overflow: hidden;
+    }
 
-  /* 加载状态 */
-  @include e(body--loading) {
-    min-height: 400rpx;
+    @include m(left) {
+      left: 0;
+      @include is(shadow) {
+        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
+      }
+    }
+    @include m(right) {
+      right: 0;
+      border-left: $hy-border-line;
+    }
   }
 }

package/components/hy-table/props.ts

@@ -1,47 +1,62 @@
-import type { PropType } from 'vue'
-import type { ITableColumn } from './typing'
-
-const tableProps = {
-    /** 数据源 */
-    data: {
-        type: Array,
-        default: () => []
-    },
-    /** 列配置 */
-    columns: {
-        type: Array as PropType<ITableColumn[]>,
-        default: () => []
-    },
-    /** 表格高度，如 '500rpx' */
-    height: {
-        type: [String, Number],
-        default: 'auto'
-    },
-    /** 是否斑马纹 */
-    stripe: {
-        type: Boolean,
-        default: false
-    },
-    /** 是否带有纵向边框 */
-    border: {
-        type: Boolean,
-        default: true
-    },
-    /** 加载状态 */
-    loading: {
-        type: Boolean,
-        default: false
-    },
-    /** 空数据提示 */
-    emptyText: {
-        type: String,
-        default: '暂无数据'
-    },
-    /** 行数据的唯一键名 */
-    rowKey: {
-        type: String,
-        default: 'id'
-    }
-}
-
-export default tableProps
+import type { PropType } from 'vue'
+import type { ITableColumn } from './typing'
+
+const tableProps = {
+    /** 数据源 */
+    data: {
+        type: Array,
+        default: () => []
+    },
+    /** 列配置 */
+    columns: {
+        type: Array as PropType<ITableColumn[]>,
+        default: () => []
+    },
+    /** 表格高度，如 '500rpx' */
+    height: {
+        type: [String, Number],
+        default: 400
+    },
+    /** 行高，如 '500rpx' */
+    rowHeight: {
+        type: [String, Number],
+        default: 50
+    },
+    /** 是否斑马纹 */
+    stripe: {
+        type: Boolean,
+        default: false
+    },
+    /** 是否带有横向边框 */
+    border: {
+        type: Boolean,
+        default: true
+    },
+    /** 加载状态 */
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    /** 行数据的唯一键名 */
+    rowKey: {
+        type: String,
+        default: 'id'
+    },
+    /** 显示表头 */
+    showHeader: {
+        type: Boolean,
+        default: true
+    },
+    /** 空状态的图片 */
+    emptyUrl: {
+        type: String,
+        default: ''
+    },
+    /** 空状态的描述 */
+    emptyDes: {
+        type: String,
+        default: ''
+    }
+}
+
+export default tableProps

package/components/hy-table/typing.d.ts

@@ -1,34 +1,29 @@
-export interface ITableColumn {
-    /** 列标题 */
-    title: string
-    /** 对应数据字段名 */
-    key: string
-    /** 列宽 (数字默认 px) */
-    width?: number | string
-    /** 对齐方式 */
-    align?: HyApp.RowCenterType
-    /** 是否开启排序 */
-    sortable?: boolean
-    /** 是否固定 ('left' | 'right' | false) */
-    fixed?: 'left' | 'right' | false
-    /** 是否开启文本超长省略 */
-    ellipsis?: boolean
-    /** 开启省略后，是否开启点击显示完整内容(Tooltip) */
-    tooltip?: boolean
-}
-
-export type SortType = 'asc' | 'desc' | 'normal'
-
-interface ISortParams {
-    key: string
-    type: SortType
-}
-
-export interface ITableEmits {
-    /** 当某一行被点击时会触发该事件 */
-    (e: 'row-click', row: any, index: number): void
-    /** 单元格点击触发该事件 */
-    (e: 'cell-click', row: any, col: ITableColumn): void
-    /** 触发本地排序或远程排序事件 */
-    (e: 'sort-change', params: ISortParams): void
-}
+export interface ITableColumn {
+    /** 列标题 */
+    title: string
+    /** 对应数据字段名 */
+    key: string
+    /** 列宽 (数字默认 px) */
+    width: number
+    /** 对齐方式 */
+    align?: HyApp.RowCenterType
+    /** 是否开启排序 */
+    sortable?: boolean
+    /** 是否开启文本超长省略 */
+    ellipsis?: boolean
+    /** 开启省略后，是否开启点击显示完整内容(Tooltip) */
+    tooltip?: boolean
+    /** 是否固定 ('left' | 'right') */
+    fixed?: 'left' | 'right'
+    /** 处理数据函数 */
+    formatter?: (value: any, row: any) => string
+}
+
+export type SortType = 'asc' | 'desc' | 'normal'
+
+export interface ITableEmits {
+    /** 当某一行被点击时会触发该事件 */
+    (e: 'row-click', row: any, index: number): void
+    /** 触发本地排序或远程排序事件 */
+    (e: 'sort-change', key: string, sort: SortType): void
+}