vdesign-ui 0.2.1 → 0.2.3

package/dist/components/empty/index.vue

@@ -1,37 +1,46 @@
 <template>
     <div class="vd-empty" :class="wrapClasses">
-        <div class="vd-empty-img"><img :src="currentImg" alt="img"></div>
-        <p class="vd-empty-txt" :class="textClasses" v-if="description">{{ description }}</p>
-        <div class="vd-empty-footer" :class="footerClasses" v-if="$slots.btn">
-            <slot name="btn"></slot>
+        <div class="vd-empty__img"  v-if="size !== 'card'">
+            <slot name="image">
+                <img :src="currentImage" alt="empty" />
+            </slot>
+        </div>
+        <p class="vd-empty__txt" :class="textClasses" v-if="description || $slots.description">
+            <slot name="description">
+                {{ description }}
+            </slot>
+        </p>
+        <div class="vd-empty__footer" :class="footerClasses" v-if="$slots.default">
+            <slot></slot>
         </div>
     </div>
 </template>
 
 <script>
-import { themeMixin } from '@p/components/mixins/themeMixin';
-
+import { themeMixin } from '../mixins/themeMixin';
 const prefixCls = 'vd-empty';
 
 export default {
     name: 'vd-empty',
     mixins: [themeMixin],  // 引入混入
     props: {
-        imgs: String,
-        description: String,
-        size: String,
-        type: {
+        image:  {
             type: String,
             default: 'nodata',  // 默认类型
             validator(value) {
                 // 只接受以下类型值
-                return ['nodata', 'network', 'not-found','noposition','nomargin','nocoupons','nosearch','nonotice','noorders','noocomments'].includes(value);
+                return ['nodata', 'network', 'notfound','noposition','nomargin','nocoupons','nosearch','nonotice','noorders','noocomments'].includes(value);
             }
         },
+        description: String,
+        size: {
+            type:String,
+            default: 'large',  // 大场景布局，使用L尺寸 小场景内容居中使用 S 尺寸 card(空状态>1 时，不显示图片，只显示暂无数据的文字)
+        },
     },
     data() {
         return {
-            defaultImgs: {
+            defaultImages: {
                 nodata: {
                     light: require('./nodata.png'),
                     dark: require('./nodata-dark.png')
@@ -40,7 +49,7 @@ export default {
                     light: require('./network.png'),
                     dark: require('./network-dark.png')
                 },
-                'not-found': {
+                notfound: {
                     light: require('./404.png'),
                     dark: require('./404-dark.png')
                 },
@@ -76,35 +85,41 @@ export default {
         }
     },
     computed: {
-        currentImg() {
-            if (this.imgs) return this.imgs;
-            return this.defaultImgs[this.type][this.theme];
+        currentImage() {
+            const image = this.image;
+            if (image && (image.startsWith('http') || image.startsWith('data:image'))) {
+                return image;
+            } else if (this.defaultImages[image]) {
+                return this.defaultImages[image][this.theme];
+            } else {
+                return this.defaultImages['nodata'][this.theme];
+            }
         },
         wrapClasses() {
             return [
                 {
-                    [`${prefixCls}-${this.size}`]: this.size
+                    [`${prefixCls}--${this.size}`]: this.size
                 }
             ]
         },
         textClasses() {
             return [
                 {
-                    [`${prefixCls}-${this.size}-txt`]: this.size
+                    [`${prefixCls}--${this.size}__txt`]: this.size
                 }
             ]
         },
         footerClasses() {
             return [
                 {
-                    [`${prefixCls}-${this.size}-footer`]: this.size
+                    [`${prefixCls}--${this.size}__footer`]: this.size
                 }
             ]
         }
     },
     methods: {
         preloadImages() {
-            Object.values(this.defaultImgs).forEach((modes) => {
+            Object.values(this.defaultImages).forEach((modes) => {
                 Object.values(modes).forEach((src) => {
                     const img = new Image();
                     img.src = src;

package/dist/components/empty/style.less

@@ -1,64 +1,61 @@
 @empty-prefix-cls: vd-empty;
 
-.@{empty-prefix-cls}{
-    height: 100%;
-    margin: 0 auto;
-    text-align: center;
-    padding: 0 20px;
+.@{empty-prefix-cls} {
     display: flex;
     flex-direction: column;
     justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 20px;
 
-    &-img{
+    &__img {
         width: 164px;
         height: 118px;
-        margin: 0 auto;
-        img{
-            border: 0; 
-            max-width: 100%;
+
+        img {
+            width: 100%;
+            height: 100%;
         }
     }
 
-
-    &-txt{
-        margin-block-start: calc(var(--spacing-empty-large-text-margin_top) * 1px);
-        font-size: calc(var(--en-single-f-d-r-fontSize) * 1px);
+    &__txt {
+        font-size: var(--en-single-f-d-r-fontSize);
         font-weight: var(--en-single-f-d-r-fontWeight);
-        color:var(--color-empty-text); 
+        color: var(--color-empty-text); 
     }
-    &-footer{
+
+    &__footer {
         display: flex;
         justify-content: center;
-        margin-block-start: calc(var(--spacing-empty-large-text-margin_bottom) * 1px);
     }
-    &-small
-        {
-        &-txt{
-             margin-block-start: calc(var(--spacing-empty-small-text-margin_top) * 1px);
+
+    &--small {
+        &__txt {
+            margin-block-start: var(--spacing-empty-small-text-margin_top);
         }
-        &-footer{
-            margin-block-start: calc(var(--spacing-empty-small-text-margin_bottom) * 1px);
+
+        &__footer {
+            margin-block-start: var(--spacing-empty-small-text-margin_bottom);
         }
     }
 
-    &-card{
-        height: calc(var(--height-empty-card) * 1px);
-
-        .@{empty-prefix-cls}{
-            &-img{
-                display: none;
-            }
+    &--large {
+        &__txt {
+            margin-block-start: var(--spacing-empty-large-text-margin_top);
+        }
 
-            &-footer{
-                display: none;
-            }
+        &__footer {
+            margin-block-start: var(--spacing-empty-large-text-margin_bottom);
         }
+    }
+
+    &--card {
+        height: var(--height-empty-card);
 
-        &-txt{
+        &__txt {
             margin-block-start: 0;
-            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);
         }
     }
-
 }

package/dist/components/footer/style.less

@@ -1,21 +1,20 @@
 @footer-prefix-cls: vd-footer;
 
-
-.@{footer-prefix-cls}{
+.@{footer-prefix-cls} {
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: center;
-    padding: calc(var(--spacing-footer-padding_top) * 1px) 0 calc(var(--spacing-footer-padding_bottom) * 1px);
+    padding: var(--spacing-footer-padding_top) 0 var(--spacing-footer-padding_bottom);
 
-    &__link{
+    &__link {
         display: flex;
         align-items: center;
-        margin-block-end: calc(var(--spacing-footer-link-margin_bottom) * 1px);
+        margin-block-end: var(--spacing-footer-link-margin_bottom);
     }
 
-    &__text{
-        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+    &__text {
+        font-size: var(--en-single-f-b-r-fontSize);
         font-weight: var(--en-single-f-b-r-fontWeight);
         color: var(--text-color-h2);
     }

package/dist/components/footnav/index.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script>
-import { inBrowser } from '@p/utils/env'
+import { inBrowser } from '../utils/env'
 export default {
   name: 'vd-foot-nav',
   props: {

package/dist/components/footnav/style.less

@@ -1,22 +1,22 @@
-
 @footnav-prefix-cls: vd-foot-nav;
 
-.@{footnav-prefix-cls}{
+.@{footnav-prefix-cls} {
     width: 100%;
     display: flex;
-    padding: 4px calc(var(--spacing-footnav-icon-margin_bottom) * 1px);
-    height: calc(var(--height-footnav-content) * 1px);
+    padding: 4px var(--spacing-footnav-icon-margin_bottom);
+    height: var(--height-footnav-content);
     background-color: var(--color-footnav-bg);
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
     
-    &--fixed{
+    &--fixed {
         position: fixed;
         bottom: 0;
         left: 0;
         width: 100%;
         z-index: 1;
     }
+    
     &--unfit {
         padding-bottom: 0;
     }

package/dist/components/{footnav/footnav-item → footnav-item}/index.vue

@@ -9,10 +9,16 @@
 
 <script>
 
-import RouterLink from '../../mixins/router-link';
+import RouterLink from '../mixins/router-link';
+import VdIcon from '../icon';
+import VdBadge from '../badge';
 
 export default {
   name: 'vd-foot-nav-item',
+  components: {
+      VdIcon,
+      VdBadge
+    },
   mixins: [RouterLink],
   props: {
     iconName: String,

package/dist/components/{footnav/footnav-item → footnav-item}/style.less

@@ -6,13 +6,13 @@
   align-items: center;
   flex-direction: column;
   justify-content: center;
-  font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
+  font-size: var(--en-single-f-a-r-fontSize);
   font-weight: var(--en-single-f-a-r-fontWeight);
   color: var(--color-footnav-text-default);
 
   .vd-iconfont {
     margin-bottom: 2px;
-    font-size: calc(var(--icon-footnav-size) * 1px);
+    font-size: var(--icon-footnav-size);
     color: var(--text-color-h2);
   }
 

package/dist/components/headnav/index.vue

@@ -77,10 +77,14 @@
 </template>
 
 <script>
-import { inBrowser } from '@p/utils/env'
+import { inBrowser } from '../utils/env'
+import VdIcon from '../icon';
 const prefixCls = 'vd-head-nav';
 export default {
   name: 'vd-head-nav',
+  components: {
+    VdIcon,
+  },
   props: {
     title: String,  // 标题
     time: String,   // 标题下面的股票开市时间

package/dist/components/headnav/style.less

@@ -6,8 +6,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: calc(var(--height-headnav-primary) * 1px);
-    padding: 0 calc(var(--spacing-headnav-padding_y) * 1px);
+    height: var(--height-headnav-primary);
+    padding: 0 var(--spacing-headnav-padding_y);
 
     &--fixed {
         top: 0;
@@ -24,62 +24,60 @@
 
     &__title {
         max-width: 100%;
-        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);
         color: var(--color-headnav-title);
-
     }
-
+    
     &--left {
         position: absolute;
-        left: calc(var(--spacing-headnav-padding_y) * 1px);
+        left: var(--spacing-headnav-padding_y);
         top: 0;
         bottom: 0;
         display: flex;
         justify-content: center;
         align-items: center;
-        gap: calc(var(--spacing-headnav-icon-margin_left) * 1px);
+        gap: var(--spacing-headnav-icon-margin_left);
     }
-
+    
     &--right {
         position: absolute;
-        right: calc(var(--spacing-headnav-padding_y) * 1px);
+        right: var(--spacing-headnav-padding_y);
         top: 0;
         bottom: 0;
         display: flex;
         justify-content: center;
         align-items: center;
-        gap: calc(var(--spacing-headnav-icon-margin_left) * 1px);
-
+        gap: var(--spacing-headnav-icon-margin_left);
     }
+    
 
     &--normal {
-        height: calc(var(--height-headnav-secondary) * 1px);
-
+        height: var(--height-headnav-secondary);
+    
         .@{headnav-prefix-cls} {
-
             &__title--normal {
-                font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
+                font-size: var(--en-single-f-e-s-fontSize);
                 font-weight: var(--en-single-f-e-s-fontWeight);
                 color: var(--color-headnav-title);
             }
         }
-
+    
         .vd-selector-l__title {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
-            font-size: calc(var(--en-single-f-e-s-fontSize) * 1px);
+            font-size: var(--en-single-f-e-s-fontSize);
             font-weight: var(--en-single-f-e-s-fontWeight);
         }
-
+    
         .vd-selector-s__title {
-            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(--color-headnav-title);
         }
-
     }
+    
 
 
     &__content {
@@ -90,86 +88,85 @@
         justify-content: center;
         flex-direction: column;
         align-items: center;
-        margin: 0 calc(var(--spacing-headnav-title-margin_y) * 1px);
-
+        margin: 0 var(--spacing-headnav-title-margin_y);
+    
         &--start {
             flex: 1;
             max-width: 100%;
             align-items: flex-start;
-            padding-inline-end: calc(var(--spacing-headnav-title-margin_right) * 1px);
+            padding-inline-end: var(--spacing-headnav-title-margin_right);
         }
-
+    
         .vd-selector {
-
             &-xl__title {
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
         }
-
+    
         &--selector {
             max-width: 100%;
             padding-inline-start: 20px;
         }
-
-
-
     }
+    
 
     &__icontype{
         display: flex;
     }
 
     &__left-title {
-        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);
         color: var(--color-headnav-title);
     }
-
+    
     &__edit-left-text {
-        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(--color-headnav-title);
     }
-
+    
     &__edit-right-text {
-        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(--primary-color);
     }
-
+    
     &__account-text {
-        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(--color-headnav-title);
     }
-
+    
     &__account-type {
-        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(--color-headnav-title);
-
+    
         &--icon {
-            font-size: calc(var(--icon-selector-s) * 1px);
-            margin-inline-end: calc(var(--spacing-selector-s-margin_y) * 1px);
+            font-size: var(--icon-selector-s);
+            margin-inline-end: var(--spacing-selector-s-margin_y);
         }
     }
+    
 
     &__icon {
         display: flex;
-
+    
         .vd-iconfont {
-            font-size: calc(var(--icon-large) * 1px);
+            font-size: var(--icon-large);
             color: var(--color-headnav-icon);
         }
     }
+    
     &__time {
-        margin-inline-start: calc(var(--spacing-headnav-primary-text-margin_right) * 1px);
-        font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
+        margin-inline-start: var(--spacing-headnav-primary-text-margin_right);
+        font-size: var(--en-single-f-a-r-fontSize);
         font-weight: var(--en-single-f-a-r-fontWeight);
         color: var(--color-headnav-text_delayed);
-    }
+    }    
 
     &__info {
         position: absolute;
@@ -183,31 +180,30 @@
 
 
     &__description {
-        margin-block-start: calc(var(--spacing-headnav-text_description-margin_top) * 1px);
-        font-size: calc(var(--en-single-f-c-r-fontSize) * 1px);
+        margin-block-start: var(--spacing-headnav-text_description-margin_top);
+        font-size: var(--en-single-f-c-r-fontSize);
         font-weight: var(--en-single-f-c-r-fontWeight);
         color: var(--color-headnav-text_description);
     }
-
+    
     &__stock {
         display: flex;
         align-items: center;
-        font-size: calc(var(--en-single-f-b-r-fontSize) * 1px);
+        font-size: var(--en-single-f-b-r-fontSize);
         font-weight: var(--en-single-f-b-r-fontWeight);
-
+    
         &--rise {
             color: var(--rise-color);
         }
-
+    
         &--fall {
             color: var(--fall-color);
-
         }
-
+    
         span {
-            margin-inline-end: calc(var(--spacing-headnav-primary-dot-margin_right) * 1px);
+            margin-inline-end: var(--spacing-headnav-primary-dot-margin_right);
         }
-    }
+    }    
 }
 
 
@@ -217,13 +213,13 @@
         &--left {
             position: absolute;
             left: auto;
-            right: calc(var(--spacing-headnav-padding_y) * 1px);
+            right: var(--spacing-headnav-padding_y);
         
         }
     
         &--right {
             position: absolute;
-            left: calc(var(--spacing-headnav-padding_y) * 1px);
+            left: var(--spacing-headnav-padding_y);
             right: auto;
         }
     }

package/dist/components/icon/style.less

@@ -5,7 +5,7 @@
   backface-visibility: hidden;
   transform: translateZ(0) scale(1, 1);
   // font-family: "Icon" !important;
-  font-size: calc(var(--icon-medium) * 1px);
+  font-size: var(--icon-medium);
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -32,13 +32,13 @@
 }
 
 .vd-icon-small {
-  font-size: calc(var(--icon-small) * 1px);
+  font-size: var(--icon-small);
 }
 
 .vd-icon-medium {
-  font-size: calc(var(--icon-medium) * 1px);
+  font-size: var(--icon-medium);
 }
 
 .vd-icon-large {
-  font-size: calc(var(--icon-large) * 1px);
+  font-size: var(--icon-large);
 }

package/dist/components/input/index.vue

@@ -75,11 +75,15 @@
 </template>
 
 <script>
+import VdIcon from '../icon';
 import calcTextareaHeight from "./calcTextareaHeight";
 const prefixCls = "vd-input";
 
 export default {
   name: "vd-input",
+  components: {
+    VdIcon,
+  },
   props: {
     value: {
       type: [String, Number],