flaschengeist-frontend/api/components/PasswordInput.vue

47 lines
1.1 KiB
Vue
Raw Normal View History

<template>
<q-input v-model="password" v-bind="attrs" :label="label" :type="type">
<template #append><q-icon :name="name" class="cursor-pointer" @click="toggle" /></template
></q-input>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
export default defineComponent({
name: 'PasswordInput',
props: {
modelValue: {
type: String,
required: true,
},
label: {
type: String,
default: '',
},
},
emits: {
'update:modelValue': (value: string) => !!value,
},
setup(props, { emit, attrs }) {
const isPassword = ref(true);
const type = computed(() => (isPassword.value ? 'password' : 'text'));
2021-04-03 11:24:19 +00:00
const name = computed(() => (isPassword.value ? 'mdi-eye-off' : 'mdi-eye'));
const password = computed({
get: () => props.modelValue,
set: (value: string) => emit('update:modelValue', value),
});
function toggle() {
isPassword.value = !isPassword.value;
}
return {
attrs,
isPassword,
name,
password,
toggle,
type,
};
},
});
</script>