63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { Eye, EyeOff } from '@lucide/vue';
|
|
import { ref, useTemplateRef } from 'vue';
|
|
import type { HTMLAttributes } from 'vue';
|
|
import { Input } from '@/components/ui/input';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
defineOptions({ inheritAttrs: false });
|
|
|
|
const props = defineProps<{
|
|
class?: HTMLAttributes['class'];
|
|
}>();
|
|
|
|
const showPassword = ref(false);
|
|
const inputRef = useTemplateRef('inputRef');
|
|
|
|
defineExpose({
|
|
$el: inputRef,
|
|
focus: () => inputRef.value?.$el?.focus(),
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="password-input">
|
|
<Input
|
|
ref="inputRef"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
:class="cn('password-input__field', props.class)"
|
|
v-bind="$attrs"
|
|
/>
|
|
<button
|
|
type="button"
|
|
@click="showPassword = !showPassword"
|
|
class="password-input__toggle"
|
|
:aria-label="showPassword ? 'Hide password' : 'Show password'"
|
|
:tabindex="-1"
|
|
>
|
|
<EyeOff v-if="showPassword" class="password-input__icon" />
|
|
<Eye v-else class="password-input__icon" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "../../css/app.css";
|
|
|
|
.password-input {
|
|
@apply relative;
|
|
}
|
|
|
|
:deep(.password-input__field) {
|
|
@apply pr-10;
|
|
}
|
|
|
|
.password-input__toggle {
|
|
@apply absolute inset-y-0 right-0 flex items-center rounded-r-md px-3 text-muted-foreground hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:outline-none;
|
|
}
|
|
|
|
.password-input__icon {
|
|
@apply size-4;
|
|
}
|
|
</style>
|