flaschengeist-frontend/api/components/PasswordInput.vue

<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'));
    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>