vdesign-ui 0.2.11 → 0.2.12

package/dist/components/stepper/index.js

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

package/dist/components/stepper/index.vue

@@ -1,146 +1,146 @@
-<template>
-    <div class="vd-stepper" :class="wrapClasses">
-        <vd-button v-if="!position" :class="minusButtonClass" icon="icon_btn_reduce" size="small"
-            @click="onChange('minus')"></vd-button>
-        <input
-            type="number"
-            :class="inputClasses"
-            :disabled="disabled"
-            :value="currentValue"
-            :placeholder="placeholder"
-            @input="onInput"
-            @blur="onBlur"
-        >
-        <vd-button v-if="position === 'right'" class="vd-stepper__minus" icon="icon_btn_reduce" size="small"
-            @click="onChange('minus')"></vd-button>
-        <vd-button :class="plusButtonClass" icon="icon_btn_add" size="small"
-            @click="onChange('plus')"></vd-button>
-    </div>
-</template>
-
-<script>
-import VdButton from '../button';
-import languageMixin from '../mixins/languageMixin.js';
-
-const prefixCls = 'vd-stepper';
-export default {
-    mixins: [languageMixin],
-    components: {
-        VdButton,
-    },
-    name: 'vd-stepper',
-    props: {
-        value: null,
-        integer: Boolean,
-        position: String,
-        inputCenter: Boolean,
-        disabled: Boolean,
-        theme: String,
-        min: {
-            type: [String, Number],
-            default: 1
-        },
-        max: {
-            type: [String, Number],
-            default: Infinity
-        },
-        step: {
-            type: [String, Number],
-            default: 1
-        },
-        placeholder: String
-    },
-    data() {
-        let value;
-        if (this.isDef(this.value)) {
-            value = this.range(this.value);
-            if (value !== this.value) {
-                this.$emit('input', value);
-            }
-        } else {
-            value = '';
-        }
-        return {
-            currentValue: value,
-        };
-    },
-    computed: {
-        inputClasses() {
-            return [
-                `${prefixCls}-input`,
-            ]
-        },
-        wrapClasses() {
-            return [
-                {
-                    [`${prefixCls}--disabled`]: this.disabled,
-                    [`${prefixCls}--${this.theme}`]: this.theme,
-                    [`${prefixCls}--center`]: this.inputCenter
-                }
-            ]
-        },
-        minusButtonClass() {
-            const hairlineClass = this.language === 'ar' ? 'vd-hairline--left' : 'vd-hairline--right';
-            return `vd-stepper__minus ${hairlineClass}`;
-        },
-        plusButtonClass() {
-            const hairlineClass = this.language === 'ar' ? 'vd-hairline--right' : 'vd-hairline--left';
-            return `vd-stepper__plus ${hairlineClass}`;
-        }
-    },
-    watch: {
-        value(val) {
-            if (val !== this.currentValue) {
-                this.currentValue = this.format(val);
-            }
-        },
-        currentValue(val) {
-            this.$emit('input', val);
-            this.$emit('change', val);
-        }
-    },
-    methods: {
-        format(value) {
-            if (value === '' || value === null || value === undefined) {
-                return '';
-            }
-            value = String(value).replace(/[^0-9.-]/g, '');
-            return this.integer ? Math.floor(value) : +value;
-        },
-        // limit value range
-        range(value) {
-            value = this.format(value);
-            if (value === '') {
-                return value;
-            }
-            return Math.max(Math.min(this.max, value), this.min);
-        },
-        onInput(event) {
-            const { value } = event.target;
-            const formatted = this.format(value);
-            if (value !== String(formatted)) {
-                event.target.value = formatted;
-            }
-            this.currentValue = formatted;
-        },
-        onChange(type) {
-            if (this[`${type}Disabled`]) {
-                this.$emit('overlimit', type);
-                return;
-            }
-            const diff = type === 'minus' ? -this.step : +this.step;
-            let value = this.currentValue === '' ? 0 : this.currentValue;
-            value = Math.round((value + diff) * 100) / 100;
-            this.currentValue = this.range(value);
-            this.$emit(type);
-        },
-        onBlur(event) {
-            this.currentValue = this.range(this.currentValue);
-            this.$emit('blur', event);
-        },
-        isDef(value) {
-            return value !== undefined && value !== null;
-        }
-    }
-}
-</script>
+<template>
+    <div class="vd-stepper" :class="wrapClasses">
+        <vd-button v-if="!position" :class="minusButtonClass" icon="icon_btn_reduce" size="small"
+            @click="onChange('minus')"></vd-button>
+        <input
+            type="number"
+            :class="inputClasses"
+            :disabled="disabled"
+            :value="currentValue"
+            :placeholder="placeholder"
+            @input="onInput"
+            @blur="onBlur"
+        >
+        <vd-button v-if="position === 'right'" class="vd-stepper__minus" icon="icon_btn_reduce" size="small"
+            @click="onChange('minus')"></vd-button>
+        <vd-button :class="plusButtonClass" icon="icon_btn_add" size="small"
+            @click="onChange('plus')"></vd-button>
+    </div>
+</template>
+
+<script>
+import VdButton from '../button';
+import languageMixin from '../mixins/languageMixin.js';
+
+const prefixCls = 'vd-stepper';
+export default {
+    mixins: [languageMixin],
+    components: {
+        VdButton,
+    },
+    name: 'vd-stepper',
+    props: {
+        value: null,
+        integer: Boolean,
+        position: String,
+        inputCenter: Boolean,
+        disabled: Boolean,
+        theme: String,
+        min: {
+            type: [String, Number],
+            default: 1
+        },
+        max: {
+            type: [String, Number],
+            default: Infinity
+        },
+        step: {
+            type: [String, Number],
+            default: 1
+        },
+        placeholder: String
+    },
+    data() {
+        let value;
+        if (this.isDef(this.value)) {
+            value = this.range(this.value);
+            if (value !== this.value) {
+                this.$emit('input', value);
+            }
+        } else {
+            value = '';
+        }
+        return {
+            currentValue: value,
+        };
+    },
+    computed: {
+        inputClasses() {
+            return [
+                `${prefixCls}-input`,
+            ]
+        },
+        wrapClasses() {
+            return [
+                {
+                    [`${prefixCls}--disabled`]: this.disabled,
+                    [`${prefixCls}--${this.theme}`]: this.theme,
+                    [`${prefixCls}--center`]: this.inputCenter
+                }
+            ]
+        },
+        minusButtonClass() {
+            const hairlineClass = this.language === 'ar' ? 'vd-hairline--left' : 'vd-hairline--right';
+            return `vd-stepper__minus ${hairlineClass}`;
+        },
+        plusButtonClass() {
+            const hairlineClass = this.language === 'ar' ? 'vd-hairline--right' : 'vd-hairline--left';
+            return `vd-stepper__plus ${hairlineClass}`;
+        }
+    },
+    watch: {
+        value(val) {
+            if (val !== this.currentValue) {
+                this.currentValue = this.format(val);
+            }
+        },
+        currentValue(val) {
+            this.$emit('input', val);
+            this.$emit('change', val);
+        }
+    },
+    methods: {
+        format(value) {
+            if (value === '' || value === null || value === undefined) {
+                return '';
+            }
+            value = String(value).replace(/[^0-9.-]/g, '');
+            return this.integer ? Math.floor(value) : +value;
+        },
+        // limit value range
+        range(value) {
+            value = this.format(value);
+            if (value === '') {
+                return value;
+            }
+            return Math.max(Math.min(this.max, value), this.min);
+        },
+        onInput(event) {
+            const { value } = event.target;
+            const formatted = this.format(value);
+            if (value !== String(formatted)) {
+                event.target.value = formatted;
+            }
+            this.currentValue = formatted;
+        },
+        onChange(type) {
+            if (this[`${type}Disabled`]) {
+                this.$emit('overlimit', type);
+                return;
+            }
+            const diff = type === 'minus' ? -this.step : +this.step;
+            let value = this.currentValue === '' ? 0 : this.currentValue;
+            value = Math.round((value + diff) * 100) / 100;
+            this.currentValue = this.range(value);
+            this.$emit(type);
+        },
+        onBlur(event) {
+            this.currentValue = this.range(this.currentValue);
+            this.$emit('blur', event);
+        },
+        isDef(value) {
+            return value !== undefined && value !== null;
+        }
+    }
+}
+</script>

package/dist/components/style/index.vue

@@ -1,42 +1,42 @@
-<template>
-    <div>
-        <h2>默认包含了一些常用样式，可以直接通过 className 的方式使用,样式文件在packages/tokens/style.less里面</h2>
-
-
-        <h3>文字省略</h3>
-        
-        <!-- 最多显示一行 -->
-        <div class="vd-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>
-
-        <!-- 最多显示两行 -->
-        <div class="vd-multi-ellipsis--l2">
-        这是一段最多显示两行的文字，多余的内容会被省略
-        </div>
-
-        <!-- 最多显示三行 -->
-        <div class="vd-multi-ellipsis--l3">
-        这是一段最多显示三行的文字，多余的内容会被省略
-        </div>
-
-        <h3>1px 边框</h3>
-
-        <!-- 上边框 -->
-        <div class="vd-hairline--top"></div>
-
-        <!-- 下边框 -->
-        <div class="vd-hairline--bottom"></div>
-
-        <!-- 左边框 -->
-        <div class="vd-hairline--left"></div>
-
-        <!-- 右边框 -->
-        <div class="vd-hairline--right"></div>
-
-        <!-- 上下边框 -->
-        <div class="vd-hairline--top-bottom"></div>
-
-        <!-- 全边框 -->
-        <div class="vd-hairline--surround"></div>
-    </div>
-</template>
-
+<template>
+    <div>
+        <h2>默认包含了一些常用样式，可以直接通过 className 的方式使用,样式文件在packages/tokens/style.less里面</h2>
+
+
+        <h3>文字省略</h3>
+        
+        <!-- 最多显示一行 -->
+        <div class="vd-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>
+
+        <!-- 最多显示两行 -->
+        <div class="vd-multi-ellipsis--l2">
+        这是一段最多显示两行的文字，多余的内容会被省略
+        </div>
+
+        <!-- 最多显示三行 -->
+        <div class="vd-multi-ellipsis--l3">
+        这是一段最多显示三行的文字，多余的内容会被省略
+        </div>
+
+        <h3>1px 边框</h3>
+
+        <!-- 上边框 -->
+        <div class="vd-hairline--top"></div>
+
+        <!-- 下边框 -->
+        <div class="vd-hairline--bottom"></div>
+
+        <!-- 左边框 -->
+        <div class="vd-hairline--left"></div>
+
+        <!-- 右边框 -->
+        <div class="vd-hairline--right"></div>
+
+        <!-- 上下边框 -->
+        <div class="vd-hairline--top-bottom"></div>
+
+        <!-- 全边框 -->
+        <div class="vd-hairline--surround"></div>
+    </div>
+</template>
+

package/dist/components/switch/index.js

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

package/dist/components/switch/index.vue

@@ -1,72 +1,72 @@
-<template>
-  <!-- 开关 -->
-  <div class="vd-switch" :class="{ 'vd-switch-on': isActived }" :disabled="disabled" @click="handleClick">
-    <span class="vd-switch-round"></span>
-  </div>
-</template>
-<script>
-export default {
-  name: 'vd-switch',
-  props: {
-    /**
-     * v-model 绑定值
-     */
-    value: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 异步状态
-     */
-    async: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * 禁用状态
-     */
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      /**
-       * 激活状态
-       */
-      isActived: this.value
-    }
-  },
-  methods: {
-    /**
-     * 点击 Switch 开关
-     */
-    handleClick() {
-      const { disabled, async, isActived } = this
-      /**
-       * 判断是否被禁用
-       */
-      if (!disabled) {
-        /**
-         * 判断是否异步
-         */
-        !async && this.$emit('input', !isActived)
-        this.$emit('on-click')
-        // element.style.setProperty('--primary-color', 'blue');
-      }
-    },
-  },
-  watch: {
-    /**
-     * 监听 value 的值
-     */
-    value(value) {
-      this.isActived = value
-    }
-  }
-}
-</script>
-<style lang="less">
-@import './style.less';
-</style>
+<template>
+  <!-- 开关 -->
+  <div class="vd-switch" :class="{ 'vd-switch-on': isActived }" :disabled="disabled" @click="handleClick">
+    <span class="vd-switch-round"></span>
+  </div>
+</template>
+<script>
+export default {
+  name: 'vd-switch',
+  props: {
+    /**
+     * v-model 绑定值
+     */
+    value: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 异步状态
+     */
+    async: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * 禁用状态
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      /**
+       * 激活状态
+       */
+      isActived: this.value
+    }
+  },
+  methods: {
+    /**
+     * 点击 Switch 开关
+     */
+    handleClick() {
+      const { disabled, async, isActived } = this
+      /**
+       * 判断是否被禁用
+       */
+      if (!disabled) {
+        /**
+         * 判断是否异步
+         */
+        !async && this.$emit('input', !isActived)
+        this.$emit('on-click')
+        // element.style.setProperty('--primary-color', 'blue');
+      }
+    },
+  },
+  watch: {
+    /**
+     * 监听 value 的值
+     */
+    value(value) {
+      this.isActived = value
+    }
+  }
+}
+</script>
+<style lang="less">
+@import './style.less';
+</style>

package/dist/components/switch/style.less

@@ -1,56 +1,56 @@
-@prefix: ~"vd-switch";
-
-.@{prefix} {
-  display: inline-block;
-  position: relative;
-  box-sizing: border-box;
-  width: var(--width-switch-bg);
-  height: var(--height-switch-bg);
-  border-radius: var(--radius-switch-bg);
-  background: var(--color-switch-off_bg-default);
-  cursor: pointer;
-
-  &-round {
-    box-sizing: border-box;
-    position: absolute;
-    top: calc(var(--height-switch-bg) * -0.5);
-    left: 0;
-    transition: transform .3s;
-    width: var(--height-switch-button);
-    height: var(--height-switch-button);
-    border-radius: var(--radius-switch-button);
-    border: 1px solid var(--color-switch-off_button_border-default);
-    background: var(--color-switch-off_button_bg-default);
-  }
-
-  &-on {
-    border-color: var(--color-switch-on_button_border-default);
-    background: var(--color-switch-on_bg-default);
-
-    .@{prefix}-round {
-      transform: translateX(var(--height-switch-button));
-      background: var(--color-switch-on_button_bg-default);
-    }
-  }
-
-  &[disabled] {
-    border-color: var(--color-switch-off_button_border-disable);
-    background: var(--color-switch-off_bg-disable);
-
-    .@{prefix}-round {
-      background: var(--color-switch-off_button_bg-disable);
-      border-color: var(--color-switch-off_button_border-disable);
-    }
-  }
-
-  // 选中&&禁用
-  &-on[disabled] {
-    border-color: var(--color-switch-on_button_border-disable);
-    background: var(--color-switch-on_bg-disable);
-
-    .@{prefix}-round {
-      background: var(--color-switch-on_button_bg-disable);
-      border-color: var(--color-switch-on_button_border-disable);
-    }
-  }
-}
+@prefix: ~"vd-switch";
+
+.@{prefix} {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  width: var(--width-switch-bg);
+  height: var(--height-switch-bg);
+  border-radius: var(--radius-switch-bg);
+  background: var(--color-switch-off_bg-default);
+  cursor: pointer;
+
+  &-round {
+    box-sizing: border-box;
+    position: absolute;
+    top: calc(var(--height-switch-bg) * -0.5);
+    left: 0;
+    transition: transform .3s;
+    width: var(--height-switch-button);
+    height: var(--height-switch-button);
+    border-radius: var(--radius-switch-button);
+    border: 1px solid var(--color-switch-off_button_border-default);
+    background: var(--color-switch-off_button_bg-default);
+  }
+
+  &-on {
+    border-color: var(--color-switch-on_button_border-default);
+    background: var(--color-switch-on_bg-default);
+
+    .@{prefix}-round {
+      transform: translateX(var(--height-switch-button));
+      background: var(--color-switch-on_button_bg-default);
+    }
+  }
+
+  &[disabled] {
+    border-color: var(--color-switch-off_button_border-disable);
+    background: var(--color-switch-off_bg-disable);
+
+    .@{prefix}-round {
+      background: var(--color-switch-off_button_bg-disable);
+      border-color: var(--color-switch-off_button_border-disable);
+    }
+  }
+
+  // 选中&&禁用
+  &-on[disabled] {
+    border-color: var(--color-switch-on_button_border-disable);
+    background: var(--color-switch-on_bg-disable);
+
+    .@{prefix}-round {
+      background: var(--color-switch-on_button_bg-disable);
+      border-color: var(--color-switch-on_button_border-disable);
+    }
+  }
+}