<script setup>
import { useLight } from "#imports";
import { computed, ref } from "vue";
import { useErrorMessage } from "./useErrorMessage";
import { useRequiredLabel } from "./useRequiredLabel";
const light = useLight();
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)
});
const outlined = computed(() => {
  return props.context.attrs.outlined != void 0 ? props.context.attrs.outlined : light.styles.input.outlined;
});
</script>

<template>
    <l-field stack-label :label="label" :error="error" :error-message="errorMessage" :outlined="outlined"
        hide-bottom-space>
        <q-option-group type="checkbox" :options="context.options" v-model="value" inline v-bind="context.attrs">
        </q-option-group>
    </l-field>
</template>
