vdesign-ui 0.2.1 → 0.2.2

package/dist/components/list/style.less

@@ -1,7 +1,5 @@
 @title-prefix-cls: vd-list;
-
 .@{title-prefix-cls} {
-
     position: relative;
     display: flex;
     align-items: center;
@@ -25,196 +23,191 @@
 
     &__arrow {
         display: flex;
-        margin-inline-start: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+        margin-inline-start: var(--spacing-list-info_icon-margin_y);
         color: var(--text-color-h2);
     }
 
     &__multext {
-        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);
         color: var(--text-color-h1);
     }
 
     &-xsmall {    
-        padding-block-start: calc(var(--spacing-list-info_s-padding_top) * 1px);
-        padding-block-end: calc(var(--spacing-list-info_s-padding_bottom) * 1px);
+        padding-block-start: var(--spacing-list-info_s-padding_top);
+        padding-block-end: var(--spacing-list-info_s-padding_bottom);
 
         &__icon--right {
             color: var(--text-color-h2);
         }
 
         &__title {
-            margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+            margin-inline-end: var(--spacing-list-info_icon-margin_y);
             color: var(--text-color-h2);
-            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--right {
-            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);
             color: var(--text-color-h1);
         }
     }
 
     &-small {
-        padding-block-start: calc(var(--spacing-list-info_m-padding_top) * 1px);
-        padding-block-end: calc(var(--spacing-list-info_m-padding_bottom) * 1px);
+        padding-block-start: var(--spacing-list-info_m-padding_top);
+        padding-block-end: var(--spacing-list-info_m-padding_bottom);
 
         &__icon--right {
             color: var(--text-color-h2);
         }
 
         &__title {
-            margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+            margin-inline-end: var(--spacing-list-info_icon-margin_y);
             color: var(--text-color-h1);
-            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--right {
-            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);
             color: var(--text-color-h1);
         }
     }
 
     &-medium {
-        padding-block-start: calc(var(--spacing-list-info_l-padding_top) * 1px);
-        padding-block-end: calc(var(--spacing-list-info_l-padding_bottom) * 1px);
+        padding-block-start: var(--spacing-list-info_l-padding_top);
+        padding-block-end: var(--spacing-list-info_l-padding_bottom);
 
         &__icon--right {
             color: var(--text-color-h2);
         }
 
         &__title {
-            margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+            margin-inline-end: var(--spacing-list-info_icon-margin_y);
             color: var(--text-color-h2);
-            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--right {
-            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);
             color: var(--text-color-h1);
         }
-
     }
 
     &-large {
-        height: calc(var(--height-super-large) * 1px);
+        height: var(--height-super-large);
 
         &__icon--right {
             color: var(--text-color-h2);
         }
 
         &__title {
-            margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+            margin-inline-end: var(--spacing-list-info_icon-margin_y);
             color: var(--text-color-h1);
-            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--right {
-            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(--text-color-h1);
         }
-
     }
 
     &-common {
-        padding-block-start: calc(var(--spacing-list-common-padding_x) * 1px);
-        padding-block-end: calc(var(--spacing-list-common-padding_x) * 1px);
-        padding-inline-start: calc(var(--spacing-list-common-padding_y) * 1px);
-        padding-inline-end: calc(var(--spacing-list-common-padding_y) * 1px);
-
+        padding-block-start: var(--spacing-list-common-padding_x);
+        padding-block-end: var(--spacing-list-common-padding_x);
+        padding-inline-start: var(--spacing-list-common-padding_y);
+        padding-inline-end: var(--spacing-list-common-padding_y);
 
         &--left {
             display: flex;
             align-items: center;
         }
         &__icon--leftcus {
-            margin-inline-end: calc(var(--spacing-list-common_icon-margin_right) * 1px);
+            margin-inline-end: var(--spacing-list-common_icon-margin_right);
             color: var(--text-color-h2);
         }
 
         &__title {
             color: var(--color-list-title);
-            font-size: calc(var(--en-multi-f-d-s-fontSize) * 1px);
+            font-size: var(--en-multi-f-d-s-fontSize);
             font-weight: var(--en-multi-f-d-s-fontWeight);
-            line-height: calc(var(--en-multi-f-d-s-lineHeight) * 1px);
+            line-height: var(--en-multi-f-d-s-lineHeight);
 
-            &--with-subtitle{
+            &--with-subtitle {
                 line-height: inherit;
-                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);
             }
         }
 
         &__text--right {
-            margin-inline-start: calc(var(--spacing-list-common_describe-margin_xy) * 1px);
-            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+            margin-inline-start: var(--spacing-list-common_describe-margin_xy);
+            font-size: var(--en-single-f-c-r-fontSize);
             font-weight: var(--en-single-f-c-r-fontWeight);
             color: var(--color-list-text);
         }
 
         &__subtitle {
-            margin-block-start:calc(var(--spacing-list-common_describe-margin_xy)* 1px);
+            margin-block-start: var(--spacing-list-common_describe-margin_xy);
             color: var(--color-list-text);
-            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);
         }
 
         &__badge {
-            margin-inline-start: calc(var(--spacing-list-common_badge-margin_left) * 1px);
+            margin-inline-start: var(--spacing-list-common_badge-margin_left);
         }
     }
 
-
     &-check {
-        padding-block-start: calc(var(--spacing-list-common-padding_x) * 1px);
-        padding-block-end: calc(var(--spacing-list-common-padding_x) * 1px);
+        padding-block-start: var(--spacing-list-common-padding_x);
+        padding-block-end: var(--spacing-list-common-padding_x);
 
         &--active {
-
             .@{title-prefix-cls}-check__select {
-                margin-inline-start: calc(var(--spacing-list-check-margin_left) * 1px);
+                margin-inline-start: var(--spacing-list-check-margin_left);
 
                 .vd-iconfont {
                     transform: scaleX(1) !important;
                     direction: ltr;
-                    font-size: calc(var(--icon-list-check) * 1px);
+                    font-size: var(--icon-list-check);
                 }
             }
 
             .@{title-prefix-cls}-check__title {
-                font-size: calc(var(--en-multi-f-d-s-fontSize) * 1px);
+                font-size: var(--en-multi-f-d-s-fontSize);
                 font-weight: var(--en-multi-f-d-s-fontWeight);
             }
         }
 
         &__title {
             color: var(--color-list-title);
-            font-size: calc(var(--en-multi-f-d-r-fontSize) * 1px);
+            font-size: var(--en-multi-f-d-r-fontSize);
             font-weight: var(--en-multi-f-d-r-fontWeight);
         }
 
         &__icon--leftcus {
-            margin-inline-end: calc(var(--spacing-list-check_icon-margin_right) * 1px);
+            margin-inline-end: var(--spacing-list-check_icon-margin_right);
             color: var(--text-color-h2);
         }
     }
 
     &__icon--extra {
-        margin-inline-end: calc(var(--spacing-list-info_icon-margin_y) * 1px);
+        margin-inline-end: var(--spacing-list-info_icon-margin_y);
         color: var(--text-color-h2);
     }
 
     &__switch {
         display: flex;
-        margin-inline-start: calc(var(--spacing-list-common_switch-margin_left) * 1px);
+        margin-inline-start: var(--spacing-list-common_switch-margin_left);
     }
 }

package/dist/components/loading/style.less

@@ -1,5 +1,4 @@
-
-.vd-loading{
+.vd-loading {
     position: fixed;
     left: 50%;
     top: 50%;
@@ -10,47 +9,46 @@
     flex-direction: column;
     justify-content: center;
     width: fit-content;
-    min-height: calc(var(--height-loading-small) * 1px);
-    min-width: calc(var(--width-loading-small) * 1px);
-    max-width: calc(var(--width-loading-large) * 1px);
+    min-height: var(--height-loading-small);
+    min-width: var(--width-loading-small);
+    max-width: var(--width-loading-large);
     background-color: var(--color-loading-bg);
-    border-radius: calc(var(--radius-loading-size) * 1px);
-    padding: calc(var(--spacing-loading-padding_x) * 1px) calc(var(--spacing-loading-padding_y) * 1px);
-    &__text{
-        margin-block-start: calc(var(--spacing-loading-icon-margin_bottom) * 1px);
-        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+    border-radius: var(--radius-loading-size);
+    padding: var(--spacing-loading-padding_x) var(--spacing-loading-padding_y);
+
+    &__text {
+        margin-block-start: var(--spacing-loading-icon-margin_bottom);
+        font-size: var(--en-single-f-c-r-fontSize);
         font-weight: var(--en-single-f-c-r-fontWeight);
         color: var(--color-loading-text);
     }
 
-    img{
+    img {
         margin: 0 auto;
-        width: calc(var(--icon-loading-size) * 1px);
+        width: var(--icon-loading-size);
     }
 }
 
-
-.vd-refresh{
-
+.vd-refresh {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
 
-    &--large{
-        width: calc(var(--icon-loading-refres_large) * 1px);
-        img{
-            border:0;
+    &--large {
+        width: var(--icon-loading-refres_large);
+
+        img {
+            border: 0;
             max-width: 100%;
         }
     }
-    
-    &--small{
-        width: calc(var(--icon-loading-refres_small ) * 1px);
-        img{
-            border:0;
+
+    &--small {
+        width: var(--icon-loading-refres_small);
+
+        img {
+            border: 0;
             max-width: 100%;
         }
     }
-
-}
-
+}

package/dist/components/mixins/languageMixin.js

@@ -1,13 +1,17 @@
 // src/mixins/languageMixin.js
+import { inBrowser } from '../utils/env';
+
 export default {
   data() {
     return {
-      language: document.documentElement.lang || 'en' // 初始语言
+      language: inBrowser ? document.documentElement.lang || 'en' : 'en' // 初始语言
     }
   },
   mounted() {
-    this.updateLanguage();
-    this.setupLanguageObserver();
+    if (inBrowser) {
+      this.updateLanguage();
+      this.setupLanguageObserver();
+    }
   },
   methods: {
     updateLanguage() {

package/dist/components/mixins/outlineConfigPlugin.js

@@ -1,5 +1,5 @@
 // outlineConfigPlugin.js
-import { inBrowser } from '@p/utils/env'
+import { inBrowser } from '../utils/env'
 // __debug=1&__debug_vdesign_token=1
 const OutlineConfig = {
     install(Vue,  options = {}) {

package/dist/components/mixins/themeMixin.js

@@ -1,29 +1,43 @@
+// import Vue from 'vue'
+import { inBrowser } from '../utils/env';
+
 export const themeMixin = {
     data() {
         return {
-            theme: document.documentElement.getAttribute('theme') || 'light'  // 初始化主题
+            theme: 'light'  // 设置默认主题
         };
     },
     mounted() {
-        this.observeThemeChanges();  // 组件挂载时开始监视主题变化
+        if (inBrowser) {
+            // 在客户端环境中，可以安全地访问 'document'
+            this.theme = document.documentElement.getAttribute('theme') || 'light';
+            this.observeThemeChanges();  // 开始监听主题变化
+        }
     },
     methods: {
         observeThemeChanges() {
-            // 创建一个 MutationObserver 实例
-            const observer = new MutationObserver((mutations) => {
-                mutations.forEach((mutation) => {
-                    // 检查变化的属性是否为 'theme'
-                    if (mutation.attributeName === 'theme') {
-                        // 更新组件的主题
-                        this.theme = document.documentElement.getAttribute('theme') || 'light';
-                    }
+            if (inBrowser) {
+                // 创建一个 MutationObserver 实例
+                const observer = new MutationObserver((mutations) => {
+                    mutations.forEach((mutation) => {
+                        // 检查变化的属性是否为 'theme'
+                        if (mutation.attributeName === 'theme') {
+                            // 更新组件的主题
+                            this.theme = document.documentElement.getAttribute('theme') || 'light';
+                        }
+                    });
                 });
-            });
 
-            // 配置观察器，监视 html 元素的属性变化
-            observer.observe(document.documentElement, {
-                attributes: true  // 仅监视属性变化
-            });
+                // 配置观察器，监视 html 元素的属性变化
+                observer.observe(document.documentElement, {
+                    attributes: true  // 仅监视属性变化
+                });
+
+                // 在组件销毁时断开观察器
+                this.$once('hook:beforeDestroy', () => {
+                    observer.disconnect();
+                });
+            }
         }
     }
 };

package/dist/components/noticebar/index.vue

@@ -66,8 +66,14 @@
 </template>
 
 <script>
-import { inBrowser } from '@p/utils/env'
+import VdIcon from '../icon';
+import VdButton from '../button';
+import { inBrowser } from '../utils/env'
 export default {
+  components: {
+    VdIcon,
+    VdButton,
+  },
   name: 'vd-noticebar',
   props: {
     prefixCls: {