thelounge/client/components/RevealPassword.vue
Max Leiter dd05ee3a65
TypeScript and Vue 3 (#4559)
Co-authored-by: Eric Nemchik <eric@nemchik.com>
Co-authored-by: Pavel Djundik <xPaw@users.noreply.github.com>
2022-06-18 17:25:21 -07:00

37 lines
715 B
Vue

<template>
<div>
<slot :is-visible="isVisible" />
<span
ref="revealButton"
type="button"
:class="[
'reveal-password tooltipped tooltipped-n tooltipped-no-delay',
{'reveal-password-visible': isVisible},
]"
:aria-label="isVisible ? 'Hide password' : 'Show password'"
@click="onClick"
>
<span :aria-label="isVisible ? 'Hide password' : 'Show password'" />
</span>
</div>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue";
export default defineComponent({
name: "RevealPassword",
setup() {
const isVisible = ref(false);
const onClick = () => {
isVisible.value = !isVisible.value;
};
return {
isVisible,
onClick,
};
},
});
</script>