Merge branch 'master' of gitlab.qima-inc.com:fe/zanui-vue

packages/badge/src/badge-group.vue

@@ -14,12 +14,6 @@
         type: [Number, String],
         default: 0
       }
-    },
-
-    data() {
-      return {
-        computedActiveKey: this.activeKey
-      };
     }
   };
 </script>

packages/badge/src/badge.vue

@@ -19,21 +19,27 @@ export default {
       required: true
     },
     url: {
-      type: String
+      type: String,
+      default: 'javascript:;'
     },
     info: {
       type: String
     }
   },
   methods: {
-    handleClick() {
-      this.$parent.computedActiveKey = this.mark;
+    handleClick(e) {
+      this.$emit('click', e, {
+        mark: this.mark,
+        title: this.title,
+        url: this.url,
+        info: this.info
+      });
     }
   },
   computed: {
     classNames() {
       return {
-        'is-select': this.mark === this.$parent.computedActiveKey
+        'is-select': this.mark === this.$parent.activeKey
       };
     }
   }

packages/cell/src/cell.vue

@@ -1,6 +1,6 @@
 <template>
   <a class="zan-cell" :href="url" @click="handleClick">
-    <div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }">
+    <div :class="{ 'zan-cell__title': true, 'zan-cell__required': required }" v-if="this.$slots.title || title || label">
       <slot name="icon">
         <i v-if="icon" class="zan-icon" :class="'zan-icon-' + icon"></i>
       </slot>

packages/datetime-picker/src/datetime-picker.vue

@@ -81,7 +81,6 @@ export default {
           [0, 59]
         ];
       }
-debugger
       const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = this.getBoundary('max', this.innerValue);
       const { minYear, minDate, minMonth, minHour, minMinute } = this.getBoundary('min', this.innerValue);
 

packages/field/src/field.vue

@@ -16,6 +16,7 @@
       ref="textareaElement"
       class="zan-field__control"
       v-model="currentValue"
+      @focus="handleInputFocus"
       :placeholder="placeholder"
       :maxlength="maxlength"
       :disabled="disabled"
@@ -28,6 +29,7 @@
       class="zan-field__control"
       :value="currentValue"
       @input="handleInput"
+      @focus="handleInputFocus"
       :type="type"
       :placeholder="placeholder"
       :maxlength="maxlength"
@@ -104,6 +106,10 @@ export default {
       // 需要先设为0， 才可以让scrollHeight正确计算。
       textareaElement.style.height = 0 + 'px';
       textareaElement.style.height = (textareaElement.scrollHeight - textAreaDiff) + 'px';
+    },
+
+    handleInputFocus() {
+      this.$emit('focus');
     }
   }
 };

packages/picker/src/picker-column.vue

@@ -65,6 +65,9 @@ export default {
   },
 
   watch: {
+    value(val) {
+      this.currentValue = val;
+    },
     values(val) {
       this.currentValues = val;
     },

packages/progress/src/progress.vue

@@ -2,9 +2,7 @@
   <div class="zan-progress">
     <div class="zan-progress__bar">
       <span class="zan-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
-      <span class="zan-progress__bar__pivot" :style="pivotStyle">
-        {{pivotText}}
-      </span>
+      <span class="zan-progress__bar__pivot" :style="pivotStyle">{{currentPivotText}}</span>
     </div>
   </div>
 </template>
@@ -29,7 +27,7 @@ export default {
   props: {
     percentage: {
       type: Number,
-      default: 0,
+      required: true,
       validate(value) {
         return value <= 100 && value >= 0;
       }
@@ -55,6 +53,9 @@ export default {
   },
 
   computed: {
+    currentPivotText() {
+      return this.pivotText ? this.pivotText : this.this.percentage.toString() + '%';
+    },
     componentColor() {
       return this.inactive ? '#cacaca' : this.color;
     },
@@ -65,7 +66,6 @@ export default {
         left: this.percentage + '%',
         marginLeft: '-14px'
       };
-      console.log(this.percentage);
       if (this.percentage <= 5) {
         pivotStyle.left = '0%';
         pivotStyle.marginLeft = '0';

packages/tab/src/tab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="zan-tabs-pane" :class="classNames">
+  <div class="zan-tab__pane" :class="classNames">
     <slot></slot>
   </div>
 </template>
@@ -17,7 +17,7 @@
     },
     computed: {
       classNames() {
-        return { 'is-select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
+        return { 'zan-tab__pane--select': this.$parent.tabs.indexOf(this) === this.$parent.switchActiveTabKey };
       }
     },
     created() {

packages/tab/src/tabs.vue

@@ -1,24 +1,25 @@
 <template>
   <div class="zan-tabs">
-    <div class="zan-tabs-nav" :class="classNames">
-      <div class="zan-tabs-nav-bar" :style="navBarStyle"></div>
+    <div class="zan-tabs__nav" :class="classNames">
+      <div class="zan-tabs__nav-bar" :style="navBarStyle"></div>
       <div
         v-for="(tab, index) in tabs"
         class="zan-tab"
-        :class="{'zan-tab-active': index == switchActiveTabKey}"
+        :class="{'zan-tab--active': index == switchActiveTabKey}"
         ref="tabkey"
         @click="handleTabClick(index,tab)"
       >
         {{ tab.title }}
       </div>
     </div>
-    <div class="zan-tabs-content"><slot></slot></div>
+    <div class="zan-tabs__content"><slot></slot></div>
   </div>
 </template>
 
 <script>
   export default {
     name: 'zan-tabs',
+
     props: {
       // 外部传入的激活的tab标签
       active: {
@@ -36,17 +37,26 @@
         default: ''
       }
     },
+
     data() {
       return {
         tabs: [],
         isReady: false,
-        switchActiveTabKey: this.active
+        switchActiveTabKey: +this.active
       };
     },
+
+    watch: {
+      active(val) {
+        this.switchActiveTabKey = +val;
+      }
+    },
+
     computed: {
       classNames() {
-        return [`zan-tabs-${this.type}`, this.navclass];
+        return [`zan-tabs__nav--${this.type}`, `zan-tabs--col-${this.tabs.length}`, this.navclass];
       },
+
       navBarStyle() {
         if (!this.isReady) return;
         const tabKey = this.switchActiveTabKey;
@@ -59,6 +69,7 @@
         };
       }
     },
+
     methods: {
       handleTabClick(index, el) {
         if (el.disable) {
@@ -68,6 +79,7 @@
         this.switchActiveTabKey = index;
       }
     },
+
     mounted() {
       // 页面载入完成
       this.$nextTick(() => {

packages/toast/src/toast.js

@@ -36,16 +36,20 @@ var Toast = (options = {}) => {
   clearTimeout(instance.timer);
   instance.type = options.type ? options.type : 'text';
   instance.message = typeof options === 'string' ? options : options.message;
+  instance.forbidClick = options.forbidClick ? options.forbidClick : false;
+  instance.clear = () => {
+    if (instance.closed) return;
+    instance.visible = false;
+    instance.$el.addEventListener('transitionend', removeDom);
+    instance.closed = true;
+  };
 
   document.body.appendChild(instance.$el);
   Vue.nextTick(function() {
     instance.visible = true;
     instance.$el.removeEventListener('transitionend', removeDom);
     instance.timer = setTimeout(function() {
-      if (instance.closed) return;
-      instance.visible = false;
-      instance.$el.addEventListener('transitionend', removeDom);
-      instance.closed = true;
+      instance.clear();
     }, duration);
   });
   return instance;

packages/toast/src/toast.vue

@@ -1,19 +1,26 @@
 <template>
   <transition name="zan-toast">
-    <div class="zan-toast" :class="['zan-toast--' + displayStyle]" v-show="visible">
-      <!-- 只显示文字 -->
-      <template v-if="displayStyle === 'text'" >
-        <div class="zan-toast__text">{{message}}</div>
-      </template>
-      <!-- 加载中 -->
-      <template v-if="displayStyle === 'loading'">
-          <zan-loading v-if="type === 'loading'" type="gradient-circle" color="white"></zan-loading>
-      </template>
-      <!-- 图案加文字 -->
-      <template v-if="displayStyle === 'default'">
-        <zan-icon class="zan-toast__icon" name="check"></zan-icon>
-        <div class="zan-toast__text">{{message}}</div>
-      </template>
+    <div class="zan-toast-wrapper" v-show="visible">
+      <div class="zan-toast" :class="['zan-toast--' + displayStyle]">
+        <!-- 只显示文字 -->
+        <template v-if="displayStyle === 'text'" >
+          <div class="zan-toast__text">{{message}}</div>
+        </template>
+        <!-- 加载中 -->
+        <template v-if="displayStyle === 'loading'">
+            <zan-loading v-if="type === 'loading'" type="gradient-circle" color="white"></zan-loading>
+        </template>
+        <!-- 图案加文字 -->
+        <template v-if="displayStyle === 'default'">
+          <zan-icon class="zan-toast__icon" :name="type"></zan-icon>
+          <div class="zan-toast__text">{{message}}</div>
+        </template>
+        <!-- 传入html -->
+        <template v-if="displayStyle === 'html'">
+          <div class="zan-toast__text" v-html="message"></div>
+        </template>
+      </div>
+      <div class="zan-toast__overlay" v-if="forbidClick"></div>
     </div>
   </transition>
 </template>
@@ -22,7 +29,8 @@
 import zanLoading from 'packages/loading';
 import zanIcon from 'packages/icon';
 
-const TOAST_TYPES = ['text', 'loading', 'success', 'fail'];
+const TOAST_TYPES = ['text', 'html', 'loading', 'success', 'fail'];
+const DEFAULT_STYLE_LIST = ['success', 'fail'];
 /**
  * zan-toast
  * @module components/toast
@@ -54,6 +62,10 @@ export default {
           return value.length <= 16;
         }
       }
+    },
+    forbidClick: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -63,18 +75,7 @@ export default {
   },
   computed: {
     displayStyle() {
-      switch (this.type) {
-        case 'text':
-          return 'text';
-        case 'loading':
-          return 'loading';
-        default:
-          return 'default';
-      }
-    },
-    iconName() {
-      // TODO: 更新icon
-      return 'check';
+      return DEFAULT_STYLE_LIST.indexOf(this.type) > -1 ? 'default' : this.type;
     }
   }
 };

packages/waterfall/src/directive.js

@@ -1,4 +1,4 @@
-import Utils from './utils.js';
+import Utils from 'src/utils/scroll.js';
 
 const CONTEXT = '@@Waterfall';
 const OFFSET = 300;

packages/waterfall/src/utils.js

@@ -1,75 +0,0 @@
-export default {
-  debounce(func, wait, immediate) {
-    var timeout, args, context, timestamp, result;
-    return function() {
-      context = this;
-      args = arguments;
-      timestamp = new Date();
-      var later = function() {
-        var last = (new Date()) - timestamp;
-        if (last < wait) {
-          timeout = setTimeout(later, wait - last);
-        } else {
-          timeout = null;
-          result = func.apply(context, args);
-        }
-      };
-      if (!timeout) {
-        timeout = setTimeout(later, wait);
-      }
-      return result;
-    };
-  },
-
-  // 找到最近的触发滚动事件的元素
-  getScrollEventTarget(element) {
-    var currentNode = element;
-    // bugfix, see http://w3help.org/zh-cn/causes/SD9013 and http://stackoverflow.com/questions/17016740/onscroll-function-is-not-working-for-chrome
-    while (currentNode && currentNode.tagName !== 'HTML' && currentNode.tagName !== 'BODY' && currentNode.nodeType === 1) {
-      var overflowY = this.getComputedStyle(currentNode).overflowY;
-      if (overflowY === 'scroll' || overflowY === 'auto') {
-        return currentNode;
-      }
-      currentNode = currentNode.parentNode;
-    }
-    return window;
-  },
-
-  // 判断元素是否被加入到页面节点内
-  isAttached(element) {
-    var currentNode = element.parentNode;
-    while (currentNode) {
-      if (currentNode.tagName === 'HTML') {
-        return true;
-      }
-      if (currentNode.nodeType === 11) {
-        return false;
-      }
-      currentNode = currentNode.parentNode;
-    }
-    return false;
-  },
-
-  // 获取滚动高度
-  getScrollTop(element) {
-    return 'scrollTop' in element ? element.scrollTop : element.pageYOffset;
-  },
-
-  // 获取元素距离顶部高度
-  getElementTop(element) {
-    if (element === window) {
-      return this.getScrollTop(window);
-    }
-    return element.getBoundingClientRect().top + this.getScrollTop(window);
-  },
-
-  getVisibleHeight(element) {
-    if (element === window) {
-      return element.innerHeight;
-    }
-
-    return element.getBoundingClientRect().height;
-  },
-
-  getComputedStyle: document.defaultView.getComputedStyle.bind(document.defaultView)
-};

packages/zanui-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@youzan/zanui-css",
-  "version": "0.0.38",
+  "version": "0.0.43",
   "description": "zanui css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/zanui-css/src/badge.css

@@ -13,14 +13,14 @@
         display: block;
         overflow: hidden;
         position: relative;
-        padding: 20px 15px;
+        padding: 20px 12px;
         box-sizing: border-box;
-        line-height: 14px;
+        line-height: 1.4;
         background-color: $c-background;
         color: $c-gray-darker;
         font-size: 14px;
         text-decoration: none;
-        white-space: nowrap;
+        word-break: break-all;
         @e active {
             display: none;
             position: absolute;
@@ -68,4 +68,4 @@
           }
         }
     }
-}
+}

packages/zanui-css/src/button_group.css

@@ -1,33 +0,0 @@
-@define-mixin button-wrap {
-  display: inline-block;
-  box-sizing: border-box;
-  padding-right: 10px;
-  vertical-align: middle;
-  &:last-child {
-    padding-right: 0;
-  }
-  .zan-button {
-    width: 100%;
-  }
-}
-
-@component-namespace zan {
-  @b button-group {
-    font-size: 0;
-
-
-  }
-  @b button-1 {
-    @mixin button-wrap;
-    padding-right: 0;
-    width: 100%;
-  }
-  @b button-2 {
-    @mixin button-wrap;
-    width: 50%;
-  }
-  @b button-3 {
-    @mixin button-wrap;
-    width: 33.33%;
-  }
-}

packages/zanui-css/src/cell.css

@@ -22,6 +22,7 @@
     color: $c-black;
     font-size: 14px;
     text-decoration: none;
+    overflow: hidden;
 
     &::after {
       @mixin border-retina (bottom);
@@ -34,9 +35,7 @@
     }
 
     @e title {
-      display: inline-block;
-      /* 清除空白字符对高度的影响 */
-      vertical-align: bottom;
+      float: left;
 
       &.zan-cell__required {
         &::before {
@@ -65,7 +64,7 @@
       }
 
       @when alone {
-        float: left;
+        float: none;
       }
     }
 

packages/zanui-css/src/steps.css

@@ -5,6 +5,7 @@
   @b steps {
     overflow: hidden;
     padding: 0 10px;
+    background-color: #fff;
 
     @m 4 {
       .zan-step {

packages/zanui-css/src/tab.css

@@ -2,86 +2,109 @@
 @import './mixins/border_retina.css';
 
 @component-namespace zan {
-    @b tabs {
-        position: relative;
+  @b tabs {
+    position: relative;
+
+    @m col-2 {
+      .zan-tab {
+        width: 50%;
+      }
     }
-    @b tabs-line {
+
+    @m col-3 {
+      .zan-tab {
+        width: 33.33333333333333%;
+      }
+    }
+
+    @m col-4 {
+      .zan-tab {
+        width: 25%;
+      }
+    }
+
+    @m col-5 {
+      .zan-tab {
+        width: 20%;
+      }
+    }
+
+    @e nav {
+      overflow: hidden;
+      transition: transform .5s cubic-bezier(.645, .045, .355, 1);
+      position: relative;
+
+      @m line {
         height: 44px;
         background-color: $c-white;
         &::after {
-            @mixin border-retina (top);
-            @mixin border-retina (bottom);
+          @mixin border-retina (top);
+          @mixin border-retina (bottom);
         }
         @b tabs-nav-bar {
-            display: block;
+          display: block;
         }
-    }
-    @b tabs-card {
+      }
+
+      @m card {
         height: 28px;
         margin: 0 15px;
         background-color: $c-white;
         border-radius: 2px;
         border: 1px solid #666666;
         overflow: hidden;
-        .zan-tabs-nav-bar {
-            display: none;
+        .zan-tabs__nav-bar {
+          display: none;
         }
         .zan-tab {
-            color: #666666;
-            line-height: 28px;
-            border-right: 1px solid #666666;
-            &:last-child {
-                border-right: none;
-            }
-            &.zan-tab-active {
-                background-color: #666666;
-                color: $c-white;
-            }
+          color: #666666;
+          line-height: 28px;
+          border-right: 1px solid #666666;
+          &:last-child {
+            border-right: none;
+          }
+          &.zan-tab--active {
+            background-color: #666666;
+            color: $c-white;
+          }
         }
+      }
     }
-    @b tabs-nav {
-        display: flex;
-        transition: transform .5s cubic-bezier(.645, .045, .355, 1);
-        position: relative;
-        /*float: left*/
-        &::after, &::before {
-            display: table;
-            content: " "
-        }
-        &::after {
-            clear: both
-        }
+
+    @e nav-bar {
+      z-index: 1;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      height: 2px;
+      background-color: #f13e3a;
+      transition: transform .3s cubic-bezier(.645, .045, .355, 1);
+      transform-origin: 0 0;
     }
-    @b tabs-nav-bar {
-        z-index: 1;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        height: 2px;
-        background-color: #f13e3a;
-        transition: transform .3s cubic-bezier(.645, .045, .355, 1);
-        transform-origin: 0 0;
+  }
+
+  @b tab {
+    color: $c-black;
+    font-size: 14px;
+    line-height: 44px;
+    box-sizing: border-box;
+    transition: color .3s cubic-bezier(.645, .045, .355, 1);
+    cursor: pointer;
+    text-align: center;
+    float: left;
+
+    @m active {
+      color: #FF4444;
     }
-    @b tab {
-        color: $c-black;
-        font-size: 14px;
-        line-height: 44px;
-        flex: 1;
-        display: inline-block;
-        box-sizing: border-box;
-        transition: color .3s cubic-bezier(.645, .045, .355, 1);
-        cursor: pointer;
-        text-align: center;
-    }
-    @b tab-active {
-        color: #FF4444;
-    }
-    @b tabs-pane {
-        display: none;
-        @when select {
-            display: block;
-        }   
+
+    @e pane {
+      display: none;
+
+      @m select {
+        display: block;
+      }
     }
+  }
 }
 
 

packages/zanui-css/src/toast.css

@@ -3,7 +3,7 @@
 @component-namespace zan {
   @b toast {
     position: fixed;
-    z-index: 3000;
+    z-index: 3001;
     border-radius: 5px;
     background-color: #272727;
     opacity: .7;
@@ -13,12 +13,23 @@
     font-size: 12px;
     color: $c-white;
     text-align: center;
+    line-height: 12px;
+
+    @e overlay {
+      position: fixed;
+      left: 0;
+      top: 0;
+      background: transparent;
+      height: 100vh;
+      width: 100vh;
+      z-index: 3000;
+    }
 
     @m loading {
       padding: 45px;
     }
 
-    @m text {
+    @m text, html {
       padding: 12px;
       min-width: 200px;
     }
@@ -26,12 +37,15 @@
     @m default {
       width: 120px;
       height: 120px;
+
       .zan-toast__icon {
-        padding: 20px;
-        font-size: 36px;
+        padding-top: 20px;
+        font-size: 50px;
       }
+
       .zan-toast__text {
         padding-bottom: 20px;
+        font-size: 14px;
       }
     }
   }