vdesign-ui 0.2.6 → 0.2.8

package/dist/components/skeleton/index.vue

@@ -0,0 +1,206 @@
+<script>
+const prefixCls = 'vd-skeleton';
+export default {
+  name: 'vd-skeleton',
+  props: {
+    row: {
+      type: Number,
+      default: 4,
+    },
+    img: {
+      type: Boolean,
+    },
+    title: {
+      type: [Boolean, String],
+      default: false,
+      validator: (value) => {
+        return typeof value === 'boolean' || ['s', 'm', 'l'].includes(value);
+      },
+    },
+    button: {
+      type: Boolean,
+    },
+    paragraph: {
+      type: Boolean,
+    },
+    sImg: {
+      type: Boolean,
+    },
+    avatar: {
+      type: [Boolean, String],
+      default: false,
+      validator: (value) => {
+        return typeof value === 'boolean' || ['s', 'm', 'l'].includes(value);
+      },
+    },
+    text: {
+      type: Boolean,
+    },
+    stock: {
+      type: Boolean,
+    },
+    data: {
+      type: Boolean,
+    },
+    equally: {
+      type: Boolean,
+    },
+    equallys: {
+      type: Number,
+      default: 2,
+    },
+    height: {
+      type: Number,
+    },
+    animate: {
+      type: Boolean,
+      default: true,
+    },
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  computed: {
+    titleClasses() {
+      let size = 's'; // 默认尺寸
+      if (typeof this.title === 'string' && ['s', 'm', 'l'].includes(this.title)) {
+        size = this.title;
+      }
+      return {
+        [`${prefixCls}__title--${size}`]: true,
+      };
+    },
+    avatarClasses() {
+      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

@@ -0,0 +1,197 @@
+@skeleton-prefix-cls: vd-skeleton;
+
+.@{skeleton-prefix-cls} {
+    display: flex;
+    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 {
+        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-size: 400% 100%;
+        animation: skeleton-loading 1.4s ease infinite;
+        animation-fill-mode: forwards;
+    }
+
+    &__img {
+        width: 100%;
+        height: var(--height-skeleton-img);
+        border-radius: var(--radius-skeleton-img);
+    }
+
+    &__title {
+        width: var(--width-skeleton-head);
+
+        &--l {
+            height: var(--height-skeleton-text_l);
+            border-radius: var(--radius-skeleton-text_l);
+        }
+        &--m {
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--s {
+            height: var(--height-skeleton-text_s);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+    }
+
+    &__button {
+        width: var(--width-skeleton-button);
+        height: var(--height-skeleton-button);
+        border-radius: var(--radius-skeleton-button);
+    }
+
+    &__img--s {
+        width: var(--width-skeleton-img_small);
+        height: var(--height-skeleton-small_shapes);
+        border-radius: var(--radius-skeleton-small_shapes);
+    }
+
+    &__content {
+        width: 100%;
+        .is-last {
+            width: 80%;
+            margin-block-end: 0;
+        }
+    }
+
+    &__paragraph {
+        width: 100%;
+        height: var(--height-skeleton-text_s);
+        margin-block-end: var(--spacing-skeleton-text-margin_bottom);
+        border-radius: var(--radius-skeleton-text_s);
+    }
+
+    &__avatar {
+        flex-shrink: 0;
+        border-radius: 50%;
+        margin-inline-end: var(--spacing-skeleton-avatar-margin_right);
+
+        &--l {
+            width: var(--width-skeleton-avatar_l);
+            height: var(--width-skeleton-avatar_l);
+        }
+        &--m {
+            width: var(--width-skeleton-avatar_m);
+            height: var(--width-skeleton-avatar_m);
+        }
+        &--s {
+            width: var(--width-skeleton-avatar_s);
+            height: var(--width-skeleton-avatar_s);
+        }
+    }
+
+    &__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 {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        &--left {
+            display: flex;
+            flex-direction: column;
+        }
+        &--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: var(--width-skeleton-stock_data_l);
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+        &--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 {
+            display: flex;
+            align-items: flex-end;
+            flex-direction: column;
+        }
+        &--maindata {
+            width: var(--width-skeleton-stock_data_m);
+            height: var(--height-skeleton-text_m);
+            border-radius: var(--radius-skeleton-text_s);
+        }
+    }
+
+    &--space {
+        display: flex;
+        align-items: center;
+
+        .spacing {
+            margin-inline-start: var(--spacing-skeleton-stock-padding_y);
+        }
+    }
+
+    &__equally {
+        display: flex;
+        width: 100%;
+        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%;
+    }
+
+    100% {
+        background-position: 0 50%;
+    }
+}

package/dist/components/slider/draggable.js

@@ -0,0 +1,49 @@
+let isDragging = false;
+import Vue from 'vue';
+const supportTouch = !Vue.prototype.$isServer && 'ontouchstart' in window;
+
+export default function(element, options) {
+  const moveFn = function(event) {
+    if (options.drag) {
+      options.drag(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  };
+
+  const endFn = function(event) {
+    if (!supportTouch) {
+      document.removeEventListener('mousemove', moveFn);
+      document.removeEventListener('mouseup', endFn);
+    }
+    document.onselectstart = null;
+    document.ondragstart = null;
+
+    isDragging = false;
+
+    if (options.end) {
+      options.end(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  };
+
+  element.addEventListener(supportTouch ? 'touchstart' : 'mousedown', function(event) {
+    if (isDragging) return;
+    event.preventDefault();
+    document.onselectstart = function() { return false; };
+    document.ondragstart = function() { return false; };
+
+    if (!supportTouch) {
+      document.addEventListener('mousemove', moveFn);
+      document.addEventListener('mouseup', endFn);
+    }
+    isDragging = true;
+
+    if (options.start) {
+      options.start(supportTouch ? event.changedTouches[0] || event.touches[0] : event);
+    }
+  });
+
+  if (supportTouch) {
+    element.addEventListener('touchmove', moveFn);
+    element.addEventListener('touchend', endFn);
+    element.addEventListener('touchcancel', endFn);
+  }
+}

package/dist/components/slider/index.js

@@ -0,0 +1,7 @@
+import Slider from './index.vue';
+import './style.less';
+Slider.install = function(Vue) {
+    Vue.component(Slider.name, Slider)
+}
+
+export default Slider;

package/dist/components/slider/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="vd-slider">
+    <template v-if="demonstration">
+      <div class="vd-slider__marks vd-slider__marks--top">
+        <div class="vd-slider__marks--start" :class="{ 'vd-slider__marks--hidden': (showMarks && progress === 0) }">0%
+        </div>
+        <div class="vd-slider__marks--end" v-if="progressWidth < 100">100%</div>
+      </div>
+      <div class="vd-slider__wrap vd-slider__wrap--demonstration" ref="content">
+        <div class="vd-slider__bar vd-slider__bar--demonstration" :style="{ width: progressWidth + '%' }"></div>
+        <div class="vd-slider__button vd-slider__button--demonstration" ref="thumb"
+          :class="{ 'vd-slider__button--active': progress }" :style="{left: this.progress + '%'}">
+          <!-- 显示逻辑是滑动时候显示 -->
+          <span class="vd-slider__tips" v-if="showMarks">{{ value }}%</span>
+        </div>
+        <template v-for="(item, index) in items">
+          <div :key="index" v-if="index > 1 && index !== items.length - 1"
+            :class="['vd-slider__dots', { 'vd-slider__dots--active': (index - 1) % 2 !== 0 }]"
+            :style="{ left: (index - 1) * 5 + '%' }"></div>
+        </template>
+      </div>
+    </template>
+    <template v-else>
+      <div class="vd-slider__wrap" ref="content">
+        <div class="vd-slider__bar" :style="{ width: progressWidth + '%' }"></div>
+        <div class="vd-slider__button" :class="{ 'vd-slider__button--active': progress }" ref="thumb"
+          :style="{left: this.progress + '%'}">
+        </div>
+      </div>
+      <div class="vd-slider__marks">
+        <div class="vd-slider__marks--start">0%</div>
+        <div class="vd-slider__marks--end">100%</div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import languageMixin from '../mixins/languageMixin.js';
+
+import draggable from './draggable';
+export default {
+  name: 'vd-slider',
+  mixins: [languageMixin],
+  props: {
+    demonstration: {
+      type: Boolean,
+      default: false
+    },
+    min: {
+      type: Number,
+      default: 0
+    },
+    max: {
+      type: Number,
+      default: 100
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    value: {
+      type: Number
+    },
+
+  },
+  data() {
+    return {
+      items: Array(22),
+      showMarks: false, // 控制是否显示百分比标记
+      hideStartMark: false, // 控制是否隐藏0%标记
+      disabled: false
+    };
+  },
+  computed: {
+    progress() {
+      const value = this.value;
+        if (typeof value === 'undefined' || value === null) return 0;
+        const progressValue = Math.floor((value - this.min) / (this.max - this.min) * 100);
+        return this.language === 'ar' ? 100 - progressValue : progressValue;
+    },
+    progressWidth() {
+      const value = this.value;
+        if (typeof value === 'undefined' || value === null) return 0;
+        const progressValue = Math.floor((value - this.min) / (this.max - this.min) * 100);
+        return progressValue;
+    },
+    inputStyle() {
+      if (this.language === 'ar') {
+        return {
+          left: 'auto',
+          right: this.progress + '%'
+        };
+      } else {
+        return {
+          left: this.progress + '%',
+          right: 'auto'
+        };
+      }
+    }
+  },
+  watch: {
+
+  },
+  mounted() {
+
+
+    const thumb = this.$refs.thumb;
+    const content = this.$refs.content;
+    const getThumbPosition = () => {
+      const contentBox = content.getBoundingClientRect();
+      const thumbBox = thumb.getBoundingClientRect();
+      return {
+        left: thumbBox.left - contentBox.left,
+        top: thumbBox.top - contentBox.top,
+        thumbBoxLeft: thumbBox.left
+      };
+    };
+
+    let dragState = {};
+    draggable(thumb, {
+      start: (event) => {
+        if (this.disabled) return;
+        this.showMarks = true;
+        const position = getThumbPosition();
+        const thumbClickDetalX = event.clientX - position.thumbBoxLeft;
+        dragState = {
+          thumbStartLeft: position.left,
+          thumbStartTop: position.top,
+          thumbClickDetalX: thumbClickDetalX
+        };
+      },
+      drag: (event) => {
+        if (this.disabled) return;
+        const contentBox = content.getBoundingClientRect();
+        const deltaX = this.language === 'ar' ?
+        contentBox.right - event.pageX - dragState.thumbStartLeft - dragState.thumbClickDetalX :
+        event.pageX - contentBox.left - dragState.thumbStartLeft - dragState.thumbClickDetalX;
+        // const deltaX = event.pageX - contentBox.left - dragState.thumbStartLeft - dragState.thumbClickDetalX;
+        const stepCount = Math.ceil((this.max - this.min) / this.step);
+        const newPosition = (dragState.thumbStartLeft + deltaX) - (dragState.thumbStartLeft + deltaX) % (contentBox.width / stepCount);
+
+        let newProgress = newPosition / contentBox.width;
+
+        if (newProgress < 0) {
+          newProgress = 0;
+        } else if (newProgress > 1) {
+          newProgress = 1;
+        }
+
+        this.$emit('input', Math.round(this.min + newProgress * (this.max - this.min)));
+      },
+      end: () => {
+        if (this.disabled) return;
+        this.$emit('change', this.value);
+        dragState = {};
+      }
+    });
+  }
+}
+</script>
+
+<style lang="less">
+@import './style.less';
+
+
+</style>