mali-applet-ui 1.0.9 → 1.0.11

package/lib/components/ml-amount-input/ml-amount-input.vue

@@ -236,6 +236,10 @@ export default {
     }
   }
   &.is-border {
+    .ml-amount-input-clear-icon {
+      border: 1px solid #e5e5e5;
+      border-left: 0;
+    }
     .ml-amount-input-inp,
     .ml-amount-input-simulate {
       border: 1px solid #e5e5e5;
@@ -275,8 +279,14 @@ export default {
     align-items: center;
     justify-content: center;
     background: #fff;
-    color: #c0c4cc;
+    color: $ml-input-clear-icon-color;
     border-radius: 0 $ml-border-radius $ml-border-radius 0;
   }
+  &.is-clear {
+    .ml-amount-input-inp {
+      padding-right: 0;
+      border-right: 0;
+    }
+  }
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <button class="ml-button" :class="[className || '', `type-${type}`, size ? `size-${size}` : '', status ? `ss-${status}` : '', {'is-round': round, 'is-underline': underline}]" :open-type="openType" :style="styles" @tap="tapEvent" @click="clickEvent">
+  <button class="ml-button" :class="[className || '', `type-${type}`, size ? `size-${size}` : '', status ? `ss-${status}` : '', {'is-round': round, 'is-underline': underline, 'is-disabled': disabled}]" :disabled="disabled" :open-type="openType" :style="styles" @tap="tapEvent" @click="clickEvent">
     <slot>{{ content }}</slot>
   </button>
 </template>
@@ -19,6 +19,7 @@ export default {
       default: 'button'
     },
     size: String,
+    disabled: Boolean,
     underline: Boolean,
     openType: String,
     width: String,
@@ -36,6 +37,9 @@ export default {
   },
   methods: {
     tapEvent () {
+      if (this.disabled) {
+        return
+      }
       if (this.url) {
         if (this.redirect) {
           uni.redirectTo({
@@ -206,5 +210,11 @@ export default {
       }
     }
   }
+  &.is-disabled {
+    opacity: 0.5;
+    // #ifdef H5
+    cursor: no-drop;
+    // #endif
+  }
 }
 </style>

package/lib/components/ml-cascader-picker/ml-cascader-picker.vue

@@ -225,7 +225,7 @@ export default {
     align-items: center;
     justify-content: center;
     background: #fff;
-    color: #c0c4cc;
+    color: $ml-input-clear-icon-color;
     border-radius: 0 10rpx 10rpx 0;
   }
   .ml-cascader-picker-icon {

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

@@ -56,9 +56,8 @@ export default {
     }
   }
   .ml-form-group-content {
-    padding-bottom: 20rpx;
     background: #ffffff;
     border-radius: $ml-border-radius;
   }
 }
-</style>
+</style>

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

@@ -189,9 +189,6 @@ export default {
   padding: 10rpx 20rpx;
   &.is-border {
     border-bottom: 1px solid #e5e5e5;
-    &:last-child {
-      border: 0;
-    }
   }
   &.is-error {
     .ml-form-item-content-error {
@@ -200,12 +197,13 @@ export default {
     }
   }
   .ml-form-item-header {
-    min-height: 70rpx;
+    min-height: 78rpx;
   }
   .ml-form-item-header-asterisk {
     display: inline;
     color: red;
     padding-right: 4rpx;
+    font-weight: 700;
   }
   .ml-form-item-header-title {
     display: inline;
@@ -283,4 +281,4 @@ export default {
   transform: scaleY(0);
   transition: all 0.3s;
 }
-</style>
+</style>

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

@@ -160,7 +160,7 @@ export default {
     align-items: center;
     justify-content: center;
     background: #fff;
-    color: #c0c4cc;
+    color: $ml-input-clear-icon-color;
     border-radius: 0 $ml-border-radius $ml-border-radius 0;
   }
   .ml-input-prefix-icon,

package/lib/components/ml-number-input/ml-number-input.vue

@@ -217,6 +217,10 @@ export default {
   }
   &.is-border,
   &.is-controls {
+    .ml-number-input-clear-icon {
+      border: 1px solid #e5e5e5;
+      border-left: 0;
+    }
     .ml-number-input-inp,
     .ml-number-input-simulate {
       border: 1px solid #e5e5e5;
@@ -267,5 +271,11 @@ export default {
   .ml-number-input-plus-btn {
     border-left: 0;
   }
+  &.is-clear {
+    .ml-number-input-inp {
+      padding-right: 0;
+      border-right: 0;
+    }
+  }
 }
 </style>

package/lib/components/ml-province-city-picker/ml-province-city-picker.vue

@@ -167,7 +167,7 @@ export default {
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0 20rpx;
+  padding: 0 10rpx;
   height: 70rpx;
   border-radius: $ml-border-radius;
   .ml-province-city-picker-text {
@@ -182,13 +182,13 @@ export default {
     }
   }
   .ml-province-city-picker-clear-icon {
-    width: 60rpx;
+    width: 34rpx;
     display: flex;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
     background: #fff;
-    color: #c0c4cc;
+    color: $ml-input-clear-icon-color;
     border-radius: 0 $ml-border-radius $ml-border-radius 0;
   }
   .ml-province-city-picker-icon {

package/lib/components/ml-search-bar/ml-search-bar.vue

@@ -0,0 +1,170 @@
+<template>
+  <view v-if="!editable && (platformEnv.isWXMP || platformEnv.isQWMP)" class="ml-search-bar not-edit" :class="[className || '', {'is-right': align === 'right'}]">
+    <view class="ml-search-bar-simulate">
+      <text v-if="inpVal">{{ inpVal }}</text>
+      <text v-else class="ml-search-bar-placeholder">{{ placeholder }}</text>
+    </view>
+  </view>
+  <view v-else class="ml-search-bar is-prefix" :class="[className || '', {'is-right': align === 'right','is-disabled': disabled, 'is-clear': clearable && inpVal}]">
+    <view class="ml-search-bar-prefix-icon">
+      <ml-icon name="search"></ml-icon>
+    </view>
+    <input
+      v-model="inpVal"
+      class="ml-search-bar-inp"
+      autocomplete="off"
+      type="search"
+      confirm-type="search"
+      :placeholder="placeholder"
+      :maxlength="maxlength"
+      :disabled="disabled"
+      @input="inputEvent"
+      @focus="focusEvent"
+      @blur="blurEvent"
+      @confirm="confirmEvent"/>
+    <view v-if="clearable && !disabled && inpVal" class="ml-search-bar-clear-icon" @click.stop="clearEvent">
+      <ml-icon name="delete-filling"></ml-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+import { getPlatformEnv } from '../../../utils'
+
+export default {
+  name: 'MlSearchBar',
+  options: {
+    virtualHost: true
+  },
+  props: {
+    value: [Number, String],
+    align: String,
+    disabled: Boolean,
+    clearable: Boolean,
+    readonly: Boolean,
+    editable: {
+      type: Boolean,
+      default: true
+    },
+    placeholder: {
+      type: String,
+      default: '搜索内容'
+    },
+    maxlength: {
+      type: [String, Number],
+      default: 30
+    },
+    className: String
+  },
+  data () {
+    return {
+      platformEnv: getPlatformEnv(),
+      inpVal: ''
+    }
+  },
+  watch: {
+    value (val) {
+      this.inpVal = val
+    }
+  },
+  created () {
+    this.inpVal = this.value
+  },
+  methods: {
+    inputEvent () {
+      const value = this.inpVal
+      this.$emit('input', value)
+      this.$emit('change', { value })
+    },
+    focusEvent () {
+      this.$emit('focus', { value: this.inpVal })
+    },
+    blurEvent () {
+      this.$emit('blur', { value: this.inpVal })
+    },
+    confirmEvent () {
+      const value = this.inpVal
+      this.$emit('confirm', { value })
+    },
+    clearEvent () {
+      this.inpVal = ''
+      this.inputEvent()
+      this.$emit('clear', { value: this.inpVal })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.ml-search-bar {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  background: #eaeced;
+  border-radius: $ml-border-radius;
+  .ml-search-bar-placeholder {
+    color: $uni-text-color-placeholder;
+  }
+  .ml-search-bar-simulate {
+    padding: 0 10rpx;
+    height: 70rpx;
+    line-height: 70rpx;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: #eaeced;
+  }
+  .ml-search-bar-readonly-content {
+    padding: 20rpx 4rpx;
+  }
+  .ml-search-bar-inp {
+    outline: 0;
+    color: rgb(23, 26, 29);
+    background: #eaeced;
+  }
+  .ml-search-bar-inp,
+  .ml-search-bar-simulate {
+    padding: 0 10rpx;
+    height: 70rpx;
+    width: 100%;
+    font-size: 30rpx;
+  }
+  .ml-search-bar-clear-icon {
+    width: 60rpx;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    background: #eaeced;
+    color: $ml-input-clear-icon-color;
+    border-radius: 0 $ml-border-radius $ml-border-radius 0;
+  }
+  .ml-search-bar-prefix-icon {
+    min-width: 70rpx;
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    font-size: 34rpx;
+    padding: 0 10rpx;
+    color: rgba(0, 0, 0, 0.4);
+  }
+  &.is-right {
+    .ml-search-bar-inp,
+    .ml-search-bar-simulate {
+      text-align: right;
+    }
+  }
+  &.is-prefix{
+    .ml-search-bar-inp,
+    .ml-search-bar-simulate {
+      border-radius: $ml-border-radius;
+    }
+  }
+  &.is-prefix {
+    .ml-search-bar-prefix-icon {
+      border-radius: $ml-border-radius 0 0 $ml-border-radius;
+    }
+  }
+}
+</style>

package/lib/components/ml-select-picker/ml-select-picker.vue

@@ -169,7 +169,7 @@ export default {
   align-items: center;
   justify-content: center;
   background: #fff;
-  color: #c0c4cc;
+  color: $ml-input-clear-icon-color;
   border-radius: 0 $ml-border-radius $ml-border-radius 0;
 }
 .ml-select-picker-icon {

package/package.json

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

package/theme.scss

@@ -18,3 +18,5 @@ $ml-white-color: #ffffff;
 $ml-border-radius: 8rpx;
 // 按钮间隔宽度
 $ml-button-interval-margin: 16rpx;
+// 输入框清除按钮颜色
+$ml-input-clear-icon-color:  rgba(23, 26, 29, 0.4);