vdesign-ui 0.2.16 → 0.2.17

package/dist/components/actionbar-cell/index.js

@@ -1,5 +1,5 @@
 import ActionbarCell from './index.vue';
-
+import './style.less';
 ActionbarCell.install = function (Vue) {
   Vue.component(ActionbarCell.name, ActionbarCell);
 };

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

@@ -36,3 +36,7 @@ export default {
   },
 };
 </script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/activityviews/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <div class="vd-overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
+        <div class="vd-activity-views__overlay" v-if="overlay && visible" @click="handleOverlayClick"></div>
         <transition name="vd-activity-views-slide-up">
             <div :class="['vd-activity-views',{'vd-activity-views--safe-area-inset-bottom':safeAreaInsetBottom}]"  :style="transitionStyle" v-if="visible">
                 <div class="vd-activity-views__header" v-if="withHeader">

package/dist/components/activityviews/style.less

@@ -149,4 +149,14 @@
 .vd-activity-views-slide-up-enter,
 .vd-activity-views-slide-up-leave-to {
     transform: translateY(100%);
+}
+
+.vd-activity-views__overlay{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2001;
+    background-color: var(--color-activityviews-mask-bg);
 }

package/dist/components/checkbox-group/index.js

@@ -1,5 +1,5 @@
 import CheckboxGroup from './index.vue';
-
+import './style.less';
 CheckboxGroup.install = function (Vue) {
   Vue.component(CheckboxGroup.name, CheckboxGroup);
 };

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

@@ -67,3 +67,7 @@ export default {
     }
 };
 </script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/dialog/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="vd-dialog-wrap">
-        <div class="vd-overlay" v-if="visible && isOverlayVisible &&  overlay" :style="{ zIndex: overlayZIndex }"
+        <div class="vd-dialog__overlay" v-if="visible && isOverlayVisible &&  overlay" :style="{ zIndex: overlayZIndex }"
         @click="handleOverlayClick"></div>
         <transition name="vd-dialog-fade">
             <div class="vd-dialog"  v-if="visible" :class="computedClassName" :style="{width : width, zIndex: overlayZIndex + 1}">

package/dist/components/dialog/style.less

@@ -111,7 +111,7 @@
     }
 }
 
-.vd-overlay {
+.vd-dialog__overlay {
     position: fixed;
     top: 0;
     left: 0;

package/dist/components/footer/style.less

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

package/dist/components/form/index.vue

@@ -9,4 +9,6 @@ export default {
 }
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/input/style.less

@@ -237,6 +237,7 @@
     height: var(--height-input-search_content);
     padding-inline-start: var(--spacing-input-search_textarea-padding_y);
     padding-inline-end: var(--spacing-input-search_textarea-padding_y);
+    background-color: var(--color-input-trade-bg);
 
     .@{input-prefix-cls} {    
         &-search {
@@ -250,7 +251,7 @@
         flex: 1;
         display: flex;
         align-items: center;
-        background-color: rgba(0, 0, 0, 0.05);
+        background-color: var(--color-input-trade-bg);
         padding-inline-start: var(--spacing-input-textarea-padding_y);
         padding-inline-end: var(--spacing-input-textarea-padding_y);
         border-radius: var(--radius-input-bg);

package/dist/components/overlay/style.less

@@ -15,7 +15,8 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: var(--color-dialog-mask_bg);
+  z-index: 2001;
+  background-color: var(--color-dialog-mask_bg);
 }
 
 .vd-overflow-hidden {

package/dist/components/password/index.vue

@@ -58,3 +58,7 @@ export default {
   },
 };
 </script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/popup/index.js

@@ -1,5 +1,5 @@
 import Popup from './index.vue';
-
+import './style.less';
 Popup.install = function (Vue) {
   Vue.component(Popup.name, Popup);
 };

package/dist/components/popup/index.vue

@@ -160,84 +160,6 @@ export default {
 };
 </script>
 
-<style scoped>
-.popup-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 999;
-}
-
-.popup {
-  position: fixed;
-  z-index: 1000;
-}
-
-.popup-center {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-.popup-top {
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-
-.popup-bottom {
-  bottom: 0;
-  left: 0;
-  width: 100%;
-}
-
-.popup-left {
-  top: 0;
-  left: 0;
-  height: 100%;
-}
-
-.popup-right {
-  top: 0;
-  right: 0;
-  height: 100%;
-}
-
-/* 过渡效果 */
-.popup-slide-center-enter-active,
-.popup-slide-center-leave-active,
-.popup-slide-top-enter-active,
-.popup-slide-top-leave-active,
-.popup-slide-bottom-enter-active,
-.popup-slide-bottom-leave-active,
-.popup-slide-left-enter-active,
-.popup-slide-left-leave-active,
-.popup-slide-right-enter-active,
-.popup-slide-right-leave-active {
-  transition-property: all;
-  transition-timing-function: ease;
-}
-
-.popup-slide-top-enter,
-.popup-slide-top-leave-to {
-  transform: translateY(-100%);
-}
-.popup-slide-bottom-enter,
-.popup-slide-bottom-leave-to {
-  transform: translateY(100%);
-}
-.popup-slide-left-enter,
-.popup-slide-left-leave-to {
-  transform: translateX(-100%);
-}
-.popup-slide-right-enter,
-.popup-slide-right-leave-to {
-  transform: translateX(100%);
-}
-.popup-slide-center-enter,
-.popup-slide-center-leave-to {
-  opacity: 0;
-}
+<style lang="less">
+@import './style.less';
 </style>

package/dist/components/popup/style.less

@@ -0,0 +1,79 @@
+.popup-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+}
+
+.popup {
+  position: fixed;
+  z-index: 1000;
+}
+
+.popup-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.popup-top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+.popup-bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+
+.popup-left {
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+.popup-right {
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+
+/* 过渡效果 */
+.popup-slide-center-enter-active,
+.popup-slide-center-leave-active,
+.popup-slide-top-enter-active,
+.popup-slide-top-leave-active,
+.popup-slide-bottom-enter-active,
+.popup-slide-bottom-leave-active,
+.popup-slide-left-enter-active,
+.popup-slide-left-leave-active,
+.popup-slide-right-enter-active,
+.popup-slide-right-leave-active {
+  transition-property: all;
+  transition-timing-function: ease;
+}
+
+.popup-slide-top-enter,
+.popup-slide-top-leave-to {
+  transform: translateY(-100%);
+}
+.popup-slide-bottom-enter,
+.popup-slide-bottom-leave-to {
+  transform: translateY(100%);
+}
+.popup-slide-left-enter,
+.popup-slide-left-leave-to {
+  transform: translateX(-100%);
+}
+.popup-slide-right-enter,
+.popup-slide-right-leave-to {
+  transform: translateX(100%);
+}
+.popup-slide-center-enter,
+.popup-slide-center-leave-to {
+  opacity: 0;
+}

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

@@ -1,4 +1,5 @@
 import RadioGroup from './index.vue';
+import './style.less';
 RadioGroup.install = function (Vue) {
   Vue.component(RadioGroup.name, RadioGroup);
 };

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

@@ -56,3 +56,7 @@ export default {
   },
 };
 </script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/search/index.vue

@@ -64,3 +64,7 @@ export default {
     }
 }
 </script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/stepper/index.vue

@@ -144,3 +144,7 @@ export default {
     }
 }
 </script>
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/tab/index.js

@@ -1,5 +1,5 @@
 import Tab from './index.vue';
-
+import './style.less';
 Tab.install = function (Vue) {
   Vue.component(Tab.name, Tab);
 };

package/dist/components/tab/index.vue

@@ -91,5 +91,7 @@
     },
   };
   </script>
-  
-  
+
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/tabs/index.vue

@@ -74,6 +74,7 @@ export default {
     return {
       tabs: [],
       currentName: this.value !== undefined ? this.value : 0, // 默认为 0
+      firstTabOut: false, // 第一个标签是否超出
     };
   },
   watch: {
@@ -129,6 +130,7 @@ export default {
         [`${prefixCls}__menu`]: this.menu,
         [`${prefixCls}__wrap--bg`]: this.backgroundColor,
         "vd-hairline--bottom": this.divider,
+        "vd-tabs__scroll": this.firstTabOut, // 当第一个标签超出时，添加滚动类名
       };
     },
     // 计算标签下方线条的类名
@@ -262,7 +264,19 @@ export default {
           left: scrollLeft,
           behavior: 'smooth'
         });
-      }, 0); // You can adjust the timeout value if needed
+      }, 0);
+    },
+    checkFirstTabOverflow() {
+      const nav = this.$refs.nav;
+      if (nav) {
+        if (this.language === 'ar') {
+          // 在 RTL 模式下，scrollLeft 可能为负，判断是否滚出视口可以检测 scrollLeft 是否小于 0
+          this.firstTabOut = nav.scrollLeft < 0;
+        } else {
+          // LTR 模式下，滚出视口时 scrollLeft 大于 0
+          this.firstTabOut = nav.scrollLeft > 0;
+        }
+      }
     },
     renderTitle(titleEl, tab) {
       this.$nextTick(() => {
@@ -309,8 +323,16 @@ export default {
     // 初始加载时，滚动到当前激活的标签
     this.$nextTick(() => {
       this.scrollToActiveTab();
+      if (this.$refs.nav) {
+        this.$refs.nav.addEventListener('scroll', this.checkFirstTabOverflow);
+      }
     });
   },
+  beforeDestroy() {
+    if (this.$refs.nav) {
+      this.$refs.nav.removeEventListener('scroll', this.checkFirstTabOverflow);
+    }
+  },
 };
 </script>
 <style lang="less">

package/dist/components/tabs/style.less

@@ -312,6 +312,29 @@
     }
   }
   
+  &__scroll {
+    &::before {
+      content: '';
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      width: 20px;
+      height: 48px;
+      background-color: var(--bg-color-1);
+    }
+    &::after {
+      content: '';
+      box-shadow: 4px 0 6px rgba(0, 0, 0, 0.05);
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 0;
+      width: 20px;
+      height: 30px;
+      background-color: transparent;
+    } 
+  }
   
   &__menu {
     display: flex;
@@ -353,7 +376,6 @@
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
     padding-inline-end: var(--spacing-tab-primary_icon-margin_right);
-
     &::-webkit-scrollbar {
       display: none;
     }
@@ -403,6 +425,35 @@
 
 
 
-[lang='ar'] .@{tabs-prefix-cls}__menu--right::before {
-  transform: scaleX(-1);
+[lang='ar'] {
+  .@{tabs-prefix-cls}__scroll {
+    &::before {
+      right: 0;
+      left: auto;
+    }
+    &::after {
+      right: 0;
+      left: auto;
+      box-shadow: -4px 0 6px rgba(0, 0, 0, 0.05);
+    } 
+  }
+  .@{tabs-prefix-cls}__menu--right::before {
+    transform: scaleX(-1);
+  }
 }
+
+[theme='dark'] {
+  .@{tabs-prefix-cls}__scroll {
+    &::after {
+      box-shadow: 4px 0 6px rgba(0, 0, 0, 0.35);
+    } 
+  }
+}
+
+[theme='dark'][lang='ar']{
+  .@{tabs-prefix-cls}__scroll {
+    &::after {
+      box-shadow: -4px 0 6px rgba(0, 0, 0, 0.35);
+    } 
+  }
+}

package/dist/components/title/style.less

@@ -7,7 +7,7 @@
     justify-content: space-between;
     padding-inline-start: var(--spacing-title-padding_left);
     padding-inline-end: var(--spacing-title-padding_right);
-    background-color: var(--bg-color-1);
+    // background-color: var(--bg-color-1);
 
     &--sticky {
         position: sticky;

package/dist/components/toast/style.less

@@ -9,7 +9,7 @@
   transform: translate(-50%, -50%);
   box-sizing: border-box;
   text-align: center;
-  z-index: 1000;
+  z-index: 3000;
   transition: all .3s linear;
   opacity: 0;
   visibility: hidden;