input upgrade

FEI
1 parent 1af66c20
Showing 2 changed files with 164 additions and 57 deletions Show diff stats
src/components/input/input.vue
src/mixins/form.js
@@ -2,10 +2,15 @@
     <div :class="wrapClasses">
         <template v-if="type !== 'textarea'">
             <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
-            <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue && !disabled" @click="handleClear"></i>
+            <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue && !itemDisabled" @click="handleClear" :style="clearableStyles"></i>
             <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
             <i class="ivu-icon ivu-icon-ios-search" :class="[prefixCls + '-icon', prefixCls + '-icon-normal', prefixCls + '-search-icon']" v-else-if="search && enterButton === false" @click="handleSearch"></i>
             <span class="ivu-input-suffix" v-else-if="showSuffix"><slot name="suffix"><i class="ivu-icon" :class="['ivu-icon-' + suffix]" v-if="suffix"></i></slot></span>
+            <span class="ivu-input-word-count" v-else-if="showWordLimit">{{ textLength }}/{{ upperLimit }}</span>
+            <span class="ivu-input-suffix" v-else-if="password" @click="handleToggleShowPassword">
+                <i class="ivu-icon ivu-icon-ios-eye-outline" v-if="showPassword"></i>
+                <i class="ivu-icon ivu-icon-ios-eye-off-outline" v-else></i>
+            </span>
             <transition name="fade">
                 <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
             </transition>
@@ -14,10 +19,10 @@
                 :autocomplete="autocomplete"
                 :spellcheck="spellcheck"
                 ref="input"
-                :type="type"
+                :type="currentType"
                 :class="inputClasses"
                 :placeholder="placeholder"
-                :disabled="disabled"
+                :disabled="itemDisabled"
                 :maxlength="maxlength"
                 :readonly="readonly"
                 :name="name"
@@ -42,46 +47,49 @@
             </div>
             <span class="ivu-input-prefix" v-else-if="showPrefix"><slot name="prefix"><i class="ivu-icon" :class="['ivu-icon-' + prefix]" v-if="prefix"></i></slot></span>
         </template>
-        <textarea
-            v-else
-            :id="elementId"
-            :wrap="wrap"
-            :autocomplete="autocomplete"
-            :spellcheck="spellcheck"
-            ref="textarea"
-            :class="textareaClasses"
-            :style="textareaStyles"
-            :placeholder="placeholder"
-            :disabled="disabled"
-            :rows="rows"
-            :maxlength="maxlength"
-            :readonly="readonly"
-            :name="name"
-            :value="currentValue"
-            :autofocus="autofocus"
-            @keyup.enter="handleEnter"
-            @keyup="handleKeyup"
-            @keypress="handleKeypress"
-            @keydown="handleKeydown"
-            @focus="handleFocus"
-            @blur="handleBlur"
-            @compositionstart="handleComposition"
-            @compositionupdate="handleComposition"
-            @compositionend="handleComposition"
-            @input="handleInput">
-        </textarea>
+        <template v-else>
+            <textarea
+                :id="elementId"
+                :wrap="wrap"
+                :autocomplete="autocomplete"
+                :spellcheck="spellcheck"
+                ref="textarea"
+                :class="textareaClasses"
+                :style="textareaStyles"
+                :placeholder="placeholder"
+                :disabled="itemDisabled"
+                :rows="rows"
+                :maxlength="maxlength"
+                :readonly="readonly"
+                :name="name"
+                :value="currentValue"
+                :autofocus="autofocus"
+                @keyup.enter="handleEnter"
+                @keyup="handleKeyup"
+                @keypress="handleKeypress"
+                @keydown="handleKeydown"
+                @focus="handleFocus"
+                @blur="handleBlur"
+                @compositionstart="handleComposition"
+                @compositionupdate="handleComposition"
+                @compositionend="handleComposition"
+                @input="handleInput">
+            </textarea>
+            <span class="ivu-input-word-count" v-if="showWordLimit">{{ textLength }}/{{ upperLimit }}</span>
+        </template>
     </div>
 </template>
 <script>
     import { oneOf, findComponentUpward } from '../../utils/assist';
     import calcTextareaHeight from '../../utils/calcTextareaHeight';
     import Emitter from '../../mixins/emitter';
+    import mixinsForm from '../../mixins/form';
     const prefixCls = 'ivu-input';
     export default {
         name: 'Input',
-        mixins: [ Emitter ],
+        mixins: [ Emitter, mixinsForm ],
         props: {
             type: {
                 validator (value) {
@@ -106,7 +114,7 @@
                 default: ''
             },
             maxlength: {
-                type: Number
+                type: [String, Number]
             },
             disabled: {
                 type: Boolean,
@@ -172,34 +180,73 @@
             enterButton: {
                 type: [Boolean, String],
                 default: false
+            },
+            // 4.0.0
+            showWordLimit: {
+                type: Boolean,
+                default: false
+            },
+            // 4.0.0
+            password: {
+                type: Boolean,
+                default: false
+            },
+            // 4.5.0
+            border: {
+                type: Boolean,
+                default: true
             }
         },
         data () {
             return {
                 currentValue: this.value,
                 prefixCls: prefixCls,
-                prepend: true,
-                append: true,
                 slotReady: false,
                 textareaStyles: {},
-                showPrefix: false,
-                showSuffix: false,
-                isOnComposition: false
+                isOnComposition: false,
+                showPassword: false,
+                clearableIconOffset: 0
             };
         },
         computed: {
+            currentType () {
+                let type = this.type;
+                if (type === 'password' && this.password && this.showPassword) type = 'text';
+                return type;
+            },
+            prepend () {
+                let state = false;
+                if (this.type !== 'textarea') state = this.$slots.prepend !== undefined;
+                return state;
+            },
+            append () {
+                let state = false;
+                if (this.type !== 'textarea') state = this.$slots.append !== undefined;
+                return state;
+            },
+            showPrefix () {
+                let state = false;
+                if (this.type !== 'textarea') state = this.prefix !== '' || this.$slots.prefix !== undefined;
+                return state;
+            },
+            showSuffix () {
+                let state = false;
+                if (this.type !== 'textarea') state = this.suffix !== '' || this.$slots.suffix !== undefined;
+                return state;
+            },
             wrapClasses () {
                 return [
                     `${prefixCls}-wrapper`,
                     {
                         [`${prefixCls}-wrapper-${this.size}`]: !!this.size,
-                        [`${prefixCls}-type`]: this.type,
+                        [`${prefixCls}-type-${this.type}`]: this.type,
                         [`${prefixCls}-group`]: this.prepend || this.append || (this.search && this.enterButton),
                         [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append || (this.search && this.enterButton)) && !!this.size,
                         [`${prefixCls}-group-with-prepend`]: this.prepend,
                         [`${prefixCls}-group-with-append`]: this.append || (this.search && this.enterButton),
                         [`${prefixCls}-hide-icon`]: this.append,  // #554
-                        [`${prefixCls}-with-search`]: (this.search && this.enterButton)
+                        [`${prefixCls}-with-search`]: (this.search && this.enterButton),
+                        [`${prefixCls}-wrapper-disabled`]: this.itemDisabled // #685
                     }
                 ];
             },
@@ -208,7 +255,8 @@
                     `${prefixCls}`,
                     {
                         [`${prefixCls}-${this.size}`]: !!this.size,
-                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-disabled`]: this.itemDisabled,
+                        [`${prefixCls}-no-border`]: !this.border,
                         [`${prefixCls}-with-prefix`]: this.showPrefix,
                         [`${prefixCls}-with-suffix`]: this.showSuffix || (this.search && this.enterButton === false)
                     }
@@ -218,9 +266,26 @@
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-disabled`]: this.disabled
+                        [`${prefixCls}-disabled`]: this.itemDisabled,
+                        [`${prefixCls}-no-border`]: !this.border
                     }
                 ];
+            },
+            upperLimit () {
+                return this.maxlength;
+            },
+            textLength () {
+                if (typeof this.value === 'number') {
+                    return String(this.value).length;
+                }
+
+                return (this.value || '').length;
+            },
+            clearableStyles () {
+                const style = {};
+                let offset = this.clearableIconOffset;
+                if (offset) style.transform = `translateX(-${offset}px)`;
+                return style;
             }
         },
         methods: {
@@ -291,11 +356,24 @@
                 this.textareaStyles = calcTextareaHeight(this.$refs.textarea, minRows, maxRows);
             },
-            focus () {
-                if (this.type === 'textarea') {
-                    this.$refs.textarea.focus();
-                } else {
-                    this.$refs.input.focus();
+            focus (option) {
+                const $el = this.type === 'textarea' ? this.$refs.textarea : this.$refs.input;
+                $el.focus(option);
+                // Selection content
+                const { cursor } = option || {};
+                if (cursor) {
+                    const len = $el.value.length;
+
+                    switch (cursor) {
+                        case 'start':
+                            $el.setSelectionRange(0, 0);
+                            break;
+                        case 'end':
+                            $el.setSelectionRange(len, len);
+                            break;
+                        default:
+                            $el.setSelectionRange(0, len);
+                    }
                 }
             },
             blur () {
@@ -313,28 +391,43 @@
                 this.$emit('on-clear');
             },
             handleSearch () {
-                if (this.disabled) return false;
+                if (this.itemDisabled) return false;
                 this.$refs.input.focus();
                 this.$emit('on-search', this.currentValue);
+            },
+            handleToggleShowPassword () {
+                if (this.itemDisabled) return false;
+                this.showPassword = !this.showPassword;
+                this.focus();
+                const len = this.currentValue.length;
+                setTimeout(() => {
+                    this.$refs.input.setSelectionRange(len, len);
+                }, 0);
+            },
+            handleCalcIconOffset () {
+                const $el = this.$el.querySelectorAll('.ivu-input-group-append')[0];
+                if ($el) {
+                    this.clearableIconOffset = $el.offsetWidth;
+                } else {
+                    this.clearableIconOffset = 0;
+                }
             }
         },
         watch: {
             value (val) {
                 this.setCurrentValue(val);
+            },
+            type () {
+                this.$nextTick(this.handleCalcIconOffset);
             }
         },
         mounted () {
-            if (this.type !== 'textarea') {
-                this.prepend = this.$slots.prepend !== undefined;
-                this.append = this.$slots.append !== undefined;
-                this.showPrefix = this.prefix !== '' || this.$slots.prefix !== undefined;
-                this.showSuffix = this.suffix !== '' || this.$slots.suffix !== undefined;
-            } else {
-                this.prepend = false;
-                this.append = false;
-            }
             this.slotReady = true;
             this.resizeTextarea();
+            this.handleCalcIconOffset();
+        },
+        updated () {
+            this.$nextTick(this.handleCalcIconOffset);
         }
     };
 </script>
+export default {
+    inject: {
+        FormInstance: {
+            default: ''
+        }
+    },
+    computed: {
+        itemDisabled () {
+            let state = this.disabled;
+            if (!state && this.FormInstance) state = this.FormInstance.disabled;
+            return state;
+        }
+    }
+};