vdesign-ui 0.2.1 → 0.2.3

package/dist/components/dialog/style.less

@@ -8,46 +8,44 @@
     transform: translate(-50%, -50%);
     width: 279px;
     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);
+    border-radius: var(--radius-dialog-content);
+    padding-inline-start: var(--spacing-dialog-padding_left);
+    padding-inline-end: var(--spacing-dialog-padding_right);
 
     ::-webkit-scrollbar {
         width: 3px;
     }
 
-
     &__header {
-        padding-block-start: calc(var(--spacing-dialog-padding_top) * 1px);
+        padding-block-start: var(--spacing-dialog-padding_top);
 
         &--img {
-            padding-block-start: calc(var(--spacing-dialog-icon-padding_top) * 1px);
+            padding-block-start: var(--spacing-dialog-icon-padding_top);
 
             &-content {
                 text-align: center;
-                margin-block-end: calc(var(--spacing-dialog-icon_title-margin_top) * 1px);
+                margin-block-end: var(--spacing-dialog-icon_title-margin_top);
             }
         }
-
     }
 
     &__title {
         text-align: center;
-        font-size: calc(var(--en-multi-f-e-s-fontSize) * 1px);
+        font-size: var(--en-multi-f-e-s-fontSize);
         font-weight: var(--en-multi-f-e-s-fontWeight);
-        line-height: calc(var(--en-multi-f-e-s-lineHeight) * 1px);
+        line-height: var(--en-multi-f-e-s-lineHeight);
         color: var(--color-dialog-title);
     }
 
     &__message {
         text-align: center;
         overflow-y: auto;
-        min-height: calc(var(--height-dialog-super_small) * 1px);
-        max-height: calc(var(--height-dialog-super_large) * 1px);
-        margin-block-start: calc(var(--spacing-dialog-title-margin_bottom) * 1px);
-        font-size: calc(var(--en-multi-f-d-r-fontSize) * 1px);
+        min-height: var(--height-dialog-super_small);
+        max-height: var(--height-dialog-super_large);
+        margin-block-start: var(--spacing-dialog-title-margin_bottom);
+        font-size: var(--en-multi-f-d-r-fontSize);
         font-weight: var(--en-multi-f-d-r-fontWeight);
-        line-height: calc(var(--en-multi-f-d-r-lineHeight) * 1px);
+        line-height: var(--en-multi-f-d-r-lineHeight);
         color: var(--color-dialog-text);
 
         &--head {
@@ -57,62 +55,60 @@
     }
 
     &__footer {
-        margin-block-start: calc(var(--spacing-dialog-button-margin_top) * 1px);
+        margin-block-start: var(--spacing-dialog-button-margin_top);
     }
 
     &__btns {
         display: flex;
         justify-content: space-between;
-        padding-block-end: calc(var(--spacing-dialog-padding_bottom) * 1px);
+        padding-block-end: var(--spacing-dialog-padding_bottom);
 
         button {
             flex: 1;
         }
 
-        button+button {
-            margin-inline-start: calc(var(--spacing-dialog-button_double-margin_mid) * 1px);
+        button + button {
+            margin-inline-start: var(--spacing-dialog-button_double-margin_mid);
         }
     }
 
     &__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);
+        padding-block-end: var(--spacing-dialog-padding_bottom);
+        padding-inline-start: var(--spacing-dialog-button_single-margin_left);
+        padding-inline-end: var(--spacing-dialog-button_single-margin_right);
     }
 
     &__btns--text {
         display: flex;
         justify-content: space-between;
-        padding-block-end: calc(var(--spacing-dialog-button_text-padding_bottom) * 1px);
+        padding-block-end: var(--spacing-dialog-button_text-padding_bottom);
 
         button {
             flex: 1;
         }
 
-        button+button {
-            margin-inline-start: calc(var(--spacing-dialog-button_double-margin_mid) * 1px);
+        button + button {
+            margin-inline-start: var(--spacing-dialog-button_double-margin_mid);
         }
     }
 
     &__btn--text-block {
         display: flex;
         justify-content: space-between;
-        padding-block-end: calc(var(--spacing-dialog-button_text-padding_bottom) * 1px);
+        padding-block-end: var(--spacing-dialog-button_text-padding_bottom);
     }
 
     &__btns-block {
-
-        padding-block-end: calc(var(--spacing-dialog-button_text-padding_bottom) * 1px);
+        padding-block-end: var(--spacing-dialog-button_text-padding_bottom);
 
         button {
             flex: 1;
         }
 
-        button+button {
-            margin-block-start: calc(var(--spacing-dialog-button_double-margin_mid) * 1px);
+        button + button {
+            margin-block-start: var(--spacing-dialog-button_double-margin_mid);
         }
     }
-
 }
 
 .vd-overlay {

package/dist/components/divider/style.less

@@ -87,6 +87,6 @@
     &__text {
         font-size: 12px;
         color: rgba(0, 0, 0, 0.3);
-        margin: 0 calc(var(--spacing-tight) * 1px);
+        margin: 0 var(--spacing-tight);
     }
 }

package/dist/components/dropdown/index.vue

@@ -49,10 +49,15 @@
 
 <script>
 import clickoutside from "../mixins/clickoutside.js";
-
+import VdIcon from '../icon';
+import VdButton from '../button';
 const prefixCls = 'vd-dropdown';
 export default {
   name: 'vd-dropdown',
+  components: {
+        VdIcon,
+        VdButton
+    },
   directives: {
     clickoutside
   },

package/dist/components/dropdown/style.less

@@ -16,7 +16,7 @@
   --translate-x: -50%;
 
   position: relative;
-  font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+  font-size: var(--en-single-f-c-r-fontSize);
 
   // 额外加的 btn，token之外的
   &--btn {
@@ -67,171 +67,168 @@
     .@{dropdown-prefix-cls}-menu {
       display: inline-block;
       overflow-y: auto;
-      min-width: calc(var(--width-dropdown-primary_small) * 1px);
-      max-height: calc(var(--height-dropdown-primary_large) * 1px);
+      min-width: var(--width-dropdown-primary_small);
+      max-height: var(--height-dropdown-primary_large);
       background-color: var(--color-dropdown-bg-default);
-      padding-block-start: calc(var(--spacing-dropdown-primary-padding_x) * 1px);
-      padding-block-end: calc(var(--spacing-dropdown-primary-padding_x) * 1px);
-      padding-inline-start: calc(var(--spacing-dropdown-primary-padding_y) * 1px);
-      padding-inline-end: calc(var(--spacing-dropdown-primary-padding_y) * 1px);
+      padding-block-start: var(--spacing-dropdown-primary-padding_x);
+      padding-block-end: var(--spacing-dropdown-primary-padding_x);
+      padding-inline-start: var(--spacing-dropdown-primary-padding_y);
+      padding-inline-end: var(--spacing-dropdown-primary-padding_y);
       box-shadow: var(--shadow-s2);
-      border-radius: calc(var(--radius-dropdown-primary) * 1px);
+      border-radius: var(--radius-dropdown-primary);
     }
-
+  
     .@{dropdown-prefix-cls}-item {
       position: relative;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      height: calc(var(--height-dropdown-primary_item) * 1px);
-      line-height: calc(var(--height-dropdown-primary_item) * 1px);
+      height: var(--height-dropdown-primary_item);
+      line-height: var(--height-dropdown-primary_item);
     }
-
+  
     .@{dropdown-prefix-cls} {
       &-left {
         display: flex;
         align-items: center;
       }
-
+  
       &-text {
         white-space: nowrap;
         color: var(--color-dropdown-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-fontWeight);
       }
-
+  
       &-icon {
-        font-size: calc(var(--icon-dropdown-primary) * 1px);
-        margin-inline-end: calc(var(--spacing-dropdown-primary_icon-margin_right) * 1px);
+        font-size: var(--icon-dropdown-primary);
+        margin-inline-end: var(--spacing-dropdown-primary_icon-margin_right);
       }
-
+  
       &-active-select {
-        font-size: calc(var(--icon-dropdown-primary_select) * 1px);
-        margin-inline-start: calc(var(--spacing-dropdown-primary_icon_select-margin_left) * 1px);
+        font-size: var(--icon-dropdown-primary_select);
+        margin-inline-start: var(--spacing-dropdown-primary_icon_select-margin_left);
         transform: scaleX(1) !important;
         direction: ltr;
       }
-
     }
-
+  
     .@{dropdown-prefix-cls}--active {
       .@{dropdown-prefix-cls}-text {
         color: var(--color-dropdown-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);
       }
     }
-
+  
     .@{dropdown-prefix-cls}--disabled {
       pointer-events: none;
       cursor: not-allowed;
-
+  
       .@{dropdown-prefix-cls}-text {
         color: var(--color-dropdown-primary-text-disable);
-        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);
       }
-
+  
       .@{dropdown-prefix-cls}-icon {
         opacity: var(--opacity-30);
       }
     }
-  }
+  }  
 
   &-secondary {
     .@{dropdown-prefix-cls}-menu {
       display: inline-block;
       overflow-y: auto;
-      max-height: calc(var(--height-dropdown-secondary_large) * 1px);
+      max-height: var(--height-dropdown-secondary_large);
       background-color: var(--color-dropdown-bg-default);
-      padding-block-start: calc(var(--spacing-dropdown-secondary-padding_x) * 1px);
-      padding-block-end: calc(var(--spacing-dropdown-secondary-padding_x) * 1px);
-      padding-inline-start: calc(var(--spacing-dropdown-secondary-padding_y) * 1px);
-      padding-inline-end: calc(var(--spacing-dropdown-secondary-padding_y) * 1px);
+      padding-block-start: var(--spacing-dropdown-secondary-padding_x);
+      padding-block-end: var(--spacing-dropdown-secondary-padding_x);
+      padding-inline-start: var(--spacing-dropdown-secondary-padding_y);
+      padding-inline-end: var(--spacing-dropdown-secondary-padding_y);
       box-shadow: var(--shadow-s2);
-      border-radius: calc(var(--radius-dropdown-secondary) * 1px);
+      border-radius: var(--radius-dropdown-secondary);
     }
-
+  
     .@{dropdown-prefix-cls}-item {
       position: relative;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      height: calc(var(--height-dropdown-secondary_item) * 1px);
-      line-height: calc(var(--height-dropdown-secondary_item) * 1px);
+      height: var(--height-dropdown-secondary_item);
+      line-height: var(--height-dropdown-secondary_item);
     }
-
+  
     .@{dropdown-prefix-cls} {
       &-left {
         display: flex;
         align-items: center;
       }
-
+  
       &-text {
         white-space: nowrap;
         color: var(--color-dropdown-secondary-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);
       }
-
+  
       &-icon {
-        font-size: calc(var(--icon-dropdown-secondary) * 1px);
-        margin-inline-end: calc(var(--spacing-dropdown-secondary_icon-margin_right) * 1px);
+        font-size: var(--icon-dropdown-secondary);
+        margin-inline-end: var(--spacing-dropdown-secondary_icon-margin_right);
       }
-
-
     }
-
+  
     .@{dropdown-prefix-cls}--active {
       .@{dropdown-prefix-cls}-text {
         color: var(--color-dropdown-secondary-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);
       }
     }
-
+  
     .@{dropdown-prefix-cls}--disabled {
       pointer-events: none;
       cursor: not-allowed;
-
+  
       .@{dropdown-prefix-cls}-text {
         color: var(--color-dropdown-secondary-text-disable);
-        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);
       }
-
+  
       .@{dropdown-prefix-cls}-icon {
         opacity: var(--opacity-30);
       }
     }
-  }
+  }  
 
   &-state {
     .@{dropdown-prefix-cls}-menu {
       overflow-y: auto;
-      min-width: calc(var(--width-dropdown-state_small) * 1px);
-      max-height: calc(var(--height-dropdown-state_large) * 1px);
+      min-width: var(--width-dropdown-state_small);
+      max-height: var(--height-dropdown-state_large);
       background-color: var(--color-dropdown-bg-default);
-      padding-block-start: calc(var(--spacing-dropdown-state-padding_x) * 1px);
-      padding-block-end: calc(var(--spacing-dropdown-state-padding_x) * 1px);
-      padding-inline-start: calc(var(--spacing-dropdown-state-padding_y) * 1px);
-      padding-inline-end: calc(var(--spacing-dropdown-state-padding_y) * 1px);
+      padding-block-start: var(--spacing-dropdown-state-padding_x);
+      padding-block-end: var(--spacing-dropdown-state-padding_x);
+      padding-inline-start: var(--spacing-dropdown-state-padding_y);
+      padding-inline-end: var(--spacing-dropdown-state-padding_y);
       box-shadow: var(--shadow-s2);
-      border-radius: calc(var(--radius-dropdown-state) * 1px);
+      border-radius: var(--radius-dropdown-state);
     }
-
+  
     .@{dropdown-prefix-cls}-item {
       position: relative;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      height: calc(var(--height-dropdown-state_item) * 1px);
-      line-height: calc(var(--height-dropdown-state_item) * 1px);
-      padding-inline-start: calc(var(--spacing-dropdown-state_item-padding_y) * 1px);
-      padding-inline-end: calc(var(--spacing-dropdown-state_item-padding_y) * 1px);
-      border-radius: calc(var(--radius-dropdown-state_item) * 1px);
+      height: var(--height-dropdown-state_item);
+      line-height: var(--height-dropdown-state_item);
+      padding-inline-start: var(--spacing-dropdown-state_item-padding_y);
+      padding-inline-end: var(--spacing-dropdown-state_item-padding_y);
+      border-radius: var(--radius-dropdown-state_item);
     }
-
+  
     .@{dropdown-prefix-cls} {
       &-left {
         display: flex;
@@ -239,180 +236,175 @@
         flex: 1;
         overflow: hidden;
       }
-
+  
       &-text {
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
         color: var(--color-dropdown-state-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);
       }
-
+  
       &-icon {
-        font-size: calc(var(--icon-dropdown-state) * 1px);
-        margin-inline-end: calc(var(--spacing-dropdown-state_icon-margin_right) * 1px);
+        font-size: var(--icon-dropdown-state);
+        margin-inline-end: var(--spacing-dropdown-state_icon-margin_right);
       }
-
+  
       &-state-text {
-        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);
-
+  
         &::before {
           content: '';
           display: inline-block;
           border-radius: 50%;
-          width: calc(var(--width-dropdown-state_drop) * 1px);
-          height: calc(var(--width-dropdown-state_drop) * 1px);
-          margin-inline-start: calc(var(--spacing-dropdown-state_drop-margin_left) * 1px);
-          margin-inline-end: calc(var(--spacing-dropdown-state_drop-margin_right) * 1px);
+          width: var(--width-dropdown-state_drop);
+          height: var(--width-dropdown-state_drop);
+          margin-inline-start: var(--spacing-dropdown-state_drop-margin_left);
+          margin-inline-end: var(--spacing-dropdown-state_drop-margin_right);
           background-color: var(--color-dropdown-state-open);
         }
-
+  
         &--open {
           color: var(--color-dropdown-state-open);
-
+  
           &::before {
             background-color: var(--color-dropdown-state-open);
           }
         }
-
+  
         &--preopen {
           color: var(--color-dropdown-state-preopen);
-
+  
           &::before {
             background-color: var(--color-dropdown-state-preopen);
           }
         }
-
+  
         &--close {
           color: var(--color-dropdown-state-close);
-
+  
           &::before {
             background-color: var(--text-color-h3);
           }
         }
-
+  
         &--fusing {
           color: var(--color-dropdown-state-fusing);
-
+  
           &::before {
             background-color: var(--color-dropdown-state-fusing);
           }
         }
-
+  
         &--pre {
           color: var(--color-dropdown-state-pre_market_auction);
-
+  
           &::before {
             background-color: var(--color-dropdown-state-pre_market_auction);
           }
         }
-
+  
         &--last {
           color: var(--color-dropdown-state-last_trading_session);
-
+  
           &::before {
             background-color: var(--color-dropdown-state-last_trading_session);
           }
         }
       }
-
-
     }
-
+  
     .@{dropdown-prefix-cls}--active {
       background: var(--color-dropdown-state-bg-active);
-
+  
       .@{dropdown-prefix-cls}-text {
         color: var(--color-dropdown-state-text-active);
       }
     }
-
+  
     .@{dropdown-prefix-cls}--disabled {
       pointer-events: none;
       cursor: not-allowed;
-
+  
       .@{dropdown-prefix-cls}-text {
-        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);
       }
-
+  
       .@{dropdown-prefix-cls}-icon {
         opacity: var(--opacity-30);
       }
-
     }
   }
 
   &-group {
     .@{dropdown-prefix-cls}-menu {
       overflow-y: auto;
-      min-width: calc(var(--width-dropdown-group_default) * 1px);
-      max-height: calc(var(--height-dropdown-group_large) * 1px);
+      min-width: var(--width-dropdown-group_default);
+      max-height: var(--height-dropdown-group_large);
       background-color: var(--color-dropdown-bg-default);
-      padding-block-start: calc(var(--spacing-dropdown-group-padding_x) * 1px);
-      padding-block-end: calc(var(--spacing-dropdown-group-padding_x) * 1px);
-      padding-inline-start: calc(var(--spacing-dropdown-group-padding_y) * 1px);
-      padding-inline-end: calc(var(--spacing-dropdown-group-padding_y) * 1px);
+      padding-block-start: var(--spacing-dropdown-group-padding_x);
+      padding-block-end: var(--spacing-dropdown-group-padding_x);
+      padding-inline-start: var(--spacing-dropdown-group-padding_y);
+      padding-inline-end: var(--spacing-dropdown-group-padding_y);
       box-shadow: var(--shadow-s2);
-      border-radius: calc(var(--radius-dropdown-group) * 1px);
+      border-radius: var(--radius-dropdown-group);
     }
-
+  
     .@{dropdown-prefix-cls}-item {
       position: relative;
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding-block-start: calc(var(--spacing-dropdown-group_item-padding_top) * 1px);
-      padding-block-end: calc(var(--spacing-dropdown-group_item-padding_bottom) * 1px);
-
+      padding-block-start: var(--spacing-dropdown-group_item-padding_top);
+      padding-block-end: var(--spacing-dropdown-group_item-padding_bottom);
     }
-
+  
     .@{dropdown-prefix-cls} {
       &-left {
         display: flex;
         align-items: center;
       }
-
+  
       &-group-cell {
         display: flex;
         flex-direction: column;
         color: var(--color-dropdown-state-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);
       }
-
+  
       &-text {
         color: var(--color-dropdown-group-title-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);
       }
-
+  
       &-group-sub {
         display: flex;
         align-items: center;
-        margin-block-start: calc(var(--spacing-dropdown-group_text-margin_bottom) * 1px);
+        margin-block-start: var(--spacing-dropdown-group_text-margin_bottom);
       }
-
+  
       &-sub-icon {
-        font-size: calc(var(--icon-dropdown-group) * 1px);
+        font-size: var(--icon-dropdown-group);
         margin-inline-end: 6px;
       }
-
+  
       &-subtext {
         color: var(--color-dropdown-group-text-default);
-        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);
       }
-
+  
       &-multext {
-        margin-block-start: calc(var(--spacing-dropdown-group_text-margin_bottom) * 1px);
+        margin-block-start: var(--spacing-dropdown-group_text-margin_bottom);
       }
-
     }
   }
-
+  
   &--divided {
     .@{dropdown-prefix-cls}-item {
       &:not(:last-child)::after {