faet: v2.6.18

Tencent · Oct 31, 2024 · bec0867 · bec0867
1 parent 8f1fae3
commit bec0867
Show file tree

Hide file tree

Showing 11 changed files with 258 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,23 @@
+### v2.6.18 (2024-10-31)
+
+#### Features
+* feat: half-screen-dialog组件头部区域新增weui-half-screen-dialog__hd__action-group结构（用于存放左右上角的操作列表）
+* feat: half-screen-dialog组件升级拖拽杆样式，新增half-screen-dialog_grab场景
+
+#### Bugfixes
+* fix: 表单weui-label支持英文词间折行加破折号
+* fix: 表单weui-cell支持顶部对齐 
+* fix: 修复weui-cell_access字体颜色继承问题
+
+
+
+### v2.6.17 (2024-10-16)
+
+#### Bugfixes
+* fix: 去掉小程序darkmode的媒体查询
+
+
+
 ### v2.6.16 (2024-08-12)
 
 #### Features

diff --git a/dist/example/index.html b/dist/example/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
     <meta name="wechat-enable-text-zoom-em" content="true">
     <title>WeUI</title>
-    <link rel="stylesheet" href="../style/weui.css"/>
+    <link rel="stylesheet" href="../style/weui.min.css"/>
     <link rel="stylesheet" href="./example.css"/>
 </head>
 <body ontouchstart>
@@ -1135,6 +1135,12 @@ <h2 class="weui-form__title">表单结构</h2>
                   <input id="js_input3" class="weui-input" placeholder="填写绑定的电话号码" type="number" pattern="[0-9]*" />
               </div>
             </label>
+            <label for="js_input4" class="weui-cell weui-cell_active weui-cell_primary">
+              <div class="weui-cell__hd"><span class="weui-label" lang="en">verification address</span></div>
+              <div class="weui-cell__bd">
+                <textarea class="weui-textarea" id="js_input4" placeholder="input your address" rows="3"></textarea>
+              </div>
+            </label>
           </div>
         </div>
       </div>
@@ -2712,6 +2718,13 @@ <h1 class="page__title">Half-screen Dialog</h1>
                     <strong class="weui-half-screen-dialog__title" id="js_title1">标题</strong>
                     <span class="weui-half-screen-dialog__subtitle">副标题</span>
                   </div>
+                  <div class="weui-half-screen-dialog__hd__side">
+                    <div class="weui-half-screen-dialog__hd__action-group">
+                      <button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">搜索<i class="weui-icon-search"></i></button>
+                      <button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>
+                      <a href="#" class="weui-half-screen-dialog__hd__action weui-link weui-wa-hotarea">完成</a>
+                    </div>
+                  </div>
                 </div>
                 <div class="weui-half-screen-dialog__bd">
                   <br>
@@ -2827,10 +2840,28 @@ <h1 class="page__title">Half-screen Dialog</h1>
         </div>
         <div id="dialogWrap5" class="js_dialog_wrap" ref="showDialog5" aria-labelledby="js_title5" role="dialog" aria-modal="false" aria-hidden="true" style="display: none;">
             <div id="js_close" class="js_close weui-mask"></div>
-            <div id="js_dialog_5" class="js_dialog weui-half-screen-dialog weui-half-screen-dialog_slide">
+            <div id="js_dialog_5" class="js_dialog weui-half-screen-dialog weui-half-screen-dialog_grab">
                 <div class="weui-half-screen-dialog__hd">
-                  <div id="js_line" class="weui-half-screen-dialog__slide-icon">
-                    <i id="js_arrow" class="weui-icon-arrow"></i>
+                  <div class="weui-half-screen-dialog__hd__grab">
+                    <div id="js_line" class="weui-half-screen-dialog__slide-icon">
+                      <i id="js_arrow" class="weui-icon-arrow"></i>
+                    </div>
+                  </div>
+
+                  <div class="weui-half-screen-dialog__hd__nav">
+                    <div class="weui-half-screen-dialog__hd__side">
+                      <button class="js_close weui-btn_icon weui-wa-hotarea">关闭<i class="weui-icon-slide-down"></i></button>
+                    </div>
+                    <div class="weui-half-screen-dialog__hd__main">
+                      <strong class="weui-half-screen-dialog__title" id="js_title2">标题</strong>
+                    </div>
+                    <div class="weui-half-screen-dialog__hd__side">
+                      <div class="weui-half-screen-dialog__hd__action-group">
+                        <button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">搜索<i class="weui-icon-search"></i></button>
+                        <button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>
+                        <button class="weui-half-screen-dialog__hd__action weui-btn weui-btn_primary weui-btn_xmini">完成</button>
+                      </div>
+                    </div>
                   </div>
                 </div>
                 <div class="weui-half-screen-dialog__bd">

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.16",
+    "version": "2.6.18",
     "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_page.html b/src/example/form/form_page.html
@@ -27,6 +27,12 @@ <h2 class="weui-form__title">表单结构</h2>
                   <input id="js_input3" class="weui-input" placeholder="填写绑定的电话号码" type="number" pattern="[0-9]*" />
               </div>
             </label>
+            <label for="js_input4" class="weui-cell weui-cell_active weui-cell_primary">
+              <div class="weui-cell__hd"><span class="weui-label" lang="en">verification address</span></div>
+              <div class="weui-cell__bd">
+                <textarea class="weui-textarea" id="js_input4" placeholder="input your address" rows="3"></textarea>
+              </div>
+            </label>
           </div>
         </div>
       </div>

diff --git a/src/example/half-screen-dialog/half-screen-dialog.html b/src/example/half-screen-dialog/half-screen-dialog.html
@@ -23,6 +23,13 @@ <h1 class="page__title">Half-screen Dialog</h1>
                     <strong class="weui-half-screen-dialog__title" id="js_title1">标题</strong>
                     <span class="weui-half-screen-dialog__subtitle">副标题</span>
                   </div>
+                  <div class="weui-half-screen-dialog__hd__side">
+                    <div class="weui-half-screen-dialog__hd__action-group">
+                      <button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">搜索<i class="weui-icon-search"></i></button>
+                      <button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>
+                      <a href="#" class="weui-half-screen-dialog__hd__action weui-link weui-wa-hotarea">完成</a>
+                    </div>
+                  </div>
                 </div>
                 <div class="weui-half-screen-dialog__bd">
                   <br>
@@ -138,10 +145,28 @@ <h1 class="page__title">Half-screen Dialog</h1>
         </div>
         <div id="dialogWrap5" class="js_dialog_wrap" ref="showDialog5" aria-labelledby="js_title5" role="dialog" aria-modal="false" aria-hidden="true" style="display: none;">
             <div id="js_close" class="js_close weui-mask"></div>
-            <div id="js_dialog_5" class="js_dialog weui-half-screen-dialog weui-half-screen-dialog_slide">
+            <div id="js_dialog_5" class="js_dialog weui-half-screen-dialog weui-half-screen-dialog_grab">
                 <div class="weui-half-screen-dialog__hd">
-                  <div id="js_line" class="weui-half-screen-dialog__slide-icon">
-                    <i id="js_arrow" class="weui-icon-arrow"></i>
+                  <div class="weui-half-screen-dialog__hd__grab">
+                    <div id="js_line" class="weui-half-screen-dialog__slide-icon">
+                      <i id="js_arrow" class="weui-icon-arrow"></i>
+                    </div>
+                  </div>
+
+                  <div class="weui-half-screen-dialog__hd__nav">
+                    <div class="weui-half-screen-dialog__hd__side">
+                      <button class="js_close weui-btn_icon weui-wa-hotarea">关闭<i class="weui-icon-slide-down"></i></button>
+                    </div>
+                    <div class="weui-half-screen-dialog__hd__main">
+                      <strong class="weui-half-screen-dialog__title" id="js_title2">标题</strong>
+                    </div>
+                    <div class="weui-half-screen-dialog__hd__side">
+                      <div class="weui-half-screen-dialog__hd__action-group">
+                        <button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">搜索<i class="weui-icon-search"></i></button>
+                        <button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>
+                        <button class="weui-half-screen-dialog__hd__action weui-btn weui-btn_primary weui-btn_xmini">完成</button>
+                      </div>
+                    </div>
                   </div>
                 </div>
                 <div class="weui-half-screen-dialog__bd">

diff --git a/src/example/index.html b/src/example/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
     <meta name="wechat-enable-text-zoom-em" content="true">
     <title>WeUI</title>
-    <link rel="stylesheet" href="../style/weui.css"/>
+    <link rel="stylesheet" href="../style/weui.min.css"/>
     <link rel="stylesheet" href="./example.css"/>
 </head>
 <body ontouchstart>

diff --git a/src/style/widget/weui-cell/weui-access.less b/src/style/widget/weui-cell/weui-access.less
@@ -19,7 +19,6 @@
 .weui-cell_access {
   .setTapColor();
 
-  color: inherit;
   &:active {
     &::after {
       content: "";

diff --git a/src/style/widget/weui-cell/weui-form/weui-form_common.less b/src/style/widget/weui-cell/weui-form/weui-form_common.less
@@ -19,7 +19,7 @@
 .weui-label {
   display: block;
   width: @weuiCellLabelWidth;
-  .text_wrap();
+  .hyphens();
 }
 .weui-input {
   width: 100%;

diff --git a/src/style/widget/weui-tips/weui-half-screen-dialog.less b/src/style/widget/weui-tips/weui-half-screen-dialog.less
@@ -56,6 +56,29 @@
     color: inherit;
     &:active { opacity: 0.5; }
   }
+  .weui-half-screen-dialog__hd__action-group {
+    position: absolute;
+    top: 50%;
+    white-space: nowrap;
+    -webkit-transform: translateY(-50%);
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+  }
+
+  .weui-half-screen-dialog__hd__action {
+    margin-right: 16px;
+    position: static;
+    transform: none;
+
+    &.weui-wa-hotarea {
+      position: relative;
+    }
+
+    &.weui-link {
+      font-size: 15px;
+    }
+  }
 }
 .weui-half-screen-dialog__hd__side {
   position: relative;
@@ -70,6 +93,15 @@
   & + .weui-half-screen-dialog__hd__side {
     right: -8px;
     left: auto;
+
+    .weui-half-screen-dialog__hd__action-group {
+      right: 0;
+    }
+    .weui-half-screen-dialog__hd__action {
+      margin-right: 0;
+      margin-left: 16px;
+    }
+
     //兼容老版本
     .weui-icon-btn,
     .weui-btn_icon {
@@ -136,37 +168,62 @@
   max-height: none;
   top: 16px;
 }
-.weui-half-screen-dialog_slide {
+
+// 按住下拉
+.weui-half-screen-dialog__slide-icon {
+  position: absolute;
+  top: 12px;
+  display: flex;
+  width: 40px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--weui-BG-0);
+  .dark({
+    background:var(--weui-FG-3);
+  });
+
+  justify-content: center;
+  align-items: center;
+
+  .weui-icon-arrow {
+    transform: rotate(90deg);
+    width: 0.8em;
+    height: 1.6em;
+    opacity: 0;
+  }
+}
+.weui-half-screen-dialog_grab {
   .weui-half-screen-dialog__hd {
+    box-sizing: border-box;
     min-height: 0;
+    flex-direction: column;
+  }
+  .weui-half-screen-dialog__hd__grab {
     padding: 12px 16px 16px;
+    display: flex;
     justify-content: center;
   }
-  .weui-half-screen-dialog__slide-icon {
-    position: absolute;
-    top: 12px;
+  .weui-half-screen-dialog__hd__grab,
+  .weui-half-screen-dialog__hd__nav {
+    width: 100%;
+  }
+  .weui-half-screen-dialog__hd__nav {
     display: flex;
-    width: 40px;
-    height: 4px;
-    border-radius: 2px;
-    background: var(--weui-BG-0);
-    .dark({
-      background:var(--weui-FG-3);
-    });
-
-    justify-content: center;
     align-items: center;
-
-    .weui-icon-arrow {
-      transform: rotate(90deg);
-      width: 0.8em;
-      height: 1.6em;
-      opacity: 0;
-    }
+    min-height: 64px;
+  }
+}
+// 兼容老版本
+.weui-half-screen-dialog_slide {
+  .weui-half-screen-dialog__hd {
+    min-height: 0;
+    padding: 12px 16px 16px;
+    justify-content: center;
   }
 }
 
 
+
 // 按钮组水平布局与垂直布局切换
 .weui-half-screen-dialog__btn-area {
   .weuiBtnWrapLayoutDefault();