naive-ui-form/dist/index.js

一个基于naive-ui封装的表单组件，一个配置，生成一个表单

import { defineComponent as Q, openBlock as r, createBlock as d, unref as o, mergeProps as v, withCtx as n, createTextVNode as V, toDisplayString as B, createVNode as m, createElementBlock as N, Fragment as C, renderList as O, resolveDynamicComponent as j, isRef as se, ref as M, reactive as de, computed as ae, watch as pe, createCommentVNode as w, createElementVNode as U, renderSlot as J, normalizeProps as fe, toRaw as ye, useAttrs as me, createSlots as ve } from "vue";
import { NAutoComplete as ce, NCascader as he, NCheckbox as z, NCheckboxGroup as I, NColorPicker as ge, NDatePicker as x, NDynamicInput as ke, NDynamicTags as we, NInput as Ne, NInputNumber as be, NMention as Ve, NRadio as _, NRadioGroup as ee, NRate as te, NSelect as Be, NSlider as Pe, NSwitch as Se, NTimePicker as le, NTransfer as Ce, NTreeSelect as Fe, NSpace as q, NText as K, NForm as Re, NGrid as oe, NGridItem as L, NDivider as re, NFormItemGi as G, NButton as D, NIcon as H, NModal as Te } from "naive-ui";
import { RemoveCircleOutline as $e, AddCircleOutline as Ee, ChevronDown as Oe, ChevronUp as De } from "@vicons/ionicons5";
function ne(c, a) {
  return c.then(function(e) {
    return [null, e];
  }).catch(function(e) {
    return a && Object.assign(e, a), [e, void 0];
  });
}
const ue = /* @__PURE__ */ Q({
  components: {
    NAutoComplete: ce,
    NCascader: he,
    NCheckbox: z,
    NCheckboxGroup: I,
    NColorPicker: ge,
    NDatePicker: x,
    NDynamicInput: ke,
    NDynamicTags: we,
    NInput: Ne,
    NInputNumber: be,
    NMention: Ve,
    NRadio: _,
    NRadioGroup: ee,
    NRate: te,
    NSelect: Be,
    NSlider: Pe,
    NSwitch: Se,
    NTimePicker: le,
    NTransfer: Ce,
    NTreeSelect: Fe
  },
  __name: "RenderComponent",
  props: {
    schema: {},
    record: {}
  },
  setup(c) {
    function a(e) {
      return e ? se(e) ? o(e) : e : [];
    }
    return (e, i) => {
      var R, y, p, h, P, S, f, b, F, T, $, E;
      return e.schema.type === "checkbox-single" ? (r(), d(o(z), v({
        key: 0,
        style: [{ width: "100%" }, (R = e.schema) == null ? void 0 : R.style]
      }, e.schema.componentProps, {
        checked: e.record[e.schema.field],
        "onUpdate:checked": i[0] || (i[0] = (u) => e.record[e.schema.field] = u)
      }), {
        default: n(() => {
          var u;
          return [
            V(B((u = e.schema.componentProps) == null ? void 0 : u.text), 1)
          ];
        }),
        _: 1
      }, 16, ["style", "checked"])) : e.schema.type === "checkbox" ? (r(), d(o(I), v({
        key: 1,
        style: [{ width: "100%" }, (y = e.schema) == null ? void 0 : y.style]
      }, e.schema.componentProps, {
        value: e.record[e.schema.field],
        "onUpdate:value": i[1] || (i[1] = (u) => e.record[e.schema.field] = u)
      }), {
        default: n(() => [
          m(o(q), null, {
            default: n(() => {
              var u;
              return [
                (r(!0), N(C, null, O(a((u = e.schema.componentProps) == null ? void 0 : u.options), (t) => (r(), d(o(z), v(t, {
                  value: t.value,
                  label: t.label
                }), null, 16, ["value", "label"]))), 256))
              ];
            }),
            _: 1
          })
        ]),
        _: 1
      }, 16, ["style", "value"])) : e.schema.type === "date-picker" ? (r(), d(o(x), v({
        key: 2,
        style: [{ width: "100%" }, (p = e.schema) == null ? void 0 : p.style]
      }, e.schema.componentProps, {
        "formatted-value": e.record[e.schema.field],
        "onUpdate:formattedValue": i[2] || (i[2] = (u) => e.record[e.schema.field] = u),
        valueFormat: ((h = e.schema.componentProps) == null ? void 0 : h.valueFormat) || "yyyy-MM-dd"
      }), null, 16, ["style", "formatted-value", "valueFormat"])) : e.schema.type === "radio-single" ? (r(), d(o(te), v({
        key: 3,
        style: [{ width: "100%" }, (P = e.schema) == null ? void 0 : P.style]
      }, e.schema.componentProps, {
        value: e.record[e.schema.field],
        "onUpdate:value": i[3] || (i[3] = (u) => e.record[e.schema.field] = u)
      }), null, 16, ["style", "value"])) : e.schema.type === "radio" ? (r(), d(o(ee), v({
        key: 4,
        style: [{ width: "100%" }, (S = e.schema) == null ? void 0 : S.style]
      }, e.schema.componentProps, {
        value: e.record[e.schema.field],
        "onUpdate:value": i[4] || (i[4] = (u) => e.record[e.schema.field] = u)
      }), {
        default: n(() => [
          m(o(q), null, {
            default: n(() => {
              var u;
              return [
                (r(!0), N(C, null, O(a((u = e.schema.componentProps) == null ? void 0 : u.options), (t) => (r(), d(o(_), v({
                  key: t.label
                }, t, {
                  value: t.value
                }), {
                  default: n(() => [
                    V(B(t.label), 1)
                  ]),
                  _: 2
                }, 1040, ["value"]))), 128))
              ];
            }),
            _: 1
          })
        ]),
        _: 1
      }, 16, ["style", "value"])) : e.schema.type === "time-picker" ? (r(), d(o(le), v({
        key: 5,
        style: [{ width: "100%" }, (f = e.schema) == null ? void 0 : f.style]
      }, e.schema.componentProps, {
        valueFormat: ((b = e.schema.componentProps) == null ? void 0 : b.valueFormat) || "HH:mm:ss",
        "formatted-value": e.record[e.schema.field],
        "onUpdate:formattedValue": i[5] || (i[5] = (u) => e.record[e.schema.field] = u)
      }), null, 16, ["style", "valueFormat", "formatted-value"])) : e.schema.type === "text" ? (r(), d(o(K), v({
        key: 6,
        style: [{ width: "100%" }, (F = e.schema) == null ? void 0 : F.style]
      }, e.schema.componentProps), {
        default: n(() => [
          V(B(e.record[e.schema.field]), 1)
        ]),
        _: 1
      }, 16, ["style"])) : e.schema.type === "upload" ? (r(), d(j("naive-ui-upload"), v({
        key: 7,
        "list-type": "image-card",
        style: [{ width: "100%" }, (T = e.schema) == null ? void 0 : T.style]
      }, e.schema.componentProps, {
        value: e.record[e.schema.field],
        "onUpdate:value": i[6] || (i[6] = (u) => e.record[e.schema.field] = u)
      }), null, 16, ["style", "value"])) : e.schema.type === "editor" ? (r(), d(j("naive-ui-editor"), v({
        key: 8,
        style: [{ height: "600px", width: "100%" }, ($ = e.schema) == null ? void 0 : $.style]
      }, e.schema.componentProps, {
        value: e.record[e.schema.field],
        "onUpdate:value": i[7] || (i[7] = (u) => e.record[e.schema.field] = u)
      }), null, 16, ["style", "value"])) : (r(), d(j(`n-${e.schema.type}`), v({
        key: 9,
        style: [{ width: "100%" }, (E = e.schema) == null ? void 0 : E.style]
      }, {
        ...e.schema.componentProps
      }, {
        value: e.record[e.schema.field],
        "onUpdate:value": i[8] || (i[8] = (u) => e.record[e.schema.field] = u)
      }), null, 16, ["style", "value"]));
    };
  }
}), Me = {
  text: {
    outputStr: "输入"
  },
  "auto-complete": {
    outputStr: "输入"
  },
  cascader: {
    outputStr: "选择"
  },
  "color-picker": {
    outputStr: "选择"
  },
  "checkbox-single": {
    outputStr: "勾选"
  },
  checkbox: {
    outputStr: "勾选"
  },
  "date-picker": {
    outputStr: "选择"
  },
  "dynamic-input": {
    outputStr: "输入"
  },
  "dynamic-tags": {
    outputStr: "添加"
  },
  input: {
    outputStr: "输入"
  },
  "input-number": {
    outputStr: "输入"
  },
  mention: {
    outputStr: "输入"
  },
  "radio-single": {
    outputStr: "勾选"
  },
  radio: {
    outputStr: "勾选"
  },
  rate: {
    outputStr: "勾选"
  },
  select: {
    outputStr: "选择"
  },
  slider: {
    outputStr: "滑动选择"
  },
  switch: {
    outputStr: "开启"
  },
  "time-picker": {
    outputStr: "选择"
  },
  transfer: {
    outputStr: "勾选"
  },
  "tree-select": {
    outputStr: "勾选"
  },
  // custom: {
  //   outputStr: '填写',
  //   render(formValue: Recordable, schema: FormSchema) {
  //     if (!schema.render || typeof schema.render !== 'function') {
  //       console.error('render 必须是一个函数')
  //       return null
  //     }
  //     return schema.render(formValue, schema.field)
  //   }
  // },
  slot: {
    outputStr: "填写"
  },
  upload: {
    outputStr: "上传"
  },
  editor: {
    outputStr: "输入"
  }
}, Ue = { style: { width: "100%" } }, Ge = { key: 2 }, qe = { style: { width: "100%" } }, Ae = { style: { width: "100%" } }, je = { key: 2 }, ze = { style: { height: "100%", display: "flex", "align-items": "center" } }, ie = /* @__PURE__ */ Q({
  __name: "BasicForm",
  props: {
    schemas: { default: () => [] },
    grid: { default: () => ({
      cols: 1,
      xGap: 14
    }) },
    showActionBtns: { type: Boolean, default: !0 },
    showSubmitBtn: { type: Boolean, default: !0 },
    submitBtnText: { default: "提交" },
    showResetBtn: { type: Boolean, default: !0 },
    resetBtnText: { default: "重置" },
    showExpandBtn: { type: Boolean, default: !0 },
    expandBtnOffText: { default: "展开" },
    expandBtnOnText: { default: "收起" },
    defaultExpand: { type: Boolean, default: !1 },
    defaultShowExpandRows: { default: 1 },
    disabled: { type: Boolean }
  },
  emits: ["register", "submit", "reset"],
  setup(c, { expose: a, emit: e }) {
    const i = M({}), R = c, y = e, p = de({}), h = M(null), P = M(!1), S = {
      async submit() {
        P.value = !0;
        const [t] = await ne(this.validate());
        return t ? (P.value = !1, Promise.reject(t)) : (y("submit", this.getValue()), this.getValue());
      },
      reset() {
        var t;
        (t = f.value.schemas) == null || t.forEach((s) => {
          s.type !== "dynamic" && (p[s.field] = null), F(s);
        }), this.clearValidate(), y("reset");
      },
      getValue() {
        return ye(p);
      },
      getFieldValue(t) {
        return p[t];
      },
      setValue(t) {
        for (const s in t)
          p[s] = t[s];
      },
      validate() {
        return h.value.validate();
      },
      clearValidate() {
        h.value.restoreValidation();
      },
      setProps(t) {
        i.value = t;
      },
      setLoading(t) {
        P.value = t;
      }
    };
    a(S), y("register", S);
    const f = ae(() => Object.assign({}, R, i.value)), b = M(f.value.defaultExpand);
    function F(t, s = p) {
      var l;
      if (Reflect.has(t, "defaultValue")) {
        s[t.field] = t.defaultValue;
        return;
      }
      t.type === "dynamic" && (s[t.field] = [$(t)], (l = t.dynamicOptions) == null || l.forEach((k) => {
        F(k, p[t.field][0]);
      })), t.type === "upload" && (s[t.field] = []), t.type === "editor" && (s[t.field] = "");
    }
    function T(t) {
      if (t.type !== "dynamic") {
        if (t.required) {
          const s = {
            required: !0,
            message: t.requiredMessage || `请${Me[t.type].outputStr}${t.label || ""}`,
            trigger: t.requiredTrigger || ["blur"]
          };
          return t.requiredType && (s.type = t.requiredType), s;
        }
        if (t.rules)
          return t.rules;
      }
    }
    function $(t) {
      var l;
      const s = {};
      return (l = t.dynamicOptions) == null || l.forEach((k) => {
        s[k.field] = k.type !== "upload" ? null : [];
      }), s;
    }
    pe(
      () => f.value.schemas,
      (t) => {
        t == null || t.forEach((s) => {
          F(s);
        });
      },
      {
        immediate: !0
      }
    );
    function E(t) {
      p[t.field].push($(t));
    }
    function u(t, s) {
      p[t.field].splice(s, 1);
    }
    return (t, s) => (r(), d(o(Re), v({
      "label-width": "auto",
      "label-placement": "left"
    }, f.value, {
      ref_key: "formRef",
      ref: h,
      model: p
    }), {
      default: n(() => [
        m(o(oe), v(f.value.grid, {
          collapsed: b.value,
          "collapsed-rows": f.value.defaultShowExpandRows
        }), {
          default: n(() => [
            (r(!0), N(C, null, O(f.value.schemas, (l) => {
              var k, W, X, Y;
              return r(), N(C, null, [
                l.type !== "dynamic" ? (r(), N(C, { key: 0 }, [
                  l.groupName ? (r(), d(o(L), {
                    key: l.groupName,
                    span: (W = (k = f.value) == null ? void 0 : k.grid) == null ? void 0 : W.cols
                  }, {
                    default: n(() => [
                      m(o(re), null, {
                        default: n(() => [
                          V(B(l.groupName), 1)
                        ]),
                        _: 2
                      }, 1024)
                    ]),
                    _: 2
                  }, 1032, ["span"])) : w("", !0),
                  typeof l.vif != "function" || l.vif(p) ? (r(), d(o(G), v({
                    key: l.field
                  }, l, {
                    path: l.field,
                    rule: T(l)
                  }), {
                    default: n(() => [
                      U("div", Ue, [
                        l.type !== "slot" ? (r(), d(ue, {
                          key: 0,
                          schema: l,
                          record: p
                        }, null, 8, ["schema", "record"])) : J(t.$slots, l.slot, {
                          key: 1,
                          formValue: p,
                          field: l.field
                        }),
                        l.tip ? (r(), N("div", Ge, [
                          m(o(K), { type: "warning" }, {
                            default: n(() => [
                              V(B(l.tip), 1)
                            ]),
                            _: 2
                          }, 1024)
                        ])) : w("", !0)
                      ])
                    ]),
                    _: 2
                  }, 1040, ["path", "rule"])) : w("", !0)
                ], 64)) : (r(), N(C, { key: 1 }, [
                  l.groupName ? (r(), d(o(L), {
                    key: 0,
                    span: (Y = (X = f.value) == null ? void 0 : X.grid) == null ? void 0 : Y.cols
                  }, {
                    default: n(() => [
                      m(o(re), null, {
                        default: n(() => [
                          V(B(l.groupName), 1)
                        ]),
                        _: 2
                      }, 1024)
                    ]),
                    _: 2
                  }, 1032, ["span"])) : w("", !0),
                  typeof l.vif != "function" || l.vif(p) ? (r(), d(o(G), fe(v({ key: 1 }, l)), {
                    default: n(() => [
                      U("div", qe, [
                        (r(!0), N(C, null, O(p[l.field], (A, Z) => (r(), d(o(oe), {
                          cols: l.dynamicOptions.length + 1,
                          xGap: 14
                        }, {
                          default: n(() => [
                            (r(!0), N(C, null, O(l.dynamicOptions, (g) => (r(), N(C, null, [
                              typeof g.vif != "function" || g.vif(A) ? (r(), d(o(G), v({ key: 0 }, g, {
                                path: `${l.field}[${Z}].${g.field}`,
                                rule: T(g),
                                key: g.field
                              }), {
                                default: n(() => [
                                  U("div", Ae, [
                                    g.type !== "slot" ? (r(), d(ue, {
                                      key: 0,
                                      schema: g,
                                      record: A
                                    }, null, 8, ["schema", "record"])) : J(t.$slots, g.slot, {
                                      key: 1,
                                      formValue: A,
                                      field: g.field
                                    }),
                                    l.tip ? (r(), N("div", je, [
                                      m(o(K), { type: "warning" }, {
                                        default: n(() => [
                                          V(B(l.tip), 1)
                                        ]),
                                        _: 2
                                      }, 1024)
                                    ])) : w("", !0)
                                  ])
                                ]),
                                _: 2
                              }, 1040, ["path", "rule"])) : w("", !0)
                            ], 64))), 256)),
                            m(o(L), null, {
                              default: n(() => [
                                U("div", ze, [
                                  m(o(q), null, {
                                    default: n(() => [
                                      m(o(D), {
                                        disabled: p[l.field].length === 1,
                                        text: "",
                                        onClick: (g) => u(l, Z)
                                      }, {
                                        default: n(() => [
                                          m(o(H), { size: 24 }, {
                                            default: n(() => [
                                              m(o($e))
                                            ]),
                                            _: 1
                                          })
                                        ]),
                                        _: 2
                                      }, 1032, ["disabled", "onClick"]),
                                      m(o(D), {
                                        text: "",
                                        onClick: (g) => E(l)
                                      }, {
                                        default: n(() => [
                                          m(o(H), { size: 24 }, {
                                            default: n(() => [
                                              m(o(Ee))
                                            ]),
                                            _: 1
                                          })
                                        ]),
                                        _: 2
                                      }, 1032, ["onClick"])
                                    ]),
                                    _: 2
                                  }, 1024)
                                ])
                              ]),
                              _: 2
                            }, 1024)
                          ]),
                          _: 2
                        }, 1032, ["cols"]))), 256))
                      ])
                    ]),
                    _: 2
                  }, 1040)) : w("", !0)
                ], 64))
              ], 64);
            }), 256)),
            f.value.showActionBtns ? (r(), d(o(G), {
              key: 0,
              label: " ",
              suffix: ""
            }, {
              default: n(() => {
                var l;
                return [
                  m(o(q), {
                    style: { width: "100%" },
                    justify: ((l = f.value.grid) == null ? void 0 : l.cols) === 1 ? "start" : "end"
                  }, {
                    default: n(() => [
                      f.value.showSubmitBtn ? (r(), d(o(D), {
                        key: 0,
                        type: "primary",
                        loading: P.value,
                        onClick: s[0] || (s[0] = () => S.submit())
                      }, {
                        default: n(() => [
                          V(B(f.value.submitBtnText), 1)
                        ]),
                        _: 1
                      }, 8, ["loading"])) : w("", !0),
                      f.value.showResetBtn ? (r(), d(o(D), {
                        key: 1,
                        onClick: s[1] || (s[1] = () => S.reset())
                      }, {
                        default: n(() => [
                          V(B(f.value.resetBtnText), 1)
                        ]),
                        _: 1
                      })) : w("", !0),
                      f.value.showExpandBtn ? (r(), d(o(D), {
                        key: 2,
                        type: "primary",
                        text: "",
                        onClick: s[2] || (s[2] = (k) => b.value = !b.value)
                      }, {
                        icon: n(() => [
                          m(o(H), null, {
                            default: n(() => [
                              b.value ? (r(), d(o(Oe), { key: 0 })) : (r(), d(o(De), { key: 1 }))
                            ]),
                            _: 1
                          })
                        ]),
                        default: n(() => [
                          V(" " + B(b.value ? f.value.expandBtnOffText : f.value.expandBtnOnText), 1)
                        ]),
                        _: 1
                      })) : w("", !0)
                    ]),
                    _: 1
                  }, 8, ["justify"])
                ];
              }),
              _: 1
            })) : w("", !0)
          ]),
          _: 3
        }, 16, ["collapsed", "collapsed-rows"])
      ]),
      _: 3
    }, 16, ["model"]));
  }
});
function Le(c) {
  let a = null;
  const e = async (y) => {
    a = y, c && (a == null || a.setProps(c));
  };
  function i() {
    if (!a)
      throw new Error("Form instance is not initialized, please use after initialized.");
  }
  return [e, {
    getValue() {
      return i(), a.getValue() || {};
    },
    getFieldValue(y) {
      return i(), a.getFieldValue(y);
    },
    setValue(y) {
      i(), a.setValue(y);
    },
    validate() {
      return i(), new Promise((y, p) => {
        a == null || a.validate().then((h) => y(h)).catch((h) => p(h));
      });
    },
    clearValidate() {
      i(), a == null || a.clearValidate();
    },
    submit() {
      return i(), a.submit();
    },
    reset() {
      i(), a == null || a.reset();
    },
    setProps(y) {
      i(), a == null || a.setProps(y);
    },
    setLoading(y) {
      a == null || a.setLoading(y);
    }
  }];
}
const He = /* @__PURE__ */ Q({
  __name: "ModalForm",
  props: {
    show: { type: Boolean }
  },
  emits: ["update:show", "submit", "cancel"],
  setup(c, { expose: a, emit: e }) {
    const i = me(), R = c, y = e, p = ae({
      get() {
        return R.show;
      },
      set(u) {
        y("update:show", u);
      }
    }), [h, { submit: P, reset: S, getValue: f, setValue: b, getFieldValue: F }] = Le(i);
    async function T() {
      const [u, t] = await ne(P());
      return u || y("submit", t), !1;
    }
    function $(u) {
      !u && S();
    }
    function E() {
      y("cancel");
    }
    return a({
      getValue: f,
      setValue: b,
      getFieldValue: F
    }), (u, t) => (r(), d(o(Te), {
      show: p.value,
      "onUpdate:show": [
        t[0] || (t[0] = (s) => p.value = s),
        $
      ],
      preset: "dialog",
      "positive-text": "确定",
      "negative-text": "取消",
      onPositiveClick: T,
      "on-negative-click": E
    }, {
      default: n(() => [
        m(ie, {
          "show-action-btns": !1,
          style: { width: "100%", margin: "40px 0" },
          onRegister: o(h)
        }, ve({ _: 2 }, [
          O(u.$slots, (s, l) => ({
            name: l,
            fn: n((k) => [
              J(u.$slots, l, {
                formValue: k.formValue,
                field: k.field
              })
            ])
          }))
        ]), 1032, ["onRegister"])
      ]),
      _: 3
    }, 8, ["show"]));
  }
}), We = {
  install(c) {
    c.component("BasicForm", ie), c.component("ModalForm", He);
  }
};
export {
  ie as BasicForm,
  He as ModalForm,
  We as default,
  Le as useForm
};