import { computed, toRef, createVNode } from "vue";
import "./styles/form.scss";
import { makeSizeProps } from "../../composables/size/index.mjs";
import { makeDensityProps } from "../../composables/density/index.mjs";
import { makeFormProps, provideForm } from "../../composables/form/index.mjs";
import { makeVariantProps } from "../../composables/variant/index.mjs";
import { provideDefaults } from "../../composables/defaults/index.mjs";
import { FormChildren } from "./form-children.mjs";
import { defineComponent } from "../../utils/define-component.mjs";
import { useRender } from "../../utils/dist/index.mjs";
const Form = defineComponent({
  name: "VeForm",
  props: {
    direction: {
      type: String,
      default: "horizontal",
      validator: (v) => ["horizontal", "vertical"].includes(v)
    },
    hideDetails: [Boolean, String],
    inline: Boolean,
    items: Array,
    labelWidth: [Number, String],
    ...makeSizeProps(),
    ...makeDensityProps(),
    ...makeFormProps(),
    ...makeVariantProps()
  },
  emits: {
    "update:valid": (_valid) => true,
    "update:modelValue": (_modelValue) => true,
    "resetValidation": () => true,
    "reset": (_event) => true,
    "submit": (_value, _event) => true
  },
  setup(props, {
    slots
  }) {
    const form = provideForm(props);
    const items = computed(() => {
      var _a;
      return (_a = props.items) == null ? void 0 : _a.map((item) => {
        const {
          $type: type,
          ...props2
        } = item;
        return {
          type,
          props: props2
        };
      });
    });
    const defaults = {
      variant: toRef(props, "variant"),
      size: toRef(props, "size"),
      density: toRef(props, "density"),
      direction: toRef(props, "direction"),
      inline: toRef(props, "inline"),
      labelWidth: toRef(props, "labelWidth"),
      hideDetails: toRef(props, "hideDetails"),
      readonly: toRef(props, "readonly"),
      disabled: toRef(props, "disabled")
    };
    provideDefaults({
      VeInput: defaults,
      VeSelect: defaults,
      VeRadioGroup: defaults,
      VeCheckboxGroup: defaults,
      VeSwitch: defaults,
      VeFormControl: defaults,
      VeButton: {
        density: defaults.density,
        disabled: defaults.disabled
      }
    });
    useRender(() => {
      var _a;
      return createVNode("form", {
        "class": ["ve-form", {
          [`ve-form--${props.direction}`]: !!props.direction,
          "ve-form--inline": props.inline
        }],
        "novalidate": true,
        "onReset": form.reset,
        "onSubmit": form.submit
      }, [createVNode(FormChildren, {
        "items": items.value
      }, null), (_a = slots.default) == null ? void 0 : _a.call(slots, form)]);
    });
    return form;
  }
});
export {
  Form
};
//# sourceMappingURL=form.mjs.map
