Password.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  2. import _extends from "@babel/runtime/helpers/esm/extends";
  3. import { resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
  4. var __rest = this && this.__rest || function (s, e) {
  5. var t = {};
  6. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  7. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  8. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  9. }
  10. return t;
  11. };
  12. import classNames from '../_util/classNames';
  13. import { isValidElement } from '../_util/props-util';
  14. import { cloneElement } from '../_util/vnode';
  15. import Input from './Input';
  16. import EyeOutlined from "@ant-design/icons-vue/es/icons/EyeOutlined";
  17. import EyeInvisibleOutlined from "@ant-design/icons-vue/es/icons/EyeInvisibleOutlined";
  18. import inputProps from './inputProps';
  19. import { computed, defineComponent, shallowRef, watchEffect } from 'vue';
  20. import useConfigInject from '../config-provider/hooks/useConfigInject';
  21. import omit from '../_util/omit';
  22. const ActionMap = {
  23. click: 'onClick',
  24. hover: 'onMouseover'
  25. };
  26. const defaultIconRender = visible => visible ? _createVNode(EyeOutlined, null, null) : _createVNode(EyeInvisibleOutlined, null, null);
  27. export default defineComponent({
  28. compatConfig: {
  29. MODE: 3
  30. },
  31. name: 'AInputPassword',
  32. inheritAttrs: false,
  33. props: _extends(_extends({}, inputProps()), {
  34. prefixCls: String,
  35. inputPrefixCls: String,
  36. action: {
  37. type: String,
  38. default: 'click'
  39. },
  40. visibilityToggle: {
  41. type: Boolean,
  42. default: true
  43. },
  44. visible: {
  45. type: Boolean,
  46. default: undefined
  47. },
  48. 'onUpdate:visible': Function,
  49. iconRender: Function
  50. }),
  51. setup(props, _ref) {
  52. let {
  53. slots,
  54. attrs,
  55. expose,
  56. emit
  57. } = _ref;
  58. const visible = shallowRef(false);
  59. const onVisibleChange = () => {
  60. const {
  61. disabled
  62. } = props;
  63. if (disabled) {
  64. return;
  65. }
  66. visible.value = !visible.value;
  67. emit('update:visible', visible.value);
  68. };
  69. watchEffect(() => {
  70. if (props.visible !== undefined) {
  71. visible.value = !!props.visible;
  72. }
  73. });
  74. const inputRef = shallowRef();
  75. const focus = () => {
  76. var _a;
  77. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.focus();
  78. };
  79. const blur = () => {
  80. var _a;
  81. (_a = inputRef.value) === null || _a === void 0 ? void 0 : _a.blur();
  82. };
  83. expose({
  84. focus,
  85. blur
  86. });
  87. const getIcon = prefixCls => {
  88. const {
  89. action,
  90. iconRender = slots.iconRender || defaultIconRender
  91. } = props;
  92. const iconTrigger = ActionMap[action] || '';
  93. const icon = iconRender(visible.value);
  94. const iconProps = {
  95. [iconTrigger]: onVisibleChange,
  96. class: `${prefixCls}-icon`,
  97. key: 'passwordIcon',
  98. onMousedown: e => {
  99. // Prevent focused state lost
  100. // https://github.com/ant-design/ant-design/issues/15173
  101. e.preventDefault();
  102. },
  103. onMouseup: e => {
  104. // Prevent caret position change
  105. // https://github.com/ant-design/ant-design/issues/23524
  106. e.preventDefault();
  107. }
  108. };
  109. return cloneElement(isValidElement(icon) ? icon : _createVNode("span", null, [icon]), iconProps);
  110. };
  111. const {
  112. prefixCls,
  113. getPrefixCls
  114. } = useConfigInject('input-password', props);
  115. const inputPrefixCls = computed(() => getPrefixCls('input', props.inputPrefixCls));
  116. const renderPassword = () => {
  117. const {
  118. size,
  119. visibilityToggle
  120. } = props,
  121. restProps = __rest(props, ["size", "visibilityToggle"]);
  122. const suffixIcon = visibilityToggle && getIcon(prefixCls.value);
  123. const inputClassName = classNames(prefixCls.value, attrs.class, {
  124. [`${prefixCls.value}-${size}`]: !!size
  125. });
  126. const omittedProps = _extends(_extends(_extends({}, omit(restProps, ['suffix', 'iconRender', 'action'])), attrs), {
  127. type: visible.value ? 'text' : 'password',
  128. class: inputClassName,
  129. prefixCls: inputPrefixCls.value,
  130. suffix: suffixIcon
  131. });
  132. if (size) {
  133. omittedProps.size = size;
  134. }
  135. return _createVNode(Input, _objectSpread({
  136. "ref": inputRef
  137. }, omittedProps), slots);
  138. };
  139. return () => {
  140. return renderPassword();
  141. };
  142. }
  143. });