hy-app 0.5.10 → 0.5.12

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

@@ -15,14 +15,19 @@ const tableProps = {
     /** 表格高度，如 '500rpx' */
     height: {
         type: [String, Number],
-        default: 'auto'
+        default: 400
+    },
+    /** 行高，如 '500rpx' */
+    rowHeight: {
+        type: [String, Number],
+        default: 50
     },
     /** 是否斑马纹 */
     stripe: {
         type: Boolean,
         default: false
     },
-    /** 是否带有纵向边框 */
+    /** 是否带有横向边框 */
     border: {
         type: Boolean,
         default: true
@@ -32,15 +37,25 @@ const tableProps = {
         type: Boolean,
         default: false
     },
-    /** 空数据提示 */
-    emptyText: {
-        type: String,
-        default: '暂无数据'
-    },
     /** 行数据的唯一键名 */
     rowKey: {
         type: String,
         default: 'id'
+    },
+    /** 显示表头 */
+    showHeader: {
+        type: Boolean,
+        default: true
+    },
+    /** 空状态的图片 */
+    emptyUrl: {
+        type: String,
+        default: ''
+    },
+    /** 空状态的描述 */
+    emptyDes: {
+        type: String,
+        default: ''
     }
 }
 

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

@@ -4,31 +4,26 @@ export interface ITableColumn {
     /** 对应数据字段名 */
     key: string
     /** 列宽 (数字默认 px) */
-    width?: number | string
+    width: number
     /** 对齐方式 */
     align?: HyApp.RowCenterType
     /** 是否开启排序 */
     sortable?: boolean
-    /** 是否固定 ('left' | 'right' | false) */
-    fixed?: 'left' | 'right' | false
     /** 是否开启文本超长省略 */
     ellipsis?: boolean
     /** 开启省略后，是否开启点击显示完整内容(Tooltip) */
     tooltip?: boolean
+    /** 是否固定 ('left' | 'right') */
+    fixed?: 'left' | 'right'
+    /** 处理数据函数 */
+    formatter?: (value: any, row: any) => string
 }
 
 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
+    (e: 'sort-change', key: string, sort: SortType): void
 }

package/components/hy-tabs/hy-tabs.vue

@@ -42,7 +42,7 @@
                             <text
                                 v-else
                                 :class="[
-                                    'hy-tabs__wrapper--nav__item--text',
+                                    'hy-tabs__wrapper--nav__item--test',
                                     item.disabled && 'hy-tabs__wrapper--nav__item--text__disabled'
                                 ]"
                                 :style="[textStyle(index)]"

package/components/hy-tabs/props.ts

@@ -1,77 +1,77 @@
-import type { TabsItemVo } from './typing'
-import type { CSSProperties, PropType } from 'vue'
-import type { HyBadgeProps } from '../hy-badge/typing'
-
-const tabsProps = {
-    /** 标签数组，元素为对象，如[{name: '推荐'}] */
-    list: {
-        type: Array as unknown as PropType<TabsItemVo[]>,
-        default: []
-    },
-    /** 当前选中标签的索引 */
-    current: {
-        type: Number,
-        default: 0
-    },
-    /** 从list元素对象中读取的键名 */
-    keyName: {
-        type: String,
-        default: 'name'
-    },
-    /** 滑块移动一次所需的时间，单位秒 */
-    duration: {
-        type: Number,
-        default: 300
-    },
-    /** 滑块颜色 */
-    lineColor: String,
-    /** 菜单选择中时的样式 */
-    activeStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: {}
-    },
-    /** 菜单非选中时的样式 */
-    inactiveStyle: {
-        type: Object as PropType<CSSProperties>,
-        default: {}
-    },
-    /** 滑块长度 */
-    lineWidth: {
-        type: [String, Number],
-        default: 20
-    },
-    /** 滑块高度 */
-    lineHeight: {
-        type: [String, Number],
-        default: 3
-    },
-    /** 滑块背景显示大小，当滑块背景设置为图片时使用 */
-    lineBgSize: {
-        type: [String, Number],
-        default: 'cover'
-    },
-    /** 菜单item的样式 */
-    itemStyle: Object as PropType<CSSProperties>,
-    /** 轮播图高度 */
-    swiperHeight: {
-        type: [String, Number],
-        default: 'calc(100vh - 44px)'
-    },
-    /** 菜单是否可滚动 */
-    scrollable: {
-        type: Boolean,
-        default: true
-    },
-    /**
-     * @description 徽标props全局定义
-     * */
-    propsBadge: Object as PropType<HyBadgeProps>,
-    /** 标签左侧图标样式自定义 */
-    iconStyle: Object as PropType<CSSProperties>,
-    /** 定义需要用到的外部样式 */
-    customStyle: Object as PropType<CSSProperties>,
-    /** 自定义外部类名 */
-    customClass: String
-}
-
-export default tabsProps
+import type { TabsItemVo } from './typing'
+import type { CSSProperties, PropType } from 'vue'
+import type { HyBadgeProps } from '../hy-badge/typing'
+
+const tabsProps = {
+    /** 标签数组，元素为对象，如[{name: '推荐'}] */
+    list: {
+        type: Array as unknown as PropType<TabsItemVo[]>,
+        default: []
+    },
+    /** 当前选中标签的索引 */
+    current: {
+        type: Number,
+        default: 0
+    },
+    /** 从list元素对象中读取的键名 */
+    keyName: {
+        type: String,
+        default: 'name'
+    },
+    /** 滑块移动一次所需的时间，单位秒 */
+    duration: {
+        type: Number,
+        default: 300
+    },
+    /** 滑块颜色 */
+    lineColor: String,
+    /** 菜单选择中时的样式 */
+    activeStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: {}
+    },
+    /** 菜单非选中时的样式 */
+    inactiveStyle: {
+        type: Object as PropType<CSSProperties>,
+        default: {}
+    },
+    /** 滑块长度 */
+    lineWidth: {
+        type: [String, Number],
+        default: 20
+    },
+    /** 滑块高度 */
+    lineHeight: {
+        type: [String, Number],
+        default: 3
+    },
+    /** 滑块背景显示大小，当滑块背景设置为图片时使用 */
+    lineBgSize: {
+        type: [String, Number],
+        default: 'cover'
+    },
+    /** 菜单item的样式 */
+    itemStyle: Object as PropType<CSSProperties>,
+    /** 轮播图高度 */
+    swiperHeight: {
+        type: [String, Number],
+        default: 'calc(100vh - 44px)'
+    },
+    /** 菜单是否可滚动 */
+    scrollable: {
+        type: Boolean,
+        default: true
+    },
+    /**
+     * @description 徽标props全局定义
+     * */
+    propsBadge: Object as PropType<HyBadgeProps>,
+    /** 标签左侧图标样式自定义 */
+    iconStyle: Object as PropType<CSSProperties>,
+    /** 定义需要用到的外部样式 */
+    customStyle: Object as PropType<CSSProperties>,
+    /** 自定义外部类名 */
+    customClass: String
+}
+
+export default tabsProps

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

@@ -1,33 +1,33 @@
-import BadgeProps from '../hy-badge/typing'
-export interface TabsItemVo extends AnyObject {
-    /**
-     * @description tab名称
-     * */
-    name: string
-    /**
-     * @description 徽标接收的props
-     * */
-    badge?: BadgeProps
-    /**
-     * @description 是否禁用
-     * */
-    disabled?: boolean
-    /**
-     * @description swiper内容值
-     * */
-    content?: any
-}
-
-export interface TabsParamsVo extends TabsParamsVo {
-    index: number
-}
-export interface ITabsEmits {
-    /** 点击标签时触发 */
-    (e: 'click', params: TabsParamsVo): void
-    /** 标签索引改变时触发 */
-    (e: 'change', item: TabsItemVo, index: number): void
-    /** 长按标签时触发 */
-    (e: 'longPress', params: TabsParamsVo): void
-    /** 标签索引改变时触发 */
-    (e: 'update:current', index: number): void
-}
+import BadgeProps from '../hy-badge/typing'
+export interface TabsItemVo extends AnyObject {
+    /**
+     * @description tab名称
+     * */
+    name: string
+    /**
+     * @description 徽标接收的props
+     * */
+    badge?: BadgeProps
+    /**
+     * @description 是否禁用
+     * */
+    disabled?: boolean
+    /**
+     * @description swiper内容值
+     * */
+    content?: any
+}
+
+export interface TabsParamsVo extends TabsParamsVo {
+    index: number
+}
+export interface ITabsEmits {
+    /** 点击标签时触发 */
+    (e: 'click', params: TabsParamsVo): void
+    /** 标签索引改变时触发 */
+    (e: 'change', item: TabsItemVo, index: number): void
+    /** 长按标签时触发 */
+    (e: 'longPress', params: TabsParamsVo): void
+    /** 标签索引改变时触发 */
+    (e: 'update:current', index: number): void
+}