[new feature] add Notify component (#2135)

docs/src/demo-entry.js

@@ -27,6 +27,7 @@ export default {
   'loading': () => wrapper(import('../../packages/loading/demo'), 'loading'),
   'nav-bar': () => wrapper(import('../../packages/nav-bar/demo'), 'nav-bar'),
   'notice-bar': () => wrapper(import('../../packages/notice-bar/demo'), 'notice-bar'),
+  'notify': () => wrapper(import('../../packages/notify/demo'), 'notify'),
   'number-keyboard': () => wrapper(import('../../packages/number-keyboard/demo'), 'number-keyboard'),
   'pagination': () => wrapper(import('../../packages/pagination/demo'), 'pagination'),
   'panel': () => wrapper(import('../../packages/panel/demo'), 'panel'),

docs/src/doc.config.js

@@ -172,6 +172,10 @@ module.exports = {
                 path: '/loading',
                 title: 'Loading 加载'
               },
+              {
+                path: '/notify',
+                title: 'Notify 消息通知'
+              },
               {
                 path: '/pull-refresh',
                 title: 'PullRefresh 下拉刷新'
@@ -469,6 +473,10 @@ module.exports = {
                 path: '/loading',
                 title: 'Loading'
               },
+              {
+                path: '/notify',
+                title: 'Notify'
+              },
               {
                 path: '/pull-refresh',
                 title: 'PullRefresh'

docs/src/docs-entry.js

@@ -62,6 +62,8 @@ export default {
   'nav-bar.zh-CN': () => import('../../packages/nav-bar/zh-CN.md'),
   'notice-bar.en-US': () => import('../../packages/notice-bar/en-US.md'),
   'notice-bar.zh-CN': () => import('../../packages/notice-bar/zh-CN.md'),
+  'notify.en-US': () => import('../../packages/notify/en-US.md'),
+  'notify.zh-CN': () => import('../../packages/notify/zh-CN.md'),
   'number-keyboard.en-US': () => import('../../packages/number-keyboard/en-US.md'),
   'number-keyboard.zh-CN': () => import('../../packages/number-keyboard/zh-CN.md'),
   'pagination.en-US': () => import('../../packages/pagination/en-US.md'),

packages/circle/index.vue

@@ -24,7 +24,7 @@
 <script>
 import create from '../utils/create';
 import { raf, cancel } from '../utils/raf';
-import { BLUE } from '../utils/color';
+import { BLUE, WHITE } from '../utils/color';
 
 export default create({
   name: 'circle',
@@ -47,7 +47,7 @@ export default create({
     },
     layerColor: {
       type: String,
-      default: '#fff'
+      default: WHITE
     },
     color: {
       type: String,

packages/index.js

@@ -35,6 +35,7 @@ import Loading from './loading';
 import Locale from './locale';
 import NavBar from './nav-bar';
 import NoticeBar from './notice-bar';
+import Notify from './notify';
 import NumberKeyboard from './number-keyboard';
 import Pagination from './pagination';
 import Panel from './panel';
@@ -106,6 +107,7 @@ const components = [
   Locale,
   NavBar,
   NoticeBar,
+  Notify,
   NumberKeyboard,
   Pagination,
   Panel,
@@ -190,6 +192,7 @@ export {
   Locale,
   NavBar,
   NoticeBar,
+  Notify,
   NumberKeyboard,
   Pagination,
   Panel,

packages/index.less

@@ -47,6 +47,7 @@
 @import './dialog/index';
 @import './picker/index';
 @import './pull-refresh/index';
+@import './notify/index';
 @import './toast/index';
 
 /* high order components */

packages/notify/Notify.vue

@@ -0,0 +1,52 @@
+<template>
+  <transition name="van-slide-down">
+    <div
+      v-show="value"
+      :class="b()"
+      :style="style"
+    >
+      {{ message }}
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from '../mixins/popup';
+import create from '../utils/create';
+import { RED, WHITE } from '../utils/color';
+
+export default create({
+  name: 'notify',
+
+  mixins: [Popup],
+
+  props: {
+    message: [String, Number],
+    color: {
+      type: String,
+      value: WHITE
+    },
+    background: {
+      type: String,
+      value: RED
+    },
+    duration: {
+      type: Number,
+      value: 3000
+    },
+    lockScroll: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    style() {
+      return {
+        color: this.color,
+        background: this.background
+      };
+    }
+  }
+});
+</script>

packages/notify/demo/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button
+        :text="$t('showNotify')"
+        @click="showNotify"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('customConfig')">
+      <van-button
+        :text="$t('showCustomNotify')"
+        @click="showCustomNotify"
+      />
+    </demo-block>
+  </demo-section>
+</template>
+
+<script>
+export default {
+  i18n: {
+    'zh-CN': {
+      content: '通知内容',
+      customConfig: '自定义配置',
+      showNotify: '显示消息通知',
+      showCustomNotify: '显示自定义消息通知'
+    },
+    'en-US': {
+      content: 'Notify Message',
+      customConfig: 'Custom Config',
+      showNotify: 'Show Notify',
+      showCustomNotify: 'Show Custom Notify'
+    }
+  },
+
+  methods: {
+    showNotify() {
+      this.$notify(this.$t('content'));
+    },
+
+    showCustomNotify() {
+      this.$notify({
+        message: this.$t('content'),
+        duration: 1000,
+        background: '#1989fa'
+      });
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.demo-notify {
+  .van-button {
+    margin-left: 15px;
+  }
+}
+</style>

packages/notify/en-US.md

@@ -0,0 +1,57 @@
+## Notify
+
+### Install
+
+``` javascript
+import { Notify } from 'vant';
+
+Vue.use(Notify);
+```
+
+### Usage
+
+#### Basic Usage
+
+```js
+Notify('Notify Message');
+```
+
+#### Custom Config
+
+```js
+Notify({
+  message: 'Notify Message',
+  duration: 1000,
+  background: '#1989fa'
+});
+```
+
+#### $notify Method
+
+After import the Notify component, the $notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
+
+```js
+export default {
+  mounted() {
+    this.$notify('Notify Message');
+  }
+}
+```
+
+### Methods
+
+| Methods | Attribute | Return value | Description |
+|------|------|------|------|
+| Notify | `options | message` | notify instance | Show notify |
+| Notify.clear | - | `void` | Close notify |
+| Notify.setDefaultOptions | `options` | `void` | Set default options of all notifies |
+| Notify.resetDefaultOptions | - | `void` | Reset default options of all notifies |
+
+### API
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| message | Message | `String` | - |
+| duration | Duration(ms), won't disappear if value is 0 | `Number` | `3000` |
+| color | Message color | `String` | `#fff` | |
+| background | Background color | `String` | `#f44` |

packages/notify/index.js

@@ -0,0 +1,74 @@
+import Vue from 'vue';
+import VanNotify from './Notify';
+import { RED, WHITE } from '../utils/color';
+import { isObj, isServer } from '../utils';
+
+let timer;
+let instance;
+
+const initInstance = () => {
+  instance = new (Vue.extend(VanNotify))({
+    el: document.createElement('div')
+  });
+
+  document.body.appendChild(instance.$el);
+};
+
+const parseOptions = message => (isObj(message) ? message : { message });
+
+const Notify = options => {
+  /* istanbul ignore if */
+  if (isServer) {
+    return;
+  }
+
+  if (!instance) {
+    initInstance();
+  }
+
+  options = {
+    ...Notify.currentOptions,
+    ...parseOptions(options)
+  };
+
+  Object.assign(instance, options);
+  clearTimeout(timer);
+
+  if (options.duration > 0) {
+    timer = setTimeout(Notify.clear, options.duration);
+  }
+
+  return instance;
+};
+
+Notify.clear = () => {
+  if (instance) {
+    instance.value = false;
+  }
+};
+
+Notify.defaultOptions = {
+  value: true,
+  text: '',
+  color: WHITE,
+  background: RED,
+  duration: 3000
+};
+
+Notify.setDefaultOptions = options => {
+  Object.assign(Notify.currentOptions, options);
+};
+
+Notify.resetDefaultOptions = () => {
+  Notify.currentOptions = { ...Notify.defaultOptions };
+};
+
+Notify.install = () => {
+  Vue.use(VanNotify);
+};
+
+Notify.resetDefaultOptions();
+
+Vue.prototype.$notify = Notify;
+
+export default Notify;

packages/notify/index.less

@@ -0,0 +1,12 @@
+@import '../style/var';
+
+.van-notify {
+  position: fixed;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  padding: @notify-padding;
+  font-size: @notify-font-size;
+  line-height: @notify-line-height;
+}

packages/notify/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <button class="van-button van-button--default van-button--normal"><span class="van-button__text">显示消息通知</span></button>
+  </div>
+  <div>
+    <button class="van-button van-button--default van-button--normal"><span class="van-button__text">显示自定义消息通知</span></button>
+  </div>
+</div>
+`;

packages/notify/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`create a notify 1`] = `
+<div class="van-notify" style="color: rgb(255, 255, 255); background: rgb(255, 68, 68); z-index: 2000;" name="van-slide-down">
+  test
+</div>
+`;
+
+exports[`notify disappear 1`] = `
+<div class="van-notify" style="color: red; z-index: 2000; background: blue;" name="van-slide-down">
+  test
+</div>
+`;
+
+exports[`notify disappear 2`] = `
+<div class="van-notify" style="color: red; z-index: 2000; background: blue; display: none;" name="van-slide-down">
+  test
+</div>
+`;
+
+exports[`notify disappear 3`] = `
+<div class="van-notify" style="color: rgb(255, 255, 255); z-index: 2001; background: rgb(255, 68, 68);" name="van-slide-down">
+  text2
+</div>
+`;
+
+exports[`notify disappear 4`] = `
+<div class="van-notify" style="color: rgb(255, 255, 255); z-index: 2001; background: rgb(255, 68, 68); display: none;" name="van-slide-down">
+  text2
+</div>
+`;

packages/notify/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);

packages/notify/test/index.spec.js

@@ -0,0 +1,49 @@
+import Notify from '../';
+import { transitionStub, later } from '../../../test/utils';
+
+transitionStub();
+
+test('create a notify', async() => {
+  // should not cause error when call clear before show notify
+  Notify.clear();
+
+  const notify = Notify('test');
+
+  await later();
+  expect(notify.$el.outerHTML).toMatchSnapshot();
+});
+
+test('notify disappear', async() => {
+  const notify = Notify({
+    message: 'test',
+    color: 'red',
+    background: 'blue',
+    duration: 10
+  });
+
+  await later();
+  expect(notify.$el.outerHTML).toMatchSnapshot();
+
+  await later(20);
+  expect(notify.$el.outerHTML).toMatchSnapshot();
+
+  Notify({
+    message: 'text2',
+    duration: 0
+  });
+
+  await later();
+  expect(notify.$el.outerHTML).toMatchSnapshot();
+
+  Notify.clear();
+  await later();
+  expect(notify.$el.outerHTML).toMatchSnapshot();
+});
+
+test('set default options', () => {
+  Notify.setDefaultOptions({ duration: 1000 });
+  expect(Notify().duration).toEqual(1000);
+  Notify.resetDefaultOptions();
+  expect(Notify().duration).toEqual(3000);
+  Notify.clear();
+});

packages/notify/zh-CN.md

@@ -0,0 +1,56 @@
+## Notify 消息提示
+
+### 使用指南
+``` javascript
+import { Notify } from 'vant';
+
+Vue.use(Notify);
+```
+
+### 代码演示
+
+#### 基础用法
+
+```js
+Notify('通知内容');
+```
+
+#### 自定义配置
+
+```js
+Notify({
+  message: '通知内容',
+  duration: 1000,
+  background: '#1989fa'
+});
+```
+
+#### 组件内调用
+
+引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 $notify 方法，便于在组件内调用。
+
+```js
+export default {
+  mounted() {
+    this.$notify('提示文案');
+  }
+}
+```
+
+### 方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|------|------|------|------|
+| Notify | `options | message` | notify 实例 | 展示提示 |
+| Notify.clear | - | `void` | 关闭提示 |
+| Notify.setDefaultOptions | `options` | `void` | 修改默认配置，对所有 Notify 生效 |
+| Notify.resetDefaultOptions | - | `void` | 重置默认配置，对所有 Notify 生效 |
+
+### Options
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| message | 展示文案 | `String` | - | 1.4.6 |
+| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | `Number` | `3000` | 1.4.6 |
+| color | 字体颜色 | `String` | `#fff` | 1.4.6 |
+| background | 背景颜色 | `String` | `#f44` | 1.4.6 |

packages/progress/index.vue

@@ -18,7 +18,7 @@
 
 <script>
 import create from '../utils/create';
-import { BLUE } from '../utils/color';
+import { BLUE, WHITE } from '../utils/color';
 
 export default create({
   name: 'progress',
@@ -42,7 +42,7 @@ export default create({
     },
     textColor: {
       type: String,
-      default: '#fff'
+      default: WHITE
     }
   },
 

packages/style/var.less

@@ -57,6 +57,11 @@
 @list-text-font-size: 13px;
 @list-text-line-height: 50px;
 
+// Notify
+@notify-padding: 6px 15px;
+@notify-font-size: 14px;
+@notify-line-height: 20px;
+
 // NumberKeyboard
 @number-keyboard-key-height: 54px;
 @number-keyboard-key-background: #ebedf0;

packages/toast/en-US.md

@@ -89,7 +89,7 @@ toast2.clear();
 | Toast.loading | `options | message` | toast instance | Show loading toast |
 | Toast.success | `options | message` | toast instance | Show success toast |
 | Toast.fail | `options | message` | toast instance | Show fail toast |
-| Toast.clear | `clearAll` | `void` | Close  |
+| Toast.clear | `clearAll` | `void` | Close toast |
 | Toast.allowMultiple | - | `void` | Allow multlple toast at the same time |
 | Toast.setDefaultOptions | `options` | `void` | Set default options of all toasts |
 | Toast.resetDefaultOptions | - | `void` | Reset default options of all toasts |

packages/utils/color.js

@@ -1,4 +1,5 @@
 export const RED = '#f44';
 export const BLUE = '#1989fa';
 export const GREEN = '#4b0';
+export const WHITE = '#fff';
 export const GRAY_DARK = '#969799';

types/index.d.ts

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { VanComponent } from './component';
 import { Toast } from './toast';
 import { Dialog } from './dialog';
+import { Notify } from './notify';
 import { Locale } from './locale';
 import { Lazyload } from './lazyload';
 import { Waterfall } from './waterfall';
@@ -74,6 +75,7 @@ export class Uploader extends VanComponent {}
 export {
   Toast,
   Dialog,
+  Notify,
   Locale,
   Lazyload,
   Waterfall,

types/notify.d.ts

@@ -0,0 +1,32 @@
+import Vue from 'vue';
+
+type NotifyMessage = string | number;
+
+export type NotifyOptions = {
+  message?: NotifyMessage;
+  color?: string;
+  background?: string;
+  duration?: number;
+}
+
+export interface VanNotify extends Vue {
+  message: NotifyMessage;
+  color: string;
+  background: string;
+  duration: number;
+}
+
+export interface Notify {
+  (message: NotifyOptions | NotifyMessage): VanNotify;
+  clear(): void;
+  setDefaultOptions(options: NotifyOptions): void;
+  resetDefaultOptions(): void;
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $notify: Notify
+  }
+}
+
+export const Notify: Notify;