vdesign-ui 0.2.4 → 0.2.6

package/dist/components/skeleton/index.vue

@@ -1,206 +0,0 @@
-<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

@@ -1,197 +0,0 @@
-@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

@@ -1,49 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,167 +0,0 @@
-<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>