x-next 1.0.1 → 1.2.0

package/dist/es/components/form/Form.vue2.js

@@ -0,0 +1,329 @@
+import { defineComponent as K, ref as U, toRefs as D, computed as m, watch as G, onBeforeUnmount as H, reactive as E, provide as J } from "vue";
+import Q from "../../node_modules/.pnpm/scroll-into-view-if-needed@3.1.0/node_modules/scroll-into-view-if-needed/dist/index.js";
+import { formInjectionKey as X } from "./context.js";
+import { isArray as Y, isFunction as S } from "../../_utils/is.js";
+import { useSize as Z } from "../../_hooks/use-size.js";
+import { getFormElementId as I } from "./utils.js";
+import { getClassNameMixin as ee } from "../../_utils/config.js";
+const de = K({
+  name: "Form",
+  props: {
+    /**
+     * @zh 表单数据对象
+     * @en Form data object
+     */
+    model: {
+      type: Object,
+      required: !0
+    },
+    /**
+     * @zh 表单的布局方式，包括水平、垂直、多列
+     * @en The layout of the form, including horizontal, vertical, and multi-column
+     * @values 'horizontal', 'vertical', 'inline'
+     */
+    layout: {
+      type: String,
+      default: "horizontal"
+    },
+    /**
+     * @zh 表单控件的尺寸
+     * @en The size of the form
+     * @values 'mini','small','medium','large'
+     * @defaultValue 'medium'
+     */
+    size: {
+      type: String
+    },
+    /**
+     * @zh 标签元素布局选项。参数同 `<col>` 组件一致
+     * @en Label element layout options. The parameters are the same as the `<col>` component
+     */
+    labelColProps: {
+      type: Object,
+      default: () => ({ span: 5, offset: 0 })
+    },
+    /**
+     * @zh 表单控件布局选项。参数同 `<col>` 组件一致
+     * @en Form control layout options. The parameters are the same as the `<col>` component
+     */
+    wrapperColProps: {
+      type: Object,
+      default: () => ({ span: 19, offset: 0 })
+    },
+    labelColStyle: Object,
+    wrapperColStyle: Object,
+    /**
+     * @zh 标签的对齐方向
+     * @en Alignment direction of the label
+     * @values 'left', 'right'
+     */
+    labelAlign: {
+      type: String,
+      default: "right"
+    },
+    /**
+     * @zh 是否禁用表单
+     * @en Whether to disable the form
+     */
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 表单项校验规则
+     * @en Form item validation rules
+     */
+    rules: {
+      type: Object
+    },
+    /**
+     * @zh 是否开启自动标签宽度，仅在 `layout="horizontal"` 下生效。
+     * @en Whether to enable automatic label width, it only takes effect under `layout="horizontal"`.
+     * @version 2.13.0
+     */
+    autoLabelWidth: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 表单控件 `id` 的前缀
+     */
+    id: {
+      type: String
+    },
+    /**
+     * @zh 验证失败后滚动到第一个错误字段
+     * @en Scroll to the first error field after verification fails
+     * @version 2.51.0
+     */
+    scrollToFirstError: {
+      type: [Boolean, Object],
+      default: !1
+    }
+  },
+  emits: {
+    /**
+     * @zh 表单提交时触发
+     * @en Triggered when the form is submitted
+     * @param {{values: Record<string, any>; errors: Record<string, ValidatedError> | undefined}} data
+     * @param {Event} ev
+     */
+    submit: (l, n) => !0,
+    /**
+     * @zh 验证成功时触发
+     * @en Triggered when verification is successful
+     * @param {Record<string, any>} values
+     * @param {Event} ev
+     */
+    submitSuccess: (l, n) => !0,
+    /**
+     * @zh 验证失败时触发
+     * @en Triggered when verification failed
+     * @param {{values: Record<string, any>; errors: Record<string, ValidatedError>}} data
+     * @param {Event} ev
+     */
+    submitFailed: (l, n) => !0
+  },
+  setup(l, { emit: n }) {
+    const f = ee("form"), v = U(), {
+      id: j,
+      model: u,
+      layout: g,
+      disabled: C,
+      labelAlign: O,
+      labelColProps: T,
+      wrapperColProps: V,
+      labelColStyle: z,
+      wrapperColStyle: W,
+      size: x,
+      rules: L
+    } = D(l), { mergedSize: F } = Z(x), P = m(() => l.layout === "horizontal" && l.autoLabelWidth), a = [];
+    let d = 0;
+    G(u, () => {
+      d++;
+    }, { deep: !0, flush: "sync" }), H(() => {
+      d++;
+    });
+    const h = E({}), w = m(() => Math.max(0, ...Object.values(h))), A = (e) => {
+      e && e.field && !a.includes(e) && (d++, a.push(e));
+    }, B = (e) => {
+      if (e) {
+        const t = a.indexOf(e);
+        t > -1 && (d++, a.splice(t, 1));
+      }
+    }, R = (e) => {
+      d++, a.forEach((t) => {
+        e[t.field] && t.setField(e[t.field]);
+      });
+    }, _ = (e, t) => {
+      t && h[t] !== e && (h[t] = e);
+    }, k = (e) => {
+      e && delete h[e];
+    }, M = (e) => {
+      d++;
+      const t = e ? [].concat(e) : [];
+      a.forEach((r) => {
+        (t.length === 0 || t.includes(r.field)) && r.resetField();
+      });
+    }, N = (e) => {
+      d++;
+      const t = e ? [].concat(e) : [];
+      a.forEach((r) => {
+        (t.length === 0 || t.includes(r.field)) && r.clearValidate();
+      });
+    }, y = (e, t) => {
+      var o;
+      const r = I(l.id, e), i = Array.from(((o = v.value) == null ? void 0 : o.querySelectorAll("[id]")) ?? []).find((s) => s.id === r);
+      i && Q(i, {
+        // @ts-ignore
+        behavior: "smooth",
+        block: "nearest",
+        scrollMode: "if-needed",
+        ...t
+      });
+    }, b = (e) => {
+      const t = typeof l.scrollToFirstError == "object" ? l.scrollToFirstError : void 0;
+      y(e, t);
+    }, q = (e) => {
+      const t = [];
+      return a.forEach((r) => {
+        t.push(r.validate());
+      }), Promise.all(t).then((r) => {
+        const i = {};
+        let o = !1;
+        return r.forEach((s) => {
+          s && (o = !0, i[s.field] = s);
+        }), o && l.scrollToFirstError && b(Object.keys(i)[0]), S(e) && e(o ? i : void 0), o ? i : void 0;
+      });
+    }, p = (e, t) => {
+      const r = [];
+      for (const i of a)
+        (Y(e) && e.includes(i.field) || e === i.field) && r.push(i.validate());
+      return Promise.all(r).then((i) => {
+        const o = {};
+        let s = !1;
+        return i.forEach((c) => {
+          c && (s = !0, o[c.field] = c);
+        }), s && l.scrollToFirstError && b(Object.keys(o)[0]), S(t) && t(s ? o : void 0), s ? o : void 0;
+      });
+    }, $ = (e) => {
+      const t = ++d, r = [];
+      a.forEach((i) => {
+        r.push(i.validate());
+      }), Promise.all(r).then((i) => {
+        if (t !== d)
+          return;
+        const o = {};
+        let s = !1;
+        i.forEach((c) => {
+          c && (s = !0, o[c.field] = c);
+        }), s ? (l.scrollToFirstError && b(Object.keys(o)[0]), n("submitFailed", { values: u.value, errors: o }, e)) : n("submitSuccess", u.value, e), n("submit", { values: u.value, errors: s ? o : void 0 }, e);
+      });
+    };
+    return J(
+      X,
+      E({
+        id: j,
+        layout: g,
+        disabled: C,
+        labelAlign: O,
+        labelColProps: T,
+        wrapperColProps: V,
+        labelColStyle: z,
+        wrapperColStyle: W,
+        model: u,
+        size: F,
+        rules: L,
+        fields: a,
+        addField: A,
+        removeField: B,
+        validateField: p,
+        setLabelWidth: _,
+        removeLabelWidth: k,
+        maxLabelWidth: w,
+        autoLabelWidth: P
+      })
+    ), {
+      cls: m(() => [
+        f.block,
+        f.modifier(`layout-${l.layout}`),
+        f.modifier(`size-${F.value}`),
+        {
+          [f.modifier("auto-label-width")]: l.autoLabelWidth
+        }
+      ]),
+      formRef: v,
+      handleSubmit: $,
+      innerValidate: q,
+      innerValidateField: p,
+      innerResetFields: M,
+      innerClearValidate: N,
+      innerSetFields: R,
+      innerScrollToField: y
+    };
+  },
+  methods: {
+    /**
+     * @zh 校验全部表单数据
+     * @en Verify all form data
+     * @public
+     * @param {(errors: undefined | Record<string, ValidatedError>) => void} callback
+     * @returns {Promise<undefined | Record<string, ValidatedError>>}
+     */
+    validate(l) {
+      return this.innerValidate(l);
+    },
+    /**
+     * @zh 校验部分表单数据
+     * @en Validate part of the form data
+     * @public
+     * @param {string | string[]} field
+     * @param {(errors: undefined | Record<string, ValidatedError>) => void} callback
+     * @returns {Promise<undefined | Record<string, ValidatedError>>}
+     */
+    validateField(l, n) {
+      return this.innerValidateField(l, n);
+    },
+    /**
+     * @zh 重置表单数据
+     * @en Reset form data
+     * @public
+     * @param {string | string[]} field
+     */
+    resetFields(l) {
+      return this.innerResetFields(l);
+    },
+    /**
+     * @zh 清除校验状态
+     * @en Clear verification status
+     * @public
+     * @param {string | string[]} field
+     */
+    clearValidate(l) {
+      return this.innerClearValidate(l);
+    },
+    /**
+     * @zh 设置表单项的值和状态
+     * @en Set the value and status of the form item
+     * @param {Record<string, FieldData>} data
+     * @public
+     */
+    setFields(l) {
+      return this.innerSetFields(l);
+    },
+    /**
+     * @zh 滚动到指定表单项
+     * @en Scroll to the specified form item
+     * @param {string} field
+     * @param {ScrollIntoViewOptions} options
+     * @public
+     * @version 2.51.0
+     */
+    scrollToField(l, n) {
+      return this.innerScrollToField(l, n);
+    }
+  }
+});
+export {
+  de as default
+};

package/dist/es/components/form/FormItem.vue.js

@@ -0,0 +1,97 @@
+import b from "./FormItem.vue2.js";
+import { resolveComponent as l, renderSlot as o, openBlock as a, createBlock as t, mergeProps as n, withCtx as s, createVNode as p, createTextVNode as d, toDisplayString as h, createCommentVNode as r, createElementVNode as f, normalizeClass as i, createSlots as g, createElementBlock as k } from "vue";
+import $ from "../../_virtual/_plugin-vue_export-helper.js";
+const w = ["id"];
+function N(e, L, v, F, I, S) {
+  const u = l("FormItemLabel"), m = l("XCol"), y = l("FormItemMessage"), C = l("XRow");
+  return e.noStyle ? o(e.$slots, "default", { key: 0 }) : (a(), t(C, n({
+    key: 1,
+    class: [
+      e.cls,
+      {
+        [e.className.modifier("has-help")]: !!(e.$slots.help ?? e.help),
+        [e.className.modifier("has-message")]: !!(e.isError && e.finalMessage.length)
+      }
+    ],
+    wrap: !(e.labelColFlex || e.autoLabelWidth),
+    div: e.layout !== "horizontal" || e.hideLabel
+  }, e.rowProps), {
+    default: s(() => [
+      e.hideLabel ? r("", !0) : (a(), t(m, n({
+        key: 0,
+        class: e.labelColCls,
+        style: e.mergedLabelStyle
+      }, e.mergedLabelCol), {
+        default: s(() => [
+          p(u, {
+            required: e.hideAsterisk ? !1 : e.isRequired,
+            "show-colon": e.showColon,
+            "asterisk-position": e.asteriskPosition,
+            component: e.labelComponent,
+            attrs: e.mergedLabelAttrs,
+            tooltip: e.tooltip
+          }, {
+            default: s(() => [
+              e.$slots.label || e.label ? o(e.$slots, "label", { key: 0 }, () => [
+                d(h(e.label), 1)
+              ]) : r("", !0)
+            ]),
+            _: 3
+          }, 8, ["required", "show-colon", "asterisk-position", "component", "attrs", "tooltip"])
+        ]),
+        _: 3
+      }, 16, ["class", "style"])),
+      p(m, n({
+        class: e.wrapperColCls,
+        style: e.mergedWrapperStyle
+      }, e.mergedWrapperCol), {
+        default: s(() => [
+          f("div", {
+            class: i(e.className.element("content-wrapper"))
+          }, [
+            f("div", {
+              class: i([
+                e.className.element("content"),
+                {
+                  [e.className.element("content-flex")]: e.contentFlex
+                },
+                e.contentClass
+              ])
+            }, [
+              o(e.$slots, "default")
+            ], 2)
+          ], 2),
+          e.isError || e.$slots.help || e.help ? (a(), t(y, {
+            key: 0,
+            id: e.messageId,
+            error: e.finalMessage,
+            help: e.help
+          }, g({ _: 2 }, [
+            e.$slots.help ? {
+              name: "help",
+              fn: s(() => [
+                o(e.$slots, "help")
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["id", "error", "help"])) : r("", !0),
+          e.$slots.extra || e.extra ? (a(), k("div", {
+            key: 1,
+            id: e.extraId,
+            class: i(e.className.modifier("extra"))
+          }, [
+            o(e.$slots, "extra", {}, () => [
+              d(h(e.extra), 1)
+            ])
+          ], 10, w)) : r("", !0)
+        ]),
+        _: 3
+      }, 16, ["class", "style"])
+    ]),
+    _: 3
+  }, 16, ["class", "wrap", "div"]));
+}
+const V = /* @__PURE__ */ $(b, [["render", N]]);
+export {
+  V as default
+};