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

<template>
    <l-group-select v-model="value" :label="label" v-bind="context.attrs" :error="error"
        :error-message="errorMessage"  :required="context.state.required"
        :disable="context.disabled">
        <template v-for="(s, name) in $slots" v-slot:[name]="props" :key="name">
            <slot :name="name" v-bind="props ?? {}"></slot>
        </template>
    </l-group-select>
</template>
