vdesign-ui 0.2.0 → 0.2.2

package/dist/components/skeleton/style.less

@@ -1,186 +1,191 @@
 @skeleton-prefix-cls: vd-skeleton;
 
-.@{skeleton-prefix-cls}{
+.@{skeleton-prefix-cls} {
     display: flex;
-    padding: 0 calc(var(--spacing-base-loose) * 1px);
+    padding: 0 var(--spacing-base-loose);
 
     &__img, &__title, &__button, &__img--s, &__paragraph, &__avatar, &__text,
-    &__stock--data, &__stock--subdatax, &__stock--subdatal, &__stock--center, &__stock--title, &__stock--text,&__stock--content,&__stock--maindata
-    {
+    &__stock--data, &__stock--subdatax, &__stock--subdatal, &__stock--center, &__stock--title, 
+    &__stock--text, &__stock--content, &__stock--maindata {
         background: var(--color-skeleton-bg);
     }
 
     &--animate &__img, &__title, &__button, &__img--s, &__paragraph, &__avatar, &__text,
-    &__stock--data, &__stock--subdatax, &__stock--subdatal, &__stock--center, &__stock--title, &__stock--text,&__stock--content,&__stock--maindata
-    {
-        background: linear-gradient(90deg,var(--color-skeleton-bg) 25%,var(--color-skeleton-loading_gradient-bg-active) 44%,var(--color-skeleton-bg) 88%);
-        // background: linear-gradient(90deg,rgba(247,248,249,1) 25%,rgba(247,248,249,.3)  44%,rgba(247,248,249,1) 88%);
+    &__stock--data, &__stock--subdatax, &__stock--subdatal, &__stock--center, &__stock--title, 
+    &__stock--text, &__stock--content, &__stock--maindata {
+        background: linear-gradient(
+            90deg,
+            var(--color-skeleton-bg) 25%,
+            var(--color-skeleton-loading_gradient-bg-active) 44%,
+            var(--color-skeleton-bg) 88%
+        );
         background-size: 400% 100%;
         animation: skeleton-loading 1.4s ease infinite;
         animation-fill-mode: forwards;
     }
 
-    &__img{
+    &__img {
         width: 100%;
-        height: calc(var(--height-skeleton-img) * 1px);
-        border-radius: calc(var(--radius-skeleton-img) * 1px);
+        height: var(--height-skeleton-img);
+        border-radius: var(--radius-skeleton-img);
     }
 
-    &__title{
-        width: calc(var(--width-skeleton-head) * 1px);
+    &__title {
+        width: var(--width-skeleton-head);
 
-        &--l{
-            height: calc(var(--height-skeleton-text_l) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_l) * 1px);
+        &--l {
+            height: var(--height-skeleton-text_l);
+            border-radius: var(--radius-skeleton-text_l);
         }
-        &--m{
-            height: calc(var(--height-skeleton-text_m) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
+        &--m {
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
         }
-        &--s{
-            height: calc(var(--height-skeleton-text_s) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
+        &--s {
+            height: var(--height-skeleton-text_s);
+            border-radius: var(--radius-skeleton-text_s);
         }
     }
 
-    &__button{
-        width: calc(var(--width-skeleton-button) * 1px);
-        height: calc(var(--height-skeleton-button) * 1px);
-        border-radius: calc(var(--radius-skeleton-button) * 1px);
+    &__button {
+        width: var(--width-skeleton-button);
+        height: var(--height-skeleton-button);
+        border-radius: var(--radius-skeleton-button);
     }
 
-    &__img--s{
-        width: calc(var(--width-skeleton-img_small) * 1px);
-        height: calc(var(--height-skeleton-small_shapes) * 1px);
-        border-radius: calc(var(--radius-skeleton-small_shapes) * 1px);
+    &__img--s {
+        width: var(--width-skeleton-img_small);
+        height: var(--height-skeleton-small_shapes);
+        border-radius: var(--radius-skeleton-small_shapes);
     }
 
-    &__content{
+    &__content {
         width: 100%;
-        .is-last{
+        .is-last {
             width: 80%;
+            margin-block-end: 0;
         }
     }
 
-    &__paragraph{
+    &__paragraph {
         width: 100%;
-        height: calc(var(--height-skeleton-text_s) * 1px);
-        margin-block-end: calc(var(--spacing-skeleton-text-margin_bottom) * 1px);
-        border-radius: calc(var(--radius-skeleton-text_s) * 1px);
+        height: var(--height-skeleton-text_s);
+        margin-block-end: var(--spacing-skeleton-text-margin_bottom);
+        border-radius: var(--radius-skeleton-text_s);
     }
 
-    &__avatar{
+    &__avatar {
         flex-shrink: 0;
         border-radius: 50%;
-        margin-inline-end: calc(var(--spacing-skeleton-avatar-margin_right) * 1px);
+        margin-inline-end: var(--spacing-skeleton-avatar-margin_right);
 
-
-        &--l{
-            width: calc(var(--width-skeleton-avatar_l) * 1px);
-            height: calc(var(--width-skeleton-avatar_l) * 1px);
+        &--l {
+            width: var(--width-skeleton-avatar_l);
+            height: var(--width-skeleton-avatar_l);
         }
-        &--m{
-            width: calc(var(--width-skeleton-avatar_m) * 1px);
-            height: calc(var(--width-skeleton-avatar_m) * 1px);
+        &--m {
+            width: var(--width-skeleton-avatar_m);
+            height: var(--width-skeleton-avatar_m);
         }
-        &--s{
-            width: calc(var(--width-skeleton-avatar_s) * 1px);
-            height: calc(var(--width-skeleton-avatar_s) * 1px);
+        &--s {
+            width: var(--width-skeleton-avatar_s);
+            height: var(--width-skeleton-avatar_s);
         }
     }
 
-    &__text{
-        margin: calc(var(--spacing-skeleton-avatar-margin_bottom) * 1px) 0;
-        width: calc(var(--width-skeleton-avatar_text) * 1px);
-        height: calc(var(--height-skeleton-text_m) * 1px);
-        border-radius: calc(var(--radius-skeleton-text_s) * 1px);
+    &__text {
+        margin: var(--spacing-skeleton-avatar-margin_bottom) 0;
+        width: var(--width-skeleton-avatar_text);
+        height: var(--height-skeleton-text_m);
+        border-radius: var(--radius-skeleton-text_s);
     }
 
-
-    &__stock{
+    &__stock {
         width: 100%;
         display: flex;
         justify-content: space-between;
-        &--left{
+
+        &--left {
             display: flex;
             flex-direction: column;
         }
-        &--data{
-            width: calc(var(--width-skeleton-stock_data_s) * 1px);
-            height: calc(var(--height-skeleton-text_m) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
-        }
-        &--subdatax{
-            margin-block-start: calc(var(--spacing-skeleton-stock-padding_x) * 1px);
-            width: calc(var(--width-skeleton-stock_data_xl) * 1px);
-            height: calc(var(--height-skeleton-text_s) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
-        }
-        &--subdatal{
-            margin-block-start: calc(var(--spacing-skeleton-stock-padding_x) * 1px);
-            width: calc(var(--width-skeleton-stock_data_l) * 1px);
-            height: calc(var(--height-skeleton-text_s) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
-        }
-        &--center{
-            width: calc(var(--width-skeleton-stock_data_m) * 1px);
-            height: calc(var(--height-skeleton-text_l) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
-        }
-
-
-
-        &--right{
-            margin-inline-start: calc(var(--spacing-skeleton-data-padding_y) * 1px);
+        &--data {
+            width: var(--width-skeleton-stock_data_s);
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--subdatax {
+            margin-block-start: var(--spacing-skeleton-stock-padding_x);
+            width: var(--width-skeleton-stock_data_xl);
+            height: var(--height-skeleton-text_s);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--subdatal {
+            margin-block-start: var(--spacing-skeleton-stock-padding_x);
+            width: var(--width-skeleton-stock_data_l);
+            height: var(--height-skeleton-text_s);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--center {
+            width: var(--width-skeleton-stock_data_m);
+            height: var(--height-skeleton-text_l);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--right {
+            margin-inline-start: var(--spacing-skeleton-data-padding_y);
             display: flex;
             align-items: flex-end;
             flex-direction: column;
         }
-
-        &--title{
-            width: calc(var(--width-skeleton-stock_data_l) * 1px);
-            height: calc(var(--height-skeleton-text_m) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
+        &--title {
+            width: var(--width-skeleton-stock_data_l);
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
         }
-        &--text{
-            margin-block-start: calc(var(--spacing-skeleton-stock-padding_x) * 1px);
-            width: calc(var(--width-skeleton-stock_data_s) * 1px);
-            height: calc(var(--height-skeleton-text_s) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
+        &--text {
+            margin-block-start: var(--spacing-skeleton-stock-padding_x);
+            width: var(--width-skeleton-stock_data_s);
+            height: var(--height-skeleton-text_s);
+            border-radius: var(--radius-skeleton-text_s);
         }
-
-        &--content{
+        &--content {
             display: flex;
             align-items: flex-end;
             flex-direction: column;
         }
-
-        &--maindata{
-            width: calc(var(--width-skeleton-stock_data_m) * 1px);
-            height: calc(var(--height-skeleton-text_m) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
+        &--maindata {
+            width: var(--width-skeleton-stock_data_m);
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
         }
-
-
     }
 
-    &--space{
+    &--space {
         display: flex;
         align-items: center;
-        .spacing{
-            margin-inline-start: calc(var(--spacing-skeleton-stock-padding_y) * 1px);
 
+        .spacing {
+            margin-inline-start: var(--spacing-skeleton-stock-padding_y);
         }
     }
 
-    &__equally{
+    &__equally {
         display: flex;
         width: 100%;
-        gap: calc(var(--spacing-skeleton-avatar-margin_right) * 1px);
+        gap: var(--spacing-skeleton-avatar-margin_right);
     }
+}
 
+@keyframes skeleton-loading {
+    0% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
 }
 
+
 @keyframes skeleton-loading {
     0%{
         background-position: 100% 50%;

package/dist/components/slider/index.vue

@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import languageMixin from '@p/components/mixins/languageMixin.js';
+import languageMixin from '../mixins/languageMixin.js';
 
 import draggable from './draggable';
 export default {

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') {