@transsionfe/semi-ui-vue 0.0.6 → 0.0.7

package/lib/es/components/form/FieldWrapper.vue.js

@@ -1,335 +0,0 @@
-import { defineComponent as Qe, ref as q, computed as x, watch as Ye, onMounted as Ze, onUnmounted as et, unref as t, openBlock as o, createElementBlock as s, normalizeStyle as tt, normalizeClass as h, Fragment as $, createVNode as he, mergeProps as y, withCtx as K, createBlock as n, normalizeProps as c, createCommentVNode as f, guardReactiveProps as Q, createElementVNode as ke, isVNode as A, resolveDynamicComponent as M, createTextVNode as U, toDisplayString as L, renderSlot as Y } from "vue";
-import Z from "classnames";
-import { isEqual as Ve } from "lodash";
-import { cssClasses as lt } from "@douyinfe/semi-foundation/form/constants";
-import { mergeProps as ot, transformTrigger as at, isValid as rt, generateValidatesFromRules as it } from "@douyinfe/semi-foundation/form/utils";
-import st from "@douyinfe/semi-foundation/utils/isPromise";
-import Ce from "@douyinfe/semi-foundation/utils/warning";
-import { useFormId as nt } from "./context.js";
-import Se from "./ErrorMessage.vue.js";
-import ee from "./Label.vue.js";
-import te from "../grid/Col.vue.js";
-import "../grid/grid.css";
-import dt from "./hooks/useFormUpdater.js";
-import ut from "./hooks/useArrayFieldState.js";
-import R from "./hooks/useStateWithGetter.js";
-import pt from "./hooks/useFormState.js";
-const ct = ["data-field", "x-field-id", "x-label-pos"], ft = {
-  key: 0,
-  style: { overflow: "hidden" }
-}, _t = /* @__PURE__ */ Qe({
-  name: "SemiFormFieldWrapper",
-  inheritAttrs: !1,
-  __name: "FieldWrapper",
-  props: {
-    field: {},
-    label: {},
-    labelPosition: {},
-    labelAlign: {},
-    labelWidth: {},
-    noLabel: { type: Boolean },
-    noErrorMessage: { type: Boolean },
-    name: {},
-    fieldClassName: {},
-    fieldStyle: {},
-    initValue: {},
-    validate: { type: Function },
-    rules: {},
-    trigger: {},
-    transform: { type: Function },
-    convert: { type: Function },
-    allowEmptyString: { type: Boolean },
-    stopValidateWithError: { type: Boolean },
-    helpText: {},
-    extraText: {},
-    extraTextPosition: {},
-    defaultValue: {},
-    pure: { type: Boolean },
-    labelCol: {},
-    wrapperCol: {},
-    isInInputGroup: { type: Boolean },
-    validateStatus: {},
-    keepState: { type: Boolean },
-    emptyValue: {},
-    allowEmpty: { type: Boolean },
-    required: { type: Boolean },
-    id: {}
-  },
-  setup(Pe) {
-    const $e = Pe, d = lt.PREFIX, le = nt(), Fe = ot($e), {
-      field: l,
-      label: i,
-      labelPosition: Te,
-      labelWidth: Ee,
-      labelAlign: _e,
-      labelCol: we,
-      wrapperCol: Be,
-      noLabel: j,
-      noErrorMessage: oe,
-      isInInputGroup: Ie,
-      initValue: k,
-      validate: ae,
-      validateStatus: F,
-      trigger: Ne,
-      allowEmptyString: We,
-      allowEmpty: qe,
-      rules: z,
-      required: re,
-      keepState: Ae,
-      transform: ie,
-      name: se,
-      fieldClassName: Me,
-      fieldStyle: Ue,
-      convert: ne,
-      helpText: Le,
-      extraText: r,
-      extraTextPosition: Re,
-      pure: je,
-      id: ze
-    } = Fe;
-    Ce(typeof l > "u", "[Semi Form]: 'field' is required, please check your props of Field Component");
-    const m = dt();
-    m.getFormProps || Ce(!0, "[Semi Form]: Field Component must be used inside the Form, please check your dom declaration");
-    const u = m.getFormProps([
-      "labelPosition",
-      "labelWidth",
-      "labelAlign",
-      "labelCol",
-      "wrapperCol",
-      "disabled",
-      "showValidateIcon",
-      "extraTextPosition",
-      "stopValidateWithError",
-      "trigger"
-    ]), de = Te || u.labelPosition, Ge = Ee || u.labelWidth, ue = _e || u.labelAlign, T = we || u.labelCol, pe = Be || u.wrapperCol, V = Re || u.extraTextPosition || "bottom", C = at(Ne, u.trigger), ce = typeof l < "u" ? m.getValue(l) : void 0;
-    let G = typeof k < "u" ? k : ce;
-    try {
-      const e = ut();
-      e != null && e.shouldUseInitValue && typeof k < "u" && (G = k);
-    } catch {
-    }
-    const [g, fe, me] = R(typeof G < "u" ? G : null), [E, Oe] = R(void 0), [ve, De] = R(!1), [_, w] = R(F), O = q(!1), Xe = x(() => C.includes("mount")), He = qe || We, D = pt(), ye = q(!1), B = q(!1), ge = q(void 0);
-    Ye(
-      () => {
-        var e;
-        return (e = D == null ? void 0 : D.values) == null ? void 0 : e[l];
-      },
-      (e) => {
-        if (l && ye.value && !B.value && e !== void 0) {
-          const a = g.value, p = ge.value;
-          if (Ve(e, a) || Ve(e, p))
-            return;
-          B.value = !0, ge.value = e, fe(e), Promise.resolve().then(() => {
-            B.value = !1;
-          });
-        }
-      },
-      { deep: !0 }
-    );
-    const S = (e, a) => {
-      const p = ie ? ie(e) : e, v = ne ? ne(p) : p;
-      fe(v), typeof l < "u" && !B.value && m.updateStateValue(l, v, a);
-    }, X = (e, a) => {
-      Oe(e), typeof l < "u" && m.updateStateError(l, e, a);
-    }, I = (e, a) => {
-      De(e), typeof l < "u" && m.updateStateTouched(l, e, a);
-    }, b = async (e = g.value) => {
-      var p, v;
-      if (O.value)
-        return;
-      let a;
-      if (z && z.length) {
-        const P = it(l || "", z);
-        try {
-          await P.validate({ [l || ""]: e });
-        } catch (W) {
-          a = ((v = (p = W.errors) == null ? void 0 : p[0]) == null ? void 0 : v.message) || W.message;
-        }
-      }
-      if (ae && !a) {
-        const P = ae(e);
-        if (st(P))
-          try {
-            await P;
-          } catch (W) {
-            a = W;
-          }
-        else P !== !0 && (a = P);
-      }
-      return X(a), I(!0), w(a ? "error" : F || "success"), a;
-    }, Je = {
-      getValue: me,
-      setValue: S,
-      getError: () => E.value,
-      setError: X,
-      getTouched: () => ve.value,
-      setTouched: I,
-      getStatus: () => _.value,
-      setStatus: w,
-      reset: () => {
-        S(typeof k < "u" ? k : ce, { notNotify: !0 }), X(void 0, { notNotify: !0 }), I(!1, { notNotify: !0 }), w(F);
-      },
-      validate: b
-    };
-    Ze(() => {
-      if (O.value = !1, Xe.value && b(g.value), typeof l > "u")
-        return;
-      const e = me();
-      m.register(
-        l,
-        {
-          value: e,
-          error: E.value,
-          touched: ve.value,
-          status: _.value
-        },
-        {
-          field: l,
-          fieldApi: Je,
-          keepState: Ae || !1,
-          allowEmpty: He
-        }
-      ), ye.value = !0;
-    }), et(() => {
-      O.value = !0, typeof l < "u" && m.unRegister(l);
-    });
-    const H = x(() => ({
-      modelValue: g.value,
-      "onUpdate:modelValue": (e) => {
-        S(e), C.includes("change") && b(e);
-      },
-      value: g.value,
-      "onUpdate:value": (e) => {
-        S(e), C.includes("change") && b(e);
-      },
-      checked: g.value,
-      "onUpdate:checked": (e) => {
-        S(e), C.includes("change") && b(e);
-      },
-      onChange: (e) => {
-        S(e), C.includes("change") && b(e);
-      },
-      onBlur: () => {
-        I(!0), C.includes("blur") && b(g.value);
-      },
-      validateStatus: _.value || F,
-      disabled: u.disabled,
-      "aria-required": re,
-      "aria-labelledby": l ? `${l}-label` : void 0,
-      name: se || l,
-      id: ze || (l && le ? `${le}-${l}` : l)
-    })), Ke = x(
-      () => Z(`${d}-field`, Me, {
-        [`${d}-field-error`]: !rt(E.value)
-      })
-    ), be = x(() => Z(T ? `${d}-col-${ue}` : "")), J = x(() => {
-      const e = typeof i == "object" && i !== null ? i.text : i, a = typeof i == "object" && i !== null ? i.extra : void 0, p = typeof i == "object" && i !== null ? i.optional : void 0, v = typeof i == "object" && i !== null ? i.required : void 0;
-      return {
-        text: e || l,
-        align: ue,
-        width: Ge,
-        required: v !== void 0 ? v : re,
-        optional: p,
-        extra: a,
-        name: se || l,
-        id: l ? `${l}-label` : void 0
-      };
-    }), xe = x(() => ({
-      error: E.value,
-      showValidateIcon: u.showValidateIcon,
-      validateStatus: _.value,
-      helpText: Le,
-      isInInputGroup: Ie,
-      errorMessageId: l ? `${l}-error-message` : void 0,
-      helpTextId: l ? `${l}-help-text` : void 0
-    })), N = x(
-      () => Z(`${d}-field-extra`, {
-        [`${d}-field-extra-string`]: typeof r == "string",
-        [`${d}-field-extra-middle`]: V === "middle",
-        [`${d}-field-extra-bottom`]: V === "bottom"
-      })
-    );
-    return (e, a) => t(je) ? Y(e.$slots, "default", c(y({ key: 1 }, H.value))) : (o(), s("div", {
-      key: 0,
-      class: h(Ke.value),
-      style: tt(t(Ue)),
-      "data-field": t(l),
-      "x-field-id": t(l),
-      "x-label-pos": t(de)
-    }, [
-      t(T) && t(pe) ? (o(), s($, { key: 0 }, [
-        t(de) === "top" ? (o(), s("div", ft, [
-          he(t(te), y(t(T), { class: be.value }), {
-            default: K(() => [
-              t(j) ? f("", !0) : (o(), n(ee, c(y({ key: 0 }, J.value)), null, 16))
-            ]),
-            _: 1
-          }, 16, ["class"])
-        ])) : (o(), n(t(te), y({ key: 1 }, t(T), { class: be.value }), {
-          default: K(() => [
-            t(j) ? f("", !0) : (o(), n(ee, c(y({ key: 0 }, J.value)), null, 16))
-          ]),
-          _: 1
-        }, 16, ["class"])),
-        he(t(te), c(Q(t(pe))), {
-          default: K(() => [
-            ke("div", {
-              class: h(`${t(d)}-field-main`)
-            }, [
-              t(r) && t(V) === "middle" ? (o(), s("div", {
-                key: 0,
-                class: h(N.value),
-                "x-semi-prop": "extraText"
-              }, [
-                A(t(r)) ? (o(), n(M(t(r)), { key: 0 })) : (o(), s($, { key: 1 }, [
-                  U(L(t(r)), 1)
-                ], 64))
-              ], 2)) : f("", !0),
-              Y(e.$slots, "default", c(Q(H.value))),
-              t(oe) ? f("", !0) : (o(), n(Se, c(y({ key: 1 }, xe.value)), null, 16)),
-              t(r) && t(V) === "bottom" ? (o(), s("div", {
-                key: 2,
-                class: h(N.value),
-                "x-semi-prop": "extraText"
-              }, [
-                A(t(r)) ? (o(), n(M(t(r)), { key: 0 })) : (o(), s($, { key: 1 }, [
-                  U(L(t(r)), 1)
-                ], 64))
-              ], 2)) : f("", !0)
-            ], 2)
-          ]),
-          _: 3
-        }, 16)
-      ], 64)) : (o(), s($, { key: 1 }, [
-        t(j) ? f("", !0) : (o(), n(ee, c(y({ key: 0 }, J.value)), null, 16)),
-        ke("div", {
-          class: h(`${t(d)}-field-main`)
-        }, [
-          t(r) && t(V) === "middle" ? (o(), s("div", {
-            key: 0,
-            class: h(N.value),
-            "x-semi-prop": "extraText"
-          }, [
-            A(t(r)) ? (o(), n(M(t(r)), { key: 0 })) : (o(), s($, { key: 1 }, [
-              U(L(t(r)), 1)
-            ], 64))
-          ], 2)) : f("", !0),
-          Y(e.$slots, "default", c(Q(H.value))),
-          t(oe) ? f("", !0) : (o(), n(Se, c(y({ key: 1 }, xe.value)), null, 16)),
-          t(r) && t(V) === "bottom" ? (o(), s("div", {
-            key: 2,
-            class: h(N.value),
-            "x-semi-prop": "extraText"
-          }, [
-            A(t(r)) ? (o(), n(M(t(r)), { key: 0 })) : (o(), s($, { key: 1 }, [
-              U(L(t(r)), 1)
-            ], 64))
-          ], 2)) : f("", !0)
-        ], 2)
-      ], 64))
-    ], 14, ct));
-  }
-});
-export {
-  _t as default
-};

package/lib/es/components/form/Form.vue.js

@@ -1,276 +0,0 @@
-import { defineComponent as M, useModel as Z, ref as d, shallowRef as _, computed as c, provide as b, watch as ee, onMounted as te, nextTick as C, onUnmounted as oe, openBlock as p, createBlock as S, unref as x, withCtx as re, createElementVNode as ne, mergeProps as v, withModifiers as U, renderSlot as N, normalizeProps as A, resolveDynamicComponent as D, createCommentVNode as K, createElementBlock as le, mergeModels as O } from "vue";
-import ae from "classnames";
-import { cssClasses as ie } from "@douyinfe/semi-foundation/form/constants";
-import { getUuidv4 as q } from "@douyinfe/semi-foundation/utils/uuid";
-import { cloneDeep as E, isEqual as W } from "lodash";
-import ue from "@douyinfe/semi-foundation/form/foundation";
-import { useFoundation as se } from "../../_utils/useFoundation.js";
-import { useBaseComponent as fe } from "../_utils/useBaseComponent.js";
-import { FormStateContextKey as me, FormApiContextKey as de, FormUpdaterContextKey as ce, FormIdContextKey as pe, ArrayFieldContextKey as ve } from "./context.js";
-import ge from "../grid/Row.vue.js";
-import "../grid/grid.css";
-const ye = ["id", "x-form-id"], he = ["id", "x-form-id"], we = /* @__PURE__ */ M({
-  name: "SemiForm",
-  inheritAttrs: !1,
-  __name: "Form",
-  props: /* @__PURE__ */ O({
-    "aria-label": {},
-    onSubmit: { type: Function, default: () => {
-    } },
-    onSubmitFail: { type: Function, default: () => {
-    } },
-    onReset: { type: Function, default: () => {
-    } },
-    onValueChange: { type: Function, default: () => {
-    } },
-    onErrorChange: { type: Function, default: () => {
-    } },
-    onChange: { type: Function, default: () => {
-    } },
-    allowEmpty: { type: Boolean, default: !1 },
-    validateFields: {},
-    id: {},
-    getFormApi: {},
-    style: {},
-    className: {},
-    extraTextPosition: {},
-    layout: { default: "vertical" },
-    labelPosition: { default: "top" },
-    labelWidth: {},
-    labelAlign: {},
-    labelCol: {},
-    wrapperCol: {},
-    render: {},
-    component: {},
-    children: {},
-    autoScrollToError: { type: Boolean, default: !1 },
-    disabled: { type: Boolean },
-    showValidateIcon: { type: Boolean, default: !0 },
-    stopValidateWithError: { type: Boolean },
-    stopPropagation: {},
-    trigger: {}
-  }, {
-    modelValue: {},
-    modelModifiers: {}
-  }),
-  emits: /* @__PURE__ */ O(["submit", "reset", "value-change", "error-change", "change"], ["update:modelValue"]),
-  setup(r, { expose: j, emit: z }) {
-    const l = Z(r, "modelValue"), o = r, g = z, f = ie.PREFIX, y = d(null), i = d(o.id || q()), R = d({
-      formId: ""
-    }), { adapter: X } = fe(o, R), G = {
-      ...X,
-      cloneDeep: E,
-      notifySubmit: (e, t) => {
-        o.onSubmit(e, t), g("submit", e, t);
-      },
-      notifySubmitFail: (e, t, n) => {
-        o.onSubmitFail(e, t, n);
-      },
-      forceUpdate: (e) => {
-        e && V.push(e), u && clearTimeout(u), u = setTimeout(() => {
-          const t = a.getFormState(!1);
-          H.value++, h.value && (h.value = t);
-          const n = [...V];
-          V.length = 0, C(() => {
-            n.forEach((Y) => Y());
-          }), u = null;
-        }, 0);
-      },
-      notifyChange: (e) => {
-        o.onChange(e), g("change", e);
-      },
-      notifyValueChange: (e, t) => {
-        o.onValueChange(e, t), g("value-change", e, t), s.value || C(() => {
-          !s.value && !W(e, l.value) && (l.value = E(e));
-        });
-      },
-      notifyErrorChange: (e, t) => {
-        o.onErrorChange(e, t), g("error-change", e, t);
-      },
-      notifyReset: () => {
-        o.onReset(), g("reset");
-      },
-      initFormId: () => {
-        i.value || (i.value = o.id || q()), R.value.formId = i.value;
-      },
-      getInitValues: () => l.value !== void 0 ? l.value : o.initValues || {},
-      getFormProps: (e) => {
-        if (typeof e > "u")
-          return o;
-        if (typeof e == "string")
-          return o[e];
-        {
-          const t = {};
-          return e.forEach((n) => {
-            t[n] = o[n];
-          }), t;
-        }
-      },
-      getAllErrorDOM: () => {
-        const e = y.value;
-        return e ? e.querySelectorAll(`.${f}-field-error-message`) : [];
-      },
-      getFieldDOM: (e) => {
-        const t = y.value;
-        return t ? t.querySelector(`[data-field="${e}"]`) : null;
-      },
-      getFieldErrorDOM: (e) => {
-        const t = y.value;
-        if (!t) return null;
-        const n = `.${f}-field[x-field-id="${e}"] .${f}-field-error-message`;
-        return t.querySelector(n);
-      }
-    }, { foundation: a } = se(ue, G), m = d(null), h = _(null), H = d(0);
-    let u = null;
-    const V = [], k = h, J = c(() => a.getModifyFormStateApi()), s = d(!1);
-    b(me, k), b(de, m), b(ce, J), b(pe, i);
-    const L = c(() => ({
-      shouldUseInitValue: !0
-    }));
-    b(ve, L);
-    let P = !1;
-    ee(
-      () => l.value,
-      (e) => {
-        if (!s.value && P && e !== void 0) {
-          const t = a.getFormState(!1).values;
-          W(t, e) || (s.value = !0, a.setValues(e, { isOverride: !0 }), C(() => {
-            s.value = !1;
-          }));
-        }
-      },
-      { deep: !0 }
-    ), te(() => {
-      P = !0, a.init(), m.value = a.getFormApi(), h.value = a.getFormState(!1), o.getFormApi && o.getFormApi(m.value), C(() => {
-        const e = a.getFormState(!1).values;
-        Object.keys(e).length > 0 && (l.value === void 0 || typeof l.value == "object" && l.value !== null && Object.keys(l.value).length === 0) && (s.value = !0, l.value = E(e), C(() => {
-          s.value = !1;
-        }));
-      });
-    }), oe(() => {
-      u && (clearTimeout(u), u = null), V.length = 0;
-    }), j({
-      get formApi() {
-        return m.value;
-      },
-      get formState() {
-        return h.value;
-      }
-    });
-    const w = c(
-      () => ae(f, o.className, {
-        [`${f}-vertical`]: o.layout === "vertical",
-        [`${f}-horizontal`]: o.layout === "horizontal"
-      })
-    ), Q = c(() => o.wrapperCol && o.labelCol), I = c(() => {
-      const e = [
-        "children",
-        "getFormApi",
-        "onChange",
-        "onSubmit",
-        "onSubmitFail",
-        "onErrorChange",
-        "onValueChange",
-        "component",
-        "render",
-        "validateFields",
-        "layout",
-        "style",
-        "className",
-        "labelPosition",
-        "labelWidth",
-        "labelAlign",
-        "labelCol",
-        "wrapperCol",
-        "allowEmpty",
-        "autoScrollToError",
-        "showValidateIcon",
-        "stopValidateWithError",
-        "extraTextPosition",
-        "id",
-        "trigger",
-        "disabled",
-        "modelValue",
-        "initValues"
-      ], t = {};
-      for (const n in o)
-        e.includes(n) || (t[n] = o[n]);
-      return t;
-    }), F = c(() => {
-      const e = k.value;
-      return e ? {
-        formState: {
-          ...e,
-          values: e.values || {},
-          errors: e.errors || {}
-        },
-        formApi: m.value,
-        values: e.values || {}
-      } : {
-        formState: { values: {}, errors: {} },
-        formApi: m.value,
-        values: {}
-      };
-    }), T = (e) => {
-      var t;
-      (t = o.stopPropagation) != null && t.submit && e.stopPropagation(), a.submit(e);
-    }, $ = (e) => {
-      var t;
-      e.preventDefault(), (t = o.stopPropagation) != null && t.reset && e.stopPropagation(), a.reset();
-    }, B = M({
-      name: "RenderVNode",
-      props: {
-        renderFn: {
-          type: Function,
-          required: !0
-        }
-      },
-      setup(e) {
-        return () => {
-          const t = e.renderFn(F.value);
-          return t == null ? null : typeof t == "string" || typeof t == "number" ? String(t) : t;
-        };
-      }
-    });
-    return (e, t) => Q.value ? (p(), S(x(ge), { key: 0 }, {
-      default: re(() => [
-        ne("form", v({
-          id: i.value,
-          ref_key: "formRef",
-          ref: y,
-          class: w.value,
-          style: o.style,
-          "x-form-id": i.value
-        }, I.value, {
-          onSubmit: U(T, ["prevent"]),
-          onReset: $
-        }), [
-          !r.render && !r.component ? N(e.$slots, "default", A(v({ key: 0 }, F.value))) : r.component ? (p(), S(D(r.component), A(v({ key: 1 }, F.value)), null, 16)) : r.render ? (p(), S(x(B), {
-            key: 2,
-            "render-fn": r.render
-          }, null, 8, ["render-fn"])) : K("", !0)
-        ], 16, ye)
-      ]),
-      _: 3
-    })) : (p(), le("form", v({
-      key: 1,
-      id: i.value,
-      ref_key: "formRef",
-      ref: y,
-      class: w.value,
-      style: o.style,
-      "x-form-id": i.value
-    }, I.value, {
-      onSubmit: U(T, ["prevent"]),
-      onReset: $
-    }), [
-      !r.render && !r.component ? N(e.$slots, "default", A(v({ key: 0 }, F.value))) : r.component ? (p(), S(D(r.component), A(v({ key: 1 }, F.value)), null, 16)) : r.render ? (p(), S(x(B), {
-        key: 2,
-        "render-fn": r.render
-      }, null, 8, ["render-fn"])) : K("", !0)
-    ], 16, he));
-  }
-});
-export {
-  we as default
-};