@extclp/vexip-ui/es/components/form/form.vue2.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as _, reactive as P, computed as g, provide as f, openBlock as S, createBlock as F, unref as l, mergeProps as R, withCtx as W, renderSlot as w } from "vue";
import "../row/index.mjs";
import { useProps as x, createSizeProp as O, useNameHelper as j } from "@vexip-ui/config";
import { formProps as z } from "./props.mjs";
import { submitMethods as k, labelAligns as B, FORM_PROPS as C, FORM_FIELDS as I, FORM_ACTIONS as L } from "./symbol.mjs";
import N from "../row/row.mjs";
const K = /* @__PURE__ */ _({
  name: "Form",
  inheritAttrs: !0,
  __name: "form",
  props: z,
  setup(v, { expose: A }) {
    const t = x("form", v, {
      method: {
        default: "post",
        validator: (e) => k.includes(e)
      },
      action: null,
      model: {
        default: () => ({}),
        static: !0
      },
      rules: () => ({}),
      labelWidth: "auto",
      labelAlign: {
        default: "right",
        validator: (e) => B.includes(e)
      },
      allRequired: !1,
      labelSuffix: "",
      hideAsterisk: !1,
      validateAll: !1,
      hideLabel: !1,
      disabled: !1,
      loading: !1,
      size: O(),
      inline: !1,
      gap: [8, 0],
      justify: "start",
      align: "top"
    }), i = j("form"), o = P(/* @__PURE__ */ new Set()), y = g(() => [
      i.b(),
      i.bs("vars"),
      i.bm(`label-${t.labelAlign}`),
      {
        [i.bm("inherit")]: t.inherit,
        [i.bm("disabled")]: t.disabled,
        [i.bm("loading")]: t.loading,
        [i.bm(t.size)]: t.size !== "default",
        [i.bm("inline")]: t.inline
      }
    ]), E = g(() => Math.max(...Array.from(o).map((e) => e.labelWidth.value)));
    f(C, t), f(I, o), f(L, {
      getLabelWidth: M,
      validate: d,
      validateFields: c,
      reset: m,
      resetFields: h,
      clearError: p,
      clearFieldsError: b
    }), A({
      validate: d,
      validateFields: c,
      reset: m,
      resetFields: h,
      clearError: p,
      clearFieldsError: b
    });
    function M() {
      return typeof t.labelWidth == "number" ? t.labelWidth : E.value;
    }
    function s() {
      const e = {};
      for (const a of o)
        a.prop.value && (e[a.prop.value] = a);
      return e;
    }
    function d() {
      return u(o);
    }
    function c(e) {
      Array.isArray(e) || (e = [e]);
      const a = s(), r = /* @__PURE__ */ new Set();
      return e.forEach((n) => {
        a[n] && r.add(a[n]);
      }), u(r);
    }
    function u(e) {
      const a = [];
      return e.forEach((r) => {
        a.push(r.validate());
      }), new Promise((r) => {
        Promise.all(a).then((n) => {
          r(n.flat().filter(Boolean));
        });
      });
    }
    function m() {
      o.forEach((e) => {
        e.reset();
      });
    }
    function h(e) {
      Array.isArray(e) || (e = [e]);
      const a = s();
      e.forEach((r) => {
        a[r] && a[r].reset();
      });
    }
    function p() {
      o.forEach((e) => {
        e.clearError();
      });
    }
    function b(e) {
      Array.isArray(e) || (e = [e]);
      const a = s();
      e.forEach((r) => {
        a[r] && a[r].clearError();
      });
    }
    return (e, a) => (S(), F(l(N), R(e.$attrs, {
      class: y.value,
      inherit: l(t).inherit,
      tag: "form",
      method: l(t).action && l(t).method,
      action: l(t).action,
      gap: l(t).gap,
      justify: l(t).justify,
      align: l(t).align,
      "column-flex": void 0
    }), {
      default: W(() => [
        w(e.$slots, "default")
      ]),
      _: 3
    }, 16, ["class", "inherit", "method", "action", "gap", "justify", "align"]));
  }
});
export {
  K as default
};
//# sourceMappingURL=form.vue2.mjs.map