Merge pull request #175 from Tencent/develop

weui-wxss v2.5.2

CHANGELOG.md

+### v2.5.2 (2021-11-29)
+
+#### Features
+* feat: 升级article组件UI
+* feat: 底部悬浮按钮、半屏弹窗按钮支持垂直布局
+* feat: 新增transition模态显示动画
+
+#### Bugfixes
+* fix: 表单组件验证码同意协议复选框优化无障碍体验
+* fix: navigation组件返回按钮热区不足44px
+* fix: 调整gallery组件底部安全间距、删除按钮增加点击态
+* fix: 修复小程序slideview按钮宽度问题
+* fix: actionsheet组件适配刘海屏
+* fix: a11y热区去掉冗余背景声明
+* fix: 修复图标按钮整合
+* fix: 表单同意协议居中布局
+* fix: 提高weui icon组件的选择器权重，用来规避和weui-icon混搭使用的权重问题
+
+
+
+### v2.5.1 (2021-10-11)
+
+#### Features
+* feat: 新增关怀模式色板
+* feat: 半屏弹窗组件UI升级
+* feat: 升级按钮loading UI
+* feat: msg组件标题字重调整
+* feat: article新增无障碍整合焦点例子
+
+
 ### v2.5.0 (2021-09-17)
 
 #### Features

dist-rpx-mode/app.js

 require('./libs/Mixins.js');
 
-const themeListeners = [];
+const listeners = [];
 
 App({
-    globalData: {
-        theme: 'light', // dark
-    },
-    themeChanged(theme) {
-        this.globalData.theme = theme;
-        themeListeners.forEach((listener) => {
-            listener(theme);
-        });
-    },
-    watchThemeChange(listener) {
-        if (themeListeners.indexOf(listener) < 0) {
-            themeListeners.push(listener);
-        }
-    },
-    unWatchThemeChange(listener) {
-        const index = themeListeners.indexOf(listener);
-        if (index > -1) {
-            themeListeners.splice(index, 1);
-        }
-    },
-});
\ No newline at end of file
+  globalData: {
+    theme: 'light', // dark
+    mode: '', // 模式(care：关怀模式)
+  },
+  changeGlobalData(data) {
+    this.globalData = Object.assign({}, this.globalData, data);
+    listeners.forEach((listener) => {
+      listener(this.globalData);
+    });
+  },
+  watchGlobalDataChanged(listener) {
+    if (listeners.indexOf(listener) < 0) {
+      listeners.push(listener);
+    }
+  },
+  unWatchGlobalDataChanged(listener) {
+    const index = listeners.indexOf(listener);
+    if (index > -1) {
+      listeners.splice(index, 1);
+    }
+  },
+  onThemeChange(resp) {
+    this.changeGlobalData({
+      theme: resp.theme,
+    });
+  },
+  onLaunch() {
+    // TODO: 检测适老化
+  },
+});

dist-rpx-mode/example/actionsheet/actionsheet.js

 Page({
-    mixins: [require('../../mixin/themeChanged')],
-    data: {
-        showIOSDialog: false,
-        showAndroidDialog: false,
-    },
-    close: function() {
-        this.setData({
-            showIOSDialog: false,
-            showAndroidDialog: false
-        });
-    },
-    openIOS: function () {
-        this.setData({
-            showIOSDialog: true
-        });
-    },
-    openAndroid: function () {
-        this.setData({
-            showAndroidDialog: true
-        });
-    }
+  mixins: [require('../../mixin/common')],
+  data: {
+    showIOSDialog: false,
+    showAndroidDialog: false,
+  },
+  close() {
+    this.setData({
+      showIOSDialog: false,
+      showAndroidDialog: false,
+    });
+  },
+  openIOS() {
+    this.setData({
+      showIOSDialog: true,
+    });
+  },
+  openAndroid() {
+    this.setData({
+      showAndroidDialog: true,
+    });
+  },
 });

dist-rpx-mode/example/actionsheet/actionsheet.wxml

 <page-meta root-font-size="system"/>
-<view class="page" data-weui-theme="{{theme}}">
+<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
     <view aria-hidden="{{showIOSDialog || showAndroidDialog ? true : false}}" class="page__hd">
         <view class="page__title">ActionSheet</view>
         <view class="page__desc">弹出式菜单</view>

dist-rpx-mode/example/actionsheet/actionsheet.wxss

 /*!
- * WeUI v2.5.0 (https://github.com/weui/weui-wxss)
+ * WeUI v2.5.2 (https://github.com/weui/weui-wxss)
  * Copyright 2021 Tencent, Inc.
  * Licensed under the MIT license
  */

dist-rpx-mode/example/article/article.js

 Page({
-    mixins: [require('../../mixin/themeChanged')],
-});
\ No newline at end of file
+  mixins: [require('../../mixin/common')],
+});

dist-rpx-mode/example/article/article.wxml

 <page-meta root-font-size="system"/>
-<view class="page" data-weui-theme="{{theme}}">
-    <view class="page__hd">
-        <view class="page__title">Article</view>
-        <view class="page__desc">文章</view>
-    </view>
-    <view class="page__bd">
-        <view class="weui-article">
-            <view class="weui-article__h1">大标题</view>
-            <view class="weui-article__section">
-                <view class="weui-article__h2">章标题</view>
-                <view class="weui-article__section">
-                    <view class="weui-article__h3">1.1 节标题</view>
-                    <view class="weui-article__p">
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-                        consequat.
-                    </view>
-                    <view class="weui-article__p">
-                        <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px" />
-                        <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px" />
-                    </view>
+<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
+  <view class="weui-article">
+      <view aria-role="heading" aria-level="4" class="weui-article__h1">大标题</view>
+      <view class="weui-article__section">
+          <view class="weui-article__h2">章标题</view>
+          <view class="weui-article__section">
+              <view class="weui-article__h3">1.1 节标题</view>
+              <view class="weui-article__p">
+                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+                  consequat.
+              </view>
+              <view class="weui-article__p">
+                  <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px;" />
+                  <image class="weui-article__img" src="../images/pic_article.png" mode="aspectFit" style="height: 180px;" />
+              </view>
+          </view>
+          <view class="weui-article__section">
+              <view class="weui-article__h3">1.2 节标题</view>
+              <view class="weui-article__section">
+                <view class="weui-article__h4">1.2.1 小节标题</view>
+                <view class="weui-article__p">
+                 <view class="weui-a11y-combo">
+                    <view class="weui-a11y-combo__helper" aria-labelledby="txt1 txt2" readonly aria-role="option"></view>
+                    <text id="txt1" class="weui-a11y-combo__content" aria-hidden="true">Lorem ipsum dolor sit amet, consectetur adipisicing elit</text>
+                    <navigator id="txt2" class="weui-a11y-combo__content weui-link weui-wa-hotarea">read more</navigator>
+                 </view>
                 </view>
-                <view class="weui-article__section">
-                    <view class="weui-article__h3">1.2 节标题</view>
-                    <view class="weui-article__p">
-                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
-                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-                    </view>
+              </view>
+              <view class="weui-article__section">
+                <view class="weui-article__h4">1.2.1 小节标题</view>
+                <view class="weui-article__p">
+                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                 </view>
-            </view>
-        </view>
-    </view>
+              </view>
+          </view>
+      </view>
+  </view>
 </view>

dist-rpx-mode/example/article/article.wxss

 /*!
- * WeUI v2.5.0 (https://github.com/weui/weui-wxss)
+ * WeUI v2.5.2 (https://github.com/weui/weui-wxss)
  * Copyright 2021 Tencent, Inc.
  * Licensed under the MIT license
  */

dist-rpx-mode/example/badge/badge.js

 Page({
-    mixins: [require('../../mixin/themeChanged')],
-});
\ No newline at end of file
+  mixins: [require('../../mixin/common')],
+});

dist-rpx-mode/example/badge/badge.wxml

 <page-meta root-font-size="system"/>
-<view class="page" data-weui-theme="{{theme}}">
+<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
 	<view class="page__hd">
 		<view class="page__title">Badge</view>
 		<view class="page__desc">徽章</view>

dist-rpx-mode/example/badge/badge.wxss

 /*!
- * WeUI v2.5.0 (https://github.com/weui/weui-wxss)
+ * WeUI v2.5.2 (https://github.com/weui/weui-wxss)
  * Copyright 2021 Tencent, Inc.
  * Licensed under the MIT license
  */

dist-rpx-mode/example/button/button.js

 Page({
-    mixins: [require('../../mixin/themeChanged')],
-    openDefault: function () {
-        wx.navigateTo({
-            url: 'button_default'
-        })
-    },
-    openBottomfixed: function () {
-        wx.navigateTo({
-            url: 'button_bottom_fixed'
-        })
-    },
+  mixins: [require('../../mixin/common')],
+  openDefault() {
+    wx.navigateTo({
+      url: 'button_default',
+    });
+  },
+  openBottomfixed() {
+    wx.navigateTo({
+      url: 'button_bottom_fixed',
+    });
+  },
 });

dist-rpx-mode/example/button/button.wxml

 <page-meta root-font-size="system"/>
-<view class="page" data-weui-theme="{{theme}}">
+<view class="page" data-weui-theme="{{theme}}" data-weui-mode="{{mode}}">
     <view class="page__hd">
         <view class="page__title">Button</view>
         <view class="page__desc">按钮</view>
     </view>
     <view class="page__bd">
         <view class="weui-btn-area">
-            <view aria-role="button" class="weui-btn weui-btn_default" bindtap="openDefault">普通按钮</view>
-            <view aria-role="button" class="weui-btn weui-btn_default" bindtap="openBottomfixed">底部悬浮按钮</view>
+            <view aria-role="button" class="weui-btn weui-btn_default" bindtap="openDefault">普通型</view>
+            <view aria-role="button" class="weui-btn weui-btn_default" bindtap="openBottomfixed">底部悬浮型</view>
         </view>
     </view>
 </view>

dist-rpx-mode/example/button/button.wxss

 /*!
- * WeUI v2.5.0 (https://github.com/weui/weui-wxss)
+ * WeUI v2.5.2 (https://github.com/weui/weui-wxss)
  * Copyright 2021 Tencent, Inc.
  * Licensed under the MIT license
  */

dist-rpx-mode/example/button/button_bottom_fixed.js

 Page({
-    mixins: [require('../../mixin/themeChanged')],
-});
\ No newline at end of file
+  mixins: [require('../../mixin/common')],
+  data: {
+    wrap: false,
+  },
+  onShow() {
+    wx.createSelectorQuery().select('#js_btn')
+      .boundingClientRect((rect) => {
+        if (rect.height > 48) {