doc(site): 官网首页和“设计”板块视觉升级 (#779)

components/_style/mixin/theme.components.styl

@@ -214,7 +214,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.1.0/iconfont.woff") format("woff"), url("http://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.1.0/iconfont.ttf") format("truetype")
+icon-font-family = url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.1.0/iconfont.woff") format("woff"), url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.1.0/iconfont.ttf") format("truetype")
 
 /// image-viewer
 image-viewer-index-font-size = 32px
@@ -373,7 +373,7 @@ tab-active-color = color-primary
 tab-disabled-color = color-text-disabled
 tab-bg = color-bg-base
 tab-height = 100px
-tab-ink-height = 3px
+tab-ink-height = 4px
 tab-offset = h-gap-sl
 tab-item-gap = 27px
 
@@ -385,7 +385,7 @@ tab-picker-zindex = 1102
 
 /// tag
 tag-color = color-primary
-tag-fillet-radius = 2px
+tag-fillet-radius = 4px
 tag-large-font-size = font-body-normal
 tag-small-font-size = font-minor-normal
 tag-tiny-font-size = 12px

components/action-sheet/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import ActionSheet from './action-sheet'
+import ActionSheet from './action-sheet.vue'
 
 const noop = function() {}
 

components/agree/index.vue

@@ -11,8 +11,10 @@
       ]"
       @click="$_onChange($event)">
       <div class="md-agree-icon-container">
-        <md-icon name="checked" :size="size"></md-icon>
-        <md-icon name="check" :size="size"></md-icon>
+        <slot name="icon" :checked="value">
+          <md-icon name="checked" :size="size"></md-icon>
+          <md-icon name="check" :size="size"></md-icon>
+        </slot>
       </div>
     </div>
     <div class="md-agree-content">
@@ -83,7 +85,7 @@ export default {
     position relative
     .md-icon
       display flex
-      width auto 
+      width auto
       height auto
       line-height 1
       will-change auto

components/captcha/index.vue

@@ -18,6 +18,7 @@
         :isView="true"
         :justify="true"
         :autofocus="false"
+        :input-type="inputType"
       >
         <footer class="md-captcha-footer">
           <div class="md-captcha-error" v-if="errorMsg" v-text="errorMsg"></div>
@@ -57,6 +58,7 @@
           :mask="mask"
           :justify="true"
           :autofocus="false"
+          :input-type="inputType"
           @submit="$_onSubmit"
         >
           <footer class="md-captcha-footer">
@@ -142,6 +144,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    inputType: {
+      type: String,
+      default: 'tel',
+    },
   },
 
   data() {

components/captcha/test/__snapshots__/demo.spec.js.snap

@@ -22,7 +22,7 @@ exports[`Captcha - Demo Customize 1`] = `
                 <footer class="md-captcha-footer">
                   <div class="md-captcha-brief"></div> <button class="md-captcha-btn">发送验证码</button>
                 </footer>
-                <form action="" style="display:none;"><input type="text" maxlength="4" value="" class="md-codebox-input"></form>
+                <form action="" style="display:none;"><input type="tel" maxlength="4" value="" class="md-codebox-input"></form>
                 <div class="md-number-keyboard md-codebox-keyboard">
                   <div class="md-popup bottom" style="display:none;">
                     <div name="md-mask-fade" class="md-popup-mask" style="display:none;"></div>
@@ -75,7 +75,7 @@ exports[`Captcha - Demo Inline display 1`] = `
       <footer class="md-captcha-footer">
         <div class="md-captcha-brief">最新验证码依然有效，请勿重发</div> <button class="md-captcha-btn">发送验证码</button>
       </footer>
-      <form action="" style="display:none;"><input type="text" maxlength="4" value="" class="md-codebox-input"></form>
+      <form action="" style="display:none;"><input type="tel" maxlength="4" value="" class="md-codebox-input"></form>
       <div class="md-number-keyboard md-codebox-keyboard in-view">
         <!---->
         <div class="md-number-keyboard-container simple">

components/cashier/test/__snapshots__/demo.spec.js.snap

@@ -28,7 +28,7 @@ exports[`Cashier - Demo Baisc-captcha 1`] = `
               <footer class="md-captcha-footer">
                 <div class="md-captcha-brief">The latest verification code is still valid</div> <button class="md-captcha-btn">Send Verification code</button>
               </footer>
-              <form action="" style="display: none;"><input type="text" maxlength="4" class="md-codebox-input"></form>
+              <form action="" style="display: none;"><input type="tel" maxlength="4" class="md-codebox-input"></form>
               <div class="md-number-keyboard md-codebox-keyboard in-view">
                 <!---->
                 <div class="md-number-keyboard-container simple">

components/codebox/index.vue

@@ -43,7 +43,7 @@
         />
         <input
           v-else
-          type="text"
+          :type="inputType"
           :maxlength="maxlength"
           :value="code"
           readonly
@@ -56,9 +56,11 @@
     <form action="" v-show="system" @submit="$_onSubmit">
       <input
         :value="code"
-        :type="mask ? 'password' : 'text'"
+        :type="inputType"
         :maxlength="maxlength"
         @input="$_onInputChange"
+        @focus="$_nativeFocus"
+        @blur="$_nativeBlur"
         ref="input"
         class="md-codebox-input"
       />
@@ -130,6 +132,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    inputType: {
+      type: String,
+      default: 'tel',
+    },
   },
   data() {
     return {
@@ -232,6 +238,12 @@ export default {
         this.$refs.input.focus()
       }
     },
+    $_nativeBlur() {
+      this.$emit('blur')
+    },
+    $_nativeFocus() {
+      this.$emit('focus')
+    },
   },
 }
 
</script>

components/codebox/test/__snapshots__/demo.spec.js.snap

@@ -12,7 +12,7 @@ exports[`Codebox Basic 1`] = `
            <!----></span><span class="md-codebox-box is-filled">
             4
            <!----></span></div>
-    <form action="" style="display:none;"><input type="text" maxlength="4" value="1234" class="md-codebox-input"></form>
+    <form action="" style="display:none;"><input type="tel" maxlength="4" value="1234" class="md-codebox-input"></form>
     <div class="md-number-keyboard md-codebox-keyboard">
       <div class="md-popup bottom" style="display:none;">
         <div name="md-mask-fade" class="md-popup-mask" style="display:none;"></div>
@@ -83,8 +83,8 @@ exports[`Codebox Character mask 1`] = `
 exports[`Codebox System keyboard 1`] = `
 <div class="md-example-child md-example-child-codebox md-example-child-codebox-3">
   <div class="md-codebox-wrapper">
-    <div class="md-codebox"><input type="text" maxlength="-1" readonly="readonly" disabled="disabled" value="1234" class="md-codebox-holder"></div>
-    <form action=""><input type="text" maxlength="-1" value="1234" class="md-codebox-input"></form>
+    <div class="md-codebox"><input type="tel" maxlength="-1" readonly="readonly" disabled="disabled" value="1234" class="md-codebox-holder"></div>
+    <form action=""><input type="tel" maxlength="-1" value="1234" class="md-codebox-input"></form>
     <div class="md-number-keyboard md-codebox-keyboard" style="display:none;">
       <div class="md-popup bottom" style="display:none;">
         <div name="md-mask-fade" class="md-popup-mask" style="display:none;"></div>
@@ -125,8 +125,8 @@ exports[`Codebox System keyboard 1`] = `
 exports[`Codebox Unlimited length 1`] = `
 <div class="md-example-child md-example-child-codebox md-example-child-codebox-2">
   <div class="md-codebox-wrapper">
-    <div class="md-codebox"><input type="text" maxlength="-1" readonly="readonly" disabled="disabled" value="1234" class="md-codebox-holder"></div>
-    <form action="" style="display:none;"><input type="text" maxlength="-1" value="1234" class="md-codebox-input"></form>
+    <div class="md-codebox"><input type="tel" maxlength="-1" readonly="readonly" disabled="disabled" value="1234" class="md-codebox-holder"></div>
+    <form action="" style="display:none;"><input type="tel" maxlength="-1" value="1234" class="md-codebox-input"></form>
     <div class="md-number-keyboard md-codebox-keyboard">
       <div class="md-popup bottom" style="display:none;">
         <div name="md-mask-fade" class="md-popup-mask" style="display:none;"></div>

components/codebox/test/cases/demo1.vue

@@ -3,6 +3,7 @@
     <md-codebox
       :mask="true"
       :maxlength="6"
+      inputType="password"
       v-model="code"
     />
   </div>

components/dialog/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import {t} from '../_locale'
-import Dialog from './dialog'
+import Dialog from './dialog.vue'
 
 /* istanbul ignore next */
 const noop = function() {}

components/icon/default-svg-list.js

@@ -1,8 +1,26 @@
 export default {
   spinner:
     '<svg class="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(30 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(60 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.75s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(90 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(120 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(150 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(180 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(210 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(240 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.25s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(270 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(300 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(330 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite"/></rect></svg>',
-  ring:
-    '<svg class="ring" viewBox="0 0 100 100" class="center"><defs><linearGradient x1="0" y1="0" x2="1" y2="0" id="ring-a"><stop offset="10%" stop-color="#eee" stop-opacity="0"/><stop offset="100%" stop-color="#eee"/></linearGradient><linearGradient x1="0" y1="0" x2="1" y2="0" id="ring-b"><stop offset="0%" stop-color="#eee"/><stop offset="100%" stop-color="#eee" stop-opacity=".1"/></linearGradient></defs><g stroke-width="8" fill="none"><circle cx="50" cy="50" r="40" stroke="url(\'#ring-a\')" stroke-dasharray="90 0"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;180 50 50;360 50 50" keyTimes="0;0.5;1"/></circle><circle cx="50" cy="50" r="40" stroke-linecap="round" stroke="url(\'#ring-b\')" stroke-dasharray="98 189"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;180 50 50;360 50 50" keyTimes="0;0.5;1"/></circle></g></svg>',
+  ring: `<svg class="ring" viewBox="0 0 100 100" class="center">
+      <defs>
+        <linearGradient x1="0" y1="0" x2="1" y2="0" id="ring-a">
+          <stop offset="10%" stop-color="#eee" stop-opacity="0"/>
+          <stop offset="100%" stop-color="#eee"/>
+        </linearGradient>
+        <linearGradient x1="0" y1="0" x2="1" y2="0" id="ring-b">
+          <stop offset="0%" stop-color="#eee"/>
+          <stop offset="100%" stop-color="#eee" stop-opacity=".1"/>
+        </linearGradient>
+      </defs>
+      <g stroke-width="14" fill="none">
+        <circle cx="50" cy="50" r="40" stroke="url(#ring-a)" stroke-dasharray="90 0">
+          <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;180 50 50;360 50 50" keyTimes="0;0.5;1"/>
+        </circle>
+        <circle cx="50" cy="50" r="40" stroke-linecap="round" stroke="url(#ring-b)" stroke-dasharray="98 189">
+          <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;180 50 50;360 50 50" keyTimes="0;0.5;1"/>
+        </circle>
+      </g>
+    </svg>`,
   'warn-color':
     '<svg class="warn" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><g fill="none" fill-rule="evenodd"><path d="M50.001 100C22.385 100 0 77.615 0 50.001 0 22.385 22.385 0 50.001 0 77.615 0 100 22.385 100 50.001 100 77.615 77.615 100 50.001 100z" fill="#F3F4F5"/><path d="M45.44 22h10.118l-1.821 34.217h-6.78L45.44 22zm9.646 45.366C56.36 68.575 57 70.036 57 71.758c0 1.943-.645 3.47-1.936 4.577-1.293 1.11-2.8 1.665-4.52 1.665-1.75 0-3.278-.547-4.584-1.644C44.654 75.26 44 73.728 44 71.758c0-1.721.626-3.183 1.873-4.392 1.248-1.205 2.776-1.809 4.585-1.809 1.806 0 3.35.604 4.628 1.809z" fill="#666F83"/></g></svg>',
   'success-color':

components/tab-bar/index.vue

@@ -297,11 +297,12 @@ export default {
 
 .md-tab-bar-ink
   position absolute
-  bottom 0
+  bottom 10px
   left 0
   display block
   height tab-ink-height
   background-color tab-active-color
+  border-radius 2000px
   transition all 300ms
   &.is-disabled
     background-color tab-disabled-color

components/tabs/index.vue

@@ -32,7 +32,7 @@ export default {
     },
     inkLength: {
       type: Number,
-      default: 80,
+      default: 25,
     },
     immediate: Boolean,
   },

components/tag/demo/cases/demo1.vue

@@ -8,6 +8,14 @@
       font-weight="normal"
       font-color="#FF5B60"
     >逾期23天</md-tag>
+    <md-tag
+      size="large"
+      shape="fillet"
+      type="ghost"
+      fill-color="rgba(255, 91, 96, .1)"
+      font-weight="normal"
+      font-color="#FF5B60"
+    >逾期23天</md-tag>
   </div>
 </template>
 
@@ -23,4 +31,4 @@ export default {
     [Tag.name]: Tag,
   },
 }
-
</script>
+
</script>

components/tip/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import TipOptions from './tip'
+import TipOptions from './tip.vue'
 import {randomId} from '../_util'
 const Tip = Vue.extend(TipOptions)
 

components/toast/demo/cases/demo8.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="md-example-child md-example-child-toast md-example-child-toast-7">
+    <md-toast ref="toast" icon="ring" icon-svg content="loading..." square>
+    </md-toast>
+    <md-button @click="showTextToast">方形Toast</md-button>
+  </div>
+</template>
+
+<script>
import {Toast, Button, ActivityIndicator} from 'mand-mobile'
+
+export default {
+  name: 'toast-demo',
+  /* DELETE */
+  title: '方形 Toast',
+  titleEnUS: 'Cube toast',
+  /* DELETE */
+  components: {
+    [Toast.component.name]: Toast.component,
+    [Button.name]: Button,
+    [ActivityIndicator.name]: ActivityIndicator,
+  },
+  data() {
+    return {
+      isShow: false,
+    }
+  },
+  methods: {
+    showTextToast() {
+      if (this.isShow) {
+        this.$refs.toast.hide()
+        this.isShow = false
+      } else {
+        this.$refs.toast.show()
+        this.isShow = true
+      }
+    },
+  },
+}
+
</script>

components/toast/demo/index.vue

@@ -19,6 +19,7 @@ import Demo4 from './cases/demo4'
 import Demo5 from './cases/demo5'
 import Demo6 from './cases/demo6'
 import Demo7 from './cases/demo7'
+import Demo8 from './cases/demo8'
 
-export default {...createDemoModule('toast', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7])}
+export default {...createDemoModule('toast', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7, Demo8])}
 
</script>

components/toast/index.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import ToastOptions from './toast'
+import ToastOptions from './toast.vue'
 
 /**
  * Toast factory
@@ -135,7 +135,7 @@ Toast.failed = (content = '', duration = 3000, hasMask = false, parentNode = doc
  */
 Toast.loading = (content = '', duration = 0, hasMask = true, parentNode = document.body, square = false) => {
   return Toast({
-    icon: 'ring',
+    icon: 'spinner',
     iconSvg: true,
     content,
     duration,

components/toast/test/__snapshots__/demo.spec.js.snap

@@ -5,8 +5,8 @@ exports[`Toast - Demo Continuous call 1`] = `
   <div class="md-popup with-mask center" style="">
     <div class="md-popup-mask" style=""></div>
     <div class="md-popup-box md-fade" style="">
-      <div class="md-toast-content"><svg class="md-icon icon-svg md-icon-ring lg">
-          <use xlink:href="#ring"></use>
+      <div class="md-toast-content"><svg class="md-icon icon-svg md-icon-spinner lg">
+          <use xlink:href="#spinner"></use>
         </svg>
         <div class="md-toast-text">载入中</div>
       </div>
@@ -60,8 +60,8 @@ exports[`Toast - Demo Loading 1`] = `
   <div class="md-popup with-mask center" style="">
     <div class="md-popup-mask" style=""></div>
     <div class="md-popup-box md-fade" style="">
-      <div class="md-toast-content"><svg class="md-icon icon-svg md-icon-ring lg">
-          <use xlink:href="#ring"></use>
+      <div class="md-toast-content"><svg class="md-icon icon-svg md-icon-spinner lg">
+          <use xlink:href="#spinner"></use>
         </svg>
         <div class="md-toast-text">加载中...</div>
       </div>

docs/index.gitee.html

@@ -34,5 +34,5 @@
     <script src="//cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
     <!-- <script async defer src="//buttons.github.io/buttons.js"></script> -->
     <!-- built files will be auto injected -->
-  <script type="text/javascript" src="/docs/static/js/manifest.4100fbe4.js"></script><script type="text/javascript" src="/docs/static/js/vendor.6487bca8.js"></script><script type="text/javascript" src="/docs/static/js/app.bfe5e557.js"></script></body>
+  <script type="text/javascript" src="/docs/static/js/manifest.a702aabf.js"></script><script type="text/javascript" src="/docs/static/js/vendor.6c3640bb.js"></script><script type="text/javascript" src="/docs/static/js/app.c09350d9.js"></script></body>
 </html>

docs/index.html

@@ -34,5 +34,5 @@
     <script src="//cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
     <!-- <script async defer src="//buttons.github.io/buttons.js"></script> -->
     <!-- built files will be auto injected -->
-  <script type="text/javascript" src="/mand-mobile/static/js/manifest.4100fbe4.js"></script><script type="text/javascript" src="/mand-mobile/static/js/vendor.6487bca8.js"></script><script type="text/javascript" src="/mand-mobile/static/js/app.bfe5e557.js"></script></body>
+  <script type="text/javascript" src="/mand-mobile/static/js/manifest.a702aabf.js"></script><script type="text/javascript" src="/mand-mobile/static/js/vendor.6c3640bb.js"></script><script type="text/javascript" src="/mand-mobile/static/js/app.c09350d9.js"></script></body>
 </html>