vdesign-ui 0.2.1 → 0.2.3

package/dist/components/slider/style.less

@@ -2,67 +2,70 @@
 
 .@{silder-prefix-cls} {
 
-    &__wrap{
+    &__wrap {
         position: relative;
         margin: 7px 0;
-        height: calc(var(--height-slider-track) * 1px);
-        background-color: var(--color-slider-track-default); 
-        border-radius: calc(var(--radius-slider-track) * 1px);
-        &--demonstration{
-            height: calc(var(--height-slider-mark_track) * 1px);
-            border-radius: calc(var(--radius-slider-mark_track) * 1px);
+        height: var(--height-slider-track);
+        background-color: var(--color-slider-track-default);
+        border-radius: var(--radius-slider-track);
+        
+        &--demonstration {
+            height: var(--height-slider-mark_track);
+            border-radius: var(--radius-slider-mark_track);
         }
     }
-    &__bar{
+
+    &__bar {
         position: absolute;
         top: 0;
-        height: calc(var(--height-slider-track) * 1px);
+        height: var(--height-slider-track);
         background-color: var(--color-slider-track-focus);
-        border-radius: calc(var(--radius-slider-track) * 1px);
-
+        border-radius: var(--radius-slider-track);
 
-        &--demonstration{
-            height: calc(var(--height-slider-mark_track) * 1px);
+        &--demonstration {
+            height: var(--height-slider-mark_track);
         }
     }
-    &__button{
+
+    &__button {
         position: absolute;
         left: 0;
         top: 50%;
         transform: translate3d(-50%, -50%, 0);
         cursor: grab;
         border-radius: 50%;
-        width: calc(var(--width-slider-handle) * 1px);
-        height: calc(var(--width-slider-handle) * 1px);
+        width: var(--width-slider-handle);
+        height: var(--width-slider-handle);
         background-color: var(--color-slider-handle-bg);
-        border: calc(var(--width-slider-handle_border) * 1px) solid var(--color-slider-handle_border-default);
+        border: var(--width-slider-handle_border) solid var(--color-slider-handle_border-default);
 
-        &--demonstration{
-            width: calc(var(--width-slider-mark_handle) * 1px);
-            height: calc(var(--height-slider-mark_handle) * 1px);
-            border-radius: calc(var(--radius-slider-mark_handle) * 1px);
-            border: calc(var(--width-slider-mark_handle_border) * 1px) solid var(--color-slider-handle_border-default);
+        &--demonstration {
+            width: var(--width-slider-mark_handle);
+            height: var(--height-slider-mark_handle);
+            border-radius: var(--radius-slider-mark_handle);
+            border: var(--width-slider-mark_handle_border) solid var(--color-slider-handle_border-default);
         }
 
-        &--active{
+        &--active {
             border-color: var(--color-slider-handle_border-focus);
         }
     }
 
-    &__marks{
+    &__marks {
         display: flex;
         justify-content: space-between;
-        margin-block-start: calc(var(--spacing-slider-margin_bottom) * 1px);
-        font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
+        margin-top: var(--spacing-slider-margin_bottom);
+        font-size: var(--en-single-f-a-r-fontSize);
         font-weight: var(--en-single-f-a-r-fontWeight);
         color: var(--color-slider-mark-text);
 
-        &--top{
-            margin-block-start: 0;
-            margin-block-end: calc(var(--spacing-slider-margin_bottom) * 1px);
+        &--top {
+            margin-top: 0;
+            margin-bottom: var(--spacing-slider-margin_bottom);
         }
-        &--active{
-            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
+
+        &--active {
+            font-size: var(--en-single-f-d-s-fontSize);
             font-weight: var(--en-single-f-d-s-fontWeight);
         }
 
@@ -71,25 +74,26 @@
         }
     }
 
-    &__dots{
+    &__dots {
         position: absolute;
         width: 1px;
         height: 3px;
         border-radius: 4px;
         background-color: #fff;
         top: 50%;
-        transform: translate(-50%,-50%);
-        &--active{
+        transform: translate(-50%, -50%);
+
+        &--active {
             height: 5px;
         }
     }
 
-    &__tips{
+    &__tips {
         position: absolute;
         left: 50%;
-        top: calc((var(--height-slider-mark_handle) + 8) * -1px );
+        top: calc(-1 * var(--height-slider-mark_handle) - 8px);
         transform: translateX(-50%);
-        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);
         color: var(--color-slider-mark-text-focus);
     }

package/dist/components/step/style.less

@@ -38,13 +38,12 @@
     display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
-    padding-block-start: calc(var(--spacing-steps-vertical-padding_x) * 1px);
-    padding-block-end: calc(var(--spacing-steps-vertical-padding_x) * 1px);
+    padding-block-start: var(--spacing-steps-vertical-padding_x);
+    padding-block-end: var(--spacing-steps-vertical-padding_x);
 
     .vd-step-item {
 
       &:last-child {
-
         .vd-step-u-line {
           display: none;
         }
@@ -56,4 +55,4 @@
     display: flex;
     justify-content: space-between;
   }
-}
+}

package/dist/components/step-item/index.vue

@@ -29,8 +29,14 @@
 </template>
 
 <script>
+import VdIcon from '../icon';
+import { inBrowser } from '../utils/env';
+
 export default {
   name: 'vd-step-item',
+  components: {
+    VdIcon
+  },
   props: {
     // 索引名称
     name: {
@@ -78,9 +84,11 @@ export default {
     }
   },
   mounted() {
-    const theme = document.querySelector('html').getAttribute('theme')
-    this.currentTheme = theme ? theme : this.currentTheme
-    this.observeThemeChange()
+    if (inBrowser) {
+      const theme = document.querySelector('html').getAttribute('theme');
+      this.currentTheme = theme || this.currentTheme;
+      this.observeThemeChange();
+    }
   },
   watch: {
     // 监听父组件参数
@@ -94,6 +102,7 @@ export default {
   },
   methods: {
     observeThemeChange() {
+      if (!inBrowser) return; // SSR 环境中不执行
       const observer = new MutationObserver(mutations => {
         mutations.forEach(mutation => {
           if (mutation.type === 'attributes' && mutation.attributeName === 'theme') {

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: {