vdesign-ui 0.2.1 → 0.2.2

package/dist/components/tabs/style.less

@@ -5,48 +5,45 @@
   &__wrap {
     position: relative;
     width: 100%;
-    // background-color: #fff;  
   }
 
   &-primary {
     position: relative;
     display: inline-block;
     cursor: pointer;
-    padding-inline-start: calc(var(--spacing-tab-primary-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-tab-primary-padding_right) * 1px);
+    padding-inline-start: var(--spacing-tab-primary-padding_left);
+    padding-inline-end: var(--spacing-tab-primary-padding_right);
     color: var(--color-tab-primary-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);
-
+  
     &-bar {
       position: relative;
-      // display: flex;
       white-space: nowrap;
-      padding-inline-start: calc(var(--spacing-tab-primary-margin_left)*1px);
-      height: calc(var(--height-super-large)*1px);
-      line-height: calc(var(--height-super-large)*1px);
+      padding-inline-start: var(--spacing-tab-primary-margin_left);
+      height: var(--height-super-large);
+      line-height: var(--height-super-large);
     }
-
+  
     &-active {
       color: var(--color-tab-primary-text-active);
-      font-size: calc(var(--en-single-f-e-s-fontSize)* 1px);
+      font-size: var(--en-single-f-e-s-fontSize);
       font-weight: var(--en-single-f-e-s-fontWeight);
-
-
+  
       &::before {
         content: "";
         bottom: 11px;
-        height: calc(var(--height-tab-primary-bar) * 1px);
-        width: calc(var(--width-tab-primary-bar) * 1px);
+        height: var(--height-tab-primary-bar);
+        width: var(--width-tab-primary-bar);
         display: block;
         position: absolute;
         background-color: var(--color-tab-primary-bar-active);
         left: 50%;
         transform: translateX(-50%);
-        border-radius: calc(var(--radius-tab-primary_bar) * 1px);
+        border-radius: var(--radius-tab-primary_bar);
       }
     }
-  }
+  }  
 
   &-card {
     min-width: 1%;
@@ -58,28 +55,28 @@
     cursor: pointer;
     text-align: center;
     color: var(--color-tab-primary-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);
-
+  
     &-bar {
       position: relative;
       display: flex;
       padding-inline-start: 20px;
       padding-inline-end: 20px;
-      height: calc(var(--height-super-large)*1px);
-      line-height: calc(var(--height-super-large)*1px);
+      height: var(--height-super-large);
+      line-height: var(--height-super-large);
     }
-
+  
     &-active {
       color: var(--color-tab-primary-text-active);
-      font-size: calc(var(--en-single-f-e-s-fontSize)* 1px);
+      font-size: var(--en-single-f-e-s-fontSize);
       font-weight: var(--en-single-f-e-s-fontWeight);
-
+  
       &::before {
         content: "";
         bottom: 11px;
-        height: calc(var(--height-tab-primary-bar) * 1px);
-        width: calc(var(--width-tab-primary-bar) * 1px);
+        height: var(--height-tab-primary-bar);
+        width: var(--width-tab-primary-bar);
         display: block;
         position: absolute;
         background-color: var(--color-tab-primary-bar-active);
@@ -89,42 +86,42 @@
       }
     }
   }
-
+  
   &-secondary {
     position: relative;
     display: inline-block;
     cursor: pointer;
-    margin-inline-start: calc(var(--spacing-tab-secondary-padding_left) * 1px);
-    margin-inline-end: calc(var(--spacing-tab-secondary-padding_right) * 1px);
+    margin-inline-start: var(--spacing-tab-secondary-padding_left);
+    margin-inline-end: var(--spacing-tab-secondary-padding_right);
     color: var(--color-tab-primary-text-default);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+    font-size: var(--en-single-f-c-r-fontSize);
     font-weight: var(--en-single-f-c-r-fontWeigh);
 
     &-bar {
       display: flex;
       align-items: center;
       position: relative;
-      padding-inline-start: calc(var(--spacing-tab-secondary-margin_left) * 1px);
-      height: calc(var(--height-tab-secondary) * 1px);
-      line-height: calc(var(--height-tab-secondary) * 1px);
+      padding-inline-start: var(--spacing-tab-secondary-margin_left);
+      height: var(--height-tab-secondary);
+      line-height: var(--height-tab-secondary);
     }
 
     &-active {
       color: var(--color-tab-primary-text-active);
-      font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+      font-size: var(--en-single-f-c-s-fontSize);
       font-weight: var(--en-single-f-c-s-fontWeight);
 
       &::before {
         content: "";
         bottom: 0;
-        height: calc(var(--height-tab-secondary-bar) * 1px);
+        height: var(--height-tab-secondary-bar);
         display: block;
         position: absolute;
         background-color: var(--color-tab-secondary-bar-active);
         left: 0;
         right: 0;
         width: 100%;
-        border-radius: calc(var(--radius-tab-secondary-bar_top) * 1px) calc(var(--radius-tab-secondary-bar_top) * 1px) calc(var(--radius-tab-secondary-bar_bottom) * 1px) calc(var(--radius-tab-secondary-bar_bottom) * 1px);
+        border-radius: var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_top) var(--radius-tab-secondary-bar_bottom) var(--radius-tab-secondary-bar_bottom);
       }
     }
   }
@@ -134,41 +131,40 @@
     display: inline-block;
     cursor: pointer;
     vertical-align: middle;
-    height: calc(var(--height-tab-capsule_btn) * 1px);
-    line-height: calc(var(--height-tab-capsule_btn) * 1px);
-    padding-inline-start: calc(var(--spacing-tab-capsule_btn-padding_left) * 1px);
-    padding-inline-end: calc(var(--spacing-tab-capsule_btn-padding_right) * 1px);
-    margin-inline-start: calc(var(--spacing-tab-capsule_btn-margin_right) * 1px);
-    margin-inline-end: calc(var(--spacing-tab-capsule_btn-margin_right) * 1px);
+    height: var(--height-tab-capsule_btn);
+    line-height: var(--height-tab-capsule_btn);
+    padding-inline-start: var(--spacing-tab-capsule_btn-padding_left);
+    padding-inline-end: var(--spacing-tab-capsule_btn-padding_right);
+    margin-inline-start: var(--spacing-tab-capsule_btn-margin_right);
+    margin-inline-end: var(--spacing-tab-capsule_btn-margin_right);
     background-color: var(--color-tab-capsule_btn-bg-default);
     color: var(--color-tab-capsule-text-default);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+    font-size: var(--en-single-f-c-r-fontSize);
     font-weight: var(--en-single-f-c-r-fontWeight);
-    border-radius: calc(var(--radius-tab-capsule_button) * 1px);
-
+    border-radius: var(--radius-tab-capsule_button);
+  
     &-bar {
       position: relative;
-      // display: flex;
       white-space: nowrap;
       align-items: center;
-      padding-inline-start: calc(var(--spacing-tab-capsule-margin_left) * 1px);
-      height: calc(var(--height-tab-capsule) * 1px);
-      line-height: calc(var(--height-tab-capsule) * 1px);
+      padding-inline-start: var(--spacing-tab-capsule-margin_left);
+      height: var(--height-tab-capsule);
+      line-height: var(--height-tab-capsule);
     }
-
+  
     &-active {
       color: var(--color-tab-capsule-text-active);
-      font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
+      font-size: var(--en-single-f-c-s-fontSize);
       font-weight: var(--en-single-f-c-s-fontWeight);
       background-color: var(--color-tab-capsule_btn-bg-active);
-
+  
       .@{tabs-prefix-cls}-arrow {
         color: var(--color-tab-filter_down-active);
         transform: rotate(180deg);
       }
     }
-
   }
+  
 
   &-selector-l {
     flex: 1;
@@ -176,67 +172,66 @@
     display: inline-block;
     text-align: center;
     cursor: pointer;
-    height: calc(var(--height-tab-selector_l_btn) * 1px);
-    line-height: calc(var(--height-tab-selector_l_btn) * 1px);
+    height: var(--height-tab-selector_l_btn);
+    line-height: var(--height-tab-selector_l_btn);
     color: var(--color-tab-selector-text-default);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+    font-size: var(--en-single-f-c-r-fontSize);
     font-weight: var(--en-single-f-c-r-fontWeight);
-
+  
     &-bar {
       position: relative;
       display: flex;
-      // background-color: #F7F8F9;
       background-color: var(--color-tab-selector-bg-default);
-      border-radius: calc(var(--radius-tab-selector_card) * 1px);
-      padding-inline-start: calc(var(--spacing-tab-selector-margin_left) * 1px);
-      padding-inline-end: calc(var(--spacing-tab-selector-margin_right) * 1px);
-      padding-block-start: calc(var(--spacing-tab-selector-margin_top) * 1px);
-      padding-block-end: calc(var(--spacing-tab-selector-margin_bottom) * 1px);
+      border-radius: var(--radius-tab-selector_card);
+      padding-inline-start: var(--spacing-tab-selector-margin_left);
+      padding-inline-end: var(--spacing-tab-selector-margin_right);
+      padding-block-start: var(--spacing-tab-selector-margin_top);
+      padding-block-end: var(--spacing-tab-selector-margin_bottom);
     }
-
+  
     &-active {
       color: var(--color-tab-selector-text-active);
-      font-size: calc(var(--en-single-f-c-s-fontSize)* 1px);
+      font-size: var(--en-single-f-c-s-fontSize);
       font-weight: var(--en-single-f-c-s-fontWeight);
       background-color: var(--color-tab-selector-bg-active);
       box-shadow: var(--shadow-s1);
-      border-radius: calc(var(--radius-tab-selector_card) * 1px);
+      border-radius: var(--radius-tab-selector_card);
     }
   }
-
+  
   &-selector-m {
     flex: 1;
     position: relative;
     display: inline-block;
     text-align: center;
     cursor: pointer;
-    height: calc(var(--height-tab-selector_m_btn)*1px);
-    line-height: calc(var(--height-tab-selector_m_btn)*1px);
+    height: var(--height-tab-selector_m_btn);
+    line-height: var(--height-tab-selector_m_btn);
     color: var(--color-tab-selector-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);
-
+  
     &-bar {
       position: relative;
       display: flex;
-      // background-color: #F7F8F9;
       background-color: var(--color-tab-selector-bg-default);
-      border-radius: calc(var(--radius-tab-selector_card) * 1px);
-      padding-inline-start: calc(var(--spacing-tab-selector-margin_left) * 1px);
-      padding-inline-end: calc(var(--spacing-tab-selector-margin_right) * 1px);
-      padding-block-start: calc(var(--spacing-tab-selector-margin_top) * 1px);
-      padding-block-end: calc(var(--spacing-tab-selector-margin_bottom) * 1px);
+      border-radius: var(--radius-tab-selector_card);
+      padding-inline-start: var(--spacing-tab-selector-margin_left);
+      padding-inline-end: var(--spacing-tab-selector-margin_right);
+      padding-block-start: var(--spacing-tab-selector-margin_top);
+      padding-block-end: var(--spacing-tab-selector-margin_bottom);
     }
-
+  
     &-active {
       color: var(--color-tab-selector-text-active);
-      font-size: calc(var(--en-single-f-b-s-fontSize) * 1px);
+      font-size: var(--en-single-f-b-s-fontSize);
       font-weight: var(--en-single-f-b-s-fontWeight);
       background-color: var(--color-tab-selector-bg-active);
       box-shadow: var(--shadow-s1);
-      border-radius: calc(var(--radius-tab-selector_card) * 1px);
+      border-radius: var(--radius-tab-selector_card);
     }
   }
+  
 
   &-filter {
     flex: 1;
@@ -244,60 +239,57 @@
     cursor: pointer;
     text-align: center;
     color: var(--color-tab-filter-text-default);
-    font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+    font-size: var(--en-single-f-c-r-fontSize);
     font-weight: var(--en-single-f-c-r-fontWeight);
-
+  
     &-bar {
       position: relative;
       display: flex;
-      height: calc(var(--height-tab-filter)*1px);
-      line-height: calc(var(--height-tab-filter)*1px);
-      padding-inline-start: calc(var(--spacing-tab-filter-margin_y) * 1px);
-      padding-inline-end: calc(var(--spacing-tab-filter-margin_y) * 1px);
+      height: var(--height-tab-filter);
+      line-height: var(--height-tab-filter);
+      padding-inline-start: var(--spacing-tab-filter-margin_y);
+      padding-inline-end: var(--spacing-tab-filter-margin_y);
     }
-
+  
     &-active {
       color: var(--color-tab-filter-text-active);
-      font-size: calc(var(--en-single-f-c-s-fontSize)* 1px);
+      font-size: var(--en-single-f-c-s-fontSize);
       font-weight: var(--en-single-f-c-s-fontWeight);
-
+  
       .@{tabs-prefix-cls}-arrow {
         color: var(--color-tab-filter_down);
         transform: rotate(180deg);
       }
     }
   }
-
+  
   &-click-filter {
     flex: 1;
     position: relative;
     cursor: pointer;
     text-align: center;
     color: var(--color-tab-double_click_filter-text-default);
-    font-size: calc(var(--en-single-f-c-r-fontSize)* 1px);
+    font-size: var(--en-single-f-c-r-fontSize);
     font-weight: var(--en-single-f-c-r-fontWeight);
-
+  
     &-bar {
       position: relative;
       display: flex;
-      height: calc(var(--height-tab-filter)*1px);
-      line-height: calc(var(--height-tab-filter)*1px);
+      height: var(--height-tab-filter);
+      line-height: var(--height-tab-filter);
     }
-
+  
     &-active {
       color: var(--color-tab-double_click_filter-text-active);
-      font-size: calc(var(--en-single-f-c-s-fontSize)* 1px);
+      font-size: var(--en-single-f-c-s-fontSize);
       font-weight: var(--en-single-f-c-s-fontWeight);
     }
   }
+  
 
   &-menu-btn {
     cursor: pointer;
-    // position: absolute;
-    // top: 50%;
-    // transform: translateY(-50%)!important;
-    // right: 0;
-    font-size: calc(var(--icon-large) * 1px) !important;
+    font-size: var(--icon-large)!important;
   }
 
   &-text-cell {
@@ -309,7 +301,7 @@
   &-arrow {
     display: inline-block;
     vertical-align: -1px;
-    font-size: calc(var(--icon-small) * 1px) !important;
+    font-size: var(--icon-small) !important;
     color: var(--color-tab-filter_down);
   }
 
@@ -328,8 +320,8 @@
     &--right {
       position: relative;
       display: flex;
-      height: calc(var(--icon-large) * 1px);
-      padding-inline-end: calc(var(--spacing-tab-primary_icon-margin_right) * 1px);
+      height: var(--icon-large);
+      padding-inline-end: var(--spacing-tab-primary_icon-margin_right);
       color: var(--text-color-h1);
 
       &::before {
@@ -355,7 +347,7 @@
     overflow-x: auto;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
-    padding-inline-end: calc(var(--spacing-tab-primary_icon-margin_right) * 1px);
+    padding-inline-end: var(--spacing-tab-primary_icon-margin_right);
 
     &::-webkit-scrollbar {
       display: none;

package/dist/components/tag/style.less

@@ -3,21 +3,21 @@
 .@{tag-prefix-cls}{
     display: inline-flex;
     align-items: center;
-    border-radius: calc(var(--radius-tag-bg) * 1px);
-    padding: 0 calc(var(--spacing-tag-padding_y) * 1px);
-
-    &--s{
-        font-size: calc(var(--en-single-f-b-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-b-s-fontWeight);
-        height: calc(var(--height-tag-s) * 1px);
+    border-radius: var(--radius-tag-bg);
+    padding: 0 var(--spacing-tag-padding_y);
+    
+    &--s {
+      font-size: var(--en-single-f-b-s-fontSize);
+      font-weight: var(--en-single-f-b-s-fontWeight);
+      height: var(--height-tag-s);
     }
-
-    &--l{
-        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-b-r-fontWeight);
-        height: calc(var(--height-tag-m) * 1px);
+    
+    &--l {
+      font-size: var(--en-single-f-b-r-fontSize);
+      font-weight: var(--en-single-f-b-r-fontWeight);
+      height: var(--height-tag-m);
     }
-
+    
 
 
     &--white{
@@ -26,12 +26,12 @@
 
         &__border{
             background-color:transparent;
-            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);
             color: var(--color-tag-default_border-text);
             &::after{
                 border-color: var(--color-tag-default-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
             }
         }
     }
@@ -42,12 +42,12 @@
 
         &__border{
             background-color:transparent;
-            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);
             color: var(--color-tag-dark_border-text);
             &::after{
                 border-color: var(--color-tag-dark-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
 
             }
         }
@@ -59,11 +59,11 @@
 
         &__border{
             background-color:transparent;
-            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);
             &::after{
                 border-color: var(--color-tag-blue-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
 
             }
         }
@@ -75,11 +75,11 @@
 
         &__border{
             background-color:transparent;
-            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);
             &::after{
                 border-color: var(--color-tag-cyan-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
 
             }
         }
@@ -93,11 +93,11 @@
 
         &__border{
             background-color:transparent;
-            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);
             &::after{
                 border-color: var(--color-tag-green-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
 
             }
         }
@@ -110,11 +110,11 @@
 
         &__border{
             background-color:transparent;
-            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);
             &::after{
                 border-color: var(--color-tag-olive-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
 
             }
         }
@@ -128,11 +128,11 @@
 
         &__border{
             background-color:transparent;
-            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);
             &::after{
                 border-color: var(--color-tag-yellow-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
 
             }
         }
@@ -145,11 +145,11 @@
 
         &__border{
             background-color:transparent;
-            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);
             &::after{
                 border-color: var(--color-tag-orange-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
 
             }
         }
@@ -161,11 +161,11 @@
 
         &__border{
             background-color:transparent;
-            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);
             &::after{
                 border-color: var(--color-tag-red-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
 
             }
         }
@@ -177,11 +177,11 @@
 
         &__border{
             background-color:transparent;
-            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);
             &::after{
                 border-color: var(--color-tag-pink-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
 
             }
         }
@@ -194,11 +194,11 @@
 
         &__border{
             background-color:transparent;
-            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);
             &::after{
                 border-color: var(--color-tag-purple-border);
-                border-radius: calc(var(--radius-tag-bg) * 2px);
+                border-radius: calc(var(--radius-tag-bg) * 2);
 
             }
         }

package/dist/components/title/index.vue

@@ -17,10 +17,14 @@
     </div>
 </template>
 <script>
+import VdIcon from '../icon';
 const prefixCls = 'vd-title';
 
 export default {
     name: 'vd-title',
+    components: {
+        VdIcon
+    },
     props: {
         type: {
             type: String,