feat(input): modify visibilityToggle feature

Author: kovsu

components/input/Password.tsx

@@ -6,16 +6,26 @@ import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
 import EyeInvisibleOutlined from '@ant-design/icons-vue/EyeInvisibleOutlined';
 import type { InputProps } from './inputProps';
 import inputProps from './inputProps';
-import { computed, defineComponent, shallowRef } from 'vue';
+import type { PropType, Ref, ShallowRef } from 'vue';
+import { computed, defineComponent, shallowRef, watch } from 'vue';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import omit from '../_util/omit';
 
+type VisibilityToggleProps =
+  | boolean
+  | {
+      visible: Ref<boolean>;
+      onVisibleChange: (visible: boolean) => void;
+    };
+
 const ActionMap = {
   click: 'onClick',
   hover: 'onMouseover',
 };
+
 const defaultIconRender = (visible: boolean) =>
   visible ? <EyeOutlined /> : <EyeInvisibleOutlined />;
+
 export default defineComponent({
   compatConfig: { MODE: 3 },
   name: 'AInputPassword',
@@ -25,18 +35,38 @@ export default defineComponent({
     prefixCls: String,
     inputPrefixCls: String,
     action: { type: String, default: 'click' },
-    visibilityToggle: { type: Boolean, default: true },
+    visibilityToggle: {
+      type: [Boolean, Object] as PropType<VisibilityToggleProps>,
+      default: true,
+    },
     iconRender: Function,
   },
   setup(props, { slots, attrs, expose }) {
-    const visible = shallowRef(false);
+    let visible: ShallowRef<boolean> = undefined;
+
+    if (typeof props.visibilityToggle === 'boolean') {
+      visible = shallowRef(false);
+    } else {
+      visible = shallowRef(props.visibilityToggle.visible);
+      // eslint-disable-next-line vue/no-setup-props-destructure
+      const { visibilityToggle } = props;
+      function _onVisibleChange(visible: boolean) {
+        visibilityToggle.onVisibleChange(visible);
+      }
+
+      watch(visible, () => {
+        _onVisibleChange(visible.value);
+      });
+    }
+
     const onVisibleChange = () => {
       const { disabled } = props;
       if (disabled) {
         return;
       }
       visible.value = !visible.value;
     };
+
     const inputRef = shallowRef();
     const focus = () => {
       inputRef.value?.focus();
@@ -74,7 +104,9 @@ export default defineComponent({
     const renderPassword = () => {
       const { size, visibilityToggle, ...restProps } = props;
 
-      const suffixIcon = visibilityToggle && getIcon(prefixCls.value);
+      const suffixIcon =
+        (typeof visibilityToggle === 'boolean' ? visibilityToggle : true) &&
+        getIcon(prefixCls.value);
       const inputClassName = classNames(prefixCls.value, attrs.class, {
         [`${prefixCls.value}-${size}`]: !!size,
       });

components/input/demo/password-input.vue

@@ -16,9 +16,39 @@ Input type of password.
 
 </docs>
 <template>
-  <a-input-password v-model:value="value" placeholder="input password" />
+  <a-space direction="vertical" size="middle" style="width: 100%">
+    <a-input-password v-model:value="value" placeholder="input password" />
+    <a-input-password v-model:value="value2" placeholder="input password">
+      <template #iconRender="visible">
+        <EyeTwoTone v-if="visible"></EyeTwoTone>
+        <EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
+      </template>
+    </a-input-password>
+    <a-space>
+      <a-input-password
+        v-model:value="value3"
+        placeholder="input password"
+        :visibility-toggle="toggle"
+      />
+      <a-button @click="visible = !visible">{{ visible ? 'Hide' : 'Show' }}</a-button>
+    </a-space>
+  </a-space>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons-vue';
 const value = ref<string>('');
+const value2 = ref<string>('');
+const value3 = ref<string>('');
+
+const visible = ref<boolean>(false);
+const onVisibleChange = (_visible: boolean) => {
+  visible.value = _visible;
+  console.log(_visible);
+};
+
+const toggle = {
+  visible,
+  onVisibleChange,
+};
 </script>

components/input/index.en-US.md

@@ -94,6 +94,7 @@ Supports all props of `Input`.
 
 #### Input.Password (Added in 1.14.0)
 
-| Property         | Description                | Type    | Default |
-| ---------------- | -------------------------- | ------- | ------- |
-| visibilityToggle | Whether show toggle button | boolean | true    |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| iconRender | Custom toggle button | slot | - |
+| visibilityToggle | Whether show toggle button or control password visible | boolean \| VisibilityToggleProps | true |

components/input/index.zh-CN.md

@@ -95,6 +95,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAA
 
 #### Input.Password (1.14.0 中新增)
 
-| 参数             | 说明             | 类型    | 默认值 |
-| ---------------- | ---------------- | ------- | ------ |
-| visibilityToggle | 是否显示切换按钮 | boolean | true   |
+| 参数             | 说明                             | 类型                             | 默认值 |
+| ---------------- | -------------------------------- | -------------------------------- | ------ |
+| iconRender       | 自定义切换按钮                   | slot                             | -      |
+| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean \| VisibilityToggleProps | true   |