mali-applet-ui 1.0.30 → 1.0.32

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/README.md CHANGED
@@ -2,9 +2,31 @@
2
2
 
3
3
  Mali-Applet-UI 码里云小程序组件库
4
4
 
5
+ ## 初始化/更新依赖
6
+
7
+ ```
8
+ npm run update
9
+ ```
10
+
11
+ ## 运行项目
12
+
13
+ ### 本地环境
14
+
15
+ #### 运行(微信小程序)
16
+
17
+ ```
18
+ npm run serve:mp-weixin
19
+ ```
20
+
21
+ #### 运行(钉钉小程序)
22
+
23
+ ```
24
+ npm run serve:mp-dingtalk
25
+ ```
26
+
5
27
  ## 发布npm
6
28
 
7
- 需要先登陆
29
+ 需要先登陆NPM
8
30
 
9
31
  ```
10
32
  npm run release
package/config/store.js CHANGED
@@ -55,6 +55,10 @@ const globalStore = {
55
55
  resultText: '暂无相关结果',
56
56
  resultHint: '请检查输入是否正确'
57
57
  }
58
+ },
59
+ notData: {
60
+ emptyUrl: '',
61
+ emptyText: '暂无记录'
58
62
  }
59
63
  }
60
64
 
@@ -12,7 +12,7 @@
12
12
  <ml-icon name="delete-filling"></ml-icon>
13
13
  </view>
14
14
  <view v-else class="ml-cascader-picker-icon">
15
- <ml-icon name="arrow-down" />
15
+ <ml-icon name="arrow-right" />
16
16
  </view>
17
17
  </view>
18
18
 
@@ -10,7 +10,10 @@ export default {
10
10
  },
11
11
  props: {
12
12
  value: String,
13
- border: Boolean,
13
+ border: {
14
+ type: Boolean,
15
+ default: false
16
+ },
14
17
  minDate: [String, Number],
15
18
  maxDate: [String, Number],
16
19
  clearable: Boolean,
@@ -40,4 +43,4 @@ export default {
40
43
  }
41
44
  }
42
45
  }
43
- </script>
46
+ </script>
@@ -1,5 +1,8 @@
1
1
  <template>
2
- <view class="ml-form-item" :class="[className || '', itemTitleAlign ? `title-align-${itemTitleAlign}` : '', itemAlign ? `align-${itemAlign}` : '', {'is-border': isFormBorder, 'is-vertical': itemVertical, 'is-required': isRequired, 'is-error': itemErrRule}]">
2
+ <view
3
+ class="ml-form-item"
4
+ :class="[className || '', itemTitleAlign ? `title-align-${itemTitleAlign}` : '', itemAlign ? `align-${itemAlign}` : '', {'is-visible': visible, 'is-border': isFormBorder, 'is-vertical': itemVertical, 'is-required': isRequired, 'is-error': itemErrRule}]"
5
+ :style="styles">
3
6
  <view v-if="title || $slots.title" class="ml-form-item-header" :style="titleStyle">
4
7
  <view v-if="isRequired" class="ml-form-item-header-asterisk">*</view>
5
8
  <view class="ml-form-item-header-title">
@@ -9,13 +12,13 @@
9
12
  <view class="ml-form-item-content">
10
13
  <view class="ml-form-item-content-warpper">
11
14
  <slot>
12
- <ml-input v-if="matchComponent('MlInput')" :value="itemValue" border @change="modelEvent"></ml-input>
13
- <ml-number-input v-else-if="matchComponent('MlNumberInput')" :value="itemValue" border @change="modelEvent"></ml-number-input>
14
- <ml-date-picker v-else-if="matchComponent('MlDatePicker')" :value="itemValue" border @change="modelEvent"></ml-date-picker>
15
- <ml-select-picker v-else-if="matchComponent('MlSelectPicker')" :value="itemValue" :options="renderOpts.options" border @change="modelEvent"></ml-select-picker>
16
- <ml-textarea v-else-if="matchComponent('MlTextarea')" :value="itemValue" :rows="renderOpts.rows || 3" :showVoice="renderOpts.showVoice || true" border @change="modelEvent"></ml-textarea>
15
+ <ml-input v-if="matchComponent('MlInput')" :value="itemValue" @change="modelEvent"></ml-input>
16
+ <ml-number-input v-else-if="matchComponent('MlNumberInput')" :value="itemValue" @change="modelEvent"></ml-number-input>
17
+ <ml-date-picker v-else-if="matchComponent('MlDatePicker')" :value="itemValue" @change="modelEvent"></ml-date-picker>
18
+ <ml-select-picker v-else-if="matchComponent('MlSelectPicker')" :value="itemValue" :options="renderOpts.options" @change="modelEvent"></ml-select-picker>
19
+ <ml-textarea v-else-if="matchComponent('MlTextarea')" :value="itemValue" :rows="renderOpts.rows || 3" :showVoice="renderOpts.showVoice || true" @change="modelEvent"></ml-textarea>
17
20
  <ml-upload v-else-if="matchComponent('MlUpload')" :value="itemValue" :mediatype="renderOpts.mediatype || 'image'" @change="modelEvent"></ml-upload>
18
- <ml-amount-input v-else-if="matchComponent('MlAmountInput')" :value="itemValue" :showTip="itemVertical" border @change="modelEvent"></ml-amount-input>
21
+ <ml-amount-input v-else-if="matchComponent('MlAmountInput')" :value="itemValue" :showTip="itemVertical" @change="modelEvent"></ml-amount-input>
19
22
  <ml-amount-text v-else-if="matchComponent('MlAmountText')" :value="itemValue" @change="modelEvent"></ml-amount-text>
20
23
  <text v-else class="ml-form-item-default-content">{{ itemValue }}</text>
21
24
  </slot>
@@ -40,8 +43,13 @@ export default {
40
43
  required: Boolean,
41
44
  titleAlign: String,
42
45
  vertical: Boolean,
46
+ visible: {
47
+ type: Boolean,
48
+ default: true
49
+ },
43
50
  labelWidth: String,
44
51
  itemRender: Object,
52
+ itemStyle: Object,
45
53
  className: String
46
54
  },
47
55
  inject: {
@@ -61,6 +69,15 @@ export default {
61
69
  }
62
70
  },
63
71
  computed: {
72
+ styles () {
73
+ let rest = ''
74
+ for (const key in this.itemStyle) {
75
+ if (!XEUtils.eqNull(this.itemStyle[key])) {
76
+ rest += `${key}:${this.itemStyle[key]};`
77
+ }
78
+ }
79
+ return rest
80
+ },
64
81
  titleStyle () {
65
82
  if (this.itemVertical) {
66
83
  return ''
@@ -186,10 +203,13 @@ export default {
186
203
  <style lang="scss">
187
204
  .ml-form-item {
188
205
  position: relative;
189
- display: flex;
206
+ display: none;
190
207
  flex-direction: row;
191
208
  padding: 10rpx 20rpx;
192
209
  font-size: $ml-base-font-size;
210
+ &.is-visible {
211
+ display: flex;
212
+ }
193
213
  &.is-border {
194
214
  border-bottom: 1px solid #e5e5e5;
195
215
  }
@@ -267,6 +287,7 @@ export default {
267
287
  .ml-form-item-content-warpper {
268
288
  width: 100%;
269
289
  padding: 10rpx 0;
290
+ word-break: break-all;
270
291
  }
271
292
  .ml-form-item-default-content {
272
293
  vertical-align: middle;
@@ -41,6 +41,7 @@
41
41
 
42
42
  <script>
43
43
  import { getPlatformEnv } from '../../../utils'
44
+ import XEUtils from 'xe-utils'
44
45
 
45
46
  export default {
46
47
  name: 'MlInput',
@@ -103,11 +104,11 @@ export default {
103
104
  },
104
105
  watch: {
105
106
  value (val) {
106
- this.inpVal = val
107
+ this.inpVal = XEUtils.toValueString(val)
107
108
  }
108
109
  },
109
110
  created () {
110
- this.inpVal = this.value
111
+ this.inpVal = XEUtils.toValueString(this.value)
111
112
  },
112
113
  methods: {
113
114
  inputEvent () {
@@ -101,8 +101,8 @@ export default {
101
101
  }
102
102
  },
103
103
  getList () {
104
- this.loading = true
105
104
  if (this.requestMethod) {
105
+ this.loading = true
106
106
  return Promise.resolve(
107
107
  this.requestMethod.call(this.currVM, this.getParams())
108
108
  ).then(res => {
@@ -2,7 +2,9 @@
2
2
  <picker :value="value" class="ml-month-picker" mode="date" fields="month" @change="changeEvent">
3
3
  <view class="ml-month-picker-warpper" :class="[className || '', {'is-border': border}]">
4
4
  <view class="ml-month-picker-text">{{ value || '请选择' }}</view>
5
- <ml-icon class="ml-month-picker-icon" name="arrow-down"></ml-icon>
5
+ <view class="ml-month-picker-icon">
6
+ <ml-icon name="arrow-right"></ml-icon>
7
+ </view>
6
8
  </view>
7
9
  </picker>
8
10
  </template>
@@ -1,14 +1,14 @@
1
1
  <template>
2
2
  <view class="ml-not-data">
3
3
  <slot>
4
- <view v-if="emptyUrl || $slots.icon" class="ml-not-data-image">
4
+ <view v-if="emptyImgUrl || $slots.icon" class="ml-not-data-image">
5
5
  <slot name="icon">
6
- <image class="ml-not-data-image-icon" :src="emptyUrl" mode="aspectFit"></image>
6
+ <image class="ml-not-data-image-icon" :src="emptyImgUrl" mode="aspectFit"></image>
7
7
  </slot>
8
8
  </view>
9
- <view v-if="emptyText || $slots.text" class="ml-not-data-text">
9
+ <view v-if="emptyContentText || $slots.text" class="ml-not-data-text">
10
10
  <slot name="text">
11
- <text>{{ emptyText || '暂无数据!' }}</text>
11
+ <text>{{ emptyContentText }}</text>
12
12
  </slot>
13
13
  </view>
14
14
  <view v-if="emptyHint || $slots.hint" class="ml-not-data-hint">
@@ -24,12 +24,22 @@
24
24
  </template>
25
25
 
26
26
  <script>
27
+ import globalStore from '../../../config/store'
28
+
27
29
  export default {
28
30
  name: 'MlNotData',
29
31
  props: {
30
32
  emptyUrl: String,
31
33
  emptyText: String,
32
34
  emptyHint: String
35
+ },
36
+ computed: {
37
+ emptyImgUrl () {
38
+ return this.emptyUrl || globalStore.notData.emptyUrl
39
+ },
40
+ emptyContentText () {
41
+ return this.emptyText || globalStore.notData.emptyText
42
+ }
33
43
  }
34
44
  }
35
45
  </script>
@@ -12,7 +12,7 @@
12
12
  <ml-icon name="delete-filling"></ml-icon>
13
13
  </view>
14
14
  <view v-else class="ml-province-city-picker-icon">
15
- <ml-icon name="arrow-down" />
15
+ <ml-icon name="arrow-right" />
16
16
  </view>
17
17
  </view>
18
18
 
@@ -12,7 +12,7 @@
12
12
  <ml-icon name="delete-filling"></ml-icon>
13
13
  </view>
14
14
  <view v-else class="ml-select-picker-icon">
15
- <ml-icon name="arrow-down" />
15
+ <ml-icon name="arrow-right" />
16
16
  </view>
17
17
  </view>
18
18
  </picker>
@@ -75,7 +75,6 @@ export default {
75
75
  .ml-tabs-header {
76
76
  background: #fff;
77
77
  padding-bottom: 10rpx;
78
- margin-bottom: 20rpx;
79
78
  }
80
79
  .ml-tabs-content {
81
80
  display: flex;
@@ -90,7 +89,7 @@ export default {
90
89
  text-align: center;
91
90
  .ml-tabs-nav-title {
92
91
  position: relative;
93
- padding: 10rpx 20rpx;
92
+ padding: 10rpx 10rpx;
94
93
  }
95
94
  &.is-active {
96
95
  .ml-tabs-nav-title {
@@ -36,6 +36,7 @@
36
36
 
37
37
  <script>
38
38
  import { getPlatformEnv } from '../../../utils'
39
+ import XEUtils from 'xe-utils'
39
40
  // import VoiceInput from './voice-input.vue'
40
41
 
41
42
  export default {
@@ -103,11 +104,11 @@ export default {
103
104
  },
104
105
  watch: {
105
106
  value (val) {
106
- this.inpVal = val
107
+ this.inpVal = XEUtils.toValueString(val)
107
108
  }
108
109
  },
109
110
  created () {
110
- this.inpVal = this.value
111
+ this.inpVal = XEUtils.toValueString(this.value)
111
112
  },
112
113
  methods: {
113
114
  inputEvent () {
@@ -2,7 +2,9 @@
2
2
  <picker :value="value" class="ml-year-picker" mode="date" fields="year" @change="changeEvent">
3
3
  <view class="ml-year-picker-warpper" :class="[className || '', {'is-border': border}]">
4
4
  <view class="ml-year-picker-text">{{ value || '请选择' }}</view>
5
- <ml-icon class="ml-year-picker-icon" name="arrow-down"></ml-icon>
5
+ <view class="ml-year-picker-icon">
6
+ <ml-icon name="arrow-right"></ml-icon>
7
+ </view>
6
8
  </view>
7
9
  </picker>
8
10
  </template>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mali-applet-ui",
3
- "version": "1.0.30",
3
+ "version": "1.0.32",
4
4
  "description": "码里云小程序组件库",
5
5
  "files": [
6
6
  "lib",
package/theme.scss CHANGED
@@ -6,9 +6,9 @@ $ml-font-color: rgba(0, 0, 0, 0.85);
6
6
 
7
7
  // 字体
8
8
  $ml-base-font-size: 34rpx;
9
- // 副标题体
9
+ // 副标题字体
10
10
  $ml-subhead-font-size: 30rpx;
11
- // 描述体
11
+ // 描述字体
12
12
  $ml-describe-font-size: 28rpx;
13
13
 
14
14
  // 页面间隔宽度