vdesign-ui 0.1.24 → 0.2.0

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 ''
     }

package/dist/components/tabs/index.vue

@@ -2,14 +2,15 @@
   <div class="vd-tabs">
     <div class="vd-tabs__wrap" :class="menuClasses" ref="tabsWrap">
       <div :class="[barType,scrollspy]" ref="tabsContainer">
-        <div v-for="(item, index) in navList" :key="index" :class="tabClasses(item)" @click="handleChange(index)">
-          <span class="vd-tabs-text-cell" :class="ellipsisClasses">{{ item.title }}
+        <div v-for="(item, index) in navList" :key="index" :class="[tabClasses(item), lineClasses]" @click="handleChange(index)">
+          <span class="vd-tabs-text-cell" :class="ellipsisClasses">
+            {{ item.title }}
             <vd-icon class="vd-tabs-arrow" v-if="item.arrow" name="icon_btn_moredown"></vd-icon>
           </span>
         </div>
       </div>
       <div class="vd-tabs-menu--right" v-if="menu">
-        <vd-icon :name="menuIcon" class="vd-tabs-menu-btn" @click="emitMenuClick"></vd-icon>
+        <vd-icon :name="menuIconComputed" class="vd-tabs-menu-btn" @click="emitMenuClick"></vd-icon>
       </div>
     </div>
     <div class="vd-tabs__content">
@@ -28,7 +29,11 @@ export default {
       type: String,
       default: "primary",
     },
-    menu: Boolean,
+    // 将 menu 作为一个字段，同时控制显示和图标名称
+    menu: {
+      type: [Boolean, String],
+      default: false,
+    },
     ellipsis: {
       type: Boolean,
       default: true,
@@ -36,31 +41,40 @@ export default {
     actBorder: Boolean,
     backgroundColor: Boolean,
     divider: Boolean,
-    menuIcon: {
-      type: String,
-      default: 'icon_tab_morelist',
-    },
   },
   data() {
     return {
-      currentValue: this.value,
-      navList: [],
+      currentValue: this.value, // 当前选中的标签名
+      navList: [], // 标签导航列表
+      tabs: [], // 已注册的标签
     };
   },
   watch: {
+    // 监听 value 变化，更新 currentValue
     value(val) {
       this.currentValue = val;
     },
   },
   computed: {
+    // 计算菜单按钮的图标，根据 menu 属性的类型决定图标
+    menuIconComputed() {
+      if (typeof this.menu === 'string') {
+        return this.menu;
+      } else {
+        return 'icon_tab_morelist'; // 默认的菜单图标名称
+      }
+    },
+    // 计算滚动监视的类名
     scrollspy() {
       return  `${prefixCls}--complete`
     },
+    // 计算标签文字是否需要省略号的类名
     ellipsisClasses() {
       return {
         [`${prefixCls}-text--ellipsis`]: this.ellipsis,
       };
     },
+    // 计算标签包裹器的类名，根据 menu、backgroundColor 和 divider 属性来确定
     menuClasses() {
       return {
         [`${prefixCls}-menu`]: this.menu,
@@ -68,11 +82,13 @@ export default {
         "vd-hairline--bottom": this.divider,
       };
     },
+    // 计算标签下方线条的类名
     lineClasses() {
       return {
         [`${prefixCls}__line`]: !this.actBorder,
       };
     },
+    // 根据 tabsType 属性计算标签类型的类名
     barType() {
       return {
         [`${prefixCls}-${this.tabsType}-bar`]: this.tabsType,
@@ -80,45 +96,54 @@ export default {
     },
   },
   methods: {
+    // 当菜单按钮被点击时触发事件
     emitMenuClick() {
       this.$emit('menu-click');
     },
+    // 计算每个标签项的类名
     tabClasses(item) {
       return {
         [`${prefixCls}-${this.tabsType}`]: true,
         [`${prefixCls}-${this.tabsType}-active`]: item.name === this.currentValue,
       };
     },
-    getTabs() {
-      return this.$children.filter((item) => item.$options.name === "vd-tab");
+     // 注册新的标签到 tabs 数组中
+    registerTab(tab) {
+      if (!this.tabs.includes(tab)) {
+        this.tabs.push(tab);
+        this.updateNav();
+      }
     },
+     // 从 tabs 数组中注销一个标签
+    unregisterTab(tab) {
+      const index = this.tabs.indexOf(tab);
+      if (index !== -1) {
+        this.tabs.splice(index, 1);
+        this.updateNav();
+      }
+    },
+    // 根据已注册的标签更新导航列表
     updateNav() {
-      this.navList = this.getTabs().map((pane, index) => ({
-        title: pane.title,
-        name: pane.name || index,
-        arrow: pane.arrow,
+      this.navList = this.tabs.map((tab, index) => ({
+        title: tab.title,
+        name: tab.name != null ? tab.name : index,
+        arrow: tab.arrow,
       }));
-      if (!this.currentValue) {
+       // 如果当前没有选中的标签且导航列表不为空，则将第一个标签设为当前值
+      if (!this.currentValue && this.navList.length) {
         this.currentValue = this.navList[0].name;
       }
-      this.updateStatus();
-    },
-    updateStatus() {
-      this.getTabs().forEach((tab) => {
-        tab.show = tab.computedName === this.currentValue;
-      });
     },
     handleChange(index) {
       const nav = this.navList[index];
       const name = nav.name;
       if (this.currentValue !== name) {
         this.currentValue = name;
-        this.$emit('input', name); // 确保向父组件更新
-        this.$emit('change', { index, title: nav.title, name });
-        this.updateStatus(); // 确保更新状态
-        this.adjustTabPosition(index);
+        this.$emit("input", name); // 触发 input 事件，更新父组件中的 v-model 绑定值
+        this.$emit("change", { index, title: nav.title, name }); // 触发 change 事件，传递标签的详细信息
+        this.adjustTabPosition(index); // 调整选中标签的位置
       }
-      this.$emit("click", { index, title: nav.title, name });
+      this.$emit("click", { index, title: nav.title, name }); // 触发 click 事件，传递标签的详细信息
     },
     adjustTabPosition(index) {
       const container = this.$refs.tabsContainer;
@@ -133,13 +158,11 @@ export default {
     },
   },
   mounted() {
-    this.updateNav();
+    // 组件挂载后更新导航列表
+    // this.updateNav();
   },
 };
 </script>
-
-<style lang="less"></style>
-
 <style lang="less">
 @import "./style.less";
 </style>

package/dist/components/tabs/tab/index.vue

@@ -20,35 +20,32 @@ export default {
     },
     data() {
         return {
-            show: false,
         };
     },
     watch: {
-        title() {
-            this.updateNav();
-        },
-        name() {
-            this.updateNav();
-        },
+
     },
     computed: {
+        isActive() {
+            return this.computedName === this.$parent.currentValue;
+            },
         tabClasses() {
             return {
                 'vd-tab': true,
-                'vd-tab-active': this.show,
+                'vd-tab-active': this.isActive,
             };
         },
         computedName() {
-            return this.name ?? this.$parent.getTabs().indexOf(this);
-        },
+            return this.name != null
+                ? this.name
+                : this.$parent.tabs.indexOf(this);
+            },
     },
-    methods: {
-        updateNav() {
-            this.$parent.updateNav();
-        },
+    created() {
+        this.$parent.registerTab(this);
     },
-    mounted() {
-        this.updateNav();
+    beforeDestroy() {
+        this.$parent.unregisterTab(this);
     },
 };
 </script>

package/dist/components/tag/index.vue

@@ -1,6 +1,5 @@
 <template>
-  <!-- {{text}} 改成v-html -->
-  <div class="vd-tag" :class="classes">
+  <div class="vd-tag" :class="classes"  @click="handleClick">
     <slot>{{ text }}</slot>
   </div>
 </template>
@@ -14,10 +13,20 @@ export default {
     type: {
       type: String,
       // white、dark、blue、cyan、green、olive、yellow、orange、red、pink、purple
-      default: ''
+      default: '',
+      validator(value) {
+        return [
+          'white', 'dark', 'blue', 'cyan', 'green',
+          'olive', 'yellow', 'orange', 'red', 'pink', 'purple',
+        ].includes(value);
+      },
     },
     size: {
       type: String,
+      required: true,
+      validator(value) {
+      return ['s', 'l'].includes(value);
+    },
     },
     borders: {
       type: Boolean,
@@ -41,7 +50,12 @@ export default {
       return classes
 
     },
-  }
+  },
+  methods: {
+    handleClick(event) {
+      this.$emit('click', event);
+    },
+  },
 }
 </script>
 

package/dist/components/tag/style.less

@@ -6,13 +6,13 @@
     border-radius: calc(var(--radius-tag-bg) * 1px);
     padding: 0 calc(var(--spacing-tag-padding_y) * 1px);
 
-    &--small{
+    &--s{
         font-size: calc(var(--en-single-f-b-s-fontSize) * 1px);
         font-weight: var(--en-single-f-b-s-fontWeight);
         height: calc(var(--height-tag-s) * 1px);
     }
 
-    &--large{
+    &--l{
         font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
         font-weight: var(--en-single-f-b-r-fontWeight);
         height: calc(var(--height-tag-m) * 1px);

package/dist/components/title/index.vue

@@ -2,9 +2,9 @@
     <div :class="['vd-title', wrapClasses]" @click="handleClick">
         <div class="vd-title--left">
             <div class="vd-title-content">
-                <vd-icon v-if="leftIcon" :name="leftIcon" :svg="leftSvg" :class="leftIconClasses"></vd-icon>
+                <vd-icon v-if="leftIcon" :name="leftIcon"  :class="leftIconClasses"></vd-icon>
                 <span :class="['vd-title-inner__title', innerTitleClasses]">{{ title }}</span>
-                <vd-icon v-if="rightIcon" :name="rightIcon" :svg="rightSvg" :class="rightIconClasses"></vd-icon>
+                <vd-icon v-if="rightIcon" :name="rightIcon"  :class="rightIconClasses"></vd-icon>
             </div>
             <p v-if="subText" :class="['vd-title__subtext', subTextClasses]">{{ subText }}</p>
         </div>
@@ -22,18 +22,20 @@ const prefixCls = 'vd-title';
 export default {
     name: 'vd-title',
     props: {
+        type: {
+            type: String,
+            default: 'primary'
+        },
         title: String,
         leftIcon: String,
         rightIcon: String,
         arrow: Boolean,
         subText: String,
         guideText: String,
-        type: {
-            type: String,
-            default: 'primary'
-        },
-        leftSvg: Boolean,
-        rightSvg: Boolean,
+        sticky: {
+            type: Boolean,
+            default: false
+        }
 
     },
     data() {
@@ -46,6 +48,7 @@ export default {
             return {
                 [`${prefixCls}-${this.type}`]: this.type,
                 [`${prefixCls}-${this.type}-double`]: this.subText,
+                [`${prefixCls}--sticky`]: this.sticky
             }
 
         },

package/dist/components/title/style.less

@@ -14,6 +14,12 @@
         //     display: flex;
         //     flex-direction: column;
         // }
+
+        &--sticky {
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+        }
     
         &--right{
             display: flex;