vdesign-ui 0.2.7 → 0.2.8

package/dist/components/empty/index.vue

@@ -27,10 +27,10 @@ export default {
         image:  {
             type: String,
             default: 'nodata',  // 默认类型
-            validator(value) {
-                // 只接受以下类型值
-                return ['nodata', 'network', 'notfound','noposition','nomargin','nocoupons','nosearch','nonotice','noorders','noocomments'].includes(value);
-            }
+            // validator(value) {
+            //     // 只接受以下类型值
+            //     return ['nodata', 'network', 'notfound','noposition','nomargin','nocoupons','nosearch','nonotice','noorders','noocomments'].includes(value);
+            // }
         },
         description: String,
         size: {

package/dist/components/mixins/outlineConfigPlugin.js

@@ -1,45 +1,45 @@
-// outlineConfigPlugin.js
-import { inBrowser } from '../utils/env'
-// __debug=1&__debug_vdesign_token=1
-const OutlineConfig = {
-    install(Vue,  options = {}) {
-      const outlineConfig = Vue.observable({
-        outlineEnabled:  options.outlineEnabled ||false,
-      });
-  
-      Vue.prototype.$outlineConfig = outlineConfig;
-  
-      Vue.mixin({
-        created() {
-          if (inBrowser) {
-            this.$outlineConfig.outlineEnabled = this.shouldEnableOutline()
-            this.$watch('$outlineConfig.outlineEnabled', (newValue) => {
-              document.documentElement.style.setProperty('--outline-visible', newValue ? '1px' : '0');
-            }, { immediate: true });
-          }
-        },
-        methods:{
-          shouldEnableOutline() {
-            if (!inBrowser) {
-              // 如果是在服务端渲染，返回默认值 false
-              return false;
-            }
-            // 获取URL的查询参数部分
-            const searchParams = new URLSearchParams(window.location.search);
-            // 对于哈希模式，也解析哈希中的查询字符串
-            const hashParams = window.location.hash.split('?')[1] ? new URLSearchParams(window.location.hash.split('?')[1]) : null;
-          
-            // 检查查询参数或哈希中的参数
-            const debug = searchParams.has('__debug') || (hashParams && hashParams.has('__debug')) ? searchParams.get('__debug') === '1' || (hashParams && hashParams.get('__debug') === '1') : false;
-            const vdesignToken = searchParams.has('__debug_vdesign_token') || (hashParams && hashParams.has('__debug_vdesign_token')) ? searchParams.get('__debug_vdesign_token') === '1' || (hashParams && hashParams.get('__debug_vdesign_token') === '1') : false;
-          
-            return debug && vdesignToken;
-          }
-        }
-      });
-    }
-};
-  
-
-
-export default OutlineConfig;
+// outlineConfigPlugin.js
+import { inBrowser } from '../utils/env'
+// __debug=1&__debug_vdesign_token=1
+const OutlineConfig = {
+    install(Vue,  options = {}) {
+      const outlineConfig = Vue.observable({
+        outlineEnabled:  options.outlineEnabled ||false,
+      });
+  
+      Vue.prototype.$outlineConfig = outlineConfig;
+  
+      Vue.mixin({
+        created() {
+          if (inBrowser) {
+            this.$outlineConfig.outlineEnabled = this.shouldEnableOutline()
+            this.$watch('$outlineConfig.outlineEnabled', (newValue) => {
+              document.documentElement.style.setProperty('--outline-visible', newValue ? '1px' : '0');
+            }, { immediate: true });
+          }
+        },
+        methods:{
+          shouldEnableOutline() {
+            if (!inBrowser) {
+              // 如果是在服务端渲染，返回默认值 false
+              return false;
+            }
+            // 获取URL的查询参数部分
+            const searchParams = new URLSearchParams(window.location.search);
+            // 对于哈希模式，也解析哈希中的查询字符串
+            const hashParams = window.location.hash.split('?')[1] ? new URLSearchParams(window.location.hash.split('?')[1]) : null;
+          
+            // 检查查询参数或哈希中的参数
+            const debug = searchParams.has('__debug') || (hashParams && hashParams.has('__debug')) ? searchParams.get('__debug') === '1' || (hashParams && hashParams.get('__debug') === '1') : false;
+            const vdesignToken = searchParams.has('__debug_vdesign_token') || (hashParams && hashParams.has('__debug_vdesign_token')) ? searchParams.get('__debug_vdesign_token') === '1' || (hashParams && hashParams.get('__debug_vdesign_token') === '1') : false;
+          
+            return debug && vdesignToken;
+          }
+        }
+      });
+    }
+};
+  
+
+
+export default OutlineConfig;

package/dist/components/tab/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="tabClasses">
-        <slot />
+        <slot v-if="shouldRender" />
     </div>
 </template>
 
@@ -11,7 +11,6 @@ export default {
         name: [String, Number],
         title: {
             type: String,
-            required: true,
         },
         arrow: {
             type: Boolean,
@@ -20,10 +19,15 @@ export default {
     },
     data() {
         return {
+            isRendered: false,
         };
     },
     watch: {
-
+        isActive(newVal) {
+            if (newVal && !this.isRendered) {
+                this.isRendered = true;
+            }
+        },
     },
     computed: {
         isActive() {
@@ -40,6 +44,17 @@ export default {
                 ? this.name
                 : this.$parent.tabs.indexOf(this);
             },
+        shouldRender() {
+            if (this.$parent.lazyRender) {
+                return this.isRendered || this.isActive;
+            } else {
+                return true;
+            }
+        },
+        computedTitle() {
+        // Since the title slot is now handled by vd-tabs, we return the title prop
+            return this.title;
+        },
     },
     created() {
         this.$parent.registerTab(this);

package/dist/components/tabs/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="vd-tabs">
+  <div class="vd-tabs" :class="stickyClasses">
     <div class="vd-tabs__wrap" :class="menuClasses" ref="tabsWrap">
-      <div :class="[barType,scrollspy]" ref="tabsContainer">
+      <div class="vd-tabs__nav" :class="[barType,scrollspy]" ref="tabsContainer">
         <div v-for="(item, index) in navList" :key="index" :class="[tabClasses(item), lineClasses]" @click="handleChange(index)">
           <span class="vd-tabs-text-cell" :class="ellipsisClasses">
             {{ item.title }}
@@ -45,6 +45,8 @@ export default {
     actBorder: Boolean,
     backgroundColor: Boolean,
     divider: Boolean,
+    sticky: Boolean,
+    lazyRender: Boolean,
   },
   data() {
     return {
@@ -98,6 +100,11 @@ export default {
         [`${prefixCls}-${this.tabsType}-bar`]: this.tabsType,
       };
     },
+    stickyClasses() {
+      return {
+        [`${prefixCls}--sticky`]: this.sticky,
+      };
+    },
   },
   methods: {
     // 当菜单按钮被点击时触发事件
@@ -136,6 +143,7 @@ export default {
        // 如果当前没有选中的标签且导航列表不为空，则将第一个标签设为当前值
       if (!this.currentValue && this.navList.length) {
         this.currentValue = this.navList[0].name;
+        this.$emit("input", this.currentValue);
       }
     },
     handleChange(index) {

package/dist/components/tabs/style.less

@@ -7,6 +7,12 @@
     width: 100%;
   }
 
+  &--sticky {
+    position: sticky;
+    top: 0;
+    z-index: 99;
+  }
+
   &-primary {
     position: relative;
     display: inline-block;

package/dist/components/toast/index.js

@@ -2,82 +2,75 @@ import Vue from 'vue';
 import ToastComponent from './index.vue';
 import { inBrowser } from '../utils/env';
 
-let timer = null;
-let currentToast = null;
+
+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
+
+    // 判断传入的 options 类型，并进行赋值
     if (typeof options === 'string' || typeof options === 'number') {
       this.message = options;
-    } else if (typeof options === 'object') {
+    } 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);
-      this.start();
+      document.body.appendChild(this.vm.$el)
+      this.start()
     }
   }
 
-  start() {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      this.isShow = true;
 
+  start() {
+    clearTimeout(this.timer)
+    /**
+     * 在挂载真实 DOM 树后显示过渡效果
+     */
+    setTimeout(() => {
+      this.isShow = true
       if (this.duration > 0) {
         this.end();
       }
-    }, 100);
+    }, 0)
   }
 
+
   end() {
-    clearTimeout(timer);
-    if (this.duration > 0) {
-      timer = setTimeout(() => {
-        this.isShow = false;
-        setTimeout(() => {
-          // 检查元素是否仍在 DOM 中
-          if (inBrowser && document.body.contains(this.vm.$el)) {
-            document.body.removeChild(this.vm.$el);
-          }
-        }, 500);
-      }, this.duration);
-    }
+    /**
+     * 关闭过渡效果之后移除真实 DOM 树节点
+     */
+    this.timer = setTimeout(() => {
+      this.clear()
+    }, this.duration)
   }
 
   clear() {
-    this.isShow = false;
-    clearTimeout(timer);
-    // 检查元素是否仍在 DOM 中
-    if (inBrowser && document.body.contains(this.vm.$el)) {
-      document.body.removeChild(this.vm.$el);
+    this.isShow = false
+    if (inBrowser && this.vm.$el) {
+      setTimeout(() => {
+        this.vm.$el.parentNode.removeChild(this.vm.$el);
+      }, 500)
     }
   }
 }
 
-// 创建静态方法以支持直接调用
-const showToast = options => {
-  currentToast && currentToast.clear(); // 清除现有的 toast
-  currentToast = new VdToast(options); // 创建新的 toast 实例
-  return currentToast;
-};
-
-// 添加静态方法，支持手动清除
-showToast.clear = () => {
-  currentToast && currentToast.clear();
-  currentToast = null;
-};
-
-// 在 Vue 的原型上挂载，方便全局调用
-Vue.prototype.$VdToast = showToast;
+const Toast = options => new VdToast(options)
 
-export default showToast;
+export default Toast

package/dist/components/toast/style.less

@@ -10,8 +10,9 @@
   box-sizing: border-box;
   text-align: center;
   z-index: 1000;
-  transition: opacity .3s linear;
+  transition: all .3s linear;
   opacity: 0;
+  visibility: hidden;
   // token
   min-width: var(--width-toast-small);
   max-width: var(--width-toast-large);
@@ -24,6 +25,7 @@
 
   &.vd-toast-show {
     opacity: 1;
+    visibility: visible;
   }
 
   &-icon {

package/dist/components/utils/env.js

@@ -1,2 +1,21 @@
-// env.js
+import Vue from 'vue';
+
 export const inBrowser = typeof window !== 'undefined';
+
+export const isServer = Vue.prototype.$isServer;
+
+export function isObject(val) {
+  return val !== null && typeof val === 'object';
+}
+
+export function isInDocument(element) {
+  return document.body.contains(element);
+}
+
+export function removeNode(el) {
+  const parent = el.parentNode;
+
+  if (parent) {
+    parent.removeChild(el);
+  }
+}