@vtj/materials 0.10.1-alpha.7 → 0.10.1

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.
@@ -1,177 +1,177 @@
1
- <template>
2
- <view class="uni-calendar-item__weeks-box" :class="{
3
- 'uni-calendar-item--disable':weeks.disable,
4
- 'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
5
- 'uni-calendar-item--multiple': weeks.multiple,
6
- 'uni-calendar-item--after-checked-x':weeks.afterMultiple,
7
- }" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
8
- <view class="uni-calendar-item__weeks-box-item" :class="{
9
- 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
10
- 'uni-calendar-item--checked-range-text': checkHover,
11
- 'uni-calendar-item--before-checked':weeks.beforeMultiple,
12
- 'uni-calendar-item--multiple': weeks.multiple,
13
- 'uni-calendar-item--after-checked':weeks.afterMultiple,
14
- 'uni-calendar-item--disable':weeks.disable,
15
- }">
16
- <text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
17
- <text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
18
- </view>
19
- <view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
20
- </view>
21
- </template>
22
-
23
- <script>
24
- export default {
25
- props: {
26
- weeks: {
27
- type: Object,
28
- default () {
29
- return {}
30
- }
31
- },
32
- calendar: {
33
- type: Object,
34
- default: () => {
35
- return {}
36
- }
37
- },
38
- selected: {
39
- type: Array,
40
- default: () => {
41
- return []
42
- }
43
- },
44
- checkHover: {
45
- type: Boolean,
46
- default: false
47
- }
48
- },
49
- methods: {
50
- choiceDate(weeks) {
51
- this.$emit('change', weeks)
52
- },
53
- handleMousemove(weeks) {
54
- this.$emit('handleMouse', weeks)
55
- }
56
- }
57
- }
58
- </script>
59
-
60
- <style lang="scss" >
61
- $uni-primary: #007aff !default;
62
-
63
- .uni-calendar-item__weeks-box {
64
- flex: 1;
65
- /* #ifndef APP-NVUE */
66
- display: flex;
67
- /* #endif */
68
- flex-direction: column;
69
- justify-content: center;
70
- align-items: center;
71
- margin: 1px 0;
72
- position: relative;
73
- }
74
-
75
- .uni-calendar-item__weeks-box-text {
76
- font-size: 14px;
77
- // font-family: Lato-Bold, Lato;
78
- font-weight: bold;
79
- color: darken($color: $uni-primary, $amount: 40%);
80
- }
81
-
82
- .uni-calendar-item__weeks-box-item {
83
- position: relative;
84
- /* #ifndef APP-NVUE */
85
- display: flex;
86
- /* #endif */
87
- flex-direction: column;
88
- justify-content: center;
89
- align-items: center;
90
- width: 40px;
91
- height: 40px;
92
- /* #ifdef H5 */
93
- cursor: pointer;
94
- /* #endif */
95
- }
96
-
97
-
98
- .uni-calendar-item__weeks-box-circle {
99
- position: absolute;
100
- top: 5px;
101
- right: 5px;
102
- width: 8px;
103
- height: 8px;
104
- border-radius: 8px;
105
- background-color: #dd524d;
106
-
107
- }
108
-
109
- .uni-calendar-item__weeks-box .uni-calendar-item--disable {
110
- cursor: default;
111
- }
112
-
113
- .uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
114
- color: #D1D1D1;
115
- }
116
-
117
- .uni-calendar-item--today {
118
- position: absolute;
119
- top: 10px;
120
- right: 17%;
121
- background-color: #dd524d;
122
- width:6px;
123
- height: 6px;
124
- border-radius: 50%;
125
- }
126
-
127
- .uni-calendar-item--extra {
128
- color: #dd524d;
129
- opacity: 0.8;
130
- }
131
-
132
- .uni-calendar-item__weeks-box .uni-calendar-item--checked {
133
- background-color: $uni-primary;
134
- border-radius: 50%;
135
- box-sizing: border-box;
136
- border: 3px solid #fff;
137
- }
138
-
139
- .uni-calendar-item--checked .uni-calendar-item--checked-text {
140
- color: #fff;
141
- }
142
-
143
- .uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
144
- color: #333;
145
- }
146
-
147
- .uni-calendar-item--multiple {
148
- background-color: #F6F7FC;
149
- // color: #fff;
150
- }
151
-
152
- .uni-calendar-item--multiple .uni-calendar-item--before-checked,
153
- .uni-calendar-item--multiple .uni-calendar-item--after-checked {
154
- background-color: $uni-primary;
155
- border-radius: 50%;
156
- box-sizing: border-box;
157
- border: 3px solid #F6F7FC;
158
- }
159
-
160
- .uni-calendar-item--before-checked .uni-calendar-item--checked-text,
161
- .uni-calendar-item--after-checked .uni-calendar-item--checked-text {
162
- color: #fff;
163
- }
164
-
165
- .uni-calendar-item--before-checked-x {
166
- border-top-left-radius: 50px;
167
- border-bottom-left-radius: 50px;
168
- box-sizing: border-box;
169
- background-color: #F6F7FC;
170
- }
171
-
172
- .uni-calendar-item--after-checked-x {
173
- border-top-right-radius: 50px;
174
- border-bottom-right-radius: 50px;
175
- background-color: #F6F7FC;
176
- }
177
- </style>
1
+ <template>
2
+ <view class="uni-calendar-item__weeks-box" :class="{
3
+ 'uni-calendar-item--disable':weeks.disable,
4
+ 'uni-calendar-item--before-checked-x':weeks.beforeMultiple,
5
+ 'uni-calendar-item--multiple': weeks.multiple,
6
+ 'uni-calendar-item--after-checked-x':weeks.afterMultiple,
7
+ }" @click="choiceDate(weeks)" @mouseenter="handleMousemove(weeks)">
8
+ <view class="uni-calendar-item__weeks-box-item" :class="{
9
+ 'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && (calendar.userChecked || !checkHover),
10
+ 'uni-calendar-item--checked-range-text': checkHover,
11
+ 'uni-calendar-item--before-checked':weeks.beforeMultiple,
12
+ 'uni-calendar-item--multiple': weeks.multiple,
13
+ 'uni-calendar-item--after-checked':weeks.afterMultiple,
14
+ 'uni-calendar-item--disable':weeks.disable,
15
+ }">
16
+ <text v-if="selected && weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
17
+ <text class="uni-calendar-item__weeks-box-text uni-calendar-item__weeks-box-text-disable uni-calendar-item--checked-text">{{weeks.date}}</text>
18
+ </view>
19
+ <view :class="{'uni-calendar-item--today': weeks.isToday}"></view>
20
+ </view>
21
+ </template>
22
+
23
+ <script>
24
+ export default {
25
+ props: {
26
+ weeks: {
27
+ type: Object,
28
+ default () {
29
+ return {}
30
+ }
31
+ },
32
+ calendar: {
33
+ type: Object,
34
+ default: () => {
35
+ return {}
36
+ }
37
+ },
38
+ selected: {
39
+ type: Array,
40
+ default: () => {
41
+ return []
42
+ }
43
+ },
44
+ checkHover: {
45
+ type: Boolean,
46
+ default: false
47
+ }
48
+ },
49
+ methods: {
50
+ choiceDate(weeks) {
51
+ this.$emit('change', weeks)
52
+ },
53
+ handleMousemove(weeks) {
54
+ this.$emit('handleMouse', weeks)
55
+ }
56
+ }
57
+ }
58
+ </script>
59
+
60
+ <style lang="scss" >
61
+ $uni-primary: #007aff !default;
62
+
63
+ .uni-calendar-item__weeks-box {
64
+ flex: 1;
65
+ /* #ifndef APP-NVUE */
66
+ display: flex;
67
+ /* #endif */
68
+ flex-direction: column;
69
+ justify-content: center;
70
+ align-items: center;
71
+ margin: 1px 0;
72
+ position: relative;
73
+ }
74
+
75
+ .uni-calendar-item__weeks-box-text {
76
+ font-size: 14px;
77
+ // font-family: Lato-Bold, Lato;
78
+ font-weight: bold;
79
+ color: darken($color: $uni-primary, $amount: 40%);
80
+ }
81
+
82
+ .uni-calendar-item__weeks-box-item {
83
+ position: relative;
84
+ /* #ifndef APP-NVUE */
85
+ display: flex;
86
+ /* #endif */
87
+ flex-direction: column;
88
+ justify-content: center;
89
+ align-items: center;
90
+ width: 40px;
91
+ height: 40px;
92
+ /* #ifdef H5 */
93
+ cursor: pointer;
94
+ /* #endif */
95
+ }
96
+
97
+
98
+ .uni-calendar-item__weeks-box-circle {
99
+ position: absolute;
100
+ top: 5px;
101
+ right: 5px;
102
+ width: 8px;
103
+ height: 8px;
104
+ border-radius: 8px;
105
+ background-color: #dd524d;
106
+
107
+ }
108
+
109
+ .uni-calendar-item__weeks-box .uni-calendar-item--disable {
110
+ cursor: default;
111
+ }
112
+
113
+ .uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
114
+ color: #D1D1D1;
115
+ }
116
+
117
+ .uni-calendar-item--today {
118
+ position: absolute;
119
+ top: 10px;
120
+ right: 17%;
121
+ background-color: #dd524d;
122
+ width:6px;
123
+ height: 6px;
124
+ border-radius: 50%;
125
+ }
126
+
127
+ .uni-calendar-item--extra {
128
+ color: #dd524d;
129
+ opacity: 0.8;
130
+ }
131
+
132
+ .uni-calendar-item__weeks-box .uni-calendar-item--checked {
133
+ background-color: $uni-primary;
134
+ border-radius: 50%;
135
+ box-sizing: border-box;
136
+ border: 3px solid #fff;
137
+ }
138
+
139
+ .uni-calendar-item--checked .uni-calendar-item--checked-text {
140
+ color: #fff;
141
+ }
142
+
143
+ .uni-calendar-item--multiple .uni-calendar-item--checked-range-text {
144
+ color: #333;
145
+ }
146
+
147
+ .uni-calendar-item--multiple {
148
+ background-color: #F6F7FC;
149
+ // color: #fff;
150
+ }
151
+
152
+ .uni-calendar-item--multiple .uni-calendar-item--before-checked,
153
+ .uni-calendar-item--multiple .uni-calendar-item--after-checked {
154
+ background-color: $uni-primary;
155
+ border-radius: 50%;
156
+ box-sizing: border-box;
157
+ border: 3px solid #F6F7FC;
158
+ }
159
+
160
+ .uni-calendar-item--before-checked .uni-calendar-item--checked-text,
161
+ .uni-calendar-item--after-checked .uni-calendar-item--checked-text {
162
+ color: #fff;
163
+ }
164
+
165
+ .uni-calendar-item--before-checked-x {
166
+ border-top-left-radius: 50px;
167
+ border-bottom-left-radius: 50px;
168
+ box-sizing: border-box;
169
+ background-color: #F6F7FC;
170
+ }
171
+
172
+ .uni-calendar-item--after-checked-x {
173
+ border-top-right-radius: 50px;
174
+ border-bottom-right-radius: 50px;
175
+ background-color: #F6F7FC;
176
+ }
177
+ </style>