import { h } from './chunks/d4789960.js';
import './chunks/456564be.js';
import { u as useProp } from './chunks/c26036df.js';
import { u as useEvent } from './chunks/d4058887.js';
import { a as useRef } from './chunks/4ccc6eeb.js';
import { g as getComponentOrDefine } from './chunks/071ed725.js';
import './chunks/23e44913.js';
import { O as Option } from './chunks/a02c5734.js';
import { M as Maybe_3 } from './chunks/d76d6172.js';

var style = ":host {\n}\n";

function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
const KunForm = () => {
  const formRef = useRef();
  const [parseForm] = useProp("parseForm");
  const defaultFields = [{
    name: "abc",
    label: "标题",
    formType: "input"
  }];
  const submitEvent = useEvent("MySubmit", {
    composed: true,
    bubbles: true
  });

  const onSubmitForm = event => {
    const formData = new FormData(formRef.current);
    let retResult = formData;

    if (parseForm) {
      retResult = JSON.parse(JSON.stringify(Array.from(formData.entries()).reduce((memo, pair) => ({ ...memo,
        [pair[0]]: pair[1]
      }), {})));
    }

    submitEvent({
      form: retResult
    });
    event.preventDefault();
    event.stopPropagation();
  };

  const [fields] = useProp("fields");
  const checkedFields = Maybe_3.fromPredicate(r => r.length > 0)(fields).orDefault(defaultFields);
  const [submitText] = useProp("submitText");
  const checkedSubmitText = Option.of(submitText).getOrElse("提交");
  return h("host", null, h("style", null, style), h("form", {
    className: "pt-6",
    onsubmit: onSubmitForm,
    ref: formRef
  }, checkedFields.map(item => h("div", {
    className: "mb-4"
  }, item.formType !== "hidden" && h("label", {
    className: "block text-gray-700 text-sm font-bold mb-2",
    htmlFor: item.name
  }, item.label), item.formType === "textarea" && h("textarea", {
    className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline",
    name: item.name,
    id: item.name,
    value: item.value,
    placeholder: item.placeholder
  }), item.formType === "hidden" && h("input", {
    className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline",
    name: item.name,
    id: item.name,
    value: item.value,
    type: "hidden",
    placeholder: item.placeholder
  }), item.formType === "input" && h("input", {
    className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline",
    name: item.name,
    id: item.name,
    value: item.value,
    type: "text",
    placeholder: item.placeholder
  }), item.formType === "select" && h("select", {
    name: item.name,
    id: item.name,
    className: "block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
  }, (_nullishCoalesce(item.options, () => ( []))).map(itm => h("option", {
    value: itm.value
  }, itm.label))))), h("div", {
    className: "flex items-center justify-between"
  }, h("button", {
    onclick: onSubmitForm,
    className: "bg-orange-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline",
    type: "submit"
  }, checkedSubmitText))));
};

KunForm.props = {
  fields: {
    type: Array,
    value: [],
    reflect: true
  },
  parseForm: {
    type: Boolean,
    value: true,
    reflect: true
  },
  submitText: {
    type: String,
    value: "提交",
    reflect: true,
    event: {
      type: "changeMessage"
    }
  }
};
var kunForm = getComponentOrDefine("kun-form", KunForm);

export default kunForm;
//# sourceMappingURL=kun-form.js.map
