feat(LicensePlate): 增加键盘插槽

revert virtual keyboard paste

CHANGELOG.en-US.md

@@ -3,6 +3,14 @@ title: Change Log
 toc: hidden
 ---
 
+### 2.7.1
+
+`2024-06-11`
+
+- Feature
+    - `Icon`
+      - The 'size' attribute add the 'xxs' value
+
 ### 2.7.0
 
 `2024-03-12`

CHANGELOG.md

@@ -3,6 +3,24 @@ title: 更新日志
 toc: hidden
 ---
 
+### 2.7.1
+
+`2024-06-11`
+
+- Feature
+  - `Icon`
+    - `size` 属性增加 `xxs` 值
+  - `Toast`
+    - 内容由展示1行改为最多展示2行
+  - `InputItem`
+    - `is-virtual-keyboard` 属性为 `true` 时，支持粘贴内容到输入框
+  - `Amount`
+    - 新增 `mask` 属性，为 `true` 时将对数值进行掩码展示
+  - `LicensePlate`
+    - 新增插槽能力
+- Fix
+  - `LicensePlate`
+    - 修复弹窗点击穿透问题
 ### 2.7.0
 
 `2024-03-12`

components/_style/mixin/theme.components.styl

@@ -214,7 +214,7 @@ detail-item-content-color = color-text-body
 detail-item-gap = v-gap-sm
 
 /// icon
-icon-size-xss = 16px
+icon-size-xxs = 16px
 icon-size-xs = 20px
 icon-size-sm = 24px
 icon-size-md = 32px

components/_style/mixin/theme.variable.styl

@@ -222,7 +222,7 @@ detail-item-font-size = var(--detail-item-font-size)
 detail-item-title-color = var(--detail-item-title-color)
 detail-item-content-color = var(--detail-item-content-color)
 detail-item-gap = var(--detail-item-gap)
-icon-size-xss = var(--icon-size-xss)
+icon-size-xxs = var(--icon-size-xxs)
 icon-size-xs = var(--icon-size-xs)
 icon-size-sm = var(--icon-size-sm)
 icon-size-md = var(--icon-size-md)

components/amount/README.en-US.md

@@ -33,3 +33,4 @@ The font `DIDIFD-Medium` is used in the component for the case show only, if nec
 |is-capital|convert to chinese capital|Boolean|`false`|-|
 |transition|use transition when value changes|Boolean|`false`|-|
 |duration|transition duration|Number|`1000`|unit `ms`|
+|mask<sup class="version-after">2.7.1+</sup>|use mask|Boolean|`false`|-|

components/amount/README.md

@@ -33,3 +33,4 @@ Vue.component(Amount.name, Amount)
 |is-capital|数字是否转换为大写中文|Boolean|`false`|-|
 |transition|数字变化是否使用动画|Boolean|`false`|-|
 |duration|数字变化动画时长|Number|`1000`|单位`ms`|
+|mask<sup class="version-after">2.7.1+</sup> |是否掩码|Boolean|`false`|-|

components/amount/demo/cases/demo4.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="md-example-child md-example-child-amount">
+    <md-amount
+      :value="1234"
+      mask
+      precision="0"
+    ></md-amount>
+    <br>
+	</div>
+</template>
+
+<script>
import {Amount} from 'mand-mobile'
+
+export default {
+  name: 'amount-demo',
+  /* DELETE */
+  title: '掩码展示',
+  titleEnUS: 'Mask Display',
+  /* DELETE */
+  components: {
+    [Amount.name]: Amount,
+  },
+}
+
</script>
+
+<style lang="stylus" scoped>
+.md-example-child-amount
+  text-align center
+  font-size 32px
+  color #666
+</style>

components/amount/demo/index.vue

@@ -15,9 +15,10 @@ import Demo0 from './cases/demo0'
 import Demo1 from './cases/demo1'
 import Demo2 from './cases/demo2'
 import Demo3 from './cases/demo3'
+import Demo4 from './cases/demo4'
 
 export default {
-  ...createDemoModule('amount', [Demo0, Demo1, Demo2, Demo3]),
+  ...createDemoModule('amount', [Demo0, Demo1, Demo2, Demo3, Demo4]),
 }
 
</script>
 

components/amount/index.vue

@@ -1,6 +1,6 @@
 <template>
   <span class="md-amount" :class="{numerical: !isCapital}">
-    <template v-if="!isCapital">{{ formatValue | doPrecision(legalPrecision, isRoundUp) | doFormat(hasSeparator, separator) }}</template> <template v-else> {{ formatValue | doPrecision(4, isRoundUp) | doCapital }} </template>
+    <template v-if="!isCapital">{{ formatValue | doPrecision(legalPrecision, isRoundUp) | doFormat(hasSeparator, separator) | doMask(mask)}}</template> <template v-else> {{ formatValue | doPrecision(4, isRoundUp) | doCapital }} </template>
   </span>
 </template>
 
@@ -18,6 +18,13 @@ export default {
       const rounded = isRoundUp ? Math.round(exponentialForm) : Math.floor(exponentialForm)
       return Number(`${rounded}e-${precision}`).toFixed(precision)
     },
+    doMask(value, mask) {
+      if (mask) {
+        return value.toString().replace(/\d/g, '*')
+      } else {
+        return value
+      }
+    },
     doFormat(value, hasSeparator, separator) {
       if (!hasSeparator) {
         return value
@@ -78,6 +85,10 @@ export default {
       type: Number,
       default: 1000,
     },
+    mask: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {

components/icon/README.en-US.md

@@ -26,7 +26,7 @@ Custom svg icons and import local font file, please refer to <a href="javascript
 |Props | Description | Type | Default | Note |
 |----|-----|------|------|------|
 |name|icon name|String|-|-|
-|size|icon size|String|`md`|`xs`, `sm`, `md`, `lg`|
+|size|icon size|String|`md`|`xxs`<sup class="version-after">2.7.1+</sup>, `xs`, `sm`, `md`, `lg`|
 |color|icon color|String|`currentColor`|this color value is set as the value of `fill` on the `svg` icon|
 |svg|use svg icon|Boolean|`false` `true`<sup class="version-after">2.6.1+</sup>|Due to the inability to load web fonts in Apple [Lockdown Mode](https://support.apple.com/en-us/HT212650), the SVG icon is used by default since 2.6.1, and iconfont is used when set to `false`|
 

components/icon/README.md

@@ -26,7 +26,7 @@ Vue.component(Icon.name, Icon)
 |属性 | 说明 | 类型 | 默认值| 备注|
 |----|-----|------|------|------|
 |name|图标名称|String|-|-|
-|size|图标大小|String|`md`|`xs`, `sm`, `md`, `lg`|
+|size|图标大小|String|`md`|`xxs`<sup class="version-after">2.7.1+</sup>, `xs`, `sm`, `md`, `lg`|
 |color|图标颜色|String|`currentColor`|-|
 |svg|使用svg图标|Boolean|`false` `true`<sup class="version-after">2.6.1+</sup>|因 Apple [锁定模式](https://support.apple.com/zh-cn/HT212650)中，无法加载网页字体，故2.6.1起默认使用 SVG 图标，设为 `false` 时使用 iconfont|
 

components/icon/index.vue

@@ -70,8 +70,11 @@ export default {
     speak none
     -webkit-font-smoothing antialiased
     -moz-osx-font-smoothing grayscale
+    // xss 为兼容2.5.20版本及之前拼写错误
     &.xss
-      font-size icon-size-xss
+      font-size icon-size-xxs
+    &.xxs
+      font-size icon-size-xxs
     &.xs
       font-size icon-size-xs
     &.sm

components/input-item/README.en-US.md

@@ -36,7 +36,7 @@ Vue.component(InputItem.name, InputItem)
 |maxlength|maximum number of characters that can be entered|String/Number|-|the maxlength of `phone` type is fixed at 11|
 |size|size of input|String|`normal`|`large`,`normal`|
 |align|text alignment|String|`left`|`left`,`center`,`right`|
-|error|error message|String|-|-|
+|error|error message|String|-|add shake animation <sup class="version-after">2.7.1+</sup>|
 |readonly|readonly|Boolean|`false`|-|
 |disabled|disabled|Boolean|`false`|-|
 |is-title-latent|hide title or not|Boolean|`false`|title will be displayed when input is focused or content is not empty|

components/input-item/README.md

@@ -37,7 +37,7 @@ Vue.component(InputItem.name, InputItem)
 |maxlength|表单最大字符数|String/Number|-|`phone`类型固定为11|
 |size|表单尺寸|String|`normal`|`large`,`normal`|
 |align|表单文本对齐方式|String|`left`|`left`,`center`,`right`|
-|error|表单错误提示信息|String|-|-|
+|error|表单错误提示信息|String|-|新增抖动动效<sup class="version-after">2.7.1+</sup>|
 |readonly|表单是否只读|Boolean|`false`|-|
 |disabled|表单是否禁用|Boolean|`false`|-|
 |is-title-latent|表单标题是否隐藏|Boolean|`false`|表单获得焦点或内容不为空时展示|

components/input-item/index.vue

@@ -114,7 +114,8 @@
   </md-field-item>
 </template>
 
-<script>
import Icon from '../icon'
+<script>
+import Icon from '../icon'
 import FieldItem from '../field-item'
 import NumberKeyboard from '../number-keyboard'
 import {getCursorsPosition, setCursorsPosition} from './cursor'
@@ -569,7 +570,8 @@ export default {
     },
   },
 }
-
</script>
+
+</script>
 
 <style lang="stylus">
 .md-input-item
@@ -652,6 +654,20 @@ export default {
 .md-input-item-msg
   font-size input-item-font-size-error
   color input-item-color-error
+  animation-name errtips
+  animation-duration 0.5s
+
+@keyframes errtips {
+  10% {
+    transform translateX(4px)
+  }
+  60% {
+    transform translateX(-4px)
+  }
+  100% {
+    transform translateX(4)
+  }
+}
 
 .md-input-item
   &.left

components/license-plate/README.en-US.md

@@ -36,3 +36,7 @@ hide Pop
 
 ##### @confirm()
 confirm
+
+### LicensePlate Slots
+#### content
+The content above the keyboard

components/license-plate/README.md

@@ -36,3 +36,7 @@ Vue.component(LicensePlate.name, LicensePlate)
 
 ##### @confirm()
 键盘确认事件
+
+### LicensePlate Slots
+#### content
+键盘上方内容

components/license-plate/demo/cases/demo1.vue

@@ -13,11 +13,14 @@
       :showPopUp="showPopUp"
       @hide="hide"
       @confirm="confirm"
-    ></md-license-plate>
+      @onEnter="onEnter"
+      @onDelete="onDelete"
+    >
+    </md-license-plate>
   </div>
 </template>
 
-<script>
import {LicensePlate, DetailItem, Field} from 'mand-mobile'
+<script>
import {LicensePlate, DetailItem, Field, Button} from 'mand-mobile'
 
 export default {
   name: 'license-plate-demo',
@@ -26,6 +29,7 @@ export default {
     [LicensePlate.name]: LicensePlate,
     [DetailItem.name]: DetailItem,
     [Field.name]: Field,
+    [Button.name]: Button,
   },
   data() {
     return {
@@ -44,6 +48,12 @@ export default {
       this.hide()
       this.licensePlate = value
     },
+    onEnter(value) {
+      this.licensePlate = value
+    },
+    onDelete(value) {
+      this.licensePlate = value
+    },
   },
 }
 
</script>

components/license-plate/demo/cases/demo2.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <!-- 投保人车牌号 -->
+    <md-field title="车辆信息">
+      <div @click="changeNumber">
+        <md-detail-item title="车牌号码">
+          {{ licensePlate }}
+        </md-detail-item>
+      </div>
+    </md-field>
+    <md-license-plate
+      :modeShow="'popUp'"
+      :showPopUp="showPopUp"
+      @hide="hide"
+      @confirm="confirm"
+      @onEnter="onEnter"
+      @onDelete="onDelete"
+    >
+    <template v-slot:content>
+      <md-button
+        class="go-to-quote"
+        type="primary"
+      >
+        按钮
+      </md-button>
+    </template>
+    </md-license-plate>
+  </div>
+</template>
+
+<script>
import {LicensePlate, DetailItem, Field, Button} from 'mand-mobile'
+
+export default {
+  name: 'license-plate-demo',
+  title: '自定义键盘弹窗内容插槽半弹层版',
+  components: {
+    [LicensePlate.name]: LicensePlate,
+    [DetailItem.name]: DetailItem,
+    [Field.name]: Field,
+    [Button.name]: Button,
+  },
+  data() {
+    return {
+      showPopUp: false,
+      licensePlate: '',
+    }
+  },
+  methods: {
+    hide() {
+      this.showPopUp = false
+    },
+    changeNumber() {
+      this.showPopUp = true
+    },
+    confirm(value) {
+      this.hide()
+      this.licensePlate = value
+    },
+    onEnter(value) {
+      this.licensePlate = value
+    },
+    onDelete(value) {
+      this.licensePlate = value
+    },
+  },
+}
+
</script>
+
+
+<style lang="stylus" scoped>
+.md-button {
+  width: 670px;
+  height: 100px;
+  border-radius: 50px;
+  background: #198CFF;
+  border 0
+  margin 0 auto
+  margin-bottom 40px
+}
+.md-button.block {
+  width: 670px;
+}
+.md-button.primary:after {
+  border 0
+}
+>>>.md-license-plate-input .md-license-plate-input-item {
+  width 72px
+}
+</style>

components/license-plate/demo/index.vue

@@ -13,6 +13,7 @@
 <script>
import createDemoModule from '../../../examples/create-demo-module'
 import Demo0 from './cases/demo0'
 import Demo1 from './cases/demo1'
+import Demo2 from './cases/demo2'
 
-export default {...createDemoModule('license-plate', [Demo0, Demo1])}
+export default {...createDemoModule('license-plate', [Demo0, Demo1, Demo2])}
 
</script>

components/license-plate/index.vue

@@ -16,6 +16,7 @@
         class="md-license-plate-keyboard-container division"
         :id="keyboardViewId"
       >
+        <slot name="content"></slot>
         <md-license-plate-keyboard
           :keyboard="dyKeyboard"
           @enter="$_onEnter"
@@ -47,6 +48,7 @@
               @keyMapping="keyMapping"
             />
           </div>
+          <slot name="content"></slot>
           <div class="md-license-plate-keyboard-container popUp">
             <md-license-plate-keyboard
               :keyboard="dyKeyboard"
@@ -418,6 +420,7 @@ export default {
       } else {
         this.selectedIndex = this.selectedIndex + 1
       }
+      this.$emit('onEnter', this.keyArrayCopy.join(''))
     },
     // 删除事件
     $_onDelete() {
@@ -427,16 +430,23 @@ export default {
       // 当前键位是第一个键位，隐藏分离键盘
       if (this.selectedIndex <= 0) {
         if (this.modeShow === 'division') {
-          this.hideDivisionKeyboard()
+          const timeId = setTimeout(() => {
+            this.hideDivisionKeyboard()
+            clearTimeout(timeId)
+          }, 200)
         }
       } else {
         this.selectedIndex = this.selectedIndex - 1
       }
+      this.$emit('onDelete', this.keyArrayCopy.join(''))
     },
     // 键盘确认事件
     $_onConfirm() {
       if (this.modeShow === 'division') {
-        this.hideDivisionKeyboard()
+        const timeId = setTimeout(() => {
+          this.hideDivisionKeyboard()
+          clearTimeout(timeId)
+        }, 200)
       }
       this.$emit('confirm', this.keyArrayCopy.join(''))
     },

components/toast/README.en-US.md

@@ -29,7 +29,7 @@ Dynamically create a toast
 |----|-----|------|------|------|
 | icon | name of icon | String | - | refer to `Icon` component for customized icons|
 | iconSvg | use svg icon | Boolean | `false` |-|
-| content | content of message| String/Number | - |- |
+| content | content of message| String/Number | - | content supports two lines display <sup class="version-after">2.7.1+</sup>  |
 | duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - |
 | position | display position | String | `center` | `top/center/bottom` |
 | hasMask | whether to show a transparent mask, which will prevent users from clicking| Boolean | `false` | - |

components/toast/README.md

@@ -31,7 +31,7 @@ Vue.component(Toast.component.name, Toast.component) // 组件引入
 |----|-----|------|------|------|
 | icon | Icon组件图标名称 | String | - |如需自定义图标, 请查看`Icon`组件 |
 | iconSvg | 使用svg图标 | Boolean | `false` |-|
-| content | 提示内容文本 | String | - |- |
+| content | 提示内容文本 | String | - |内容支持2行展示 <sup class="version-after">2.7.1+</sup>|
 | duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - |
 | position | 展示位置 | String | `center` | `top/center/bottom` |
 | hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - |

components/toast/toast.vue

@@ -132,7 +132,7 @@ export default {
 
 .md-toast-content
   display inline-flex
-  align-items center
+  align-items flex-start
   max-width 100%
   min-width 80px
   padding toast-padding
@@ -145,12 +145,15 @@ export default {
   box-sizing border-box
   overflow hidden
   .md-toast-text
-    white-space nowrap
-    text-overflow: ellipsis
-    overflow hidden
+    word-break break-all
+    white-space normal
+    display -webkit-box
+    -webkit-box-orient vertical
+    -webkit-line-clamp 2
   &.square
     display flex
     flex-direction column
+    align-items center
     width 240px
     min-height 232px
     padding 54px 36px 48px 36px

docs/examples/index.html

@@ -1,28 +0,0 @@
-<!DOCTYPE html><html><head>
-    <title>Mand Mobile</title>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
-    <meta name="format-detection" content="telephone=no,email=no">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-touch-fullscreen" content="yes">
-    <link rel="icon" href="//static.galileo.xiaojukeji.com/static/tms/other/mand-mobile-logo.png" type="image/x-icon">
-    <link rel="stylesheet" href="//manhattan.didistatic.com/static/manhattan/mand/pace.css">
-    <link rel="stylesheet" href="//manhattan.didistatic.com/static/manhattan/mand/fade-in-left-big.css">
-    <style>
-    *{margin:0;padding:0;list-style:0;-webkit-touch-callout:none;}
-    html{touch-action: manipulation;background:#f3f4f5;}
-    </style>
-  <link rel="stylesheet" href="/mand-mobile/examples/mand-mobile-example.css">
-</head>
-  <body>
-    <div id="app"></div>
-    <script src="//img6.didistatic.com/static/tms/cdn/z/zepto/zepto/1.0.1/zepto.min.js"></script>
-    <script src="//manhattan.didistatic.com/static/manhattan/mand/pace.js"></script>
-    <script src="//manhattan.didistatic.com/static/manhattan/mand/jquery.lettering.js"></script>
-    <script src="//manhattan.didistatic.com/static/manhattan/mand/jquery.textillate.js"></script>
-    <!-- built files will be auto injected -->
-  
-
-<script type="text/javascript" src="/mand-mobile/examples/mand-mobile-example.js"></script>
-</body></html>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mand-mobile",
-  "version": "2.7.0",
+  "version": "2.7.1-beta.5",
   "description": "A Vue.js 2.0 Mobile UI Toolkit",
   "homepage": "https://didi.github.io/mand-mobile",
   "main": "lib/mand-mobile.umd.js",