hy-app 0.5.8 → 0.5.10

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/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; // 提示文字大小
@@ -90,4 +93,4 @@ $hy-border-margin-padding-sm: var(--hy-border-margin-padding-sm, 10rpx) !default
 $hy-border-margin-padding-base: var(--hy-border-margin-padding-base, 20rpx) !default;
 $hy-border-margin-padding-lg: var(--hy-border-margin-padding-lg, 30rpx) !default;
 /* 底部线条 */
-$hy-border-line: var(--hy-border-line, 1rpx solid #e8e8e8) !default;
+$hy-border-line: var(--hy-border-line, 1px solid #e8e8e8) !default;

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;