vdesign-ui 0.1.20 → 0.1.21

package/dist/components/skeleton/index.vue

@@ -1,142 +0,0 @@
-<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'
-export default {
-  name: 'vd-skeleton',
-  props: {
-    rows: {
-      type: Number,
-      default: 4
-    },
-    img: {
-      type: Boolean
-    },
-    title: {
-      type: Boolean
-    },
-    button: {
-      type: Boolean
-    },
-    paragraph: {
-      type: Boolean
-    },
-    sImg: {
-      type: Boolean
-    },
-    avatar: {
-      type: Boolean
-    },
-    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
-    },
-    titleSize: {
-      type: String,
-      default: 'l'
-    },
-    avatarSize: {
-      type: String,
-      default: 's'
-    },
-    loading: {
-      type: Boolean,
-      default: true
-    },
-  },
-  computed: {
-    titleClasses() {
-      return {
-        [`${prefixCls}__title--${this.titleSize}`]: this.titleSize,
-      }
-    },
-    avatarClasses() {
-      return {
-        [`${prefixCls}__avatar--${this.avatarSize}`]: this.avatarSize,
-      }
-    },
-  }
-
-}
-</script>
-
-<style lang="less">
-@import './style.less';
-</style>

package/dist/components/skeleton/style.less

@@ -1,192 +0,0 @@
-@skeleton-prefix-cls: vd-skeleton;
-
-.@{skeleton-prefix-cls}{
-    display: flex;
-    padding: 0 calc(var(--spacing-base-loose) * 1px);
-
-    &__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: linear-gradient(90deg,rgba(247,248,249,1) 25%,rgba(247,248,249,.3)  44%,rgba(247,248,249,1) 88%);
-        background-size: 400% 100%;
-        animation: skeleton-loading 1.4s ease infinite;
-        animation-fill-mode: forwards;
-    }
-
-    &__img{
-        width: 100%;
-        height: calc(var(--height-skeleton-img) * 1px);
-        border-radius: calc(var(--radius-skeleton-img) * 1px);
-    }
-
-    &__title{
-        width: calc(var(--width-skeleton-head) * 1px);
-
-        &--l{
-            height: calc(var(--height-skeleton-text_l) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_l) * 1px);
-        }
-        &--m{
-            height: calc(var(--height-skeleton-text_m) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
-        }
-        &--s{
-            height: calc(var(--height-skeleton-text_s) * 1px);
-            border-radius: calc(var(--radius-skeleton-text_s) * 1px);
-        }
-    }
-
-    &__button{
-        width: calc(var(--width-skeleton-button) * 1px);
-        height: calc(var(--height-skeleton-button) * 1px);
-        border-radius: calc(var(--radius-skeleton-button) * 1px);
-    }
-
-    &__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);
-    }
-
-    &__content{
-        width: 100%;
-        .is-last{
-            width: 80%;
-        }
-    }
-
-    &__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);
-    }
-
-    &__avatar{
-        flex-shrink: 0;
-        border-radius: 50%;
-        margin-inline-end: calc(var(--spacing-skeleton-avatar-margin_right) * 1px);
-
-
-        &--l{
-            width: calc(var(--width-skeleton-avatar_l) * 1px);
-            height: calc(var(--width-skeleton-avatar_l) * 1px);
-        }
-        &--m{
-            width: calc(var(--width-skeleton-avatar_m) * 1px);
-            height: calc(var(--width-skeleton-avatar_m) * 1px);
-        }
-        &--s{
-            width: calc(var(--width-skeleton-avatar_s) * 1px);
-            height: calc(var(--width-skeleton-avatar_s) * 1px);
-        }
-    }
-
-    &__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);
-    }
-
-
-    &__stock{
-        width: 100%;
-        display: flex;
-        justify-content: space-between;
-        &--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);
-            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);
-        }
-        &--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);
-        }
-
-        &--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);
-        }
-
-
-    }
-
-    &--space{
-        display: flex;
-        align-items: center;
-        .spacing{
-            margin-inline-start: calc(var(--spacing-skeleton-stock-padding_y) * 1px);
-
-        }
-    }
-
-    &__equally{
-        display: flex;
-        width: 100%;
-        gap: calc(var(--spacing-skeleton-avatar-margin_right) * 1px);
-    }
-
-}
-
-@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,173 +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 '@p/components/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
-    },
-    // disabled: {
-    //     type: Boolean,
-    //     default: false
-    // },
-    value: {
-      type: Number
-    },
-    markLeft:Number,
-    markRight: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>

package/dist/components/slider/style.less

@@ -1,96 +0,0 @@
-@silder-prefix-cls: vd-slider;
-
-.@{silder-prefix-cls} {
-
-    &__wrap{
-        position: relative;
-        margin: 7px 0;
-        height: calc(var(--height-slider-track) * 1px);
-        background-color: var(--color-slider-track-default); 
-        border-radius: calc(var(--radius-slider-track) * 1px);
-        &--demonstration{
-            height: calc(var(--height-slider-mark_track) * 1px);
-            border-radius: calc(var(--radius-slider-mark_track) * 1px);
-        }
-    }
-    &__bar{
-        position: absolute;
-        top: 0;
-        height: calc(var(--height-slider-track) * 1px);
-        background-color: var(--color-slider-track-focus);
-        border-radius: calc(var(--radius-slider-track) * 1px);
-
-
-        &--demonstration{
-            height: calc(var(--height-slider-mark_track) * 1px);
-        }
-    }
-    &__button{
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translate3d(-50%, -50%, 0);
-        cursor: grab;
-        border-radius: 50%;
-        width: calc(var(--width-slider-handle) * 1px);
-        height: calc(var(--width-slider-handle) * 1px);
-        background-color: var(--color-slider-handle-bg);
-        border: calc(var(--width-slider-handle_border) * 1px) solid var(--color-slider-handle_border-default);
-
-        &--demonstration{
-            width: calc(var(--width-slider-mark_handle) * 1px);
-            height: calc(var(--height-slider-mark_handle) * 1px);
-            border-radius: calc(var(--radius-slider-mark_handle) * 1px);
-            border: calc(var(--width-slider-mark_handle_border) * 1px) solid var(--color-slider-handle_border-default);
-        }
-
-        &--active{
-            border-color: var(--color-slider-handle_border-focus);
-        }
-    }
-
-    &__marks{
-        display: flex;
-        justify-content: space-between;
-        margin-block-start: calc(var(--spacing-slider-margin_bottom) * 1px);
-        font-size: calc(var(--en-single-f-a-r-fontSize) * 1px);
-        font-weight: var(--en-single-f-a-r-fontWeight);
-        color: var(--color-slider-mark-text);
-
-        &--top{
-            margin-block-start: 0;
-            margin-block-end: calc(var(--spacing-slider-margin_bottom) * 1px);
-        }
-        &--active{
-            font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-            font-weight: var(--en-single-f-d-s-fontWeight);
-        }
-
-        &--hidden {
-            opacity: 0;
-        }
-    }
-
-    &__dots{
-        position: absolute;
-        width: 1px;
-        height: 3px;
-        border-radius: 4px;
-        background-color: #fff;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        &--active{
-            height: 5px;
-        }
-    }
-
-    &__tips{
-        position: absolute;
-        left: 50%;
-        top: calc((var(--height-slider-mark_handle) + 8) * -1px );
-        transform: translateX(-50%);
-        font-size: calc(var(--en-single-f-d-s-fontSize) * 1px);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-slider-mark-text-focus);
-    }
-}