vdesign-ui 0.1.19 → 0.1.20

package/dist/components/input/index.vue

@@ -0,0 +1,343 @@
+<template>
+  <div :class="wrapClasses" class="vd-input">
+    <template v-if="inputTextArea || type !== 'textarea'">
+      <span v-if="prefix || $slots.prefix" class="vd-input-form__prefix" :class="borderRightClasses">
+        <slot name="prefix">{{ prefix }}</slot>
+      </span>
+      <input
+        v-if="!inputTextArea"
+        ref="input"
+        v-bind="$attrs"
+        :type="passwordIcon ? (passwordVisible ? 'text' : 'password') : type"
+        :class="inputClasses"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="currentValue"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+
+      <textarea
+        v-else
+        ref="textarea"
+        v-bind="$attrs"
+        :id="elementId"
+        :wrap="wrap"
+        :type="type"
+        :rows="rows"
+        :class="inputClasses"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="currentValue"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @input="handleInput"
+        :style="textareaStyles"
+      >
+      </textarea>
+      <div
+        v-if="suffix || $slots.suffix || append || $slots.append || isWordLimitVisible"
+        class="vd-input-form__right"
+      >
+        <span v-if="suffix || $slots.suffix" class="vd-input-form__suffix">
+          <slot name="suffix">
+            <vd-icon name="icon_btn_clean" @click="handleClear"></vd-icon>
+          </slot>
+        </span>
+        <span v-if="append || $slots.append" class="vd-input-form__append">
+          <slot name="append">{{ append }}</slot>
+        </span>
+        <div
+          v-if="isWordLimitVisible"
+          :class="[
+            'vd-input__word-limit',
+            { 'vd-input__word-limit--error': isOverLimit },
+          ]"
+        >
+          <span>{{ textLength }}</span
+          >/<span>{{ upperLimit }}</span>
+        </div>
+      </div>
+      <span
+        v-if="passwordClose || passwordIcon"
+        class="vd-input-form__password"
+      >
+        <span v-if="passwordClose" class="vd-input-form__password--close">
+            <vd-icon name="icon_btn_close" @click="handleClear"></vd-icon>
+        </span>
+        <span v-if="passwordIcon" class="vd-input-form__password--password">
+            <vd-icon
+              :name="passwordVisible ? 'icon_btn_eye' : 'icon_btn_eye_close'"
+              @click="handlePasswordVisible"
+            ></vd-icon>
+        </span>
+      </span>
+    </template>
+    <template v-else>
+      <textarea
+        ref="textarea"
+        :type="type"
+        v-bind="$attrs"
+        :wrap="wrap"
+        :class="inputClasses"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :value="currentValue"
+        :rows="rows"
+        :name="name"
+        @input="handleInput"
+        :style="textareaStyles"
+      >
+      </textarea>
+      <div
+        v-if="isWordLimitVisible"
+        :class="[
+          'vd-input__word-limit',
+          { 'vd-input__word-limit--error': isOverLimit },
+        ]"
+      >
+        <span>{{ textLength }}</span
+        >/<span>{{ upperLimit }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import calcTextareaHeight from "./calcTextareaHeight";
+const prefixCls = "vd-input";
+
+export default {
+  name: "vd-input",
+  props: {
+    type: {
+      type: String,
+      default: "text",
+    },
+    prefix: {
+      type: [Boolean, String],
+    },
+    borderRight: {
+      type: Boolean,
+      default: true
+    },
+    suffix: {
+      type: Boolean,
+    },
+    // 设计如此,单独的文字
+    append: {
+      type: Boolean,
+    },
+    placeholder: {
+      type: String,
+    },
+    error: {
+      type: Boolean,
+    },
+    bigSize: {
+      type: Boolean,
+    },
+    passwordIcon: {
+      type: Boolean,
+    },
+    passwordClose: {
+      type: Boolean,
+    },
+    passwordType: {
+      type: String,
+      default: "icon_btn_eye_close",
+    },
+    form: {
+      type: String,
+    },
+    disabled: {
+      type: Boolean,
+    },
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    rows: {
+      type: Number,
+      default: 2,
+    },
+    name: {
+      type: String,
+    },
+    // 设计如此多行textarea,跟input属性一样
+    inputTextArea: {
+      type: Boolean,
+    },
+    warning: {
+      type: Boolean,
+    },
+    hairline: {
+      type: Boolean,
+      default: true,
+    },
+    autosize: {
+      type: [Boolean, Object],
+      default: false,
+    },
+    elementId: {
+      type: String,
+    },
+    wrap: {
+      type: String,
+      default: "soft",
+    },
+    // 新增0118
+    showWordLimit: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      focusClass: false,
+      currentValue: this.value,
+      isOnComposition: false,
+      textareaStyles: {},
+      passwordVisible: false,
+    };
+  },
+  computed: {
+    wrapClasses() {
+      return [
+        {
+          [`${prefixCls}-${this.form}`]: this.form,
+          [`${prefixCls}--disabled`]: this.disabled,
+          [`${prefixCls}-${this.type}`]: this.type,
+          [`${prefixCls}-${this.type}--warning`]: this.warning,
+          [`${prefixCls}--bigsize`]: this.bigSize,
+          [`${prefixCls}--error`]: this.error,
+          [`${prefixCls}--active`]: this.focusClass,
+          [`${prefixCls}-inputarea`]: this.inputTextArea,
+          "vd-hairline--bottom": this.hairline,
+          "vd-textarea-auto": this.inputTextArea,
+        },
+      ];
+    },
+    borderRightClasses(){
+      return [
+        "vd-hairline--right",
+        {
+          [`${prefixCls}--border`]: this.borderRight,
+        }
+      ]
+    },
+    inputClasses() {
+      return [
+        `${prefixCls}__control`,
+        {
+          [`${prefixCls}-${this.type}__control`]: this.type,
+        },
+      ];
+    },
+    textLength() {
+      if (typeof this.value === "number") {
+        return String(this.value).length;
+      }
+      return (this.value || "").length;
+    },
+    upperLimit() {
+      return this.$attrs.maxlength;
+    },
+    isWordLimitVisible() {
+      return (
+        this.showWordLimit &&
+        this.$attrs.maxlength &&
+        (this.type === "text" || this.type === "textarea")
+      );
+    },
+    isOverLimit() {
+      return this.textLength >= this.upperLimit;
+    },
+  },
+  methods: {
+    handleFocus(event) {
+      if (this.form) {
+        this.focusClass = true;
+      }
+      this.$emit("focus", event);
+    },
+    handleBlur(event) {
+      if (this.form) {
+        this.focusClass = false;
+      }
+      this.$emit("blur", event);
+    },
+    focus() {
+      if (this.type === "textarea") {
+        this.$refs.textarea.focus();
+      } else {
+        this.$refs.input.focus();
+      }
+    },
+    blur() {
+      if (this.type === "textarea") {
+        this.$refs.textarea.blur();
+      } else {
+        this.$refs.input.blur();
+      }
+    },
+
+    handleInput(event) {
+      if (this.isOnComposition) return;
+      let value = event.target.value;
+      if (this.number && value !== "")
+        value = Number.isNaN(Number(value)) ? value : Number(value);
+      this.$emit("input", value);
+      this.setCurrentValue(value);
+      this.$emit("change", event);
+    },
+
+    setCurrentValue(value) {
+      if (value === this.currentValue) return;
+      this.$nextTick(() => {
+        this.resizeTextarea();
+      });
+      this.currentValue = value;
+    },
+    resizeTextarea() {
+      const autosize = this.autosize;
+      if (!autosize || this.type !== "textarea") {
+        return false;
+      }
+      const minRows = autosize.minRows;
+      const maxRows = autosize.maxRows;
+      this.textareaStyles = calcTextareaHeight(
+        this.$refs.textarea,
+        minRows,
+        maxRows
+      );
+    },
+    handleClear() {
+      const e = { target: { value: "" } };
+      this.$emit("input", "");
+      this.setCurrentValue("");
+      this.$emit("change", e);
+      this.$emit("clear");
+    },
+    handlePasswordVisible() {
+      this.passwordVisible = !this.passwordVisible;
+      this.$nextTick(() => {
+        this.focus();
+      });
+    },
+  },
+  watch: {
+    value(val) {
+      this.setCurrentValue(val);
+    },
+  },
+  mounted() {
+    this.resizeTextarea();
+  },
+};
+</script>
+
+<style lang="less">
+@import "./style.less";
+</style>

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

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

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="{ 'vd-password-is-filled': n === innerValue.length + 1 }">
+        <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,66 @@
+<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
+                v-bind="$attrs"
+                v-on="listeners"
+                form="search"
+                :hairline = "false"
+            ></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',
+    inheritAttrs: false,
+    props: {
+        type: {
+            type: String,
+            default: 'text'
+        },
+        prefix: {
+            type: Boolean,
+        },
+        suffix: {
+            type: Boolean,
+        },
+    },
+    data() {
+        return {
+        }
+    },
+    computed: {
+        inputClasses() {
+            return [
+                `${prefixCls}__control`
+            ]
+        },
+        listeners() {
+            return {
+                ...this.$listeners,
+            };
+        }
+    },
+    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>