Skip to content

Commit bec0867

Browse files
uxsiuxsi
committed
faet: v2.6.18
1 parent 8f1fae3 commit bec0867

File tree

11 files changed

+258
-49
lines changed

11 files changed

+258
-49
lines changed

‎CHANGELOG.md

+20
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
1+
### v2.6.18 (2024-10-31)
2+
3+
#### Features
4+
* feat: half-screen-dialog组件头部区域新增weui-half-screen-dialog__hd__action-group结构（用于存放左右上角的操作列表）
5+
* feat: half-screen-dialog组件升级拖拽杆样式，新增half-screen-dialog_grab场景
6+
7+
#### Bugfixes
8+
* fix: 表单weui-label支持英文词间折行加破折号
9+
* fix: 表单weui-cell支持顶部对齐
10+
* fix: 修复weui-cell_access字体颜色继承问题
11+
12+
13+
14+
### v2.6.17 (2024-10-16)
15+
16+
#### Bugfixes
17+
* fix: 去掉小程序darkmode的媒体查询
18+
19+
20+
121
### v2.6.16 (2024-08-12)
222

323
#### Features

‎dist/example/index.html

+35-4
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
66
<meta name="wechat-enable-text-zoom-em" content="true">
77
<title>WeUI</title>
8-
<link rel="stylesheet" href="../style/weui.css"/>
8+
<link rel="stylesheet" href="../style/weui.min.css"/>
99
<link rel="stylesheet" href="./example.css"/>
1010
</head>
1111
<body ontouchstart>
@@ -1135,6 +1135,12 @@ <h2 class="weui-form__title">表单结构</h2>
11351135
<input id="js_input3" class="weui-input" placeholder="填写绑定的电话号码" type="number" pattern="[0-9]*" />
11361136
</div>
11371137
</label>
1138+
<label for="js_input4" class="weui-cell weui-cell_active weui-cell_primary">
1139+
<div class="weui-cell__hd"><span class="weui-label" lang="en">verification address</span></div>
1140+
<div class="weui-cell__bd">
1141+
<textarea class="weui-textarea" id="js_input4" placeholder="input your address" rows="3"></textarea>
1142+
</div>
1143+
</label>
11381144
</div>
11391145
</div>
11401146
</div>
@@ -2712,6 +2718,13 @@ <h1 class="page__title">Half-screen Dialog</h1>
27122718
<strong class="weui-half-screen-dialog__title" id="js_title1">标题</strong>
27132719
<span class="weui-half-screen-dialog__subtitle">副标题</span>
27142720
</div>
2721+
<div class="weui-half-screen-dialog__hd__side">
2722+
<div class="weui-half-screen-dialog__hd__action-group">
2723+
<button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">搜索<i class="weui-icon-search"></i></button>
2724+
<button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>
2725+
<a href="#" class="weui-half-screen-dialog__hd__action weui-link weui-wa-hotarea">完成</a>
2726+
</div>
2727+
</div>
27152728
</div>
27162729
<div class="weui-half-screen-dialog__bd">
27172730
<br>
@@ -2827,10 +2840,28 @@ <h1 class="page__title">Half-screen Dialog</h1>
28272840
</div>
28282841
<div id="dialogWrap5" class="js_dialog_wrap" ref="showDialog5" aria-labelledby="js_title5" role="dialog" aria-modal="false" aria-hidden="true" style="display: none;">
28292842
<div id="js_close" class="js_close weui-mask"></div>
2830-
<div id="js_dialog_5" class="js_dialog weui-half-screen-dialog weui-half-screen-dialog_slide">
2843+
<div id="js_dialog_5" class="js_dialog weui-half-screen-dialog weui-half-screen-dialog_grab">
28312844
<div class="weui-half-screen-dialog__hd">
2832-
<div id="js_line" class="weui-half-screen-dialog__slide-icon">
2833-
<i id="js_arrow" class="weui-icon-arrow"></i>
2845+
<div class="weui-half-screen-dialog__hd__grab">
2846+
<div id="js_line" class="weui-half-screen-dialog__slide-icon">
2847+
<i id="js_arrow" class="weui-icon-arrow"></i>
2848+
</div>
2849+
</div>
2850+
2851+
<div class="weui-half-screen-dialog__hd__nav">
2852+
<div class="weui-half-screen-dialog__hd__side">
2853+
<button class="js_close weui-btn_icon weui-wa-hotarea">关闭<i class="weui-icon-slide-down"></i></button>
2854+
</div>
2855+
<div class="weui-half-screen-dialog__hd__main">
2856+
<strong class="weui-half-screen-dialog__title" id="js_title2">标题</strong>
2857+
</div>
2858+
<div class="weui-half-screen-dialog__hd__side">
2859+
<div class="weui-half-screen-dialog__hd__action-group">
2860+
<button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">搜索<i class="weui-icon-search"></i></button>
2861+
<button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>
2862+
<button class="weui-half-screen-dialog__hd__action weui-btn weui-btn_primary weui-btn_xmini">完成</button>
2863+
</div>
2864+
</div>
28342865
</div>
28352866
</div>
28362867
<div class="weui-half-screen-dialog__bd">

‎dist/style/weui.css

+87-16
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/style/weui.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "weui",
3-
"version": "2.6.16",
3+
"version": "2.6.18",
44
"description": "A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.",
55
"keywords": [
66
"weui",

‎src/example/form/form_page.html

+6
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ <h2 class="weui-form__title">表单结构</h2>
2727
<input id="js_input3" class="weui-input" placeholder="填写绑定的电话号码" type="number" pattern="[0-9]*" />
2828
</div>
2929
</label>
30+
<label for="js_input4" class="weui-cell weui-cell_active weui-cell_primary">
31+
<div class="weui-cell__hd"><span class="weui-label" lang="en">verification address</span></div>
32+
<div class="weui-cell__bd">
33+
<textarea class="weui-textarea" id="js_input4" placeholder="input your address" rows="3"></textarea>
34+
</div>
35+
</label>
3036
</div>
3137
</div>
3238
</div>

‎src/example/half-screen-dialog/half-screen-dialog.html

+28-3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ <h1 class="page__title">Half-screen Dialog</h1>
2323
<strong class="weui-half-screen-dialog__title" id="js_title1">标题</strong>
2424
<span class="weui-half-screen-dialog__subtitle">副标题</span>
2525
</div>
26+
<div class="weui-half-screen-dialog__hd__side">
27+
<div class="weui-half-screen-dialog__hd__action-group">
28+
<button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">搜索<i class="weui-icon-search"></i></button>
29+
<button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>
30+
<a href="#" class="weui-half-screen-dialog__hd__action weui-link weui-wa-hotarea">完成</a>
31+
</div>
32+
</div>
2633
</div>
2734
<div class="weui-half-screen-dialog__bd">
2835
<br>
@@ -138,10 +145,28 @@ <h1 class="page__title">Half-screen Dialog</h1>
138145
</div>
139146
<div id="dialogWrap5" class="js_dialog_wrap" ref="showDialog5" aria-labelledby="js_title5" role="dialog" aria-modal="false" aria-hidden="true" style="display: none;">
140147
<div id="js_close" class="js_close weui-mask"></div>
141-
<div id="js_dialog_5" class="js_dialog weui-half-screen-dialog weui-half-screen-dialog_slide">
148+
<div id="js_dialog_5" class="js_dialog weui-half-screen-dialog weui-half-screen-dialog_grab">
142149
<div class="weui-half-screen-dialog__hd">
143-
<div id="js_line" class="weui-half-screen-dialog__slide-icon">
144-
<i id="js_arrow" class="weui-icon-arrow"></i>
150+
<div class="weui-half-screen-dialog__hd__grab">
151+
<div id="js_line" class="weui-half-screen-dialog__slide-icon">
152+
<i id="js_arrow" class="weui-icon-arrow"></i>
153+
</div>
154+
</div>
155+
156+
<div class="weui-half-screen-dialog__hd__nav">
157+
<div class="weui-half-screen-dialog__hd__side">
158+
<button class="js_close weui-btn_icon weui-wa-hotarea">关闭<i class="weui-icon-slide-down"></i></button>
159+
</div>
160+
<div class="weui-half-screen-dialog__hd__main">
161+
<strong class="weui-half-screen-dialog__title" id="js_title2">标题</strong>
162+
</div>
163+
<div class="weui-half-screen-dialog__hd__side">
164+
<div class="weui-half-screen-dialog__hd__action-group">
165+
<button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">搜索<i class="weui-icon-search"></i></button>
166+
<button class="weui-half-screen-dialog__hd__action weui-btn_icon weui-wa-hotarea">更多<i class="weui-icon-more"></i></button>
167+
<button class="weui-half-screen-dialog__hd__action weui-btn weui-btn_primary weui-btn_xmini">完成</button>
168+
</div>
169+
</div>
145170
</div>
146171
</div>
147172
<div class="weui-half-screen-dialog__bd">

‎src/example/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
66
<meta name="wechat-enable-text-zoom-em" content="true">
77
<title>WeUI</title>
8-
<link rel="stylesheet" href="../style/weui.css"/>
8+
<link rel="stylesheet" href="../style/weui.min.css"/>
99
<link rel="stylesheet" href="./example.css"/>
1010
</head>
1111
<body ontouchstart>

‎src/style/widget/weui-cell/weui-access.less

-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
.weui-cell_access {
2020
.setTapColor();
2121

22-
color: inherit;
2322
&:active {
2423
&::after {
2524
content: "";

‎src/style/widget/weui-cell/weui-form/weui-form_common.less

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
.weui-label {
2020
display: block;
2121
width: @weuiCellLabelWidth;
22-
.text_wrap();
22+
.hyphens();
2323
}
2424
.weui-input {
2525
width: 100%;

‎src/style/widget/weui-tips/weui-half-screen-dialog.less

+77-20
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,29 @@
5656
color: inherit;
5757
&:active { opacity: 0.5; }
5858
}
59+
.weui-half-screen-dialog__hd__action-group {
60+
position: absolute;
61+
top: 50%;
62+
white-space: nowrap;
63+
-webkit-transform: translateY(-50%);
64+
transform: translateY(-50%);
65+
display: flex;
66+
align-items: center;
67+
}
68+
69+
.weui-half-screen-dialog__hd__action {
70+
margin-right: 16px;
71+
position: static;
72+
transform: none;
73+
74+
&.weui-wa-hotarea {
75+
position: relative;
76+
}
77+
78+
&.weui-link {
79+
font-size: 15px;
80+
}
81+
}
5982
}
6083
.weui-half-screen-dialog__hd__side {
6184
position: relative;
@@ -70,6 +93,15 @@
7093
& + .weui-half-screen-dialog__hd__side {
7194
right: -8px;
7295
left: auto;
96+
97+
.weui-half-screen-dialog__hd__action-group {
98+
right: 0;
99+
}
100+
.weui-half-screen-dialog__hd__action {
101+
margin-right: 0;
102+
margin-left: 16px;
103+
}
104+
73105
//兼容老版本
74106
.weui-icon-btn,
75107
.weui-btn_icon {
@@ -136,37 +168,62 @@
136168
max-height: none;
137169
top: 16px;
138170
}
139-
.weui-half-screen-dialog_slide {
171+
172+
// 按住下拉
173+
.weui-half-screen-dialog__slide-icon {
174+
position: absolute;
175+
top: 12px;
176+
display: flex;
177+
width: 40px;
178+
height: 4px;
179+
border-radius: 2px;
180+
background: var(--weui-BG-0);
181+
.dark({
182+
background:var(--weui-FG-3);
183+
});
184+
185+
justify-content: center;
186+
align-items: center;
187+
188+
.weui-icon-arrow {
189+
transform: rotate(90deg);
190+
width: 0.8em;
191+
height: 1.6em;
192+
opacity: 0;
193+
}
194+
}
195+
.weui-half-screen-dialog_grab {
140196
.weui-half-screen-dialog__hd {
197+
box-sizing: border-box;
141198
min-height: 0;
199+
flex-direction: column;
200+
}
201+
.weui-half-screen-dialog__hd__grab {
142202
padding: 12px 16px 16px;
203+
display: flex;
143204
justify-content: center;
144205
}
145-
.weui-half-screen-dialog__slide-icon {
146-
position: absolute;
147-
top: 12px;
206+
.weui-half-screen-dialog__hd__grab,
207+
.weui-half-screen-dialog__hd__nav {
208+
width: 100%;
209+
}
210+
.weui-half-screen-dialog__hd__nav {
148211
display: flex;
149-
width: 40px;
150-
height: 4px;
151-
border-radius: 2px;
152-
background: var(--weui-BG-0);
153-
.dark({
154-
background:var(--weui-FG-3);
155-
});
156-
157-
justify-content: center;
158212
align-items: center;
159-
160-
.weui-icon-arrow {
161-
transform: rotate(90deg);
162-
width: 0.8em;
163-
height: 1.6em;
164-
opacity: 0;
165-
}
213+
min-height: 64px;
214+
}
215+
}
216+
// 兼容老版本
217+
.weui-half-screen-dialog_slide {
218+
.weui-half-screen-dialog__hd {
219+
min-height: 0;
220+
padding: 12px 16px 16px;
221+
justify-content: center;
166222
}
167223
}
168224

169225

226+
170227
// 按钮组水平布局与垂直布局切换
171228
.weui-half-screen-dialog__btn-area {
172229
.weuiBtnWrapLayoutDefault();

0 commit comments

Comments
 (0)