import { createVNode as _createVNode } from "vue";
import "./styles/selection-group-control.css";
import { computed, inject, provide, toRef } from "vue";
import { getUid, propsFactory, useRender } from "@veno-ui/utils";
import { createSymbol, defineComponent } from "../../utils";
import { useProxiedModel } from "../../composables/proxied-model";
const SelectionGroupControlKey = createSymbol("selection-control-group");
const makeSelectionGroupControlProps = propsFactory({
  id: String,
  inline: Boolean,
  name: String,
  falseIcon: String,
  trueIcon: String,
  multiple: {
    type: Boolean,
    default: null
  },
  disabled: Boolean,
  readonly: Boolean,
  type: String,
  modelValue: null
}, "selection-control-group");
const SelectionGroupControl = defineComponent({
  name: "VeSelectionGroupControl",
  props: makeSelectionGroupControlProps(),
  emits: {
    "update:modelValue": (_modelValue) => true
  },
  setup(props, {
    slots
  }) {
    const modelValue = useProxiedModel(props, "modelValue");
    const id = computed(() => props.name || props.id || `ve-selection-control-group-${getUid()}`);
    const multiple = computed(() => {
      return !!props.multiple || props.multiple == null && Array.isArray(modelValue.value);
    });
    const group = {
      disabled: toRef(props, "disabled"),
      inline: toRef(props, "inline"),
      modelValue,
      multiple,
      id,
      name: toRef(props, "name"),
      falseIcon: toRef(props, "falseIcon"),
      trueIcon: toRef(props, "trueIcon"),
      readonly: toRef(props, "readonly"),
      type: toRef(props, "type")
    };
    provide(SelectionGroupControlKey, group);
    useRender(() => {
      return _createVNode("div", {
        "class": "ve-selection-group-control",
        "aria-labelled-by": props.type === "radio" ? group.id.value : void 0,
        "role": props.type === "radio" ? "radiogroup" : void 0
      }, [slots.default?.()]);
    });
    return group;
  }
});
function useSelectionGroupControl() {
  return inject(SelectionGroupControlKey, null);
}
export {
  SelectionGroupControl,
  SelectionGroupControlKey,
  makeSelectionGroupControlProps,
  useSelectionGroupControl
};
//# sourceMappingURL=selection-group-control.mjs.map
