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

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

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