vdesign-ui 0.1.20 → 0.1.21

package/dist/components/input/index.vue

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

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

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

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

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

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

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