<template>
    <v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" :intro="field.intro" v-model="inner"></v-text>
</template>

<script setup>
import {computed} from 'vue';
import VText from './VText.vue';

const emit = defineEmits(['update:modelValue']);
const props = defineProps({
    modelValue: {
        required: true,
        validator: (value) => value === null || typeof value === 'string',
    },
    field: {
        required: true,
        validator: (value) =>
            hasKeys(value, [...globalFieldRules(), 'required']) &&
            typeof value.required === 'boolean' &&
            typeof value.key === 'string' &&
            value.key.length > 0 &&
            typeof value.name === 'string' &&
            value.name.length > 0 &&
            hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
    },
});

const inner = computed({
    get: () => props.modelValue,
    set: (v) => emit('update:modelValue', v),
});
</script>
