mali-applet-ui 0.2.38 → 0.2.39

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 (6) hide show
  1. package/README.md +6 -0
  2. package/components/ml-modal/ml-modal.vue +18 -22
  3. package/components/ml-number-input/ml-number-input.vue +11 -4
  4. package/components/ml-picker-drawer/ml-picker-drawer.vue +101 -0
  5. package/components/ml-province-city-picker/ml-province-city-picker.vue +2 -2
  6. package/package.json +1 -1
package/README.md CHANGED
@@ -2,6 +2,12 @@
2
2
 
3
3
  Mali-Applet-UI 码里云小程序组件库
4
4
 
5
+ ## 发布npm
6
+
7
+ ```
8
+ npm run release
9
+ ```
10
+
5
11
  ## 安装
6
12
 
7
13
  ```bash
package/components/ml-modal/ml-modal.vue CHANGED
@@ -1,17 +1,17 @@
1
1
  <template>
2
- <view class="ml-modal" :class="[className || '', `placement-${placement || 'bottom'}`, {'is-visible': visible}]" @tap="tapMaskEvent">
3
- <view v-if="visible" class="ml-drawer-warpper" @tap.stop.prevent>
4
- <view v-if="showHeader" class="ml-drawer-header">
2
+ <view class="ml-modal" :class="[className || '', {'is-visible': visible}]" @tap="tapMaskEvent">
3
+ <view v-if="visible" class="ml-modal-warpper" @tap.stop.prevent>
4
+ <view v-if="showHeader" class="ml-modal-header">
5
5
  <slot name="header">
6
- <view v-if="title" class="ml-drawer-header-title">{{ title }}</view>
6
+ <view v-if="title" class="ml-modal-header-title">{{ title }}</view>
7
7
  </slot>
8
8
  </view>
9
- <view class="ml-drawer-body" :style="bodyStyles">
9
+ <view class="ml-modal-body" :style="bodyStyles">
10
10
  <scroll-view scroll-y>
11
11
  <slot></slot>
12
12
  </scroll-view>
13
13
  </view>
14
- <view v-if="showConfirmButton || showCancelButton || showFooter" class="ml-drawer-footer">
14
+ <view v-if="showConfirmButton || showCancelButton || showFooter" class="ml-modal-footer">
15
15
  <slot name="footer">
16
16
  <ml-button v-if="showCancelButton" @click="cancelEvent">{{ cancelButtonText }}</ml-button>
17
17
  <ml-button v-if="showConfirmButton" status="primary" @click="confirmEvent">{{ confirmButtonText }}</ml-button>
@@ -34,7 +34,6 @@ export default {
34
34
  default: true
35
35
  },
36
36
  showFooter: Boolean,
37
- placement: String,
38
37
  maskClosable: {
39
38
  type: Boolean,
40
39
  default: true
@@ -58,8 +57,7 @@ export default {
58
57
  },
59
58
  data () {
60
59
  return {
61
- visible: false,
62
- animateTime: null
60
+ visible: false
63
61
  }
64
62
  },
65
63
  computed: {
@@ -89,13 +87,11 @@ export default {
89
87
  },
90
88
  methods: {
91
89
  close () {
92
- clearTimeout(this.animateTime)
93
90
  this.visible = false
94
91
  this.$emit('input', false)
95
92
  this.$emit('hide', {})
96
93
  },
97
94
  open () {
98
- clearTimeout(this.animateTime)
99
95
  this.visible = true
100
96
  this.$emit('show', {})
101
97
  this.$emit('input', true)
@@ -122,7 +118,7 @@ export default {
122
118
  </script>
123
119
 
124
120
  <style lang="scss">
125
- .ml-drawer {
121
+ .ml-modal {
126
122
  display: none;
127
123
  position: fixed;
128
124
  top: 0;
@@ -138,15 +134,14 @@ export default {
138
134
  &.is-visible {
139
135
  display: block;
140
136
  }
141
- .ml-drawer-warpper {
137
+ .ml-modal-warpper {
142
138
  position: absolute;
143
- bottom: 0;
144
- left: 0;
145
- padding-bottom: 20rpx;
139
+ top: 50%;
140
+ left: 50%;
141
+ transform: translate(-50%, -50%);
146
142
  background: #fff;
147
- transition: transform 0.25s ease, transform 0.3s ease;
148
143
  }
149
- .ml-drawer-header {
144
+ .ml-modal-header {
150
145
  display: flex;
151
146
  flex-direction: row;
152
147
  align-items: center;
@@ -154,18 +149,19 @@ export default {
154
149
  min-height: 90rpx;
155
150
  font-size: $uni-font-size-lg;
156
151
  }
157
- .ml-drawer-header-title {
152
+ .ml-modal-header-title {
158
153
  text-align: center;
159
154
  overflow: hidden;
160
155
  text-overflow: ellipsis;
161
156
  white-space: nowrap;
162
157
  }
163
- .ml-drawer-body {
158
+ .ml-modal-body {
164
159
  padding: 20rpx;
160
+ width: 600rpx;
165
161
  overflow: auto;
166
- height: 500rpx;
162
+ max-height: 600rpx;
167
163
  }
168
- .ml-drawer-footer {
164
+ .ml-modal-footer {
169
165
  display: flex;
170
166
  flex-direction: row;
171
167
  align-items: center;
package/components/ml-number-input/ml-number-input.vue CHANGED
@@ -56,6 +56,7 @@ export default {
56
56
  },
57
57
  min: [String, Number],
58
58
  max: [String, Number],
59
+ step: [String, Number],
59
60
  controls: Boolean,
60
61
  placeholder: {
61
62
  type: String,
@@ -90,16 +91,22 @@ export default {
90
91
  },
91
92
  minNum () {
92
93
  if (XEUtils.isNumber(this.min) || this.min) {
93
- return Number(this.min || 0)
94
+ return XEUtils.toNumber(this.min || 0)
94
95
  }
95
96
  return null
96
97
  },
97
98
  maxNum () {
98
99
  if (XEUtils.isNumber(this.max) || this.max) {
99
- return Number(this.max)
100
+ return XEUtils.toNumber(this.max)
100
101
  }
101
102
  return null
102
103
  },
104
+ stepNum () {
105
+ if (XEUtils.isNumber(this.step) || this.step) {
106
+ return XEUtils.toNumber(this.step) || 1
107
+ }
108
+ return 1
109
+ }
103
110
  },
104
111
  watch: {
105
112
  value (val) {
@@ -140,7 +147,7 @@ export default {
140
147
  minusEvent () {
141
148
  const numVal = XEUtils.toNumber(this.inpVal)
142
149
  if (this.minNum === null || (numVal > this.minNum)) {
143
- this.inpVal = numVal - 1
150
+ this.inpVal = numVal - this.stepNum
144
151
  this.$emit('input', this.inpVal)
145
152
  this.$emit('change', {})
146
153
  }
@@ -148,7 +155,7 @@ export default {
148
155
  plusEvent () {
149
156
  const numVal = XEUtils.toNumber(this.inpVal)
150
157
  if (this.maxNum === null || (numVal < this.maxNum)) {
151
- this.inpVal = numVal + 1
158
+ this.inpVal = numVal + this.stepNum
152
159
  this.$emit('input', this.inpVal)
153
160
  this.$emit('change', {})
154
161
  }
package/components/ml-picker-drawer/ml-picker-drawer.vue ADDED
@@ -0,0 +1,101 @@
1
+ <template>
2
+ <ml-drawer :value="value" :title="title" :height="height" :maskClosable="maskClosable" :showFooter="showFooter" placement="bottom" cancelClosable confirmClosable showHeader @input="inputEvent">
3
+ <template #header>
4
+ <view class="ml-picker-drawer-header">
5
+ <view class="ml-picker-drawer-title">
6
+ <ml-row>
7
+ <ml-col shrink @click="cancelEvent">
8
+ <view class="ml-picker-drawer-close-btn">
9
+ <ml-icon name="close" />
10
+ </view>
11
+ </ml-col>
12
+ <ml-col align="center">{{ title }}</ml-col>
13
+ <ml-col shrink>
14
+ <view class="ml-picker-drawer-confirm-btn">
15
+ <ml-button type="text" @click="confirmEvent">确定</ml-button>
16
+ </view>
17
+ </ml-col>
18
+ </ml-row>
19
+ </view>
20
+ <view class="ml-picker-drawer-top">
21
+ <slot name="top"></slot>
22
+ </view>
23
+ </view>
24
+ </template>
25
+ <template>
26
+ <slot></slot>
27
+ </template>
28
+ <template #footer>
29
+ <slot name="footer"></slot>
30
+ </template>
31
+ </ml-drawer>
32
+ </template>
33
+
34
+ <script>
35
+ export default {
36
+ name: 'MlPickerDrawer',
37
+ props: {
38
+ value: Boolean,
39
+ title: {
40
+ type: String,
41
+ default: '请选择'
42
+ },
43
+ height: String,
44
+ showFooter: Boolean,
45
+ placement: String,
46
+ maskClosable: {
47
+ type: Boolean,
48
+ default: true
49
+ },
50
+ maskClosable: {
51
+ type: Boolean,
52
+ default: true
53
+ },
54
+ confirmClosable: Boolean,
55
+ cancelClosable: {
56
+ type: Boolean,
57
+ default: true
58
+ },
59
+ className: String
60
+ },
61
+ data () {
62
+ return {
63
+ }
64
+ },
65
+ methods: {
66
+ cancelEvent () {
67
+ if (this.cancelClosable) {
68
+ this.$emit('input', false)
69
+ }
70
+ this.$emit('cancel', {})
71
+ },
72
+ confirmEvent () {
73
+ if (this.confirmClosable) {
74
+ this.$emit('input', false)
75
+ }
76
+ this.$emit('confirm', {})
77
+ },
78
+ inputEvent (value) {
79
+ this.$emit('input', value)
80
+ }
81
+ }
82
+ }
83
+ </script>
84
+
85
+ <style lang="scss">
86
+ .ml-picker-drawer-header {
87
+ display: block;
88
+ width: 100%;
89
+ .ml-picker-drawer-title {
90
+ height: 80rpx;
91
+ line-height: 80rpx;
92
+ }
93
+ .ml-picker-drawer-close-btn {
94
+ width: 80rpx;
95
+ text-align: center;
96
+ }
97
+ .ml-picker-drawer-confirm-btn {
98
+ padding-left: 20rpx;
99
+ }
100
+ }
101
+ </style>
package/components/ml-province-city-picker/ml-province-city-picker.vue CHANGED
@@ -16,7 +16,7 @@
16
16
  </view>
17
17
  </view>
18
18
 
19
- <ml-drawer v-model="showPopup" title="请选择省/市" height="500rpx" showConfirmButton showCancelButton @confirm="confirmEvent">
19
+ <ml-picker-drawer v-model="showPopup" title="请选择省/市" height="500rpx" showConfirmButton showCancelButton @confirm="confirmEvent">
20
20
  <picker-view v-if="showPicker" :value="selectVals" @change="changeEvent" style="height: 400rpx;text-align: center;">
21
21
  <picker-view-column>
22
22
  <view class="ml-province-city-picker-picker-item" v-for="(item, index) in provinceList" :key="index">{{ item[optLabelField] }}</view>
@@ -25,7 +25,7 @@
25
25
  <view class="ml-province-city-picker-picker-item" v-for="(item, index) in cityList" :key="index">{{ item[optLabelField] }}</view>
26
26
  </picker-view-column>
27
27
  </picker-view>
28
- </ml-drawer>
28
+ </ml-picker-drawer>
29
29
  </view>
30
30
  </template>
31
31
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mali-applet-ui",
3
- "version": "0.2.38",
3
+ "version": "0.2.39",
4
4
  "description": "码里云小程序组件库",
5
5
  "scripts": {
6
6
  "release": "node script/release.js && npm publish"