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

.eslintrc.js

@@ -23,7 +23,8 @@ module.exports = {
     document: false,
     navigator: false,
     window: false,
-    require: true
+    require: true,
+    FileReader: true
   },
 
   rules: {

components.json

@@ -31,8 +31,8 @@
   "actionsheet": "./packages/actionsheet/index.js",
   "quantity": "./packages/quantity/index.js",
   "progress": "./packages/progress/index.js",
+  "toast": "./packages/toast/index.js",
   "uploader": "./packages/uploader/index.js",
   "swipe": "./packages/swipe/index.js",
   "swipe-item": "./packages/swipe-item/index.js"
-
 }

docs/build/1.js

@@ -1 +1 @@
-webpackJsonp([1],{250:function(t,e,a){a(455);var i=a(0)(a(264),a(401),null,null);t.exports=i.exports},264:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(28),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},309:function(t,e,a){e=t.exports=a(16)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},401:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},455:function(t,e,a){var i=a(309);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(29)("1517d9c0",i,!0)}});
+webpackJsonp([1],{259:function(t,e,a){a(480);var i=a(0)(a(273),a(422),null,null);t.exports=i.exports},273:function(t,e,a){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0});var n=a(30),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},322:function(t,e,a){e=t.exports=a(16)(),e.push([t.i,".side-nav{width:100%;box-sizing:border-box;padding:40px 20px;background:#f9fafb}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;-webkit-transition:all .3s;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}",""])},422:function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"side-nav"},[a("ul",t._l(t.data,function(e){return a("li",{staticClass:"nav-item"},[e.path?a("router-link",{attrs:{"active-class":"active",to:t.base+e.path,exact:""},domProps:{textContent:t._s(e.title||e.name)}}):a("a",[t._v(t._s(e.name))]),t._v(" "),e.children?a("ul",{staticClass:"pure-menu-list sub-nav"},t._l(e.children,function(e){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title||e.name)}})],1)})):t._e(),t._v(" "),e.groups?t._l(e.groups,function(e){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title"},[t._v(t._s(e.groupName))]),t._v(" "),a("ul",{staticClass:"pure-menu-list"},[t._l(e.list,function(e){return[e.disabled?t._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:t.base+e.path},domProps:{textContent:t._s(e.title)}})],1)]})],2)])}):t._e()],2)}))])},staticRenderFns:[]}},480:function(t,e,a){var i=a(322);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(31)("1517d9c0",i,!0)}});

docs/examples-dist/toast.vue

@@ -0,0 +1,37 @@
+<template><section class="demo-toast"><h1 class="demo-title">toast</h1><example-block title="基础用法">
+                <zan-button @click="showSimpleToast()">普通文字提示</zan-button>
+
+<zan-button @click="showToast('loading')">加载Toast</zan-button>
+<zan-button @click="showToast('success')">成功</zan-button>
+<zan-button @click="showToast('failure')">失败</zan-button>
+
+
+
+              </example-block></section></template>
+<style>
+@component-namespace demo {
+  @b toast {
+    .zan-button {
+      margin: 15px;
+    }
+  }
+}
+</style>
+<script>
+import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
+import { Toast } from 'src/index';
+
+export default {
+  methods: {
+    showSimpleToast() {
+      Toast('我是提示文案，建议不超过十五字~');
+    },
+    showToast(type) {
+      Toast({
+        type: type,
+        message: '文案信息'
+      })
+    }
+  }
+};
+</script>

docs/examples-docs/toast.md

@@ -0,0 +1,66 @@
+<style>
+@component-namespace demo {
+  @b toast {
+    .zan-button {
+      margin: 15px;
+    }
+  }
+}
+</style>
+
+<script>
+import { Toast } from 'src/index';
+
+export default {
+  methods: {
+    showSimpleToast() {
+      Toast('我是提示文案，建议不超过十五字~');
+    },
+    showToast(type) {
+      Toast({
+        type: type,
+        message: '文案信息'
+      })
+    }
+  }
+};
+</script>
+
+## Dialog组件
+
+### 基础用法
+
+:::demo 基础用法
+```html
+<zan-button @click="showSimpleToast()">普通文字提示</zan-button>
+
+<zan-button @click="showToast('loading')">加载Toast</zan-button>
+<zan-button @click="showToast('success')">成功</zan-button>
+<zan-button @click="showToast('failure')">失败</zan-button>
+
+<script>
+import { Toast } from 'src/index';
+
+export default {
+  methods: {
+    showSimpleToast() {
+      Toast('我是提示文案，建议不超过十五字~');
+    },
+    showToast(type) {
+      Toast({
+        type: type,
+        message: '文案信息'
+      })
+    }
+  }
+};
+</script>
+```
+
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| type | 类型 | String  | 'text' | 'text', 'loading', 'success', 'failure'  |
+| message | 内容 | String  | '' | - |

packages/loading/index.js

@@ -1,3 +1,3 @@
-import Loading from './src/loading';
+import ZanLoading from './src/loading';
 
-export default Loading;
+export default ZanLoading;

packages/toast/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/toast/index.js

@@ -0,0 +1,3 @@
+import Toast from './src/toast';
+
+export default Toast;

packages/toast/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@youzan/zan-toast",
+  "version": "0.0.1",
+  "description": "toast component",
+  "main": "./index.js",
+  "author": "jiangruowei",
+  "license": "MIT",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/toast/src/toast.js

@@ -0,0 +1,55 @@
+import Vue from 'vue';
+
+const ToastConstructor = Vue.extend(require('./toast.vue'));
+let toastQueue = [];
+
+let getInstance = () => {
+  if (toastQueue.length > 0) {
+    let instance = toastQueue[0];
+    toastQueue.splice(0, 1);
+    return instance;
+  }
+  return new ToastConstructor({
+    el: document.createElement('div')
+  });
+};
+
+const returnInstance = instance => {
+  if (instance) {
+    toastQueue.push(instance);
+  }
+};
+
+const removeDom = event => {
+  if (event.target.parentNode) {
+    event.target.parentNode.removeChild(event.target);
+  }
+};
+
+
+var Toast = (options = {}) => {
+  const duration = options.duration || 3000;
+
+  let instance = getInstance();
+  returnInstance(instance);
+  instance.closed = false;
+  clearTimeout(instance.timer);
+  instance.type = options.type ? options.type : 'text';
+  instance.message = typeof options === 'string' ? options : options.message;
+
+  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;
+    }, duration);
+  });
+  return instance;
+};
+
+export default Toast;

packages/toast/src/toast.vue

@@ -0,0 +1,81 @@
+<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>
+  </transition>
+</template>
+
+<script>
+import zanLoading from 'packages/loading';
+import zanIcon from 'packages/icon';
+
+const TOAST_TYPES = ['text', 'loading', 'success', 'failure'];
+/**
+ * zan-toast
+ * @module components/toast
+ * @desc toast
+ * @param {string} [type=false] - 类型
+ * @param {string} [message] - 信息
+ *
+ */
+export default {
+  name: 'zan-toast',
+
+  components: {
+    'zan-loading': zanLoading,
+    'zan-icon': zanIcon
+  },
+  props: {
+    type: {
+      type: String,
+      default: 'text',
+      validate(value) {
+        return TOAST_TYPES.indexOf(value) > -1;
+      }
+    },
+    message: {
+      type: String,
+      default: '',
+      validate(value) {
+        if (this.type === 'success' || this.type === 'failure') {
+          return value.length <= 16;
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false
+    };
+  },
+  computed: {
+    displayStyle() {
+      switch (this.type) {
+        case 'text':
+          return 'text';
+        case 'loading':
+          return 'loading';
+        default:
+          return 'default';
+      }
+    },
+    iconName() {
+      // TODO: 更新icon
+      return 'check';
+    }
+  }
+};
+</script>

packages/uploader/src/main.vue

@@ -21,43 +21,36 @@
       resultType: {
         type: String,
         default: 'dataUrl',
-        validator (value) {
-          return value == 'dataUrl' || value == 'text'
+        validator(value) {
+          return value === 'dataUrl' || value === 'text';
         }
       }
     },
     methods: {
-      onValueChange (event) {
-        
+      onValueChange(event) {
         if (this.disabled) {
           return;
         }
-
         var files = event.target.files;
         var file = files[0];
         if (!file) return;
-       
-        if (this.beforeRead && ! this.beforeRead(file)) return;
-        
+        if (this.beforeRead && !this.beforeRead(file)) return;
         var reader = new FileReader();
-
         reader.onload = (e) => {
           this.$emit('file-readed',
             {
-              name:file.name,
-              type:file.type,
-              size:file.size,
-              content:e.target.result
+              name: file.name,
+              type: file.type,
+              size: file.size,
+              content: e.target.result
             });
           this.$refs.input.value = '';
         };
-
-        if (this.resultType == 'dataUrl') {
+        if (this.resultType === 'dataUrl') {
           reader.readAsDataURL(file);
-        } else if (this.resultType == 'text') {
+        } else if (this.resultType === 'text') {
           reader.readAsText(file);
-        } 
-
+        }
       }
     }
   };

packages/waterfall/src/directive.js

@@ -30,21 +30,21 @@ function doBindEvent() {
 
 // 处理滚动函数
 function handleScrollEvent() {
-  let element = this.el;
-  let scrollEventTarget = this.scrollEventTarget;
+  const element = this.el;
+  const scrollEventTarget = this.scrollEventTarget;
 
   // 已被禁止的滚动处理
   if (this.disabled) return;
 
-  let targetScrollTop = Utils.getScrollTop(scrollEventTarget);
-  let targetBottom = targetScrollTop + Utils.getVisibleHeight(scrollEventTarget);
+  const targetScrollTop = Utils.getScrollTop(scrollEventTarget);
+  const targetBottom = targetScrollTop + Utils.getVisibleHeight(scrollEventTarget);
 
   // 判断是否到了底
   let needLoadMoreToLower = false;
   if (element === scrollEventTarget) {
     needLoadMoreToLower = scrollEventTarget.scollHeight - targetBottom < this.offset;
   } else {
-    let elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
+    const elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
     needLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) < this.offset;
   }
   if (needLoadMoreToLower) {
@@ -56,7 +56,7 @@ function handleScrollEvent() {
   if (element === scrollEventTarget) {
     needLoadMoreToUpper = targetScrollTop < this.offset;
   } else {
-    let elementTop = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget);
+    const elementTop = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget);
     needLoadMoreToUpper = elementTop + this.offset > 0;
   }
   if (needLoadMoreToUpper) {
@@ -64,6 +64,30 @@ function handleScrollEvent() {
   }
 }
 
+// 绑定事件
+function startBind(el) {
+  const context = el[CONTEXT];
+
+  context.vm.$nextTick(function() {
+    if (Utils.isAttached(el)) {
+      doBindEvent.call(el[CONTEXT]);
+    }
+  });
+}
+
+// 确认何时绑事件监听函数
+function doCheckStartBind(el) {
+  const context = el[CONTEXT];
+
+  if (context.vm._isMounted) {
+    startBind(el);
+  } else {
+    context.vm.$on('hook:mounted', function() {
+      startBind(el);
+    });
+  }
+}
+
 export default function(type) {
   return {
     bind(el, binding, vnode) {
@@ -76,11 +100,7 @@ export default function(type) {
       }
       el[CONTEXT].cb[type] = binding.value;
 
-      vnode.context.$on('hook:mounted', function() {
-        if (Utils.isAttached(el)) {
-          doBindEvent.call(el[CONTEXT]);
-        }
-      });
+      doCheckStartBind(el);
     },
 
     update(el) {

packages/zanui-css/src/index.css

@@ -25,6 +25,6 @@
 @import './actionsheet.css';
 @import './quantity.css';
 @import './progress.css';
+@import './toast.css';
 @import './uploader.css';
 @import './swipe.css';
-

packages/zanui-css/src/toast.css

@@ -0,0 +1,36 @@
+@import './common/var.css';
+
+@component-namespace zan {
+  @b toast {
+    position: fixed;
+    border-radius: 5px;
+    background-color: #272727;
+    opacity: 0.7;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    font-size: 12px;
+    color: $c-white;
+    text-align: center;
+
+    @m loading {
+      padding: 45px;
+    }
+
+    @m text {
+      padding: 11px;
+    }
+
+    @m default {
+      width: 120px;
+      height: 120px;
+      .zan-toast__icon {
+        padding: 20px;
+        font-size: 36px;
+      }
+      .zan-toast__text {
+        padding-bottom: 20px;
+      }
+    }
+  }
+}

src/index.js

@@ -30,6 +30,7 @@ import Row from '../packages/row/index.js';
 import Actionsheet from '../packages/actionsheet/index.js';
 import Quantity from '../packages/quantity/index.js';
 import Progress from '../packages/progress/index.js';
+import Toast from '../packages/toast/index.js';
 import Uploader from '../packages/uploader/index.js';
 import Swipe from '../packages/swipe/index.js';
 import SwipeItem from '../packages/swipe-item/index.js';
@@ -110,6 +111,7 @@ module.exports = {
   Actionsheet,
   Quantity,
   Progress,
+  Toast,
   Uploader,
   Swipe,
   SwipeItem