vdesign-ui 0.1.17 → 0.1.18

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

@@ -1,9 +1,9 @@
 <template>
   <div :class="wrapClasses">
     <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>
+    <vd-icon v-if="icon && type === 'list'" class="vd-actions__icon" :class="iconClasses"  :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>
+      <vd-icon class="vd-actions__icon" :class="iconClasses" :name="icon" :svg="iconSvg"></vd-icon>
     </span>
   </div>
 </template>
@@ -32,7 +32,7 @@ export default {
       type: Boolean,
       default: false,
     },
-    disbaled:Boolean,
+    disabled:Boolean,
   },
   computed: {
     wrapClasses() {
@@ -40,22 +40,30 @@ export default {
         `${prefixCls}`,
         {
           [`${prefixCls}__${this.type}`]: this.type,
-          [`${prefixCls}__${this.type}--${this.disbaled}`]: this.disbaled,
           [`${prefixCls}__${this.colors}`]: this.colors,
+          [`${prefixCls}__${this.colors}--disabled`]: this.disabled && (this.type ==='list'),
         }
       ]
     },
     contentBg() {
       return [
         {
-          [`${prefixCls}__content--${this.backgrounds}`]: this.backgrounds
+          [`${prefixCls}__content--${this.backgrounds}`]: this.backgrounds,
+          [`${prefixCls}__content--${this.backgrounds}--disabled`]: this.disabled,
         }
       ]
     },
     textClasses(){
       return [
         {
-         [`${prefixCls}__text--${this.disbaled}`]: this.disbaled
+         [`${prefixCls}__text--disabled`]: this.disabled
+      }
+    ]
+  },
+  iconClasses(){
+      return [
+        {
+         [`${prefixCls}__icon--disabled`]: this.disabled
       }
     ]
   },

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

@@ -56,7 +56,11 @@
         }
 
         .@{actions-prefix-cls}__icon{
+             color: var(--color-actions-text);
             font-size: calc(var(--icon-actions-card) * 1px);
+            &--disabled{
+                color: var(--color-actions-text-disable);
+            }
         }
     }
 
@@ -65,30 +69,44 @@
         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);
-
+            color: var(--color-actions-text-disable);
         }
     }
 
     &__icon{
         font-size: calc(var(--icon-actions-size) * 1px);
-        color: var(--color-actions-text-disable);
+        color: var(--color-actions-text);
+        &--disabled{
+            color: var(--color-actions-text-disable);
+        }
     }
 
     &__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);
+        }
     }
 
 }

package/dist/components/activityviews/index.vue

@@ -1,47 +1,49 @@
 <template>
-    <div v-if="visible">
-        <!-- <vd-overlay :visible="overlay" @close="closeActivity"></vd-overlay> -->
-        <div class="vd-overlay" v-if="visible" @click="closeActivity"></div>
-        <div class="vd-activityviews">
-            <div class="vd-activityviews__header" v-if="withHeader">
-                <div class="vd-activityviews__wrapper">
-                    <vd-icon v-if="backDefault" name="icon_nav_back"></vd-icon>
-                    <div v-if="title" class="vd-activityviews__title">{{ title }}</div>
-                    <slot name="close">
-                        <vd-icon v-if="closeIcon" class="vd-activityviews__close" name="icon_btn_dialogclose" svg
-                            @click="onCancel"></vd-icon>
-                    </slot>
-                    <slot name="btn">
-                        <vd-button v-if="closeBtn" class="vd-activityviews__done" type="primary_text" size="large"
+    <div>
+        <transition name="vd-fade">
+            <div class="vd-overlay" v-if="overlay && visible" @click="handleMaskClick"></div>
+        </transition>
+        <transition name="vd-slide-up">
+            <div class="vd-activityviews" v-if="visible">
+                <div class="vd-activityviews__header" v-if="withHeader">
+                    <div class="vd-activityviews__wrapper">
+                        <vd-icon v-if="backDefault" name="icon_nav_back"></vd-icon>
+                        <div v-if="title" class="vd-activityviews__title">{{ title }}</div>
+                        <slot name="close">
+                            <vd-icon v-if="closeIcon" class="vd-activityviews__close" :name="currentCloseIcon" svg
+                                @click="onCancel"></vd-icon>
+                            <vd-button v-if="closeBtn" class="vd-activityviews__done" type="primary_text" size="large"
                             @click="onCancel">{{ closeBtn }}</vd-button>
-                    </slot>
-                </div>
-                <p v-if="description" class="vd-activityviews__description">{{ description }}</p>
-            </div>
-            <div v-if="withBar" class="vd-activityviews__bar"></div>
-            <div :class="['vd-activityviews__body', { 'vd-activityviews__body--action': actionSheet }]">
-                <div v-if="actionSheet" class="vd-activityviews__action">
-                    <p v-if="title" class="vd-activityviews__action-title">{{ title }}</p>
-                    <div class="vd-activityviews__actions">
-                        <vd-button v-for="(item, index) in actions" block size="large" :type="item.type" :key="index"
-                            :disabled="item.disabled" @click.stop="onSelect(item)">{{ item.name }}</vd-button>
+                        </slot>
                     </div>
-                    <div v-if="cancelText" class="vd-activityviews__gap"></div>
-                    <!-- 类似1 -->
-                    <div v-if="cancelText" class="vd-activityviews__cancel" @click="onCancel">
-                        <vd-button block type="tertiary" size="large">{{ cancelText }}</vd-button>
+                    <p v-if="description" class="vd-activityviews__description">{{ description }}</p>
+                </div>
+                <div v-if="withBar" class="vd-activityviews__bar"></div>
+                <div :class="['vd-activityviews__body', { 'vd-activityviews__body--action': actionSheet }]">
+                    <div v-if="actionSheet" class="vd-activityviews__action">
+                        <p v-if="title" class="vd-activityviews__action-title">{{ title }}</p>
+                        <div class="vd-activityviews__actions">
+                            <vd-button v-for="(item, index) in actions" block size="large" :type="item.type" :key="index"
+                                :disabled="item.disabled" @click.stop="onSelect(item)">{{ item.name }}</vd-button>
+                        </div>
+                        <div v-if="cancelText" class="vd-activityviews__gap"></div>
+                        <div v-if="cancelText" class="vd-activityviews__cancel" @click="onCancel">
+                            <vd-button block type="tertiary" size="large">{{ cancelText }}</vd-button>
+                        </div>
                     </div>
+                    <slot></slot>
                 </div>
-                <slot v-else></slot>
             </div>
-        </div>
+        </transition>
     </div>
 </template>
 
 <script>
+import { themeMixin } from '@p/components/mixins/themeMixin';
 
 export default {
     name: 'vd-activityviews',
+    mixins: [themeMixin],  // 引入混入
     props: {
         value: Boolean,
         title: String,
@@ -66,31 +68,35 @@ export default {
             type: Boolean,
             default: true
         },
-        disabled: Boolean
+        disabled: Boolean,
+        closeOnOverlay:{
+            type: Boolean,
+            default: true
+        },
     },
     data() {
         return {
-            visible: this.value
         }
     },
     computed: {
-
-    },
-    watch: {
-        value(newValue) {
-            this.visible = newValue;
+        visible(){
+            return this.value
         },
-        visible(newValue) {
-            this.$emit('input', newValue);
+        currentCloseIcon() {
+            return this.isDarkTheme ? 'icon_btn_dialogclose_dark' : 'icon_btn_dialogclose';
+        },
+        isDarkTheme() {
+            return this.theme === 'dark';
         }
     },
+    watch: {
+    },
     methods: {
         closeActivity() {
-            this.visible = false;
             this.$emit('input', false);
         },
         onCancel() {
-            this.$emit('input', false);
+            this.closeActivity();
             this.$emit('cancel');
         },
         onSelect(item) {
@@ -98,10 +104,36 @@ export default {
                 this.$emit('select', item);
             }
         },
+        handleMaskClick() {
+            if (this.closeOnOverlay) {
+                this.closeActivity();
+            }
+        }
+    },
+    mounted() {
     }
+
 }
 </script>
 
 <style lang="less">
 @import './style.less';
+
+.vd-fade-enter-active,
+.vd-fade-leave-active {
+  transition: opacity 0.3s;
+}
+.vd-fade-enter,
+.vd-fade-leave-to {
+  opacity: 0;
+}
+
+.vd-slide-up-enter-active,
+.vd-slide-up-leave-active {
+  transition: transform 0.3s;
+}
+.vd-slide-up-enter,
+.vd-slide-up-leave-to {
+  transform: translateY(100%);
+}
 </style>

package/dist/components/activityviews/style.less

@@ -1,11 +1,10 @@
 
-@dialog-prefix-cls: vd-activityviews;
+@activityviews-prefix-cls: vd-activityviews;
 
-.@{dialog-prefix-cls}{
+.@{activityviews-prefix-cls}{
     
     ::-webkit-scrollbar{width:3px;}
-
-    position: absolute;
+    position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
@@ -14,7 +13,7 @@
     display: flex;
     flex-direction: column;
     max-height: 80%;
-    overflow: hidden;
+    overflow: auto;
     background-color: var(--color-activityviews-bg);
     border-radius: calc(var(--radius-activityviews-title) * 1px) calc(var(--radius-activityviews-title) * 1px) 0 0;
 
@@ -77,13 +76,10 @@
     }
 
     &__body{
-        // background-color: #fff;
         background-color: var(--color-activityviews-bg);
-
         height: 80%;
         overflow-y: auto;
 
-
         &--action{
             overflow: hidden;
         }
@@ -115,6 +111,7 @@
 
         .vd-btn{
             border-radius: 0;
+            background-color: var(--color-activityviews-bg);
         }
     }
 
@@ -131,6 +128,7 @@
         .vd-btn{
             position: relative;
             border: none;
+            background-color: var(--color-activityviews-bg);
             height: calc(var(--height-activityviews-actionsheet) * 1px);
             border-radius: 0;
 

package/dist/components/checkbox/style.less

@@ -95,7 +95,7 @@
                 position: absolute;
                 top: 2px;
                 left: 5px;
-                border: 2px solid #fff;
+                border: 2px solid var(--bg-color-1);
                 border-top: 0;
                 border-left: 0;
                 transform: rotate(45deg) scale(1);
@@ -157,7 +157,7 @@
                 top: 50%;
                 transform: translate(-50%, -50%);
                 border: 0;
-                background-color: #fff;
+                background-color: var(--bg-color-1);
             }
 
             &::before{
@@ -189,7 +189,8 @@
             .@{checkbox-button-prefix-cls}__text {
                 margin-block-start: calc(var(--spacing-check_radio-check_icon-margin_bottom) * 1px);
                 font-size: 12px;
-                color: rgba(0, 0, 0, 0.85);
+                // color: rgba(0, 0, 0, 0.85);
+                color: var(--color-check_radio-radio_button_text-default);
             }
             
         }
@@ -202,7 +203,8 @@
                 &__description {
                     margin-block-start: calc(var(--spacing-check_radio-check_describe-margin_top) * 1px);
                     font-size: 11px;
-                    color: rgba(0, 0, 0, 0.3);
+                    // color: rgba(0, 0, 0, 0.3);
+                    color: var(--color-check_radio-check_button_text_describe-default);
                 }
             }
         }

package/dist/components/data-list/style.less

@@ -15,7 +15,7 @@
   flex-direction: row;
   flex-wrap: nowrap;
   min-width: fit-content;
-  background-color: #fff;
+  background-color: var(--bg-color-1);
   padding-inline-end: calc(var(--spacing-datalist-padding_y) * 1px);
   padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
   min-height: calc(var(--height-datalist-head) * 1px);
@@ -125,7 +125,7 @@
     flex: none;
     width: calc((var(--width-datalist-head_l) + var(--spacing-datalist-padding_y)) * 1px);
     padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
-    background: #fff;
+    background: var(--bg-color-1);
     z-index: 2;
 
     &.vd-datalist-head-item--s {
@@ -214,11 +214,11 @@
   flex-direction: row;
   flex-wrap: nowrap;
   min-width: fit-content;
-  background-color: #fff;
+  background-color: var(--bg-color-1);
   padding-inline-end: calc(var(--spacing-datalist-padding_y) * 1px);
   padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
   min-height: calc(var(--height-datalist-list) * 1px);
-  color: var(--color-datalist-list-text-default);
+  color: var(--text-color-h1);
   font-weight: var(--en-single-f-c-r-fontWeight);
   font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
 
@@ -344,7 +344,7 @@
     flex: none;
     width: calc((var(--width-datalist-list_l) + var(--spacing-datalist-padding_y)) * 1px);
     padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
-    background: #fff;
+    background: var(--bg-color-1);
     z-index: 2;
 
     &.vd-datalist-list-item--s {
@@ -495,10 +495,10 @@
     justify-content: space-between;
     align-items: center;
     min-width: fit-content;
-    background-color: #fff;
+    background-color: var(--bg-color-1);
     padding-inline-end: calc(var(--spacing-datalist-padding_y) * 1px);
     padding-inline-start: calc(var(--spacing-datalist-padding_y) * 1px);
-    color: var(--color-datalist-list-text-default);
+    color: var(--text-color-h1);
     font-weight: var(--en-single-f-c-r-fontWeight);
     font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
     height: calc(var(--height-datalist-search_m) * 1px);

package/dist/components/dialog/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="vd-dialog-wrap" v-if="visible">
         <div class="vd-overlay" v-if="visible && overlay" @click="close()"></div>
-        <div class="vd-dialog" :class="`vd-dialog--${className}`">
+        <div class="vd-dialog" :class="className ? `vd-dialog--${className}` : ''">
             <header class="vd-dialog__header" :class="{ 'vd-dialog__header--img': $slots.imgs }">
                 <div class="vd-dialog__header--img-content" v-if="$slots.imgs">
                     <slot name="imgs"></slot>
@@ -9,10 +9,11 @@
                 <div class="vd-dialog__title">{{ title }}</div>
             </header>
             <div class="vd-dialog__content">
-                <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }" v-if="message || $slots.content">
+                <div class="vd-dialog__message" :class="{ 'vd-dialog__message--head': !title }"
+                    v-if="message || $slots.content">
                     <slot name="content">{{
-                    message
-                    }}</slot>
+                        message
+                        }}</slot>
                 </div>
             </div>
             <footer class="vd-dialog__footer">
@@ -26,7 +27,8 @@
                         }}</vd-button>
                 </div>
                 <div class="vd-dialog__btns--text" v-if="btnsText">
-                    <vd-button type="tertiary" size="large" @click="cancel">{{ cancelButtonText || $t("alert.cancel")
+                    <vd-button type="tertiary_text" size="large" @click="cancel">{{ cancelButtonText ||
+                        $t("alert.cancel")
                         }}</vd-button>
                     <vd-button type="primary_text" size="large" @click="confirm">{{ confirmButtonText ||
                         $t("alert.confirm") }}</vd-button>
@@ -68,30 +70,27 @@ export default {
         },
         confirmButtonText: String,
         cancelButtonText: String,
-        closeOnMask: {
+        closeOnOverlay: {
             type: Boolean,
             default: true
         },
     },
     data() {
         return {
-            // visible: this.value,
+
         }
     },
     watch: {
-        // value(val) {
-        //     this.visible = val;
-        // },
+
     },
     computed: {
-        visible(){
+        visible() {
             return this.value
         }
     },
     methods: {
         close(force = false) {
-            // this.visible = false;
-            if (force || this.closeOnMask) {
+            if (force || this.closeOnOverlay) {
                 this.$emit('input', false);
             }
         },

package/dist/components/dialog/style.less

@@ -1,27 +1,29 @@
-
 @dialog-prefix-cls: vd-dialog;
 
-.@{dialog-prefix-cls}{
+.@{dialog-prefix-cls} {
     position: absolute;
     left: 50%;
     top: 50%;
     z-index: 2111;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
     width: 279px;
-    background-color:var(--color-dialog-bg);
+    background-color: var(--color-dialog-bg);
     border-radius: calc(var(--radius-dialog-content) * 1px);
     padding-inline-start: calc(var(--spacing-dialog-padding_left) * 1px);
     padding-inline-end: calc(var(--spacing-dialog-padding_right) * 1px);
 
-    ::-webkit-scrollbar{width:3px;}
+    ::-webkit-scrollbar {
+        width: 3px;
+    }
 
 
-    &__header{
+    &__header {
         padding-block-start: calc(var(--spacing-dialog-padding_top) * 1px);
-    
-        &--img{
+
+        &--img {
             padding-block-start: calc(var(--spacing-dialog-icon-padding_top) * 1px);
-            &-content{
+
+            &-content {
                 text-align: center;
                 margin-block-end: calc(var(--spacing-dialog-icon_title-margin_top) * 1px);
             }
@@ -29,15 +31,15 @@
 
     }
 
-    &__title{
-        text-align: center; 
+    &__title {
+        text-align: center;
         font-size: calc(var(--en-multi-f-e-s-fontSize) * 1px);
         font-weight: var(--en-multi-f-e-s-fontWeight);
-        line-height:  calc(var(--en-multi-f-e-s-lineHeight) * 1px);
-        color:var(--color-dialog-title); 
+        line-height: calc(var(--en-multi-f-e-s-lineHeight) * 1px);
+        color: var(--color-dialog-title);
     }
 
-    &__message{
+    &__message {
         text-align: center;
         overflow-y: auto;
         min-height: calc(var(--height-dialog-super_small) * 1px);
@@ -45,65 +47,68 @@
         margin-block-start: calc(var(--spacing-dialog-title-margin_bottom) * 1px);
         font-size: calc(var(--en-multi-f-d-r-fontSize) * 1px);
         font-weight: var(--en-multi-f-d-r-fontWeight);
-        line-height:  calc(var(--en-multi-f-d-r-lineHeight) * 1px);
+        line-height: calc(var(--en-multi-f-d-r-lineHeight) * 1px);
         color: var(--color-dialog-text);
 
-        &--head{
+        &--head {
             margin-block-start: 0;
             color: var(--color-dialog-title);
         }
     }
 
-    &__footer{
-        margin-block-start: calc(var(--spacing-dialog-button-margin_top) * 1px); 
+    &__footer {
+        margin-block-start: calc(var(--spacing-dialog-button-margin_top) * 1px);
     }
-     
-    &__btns{
+
+    &__btns {
         display: flex;
         justify-content: space-between;
         padding-block-end: calc(var(--spacing-dialog-padding_bottom) * 1px);
 
-        button{
+        button {
             flex: 1;
         }
-        button+button{
+
+        button+button {
             margin-inline-start: calc(var(--spacing-dialog-button_double-margin_mid) * 1px);
         }
     }
 
-    &__btn{
+    &__btn {
         padding-block-end: calc(var(--spacing-dialog-padding_bottom) * 1px);
         padding-inline-start: calc(var(--spacing-dialog-button_single-margin_left) * 1px);
         padding-inline-end: calc(var(--spacing-dialog-button_single-margin_right) * 1px);
     }
-   
-    &__btns--text{
+
+    &__btns--text {
         display: flex;
         justify-content: space-between;
         padding-block-end: calc(var(--spacing-dialog-button_text-padding_bottom) * 1px);
 
-        button{
+        button {
             flex: 1;
         }
-        button+button{
+
+        button+button {
             margin-inline-start: calc(var(--spacing-dialog-button_double-margin_mid) * 1px);
-        }  
+        }
     }
 
-    &__btn--text-block{
+    &__btn--text-block {
         display: flex;
         justify-content: space-between;
         padding-block-end: calc(var(--spacing-dialog-button_text-padding_bottom) * 1px);
     }
 
-    &__btns-block{
+    &__btns-block {
 
         padding-block-end: calc(var(--spacing-dialog-button_text-padding_bottom) * 1px);
 
-        button{
+        button {
             flex: 1;
         }
-        button+button{
+
+        button+button {
             margin-block-start: calc(var(--spacing-dialog-button_double-margin_mid) * 1px);
         }
     }
@@ -118,5 +123,10 @@
     width: 100%;
     height: 100%;
     background-color: var(--color-dialog-mask_bg);
-  }
-  
+}
+
+html[theme="dark"] {
+    .@{dialog-prefix-cls} {
+        background: linear-gradient(0deg, var(--bg-color-4) 0%, var(--bg-color-4) 100%), var(--bg-color-1);
+    }
+}

package/dist/components/dropdown/index.vue

@@ -106,7 +106,7 @@ export default {
     state: {
       type: String,
       default: 'close',
-      validator: value => ['open', 'preopen', 'close'].includes(value)
+      validator: value => ['open', 'preopen', 'close', 'fusing', 'pre', 'last'].includes(value)
     },
     stateText: {
       type: String,