<template>
  <label v-if="labelText" :for="labelText" :class="getModifiersClass('o-label', modifiers)">{{ labelText }}</label>
  <input v-model="model" :id="labelText ? labelText : undefined" :class="getModifiersClass('o-input-field', modifiers)"
    v-bind="$attrs" />
</template>

<script setup lang="ts">
import type { ModifierItems } from './input-field.config';
import useComponentModifiers from '../../composable/useComponentModifiers';
import { computed } from 'vue';

const props = defineProps<{
  modifiers?: ModifierItems;
  labelText?: string;
  modelValue?: any,
}>();

const emit = defineEmits(["update:modelValue"]);
const model = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value),
})

const { getModifiersClass } = useComponentModifiers();
</script>
