vdesign-ui 0.1.24 → 0.2.0-beta

package/dist/components/radio/index.vue

@@ -1,155 +1,184 @@
 <template>
+    <!-- 常规单选框 -->
     <label :class="wrapClasses" v-if="!radioButton">
-        <span :class="radioClasses">
-            <span :class="innerClasses"></span>
-            <input type="radio" :class="inputClasses" :disabled="disabled" :checked="currentValue" @change="change">
-        </span>
-        <div class="vd-radio__label" v-if="$slots.default">
-            <div class="vd-radio__text">
-                <slot></slot>
-            </div>
-            <!-- <p class="vd-radio__description" v-if="extra">{{ extra }}</p> -->
+      <span :class="radioClasses">
+        <span :class="innerClasses"></span>
+        <input
+          type="radio"
+          :class="inputClasses"
+          :disabled="isDisabled"
+          :checked="currentValue"
+          @change="handleChange"
+        >
+      </span>
+      <!-- 标签内容 -->
+      <div class="vd-radio__label" v-if="$slots.default">
+        <div class="vd-radio__text">
+          <slot></slot>
         </div>
+      </div>
     </label>
-
-
-    <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">
-            <slot></slot>
-        </span>
+  
+    <!-- 按钮样式的单选框 -->
+    <label
+      class="vd-radio vd-radio-button"
+      :class="radioButtonClasses"
+      v-else
+    >
+      <input
+        type="radio"
+        :class="inputClasses"
+        :disabled="isDisabled"
+        :checked="currentValue"
+        @change="handleChange"
+      >
+      <span class="vd-radio-button-text">
+        <slot></slot>
+      </span>
     </label>
-</template>
-<script>
-import { findComponentUpward } from './assist';
-const prefixCls = 'vd-radio';
-
-export default {
+  </template>
+  <script>
+  import { findComponentUpward } from './assist';
+  
+  const prefixCls = 'vd-radio';
+  
+  export default {
     name: 'vd-radio',
     props: {
-        radioButton: {
-            type: Boolean,
-            default: false
-        },
-        disabled: {
-            type: Boolean,
-            default: false
-        },
-        value: {
-            type: [String, Number, Boolean],
-            default: false
-        },
-        trueValue: {
-            type: [String, Number, Boolean],
-            default: true
-        },
-        falseValue: {
-            type: [String, Number, Boolean],
-            default: false
-        },
-        name: {
-            type: [String, Number, Boolean]
-        },
-        type: {
-            type: String,
-            default: ''
-        },
+     // 组件的值，用于 v-model 绑定
+      value: {
+        type: [String, Number, Boolean],
+        default: false,
+      },
+      // 是否为按钮样式
+      radioButton: Boolean,
+      // 是否禁用
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      // 选中时的值
+      trueValue: {
+        type: [String, Number, Boolean],
+        default: true,
+      },
+      // 未选中时的值
+      falseValue: {
+        type: [String, Number, Boolean],
+        default: false,
+      },
+      // 单选框的标识名称，在组内使用
+      name: {
+        type: [String, Number, Boolean],
+      },
+      // 类型，用于样式
+      type: String,
     },
     data() {
-        return {
-            currentValue: this.value,
-            group: false,
-            parent: findComponentUpward(this, 'vd-radio-group'),
-            // parent: this.$parent,
-            focusWrapper: false,
-            focusInner: false
-        };
+      return {
+        // 当前是否选中
+        currentValue: this.value === this.trueValue,
+        // 是否属于单选框组
+        isGroup: false,
+        // 父级单选框组的引用
+        parentGroup: null,
+      };
     },
     computed: {
-        wrapClasses() {
-            return [
-                `${prefixCls}`,
-                {
-                    [`${prefixCls}--checked`]: this.currentValue,
-                    [`${prefixCls}--disabled`]: this.disabled,
-                }
-            ];
-        },
-        radioClasses() {
-            return [
-                `${prefixCls}__input`,
-            ];
-        },
-        innerClasses() {
-            return [
-                `${prefixCls}__icon`,
-            ];
-        },
-        inputClasses() {
-            return `${prefixCls}__original`;
-        },
-        radioButtonClasses() {
-            return [
-                {
-                    [`${prefixCls}-button--checked`]: this.currentValue,
-                    [`${prefixCls}-button--${this.type}`]: this.type,
-                    [`${prefixCls}-button--disabled`]: this.disabled,
-                }
-            ]
-
-        }
+      // 计算禁用状态，优先级：自身 > 组
+      isDisabled() {
+        return this.disabled || (this.isGroup && this.parentGroup.disabled);
+      },
+      // 包裹类名
+      wrapClasses() {
+        return [
+          `${prefixCls}`,
+          {
+            [`${prefixCls}--checked`]: this.currentValue,
+            [`${prefixCls}--disabled`]: this.isDisabled,
+          },
+        ];
+      },
+      // 单选框的类名
+      radioClasses() {
+        return [`${prefixCls}__input`];
+      },
+      // 图标的类名
+      innerClasses() {
+        return [`${prefixCls}__icon`];
+      },
+      // 输入框的类名
+      inputClasses() {
+        return `${prefixCls}__original`;
+      },
+      // 按钮样式的类名
+      radioButtonClasses() {
+        return [
+          {
+            [`${prefixCls}-button--checked`]: this.currentValue,
+            [`${prefixCls}-button--${this.type}`]: this.type,
+            [`${prefixCls}-button--disabled`]: this.isDisabled,
+          },
+        ];
+      },
     },
     mounted() {
-        if (this.parent) {
-            this.group = true;
+      // 查找父级 vd-radio-group 组件
+      this.parentGroup = findComponentUpward(this, 'vd-radio-group');
+      this.isGroup = !!this.parentGroup;
+  
+      if (this.isGroup) {
+        // 如果在组内，注册到组中
+        this.parentGroup.updateValue();
+      } else {
+        // 如果不在组内，更新自身的选中状态
+        this.updateValue();
+      }
+    },
+    methods: {
+      // 处理 change 事件
+      handleChange(event) {
+        if (this.isDisabled) {
+          return;
         }
-
-        if (this.group) {
-            this.parent.updateValue();
+  
+        const checked = event.target.checked;
+        this.currentValue = checked;
+        const value = checked ? this.trueValue : this.falseValue;
+        this.$emit('input', value);
+  
+        if (this.isGroup) {
+          // 如果在组内，通知组更新
+          this.parentGroup.change(this.name);
         } else {
-            this.updateValue();
+          // 否则，触发自身的 change 事件
+          this.$emit('change', value);
         }
-    },
-    methods: {
-        change(event) {
-            if (this.disabled) {
-                return false;
-            }
-
-            const checked = event.target.checked;
-            this.currentValue = checked;
-
-            const value = checked ? this.trueValue : this.falseValue;
-            this.$emit('input', value);
-
-            if (this.group) {
-                if (this.name !== undefined) {
-                    this.parent.change({
-                        value: this.name,
-                        checked: this.value
-                    });
-                }
-            } else {
-                this.$emit('change', value);
-            }
-        },
-        updateValue() {
-            this.currentValue = this.value === this.trueValue;
-        },
-
+      },
+      // 更新 currentValue
+      updateValue() {
+        if (this.isGroup) {
+          // 组内，通过比较组的值和自身的 name 来确定是否选中
+          this.currentValue = this.parentGroup.value === this.name;
+        } else {
+          // 组外，通过比较 value 和 trueValue
+          this.currentValue = this.value === this.trueValue;
+        }
+      },
     },
     watch: {
-        value(val) {
-            if (val === this.trueValue || val === this.falseValue) {
-                this.updateValue();
-            } else {
-                throw 'Value should be trueValue or falseValue.';
-            }
-        }
-    }
-};
-</script>
-
+      // 监听 value 的变化
+      value() {
+        this.updateValue();
+      },
+      // 如果在组内，监听组的 value 变化
+      'parentGroup.value'() {
+        this.updateValue();
+      },
+    },
+  };
+  </script>
+  
 <style lang="less">
-@import './style.less';
+@import "./style.less";
 </style>

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

@@ -9,62 +9,50 @@ import { findComponentsDownward } from '../assist';
 const prefixCls = 'vd-radio-group';
 
 export default {
-    name: 'vd-radio-group',
-    props: {
-        value: {
-            type: [String, Number],
-            default: ''
-        },
-        type: {
-            type: String,
-            default: ''
-        }
+  name: 'vd-radio-group',
+  props: {
+    // 绑定的值，用于 v-model
+    value: {
+      type: [String, Number, Boolean],
+      default: '',
     },
-    data() {
-        return {
-            currentValue: this.value,
-            childrens: []
-        };
+    // 类型，用于样式
+    type: String,
+    // 是否禁用组内所有单选框
+    disabled: Boolean
+  },
+  computed: {
+    // 组容器的类名
+    classes() {
+      return [
+        `${prefixCls}`,
+        {
+          [`${prefixCls}__${this.type}`]: this.type,
+        },
+      ];
     },
-    computed: {
-        classes() {
-            return [
-                `${prefixCls}`,
-                {
-                    [`${prefixCls}__${this.type}`]: this.type,
-                }
-            ];
-        }
+  },
+  methods: {
+    // 更新子单选框的状态
+    updateValue() {
+      const children = findComponentsDownward(this, 'vd-radio');
+      if (children.length) {
+        children.forEach((child) => {
+          child.updateValue();
+        });
+      }
     },
-    mounted() {
-        this.updateValue();
+    // 处理子单选框的变化
+    change(name) {
+      this.$emit('input', name);
+      this.$emit('change', name);
     },
-    methods: {
-        updateValue() {
-            this.childrens = findComponentsDownward(this, 'vd-radio');
-            if (this.childrens) {
-                this.childrens.forEach(child => {
-                    child.currentValue = this.currentValue === child.name;
-                    child.group = true;
-                });
-            }
-        },
-        change(data) {
-            this.currentValue = data.value;
-            this.updateValue();
-            this.$emit('input', data.value);
-            this.$emit('change', data.value);
-        }
+  },
+  watch: {
+    // 监听 value 的变化，更新子组件
+    value() {
+      this.updateValue();
     },
-    watch: {
-        value() {
-            if (this.currentValue !== this.value) {
-                this.currentValue = this.value;
-                this.$nextTick(() => {
-                    this.updateValue();
-                });
-            }
-        }
-    }
+  },
 };
 </script>

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,7 +1,6 @@
 <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">
@@ -12,73 +11,73 @@
       </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',
+  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,
       default: 'm',
       validator: value => ['s', 'm', 'l', 'xl'].includes(value)
     },
-    // 组件内容
     content: {
-      type: [String, Array],
+      type: String,
       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: false
-    }
-  },
-  watch: {
-    // 监听 value 属性变化，同步更新 showMenu
-    value(newVal) {
-      this.showMenu = newVal;
+      showMenu: this.value
     }
   },
   computed: {
@@ -117,19 +116,38 @@ 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() {
-      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;
+      console.log('showMenu:1:', this.showMenu);
+      // 更新showMenu的值
       this.showMenu = !this.showMenu;
-      // this.$emit('input', this.showMenu);
-      this.$emit('click', 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

@@ -58,6 +58,7 @@
     }
 
     &__icon {
+      display: flex;
       font-size: calc(var(--icon-selector-xl) * 1px);
       margin-inline-end: calc(var(--spacing-selector-xl-margin_y) * 1px);
 
@@ -108,6 +109,7 @@
     }
 
     &__icon {
+      display: flex;
       font-size: calc(var(--icon-selector-l) * 1px);
       margin-inline-end: calc(var(--spacing-selector-l-margin_y) * 1px);
 
@@ -157,6 +159,7 @@
     }
 
     &__icon {
+      display: flex;
       font-size: calc(var(--icon-selector-m) * 1px);
       margin-inline-end: calc(var(--spacing-selector-m-margin_y) * 1px);
 
@@ -205,6 +208,7 @@
     }
 
     &__icon {
+      display: flex;
       font-size: calc(var(--icon-selector-s) * 1px);
       margin-inline-end: calc(var(--spacing-selector-s-margin_y) * 1px);
 
@@ -298,6 +302,12 @@
     }
   }
 
+  &--slot {
+    position: absolute;
+    top: 100%;
+    display: none;
+  }
+
   &--active {
     .@{selector-prefix-cls}-xl {
 
@@ -372,6 +382,10 @@
         transition: transform .3s;
       }
     }
+
+    .@{selector-prefix-cls}--slot {
+      display: block;
+    }
   }
 
   &--disabled {

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

@@ -70,9 +70,9 @@ export default {
     },
     iconName() {
       if (this.state === 'afoot') {
-        return this.currentTheme === 'dark' ? 'icon_show_steping1' : 'icon_show_steping'
+        return this.currentTheme === 'dark' ? 'icon_show_steping1_svg' : 'icon_show_steping_svg'
       } else if (this.state === 'warning') {
-        return this.currentTheme === 'dark' ? 'icon_show_stepwrong1' : 'icon_show_stepwrong'
+        return this.currentTheme === 'dark' ? 'icon_show_stepwrong1_svg' : 'icon_show_stepwrong_svg'
       }
       return ''
     }