x-next 1.0.1 → 1.1.0

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

@@ -0,0 +1,409 @@
+import { defineComponent as te, toRefs as A, inject as W, computed as o, ref as F, reactive as g, nextTick as C, provide as ae, toRef as oe, onMounted as se, onBeforeUnmount as ie, watch as re } from "vue";
+import { Schema as ne } from "../../node_modules/.pnpm/b-validate@1.5.3/node_modules/b-validate/es/index.js";
+import { formInjectionKey as ue, formItemInjectionKey as E } from "./context.js";
+import { Col as de, Row as ce } from "../grid/index.js";
+import fe from "./form-item-label.vue.js";
+import me from "./form-item-message.vue.js";
+import { getValueByPath as h, setValueByPath as x } from "../../_utils/get-value-by-path.js";
+import { getFormElementId as ve, getFinalValidateStatus as be, getFinalValidateMessage as ge } from "./utils.js";
+import { getClassNameMixin as ye } from "../../_utils/config.js";
+import { useLocale as pe } from "../../locale/index.js";
+import { deepClone as w } from "../../_utils/helpers.js";
+const Ve = te({
+  name: "FormItem",
+  components: {
+    XRow: ce,
+    XCol: de,
+    FormItemLabel: fe,
+    FormItemMessage: me
+  },
+  props: {
+    /**
+     * @zh 表单元素在数据对象中的path（数据项必填）
+     * @en The path of the form element in the data object (required for the data item)
+     */
+    field: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @zh 标签的文本
+     * @en Label text
+     */
+    label: String,
+    /**
+     * @zh 提示内容
+     * @en Tooltip text
+     * @version 2.41.0
+     */
+    tooltip: {
+      type: String
+    },
+    /**
+     * @zh 是否显示冒号
+     * @en Whether to show a colon
+     */
+    showColon: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否去除样式
+     * @en Whether to remove the style
+     */
+    noStyle: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 帮助文案
+     * @en Help copywriting
+     */
+    help: String,
+    /**
+     * @zh 额外显示的文案
+     * @en Additional display copy
+     */
+    extra: String,
+    /**
+     * @zh 是否必须填写
+     * @en Is it required
+     */
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 可选择将星号置于 label 前/后
+     * @en Optionally place an asterisk before/after the label
+     * @values 'start', 'end'
+     * @version 2.41.0
+     */
+    asteriskPosition: {
+      type: String,
+      default: "start"
+    },
+    /**
+     * @zh 表单项校验规则（优先级高于 form 的 rules）
+     * @en Form item validation rules (The priority is higher than the rules of form)
+     */
+    rules: {
+      type: [Object, Array]
+    },
+    /**
+     * @zh 校验状态
+     * @en Validate status
+     * @values 'success', 'warning', 'error', 'validating'
+     */
+    validateStatus: {
+      type: String
+    },
+    /**
+     * @zh 触发校验的事件
+     * @en The event that triggers the verification
+     * @values 'change', 'input', 'focus', 'blur'
+     */
+    validateTrigger: {
+      type: [String, Array],
+      default: "change"
+    },
+    /**
+     * @zh 标签元素布局选项。参数同 `<col>` 组件一致
+     * @en Label element layout options. The parameters are the same as the `<col>` component
+     */
+    labelColProps: Object,
+    /**
+     * @zh 表单控件布局选项。参数同 `<col>` 组件一致
+     * @en Form control layout options. The parameters are the same as the `<col>` component
+     */
+    wrapperColProps: Object,
+    /**
+     * @zh 是否隐藏标签
+     * @en Whether to hide the label
+     */
+    hideLabel: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否隐藏星号
+     * @en Whether to hide the asterisk
+     */
+    hideAsterisk: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 标签元素布局组件的 style
+     * @en The style of the label element layout component
+     * @version 2.10.0
+     */
+    labelColStyle: Object,
+    /**
+     * @zh 表单控件布局组件的 style
+     * @en The style of the form control layout component
+     * @version 2.10.0
+     */
+    wrapperColStyle: Object,
+    /**
+     * @zh 表单项布局选项。参数同 `<row>` 组件一致
+     * @en Form item layout options. The parameters are the same as the `<row>` component
+     * @version 2.10.0
+     */
+    rowProps: Object,
+    /**
+     * @zh 表单项布局组件的 class
+     * @en The class of the form item layout component
+     * @version 2.10.0
+     */
+    rowClass: [String, Array, Object],
+    /**
+     * @zh 表单控件包裹层的 class
+     * @en The class of the form control wrapping layer
+     * @version 2.10.0
+     */
+    contentClass: [String, Array, Object],
+    /**
+     * @zh 内容层是否开启 flex 布局
+     * @en Whether to enable flex layout in the content layer
+     * @version 2.13.0
+     */
+    contentFlex: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 设置标签 `Col` 组件的 flex 属性。设置时表单 `Col` 组件的 flex 属性会被设置为 `auto`。
+     * @en Set the flex property of the label `Col` component. When set, the flex property of the form `Col` component will be set to `auto`.
+     * @version 2.13.0
+     */
+    labelColFlex: {
+      type: [Number, String]
+    },
+    /**
+     * @zh 是否显示表单控件的反馈图标
+     * @en Whether to show the feedback icon for the form control
+     * @version 2.16.0
+     */
+    feedback: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 表单项标签渲染的元素
+     * @en The element that the form item label renders
+     * @version 2.22.0
+     */
+    labelComponent: {
+      type: String,
+      default: "label"
+    },
+    /**
+     * @zh 表单项元素的属性
+     * @en Attributes of the form item element
+     * @version 2.22.0
+     */
+    labelAttrs: Object
+  },
+  /**
+   * @zh 标签
+   * @en Label
+   * @slot label
+   */
+  /**
+   * @zh 帮助信息
+   * @en Help message
+   * @slot help
+   */
+  /**
+   * @zh 额外内容
+   * @en Extra content
+   * @slot extra
+   */
+  setup(t) {
+    const i = ye("form--item"), { field: s } = A(t), l = W(ue, {}), { autoLabelWidth: T, layout: _ } = A(l), { locale: N } = pe(), $ = o(() => {
+      const e = { ...t.labelColProps ?? l.labelColProps };
+      return t.labelColFlex ? e.flex = t.labelColFlex : l.autoLabelWidth && (e.flex = `${l.maxLabelWidth}px`), e;
+    }), B = o(() => {
+      const e = {
+        ...t.wrapperColProps ?? l.wrapperColProps
+      };
+      return s.value && (e.id = ve(l.id, s.value)), (t.labelColFlex || l.autoLabelWidth) && (e.flex = "auto"), e;
+    }), z = o(() => t.labelColStyle ?? l.labelColStyle), D = o(() => t.wrapperColStyle ?? l.wrapperColStyle), P = F(w(h(l.model, t.field))), j = g({}), R = g({}), L = o(() => be(j)), K = o(() => ge(R)), c = F(!1), X = o(() => h(l.model, t.field)), q = o(() => !!(t.disabled ?? (l == null ? void 0 : l.disabled))), f = o(() => t.validateStatus ?? L.value), v = o(() => f.value === "error"), I = o(() => {
+      var n;
+      const e = [].concat(
+        t.rules ?? ((n = l == null ? void 0 : l.rules) == null ? void 0 : n[t.field]) ?? []
+      ), a = e.some((S) => S.required);
+      return t.required && !a ? [{ required: !0 }].concat(e) : e;
+    }), H = o(() => I.value.some((e) => e.required)), y = t.noStyle ? W(E, void 0) : void 0, u = (e, { status: a, message: n }) => {
+      j[e] = a, R[e] = n, t.noStyle && (y == null || y.updateValidateState(e, { status: a, message: n }));
+    }, U = o(
+      () => t.feedback && f.value ? f.value : void 0
+    ), m = () => {
+      if (c.value)
+        return Promise.resolve();
+      const e = I.value;
+      if (!s.value || e.length === 0)
+        return L.value && p(), Promise.resolve();
+      const a = s.value, n = X.value;
+      u(a, {
+        status: "",
+        message: ""
+      });
+      const S = new ne(
+        {
+          [a]: e.map(({ ...d }) => (!d.type && !d.validator && (d.type = "string"), d))
+        },
+        {
+          ignoreEmptyString: !0,
+          validateMessages: N.value.validateMessages
+        }
+      );
+      return new Promise((d) => {
+        S.validate({ [a]: n }, (r) => {
+          const M = !!(r != null && r[a]);
+          u(a, {
+            status: M ? "error" : "",
+            message: (r == null ? void 0 : r[a].message) ?? ""
+          });
+          const le = M ? {
+            label: t.label,
+            field: s.value,
+            value: r[a].value,
+            type: r[a].type,
+            isRequiredError: !!r[a].requiredError,
+            message: r[a].message
+          } : void 0;
+          d(le);
+        });
+      });
+    }, G = o(
+      () => [].concat(t.validateTrigger)
+    ), J = o(
+      () => G.value.reduce((e, a) => {
+        switch (a) {
+          case "change":
+            return e.onChange = () => {
+              m();
+            }, e;
+          case "input":
+            return e.onInput = () => {
+              C(() => {
+                m();
+              });
+            }, e;
+          case "focus":
+            return e.onFocus = () => {
+              m();
+            }, e;
+          case "blur":
+            return e.onBlur = () => {
+              m();
+            }, e;
+          default:
+            return e;
+        }
+      }, {})
+    );
+    ae(
+      E,
+      g({
+        eventHandlers: J,
+        size: l && oe(l, "size"),
+        disabled: q,
+        error: v,
+        feedback: U,
+        updateValidateState: u
+      })
+    );
+    const p = () => {
+      s.value && u(s.value, {
+        status: "",
+        message: ""
+      });
+    }, Q = (e) => {
+      u(e, {
+        status: "",
+        message: ""
+      });
+    }, O = g({
+      field: s,
+      disabled: q,
+      error: v,
+      validate: m,
+      clearValidate: p,
+      resetField: () => {
+        p(), c.value = !0, l != null && l.model && s.value && x(l.model, s.value, w(P.value)), C(() => {
+          c.value = !1;
+        });
+      },
+      setField: (e) => {
+        s.value && (c.value = !0, "value" in e && (l != null && l.model) && s.value && x(l.model, s.value, e.value), ("status" in e || "message" in e) && u(s.value, {
+          status: e.status ?? "",
+          message: e.message ?? ""
+        }), C(() => {
+          c.value = !1;
+        }));
+      }
+    }), b = F(!1), V = () => {
+      var e;
+      s.value && !b.value && ((e = l.addField) == null || e.call(l, O), b.value = !0);
+    }, k = () => {
+      var e;
+      b.value && ((e = l.removeField) == null || e.call(l, O), b.value = !1);
+    };
+    se(() => {
+      V();
+    }), ie(() => {
+      k();
+    }), re(s, (e, a) => {
+      e !== a && (a && Q(a), P.value = w(h(l.model, e)), e ? V() : k());
+    });
+    const Y = o(() => [
+      i.block,
+      i.modifier(`layout-${l.layout}`),
+      {
+        [i.modifier("error")]: v.value,
+        [i.modifier(`status-${f.value}`)]: !!f.value
+      },
+      t.rowClass
+    ]), Z = o(() => [
+      i.element("label-col"),
+      {
+        [i.element("label-col-left")]: l.labelAlign === "left",
+        [i.element("label-col-flex")]: l.autoLabelWidth || t.labelColFlex
+      }
+    ]), ee = o(() => [
+      i.element("wrapper-col"),
+      {
+        [i.element("wrapper-col-flex")]: !B.value
+      }
+    ]);
+    return {
+      className: i,
+      cls: Y,
+      isRequired: H,
+      isError: v,
+      finalMessage: K,
+      mergedLabelCol: $,
+      mergedWrapperCol: B,
+      labelColCls: Z,
+      autoLabelWidth: T,
+      layout: _,
+      mergedLabelStyle: z,
+      wrapperColCls: ee,
+      mergedWrapperStyle: D
+    };
+  }
+});
+export {
+  Ve as default
+};

package/dist/es/components/form/context.js

@@ -0,0 +1,5 @@
+const o = Symbol("ArcoFormItemContext"), t = Symbol("ArcoFormContext");
+export {
+  t as formInjectionKey,
+  o as formItemInjectionKey
+};

package/dist/es/components/form/form-item-label.vue.js

@@ -0,0 +1,62 @@
+import u from "./form-item-label.vue2.js";
+import { resolveComponent as s, openBlock as o, createBlock as r, withCtx as a, resolveDynamicComponent as f, mergeProps as h, createElementBlock as m, normalizeClass as n, createElementVNode as t, createCommentVNode as i, renderSlot as v, createVNode as k, createTextVNode as g, toDisplayString as z } from "vue";
+import C from "../../_virtual/_plugin-vue_export-helper.js";
+function N(e, l, b, y, L, q) {
+  const c = s("icon-question-circle"), d = s("Tooltip"), p = s("ResizeObserver");
+  return o(), r(p, { onResize: e.handleResize }, {
+    default: a(() => [
+      (o(), r(f(e.component), h({
+        ref: "labelRef",
+        class: e.className.block
+      }, e.attrs), {
+        default: a(() => [
+          e.required && e.asteriskPosition === "start" ? (o(), m("strong", {
+            key: 0,
+            class: n(e.className.modifier("required-symbol"))
+          }, [...l[0] || (l[0] = [
+            t("svg", {
+              fill: "currentColor",
+              viewBox: "0 0 1024 1024",
+              width: "1em",
+              height: "1em"
+            }, [
+              t("path", { d: "M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z" })
+            ], -1)
+          ])], 2)) : i("", !0),
+          v(e.$slots, "default"),
+          e.tooltip ? (o(), r(d, {
+            key: 1,
+            content: e.tooltip
+          }, {
+            default: a(() => [
+              k(c, {
+                class: n(e.className.element("tooltip"))
+              }, null, 8, ["class"])
+            ]),
+            _: 1
+          }, 8, ["content"])) : i("", !0),
+          e.required && e.asteriskPosition === "end" ? (o(), m("strong", {
+            key: 2,
+            class: n(e.className.modifier("required-symbol"))
+          }, [...l[1] || (l[1] = [
+            t("svg", {
+              fill: "currentColor",
+              viewBox: "0 0 1024 1024",
+              width: "1em",
+              height: "1em"
+            }, [
+              t("path", { d: "M583.338667 17.066667c18.773333 0 34.133333 15.36 34.133333 34.133333v349.013333l313.344-101.888a34.133333 34.133333 0 0 1 43.008 22.016l42.154667 129.706667a34.133333 34.133333 0 0 1-21.845334 43.178667l-315.733333 102.4 208.896 287.744a34.133333 34.133333 0 0 1-7.509333 47.786666l-110.421334 80.213334a34.133333 34.133333 0 0 1-47.786666-7.509334L505.685333 706.218667 288.426667 1005.226667a34.133333 34.133333 0 0 1-47.786667 7.509333l-110.421333-80.213333a34.133333 34.133333 0 0 1-7.509334-47.786667l214.186667-295.253333L29.013333 489.813333a34.133333 34.133333 0 0 1-22.016-43.008l42.154667-129.877333a34.133333 34.133333 0 0 1 43.008-22.016l320.512 104.106667L412.672 51.2c0-18.773333 15.36-34.133333 34.133333-34.133333h136.533334z" })
+            ], -1)
+          ])], 2)) : i("", !0),
+          g(" " + z(e.showColon ? ":" : ""), 1)
+        ]),
+        _: 3
+      }, 16, ["class"]))
+    ]),
+    _: 3
+  }, 8, ["onResize"]);
+}
+const $ = /* @__PURE__ */ C(u, [["render", N]]);
+export {
+  $ as default
+};

package/dist/es/components/form/form-item-label.vue2.js

@@ -0,0 +1,54 @@
+import { defineComponent as s, inject as a, getCurrentInstance as n, ref as f, onMounted as m, onBeforeUnmount as u } from "vue";
+import p from "../../_container/resize-observer-v2.js";
+import { formInjectionKey as d } from "./context.js";
+import { isNumber as i } from "../../_utils/is.js";
+import { Tooltip as c } from "../tooltip/index.js";
+import b from "../../icons/_self/question-message.js";
+import { getClassNameMixin as h } from "../../_utils/config.js";
+const B = s({
+  name: "FormItemLabel",
+  components: {
+    ResizeObserver: p,
+    Tooltip: c,
+    IconQuestionCircle: b
+  },
+  props: {
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    showColon: {
+      type: Boolean,
+      default: !1
+    },
+    component: {
+      type: String,
+      default: "label"
+    },
+    asteriskPosition: {
+      type: String,
+      default: "start"
+    },
+    tooltip: {
+      type: String
+    },
+    attrs: Object
+  },
+  setup() {
+    const r = h("form--item--label"), e = a(d, void 0), t = n(), o = f(), l = () => {
+      o.value && i(o.value.offsetWidth) && (e == null || e.setLabelWidth(o.value.offsetWidth, t == null ? void 0 : t.uid));
+    };
+    return m(() => {
+      o.value && i(o.value.offsetWidth) && (e == null || e.setLabelWidth(o.value.offsetWidth, t == null ? void 0 : t.uid));
+    }), u(() => {
+      e == null || e.removeLabelWidth(t == null ? void 0 : t.uid);
+    }), {
+      className: r,
+      labelRef: o,
+      handleResize: l
+    };
+  }
+});
+export {
+  B as default
+};

package/dist/es/components/form/form-item-message.vue.js

@@ -0,0 +1,37 @@
+import p from "./form-item-message.vue2.js";
+import { openBlock as r, createElementBlock as i, Fragment as c, renderList as d, createBlock as a, Transition as l, withCtx as t, createElementVNode as s, normalizeClass as n, toDisplayString as m, renderSlot as f, createTextVNode as k, createCommentVNode as u } from "vue";
+import h from "../../_virtual/_plugin-vue_export-helper.js";
+function N(e, $, b, g, y, B) {
+  return e.error.length > 0 ? (r(!0), i(c, { key: 0 }, d(e.error, (o) => (r(), a(l, {
+    key: o,
+    name: "form-blink",
+    appear: ""
+  }, {
+    default: t(() => [
+      s("div", {
+        role: "alert",
+        class: n([e.className.block])
+      }, m(o), 3)
+    ]),
+    _: 2
+  }, 1024))), 128)) : e.help || e.$slots.help ? (r(), a(l, {
+    key: 1,
+    name: "form-blink",
+    appear: ""
+  }, {
+    default: t(() => [
+      s("div", {
+        class: n([e.className.block, e.className.modifier("help")])
+      }, [
+        f(e.$slots, "help", {}, () => [
+          k(m(e.help), 1)
+        ])
+      ], 2)
+    ]),
+    _: 3
+  })) : u("", !0);
+}
+const E = /* @__PURE__ */ h(p, [["render", N]]);
+export {
+  E as default
+};

package/dist/es/components/form/form-item-message.vue2.js

@@ -0,0 +1,20 @@
+import { defineComponent as e } from "vue";
+import { getClassNameMixin as r } from "../../_utils/config.js";
+const a = e({
+  name: "FormItemMessage",
+  props: {
+    error: {
+      type: Array,
+      default: () => []
+    },
+    help: String
+  },
+  setup() {
+    return {
+      className: r("form--item--message")
+    };
+  }
+});
+export {
+  a as default
+};

package/dist/es/components/form/index.js

@@ -0,0 +1,10 @@
+import r from "./Form.vue.js";
+import t from "./FormItem.vue.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as m } from "../../_utils/config.js";
+const F = o(m("Form"), r), i = o(m("FormItem"), t);
+export {
+  F as Form,
+  i as FormItem,
+  F as default
+};

package/dist/es/components/form/interface.js

@@ -0,0 +1,4 @@
+const r = ["success", "warning", "error", "validating"];
+export {
+  r as VALIDATE_STATUSES
+};

package/dist/es/components/form/utils.js

@@ -0,0 +1,24 @@
+import { VALIDATE_STATUSES as o } from "./interface.js";
+const r = (e) => {
+  let t = "";
+  for (const s of Object.keys(e)) {
+    const n = e[s];
+    n && (!t || o.indexOf(n) > o.indexOf(t)) && (t = e[s]);
+  }
+  return t;
+}, f = (e) => {
+  const t = [];
+  for (const s of Object.keys(e)) {
+    const n = e[s];
+    n && t.push(n);
+  }
+  return t;
+}, g = (e, t) => {
+  const s = t.replace(/[[.]/g, "_").replace(/\]/g, "");
+  return e ? `${e}-${s}` : `${s}`;
+};
+export {
+  f as getFinalValidateMessage,
+  r as getFinalValidateStatus,
+  g as getFormElementId
+};