vdesign-ui 0.1.8 → 0.1.10

package/dist/components/input/password/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="vd-password">
+    <input type="tel" :maxlength="length" v-model="innerValue" @input="handleInput" @focus="handleFocus"
+      @blur="handleBlur" class="vd-password__input" />
+    <div class="vd-password__security">
+      <div class="vd-password__item" v-for="n in length" :key="n" :class="{ 'is-filled': n > innerValue.length }">
+        <template v-if="mask">
+          <i v-if="n <= innerValue.length" class="mask-icon"></i>
+        </template>
+        <template v-else>
+          {{ innerValue[n - 1] }}
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "vd-password",
+  props: {
+    value: {
+      type: String,
+    },
+    length: {
+      type: Number,
+      default: 6,
+    },
+    mask: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      innerValue: this.value,
+    };
+  },
+  watch: {
+    value(val) {
+      this.innerValue = val;
+    },
+  },
+  methods: {
+    handleInput(e) {
+      this.innerValue = e.target.value.slice(0, this.length);
+      this.$emit("input", this.innerValue);
+      if (this.innerValue.length === this.length) {
+        this.$emit("complete", this.innerValue);
+      }
+    },
+    handleFocus() {
+      this.$emit("focus");
+    },
+    handleBlur() {
+      this.$emit("blur");
+    },
+  },
+};
+</script>

package/dist/components/input/search/index.js

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

package/dist/components/input/search/index.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class="vd-search">
+        <div class="vd-search-content">
+            <span v-if="prefix || $slots.prefix" class="vd-search__prefix">
+                <slot name="prefix">
+                    <vd-icon name="icon_nav_search"></vd-icon>
+                </slot>
+            </span>
+            <input :type="type" :class="inputClasses" :placeholder="placeholder">
+            <!-- <vd-input
+                type="text"
+                form="form"
+                placeholder="请输出文字"
+                v-model="input"
+            ></vd-input> -->
+            <span v-if="suffix || $slots.suffix" class="vd-search__suffix">
+                <slot name="suffix">
+                    <vd-icon v-if="suffix" name="icon_btn_clean"></vd-icon>
+                </slot>
+            </span>
+
+        </div>
+        <span class="vd-search__action" v-if="$slots.default">
+            <slot></slot>
+        </span>
+    </div>
+</template>
+
+<script>
+const prefixCls = 'vd-search';
+export default {
+    name: 'vd-search',
+    props: {
+        type: {
+            type: String,
+            default: 'text'
+        },
+        prefix: {
+            type: Boolean,
+        },
+        suffix: {
+            type: Boolean,
+        },
+        placeholder: {
+            type: String,
+            default: ''
+        },
+    },
+    data() {
+        return {
+        }
+    },
+    computed: {
+        inputClasses() {
+            return [
+                `${prefixCls}__control`
+            ]
+        },
+    },
+    methods: {
+
+    }
+}
+</script>

package/dist/components/input/stepper/index.js

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

package/dist/components/input/stepper/index.vue

@@ -0,0 +1,136 @@
+<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 languageMixin from '@p/components/mixins/languageMixin.js';
+
+const prefixCls = 'vd-stepper';
+export default {
+    mixins: [languageMixin],
+    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() {
+        const value = this.range(this.isDef(this.value) ? this.value : this.defaultValue);
+        if (value !== +this.value) {
+            this.$emit('input', 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}`;
+        }
+        // minusDisabled() {
+        //     return this.disabled || this.currentValue <= this.min;
+        // },
+
+        // plusDisabled() {
+        //     return this.disabled || this.currentValue >= this.max;
+        // }
+    },
+    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) {
+            value = String(value).replace(/[^0-9.-]/g, '');
+            return value === '' ? 0 : this.integer ? Math.floor(value) : +value;
+        },
+
+        // limit value range
+        range(value) {
+            return Math.max(Math.min(this.max, this.format(value)), this.min);
+        },
+
+        onInput(event) {
+            const { value } = event.target;
+            const formatted = this.format(value);
+            if (+value !== 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;
+            const value = Math.round((this.currentValue + 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>