import { createVNode as _createVNode } from "vue";
import "./styles/form.css";
import { toRef } from "vue";
import { useRender } from "@veno-ui/utils";
import { defineComponent } from "../../utils";
import { makeSizeProps } from "../../composables/size";
import { makeDensityProps } from "../../composables/density";
import { makeFormProps, provideForm } from "../../composables/form";
import { makeVariantProps } from "../../composables/variant";
import { provideDefaults } from "../../composables/defaults";
import { FormChildren } from "./form-children";
const Form = defineComponent({
  name: "VeForm",
  props: {
    /**
     * @zh 布局方向
     */
    direction: {
      type: String,
      default: "horizontal",
      validator: (v) => ["horizontal", "vertical"].includes(v)
    },
    /**
     * @zh 隐藏详情
     */
    hideDetails: [Boolean, String],
    /**
     * @zh 内联
     */
    inline: Boolean,
    /**
     * @zh 数据驱动的表单列表项
     */
    items: Array,
    /**
     * @zh 标签宽度
     */
    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 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({
      // input control
      VeInput: defaults,
      VeSelect: defaults,
      // select control
      VeRadioGroup: defaults,
      VeCheckboxGroup: defaults,
      VeSwitch: defaults,
      // form control
      VeFormControl: defaults,
      // button
      VeButton: {
        density: defaults.density,
        disabled: defaults.disabled
      }
    });
    useRender(() => {
      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": props.items
      }, null), slots.default?.(form)]);
    });
    return form;
  }
});
export {
  Form
};
//# sourceMappingURL=form.mjs.map
