vdesign-ui 0.2.1 → 0.2.2

package/dist/components/noticebar/style.less

@@ -5,192 +5,189 @@
   position: relative;
   width: 100%;
   display: flex;
-  min-height: calc(var(--height-noticebar-snackbar) * 1px);
-  padding-inline-start: calc(var(--spacing-noticebar-snackbar-padding_left) * 1px);
-  padding-inline-end: calc(var(--spacing-noticebar-snackbar-padding_right) * 1px);
-  border-radius: calc(var(--radius-noticebar-snackbar) * 1px);
+  min-height: var(--height-noticebar-snackbar);
+  padding-inline-start: var(--spacing-noticebar-snackbar-padding_left);
+  padding-inline-end: var(--spacing-noticebar-snackbar-padding_right);
+  border-radius: var(--radius-noticebar-snackbar);
   background-color: var(--color-noticebar-snackbar_info-bg);
   color: var(--color-noticebar-snackbar_info-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);
   line-height: 1.25;
   z-index: 99;
 
   .vd-iconfont {
-    font-size: calc(var(--icon-noticebar-snackbar) * 1px);
+      font-size: var(--icon-noticebar-snackbar);
 
-    &+.vd-iconfont {
-      margin-inline-start: calc(var(--spacing-noticebar-snackbar_icon-margin_right) * 1px);
-    }
+      &+.vd-iconfont {
+          margin-inline-start: var(--spacing-noticebar-snackbar_icon-margin_right);
+      }
   }
 
   &.@{prefix}-info {
-    background-color: var(--color-noticebar-snackbar_info-bg);
-    color: var(--color-noticebar-snackbar_info-text);
+      background-color: var(--color-noticebar-snackbar_info-bg);
+      color: var(--color-noticebar-snackbar_info-text);
 
-    .vd-iconfont {
-      color: var(--color-noticebar-snackbar_info-icon);
-    }
+      .vd-iconfont {
+          color: var(--color-noticebar-snackbar_info-icon);
+      }
   }
 
   &.@{prefix}-warning {
-    background-color: var(--color-noticebar-snackbar_warning-bg);
-    color: var(--color-noticebar-snackbar_warning-text);
+      background-color: var(--color-noticebar-snackbar_warning-bg);
+      color: var(--color-noticebar-snackbar_warning-text);
 
-    .vd-noticebar-snackbar__content {
-      &::after {
-        background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
-      }
+      .vd-noticebar-snackbar__content {
+          &::after {
+              background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+          }
 
-      &::before {
-        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+          &::before {
+              background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_warning-bg) 90%);
+          }
       }
-    }
 
-    .vd-iconfont {
-      color: var(--color-noticebar-snackbar_warning-icon);
-    }
+      .vd-iconfont {
+          color: var(--color-noticebar-snackbar_warning-icon);
+      }
   }
 
   &.@{prefix}-tips {
-    background-color: var(--color-noticebar-snackbar_tips-bg);
-    color: var(--color-noticebar-snackbar_tips-text);
+      background-color: var(--color-noticebar-snackbar_tips-bg);
+      color: var(--color-noticebar-snackbar_tips-text);
 
-    .vd-noticebar-snackbar__content {
-      &::after {
-        background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
-      }
+      .vd-noticebar-snackbar__content {
+          &::after {
+              background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
+          }
 
-      &::before {
-        background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
+          &::before {
+              background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_tips-bg) 90%);
+          }
       }
-    }
 
-    .vd-iconfont {
-      color: var(--color-noticebar-snackbar_tips-icon);
-    }
+      .vd-iconfont {
+          color: var(--color-noticebar-snackbar_tips-icon);
+      }
   }
 
   &__left,
   &__right {
-    display: flex;
-    align-items: center;
+      display: flex;
+      align-items: center;
   }
 
   &__content {
-    position: relative;
-    flex: 1;
-    margin: auto;
-    width: auto;
-    // padding-inline-start: calc(var(--spacing-noticebar-snackbar-padding_left) * 1px);
-    // padding-inline-end: calc(var(--spacing-noticebar-snackbar-padding_right) * 1px);
-    white-space: nowrap;
-    overflow: hidden;
-    margin-inline-end: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
+      position: relative;
+      flex: 1;
+      margin: auto;
+      width: auto;
+      white-space: nowrap;
+      overflow: hidden;
+      margin-inline-end: var(--spacing-noticebar-snackbar_text-margin_right);
 
-    &::after {
-      content: "";
-      width: calc(var(--spacing-noticebar-snackbar-padding_left) * 1px);
-      position: absolute;
-      inset-block: 0;
-      inset-inline-start: 0;
-      background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
-      z-index: 1;
-    }
+      &::after {
+          content: "";
+          width: var(--spacing-noticebar-snackbar-padding_left);
+          position: absolute;
+          inset-block: 0;
+          inset-inline-start: 0;
+          background-image: linear-gradient(270deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
+          z-index: 1;
+      }
 
-    &::before {
-      content: "";
-      width: calc(var(--spacing-noticebar-snackbar-padding_right) * 1px);
-      position: absolute;
-      inset-block: 0;
-      inset-inline-end: 0;
-      z-index: 1;
-      background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
-    }
+      &::before {
+          content: "";
+          width: var(--spacing-noticebar-snackbar-padding_right);
+          position: absolute;
+          inset-block: 0;
+          inset-inline-end: 0;
+          z-index: 1;
+          background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), var(--color-noticebar-snackbar_info-bg) 90%);
+      }
 
-    &--animate {
-      display: inline-block;
-      transition-timing-function: linear;
-    }
+      &--animate {
+          display: inline-block;
+          transition-timing-function: linear;
+      }
   }
 
   &__multi {
-    white-space: normal;
-    padding-top: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
-    padding-bottom: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
+      white-space: normal;
+      padding-top: var(--spacing-noticebar-snackbar_text-margin_right);
+      padding-bottom: var(--spacing-noticebar-snackbar_text-margin_right);
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
   }
-
 }
 
+
 .@{prefix}-toast {
   box-sizing: border-box;
   position: relative;
   display: inline-flex;
   max-width: 100%;
-  min-height: calc(var(--height-noticebar-snackbar) * 1px);
-  padding-inline-start: calc(var(--spacing-noticebar-toast-padding_left) * 1px);
-  padding-inline-end: calc(var(--spacing-noticebar-toast-padding_right) * 1px);
-  border-radius: calc(var(--radius-noticebar-toast) * 1px);
+  min-height: var(--height-noticebar-snackbar);
+  padding-inline-start: var(--spacing-noticebar-toast-padding_left);
+  padding-inline-end: var(--spacing-noticebar-toast-padding_right);
+  border-radius: var(--radius-noticebar-toast);
   background-color: var(--color-noticebar-toast_info-bg);
   color: var(--color-noticebar-toast_info-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);
   line-height: 1.25;
   z-index: 99;
 
   .vd-iconfont {
-    font-size: calc(var(--icon-noticebar-toast) * 1px);
-    margin-inline-end: calc(var(--spacing-noticebar-toast_icon-margin_right) * 1px);
+      font-size: var(--icon-noticebar-toast);
+      margin-inline-end: var(--spacing-noticebar-toast_icon-margin_right);
   }
 
   [lang='ar'] & .vd-iconfont {
-    transform: scaleX(1);
+      transform: scaleX(1);
   }
 
   &.@{prefix}-info {
-    background-color: var(--color-noticebar-toast_info-bg);
-    color: var(--color-noticebar-toast_info-text);
+      background-color: var(--color-noticebar-toast_info-bg);
+      color: var(--color-noticebar-toast_info-text);
   }
 
   &.@{prefix}-warning {
-    background-color: var(--color-noticebar-snackbar_warning-bg);
-    color: var(--color-noticebar-snackbar_warning-text);
+      background-color: var(--color-noticebar-snackbar_warning-bg);
+      color: var(--color-noticebar-snackbar_warning-text);
 
-    .vd-iconfont {
-      color: var(--color-noticebar-toast_warning-icon);
-    }
+      .vd-iconfont {
+          color: var(--color-noticebar-toast_warning-icon);
+      }
   }
 
   &__left,
   &__right {
-    display: flex;
-    align-items: center;
+      display: flex;
+      align-items: center;
   }
 
   &__content {
-    flex: 1;
-    margin: auto;
-    width: auto;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-inline-end: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
+      flex: 1;
+      margin: auto;
+      width: auto;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-inline-end: var(--spacing-noticebar-snackbar_text-margin_right);
 
-    &--animate {
-      // padding-inline-start: 100%;
-      display: inline-block;
-      transition-timing-function: linear;
-    }
+      &--animate {
+          display: inline-block;
+          transition-timing-function: linear;
+      }
   }
 
   &__multi {
-    white-space: normal;
-    padding-top: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
-    padding-bottom: calc(var(--spacing-noticebar-snackbar_text-margin_right) * 1px);
+      white-space: normal;
+      padding-top: var(--spacing-noticebar-snackbar_text-margin_right);
+      padding-bottom: var(--spacing-noticebar-snackbar_text-margin_right);
   }
 }
 
@@ -199,22 +196,22 @@
   position: relative;
   width: 100%;
   display: flex;
-  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);
   line-height: 1.25;
   z-index: 99;
 
-  border-radius: calc(var(--radius-noticebar-notification) * 1px);
+  border-radius: var(--radius-noticebar-notification);
   background-color: var(--color-noticebar-notification-bg);
   color: var(--color-noticebar-notification-text);
-  padding-inline-start: calc(var(--spacing-noticebar-notification-padding_left) * 1px);
-  padding-inline-end: calc(var(--spacing-noticebar-notification-padding_right) * 1px);
-  padding-top: calc(var(--spacing-noticebar-notification-padding_top) * 1px);
-  padding-bottom: calc(var(--spacing-noticebar-notification-padding_bottom) * 1px);
+  padding-inline-start: var(--spacing-noticebar-notification-padding_left);
+  padding-inline-end: var(--spacing-noticebar-notification-padding_right);
+  padding-top: var(--spacing-noticebar-notification-padding_top);
+  padding-bottom: var(--spacing-noticebar-notification-padding_bottom);
   box-shadow: var(--shadow-s3);
 
   &.@{prefix}-action {
-    padding-inline-end: calc(var(--spacing-noticebar-notification_button-padding_right) * 1px);
+    padding-inline-end: var(--spacing-noticebar-notification_button-padding_right);
   }
 
   &__content {
@@ -234,9 +231,9 @@
   &__message {
     display: flex;
     justify-content: space-between;
-    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);
-    margin-bottom: calc(var(--spacing-noticebar-notification_title-margin_bottom) * 1px);
+    margin-bottom: var(--spacing-noticebar-notification_title-margin_bottom);
 
     &--title {
       flex: 1;
@@ -248,16 +245,15 @@
     &--tag {
       display: flex;
       align-items: center;
-      margin-inline-start: calc(var(--spacing-extra-tight) * 1px);
-      border-radius: calc(var(--radius-noticebar-notification_tag) * 1px);
-      font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
+      margin-inline-start: var(--spacing-extra-tight);
+      border-radius: var(--radius-noticebar-notification_tag);
+      font-size: var(--en-single-f-a-r-fontSize);
       font-weight: var(--en-single-f-a-r-fontWeight);
-      // 添加间距
-      padding: calc(var(--spacing-extra-tight) * 1px);
-      line-height: calc(var(--en-single-f-a-r-fontSize) * 1px);
+      padding: var(--spacing-extra-tight);
+      line-height: var(--en-single-f-a-r-fontSize);
 
       .vd-iconfont {
-        margin-inline-end: calc(var(--spacing-extra-tight) * 1px);
+        margin-inline-end: var(--spacing-extra-tight);
       }
 
       [lang='ar'] & .vd-iconfont {
@@ -299,11 +295,11 @@
   }
 
   &__button {
-    margin-inline-start: calc(var(--spacing-noticebar-notification-button-margin_left) * 1px);
+    margin-inline-start: var(--spacing-noticebar-notification-button-margin_left);
   }
 
   .vd-iconfont {
-    font-size: calc(var(--icon-noticebar-notification) * 1px);
+    font-size: var(--icon-noticebar-notification);
   }
 }
 

package/dist/components/overlay/index.vue

@@ -7,6 +7,8 @@
 </template>
 
 <script>
+import { inBrowser } from '../utils/env';
+
 export default {
   name: "vd-overlay",
   props: {
@@ -38,8 +40,9 @@ export default {
       type: Boolean,
       default: true
     },
+    // 去掉了HTMLElement类型，改为Object类型
     mountNode: {
-      type: [Object, HTMLElement],
+      type: Object,
       default: null
     }
   },
@@ -51,10 +54,16 @@ export default {
     };
   },
   mounted() {
-    this.targetNode = this.getMountNode();
-    if (this.value) {
-      this.showOverlay();
+    if (inBrowser) {
+      this.targetNode = this.getMountNode();
+      if (this.value) {
+        this.showOverlay();
+      }
     }
+    // this.targetNode = this.getMountNode();
+    // if (this.value) {
+    //   this.showOverlay();
+    // }
   },
   beforeUnmount() {
     this.hideOverlay();
@@ -124,15 +133,29 @@ export default {
         this.unlock();
       });
     },
+    // getMountNode() {
+    //   if (this.mountNode instanceof HTMLElement) {
+    //     return this.mountNode;
+    //   } else if (typeof this.mountNode === 'object' && this.mountNode !== null && this.mountNode.$el instanceof HTMLElement) {
+    //     return this.mountNode.$el;
+    //   } else {
+    //     // 返回当前组件的父节点，确保嵌套时能够正确挂载
+    //     return this.$el.parentNode || document.body;
+    //   }
+    // },
     getMountNode() {
-      if (this.mountNode instanceof HTMLElement) {
-        return this.mountNode;
-      } else if (typeof this.mountNode === 'object' && this.mountNode !== null && this.mountNode.$el instanceof HTMLElement) {
-        return this.mountNode.$el;
-      } else {
-        // 返回当前组件的父节点，确保嵌套时能够正确挂载
-        return this.$el.parentNode || document.body;
+      if (inBrowser) {
+        // 在客户端渲染时检查并返回 mountNode
+        if (this.mountNode instanceof HTMLElement) {
+          return this.mountNode;
+        } else if (typeof this.mountNode === 'object' && this.mountNode !== null && this.mountNode.$el instanceof HTMLElement) {
+          return this.mountNode.$el;
+        } else {
+          return document.body; // 默认挂载到 body
+        }
       }
+      // 在服务端渲染时返回 null 或适当的替代值
+      return null;
     },
     lock() {
       if (this.lockScroll) {

package/dist/components/pagebreak/style.less

@@ -1,43 +1,42 @@
 @pagebreak-prefix-cls: vd-page-break;
 
-
-.@{pagebreak-prefix-cls}{
+.@{pagebreak-prefix-cls} {
     display: inline-flex;
-    gap: calc(var(--spacing-pagebreak-drop-margin_right) * 1px);
-    &__cell{
+    gap: var(--spacing-pagebreak-drop-margin_right);
+
+    &__cell {
         cursor: pointer;
-        width: calc(var(--width-pagebreak-drop) * 1px);
-        height: calc(var(--height-pagebreak-drop) * 1px);
+        width: var(--width-pagebreak-drop);
+        height: var(--height-pagebreak-drop);
         background-color: var(--color-pagebreak-drop-default);
-        border-radius: calc(var(--radius-pagebreak-drop) * 1px);
+        border-radius: var(--radius-pagebreak-drop);
 
-        &--active{
+        &--active {
             background-color: var(--color-pagebreak-drop-active);
         }
     }
 
-
-    &__number{
+    &__number {
         display: flex;
         align-items: center;
-        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);
-        padding: calc(var(--spacing-pagebreak-number-padding_x) * 1px) calc(var(--spacing-pagebreak-number-padding_y) * 1px);
-        border-radius: calc(var(--radius-pagebreak-number_bg) * 1px);
+        padding: var(--spacing-pagebreak-number-padding_x) var(--spacing-pagebreak-number-padding_y);
+        border-radius: var(--radius-pagebreak-number_bg);
         background-color: var(--color-pagebreak-number-bg);
 
-        &--total{
+        &--total {
             color: var(--color-pagebreak-number-text-default);
         }
 
-        &--active{
+        &--active {
             color: var(--color-pagebreak-number-text-active);
         }
 
-        &--line{
-            font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+        &--line {
+            font-size: var(--en-single-f-b-r-fontSize);
             font-weight: var(--en-single-f-b-r-fontWeight);
-            color: var(--color-pagebreak-number-text-default); 
+            color: var(--color-pagebreak-number-text-default);
         }
     }
-}
+}

package/dist/components/popover/index.vue

@@ -32,6 +32,7 @@
 </template>
 
 <script>
+import VdIcon from '../icon';
 import popper from "./vue-popover";
 // 总共12个位置
 const placementArr = [
@@ -50,7 +51,7 @@ const placementArr = [
 ];
 export default {
   name: "vd-popover",
-  components: { popper }, // 注册并使用 vue-popperjs 插件组件
+  components: { popper,VdIcon }, // 注册并使用 vue-popperjs 插件组件
   props: {
     // 12个位置
     placement: {