Skip to content

Commit 610b0cf

Browse files
kovsukovsu
committed
chore: updare
1 parent d6a7191 commit 610b0cf

File tree

6 files changed

+30
-36
lines changed

6 files changed

+30
-36
lines changed

‎components/input/Password.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import EyeOutlined from '@ant-design/icons-vue/EyeOutlined';
66
import EyeInvisibleOutlined from '@ant-design/icons-vue/EyeInvisibleOutlined';
77
import type { InputProps } from './inputProps';
88
import inputProps from './inputProps';
9-
import { computed, defineComponent, shallowRef, watch, watchEffect } from 'vue';
9+
import { computed, defineComponent, shallowRef, watchEffect } from 'vue';
1010
import useConfigInject from '../config-provider/hooks/useConfigInject';
1111
import omit from '../_util/omit';
1212
import { functionType } from '../_util/type';
@@ -28,7 +28,7 @@ export default defineComponent({
2828
action: { type: String, default: 'click' },
2929
visibilityToggle: { type: Boolean, default: true },
3030
visible: { type: Boolean, default: undefined },
31-
'onUpdate:visible': functionType<(visible: boolean) => void>,
31+
'update:visible': functionType<(visible: boolean) => void>,
3232
iconRender: Function,
3333
},
3434
setup(props, { slots, attrs, expose, emit }) {

‎components/input/__tests__/__snapshots__/demo.test.js.snap

+3-5
Original file line numberDiff line numberDiff line change
@@ -133,16 +133,14 @@ exports[`renders ./components/input/demo/password-input.vue correctly 1`] = `
133133
<!----></span></span>
134134
</div>
135135
<!---->
136+
<div class="ant-space-item" style="margin-bottom: 16px;"><input placeholder="input password" type="password" class="ant-input"></div>
137+
<!---->
136138
<div class="ant-space-item">
137139
<div class="ant-space ant-space-horizontal ant-space-align-center">
138-
<div class="ant-space-item" style="margin-right: 8px;"><span class="ant-input-affix-wrapper ant-input-password"><!----><input placeholder="input password" type="password" class="ant-input"><span class="ant-input-suffix"><!----><!----><span role="img" aria-label="eye-invisible" tabindex="-1" class="anticon anticon-eye-invisible ant-input-password-icon"><svg focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span>
140+
<div class="ant-space-item"><span class="ant-input-affix-wrapper ant-input-password"><!----><input placeholder="input password" type="password" visible="false" class="ant-input"><span class="ant-input-suffix"><!----><!----><span role="img" aria-label="eye-invisible" tabindex="-1" class="anticon anticon-eye-invisible ant-input-password-icon"><svg focusable="false" class="" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span>
139141
<!----></span></span>
140142
</div>
141143
<!---->
142-
<div class="ant-space-item"><button class="ant-btn ant-btn-default" type="button">
143-
<!----><span>Show</span>
144-
</button></div>
145-
<!---->
146144
</div>
147145
</div>
148146
<!---->

‎components/input/__tests__/index.test.js

+6-13
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Input from '..';
44
// import Form from '../../form';
55
import focusTest from '../../../tests/shared/focusTest';
66
import { WifiOutlined, SyncOutlined } from '@ant-design/icons-vue';
7-
import { ref } from 'vue';
87

98
const { TextArea, Password } = Input;
109

@@ -165,23 +164,19 @@ describe('Input.Password', () => {
165164
}, 100);
166165
});
167166

168-
it('should support visibilityToggle(boolean)', async () => {
167+
it('should support visibilityToggl(boolean)', async () => {
169168
const wrapper = mount(Input.Password, { props: { visibilityToggle: false }, sync: false });
170169
await asyncExpect(() => {
171170
expect(wrapper.findAll('.anticon-eye').length).toBe(0);
172171
}, 100);
173172
});
174173

175-
it('should support visibilityToggle', async () => {
174+
it('should support visible and update:visible', async () => {
176175
const cbMock = jest.fn();
177-
const wrapper = mount(Input.Password, {
178-
props: {
179-
visibilityToggle: {
180-
visible: ref(true),
181-
onVisibleChange: cbMock,
182-
},
176+
const wrapper = mount({
177+
render() {
178+
return <Password {...{ 'onUpdate:visible': cbMock }} visible="false"></Password>;
183179
},
184-
sync: false,
185180
});
186181

187182
await asyncExpect(() => {
@@ -192,8 +187,6 @@ describe('Input.Password', () => {
192187
wrapper.find('.anticon-eye').trigger('click');
193188
}, 100);
194189

195-
await asyncExpect(() => {
196-
expect(cbMock).toHaveBeenCalledWith(false);
197-
}, 100);
190+
expect(cbMock).toHaveBeenCalledWith(false);
198191
});
199192
});

‎components/input/demo/password-input.vue

+9-8
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,18 @@ Input type of password.
2424
<EyeInvisibleOutlined v-else></EyeInvisibleOutlined>
2525
</template>
2626
</a-input-password>
27+
<a-input-password
28+
v-model:value="value3"
29+
placeholder="input password"
30+
:visibility-toggle="false"
31+
/>
2732
<a-space>
2833
<a-input-password
29-
v-model:value="value3"
34+
v-model:value="value4"
3035
placeholder="input password"
31-
:visibility-toggle="toggle"
36+
:visible="visible"
37+
@update:visible="onVisibleChange"
3238
/>
33-
<a-button @click="visible = !visible">{{ visible ? 'Hide' : 'Show' }}</a-button>
3439
</a-space>
3540
</a-space>
3641
</template>
@@ -40,15 +45,11 @@ import { EyeTwoTone, EyeInvisibleOutlined } from '@ant-design/icons-vue';
4045
const value = ref<string>('');
4146
const value2 = ref<string>('');
4247
const value3 = ref<string>('');
48+
const value4 = ref<string>('');
4349
4450
const visible = ref<boolean>(false);
4551
const onVisibleChange = (_visible: boolean) => {
4652
visible.value = _visible;
4753
console.log(_visible);
4854
};
49-
50-
const toggle = {
51-
visible,
52-
onVisibleChange,
53-
};
5455
</script>

‎components/input/index.en-US.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ Supports all props of `Input`.
9494

9595
#### Input.Password (Added in 1.14.0)
9696

97-
| Property | Description | Type | Default |
98-
| --- | --- | --- | --- |
99-
| iconRender | Custom toggle button | slot | - |
100-
| visibilityToggle | Whether show toggle button or control password visible | boolean \| VisibilityToggleProps | true |
97+
| Property | Description | Type | Default |
98+
| ---------------- | ------------------------------------------------------ | ------- | ------- |
99+
| iconRender | Custom toggle button | slot | - |
100+
| visibilityToggle | Whether show toggle button or control password visible | boolean | true |

‎components/input/index.zh-CN.md

+6-4
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,9 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAA
9595

9696
#### Input.Password (1.14.0 中新增)
9797

98-
| 参数 | 说明 | 类型 | 默认值 |
99-
| ---------------- | -------------------------------- | -------------------------------- | ------ |
100-
| iconRender | 自定义切换按钮 | slot | - |
101-
| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean \| VisibilityToggleProps | true |
98+
| 参数 | 说明 | 类型 | 默认值 |
99+
| -------------------- | -------------------------------- | ------- | ------ |
100+
| visible | 密码是否可见 | boolean | false |
101+
| update:visible(v-on) | visible 改变的回调函数 | - | false |
102+
| iconRender | 自定义切换按钮 | slot | - |
103+
| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean | true |

0 commit comments

Comments
 (0)