<script setup>
import { computed, ref } from "vue";
import { useErrorMessage } from "./useErrorMessage";
import { useRequiredLabel } from "./useRequiredLabel";
import { useI18n } from "vue-i18n";
const props = defineProps({
  context: {
    type: Object,
    required: true
  }
});
const { t } = useI18n();
const error = ref(false);
const errorMessage = ref("");
useErrorMessage(props.context.node, error, errorMessage);
const value = computed({
  get: () => props.context?.value,
  set: (val) => props.context.node.input(val)
});
const onBlur = () => {
  if (errorMessage.value) {
    error.value = true;
  } else {
    error.value = false;
  }
};
const label = useRequiredLabel(props.context, t);
</script>

<template>
    <l-input-select v-model="value" v-bind="context?.attrs" :label="label" :error="error" :error-message="errorMessage"
        @blur="onBlur" :disable="context.disabled" :hint="context.help">

        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
            <slot :name="name" v-bind="props ?? {}"></slot>
        </template>
    </l-input-select>
</template>
