vdesign-ui 0.1.24-beta → 0.1.25

package/dist/components/radio/style.css

@@ -1,213 +1,213 @@
-.vd-radio {
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.vd-radio__input {
-  position: relative;
-  margin-inline-end: calc(var(--spacing-check_radio-icon-margin_right) * 1px);
-  width: calc(var(--icon-check_radio-sizing) * 1px);
-  height: calc(var(--icon-check_radio-sizing) * 1px);
-}
-.vd-radio__label {
-  flex: 1;
-}
-.vd-radio__text {
-  color: var(--color-check_radio-text-default);
-  font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-  font-weight: var(--en-single-f-d-r-fontWeight);
-}
-.vd-radio__description {
-  line-height: 1;
-  margin-top: calc(var(--spacing-check_radio-text-margin_top) * 1px);
-  color: var(--color-check_radio-text_describe-default);
-  font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-  font-weight: var(--en-single-f-b-r-fontWeight);
-}
-.vd-radio .vd-radio__icon {
-  display: block;
-  width: calc(var(--icon-check_radio-sizing) * 1px);
-  height: calc(var(--icon-check_radio-sizing) * 1px);
-  position: relative;
-}
-.vd-radio .vd-radio__icon::before {
-  position: absolute;
-  box-sizing: border-box;
-  content: ' ';
-  pointer-events: none;
-  top: -50%;
-  right: -50%;
-  bottom: -50%;
-  left: -50%;
-  border: 0 solid var(--color-check_radio-default);
-  -webkit-transform: scale(0.5);
-  transform: scale(0.5);
-  border-width: 3px;
-  border-radius: 50%;
-}
-.vd-radio__original {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-  cursor: pointer;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  opacity: 0;
-}
-.vd-radio--checked .vd-radio__text {
-  font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-  font-weight: var(--en-single-f-d-s-fontWeight);
-}
-.vd-radio--checked .vd-radio__icon::before {
-  border: 0 solid var(--color-check_radio-active);
-  border-width: 3px;
-}
-.vd-radio--checked .vd-radio__icon::after {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  border-radius: 50%;
-  display: table;
-  border-top: 0;
-  border-left: 0;
-  content: " ";
-  background-color: var(--color-check_radio-active);
-}
-.vd-radio--disabled {
-  cursor: not-allowed;
-}
-.vd-radio--disabled .vd-radio__text {
-  color: var(--color-check_radio-text-disable);
-}
-.vd-radio--disabled .vd-radio__description {
-  color: var(--color-check_radio-text_describe-disable);
-}
-.vd-radio--disabled .vd-radio__icon::before {
-  border-color: var(--color-check_radio-disable);
-}
-.vd-radio--checked.vd-radio--disabled .vd-radio__icon::before {
-  border-color: var(--color-check_radio-active-disable);
-}
-.vd-radio--checked.vd-radio--disabled .vd-radio__icon::after {
-  background-color: var(--color-check_radio-active-disable);
-}
-.vd-radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
-}
-.vd-radio-group-card {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  gap: 12px;
-}
-.vd-radio-group-card .vd-radio-button-cell {
-  flex: 1;
-}
-.vd-radio-button {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  line-height: 1;
-  width: 100%;
-}
-.vd-radio-button::after {
-  position: absolute;
-  box-sizing: border-box;
-  content: ' ';
-  pointer-events: none;
-  top: -50%;
-  right: -50%;
-  bottom: -50%;
-  left: -50%;
-  border: 0 solid var(--color-check_radio-radio_border-default);
-  -webkit-transform: scale(0.5);
-  transform: scale(0.5);
-  border-width: 1px;
-}
-.vd-radio-button--large {
-  height: calc(var(--height-check_radio-radio_button_l) * 1px);
-}
-.vd-radio-button--large .vd-radio-button-text {
-  color: var(--color-check_radio-radio_button_text-default);
-  font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
-  font-weight: var(--en-single-f-d-r-fontWeight);
-}
-.vd-radio-button--large::after {
-  border-radius: calc(var(--radius-check_radio-radio_l) * 2px);
-}
-.vd-radio-button--medium {
-  height: calc(var(--height-check_radio-radio_button_m) * 1px);
-}
-.vd-radio-button--medium .vd-radio-button-text {
-  color: var(--color-check_radio-radio_button_text-default);
-  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-}
-.vd-radio-button--medium::after {
-  border-radius: calc(var(--radius-check_radio-m) * 2px);
-}
-.vd-radio-button--small {
-  height: calc(var(--height-check_radio-radio_button_s) * 1px);
-}
-.vd-radio-button--small .vd-radio-button-text {
-  color: var(--color-check_radio-radio_button_text-default);
-  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-  font-weight: var(--en-single-f-c-r-fontWeight);
-}
-.vd-radio-button--small::after {
-  border-radius: calc(var(--radius-check_radio-s) * 2px);
-}
-.vd-radio-button--checked {
-  background-color: var(--color-check_radio-radio_button_bg-active);
-}
-.vd-radio-button--checked::after {
-  border-color: var(--color-check_radio-radio_border-active);
-  border-width: 2px;
-}
-.vd-radio-button--checked .vd-radio-button-text {
-  color: var(--color-check_radio-radio_button_text-active);
-}
-.vd-radio-button--checked.vd-radio-button--large .vd-radio-button-text {
-  font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-  font-weight: var(--en-single-f-d-s-fontWeight);
-}
-.vd-radio-button--checked.vd-radio-button--medium .vd-radio-button-text {
-  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-  font-weight: var(--en-single-f-c-s-fontWeight);
-}
-.vd-radio-button--checked.vd-radio-button--small .vd-radio-button-text {
-  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-  font-weight: var(--en-single-f-c-s-fontWeight);
-}
-.vd-radio-button--disabled {
-  cursor: not-allowed;
-}
-.vd-radio-button--disabled .vd-radio-button-text {
-  color: var(--color-check_radio-radio_button_text-disable);
-}
-.vd-radio-group {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
-}
-.vd-radio-group__card {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-.vd-radio-group .vd-radio-button {
-  flex: 1;
-}
+.vd-radio {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.vd-radio__input {
+  position: relative;
+  margin-inline-end: calc(var(--spacing-check_radio-icon-margin_right) * 1px);
+  width: calc(var(--icon-check_radio-sizing) * 1px);
+  height: calc(var(--icon-check_radio-sizing) * 1px);
+}
+.vd-radio__label {
+  flex: 1;
+}
+.vd-radio__text {
+  color: var(--color-check_radio-text-default);
+  font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-r-fontWeight);
+}
+.vd-radio__description {
+  line-height: 1;
+  margin-top: calc(var(--spacing-check_radio-text-margin_top) * 1px);
+  color: var(--color-check_radio-text_describe-default);
+  font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-b-r-fontWeight);
+}
+.vd-radio .vd-radio__icon {
+  display: block;
+  width: calc(var(--icon-check_radio-sizing) * 1px);
+  height: calc(var(--icon-check_radio-sizing) * 1px);
+  position: relative;
+}
+.vd-radio .vd-radio__icon::before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid var(--color-check_radio-default);
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  border-width: 3px;
+  border-radius: 50%;
+}
+.vd-radio__original {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  opacity: 0;
+}
+.vd-radio--checked .vd-radio__text {
+  font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-s-fontWeight);
+}
+.vd-radio--checked .vd-radio__icon::before {
+  border: 0 solid var(--color-check_radio-active);
+  border-width: 3px;
+}
+.vd-radio--checked .vd-radio__icon::after {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  display: table;
+  border-top: 0;
+  border-left: 0;
+  content: " ";
+  background-color: var(--color-check_radio-active);
+}
+.vd-radio--disabled {
+  cursor: not-allowed;
+}
+.vd-radio--disabled .vd-radio__text {
+  color: var(--color-check_radio-text-disable);
+}
+.vd-radio--disabled .vd-radio__description {
+  color: var(--color-check_radio-text_describe-disable);
+}
+.vd-radio--disabled .vd-radio__icon::before {
+  border-color: var(--color-check_radio-disable);
+}
+.vd-radio--checked.vd-radio--disabled .vd-radio__icon::before {
+  border-color: var(--color-check_radio-active-disable);
+}
+.vd-radio--checked.vd-radio--disabled .vd-radio__icon::after {
+  background-color: var(--color-check_radio-active-disable);
+}
+.vd-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
+}
+.vd-radio-group-card {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 12px;
+}
+.vd-radio-group-card .vd-radio-button-cell {
+  flex: 1;
+}
+.vd-radio-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  line-height: 1;
+  width: 100%;
+}
+.vd-radio-button::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid var(--color-check_radio-radio_border-default);
+  -webkit-transform: scale(0.5);
+  transform: scale(0.5);
+  border-width: 1px;
+}
+.vd-radio-button--large {
+  height: calc(var(--height-check_radio-radio_button_l) * 1px);
+}
+.vd-radio-button--large .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-default);
+  font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-r-fontWeight);
+}
+.vd-radio-button--large::after {
+  border-radius: calc(var(--radius-check_radio-radio_l) * 2px);
+}
+.vd-radio-button--medium {
+  height: calc(var(--height-check_radio-radio_button_m) * 1px);
+}
+.vd-radio-button--medium .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-default);
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+}
+.vd-radio-button--medium::after {
+  border-radius: calc(var(--radius-check_radio-m) * 2px);
+}
+.vd-radio-button--small {
+  height: calc(var(--height-check_radio-radio_button_s) * 1px);
+}
+.vd-radio-button--small .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-default);
+  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-r-fontWeight);
+}
+.vd-radio-button--small::after {
+  border-radius: calc(var(--radius-check_radio-s) * 2px);
+}
+.vd-radio-button--checked {
+  background-color: var(--color-check_radio-radio_button_bg-active);
+}
+.vd-radio-button--checked::after {
+  border-color: var(--color-check_radio-radio_border-active);
+  border-width: 2px;
+}
+.vd-radio-button--checked .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-active);
+}
+.vd-radio-button--checked.vd-radio-button--large .vd-radio-button-text {
+  font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-d-s-fontWeight);
+}
+.vd-radio-button--checked.vd-radio-button--medium .vd-radio-button-text {
+  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-s-fontWeight);
+}
+.vd-radio-button--checked.vd-radio-button--small .vd-radio-button-text {
+  font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+  font-weight: var(--en-single-f-c-s-fontWeight);
+}
+.vd-radio-button--disabled {
+  cursor: not-allowed;
+}
+.vd-radio-button--disabled .vd-radio-button-text {
+  color: var(--color-check_radio-radio_button_text-disable);
+}
+.vd-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing-check_radio-group-margin_x)*1px);
+}
+.vd-radio-group__card {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 12px;
+}
+.vd-radio-group .vd-radio-button {
+  flex: 1;
+}

package/dist/components/result/index.vue

@@ -2,9 +2,10 @@
     <div class="vd-result">
         <div class="vd-result-img" v-if="currentImg"><img :src="currentImg" alt="img"></div>
         <div class="vd-result-title" v-if="title">{{ title }}</div>
-        <div class="vd-result-txt" v-if="text">{{ text }}</div>
+        <p class="vd-result-txt" v-if="text">{{ text }}</p>
         <div class="vd-result-footer">
             <slot name="btnp"></slot>
+
             <div class="vd-result-footer-btnx" v-if="$slots.btnt">
                 <slot name="btnt"></slot>
             </div>

package/dist/components/result/style.less

@@ -11,7 +11,8 @@
         margin: 0 auto;
         width: 160px;
 		img{
-			max-width: 100%;
+			width: 100%;
+            height: 100%;
 		}
     }
 

package/dist/components/selector/index.vue

@@ -1,6 +1,7 @@
 <template>
-  <div v-clickoutside="close" class="vd-selector" :class="wrapClasses" :tabindex="disabled ? -1 : 0">
-    <div class="vd-selector__inner" @click.stop="handlerClick">
+  <div class="vd-selector" :class="wrapClasses" :tabindex="disabled ? -1 : 0" @keyup.enter="handlerClick"
+    @click.stop="handlerClick">
+    <div class="vd-selector__inner">
       <div :contenteditable="contenteditable" class="vd-selector__left">
         <vd-icon v-if="icon" :name="icon" svg :class="iconClasses"></vd-icon>
         <div :class="titleClasses">
@@ -11,73 +12,73 @@
       </div>
       <vd-icon v-if="arrow" :name="arrow" :class="arrowClasses"></vd-icon>
     </div>
-    <div class="vd-selector--slot">
-      <slot name="dropdown"></slot>
-    </div>
+    <slot v-if="showMenu"></slot>
   </div>
 </template>
 
 <script>
-import clickoutside from "../mixins/clickoutside.js";
 const prefixCls = 'vd-selector';
 
 export default {
   name: 'vd-selector',
-  directives: {
-    clickoutside
-  },
   props: {
+    // 图标名称
     icon: {
       type: String,
       default: ''
     },
+    // 箭头图标名称或布尔值（是否显示箭头）
     arrow: {
-      type: String,
+      type: [String, Boolean],
       default: 'icon_btn_moredown'
     },
+    // 组件类型（用于自定义样式）
     type: {
       type: String,
-      default: '',
-      validator: value => ['', 'form'].includes(value)
+      default: '' // form
     },
+    // 组件尺寸
     size: {
       type: String,
       default: 'm',
       validator: value => ['s', 'm', 'l', 'xl'].includes(value)
     },
+    // 组件内容
     content: {
-      type: String,
+      type: [String, Array],
       default: ''
     },
+    // 是否禁用组件
     disabled: {
       type: Boolean,
       default: false
     },
+    // 是否激活组件
     active: {
       type: Boolean,
       default: false
     },
+    // 是否允许编辑内容
     contenteditable: {
       type: Boolean,
       default: false
     },
+    // 是否显示子菜单
     value: {
       type: Boolean,
       default: false
-    },
-    name: {
-      type: String,
-      default: ''
-    },
-  },
-  watch: {
-    value(val) {
-      this.showMenu = val;
     }
   },
   data() {
     return {
-      showMenu: this.value
+      // 是否显示子菜单
+      showMenu: false
+    }
+  },
+  watch: {
+    // 监听 value 属性变化，同步更新 showMenu
+    value(newVal) {
+      this.showMenu = newVal;
     }
   },
   computed: {
@@ -116,38 +117,19 @@ export default {
     },
   },
   methods: {
-    generateClasses(suffix = '', extra = '') {
-      return {
-        [`${prefixCls}-${this.type}${suffix}`]: this.type,
-        [`${prefixCls}-${this.size}${suffix}`]: this.size,
-        [`${prefixCls}${extra}`]: extra,
-        [`${prefixCls}--disabled`]: this.disabled,
-        [`${prefixCls}--active`]: this.showMenu || this.active,
-        [`${prefixCls}-${this.size}${suffix}--active`]: this.showMenu && this.arrow,
-      };
-    },
+    // 关闭子菜单
     close() {
-      if (this.showMenu) {
-        // this.showMenu = false;
-        // this.$emit('close');
-        // 传了下拉菜单才执行
-        if (this.$scopedSlots.dropdown) {
-          console.log('has dropdown')
-          this.$emit('input', false);
-        }
-      }
+      this.showMenu = false;
+      this.$emit('close', false);
+      this.$emit('input', false);
     },
+    // 处理点击事件
     handlerClick() {
       if (this.disabled) return;
-      console.log('showMenu:1:', this.showMenu);
-      // 更新showMenu的值
       this.showMenu = !this.showMenu;
-      console.log('showMenu:2:', this.showMenu);
-      // 使用$emit来更新v-model绑定的值
-      this.$emit('input', this.showMenu);
-      this.$emit('click');
+      // this.$emit('input', this.showMenu);
+      this.$emit('click', this.showMenu);
     }
-
   }
 };
 </script>

package/dist/components/selector/style.less

@@ -298,12 +298,6 @@
     }
   }
 
-  &--slot {
-    position: absolute;
-    top: 100%;
-    display: none;
-  }
-
   &--active {
     .@{selector-prefix-cls}-xl {
 
@@ -378,10 +372,6 @@
         transition: transform .3s;
       }
     }
-
-    .@{selector-prefix-cls}--slot {
-      display: block;
-    }
   }
 
   &--disabled {