fix(input): show password is invalid (#1464)

* fix(input): show password is invalid * chore: snapshot update * chore: snapshot update * fix: class * chore: code update * chore: update _common --------- Co-authored-by: anlyyao <[email protected]>
Tencent · Jun 21, 2024 · 4d7b17f · 4d7b17f
1 parent 681a9a2
commit 4d7b17f
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 20 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -138,10 +138,8 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                 <div
                   class="t-input__wrap--suffix-icon"
                 >
-                  
                   <svg
                     class="t-icon t-icon-browse-off"
-                    data-v-799be585=""
                     fill="none"
                     height="1em"
                     viewBox="0 0 26 24"
@@ -152,7 +150,6 @@ exports[`Form > Form horizontalVue demo works fine 1`] = `
                       fill="currentColor"
                     />
                   </svg>
-                  
                 </div>
               </div>
               <!---->
@@ -1825,10 +1822,8 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                       <div
                         class="t-input__wrap--suffix-icon"
                       >
-                        
                         <svg
                           class="t-icon t-icon-browse-off"
-                          data-v-799be585=""
                           fill="none"
                           height="1em"
                           viewBox="0 0 26 24"
@@ -1839,7 +1834,6 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
                             fill="currentColor"
                           />
                         </svg>
-                        
                       </div>
                     </div>
                     <!---->
@@ -3379,10 +3373,8 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                 <div
                   class="t-input__wrap--suffix-icon"
                 >
-                  
                   <svg
                     class="t-icon t-icon-browse-off"
-                    data-v-713b33d2=""
                     fill="none"
                     height="1em"
                     viewBox="0 0 26 24"
@@ -3393,7 +3385,6 @@ exports[`Form > Form verticalVue demo works fine 1`] = `
                       fill="currentColor"
                     />
                   </svg>
-                  
                 </div>
               </div>
               <!---->

diff --git a/src/input/__test__/__snapshots__/demo.test.jsx.snap b/src/input/__test__/__snapshots__/demo.test.jsx.snap
@@ -1162,7 +1162,6 @@ exports[`Input > Input mobileVue demo works fine 1`] = `
             <div
               class="t-input__wrap--suffix-icon"
             >
-              
               <svg
                 class="t-icon t-icon-browse-off"
                 fill="none"
@@ -1175,7 +1174,6 @@ exports[`Input > Input mobileVue demo works fine 1`] = `
                   fill="currentColor"
                 />
               </svg>
-              
             </div>
           </div>
           <!---->
@@ -2122,7 +2120,6 @@ exports[`Input > Input specialVue demo works fine 1`] = `
         <div
           class="t-input__wrap--suffix-icon"
         >
-          
           <svg
             class="t-icon t-icon-browse-off"
             fill="none"
@@ -2135,7 +2132,6 @@ exports[`Input > Input specialVue demo works fine 1`] = `
               fill="currentColor"
             />
           </svg>
-          
         </div>
       </div>
       <!---->

diff --git a/src/input/__test__/index.test.jsx b/src/input/__test__/index.test.jsx
@@ -126,6 +126,20 @@ describe('Input.vue', async () => {
       expect(input.element.getAttribute('type')).toBe('number');
     });
 
+    it(': type=password', async () => {
+      const wrapper = mount(<Input label="标题" type="password" />);
+      wrapper.find('.t-icon-browse-off').trigger('click');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('.t-icon-browse').exists()).toBeTruthy();
+      const attrDom = wrapper.find('input');
+      expect(attrDom.attributes('type')).toBe('text');
+      wrapper.find('.t-icon-browse').trigger('click');
+      await wrapper.vm.$nextTick();
+      expect(wrapper.find('.t-icon-browse-off').exists()).toBeTruthy();
+      const attrDom1 = wrapper.find('input');
+      expect(attrDom1.attributes('type')).toBe('password');
+    });
+
     it(': onBlur', async () => {
       const onBlur = vi.fn();
       const wrapper = mount(<Input label="标题" onBlur={onBlur} />);

diff --git a/src/input/input.tsx b/src/input/input.tsx
@@ -1,5 +1,9 @@
 import { PropType, ref, computed, defineComponent, toRefs, nextTick, watch } from 'vue';
-import { CloseCircleFilledIcon as TCloseCircleFilledIcon } from 'tdesign-icons-vue-next';
+import {
+  BrowseIcon as TBrowseIcon,
+  BrowseOffIcon as TBrowseOffIcon,
+  CloseCircleFilledIcon as TCloseCircleFilledIcon,
+} from 'tdesign-icons-vue-next';
 import { useFocus } from '@vueuse/core';
 import config from '../config';
 import InputProps from './props';
@@ -10,10 +14,9 @@ import { usePrefixClass } from '../hooks/useClass';
 import { useTNodeJSX } from '../hooks/tnode';
 
 const { prefix } = config;
-const name = `${prefix}-input`;
 
 export default defineComponent({
-  name,
+  name: `${prefix}-input`,
   props: {
     ...InputProps,
     labelAlign: {
@@ -41,7 +44,7 @@ export default defineComponent({
     const [innerValue] = useDefault<string, TdInputProps>(props, context.emit, 'value', 'change');
 
     const status = props.status || 'default';
-
+    const renderType = ref(props.type);
     const { focused } = useFocus(inputRef, { initialValue: props.autofocus });
 
     const inputClasses = computed(() => [
@@ -124,6 +127,10 @@ export default defineComponent({
       inputValueChangeHandle(e);
     };
 
+    const handlePwdIconClick = () => {
+      renderType.value = renderType.value === 'password' ? 'text' : 'password';
+    };
+
     watch(autofocus, (autofocus, prevAutofocus) => {
       if (autofocus === true) {
         nextTick(() => {
@@ -132,6 +139,14 @@ export default defineComponent({
       }
     });
 
+    watch(
+      () => props.type,
+      (v) => {
+        renderType.value = v;
+      },
+      { immediate: true },
+    );
+
     return () => {
       const readerPrefix = () => {
         const prefixIcon = readerTNodeJSX('prefixIcon');
@@ -163,7 +178,15 @@ export default defineComponent({
       };
 
       const readerSuffixIcon = () => {
-        const suffixIcon = readerTNodeJSX('suffixIcon');
+        let suffixIcon = readerTNodeJSX('suffixIcon');
+        if (props.type === 'password') {
+          if (renderType.value === 'password') {
+            suffixIcon = <TBrowseOffIcon onClick={handlePwdIconClick} />;
+          } else if (renderType.value === 'text') {
+            suffixIcon = <TBrowseIcon onClick={handlePwdIconClick} />;
+          }
+        }
+
         if (!suffixIcon) {
           return null;
         }
@@ -188,7 +211,7 @@ export default defineComponent({
                 value={innerValue.value}
                 name={props.name}
                 class={inputClasses.value}
-                type={props.type}
+                type={renderType.value}
                 disabled={isDisabled.value}
                 autocomplete={props.autocomplete ? 'On' : 'Off'}
                 placeholder={props.placeholder}