@tarojs/components 3.3.14 → 3.3.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/taro-components.cjs.js +1 -1
- package/dist/cjs/taro-cover-image-core.cjs.entry.js +17 -3
- package/dist/cjs/taro-cover-view-core.cjs.entry.js +49 -3
- package/dist/cjs/taro-input-core.cjs.entry.js +4 -4
- package/dist/cjs/taro-tabbar.cjs.entry.js +66 -20
- package/dist/cjs/taro-textarea-core.cjs.entry.js +63 -3
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/cover-image/cover-image.js +94 -0
- package/dist/collection/components/cover-image/style/index.css +5 -0
- package/dist/collection/components/cover-view/cover-view.js +166 -4
- package/dist/collection/components/cover-view/style/cover-view.css +3 -0
- package/dist/collection/components/input/input.js +4 -4
- package/dist/collection/components/tabbar/tabbar.js +70 -20
- package/dist/collection/components/textarea/style/index.css +6 -2
- package/dist/collection/components/textarea/textarea.js +98 -3
- package/dist/esm/loader.js +1 -1
- package/dist/esm/taro-components.js +1 -1
- package/dist/esm/taro-cover-image-core.entry.js +18 -4
- package/dist/esm/taro-cover-view-core.entry.js +50 -4
- package/dist/esm/taro-input-core.entry.js +4 -4
- package/dist/esm/taro-tabbar.entry.js +66 -20
- package/dist/esm/taro-textarea-core.entry.js +63 -3
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/taro-components.js +1 -1
- package/dist/esm-es5/taro-cover-image-core.entry.js +1 -1
- package/dist/esm-es5/taro-cover-view-core.entry.js +1 -1
- package/dist/esm-es5/taro-input-core.entry.js +1 -1
- package/dist/esm-es5/taro-tabbar.entry.js +1 -1
- package/dist/esm-es5/taro-textarea-core.entry.js +1 -1
- package/dist/taro-components/p-139d4d14.entry.js +1 -0
- package/dist/taro-components/p-30bfacb9.system.js +1 -1
- package/dist/taro-components/p-33bcdee9.entry.js +1 -0
- package/dist/taro-components/p-39bee235.entry.js +1 -0
- package/dist/taro-components/p-79b3c05a.entry.js +1 -0
- package/dist/taro-components/p-8235b7b7.system.entry.js +1 -0
- package/dist/taro-components/p-9bd65170.system.entry.js +1 -0
- package/dist/taro-components/p-be2d1c4a.system.entry.js +1 -0
- package/dist/taro-components/p-cb8099dd.entry.js +1 -0
- package/dist/taro-components/p-d8363f59.system.entry.js +1 -0
- package/dist/taro-components/{p-2ef4681b.system.entry.js → p-d9494012.system.entry.js} +1 -1
- package/dist/taro-components/taro-components.esm.js +1 -1
- package/dist/types/components/cover-image/cover-image.d.ts +11 -0
- package/dist/types/components/cover-view/cover-view.d.ts +14 -2
- package/dist/types/components/tabbar/tabbar.d.ts +20 -1
- package/dist/types/components/textarea/textarea.d.ts +6 -0
- package/dist/types/components.d.ts +18 -0
- package/dist-h5/vue/createComponent.js +4 -0
- package/dist-h5/vue/createFormsComponent.js +8 -1
- package/package.json +4 -4
- package/dist/collection/components/cover-view/cover-image.js +0 -11
- package/dist/taro-components/p-2c5d57af.entry.js +0 -1
- package/dist/taro-components/p-382cabbc.system.entry.js +0 -1
- package/dist/taro-components/p-70f40e3a.entry.js +0 -1
- package/dist/taro-components/p-af9ec312.system.entry.js +0 -1
- package/dist/taro-components/p-b6e0dca6.entry.js +0 -1
- package/dist/taro-components/p-c221cebb.system.entry.js +0 -1
- package/dist/taro-components/p-c5722042.entry.js +0 -1
- package/dist/taro-components/p-f8d0dabb.entry.js +0 -1
- package/dist/taro-components/p-f9013b36.system.entry.js +0 -1
- package/dist/types/components/cover-view/cover-image.d.ts +0 -4
|
@@ -1,11 +1,173 @@
|
|
|
1
1
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
-
import { Component, h, Host } from '@stencil/core';
|
|
2
|
+
import { Component, Prop, h, Host, Listen, State, Event } from '@stencil/core';
|
|
3
|
+
import classNames from 'classnames';
|
|
3
4
|
export class CoverView {
|
|
4
|
-
|
|
5
|
-
|
|
5
|
+
constructor() {
|
|
6
|
+
this.hoverStartTime = 50;
|
|
7
|
+
this.hoverStayTime = 400;
|
|
8
|
+
this.hover = false;
|
|
9
|
+
this.touch = false;
|
|
10
|
+
this.startTime = 0;
|
|
11
|
+
}
|
|
12
|
+
onTouchStart() {
|
|
13
|
+
if (this.hoverClass) {
|
|
14
|
+
this.touch = true;
|
|
15
|
+
setTimeout(() => {
|
|
16
|
+
if (this.touch) {
|
|
17
|
+
this.hover = true;
|
|
18
|
+
}
|
|
19
|
+
}, this.hoverStartTime);
|
|
20
|
+
}
|
|
21
|
+
this.timeoutEvent = setTimeout(() => {
|
|
22
|
+
this.onLongPress.emit();
|
|
23
|
+
}, 350);
|
|
24
|
+
this.startTime = Date.now();
|
|
25
|
+
}
|
|
26
|
+
onTouchMove() {
|
|
27
|
+
clearTimeout(this.timeoutEvent);
|
|
28
|
+
}
|
|
29
|
+
onTouchEnd() {
|
|
30
|
+
const spanTime = Date.now() - this.startTime;
|
|
31
|
+
if (spanTime < 350) {
|
|
32
|
+
clearTimeout(this.timeoutEvent);
|
|
33
|
+
}
|
|
34
|
+
if (this.hoverClass) {
|
|
35
|
+
this.touch = false;
|
|
36
|
+
setTimeout(() => {
|
|
37
|
+
if (!this.touch) {
|
|
38
|
+
this.hover = false;
|
|
39
|
+
}
|
|
40
|
+
}, this.hoverStayTime);
|
|
41
|
+
}
|
|
6
42
|
}
|
|
7
43
|
render() {
|
|
8
|
-
|
|
44
|
+
const cls = classNames({
|
|
45
|
+
[`${this.hoverClass}`]: this.hover
|
|
46
|
+
});
|
|
47
|
+
let attr = {};
|
|
48
|
+
if (!!this.animation) {
|
|
49
|
+
attr['animation'] = this.animation;
|
|
50
|
+
attr['data-animation'] = this.animation;
|
|
51
|
+
}
|
|
52
|
+
return (h(Host, Object.assign({ class: cls }, attr),
|
|
53
|
+
h("slot", null)));
|
|
9
54
|
}
|
|
10
55
|
static get is() { return "taro-cover-view-core"; }
|
|
56
|
+
static get originalStyleUrls() { return {
|
|
57
|
+
"$": ["./style/cover-view.scss"]
|
|
58
|
+
}; }
|
|
59
|
+
static get styleUrls() { return {
|
|
60
|
+
"$": ["./style/cover-view.css"]
|
|
61
|
+
}; }
|
|
62
|
+
static get properties() { return {
|
|
63
|
+
"animation": {
|
|
64
|
+
"type": "string",
|
|
65
|
+
"mutable": false,
|
|
66
|
+
"complexType": {
|
|
67
|
+
"original": "string",
|
|
68
|
+
"resolved": "string",
|
|
69
|
+
"references": {}
|
|
70
|
+
},
|
|
71
|
+
"required": false,
|
|
72
|
+
"optional": false,
|
|
73
|
+
"docs": {
|
|
74
|
+
"tags": [],
|
|
75
|
+
"text": ""
|
|
76
|
+
},
|
|
77
|
+
"attribute": "animation",
|
|
78
|
+
"reflect": false
|
|
79
|
+
},
|
|
80
|
+
"hoverClass": {
|
|
81
|
+
"type": "string",
|
|
82
|
+
"mutable": false,
|
|
83
|
+
"complexType": {
|
|
84
|
+
"original": "string",
|
|
85
|
+
"resolved": "string",
|
|
86
|
+
"references": {}
|
|
87
|
+
},
|
|
88
|
+
"required": false,
|
|
89
|
+
"optional": false,
|
|
90
|
+
"docs": {
|
|
91
|
+
"tags": [],
|
|
92
|
+
"text": ""
|
|
93
|
+
},
|
|
94
|
+
"attribute": "hover-class",
|
|
95
|
+
"reflect": false
|
|
96
|
+
},
|
|
97
|
+
"hoverStartTime": {
|
|
98
|
+
"type": "number",
|
|
99
|
+
"mutable": false,
|
|
100
|
+
"complexType": {
|
|
101
|
+
"original": "number",
|
|
102
|
+
"resolved": "number",
|
|
103
|
+
"references": {}
|
|
104
|
+
},
|
|
105
|
+
"required": false,
|
|
106
|
+
"optional": false,
|
|
107
|
+
"docs": {
|
|
108
|
+
"tags": [],
|
|
109
|
+
"text": ""
|
|
110
|
+
},
|
|
111
|
+
"attribute": "hover-start-time",
|
|
112
|
+
"reflect": false,
|
|
113
|
+
"defaultValue": "50"
|
|
114
|
+
},
|
|
115
|
+
"hoverStayTime": {
|
|
116
|
+
"type": "number",
|
|
117
|
+
"mutable": false,
|
|
118
|
+
"complexType": {
|
|
119
|
+
"original": "number",
|
|
120
|
+
"resolved": "number",
|
|
121
|
+
"references": {}
|
|
122
|
+
},
|
|
123
|
+
"required": false,
|
|
124
|
+
"optional": false,
|
|
125
|
+
"docs": {
|
|
126
|
+
"tags": [],
|
|
127
|
+
"text": ""
|
|
128
|
+
},
|
|
129
|
+
"attribute": "hover-stay-time",
|
|
130
|
+
"reflect": false,
|
|
131
|
+
"defaultValue": "400"
|
|
132
|
+
}
|
|
133
|
+
}; }
|
|
134
|
+
static get states() { return {
|
|
135
|
+
"hover": {},
|
|
136
|
+
"touch": {}
|
|
137
|
+
}; }
|
|
138
|
+
static get events() { return [{
|
|
139
|
+
"method": "onLongPress",
|
|
140
|
+
"name": "longpress",
|
|
141
|
+
"bubbles": true,
|
|
142
|
+
"cancelable": true,
|
|
143
|
+
"composed": true,
|
|
144
|
+
"docs": {
|
|
145
|
+
"tags": [],
|
|
146
|
+
"text": ""
|
|
147
|
+
},
|
|
148
|
+
"complexType": {
|
|
149
|
+
"original": "any",
|
|
150
|
+
"resolved": "any",
|
|
151
|
+
"references": {}
|
|
152
|
+
}
|
|
153
|
+
}]; }
|
|
154
|
+
static get listeners() { return [{
|
|
155
|
+
"name": "touchstart",
|
|
156
|
+
"method": "onTouchStart",
|
|
157
|
+
"target": undefined,
|
|
158
|
+
"capture": false,
|
|
159
|
+
"passive": true
|
|
160
|
+
}, {
|
|
161
|
+
"name": "touchmove",
|
|
162
|
+
"method": "onTouchMove",
|
|
163
|
+
"target": undefined,
|
|
164
|
+
"capture": false,
|
|
165
|
+
"passive": true
|
|
166
|
+
}, {
|
|
167
|
+
"name": "touchend",
|
|
168
|
+
"method": "onTouchEnd",
|
|
169
|
+
"target": undefined,
|
|
170
|
+
"capture": false,
|
|
171
|
+
"passive": true
|
|
172
|
+
}]; }
|
|
11
173
|
}
|
|
@@ -112,7 +112,7 @@ export class Input {
|
|
|
112
112
|
this._value = this.value;
|
|
113
113
|
}
|
|
114
114
|
componentDidLoad() {
|
|
115
|
-
var _a, _b, _c;
|
|
115
|
+
var _a, _b, _c, _d;
|
|
116
116
|
if (this.type === 'file') {
|
|
117
117
|
this.fileListener = () => {
|
|
118
118
|
this.onInput.emit();
|
|
@@ -130,6 +130,7 @@ export class Input {
|
|
|
130
130
|
},
|
|
131
131
|
configurable: true
|
|
132
132
|
});
|
|
133
|
+
this.autoFocus && ((_d = this.inputRef) === null || _d === void 0 ? void 0 : _d.focus());
|
|
133
134
|
}
|
|
134
135
|
disconnectedCallback() {
|
|
135
136
|
var _a;
|
|
@@ -138,11 +139,10 @@ export class Input {
|
|
|
138
139
|
}
|
|
139
140
|
}
|
|
140
141
|
render() {
|
|
141
|
-
const { _value, type, password, placeholder, disabled, maxlength,
|
|
142
|
+
const { _value, type, password, placeholder, disabled, maxlength, confirmType, name, nativeProps } = this;
|
|
142
143
|
return (h("input", Object.assign({ ref: input => {
|
|
143
144
|
this.inputRef = input;
|
|
144
|
-
|
|
145
|
-
}, class: 'weui-input', value: fixControlledValue(_value), type: getTrueType(type, confirmType, password), placeholder: placeholder, disabled: disabled, maxlength: maxlength, autofocus: autoFocus, name: name, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onKeyDown: this.handleKeyDown }, nativeProps)));
|
|
145
|
+
}, class: 'weui-input', value: fixControlledValue(_value), type: getTrueType(type, confirmType, password), placeholder: placeholder, disabled: disabled, maxlength: maxlength, name: name, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onKeyDown: this.handleKeyDown }, nativeProps)));
|
|
146
146
|
}
|
|
147
147
|
static get is() { return "taro-input-core"; }
|
|
148
148
|
static get originalStyleUrls() { return {
|
|
@@ -25,18 +25,18 @@ export class Tabbar {
|
|
|
25
25
|
this.status = STATUS_SHOW;
|
|
26
26
|
this.getOriginUrl = (url) => {
|
|
27
27
|
const customRoute = this.customRoutes.filter(([, customUrl]) => {
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
return
|
|
28
|
+
const pathA = splitUrl(customUrl).path;
|
|
29
|
+
const pathB = splitUrl(url).path;
|
|
30
|
+
return pathA === pathB;
|
|
31
31
|
});
|
|
32
32
|
return customRoute.length ? customRoute[0][0] : url;
|
|
33
33
|
};
|
|
34
34
|
this.getSelectedIndex = (url) => {
|
|
35
35
|
let foundIndex = -1;
|
|
36
36
|
this.list.forEach(({ pagePath }, idx) => {
|
|
37
|
-
const
|
|
38
|
-
const
|
|
39
|
-
if (
|
|
37
|
+
const pathA = splitUrl(url).path;
|
|
38
|
+
const pathB = splitUrl(pagePath).path;
|
|
39
|
+
if (pathA === pathB) {
|
|
40
40
|
foundIndex = idx;
|
|
41
41
|
}
|
|
42
42
|
});
|
|
@@ -79,23 +79,27 @@ export class Tabbar {
|
|
|
79
79
|
}
|
|
80
80
|
this.selectedIndex = this.getSelectedIndex(this.getOriginUrl(currentPage));
|
|
81
81
|
};
|
|
82
|
-
this.setTabBarBadgeHandler = ({ index, text, errorHandler }) => {
|
|
83
|
-
const list = this.list;
|
|
82
|
+
this.setTabBarBadgeHandler = ({ index, text, successHandler, errorHandler }) => {
|
|
83
|
+
const list = [...this.list];
|
|
84
84
|
if (index in list) {
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
list[index].showRedDot = false;
|
|
86
|
+
list[index].badgeText = text;
|
|
87
|
+
successHandler({
|
|
88
|
+
errMsg: 'setTabBarBadge:ok'
|
|
89
|
+
});
|
|
87
90
|
}
|
|
88
91
|
else {
|
|
89
92
|
errorHandler({
|
|
90
93
|
errMsg: 'setTabBarBadge:fail tabbar item not found'
|
|
91
94
|
});
|
|
92
95
|
}
|
|
96
|
+
this.list = list;
|
|
93
97
|
};
|
|
94
98
|
this.removeTabBarBadgeHandler = ({ index, successHandler, errorHandler }) => {
|
|
95
|
-
const list = this.list;
|
|
99
|
+
const list = [...this.list];
|
|
96
100
|
if (index in list) {
|
|
97
|
-
|
|
98
|
-
|
|
101
|
+
list[index].badgeText = null;
|
|
102
|
+
list[index].badgeText = null;
|
|
99
103
|
successHandler({
|
|
100
104
|
errMsg: 'removeTabBarBadge:ok'
|
|
101
105
|
});
|
|
@@ -105,9 +109,10 @@ export class Tabbar {
|
|
|
105
109
|
errMsg: 'removeTabBarBadge:fail tabbar item not found'
|
|
106
110
|
});
|
|
107
111
|
}
|
|
112
|
+
this.list = list;
|
|
108
113
|
};
|
|
109
114
|
this.showTabBarRedDotHandler = ({ index, successHandler, errorHandler }) => {
|
|
110
|
-
const list = this.list;
|
|
115
|
+
const list = [...this.list];
|
|
111
116
|
if (index in list) {
|
|
112
117
|
list[index].badgeText = null;
|
|
113
118
|
list[index].showRedDot = true;
|
|
@@ -120,9 +125,10 @@ export class Tabbar {
|
|
|
120
125
|
errMsg: 'showTabBarRedDot:fail tabbar item not found'
|
|
121
126
|
});
|
|
122
127
|
}
|
|
128
|
+
this.list = list;
|
|
123
129
|
};
|
|
124
130
|
this.hideTabBarRedDotHandler = ({ index, successHandler, errorHandler }) => {
|
|
125
|
-
const list = this.list;
|
|
131
|
+
const list = [...this.list];
|
|
126
132
|
if (index in list) {
|
|
127
133
|
list[index].showRedDot = false;
|
|
128
134
|
successHandler({
|
|
@@ -134,6 +140,7 @@ export class Tabbar {
|
|
|
134
140
|
errMsg: 'hideTabBarRedDot:fail tabbar item not found'
|
|
135
141
|
});
|
|
136
142
|
}
|
|
143
|
+
this.list = list;
|
|
137
144
|
};
|
|
138
145
|
this.showTabBarHandler = ({ successHandler }) => {
|
|
139
146
|
this.status = STATUS_SHOW;
|
|
@@ -147,6 +154,39 @@ export class Tabbar {
|
|
|
147
154
|
errMsg: 'hideTabBar:ok'
|
|
148
155
|
});
|
|
149
156
|
};
|
|
157
|
+
this.setTabBarStyleHandler = ({ color, selectedColor, backgroundColor, borderStyle, successHandler }) => {
|
|
158
|
+
if (backgroundColor)
|
|
159
|
+
this.backgroundColor = backgroundColor;
|
|
160
|
+
if (borderStyle)
|
|
161
|
+
this.borderStyle = borderStyle;
|
|
162
|
+
if (color)
|
|
163
|
+
this.color = color;
|
|
164
|
+
if (selectedColor)
|
|
165
|
+
this.selectedColor = selectedColor;
|
|
166
|
+
successHandler({
|
|
167
|
+
errMsg: 'setTabBarStyle:ok'
|
|
168
|
+
});
|
|
169
|
+
};
|
|
170
|
+
this.setTabBarItemHandler = ({ index, iconPath, selectedIconPath, text, successHandler, errorHandler }) => {
|
|
171
|
+
const list = [...this.list];
|
|
172
|
+
if (index in list) {
|
|
173
|
+
if (iconPath)
|
|
174
|
+
list[index].iconPath = iconPath;
|
|
175
|
+
if (selectedIconPath)
|
|
176
|
+
list[index].selectedIconPath = selectedIconPath;
|
|
177
|
+
if (text)
|
|
178
|
+
list[index].text = text;
|
|
179
|
+
successHandler({
|
|
180
|
+
errMsg: 'setTabBarItem:ok'
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
else {
|
|
184
|
+
errorHandler({
|
|
185
|
+
errMsg: 'setTabBarItem:fail tabbar item not found'
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
this.list = list;
|
|
189
|
+
};
|
|
150
190
|
const list = this.conf.list;
|
|
151
191
|
const customRoutes = this.conf.customRoutes;
|
|
152
192
|
if (Object.prototype.toString.call(list) !== '[object Array]' ||
|
|
@@ -164,6 +204,7 @@ export class Tabbar {
|
|
|
164
204
|
}
|
|
165
205
|
});
|
|
166
206
|
this.list = list;
|
|
207
|
+
this.borderStyle = this.conf.borderStyle;
|
|
167
208
|
}
|
|
168
209
|
getCurrentUrl() {
|
|
169
210
|
const routerMode = this.conf.mode;
|
|
@@ -191,6 +232,8 @@ export class Tabbar {
|
|
|
191
232
|
Taro.eventCenter.on('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler);
|
|
192
233
|
Taro.eventCenter.on('__taroShowTabBar', this.showTabBarHandler);
|
|
193
234
|
Taro.eventCenter.on('__taroHideTabBar', this.hideTabBarHandler);
|
|
235
|
+
Taro.eventCenter.on('__taroSetTabBarStyle', this.setTabBarStyleHandler);
|
|
236
|
+
Taro.eventCenter.on('__taroSetTabBarItem', this.setTabBarItemHandler);
|
|
194
237
|
}
|
|
195
238
|
removeEvent() {
|
|
196
239
|
Taro.eventCenter.off('__taroRouterChange', this.routerChangeHandler);
|
|
@@ -201,6 +244,8 @@ export class Tabbar {
|
|
|
201
244
|
Taro.eventCenter.off('__taroHideTabBarRedDotHandler', this.hideTabBarRedDotHandler);
|
|
202
245
|
Taro.eventCenter.off('__taroShowTabBar', this.showTabBarHandler);
|
|
203
246
|
Taro.eventCenter.off('__taroHideTabBar', this.hideTabBarHandler);
|
|
247
|
+
Taro.eventCenter.off('__taroSetTabBarStyle', this.setTabBarStyleHandler);
|
|
248
|
+
Taro.eventCenter.off('__taroSetTabBarItem', this.setTabBarItemHandler);
|
|
204
249
|
}
|
|
205
250
|
componentDidLoad() {
|
|
206
251
|
this.tabbarPos = this.tabbar.nextElementSibling ? 'top' : 'bottom';
|
|
@@ -211,10 +256,10 @@ export class Tabbar {
|
|
|
211
256
|
this.removeEvent();
|
|
212
257
|
}
|
|
213
258
|
render() {
|
|
214
|
-
const {
|
|
259
|
+
const { tabbarPos = 'bottom' } = this;
|
|
215
260
|
const status = this.status;
|
|
216
261
|
const containerCls = classNames('weui-tabbar', {
|
|
217
|
-
[`taro-tabbar__border-${
|
|
262
|
+
[`taro-tabbar__border-${this.borderStyle || 'black'}`]: true
|
|
218
263
|
});
|
|
219
264
|
const shouldHideTabBar = this.selectedIndex === -1 || status === STATUS_HIDE;
|
|
220
265
|
const shouldSlideout = status === STATUS_SLIDEOUT;
|
|
@@ -223,19 +268,20 @@ export class Tabbar {
|
|
|
223
268
|
[hideTabBarWithAnimationClassName]: shouldSlideout
|
|
224
269
|
}) },
|
|
225
270
|
h("div", { class: containerCls, style: {
|
|
226
|
-
backgroundColor:
|
|
271
|
+
backgroundColor: this.backgroundColor || ''
|
|
227
272
|
} }, this.list.map((item, index) => {
|
|
228
273
|
const isSelected = this.selectedIndex === index;
|
|
229
274
|
let textColor;
|
|
230
275
|
let iconPath;
|
|
231
276
|
if (isSelected) {
|
|
232
|
-
textColor =
|
|
277
|
+
textColor = this.selectedColor;
|
|
233
278
|
iconPath = item.selectedIconPath;
|
|
234
279
|
}
|
|
235
280
|
else {
|
|
236
|
-
textColor =
|
|
281
|
+
textColor = this.color || '';
|
|
237
282
|
iconPath = item.iconPath;
|
|
238
283
|
}
|
|
284
|
+
console.log('TabbarItem', item);
|
|
239
285
|
return (h(TabbarItem, { index: index, onSelect: this.switchTab.bind(this), isSelected: isSelected, textColor: textColor, iconPath: iconPath, text: item.text, badgeText: item.badgeText, showRedDot: item.showRedDot }));
|
|
240
286
|
}))));
|
|
241
287
|
}
|
|
@@ -269,6 +315,10 @@ export class Tabbar {
|
|
|
269
315
|
}; }
|
|
270
316
|
static get states() { return {
|
|
271
317
|
"list": {},
|
|
318
|
+
"borderStyle": {},
|
|
319
|
+
"backgroundColor": {},
|
|
320
|
+
"color": {},
|
|
321
|
+
"selectedColor": {},
|
|
272
322
|
"selectedIndex": {},
|
|
273
323
|
"status": {}
|
|
274
324
|
}; }
|
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
taro-textarea-core {
|
|
2
2
|
display: block;
|
|
3
3
|
width: 300px;
|
|
4
|
-
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
taro-textarea-core .auto-height {
|
|
7
|
+
height: auto;
|
|
5
8
|
}
|
|
6
9
|
|
|
7
10
|
.taro-textarea {
|
|
8
11
|
-webkit-appearance: none;
|
|
9
12
|
cursor: auto;
|
|
10
13
|
width: 100%;
|
|
11
|
-
height:
|
|
14
|
+
height: 150px;
|
|
12
15
|
border: 0;
|
|
13
16
|
display: block;
|
|
14
17
|
position: relative;
|
|
18
|
+
line-height: 1.5;
|
|
15
19
|
}
|
|
16
20
|
.taro-textarea:focus {
|
|
17
21
|
outline: none;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2
|
-
import { Component, h, Prop, Event, Element } from '@stencil/core';
|
|
2
|
+
import { Component, h, Prop, State, Event, Element } from '@stencil/core';
|
|
3
3
|
function fixControlledValue(value) {
|
|
4
4
|
return value !== null && value !== void 0 ? value : '';
|
|
5
5
|
}
|
|
@@ -8,9 +8,12 @@ export class Textarea {
|
|
|
8
8
|
this.disabled = false;
|
|
9
9
|
this.maxlength = 140;
|
|
10
10
|
this.autoFocus = false;
|
|
11
|
+
this.autoHeight = false;
|
|
11
12
|
this.nativeProps = {};
|
|
13
|
+
this.line = 1;
|
|
12
14
|
this.hanldeInput = (e) => {
|
|
13
15
|
e.stopPropagation();
|
|
16
|
+
this.handleLineChange();
|
|
14
17
|
this.onInput.emit({
|
|
15
18
|
value: e.target.value,
|
|
16
19
|
cursor: e.target.value.length
|
|
@@ -32,6 +35,58 @@ export class Textarea {
|
|
|
32
35
|
value: e.target.value
|
|
33
36
|
});
|
|
34
37
|
};
|
|
38
|
+
this.handleLineChange = () => {
|
|
39
|
+
const line = this.getNumberOfLines();
|
|
40
|
+
if (line !== this.line) {
|
|
41
|
+
this.line = line;
|
|
42
|
+
this.onLineChange.emit({
|
|
43
|
+
height: this.textareaRef.clientHeight,
|
|
44
|
+
lineCount: this.line
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
this.calculateContentHeight = (ta, scanAmount) => {
|
|
49
|
+
let origHeight = ta.style.height, height = ta.offsetHeight, scrollHeight = ta.scrollHeight, overflow = ta.style.overflow;
|
|
50
|
+
/// only bother if the ta is bigger than content
|
|
51
|
+
if (height >= scrollHeight) {
|
|
52
|
+
/// check that our browser supports changing dimension
|
|
53
|
+
/// calculations mid-way through a function call...
|
|
54
|
+
ta.style.height = height + scanAmount + 'px';
|
|
55
|
+
/// because the scrollbar can cause calculation problems
|
|
56
|
+
ta.style.overflow = 'hidden';
|
|
57
|
+
/// by checking that scrollHeight has updated
|
|
58
|
+
if (scrollHeight < ta.scrollHeight) {
|
|
59
|
+
/// now try and scan the ta's height downwards
|
|
60
|
+
/// until scrollHeight becomes larger than height
|
|
61
|
+
while (ta.offsetHeight >= ta.scrollHeight) {
|
|
62
|
+
ta.style.height = (height -= scanAmount) + 'px';
|
|
63
|
+
}
|
|
64
|
+
/// be more specific to get the exact height
|
|
65
|
+
while (ta.offsetHeight < ta.scrollHeight) {
|
|
66
|
+
ta.style.height = height++ + 'px';
|
|
67
|
+
}
|
|
68
|
+
/// reset the ta back to it's original height
|
|
69
|
+
ta.style.height = origHeight;
|
|
70
|
+
/// put the overflow back
|
|
71
|
+
ta.style.overflow = overflow;
|
|
72
|
+
return height;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
else {
|
|
76
|
+
return scrollHeight;
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
this.getNumberOfLines = () => {
|
|
80
|
+
const ta = this.textareaRef, style = window.getComputedStyle ? window.getComputedStyle(ta) : ta.style,
|
|
81
|
+
// This will get the line-height only if it is set in the css,
|
|
82
|
+
// otherwise it's "normal"
|
|
83
|
+
taLineHeight = parseInt(style.lineHeight, 10),
|
|
84
|
+
// Get the scroll height of the textarea
|
|
85
|
+
taHeight = this.calculateContentHeight(ta, taLineHeight),
|
|
86
|
+
// calculate the number of lines
|
|
87
|
+
numberOfLines = Math.floor(taHeight / taLineHeight);
|
|
88
|
+
return numberOfLines;
|
|
89
|
+
};
|
|
35
90
|
}
|
|
36
91
|
componentDidLoad() {
|
|
37
92
|
Object.defineProperty(this.el, 'value', {
|
|
@@ -42,12 +97,16 @@ export class Textarea {
|
|
|
42
97
|
this.autoFocus && this.textareaRef.focus();
|
|
43
98
|
}
|
|
44
99
|
render() {
|
|
45
|
-
const { value, placeholder, disabled, maxlength, autoFocus, name, nativeProps, hanldeInput, handleFocus, handleBlur, handleChange } = this;
|
|
100
|
+
const { value, placeholder, disabled, maxlength, autoFocus, autoHeight, name, nativeProps, hanldeInput, handleFocus, handleBlur, handleChange } = this;
|
|
101
|
+
const otherProps = {};
|
|
102
|
+
if (autoHeight) {
|
|
103
|
+
otherProps.rows = this.line;
|
|
104
|
+
}
|
|
46
105
|
return (h("textarea", Object.assign({ ref: input => {
|
|
47
106
|
if (input) {
|
|
48
107
|
this.textareaRef = input;
|
|
49
108
|
}
|
|
50
|
-
}, class:
|
|
109
|
+
}, class: `taro-textarea ${autoHeight ? 'auto-height' : ''}`, value: fixControlledValue(value), placeholder: placeholder, name: name, disabled: disabled, maxlength: maxlength, autofocus: autoFocus, onInput: hanldeInput, onFocus: handleFocus, onBlur: handleBlur, onChange: handleChange }, nativeProps, otherProps)));
|
|
51
110
|
}
|
|
52
111
|
static get is() { return "taro-textarea-core"; }
|
|
53
112
|
static get originalStyleUrls() { return {
|
|
@@ -145,6 +204,24 @@ export class Textarea {
|
|
|
145
204
|
"reflect": false,
|
|
146
205
|
"defaultValue": "false"
|
|
147
206
|
},
|
|
207
|
+
"autoHeight": {
|
|
208
|
+
"type": "boolean",
|
|
209
|
+
"mutable": false,
|
|
210
|
+
"complexType": {
|
|
211
|
+
"original": "boolean",
|
|
212
|
+
"resolved": "boolean",
|
|
213
|
+
"references": {}
|
|
214
|
+
},
|
|
215
|
+
"required": false,
|
|
216
|
+
"optional": false,
|
|
217
|
+
"docs": {
|
|
218
|
+
"tags": [],
|
|
219
|
+
"text": ""
|
|
220
|
+
},
|
|
221
|
+
"attribute": "auto-height",
|
|
222
|
+
"reflect": false,
|
|
223
|
+
"defaultValue": "false"
|
|
224
|
+
},
|
|
148
225
|
"name": {
|
|
149
226
|
"type": "string",
|
|
150
227
|
"mutable": false,
|
|
@@ -179,6 +256,9 @@ export class Textarea {
|
|
|
179
256
|
"defaultValue": "{}"
|
|
180
257
|
}
|
|
181
258
|
}; }
|
|
259
|
+
static get states() { return {
|
|
260
|
+
"line": {}
|
|
261
|
+
}; }
|
|
182
262
|
static get events() { return [{
|
|
183
263
|
"method": "onInput",
|
|
184
264
|
"name": "input",
|
|
@@ -239,6 +319,21 @@ export class Textarea {
|
|
|
239
319
|
"resolved": "any",
|
|
240
320
|
"references": {}
|
|
241
321
|
}
|
|
322
|
+
}, {
|
|
323
|
+
"method": "onLineChange",
|
|
324
|
+
"name": "linechange",
|
|
325
|
+
"bubbles": true,
|
|
326
|
+
"cancelable": true,
|
|
327
|
+
"composed": true,
|
|
328
|
+
"docs": {
|
|
329
|
+
"tags": [],
|
|
330
|
+
"text": ""
|
|
331
|
+
},
|
|
332
|
+
"complexType": {
|
|
333
|
+
"original": "any",
|
|
334
|
+
"resolved": "any",
|
|
335
|
+
"references": {}
|
|
336
|
+
}
|
|
242
337
|
}]; }
|
|
243
338
|
static get elementRef() { return "el"; }
|
|
244
339
|
}
|
package/dist/esm/loader.js
CHANGED
|
@@ -10,7 +10,7 @@ const patchEsm = () => {
|
|
|
10
10
|
const defineCustomElements = (win, options) => {
|
|
11
11
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
12
12
|
return patchEsm().then(() => {
|
|
13
|
-
return bootstrapLazy([["taro-checkbox-core_2",[[4,"taro-checkbox-core",{"name":[1],"value":[1],"color":[1],"id":[1025],"checked":[4],"disabled":[4],"nativeProps":[16],"isWillLoadCalled":[32]}],[0,"taro-checkbox-group-core",{"name":[8]},[[0,"checkboxchange","function"]]]]],["taro-radio-core_2",[[4,"taro-radio-core",{"name":[1],"value":[1],"id":[1025],"checked":[1028],"disabled":[4],"nativeProps":[16],"isWillLoadCalled":[32]}],[0,"taro-radio-group-core",{"name":[8]},[[0,"radiochange","function"]]]]],["taro-swiper-core_2",[[4,"taro-swiper-core",{"indicatorDots":[4,"indicator-dots"],"indicatorColor":[1,"indicator-color"],"indicatorActiveColor":[1,"indicator-active-color"],"autoplay":[4],"current":[2],"interval":[2],"duration":[2],"circular":[4],"vertical":[4],"previousMargin":[1,"previous-margin"],"nextMargin":[1,"next-margin"],"displayMultipleItems":[2,"display-multiple-items"],"full":[4],"swiperWrapper":[32],"swiper":[32],"isWillLoadCalled":[32],"observer":[32],"observerFirst":[32],"observerLast":[32]}],[0,"taro-swiper-item-core",{"itemId":[1,"item-id"]}]]],["taro-audio-core",[[0,"taro-audio-core",{"src":[1],"controls":[4],"autoplay":[4],"loop":[4],"muted":[4],"nativeProps":[16]}]]],["taro-block-core",[[0,"taro-block-core"]]],["taro-button-core",[[4,"taro-button-core",{"disabled":[4],"hoverClass":[1,"hover-class"],"type":[1],"hoverStartTime":[2,"hover-start-time"],"hoverStayTime":[2,"hover-stay-time"],"size":[1],"plain":[4],"loading":[4],"formType":[1,"form-type"],"hover":[32],"touch":[32]},[[1,"touchstart","onTouchStart"],[1,"touchend","onTouchEnd"]]]]],["taro-camera-core",[[0,"taro-camera-core"]]],["taro-canvas-core",[[0,"taro-canvas-core",{"canvasId":[1,"canvas-id"],"nativeProps":[16]}]]],["taro-cover-image-core",[[0,"taro-cover-image-core"]]],["taro-cover-view-core",[[
|
|
13
|
+
return bootstrapLazy([["taro-checkbox-core_2",[[4,"taro-checkbox-core",{"name":[1],"value":[1],"color":[1],"id":[1025],"checked":[4],"disabled":[4],"nativeProps":[16],"isWillLoadCalled":[32]}],[0,"taro-checkbox-group-core",{"name":[8]},[[0,"checkboxchange","function"]]]]],["taro-radio-core_2",[[4,"taro-radio-core",{"name":[1],"value":[1],"id":[1025],"checked":[1028],"disabled":[4],"nativeProps":[16],"isWillLoadCalled":[32]}],[0,"taro-radio-group-core",{"name":[8]},[[0,"radiochange","function"]]]]],["taro-swiper-core_2",[[4,"taro-swiper-core",{"indicatorDots":[4,"indicator-dots"],"indicatorColor":[1,"indicator-color"],"indicatorActiveColor":[1,"indicator-active-color"],"autoplay":[4],"current":[2],"interval":[2],"duration":[2],"circular":[4],"vertical":[4],"previousMargin":[1,"previous-margin"],"nextMargin":[1,"next-margin"],"displayMultipleItems":[2,"display-multiple-items"],"full":[4],"swiperWrapper":[32],"swiper":[32],"isWillLoadCalled":[32],"observer":[32],"observerFirst":[32],"observerLast":[32]}],[0,"taro-swiper-item-core",{"itemId":[1,"item-id"]}]]],["taro-audio-core",[[0,"taro-audio-core",{"src":[1],"controls":[4],"autoplay":[4],"loop":[4],"muted":[4],"nativeProps":[16]}]]],["taro-block-core",[[0,"taro-block-core"]]],["taro-button-core",[[4,"taro-button-core",{"disabled":[4],"hoverClass":[1,"hover-class"],"type":[1],"hoverStartTime":[2,"hover-start-time"],"hoverStayTime":[2,"hover-stay-time"],"size":[1],"plain":[4],"loading":[4],"formType":[1,"form-type"],"hover":[32],"touch":[32]},[[1,"touchstart","onTouchStart"],[1,"touchend","onTouchEnd"]]]]],["taro-camera-core",[[0,"taro-camera-core"]]],["taro-canvas-core",[[0,"taro-canvas-core",{"canvasId":[1,"canvas-id"],"nativeProps":[16]}]]],["taro-cover-image-core",[[0,"taro-cover-image-core",{"src":[1],"nativeProps":[16]}]]],["taro-cover-view-core",[[4,"taro-cover-view-core",{"animation":[1],"hoverClass":[1,"hover-class"],"hoverStartTime":[2,"hover-start-time"],"hoverStayTime":[2,"hover-stay-time"],"hover":[32],"touch":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]]]]],["taro-custom-wrapper-core",[[0,"taro-custom-wrapper-core"]]],["taro-form-core",[[4,"taro-form-core",{"slotParent":[32]},[[0,"tarobuttonsubmit","onButtonSubmit"],[0,"tarobuttonreset","onButtonReset"]]]]],["taro-icon-core",[[0,"taro-icon-core",{"type":[1],"size":[8],"color":[1]}]]],["taro-image-core",[[0,"taro-image-core",{"src":[1],"mode":[1],"lazyLoad":[4,"lazy-load"],"nativeProps":[16],"aspectFillMode":[32]}]]],["taro-input-core",[[0,"taro-input-core",{"value":[1],"type":[1],"password":[4],"placeholder":[1],"disabled":[4],"maxlength":[2],"autoFocus":[4,"auto-focus"],"confirmType":[1,"confirm-type"],"name":[1],"nativeProps":[16],"_value":[32]}]]],["taro-label-core",[[4,"taro-label-core",{"for":[1]}]]],["taro-movable-area-core",[[0,"taro-movable-area-core"]]],["taro-movable-view-core",[[0,"taro-movable-view-core"]]],["taro-navigator-core",[[0,"taro-navigator-core",{"hoverClass":[1,"hover-class"],"url":[1],"openType":[1,"open-type"],"isHover":[4,"is-hover"],"delta":[2]},[[0,"click","onClick"]]]]],["taro-open-data-core",[[0,"taro-open-data-core"]]],["taro-picker-view-column-core",[[0,"taro-picker-view-column-core"]]],["taro-picker-view-core",[[0,"taro-picker-view-core"]]],["taro-progress-core",[[0,"taro-progress-core",{"percent":[2],"showInfo":[4,"show-info"],"borderRadius":[8,"border-radius"],"fontSize":[8,"font-size"],"strokeWidth":[8,"stroke-width"],"activeColor":[1,"active-color"],"backgroundColor":[1,"background-color"],"active":[4]}]]],["taro-pull-to-refresh",[[4,"taro-pull-to-refresh",{"prefixCls":[1,"prefix-cls"],"distanceToRefresh":[2,"distance-to-refresh"],"damping":[2],"indicator":[16],"currSt":[32],"dragOnEdge":[32]}]]],["taro-rich-text-core",[[0,"taro-rich-text-core",{"nodes":[1]}]]],["taro-scroll-view-core",[[4,"taro-scroll-view-core",{"scrollX":[4,"scroll-x"],"scrollY":[4,"scroll-y"],"upperThreshold":[8,"upper-threshold"],"lowerThreshold":[8,"lower-threshold"],"mpScrollTop":[8,"scroll-top"],"mpScrollLeft":[8,"scroll-left"],"mpScrollIntoView":[1,"scroll-into-view"],"scrollWithAnimation":[4,"scroll-with-animation"]}]]],["taro-slider-core",[[0,"taro-slider-core",{"min":[2],"max":[2],"step":[2],"disabled":[4],"value":[1026],"activeColor":[1,"active-color"],"backgroundColor":[1,"background-color"],"blockSize":[2,"block-size"],"blockColor":[1,"block-color"],"showValue":[4,"show-value"],"name":[1],"val":[32],"totalWidth":[32],"touching":[32],"ogX":[32],"touchId":[32],"percent":[32],"ogPercent":[32],"isWillLoadCalled":[32]}]]],["taro-switch-core",[[0,"taro-switch-core",{"type":[1],"checked":[4],"color":[1],"name":[1],"disabled":[4],"nativeProps":[16],"isChecked":[32],"isWillLoadCalled":[32]}]]],["taro-tabbar",[[0,"taro-tabbar",{"conf":[16],"list":[32],"borderStyle":[32],"backgroundColor":[32],"color":[32],"selectedColor":[32],"selectedIndex":[32],"status":[32]}]]],["taro-text-core",[[4,"taro-text-core",{"selectable":[4]}]]],["taro-textarea-core",[[0,"taro-textarea-core",{"value":[1],"placeholder":[1],"disabled":[4],"maxlength":[2],"autoFocus":[4,"auto-focus"],"autoHeight":[4,"auto-height"],"name":[1],"nativeProps":[16],"line":[32]}]]],["taro-view-core",[[4,"taro-view-core",{"animation":[1],"hoverClass":[1,"hover-class"],"hoverStartTime":[2,"hover-start-time"],"hoverStayTime":[2,"hover-stay-time"],"hover":[32],"touch":[32]},[[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]]]]],["taro-web-view-core",[[0,"taro-web-view-core",{"src":[1]}]]],["taro-picker-core_2",[[4,"taro-picker-core",{"mode":[1],"disabled":[4],"range":[16],"rangeKey":[1,"range-key"],"value":[8],"start":[1],"end":[1],"fields":[1],"name":[1],"pickerValue":[32],"height":[32],"hidden":[32],"fadeOut":[32],"isWillLoadCalled":[32]}],[0,"taro-picker-group",{"mode":[1],"range":[16],"rangeKey":[1,"range-key"],"height":[2],"columnId":[1,"column-id"],"updateHeight":[16],"onColumnChange":[16],"updateDay":[16],"startY":[32],"preY":[32],"hadMove":[32],"touchEnd":[32],"isMove":[32]},[[1,"mousedown","onMouseDown"],[1,"mousemove","onMouseMove"],[1,"mouseup","onMouseMoveEnd"],[1,"mouseleave","onMouseMoveEnd"],[1,"touchstart","onTouchStart"],[1,"touchmove","onTouchMove"],[1,"touchend","onTouchEnd"]]]]],["taro-video-control_3",[[0,"taro-video-core",{"src":[1],"duration":[2],"controls":[4],"autoplay":[4],"loop":[4],"muted":[4],"initialTime":[2,"initial-time"],"poster":[1],"objectFit":[1,"object-fit"],"showProgress":[4,"show-progress"],"showFullscreenBtn":[4,"show-fullscreen-btn"],"showPlayBtn":[4,"show-play-btn"],"showCenterPlayBtn":[4,"show-center-play-btn"],"showMuteBtn":[4,"show-mute-btn"],"danmuList":[16],"danmuBtn":[4,"danmu-btn"],"enableDanmu":[4,"enable-danmu"],"enablePlayGesture":[4,"enable-play-gesture"],"enableProgressGesture":[4,"enable-progress-gesture"],"vslideGesture":[4,"vslide-gesture"],"vslideGestureInFullscreen":[4,"vslide-gesture-in-fullscreen"],"nativeProps":[16],"_duration":[32],"_enableDanmu":[32],"isPlaying":[32],"isFirst":[32],"isFullScreen":[32],"fullScreenTimestamp":[32],"isMute":[32],"play":[64],"pause":[64],"stop":[64],"seek":[64],"requestFullScreen":[64],"exitFullScreen":[64]},[[5,"touchmove","onDocumentTouchMove"],[5,"touchend","onDocumentTouchEnd"],[5,"touchcancel","onDocumentTouchEnd"]]],[4,"taro-video-control",{"controls":[4],"currentTime":[2,"current-time"],"duration":[2],"isPlaying":[4,"is-playing"],"pauseFunc":[16],"playFunc":[16],"seekFunc":[16],"showPlayBtn":[4,"show-play-btn"],"showProgress":[4,"show-progress"],"setProgressBall":[64],"toggleVisibility":[64],"getIsDraggingProgressBall":[64],"setCurrentTime":[64]},[[5,"touchmove","onDocumentTouchMove"],[5,"touchend","onDocumentTouchEnd"],[5,"touchcancel","onDocumentTouchEnd"]]],[0,"taro-video-danmu",{"enable":[4],"danmuList":[32],"sendDanmu":[64],"tick":[64]}]]]], options);
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
|