From b38d09ccf9569043c77b99d82ce2d8efc9db2b34 Mon Sep 17 00:00:00 2001
From: sulmo <tjdah0853@gmail.com>
Date: Fri, 2 Sep 2022 15:39:33 +0900
Subject: [PATCH 1/8] feat(text-input): add show/hide button when type is
 password

feat: add add
---
 src/inputs/input/PTextInput.vue | 46 +++++++++++++++++++++++++--------
 src/inputs/input/type.ts        |  4 +++
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/inputs/input/PTextInput.vue b/src/inputs/input/PTextInput.vue
index 05ad7e5e6..f9b05b7ae 100644
--- a/src/inputs/input/PTextInput.vue
+++ b/src/inputs/input/PTextInput.vue
@@ -18,7 +18,7 @@
                     {{ tag.label || tag.value }}
                 </p-tag>
                 <slot name="default" v-bind="{ value }">
-                    <input v-bind="$attrs"
+                    <input :type="inputType"
                            :value="proxyValue"
                            :disabled="disabled"
                            :placeholder="placeholder"
@@ -28,7 +28,7 @@
                 </slot>
             </div>
             <slot v-else name="default" v-bind="{ value }">
-                <input v-bind="$attrs"
+                <input :type="inputType"
                        :value="proxyValue"
                        :disabled="disabled"
                        :placeholder="placeholder"
@@ -41,13 +41,22 @@
                     {{ value }}
                 </slot>
             </span>
-            <p-i
-                v-show="(isFocused || isInvalid)"
-                class="delete-all-icon"
-                name="ic_delete" height="1rem" width="1rem"
-                color="inherit transparent"
-                @mousedown.native.prevent
-                @click="handleDeleteAllTags"
+            <p-button v-if="($attrs.type === 'password') && visiblePassword"
+                      size="sm"
+                      style-type="transparent"
+                      font-weight="normal"
+                      :disabled="disabled"
+                      @click="handleTogglePassword"
+            >
+                {{ isPasswordVisible ? $t('COMPONENT.TEXT_INPUT.HIDE') : $t('COMPONENT.TEXT_INPUT.SHOW') }}
+            </p-button>
+            <p-i v-else
+                 v-show="(isFocused || isInvalid)"
+                 class="delete-all-icon"
+                 name="ic_delete" height="1rem" width="1rem"
+                 color="inherit transparent"
+                 @mousedown.native.prevent
+                 @click="handleDeleteAllTags"
             />
         </div>
         <p-context-menu v-if="proxyVisibleMenu && useAutoComplete"
@@ -75,10 +84,11 @@ import PTag from '@/data-display/tags/PTag.vue';
 import PI from '@/foundation/icons/PI.vue';
 import { useContextMenuFixedStyle } from '@/hooks/context-menu-fixed-style';
 import { useProxyValue } from '@/hooks/proxy-state';
+import PButton from '@/inputs/buttons/button/PButton.vue';
 import PContextMenu from '@/inputs/context-menu/PContextMenu.vue';
 import type { MenuItem } from '@/inputs/context-menu/type';
 import type { SearchDropdownMenuItem } from '@/inputs/dropdown/search-dropdown/type';
-import type { SelectedItem, TextInputHandler } from '@/inputs/input/type';
+import type { HTMLInputTypeAttribute, SelectedItem, TextInputHandler } from '@/inputs/input/type';
 
 
 interface TextInputProps {
@@ -97,6 +107,7 @@ interface TextInputProps {
     disableHandler: boolean;
     exactMode: boolean;
     useAutoComplete: boolean;
+    visiblePassword: boolean;
 }
 
 export default defineComponent<TextInputProps>({
@@ -105,6 +116,7 @@ export default defineComponent<TextInputProps>({
         PTag,
         PI,
         PContextMenu,
+        PButton,
     },
     directives: {
         focus,
@@ -178,9 +190,13 @@ export default defineComponent<TextInputProps>({
             type: Boolean,
             default: false,
         },
+        visiblePassword: {
+            type: Boolean,
+            default: false,
+        },
     },
 
-    setup(props, { emit, listeners }) {
+    setup(props, { emit, listeners, attrs }) {
         const {
             proxyVisibleMenu, targetRef, targetElement, contextMenuStyle,
         } = useContextMenuFixedStyle({
@@ -195,6 +211,8 @@ export default defineComponent<TextInputProps>({
             menuRef: null,
             targetRef: null,
             isFocused: false,
+            inputType: (attrs?.type) ?? 'text' as HTMLInputTypeAttribute,
+            isPasswordVisible: false,
             proxyValue: useProxyValue('value', props, emit),
             proxySelectedValue: useProxyValue('selected', props, emit),
             deleteTarget: undefined as string | undefined,
@@ -281,6 +299,11 @@ export default defineComponent<TextInputProps>({
             hideMenu();
         };
 
+        const handleTogglePassword = () => {
+            state.isPasswordVisible = !state.isPasswordVisible;
+            state.inputType = state.isPasswordVisible ? 'text' : 'password';
+        };
+
         const deleteSelectedTags = () => {
             if (state.proxyValue.length > 0) return;
             const lastIdx = state.proxySelectedValue.length - 1;
@@ -362,6 +385,7 @@ export default defineComponent<TextInputProps>({
             handleDeleteAllTags,
             handleFocusMenuItem,
             handleSelectMenuItem,
+            handleTogglePassword,
         };
     },
 });
diff --git a/src/inputs/input/type.ts b/src/inputs/input/type.ts
index e29364b31..6b5fa6ebb 100644
--- a/src/inputs/input/type.ts
+++ b/src/inputs/input/type.ts
@@ -12,3 +12,7 @@ export interface SelectedItem {
 export interface TextInputHandler {
     (val: string, searchableItems: MenuItem[]): Promise<{results: MenuItem[]}>|{results: MenuItem[]}
 }
+
+// eslint-disable-next-line max-len
+type HTMLInputTypeAttribute = null | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+export type { HTMLInputTypeAttribute };

From 1b0e534844f1e3a157e68c2b7f0185ad6ceceeb7 Mon Sep 17 00:00:00 2001
From: sulmo <tjdah0853@gmail.com>
Date: Fri, 2 Sep 2022 15:39:51 +0900
Subject: [PATCH 2/8] chore(language): update lang-pack version

---
 src/translations/language-pack | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/translations/language-pack b/src/translations/language-pack
index e4ffa5172..42ed92f6e 160000
--- a/src/translations/language-pack
+++ b/src/translations/language-pack
@@ -1 +1 @@
-Subproject commit e4ffa517262987890665f983d0fcbcc608661f67
+Subproject commit 42ed92f6e0a1ff4dd6a7500252b99824ddc1ed70

From 0a0649fd73f10fa2a1db8a065926e200d8edb5b2 Mon Sep 17 00:00:00 2001
From: sulmo <tjdah0853@gmail.com>
Date: Fri, 2 Sep 2022 15:41:55 +0900
Subject: [PATCH 3/8] docs(text-input): add visiblePassword, attrs type

---
 src/inputs/input/PTextInput.stories.mdx | 23 ++++++++++++++++
 src/inputs/input/story-helper.ts        | 35 +++++++++++++++++++++++++
 2 files changed, 58 insertions(+)

diff --git a/src/inputs/input/PTextInput.stories.mdx b/src/inputs/input/PTextInput.stories.mdx
index 6ff740656..f584ee836 100644
--- a/src/inputs/input/PTextInput.stories.mdx
+++ b/src/inputs/input/PTextInput.stories.mdx
@@ -27,6 +27,8 @@ export const Template = (args, { argTypes }) => ({
                       :disabled="disabled" :block="block"
                       :menu="menu" :use-fixed-menu-style="useFixedMenuStyle"
                       :loading="loading"
+                      :visible-password="visiblePassword"
+                      :type="type"
         >
             <template v-if="rightExtraSlot" #right-extra>
                 <span v-html="rightExtraSlot"></span>
@@ -170,6 +172,27 @@ export const Template = (args, { argTypes }) => ({
     </Story>
 </Canvas>
 
+#### Visible Password
+
+<Canvas>
+    <Story name="Visible Password">
+        {{
+            components: { PTextInput },
+            template: `
+                <p-text-input v-model="value" type="password" visible-password />
+            `,
+            setup() {
+                const state = reactive({
+                    value: 'password'
+                })
+                return {
+                    ...toRefs(state)
+                }
+            }
+        }}
+    </Story>
+</Canvas>
+
 <br/>
 <br/>
 
diff --git a/src/inputs/input/story-helper.ts b/src/inputs/input/story-helper.ts
index 81176e079..59a12f55a 100644
--- a/src/inputs/input/story-helper.ts
+++ b/src/inputs/input/story-helper.ts
@@ -247,6 +247,24 @@ export const getTextInputArgTypes = (): ArgTypes => {
                 type: 'boolean',
             },
         },
+        visiblePassword: {
+            name: 'visiblePassword',
+            type: { name: 'boolean' },
+            description: 'Use this prop when you want to control show/hide button of password input.',
+            defaultValue: false,
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                category: 'props',
+                defaultValue: {
+                    summary: 'false',
+                },
+            },
+            control: {
+                type: 'boolean',
+            },
+        },
         // attrs
         inputAttrs: {
             name: 'all input attributes',
@@ -265,6 +283,23 @@ export const getTextInputArgTypes = (): ArgTypes => {
                 type: 'object',
             },
         },
+        type: {
+            name: 'type',
+            description: 'type of input tag (e.g. text, password, date ...)',
+            defaultValue: 'text',
+            table: {
+                type: {
+                    summary: null,
+                },
+                defaultValue: {
+                    summary: 'text',
+                },
+                category: 'attrs',
+            },
+            control: {
+                type: 'text',
+            },
+        },
         // model
         'v-model': {
             name: 'v-model',

From a40311b0650e1ed946006dcfd677765f4e516896 Mon Sep 17 00:00:00 2001
From: sulmo <tjdah0853@gmail.com>
Date: Fri, 2 Sep 2022 17:44:30 +0900
Subject: [PATCH 4/8] fix: add useProxyValue to inputText state

---
 src/inputs/input/PTextInput.stories.mdx |  4 ++--
 src/inputs/input/PTextInput.vue         | 24 +++++++++++++-----------
 src/inputs/input/story-helper.ts        |  4 ++--
 3 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/inputs/input/PTextInput.stories.mdx b/src/inputs/input/PTextInput.stories.mdx
index f584ee836..3b3330583 100644
--- a/src/inputs/input/PTextInput.stories.mdx
+++ b/src/inputs/input/PTextInput.stories.mdx
@@ -27,7 +27,7 @@ export const Template = (args, { argTypes }) => ({
                       :disabled="disabled" :block="block"
                       :menu="menu" :use-fixed-menu-style="useFixedMenuStyle"
                       :loading="loading"
-                      :visible-password="visiblePassword"
+                      :password-visibility-mode="passwordVisibilityMode"
                       :type="type"
         >
             <template v-if="rightExtraSlot" #right-extra>
@@ -179,7 +179,7 @@ export const Template = (args, { argTypes }) => ({
         {{
             components: { PTextInput },
             template: `
-                <p-text-input v-model="value" type="password" visible-password />
+                <p-text-input v-model="value" type="password" password-visibility-mode />
             `,
             setup() {
                 const state = reactive({
diff --git a/src/inputs/input/PTextInput.vue b/src/inputs/input/PTextInput.vue
index f9b05b7ae..0755d2054 100644
--- a/src/inputs/input/PTextInput.vue
+++ b/src/inputs/input/PTextInput.vue
@@ -18,7 +18,8 @@
                     {{ tag.label || tag.value }}
                 </p-tag>
                 <slot name="default" v-bind="{ value }">
-                    <input :type="inputType"
+                    <input v-bind="$attrs"
+                           :type="inputType"
                            :value="proxyValue"
                            :disabled="disabled"
                            :placeholder="placeholder"
@@ -28,7 +29,8 @@
                 </slot>
             </div>
             <slot v-else name="default" v-bind="{ value }">
-                <input :type="inputType"
+                <input v-bind="$attrs"
+                       :type="inputType"
                        :value="proxyValue"
                        :disabled="disabled"
                        :placeholder="placeholder"
@@ -41,12 +43,12 @@
                     {{ value }}
                 </slot>
             </span>
-            <p-button v-if="($attrs.type === 'password') && visiblePassword"
+            <p-button v-if="(initialInputType === 'password') && passwordVisibilityMode"
                       size="sm"
                       style-type="transparent"
                       font-weight="normal"
                       :disabled="disabled"
-                      @click="handleTogglePassword"
+                      @click.stop.prevent="handleTogglePassword"
             >
                 {{ isPasswordVisible ? $t('COMPONENT.TEXT_INPUT.HIDE') : $t('COMPONENT.TEXT_INPUT.SHOW') }}
             </p-button>
@@ -88,7 +90,7 @@ import PButton from '@/inputs/buttons/button/PButton.vue';
 import PContextMenu from '@/inputs/context-menu/PContextMenu.vue';
 import type { MenuItem } from '@/inputs/context-menu/type';
 import type { SearchDropdownMenuItem } from '@/inputs/dropdown/search-dropdown/type';
-import type { HTMLInputTypeAttribute, SelectedItem, TextInputHandler } from '@/inputs/input/type';
+import type { SelectedItem, TextInputHandler } from '@/inputs/input/type';
 
 
 interface TextInputProps {
@@ -107,7 +109,7 @@ interface TextInputProps {
     disableHandler: boolean;
     exactMode: boolean;
     useAutoComplete: boolean;
-    visiblePassword: boolean;
+    passwordVisibilityMode: boolean;
 }
 
 export default defineComponent<TextInputProps>({
@@ -190,7 +192,7 @@ export default defineComponent<TextInputProps>({
             type: Boolean,
             default: false,
         },
-        visiblePassword: {
+        passwordVisibilityMode: {
             type: Boolean,
             default: false,
         },
@@ -211,8 +213,9 @@ export default defineComponent<TextInputProps>({
             menuRef: null,
             targetRef: null,
             isFocused: false,
-            inputType: (attrs?.type) ?? 'text' as HTMLInputTypeAttribute,
-            isPasswordVisible: false,
+            initialInputType: attrs.type,
+            inputType: useProxyValue('type', attrs, emit),
+            isPasswordVisible: computed(() => state.inputType !== 'password'),
             proxyValue: useProxyValue('value', props, emit),
             proxySelectedValue: useProxyValue('selected', props, emit),
             deleteTarget: undefined as string | undefined,
@@ -300,8 +303,7 @@ export default defineComponent<TextInputProps>({
         };
 
         const handleTogglePassword = () => {
-            state.isPasswordVisible = !state.isPasswordVisible;
-            state.inputType = state.isPasswordVisible ? 'text' : 'password';
+            state.inputType = state.isPasswordVisible ? 'password' : 'text';
         };
 
         const deleteSelectedTags = () => {
diff --git a/src/inputs/input/story-helper.ts b/src/inputs/input/story-helper.ts
index 59a12f55a..c1baa54f9 100644
--- a/src/inputs/input/story-helper.ts
+++ b/src/inputs/input/story-helper.ts
@@ -247,8 +247,8 @@ export const getTextInputArgTypes = (): ArgTypes => {
                 type: 'boolean',
             },
         },
-        visiblePassword: {
-            name: 'visiblePassword',
+        passwordVisibilityMode: {
+            name: 'passwordVisibilityMode',
             type: { name: 'boolean' },
             description: 'Use this prop when you want to control show/hide button of password input.',
             defaultValue: false,

From 1553baa807a427c3876041e1701c840a372ffc87 Mon Sep 17 00:00:00 2001
From: sulmo <tjdah0853@gmail.com>
Date: Fri, 2 Sep 2022 17:45:02 +0900
Subject: [PATCH 5/8] fix: remove HTMLInputTypeAttribute

---
 src/inputs/input/type.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/inputs/input/type.ts b/src/inputs/input/type.ts
index 6b5fa6ebb..e29364b31 100644
--- a/src/inputs/input/type.ts
+++ b/src/inputs/input/type.ts
@@ -12,7 +12,3 @@ export interface SelectedItem {
 export interface TextInputHandler {
     (val: string, searchableItems: MenuItem[]): Promise<{results: MenuItem[]}>|{results: MenuItem[]}
 }
-
-// eslint-disable-next-line max-len
-type HTMLInputTypeAttribute = null | 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
-export type { HTMLInputTypeAttribute };

From aa0729f29d99f816f47ba625c5184ceafaa71635 Mon Sep 17 00:00:00 2001
From: sulmo <tjdah0853@gmail.com>
Date: Mon, 5 Sep 2022 17:13:17 +0900
Subject: [PATCH 6/8] fix: fix and add props name (maskingMode, showPassword)

fix: fix and add props name (maskingMode, showPassword)
---
 src/inputs/input/PTextInput.stories.mdx |  5 +++--
 src/inputs/input/PTextInput.vue         | 28 ++++++++++++++++++-------
 src/inputs/input/story-helper.ts        | 24 ++++++++++++++++++---
 3 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/src/inputs/input/PTextInput.stories.mdx b/src/inputs/input/PTextInput.stories.mdx
index 3b3330583..5751d4bc3 100644
--- a/src/inputs/input/PTextInput.stories.mdx
+++ b/src/inputs/input/PTextInput.stories.mdx
@@ -27,7 +27,8 @@ export const Template = (args, { argTypes }) => ({
                       :disabled="disabled" :block="block"
                       :menu="menu" :use-fixed-menu-style="useFixedMenuStyle"
                       :loading="loading"
-                      :password-visibility-mode="passwordVisibilityMode"
+                      :masking-mode="maskingMode"
+                      :show-password="showPassword"
                       :type="type"
         >
             <template v-if="rightExtraSlot" #right-extra>
@@ -179,7 +180,7 @@ export const Template = (args, { argTypes }) => ({
         {{
             components: { PTextInput },
             template: `
-                <p-text-input v-model="value" type="password" password-visibility-mode />
+                <p-text-input v-model="value" type="password" masking-mode />
             `,
             setup() {
                 const state = reactive({
diff --git a/src/inputs/input/PTextInput.vue b/src/inputs/input/PTextInput.vue
index 0755d2054..cb62ed596 100644
--- a/src/inputs/input/PTextInput.vue
+++ b/src/inputs/input/PTextInput.vue
@@ -43,14 +43,14 @@
                     {{ value }}
                 </slot>
             </span>
-            <p-button v-if="(initialInputType === 'password') && passwordVisibilityMode"
+            <p-button v-if="($attrs.type === 'password') && maskingMode"
                       size="sm"
                       style-type="transparent"
                       font-weight="normal"
                       :disabled="disabled"
                       @click.stop.prevent="handleTogglePassword"
             >
-                {{ isPasswordVisible ? $t('COMPONENT.TEXT_INPUT.HIDE') : $t('COMPONENT.TEXT_INPUT.SHOW') }}
+                {{ !proxyShowPassword ? $t('COMPONENT.TEXT_INPUT.HIDE') : $t('COMPONENT.TEXT_INPUT.SHOW') }}
             </p-button>
             <p-i v-else
                  v-show="(isFocused || isInvalid)"
@@ -109,7 +109,7 @@ interface TextInputProps {
     disableHandler: boolean;
     exactMode: boolean;
     useAutoComplete: boolean;
-    passwordVisibilityMode: boolean;
+    maskingMode: boolean;
 }
 
 export default defineComponent<TextInputProps>({
@@ -192,10 +192,14 @@ export default defineComponent<TextInputProps>({
             type: Boolean,
             default: false,
         },
-        passwordVisibilityMode: {
+        maskingMode: {
             type: Boolean,
             default: false,
         },
+        showPassword: {
+            type: Boolean,
+            default: true,
+        },
     },
 
     setup(props, { emit, listeners, attrs }) {
@@ -213,9 +217,14 @@ export default defineComponent<TextInputProps>({
             menuRef: null,
             targetRef: null,
             isFocused: false,
-            initialInputType: attrs.type,
-            inputType: useProxyValue('type', attrs, emit),
-            isPasswordVisible: computed(() => state.inputType !== 'password'),
+            proxyShowPassword: useProxyValue('showPassword', props, emit),
+            inputType: computed(() => {
+                if (props.maskingMode) {
+                    if (attrs.type === 'password') return state.proxyShowPassword ? 'password' : 'text';
+                    return attrs.type;
+                }
+                return attrs.type;
+            }),
             proxyValue: useProxyValue('value', props, emit),
             proxySelectedValue: useProxyValue('selected', props, emit),
             deleteTarget: undefined as string | undefined,
@@ -303,7 +312,7 @@ export default defineComponent<TextInputProps>({
         };
 
         const handleTogglePassword = () => {
-            state.inputType = state.isPasswordVisible ? 'password' : 'text';
+            state.proxyShowPassword = !state.proxyShowPassword;
         };
 
         const deleteSelectedTags = () => {
@@ -366,6 +375,9 @@ export default defineComponent<TextInputProps>({
             state.filteredMenu = menu;
             filterMenu(state.proxyValue);
         });
+        watch(() => props.maskingMode, (maskingMode) => {
+            if (maskingMode) state.proxyShowPassword = true;
+        });
 
         const init = () => {
             state.filteredMenu = props.menu;
diff --git a/src/inputs/input/story-helper.ts b/src/inputs/input/story-helper.ts
index c1baa54f9..aba4f2f31 100644
--- a/src/inputs/input/story-helper.ts
+++ b/src/inputs/input/story-helper.ts
@@ -247,10 +247,10 @@ export const getTextInputArgTypes = (): ArgTypes => {
                 type: 'boolean',
             },
         },
-        passwordVisibilityMode: {
-            name: 'passwordVisibilityMode',
+        maskingMode: {
+            name: 'maskingMode',
             type: { name: 'boolean' },
-            description: 'Use this prop when you want to control show/hide button of password input.',
+            description: 'Whether to use input masking or not.',
             defaultValue: false,
             table: {
                 type: {
@@ -265,6 +265,24 @@ export const getTextInputArgTypes = (): ArgTypes => {
                 type: 'boolean',
             },
         },
+        showPassword: {
+            name: 'showPassword',
+            type: { name: 'boolean' },
+            description: 'Whether to display password or not.',
+            defaultValue: true,
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                category: 'props',
+                defaultValue: {
+                    summary: 'true',
+                },
+            },
+            control: {
+                type: 'boolean',
+            },
+        },
         // attrs
         inputAttrs: {
             name: 'all input attributes',

From c204bd6cd99efd4d334389974347d8c09be66592 Mon Sep 17 00:00:00 2001
From: sulmo <tjdah0853@gmail.com>
Date: Mon, 5 Sep 2022 17:20:50 +0900
Subject: [PATCH 7/8] fix: remove type of attrs in story-helper

---
 src/inputs/input/story-helper.ts | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/inputs/input/story-helper.ts b/src/inputs/input/story-helper.ts
index aba4f2f31..73c781a73 100644
--- a/src/inputs/input/story-helper.ts
+++ b/src/inputs/input/story-helper.ts
@@ -301,23 +301,6 @@ export const getTextInputArgTypes = (): ArgTypes => {
                 type: 'object',
             },
         },
-        type: {
-            name: 'type',
-            description: 'type of input tag (e.g. text, password, date ...)',
-            defaultValue: 'text',
-            table: {
-                type: {
-                    summary: null,
-                },
-                defaultValue: {
-                    summary: 'text',
-                },
-                category: 'attrs',
-            },
-            control: {
-                type: 'text',
-            },
-        },
         // model
         'v-model': {
             name: 'v-model',

From 6a5bc004fa64f5bff5e9d05e19a7266caf9af29d Mon Sep 17 00:00:00 2001
From: sulmo <tjdah0853@gmail.com>
Date: Tue, 6 Sep 2022 10:25:16 +0900
Subject: [PATCH 8/8] chore: edit story name

---
 src/inputs/input/PTextInput.stories.mdx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/inputs/input/PTextInput.stories.mdx b/src/inputs/input/PTextInput.stories.mdx
index 5751d4bc3..23e4cdc7f 100644
--- a/src/inputs/input/PTextInput.stories.mdx
+++ b/src/inputs/input/PTextInput.stories.mdx
@@ -173,10 +173,10 @@ export const Template = (args, { argTypes }) => ({
     </Story>
 </Canvas>
 
-#### Visible Password
+#### Masking Mode
 
 <Canvas>
-    <Story name="Visible Password">
+    <Story name="Masking Mode">
         {{
             components: { PTextInput },
             template: `