vdesign-ui 0.2.1 → 0.2.3

package/dist/components/skeleton/index.vue

@@ -1,142 +1,206 @@
-<template>
-  <div class="vd-skeleton" :class="{ 'vd-skeleton--animate': animate }">
-    <template v-if="loading">  
-      <div class="vd-skeleton__img" v-if="img"></div>
-      <div class="vd-skeleton__title" :class="titleClasses" v-if="title"></div>
-      <div class="vd-skeleton__button" v-if="button"></div>
-      <div class="vd-skeleton__img--s" v-if="sImg"></div>
-      <div class="vd-skeleton__avatar" :class="avatarClasses" v-if="avatar"></div>
-      <div v-if="paragraph || text" class="vd-skeleton__content">
-        <div class="vd-skeleton__text" v-if="text"></div>
-        <template v-if="paragraph">
-          <div class="vd-skeleton__paragraph" v-for="item in rows" :key="item" :class="{
-            'is-last': item === rows && rows > 1,
-          }">
-          </div>
-        </template>
-      </div>
-      <div class="vd-skeleton__stock" v-if="stock">
-        <div class="vd-skeleton__stock--left">
-          <span class="vd-skeleton__stock--data"></span>
-          <span class="vd-skeleton__stock--subdatax"></span>
-        </div>
-        <div class="vd-skeleton--space">
-          <div class="vd-skeleton__stock--center"></div>
-          <div class="vd-skeleton__stock--right spacing">
-            <span class="vd-skeleton__stock--title"></span>
-            <span class="vd-skeleton__stock--text"></span>
-          </div>
-        </div>
-      </div>
-      <div class="vd-skeleton__stock" v-if="data">
-        <div class="vd-skeleton__stock--left">
-          <span class="vd-skeleton__stock--data"></span>
-          <span class="vd-skeleton__stock--subdatal"></span>
-        </div>
-        <div class="vd-skeleton--space">
-          <div class="vd-skeleton__stock--right">
-            <span class="vd-skeleton__stock--title"></span>
-            <span class="vd-skeleton__stock--text"></span>
-          </div>
-          <div class="vd-skeleton__stock--right">
-            <span class="vd-skeleton__stock--title"></span>
-            <span class="vd-skeleton__stock--text"></span>
-          </div>
-          <div class="vd-skeleton__stock--right">
-            <span class="vd-skeleton__stock--title"></span>
-            <span class="vd-skeleton__stock--text"></span>
-          </div>
-        </div>
-      </div>
-      <div class="vd-skeleton__equally" v-if="equally">
-        <div class="vd-skeleton__img" v-for="item in equallys" :key="item" :style="{ height: height + 'px' }"></div>
-      </div>
-    </template>
-    <template v-else>
-      <slot></slot>
-    </template>
-  </div>
-</template>
-
 <script>
-const prefixCls = 'vd-skeleton'
+const prefixCls = 'vd-skeleton';
 export default {
   name: 'vd-skeleton',
   props: {
-    rows: {
+    row: {
       type: Number,
-      default: 4
+      default: 4,
     },
     img: {
-      type: Boolean
+      type: Boolean,
     },
     title: {
-      type: Boolean
+      type: [Boolean, String],
+      default: false,
+      validator: (value) => {
+        return typeof value === 'boolean' || ['s', 'm', 'l'].includes(value);
+      },
     },
     button: {
-      type: Boolean
+      type: Boolean,
     },
     paragraph: {
-      type: Boolean
+      type: Boolean,
     },
     sImg: {
-      type: Boolean
+      type: Boolean,
     },
     avatar: {
-      type: Boolean
+      type: [Boolean, String],
+      default: false,
+      validator: (value) => {
+        return typeof value === 'boolean' || ['s', 'm', 'l'].includes(value);
+      },
     },
     text: {
-      type: Boolean
+      type: Boolean,
     },
     stock: {
-      type: Boolean
+      type: Boolean,
     },
     data: {
-      type: Boolean
+      type: Boolean,
     },
     equally: {
-      type: Boolean
+      type: Boolean,
     },
     equallys: {
       type: Number,
-      default: 2
+      default: 2,
     },
     height: {
-      type: Number
+      type: Number,
     },
     animate: {
       type: Boolean,
-      default: true
-    },
-    titleSize: {
-      type: String,
-      default: 'l'
-    },
-    avatarSize: {
-      type: String,
-      default: 's'
+      default: true,
     },
     loading: {
       type: Boolean,
-      default: true
+      default: true,
     },
   },
   computed: {
     titleClasses() {
-      return {
-        [`${prefixCls}__title--${this.titleSize}`]: this.titleSize,
+      let size = 's'; // 默认尺寸
+      if (typeof this.title === 'string' && ['s', 'm', 'l'].includes(this.title)) {
+        size = this.title;
       }
+      return {
+        [`${prefixCls}__title--${size}`]: true,
+      };
     },
     avatarClasses() {
-      return {
-        [`${prefixCls}__avatar--${this.avatarSize}`]: this.avatarSize,
+      let size = 's'; // 默认尺寸
+      if (typeof this.avatar === 'string' && ['s', 'm', 'l'].includes(this.avatar)) {
+        size = this.avatar;
       }
+      return {
+        [`${prefixCls}__avatar--${size}`]: true,
+      };
     },
-  }
-
-}
+  },
+  render(h) {
+    if (this.loading) {
+      return h(
+        'div',
+        {
+          class: [prefixCls, { [`${prefixCls}--animate`]: this.animate }],
+        },
+        [
+          // 图片占位符
+          this.img ? h('div', { class: `${prefixCls}__img` }) : null,
+          // 标题占位符
+          this.title
+            ? h('div', {
+                class: [`${prefixCls}__title`, this.titleClasses],
+              })
+            : null,
+          // 按钮占位符
+          this.button ? h('div', { class: `${prefixCls}__button` }) : null,
+          // 小图片占位符
+          this.sImg ? h('div', { class: `${prefixCls}__img--s` }) : null,
+          // 头像占位符
+          this.avatar
+            ? h('div', {
+                class: [`${prefixCls}__avatar`, this.avatarClasses],
+              })
+            : null,
+          // 段落和文本占位符
+          (this.paragraph || this.text)
+            ? h(
+                'div',
+                { class: `${prefixCls}__content` },
+                [
+                  this.text ? h('div', { class: `${prefixCls}__text` }) : null,
+                  this.paragraph
+                    ? Array.from({ length: this.row }).map((_, index) =>
+                        h('div', {
+                          key: index,
+                          class: [
+                            `${prefixCls}__paragraph`,
+                            {
+                              'is-last':
+                                index === this.row - 1 && this.row > 1,
+                            },
+                          ],
+                        })
+                      )
+                    : null,
+                ].filter(Boolean)
+              )
+            : null,
+          // 股票占位符
+          this.stock
+            ? h('div', { class: `${prefixCls}__stock` }, [
+                h('div', { class: `${prefixCls}__stock--left` }, [
+                  h('span', { class: `${prefixCls}__stock--data` }),
+                  h('span', { class: `${prefixCls}__stock--subdatax` }),
+                ]),
+                h('div', { class: `${prefixCls}--space` }, [
+                  h('div', { class: `${prefixCls}__stock--center` }),
+                  h(
+                    'div',
+                    {
+                      class: [`${prefixCls}__stock--right`, 'spacing'],
+                    },
+                    [
+                      h('span', { class: `${prefixCls}__stock--title` }),
+                      h('span', { class: `${prefixCls}__stock--text` }),
+                    ]
+                  ),
+                ]),
+              ])
+            : null,
+          // 数据占位符
+          this.data
+            ? h('div', { class: `${prefixCls}__stock` }, [
+                h('div', { class: `${prefixCls}__stock--left` }, [
+                  h('span', { class: `${prefixCls}__stock--data` }),
+                  h('span', { class: `${prefixCls}__stock--subdatal` }),
+                ]),
+                h('div', { class: `${prefixCls}--space` }, [
+                  h('div', { class: `${prefixCls}__stock--right` }, [
+                    h('span', { class: `${prefixCls}__stock--title` }),
+                    h('span', { class: `${prefixCls}__stock--text` }),
+                  ]),
+                  h('div', { class: `${prefixCls}__stock--right` }, [
+                    h('span', { class: `${prefixCls}__stock--title` }),
+                    h('span', { class: `${prefixCls}__stock--text` }),
+                  ]),
+                  h('div', { class: `${prefixCls}__stock--right` }, [
+                    h('span', { class: `${prefixCls}__stock--title` }),
+                    h('span', { class: `${prefixCls}__stock--text` }),
+                  ]),
+                ]),
+              ])
+            : null,
+          // 等分占位符
+          this.equally
+            ? h(
+                'div',
+                { class: `${prefixCls}__equally` },
+                Array.from({ length: this.equallys }).map((_, index) =>
+                  h('div', {
+                    key: index,
+                    class: `${prefixCls}__img`,
+                    style: { height: `${this.height}px` },
+                  })
+                )
+              )
+            : null,
+        ].filter(Boolean)
+      );
+    } else {
+      // 返回插槽内容
+      return this.$slots.default ? this.$slots.default : null;
+    }
+  },
+};
 </script>
 
 <style lang="less">
 @import './style.less';
+
 </style>

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 {