vdesign-ui 0.1.23 → 0.1.24

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="value">
         <template v-if="!isMultiple && !$slots.custom">
           <div class="vd-dropdown-item" :class="itemClass(item)" v-for="(item, index) of 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">
+            <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,11 +97,8 @@ export default {
     },
     list: {
       type: Array,
-      default: () => {
-        return [];
-      }
+      default: () => []
     },
-    // state
     state: {
       type: String,
       default: 'close',
@@ -112,7 +108,6 @@ export default {
       type: String,
       default: ''
     },
-    // group
     subText: {
       type: String,
       default: ''
@@ -122,25 +117,23 @@ export default {
       default: ''
     }
   },
-  watch: {
-    value(val) {
-      this.isMask = val ? true : false
-    }
-  },
   data() {
     return {
       datalist: [],
-      isMask: false
+      isMask: this.value
     };
   },
-  mounted() {
-    this.datalist = [...this.list];
+  watch: {
+    value(val) {
+      this.isMask = val;
+    }
   },
   computed: {
     wrapClasses() {
       return {
         [`${prefixCls}-${this.types}`]: this.types,
         [`${prefixCls}--divided`]: this.types !== 'state',
+        [`${prefixCls}-${this.alignment}`]: this.alignment
       };
     },
     okBtnTxt() {
@@ -148,14 +141,20 @@ export default {
     },
     resetBtnTxt() {
       return '重置';
+    },
+    selectedCount() {
+      return this.datalist.filter(item => item.selected).length;
     }
   },
+  mounted() {
+    this.datalist = [...this.list];
+  },
   methods: {
     itemClass(item) {
       return {
         [`${prefixCls}--disabled`]: item.disabled,
         [`${prefixCls}--active`]: item.selected
-      }
+      };
     },
     clickMenuMask() {
       this.isMask = false;
@@ -164,16 +163,8 @@ export default {
     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);
-    },
     resetMenu() {
-      this.datalist.map(value => (value.selected = false));
+      this.datalist.forEach(item => (item.selected = false));
       this.$emit('reset', this.datalist);
     },
     sureMenu() {

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/radio/index.vue

@@ -35,9 +35,6 @@ export default {
             type: Boolean,
             default: false
         },
-        // extra: {
-        //     type: [String, Number, Boolean],
-        // },
         value: {
             type: [String, Number, Boolean],
             default: false

package/dist/components/selector/index.vue

@@ -5,8 +5,9 @@
       <div :contenteditable="contenteditable" class="vd-selector__left">
         <vd-icon v-if="icon" :name="icon" svg :class="iconClasses"></vd-icon>
         <div :class="titleClasses">
-          <slot v-if="!isSlotEmpty" name="content"></slot>
-          <template v-else>{{ content }} </template>
+          <slot name="content">
+            {{ content }}
+          </slot>
         </div>
       </div>
       <vd-icon v-if="arrow" :name="arrow" :class="arrowClasses"></vd-icon>
@@ -17,43 +18,52 @@
 
 <script>
 const prefixCls = 'vd-selector';
+
 export default {
-  name: "vd-selector",
-  componentName: "vd-selector",
+  name: 'vd-selector',
   props: {
+    // 图标名称
     icon: {
       type: String,
       default: ''
     },
+    // 箭头图标名称或布尔值（是否显示箭头）
     arrow: {
       type: [String, Boolean],
       default: 'icon_btn_moredown'
     },
+    // 组件类型（用于自定义样式）
     type: {
       type: String,
-      default: ''// form
+      default: '' // form
     },
+    // 组件尺寸
     size: {
       type: String,
       default: 'm',
       validator: value => ['s', 'm', 'l', 'xl'].includes(value)
     },
+    // 组件内容
     content: {
       type: [String, Array],
       default: ''
     },
+    // 是否禁用组件
     disabled: {
       type: Boolean,
       default: false
     },
+    // 是否激活组件
     active: {
       type: Boolean,
       default: false
     },
+    // 是否允许编辑内容
     contenteditable: {
       type: Boolean,
       default: false
     },
+    // 是否显示子菜单
     value: {
       type: Boolean,
       default: false
@@ -61,59 +71,64 @@ export default {
   },
   data() {
     return {
-      showMenu: this.value,
-    };
+      // 是否显示子菜单
+      showMenu: false
+    }
+  },
+  watch: {
+    // 监听 value 属性变化，同步更新 showMenu
+    value(newVal) {
+      this.showMenu = newVal;
+    }
   },
   computed: {
-    isSlotEmpty() {
-      return !this.$slots.content;
-    },
+    // 计算外层容器的样式类
     wrapClasses() {
       return {
         [`${prefixCls}-${this.type}`]: this.type,
         [`${prefixCls}-${this.size}`]: this.size,
         [`${prefixCls}--disabled`]: this.disabled,
         [`${prefixCls}--active`]: this.showMenu || this.active,
-      }
+      };
     },
+    // 计算标题的样式类
     titleClasses() {
       return {
         [`${prefixCls}-${this.type}__title`]: this.type,
         [`${prefixCls}-${this.size}__title`]: this.size,
-      }
+      };
     },
+    // 计算图标的样式类
     iconClasses() {
       return {
         [`${prefixCls}-iconfont`]: true,
         [`${prefixCls}-${this.type}__icon`]: this.type,
         [`${prefixCls}-${this.size}__icon`]: this.size,
-      }
+      };
     },
+    // 计算箭头的样式类
     arrowClasses() {
       return {
         [`${prefixCls}-iconfont`]: true,
         [`${prefixCls}-${this.type}__arrow`]: this.type,
         [`${prefixCls}-${this.size}__arrow`]: this.size,
         [`${prefixCls}__arrow--active`]: this.showMenu && this.arrow === 'icon_btn_moredown',
-      }
+      };
     },
   },
-  watch: {
-    value(val) {
-      this.showMenu = val;
-    }
-  },
   methods: {
+    // 关闭子菜单
     close() {
-      this.showMenu = false
-      this.$emit('close', false)
-      this.$emit('input', false)
+      this.showMenu = false;
+      this.$emit('close', false);
+      this.$emit('input', false);
     },
+    // 处理点击事件
     handlerClick() {
       if (this.disabled) return;
-      this.showMenu = !this.showMenu
-      this.$emit('click', this.showMenu)
-      this.$emit('input', this.showMenu)
+      this.showMenu = !this.showMenu;
+      // this.$emit('input', this.showMenu);
+      this.$emit('click', this.showMenu);
     }
   }
 };

package/dist/components/slider/index.vue

@@ -59,15 +59,9 @@ export default {
       type: Number,
       default: 1
     },
-    // disabled: {
-    //     type: Boolean,
-    //     default: false
-    // },
     value: {
       type: Number
     },
-    markLeft:Number,
-    markRight:Number,
 
   },
   data() {

package/dist/components/title/index.vue

@@ -11,7 +11,7 @@
         <div class="vd-title--right" v-if="guideText || arrow || $slots.right">
             <slot name="right">
                 <span v-if="guideText" :class="textRightClasses">{{ guideText }}</span>
-                <vd-icon v-if="arrow" class="vd-title-arrow" name="ar_icon_nav_back"></vd-icon>
+                <vd-icon v-if="arrow" class="vd-title-arrow" name="icon_btn_next"></vd-icon>
             </slot>
         </div>
     </div>

package/dist/components/upload/index.vue

@@ -15,7 +15,6 @@
 export default {
   name: 'vd-upload',
   inheritAttrs: false,
-
   props: {
     photo: {
       type: String,