vdesign-ui 0.2.1 → 0.2.2

package/dist/components/input/style.less

@@ -13,7 +13,7 @@
     }
 
     &--border{
-        margin-inline-end: calc(var(--spacing-input-form_divider-margin_y)* 1px);
+        margin-inline-end: var(--spacing-input-form_divider-margin_y);
     }
     &__control {
         flex: 1;
@@ -23,7 +23,7 @@
         padding: 0;
         background-color: transparent;
         color: var(--color-input-text-active);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+        font-size: var(--en-single-f-d-s-fontSize);
         font-weight: var(--en-single-f-d-s-fontWeight);
         caret-color: var(--color-input-cursor);
 
@@ -61,9 +61,9 @@
     display: flex;
     align-items: center;
     position: relative;
-    padding-inline-start: calc(var(--spacing-input-max_text-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-input-max_text-padding_y) * 1px);
-    height: calc(var(--height-input-bg) * 1px);
+    padding-inline-start: var(--spacing-input-max_text-padding_y);
+    padding-inline-end: var(--spacing-input-max_text-padding_y);
+    height: var(--height-input-bg);
 
     &.vd-hairline--bottom {
         &::after {
@@ -83,7 +83,7 @@
 
     input::-webkit-input-placeholder,
     textarea::-webkit-input-placeholder {
-        font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+        font-size: var(--en-single-f-d-r-fontSize);
         font-weight: var(--en-single-f-d-r-fontWeight);
         color: var(--color-input-text-default);
     }
@@ -99,112 +99,111 @@
         height: auto;
         display: block;
         background-color: var(--color-input-textarea-bg-default);
-        border-radius: calc(var(--radius-input-bg) * 1px);
-        min-height: calc(var(--height-input-textarea) * 1px);
-        padding-inline-start: calc(var(--spacing-input-textarea-padding_y) * 1px);
-        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}-form__right{
+        border-radius: var(--radius-input-bg);
+        min-height: var(--height-input-textarea);
+        padding-inline-start: var(--spacing-input-textarea-padding_y);
+        padding-inline-end: var(--spacing-input-textarea-padding_y);
+        padding-block-start: var(--spacing-input-textarea-padding_x);
+        padding-block-end: var(--spacing-input-textarea-padding_x);
+        font-size: var(--en-single-f-d-s-fontSize);
+    
+        .@{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-size: var(--en-single-f-b-r-fontSize);
                 font-weight: var(--en-single-f-b-r-fontWeight);
-                margin-block-start: calc(var(--spacing-input-textarea_text-margin_down) * 1px);
-
+                margin-block-start: var(--spacing-input-textarea_text-margin_down);
+    
                 &--error {
                     color: var(--color-input-text-wrong);
                 }
             }
         }
-
-    }
+    }    
 
 
     &-form {
         padding-inline-start: 0;
         padding-inline-end: 0;
-        height: calc(var(--height-input-form_text) * 1px);
+        height: var(--height-input-form_text);
 
         &__prefix {
             position: relative;
             color: var(--color-input-text-active);
-            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+            font-size: var(--en-single-f-d-s-fontSize);
             font-weight: var(--en-single-f-d-s-fontWeight);
-            padding-inline-end: calc(var(--spacing-input-form_divider-margin_y) * 1px);
+            padding-inline-end: var(--spacing-input-form_divider-margin_y);
         }
-
+        
         &__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-size: var(--en-single-f-b-r-fontSize);
                 font-weight: var(--en-single-f-b-r-fontWeight);
-                // margin-block-start: 0;
-                margin-inline-start: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
-
+                margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
+        
                 &--error {
                     color: var(--color-input-text-wrong);
                 }
             }
         }
-
+        
         &__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-start: var(--spacing-input-suffix_icon-margin_y);
             color: var(--color-input-text-active);
-            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+            font-size: var(--en-single-f-d-s-fontSize);
             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);
+                font-size: var(--icon-input-clean);
             }
         }
-
+        
         &__append {
             color: var(--color-input-text-default);
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+            font-size: var(--en-single-f-b-r-fontSize);
             font-weight: var(--en-single-f-b-r-fontWeight);
         }
-
+        
         &__password {
             display: flex;
             align-items: center;
             color: var(--color-input-text-active);
-            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+            font-size: var(--en-single-f-d-s-fontSize);
             font-weight: var(--en-single-f-d-s-fontWeight);
-
+        
             &--close {
-                margin-inline-start: calc(var(--spacing-input-suffix_icon-margin_y) * 1px);
-
+                margin-inline-start: var(--spacing-input-suffix_icon-margin_y);
+        
                 .vd-iconfont {
                     color: var(--text-color-h2);
-                    font-size: calc(var(--icon-input-clean) * 1px);
+                    font-size: var(--icon-input-clean);
                 }
             }
-
+        
             &--password {
                 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);
+                margin-inline-start: var(--spacing-input-form_suffix_icon-margin_y);
+                margin-inline-end: var(--spacing-input-suffix_icon-margin_y);
+                font-size: var(--icon-input-form_suffix);
             }
-        }
+        }        
     }
 
     &--bigsize {
-        height: calc(var(--height-input-form_number_text) * 1px);
+        height: var(--height-input-form_number_text);
 
         .@{input-prefix-cls}__control {
-            font-size: calc(var(--en-single-f-g-b-fontSize) * 1px);
+            font-size: var(--en-single-f-g-b-fontSize);
             font-weight: var(--en-single-f-g-b-fontWeight);
         }
     }
@@ -235,43 +234,40 @@
     flex: 1;
     display: flex;
     align-items: center;
-    height: calc(var(--height-input-search_content) * 1px);
-    padding-inline-start: calc(var(--spacing-input-search_textarea-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-input-search_textarea-padding_y) * 1px);
-
+    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);
 
     .@{input-prefix-cls} {    
-            &-search{
-                padding-inline-start: 0;
-                padding-inline-end: 0;
-                flex: 1;
-            }
+        &-search {
+            padding-inline-start: 0;
+            padding-inline-end: 0;
+            flex: 1;
+        }
     }
 
-
     &-content {
         flex: 1;
         display: flex;
         align-items: center;
         background-color: rgba(0, 0, 0, 0.05);
-        padding-inline-start: calc(var(--spacing-input-textarea-padding_y) * 1px);
-        padding-inline-end: calc(var(--spacing-input-textarea-padding_y) * 1px);
-        border-radius: calc(var(--radius-input-bg) * 1px);
+        padding-inline-start: var(--spacing-input-textarea-padding_y);
+        padding-inline-end: var(--spacing-input-textarea-padding_y);
+        border-radius: var(--radius-input-bg);
 
         .@{search-prefix-cls} {
-
             &__control {
                 width: 100%;
                 background-color: transparent;
-                height: calc(var(--height-input-search_bg) * 1px);
+                height: var(--height-input-search_bg);
                 color: var(--color-input-text-active);
-                font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+                font-size: var(--en-single-f-d-s-fontSize);
                 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-size: var(--en-single-f-d-r-fontSize);
                     font-weight: var(--en-single-f-d-r-fontWeight);
                 }
             }
@@ -280,20 +276,19 @@
 
     &__prefix {
         display: flex;
-        padding-inline-end: calc(var(--spacing-input-suffix_icon-margin_y)* 1px);
+        padding-inline-end: var(--spacing-input-suffix_icon-margin_y);
+
         .vd-iconfont {
             vertical-align: middle;
             color: var(--text-color-h3);
-            font-size: calc(var(--icon-input-search) * 1px);
+            font-size: var(--icon-input-search);
         }
     }
 
     &__action {
-        margin-inline-start: calc(var(--spacing-input-search_cancel-margin_left) * 1px);
+        margin-inline-start: var(--spacing-input-search_cancel-margin_left);
         display: flex;
-
     }
-
 }
 
 .@{stepper-prefix-cls} {
@@ -305,50 +300,47 @@
     display: flex;
     align-items: center;
     background-color: var(--color-input-trade-bg);
-    height: calc(var(--height-input-bg) * 1px);
-    padding-inline-start: calc(var(--spacing-input-trade-padding_y) * 1px);
-    padding-inline-end: calc(var(--spacing-input-trade-padding_y) * 1px);
-    border-radius: calc(var(--radius-input-trade_bg) * 1px);
+    height: var(--height-input-bg);
+    padding-inline-start: var(--spacing-input-trade-padding_y);
+    padding-inline-end: var(--spacing-input-trade-padding_y);
+    border-radius: var(--radius-input-trade_bg);
 
     &-input {
         width: 100%;
         padding: 0;
         background-color: transparent;
         color: var(--color-input-text-active);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+        font-size: var(--en-single-f-d-s-fontSize);
         font-weight: var(--en-single-f-d-s-fontWeight);
-        // margin-inline-start: calc(var(--spacing-input-trade_number_input-margin_left) * 1px);
-        margin-inline-end: calc(var(--spacing-input-trade_number_input-margin_left) * 1px);
+        margin-inline-end: var(--spacing-input-trade_number_input-margin_left);
         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-size: var(--en-single-f-d-r-fontSize);
             font-weight: var(--en-single-f-d-r-fontWeight);
         }
-
     }
 
     .@{stepper-prefix-cls}__minus {
         padding-inline-start: 0;
-        padding-inline-end: calc(var(--spacing-input-trade_number_divider-margin_y) * 1px);
+        padding-inline-end: var(--spacing-input-trade_number_divider-margin_y);
         background-color: transparent;
 
         .vd-iconfont {
             color: var(--text-color-h2);
-            font-size: calc(var(--icon-input-trade_number_input_icon) * 1px);
+            font-size: var(--icon-input-trade_number_input_icon);
         }
     }
 
     .@{stepper-prefix-cls}__plus {
-        padding-inline-start: calc(var(--spacing-input-trade_number_divider-margin_y) * 1px);
+        padding-inline-start: var(--spacing-input-trade_number_divider-margin_y);
         padding-inline-end: 0;
-        // padding-inline-end: calc(var(--spacing-input-trade_number_divider-margin_y) * 1px);
         background-color: transparent;
 
         .vd-iconfont {
             color: var(--text-color-h2);
-            font-size: calc(var(--icon-input-trade_number_input_icon) * 1px);
+            font-size: var(--icon-input-trade_number_input_icon);
         }
     }
 
@@ -358,10 +350,9 @@
         .@{stepper-prefix-cls} {
             &-input {
                 text-align: center;
-                margin-inline-start: calc(var(--spacing-input-trade_number_input-margin_left) * 1px);
+                margin-inline-start: var(--spacing-input-trade_number_input-margin_left);
             }
         }
-
     }
 
     &--disabled {
@@ -374,11 +365,9 @@
         }
     }
 
-
     &--gray {
         background-color: var(--bg-color-3);
-        border-radius: calc(var(--radius-input-bg) * 1px);
-
+        border-radius: var(--radius-input-bg);
     }
 
     input[type="number"]::-webkit-inner-spin-button,
@@ -396,7 +385,7 @@
     }
     direction: ltr;
     position: relative;
-    margin: 0 calc(var(--spacing-input-code-padding_y) * 1px);
+    margin: 0 var(--spacing-input-code-padding_y);
     -webkit-user-select: none;
     user-select: none;
 
@@ -405,8 +394,7 @@
         align-items: center;
         width: 100%;
         cursor: pointer;
-        height: calc(var(--height-input-code) * 1px);
-
+        height: var(--height-input-code);
     }
 
     &__item {
@@ -416,11 +404,11 @@
         align-items: center;
         justify-content: center;
         color: var(--color-input-text-active);
-        font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
+        font-size: var(--en-single-f-f-b-fontSize);
         font-weight: var(--en-single-f-f-b-fontWeight);
-        width: calc(var(--width-input-code_number) * 1px);
-        height: calc(var(--height-input-code_number) * 1px);
-        margin-inline-end: calc(var(--spacing-input-code_number-margin_right) * 1px);
+        width: var(--width-input-code_number);
+        height: var(--height-input-code_number);
+        margin-inline-end: var(--spacing-input-code_number-margin_right);
 
         &:last-child {
             margin-inline-end: 0;
@@ -430,11 +418,11 @@
             content: '';
             position: absolute;
             left: 50%;
-            bottom: ~"calc(var(--spacing-input-code_number-margin_bottom) * -1px)";
+            bottom: ~"calc(var(--spacing-input-code_number-margin_bottom) * -1)";
             transform: translateX(-50%);
             background-color: var(--color-input-form-border-default);
-            width: calc(var(--width-input-code_number_line) * 1px);
-            height: calc(var(--height-input-code_number_line) * 1px);
+            width: var(--width-input-code_number_line);
+            height: var(--height-input-code_number_line);
         }
 
         &.vd-password-is-filled {
@@ -452,7 +440,6 @@
             height: 16px;
             background-color: var(--color-input-text-active);
             border-radius: 100%;
-            -webkit-transform: translate(-50%, -50%);
             transform: translate(-50%, -50%);
         }
     }

package/dist/components/list/index.vue

@@ -46,10 +46,15 @@
     </div>
 </template>
 <script>
+
+import VdIcon from '../icon';
 const prefixCls = 'vd-list';
 
 export default {
     name: 'vd-list',
+    components: {
+        VdIcon,
+    },
     props: {
         title: String, // 标题文本
         icon: String, // 主图标（左侧文字前）