Merge branch 'dev'

CHANGELOG.en-US.md

@@ -3,6 +3,14 @@ title: Change Log
 toc: hidden
 ---
 
+### 2.1.7
+
+`2019-03-22`
+
+- Fix
+  - `InputItem` not update when slots change
+  - `Codebox` bottom border not shown on some devices
+
 ### 2.1.6
 
 `2019-03-15`

CHANGELOG.md

@@ -3,6 +3,14 @@ title: 更新日志
 toc: hidden
 ---
 
+### 2.1.7
+
+`2019-03-22`
+
+- Fix
+  - `InputItem`无法侦听插槽内容变动问题
+  - `Codebox`在一些手机上无法显示下描边问题
+
 ### 2.1.6
 
 `2019-03-15`

build/rollup/build-css-variables.js

@@ -23,7 +23,7 @@ function clearComment(content) {
 }
 
 function matchContent(content, obj) {
-  const reg = /([\w-]*)\s*=\s*([\w\s#\-,()."\u4e00-\u9fa5]*)/g
+  const reg = /([\w-]*)\s*=\s*([\w\s#\-,().:/"'\u4e00-\u9fa5]*)/g
   const result = reg.exec(content)
   if (!result) {
     return obj

components/_style/mixin/theme.components.styl

@@ -219,6 +219,7 @@ icon-size-xs = 20px
 icon-size-sm = 24px
 icon-size-md = 32px
 icon-size-lg = 42px
+icon-font-family = url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.0.2/iconfont.woff") format("woff"), url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.0.2/iconfont.ttf") format("truetype")
 
 // image-viewer
 image-viewer-zindex = 1001

components/_style/mixin/theme.variable.styl

@@ -223,6 +223,7 @@ icon-size-xs = var(--icon-size-xs)
 icon-size-sm = var(--icon-size-sm)
 icon-size-md = var(--icon-size-md)
 icon-size-lg = var(--icon-size-lg)
+icon-font-family = var(--icon-font-family)
 image-viewer-zindex = var(--image-viewer-zindex)
 image-viewer-index-font-size = var(--image-viewer-index-font-size)
 image-viewer-index-bottom = var(--image-viewer-index-bottom)

components/codebox/index.vue

@@ -253,6 +253,7 @@ export default {
       flex 1 1 0%
 
 .md-codebox-box
+  position relative
   flex 0 1 codebox-width
   width codebox-width
   height codebox-height
@@ -271,7 +272,7 @@ export default {
     margin-left "calc(%s / 2)" % codebox-gutter
     margin-right "calc(%s / 2)" % codebox-gutter
 
-  border-bottom codebox-border-width solid codebox-border-color
+  hairline(bottom, color-border-element)
   &:first-child
     margin-left 0
   &:last-child

components/field/README.en-US.md

@@ -69,7 +69,7 @@ footer content slot
 |Props | Description | Type | Default | Note|
 |----|-----|------|------|------|
 |title|title|String|-|-|
-|brief|description|String|-|-|
+|content|description|String|-|-|
 |addon|help info text|String|-|-|
 |disabled|disable item operation|Boolean|false|-|
 |arrow|arrow indicator|Boolean|false|-|

components/field/README.md

@@ -68,7 +68,7 @@ export default {
 |属性 | 说明 | 类型 | 默认值|备注|
 |----|-----|------|------|------|
 |title|标题|String|-|-|
-|brief|描述内容|String|-|-|
+|content|描述内容|String|-|-|
 |addon|附加文案|String|-|-|
 |disabled|是否禁用项目|Boolean|false|-|
 |solid|是否固定标题宽度，超出会自动换行|Boolean|false|-|

components/icon/README.en-US.md

@@ -3,7 +3,7 @@ title: Icon
 preview: https://didi.github.io/mand-mobile/examples/#/icon
 ---
 
-SVG Icons
+IconFont、SVG Icons
 
 ### Import
 

components/icon/index.vue

@@ -224,6 +224,5 @@ export default {
   font-weight normal
   /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
   /* Version is required */
-  src url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.0.2/iconfont.woff") format('woff'),
-      url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.0.2/iconfont.ttf") format("truetype")
+  src icon-font-family
 </style>

components/input-item/demo/cases/demo5.vue

@@ -12,7 +12,6 @@
         type="bankCard"
         title="储蓄卡号"
         v-model="bankCardNo"
-        :key="bankCardKey"
         clearable
         @blur="checkBankCard"
       >
@@ -43,7 +42,6 @@ export default {
   data() {
     return {
       bankCardNo: '',
-      bankCardKey: Date.now(),
       isError: false,
     }
   },
@@ -54,7 +52,6 @@ export default {
       } else {
         this.isError = false
       }
-      this.bankCardKey = Date.now()
     },
     bankCardTip() {
       Dialog.alert({

components/input-item/index.vue

@@ -6,8 +6,8 @@
       isTitleLatent ? 'is-title-latent' : '',
       isInputActive ? 'is-active' : '',
       isInputFocus ? 'is-focus' : '',
-      isInputError ? 'is-error' : '',
-      isInputBrief ? 'with-brief' : '',
+      isInputError() ? 'is-error' : '',
+      isInputBrief() && !isInputError() ? 'with-brief' : '',
       isDisabled ? 'is-disabled': '',
       isAmount ? 'is-amount': '',
       clearable ? 'is-clear' : '',
@@ -86,14 +86,14 @@
       <!-- BRIEF/ERROR TIP -->
       <!-- -------------------- -->
       <div
-        v-if="isInputError"
+        v-if="isInputError()"
         class="md-input-item-msg"
       >
         <p v-if="error !== ''" v-text="error"></p>
         <slot name="error" v-else></slot>
       </div>
       <div
-        v-if="isInputBrief"
+        v-if="isInputBrief() && !isInputError()"
         class="md-input-item-brief"
       >
         <p v-if="brief !== ''" v-text="brief"></p>
@@ -279,12 +279,6 @@ export default {
     isInputEmpty() {
       return !this.inputValue.length
     },
-    isInputError() {
-      return this.$slots.error || this.error !== ''
-    },
-    isInputBrief() {
-      return (this.$slots.brief || this.brief !== '') && !this.isInputError
-    },
     isDisabled() {
       return this.rootField.disabled || this.disabled
     },
@@ -316,7 +310,6 @@ export default {
       }
     },
   },
-
   created() {
     this.inputValue = this.$_formateValue(this.$_subValue(this.value + '')).value
   },
@@ -397,6 +390,12 @@ export default {
 
       return formateValue
     },
+    isInputError() {
+      return this.$slots.error || this.error !== ''
+    },
+    isInputBrief() {
+      return this.$slots.brief || this.brief !== ''
+    },
     $_trimValue(val) {
       return trimValue(val, '\\s|,')
     },

components/input-item/test/index.spec.js

@@ -128,4 +128,41 @@ describe('InputItem - Operation', () => {
 
     input.trigger('click')
   })
+
+  test('should show error slot', async () => {
+    wrapper = mount({
+      template: `
+        <md-input-item
+          type="bankCard"
+          title="label">
+          <p
+            v-if="isError"
+            class="error"
+            slot="error">
+            errorMsg
+          </p>
+        </md-input-item>
+      `,
+      components: {
+        [InputItem.name]: InputItem,
+      },
+      data() {
+        return {
+          isError: false,
+        }
+      },
+    })
+
+    expect(wrapper.contains('.md-input-item-msg')).toBe(false)
+    wrapper.vm.isError = true
+    await wrapper.vm.$nextTick(() => {
+      expect(wrapper.contains('.md-input-item-msg')).toBe(true)
+      expect(wrapper.find('.md-input-item-msg').text()).toBe('errorMsg')
+    })
+
+    wrapper.vm.isError = false
+    await wrapper.vm.$nextTick(() => {
+      expect(wrapper.contains('.md-input-item-msg')).toBe(false)
+    })
+  })
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mand-mobile",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "A Vue.js 2.0 Mobile UI Toolkit",
   "homepage": "https://github.com/didi/mand-mobile",
   "main": "lib/mand-mobile.umd.js",