@king-one/form-design 0.0.1 → 0.0.3

package/dist/es/src/components/props/index.mjs

@@ -1,2 +1,5 @@
-import "./base-props.vue2.mjs";
-import "./component-props.vue2.mjs";
+import "./form-props.vue.mjs";
+import { widgetProps as t } from "./widget/index.mjs";
+export {
+  t as widgetProps
+};

package/dist/es/src/components/props/widget/BaseProps.vue.mjs

@@ -0,0 +1,4 @@
+import f from "./BaseProps.vue2.mjs";
+export {
+  f as default
+};

package/dist/es/src/components/props/widget/BaseProps.vue2.mjs

@@ -0,0 +1,63 @@
+import { defineComponent as d, openBlock as u, createBlock as i, unref as e, withCtx as l, createElementVNode as m, createVNode as o, createTextVNode as p } from "vue";
+import { CollapsePanel as s, Form as f, FormItem as a, Input as c, Switch as x } from "ant-design-vue";
+import "../../../internal.mjs";
+import "../../form-icon.vue.mjs";
+import { useInjectDesignContext as k } from "../../../context/design.mjs";
+import _ from "../../form-icon.vue2.mjs";
+const V = /* @__PURE__ */ d({
+  __name: "BaseProps",
+  setup(v) {
+    const { checkedField: r } = k();
+    return (C, t) => (u(), i(e(s), null, {
+      header: l(() => t[2] || (t[2] = [
+        m(
+          "div",
+          null,
+          "基础设置",
+          -1
+          /* CACHED */
+        )
+      ])),
+      default: l(() => [
+        o(e(f), {
+          "label-col": { style: { width: "85px" } },
+          layout: "vertical"
+        }, {
+          default: l(() => [
+            o(e(a), { label: "字段标题" }, {
+              default: l(() => [
+                o(e(c), {
+                  value: e(r).title,
+                  "onUpdate:value": t[0] || (t[0] = (n) => e(r).title = n)
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            o(e(a), { label: "是否必填" }, {
+              extra: l(() => [
+                o(_, { name: "sound" }),
+                t[3] || (t[3] = p(" 表单字段设置为必填才能作为审批条件 "))
+              ]),
+              default: l(() => [
+                o(e(x), {
+                  checked: e(r).required,
+                  "onUpdate:checked": t[1] || (t[1] = (n) => e(r).required = n)
+                }, null, 8, ["checked"])
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      _: 1
+      /* STABLE */
+    }));
+  }
+});
+export {
+  V as default
+};

package/dist/es/src/components/props/widget/InputNumberProps.vue.mjs

@@ -0,0 +1,4 @@
+import f from "./InputNumberProps.vue2.mjs";
+export {
+  f as default
+};

package/dist/es/src/components/props/widget/InputNumberProps.vue2.mjs

@@ -0,0 +1,125 @@
+import { defineComponent as i, computed as v, openBlock as m, createBlock as s, unref as l, withCtx as n, createElementVNode as f, createVNode as a } from "vue";
+import { CollapsePanel as b, Form as x, FormItem as o, InputNumber as d, Switch as k, Input as r } from "ant-design-vue";
+import "../../../internal.mjs";
+import { useInjectDesignContext as w } from "../../../context/design.mjs";
+const c = /* @__PURE__ */ i({
+  __name: "InputNumberProps",
+  setup(U) {
+    const { checkedField: p } = w(), t = v(() => p.value["k-component-props"] || {});
+    return (y, e) => (m(), s(l(b), { key: "input-number-props" }, {
+      header: n(() => e[7] || (e[7] = [
+        f(
+          "div",
+          null,
+          "属性设置",
+          -1
+          /* CACHED */
+        )
+      ])),
+      default: n(() => [
+        a(l(x), {
+          "label-col": { style: { width: "100px" } },
+          "label-align": "left"
+        }, {
+          default: n(() => [
+            a(l(o), { label: "最大值" }, {
+              default: n(() => [
+                a(l(d), {
+                  value: t.value.max,
+                  "onUpdate:value": e[0] || (e[0] = (u) => t.value.max = u),
+                  style: { width: "100%" },
+                  min: 1,
+                  precision: 0,
+                  max: 999
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            a(l(o), { label: "最小值" }, {
+              default: n(() => [
+                a(l(d), {
+                  value: t.value.min,
+                  "onUpdate:value": e[1] || (e[1] = (u) => t.value.min = u),
+                  style: { width: "100%" },
+                  min: 1,
+                  precision: 0,
+                  max: 999
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            a(l(o), { label: "小数点位数" }, {
+              default: n(() => [
+                a(l(d), {
+                  value: t.value.precision,
+                  "onUpdate:value": e[2] || (e[2] = (u) => t.value.precision = u),
+                  style: { width: "100%" },
+                  min: 1,
+                  precision: 0,
+                  max: 999
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            a(l(o), { label: "步长" }, {
+              default: n(() => [
+                a(l(d), {
+                  value: t.value.step,
+                  "onUpdate:value": e[3] || (e[3] = (u) => t.value.step = u),
+                  style: { width: "100%" },
+                  min: 1,
+                  precision: 0,
+                  max: 999
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            a(l(o), { label: "显示增减按钮" }, {
+              default: n(() => [
+                a(l(k), {
+                  checked: t.value.controls,
+                  "onUpdate:checked": e[4] || (e[4] = (u) => t.value.controls = u)
+                }, null, 8, ["checked"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            a(l(o), { label: "前缀内容" }, {
+              default: n(() => [
+                a(l(r), {
+                  value: t.value.addonBefore,
+                  "onUpdate:value": e[5] || (e[5] = (u) => t.value.addonBefore = u),
+                  placeholder: "请输入前缀内容"
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            a(l(o), { label: "后缀内容" }, {
+              default: n(() => [
+                a(l(r), {
+                  value: t.value.addonAfter,
+                  "onUpdate:value": e[6] || (e[6] = (u) => t.value.addonAfter = u),
+                  placeholder: "请输入前缀内容"
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      _: 1
+      /* STABLE */
+    }));
+  }
+});
+export {
+  c as default
+};

package/dist/es/src/components/props/widget/InputProps.vue.mjs

@@ -0,0 +1,4 @@
+import f from "./InputProps.vue2.mjs";
+export {
+  f as default
+};

package/dist/es/src/components/props/widget/InputProps.vue2.mjs

@@ -0,0 +1,80 @@
+import { defineComponent as p, computed as v, openBlock as f, createBlock as m, unref as l, withCtx as u, createElementVNode as i, createVNode as a } from "vue";
+import { CollapsePanel as s, Form as c, FormItem as r, Input as n, Switch as k } from "ant-design-vue";
+import "../../../internal.mjs";
+import { useInjectDesignContext as C } from "../../../context/design.mjs";
+const _ = /* @__PURE__ */ p({
+  __name: "InputProps",
+  setup(b) {
+    const { checkedField: d } = C(), o = v(() => d.value["k-component-props"] || {});
+    return (w, e) => (f(), m(l(s), { key: "input-props" }, {
+      header: u(() => e[4] || (e[4] = [
+        i(
+          "div",
+          null,
+          "属性设置",
+          -1
+          /* CACHED */
+        )
+      ])),
+      default: u(() => [
+        a(l(c), { layout: "vertical" }, {
+          default: u(() => [
+            a(l(r), {
+              label: "输入提示",
+              tooltip: "输入提示"
+            }, {
+              default: u(() => [
+                a(l(n), {
+                  value: o.value.placeholder,
+                  "onUpdate:value": e[0] || (e[0] = (t) => o.value.placeholder = t),
+                  placeholder: "请输入占位提示"
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            a(l(r), { label: "允许清除内容(显示清除图标)" }, {
+              default: u(() => [
+                a(l(k), {
+                  checked: o.value.allowClear,
+                  "onUpdate:checked": e[1] || (e[1] = (t) => o.value.allowClear = t)
+                }, null, 8, ["checked"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            a(l(r), { label: "前缀内容" }, {
+              default: u(() => [
+                a(l(n), {
+                  value: o.value.addonBefore,
+                  "onUpdate:value": e[2] || (e[2] = (t) => o.value.addonBefore = t),
+                  placeholder: "请输入前缀内容"
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            a(l(r), { label: "后缀内容" }, {
+              default: u(() => [
+                a(l(n), {
+                  value: o.value.addonAfter,
+                  "onUpdate:value": e[3] || (e[3] = (t) => o.value.addonAfter = t),
+                  placeholder: "请输入后缀内容"
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      _: 1
+      /* STABLE */
+    }));
+  }
+});
+export {
+  _ as default
+};

package/dist/es/src/components/props/widget/TextareaProps.vue.mjs

@@ -0,0 +1,4 @@
+import f from "./TextareaProps.vue2.mjs";
+export {
+  f as default
+};

package/dist/es/src/components/props/widget/TextareaProps.vue2.mjs

@@ -0,0 +1,79 @@
+import { defineComponent as p, computed as m, openBlock as s, createBlock as v, unref as l, withCtx as u, createElementVNode as i, createVNode as t } from "vue";
+import { CollapsePanel as c, Form as f, FormItem as n, Input as k, Switch as r, InputNumber as h } from "ant-design-vue";
+import "../../../internal.mjs";
+import { useInjectDesignContext as x } from "../../../context/design.mjs";
+const g = /* @__PURE__ */ p({
+  __name: "TextareaProps",
+  setup(C) {
+    const { checkedField: d } = x(), a = m(() => d.value["k-component-props"] || {});
+    return (w, e) => (s(), v(l(c), { key: "textarea-props" }, {
+      header: u(() => e[4] || (e[4] = [
+        i(
+          "div",
+          null,
+          "属性设置",
+          -1
+          /* CACHED */
+        )
+      ])),
+      default: u(() => [
+        t(l(f), { layout: "vertical" }, {
+          default: u(() => [
+            t(l(n), { label: "占位提示" }, {
+              default: u(() => [
+                t(l(k), {
+                  value: a.value.placeholder,
+                  "onUpdate:value": e[0] || (e[0] = (o) => a.value.placeholder = o),
+                  placeholder: "请输入占位提示"
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            t(l(n), { label: "允许清除内容(显示清除图标)" }, {
+              default: u(() => [
+                t(l(r), {
+                  checked: a.value.allowClear,
+                  "onUpdate:checked": e[1] || (e[1] = (o) => a.value.allowClear = o)
+                }, null, 8, ["checked"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            t(l(n), { label: "是否展示字数" }, {
+              default: u(() => [
+                t(l(r), {
+                  checked: a.value.showCount,
+                  "onUpdate:checked": e[2] || (e[2] = (o) => a.value.showCount = o)
+                }, null, 8, ["checked"])
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            t(l(n), { label: "最大长度" }, {
+              default: u(() => [
+                t(l(h), {
+                  value: a.value.maxlength,
+                  "onUpdate:value": e[3] || (e[3] = (o) => a.value.maxlength = o),
+                  style: { width: "100%" },
+                  min: 1,
+                  precision: 0,
+                  max: 999
+                }, null, 8, ["value"])
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        })
+      ]),
+      _: 1
+      /* STABLE */
+    }));
+  }
+});
+export {
+  g as default
+};

package/dist/es/src/components/props/widget/index.mjs

@@ -0,0 +1,27 @@
+import "./InputProps.vue.mjs";
+import "./TextareaProps.vue.mjs";
+import "./InputNumberProps.vue.mjs";
+import "./BaseProps.vue.mjs";
+import t from "./InputProps.vue2.mjs";
+import m from "./TextareaProps.vue2.mjs";
+import n from "./InputNumberProps.vue2.mjs";
+import o from "./BaseProps.vue2.mjs";
+const _ = {
+  "k-input": t,
+  "k-textarea": m,
+  "k-input-number": n
+}, k = {
+  "k-input": {
+    component: [o, t]
+  },
+  "k-textarea": {
+    component: [o, m]
+  },
+  "k-input-number": {
+    component: [o, n]
+  }
+};
+export {
+  _ as components,
+  k as widgetProps
+};

package/dist/es/src/config/index.mjs

@@ -4,7 +4,7 @@ const e = {
   widget: [
     {
       title: "表单布局",
-      icon: "form-grid",
+      icon: "k-form-grid",
       key: "form-layout",
       type: "void",
       "k-component": "FormLayout"
@@ -16,7 +16,7 @@ const e = {
   widget: [
     {
       title: "输入框",
-      key: "input",
+      key: "k-input",
       type: "string",
       icon: "form-input",
       "k-component": "Input",
@@ -26,7 +26,7 @@ const e = {
     },
     {
       title: "多文本输入框",
-      key: "textarea",
+      key: "k-textarea",
       type: "string",
       icon: "form-textarea",
       "k-component": "Textarea",
@@ -36,17 +36,66 @@ const e = {
     },
     {
       title: "数字输入框",
-      key: "input-number",
+      key: "k-input-number",
       type: "number",
       icon: "form-number",
       "k-component": "InputNumber",
       "k-component-props": {
         placeholder: "请输入"
       }
+    },
+    {
+      title: "下拉选择框",
+      key: "k-select",
+      type: "string",
+      icon: "form-select",
+      "k-component": "Select",
+      enum: [
+        {
+          label: "选项1",
+          value: "1"
+        },
+        {
+          label: "选项2",
+          value: "2"
+        }
+      ],
+      "k-component-props": {
+        placeholder: "请选择"
+      }
+    }
+  ]
+}, o = {
+  name: "扩展组件",
+  key: "extend",
+  widget: [
+    {
+      title: "对象容器",
+      key: "k-object",
+      type: "object",
+      icon: "form-object",
+      "k-component": "FormLayout",
+      children: []
+    },
+    {
+      title: "数组容器",
+      key: "k-array-card",
+      type: "array",
+      icon: "form-list",
+      children: [],
+      "k-component": "FormLayout"
+    },
+    {
+      title: "明细表",
+      key: "k-table",
+      type: "array",
+      icon: "form-table",
+      "k-component": "FormLayout"
     }
   ]
 };
 export {
   t as BaseSchema,
+  o as ExtendSchema,
   e as LayoutSchema
 };

package/dist/es/src/core/Design.mjs

@@ -1,44 +1,68 @@
 var m = Object.defineProperty;
-var n = (r, e, t) => e in r ? m(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var o = (r, e, t) => n(r, typeof e != "symbol" ? e + "" : e, t);
-import { ref as i } from "vue";
+var p = (s, e, r) => e in s ? m(s, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : s[e] = r;
+var t = (s, e, r) => p(s, typeof e != "symbol" ? e + "" : e, r);
+import { ref as n } from "vue";
 import "../effects/index.mjs";
-import { panels as c } from "../components/panel/index.mjs";
-import { Heart as h } from "./Heart.mjs";
-import { FormSchema as f } from "./FormSchema.mjs";
-import { runEffects as a } from "../effects/effective.mjs";
-class y {
+import { widgetPanels as c } from "../components/panel/index.mjs";
+import "../components/props/index.mjs";
+import { Plugin as g } from "../plugins/index.mjs";
+import { Heart as a } from "./Heart.mjs";
+import { FormSchema as d } from "./FormSchema.mjs";
+import { widgetProps as f } from "../components/props/widget/index.mjs";
+import { runEffects as l } from "../effects/effective.mjs";
+class b {
   constructor(e) {
-    o(this, "schema");
-    o(this, "heart");
-    o(this, "FormSchema", new f());
-    o(this, "props");
-    o(this, "checkedField", i({}));
-    const { propsComponents: t, panelComponents: s, ...p } = e;
-    this.props = { propsComponents: { ...t }, panelComponents: { ...c, ...s }, ...p }, this.schema = e.schema, this.heart = new h({
+    t(this, "schema");
+    t(this, "heart");
+    t(this, "plugin");
+    t(this, "FormSchema", new d());
+    t(this, "props");
+    t(this, "checkedField", n({}));
+    t(this, "shared", {
+      draggedContext: {
+        key: ""
+      },
+      panelWidgets: {},
+      widgetProps: {}
+    });
+    t(this, "extendFormProps", []);
+    t(this, "notify", (e, ...r) => {
+      this.heart.publish(e, ...r);
+    });
+    const { extendFormProps: r = [], propsWidgets: i = {}, panelWidgets: o = {}, ...h } = e;
+    this.shared.panelWidgets = {
+      ...c,
+      ...o
+    }, this.shared.widgetProps = {
+      ...f,
+      ...i
+    }, this.props = { ...h }, this.schema = e.schema, this.plugin = new g(), this.heart = new a({
       lifecycles: this.lifecycles,
       context: this
-    });
+    }), this.extendFormProps = r;
   }
-  get lifecycles() {
-    return this.props.effects ? a(this, this.props.effects) : [];
+  use(e) {
+    this.plugin.use(e);
   }
   getFormSchema() {
     return this.FormSchema.getSchema();
   }
-  get formProps() {
+  getFieldList() {
+    return this.FormSchema.getFieldList();
+  }
+  get lifecycles() {
+    return this.props.effects ? l(this, this.props.effects) : [];
+  }
+  getFormProps() {
     return this.FormSchema.formProps;
   }
+  get hooks() {
+    return this.plugin.hooks;
+  }
   get fields() {
     return this.FormSchema.fields;
   }
-  get propsComponents() {
-    return this.props.propsComponents;
-  }
-  get panelComponents() {
-    return this.props.panelComponents;
-  }
 }
 export {
-  y as FormDesign
+  b as FormDesign
 };

package/dist/es/src/core/Field.mjs

@@ -0,0 +1,18 @@
+var t = Object.defineProperty;
+var l = (e, i, s) => i in e ? t(e, i, { enumerable: !0, configurable: !0, writable: !0, value: s }) : e[i] = s;
+var d = (e, i, s) => l(e, typeof i != "symbol" ? i + "" : i, s);
+class p {
+  constructor(i) {
+    d(this, "field");
+    this.field = i;
+  }
+  upDateValidate(i, s) {
+    this.field["k-design-props"] && (this.field["k-design-props"].validate = {
+      status: i,
+      message: s
+    });
+  }
+}
+export {
+  p as Field
+};

package/dist/es/src/core/FormSchema.mjs

@@ -1,27 +1,54 @@
-var i = Object.defineProperty;
-var a = (e, o, r) => o in e ? i(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r;
-var s = (e, o, r) => a(e, typeof o != "symbol" ? o + "" : o, r);
-import { reactive as l, ref as f, toRaw as t } from "vue";
-class c {
+var a = Object.defineProperty;
+var l = (s, e, t) => e in s ? a(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var i = (s, e, t) => l(s, typeof e != "symbol" ? e + "" : e, t);
+import { reactive as m, ref as c, toRaw as n } from "vue";
+import { uid as h } from "@king-one/utils";
+import { Field as f } from "./Field.mjs";
+class j {
   constructor() {
-    s(this, "version", "1.0.0");
-    s(this, "formProps", l({
+    i(this, "version", "1.0.0");
+    i(this, "formProps", m({
       layout: "horizontal",
       labelAlign: "left"
     }));
-    s(this, "fields", f([]));
+    i(this, "fields", c([]));
   }
   getSchema() {
-    const o = t(this.fields.value), r = t(this.formProps);
+    const e = n(this.fields.value), t = n(this.formProps), r = this.jsonToschema(e);
     return {
       version: this.version,
       form: {
-        ...r,
-        schema: o
+        ...t,
+        schema: r
       }
     };
   }
+  getFieldList() {
+    return this.fields.value.map((e) => new f(e));
+  }
+  jsonToschema(e, t = {}) {
+    return e.forEach((r) => {
+      const o = this.omit(r, ["children"]);
+      o.type === "object" || o.type === "void" ? t[o.name] = {
+        ...o,
+        properties: this.jsonToschema(r.children)
+      } : o.type === "array" ? t[o.name] = {
+        ...o,
+        items: {
+          type: "object",
+          id: h(),
+          properties: this.jsonToschema(r.children)
+        }
+      } : t[o.name] = o;
+    }), t;
+  }
+  omit(e, t) {
+    const r = { ...e };
+    return t.forEach((o) => {
+      delete r[o];
+    }), r;
+  }
 }
 export {
-  c as FormSchema
+  j as FormSchema
 };