@indielayer/ui/lib/components/form/Form.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as I, provide as S, onMounted as $, watch as A, nextTick as C, openBlock as c, createElementBlock as f, normalizeStyle as N, unref as n, normalizeClass as l, renderSlot as d, toDisplayString as h, createCommentVNode as m, createElementVNode as b } from "vue";
import { injectFormKey as T } from "../../composables/keys.js";
import { useTheme as j } from "../../composables/useTheme.js";
const w = {
  key: 0,
  class: "mb-6"
}, z = ["disabled"], D = {
  autoValidate: {
    type: Boolean,
    default: !0
  },
  autoFocus: {
    type: Boolean,
    default: !0
  },
  disabled: Boolean,
  errors: {
    type: [Array, Object],
    default: () => []
  },
  title: String,
  description: String,
  hasFooter: {
    type: Boolean,
    default: !0
  }
}, P = {
  name: "XForm"
}, X = /* @__PURE__ */ I({
  ...P,
  props: D,
  emits: ["submit"],
  setup(F, { expose: g, emit: V }) {
    const u = F, k = V, s = [];
    S(T, {
      registerInput: (e, t, o, i) => {
        const a = s.find((E) => E.name === e);
        a ? (a.focus = t, a.validate = o, a.setError = i) : s.push({ name: e, focus: t, validate: o, setError: i });
      },
      unregisterInput: (e) => {
        const t = s.findIndex((o) => o.name === e);
        s.splice(t, 1);
      },
      isInsideForm: !0
    }), $(async () => {
      u.autoFocus && s && s.length > 0 && setTimeout(s[0].focus, 50);
    }), A(() => u.errors, (e) => {
      e && C(() => {
        if (Array.isArray(e))
          e.forEach((t, o) => {
            const i = s.find((a) => a.name === t.field);
            i && (i.setError(t.msg), o === 0 && i.focus && i.focus());
          });
        else {
          const t = s.find((o) => o.name === e.field);
          t && (t.setError(e.msg), t.focus && t.focus());
        }
      });
    });
    const p = () => {
      let e = !0;
      return s.forEach((t) => {
        !t.validate() && e && (e = !1, t.focus && t.focus());
      }), e;
    }, y = (e) => {
      e.preventDefault(), e.stopPropagation();
      const t = u.autoValidate ? p() : !0;
      k("submit", t);
    };
    g({ validate: p, submit: y });
    const { styles: v, classes: r, className: B } = j("Form", {}, u);
    return (e, t) => (c(), f("form", {
      style: N(n(v)),
      class: l([
        n(B),
        n(r).wrapper
      ]),
      onSubmit: y
    }, [
      d(e.$slots, "header", {}, () => [
        e.title || e.description ? (c(), f("div", w, [
          e.title ? (c(), f("p", {
            key: 0,
            class: l(n(r).title)
          }, h(e.title), 3)) : m("", !0),
          e.description ? (c(), f("p", {
            key: 1,
            class: l(n(r).description)
          }, h(e.description), 3)) : m("", !0)
        ])) : m("", !0)
      ]),
      b("fieldset", {
        disabled: e.disabled,
        class: l([n(r).content, "contents"])
      }, [
        d(e.$slots, "default")
      ], 10, z),
      e.hasFooter ? d(e.$slots, "footer", { key: 0 }, () => [
        b("div", {
          class: l(n(r).footer)
        }, [
          d(e.$slots, "primary-action"),
          d(e.$slots, "secondary-action")
        ], 2)
      ]) : m("", !0)
    ], 38));
  }
});
export {
  X as default
};