vdesign-ui 0.1.21 → 0.1.23

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);
+    }
+}

package/dist/components/slider/utils.js

@@ -0,0 +1,60 @@
+import Vue from 'vue';
+const isServer = Vue.prototype.$isServer;
+
+/* istanbul ignore next */
+export const on = (function() {
+    if (!isServer && document.addEventListener) {
+        return function(element, event, handler, useCapture = false) {
+            if (element && event && handler) {
+                element.addEventListener(event, handler, useCapture);
+            }
+        };
+    } else {
+        return function(element, event, handler) {
+            if (element && event && handler) {
+                element.attachEvent('on' + event, handler);
+            }
+        };
+    }
+})();
+
+/* istanbul ignore next */
+export const off = (function() {
+    if (!isServer && document.removeEventListener) {
+        return function(element, event, handler, useCapture = false) {
+            if (element && event) {
+                element.removeEventListener(event, handler, useCapture);
+            }
+        };
+    } else {
+        return function(element, event, handler) {
+            if (element && event) {
+                element.detachEvent('on' + event, handler);
+            }
+        };
+    }
+})();
+
+const SPECIAL_CHARS_REGEXP = /[:-_]+./g;
+const MOZ_HACK_REGEXP = /^moz([A-Z])/;
+
+function camelCase(name) {
+    return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
+        return offset ? letter.toUpperCase() : letter;
+    }).replace(MOZ_HACK_REGEXP, 'Moz$1');
+}
+
+// getStyle
+export function getStyle (element, styleName) {
+    if (!element || !styleName) return null;
+    styleName = camelCase(styleName);
+    if (styleName === 'float') {
+        styleName = 'cssFloat';
+    }
+    try {
+        const computed = document.defaultView.getComputedStyle(element, '');
+        return element.style[styleName] || computed ? computed[styleName] : null;
+    } catch(e) {
+        return element.style[styleName];
+    }
+}

package/dist/components/step/index.js

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

package/dist/components/step/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="vd-step" :class="'vd-step-' + direction">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'vd-step',
+  props: {
+    // 激活状态
+    active: {
+      type: Array,
+      required: true
+    },
+    // 显示方向
+    direction: {
+      type: String,
+      default: 'horizontal' // horizontal|vertical|basic
+    },
+    // 置灰颜色
+    color: {
+      type: String,
+      default: ''
+    },
+    // 激活颜色
+    activeColor: {
+      type: String,
+      default: ''
+    },
+    // 置灰图标
+    icon: {
+      type: String,
+      default: ''
+    },
+    // 激活图标
+    activeIcon: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/step/style.less

@@ -0,0 +1,59 @@
+@prefix: ~"vd-step";
+
+.@{prefix} {
+  transform: translateX(0);
+  width: 100%;
+  overflow: hidden;
+
+  &.vd-step-horizontal {
+    display: flex;
+    justify-content: space-between;
+
+    .vd-step-item {
+
+      &:first-child {
+        .vd-step-u-line {
+          width: 50%;
+
+          &::after {
+            width: 0%;
+          }
+        }
+      }
+
+      &:last-child {
+        .vd-step-u-line {
+          width: 50%;
+          inset-inline-end: 50%;
+
+          &::after {
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+
+  &.vd-step-vertical {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    padding-block-start: calc(var(--spacing-steps-vertical-padding_x) * 1px);
+    padding-block-end: calc(var(--spacing-steps-vertical-padding_x) * 1px);
+
+    .vd-step-item {
+
+      &:last-child {
+
+        .vd-step-u-line {
+          display: none;
+        }
+      }
+    }
+  }
+
+  &.vd-step-basic {
+    display: flex;
+    justify-content: space-between;
+  }
+}

package/dist/components/step-item/index.js

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