vdesign-ui 0.1.22 → 0.1.24-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,7 +80,7 @@ export default {
         }
     },
     computed: {
-        visible(){
+        visible() {
             return this.value
         },
         currentCloseIcon() {
@@ -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/index.vue

@@ -37,31 +37,6 @@
         <slot></slot>
       </span>
     </template>
-    <!-- <div class="vd-checkbox-button__icon">
-      <vd-icon
-        v-if="icon"
-        :name="icon"
-        class="vd-checkbox-button__icon--large"
-        :class="{ 'vd-checkbox-button__icon-mb': iconDescriptionText }"
-      ></vd-icon>
-      <vd-icon
-        v-if="LeftIcon"
-        :name="LeftIcon"
-        class="vd-checkbox-button__icon--small"
-      ></vd-icon>
-      <span
-        v-if="iconText"
-        class="vd-checkbox-button__text"
-        :class="{ 'vd-checkbox-button__text-mb': descriptionText }"
-        >{{ iconText }}</span
-      >
-    </div>
-    <span class="vd-checkbox-button-descript" v-if="descriptionText">{{
-      descriptionText
-    }}</span>
-    <span class="vd-checkbox-button__icon-descript" v-if="iconDescriptionText">{{
-      iconDescriptionText
-    }}</span> -->
   </label>
 </template>
 <script>
@@ -97,7 +72,6 @@ export default {
       currentValue: this.value,
       group: false,
       parent: findComponentUpward(this, "vd-checkbox-group"),
-      //   name: "",
     };
   },
   computed: {

package/dist/components/dropdown/index.vue

@@ -1,44 +1,36 @@
 <template>
   <div class="vd-dropdown" :class="wrapClasses" v-show="isMask">
-    <transition :name="isAnimation ? 'vd-dropdown-fade' : ''">
+    <!-- <transition :name="isAnimation ? 'vd-dropdown-fade' : ''">
       <div class="vd-menu-mask" @click.stop="clickMenuMask"></div>
-    </transition>
-
+    </transition> -->
     <transition :name="isAnimation ? 'vd-dropdown-slide-down' : ''">
-      <div 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>
               <span class="vd-dropdown-group-cell">
-                <span class="vd-dropdown-text">
-                  {{ item.text }}
-                </span>
-                <span v-if="['group'].includes(types)" class="vd-dropdown-group-sub">
+                <span class="vd-dropdown-text">{{ item.text }}</span>
+                <span v-if="types === 'group'" class="vd-dropdown-group-sub">
                   <vd-icon v-if="item.subIcon" :name="item.subIcon" svg class="vd-dropdown-sub-icon"></vd-icon>
                   <span class="vd-dropdown-subtext" v-html="item.subText"></span>
                 </span>
               </span>
             </span>
-
-            <vd-icon v-if="['primary'].includes(types) && item.selected" class="vd-dropdown-active-select"
+            <vd-icon v-if="types === 'primary' && item.selected" class="vd-dropdown-active-select"
               name="icon_btn_singleslt" color="#1BC47D"></vd-icon>
-            <span v-if="['state'].includes(types)" v-html="item.stateText" class="vd-dropdown-state-text"
+            <span v-if="types === 'state'" v-html="item.stateText" class="vd-dropdown-state-text"
               :class="`vd-dropdown-state-text--${item.state}`"></span>
           </div>
         </template>
 
         <template v-if="isMultiple">
-          <div class="vd-dropdown-item" :class="itemClass(item)" v-for="item of datalist" :key="item.name">
-
-            <vd-checkbox v-model="item.selected"
-              :disabled="!item.selected && max <= list.filter(value => value.selected == true).length ? true : false">
+          <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>
-
-            <vd-icon v-if="['primary'].includes(types) && item.selected" class="vd-dropdown-active-select"
+            <vd-icon v-if="types === 'primary' && item.selected" class="vd-dropdown-active-select"
               name="icon_btn_singleslt" color="#1BC47D"></vd-icon>
           </div>
           <div class="vd-dropdown--btn">
@@ -52,16 +44,20 @@
         </div>
       </div>
     </transition>
-
   </div>
 </template>
+
 <script>
+import clickoutside from "../mixins/clickoutside.js";
+
 const prefixCls = 'vd-dropdown';
 export default {
   name: 'vd-dropdown',
+  directives: {
+    clickoutside
+  },
   props: {
     isAnimation: {
-      //是否有动画效果
       type: Boolean,
       default: false
     },
@@ -71,7 +67,6 @@ export default {
       validator: value => ['primary', 'secondary', 'state', 'group'].includes(value)
     },
     value: {
-      //是否显示
       type: Boolean,
       default: false
     },
@@ -83,13 +78,17 @@ export default {
       type: Boolean,
       default: false
     },
+    alignment: {
+      type: String,
+      default: 'center',
+      validator: value => ['start', 'end', 'center'].includes(value)
+    },
     col: {
-      //显示的列数
       type: [Number, String],
       default: 1
     },
     max: {
-      type: [String, Number],
+      type: [Number, String],
       default: 5
     },
     custom: {
@@ -98,49 +97,40 @@ export default {
     },
     list: {
       type: Array,
-      default: () => {
-        return [];
-      }
-    },
-    // state
-    state: {
-      type: String,
-      default: 'close',
-      validator: value => ['open', 'preopen', 'close', 'fusing', 'pre', 'last'].includes(value)
+      default: () => []
     },
-    stateText: {
+    for: {
       type: String,
       default: ''
     },
-    // group
-    subText: {
-      type: String,
-      default: ''
-    },
-    subIcon: {
-      type: String,
-      default: ''
-    }
-  },
-  watch: {
-    value(val) {
-      this.isMask = val ? true : false
-    }
   },
   data() {
     return {
-      datalist: [],
-      isMask: false
+      datalist: []
     };
   },
-  mounted() {
-    this.datalist = [...this.list];
+  watch: {
+    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,
         [`${prefixCls}--divided`]: this.types !== 'state',
+        [`${prefixCls}-${this.alignment}`]: this.alignment
       };
     },
     okBtnTxt() {
@@ -148,6 +138,9 @@ export default {
     },
     resetBtnTxt() {
       return '重置';
+    },
+    selectedCount() {
+      return this.datalist.filter(item => item.selected).length;
     }
   },
   methods: {
@@ -155,36 +148,46 @@ export default {
       return {
         [`${prefixCls}--disabled`]: item.disabled,
         [`${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);
-    },
-    selectMultiple(index) {
-      const count = this.datalist.filter(item => item.selected).length;
-      if (!this.datalist[index].selected && count >= this.max) {
-        this.$emit('maxTip');
-        return;
-      }
-      this.$set(this.datalist[index], 'selected', !this.datalist[index].selected);
+      this.$emit('change', item, index); // 通知父组件选中项改变
     },
     resetMenu() {
-      this.datalist.map(value => (value.selected = false));
+      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/dropdown/style.less

@@ -35,11 +35,33 @@
     transform-origin: top center;
     position: absolute;
     transition: transform 0.25s ease, opacity 0.25s ease;
-    inset-inline-start: 50%;
     inset-block-start: 100%;
+    // 默认 center
+    inset-inline-start: 50%;
     transform: translate(var(--translate-x), 2px);
   }
 
+  &-start {
+    .@{dropdown-prefix-cls}-menu {
+      inset-inline-start: 0;
+      transform: translate(0, 2px);
+    }
+  }
+
+  &-end {
+    .@{dropdown-prefix-cls}-menu {
+      inset-inline-start: inherit;
+      inset-inline-end: 0;
+      transform: translate(0, 2px);
+    }
+  }
+
+  &-center {
+    .@{dropdown-prefix-cls}-menu {
+      inset-inline-start: 50%;
+      transform: translate(var(--translate-x), 2px);
+    }
+  }
 
   &-primary {
     .@{dropdown-prefix-cls}-menu {

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,7 @@
       <slot>
       </slot>
     </div>
-    <p class="vd-footer__text" v-html="text"></p>
+    <p class="vd-footer__text" v-if="text">{{ text }}</p>
   </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>
+    <vd-badge v-if="iconName|| $slots.icon" :is-dot="dot" :value="badge" :max="99">
+      <slot name="icon"><vd-icon :name="iconName" size="large" :svg="isSvg"></vd-icon></slot>
     </vd-badge>
     <slot></slot>
   </div>
@@ -25,9 +24,6 @@ export default {
     name: {
       type: String,
     },
-    text: {
-      type: String,
-    },
     dot: {
       type: Boolean,
     },