vdesign-ui 0.1.22 → 0.1.24-beta

package/dist/components/radio/index.vue

@@ -5,15 +5,14 @@
             <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
         </span>
         <div class="vd-radio__label" v-if="$slots.default">
-            <p class="vd-radio__text">
+            <div class="vd-radio__text">
                 <slot></slot>
-            </p>
-            <p class="vd-radio__description" v-if="extra">{{ extra }}</p>
+            </div>
+            <!-- <p class="vd-radio__description" v-if="extra">{{ extra }}</p> -->
         </div>
     </label>
 
 
-    <!-- 传入文字小icon 不传文字大icon -->
     <label class="vd-radio vd-radio-button" :class="radioButtonClasses" v-else>
         <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
         <span class="vd-radio-button-text">
@@ -36,9 +35,6 @@ export default {
             type: Boolean,
             default: false
         },
-        extra: {
-            type: [String, Number, Boolean],
-        },
         value: {
             type: [String, Number, Boolean],
             default: false

package/dist/components/radio/style.css

@@ -0,0 +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;
+}

package/dist/components/radio/style.less

@@ -19,6 +19,11 @@
             width: calc(var(--icon-check_radio-sizing) * 1px);
             height: calc(var(--icon-check_radio-sizing) * 1px);
         }
+
+        &__label{
+            flex: 1;
+        }
+
         &__text {
             color: var(--color-check_radio-text-default);
             font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);

package/dist/components/result/index.vue

@@ -2,10 +2,9 @@
     <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>
-        <p class="vd-result-txt" v-if="text">{{ text }}</p>
+        <div class="vd-result-txt" v-if="text">{{ text }}</div>
         <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/selector/index.vue

@@ -1,37 +1,44 @@
 <template>
-  <div class="vd-selector" :class="wrapClasses" :tabindex="disabled ? -1 : 0" @keyup.enter="handlerClick"
-    @click.stop="handlerClick">
-    <div class="vd-selector__inner">
+  <div v-clickoutside="close" class="vd-selector" :class="wrapClasses" :tabindex="disabled ? -1 : 0">
+    <div class="vd-selector__inner" @click.stop="handlerClick">
       <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>
     </div>
-    <slot v-if="showMenu"></slot>
+    <div class="vd-selector--slot">
+      <slot name="dropdown"></slot>
+    </div>
   </div>
 </template>
 
 <script>
+import clickoutside from "../mixins/clickoutside.js";
 const prefixCls = 'vd-selector';
+
 export default {
-  name: "vd-selector",
-  componentName: "vd-selector",
+  name: 'vd-selector',
+  directives: {
+    clickoutside
+  },
   props: {
     icon: {
       type: String,
       default: ''
     },
     arrow: {
-      type: [String, Boolean],
+      type: String,
       default: 'icon_btn_moredown'
     },
     type: {
       type: String,
-      default: ''// form
+      default: '',
+      validator: value => ['', 'form'].includes(value)
     },
     size: {
       type: String,
@@ -39,7 +46,7 @@ export default {
       validator: value => ['s', 'm', 'l', 'xl'].includes(value)
     },
     content: {
-      type: [String, Array],
+      type: String,
       default: ''
     },
     disabled: {
@@ -57,64 +64,90 @@ export default {
     value: {
       type: Boolean,
       default: false
+    },
+    name: {
+      type: String,
+      default: ''
+    },
+  },
+  watch: {
+    value(val) {
+      this.showMenu = val;
     }
   },
   data() {
     return {
-      showMenu: this.value,
-    };
+      showMenu: this.value
+    }
   },
   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: {
+    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() {
-      this.showMenu = false
-      this.$emit('close', false)
-      this.$emit('input', false)
+      if (this.showMenu) {
+        // this.showMenu = false;
+        // this.$emit('close');
+        // 传了下拉菜单才执行
+        if (this.$scopedSlots.dropdown) {
+          console.log('has dropdown')
+          this.$emit('input', false);
+        }
+      }
     },
     handlerClick() {
       if (this.disabled) return;
-      this.showMenu = !this.showMenu
-      this.$emit('click', this.showMenu)
-      this.$emit('input', this.showMenu)
+      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');
     }
+
   }
 };
 </script>

package/dist/components/selector/style.less

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

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>