vdesign-ui 0.1.24-beta → 0.2.0-beta

package/dist/components/input/stepper/index.vue

@@ -2,8 +2,15 @@
     <div class="vd-stepper" :class="wrapClasses">
         <vd-button v-if="!position" :class="minusButtonClass" icon="icon_btn_reduce" size="small"
             @click="onChange('minus')"></vd-button>
-        <input type="number" :class="inputClasses" :disabled="disabled" :value="currentValue" :placeholder="placeholder" @input="onInput"
-            @blur="onBlur">
+        <input
+            type="number"
+            :class="inputClasses"
+            :disabled="disabled"
+            :value="currentValue"
+            :placeholder="placeholder"
+            @input="onInput"
+            @blur="onBlur"
+        >
         <vd-button v-if="position === 'right'" class="vd-stepper__minus" icon="icon_btn_reduce" size="small"
             @click="onChange('minus')"></vd-button>
         <vd-button :class="plusButtonClass" icon="icon_btn_add" size="small"
@@ -21,7 +28,7 @@ export default {
     props: {
         value: null,
         integer: Boolean,
-        position:  String,
+        position: String,
         inputCenter: Boolean,
         disabled: Boolean,
         theme: String,
@@ -37,16 +44,21 @@ export default {
             type: [String, Number],
             default: 1
         },
-        placeholder:String
+        placeholder: String
     },
     data() {
-        const value = this.range(this.isDef(this.value) ? this.value : this.defaultValue);
-        if (value !== +this.value) {
-            this.$emit('input', value);
+        let value;
+        if (this.isDef(this.value)) {
+            value = this.range(this.value);
+            if (value !== this.value) {
+                this.$emit('input', value);
+            }
+        } else {
+            value = '';
         }
         return {
             currentValue: value,
-        }
+        };
     },
     computed: {
         inputClasses() {
@@ -60,7 +72,6 @@ export default {
                     [`${prefixCls}--disabled`]: this.disabled,
                     [`${prefixCls}--${this.theme}`]: this.theme,
                     [`${prefixCls}--center`]: this.inputCenter
-
                 }
             ]
         },
@@ -72,13 +83,6 @@ export default {
             const hairlineClass = this.language === 'ar' ? 'vd-hairline--right' : 'vd-hairline--left';
             return `vd-stepper__plus ${hairlineClass}`;
         }
-        // minusDisabled() {
-        //     return this.disabled || this.currentValue <= this.min;
-        // },
-
-        // plusDisabled() {
-        //     return this.disabled || this.currentValue >= this.max;
-        // }
     },
     watch: {
         value(val) {
@@ -86,7 +90,6 @@ export default {
                 this.currentValue = this.format(val);
             }
         },
-
         currentValue(val) {
             this.$emit('input', val);
             this.$emit('change', val);
@@ -94,36 +97,39 @@ export default {
     },
     methods: {
         format(value) {
+            if (value === '' || value === null || value === undefined) {
+                return '';
+            }
             value = String(value).replace(/[^0-9.-]/g, '');
-            return value === '' ? 0 : this.integer ? Math.floor(value) : +value;
+            return this.integer ? Math.floor(value) : +value;
         },
-
         // limit value range
         range(value) {
-            return Math.max(Math.min(this.max, this.format(value)), this.min);
+            value = this.format(value);
+            if (value === '') {
+                return value;
+            }
+            return Math.max(Math.min(this.max, value), this.min);
         },
-
         onInput(event) {
             const { value } = event.target;
             const formatted = this.format(value);
-            if (+value !== formatted) {
+            if (value !== String(formatted)) {
                 event.target.value = formatted;
             }
             this.currentValue = formatted;
         },
-
         onChange(type) {
             if (this[`${type}Disabled`]) {
                 this.$emit('overlimit', type);
                 return;
             }
             const diff = type === 'minus' ? -this.step : +this.step;
-            const value = Math.round((this.currentValue + diff) * 100) / 100;
+            let value = this.currentValue === '' ? 0 : this.currentValue;
+            value = Math.round((value + diff) * 100) / 100;
             this.currentValue = this.range(value);
-
             this.$emit(type);
         },
-
         onBlur(event) {
             this.currentValue = this.range(this.currentValue);
             this.$emit('blur', event);

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,7 +135,6 @@
             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);
         }
 
@@ -144,7 +146,8 @@
                 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);
@@ -154,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);
@@ -239,9 +242,10 @@
 
     .@{input-prefix-cls} {    
             &-search{
-            padding-inline-end: 0;
-            flex: 1;
-        }
+                padding-inline-start: 0;
+                padding-inline-end: 0;
+                flex: 1;
+            }
     }
 
 
@@ -265,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);
@@ -287,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);
     }