vdesign-ui 0.2.9 → 0.2.12

package/dist/components/slider/index.vue

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

package/dist/components/slider/style.less

@@ -1,100 +1,100 @@
-@silder-prefix-cls: vd-slider;
-
-.@{silder-prefix-cls} {
-
-    &__wrap {
-        position: relative;
-        margin: 7px 0;
-        height: var(--height-slider-track);
-        background-color: var(--color-slider-track-default);
-        border-radius: var(--radius-slider-track);
-        
-        &--demonstration {
-            height: var(--height-slider-mark_track);
-            border-radius: var(--radius-slider-mark_track);
-        }
-    }
-
-    &__bar {
-        position: absolute;
-        top: 0;
-        height: var(--height-slider-track);
-        background-color: var(--color-slider-track-focus);
-        border-radius: var(--radius-slider-track);
-
-        &--demonstration {
-            height: var(--height-slider-mark_track);
-        }
-    }
-
-    &__button {
-        position: absolute;
-        left: 0;
-        top: 50%;
-        transform: translate3d(-50%, -50%, 0);
-        cursor: grab;
-        border-radius: 50%;
-        width: var(--width-slider-handle);
-        height: var(--width-slider-handle);
-        background-color: var(--color-slider-handle-bg);
-        border: var(--width-slider-handle_border) solid var(--color-slider-handle_border-default);
-
-        &--demonstration {
-            width: var(--width-slider-mark_handle);
-            height: var(--height-slider-mark_handle);
-            border-radius: var(--radius-slider-mark_handle);
-            border: var(--width-slider-mark_handle_border) solid var(--color-slider-handle_border-default);
-        }
-
-        &--active {
-            border-color: var(--color-slider-handle_border-focus);
-        }
-    }
-
-    &__marks {
-        display: flex;
-        justify-content: space-between;
-        margin-top: var(--spacing-slider-margin_bottom);
-        font-size: var(--en-single-f-a-r-fontSize);
-        font-weight: var(--en-single-f-a-r-fontWeight);
-        color: var(--color-slider-mark-text);
-
-        &--top {
-            margin-top: 0;
-            margin-bottom: var(--spacing-slider-margin_bottom);
-        }
-
-        &--active {
-            font-size: var(--en-single-f-d-s-fontSize);
-            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(-1 * var(--height-slider-mark_handle) - 8px);
-        transform: translateX(-50%);
-        font-size: var(--en-single-f-d-s-fontSize);
-        font-weight: var(--en-single-f-d-s-fontWeight);
-        color: var(--color-slider-mark-text-focus);
-    }
+@silder-prefix-cls: vd-slider;
+
+.@{silder-prefix-cls} {
+
+    &__wrap {
+        position: relative;
+        margin: 7px 0;
+        height: var(--height-slider-track);
+        background-color: var(--color-slider-track-default);
+        border-radius: var(--radius-slider-track);
+        
+        &--demonstration {
+            height: var(--height-slider-mark_track);
+            border-radius: var(--radius-slider-mark_track);
+        }
+    }
+
+    &__bar {
+        position: absolute;
+        top: 0;
+        height: var(--height-slider-track);
+        background-color: var(--color-slider-track-focus);
+        border-radius: var(--radius-slider-track);
+
+        &--demonstration {
+            height: var(--height-slider-mark_track);
+        }
+    }
+
+    &__button {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        cursor: grab;
+        border-radius: 50%;
+        width: var(--width-slider-handle);
+        height: var(--width-slider-handle);
+        background-color: var(--color-slider-handle-bg);
+        border: var(--width-slider-handle_border) solid var(--color-slider-handle_border-default);
+
+        &--demonstration {
+            width: var(--width-slider-mark_handle);
+            height: var(--height-slider-mark_handle);
+            border-radius: var(--radius-slider-mark_handle);
+            border: var(--width-slider-mark_handle_border) solid var(--color-slider-handle_border-default);
+        }
+
+        &--active {
+            border-color: var(--color-slider-handle_border-focus);
+        }
+    }
+
+    &__marks {
+        display: flex;
+        justify-content: space-between;
+        margin-top: var(--spacing-slider-margin_bottom);
+        font-size: var(--en-single-f-a-r-fontSize);
+        font-weight: var(--en-single-f-a-r-fontWeight);
+        color: var(--color-slider-mark-text);
+
+        &--top {
+            margin-top: 0;
+            margin-bottom: var(--spacing-slider-margin_bottom);
+        }
+
+        &--active {
+            font-size: var(--en-single-f-d-s-fontSize);
+            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(-1 * var(--height-slider-mark_handle) - 8px);
+        transform: translateX(-50%);
+        font-size: var(--en-single-f-d-s-fontSize);
+        font-weight: var(--en-single-f-d-s-fontWeight);
+        color: var(--color-slider-mark-text-focus);
+    }
 }

package/dist/components/slider/utils.js

@@ -1,60 +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];
-    }
+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

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