vdesign-ui 0.1.15 → 0.1.17

package/dist/components/actions-cell/actions/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="wrapClasses">
-    <span class="vd-actions__text" v-if="text">{{ text }}</span>
+    <span class="vd-actions__text" :class="textClasses" v-if="text">{{ text }}</span>
     <vd-icon v-if="icon && type === 'list'" class="vd-actions__icon" :name="icon" :svg="iconSvg"></vd-icon>
     <span class="vd-actions__content" :class="contentBg" v-if="icon && type === 'card'">
       <vd-icon class="vd-actions__icon" :name="icon" :svg="iconSvg"></vd-icon>
@@ -15,30 +15,24 @@ export default {
   props: {
     type: {
       type: String,
-      default: ""
     },
     colors: {
       type: String,
-      default: ""
-
     },
     backgrounds: {
       type: String,
-      default: ""
-
     },
     text: {
       type: String,
-      default: ""
     },
     icon: {
       type: String,
-      default: '',
     },
     iconSvg: {
       type: Boolean,
       default: false,
     },
+    disbaled:Boolean,
   },
   computed: {
     wrapClasses() {
@@ -46,6 +40,7 @@ export default {
         `${prefixCls}`,
         {
           [`${prefixCls}__${this.type}`]: this.type,
+          [`${prefixCls}__${this.type}--${this.disbaled}`]: this.disbaled,
           [`${prefixCls}__${this.colors}`]: this.colors,
         }
       ]
@@ -56,9 +51,15 @@ export default {
           [`${prefixCls}__content--${this.backgrounds}`]: this.backgrounds
         }
       ]
-    }
+    },
+    textClasses(){
+      return [
+        {
+         [`${prefixCls}__text--${this.disbaled}`]: this.disbaled
+      }
+    ]
   },
-
+}
 }
 </script>
 

package/dist/components/actions-cell/actions/style.less

@@ -26,19 +26,33 @@
 
             &--green{
                 background-color: var(--color-actions-bg-green);
+                &--disabled{
+                    background-color: var(--color-actions-bg-green-disable);
+                }
             }
         
             &--warning{
                 background-color: var(--color-actions-bg-warning);
+                &--disabled{
+                    background-color: var(--color-actions-bg-warning-disable);
+                }
             }
         
             &--blue{
                 background-color: var(--color-actions-bg-blue);
+                &--disabled{
+                    background-color: var(--color-actions-bg-blue-disable);
+                }
             }
         
             &--gray{
                 background-color: var(--color-actions-bg-gray);
+                &--disabled{
+                    background-color: var(--color-actions-bg-gray-disable);
+                }
             }
+
+            
         }
 
         .@{actions-prefix-cls}__icon{
@@ -50,11 +64,15 @@
         color: var(--color-actions-text);
         font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
         font-weight: var(--en-single-f-d-s-fontWeight);
+        &--disabled{
+            color: var(--color-actions-text);
+
+        }
     }
 
     &__icon{
         font-size: calc(var(--icon-actions-size) * 1px);
-        color: var(--color-actions-text);
+        color: var(--color-actions-text-disable);
     }
 
     &__green{
@@ -72,4 +90,5 @@
     &__gray{
         background-color: var(--color-actions-bg-gray);
     }
+
 }

package/dist/components/activityviews/style.less

@@ -77,7 +77,9 @@
     }
 
     &__body{
-        background-color: #fff;
+        // background-color: #fff;
+        background-color: var(--color-activityviews-bg);
+
         height: 80%;
         overflow-y: auto;
 
@@ -110,6 +112,10 @@
         flex: 1;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
+
+        .vd-btn{
+            border-radius: 0;
+        }
     }
 
     &__gap{

package/dist/components/footer/style.less

@@ -17,6 +17,6 @@
     &__text{
         font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
         font-weight: var(--en-single-f-b-r-fontWeight);
-        color: var(--text-color-h3);
+        color: var(--text-color-h2);
     }
 }

package/dist/components/footnav/footnav-item/style.less

@@ -13,6 +13,7 @@
   .vd-iconfont {
     margin-bottom: 2px;
     font-size: calc(var(--icon-footnav-size) * 1px);
+    color: var(--text-color-h2);
   }
 
   &:active {

package/dist/components/list/style.less

@@ -39,7 +39,7 @@
 
         .vd-iconfont {
             font-size: calc(var(--icon-small) * 1px);
-            color: rgba(0, 0, 0, 0.3);
+            color: var(--text-color-h2);
         }
     }
 
@@ -59,7 +59,7 @@
 
         &__icon--right {
             font-size: 16px;
-            color: rgba(0, 0, 0, 0.5);
+            color: var(--text-color-h2);
         }
 
         &__title {
@@ -92,7 +92,7 @@
 
         &__icon--right {
             font-size: 16px;
-            color: rgba(0, 0, 0, 0.5);
+            color: var(--text-color-h2);
         }
 
         &__title {
@@ -126,7 +126,7 @@
         &__icon--right {
             // margin-inline-start: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
             font-size: 16px;
-            color: rgba(0, 0, 0, 0.5);
+            color: var(--text-color-h2);
         }
 
         &__title {
@@ -158,7 +158,7 @@
 
         &__icon--right {
             font-size: 16px;
-            color: rgba(0, 0, 0, 0.5);
+            color: var(--text-color-h2);
         }
 
         &__title {
@@ -197,6 +197,7 @@
         &__icon--leftcus {
             margin-inline-end: calc(var(--spacing-list-common_icon-margin_right) * 1px);
             font-size: calc(var(--icon-large) * 1px);
+            color: var(--text-color-h2);
         }
 
         // &__icon--left{
@@ -274,13 +275,14 @@
         &__icon--leftcus {
             margin-inline-end: calc(var(--spacing-list-check_icon-margin_right) * 1px);
             font-size: calc(var(--icon-large) * 1px);
+            color: var(--text-color-h2);
         }
     }
 
     &__icon--extra {
         font-size: 16px;
         margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
-        color: rgba(0, 0, 0, 0.5);
+        color: var(--text-color-h2);
     }
 
     &__switch {

package/dist/components/tabs/index.vue

@@ -1,11 +1,10 @@
 <template>
   <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), 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>
+      <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 }}
+            <vd-icon class="vd-tabs-arrow" v-if="item.arrow" name="icon_btn_moredown"></vd-icon>
           </span>
         </div>
       </div>
@@ -39,12 +38,11 @@ export default {
     divider: Boolean,
     menuIcon: {
       type: String,
-      default: 'icon_tab_morelist', // 默认图标，如果没有传入自定义图标则使用此图标
+      default: 'icon_tab_morelist',
     },
   },
   data() {
     return {
-      // defType: ['primary', 'card', 'secondary','capsule','selector-l','selector-m', 'filter', 'click-filter'],
       currentValue: this.value,
       navList: [],
     };
@@ -53,44 +51,32 @@ export default {
     value(val) {
       this.currentValue = val;
     },
-    currentValue() {
-      this.updateStatus();
-    },
   },
   computed: {
+    scrollspy() {
+      return  `${prefixCls}--complete`
+    },
     ellipsisClasses() {
-      return [
-        {
-          [`${prefixCls}-text--ellipsis`]: this.ellipsis,
-        },
-      ];
+      return {
+        [`${prefixCls}-text--ellipsis`]: this.ellipsis,
+      };
     },
     menuClasses() {
-      return [
-        {
-          [`${prefixCls}-menu`]: this.menu,
-          [`${prefixCls}__wrap--bg`]: this.backgroundColor,
-          // 二级tab才有线
-          "vd-hairline--bottom": this.divider,
-        },
-      ];
-    },
-    scrollspy() {
-      return  `${prefixCls}--complete`
+      return {
+        [`${prefixCls}-menu`]: this.menu,
+        [`${prefixCls}__wrap--bg`]: this.backgroundColor,
+        "vd-hairline--bottom": this.divider,
+      };
     },
     lineClasses() {
-      return [
-        {
-          [`${prefixCls}__line`]: !this.actBorder,
-        },
-      ];
+      return {
+        [`${prefixCls}__line`]: !this.actBorder,
+      };
     },
     barType() {
-      return [
-        {
-          [`${prefixCls}-${this.tabsType}-bar`]: this.tabsType,
-        },
-      ];
+      return {
+        [`${prefixCls}-${this.tabsType}-bar`]: this.tabsType,
+      };
     },
   },
   methods: {
@@ -100,19 +86,17 @@ export default {
     tabClasses(item) {
       return {
         [`${prefixCls}-${this.tabsType}`]: true,
-        [`${prefixCls}-${this.tabsType}-active`]: item.name === this.currentValue
+        [`${prefixCls}-${this.tabsType}-active`]: item.name === this.currentValue,
       };
     },
     getTabs() {
-      const tabs = this.$children.filter((item) => item.$options.name === "vd-tab");
-      return tabs;
+      return this.$children.filter((item) => item.$options.name === "vd-tab");
     },
-
     updateNav() {
       this.navList = this.getTabs().map((pane, index) => ({
         title: pane.title,
         name: pane.name || index,
-        arrow: pane.arrow
+        arrow: pane.arrow,
       }));
       if (!this.currentValue) {
         this.currentValue = this.navList[0].name;
@@ -121,30 +105,20 @@ export default {
     },
     updateStatus() {
       this.getTabs().forEach((tab) => {
-        tab.show = tab.computedName  === this.currentValue;
+        tab.show = tab.computedName === this.currentValue;
       });
     },
     handleChange(index) {
       const nav = this.navList[index];
       const name = nav.name;
-      const title = nav.title;
-
       if (this.currentValue !== name) {
         this.currentValue = name;
-        const eventData = {
-          index: index,
-          title: title,
-          name: name
-        };
-        this.$emit('change', eventData);
+        this.$emit('input', name); // 确保向父组件更新
+        this.$emit('change', { index, title: nav.title, name });
+        this.updateStatus(); // 确保更新状态
         this.adjustTabPosition(index);
       }
-      const eventData = {
-        index: index,
-        title: title,
-        name: name
-      };
-      this.$emit("click", eventData);
+      this.$emit("click", { index, title: nav.title, name });
     },
     adjustTabPosition(index) {
       const container = this.$refs.tabsContainer;
@@ -159,11 +133,13 @@ export default {
     },
   },
   mounted() {
-    // 在组件挂载后更新标签
     this.updateNav();
   },
 };
 </script>
+
+<style lang="less"></style>
+
 <style lang="less">
 @import "./style.less";
 </style>

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

@@ -1,63 +1,56 @@
 <template>
-    <div :class="getCls">
-      <slot />
+    <div :class="tabClasses">
+        <slot />
     </div>
-  </template>
-  
-  <script>
-    export default {
-        name: 'vd-tab',
-        props: {
-            name:[String, Number],
-            title: {
-                type: String,
-            },
-            arrow: {
-                type: Boolean,
-                default: false
-            }
+</template>
+
+<script>
+export default {
+    name: 'vd-tab',
+    props: {
+        name: [String, Number],
+        title: {
+            type: String,
+            required: true,
         },
-        data () {
-            return {
-                show: false,
-                localName: this.name // 初始化时使用 prop 的值
-            }
+        arrow: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            show: false,
+        };
+    },
+    watch: {
+        title() {
+            this.updateNav();
         },
-        watch: {
-            title () {
-                this.updateNav()
-            },
-            // name(newName) {
-            //     // 响应 prop 的改变
-            //     this.localName = newName;
-            // }
+        name() {
+            this.updateNav();
+        },
+    },
+    computed: {
+        tabClasses() {
+            return {
+                'vd-tab': true,
+                'vd-tab-active': this.show,
+            };
         },
-        computed: {
-            getCls() {
-                return [
-                    'vd-tab',
-                    {'vd-tab-active': this.show}
-                ];
-            },
-            computedName() {
-                return this.name ?? this.$parent.getTabs().indexOf(this);
-            }
+        computedName() {
+            return this.name ?? this.$parent.getTabs().indexOf(this);
         },
-        methods: {
-            updateNav () {
-                this.$parent.updateNav()
-            },
+    },
+    methods: {
+        updateNav() {
+            this.$parent.updateNav();
         },
-        mounted () {
-            // if (this.name === undefined) {
-            //     let parent = this.$parent;
-            //     let index = parent.getTabs().indexOf(this);
-            //     this.localName  = index; // 将索引设置为字符串作为 localName 
-            // }
-            this.updateNav()
-        }
-    }
-  </script>
-  
-  <style lang="less"></style>
-  
+    },
+    mounted() {
+        this.updateNav();
+    },
+};
+</script>
+
+<style lang="less"></style>

package/dist/components/tag/style.less

@@ -21,16 +21,16 @@
 
 
     &--white{
-        color: var(--color-tag-white-text);
-        background-color: var(--color-tag-white-bg);
+        color: var(--color-tag-default-text);
+        background-color: var(--color-tag-default-bg);
 
         &__border{
             background-color:transparent;
             font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
             font-weight: var(--en-single-f-b-r-fontWeight);
-            color: var(--color-tag-white_border-text);
+            color: var(--color-tag-default_border-text);
             &::after{
-                border-color: var(--color-tag-white-border);
+                border-color: var(--color-tag-default-border);
                 border-radius: calc(var(--radius-tag-bg) * 2px);
             }
         }