vdesign-ui 0.1.24 → 0.2.0-beta

package/dist/components/input/style.less

@@ -106,16 +106,19 @@
         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);
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-b-r-fontWeight);
-            margin-block-start: calc(var(--spacing-input-textarea_text-margin_down) * 1px);
 
-            &--error {
-                color: var(--color-input-text-wrong);
+        .@{input-prefix-cls}-form__right{
+            display: block;
+            .@{input-prefix-cls}__word-limit {
+                text-align: end;
+                color: var(--color-input-text-default);
+                font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+                font-weight: var(--en-single-f-b-r-fontWeight);
+                margin-block-start: calc(var(--spacing-input-textarea_text-margin_down) * 1px);
+
+                &--error {
+                    color: var(--color-input-text-wrong);
+                }
             }
         }
 
@@ -132,20 +135,19 @@
             color: var(--color-input-text-active);
             font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
             font-weight: var(--en-single-f-d-s-fontWeight);
-            // margin-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
             padding-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
         }
 
         &__right {
             display: inline-flex;
             align-items: center;
-
             .@{input-prefix-cls}__word-limit {
                 text-align: end;
                 color: var(--color-input-text-default);
                 font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
                 font-weight: var(--en-single-f-b-r-fontWeight);
-                margin-block-start: 0;
+                // margin-block-start: 0;
+                margin-inline-start: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
 
                 &--error {
                     color: var(--color-input-text-wrong);
@@ -155,7 +157,7 @@
 
         &__suffix {
             margin-inline-start: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
-            margin-inline-end: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
+            // margin-inline-end: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
             color: var(--color-input-text-active);
             font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
             font-weight: var(--en-single-f-d-s-fontWeight);
@@ -240,9 +242,10 @@
 
     .@{input-prefix-cls} {    
             &-search{
-            padding-inline-end: 0;
-            flex: 1;
-        }
+                padding-inline-start: 0;
+                padding-inline-end: 0;
+                flex: 1;
+            }
     }
 
 
@@ -266,21 +269,18 @@
                 font-weight: var(--en-single-f-d-s-fontWeight);
                 caret-color: var(--color-input-cursor);
 
-
                 &::-webkit-input-placeholder {
                     color: var(--color-input-text-default);
                     font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
                     font-weight: var(--en-single-f-d-r-fontWeight);
                 }
             }
-
-
         }
     }
 
     &__prefix {
         display: flex;
-
+        padding-inline-end: calc(var(--spacing-input-suffix_icon-margin_y)* 1px);
         .vd-iconfont {
             vertical-align: middle;
             color: var(--text-color-h3);
@@ -288,19 +288,6 @@
         }
     }
 
-    &__suffix {
-        margin-inline-start: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
-        color: var(--color-input-text-active);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-
-        .vd-iconfont {
-            vertical-align: middle;
-            color: var(--text-color-h3);
-            font-size: calc(var(--icon-input-clean) * 1px);
-        }
-    }
-
     &__action {
         margin-inline-start: calc(var(--spacing-input-search_cancel-margin_left) * 1px);
         display: flex;

package/dist/components/list/index.vue

@@ -1,39 +1,46 @@
 <template>
-    <div class="vd-list" :class="wrapClasses" @click="toggleActiveSelect">
+    <div class="vd-list" :class="wrapClasses" @click="handleToggleActive">
+        <!-- 左侧内容区域 -->
         <div class="vd-list--left" :class="listLeftClasses">
-            <vd-icon v-if="leftCusIcon" :name="leftCusIcon" :svg="leftCusSvg" :class="leftCusIconClasses"
-                :style="{ 'fontSize': fontSize + 'px' }"></vd-icon>
-            <div v-if="extraSlot">
-                <slot></slot>
-            </div>
+            <!-- 通用列表和勾选列表自定义左侧图标 距离右边12px-->
+            <vd-icon v-if="icon" :name="icon" size="large" :class="iconClasses"></vd-icon>
             <div class="vd-list-content" :class="contentClasses">
-                <vd-icon v-if="leftIcon" :name="leftIcon" :svg="leftSvg" :class="leftIconClasses"></vd-icon>
-                <span class="vd-list-inner__title vd-multi-ellipsis--l2" :class="innerTitleClasses">{{ title }}</span>
-                <vd-icon v-if="rightIcon" :name="rightIcon" :svg="rightSvg" :class="rightIconClasses"></vd-icon>
-                <p class="vd-title__subtext  vd-multi-ellipsis--l2" :class="subTextClasses" v-if="subText">{{ subText }}
+                <!-- 标题 -->
+                <span class="vd-multi-ellipsis--l2" :class="innerTitleClasses">{{ title }}</span>
+                <!-- 通用列表副文本 -->
+                <p class="vd-multi-ellipsis--l2" :class="subtitleClasses" v-if="subtitle">{{ subtitle }}
                 </p>
             </div>
+            <!-- 信息列表右侧图标 -->
+            <vd-icon v-if="statusIcon" :name="statusIcon" size="small" :class="statusIconClasses"></vd-icon>
+            <!-- 勾选列表 额外插槽 -->
+            <slot name="left"></slot>
         </div>
-        <div class="vd-list--right" v-if="guideText || arrowNext || activeSelect || $slots.default">
-            <vd-icon class="vd-list__icon--extra" v-if="cusIcon" :name="cusIcon" :svg="cusSvg"></vd-icon>
-            <slot name="badge">
-                <vd-badge is-dot v-if="badge" class="vd-list-common__badge"></vd-badge>
-            </slot>
-            <!-- </span> -->
-            <span v-if="guideText" :class="textRightClasses">
+        <!-- 右侧内容区域 -->
+        <div class="vd-list--right" v-if="guideText || arrowIcon || isActive || $slots.switch">
+            <!-- 信息列表右侧自定义图标 -->
+            <vd-icon class="vd-list__icon--extra" size="small" v-if="actionIcon" :name="actionIcon"></vd-icon>
+            <!-- 通用列表徽标插槽 左间距12 -->
+             <span class="vd-list-common__badge" v-if="showBadge  || $slots.badge">
+                <slot name="badge">
+                    <vd-badge is-dot></vd-badge>
+                </slot>
+             </span>
+            <!-- 右侧文本 -->
+            <div v-if="guideText" :class="textRightClasses">
                 <p>{{ guideText }}</p>
                 <p v-if="mulText" class="vd-list__multext">{{ mulText }}</p>
+            </div>
+            <!-- 右箭头 左间距4  设计师没有提供默认图标，不设置默认值-->
+            <span v-if="arrowIcon" class="vd-list__arrow" @click="$emit('next')">
+                <vd-icon :name="arrowIcon"  size="small"></vd-icon>
             </span>
-            <span v-if="arrowNext" class="vd-list-arrow" @click="$emit('back')">
-                <vd-icon :name="arrowNext"></vd-icon>
-            </span>
-            <!-- <span v-if="activeSelect" class="vd-list-check__select"> -->
-            <vd-icon v-if="activeSelect" class="vd-list-check__select" name="icon_btn_singleslt"
+            <!-- 勾选列表选择图标 左间距12-->
+            <vd-icon v-if="isActive" class="vd-list-check__select" name="icon_btn_singleslt"
                 color="#1BC47D"></vd-icon>
-            <!-- </span> -->
-
-            <span v-if="curSlot" class="vd-list__switch">
-                <slot></slot>
+            <!-- 通用列表自定义插槽 左间距8 -->
+            <span v-if="$slots.switch" class="vd-list__switch">
+                <slot name="switch"></slot>
             </span>
         </div>
     </div>
@@ -44,33 +51,21 @@ const prefixCls = 'vd-list';
 export default {
     name: 'vd-list',
     props: {
-        title: String,
-        leftIcon:String,
-        rightIcon:String,
-        cusIcon: String,
-        leftCusIcon: String,
-        arrow: Boolean,
-        subText: String,
-        guideText: String,
-        mulText: String,
-        activeSelect: Boolean,
-        type:  String,
-        leftSvg:  Boolean,
-        rightSvg:  Boolean,
-        cusSvg:  Boolean,
-        leftCusSvg:  Boolean,
-        arrowNext:  String,
-        badge:  Boolean,
-        curSlot:  Boolean,
-        divider: Boolean,
-        extraSlot:  Boolean,
-        fontSize: {
-            type: [String, Number],
-        },
+        title: String, // 标题文本
+        icon: String, // 主图标（左侧文字前）
+        statusIcon:String, // 状态图标（左侧文字后）
+        actionIcon: String, // 动作图标（右侧）
+        subtitle: String, // 左侧副文本
+        guideText: String,  // 右侧引导文本
+        mulText: String,  // 右侧额外文本
+        isActive: Boolean,  // 是否激活选择状态
+        type:  String,   // 列表项类型   信息列表四个尺寸 L(56固定)\M(48自适应)\S(40自适应)\XS(32自适应)  common(通用列表) check(勾选列表)
+        arrowIcon:  String,  // 右箭头图标名称
+        showBadge :  Boolean,   // 是否显示徽标,默认是 小点
+        divider: Boolean,  // 是否显示分割线
     },
     data() {
         return {
-            name: ""
         };
     },
     computed: {
@@ -78,55 +73,48 @@ export default {
             return [
                 {
                     [`${prefixCls}-${this.type}`]: this.type,
-                    [`${prefixCls}-${this.type}--active`]: this.activeSelect,
-                    [`${prefixCls}-${this.type}-double`]: this.subText,
+                    [`${prefixCls}-${this.type}--active`]: this.isActive,
                     'vd-hairline--bottom': this.divider,
                 }
             ];
         },
-        leftIconClasses() {
+        listLeftClasses() {
             return [
                 {
-                    [`${prefixCls}-${this.type}__icon--left`]: this.type
+                    [`${prefixCls}-common--left`]: this.type
                 }
             ];
         },
-        leftCusIconClasses() {
+        iconClasses() {
             return [
                 {
                     [`${prefixCls}-${this.type}__icon--leftcus`]: this.type
                 }
             ];
         },
-        listLeftClasses() {
-            return [
-                {
-                    [`${prefixCls}-common--left`]: this.type
-                }
-            ];
-        },
         contentClasses() {
             return [
                 {
-                    [`${prefixCls}-content-${this.type}`]: this.type
+                    [`${prefixCls}-content-${this.type}`]: this.type === 'common',
                 }
             ];
         },
         innerTitleClasses() {
             return [
                 {
-                    [`${prefixCls}-${this.type}__title`]: this.type
+                    [`${prefixCls}-${this.type}__title`]: this.type,
+                    [`${prefixCls}-${this.type}__title--with-subtitle`] : this.subtitle
                 }
             ];
         },
-        subTextClasses() {
+        subtitleClasses() {
             return [
                 {
-                    [`${prefixCls}-${this.type}__subtext`]: this.type
+                    [`${prefixCls}-${this.type}__subtitle`]: this.type
                 }
             ];
         },
-        rightIconClasses() {
+        statusIconClasses() {
             return [
                 {
                     [`${prefixCls}-${this.type}__icon--right`]: this.type
@@ -144,8 +132,8 @@ export default {
     mounted() {
     },
     methods: {
-        toggleActiveSelect() {
-            this.$emit('toggle-active', !this.activeSelect);
+        handleToggleActive() {
+            this.$emit('toggle-active', !this.isActive);
         }
     },
     watch: {

package/dist/components/list/style.less

@@ -23,24 +23,10 @@
         align-items: flex-start;
     }
 
-    // &-inner__title{
-    //     color: var(--color-title-head);
-    // }
-
-    &__subtext {
-        margin-block-start: calc(var(--spacing-title-subtitle-margin_top) * 1px);
-        color: var(--color-title-text);
-    }
-
-    &-arrow {
-        // color:var(--color-title-icon_arrow);
+    &__arrow {
         display: flex;
         margin-inline-start: calc(var(--spacing-list-info_icon-margin_y) * 1px);
-
-        .vd-iconfont {
-            font-size: calc(var(--icon-small) * 1px);
-            color: var(--text-color-h2);
-        }
+        color: var(--text-color-h2);
     }
 
     &__multext {
@@ -49,16 +35,11 @@
         color: var(--text-color-h1);
     }
 
-    &-xs {
+    &-xsmall {    
         padding-block-start: calc(var(--spacing-list-info_s-padding_top) * 1px);
         padding-block-end: calc(var(--spacing-list-info_s-padding_bottom) * 1px);
-        // &__icon--left{
-        //     margin-inline-end: calc(var(--spacing-title-primary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-primary) * 1px);  
-        // }
 
         &__icon--right {
-            font-size: 16px;
             color: var(--text-color-h2);
         }
 
@@ -74,24 +55,13 @@
             font-weight: var(--en-single-f-c-r-fontWeight);
             color: var(--text-color-h1);
         }
-
-        // &__subtext{
-        //     font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-        //     font-weight: var(--en-single-f-c-r-fontWeight);
-        // }
     }
 
-    &-s {
+    &-small {
         padding-block-start: calc(var(--spacing-list-info_m-padding_top) * 1px);
         padding-block-end: calc(var(--spacing-list-info_m-padding_bottom) * 1px);
 
-        // &__icon--left{
-        //     margin-inline-end: calc(var(--spacing-title-secondary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-secondary) * 1px);
-        // }
-
         &__icon--right {
-            font-size: 16px;
             color: var(--text-color-h2);
         }
 
@@ -107,25 +77,13 @@
             font-weight: var(--en-single-f-c-s-fontWeight);
             color: var(--text-color-h1);
         }
-
-        // &__subtext{
-        //     font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        //     font-weight: var(--en-single-f-b-r-fontWeight);
-        // }
     }
 
-    &-m {
+    &-medium {
         padding-block-start: calc(var(--spacing-list-info_l-padding_top) * 1px);
         padding-block-end: calc(var(--spacing-list-info_l-padding_bottom) * 1px);
 
-        // &__icon--left{
-        //     margin-inline-end: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-tertiary) * 1px);
-        // }
-
         &__icon--right {
-            // margin-inline-start: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
-            font-size: 16px;
             color: var(--text-color-h2);
         }
 
@@ -142,22 +100,12 @@
             color: var(--text-color-h1);
         }
 
-        // &__subtext{
-        //     font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        //     font-weight: var(--en-single-f-b-r-fontSize);
-        // }
     }
 
-    &-l {
+    &-large {
         height: calc(var(--height-super-large) * 1px);
 
-        // &__icon--left{
-        //     margin-inline-end: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-quaternary) * 1px);
-        // }
-
         &__icon--right {
-            font-size: 16px;
             color: var(--text-color-h2);
         }
 
@@ -169,16 +117,11 @@
         }
 
         &__text--right {
-            text-align: end;
             font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
             font-weight: var(--en-single-f-d-s-fontWeight);
             color: var(--text-color-h1);
         }
 
-        // &__subtext{
-        //     font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
-        //     font-weight: var(--en-single-f-a-r-fontSize);
-        // }
     }
 
     &-common {
@@ -192,50 +135,37 @@
             display: flex;
             align-items: center;
         }
-
-
         &__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{
-        //     margin-inline-end: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-quaternary) * 1px);
-        // }
-
-        // &__icon--right{
-        //     margin-inline-start: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
-        //     font-size: calc(var(--icon-title-quaternary) * 1px);
-        // }
-
         &__title {
-            // word-break: break-all;
-            // text-overflow: ellipsis;
-            // display: -webkit-box;
-            // -webkit-box-orient: vertical;
-            // -webkit-line-clamp: 2; /* 超出几行省略 */
-            // overflow: hidden;
             color: var(--color-list-title);
-            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-            font-weight: var(--en-single-f-d-s-fontWeight);
+            font-size: calc(var(--en-multi-f-d-s-fontSize) * 1px);
+            font-weight: var(--en-multi-f-d-s-fontWeight);
+            line-height: calc(var(--en-multi-f-d-s-lineHeight) * 1px);
+
+            &--with-subtitle{
+                line-height: inherit;
+                font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+                font-weight: var(--en-single-f-d-s-fontWeight);
+            }
         }
 
         &__text--right {
-            text-align: end;
             margin-inline-start: calc(var(--spacing-list-common_describe-margin_xy) * 1px);
             font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
             font-weight: var(--en-single-f-c-r-fontWeight);
             color: var(--color-list-text);
-
         }
 
-        &__subtext {
-            line-height: 21px;
+        &__subtitle {
+            margin-block-start:calc(var(--spacing-list-common_describe-margin_xy)* 1px);
             color: var(--color-list-text);
-            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-            font-weight: var(--en-single-f-c-r-fontWeight);
+            font-size: calc(var(--en-multi-f-c-r-fontSize) * 1px);
+            font-weight: var(--en-multi-f-c-r-fontWeight);
+            line-height: calc(var(--en-multi-f-c-r-lineHeight) * 1px);
         }
 
         &__badge {
@@ -274,13 +204,11 @@
 
         &__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: var(--text-color-h2);
     }

package/dist/components/loading/img_status_loading_white_ani.svg

@@ -0,0 +1,155 @@
+<svg
+fill="none"
+width='100%'
+height='100%'
+viewBox="0 0 32 32"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+  <defs>
+      <style type="text/css">
+        <![CDATA[
+          @keyframes loading-animate1 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            20% {
+              fill-opacity: 1;
+            }
+            26% {
+              fill-opacity: 0.32;
+            }
+            32% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes loading-animate2 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            12% {
+              fill-opacity: 0.16;
+            }
+            22% {
+              fill-opacity: 1;
+            }
+            31% {
+              fill-opacity: 0.32;
+            }
+            37% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes loading-animate3 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            20% {
+              fill-opacity: 0.16;
+            }
+            30% {
+              fill-opacity: 1;
+            }
+            36% {
+              fill-opacity: 0.32;
+            }
+            42% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          @keyframes loading-animate4 {
+            0% {
+              fill-opacity: 0.16;
+            }
+            25% {
+              fill-opacity: 0.16;
+            }
+            35% {
+              fill-opacity: 1;
+            }
+            41% {
+              fill-opacity: 0.32;
+            }
+            47% {
+              fill-opacity: 0.16;
+            }
+            100% {
+              fill-opacity: 0.16;
+            }
+          }
+
+          .loading-part-1,
+          .loading-part-2,
+          .loading-part-3,
+          .loading-part-4 {
+            animation-duration: 1s;
+            animation-delay: 0s;
+            animation-timing-function: cubic-bezier(0.5, 0, 1, 1);
+            animation-iteration-count: infinite;
+          }
+
+          .loading-part-1 {
+            animation-name: loading-animate1;
+          }
+
+          .loading-part-2 {
+            animation-name: loading-animate2;
+          }
+
+          .loading-part-3 {
+            animation-name: loading-animate3;
+          }
+
+          .loading-part-4 {
+            animation-name: loading-animate4;
+          }
+        ]]>
+      </style>
+    </defs>
+  <g>
+    <path
+      class="loading-part-1"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6 32.0001L9.72003 28.209C9.95076 27.9739 10.0803 27.655 10.0803 27.3225V16.2236L6.36035 20.0147C6.12963 20.2498 6 20.5687 6 20.9012V32.0001Z"
+      fill-opacity="0.16"
+      fill="#FFFFFF"
+    />
+    <path
+      class="loading-part-2"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.3068 26.559L15.0269 22.768C15.2576 22.5329 15.3872 22.214 15.3872 21.8815V2.71126L11.6672 6.50233C11.4364 6.73746 11.3068 7.05636 11.3068 7.38889V26.559Z"
+      fill-opacity="0.16"
+      fill="#FFFFFF"
+    />
+    <path
+      class="loading-part-3"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M16.6255 29.2742L20.3455 25.4832C20.5762 25.248 20.7059 24.9292 20.7059 24.5966V5.42644L16.9858 9.21751C16.7552 9.4526 16.6255 9.77154 16.6255 10.104V29.2742Z"
+      fill="#FFFFFF"
+      fill-opacity="0.16"
+    />
+    <path
+      class="loading-part-4"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21.9196 15.7765L25.6396 11.9854C25.8703 11.7503 26 11.4314 26 11.0989V0L22.2799 3.79107C22.0492 4.02617 21.9196 4.3451 21.9196 4.67759V15.7765Z"
+      fill="#FFFFFF"
+      fill-opacity="0.16"
+    />
+  </g>
+</svg>