@indielayer/ui/lib/components/formGroup/FormGroup.vue.js

Indielayer UI Components with Tailwind CSS build for Vue 3

import { defineComponent as q, computed as w, provide as B, openBlock as m, createBlock as d, mergeProps as K, unref as o, toHandlers as N, withKeys as $, withCtx as A, createElementVNode as E, normalizeClass as O, renderSlot as P, createCommentVNode as j } from "vue";
import { useTheme as z } from "../../composables/useTheme.js";
import { useInteractive as H } from "../../composables/useInteractive.js";
import { useInputtable as i } from "../../composables/useInputtable.js";
import { injectFormGroupKey as S } from "../../composables/keys.js";
import T from "../label/Label.vue.js";
import X from "../inputFooter/InputFooter.vue.js";
const D = {
  ...H.props(),
  ...i.props(),
  vertical: {
    type: Boolean,
    default: !1
  }
}, J = {
  name: "XFormGroup"
}, Z = /* @__PURE__ */ q({
  ...J,
  props: D,
  emits: i.emits(),
  setup(f, { expose: c, emit: V }) {
    const r = f, t = [], y = w(() => typeof r.modelValue == "string" || typeof r.modelValue == "number" || Array.isArray(r.modelValue) ? r.modelValue : "");
    B(S, {
      registerInputGroup: (e, s) => {
        t.push({ name: e, focus: s });
      },
      unregisterInputGroup: (e) => {
        const s = t.findIndex((k) => k.name === e);
        t.splice(s, 1);
      },
      setValue: (e) => {
        n("update:modelValue", e);
      },
      isInsideFormGroup: !0,
      value: y
    });
    function a() {
      var e;
      (e = t[0]) == null || e.focus();
    }
    function v() {
    }
    const n = V, {
      errorInternal: u,
      isInsideForm: h,
      isFirstValidation: p,
      reset: I,
      validate: l,
      setError: b
    } = i(r, { focus: a, emit: n }), F = {
      change: (e) => {
        r.validateOnInput && !p.value && l(r.modelValue);
      }
    };
    function G() {
      r.validateOnInput && !p.value && l(r.modelValue);
    }
    const { styles: g, classes: _, className: C } = z("FormGroup", {}, r, { errorInternal: u });
    return c({ focus: a, blur: v, reset: I, validate: l, setError: b }), (e, s) => (m(), d(T, K({
      tag: "fieldset",
      style: o(g),
      disabled: e.disabled,
      required: e.required,
      "is-inside-form": o(h),
      label: e.label,
      class: [
        o(C)
      ],
      tooltip: e.tooltip
    }, N(F), {
      onKeyup: $(G, ["space"])
    }), {
      default: A(() => [
        E("div", {
          class: O(o(_).wrapper)
        }, [
          P(e.$slots, "default")
        ], 2),
        e.hideFooter ? j("", !0) : (m(), d(X, {
          key: 0,
          error: o(u),
          helper: e.helper
        }, null, 8, ["error", "helper"]))
      ]),
      _: 3
    }, 16, ["style", "disabled", "required", "is-inside-form", "label", "class", "tooltip"]));
  }
});
export {
  Z as default
};