Merge branch 'master' into loading

README.md

@@ -0,0 +1,35 @@
+## 下载项目
+```bash
+git@gitlab.qima-inc.com:fe/oxygen.git
+cd oxygen
+```
+
+## 安装组件依赖库
+```bash
+ynpm i
+```
+
+## 新建组件（以waterfall为例）
+新建一个Vue组件，比如  waterfall
+```bash
+make init waterfall
+```
+就可以在 packages目录 里面看到waterfall初始化的组件代码了。记得更新package.json和README.md里的组件描述信息
+
+## 示例预览（以waterfall为例）
+在 docs/nav.config.json 文件里合适的地方写入组件声明，根据组件类型（JS组件，CSS组件，Form等）进行区分
+在 docs/examples 目录里新建 同名的md文件，如 waterfall.md
+在项目的根目录下执行以下命令，启动server
+```
+make dev
+```
+浏览器访问 http://localhost:8080/#/ 就可以看到所有组件的示例了
+
+
+
+
+
+
+
+
+

docs/examples/button.md

@@ -66,7 +66,7 @@
 
 ### 自定义按钮标签
 
-:::demo 有时按钮需要是一个a标签
+:::demo 按钮默认是button标签，可以使用tag属性修改为一个a标签
 ```html 
 <div class="z-button-group">
   <div class="z-button-1-1">

packages/button/src/button.js

@@ -42,6 +42,12 @@ export default {
     }
   },
 
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    }
+  },
+
   render(h) {
     let { type, nativeType, size, disabled, loading, block } = this;
     let Tag = this.tag;
@@ -60,6 +66,7 @@ export default {
             'is-block': block
           }
         ]}
+        onClick={this.handleClick}
       >
         {
           loading ? <i class="z-icon-loading"></i> : null

packages/cell/src/cell.vue

@@ -1,15 +1,15 @@
 <template>
   <a class="z-cell" :href="url" @click="handleClick">
-    <div class="z-cell-title">
+    <div class="z-cell__title">
       <slot name="icon">
         <i v-if="icon" class="zui-icon" :class="'zui-icon-' + icon"></i>
       </slot>
       <slot name="title">
         <span class="z-cell-text" v-text="title"></span>
-        <span class="z-cell-label" v-if="label" v-text="label"></span>
+        <span class="z-cell__abel" v-if="label" v-text="label"></span>
       </slot>
     </div>
-    <div class="z-cell-value" :class="{ 'is-link' : isLink }">
+    <div class="z-cell__value" :class="{ 'is-link' : isLink }">
       <slot>
         <span v-text="value"></span>
       </slot>

packages/dialog/src/dialog.vue

@@ -2,15 +2,15 @@
   <transition name="dialog-bounce">
     <div class="z-dialog-wrapper">
       <div class="z-dialog" v-show="value">
-        <div class="z-dialog-header" v-if="title">
-          <div class="z-dialog-title" v-text="title"></div>
+        <div class="z-dialog__header" v-if="title">
+          <div class="z-dialog__title" v-text="title"></div>
         </div>
-        <div class="z-dialog-content" v-if="message">
-          <div class="z-dialog-message" v-html="message"></div>
+        <div class="z-dialog__content" v-if="message">
+          <div class="z-dialog__message" v-html="message"></div>
         </div>
-        <div class="z-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
-          <button class="z-dialog-btn z-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
-          <button class="z-dialog-btn z-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
+        <div class="z-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+          <button class="z-dialog__btn z-dialog__cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="z-dialog__btn z-dialog__confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
         </div>
       </div>
     </div>

packages/field/src/field.vue

@@ -8,7 +8,7 @@
     }">
     <textarea
       v-if="type === 'textarea'"
-      class="z-field-control"
+      class="z-field__control"
       v-model="currentValue"
       @change="$emit('change', currentValue)"
       :placeholder="placeholder"
@@ -18,7 +18,7 @@
     </textarea>
     <input
       v-else
-      class="z-field-control"
+      class="z-field__control"
       :value="currentValue"
       @change="$emit('change', currentValue)"
       @input="handleInput"

packages/picker/src/picker-column.vue

@@ -154,7 +154,9 @@ export default {
       var el = this.$refs.wrapper;
       var dragState = {};
 
-      var velocityTranslate, prevTranslate, pickerItems;
+      var velocityTranslate;
+      var prevTranslate;
+      var pickerItems; // eslint-disable-line
 
       draggable(el, {
         start: (event) => {
@@ -166,7 +168,7 @@ export default {
             startTop: event.pageY,
             startTranslateTop: translateUtil.getElementTranslate(el).top
           };
-          pickerItems = el.querySelectorAll('.z-picker-item');
+          pickerItems = el.querySelectorAll('.z-picker-item'); // eslint-disable-line
         },
 
         drag: (event) => {

packages/picker/src/picker.vue

@@ -98,7 +98,6 @@ export default {
      */
     getColumnValue(index) {
       let column = this.getColumn(index);
-      console.log(column)
       return column && column.values[column.valueIndex];
     },
 

packages/zanui-css/src/button.pcss

@@ -63,6 +63,9 @@
       font-size: 12px;
     }
 
+    /*
+      mini图标默认宽度50px，文字不能超过4个
+     */
     @m mini {
       display: inline-block;
       width: 50px;

packages/zanui-css/src/cell.pcss

@@ -2,7 +2,7 @@
 @import "./mixins/border_retina.pcss";
 
 @component-namespace z {
-  @component cell-group {
+  @b cell-group {
     padding-left: 10px;
     position: relative;
 
@@ -11,7 +11,7 @@
     }
   }
 
-  @component cell {
+  @b cell {
     display: block;
     overflow: hidden;
     position: relative;
@@ -33,19 +33,19 @@
       }
     }
 
-    @descendent title {
+    @empty-cells: show title {
       float: left;
       overflow: hidden;
     }
 
-    @descendent label {
+    @e label {
       display: block;
       font-size: 12px;
       line-height: 1.2;
       color: #666;
     }
 
-    @descendent value {
+    @e value {
       float: right;
       overflow: hidden;
 

packages/zanui-css/src/dialog.pcss

@@ -1,11 +1,11 @@
 @import "./mixins/border_retina.pcss";
 
 @component-namespace z {
-  @component dialog-wrapper {
+  @b dialog-wrapper {
     position: absolute;
   }
 
-  @component dialog {
+  @b dialog {
     position: fixed;
     top: 50%;
     left: 50%;
@@ -18,11 +18,11 @@
     backface-visibility: hidden;
     transition: .2s;
 
-    @descendent header {
+    @e header {
       padding: 15px 0 0;
     }
 
-    @descendent content {
+    @e content {
       padding: 15px 20px;
       min-height: 36px;
       position: relative;
@@ -32,7 +32,7 @@
       }
     }
 
-    @descendent title {
+    @e title {
       text-align: center;
       padding-left: 0;
       margin-bottom: 0;
@@ -40,31 +40,31 @@
       color: #333;
     }
 
-    @descendent message {
+    @e message {
       color: #999;
       margin: 0;
       font-size: 14px;
       line-height: 1.5;
     }
 
-    @descendent footer {
+    @e footer {
       font-size: 14px;
       overflow: hidden;
-    }
 
-    .is-twobtn {
-      .z-dialog-btn {
-        width: 50%;
-      }
+      @when twobtn {
+        .z-dialog__btn {
+          width: 50%;
+        }
 
-      .z-dialog-cancel {
-        &::after {
-          @mixin border-retina (right);
+        .z-dialog__cancel {
+          &::after {
+            @mixin border-retina (right);
+          }
         }
       }
     }
 
-    @descendent btn {
+    @e btn {
       line-height: 40px;
       border: 0;
       background-color: #fff;
@@ -74,11 +74,11 @@
       position: relative;
     }
 
-    @descendent cancel {
+    @e cancel {
       color: #333;
     }
 
-    @descendent confirm {
+    @e confirm {
       color: #00C000;
       width: 100%;
     }

packages/zanui-css/src/field.pcss

@@ -2,46 +2,46 @@
 @import "./mixins/border_retina.pcss";
 
 @component-namespace z {
-  @component field {
+  @b field {
     width: 100%;
     overflow: hidden;
 
     @when textarea {
-      .z-field-control {
+      .z-field__control {
         min-height: 60px;
       }
     }
 
     @when nolabel {
-      .z-cell-title {
+      .z-cell__title {
         display: none;
       }
 
-      .z-cell-value {
+      .z-cell__value {
         width: 100%;
         padding-left: 0;
       }
     }
 
-    .z-cell-title,
-    .z-cell-value {
+    .z-cell__title,
+    .z-cell__value {
       float: none;
       box-sizing: border-box;
     }
 
-    .z-cell-title {
+    .z-cell__title {
       width: 90px;
       position: absolute;
       top: 10px;
       left: 0;
     }
 
-    .z-cell-value {
+    .z-cell__value {
       width: 100%;
       padding-left: 90px;
     }
 
-    .z-field-control {
+    @e control {
       border: 0;
       font-size: 14px;
       line-height: 22px;

packages/zanui-css/src/popup.pcss

@@ -8,7 +8,7 @@
 }
 
 @component-namespace z {
-  @component popup {
+  @b popup {
     position: fixed;
     background-color: #fff;
     top: 50%;
@@ -17,7 +17,7 @@
     backface-visibility: hidden;
     transition: .2s ease-out;
 
-    @modifier top {
+    @m top {
       top: 0;
       right: auto;
       bottom: auto;
@@ -25,7 +25,7 @@
       transform: translate3d(-50%, 0, 0);
     }
 
-    @modifier right {
+    @m right {
       top: 50%;
       right: 0;
       bottom: auto;
@@ -33,7 +33,7 @@
       transform: translate3d(0, -50%, 0);
     }
 
-    @modifier bottom {
+    @m bottom {
       top: auto;
       bottom: 0;
       right: auto;
@@ -41,7 +41,7 @@
       transform: translate3d(-50%, 0, 0);
     }
 
-    @modifier left {
+    @m left {
       top: 50%;
       right: auto;
       bottom: auto;

src/utils/transition.js

@@ -7,7 +7,7 @@ if (!Vue.prototype.$isServer) {
   var engine;
   var translate3d = false;
 
-  if (window.opera && Object.prototype.toString.call(opera) === '[object Opera]') {
+  if (window.opera && Object.prototype.toString.call(window.opera) === '[object Opera]') {
     engine = 'presto';
   } else if ('MozAppearance' in docStyle) {
     engine = 'gecko';
@@ -77,7 +77,7 @@ if (!Vue.prototype.$isServer) {
     if (element === null || element.style === null) return;
 
     var transformValue = element.style[transformProperty];
-    
+
     if (transformValue) {
       transformValue = transformValue.replace(/translate\(\s*(-?\d+(\.?\d+?)?)px,\s*(-?\d+(\.\d+)?)px\)\s*translateZ\(0px\)/g, '');
       element.style[transformProperty] = transformValue;