vdesign-ui 0.1.16 → 0.1.18

package/dist/components/input/style.less

@@ -105,7 +105,8 @@
         padding-inline-end: calc(var(--spacing-input-textarea-padding_y) * 1px);
         padding-block-start: calc(var(--spacing-input-textarea-padding_x) * 1px);
         padding-block-end: calc(var(--spacing-input-textarea-padding_x) * 1px);
-
+        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+        
         .@{input-prefix-cls}__word-limit {
             text-align: end;
             color: var(--color-input-text-default);
@@ -161,7 +162,7 @@
 
             .vd-iconfont {
                 vertical-align: middle;
-                color: rgba(0, 0, 0, 0.3);
+                color: var(--text-color-h3);
                 font-size: calc(var(--icon-input-clean) * 1px);
             }
         }
@@ -183,13 +184,13 @@
                 margin-inline-start: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
 
                 .vd-iconfont {
-                    color: rgba(0, 0, 0, 0.5);
+                    color: var(--text-color-h2);
                     font-size: calc(var(--icon-input-clean) * 1px);
                 }
             }
 
             &--password {
-                color: rgba(0, 0, 0, 0.5);
+                color: var(--text-color-h2);
                 margin-inline-start: calc(var(--spacing-input-form_suffix_icon-margin_y) * 1px);
                 margin-inline-end: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
                 font-size: calc(var(--icon-input-form_suffix) * 1px);
@@ -282,7 +283,7 @@
 
         .vd-iconfont {
             vertical-align: middle;
-            color: rgba(0, 0, 0, 0.3);
+            color: var(--text-color-h3);
             font-size: calc(var(--icon-input-search) * 1px);
         }
     }
@@ -295,7 +296,7 @@
 
         .vd-iconfont {
             vertical-align: middle;
-            color: rgba(0, 0, 0, 0.3);
+            color: var(--text-color-h3);
             font-size: calc(var(--icon-input-clean) * 1px);
         }
     }
@@ -347,7 +348,7 @@
         background-color: transparent;
 
         .vd-iconfont {
-            color: rgba(0, 0, 0, 0.5);
+            color: var(--text-color-h2);
             font-size: calc(var(--icon-input-trade_number_input_icon) * 1px);
         }
     }
@@ -359,7 +360,7 @@
         background-color: transparent;
 
         .vd-iconfont {
-            color: rgba(0, 0, 0, 0.5);
+            color: var(--text-color-h2);
             font-size: calc(var(--icon-input-trade_number_input_icon) * 1px);
         }
     }

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/mixins/themeMixin.js

@@ -0,0 +1,29 @@
+export const themeMixin = {
+    data() {
+        return {
+            theme: document.documentElement.getAttribute('theme') || 'light'  // 初始化主题
+        };
+    },
+    mounted() {
+        this.observeThemeChanges();  // 组件挂载时开始监视主题变化
+    },
+    methods: {
+        observeThemeChanges() {
+            // 创建一个 MutationObserver 实例
+            const observer = new MutationObserver((mutations) => {
+                mutations.forEach((mutation) => {
+                    // 检查变化的属性是否为 'theme'
+                    if (mutation.attributeName === 'theme') {
+                        // 更新组件的主题
+                        this.theme = document.documentElement.getAttribute('theme') || 'light';
+                    }
+                });
+            });
+
+            // 配置观察器，监视 html 元素的属性变化
+            observer.observe(document.documentElement, {
+                attributes: true  // 仅监视属性变化
+            });
+        }
+    }
+};

package/dist/components/noticebar/index.vue

@@ -24,8 +24,9 @@
             </template>
             <template v-else>{{ title }}</template>
           </div>
-          <div v-if="tag" :class="[tag && `${prefixCls}-${mode}__message--tag`, state ? 'vd-noticebar-' + state : '']">{{
-            tag
+          <div v-if="tag" :class="[tag && `${prefixCls}-${mode}__message--tag`, state ? 'vd-noticebar-' + state : '']">
+            {{
+              tag
             }}</div>
         </div>
         <slot></slot>
@@ -78,7 +79,7 @@ export default {
     },
     type: {
       type: String,
-      default: '', // info/warning
+      default: 'info', // info/warning/tips
     },
     scrollable: {
       type: Boolean,

package/dist/components/noticebar/style.less

@@ -52,6 +52,25 @@
     }
   }
 
+  &.@{prefix}-tips {
+    background-color: var(--color-noticebar-snackbar_tips-bg);
+    color: var(--color-noticebar-snackbar_tips-text);
+
+    .vd-noticebar-snackbar__content {
+      &::after {
+        background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
+      }
+
+      &::before {
+        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
+      }
+    }
+
+    .vd-iconfont {
+      color: var(--color-noticebar-snackbar_tips-icon);
+    }
+  }
+
   &__left,
   &__right {
     display: flex;
@@ -140,6 +159,10 @@
   &.@{prefix}-warning {
     background-color: var(--color-noticebar-snackbar_warning-bg);
     color: var(--color-noticebar-snackbar_warning-text);
+
+    .vd-iconfont {
+      color: var(--color-noticebar-toast_warning-icon);
+    }
   }
 
   &__left,

package/dist/components/popover/style.less

@@ -80,9 +80,6 @@
 // ===
 
 .@{prefix} {
-  // 因为透明度会重叠
-  --color-popover-primary-bg: #242424;
-  --color-popover-secondary-bg: #777;
 
   // 覆盖部分默认的样式
   .vd-popper {
@@ -141,7 +138,7 @@
     background-color: var(--color-popover-primary-bg);
     width: 12px;
     height: 12px;
-    border-radius: 4px;
+    // border-radius: 4px;
     transform: rotate(45deg);
     z-index: -1;
   }

package/dist/components/result/index.vue

@@ -14,8 +14,13 @@
 </template>
 
 <script>
+
+import { themeMixin } from '@p/components/mixins/themeMixin';
+
+
 export default {
     name: 'vd-result',
+    mixins: [themeMixin],  // 引入混入
     props: {
         imgs: String,
         text: String,
@@ -28,17 +33,31 @@ export default {
     data() {
         return {
             defaultImgs: {
-                completed: require('./completed.png'),
-                waiting: require('./wait.png'),
-                error: require('./error.png'),
+                completed: {
+                    light: require('./completed.png'),
+                    dark: require('./completed-dark.png')
+                },
+                waiting: {
+                    light: require('./wait.png'),
+                    dark: require('./wait-dark.png')
+                },
+                error: {
+                    light: require('./error.png'),
+                    dark: require('./error-dark.png')
+                }
             }
         }
     },
     computed:{
         currentImg() {
-            return this.imgs || this.defaultImgs[this.state];
+            if (this.imgs) return this.imgs;
+            return this.defaultImgs[this.state][this.theme];
         },
-    }
+    },
+    methods: {
+    },
+    mounted() {
+    },
 }
 </script>
 

package/dist/components/slider/style.less

@@ -91,5 +91,6 @@
         transform: translateX(-50%);
         font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
         font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--color-slider-mark-text-focus);
     }
 }

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

@@ -1,15 +1,14 @@
 <template>
   <!-- 标签选项 -->
-  <div class="vd-step-item"
-    :class="['vd-step-' + parentProps.direction, state ? 'vd-step-' + state : '', isActive ? 'vd-step-active' : '']"
-    :style="`color:${isActive ? parentProps.activeColor : parentProps.color};`">
+  <div class="vd-step-item" :class="[
+    'vd-step-' + parentProps.direction,
+    state ? 'vd-step-' + state : '',
+    isActive ? 'vd-step-active' : ''
+  ]" :style="`color:${isActive ? parentProps.activeColor : parentProps.color};`">
     <!-- 点 -->
     <div v-if="parentProps.direction !== 'basic'" class="vd-step-u-dot"
       :style="`color:${isActive ? parentProps.activeColor : parentProps.color};`">
-      <!-- <vd-icon :name="`${parentProps[isActive ? 'activeIcon' : 'icon']}`"></vd-icon> -->
-      <!-- {{ state }} -->
-      <vd-icon v-if="state" svg
-        :name="state === 'afoot' ? 'icon_show_steping' : state === 'warning' ? 'icon_show_stepwrong' : ''"></vd-icon>
+      <vd-icon v-if="state" :svg="true" :name="iconName"></vd-icon>
     </div>
     <!-- 线 -->
     <div class="vd-step-u-line" :style="`background:${isActive ? parentProps.activeColor : parentProps.color};`"></div>
@@ -28,6 +27,7 @@
     </div>
   </div>
 </template>
+
 <script>
 export default {
   name: 'vd-step-item',
@@ -45,10 +45,6 @@ export default {
       type: String,
       default: '',
     },
-    icon: {
-      type: String,
-      default: '',
-    },
     state: {
       type: String,
       default: '',
@@ -56,7 +52,8 @@ export default {
   },
   data() {
     return {
-      isActive: false // 激活状态
+      isActive: false, // 激活状态
+      currentTheme: 'light', // 默认值
     }
   },
   computed: {
@@ -70,8 +67,21 @@ export default {
     },
     customDescription() {
       return !!this.$slots.description
+    },
+    iconName() {
+      if (this.state === 'afoot') {
+        return this.currentTheme === 'dark' ? 'icon_show_steping1' : 'icon_show_steping'
+      } else if (this.state === 'warning') {
+        return this.currentTheme === 'dark' ? 'icon_show_stepwrong1' : 'icon_show_stepwrong'
+      }
+      return ''
     }
   },
+  mounted() {
+    const theme = document.querySelector('html').getAttribute('theme')
+    this.currentTheme = theme ? theme : this.currentTheme
+    this.observeThemeChange()
+  },
   watch: {
     // 监听父组件参数
     parentProps: {
@@ -81,9 +91,27 @@ export default {
       deep: true,
       immediate: true
     }
+  },
+  methods: {
+    observeThemeChange() {
+      const observer = new MutationObserver(mutations => {
+        mutations.forEach(mutation => {
+          if (mutation.type === 'attributes' && mutation.attributeName === 'theme') {
+            const theme = document.querySelector('html').getAttribute('theme')
+            this.currentTheme = theme ? theme : this.currentTheme
+          }
+        })
+      })
+      observer.observe(document.querySelector('html'), { attributes: true })
+
+      this.$once('hook:beforeDestroy', () => {
+        observer.disconnect()
+      })
+    }
   }
 }
 </script>
+
 <style lang="less">
 @import './style.less';
 </style>

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

@@ -34,8 +34,8 @@
         height: calc(var(--icon-steps-size) * 0.5px);
         border-radius: 999em;
         overflow: hidden;
-        background-color: #fff;
-        border: 2px solid #ccc;
+        background-color: var(--bg-color-1);
+        border: 2px solid var(--text-color-h3);
         box-sizing: border-box;
       }
     }
@@ -97,7 +97,7 @@
 
       .vd-step-u-dot {
         &::before {
-          border: 2px solid #1BC47D;
+          border: 2px solid var(--primary-color);
         }
       }
 
@@ -188,8 +188,8 @@
         height: calc(var(--icon-steps-size) * 0.5px);
         border-radius: 999em;
         overflow: hidden;
-        background-color: #fff;
-        border: 2px solid #ccc;
+        background-color: var(--bg-color-1);
+        border: 2px solid var(--text-color-h3);
         box-sizing: border-box;
       }
     }
@@ -251,7 +251,7 @@
 
       .vd-step-u-dot {
         &::before {
-          border: 2px solid #1BC47D;
+          border: 2px solid var(--primary-color);
         }
       }
 

package/dist/components/switch/style.less

@@ -39,6 +39,7 @@
 
     .@{prefix}-round {
       background: var(--color-switch-off_button_bg-disable);
+      border-color: var(--color-switch-off_button_border-disable);
     }
   }
 
@@ -49,6 +50,7 @@
 
     .@{prefix}-round {
       background: var(--color-switch-on_button_bg-disable);
+      border-color: var(--color-switch-on_button_border-disable);
     }
   }
 }

package/dist/components/tabs/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vd-tabs">
     <div class="vd-tabs__wrap" :class="menuClasses" ref="tabsWrap">
-      <div :class="barType" ref="tabsContainer">
+      <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>
@@ -53,6 +53,9 @@ export default {
     },
   },
   computed: {
+    scrollspy() {
+      return  `${prefixCls}--complete`
+    },
     ellipsisClasses() {
       return {
         [`${prefixCls}-text--ellipsis`]: this.ellipsis,

package/dist/components/tabs/style.less

@@ -1,8 +1,8 @@
 @tabs-prefix-cls: vd-tabs;
 
-.@{tabs-prefix-cls}{
+.@{tabs-prefix-cls} {
 
-  &__wrap{
+  &__wrap {
     position: relative;
     width: 100%;
     // background-color: #fff;  
@@ -161,6 +161,7 @@
       font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
       font-weight: var(--en-single-f-c-s-fontWeight);
       background-color: var(--color-tab-capsule_btn-bg-active);
+
       .@{tabs-prefix-cls}-arrow {
         color: var(--color-tab-filter_down-active);
         transform: rotate(180deg);
@@ -184,7 +185,7 @@
     &-bar {
       position: relative;
       display: flex;
-      background-color: #F7F8F9;
+      // background-color: #F7F8F9;
       border-radius: calc(var(--radius-tab-selector_card) * 1px);
       padding-inline-start: calc(var(--spacing-tab-selector-margin_left) * 1px);
       padding-inline-end: calc(var(--spacing-tab-selector-margin_right) * 1px);
@@ -217,7 +218,7 @@
     &-bar {
       position: relative;
       display: flex;
-      background-color: #F7F8F9;
+      // background-color: #F7F8F9;
       border-radius: calc(var(--radius-tab-selector_card) * 1px);
       padding-inline-start: calc(var(--spacing-tab-selector-margin_left) * 1px);
       padding-inline-end: calc(var(--spacing-tab-selector-margin_right) * 1px);
@@ -257,7 +258,7 @@
       color: var(--color-tab-filter-text-active);
       font-size: calc(var(--en-single-f-c-s-fontSize)* 1px);
       font-weight: var(--en-single-f-c-s-fontWeight);
-      
+
       .@{tabs-prefix-cls}-arrow {
         color: var(--color-tab-filter_down);
         transform: rotate(180deg);
@@ -306,7 +307,7 @@
   &-arrow {
     display: inline-block;
     vertical-align: -1px;
-    font-size:  calc(var(--icon-small) * 1px) !important;
+    font-size: calc(var(--icon-small) * 1px) !important;
     color: var(--color-tab-filter_down);
   }
 
@@ -327,14 +328,15 @@
       display: flex;
       height: calc(var(--icon-large) * 1px);
       padding-inline-end: calc(var(--spacing-tab-primary_icon-margin_right) * 1px);
-    
+      color: var(--text-color-h1);
+
       &::before {
         content: '';
         position: absolute;
         margin-inline-start: -16px;
         width: 16px;
         height: 100%;
-        background-image: linear-gradient(to left, var(--bg-color-1) 0%,rgba(255, 255, 255, 0) 100%);
+        background-image: linear-gradient(to left, var(--bg-color-1) 0%, rgba(255, 255, 255, 0) 100%);
       }
 
 
@@ -343,7 +345,7 @@
   }
 
 
-  &__wrap--bg{
+  &__wrap--bg {
     background-color: transparent;
   }
 
@@ -366,7 +368,7 @@
   }
 }
 
-[lang='ar'] .vd-tabs-menu--right::before{
+[lang='ar'] .vd-tabs-menu--right::before {
   transform: scaleX(-1);
 }
 
@@ -379,5 +381,3 @@
 .vd-tab-active {
   display: block;
 }
-
-