Skip to content

Commit

Permalink
feat(text-input): add show/hide button when type is password
Browse files Browse the repository at this point in the history
  • Loading branch information
sulmoJ authored Sep 6, 2022
2 parents 02c5033 + 6a5bc00 commit 06aece8
Show file tree
Hide file tree
Showing 4 changed files with 107 additions and 9 deletions.
24 changes: 24 additions & 0 deletions src/inputs/input/PTextInput.stories.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,9 @@ export const Template = (args, { argTypes }) => ({
:disabled="disabled" :block="block"
:menu="menu" :use-fixed-menu-style="useFixedMenuStyle"
:loading="loading"
:masking-mode="maskingMode"
:show-password="showPassword"
:type="type"
>
<template v-if="rightExtraSlot" #right-extra>
<span v-html="rightExtraSlot"></span>
Expand Down Expand Up @@ -170,6 +173,27 @@ export const Template = (args, { argTypes }) => ({
</Story>
</Canvas>

#### Masking Mode

<Canvas>
<Story name="Masking Mode">
{{
components: { PTextInput },
template: `
<p-text-input v-model="value" type="password" masking-mode />
`,
setup() {
const state = reactive({
value: 'password'
})
return {
...toRefs(state)
}
}
}}
</Story>
</Canvas>

<br/>
<br/>

Expand Down
54 changes: 46 additions & 8 deletions src/inputs/input/PTextInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
</p-tag>
<slot name="default" v-bind="{ value }">
<input v-bind="$attrs"
:type="inputType"
:value="proxyValue"
:disabled="disabled"
:placeholder="placeholder"
Expand All @@ -29,6 +30,7 @@
</div>
<slot v-else name="default" v-bind="{ value }">
<input v-bind="$attrs"
:type="inputType"
:value="proxyValue"
:disabled="disabled"
:placeholder="placeholder"
Expand All @@ -41,13 +43,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') && maskingMode"
size="sm"
style-type="transparent"
font-weight="normal"
:disabled="disabled"
@click.stop.prevent="handleTogglePassword"
>
{{ !proxyShowPassword ? $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"
Expand Down Expand Up @@ -75,6 +86,7 @@ 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';
Expand All @@ -97,6 +109,7 @@ interface TextInputProps {
disableHandler: boolean;
exactMode: boolean;
useAutoComplete: boolean;
maskingMode: boolean;
}
export default defineComponent<TextInputProps>({
Expand All @@ -105,6 +118,7 @@ export default defineComponent<TextInputProps>({
PTag,
PI,
PContextMenu,
PButton,
},
directives: {
focus,
Expand Down Expand Up @@ -178,9 +192,17 @@ export default defineComponent<TextInputProps>({
type: Boolean,
default: false,
},
maskingMode: {
type: Boolean,
default: false,
},
showPassword: {
type: Boolean,
default: true,
},
},
setup(props, { emit, listeners }) {
setup(props, { emit, listeners, attrs }) {
const {
proxyVisibleMenu, targetRef, targetElement, contextMenuStyle,
} = useContextMenuFixedStyle({
Expand All @@ -195,6 +217,14 @@ export default defineComponent<TextInputProps>({
menuRef: null,
targetRef: null,
isFocused: false,
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,
Expand Down Expand Up @@ -281,6 +311,10 @@ export default defineComponent<TextInputProps>({
hideMenu();
};
const handleTogglePassword = () => {
state.proxyShowPassword = !state.proxyShowPassword;
};
const deleteSelectedTags = () => {
if (state.proxyValue.length > 0) return;
const lastIdx = state.proxySelectedValue.length - 1;
Expand Down Expand Up @@ -341,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;
Expand All @@ -362,6 +399,7 @@ export default defineComponent<TextInputProps>({
handleDeleteAllTags,
handleFocusMenuItem,
handleSelectMenuItem,
handleTogglePassword,
};
},
});
Expand Down
36 changes: 36 additions & 0 deletions src/inputs/input/story-helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,42 @@ export const getTextInputArgTypes = (): ArgTypes => {
type: 'boolean',
},
},
maskingMode: {
name: 'maskingMode',
type: { name: 'boolean' },
description: 'Whether to use input masking or not.',
defaultValue: false,
table: {
type: {
summary: 'boolean',
},
category: 'props',
defaultValue: {
summary: 'false',
},
},
control: {
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',
Expand Down
2 changes: 1 addition & 1 deletion src/translations/language-pack
Submodule language-pack updated 4 files
+47 −0 babel.babel
+4 −0 en.json
+4 −0 ja.json
+4 −0 ko.json

0 comments on commit 06aece8

Please sign in to comment.