vdesign-ui 0.1.19 → 0.1.20

package/dist/components/skeleton/index.vue

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

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

@@ -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,173 @@
+<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

@@ -0,0 +1,96 @@
+@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);
+    }
+}