feat: v2.6.15

Tencent · Jul 24, 2024 · dedfd71 · dedfd71
1 parent 015583c
commit dedfd71
Show file tree

Hide file tree

Showing 14 changed files with 268 additions and 70 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,19 @@
+### v2.6.15 (2024-07-23)
+
+#### Bugfixes
+* fix: iOS 18的PingFang字体font-weight开始支持bold，涉及到的组件需要把bold改为medium
+
+
+
+### v2.6.14 (2024-07-23)
+
+#### Features
+* feat: 表单weui-form__tips和weui-agree UI更新，新增weui-form-tips__group和weui-form-tips__wrp结构
+* feat: checkbox图标更新
+* feat: weui-form多选/单选组件disabled态UI更新
+
+
+
 ### v2.6.13 (2024-06-03)
 
 #### Bugfixes

diff --git a/dist/example/index.html b/dist/example/index.html
@@ -1482,7 +1482,7 @@ <h2 class="weui-form__title">验证码</h2>
         </div>
       </div>
     </div>
-    <div class="weui-form__ft">
+    <div style="display: none;" class="weui-form__ft">
       <div class="weui-form__tips-area">
         <label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree weui-wa-hotarea">
           <input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
@@ -1493,6 +1493,26 @@ <h2 class="weui-form__title">验证码</h2>
         <button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
       </div>
     </div>
+    <div class="weui-form__ft">
+      <div class="weui-form__tips-area">
+        <div class="weui-form__tips__group weui-form__tips__group_primary">
+          <div class="weui-form__tips__wrp">
+            <label id="weuiAgree1" for="weuiAgreeCheckbox1" class="weui-agree weui-wa-hotarea">
+              <input id="weuiAgreeCheckbox1" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
+              </span>
+            </label>
+          </div>
+          <div class="weui-form__tips__wrp">
+            <label id="weuiAgree0" for="weuiAgreeCheckbox0" class="weui-agree weui-wa-hotarea">
+              <input id="weuiAgreeCheckbox0" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">以上信息用于核对账号绑定的身份</span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="weui-form__opr-area">
+        <button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
+      </div>
+    </div>
   </div>
   <div role="alert" id="js_toast" style="display: none;">
       <div class="weui-mask_transparent"></div>
@@ -2765,9 +2785,19 @@ <h1 class="page__title">Half-screen Dialog</h1>
                   </div>
                 </div>
                 <div class="weui-half-screen-dialog__bd">
-                  <br>
-                  可放自定义内容
-                  <br>
+                  <div class="weui-form__tips__group">
+                    <div class="weui-form__tips__wrp">
+                      <label id="weuiAgree1" for="weuiAgreeCheckbox1" class="weui-agree weui-wa-hotarea">
+                        <input id="weuiAgreeCheckbox1" type="checkbox" class="weui-agree__checkbox"><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
+                        </span>
+                      </label>
+                    </div>
+                    <div class="weui-form__tips__wrp">
+                      <label id="weuiAgree0" for="weuiAgreeCheckbox0" class="weui-agree weui-wa-hotarea">
+                        <input id="weuiAgreeCheckbox0" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">以上信息用于核对账号绑定的身份</span>
+                      </label>
+                    </div>
+                  </div>
                 </div>
                 <div class="weui-half-screen-dialog__ft">
                   <div id="js_wrap_btn_area" class="weui-half-screen-dialog__btn-area">

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.13",
+    "version": "2.6.15",
     "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/form/form_vcode.html b/src/example/form/form_vcode.html
@@ -34,7 +34,7 @@ <h2 class="weui-form__title">验证码</h2>
         </div>
       </div>
     </div>
-    <div class="weui-form__ft">
+    <div style="display: none;" class="weui-form__ft">
       <div class="weui-form__tips-area">
         <label id="weuiAgree" for="weuiAgreeCheckbox" class="weui-agree weui-wa-hotarea">
           <input id="weuiAgreeCheckbox" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
@@ -45,6 +45,26 @@ <h2 class="weui-form__title">验证码</h2>
         <button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
       </div>
     </div>
+    <div class="weui-form__ft">
+      <div class="weui-form__tips-area">
+        <div class="weui-form__tips__group weui-form__tips__group_primary">
+          <div class="weui-form__tips__wrp">
+            <label id="weuiAgree1" for="weuiAgreeCheckbox1" class="weui-agree weui-wa-hotarea">
+              <input id="weuiAgreeCheckbox1" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
+              </span>
+            </label>
+          </div>
+          <div class="weui-form__tips__wrp">
+            <label id="weuiAgree0" for="weuiAgreeCheckbox0" class="weui-agree weui-wa-hotarea">
+              <input id="weuiAgreeCheckbox0" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">以上信息用于核对账号绑定的身份</span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div class="weui-form__opr-area">
+        <button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
+      </div>
+    </div>
   </div>
   <div role="alert" id="js_toast" style="display: none;">
       <div class="weui-mask_transparent"></div>

diff --git a/src/example/half-screen-dialog/half-screen-dialog.html b/src/example/half-screen-dialog/half-screen-dialog.html
@@ -111,9 +111,19 @@ <h1 class="page__title">Half-screen Dialog</h1>
                   </div>
                 </div>
                 <div class="weui-half-screen-dialog__bd">
-                  <br>
-                  可放自定义内容
-                  <br>
+                  <div class="weui-form__tips__group">
+                    <div class="weui-form__tips__wrp">
+                      <label id="weuiAgree1" for="weuiAgreeCheckbox1" class="weui-agree weui-wa-hotarea">
+                        <input id="weuiAgreeCheckbox1" type="checkbox" class="weui-agree__checkbox"><span class="weui-agree__text">阅读并同意<a href="/example/" target="_blank">《相关条款》</a>
+                        </span>
+                      </label>
+                    </div>
+                    <div class="weui-form__tips__wrp">
+                      <label id="weuiAgree0" for="weuiAgreeCheckbox0" class="weui-agree weui-wa-hotarea">
+                        <input id="weuiAgreeCheckbox0" type="checkbox" class="weui-agree__checkbox"/><span class="weui-agree__text">以上信息用于核对账号绑定的身份</span>
+                      </label>
+                    </div>
+                  </div>
                 </div>
                 <div class="weui-half-screen-dialog__ft">
                   <div id="js_wrap_btn_area" class="weui-half-screen-dialog__btn-area">

diff --git a/src/style/widget/weui-agree/weui-agree.less b/src/style/widget/weui-agree/weui-agree.less
@@ -20,7 +20,7 @@
   display: inline-flex;
   vertical-align: bottom;
   max-width: 100%;
-  text-align: justify;
+  text-align: left;
   .hyphens;
 
   line-height: 1.4;
@@ -34,10 +34,16 @@
   navigator {
     display: inline;
   }
+
+  &.weui-wa-hotarea {
+    &::after {
+      min-height: 36px;
+    }
+  }
 }
 .weui-agree__text {
   color: @weuiTextColorDesc;
-  margin-left: 2px;
+  margin-left: 4px;
   min-width: 0;
 }
 .weui-agree__checkbox {
@@ -46,17 +52,28 @@
   border: 0;
   outline: 0;
   vertical-align: middle;
-  background-color: currentColor;
-  mask-position: 50% 50%;
-  mask-repeat: no-repeat;
-  mask-size: 100%;
-  mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
-  color: @weuiLineColorDark;
   width: 1em;
-  height: calc(1em * (14 * 1.4 / 17));
-  font-size: 17px;
+  height: calc(1em * (14 * 1.4 / 20));
+  font-size: 20px;
   flex-shrink: 0;
   margin-top: 0;
+  mask: none;
+  background: transparent url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.1' y='0.6' width='22.8' height='22.8' rx='11.4' stroke='black' stroke-opacity='0.3' style='stroke:black;stroke-opacity:0.3;' stroke-width='1.2'/%3E%3C/svg%3E%0A") 50% 50% no-repeat;
+  background-size: 100% 1em;
+
+  .dark({
+    background-image:url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.1' y='0.6' width='22.8' height='22.8' rx='11.4' stroke='white' stroke-opacity='0.3' style='stroke:white;stroke-opacity:0.3;' stroke-width='1.2'/%3E%3C/svg%3E%0A");
+  });
+
+  &[disabled] {
+    opacity: 0.3;
+  }
+}
+
+@supports (-webkit-overflow-scrolling:touch) {
+  .weui-agree__checkbox {
+    margin-top: -0.05em;
+  }
 }
 .weui-agree__checkbox-check { // 兼容小程序
   opacity: 0;
@@ -67,8 +84,11 @@
 }
 .weui-agree__checkbox:checked,
 .weui-agree__checkbox-check[aria-checked="true"] + .weui-agree__checkbox {
-  mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
   color: @weuiColorPrimary;
+  background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' width='24' height='24' rx='12' fill='%2307C160' style='fill:%2307C160;fill:color(display-p3 0.0275 0.7569 0.3765);fill-opacity:1;'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2712 16.2899L6.5 12.5187L7.44281 11.5759L10.7426 14.8757L18.2851 7.33325L19.2279 8.27606L11.214 16.2899C10.9537 16.5503 10.5316 16.5503 10.2712 16.2899Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A");
+  .dark({
+    background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' width='24' height='24' rx='12' fill='%2307C160' style='fill:%2307C160;fill:color(display-p3 0.0275 0.7569 0.3765);fill-opacity:1;'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2712 16.2899L6.5 12.5187L7.44281 11.5759L10.7426 14.8757L18.2851 7.33325L19.2279 8.27606L11.214 16.2899C10.9537 16.5503 10.5316 16.5503 10.2712 16.2899Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A");
+  });
 }
 .weui-agree_warn {
   .weui-agree__text {

diff --git a/src/style/widget/weui-cell/weui-cells__group.less b/src/style/widget/weui-cell/weui-cells__group.less
@@ -93,7 +93,7 @@ body {
     padding: 0 ~"calc(var(--weui-cellMarginLR) + var(--weui-cellPaddingLR))";
     color: var(--weui-FG-2);
     a {
-      font-weight: 700;
+      font-weight: 500;
     }
   }
   .weui-cells__tips_warn {

diff --git a/src/style/widget/weui-cell/weui-check/weui-check_common.less b/src/style/widget/weui-cell/weui-check/weui-check_common.less
@@ -20,7 +20,7 @@
   .setTapColor();
   &.weui-cell_readonly,
   &.weui-cell_disabled {
-    color: var(--weui-FG-3);
+    color: var(--weui-FG-2);
   }
 }
 
@@ -31,6 +31,6 @@
   height: 0;
   overflow: hidden;
   &[disabled] + .weui-icon-checked {
-    opacity: 0.1;
+    opacity: 0.3;
   }
 }
diff --git a/src/style/widget/weui-cell/weui-check/weui-checkbox.less b/src/style/widget/weui-cell/weui-check/weui-checkbox.less
@@ -25,8 +25,12 @@
     font-size: 0;
   }
   .weui-icon-checked {
-    color: @weuiTextColorTips;
-    mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%221000%22%20height%3D%221000%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M500%20916.667C269.881%20916.667%2083.333%20730.119%2083.333%20500%2083.333%20269.881%20269.881%2083.333%20500%2083.333c230.119%200%20416.667%20186.548%20416.667%20416.667%200%20230.119-186.548%20416.667-416.667%20416.667zm0-50c202.504%200%20366.667-164.163%20366.667-366.667%200-202.504-164.163-366.667-366.667-366.667-202.504%200-366.667%20164.163-366.667%20366.667%200%20202.504%20164.163%20366.667%20366.667%20366.667z%22%20fill-rule%3D%22evenodd%22%20fill-opacity%3D%22.9%22%2F%3E%3C%2Fsvg%3E);
+    mask: none;
+    background: transparent url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.1' y='0.6' width='22.8' height='22.8' rx='11.4' stroke='black' stroke-opacity='0.3' style='stroke:black;stroke-opacity:0.3;' stroke-width='1.2'/%3E%3C/svg%3E%0A") 50% 50% no-repeat;
+    background-size: 100% 2.4em;
+    .dark({
+      background-image:url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.1' y='0.6' width='22.8' height='22.8' rx='11.4' stroke='white' stroke-opacity='0.3' style='stroke:white;stroke-opacity:0.3;' stroke-width='1.2'/%3E%3C/svg%3E%0A");
+    });
   }
 }
 
@@ -37,8 +41,10 @@
     &:checked,
     &[aria-checked="true"] {
       & + .weui-icon-checked {
-        color: @weuiColorPrimary;
-        mask-image: url(data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%2022C6.477%2022%202%2017.523%202%2012S6.477%202%2012%202s10%204.477%2010%2010-4.477%2010-10%2010zm-1.177-7.86l-2.765-2.767L7%2012.431l3.119%203.121a1%201%200%20001.414%200l5.952-5.95-1.062-1.062-5.6%205.6z%22%2F%3E%3C%2Fsvg%3E);
+        background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' width='24' height='24' rx='12' fill='%2307C160' style='fill:%2307C160;fill:color(display-p3 0.0275 0.7569 0.3765);fill-opacity:1;'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2712 16.2899L6.5 12.5187L7.44281 11.5759L10.7426 14.8757L18.2851 7.33325L19.2279 8.27606L11.214 16.2899C10.9537 16.5503 10.5316 16.5503 10.2712 16.2899Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A");
+        .dark({
+          background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' width='24' height='24' rx='12' fill='%2307C160' style='fill:%2307C160;fill:color(display-p3 0.0275 0.7569 0.3765);fill-opacity:1;'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2712 16.2899L6.5 12.5187L7.44281 11.5759L10.7426 14.8757L18.2851 7.33325L19.2279 8.27606L11.214 16.2899C10.9537 16.5503 10.5316 16.5503 10.2712 16.2899Z' fill='white' style='fill:white;fill-opacity:1;'/%3E%3C/svg%3E%0A");
+        });
       }
     }
   }

diff --git a/src/style/widget/weui-page/weui-form.less b/src/style/widget/weui-page/weui-form.less
@@ -77,13 +77,33 @@
 }
 .weui-form__title {
   font-size: 22px;
-  font-weight: 700;
+  font-weight: 500;
   line-height: 1.36;
 }
 .weui-form__desc {
   font-size: 17px;
   margin-top: 16px;
 }
+.weui-form__tips__group {
+  display: flex;
+  flex-direction: column;
+}
+.weui-form__tips__group_primary {
+  display: inline-flex;
+  max-width: 100%;
+}
+.weui-form__tips__wrp {
+  display: inline-flex;
+  text-align: left;
+  margin: 8px 0;
+
+  &:first-child {
+    margin-top: 0;
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
 .weui-form__tips {
   color: @weuiTextColorDesc;
   font-size: 14px;

diff --git a/src/style/widget/weui-tips/weui-dialog.less b/src/style/widget/weui-tips/weui-dialog.less
@@ -39,7 +39,7 @@
   padding: 32px @weuiDialogGapWidth 16px;
 }
 .weui-dialog__title {
-  font-weight: 700;
+  font-weight: 500;
   font-size: 17px;
   line-height: 1.4;
   color: var(--weui-FG-0);
@@ -57,7 +57,7 @@
   &:first-child {
     min-height: 40px;
     padding: 32px @weuiDialogGapWidth 0;
-    font-weight: 700;
+    font-weight: 500;
     color: @weuiTextColorTitle;
     display: -webkit-box;
     display: -webkit-flex;
@@ -84,7 +84,7 @@
   padding: 16px 0;
   font-size: 17px;
   color: @weuiDialogLinkColor;
-  font-weight: 700;
+  font-weight: 500;
   text-decoration: none;
   .setTapColor();
 

diff --git a/src/style/widget/weui-tips/weui-half-screen-dialog.less b/src/style/widget/weui-tips/weui-half-screen-dialog.less
@@ -102,7 +102,7 @@
 }
 .weui-half-screen-dialog__desc {
   font-size: 17px;
-  font-weight: 700;
+  font-weight: 500;
   color: var(--weui-FG-0);
   line-height: 1.4;
 }