import classNames from '../_util/classNames';
import { getComponent, getOptionProps } from '../_util/props-util';
import Input from './Input';
import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
import EyeInvisibleOutlined from '@ant-design/icons-vue/EyeInvisibleOutlined';
import inputProps from './inputProps';
import PropTypes from '../_util/vue-types';
import BaseMixin from '../_util/BaseMixin';
import { defineComponent } from 'vue';
const ActionMap = {
click: 'onClick',
hover: 'onMouseover',
};
export default defineComponent({
name: 'AInputPassword',
mixins: [BaseMixin],
inheritAttrs: false,
props: {
...inputProps,
prefixCls: PropTypes.string.def('ant-input-password'),
inputPrefixCls: PropTypes.string.def('ant-input'),
action: PropTypes.string.def('click'),
visibilityToggle: PropTypes.looseBool.def(true),
},
setup() {
return {
input: null,
};
},
data() {
return {
visible: false,
};
},
methods: {
saveInput(node: any) {
this.input = node;
},
focus() {
this.input.focus();
},
blur() {
this.input.blur();
},
onVisibleChange() {
if (this.disabled) {
return;
}
this.setState({
visible: !this.visible,
});
},
getIcon() {
const { prefixCls, action } = this.$props;
const iconTrigger = ActionMap[action] || '';
const iconProps = {
[iconTrigger]: this.onVisibleChange,
onMousedown: e => {
// Prevent focused state lost
// https://github.com/ant-design/ant-design/issues/15173
e.preventDefault();
},
onMouseup: e => {
// Prevent focused state lost
// https://github.com/ant-design/ant-design/pull/23633/files
e.preventDefault();
},
class: `${prefixCls}-icon`,
key: 'passwordIcon',
};
return this.visible ? (
) : (
);
},
},
render() {
const {
prefixCls,
inputPrefixCls,
size,
suffix,
action,
visibilityToggle,
...restProps
} = getOptionProps(this);
const { class: className } = this.$attrs;
const suffixIcon = visibilityToggle && this.getIcon();
const inputClassName = classNames(prefixCls, className, {
[`${prefixCls}-${size}`]: !!size,
});
const inputProps = {
...restProps,
prefixCls: inputPrefixCls,
size,
suffix: suffixIcon,
prefix: getComponent(this, 'prefix'),
addonAfter: getComponent(this, 'addonAfter'),
addonBefore: getComponent(this, 'addonBefore'),
...this.$attrs,
type: this.visible ? 'text' : 'password',
class: inputClassName,
ref: 'input',
};
return ;
},
});