feat: weui v2.6.11

Tencent · Jan 12, 2024 · 610e504 · 610e504
1 parent 86b6c9e
commit 610e504
Show file tree

Hide file tree

Showing 21 changed files with 237 additions and 123 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,28 @@
+### v2.6.11 (2024-01-12)
+
+
+
+### v2.6.10 (2024-01-12)
+
+#### Bugfixes
+* fix: 修复form组件上下结构带来的兼容问题
+* fix: 调整button组件loading颜色
+
+
+
+### v2.6.9 (2023-12-22)
+
+#### Features
+* feat: 组件Button UI升级
+* feat: 桌面端下鼠标形状统一为箭头
+
+
+#### Bugfixes
+* fix: 调整组件weui-agree的热区
+* fix: 调整组件weui-mask透明度
+
+
+
 ### v2.6.7 (2023-11-01)
 
 #### Features

diff --git a/dist/example/example.css b/dist/example/example.css
diff --git a/dist/example/index.html b/dist/example/index.html
@@ -467,12 +467,15 @@ <h1 class="page__title">Button</h1>
 
         <div class="button-sp-area">
           <a href="javascript:" role="button" class="weui-btn weui-btn_primary">主要操作</a>
+          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
           <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i>主要操作</a>
           <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_primary">主要操作</a>
           <a href="javascript:" role="button" class="weui-btn weui-btn_default">次要操作</a>
+          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
           <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading"></i>次要操作</a>
           <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_default">次要操作</a>
           <a href="javascript:" role="button" class="weui-btn weui-btn_warn">警示操作</a>
+          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
           <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading"></i>警示操作</a>
           <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_warn">警示操作</a>
         </div>
@@ -484,9 +487,14 @@ <h1 class="page__title">Button</h1>
         </div>
 
         <div class="button-sp-area overlay">
-          <a href="javascript:" role="button" class="weui-btn weui-btn_overlay">overlay 按钮</a>
-          <a href="javascript:" role="button" class="weui-btn weui-btn_overlay weui-btn_medium">overlay 按钮</a>
-          <a href="javascript:" role="button" class="weui-btn weui-btn_overlay weui-btn_mini">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_overlay">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_overlay">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_overlay">overlay 按钮</a>
+        </div>
+        <div class="button-sp-area overlay">
+          <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
         </div>
 
         <div class="button-sp-area cell">

diff --git a/dist/style/weui.css b/dist/style/weui.css
diff --git a/dist/style/weui.min.css b/dist/style/weui.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "weui",
-    "version": "2.6.7",
+    "version": "2.6.11",
     "description": "A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.",
     "keywords": [
         "weui",

diff --git a/src/example/button/button_default.html b/src/example/button/button_default.html
@@ -7,12 +7,15 @@ <h1 class="page__title">Button</h1>
 
         <div class="button-sp-area">
           <a href="javascript:" role="button" class="weui-btn weui-btn_primary">主要操作</a>
+          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
           <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-mask-loading"></i>主要操作</a>
           <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_primary">主要操作</a>
           <a href="javascript:" role="button" class="weui-btn weui-btn_default">次要操作</a>
+          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
           <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-mask-loading"></i>次要操作</a>
           <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_default">次要操作</a>
           <a href="javascript:" role="button" class="weui-btn weui-btn_warn">警示操作</a>
+          <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading weui-mask-loading_only"></i></a>
           <a href="javascript:" role="button" title="正在操作" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-mask-loading"></i>警示操作</a>
           <a href="javascript:" role="button" aria-disabled="true" disabled class="weui-btn weui-btn_disabled weui-btn_warn">警示操作</a>
         </div>
@@ -24,9 +27,14 @@ <h1 class="page__title">Button</h1>
         </div>
 
         <div class="button-sp-area overlay">
-          <a href="javascript:" role="button" class="weui-btn weui-btn_overlay">overlay 按钮</a>
-          <a href="javascript:" role="button" class="weui-btn weui-btn_overlay weui-btn_medium">overlay 按钮</a>
-          <a href="javascript:" role="button" class="weui-btn weui-btn_overlay weui-btn_mini">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_overlay">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_overlay">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_overlay">overlay 按钮</a>
+        </div>
+        <div class="button-sp-area overlay">
+          <a href="javascript:" role="button" class="weui-btn weui-btn_primary weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_default weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
+          <a href="javascript:" role="button" class="weui-btn weui-btn_warn weui-btn_overlay weui-btn_disabled">overlay 按钮</a>
         </div>
 
         <div class="button-sp-area cell">

diff --git a/src/example/example.less b/src/example/example.less
@@ -207,7 +207,7 @@ body,
             background-color: var(--weui-BG-2);
             overflow: hidden;
             border-radius: 2px;
-            cursor: pointer;
+            cursor: default;
             &.js_show {
                 .weui-flex {
                     opacity: 0.5;

diff --git a/src/style/base/reset.less b/src/style/base/reset.less
@@ -39,6 +39,8 @@ a img {
 a {
   text-decoration: none;
   .setTapColor();
+
+  cursor: default;
 }
 input,
 textarea {

diff --git a/src/style/base/variable/weui-button.less b/src/style/base/variable/weui-button.less
@@ -24,7 +24,7 @@ page {
   --weui-BTN-HEIGHT-MEDIUM: 40;
   --weui-BTN-HEIGHT-SMALL: 32;
 }
-.setColor(--weui-BTN-ACTIVE-MASK, rgba(0,0,0,0.1), rgba(255,255,255,0.1));
+.setColor(--weui-BTN-ACTIVE-MASK, rgba(0,0,0,0.2), rgba(255,255,255,0.2));
 
 
 
@@ -63,8 +63,8 @@ page {
 @weuiBtnPrimaryDisabledBg: @weuiBtnDisabledBg;
 
 // warn
-@weuiBtnWarnFontColor: @weuiColorWarn;
+@weuiBtnWarnFontColor: @weuiBtnFontColor;
 @weuiBtnWarnDisabledFontColor: @weuiBtnDisabledFontColor;
-@weuiBtnWarnBg: @weuiBtnDefaultBg;
+@weuiBtnWarnBg: var(--weui-RED-100);
 @weuiBtnWarnActiveBg: @weuiBtnDefaultActiveBg;
 @weuiBtnwarnDisabledBg: @weuiBtnDefaultDisabledBg;
diff --git a/src/style/widget/weui-agree/weui-agree.less b/src/style/widget/weui-agree/weui-agree.less
@@ -17,10 +17,11 @@
 @import "../../base/fn";
 
 .weui-agree {
-  display: flex;
-  text-align: justify;
-  justify-content: center;
+  display: inline-flex;
+  vertical-align: bottom;
+  max-width: 100%;
   align-items: center;
+  text-align: justify;
   .hyphens;
 
   line-height: 1.6;

diff --git a/src/style/widget/weui-button/weui-btn_default.less b/src/style/widget/weui-button/weui-btn_default.less
@@ -17,9 +17,9 @@
 @import "../../base/fn";
 
 .weui-btn_default {
-  color: @weuiBtnDefaultFontColor;
-  background-color: @weuiBtnDefaultBg;
+  color: var(--weui-FG-0);
+  background-color: var(--weui-FG-5);
   &:not(.weui-btn_disabled):visited {
-    color: @weuiBtnDefaultFontColor;
+    color: var(--weui-FG-0);
   }
 }
diff --git a/src/style/widget/weui-button/weui-btn_disabled.less b/src/style/widget/weui-button/weui-btn_disabled.less
@@ -19,5 +19,5 @@
 .weui-btn_disabled,
 .weui-btn[disabled] {
   color: var(--weui-FG-4);
-  background-color: var(--weui-BG-1);
+  background-color: var(--weui-FG-5);
 }
diff --git a/src/style/widget/weui-button/weui-btn_global.less b/src/style/widget/weui-button/weui-btn_global.less
@@ -28,11 +28,12 @@
   font-size: @weuiBtnFontSize;
   text-align: center;
   text-decoration: none;
-  color: @weuiBtnFontColor;
+  color: #fff;
   line-height: unit(((@weuiBtnHeight - 24) / @weuiBtnFontSize));
   border-radius: @weuiBtnBorderRadius;
   .setTapColor();
 
+  cursor: default;
   user-select: none;
 
   &:active {

diff --git a/src/style/widget/weui-button/weui-btn_loading.less b/src/style/widget/weui-button/weui-btn_loading.less
@@ -17,22 +17,35 @@
 @import "../../base/fn";
 
 .weui-btn_loading {
-  .weui-loading {
-    margin: -0.2em 8px 0 0;
-  }
   .weui-mask-loading {
-    margin: -0.2em 8px 0 0;
+    font-size: 20px;
+    margin: -0.2em 4px 0 0;
     color: currentColor;
+
+    // 临时用，为了向后兼容，等designtoken完成后再改成默认loading，按需loading+text
+    &.weui-mask-loading_only {
+      margin-right: 0;
+    }
+  }
+
+  &.weui-btn_default {
+    .weui-mask-loading {
+      color: #606060;
+    }
+  }
+
+  .weui-loading {
+    font-size: 20px;
+    margin: -0.2em 4px 0 0;
   }
   .weui-primary-loading {
-    margin: -0.2em 8px 0 0;
+    font-size: 20px;
+    margin: -0.2em 4px 0 0;
     vertical-align: middle;
     color: currentColor;
     &::before {
       content: "";
     }
   }
-  &.weui-btn_primary {
-    color: var(--weui-WHITE);
-  }
 }
+
diff --git a/src/style/widget/weui-button/weui-btn_overlay.less b/src/style/widget/weui-button/weui-btn_overlay.less
@@ -16,10 +16,35 @@
 
 @import "../../base/fn";
 
+
 .weui-btn_overlay {
-  color: var(--weui-BRAND);
-  background-color: @LIGHT_BG_5;
-  &:not(.weui-btn_disabled):visited {
-    color: var(--weui-BRAND);
+  &.weui-btn_primary {
+    color: @LIGHT_FG_0;
+    background-color: #fff;
+    &:not(.weui-btn_disabled):visited {
+      color: @LIGHT_FG_0;
+    }
+  }
+
+  &.weui-btn_default {
+    color: #fff;
+    background-color: rgba(247, 247, 247, 0.3);
+    &:not(.weui-btn_disabled):visited {
+      color: #fff;
+    }
+  }
+
+  &.weui-btn_warn {
+    color: #fff;
+    background-color: var(--weui-RED-100);
+    &:not(.weui-btn_disabled):visited {
+      color: #fff;
+    }
+  }
+
+  &.weui-btn_disabled,
+  &[disabled] {
+    color: rgba(247, 247, 247, 0.3);
+    background-color: rgba(255, 255, 255, 0.3);
   }
 }
diff --git a/src/style/widget/weui-button/weui-btn_primary.less b/src/style/widget/weui-button/weui-btn_primary.less
@@ -17,8 +17,8 @@
 @import "../../base/fn";
 
 .weui-btn_primary {
-  background-color: @weuiBtnPrimaryBg;
+  background-color: var(--weui-BRAND);
   &:not(.weui-btn_disabled):visited {
-    color: @weuiBtnPrimaryFontColor;
+    color: #fff;
   }
 }
diff --git a/src/style/widget/weui-button/weui-btn_warn.less b/src/style/widget/weui-button/weui-btn_warn.less
@@ -17,9 +17,8 @@
 @import "../../base/fn";
 
 .weui-btn_warn {
-  color: @weuiBtnWarnFontColor;
-  background-color: @weuiBtnWarnBg;
+  background-color: var(--weui-RED-100);
   &:not(.weui-btn_disabled):visited {
-    color: @weuiBtnWarnFontColor;
+    color: #fff;
   }
 }
diff --git a/src/style/widget/weui-cell/weui-cell_global.less b/src/style/widget/weui-cell/weui-cell_global.less
@@ -109,19 +109,6 @@ z-index:
 .weui-cell_primary {
   align-items: flex-start;
 }
-.weui-cell_vertical {
-  flex-direction: column;
-  align-items: flex-start;
-
-  .weui-cell__hd {
-    padding-right: 0;
-    margin-bottom: 12px;
-  }
-  .weui-cell__hd,
-  .weui-cell__bd {
-    width: 100%;
-  }
-}
 .weui-cell__bd {
   flex: 1;
   min-width: 0;

diff --git a/src/style/widget/weui-cell/weui-cells__group.less b/src/style/widget/weui-cell/weui-cells__group.less
@@ -48,13 +48,28 @@ body {
       left: var(--weui-cellPaddingLR);
       right: var(--weui-cellPaddingLR);
     }
-    &:not(.weui-cell_vertical) {
-      .weui-cell__hd {
-        padding-right: 16px;
-      }
-      .weui-cell__ft {
-        padding-left: 16px;
-      }
+    .weui-cell__hd {
+      padding-right: 16px;
+    }
+    .weui-cell__ft {
+      padding-left: 16px;
+    }
+  }
+
+  .weui-cell_vertical {
+    flex-direction: column;
+    align-items: flex-start;
+
+    .weui-cell__hd {
+      padding-right: 0;
+      margin-bottom: 12px;
+    }
+    .weui-cell__ft {
+      padding-left: 0;
+    }
+    .weui-cell__hd,
+    .weui-cell__bd {
+      width: 100%;
     }
   }
 

diff --git a/src/style/widget/weui-tips/weui-mask.less b/src/style/widget/weui-tips/weui-mask.less
@@ -23,7 +23,7 @@
   right: 0;
   left: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.5);
 }
 
 .weui-mask_transparent {