mali-applet-ui 1.0.67 → 1.0.68

package/lib/components/ml-form-item/ml-form-item.vue

@@ -42,7 +42,10 @@ export default {
     align: String,
     required: Boolean,
     titleAlign: String,
-    vertical: Boolean,
+    vertical: {
+      type: Boolean,
+      default: null
+    },
     visible: {
       type: Boolean,
       default: true
@@ -135,10 +138,10 @@ export default {
       return this.form ? this.form.titleAlign : ''
     },
     itemVertical () {
-      if (this.vertical) {
-        return true
+      if (this.vertical === null) {
+        return this.form ? this.form.vertical : false
       }
-      return this.form ? this.form.vertical : false
+      return !!this.vertical
     },
     itemLabelWidth () {
       let labelWidth = this.labelWidth

package/lib/components/ml-switch/ml-switch.vue

@@ -1,5 +1,11 @@
 <template>
-  <switch class="ml-switch" :class="className" :checked="value" :color="color" @change="changeEvent"></switch>
+  <view class="ml-switch" :style="styles">
+    <view v-if="openLabel && closeLabel" class="ml-switch-warpper" @tap="toggleEvent">
+      <view class="ml-switch-btn" :class="{'is-active': checked}">{{ openLabel }}</view>
+      <view class="ml-switch-btn" :class="{'is-active': !checked}">{{ closeLabel }}</view>
+    </view>
+    <switch v-else class="ml-switch-native" :class="className" :checked="checked" :color="color" @change="changeEvent"></switch>
+  </view>
 </template>
 
 <script>
@@ -9,16 +15,41 @@ export default {
     virtualHost: true
   },
   props: {
-    value: Boolean,
+    value: [String, Number, Boolean],
     color: {
       type: String,
       default: '#007aff'
     },
+    width: String,
+    openLabel: String,
+    closeLabel: String,
+    openValue: {
+      type: [String, Number, Boolean],
+      default: true
+    },
+    closeValue: {
+      type: [String, Number, Boolean],
+      default: false
+    },
     className: String
   },
+  computed: {
+    styles () {
+      const wSys = this.width ? `width: ${this.width};` : ''
+      return `${wSys}`
+    },
+    checked () {
+      return this.value === this.openValue
+    }
+  },
   methods: {
     changeEvent (e) {
-      const value = e.detail.value
+      const value = e.detail.value ? this.openValue : this.closeValue
+      this.$emit('input', value)
+      this.$emit('change', { value })
+    },
+    toggleEvent  () {
+      const value = this.checked ? this.closeValue : this.openValue
       this.$emit('input', value)
       this.$emit('change', { value })
     }
@@ -28,6 +59,28 @@ export default {
 
 <style lang="scss">
 .ml-switch {
-  transform: scale(0.8);
+  display: inline-flex;
+  .ml-switch-native {
+    transform: scale(0.8);
+  }
+  .ml-switch-warpper {
+    display: inline-flex;
+    flex-direction: row;
+    padding: 8rpx;
+    border-radius: $ml-border-radius;
+    background: #e5e6e8;
+    .ml-switch-btn {
+      flex-grow: 1;
+      padding: 0 24rpx;
+      height: 44rpx;
+      line-height: 44rpx;
+      font-size: $ml-describe-font-size;
+      transition: all 0.3s;
+      &.is-active {
+        background: #ffffff;
+        border-radius: $ml-border-radius;
+      }
+    }
+  }
 }
-</style>
+</style>

package/lib/components/ml-tree/ml-tree.vue

@@ -20,13 +20,18 @@ export default {
   props: {
     data: Array,
     height: String,
-    checkStrictly: Boolean,
-    showRadio: Boolean,
-    showCheckbox: Boolean,
+    // 是否显示顶部全选按钮
     showAllCheckbox: Boolean,
-    indeterminateToChecked: Boolean,
+    // 是是否显示顶部操作按钮
     showCheckboxBtn: Boolean,
+    // 单选框
+    showRadio: Boolean,
+    // 复选框
+    showCheckbox: Boolean,
+    // （复选框）父子不关联
+    checkStrictly: Boolean,
     checkRowKeys: Array,
+    halfRowKeys: Array,
     nodeProps: Object
   },
   provide () {
@@ -72,8 +77,7 @@ export default {
     },
     checkRowKeys (value) {
       if (!this.isCheckboxModelUpdate) {
-        this.selectCheckboxRowKeys = []
-        this.setCheckboxRow(value, true)
+        this.initCheckboxRows(value)
       }
       this.isCheckboxModelUpdate = false
     }
@@ -135,6 +139,7 @@ export default {
       this.isCheckboxModelUpdate = true
       this.$emit('checkbox-change', { row: nodeData, checked, checkedKeys: this.selectCheckboxRowKeys })
       this.$emit('update:checkRowKeys', [...this.selectCheckboxRowKeys])
+      this.$emit('update:halfRowKeys', [...this.indeterminateRowKeys])
     },
     expandNodeEvent ({ nodeData, nodeKey }) {
       const nodeIndex = this.expandRowKeys.indexOf(nodeKey)
@@ -183,6 +188,17 @@ export default {
       this.isAllCheckboxChecked = this.treeData.every(item => this.selectCheckboxRowKeys.includes(item[keyField]))
       this.isAllCheckboxIndeterminate = !this.isAllCheckboxChecked && this.treeData.some(item => this.selectCheckboxRowKeys.includes(item[keyField]))
     },
+    initCheckboxRows (selecKeys) {
+      this.selectCheckboxRowKeys = []
+      this.indeterminateRowKeys = []
+      selecKeys.forEach(nodeKey => {
+        if (!this.selectCheckboxRowKeys.includes(nodeKey)) {
+          this.selectCheckboxRowKeys.push(nodeKey)
+        }
+      })
+      // 更新全部节点半选状态
+      this.updateCheckStatus()
+    },
     setCheckboxRow (key, checked) {
       let keys = key
       if (!XEUtils.isArray(key)) {
@@ -209,6 +225,7 @@ export default {
       this.isCheckboxModelUpdate = true
       this.$emit('checkbox-all', { checkedKeys: this.selectCheckboxRowKeys, checkedRows: [] })
       this.$emit('update:checkRowKeys', [...this.selectCheckboxRowKeys])
+      this.$emit('update:halfRowKeys', [...this.indeterminateRowKeys])
     },
     toggleAllCheckboxRow () {
       const { keyField, childrenField } = this

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mali-applet-ui",
-  "version": "1.0.67",
+  "version": "1.0.68",
   "description": "码里云小程序组件库",
   "files": [
     "lib",