[improvement] rename packages dir to src (#3659)

src/notify/Notify.tsx

@@ -0,0 +1,67 @@
+import { createNamespace } from '../utils';
+import { RED, WHITE } from '../utils/color';
+import { inherit } from '../utils/functional';
+import { PopupMixin } from '../mixins/popup';
+import Popup from '../popup';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/types';
+import { PopupMixinProps } from '../mixins/popup/type';
+
+export type NotifyProps = PopupMixinProps & {
+  color: string;
+  message: string | number;
+  duration: number;
+  className?: any;
+  background: string;
+};
+
+const [createComponent, bem] = createNamespace('notify');
+
+function Notify(
+  h: CreateElement,
+  props: NotifyProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<NotifyProps>
+) {
+  const style = {
+    color: props.color,
+    background: props.background
+  };
+
+  return (
+    <Popup
+      value={props.value}
+      style={style}
+      position="top"
+      overlay={false}
+      lockScroll={false}
+      class={[bem(), props.className]}
+      {...inherit(ctx, true)}
+    >
+      {props.message}
+    </Popup>
+  );
+}
+
+Notify.props = {
+  ...PopupMixin.props,
+  className: null as any,
+  message: [String, Number],
+  getContainer: [String, Function],
+  color: {
+    type: String,
+    default: WHITE
+  },
+  background: {
+    type: String,
+    default: RED
+  },
+  duration: {
+    type: Number,
+    default: 3000
+  }
+};
+
+export default createComponent<NotifyProps>(Notify);

src/notify/demo/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <demo-section>
+    <demo-block :title="$t('basicUsage')">
+      <van-button
+        type="primary"
+        :text="$t('showNotify')"
+        @click="showNotify"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('customConfig')">
+      <van-button
+        type="primary"
+        :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">
+@import "../../style/var";
+
+.demo-notify {
+  background-color: @white;
+
+  .van-button {
+    margin-left: 15px;
+  }
+}
+</style>

src/notify/en-US.md

@@ -0,0 +1,63 @@
+# 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');
+  }
+}
+```
+
+## API
+
+### 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 |
+
+### Props
+
+| 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` |
+| className | Custom className | `String | Array | Object` | - |
+| onClick | Callback function after click | `Function` | - |
+| onOpened | Callback function after opened | `Function` | - |
+| onClose | Callback function after close | `Function` | - |

src/notify/index.less

@@ -0,0 +1,12 @@
+@import '../style/var';
+
+.van-notify {
+  box-sizing: border-box;
+  padding: @notify-padding;
+  font-size: @notify-font-size;
+  line-height: @notify-line-height;
+
+  // allow newline charactor
+  white-space: pre-wrap;
+  text-align: center;
+}

src/notify/index.ts

@@ -0,0 +1,94 @@
+import Vue from 'vue';
+import VanNotify from './Notify';
+import { RED, WHITE } from '../utils/color';
+import { isObj, isServer } from '../utils';
+import { mount } from '../utils/functional';
+import { NotifyOptions } from 'types/notify';
+
+let timer: number | NodeJS.Timeout;
+let instance: any;
+
+function parseOptions(message: NotifyOptions): NotifyOptions {
+  return isObj(message) ? message : ({ message } as NotifyOptions);
+}
+
+function Notify(options: NotifyOptions) {
+  /* istanbul ignore if */
+  if (isServer) {
+    return;
+  }
+
+  if (!instance) {
+    instance = mount(VanNotify, {
+      on: {
+        click(event: Event) {
+          if (instance.onClick) {
+            instance.onClick(event);
+          }
+        },
+        close() {
+          if (instance.onClose) {
+            instance.onClose();
+          }
+        },
+        opened() {
+          if (instance.onOpened) {
+            instance.onOpened();
+          }
+        }
+      }
+    });
+  }
+
+  options = {
+    ...Notify.currentOptions,
+    ...parseOptions(options)
+  };
+
+  Object.assign(instance, options);
+  clearTimeout(timer as NodeJS.Timeout);
+
+  if (options.duration && options.duration > 0) {
+    timer = setTimeout(Notify.clear, options.duration);
+  }
+
+  return instance;
+}
+
+function defaultOptions(): NotifyOptions {
+  return {
+    value: true,
+    message: '',
+    color: WHITE,
+    background: RED,
+    duration: 3000,
+    className: '',
+    onClose: null,
+    onClick: null,
+    onOpened: null
+  };
+}
+
+Notify.clear = () => {
+  if (instance) {
+    instance.value = false;
+  }
+};
+
+Notify.currentOptions = defaultOptions();
+
+Notify.setDefaultOptions = (options: NotifyOptions) => {
+  Object.assign(Notify.currentOptions, options);
+};
+
+Notify.resetDefaultOptions = () => {
+  Notify.currentOptions = defaultOptions();
+};
+
+Notify.install = () => {
+  Vue.use(VanNotify as any);
+};
+
+Vue.prototype.$notify = Notify;
+
+export default Notify;

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

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

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

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

src/notify/test/demo.spec.js

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

src/notify/test/index.spec.js

@@ -0,0 +1,63 @@
+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 onClose = jest.fn();
+  const notify = Notify({
+    message: 'test',
+    color: 'red',
+    background: 'blue',
+    duration: 10,
+    onClose
+  });
+
+  await later();
+  expect(notify.$el.outerHTML).toMatchSnapshot();
+
+  await later(20);
+  expect(notify.$el.outerHTML).toMatchSnapshot();
+  expect(onClose).toHaveBeenCalledTimes(1);
+
+  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();
+});
+
+test('onClick prop', async () => {
+  const onClick = jest.fn();
+  const notify = Notify({
+    message: 'test',
+    onClick
+  });
+
+  notify.$el.click();
+  expect(onClick).toHaveBeenCalled();
+});

src/notify/zh-CN.md

@@ -0,0 +1,63 @@
+# 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('提示文案');
+  }
+}
+```
+
+## API
+
+### 方法
+
+| 方法名 | 参数 | 返回值 | 介绍 |
+|------|------|------|------|
+| Notify | `options | message` | notify 实例 | 展示提示 |
+| Notify.clear | - | `void` | 关闭提示 |
+| Notify.setDefaultOptions | `options` | `void` | 修改默认配置，对所有 Notify 生效 |
+| Notify.resetDefaultOptions | - | `void` | 重置默认配置，对所有 Notify 生效 |
+
+### Options
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| message | 展示文案，支持通过`\n`换行 | `String` | - | 1.4.7 |
+| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | `Number` | `3000` | 1.4.7 |
+| color | 字体颜色 | `String` | `#fff` | 1.4.7 |
+| background | 背景颜色 | `String` | `#f44` | 1.4.7 |
+| className | 自定义类名 | `String | Array | Object` | - | 1.6.0 |
+| onClick | 点击时的回调函数 | `Function` | - | 2.0.0 |
+| onOpened | 完全展示后的回调函数 | `Function` | - | 2.0.0 |
+| onClose | 关闭时的回调函数 | `Function` | - | 2.0.0 |