mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-21 21:33:02 +01:00
37 lines
882 B
Vue
37 lines
882 B
Vue
<template>
|
|
<div class="relative">
|
|
<FormTextField v-model="value" placeholder="Password" :label="label" :type="inputType"> </FormTextField>
|
|
<button
|
|
type="button"
|
|
class="tooltip absolute right-3 top-11 mb-3 ml-1 mt-auto inline-flex justify-center p-1"
|
|
data-tip="Toggle Password Show"
|
|
@click="toggle()"
|
|
>
|
|
<MdiEye name="mdi-eye" class="size-5" />
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MdiEye from "~icons/mdi/eye";
|
|
|
|
type Props = {
|
|
modelValue: string;
|
|
placeholder?: string;
|
|
label: string;
|
|
};
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
placeholder: "Password",
|
|
label: "Password",
|
|
});
|
|
|
|
const [hide, toggle] = useToggle(true);
|
|
|
|
const inputType = computed(() => {
|
|
return hide.value ? "password" : "text";
|
|
});
|
|
|
|
const value = useVModel(props, "modelValue");
|
|
</script>
|