feat: add toast

components.json

@@ -30,5 +30,6 @@
   "row": "./packages/row/index.js",
   "actionsheet": "./packages/actionsheet/index.js",
   "quantity": "./packages/quantity/index.js",
-  "progress": "./packages/progress/index.js"
+  "progress": "./packages/progress/index.js",
+  "toast": "./packages/toast/index.js"
 }

docs/build/1.js

@@ -1 +1 @@
-webpackJsonp([1],{229:function(t,e,a){a(425);var i=a(0)(a(243),a(373),null,null);t.exports=i.exports},243: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(24),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},287:function(t,e,a){e=t.exports=a(15)(),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}",""])},373: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:[]}},425:function(t,e,a){var i=a(287);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(25)("1517d9c0",i,!0)}});
+webpackJsonp([1],{238:function(t,e,a){a(442);var i=a(0)(a(252),a(388),null,null);t.exports=i.exports},252: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(25),s=i(n);e.default={data:function(){return{highlights:[],navState:[],data:s.default["zh-CN"],base:"/component"}}}},298:function(t,e,a){e=t.exports=a(15)(),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}",""])},388: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:[]}},442:function(t,e,a){var i=a(298);"string"==typeof i&&(i=[[t.i,i,""]]),i.locals&&(t.exports=i.locals);a(26)("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
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 标题 | String  | '' |   |
+| 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,59 @@
+import Vue from 'vue';
+
+const ToastConstructor = Vue.extend(require('./toast.vue'));
+let toastPool = [];
+
+let getInstance = () => {
+  if (toastPool.length > 0) {
+    let instance = toastPool[0];
+    toastPool.splice(0, 1);
+    return instance;
+  }
+  return new ToastConstructor({
+    el: document.createElement('div')
+  });
+};
+
+const returnInstance = instance => {
+  if (instance) {
+    toastPool.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();
+  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.close();
+    }, duration);
+  });
+  return instance;
+};
+
+
+Toast.close = function() {
+  this.visible = false;
+  this.$el.addEventListener('transitionend', removeDom);
+  this.closed = true;
+  returnInstance(this);
+};
+
+export default Toast;

packages/toast/src/toast.vue

@@ -0,0 +1,77 @@
+<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 === 'iconPlusText'">
+        <zan-cell class="zan-toast__icon":name="check"></zan-cell>
+        <div class="zan-toast__text">{{message}}</div>
+      </template>
+    </div>
+  </transition>
+</template>
+
+<script>
+import zanLoading from 'packages/Loading';
+import zanIcon from 'packages/icon';
+
+const TOAST_TYPE = ['text', 'loading', 'success', 'failure'];
+/**
+ * zan-toast
+ * @module components/switch
+ * @desc 开关
+ * @param {boolean} [checked=false] - 开关状态
+ * @param {boolean} [disabled=false] - 禁用
+ * @param {boolean} [loading=false] - loading状态
+ * @param {callback} [onChange] - 开关状态改变回调函数。
+ *
+ * @example
+ * <zan-switch checked="true" disabled="false"></zan-switch>
+ */
+export default {
+  name: 'zan-toast',
+
+  components: {
+    'zan-loading': zanLoading,
+    'zan-icon': zanIcon
+  },
+  props: {
+    type: {
+      type: String,
+      default: false
+    },
+    message: {
+      type: String,
+      default: '',
+      validate(value) {
+        if (this.type === 'success' || this.type === 'failure') {
+          return value.length <= 16;
+        }
+      }
+    }
+  },
+  computed: {
+    displayStyle() {
+      switch (this.type) {
+        case 'text':
+          return 'text';
+        case 'loading':
+          return 'loading';
+        default:
+          return 'iconPlusText';
+      }
+    },
+    iconName() {
+      // TODO: 更新icon
+      return 'check';
+    }
+  }
+};
+</script>

packages/zanui-css/src/toast.css

@@ -0,0 +1,32 @@
+@import './common/var.css';
+
+@component-namespace zan {
+  @b toast {
+    border-radius: 5px;
+    background-color: #272727;
+    opacity: 0.7;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    color: $white;
+    font-size: 12px;
+
+    @m loading {
+      .zan-toast__icon {
+        top: 50%;
+        left: 50%;
+        transform: translate3d(-50%, -50%, 0);
+      }
+    }
+
+    @m text {
+      padding: 11px;
+    }
+
+    @m notify {
+      .zan-toast__icon {
+        padding: 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';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -103,5 +104,6 @@ module.exports = {
   Row,
   Actionsheet,
   Quantity,
-  Progress
+  Progress,
+  Toast
 };