<script setup>
import VnInput from 'src/components/common/VnInput.vue';
import { ref } from 'vue';

const model = defineModel({ type: [Number, String] });
const $props = defineProps({
    toggleVisibility: {
        type: Boolean,
        default: false,
    },
});

const showPassword = ref(false);
</script>
<template>
    <VnInput
        v-bind="{ ...$attrs }"
        v-model="model"
        :type="
            $props.toggleVisibility ? (showPassword ? 'text' : 'password') : $attrs.type
        "
    >
        <template #append v-if="toggleVisibility">
            <QIcon
                :name="showPassword ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="showPassword = !showPassword"
            />
        </template>
    </VnInput>
</template>
