vdesign-ui 0.1.24 → 0.2.0-beta

package/dist/components/activityviews/index.vue

@@ -13,7 +13,7 @@
                             <vd-icon v-if="closeIcon" class="vd-activityviews__close" :name="currentCloseIcon" svg
                                 @click="onCancel"></vd-icon>
                             <vd-button v-if="closeBtn" class="vd-activityviews__done" type="primary_text" size="large"
-                            @click="onCancel">{{ closeBtn }}</vd-button>
+                                @click="onCancel">{{ closeBtn }}</vd-button>
                         </slot>
                     </div>
                     <p v-if="description" class="vd-activityviews__description">{{ description }}</p>
@@ -23,8 +23,9 @@
                     <div v-if="actionSheet" class="vd-activityviews__action">
                         <p v-if="title" class="vd-activityviews__action-title vd-hairline--bottom">{{ title }}</p>
                         <div class="vd-activityviews__actions">
-                            <vd-button v-for="(item, index) in actions" block size="large" :type="item.type" :key="index"         :class="{ 'vd-hairline--bottom': index !== actions.length - 1 }"
-                                :disabled="item.disabled" @click.stop="onSelect(item)" >{{ item.name }}</vd-button>
+                            <vd-button v-for="(item, index) in actions" block size="large" :type="item.type"
+                                :key="index" :class="{ 'vd-hairline--bottom': index !== actions.length - 1 }"
+                                :disabled="item.disabled" @click.stop="onSelect(item)">{{ item.name }}</vd-button>
                         </div>
                         <div v-if="cancelText" class="vd-activityviews__gap"></div>
                         <div v-if="cancelText" class="vd-activityviews__cancel" @click="onCancel">
@@ -47,7 +48,7 @@ export default {
     props: {
         value: Boolean,
         title: String,
-        backDefault:Boolean,
+        backDefault: Boolean,
         closeIcon: Boolean,
         closeBtn: String,
         description: String,
@@ -69,7 +70,7 @@ export default {
             default: true
         },
         disabled: Boolean,
-        closeOnOverlay:{
+        closeOnOverlay: {
             type: Boolean,
             default: true
         },
@@ -79,11 +80,11 @@ export default {
         }
     },
     computed: {
-        visible(){
+        visible() {
             return this.value
         },
         currentCloseIcon() {
-            return this.isDarkTheme ? 'icon_btn_dialogclose_dark' : 'icon_btn_dialogclose';
+            return this.isDarkTheme ? 'icon_btn_dialogclose_dark_svg' : 'icon_btn_dialogclose_svg';
         },
         isDarkTheme() {
             return this.theme === 'dark';
@@ -121,20 +122,21 @@ export default {
 
 .vd-activityviews-fade-enter-active,
 .vd-activityviews-fade-leave-active {
-  transition: opacity 0.3s;
+    transition: opacity 0.3s;
 }
+
 .vd-activityviews-fade-enter,
 .vd-activityviews-fade-leave-to {
-  opacity: 0;
+    opacity: 0;
 }
 
 .vd-activityviews-slide-up-enter-active,
 .vd-activityviews-slide-up-leave-active {
-  transition: transform 0.3s;
+    transition: transform 0.3s;
 }
+
 .vd-activityviews-slide-up-enter,
 .vd-activityviews-slide-up-leave-to {
-  transform: translateY(100%);
+    transform: translateY(100%);
 }
-
 </style>

package/dist/components/button/index.vue

@@ -33,7 +33,7 @@ export default {
     },
     loadingIcon: {
       type: String,
-      default: 'icon_show_statisticsprice'
+      default: 'icon_show_list_loading'
     },
     block: {
       type: Boolean,

package/dist/components/checkbox/checkbox-group/index.vue

@@ -18,7 +18,8 @@ export default {
                 return [];
             }
         },
-        type: String,
+        type: String,  // 类型card
+
     },
     data() {
         return {

package/dist/components/checkbox/index.vue

@@ -1,12 +1,15 @@
 <template>
   <label :class="wrapClasses" v-if="!checkboxButton">
     <span :class="checkboxClasses">
+      <!-- 处理分组和单个情况的输入元素 -->
       <span :class="innerClasses"></span>
+        <!-- 处理分组和单个情况的输入元素 -->
       <input v-if="group" type="checkbox" :class="inputClasses" :disabled="disabled" :value="name" v-model="model"
         @change="change" />
       <input v-else type="checkbox" :class="inputClasses" :disabled="disabled" :checked="currentValue"
         @change="change" />
     </span>
+    <!-- 标签和可选的描述 -->
     <div class="vd-checkbox__label" v-if="$slots.default">
       <p class="vd-checkbox__text">
         <slot></slot>
@@ -15,6 +18,7 @@
     </div>
   </label>
 
+    <!-- 复选框按钮变体 -->
   <label class="vd-checkbox vd-checkbox-button" :class="checkboxButtonClasses" v-else>
     <input type="checkbox" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change" />
     <template v-if="type === 'small'">
@@ -46,32 +50,29 @@ const prefixCls = "vd-checkbox";
 export default {
   name: "vd-checkbox",
   props: {
-    checkboxButton: Boolean,
-    disabled: Boolean,
-    extra: [String, Number, Boolean],
-    descriptionText: [String, Number, Boolean],
-    iconDescriptionText: [String, Number, Boolean],
-    value: [String, Number, Boolean],
+    value: [String, Number, Boolean], // 复选框的当前值
+    checkboxButton: Boolean, // 是否为复选框按钮
+    disabled: Boolean,  // 是否禁用
+    extra: [String, Number, Boolean], // 额外的描述文本
     trueValue: {
       type: [String, Number, Boolean],
-      default: true,
+      default: true,  // 复选框被选中时的值
     },
     falseValue: {
       type: [String, Number, Boolean],
-      default: false,
+      default: false,  // 复选框未被选中时的值
     },
-    name: null,
-    indeterminate: Boolean,
-    icon: String,
-    iconText: [String, Number, Boolean],
-    type: String,
+    name: null,  //复选框的 name 属性
+    indeterminate: Boolean,  // 复选框的不确定状态
+    icon: String,  // 使用复选框按钮时显示的图标
+    type: String,   // 复选框按钮的尺寸类型（'small'，'medium'，'large'）
   },
   data() {
     return {
-      model: [],
-      currentValue: this.value,
-      group: false,
-      parent: findComponentUpward(this, "vd-checkbox-group"),
+      model: [],  // 复选框组的模型值
+      currentValue: this.value,  // 复选框的当前值
+      group: false,  // 是否为复选框组
+      parent: null, // 对父级复选框组组件的引用
     };
   },
   computed: {
@@ -111,9 +112,7 @@ export default {
   mounted() {
     this.parent = findComponentUpward(this, "vd-checkbox-group");
     if (this.parent) {
-      this.group = true;
-    }
-    if (this.group) {
+      this.isGroup = true;
       this.parent.updateModel(true);
     } else {
       this.updateModel();

package/dist/components/dialog/index.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="vd-dialog-wrap">
         <div class="vd-overlay" v-if="visible && isOverlayVisible &&  overlay" :style="{ zIndex: overlayZIndex }"
-        @click="handleOverlayClick()"></div>
+        @click="handleOverlayClick"></div>
         <transition name="vd-dialog-fade">
-            <div class="vd-dialog"  v-if="visible" :class="className ? `vd-dialog--${className}` : ''" :style="{width : width, zIndex: overlayZIndex + 1}">
+            <div class="vd-dialog"  v-if="visible" :class="computedClassName" :style="{width : width, zIndex: overlayZIndex + 1}">
                 <header class="vd-dialog__header" :class="{ 'vd-dialog__header--img': $slots.imgs }">
                     <div class="vd-dialog__header--img-content" v-if="$slots.imgs">
                         <slot name="imgs"></slot>
@@ -13,9 +13,7 @@
                 <div class="vd-dialog__content">
                     <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }"
                         v-if="message || $slots.content">
-                        <slot name="content">{{
-                            message
-                            }}</slot>
+                        <slot name="content">{{message}}</slot>
                     </div>
                 </div>
                 <footer class="vd-dialog__footer">
@@ -89,18 +87,24 @@ export default {
         }
     },
     watch: {
-        visible(val) {
-            if (val) {
+        visible: {
+            immediate: true,
+            handler(val) {
+                if (val) {
                 this.showOverlayLayer();
-            } else {
+                } else {
                 this.hideOverlayLayer();
-            }
-        }
+                }
+            },
+        },
     },
     computed: {
         visible() {
             return this.value
-        }
+        },
+        computedClassName() {
+            return this.className ? `vd-dialog--${this.className}` : '';
+        },
     },
     methods: {
         showOverlayLayer() {

package/dist/components/dropdown/index.vue

@@ -4,9 +4,9 @@
       <div class="vd-menu-mask" @click.stop="clickMenuMask"></div>
     </transition> -->
     <transition :name="isAnimation ? 'vd-dropdown-slide-down' : ''">
-      <div v-clickoutside="clickMenuMask" class="vd-dropdown-menu" v-show="value">
+      <div v-clickoutside="clickMenuMask" class="vd-dropdown-menu" v-show="isMask">
         <template v-if="!isMultiple && !$slots.custom">
-          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="(item, index) of datalist" :key="item.name"
+          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="(item, index) in datalist" :key="item.name"
             @click.stop="selectedItem(item, index)">
             <span class="vd-dropdown-left">
               <vd-icon v-if="item.icon" :name="item.icon" svg class="vd-dropdown-icon"></vd-icon>
@@ -26,7 +26,7 @@
         </template>
 
         <template v-if="isMultiple">
-          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="item of datalist" :key="item.name">
+          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="item in datalist" :key="item.name">
             <vd-checkbox v-model="item.selected" :disabled="!item.selected && max <= selectedCount">
               {{ item.text }}
             </vd-checkbox>
@@ -99,36 +99,33 @@ export default {
       type: Array,
       default: () => []
     },
-    state: {
-      type: String,
-      default: 'close',
-      validator: value => ['open', 'preopen', 'close', 'fusing', 'pre', 'last'].includes(value)
-    },
-    stateText: {
-      type: String,
-      default: ''
-    },
-    subText: {
+    for: {
       type: String,
       default: ''
     },
-    subIcon: {
-      type: String,
-      default: ''
-    }
   },
   data() {
     return {
-      datalist: [],
-      isMask: this.value
+      datalist: []
     };
   },
   watch: {
-    value(val) {
-      this.isMask = val;
+    list: {
+      immediate: true,
+      handler(val) {
+        this.datalist = [...val];
+      }
+    },
+    value(val){
+      if(!val){
+        this.$emit('close')
+      }
     }
   },
   computed: {
+    isMask() {
+      return this.value;
+    },
     wrapClasses() {
       return {
         [`${prefixCls}-${this.types}`]: this.types,
@@ -146,9 +143,6 @@ export default {
       return this.datalist.filter(item => item.selected).length;
     }
   },
-  mounted() {
-    this.datalist = [...this.list];
-  },
   methods: {
     itemClass(item) {
       return {
@@ -156,26 +150,44 @@ export default {
         [`${prefixCls}--active`]: item.selected
       };
     },
-    clickMenuMask() {
-      this.isMask = false;
-      this.$emit('close');
+    findParentWithNameAttr(element, nameValue) {
+      // 如果当前元素具有 name 属性且与传入的值匹配，返回该元素
+      if (element.getAttribute && element.getAttribute('alias-name') === nameValue) {
+        return element;
+      }
+      // 如果已经到达根元素 (document 或 null)，停止查找
+      if (element.parentElement) {
+        return this.findParentWithNameAttr(element.parentElement, nameValue); // 递归查找父元素
+      }
+      return null; // 没有找到带 name 属性的匹配元素
+    },
+    clickMenuMask(e) {      
+      if (this.value) {
+        if(this.for){
+          const nameElement = this.findParentWithNameAttr(e, this.for)    
+          // 如果没找到就说明点外面了
+          if (!nameElement) {            
+            this.$emit('input', false);
+          }   
+        }        
+      }
     },
     selectedItem(item, index) {
-      this.$emit('change', item, index);
+      this.$emit('change', item, index); // 通知父组件选中项改变
     },
     resetMenu() {
       this.datalist.forEach(item => (item.selected = false));
       this.$emit('reset', this.datalist);
     },
     sureMenu() {
-      this.isMask = false;
-      this.$emit('close');
-      this.$emit('ok', this.datalist);
+      this.$emit('close'); // 关闭菜单
+      this.$emit('ok', this.datalist); // 确认并返回数据
     }
   }
 };
 </script>
 
+
 <style lang="less">
 @import './style.less';
 

package/dist/components/empty/index.vue

@@ -25,7 +25,7 @@ export default {
             default: 'nodata',  // 默认类型
             validator(value) {
                 // 只接受以下类型值
-                return ['nodata', 'network', 'not-found'].includes(value);
+                return ['nodata', 'network', 'not-found','noposition','nomargin','nocoupons','nosearch','nonotice','noorders','noocomments'].includes(value);
             }
         },
     },
@@ -43,7 +43,35 @@ export default {
                 'not-found': {
                     light: require('./404.png'),
                     dark: require('./404-dark.png')
-                }
+                },
+                noposition: {
+                    light: require('./noposition.png'),
+                    dark: require('./noposition-dark.png')
+                },
+                nomargin: {
+                    light: require('./nomargin.png'),
+                    dark: require('./nomargin-dark.png')
+                },
+                nocoupons: {
+                    light: require('./nocoupons.png'),
+                    dark: require('./nocoupons-dark.png')
+                },
+                nosearch: {
+                    light: require('./nosearch.png'),
+                    dark: require('./nosearch-dark.png')
+                },
+                nonotice: {
+                    light: require('./nonotice.png'),
+                    dark: require('./nonotice-dark.png')
+                },
+                noorders: {
+                    light: require('./noorders.png'),
+                    dark: require('./noorders-dark.png')
+                },
+                noocomments: {
+                    light: require('./noocomments.png'),
+                    dark: require('./noocomments-dark.png')
+                },
             }
         }
     },

package/dist/components/footer/index.vue

@@ -4,7 +4,11 @@
       <slot>
       </slot>
     </div>
-    <p class="vd-footer__text" v-html="text"></p>
+    <div class="vd-footer__text" v-if="text || $slots.text">
+      <slot name="text">
+        {{ text }}
+      </slot>
+    </div>
   </div>
 </template>
 

package/dist/components/footnav/footnav-item/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <div class="vd-foot-nav-item" :class="{ 'vd-foot-nav-item--active': active }" @click="onClick">
-    <vd-icon v-if="icon" :name="icon" :svg="isSvg"></vd-icon>
-    <vd-badge v-if="dot || badge" :is-dot="dot" :value="badge" :max="99">
-      <vd-icon :name="iconName" size="large" :svg="isSvg"></vd-icon>
+  <div class="vd-foot-nav-item" :class="{ 'vd-foot-nav-item--active': isActive  }" @click="onClick">
+    <vd-badge v-if="iconName|| $slots.icon" :is-dot="dot" :value="badge" :max="99">
+      <slot name="icon"><vd-icon :name="iconName" size="large"></vd-icon></slot>
     </vd-badge>
     <slot></slot>
   </div>
@@ -16,53 +15,23 @@ export default {
   name: 'vd-foot-nav-item',
   mixins: [RouterLink],
   props: {
-    iconName: {
-      type: String,
-    },
-    icon: {
-      type: String,
-    },
-    name: {
-      type: String,
-    },
-    text: {
-      type: String,
-    },
-    dot: {
-      type: Boolean,
-    },
-    badge: {
-      type: [Number, String],
-    },
-    isSvg: {
-      type: Boolean,
-    },
+    iconName: String,
+    dot: Boolean,
+    badge: [Number, String],
   },
   computed: {
-    // isActive() {
-    //   return this.$parent.active === this.$parent.$children.indexOf(this);
-    //   // return this.activeIndex === this.index;
-
-    // },
+    isActive() {
+      return this.$parent.value === this.$parent.$slots.default.indexOf(this.$vnode);
+    },
   },
   data() {
     return {
-      active: false
     };
   },
-
-  beforeCreate() {
-    this.$parent.items.push(this);
-  },
-
-  destroyed() {
-    this.$parent.items.splice(this.$parent.items.indexOf(this), 1);
-  },
   methods: {
     onClick(event) {
-      // this.$parent.updateActive(this.$parent.$children.indexOf(this));
-      // this.$emit('click', event);
-      this.$parent.onChange(this.$parent.items.indexOf(this));
+      const index = this.$parent.$slots.default.indexOf(this.$vnode);
+      this.$parent.onChange(index);
       this.$emit('click', event);
       this.routerLink();
     },

package/dist/components/footnav/index.vue

@@ -27,14 +27,14 @@ export default {
       default: null,
     },
     placeholder: Boolean,
+    beforeChange: {
+      type: Function,
+      default: null,
+    },
   },
   computed: {
     fit() {
-      if (this.safeAreaInsetBottom !== null) {
-        return this.safeAreaInsetBottom;
-      }
-      // enable safe-area-inset-bottom by default when fixed
-      return this.fixed;
+      return this.safeAreaInsetBottom !== null ? this.safeAreaInsetBottom : this.fixed;
     },
     style() {
       return {
@@ -44,39 +44,24 @@ export default {
   },
   data() {
     return {
-      // active: 0,
-      items: [],
       height: null,
     }
   },
   watch: {
-    items() {
-      this.setActiveItem();
-    },
-
-    value() {
-      this.setActiveItem();
-    }
   },
   methods: {
-    setActiveItem() {
-      this.items.forEach((item, index) => {
-        item.active = index === this.value;
-      });
-    },
+    async onChange(active) {
+      // 处理 before-change 回调，允许用户决定是否切换
+      if (this.beforeChange) {
+        const canChange = await this.beforeChange(active);
+        if (!canChange) return;
+      }
 
-    onChange(active) {
       if (active !== this.value) {
         this.$emit('input', active);
         this.$emit('change', active);
       }
     },
-    // updateActive(index) {
-    //   this.active = index;
-    // },
-    // handleClick() {
-    //   this.$emit('click',this.active)
-    // }
   },
   mounted() {
     if (this.placeholder && this.fixed) {
@@ -85,7 +70,8 @@ export default {
       };
 
       setHeight();
-      setTimeout(setHeight, 100);
+      window.addEventListener('resize', setHeight);
+      this.$once('hook:beforeDestroy', () => window.removeEventListener('resize', setHeight));
     }
   }