<script setup>
import { computed } from "vue";
import { VTextField } from "vuetify/components/VTextField";
import { vMaska } from "maska";
const props = defineProps({
  type: { type: String, required: true }
});
const vMaskaOptions = vMaska;
const emit = defineEmits(["update:modelValue"]);
const computedMaskOption = computed(() => {
  if (props.type == "eReceipt") return { mask: "##-##-N", tokens: { N: { pattern: /\d/, multiple: true } } };
  if (props.type == "telephone") return { mask: "###-###-####" };
  return {};
});
function onMaska(event) {
  emit("update:modelValue", event.detail.unmasked);
}
</script>

<template>
  <v-text-field
    v-maska-options="computedMaskOption"
    v-bind="$attrs"
    @maska="onMaska"
  >
    <template
      v-for="(_, name, index) in $slots"
      :key="index"
      #[name]="slotData"
    >
      <slot
        :name="name"
        v-bind="slotData || {}"
      />
    </template>
  </v-text-field>
</template>
