vdesign-ui 0.2.18 → 0.2.20

package/dist/components/tabs/style.less

@@ -313,27 +313,69 @@
   }
   
   &__scroll {
-    &::before {
-      content: '';
+    overflow-x: auto;
+    position: relative;
+    height: 100%;
+    &--left{
       position: absolute;
-      z-index: 1;
-      top: 0;
       left: 0;
-      width: 20px;
-      height: 48px;
-      background-color: var(--bg-color-1);
+      top: 0;
+      height: 100%;
+      z-index: 10;
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        width: 20px;
+        height: 48px;
+        background-color: var(--bg-color-1);
+      }
+      &::after {
+        content: '';
+        box-shadow: 4px 0 6px rgba(0, 0, 0, 0.05);
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        left: 0;
+        width: 20px;
+        height: 30px;
+        background-color: transparent;
+      } 
     }
-    &::after {
-      content: '';
-      box-shadow: 4px 0 6px rgba(0, 0, 0, 0.05);
+    &--right{
       position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: 0;
-      width: 20px;
-      height: 30px;
-      background-color: transparent;
-    } 
+      right: 0;
+      top: 0;
+      height: 100%;
+      z-index: 10;
+      &::before {
+        content: '';
+        position: absolute;
+        z-index: 1;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        width: 20px;
+        height: 48px;
+        background-color: var(--bg-color-1);
+      }
+      &::after {
+        content: '';
+        box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: 0;
+        width: 20px;
+        height: 30px;
+        background-color: transparent;
+      } 
+  }
+
+
   }
   
   &__menu {
@@ -344,22 +386,26 @@
 
     &--right {
       position: relative;
+      z-index: 11;
+      // margin-inline-start: -12px;
       display: flex;
       height: var(--icon-large);
       padding-inline-end: var(--spacing-tab-primary_icon-margin_right);
       color: var(--text-color-h1);
 
-      &::before {
-        content: '';
-        position: absolute;
-        margin-inline-start: -16px;
-        width: 16px;
-        height: 100%;
-        background-image: linear-gradient(to left, var(--bg-color-1) 0%, rgba(255, 255, 255, 0) 100%);
-      }
-
+      // &::before {
+      //   content: '';
+      //   position: absolute;
+      //   margin-inline-start: -16px;
+      //   width: 16px;
+      //   height: 100%;
+      //   background-image: linear-gradient(to left, var(--bg-color-1) 0%, rgba(255, 255, 255, 0) 100%);
+      // }
 
     }
+    &--margin{
+      margin-inline-start: -12px;
+    }
     &--btn {
       cursor: pointer;
       font-size: var(--icon-large)!important;
@@ -425,18 +471,18 @@
 
 
 
-[lang='ar'] {
-  .@{tabs-prefix-cls}__scroll {
-    &::before {
-      right: 0;
-      left: auto;
-    }
-    &::after {
-      right: 0;
-      left: auto;
-      box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
-    } 
-  }
+[lang|='ar'] , [dir='rtl']{
+  // .@{tabs-prefix-cls}__scroll {
+  //   &::before {
+  //     right: 0;
+  //     left: auto;
+  //   }
+  //   &::after {
+  //     right: 0;
+  //     left: auto;
+  //     box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
+  //   } 
+  // }
   .@{tabs-prefix-cls}__menu--right::before {
     transform: scaleX(-1);
   }
@@ -450,10 +496,10 @@
   }
 }
 
-[theme='dark'][lang='ar']{
-  .@{tabs-prefix-cls}__scroll {
-    &::after {
-      box-shadow: -4px 0 6px rgba(0, 0, 0, 0.35);
-    } 
-  }
+[theme='dark'][lang|='ar'], [dir='rtl']{
+  // .@{tabs-prefix-cls}__scroll {
+  //   &::after {
+  //     box-shadow: -4px 0 6px rgba(0, 0, 0, 0.35);
+  //   } 
+  // }
 }

package/dist/components/toast/index.js

@@ -1,97 +1,139 @@
-import Vue from 'vue';
-import ToastComponent from './index.vue';
-import { inBrowser } from '../utils/env';
+import Vue from "vue";
+import ToastComponent from "./index.vue";
+import { inBrowser } from "../utils/env";
 
-let queueResult = []
-let allowMultiple = false
+let queueResult = [];
+let globalAllowMultiple = false;
+let allTimer = null;
 
 function getType(value) {
-  if (value !== value) return 'NaN';
+  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
-    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.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) {
-      document.body.appendChild(this.vm.$el)
       if (!this.allowMultiple) {
-        queueResult.forEach(toast => {
-          toast.clear()
-        })
+        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()
+      this.start();
     }
   }
-
   start() {
-    clearTimeout(this.timer)
+    clearTimeout(this.timer);
     /**
      * 在挂载真实 DOM 树后显示过渡效果
      */
     setTimeout(() => {
-      this.isShow = true
+      this.isShow = true;
       if (this.duration > 0) {
         this.end();
       }
-    }, 0)
+    }, 0);
   }
-
   end() {
     /**
      * 关闭过渡效果之后移除真实 DOM 树节点
      */
     this.timer = setTimeout(() => {
-      this.clear()
-    }, this.duration)
+      this.clear();
+    }, this.duration);
   }
-
   clear() {
-    this.isShow = false
+    this.isShow = false;
     if (inBrowser && this.vm.$el) {
       setTimeout(() => {
-        this.vm.$el.parentNode && this.vm.$el.parentNode.removeChild(this.vm.$el);
-      }, 500)
+        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
-}
+// 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.forEach((toast) => {
+    toast.clear();
+  });
   queueResult = [];
-}
+};
 
-Toast.allowMultiple = () => {
-  allowMultiple = true
-}
+Toast.allowMultiple = (value = true) => {
+  globalAllowMultiple = value;
+};
 
-export default Toast
+export default Toast;

package/dist/components/toast/index.vue

@@ -18,7 +18,8 @@ export default {
       bgColor: '', // 背景颜色
       icon: '', // 图标
       duration: 1500, // 延迟时间
-      position: 'middle' // default:middle, value: top, bottom
+      position: 'middle', // default:middle, value: top, bottom
+      allowMultiple: false
     }
   },
   computed: {

package/dist/components/toast/style.less

@@ -50,6 +50,7 @@
   }
 
   &__bottom {
+    top: initial;
     bottom: 50px;
     left: 50%;
     transform: translate(-50%, 0);

package/dist/components/upload/style.less

@@ -134,7 +134,7 @@
     }
 }
 
-[lang='ar'] {
+[lang|='ar'] , [dir='rtl']{
     .@{upload-prefix-cls}{ 
         &__preview{
             &-delete{