vdesign-ui 0.2.1 → 0.2.2

package/dist/components/title/style.less

@@ -1,194 +1,188 @@
 
 @title-prefix-cls: vd-title;
 
-    .@{title-prefix-cls} {
+.@{title-prefix-cls} {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-inline-start: var(--spacing-title-padding_left);
+    padding-inline-end: var(--spacing-title-padding_right);
+    background-color: var(--bg-color-1);
+
+    &--sticky {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+    }
+
+    &--right {
+        display: flex;
+        align-items: center;
+    }
 
+    &-content {
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding-inline-start: calc(var(--spacing-title-padding_left) * 1px);
-        padding-inline-end: calc(var(--spacing-title-padding_right) * 1px);
-        background-color: var(--bg-color-1);
-    
-        // &--left{
-        //     display: flex;
-        //     flex-direction: column;
-        // }
-
-        &--sticky {
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-    
-        &--right{
-            display: flex;
-            align-items: center;
-        }
-    
-        &-content{
-            display: flex;
-            align-items: center;
-        }
-
-        &-inner__title{
-            color: var(--color-title-head);
-        }
-
-        &__subtext{
-            margin-block-start: calc(var(--spacing-title-subtitle-margin_top) * 1px);
+    }
+
+    &-inner__title {
+        color: var(--color-title-head);
+    }
+
+    &__subtext {
+        margin-block-start: var(--spacing-title-subtitle-margin_top);
+        color: var(--color-title-text);
+    }
+
+    &-arrow {
+        color: var(--color-title-icon_arrow);
+        font-size: var(--icon-title-arrow);
+    }
+
+    &-primary {
+        height: var(--height-title-primary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-primary_icon-margin_y);
+            font-size: var(--icon-title-primary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-primary_icon-margin_y);
+            font-size: var(--icon-title-primary);
+        }
+
+        &__title {
+            font-size: var(--en-single-f-f-b-fontSize);
+            font-weight: var(--en-single-f-f-b-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
             color: var(--color-title-text);
         }
 
-        &-arrow{
-            color:var(--color-title-icon_arrow);
-            font-size: calc(var(--icon-title-arrow) * 1px);
+        &__subtext {
+            font-size: var(--en-single-f-c-r-fontSize);
+            font-weight: var(--en-single-f-c-r-fontWeight);
         }
+    }
 
-        &-primary{
+    &-secondary {
+        height: var(--height-title-secondary);
 
-            height: calc(var(--height-title-primary) * 1px);
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-secondary_icon-margin_y);
+            font-size: var(--icon-title-secondary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-secondary_icon-margin_y);
+            font-size: var(--icon-title-secondary);
+        }
 
-            &__icon--left{
-                margin-inline-end: calc(var(--spacing-title-primary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-primary) * 1px);  
-            }
-
-            &__icon--right{
-                margin-inline-start: calc(var(--spacing-title-primary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-primary) * 1px);   
-            }
-
-            &__title{
-                font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
-                font-weight: var(--en-single-f-f-b-fontWeight);
-            }
-
-            &__text--right{
-                margin-inline-end: calc(var(--spacing-title-text-margin_right) * 1px);
-                font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-c-r-fontWeight);
-                color: var(--color-title-text);
-            }
-            &__subtext{
-                font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-c-r-fontWeight);
-            }
-        }
-
-        &-secondary {
-
-            height: calc(var(--height-title-secondary) * 1px);
-
-            &__icon--left{
-                margin-inline-end: calc(var(--spacing-title-secondary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-secondary) * 1px);
-            }
-
-            &__icon--right{
-                margin-inline-start: calc(var(--spacing-title-secondary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-secondary) * 1px);
-                
-            }
-
-            &__title{
-                font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
-                font-weight: var(--en-single-f-e-s-fontWeight);
-            }
-
-            &__text--right{
-                margin-inline-end: calc(var(--spacing-title-text-margin_right) * 1px);
-                font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-c-r-fontWeight);
-                color: var(--color-title-text);
-            }
-            &__subtext{
-                font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-            }
-        }
-
-        &-tertiary {
-            height: calc(var(--height-title-tertiary) * 1px);
-
-            &__icon--left{
-                margin-inline-end: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-tertiary) * 1px);
-            }
-
-            &__icon--right{
-                margin-inline-start: calc(var(--spacing-title-tertiary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-tertiary) * 1px);
-            }
-
-            &__title{
-                font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-                font-weight: var(--en-single-f-d-s-fontWeight);
-            }
-
-            &__text--right{
-                margin-inline-end: calc(var(--spacing-title-text-margin_right) * 1px);
-                font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-                color: var(--color-title-text);
-            }
-
-            &__subtext{
-                font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-b-r-fontSize);
-            }
-        }
-
-        &-quaternary {
-            height: calc(var(--height-title-quaternary) * 1px);
-
-            &__icon--left{
-                margin-inline-end: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-quaternary) * 1px);
-            }
-
-            &__icon--right{
-                margin-inline-start: calc(var(--spacing-title-quaternary_icon-margin_y) * 1px);
-                font-size: calc(var(--icon-title-quaternary) * 1px);
-            }
-
-            &__title{
-                font-size: calc(var(--en-single-f-c-s-fontSize) * 1px);
-                font-weight: var(--en-single-f-c-s-fontWeight);
-            }
-
-            &__text--right{
-                margin-inline-end: calc(var(--spacing-title-text-margin_right) * 1px);
-                font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-b-r-fontWeight);
-                color: var(--color-title-text);
-            }
-            &__subtext{
-                font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
-                font-weight: var(--en-single-f-a-r-fontSize);
-            }
-        }
-
-        &-label{
-            padding-inline-start: 0;
-            padding-inline-end: 0;
-            font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        &__title {
+            font-size: var(--en-single-f-e-s-fontSize);
+            font-weight: var(--en-single-f-e-s-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-c-r-fontSize);
             font-weight: var(--en-single-f-c-r-fontWeight);
+            color: var(--color-title-text);
         }
 
-        &-primary-double {
-            height: calc(var(--height-title-primary_double) * 1px);
+        &__subtext {
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
         }
-        &-secondary-double {
-            height: calc(var(--height-title-secondary_double) * 1px);
+    }
+
+    &-tertiary {
+        height: var(--height-title-tertiary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-tertiary_icon-margin_y);
+            font-size: var(--icon-title-tertiary);
+        }
+
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-tertiary_icon-margin_y);
+            font-size: var(--icon-title-tertiary);
         }
-        &-tertiary-double {
-            height: calc(var(--height-title-tertiary_double) * 1px);
+
+        &__title {
+            font-size: var(--en-single-f-d-s-fontSize);
+            font-weight: var(--en-single-f-d-s-fontWeight);
         }
-        &-quaternary-double {
-            height: calc(var(--height-title-quaternary_double) * 1px);
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-title-text);
+        }
+
+        &__subtext {
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontSize);
         }
     }
 
+    &-quaternary {
+        height: var(--height-title-quaternary);
+
+        &__icon--left {
+            margin-inline-end: var(--spacing-title-quaternary_icon-margin_y);
+            font-size: var(--icon-title-quaternary);
+        }
 
+        &__icon--right {
+            margin-inline-start: var(--spacing-title-quaternary_icon-margin_y);
+            font-size: var(--icon-title-quaternary);
+        }
 
+        &__title {
+            font-size: var(--en-single-f-c-s-fontSize);
+            font-weight: var(--en-single-f-c-s-fontWeight);
+        }
+
+        &__text--right {
+            margin-inline-end: var(--spacing-title-text-margin_right);
+            font-size: var(--en-single-f-b-r-fontSize);
+            font-weight: var(--en-single-f-b-r-fontWeight);
+            color: var(--color-title-text);
+        }
+
+        &__subtext {
+            font-size: var(--en-single-f-a-r-fontSize);
+            font-weight: var(--en-single-f-a-r-fontSize);
+        }
+    }
+
+    &-label {
+        padding-inline-start: 0;
+        padding-inline-end: 0;
+        font-size: var(--en-single-f-c-r-fontSize);
+        font-weight: var(--en-single-f-c-r-fontWeight);
+    }
+
+    &-primary-double {
+        height: var(--height-title-primary_double);
+    }
+
+    &-secondary-double {
+        height: var(--height-title-secondary_double);
+    }
+
+    &-tertiary-double {
+        height: var(--height-title-tertiary_double);
+    }
+
+    &-quaternary-double {
+        height: var(--height-title-quaternary_double);
+    }
+}

package/dist/components/toast/index.js

@@ -1,5 +1,7 @@
 import Vue from 'vue'
 import VdToast from './index.vue'
+import { inBrowser } from '../utils/env';
+
 let timer = null
 
 /**
@@ -41,8 +43,10 @@ class Toast extends Vue.extend(VdToast) {
     /**
      * 把虚拟 DOM 插入到真实 DOM 树中
      */
-    document.body.appendChild(this.vm.$el)
-    this.start()
+    if (inBrowser) {
+      document.body.appendChild(this.vm.$el) // 将虚拟 DOM 插入真实 DOM
+      this.start()
+    }
   }
 
   /**
@@ -69,7 +73,9 @@ class Toast extends Vue.extend(VdToast) {
     setTimeout(() => {
       this.isShow = false
       setTimeout(() => {
-        document.body.removeChild(this.vm.$el)
+      if (inBrowser) {
+          document.body.removeChild(this.vm.$el)
+      }
       }, 500)
     }, this.duration)
   }

package/dist/components/toast/style.less

@@ -13,13 +13,13 @@
   transition: opacity .3s linear;
   opacity: 0;
   // token
-  min-width: calc(var(--width-toast-small)* 1px);
-  max-width: calc(var(--width-toast-large)* 1px);
-  padding: calc(var(--spacing-toast-padding_x) * 1px) calc(var(--spacing-toast-padding_y) * 1px);
+  min-width: var(--width-toast-small);
+  max-width: var(--width-toast-large);
+  padding: var(--spacing-toast-padding_x) var(--spacing-toast-padding_y);
   background-color: var(--color-toast-bg);
-  border-radius: calc(var(--radius-toast-content) * 1px);
+  border-radius: var(--radius-toast-content);
   color: var(--color-toast-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);
 
   &.vd-toast-show {
@@ -27,11 +27,11 @@
   }
 
   &-icon {
-    min-height: calc(var(--height-toast-small) * 1px);
+    min-height: var(--height-toast-small);
 
     .vd-iconfont {
-      font-size: calc(var(--icon-toast-size) * 1px);
-      margin-bottom: calc(var(--spacing-toast-icon-margin_bottom) * 1px);
+      font-size: var(--icon-toast-size);
+      margin-bottom: var(--spacing-toast-icon-margin_bottom);
     }
   }
 

package/dist/components/upload/index.vue

@@ -12,8 +12,12 @@
 </template>
 
 <script>
+import VdIcon from '../icon';
 export default {
   name: 'vd-upload',
+  components: {
+    VdIcon
+  },
   inheritAttrs: false,
   props: {
     photo: {

package/dist/components/upload/style.less

@@ -1,4 +1,3 @@
-
 @upload-prefix-cls: vd-upload;
 
 .@{upload-prefix-cls}{ 
@@ -18,7 +17,6 @@
                 width: 100%;
             }
         }
-
     }
 
     &__wrapper{
@@ -32,16 +30,15 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        height: calc(var(--height-upload-bg) * 1px);
-        min-width: calc(var(--width-upload-small) * 1px);
+        height: var(--height-upload-bg);
+        min-width: var(--width-upload-small);
         background-color: var(--color-upload-bg);
-        border-radius: calc( var(--radius-upload-content) * 1px);
+        border-radius: var(--radius-upload-content);
 
         &--text{
-            padding-block-start: calc(var(--spacing-upload-padding_top) * 1px);
-            padding-block-end: calc(var(--spacing-upload-padding_bottom) * 1px);
+            padding-block-start: var(--spacing-upload-padding_top);
+            padding-block-end: var(--spacing-upload-padding_bottom);
         }
-
     } 
 
     &__preview{
@@ -49,8 +46,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        width: calc(var(--width-upload-small) * 1px);
-        border-radius: calc( var(--radius-upload-content) * 1px);
+        width: var(--width-upload-small);
+        border-radius: var(--radius-upload-content);
 
         &--pdf{
             background-color: var(--color-upload-pdf-bg);
@@ -65,41 +62,38 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: 0  calc(var(--radius-upload-content) * 1px);
+            border-radius: 0 var(--radius-upload-content);
             background-color: var(--color-upload-close_bg);
             &-icon{      
-                font-size: calc(var(--icon-upload-close) * 1px);
+                font-size: var(--icon-upload-close);
                 color: #ffffff;
             }
         }
         &-word{
             color: var(--color-upload-pdf-text);
-            font-size: calc(var(--en-single-f-f-b-fontSize) * 1px);
+            font-size: var(--en-single-f-f-b-fontSize);
             font-weight: var(--en-single-f-f-b-fontWeight);
         }
 
         &-img{
-
             img{
                 object-fit: cover;
-                width: calc(var(--height-upload-bg) * 1px);
-                height: calc(var(--height-upload-bg) * 1px);
-                border-radius: calc( var(--radius-upload-content) * 1px);
+                width: var(--height-upload-bg);
+                height: var(--height-upload-bg);
+                border-radius: var(--radius-upload-content);
             }
         }
     }
 
-
-
     &__icon{
-        font-size: calc(var(--icon-upload-size) * 1px);
+        font-size: var(--icon-upload-size);
         color: var(--color-upload-icon);
     }
 
     &__text{
-        margin-block-start: calc(var(--spacing-upload-text-margin_top) * 1px);
+        margin-block-start: var(--spacing-upload-text-margin_top);
         color: var(--color-upload-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);
     }
 
@@ -133,24 +127,21 @@
         display: flex;
         justify-content: center;
         align-items: center;
-            img{
-                display: block;
-                object-fit: contain;
-            }
+        img{
+            display: block;
+            object-fit: contain;
         }
     }
+}
 
-
-    
 [lang='ar'] {
     .@{upload-prefix-cls}{ 
         &__preview{
             &-delete{
                 left: 0;
                 right: auto;
-                border-radius: calc(var(--radius-upload-content) * 1px) 0;
-
+                border-radius: var(--radius-upload-content) 0;
             }
         }
     }
-}
+}

package/dist/components/utils/env.js

@@ -0,0 +1,2 @@
+// env.js
+export const inBrowser = typeof window !== 'undefined';