vdesign-ui 0.2.0 → 0.2.2

package/dist/components/step-item/style.less

@@ -8,7 +8,7 @@
     width: 100%;
     display: flex;
     justify-content: center;
-    padding-block-start: calc((var(--spacing-steps-horizontal-padding_x) + var(--icon-steps-size) + var(--spacing-steps-horizontal_icon-margin_bottom)) * 1px);
+    padding-block-start: calc(var(--spacing-steps-horizontal-padding_x) + var(--icon-steps-size) + var(--spacing-steps-horizontal_icon-margin_bottom));
 
     .vd-step-u-dot {
       position: absolute;
@@ -19,19 +19,19 @@
       justify-content: center;
       align-items: center;
       color: inherit;
-      width: calc(var(--icon-steps-size) * 1px);
-      height: calc(var(--icon-steps-size) * 1px);
-      inset-block-start: calc(var(--spacing-steps-horizontal-padding_x) * 1px);
+      width: var(--icon-steps-size);
+      height: var(--icon-steps-size);
+      inset-block-start: var(--spacing-steps-horizontal-padding_x);
 
       .vd-iconfont {
         color: inherit;
-        font-size: calc(var(--icon-steps-size) * 1px);
+        font-size: var(--icon-steps-size);
       }
 
       &::before {
         content: "";
-        width: calc(var(--icon-steps-size) * 0.5px);
-        height: calc(var(--icon-steps-size) * 0.5px);
+        width: calc(var(--icon-steps-size) * 0.5);
+        height: calc(var(--icon-steps-size) * 0.5);
         border-radius: 999em;
         overflow: hidden;
         background-color: var(--bg-color-1);
@@ -42,17 +42,17 @@
 
     .vd-step-u-line {
       position: absolute;
-      inset-block-start: calc((var(--spacing-steps-horizontal-padding_x) + var(--icon-steps-size)/2) * 1px);
+      inset-block-start: calc(var(--spacing-steps-horizontal-padding_x) + var(--icon-steps-size)/2);
       inset-inline-end: 0;
       z-index: 1;
       width: 100%;
-      height: calc(var(--height-steps-border-default) * 1px);
+      height: var(--height-steps-border-default);
       background: linear-gradient(to left,
           transparent 0%,
           transparent 50%,
           var(--color-steps-border-default) 50%,
           var(--color-steps-border-default) 100%);
-      background-size: 5px calc(var(--height-steps-border-default) * 1px);
+      background-size: 5px var(--height-steps-border-default);
       background-repeat: repeat-x;
     }
 
@@ -62,9 +62,9 @@
       text-align: center;
       // not_started
       color: var(--color-steps-text-not_started);
-      font-size: calc(var(--en-multi-f-c-r-fontSize) * 1px);
+      font-size: var(--en-multi-f-c-r-fontSize);
       font-weight: var(--en-multi-f-c-r-fontWeight);
-      line-height: calc(var(--en-multi-f-c-r-lineHeight) * 1px);
+      line-height: var(--en-multi-f-c-r-lineHeight);
 
       &__title {
         overflow: hidden;
@@ -80,9 +80,9 @@
         -webkit-line-clamp: 3;
         // description_text
         color: var(--color-steps-description_text);
-        font-size: calc(var(--en-multi-f-b-r-fontSize) * 1px);
+        font-size: var(--en-multi-f-b-r-fontSize);
         font-weight: var(--en-multi-f-b-r-fontWeight);
-        line-height: calc(var(--en-multi-f-b-r-lineHeight) * 1px);
+        line-height: var(--en-multi-f-b-r-lineHeight);
       }
     }
 
@@ -90,9 +90,9 @@
 
       .vd-step-u-text {
         color: var(--color-steps-text-complete);
-        font-size: calc(var(--en-multi-f-c-r-fontSize) * 1px);
+        font-size: var(--en-multi-f-c-r-fontSize);
         font-weight: var(--en-multi-f-c-r-fontWeight);
-        line-height: calc(var(--en-multi-f-c-r-lineHeight) * 1px);
+        line-height: var(--en-multi-f-c-r-lineHeight);
       }
 
       .vd-step-u-dot {
@@ -102,7 +102,7 @@
       }
 
       .vd-step-u-line {
-        height: calc(var(--height-steps-border-hover) * 1px);
+        height: var(--height-steps-border-hover);
         background: var(--color-steps-border-hover);
       }
     }
@@ -115,9 +115,9 @@
 
       .vd-step-u-text {
         color: var(--color-steps-text-afoot);
-        font-size: calc(var(--en-multi-f-c-s-fontSize) * 1px);
+        font-size: var(--en-multi-f-c-s-fontSize);
         font-weight: var(--en-multi-f-c-s-fontWeight);
-        line-height: calc(var(--en-multi-f-c-s-lineHeight) * 1px);
+        line-height: var(--en-multi-f-c-s-lineHeight);
       }
 
       .vd-step-u-line::after {
@@ -126,7 +126,7 @@
         inset-block-start: 0;
         inset-inline-start: 0;
         width: 50%;
-        height: calc(var(--height-steps-border-hover) * 1px);
+        height: var(--height-steps-border-hover);
         background: var(--color-steps-border-hover);
       }
     }
@@ -139,9 +139,9 @@
 
       .vd-step-u-text {
         color: var(--color-steps-text-warning);
-        font-size: calc(var(--en-multi-f-c-s-fontSize) * 1px);
+        font-size: var(--en-multi-f-c-s-fontSize);
         font-weight: var(--en-multi-f-c-s-fontWeight);
-        line-height: calc(var(--en-multi-f-c-s-lineHeight) * 1px);
+        line-height: var(--en-multi-f-c-s-lineHeight);
       }
 
       .vd-step-u-line::after {
@@ -150,7 +150,7 @@
         inset-block-start: 0;
         inset-inline-start: 0;
         width: 50%;
-        height: calc(var(--height-steps-border-hover) * 1px);
+        height: var(--height-steps-border-hover);
         background: var(--color-steps-border-hover);
       }
     }
@@ -159,33 +159,33 @@
   // vertical
   &.vd-step-vertical {
     width: 100%;
-    padding-inline-start: calc((var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size) + var(--spacing-steps-vertical_icon-margin_right)) * 1px);
+    padding-inline-start: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size) + var(--spacing-steps-vertical_icon-margin_right));
 
     &:not(:last-child) {
-      padding-block-end: calc(var(--spacing-steps-vertical_description_text-margin_bottom) * 1px);
+      padding-block-end: var(--spacing-steps-vertical_description_text-margin_bottom);
     }
 
     .vd-step-u-dot {
       position: absolute;
       inset-block-start: 0;
-      inset-inline-start: calc(var(--spacing-steps-vertical-padding_y) * 1px);
+      inset-inline-start: var(--spacing-steps-vertical-padding_y);
       z-index: 2;
       display: flex;
       justify-content: center;
       align-items: center;
       color: inherit;
-      width: calc(var(--icon-steps-size) * 1px);
-      height: calc(var(--icon-steps-size) * 1px);
+      width: var(--icon-steps-size);
+      height: var(--icon-steps-size);
 
       .vd-iconfont {
         color: inherit;
-        font-size: calc(var(--icon-steps-size) * 1px);
+        font-size: var(--icon-steps-size);
       }
 
       &::before {
         content: "";
-        width: calc(var(--icon-steps-size) * 0.5px);
-        height: calc(var(--icon-steps-size) * 0.5px);
+        width: calc(var(--icon-steps-size) * 0.5);
+        height: calc(var(--icon-steps-size) * 0.5);
         border-radius: 999em;
         overflow: hidden;
         background-color: var(--bg-color-1);
@@ -197,9 +197,9 @@
     .vd-step-u-line {
       position: absolute;
       z-index: 1;
-      inset-block-start: calc((var(--icon-steps-size)/2) * 1px);
-      inset-inline-start: calc((var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size)/2) * 1px);
-      width: calc(var(--height-steps-border-default) * 1px);
+      inset-block-start: calc(var(--icon-steps-size)/2);
+      inset-inline-start: calc(var(--spacing-steps-vertical-padding_y) + var(--icon-steps-size)/2);
+      width: var(--height-steps-border-default);
       height: 100%;
       background: linear-gradient(to bottom,
           transparent 0%,
@@ -216,9 +216,9 @@
       text-align: start;
       // not_started
       color: var(--color-steps-text-not_started);
-      font-size: calc(var(--en-multi-f-c-r-fontSize) * 1px);
+      font-size: var(--en-multi-f-c-r-fontSize);
       font-weight: var(--en-multi-f-c-r-fontWeight);
-      line-height: calc(var(--en-multi-f-c-r-lineHeight) * 1px);
+      line-height: var(--en-multi-f-c-r-lineHeight);
 
       &__title {
         overflow: hidden;
@@ -234,19 +234,20 @@
         -webkit-line-clamp: 3;
         // description_text
         color: var(--color-steps-description_text);
-        font-size: calc(var(--en-multi-f-b-r-fontSize) * 1px);
+        font-size: var(--en-multi-f-b-r-fontSize);
         font-weight: var(--en-multi-f-b-r-fontWeight);
-        line-height: calc(var(--en-multi-f-b-r-lineHeight) * 1px);
+        line-height: var(--en-multi-f-b-r-lineHeight);
       }
     }
 
+
     &.vd-step-active {
 
       .vd-step-u-text {
         color: var(--color-steps-text-complete);
-        font-size: calc(var(--en-multi-f-c-r-fontSize) * 1px);
+        font-size: var(--en-multi-f-c-r-fontSize);
         font-weight: var(--en-multi-f-c-r-fontWeight);
-        line-height: calc(var(--en-multi-f-c-r-lineHeight) * 1px);
+        line-height: var(--en-multi-f-c-r-lineHeight);
       }
 
       .vd-step-u-dot {
@@ -262,29 +263,29 @@
         inset-block-start: 0;
         inset-inline-start: 0;
         height: 100%;
-        width: calc(var(--height-steps-border-default) * 1px);
+        width: var(--height-steps-border-default);
         background: var(--color-steps-border-hover);
       }
 
       // 复杂 css 条件，但:has兼容性不够
       &:not(:has(+ :is(.vd-step-active, .vd-step-afoot, .vd-step-warning))) {
         .vd-step-u-line::after {
-          height: 50%;
+          height: 50% !important;
         }
       }
     }
 
 
-    &.vd-step-afoot {
-      .u-line::after {
+    &.vd-step-warning {
+      .vd-step-u-line::after {
         height: 100%;
       }
 
       .vd-step-u-text {
-        color: var(--color-steps-text-afoot);
-        font-size: calc(var(--en-multi-f-c-s-fontSize) * 1px);
+        color: var(--color-steps-text-warning);
+        font-size: var(--en-multi-f-c-s-fontSize);
         font-weight: var(--en-multi-f-c-s-fontWeight);
-        line-height: calc(var(--en-multi-f-c-s-lineHeight) * 1px);
+        line-height: var(--en-multi-f-c-s-lineHeight);
       }
 
       .vd-step-u-dot::before {
@@ -298,16 +299,17 @@
       }
     }
 
-    &.vd-step-warning {
-      .vd-step-u-line::after {
+
+    &.vd-step-afoot {
+      .u-line::after {
         height: 100%;
       }
 
       .vd-step-u-text {
-        color: var(--color-steps-text-warning);
-        font-size: calc(var(--en-multi-f-c-s-fontSize) * 1px);
+        color: var(--color-steps-text-afoot);
+        font-size: var(--en-multi-f-c-s-fontSize);
         font-weight: var(--en-multi-f-c-s-fontWeight);
-        line-height: calc(var(--en-multi-f-c-s-lineHeight) * 1px);
+        line-height: var(--en-multi-f-c-s-lineHeight);
       }
 
       .vd-step-u-dot::before {
@@ -328,25 +330,24 @@
     width: 100%;
     display: flex;
     justify-content: center;
-    padding-top: calc(var(--spacing-steps-basic-padding_top) * 1px);
-    padding-bottom: calc(var(--spacing-steps-basic-padding_bottom) * 1px);
-    margin-inline-start: calc(var(--spacing-steps-basic-padding_y) * 1px);
+    padding-top: var(--spacing-steps-basic-padding_top);
+    padding-bottom: var(--spacing-steps-basic-padding_bottom);
+    margin-inline-start: var(--spacing-steps-basic-padding_y);
 
     &:last-child {
-      margin-inline-end: calc(var(--spacing-steps-basic-padding_y) * 1px);
+      margin-inline-end: var(--spacing-steps-basic-padding_y);
     }
 
     .vd-step-u-line {
       width: 100%;
-      height: calc(var(--height-steps-basic-default) * 1px);
-      border-radius: calc(var(--radius-steps-basic) * 1px);
+      height: var(--height-steps-basic-default);
+      border-radius: var(--radius-steps-basic);
       background: var(--color-steps-basic-default);
     }
 
     &.vd-step-active {
-
       .vd-step-u-line {
-        height: calc(var(--height-steps-basic-hover) * 1px);
+        height: var(--height-steps-basic-hover);
         background: var(--color-steps-basic-hover);
       }
     }

package/dist/components/{input/stepper → stepper}/index.vue

@@ -19,11 +19,15 @@
 </template>
 
 <script>
-import languageMixin from '@p/components/mixins/languageMixin.js';
+import VdButton from '../button';
+import languageMixin from '../mixins/languageMixin.js';
 
 const prefixCls = 'vd-stepper';
 export default {
     mixins: [languageMixin],
+    components: {
+        VdButton,
+    },
     name: 'vd-stepper',
     props: {
         value: null,

package/dist/components/switch/style.less

@@ -4,21 +4,21 @@
   display: inline-block;
   position: relative;
   box-sizing: border-box;
-  width: calc(var(--width-switch-bg) * 1px);
-  height: calc(var(--height-switch-bg) * 1px);
-  border-radius: calc(var(--radius-switch-bg) * 1px);
+  width: var(--width-switch-bg);
+  height: var(--height-switch-bg);
+  border-radius: var(--radius-switch-bg);
   background: var(--color-switch-off_bg-default);
   cursor: pointer;
 
   &-round {
     box-sizing: border-box;
     position: absolute;
-    top: calc(var(--height-switch-bg) * -0.5px);
+    top: calc(var(--height-switch-bg) * -0.5);
     left: 0;
     transition: transform .3s;
-    width: calc(var(--height-switch-button) * 1px);
-    height: calc(var(--height-switch-button) * 1px);
-    border-radius: calc(var(--radius-switch-button) * 1px);
+    width: var(--height-switch-button);
+    height: var(--height-switch-button);
+    border-radius: var(--radius-switch-button);
     border: 1px solid var(--color-switch-off_button_border-default);
     background: var(--color-switch-off_button_bg-default);
   }
@@ -28,7 +28,7 @@
     background: var(--color-switch-on_bg-default);
 
     .@{prefix}-round {
-      transform: translateX(calc(var(--height-switch-button) * 1px));
+      transform: translateX(var(--height-switch-button));
       background: var(--color-switch-on_button_bg-default);
     }
   }

package/dist/components/tab/index.js

@@ -0,0 +1,7 @@
+import Tab from './index.vue';
+
+Tab.install = function (Vue) {
+  Vue.component(Tab.name, Tab);
+};
+
+export default Tab;

package/dist/components/tabs/index.vue

@@ -20,9 +20,13 @@
 </template>
 
 <script>
+import VdIcon from "../icon";
 const prefixCls = "vd-tabs";
 export default {
   name: "vd-tabs",
+  components: {
+    VdIcon,
+  },
   props: {
     value: [String, Number],
     tabsType: {