hy-app 0.5.7 → 0.5.9

package/components/hy-table/index.scss

@@ -0,0 +1,197 @@
+@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) {
+  width: 100%;
+  background-color: $hy-background--container;
+  border: $hy-border-line;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  @include e(container) {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+  }
+
+  /* 表头区域 */
+  @include e(header) {
+    display: flex;
+    position: sticky;
+    top: 0;
+    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 e(header__th--text) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  /* 表头排序 */
+  @include e(header__th--sort) {
+    @include flex(column);
+    margin-left: 8rpx;
+
+    .hy-icon {
+      color: $text-color;
+      opacity: 0.3;
+      margin-bottom: 2rpx;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &.is-active {
+        color: $hy-primary;
+        opacity: 1;
+      }
+    }
+  }
+
+  /* 内容区域 */
+  @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;
+  }
+
+  /* 行 */
+  @include e(body__tr) {
+    @include flex(row);
+    box-sizing: border-box;
+    width: 100%;
+
+    &:nth-child(even) {
+      background-color: $stripe-bg;
+    }
+  }
+
+  /* 单元格 */
+  @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;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  /* 省略号 */
+  @include e(body__td--ellipsis) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+  }
+
+  /* 加载状态 */
+  @include e(body--loading) {
+    min-height: 400rpx;
+  }
+}

package/components/hy-table/props.ts

@@ -0,0 +1,47 @@
+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

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

@@ -0,0 +1,34 @@
+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
+}

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

@@ -27,14 +27,12 @@
                             ]"
                         >
                             <slot v-if="$slots.icon" name="icon" :record="item" :index="index" />
-                            <template v-else>
-                                <view
-                                    class="hy-tabs__wrapper--nav__item--prefix-icon"
-                                    v-if="item.icon"
-                                >
-                                    <HyIcon :name="item.icon" :customStyle="iconStyle"></HyIcon>
-                                </view>
-                            </template>
+                            <view
+                                class="hy-tabs__wrapper--nav__item--prefix-icon"
+                                v-else-if="item.icon"
+                            >
+                                <hy-icon :name="item.icon" :customStyle="iconStyle"></hy-icon>
+                            </view>
                             <slot
                                 v-if="$slots.content"
                                 name="content"
@@ -107,17 +105,17 @@
         </view>
 
         <!-- 内容轮播图	-->
-        <slot name="main">
-            <swiper
-                :current="innerCurrent"
-                @animationfinish="animationFinish"
-                :style="{ height: swiperHeight }"
-            >
-                <swiper-item class="swiper-item" v-for="(item, i) in list" :key="i">
-                    <slot :record="item.content" />
-                </swiper-item>
-            </swiper>
-        </slot>
+        <slot v-if="$slots.main" name="main"></slot>
+        <swiper
+            v-else-if="list.length"
+            :current="innerCurrent"
+            @animationfinish="animationFinish"
+            :style="{ height: swiperHeight }"
+        >
+            <swiper-item class="swiper-item" v-for="(item, i) in list" :key="i">
+                <slot :record="item.content" />
+            </swiper-item>
+        </swiper>
     </view>
 </template>
 
@@ -197,7 +195,7 @@ onMounted(() => {
 })
 
 /**
- * @description 设置线左边距离
+ * 设置线左边距离
  */
 const setLineLeft = () => {
     const tabItem = props.list[innerCurrent.value]
@@ -263,7 +261,7 @@ const setScrollLeft = () => {
     scrollLeft.value = Math.max(0, scrollLeft_1)
 }
 /**
- * @description 获取所有标签的尺寸
+ * 获取所有标签的尺寸
  * */
 const resize = () => {
     // 如果不存在list，则不处理
@@ -300,7 +298,7 @@ const resize = () => {
     )
 }
 /**
- * @description 获取导航菜单的尺寸
+ * 获取导航菜单的尺寸
  * */
 const getTabsRect = () => {
     return new Promise((resolve) => {
@@ -308,7 +306,7 @@ const getTabsRect = () => {
     })
 }
 /**
- * @description 获取所有标签的尺寸
+ * 获取所有标签的尺寸
  * */
 const getAllItemRect = () => {
     return new Promise((resolve) => {

package/components/hy-tabs/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(tabs) {
   @include e(wrapper) {

package/components/hy-tag/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 
 @include b(tag){

package/components/hy-text/hy-text.vue

@@ -229,7 +229,7 @@ const toLink = () => {
 
 <style scoped lang="scss">
 @import './index.scss';
-@import '../../libs/css/mixin.scss';
+@import '../../libs/css/mixin';
 /*超出出现省略号*/
 .hy-text__value--lines {
     @include multiEllipsis(v-bind(lines));

package/components/hy-text/index.scss

@@ -1,4 +1,4 @@
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 @use "../../libs/css/theme" as *;
 
 

package/components/hy-textarea/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(textarea) {
   border-radius: $hy-border-radius-sm;

package/components/hy-toast/index.scss

@@ -1,4 +1,4 @@
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 @use "../../libs/css/theme" as *;
 
 @include b(toast){
@@ -13,6 +13,7 @@
     max-width: 600rpx;
     /* #endif */
     position: relative;
+    z-index: 10090;
 
     @include m(loading) {
       flex-direction: column;

package/components/hy-tooltip/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 $hy-tooltip--z-index: 998;
 $hy-tooltip--background-color: rgb(50, 50, 51);
@@ -8,7 +8,7 @@ $hy-tooltip--background-color: rgb(50, 50, 51);
   position: relative;
   @include flex;
 
-  @include squareArrow(6px, $hy-tooltip--background-color, $hy-tooltip--z-index, $hy-box-shadow);
+  @include squareArrow(6px, $hy-tooltip--background-color, -1, $hy-box-shadow);
 
   @include edeep(popup) {
     position: absolute;

package/components/hy-upload/index.scss

@@ -1,4 +1,4 @@
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 @use "../../libs/css/theme" as *;
 
 $hy-upload-image-width: 80px !default;

package/components/hy-warn/hy-warn.vue

@@ -6,7 +6,7 @@
             :style="customStyle"
         >
             <view class="hy-warn__icon--left tips" v-if="showIcon">
-                <HyIcon :name="iconName(type)" size="21" :color="iconColor"></HyIcon>
+                <hy-icon :name="iconName(type)" size="21" :color="iconColor"></hy-icon>
             </view>
             <view
                 class="hy-warn__content"
@@ -51,7 +51,7 @@
                 <slot name="right"></slot>
             </view>
             <view class="hy-warn__close" v-if="closable" @tap.stop="closeHandler">
-                <HyIcon :name="IconConfig.CLOSE" :color="iconColor" size="15"></HyIcon>
+                <hy-icon :name="IconConfig.CLOSE" :color="iconColor" size="15"></hy-icon>
             </view>
         </view>
     </HyTransition>

package/components/hy-warn/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(warn) {
   position: relative;

package/components/hy-waterfall/index.scss

@@ -1,4 +1,4 @@
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(waterfall) {
   @include flex;

package/components/hy-watermark/index.scss

@@ -1,5 +1,5 @@
 @use "../../libs/css/theme" as *;
-@use "../../libs/css/mixin.scss" as *;
+@use "../../libs/css/mixin" as *;
 
 @include b(watermark) {
   position: absolute;

package/global.d.ts

@@ -58,6 +58,7 @@ declare module 'vue' {
         HyRadio: (typeof import('./components/hy-radio/hy-radio.vue'))['default']
         HyRate: (typeof import('./components/hy-rate/hy-rate.vue'))['default']
         HyReadMore: (typeof import('./components/hy-read-more/hy-read-more.vue'))['default']
+        HyRollingNum: (typeof import('./components/hy-rolling-num/hy-rolling-num.vue'))['default']
         HyScrollList: (typeof import('./components/hy-scroll-list/hy-scroll-list.vue'))['default']
         HySearch: (typeof import('./components/hy-search/hy-search.vue'))['default']
         HySignature: (typeof import('./components/hy-signature/hy-signature.vue'))['default']

package/index.scss

@@ -1,4 +1,4 @@
 @use "./libs/css/common.scss";
 @use "./libs/css/vars.scss";
-@use "./libs/css/mixin.scss";
+@use "libs/css/mixin";
 @use "./libs/css/theme.scss";

package/libs/css/{mixin.scss → _mixin.scss}

@@ -12,24 +12,37 @@
 }
 
 /* 加上-- */
-@mixin m($modifier) {
-  $selector: &;
-  $currentSelector: '';
-  @each $unit in $modifier {
-    $currentSelector: #{$currentSelector +
-      $selector +
-      config.$modifier-separator +
-      $unit +
-      ','};
+@mixin m($modifier...) {
+  $selectors: "";
+
+  @each $item in $modifier {
+    $selectors: #{$selectors + & + config.$modifier-separator + $item + ","};
   }
 
   @at-root {
-    #{$currentSelector} {
+    #{$selectors} {
       @content;
     }
   }
 }
 
+/* 定义状态（m） */
+@mixin mdeep($modifier...) {
+  $selectors: "";
+
+  @each $item in $modifier {
+    $selectors: #{$selectors + & + config.$modifier-separator + $item + ","};
+  }
+
+  @at-root {
+    :deep() {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
 /* 定义元素（e）__，对于伪类，会自动将 e 嵌套在 伪类 底下 */
 @mixin e($element...) {
   $selector: &;
@@ -101,14 +114,15 @@
 
 /* 状态，生成 is-$state 类名 */
 @mixin is($states...) {
-  @at-root {
-    @each $state in $states {
-      &.#{config.$state-prefix + $state} {
+  @each $state in $states {
+    @at-root {
+      #{&}.#{config.$state-prefix + $state} {
         @content;
       }
     }
   }
 }
+
 /* 添加伪类元素 */
 @mixin pseudo($pseudo) {
   @at-root #{&}#{':#{$pseudo}'} {

package/libs/css/theme.scss

@@ -47,10 +47,13 @@ $hy-background--disabled: var(--hy-background--disabled, rgba(0, 0, 0, 0.04)); /
 $hy-background--track: var(--hy-background--track, #F6F6F6) !default; // 轨道背景色
 $hy-background--empty: var(--hy-background--empty, #F3F3F3) !default; // 搜索背景色
 $hy-background--hover: var(--hy-background--hover, rgba(0,0,0,0.05)) !default; // 点击状态
-$hy-light-background-mask: var(--hy-light-background-mask, rgba(0, 0, 0, 0.5)); //遮罩颜色
+$hy-background-mask: var(--hy-background-mask, rgba(0, 0, 0, 0.5)); //遮罩颜色
 $hy-background--active: var(--hy-background--active, #FFFFFF); // 选中背景色
 $hy-background--close: var(--hy-background--close, #f0f0f0); // 关闭背景色
 $hy-background--box: var(--hy-background--box, #FFFFFF); // 盒子背景色
+$hy-background--table-header: var(--hy-background--table-header, #FAFAFA); // 表头背景色
+$hy-background-image--mask--two-flanks: var(--hy-background-image--mask--two-flanks, linear-gradient(180deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)),
+        linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6))); // 向两边形成雾霾形状
 
 /* 文字尺寸 */
 $hy-font-size-sm: 24rpx; // 提示文字大小

package/libs/css/vars.scss

@@ -21,6 +21,9 @@
   --hy-background--active: #FFFFFF;
   --hy-background--close:  #f0f0f0;
   --hy-background--box:  #FFFFFF;
+  --hy-background--table-header: #FAFAFA;
+  --hy-background-image--mask--two-flanks: linear-gradient(180deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6)),
+  linear-gradient(0deg, hsla(0, 0%, 100%, 0.95), hsla(0, 0%, 100%, 0.6));
 
   --hy-border-line: 1rpx solid #e8e8e8;
   --hy-border-color: #c2c2c4;
@@ -54,6 +57,9 @@
   --hy-background--active: #000000;
   --hy-background--close:  #323233;
   --hy-background--box:  #4b4c4d;
+  --hy-background--table-header: #1D1D1D;
+  --hy-background-image--mask--two-flanks: linear-gradient(180deg, hsla(0, 0%, 15%, 0.95), hsla(0, 0%, 10%, 0.6)),
+  linear-gradient(0deg, hsla(0, 0%, 15%, 0.95), hsla(0, 0%, 10%, 0.6));
 
   --hy-border-line: 1rpx solid #3c3f44;
   --hy-border-color: #3c3f44;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hy-app",
-  "version": "0.5.7",
-  "description": "feat: 新增sticky组件",
+  "version": "0.5.9",
+  "description": "feat: 新增表格组件组件",
   "main": "./index.ts",
   "private": false,
   "scripts": {},