vxe-pc-ui 3.0.0 → 3.0.2

package/es/password-input/src/password-input.js

@@ -0,0 +1,392 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, getIcon, getI18n, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+import { getFuncText } from '../../ui/src/utils';
+import { getSlotVNs } from '../..//ui/src/vn';
+export default defineVxeComponent({
+    name: 'VxePasswordInput',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    model: {
+        prop: 'value',
+        event: 'modelValue'
+    },
+    props: {
+        value: String,
+        name: String,
+        clearable: { type: Boolean, default: () => getConfig().passwordInput.clearable },
+        readonly: Boolean,
+        disabled: Boolean,
+        maxLength: [String, Number],
+        placeholder: String,
+        autoComplete: {
+            type: String,
+            default: 'off'
+        },
+        className: String,
+        size: { type: String, default: () => getConfig().passwordInput.size || getConfig().size },
+        prefixIcon: String,
+        suffixIcon: String,
+        // 已废弃
+        autocomplete: String
+    },
+    inject: {
+        $xeForm: {
+            default: null
+        },
+        formItemInfo: {
+            from: 'xeFormItemInfo',
+            default: null
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            showPwd: false,
+            isActivated: false,
+            inputValue: ''
+        };
+        return {
+            xID,
+            reactData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computeIsClearable() {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            return props.clearable;
+        },
+        computeInpReadonly() {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            const { readonly } = props;
+            return readonly;
+        },
+        computeInpPlaceholder() {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            const { placeholder } = props;
+            if (placeholder) {
+                return getFuncText(placeholder);
+            }
+            const globalPlaceholder = getConfig().passwordInput.placeholder;
+            if (globalPlaceholder) {
+                return getFuncText(globalPlaceholder);
+            }
+            return getI18n('vxe.base.pleaseInput');
+        },
+        computeInputType() {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            const { showPwd } = reactData;
+            if (showPwd) {
+                return 'text';
+            }
+            return 'password';
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xePasswordInput = this;
+            $xePasswordInput.$emit(type, createEvent(evnt, { $passwordInput: $xePasswordInput }, params));
+        },
+        emitModel(value) {
+            const $xeModal = this;
+            $xeModal.$emit('modelValue', value);
+        },
+        focus() {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            const inputElem = $xePasswordInput.$refs.refInputTarget;
+            reactData.isActivated = true;
+            inputElem.focus();
+            return $xePasswordInput.$nextTick();
+        },
+        blur() {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            const inputElem = $xePasswordInput.$refs.refInputTarget;
+            inputElem.blur();
+            reactData.isActivated = false;
+            return $xePasswordInput.$nextTick();
+        },
+        select() {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            const inputElem = $xePasswordInput.$refs.refInputTarget;
+            inputElem.select();
+            reactData.isActivated = false;
+            return $xePasswordInput.$nextTick();
+        },
+        triggerEvent(evnt) {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            const { inputValue } = reactData;
+            $xePasswordInput.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+        },
+        emitInputEvent(value, evnt) {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            reactData.inputValue = value;
+            $xePasswordInput.dispatchEvent('input', { value }, evnt);
+        },
+        inputEvent(evnt) {
+            const $xePasswordInput = this;
+            const inputElem = evnt.target;
+            const value = inputElem.value;
+            $xePasswordInput.emitInputEvent(value, evnt);
+        },
+        handleChange(value, evnt) {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            const reactData = $xePasswordInput.reactData;
+            const $xeForm = $xePasswordInput.$xeForm;
+            const formItemInfo = $xePasswordInput.formItemInfo;
+            reactData.inputValue = value;
+            $xePasswordInput.emitModel(value);
+            $xePasswordInput.dispatchEvent('input', { value }, evnt);
+            if (XEUtils.toValueString(props.value) !== value) {
+                $xePasswordInput.dispatchEvent('change', { value }, evnt);
+                // 自动更新校验状态
+                if ($xeForm && formItemInfo) {
+                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+                }
+            }
+        },
+        changeEvent(evnt) {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            const $xeForm = $xePasswordInput.$xeForm;
+            const formItemInfo = $xePasswordInput.formItemInfo;
+            $xePasswordInput.triggerEvent(evnt);
+            const { inputValue } = reactData;
+            // 自动更新校验状态
+            if ($xeForm && formItemInfo) {
+                $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, inputValue);
+            }
+        },
+        focusEvent(evnt) {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            reactData.isActivated = true;
+            $xePasswordInput.triggerEvent(evnt);
+        },
+        blurEvent(evnt) {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            const { inputValue } = reactData;
+            $xePasswordInput.dispatchEvent('blur', { value: inputValue }, evnt);
+        },
+        passwordToggleEvent(evnt) {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            const reactData = $xePasswordInput.reactData;
+            const { readonly, disabled } = props;
+            const { showPwd } = reactData;
+            if (!disabled && !readonly) {
+                reactData.showPwd = !showPwd;
+            }
+            $xePasswordInput.dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
+        },
+        clickEvent(evnt) {
+            const $xePasswordInput = this;
+            $xePasswordInput.triggerEvent(evnt);
+        },
+        clearValueEvent(evnt, value) {
+            const $xePasswordInput = this;
+            $xePasswordInput.focus();
+            $xePasswordInput.handleChange('', evnt);
+            $xePasswordInput.dispatchEvent('clear', { value }, evnt);
+        },
+        clickSuffixEvent(evnt) {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            const reactData = $xePasswordInput.reactData;
+            const { disabled } = props;
+            if (!disabled) {
+                const { inputValue } = reactData;
+                $xePasswordInput.dispatchEvent('suffix-click', { value: inputValue }, evnt);
+            }
+        },
+        clickPrefixEvent(evnt) {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            const reactData = $xePasswordInput.reactData;
+            const { disabled } = props;
+            if (!disabled) {
+                const { inputValue } = reactData;
+                $xePasswordInput.dispatchEvent('prefix-click', { value: inputValue }, evnt);
+            }
+        },
+        //
+        // Render
+        //
+        renderPasswordIcon(h) {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            const { showPwd } = reactData;
+            return h('div', {
+                class: 'password-input--control-icon',
+                on: {
+                    click: $xePasswordInput.passwordToggleEvent
+                }
+            }, [
+                h('i', {
+                    class: ['password-input--password-icon', showPwd ? getIcon().PASSWORD_INPUT_SHOW_PWD : getIcon().PASSWORD_INPUT_HIDE_PWD]
+                })
+            ]);
+        },
+        renderPrefixIcon(h) {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            const slots = $xePasswordInput.$scopedSlots;
+            const { prefixIcon } = props;
+            const prefixSlot = slots.prefix;
+            return prefixSlot || prefixIcon
+                ? h('div', {
+                    class: 'password-input--prefix',
+                    on: {
+                        click: $xePasswordInput.clickPrefixEvent
+                    }
+                }, [
+                    h('div', {
+                        class: 'password-input--prefix-icon'
+                    }, prefixSlot
+                        ? getSlotVNs(prefixSlot({}))
+                        : [
+                            h('i', {
+                                class: prefixIcon
+                            })
+                        ])
+                ])
+                : null;
+        },
+        renderSuffixIcon(h) {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            const slots = $xePasswordInput.$scopedSlots;
+            const reactData = $xePasswordInput.reactData;
+            const { disabled, suffixIcon } = props;
+            const { inputValue } = reactData;
+            const suffixSlot = slots.suffix;
+            const isClearable = $xePasswordInput.computeIsClearable;
+            return isClearable || suffixSlot || suffixIcon
+                ? h('div', {
+                    class: ['password-input--suffix', {
+                            'is--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+                        }]
+                }, [
+                    isClearable
+                        ? h('div', {
+                            class: 'password-input--clear-icon',
+                            on: {
+                                click: $xePasswordInput.clearValueEvent
+                            }
+                        }, [
+                            h('i', {
+                                class: getIcon().INPUT_CLEAR
+                            })
+                        ])
+                        : renderEmptyElement($xePasswordInput),
+                    $xePasswordInput.renderExtraSuffixIcon(h),
+                    suffixSlot || suffixIcon
+                        ? h('div', {
+                            class: 'password-input--suffix-icon',
+                            on: {
+                                click: $xePasswordInput.clickSuffixEvent
+                            }
+                        }, suffixSlot
+                            ? getSlotVNs(suffixSlot({}))
+                            : [
+                                h('i', {
+                                    class: suffixIcon
+                                })
+                            ])
+                        : renderEmptyElement($xePasswordInput)
+                ])
+                : null;
+        },
+        renderExtraSuffixIcon(h) {
+            const $xePasswordInput = this;
+            return $xePasswordInput.renderPasswordIcon(h);
+        },
+        renderVN(h) {
+            const $xePasswordInput = this;
+            const props = $xePasswordInput;
+            const reactData = $xePasswordInput.reactData;
+            const { className, name, disabled, readonly, autocomplete, autoComplete, maxLength } = props;
+            const { inputValue, isActivated } = reactData;
+            const vSize = $xePasswordInput.computeSize;
+            const inpReadonly = $xePasswordInput.computeInpReadonly;
+            const inputType = $xePasswordInput.computeInputType;
+            const inpPlaceholder = $xePasswordInput.computeInpPlaceholder;
+            const isClearable = $xePasswordInput.computeIsClearable;
+            const prefix = $xePasswordInput.renderPrefixIcon(h);
+            const suffix = $xePasswordInput.renderSuffixIcon(h);
+            return h('div', {
+                ref: 'refElem',
+                class: ['password-input', className, {
+                        [`size--${vSize}`]: vSize,
+                        'is--prefix': !!prefix,
+                        'is--suffix': !!suffix,
+                        'is--readonly': readonly,
+                        'is--disabled': disabled,
+                        'is--active': isActivated,
+                        'show--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+                    }],
+                attrs: {
+                    spellcheck: false
+                }
+            }, [
+                prefix || renderEmptyElement($xePasswordInput),
+                h('div', {
+                    class: 'password-input--wrapper'
+                }, [
+                    h('input', {
+                        ref: 'refInputTarget',
+                        class: 'password-input--inner',
+                        domProps: {
+                            value: inputValue
+                        },
+                        attrs: {
+                            name,
+                            type: inputType,
+                            placeholder: inpPlaceholder,
+                            readonly: inpReadonly,
+                            disabled,
+                            autocomplete: autocomplete || autoComplete,
+                            maxlength: maxLength
+                        },
+                        on: {
+                            click: $xePasswordInput.clickEvent,
+                            input: $xePasswordInput.inputEvent,
+                            change: $xePasswordInput.changeEvent,
+                            focus: $xePasswordInput.focusEvent,
+                            blur: $xePasswordInput.blurEvent
+                        }
+                    })
+                ]),
+                suffix || renderEmptyElement($xePasswordInput)
+            ]);
+        }
+    },
+    watch: {
+        value(val) {
+            const $xePasswordInput = this;
+            const reactData = $xePasswordInput.reactData;
+            reactData.inputValue = val;
+        }
+    },
+    created() {
+        const $xePasswordInput = this;
+        const props = $xePasswordInput;
+        const reactData = $xePasswordInput.reactData;
+        reactData.inputValue = props.value;
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+});