@insightphp/forms/dist/forms.es.js

Forms component of Insight.

import { defineComponent as i, openBlock as n, createElementBlock as l, withModifiers as x, Fragment as h, renderList as y, createBlock as p, unref as m, createElementVNode as d, createTextVNode as g, toDisplayString as b, createCommentVNode as c, createVNode as V, computed as v } from "vue";
import { Portal as f, registerComponents as k } from "@insightphp/inertia-view";
import { useForm as _ } from "@inertiajs/inertia-vue3";
const F = ["onSubmit"], S = /* @__PURE__ */ d("div", { class: "flex justify-end bg-gray-50 rounded-b-md px-4 py-3" }, [
  /* @__PURE__ */ d("button", {
    type: "submit",
    class: "btn primary"
  }, "Submit")
], -1), $ = /* @__PURE__ */ i({
  __name: "StackedForm",
  props: {
    controls: null,
    value: null,
    method: null,
    action: null
  },
  setup(e) {
    const r = e, t = _(r.value), a = () => {
      r.method && r.action ? t.submit(r.method, r.action, {}) : console.warn("The form does not have action/method set and is unable to be submited.");
    };
    return (u, o) => (n(), l("form", {
      onSubmit: x(a, ["prevent"]),
      class: "border border-gray-200 rounded-md bg-white flex flex-col divide-y divide-gray-200"
    }, [
      (n(!0), l(h, null, y(e.controls, (s) => (n(), p(m(f), {
        component: s,
        form: m(t)
      }, null, 8, ["component", "form"]))), 256)),
      S
    ], 40, F));
  }
}), w = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: $
}, Symbol.toStringTag, { value: "Module" })), C = { class: "w-full flex flex-row px-4 py-3 grid grid-cols-3" }, E = { class: "pt-1.5" }, j = ["for"], q = {
  key: 0,
  class: "text-danger-500"
}, M = { class: "col-span-2" }, O = /* @__PURE__ */ i({
  __name: "StackedFormControl",
  props: {
    name: null,
    label: null,
    isRequired: { type: Boolean },
    control: null,
    form: null
  },
  setup(e) {
    return (r, t) => (n(), l("div", C, [
      d("div", E, [
        e.label ? (n(), l("label", {
          key: 0,
          class: "text-sm text-gray-600",
          for: e.name
        }, [
          g(b(e.label) + " ", 1),
          e.isRequired ? (n(), l("span", q, "*")) : c("", !0)
        ], 8, j)) : c("", !0)
      ]),
      d("div", M, [
        e.control ? (n(), p(m(f), {
          key: 0,
          class: "w-full",
          name: e.name,
          component: e.control,
          modelValue: e.form[e.name],
          "onUpdate:modelValue": t[0] || (t[0] = (a) => e.form[e.name] = a),
          error: e.form.errors[e.name]
        }, null, 8, ["name", "component", "modelValue", "error"])) : c("", !0)
      ])
    ]));
  }
}), B = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
  __proto__: null,
  default: O
}, Symbol.toStringTag, { value: "Module" })), D = {
  install(e, r) {
    k(/* @__PURE__ */ Object.assign({ "./View/Components/StackedForm.vue": w, "./View/Components/StackedFormControl.vue": B }), "insight-forms");
  }
}, N = { class: "space-y-6" }, R = ["for"], T = {
  key: 0,
  class: "text-danger-500"
}, U = {
  key: 1,
  class: "text-xs text-gray-500 mt-0.5 mb-1"
}, I = { class: "mt-1" }, L = /* @__PURE__ */ i({
  __name: "StackedForm",
  props: {
    items: null,
    modelValue: null,
    errors: null
  },
  emits: ["input", "clearError"],
  setup(e, { emit: r }) {
    const t = (a, u) => {
      r("input", { name: a.name, value: u }), r("clearError", a.name);
    };
    return (a, u) => (n(), l("div", N, [
      (n(!0), l(h, null, y(e.items, (o) => (n(), l("div", null, [
        o.label ? (n(), l("label", {
          key: 0,
          for: o.name,
          class: "block text-sm font-medium text-gray-700"
        }, [
          g(b(o.label) + " ", 1),
          o.isRequired ? (n(), l("span", T, "*")) : c("", !0)
        ], 8, R)) : c("", !0),
        o.hint ? (n(), l("p", U, b(o.hint), 1)) : c("", !0),
        d("div", I, [
          V(m(f), {
            component: o.fieldView,
            name: o.name,
            modelValue: e.modelValue[o.name],
            "onUpdate:modelValue": (s) => e.modelValue[o.name] = s,
            "inertia-form": e.modelValue,
            errors: e.errors,
            error: e.errors[o.name],
            "field-path": [],
            required: o.isRequired,
            onInput: (s) => t(o, s),
            class: "w-full"
          }, null, 8, ["component", "name", "modelValue", "onUpdate:modelValue", "inertia-form", "errors", "error", "required", "onInput"])
        ])
      ]))), 256))
    ]));
  }
}), G = /* @__PURE__ */ i({
  __name: "Form",
  props: {
    form: null
  },
  setup(e) {
    const r = e, t = v(() => r.form), a = (u) => {
      t.value.form.errors[u] && t.value.form.clearErrors(u);
    };
    return (u, o) => (n(), p(m(f), {
      component: m(t).formModel.renderAs,
      modelValue: m(t).form,
      "onUpdate:modelValue": o[0] || (o[0] = (s) => m(t).form = s),
      errors: m(t).form.errors,
      onClearError: o[1] || (o[1] = (s) => a(s))
    }, null, 8, ["component", "modelValue", "errors"]));
  }
});
function H(e, r) {
  const t = _(e.initialValue);
  return {
    submit: () => {
      e.method && e.action && t.submit(e.method, e.action, r);
    },
    form: {
      form: t,
      formModel: e
    }
  };
}
export {
  G as Form,
  D as Forms,
  L as StackedForm,
  H as useForm
};