mali-applet-ui 1.0.174 → 1.0.176

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.
Files changed (4) hide show
  1. package/lib/components/fix-uni-datetime-picker/time-picker.vue +15 -2
  2. package/lib/components/ml-calendar/ml-calendar.vue +8 -2
  3. package/lib/components/ml-switch/ml-switch.vue +128 -42
  4. package/package.json +1 -1
package/lib/components/fix-uni-datetime-picker/time-picker.vue CHANGED
@@ -41,7 +41,7 @@
41
41
  <text class="uni-datetime-picker-sign sign-right">-</text>
42
42
  </view>
43
43
  <view v-if="timeShow" class="uni-datetime-picker__container-box">
44
- <picker-view class="uni-datetime-picker-view" :class="[hideSecond ? 'time-hide-second' : '']"
44
+ <picker-view v-if="hideSecond" class="uni-datetime-picker-view time-hide-second"
45
45
  :indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
46
46
  <picker-view-column>
47
47
  <view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
@@ -53,7 +53,20 @@
53
53
  <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
54
54
  </view>
55
55
  </picker-view-column>
56
- <picker-view-column v-if="!hideSecond">
56
+ </picker-view>
57
+ <picker-view v-else class="uni-datetime-picker-view"
58
+ :indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
59
+ <picker-view-column>
60
+ <view class="uni-datetime-picker-item" v-for="(item,index) in hours" :key="index">
61
+ <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
62
+ </view>
63
+ </picker-view-column>
64
+ <picker-view-column>
65
+ <view class="uni-datetime-picker-item" v-for="(item,index) in minutes" :key="index">
66
+ <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
67
+ </view>
68
+ </picker-view-column>
69
+ <picker-view-column>
57
70
  <view class="uni-datetime-picker-item" v-for="(item,index) in seconds" :key="index">
58
71
  <text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
59
72
  </view>
package/lib/components/ml-calendar/ml-calendar.vue CHANGED
@@ -29,7 +29,7 @@
29
29
  <view class="ml-calendar-date-day-text" :class="{'today': item.isToday}" v-if="item.isToday">今</view>
30
30
  <view class="ml-calendar-date-day-text" v-else>{{ item.day }}</view>
31
31
  <view class="ml-calendar-date-day-dots">
32
- <view class="ml-calendar-date-day-status" v-for="(status, sIndex) in item.statusList" :key="sIndex" :class="[`ss-${status}`]"></view>
32
+ <view class="ml-calendar-date-day-status" v-for="(sItem) in item.statusList" :key="sItem.key" :class="[`ss-${sItem.value}`]"></view>
33
33
  </view>
34
34
  <view class="ml-calendar-date-day-dots">
35
35
  <view class="ml-calendar-date-day-status" :style="{ backgroundColor: item.color }" v-if="item.color"></view>
@@ -116,7 +116,13 @@ export default {
116
116
  list.forEach(item => {
117
117
  if (dateMaps[item.date]) {
118
118
  const status = dateMaps[item.date].status
119
- item.statusList = (XEUtils.isArray(status) ? status : [status]).slice(0, 2)
119
+ item.statusList = (XEUtils.isArray(status) ? status : [status]).slice(0, 2).map((status, i) => {
120
+ return {
121
+ key: i,
122
+ value: status,
123
+ label: status
124
+ }
125
+ })
120
126
  }
121
127
  })
122
128
  })
package/lib/components/ml-switch/ml-switch.vue CHANGED
@@ -1,10 +1,10 @@
1
1
  <template>
2
- <view class="ml-switch" :style="styles">
3
- <view v-if="openLabel && closeLabel" class="ml-switch-warpper" @tap="toggleEvent">
4
- <view class="ml-switch-btn" :class="{'is-active': checked}">{{ openLabel }}</view>
5
- <view class="ml-switch-btn" :class="{'is-active': !checked}">{{ closeLabel }}</view>
2
+ <view class="ml-switch" :class="[isChecked ? 'is--on' : 'is--off', {'is--disabled': disabled,'is--animat': this.hasAnimat}]">
3
+ <view class="ml-switch--button" @tap="clickEvent">
4
+ <view class="ml-switch--label ml-switch--label-on">{{ onShowLabel }}</view>
5
+ <view class="ml-switch--label ml-switch--label-off">{{ offShowLabel }}</view>
6
+ <view class="ml-switch--icon"></view>
6
7
  </view>
7
- <switch v-else class="ml-switch-native" :class="className" :checked="checked" :color="color" @change="changeEvent"></switch>
8
8
  </view>
9
9
  </template>
10
10
 
@@ -16,10 +16,6 @@ export default {
16
16
  },
17
17
  props: {
18
18
  value: [String, Number, Boolean],
19
- color: {
20
- type: String,
21
- default: '#007aff'
22
- },
23
19
  width: String,
24
20
  openLabel: String,
25
21
  closeLabel: String,
@@ -31,27 +27,42 @@ export default {
31
27
  type: [String, Number, Boolean],
32
28
  default: false
33
29
  },
30
+ disabled: Boolean,
34
31
  className: String
35
32
  },
33
+ data () {
34
+ return {
35
+ isActivated: false,
36
+ hasAnimat: false
37
+ }
38
+ },
36
39
  computed: {
37
- styles () {
38
- const wSys = this.width ? `width: ${this.width};` : ''
39
- return `${wSys}`
40
- },
41
- checked () {
40
+ isChecked () {
42
41
  return this.value === this.openValue
42
+ },
43
+ onShowLabel () {
44
+ return this.openLabel || ''
45
+ },
46
+ offShowLabel () {
47
+ return this.closeLabel || ''
43
48
  }
44
49
  },
45
50
  methods: {
46
- changeEvent (e) {
47
- const value = e.detail.value ? this.openValue : this.closeValue
48
- this.$emit('input', value)
49
- this.$emit('change', { value })
50
- },
51
- toggleEvent () {
52
- const value = this.checked ? this.closeValue : this.openValue
53
- this.$emit('input', value)
54
- this.$emit('change', { value })
51
+ clickEvent (evnt) {
52
+ if (!this.disabled) {
53
+ clearTimeout(this.activeTimeout)
54
+ const value = this.isChecked ? this.closeValue : this.openValue
55
+ this.hasAnimat = true
56
+ this.$emit('input', value)
57
+ this.$emit('change', { value })
58
+ // 自动更新校验状态
59
+ if (this.$xeform && this.$xeformiteminfo) {
60
+ this.$xeform.triggerItemEvent(evnt, this.$xeformiteminfo.itemConfig.field, value)
61
+ }
62
+ this.activeTimeout = setTimeout(() => {
63
+ this.hasAnimat = false
64
+ }, 400)
65
+ }
55
66
  }
56
67
  }
57
68
  }
@@ -59,28 +70,103 @@ export default {
59
70
 
60
71
  <style lang="scss">
61
72
  .ml-switch {
62
- display: inline-flex;
63
- .ml-switch-native {
64
- transform: scale(0.8);
65
- }
66
- .ml-switch-warpper {
67
- display: inline-flex;
68
- flex-direction: row;
69
- padding: 8rpx;
70
- border-radius: $ml-border-radius;
71
- background: #e5e6e8;
72
- .ml-switch-btn {
73
- flex-grow: 1;
74
- padding: 0 24rpx;
75
- height: 44rpx;
76
- line-height: 44rpx;
77
- font-size: $ml-describe-font-size;
73
+ display: inline-block;
74
+ color: $ml-font-color;
75
+ vertical-align: middle;
76
+ padding: 12rpx;
77
+ user-select: none;
78
+ text-align: center;
79
+ &.is--animat {
80
+ .ml-switch--button {
81
+ transition: border-color .3s, background-color .3s;
82
+ }
83
+ .ml-switch--icon {
78
84
  transition: all 0.3s;
79
- &.is-active {
80
- background: #ffffff;
81
- border-radius: $ml-border-radius;
85
+ }
86
+ }
87
+ &.is--on {
88
+ .ml-switch--button {
89
+ padding-right: 40rpx;
90
+ background-color: $ml-theme-primary-color;
91
+ }
92
+ .ml-switch--icon {
93
+ left: 100%;
94
+ transform: translateX(-38rpx);
95
+ }
96
+ }
97
+ &.is--off {
98
+ .ml-switch--button {
99
+ padding-left: 40rpx;
100
+ background-color: rgba(0,0,0,0.35);
101
+ }
102
+ .ml-switch--icon {
103
+ left: 6rpx;
104
+ transform: translateX(0);
105
+ }
106
+ }
107
+ &.is--on .ml-switch--label-off,
108
+ &.is--off .ml-switch--label-on {
109
+ height: 0;
110
+ visibility: hidden;
111
+ overflow: hidden;
112
+ }
113
+ &.is--on,
114
+ &.is--off {
115
+ .ml-switch--label {
116
+ opacity: 1;
117
+ }
118
+ }
119
+ &:not(.is--disabled) {
120
+ .ml-switch--button {
121
+ cursor: pointer;
122
+ &:focus {
123
+ box-shadow: 0 0 8rpx 0 #246BFD;
82
124
  }
83
125
  }
84
126
  }
127
+ &.is--disabled {
128
+ .ml-switch--button {
129
+ cursor: no-drop;
130
+ }
131
+ &.is--on {
132
+ .ml-switch--button {
133
+ background-color: lighten(#246BFD, 20%);
134
+ }
135
+ }
136
+ &.is--off {
137
+ .ml-switch--button {
138
+ background-color: rgba(0,0,0,0.15)
139
+ }
140
+ }
141
+ }
142
+ .ml-switch--button {
143
+ display: block;
144
+ position: relative;
145
+ height: 46rpx;
146
+ line-height: 46rpx;
147
+ min-width: 80rpx;
148
+ padding: 0 14rpx;
149
+ border-radius: 46rpx;
150
+ border: 0;
151
+ outline: 0;
152
+ }
153
+ .ml-switch--label {
154
+ opacity: 0;
155
+ display: block;
156
+ color: #fff;
157
+ font-size: 22rpx;
158
+ }
159
+ .ml-switch--icon {
160
+ position: absolute;
161
+ top: 7rpx;
162
+ left: 0;
163
+ width: 34rpx;
164
+ height: 34rpx;
165
+ border-radius: 50%;
166
+ background-color: #fff;
167
+ }
168
+ .ml-switch--label-icon {
169
+ margin-right: 10rpx;
170
+ }
85
171
  }
86
172
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mali-applet-ui",
3
- "version": "1.0.174",
3
+ "version": "1.0.176",
4
4
  "description": "vue2 码里云小程序组件库",
5
5
  "files": [
6
6
  "lib",