vdesign-ui 0.2.19 → 0.3.0

package/dist/components/toast/index.js

@@ -1,97 +1,139 @@
-import Vue from 'vue';
-import ToastComponent from './index.vue';
-import { inBrowser } from '../utils/env';
-
-let queueResult = []
-let allowMultiple = false
-
-function getType(value) {
-  if (value !== value) return 'NaN';
-  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
-}
-
-class VdToast extends Vue.extend(ToastComponent) {
-  constructor(options) {
-    super();
-    this.vm = this.$mount();
-    this.timer = null
-    this.allowMultiple = allowMultiple
-
-    // 判断传入的 options 类型，并进行赋值
-    if (typeof options === 'string' || typeof options === 'number') {
-      this.message = options;
-    } else if (getType(options) === 'object') {
-      this.message = options.message || '';
-      this.duration = options.duration || 1500;
-      Object.assign(this, options);
-    }
-
-    this.init();
-  }
-
-  /**
-   * 初始化方法
-   */
-  init() {
-    if (inBrowser) {
-      document.body.appendChild(this.vm.$el)
-      if (!this.allowMultiple) {
-        queueResult.forEach(toast => {
-          toast.clear()
-        })
-        queueResult = [];
-      }
-      this.start()
-    }
-  }
-
-  start() {
-    clearTimeout(this.timer)
-    /**
-     * 在挂载真实 DOM 树后显示过渡效果
-     */
-    setTimeout(() => {
-      this.isShow = true
-      if (this.duration > 0) {
-        this.end();
-      }
-    }, 0)
-  }
-
-  end() {
-    /**
-     * 关闭过渡效果之后移除真实 DOM 树节点
-     */
-    this.timer = setTimeout(() => {
-      this.clear()
-    }, this.duration)
-  }
-
-  clear() {
-    this.isShow = false
-    if (inBrowser && this.vm.$el) {
-      setTimeout(() => {
-        this.vm.$el.parentNode && this.vm.$el.parentNode.removeChild(this.vm.$el);
-      }, 500)
-    }
-  }
-}
-
-const Toast = (options) => {
-  const NewOption = new VdToast(options)
-  queueResult.push(NewOption)
-  return NewOption
-}
-
-Toast.clear = () => {
-  queueResult.forEach(toast => {
-    toast.clear()
-  })
-  queueResult = [];
-}
-
-Toast.allowMultiple = () => {
-  allowMultiple = true
-}
-
-export default Toast
+import Vue from "vue";
+import ToastComponent from "./index.vue";
+import { inBrowser } from "../utils/env";
+
+let queueResult = [];
+let globalAllowMultiple = false;
+let allTimer = null;
+
+function getType(value) {
+  if (value !== value) return "NaN";
+  return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
+}
+
+function normalizeOptions(raw) {
+  let opts = {};
+
+  if (getType(raw) === 'string' || getType(raw) === 'number') {
+    opts.message = String(raw);
+  } else if (getType(raw) === 'object') {
+    opts = { ...raw };
+  } else {
+    opts.message = '';
+  }
+
+  // 默认值 & 全局/局部 allowMultiple
+  opts.duration      = getType(opts.duration) === 'number' ? opts.duration : 1500;
+  opts.allowMultiple = 'allowMultiple' in opts ? !!opts.allowMultiple : globalAllowMultiple;
+
+  return opts;
+}
+
+class VdToast extends Vue.extend(ToastComponent) {
+  constructor(options) {
+    super();
+    this.vm = this.$mount();
+    this.timer = null;
+    // // 局部优先，回退全局
+    // const localAllowMultiple =
+    // getType(options) === "object" && "allowMultiple" in options
+    //     ? options.allowMultiple
+    //     : globalAllowMultiple;
+    // this.allowMultiple = localAllowMultiple;
+    // // 判断传入的 options 类型，并进行赋值
+    // if (getType(options) === "string" || getType(options) === "number") {
+    //   this.message = options;
+    // } else if (getType(options) === "object") {
+    //   this.message = options.message || "";
+    //   this.duration = options.duration || 1500;
+    //   Object.assign(this, options);
+    // }
+    Object.assign(this, options);
+
+    this.init();
+  }
+  /**
+   * 初始化方法
+   */
+  init() {
+    if (inBrowser) {
+      if (!this.allowMultiple) {
+        if (allTimer) {
+          clearTimeout(allTimer);
+        }
+        queueResult.forEach((toast) => {
+          toast.clear();
+        });
+        queueResult = [];
+        queueResult.push(this);
+        allTimer = setTimeout(() => {
+          document.body.appendChild(this.vm.$el);
+        }, 50);
+      } else {
+        queueResult.push(this);
+        document.body.appendChild(this.vm.$el);
+      }
+      this.start();
+    }
+  }
+  start() {
+    clearTimeout(this.timer);
+    /**
+     * 在挂载真实 DOM 树后显示过渡效果
+     */
+    setTimeout(() => {
+      this.isShow = true;
+      if (this.duration > 0) {
+        this.end();
+      }
+    }, 0);
+  }
+  end() {
+    /**
+     * 关闭过渡效果之后移除真实 DOM 树节点
+     */
+    this.timer = setTimeout(() => {
+      this.clear();
+    }, this.duration);
+  }
+  clear() {
+    this.isShow = false;
+    if (inBrowser && this.vm.$el) {
+      setTimeout(() => {
+        this.vm.$el.parentNode &&
+          this.vm.$el.parentNode.removeChild(this.vm.$el);
+      }, 500);
+    }
+  }
+}
+
+// const Toast = (options) => {
+//   const localAllowMultiple =
+//     getType(options) === "object" && "allowMultiple" in options
+//       ? options.allowMultiple
+//       : globalAllowMultiple;
+
+//   if(getType(options) === "object") {
+//     options.allowMultiple = localAllowMultiple;
+//   }
+//   return new VdToast(options);
+// };
+
+const Toast = (rawOptions) => {
+  const opts = normalizeOptions(rawOptions);
+  return new VdToast(opts);
+};
+
+
+Toast.clear = () => {
+  queueResult.forEach((toast) => {
+    toast.clear();
+  });
+  queueResult = [];
+};
+
+Toast.allowMultiple = (value = true) => {
+  globalAllowMultiple = value;
+};
+
+export default Toast;

package/dist/components/toast/index.vue

@@ -1,49 +1,50 @@
-<template>
-  <!-- 消息提示 -->
-  <div :class="['vd-toast', { 'vd-toast-show': isShow }, { 'vd-toast-icon': !!icon }, customClass]"
-    :style="`background:${bgColor};`">
-    <i v-if="!!icon" class="vd-iconfont" :class="[isImage ? '' : `vd-icon-${icon}`]">
-      <img class="vd-img-icon" v-if="isImage" :src="icon" />
-    </i>
-    <div>{{ message }}</div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'vd-toast',
-  data() {
-    return {
-      message: '', // 提示语
-      isShow: false, // 是否显示
-      bgColor: '', // 背景颜色
-      icon: '', // 图标
-      duration: 1500, // 延迟时间
-      position: 'middle' // default:middle, value: top, bottom
-    }
-  },
-  computed: {
-    isImage() {
-      return this.icon.includes('/');
-    },
-    customClass() {
-      var classes = [];
-      switch (this.position) {
-        case 'top':
-          classes.push('vd-toast__top');
-          break;
-        case 'bottom':
-          classes.push('vd-toast__bottom');
-          break;
-        default:
-          classes.push('vd-toast__middle');
-      }
-      classes.push(this.className);
-
-      return classes.join(' ');
-    }
-  }
-}
-</script>
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+  <!-- 消息提示 -->
+  <div :class="['vd-toast', { 'vd-toast-show': isShow }, { 'vd-toast-icon': !!icon }, customClass]"
+    :style="`background:${bgColor};`">
+    <i v-if="!!icon" class="vd-iconfont" :class="[isImage ? '' : `vd-icon-${icon}`]">
+      <img class="vd-img-icon" v-if="isImage" :src="icon" />
+    </i>
+    <div>{{ message }}</div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'vd-toast',
+  data() {
+    return {
+      message: '', // 提示语
+      isShow: false, // 是否显示
+      bgColor: '', // 背景颜色
+      icon: '', // 图标
+      duration: 1500, // 延迟时间
+      position: 'middle', // default:middle, value: top, bottom
+      allowMultiple: false
+    }
+  },
+  computed: {
+    isImage() {
+      return this.icon.includes('/');
+    },
+    customClass() {
+      var classes = [];
+      switch (this.position) {
+        case 'top':
+          classes.push('vd-toast__top');
+          break;
+        case 'bottom':
+          classes.push('vd-toast__bottom');
+          break;
+        default:
+          classes.push('vd-toast__middle');
+      }
+      classes.push(this.className);
+
+      return classes.join(' ');
+    }
+  }
+}
+</script>
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/toast/style.less

@@ -1,57 +1,58 @@
-@prefix: ~"vd-toast";
-
-.@{prefix} {
-  display: inline-block;
-  width: max-content;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-sizing: border-box;
-  text-align: center;
-  z-index: 3000;
-  transition: all .3s linear;
-  opacity: 0;
-  visibility: hidden;
-  // token
-  min-width: var(--width-toast-small);
-  max-width: var(--width-toast-large);
-  padding: var(--spacing-toast-padding_x) var(--spacing-toast-padding_y);
-  background-color: var(--color-toast-bg);
-  border-radius: var(--radius-toast-content);
-  color: var(--color-toast-text);
-  font-size: var(--en-single-f-c-r-fontSize);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-
-  &.vd-toast-show {
-    opacity: 1;
-    visibility: visible;
-  }
-
-  &-icon {
-    min-height: var(--height-toast-small);
-
-    .vd-iconfont {
-      font-size: var(--icon-toast-size);
-      margin-bottom: var(--spacing-toast-icon-margin_bottom);
-    }
-  }
-
-  &__top {
-    top: 50px;
-    left: 50%;
-    transform: translate(-50%, 0);
-  }
-
-  &__middle {
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &__bottom {
-    bottom: 50px;
-    left: 50%;
-    transform: translate(-50%, 0);
-  }
-}
+@prefix: ~"vd-toast";
+
+.@{prefix} {
+  display: inline-block;
+  width: max-content;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+  text-align: center;
+  z-index: 3000;
+  transition: all .3s linear;
+  opacity: 0;
+  visibility: hidden;
+  // token
+  min-width: var(--width-toast-small);
+  max-width: var(--width-toast-large);
+  padding: var(--spacing-toast-padding_x) var(--spacing-toast-padding_y);
+  background-color: var(--color-toast-bg);
+  border-radius: var(--radius-toast-content);
+  color: var(--color-toast-text);
+  font-size: var(--en-single-f-c-r-fontSize);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+
+  &.vd-toast-show {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &-icon {
+    min-height: var(--height-toast-small);
+
+    .vd-iconfont {
+      font-size: var(--icon-toast-size);
+      margin-bottom: var(--spacing-toast-icon-margin_bottom);
+    }
+  }
+
+  &__top {
+    top: 50px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+
+  &__middle {
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &__bottom {
+    top: initial;
+    bottom: 50px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+}

package/dist/components/transition/index.js

@@ -1,8 +1,8 @@
-import Transition from './index.vue';
-import './style.less';
-
-Transition.install = function (Vue) {
-  Vue.component(Transition.name, Transition);
-};
-
-export default Transition;
+import Transition from './index.vue';
+import './style.less';
+
+Transition.install = function (Vue) {
+  Vue.component(Transition.name, Transition);
+};
+
+export default Transition;

package/dist/components/transition/index.vue

@@ -1,13 +1,13 @@
-<script>
-  export default {
-    name: 'transition',
-    functional: true,
-    render(h, context) {
-      return h('transition', context.data, context.children)
-    },
-  }
-</script>
-
-<style lang="less">
-@import"./style.less";
-</style>
+<script>
+  export default {
+    name: 'transition',
+    functional: true,
+    render(h, context) {
+      return h('transition', context.data, context.children)
+    },
+  }
+</script>
+
+<style lang="less">
+@import"./style.less";
+</style>