@tuya-miniapp/smart-ui 2.6.4-beta-4 → 2.6.4-beta-6
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/nav-bar/index.css +1 -1
- package/dist/nav-bar/index.js +23 -2
- package/dist/nav-bar/index.wxml +49 -32
- package/dist/nav-bar/index.wxs +1 -0
- package/dist/nav-bar/index.wxss +1 -1
- package/lib/nav-bar/index.css +1 -1
- package/lib/nav-bar/index.js +23 -2
- package/lib/nav-bar/index.wxml +49 -32
- package/lib/nav-bar/index.wxs +1 -0
- package/lib/nav-bar/index.wxss +1 -1
- package/package.json +4 -4
package/dist/nav-bar/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-
|
|
1
|
+
@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;padding-left:var(--nav-bar-text-padding,20px);text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,98px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));padding-left:0;padding-right:var(--nav-bar-text-padding,20px);text-align:right}.smart-nav-bar__right .smart-nav-bar__icon-wrap{padding-right:var(--nav-bar-icon-padding,16px)}
|
package/dist/nav-bar/index.js
CHANGED
|
@@ -2,7 +2,13 @@ import Left from '@tuya-miniapp/icons/dist/svg/Left';
|
|
|
2
2
|
import { SmartComponent } from '../common/component';
|
|
3
3
|
import { getRect, getSystemInfoSync } from '../common/utils';
|
|
4
4
|
SmartComponent({
|
|
5
|
-
classes: [
|
|
5
|
+
classes: [
|
|
6
|
+
'title-class',
|
|
7
|
+
'right-text-class',
|
|
8
|
+
'left-icon-class',
|
|
9
|
+
'right-icon-class',
|
|
10
|
+
'left-text-class',
|
|
11
|
+
],
|
|
6
12
|
props: {
|
|
7
13
|
title: String,
|
|
8
14
|
fixed: {
|
|
@@ -13,22 +19,31 @@ SmartComponent({
|
|
|
13
19
|
type: Boolean,
|
|
14
20
|
observer: 'setHeight',
|
|
15
21
|
},
|
|
22
|
+
background: String,
|
|
16
23
|
leftTextType: {
|
|
17
24
|
type: String,
|
|
18
25
|
value: 'back',
|
|
19
26
|
},
|
|
20
27
|
leftText: String,
|
|
21
28
|
leftIcon: String,
|
|
29
|
+
leftIconColor: String,
|
|
22
30
|
leftIconSize: {
|
|
23
31
|
type: null,
|
|
24
32
|
value: 32,
|
|
25
33
|
},
|
|
26
34
|
rightText: String,
|
|
35
|
+
rightTextColor: String,
|
|
36
|
+
rightIcon: String,
|
|
37
|
+
rightIconColor: String,
|
|
38
|
+
rightIconSize: {
|
|
39
|
+
type: null,
|
|
40
|
+
value: 32,
|
|
41
|
+
},
|
|
27
42
|
customStyle: String,
|
|
28
43
|
leftArrow: Boolean,
|
|
29
44
|
border: {
|
|
30
45
|
type: Boolean,
|
|
31
|
-
value:
|
|
46
|
+
value: false,
|
|
32
47
|
},
|
|
33
48
|
round: {
|
|
34
49
|
type: Boolean,
|
|
@@ -67,12 +82,18 @@ SmartComponent({
|
|
|
67
82
|
onClickTitle() {
|
|
68
83
|
this.$emit('click-title');
|
|
69
84
|
},
|
|
85
|
+
onClickRightIcon() {
|
|
86
|
+
this.$emit('click-right-icon');
|
|
87
|
+
},
|
|
70
88
|
onClickLeftIcon() {
|
|
71
89
|
this.$emit('click-left-icon');
|
|
72
90
|
},
|
|
73
91
|
onClickLeftText() {
|
|
74
92
|
this.$emit('click-left-text');
|
|
75
93
|
},
|
|
94
|
+
onClickRightText() {
|
|
95
|
+
this.$emit('click-right-text');
|
|
96
|
+
},
|
|
76
97
|
setHeight() {
|
|
77
98
|
if (!this.data.fixed || !this.data.placeholder) {
|
|
78
99
|
return;
|
package/dist/nav-bar/index.wxml
CHANGED
|
@@ -5,49 +5,66 @@
|
|
|
5
5
|
|
|
6
6
|
<view
|
|
7
7
|
class="{{ utils.bem('nav-bar', { fixed, round, safe: safeAreaInsetTop }) }} custom-class {{ border ? 'smart-hairline--bottom' : '' }}"
|
|
8
|
-
style="{{ computed.barStyle({ zIndex, statusBarHeight, safeAreaInsetTop }) }}; {{ customStyle }}"
|
|
8
|
+
style="{{ computed.barStyle({ zIndex, statusBarHeight, safeAreaInsetTop, background }) }}; {{ customStyle }}"
|
|
9
9
|
>
|
|
10
10
|
<view class="smart-nav-bar__content">
|
|
11
|
-
<view class="{{ utils.bem('nav-bar__left', { home: leftTextType === 'home', title: leftTextType === 'title' }) }}" bind:tap="onClickLeft">
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
11
|
+
<view class="{{ utils.bem('nav-bar__left', { home: leftTextType === 'home', title: leftTextType === 'title', icon: leftArrow || leftIcon }) }}" bind:tap="onClickLeft">
|
|
12
|
+
<smart-icon
|
|
13
|
+
wx:if="{{ leftArrow }}"
|
|
14
|
+
size="24px"
|
|
15
|
+
hover-class="smart-nav-bar__icon--hover"
|
|
16
|
+
hover-stay-time="70"
|
|
17
|
+
name="{{ leftArrowIcon }}"
|
|
18
|
+
data-type="leftArrow"
|
|
19
|
+
custom-class="smart-nav-bar__arrow"
|
|
20
|
+
/>
|
|
21
|
+
<view
|
|
22
|
+
wx:if="{{ leftIcon }}"
|
|
23
|
+
data-type="leftIcon"
|
|
24
|
+
hover-class="smart-nav-bar__icon--hover"
|
|
25
|
+
hover-stay-time="70"
|
|
26
|
+
class="smart-nav-bar__icon-wrap"
|
|
27
|
+
catch:tap="onClickLeftIcon"
|
|
28
|
+
>
|
|
29
|
+
<smart-icon class="left-icon-class" custom-class="smart-nav-bar__icon" size="{{ leftIconSize }}" name="{{ leftIcon }}" color="{{ leftIconColor }}" />
|
|
30
|
+
</view>
|
|
31
|
+
<view
|
|
32
|
+
wx:if="{{ leftText }}"
|
|
33
|
+
class="smart-nav-bar__text left-text-class"
|
|
34
|
+
catch:tap="onClickLeftText"
|
|
35
|
+
hover-class="{{ leftTextType === 'back' ? 'smart-nav-bar__text--hover' : '' }}"
|
|
36
|
+
hover-stay-time="70"
|
|
37
|
+
>
|
|
38
|
+
{{ leftText }}
|
|
39
|
+
</view>
|
|
40
|
+
<slot name="left" />
|
|
37
41
|
</view>
|
|
38
42
|
<view class="smart-nav-bar__title title-class smart-ellipsis" bind:tap="onClickTitle">
|
|
39
|
-
<block
|
|
40
|
-
|
|
41
|
-
<slot wx:else name="title" />
|
|
43
|
+
<block>{{ title }}</block>
|
|
44
|
+
<slot name="title" />
|
|
42
45
|
</view>
|
|
43
46
|
<view class="smart-nav-bar__right" bind:tap="onClickRight">
|
|
47
|
+
<view
|
|
48
|
+
wx:if="{{ rightIcon }}"
|
|
49
|
+
data-type="rightIcon"
|
|
50
|
+
hover-class="smart-nav-bar__icon--hover"
|
|
51
|
+
hover-stay-time="70"
|
|
52
|
+
class="smart-nav-bar__icon-wrap"
|
|
53
|
+
catch:tap="onClickRightIcon"
|
|
54
|
+
>
|
|
55
|
+
<smart-icon class="right-icon-class" custom-class="smart-nav-bar__icon" size="{{ rightIconSize }}" name="{{ rightIcon }}" color="{{ rightIconColor }}" />
|
|
56
|
+
</view>
|
|
44
57
|
<view
|
|
45
58
|
wx:if="{{ rightText }}"
|
|
46
59
|
class="smart-nav-bar__text right-text-class"
|
|
60
|
+
style="color: {{ rightTextColor }};"
|
|
47
61
|
hover-class="smart-nav-bar__text--hover"
|
|
48
62
|
hover-stay-time="70"
|
|
49
|
-
|
|
50
|
-
|
|
63
|
+
catch:tap="onClickRightText"
|
|
64
|
+
>
|
|
65
|
+
{{ rightText }}
|
|
66
|
+
</view>
|
|
67
|
+
<slot name="right" />
|
|
51
68
|
</view>
|
|
52
69
|
</view>
|
|
53
70
|
</view>
|
package/dist/nav-bar/index.wxs
CHANGED
package/dist/nav-bar/index.wxss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-
|
|
1
|
+
@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;padding-left:var(--nav-bar-text-padding,20px);text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,98px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));padding-left:0;padding-right:var(--nav-bar-text-padding,20px);text-align:right}.smart-nav-bar__right .smart-nav-bar__icon-wrap{padding-right:var(--nav-bar-icon-padding,16px)}
|
package/lib/nav-bar/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-
|
|
1
|
+
@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;padding-left:var(--nav-bar-text-padding,20px);text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,98px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));padding-left:0;padding-right:var(--nav-bar-text-padding,20px);text-align:right}.smart-nav-bar__right .smart-nav-bar__icon-wrap{padding-right:var(--nav-bar-icon-padding,16px)}
|
package/lib/nav-bar/index.js
CHANGED
|
@@ -7,7 +7,13 @@ var Left_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Left"));
|
|
|
7
7
|
var component_1 = require("../common/component");
|
|
8
8
|
var utils_1 = require("../common/utils");
|
|
9
9
|
(0, component_1.SmartComponent)({
|
|
10
|
-
classes: [
|
|
10
|
+
classes: [
|
|
11
|
+
'title-class',
|
|
12
|
+
'right-text-class',
|
|
13
|
+
'left-icon-class',
|
|
14
|
+
'right-icon-class',
|
|
15
|
+
'left-text-class',
|
|
16
|
+
],
|
|
11
17
|
props: {
|
|
12
18
|
title: String,
|
|
13
19
|
fixed: {
|
|
@@ -18,22 +24,31 @@ var utils_1 = require("../common/utils");
|
|
|
18
24
|
type: Boolean,
|
|
19
25
|
observer: 'setHeight',
|
|
20
26
|
},
|
|
27
|
+
background: String,
|
|
21
28
|
leftTextType: {
|
|
22
29
|
type: String,
|
|
23
30
|
value: 'back',
|
|
24
31
|
},
|
|
25
32
|
leftText: String,
|
|
26
33
|
leftIcon: String,
|
|
34
|
+
leftIconColor: String,
|
|
27
35
|
leftIconSize: {
|
|
28
36
|
type: null,
|
|
29
37
|
value: 32,
|
|
30
38
|
},
|
|
31
39
|
rightText: String,
|
|
40
|
+
rightTextColor: String,
|
|
41
|
+
rightIcon: String,
|
|
42
|
+
rightIconColor: String,
|
|
43
|
+
rightIconSize: {
|
|
44
|
+
type: null,
|
|
45
|
+
value: 32,
|
|
46
|
+
},
|
|
32
47
|
customStyle: String,
|
|
33
48
|
leftArrow: Boolean,
|
|
34
49
|
border: {
|
|
35
50
|
type: Boolean,
|
|
36
|
-
value:
|
|
51
|
+
value: false,
|
|
37
52
|
},
|
|
38
53
|
round: {
|
|
39
54
|
type: Boolean,
|
|
@@ -72,12 +87,18 @@ var utils_1 = require("../common/utils");
|
|
|
72
87
|
onClickTitle: function () {
|
|
73
88
|
this.$emit('click-title');
|
|
74
89
|
},
|
|
90
|
+
onClickRightIcon: function () {
|
|
91
|
+
this.$emit('click-right-icon');
|
|
92
|
+
},
|
|
75
93
|
onClickLeftIcon: function () {
|
|
76
94
|
this.$emit('click-left-icon');
|
|
77
95
|
},
|
|
78
96
|
onClickLeftText: function () {
|
|
79
97
|
this.$emit('click-left-text');
|
|
80
98
|
},
|
|
99
|
+
onClickRightText: function () {
|
|
100
|
+
this.$emit('click-right-text');
|
|
101
|
+
},
|
|
81
102
|
setHeight: function () {
|
|
82
103
|
var _this = this;
|
|
83
104
|
if (!this.data.fixed || !this.data.placeholder) {
|
package/lib/nav-bar/index.wxml
CHANGED
|
@@ -5,49 +5,66 @@
|
|
|
5
5
|
|
|
6
6
|
<view
|
|
7
7
|
class="{{ utils.bem('nav-bar', { fixed, round, safe: safeAreaInsetTop }) }} custom-class {{ border ? 'smart-hairline--bottom' : '' }}"
|
|
8
|
-
style="{{ computed.barStyle({ zIndex, statusBarHeight, safeAreaInsetTop }) }}; {{ customStyle }}"
|
|
8
|
+
style="{{ computed.barStyle({ zIndex, statusBarHeight, safeAreaInsetTop, background }) }}; {{ customStyle }}"
|
|
9
9
|
>
|
|
10
10
|
<view class="smart-nav-bar__content">
|
|
11
|
-
<view class="{{ utils.bem('nav-bar__left', { home: leftTextType === 'home', title: leftTextType === 'title' }) }}" bind:tap="onClickLeft">
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
11
|
+
<view class="{{ utils.bem('nav-bar__left', { home: leftTextType === 'home', title: leftTextType === 'title', icon: leftArrow || leftIcon }) }}" bind:tap="onClickLeft">
|
|
12
|
+
<smart-icon
|
|
13
|
+
wx:if="{{ leftArrow }}"
|
|
14
|
+
size="24px"
|
|
15
|
+
hover-class="smart-nav-bar__icon--hover"
|
|
16
|
+
hover-stay-time="70"
|
|
17
|
+
name="{{ leftArrowIcon }}"
|
|
18
|
+
data-type="leftArrow"
|
|
19
|
+
custom-class="smart-nav-bar__arrow"
|
|
20
|
+
/>
|
|
21
|
+
<view
|
|
22
|
+
wx:if="{{ leftIcon }}"
|
|
23
|
+
data-type="leftIcon"
|
|
24
|
+
hover-class="smart-nav-bar__icon--hover"
|
|
25
|
+
hover-stay-time="70"
|
|
26
|
+
class="smart-nav-bar__icon-wrap"
|
|
27
|
+
catch:tap="onClickLeftIcon"
|
|
28
|
+
>
|
|
29
|
+
<smart-icon class="left-icon-class" custom-class="smart-nav-bar__icon" size="{{ leftIconSize }}" name="{{ leftIcon }}" color="{{ leftIconColor }}" />
|
|
30
|
+
</view>
|
|
31
|
+
<view
|
|
32
|
+
wx:if="{{ leftText }}"
|
|
33
|
+
class="smart-nav-bar__text left-text-class"
|
|
34
|
+
catch:tap="onClickLeftText"
|
|
35
|
+
hover-class="{{ leftTextType === 'back' ? 'smart-nav-bar__text--hover' : '' }}"
|
|
36
|
+
hover-stay-time="70"
|
|
37
|
+
>
|
|
38
|
+
{{ leftText }}
|
|
39
|
+
</view>
|
|
40
|
+
<slot name="left" />
|
|
37
41
|
</view>
|
|
38
42
|
<view class="smart-nav-bar__title title-class smart-ellipsis" bind:tap="onClickTitle">
|
|
39
|
-
<block
|
|
40
|
-
|
|
41
|
-
<slot wx:else name="title" />
|
|
43
|
+
<block>{{ title }}</block>
|
|
44
|
+
<slot name="title" />
|
|
42
45
|
</view>
|
|
43
46
|
<view class="smart-nav-bar__right" bind:tap="onClickRight">
|
|
47
|
+
<view
|
|
48
|
+
wx:if="{{ rightIcon }}"
|
|
49
|
+
data-type="rightIcon"
|
|
50
|
+
hover-class="smart-nav-bar__icon--hover"
|
|
51
|
+
hover-stay-time="70"
|
|
52
|
+
class="smart-nav-bar__icon-wrap"
|
|
53
|
+
catch:tap="onClickRightIcon"
|
|
54
|
+
>
|
|
55
|
+
<smart-icon class="right-icon-class" custom-class="smart-nav-bar__icon" size="{{ rightIconSize }}" name="{{ rightIcon }}" color="{{ rightIconColor }}" />
|
|
56
|
+
</view>
|
|
44
57
|
<view
|
|
45
58
|
wx:if="{{ rightText }}"
|
|
46
59
|
class="smart-nav-bar__text right-text-class"
|
|
60
|
+
style="color: {{ rightTextColor }};"
|
|
47
61
|
hover-class="smart-nav-bar__text--hover"
|
|
48
62
|
hover-stay-time="70"
|
|
49
|
-
|
|
50
|
-
|
|
63
|
+
catch:tap="onClickRightText"
|
|
64
|
+
>
|
|
65
|
+
{{ rightText }}
|
|
66
|
+
</view>
|
|
67
|
+
<slot name="right" />
|
|
51
68
|
</view>
|
|
52
69
|
</view>
|
|
53
70
|
</view>
|
package/lib/nav-bar/index.wxs
CHANGED
package/lib/nav-bar/index.wxss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-
|
|
1
|
+
@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-dialog-background:#fff;--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-dialog-background:#333;--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0))}.smart-nav-bar{background-color:var(--nav-bar-background-color,var(--app-B2,#fff));box-sizing:initial;height:var(--nav-bar-height,var(--app-device-navbar-height,46px));line-height:var(--nav-bar-height,var(--app-device-navbar-height,46px));position:relative;text-align:center;-webkit-user-select:none;user-select:none}.smart-nav-bar__content{align-items:center;display:flex;height:100%;position:relative}.smart-nav-bar__text{color:var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7)));display:inline-block;font-size:var(--nav-bar-text-font-size,16px);font-weight:var(--nav-bar-text-font-weight,600);overflow:hidden;padding-left:var(--nav-bar-text-padding,20px);text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.smart-nav-bar .smart-nav-bar__icon--hover,.smart-nav-bar .smart-nav-bar__text--hover{opacity:.3}.smart-nav-bar__arrow{vertical-align:middle}.smart-nav-bar__arrow>view{background:var(--nav-bar-arrow-color,var(--app-B2-N1,#000))}.smart-nav-bar__icon-wrap{align-items:center;display:flex;justify-content:center}.smart-nav-bar__icon>view{background:var(--nav-bar-icon-color,var(--app-B2-N1,#000))}.smart-nav-bar--safe{padding-top:var(--app-device-status-height,20px)}.smart-nav-bar--fixed{left:0;position:fixed;top:0;width:100%}.smart-nav-bar--round{border-radius:var(--nav-bar-round-border-radius,16px 16px 0 0);min-height:var(--nav-bar-round-min-height,56px)}.smart-nav-bar__title{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));flex:1;font-size:var(--nav-bar-title-font-size,17px);font-weight:var(--nav-bar-title-font-weight,600);margin:var(--nav-bar-title-margin,0 16px);text-align:center}.smart-nav-bar__left,.smart-nav-bar__right{align-items:center;display:flex;width:var(--nav-bar-side-width,98px)}.smart-nav-bar__left--home{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--home .smart-nav-bar__text{color:var(--nav-bar-home-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-home-font-weight,600)}.smart-nav-bar__left--title{max-width:var(--nav-bar-home-max-width,calc(100% - 114px));width:auto}.smart-nav-bar__left--title .smart-nav-bar__text{color:var(--nav-bar-title-text-color,var(--app-B2-N1,#000));font-size:var(--nav-bar-home-font-size,22px);font-weight:var(--nav-bar-title-font-weight,600);padding-left:var(--nav-bar-left-title-padding,8px)}.smart-nav-bar__left--icon{padding-left:var(--nav-bar-icon-padding,16px)}.smart-nav-bar__right{flex-direction:row-reverse}.smart-nav-bar__right .smart-nav-bar__text{color:var(--nav-bar-right-text-color,var(--nav-bar-text-color,var(--app-B2-N2,rgba(0,0,0,.7))));padding-left:0;padding-right:var(--nav-bar-text-padding,20px);text-align:right}.smart-nav-bar__right .smart-nav-bar__icon-wrap{padding-right:var(--nav-bar-icon-padding,16px)}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tuya-miniapp/smart-ui",
|
|
3
|
-
"version": "2.6.4-beta-
|
|
3
|
+
"version": "2.6.4-beta-6",
|
|
4
4
|
"author": "MiniApp Team",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"miniprogram": "lib",
|
|
@@ -51,8 +51,6 @@
|
|
|
51
51
|
"@commitlint/config-conventional": "19.1.0",
|
|
52
52
|
"@types/fs-extra": "^11.0.4",
|
|
53
53
|
"@types/jest": "^27.0.2",
|
|
54
|
-
"stylelint-config-prettier": "^8.0.1",
|
|
55
|
-
"stylelint-config-standard": "^20.0.0",
|
|
56
54
|
"canvas": "^3.1.0",
|
|
57
55
|
"conventional-changelog-cli": "^5.0.0",
|
|
58
56
|
"eslint-config-tuya-panel": "^0.4.2",
|
|
@@ -74,6 +72,8 @@
|
|
|
74
72
|
"miniprogram-ci": "1.9.5",
|
|
75
73
|
"miniprogram-simulate": "1.5.9",
|
|
76
74
|
"stylelint": "^13.0.0",
|
|
75
|
+
"stylelint-config-prettier": "^8.0.1",
|
|
76
|
+
"stylelint-config-standard": "^20.0.0",
|
|
77
77
|
"svgo": "^3.2.0",
|
|
78
78
|
"ts-jest": "^27.0.7",
|
|
79
79
|
"tscpaths": "^0.0.9",
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
],
|
|
88
88
|
"dependencies": {
|
|
89
89
|
"@ray-js/components-ty-slider": "^0.3.4",
|
|
90
|
-
"@tuya-miniapp/icons": "^2.
|
|
90
|
+
"@tuya-miniapp/icons": "^2.2.0"
|
|
91
91
|
},
|
|
92
92
|
"maintainers": [
|
|
93
93
|
{
|