@king-one/form-design 0.0.1 → 0.0.3

package/dist/es/src/components/form-setting.vue.mjs

@@ -1,80 +1,79 @@
-import { defineComponent as k, ref as v, computed as b, openBlock as s, createElementBlock as g, normalizeClass as y, createVNode as t, withCtx as o, withDirectives as C, createElementVNode as i, unref as e, createBlock as r, createTextVNode as h, vShow as x } from "vue";
-import { Tabs as $, TabPane as n, Collapse as z, CollapsePanel as m, Empty as N } from "ant-design-vue";
+import { defineComponent as C, ref as w, computed as c, openBlock as e, createElementBlock as _, normalizeClass as x, createVNode as s, withCtx as n, withDirectives as z, createElementVNode as m, unref as t, createBlock as r, Fragment as P, renderList as $, resolveDynamicComponent as B, vShow as D } from "vue";
+import { Tabs as E, TabPane as v, Collapse as F, Empty as N } from "ant-design-vue";
 import "../internal.mjs";
 import "../hooks/index.mjs";
 import "./form-icon.vue.mjs";
 import "./base/collapse.vue.mjs";
 import "./props/index.mjs";
-import { useInjectDesignContext as w } from "../context/design.mjs";
-import { useNamespace as c } from "../hooks/use-namespace/index.mjs";
-import B from "./base/collapse.vue2.mjs";
-import E from "./props/base-props.vue.mjs";
-import T from "./props/component-props.vue.mjs";
-import p from "./form-icon.vue2.mjs";
-const V = { class: "setting-aside" }, R = /* @__PURE__ */ k({
+import { useInjectDesignContext as j } from "../context/design.mjs";
+import { useNamespace as k } from "../hooks/use-namespace/index.mjs";
+import S from "./base/collapse.vue2.mjs";
+import T from "./props/form-props.vue2.mjs";
+import g from "./form-icon.vue2.mjs";
+const V = { style: { height: "100%" } }, I = { class: "setting-aside" }, X = /* @__PURE__ */ C({
   name: "FormSetting",
   __name: "form-setting",
-  setup(j) {
-    const { checkedField: d } = w(), { b: u } = c("setting"), { b: f } = c("setting-collapse"), a = v(!0), _ = b(() => [u(), !a.value && f()]);
-    return (D, l) => (s(), g(
+  setup(K) {
+    const { checkedField: u, shared: p } = j(), { b: y } = k("setting"), { b: h } = k("setting-collapse"), o = w(!0), b = c(() => [y(), !o.value && h()]), l = c(() => u.value.key), d = c(() => l.value && p.widgetProps[l.value] ? p.widgetProps[l.value].component.map((f, a) => ({
+      ...f,
+      key: a
+    })) : []);
+    return (f, a) => (e(), _(
       "div",
       {
-        class: y(_.value)
+        class: x(b.value)
       },
       [
-        t(B, null, {
-          default: o(() => [
-            C(i(
+        s(S, null, {
+          default: n(() => [
+            z(m(
               "div",
-              null,
+              V,
               [
-                i("aside", V, [
-                  t(e($), {
+                m("aside", I, [
+                  s(t(E), {
                     size: "small",
-                    centered: ""
+                    centered: "",
+                    class: "setting-tabs"
                   }, {
-                    default: o(() => [
-                      t(e(n), {
+                    default: n(() => [
+                      s(t(v), {
                         key: "1",
                         tab: "组件配置"
                       }, {
-                        default: o(() => [
-                          Object.keys(e(d)).length ? (s(), r(e(z), { key: 0 }, {
-                            default: o(() => [
-                              t(e(m), { header: "基础设置" }, {
-                                default: o(() => [
-                                  t(e(E))
-                                ]),
-                                _: 1
-                                /* STABLE */
-                              }),
-                              t(e(m), { header: "属性设置" }, {
-                                default: o(() => [
-                                  t(e(T))
-                                ]),
-                                _: 1
-                                /* STABLE */
-                              })
+                        default: n(() => [
+                          Object.keys(t(u)).length && d.value.length ? (e(), r(t(F), { key: 0 }, {
+                            default: n(() => [
+                              (e(!0), _(
+                                P,
+                                null,
+                                $(d.value, (i) => (e(), r(B(i), {
+                                  key: i.key
+                                }))),
+                                128
+                                /* KEYED_FRAGMENT */
+                              ))
                             ]),
                             _: 1
                             /* STABLE */
-                          })) : (s(), r(e(N), {
+                          })) : (e(), r(t(N), {
                             key: 1,
-                            description: "暂无配置"
+                            style: { "margin-top": "50px" },
+                            description: "请选择添加的组件"
                           }))
                         ]),
                         _: 1
                         /* STABLE */
                       }),
-                      t(e(n), {
+                      s(t(v), {
                         key: "2",
                         tab: "表单配置"
                       }, {
-                        default: o(() => l[1] || (l[1] = [
-                          h(" 表单配置 ")
-                        ])),
-                        _: 1,
-                        __: [1]
+                        default: n(() => [
+                          s(t(T))
+                        ]),
+                        _: 1
+                        /* STABLE */
                       })
                     ]),
                     _: 1
@@ -85,24 +84,24 @@ const V = { class: "setting-aside" }, R = /* @__PURE__ */ k({
               512
               /* NEED_PATCH */
             ), [
-              [x, a.value]
+              [D, o.value]
             ])
           ]),
           _: 1
           /* STABLE */
         }),
-        i("div", {
+        m("div", {
           class: "setting-collapse",
-          onClick: l[0] || (l[0] = (F) => a.value = !a.value)
+          onClick: a[0] || (a[0] = (i) => o.value = !o.value)
         }, [
-          a.value ? (s(), r(p, {
-            key: 0,
-            name: "double-left",
-            size: 18
-          })) : (s(), r(p, {
+          o.value ? (e(), r(g, {
             key: 1,
             name: "double-right",
             size: 18
+          })) : (e(), r(g, {
+            key: 0,
+            name: "double-left",
+            size: 18
           }))
         ])
       ],
@@ -112,5 +111,5 @@ const V = { class: "setting-aside" }, R = /* @__PURE__ */ k({
   }
 });
 export {
-  R as default
+  X as default
 };

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

@@ -1,9 +1,19 @@
-import { Input as t, Textarea as e, InputNumber as n } from "ant-design-vue";
-const r = {
-  input: t,
-  textarea: e,
-  "input-number": n
+import { Input as r, Textarea as m, InputNumber as o } from "ant-design-vue";
+import "./widget/object.vue.mjs";
+import { panelWarpper as t } from "./panel-wrapper.mjs";
+import "./widget/select.vue.mjs";
+import "./widget/array-card.vue.mjs";
+import p from "./widget/select.vue2.mjs";
+import e from "./widget/object.vue2.mjs";
+import n from "./widget/array-card.vue2.mjs";
+const a = t(r), i = t(m), c = t(o), l = {
+  "k-input": a,
+  "k-textarea": i,
+  "k-input-number": c,
+  "k-select": p,
+  "k-object": e,
+  "k-array-card": n
 };
 export {
-  r as panels
+  l as widgetPanels
 };

package/dist/es/src/components/panel/panel-item.vue.mjs

@@ -1,4 +1,114 @@
-import f from "./panel-item.vue2.mjs";
+import { defineComponent as j, computed as g, openBlock as n, createElementBlock as b, normalizeClass as f, withModifiers as F, unref as t, createBlock as d, resolveDynamicComponent as $, withCtx as z, createElementVNode as A, createCommentVNode as r, createVNode as M, defineAsyncComponent as O } from "vue";
+import { FormItem as S, Tooltip as T } from "ant-design-vue";
+import "../../internal.mjs";
+import { useInjectDesignContext as W } from "../../context/design.mjs";
+import "../index.mjs";
+import { useNamespace as _ } from "../../hooks/use-namespace/index.mjs";
+import p from "../form-icon.vue2.mjs";
+const q = {
+  key: 2,
+  class: "icons"
+}, R = /* @__PURE__ */ j({
+  __name: "panel-item",
+  props: {
+    field: {},
+    space: {}
+  },
+  setup(D) {
+    const o = D, { b: I, e: m, m: u } = _("panel-item"), v = W(), { checkedField: a, shared: N } = v;
+    function w(e, i = {}) {
+      return Object.entries(e).forEach(([l, s]) => {
+        typeof s == "function" ? i[l] = O(s) : i[l] = s;
+      }), i;
+    }
+    const k = w(N.panelWidgets);
+    function B(e) {
+      a.value = e;
+    }
+    const c = g(() => {
+      var i, l;
+      return ((l = (i = o.field["k-design-props"]) == null ? void 0 : i.validate) == null ? void 0 : l.status) === "error";
+    }), E = g(() => {
+      var i;
+      const e = [I()];
+      return ((i = a.value) == null ? void 0 : i.id) === o.field.id && e.push(u("active")), c.value && e.push(u("error")), e;
+    });
+    function V() {
+      if (!v.hooks.beforeDelete.call(o.field))
+        return;
+      const i = o.space.findIndex((l) => l.id === o.field.id);
+      i !== -1 && o.space.splice(i, 1);
+    }
+    return (e, i) => {
+      var l, s, y, C, h;
+      return n(), b(
+        "div",
+        {
+          class: f(E.value),
+          onClick: i[0] || (i[0] = F((x) => B(e.field), ["stop"]))
+        },
+        [
+          t(k)[e.field.key] ? (n(), d($(t(k)[e.field.key]), {
+            key: 0,
+            style: { width: "100%" },
+            readonly: "",
+            field: e.field
+          }, null, 8, ["field"])) : (n(), d(t(S), {
+            key: 1,
+            class: f(t(m)("form")),
+            label: e.field.title
+          }, {
+            default: z(() => [
+              A(
+                "div",
+                {
+                  class: f(t(m)("error"))
+                },
+                " 未定义组件 ",
+                2
+                /* CLASS */
+              )
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class", "label"])),
+          ((l = t(a)) == null ? void 0 : l.id) === e.field.id || c.value ? (n(), b("div", q, [
+            ((s = t(a)) == null ? void 0 : s.id) === e.field.id ? (n(), d(t(p), {
+              key: 0,
+              name: "copy",
+              class: "panel-icon",
+              size: 15
+            })) : r("v-if", !0),
+            ((y = t(a)) == null ? void 0 : y.id) === e.field.id ? (n(), d(t(p), {
+              key: 1,
+              name: "delete1",
+              class: "panel-icon",
+              size: 15,
+              onClick: V
+            })) : r("v-if", !0),
+            M(t(T), {
+              title: (h = (C = e.field["k-design-props"]) == null ? void 0 : C.validate) == null ? void 0 : h.message,
+              color: "pink"
+            }, {
+              default: z(() => [
+                c.value ? (n(), d(t(p), {
+                  key: 0,
+                  name: "exclamation-circle-filled",
+                  size: 13,
+                  class: "panel-exclamation-icon"
+                })) : r("v-if", !0)
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["title"])
+          ])) : r("v-if", !0)
+        ],
+        2
+        /* CLASS */
+      );
+    };
+  }
+});
 export {
-  f as default
+  R as default
 };

package/dist/es/src/components/panel/panel-item.vue2.mjs

@@ -1,66 +1,4 @@
-import { defineComponent as k, computed as v, openBlock as l, createElementBlock as c, normalizeClass as n, createVNode as C, unref as o, withCtx as y, createBlock as b, resolveDynamicComponent as g, mergeProps as h } from "vue";
-import { FormItem as B } from "ant-design-vue";
-import "../../internal.mjs";
-import { useInjectDesignContext as w } from "../../context/design.mjs";
-import { useNamespace as D } from "../../hooks/use-namespace/index.mjs";
-const P = /* @__PURE__ */ k({
-  __name: "panel-item",
-  props: {
-    field: {}
-  },
-  setup(p) {
-    const d = p, { b: t, e: r, m: i } = D("panel-item");
-    console.log(i("active"));
-    const { panelComponents: s, checkedField: a } = w();
-    function f(e) {
-      a.value = e;
-    }
-    const u = v(() => {
-      var e;
-      return ((e = a.value) == null ? void 0 : e.id) === d.field.id ? [t(), i("active")] : [t()];
-    });
-    return (e, m) => (l(), c(
-      "div",
-      {
-        class: n(u.value),
-        onClick: m[0] || (m[0] = (F) => f(e.field))
-      },
-      [
-        C(o(B), {
-          class: n(o(r)("form")),
-          label: e.field.title
-        }, {
-          default: y(() => [
-            o(s)[e.field.key] ? (l(), b(
-              g(o(s)[e.field.key]),
-              h({
-                key: 0,
-                style: { width: "100%" },
-                readonly: ""
-              }, e.field["k-component-props"]),
-              null,
-              16
-              /* FULL_PROPS */
-            )) : (l(), c(
-              "div",
-              {
-                key: 1,
-                class: n(o(r)("error"))
-              },
-              " 未定义组件 ",
-              2
-              /* CLASS */
-            ))
-          ]),
-          _: 1
-          /* STABLE */
-        }, 8, ["class", "label"])
-      ],
-      2
-      /* CLASS */
-    ));
-  }
-});
+import f from "./panel-item.vue.mjs";
 export {
-  P as default
+  f as default
 };

package/dist/es/src/components/panel/panel-wrapper.mjs

@@ -0,0 +1,34 @@
+import { defineComponent as n, createVNode as m, h as a } from "vue";
+import { FormItem as l } from "ant-design-vue";
+import "../../internal.mjs";
+import { defaultNamespace as f } from "../../hooks/use-namespace/index.mjs";
+function s(o) {
+  return /* @__PURE__ */ n({
+    name: "panelWarpper",
+    props: {
+      field: {
+        type: Object
+      }
+    },
+    setup(e) {
+      var r;
+      const p = (r = e.field) == null ? void 0 : r["k-component-props"];
+      return () => {
+        var t;
+        return m(l, {
+          class: [`${f}-panel-item__form`],
+          label: (t = e.field) == null ? void 0 : t.title
+        }, {
+          default: () => a(o, {
+            ...p,
+            readonly: !0
+          }),
+          _: 1
+        }, 8, ["label"]);
+      };
+    }
+  });
+}
+export {
+  s as panelWarpper
+};

package/dist/es/src/components/panel/widget/array-card.vue.mjs

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

package/dist/es/src/components/panel/widget/array-card.vue2.mjs

@@ -0,0 +1,71 @@
+import { defineComponent as u, toRaw as g, openBlock as h, createElementBlock as y, createElementVNode as n, toDisplayString as k, createVNode as l, unref as r, normalizeClass as C, withCtx as v, renderSlot as b } from "vue";
+import w from "vuedraggable";
+import "../../../internal.mjs";
+import "../../../index.mjs";
+import { useInjectDesignContext as x } from "../../../context/design.mjs";
+import { useNamespace as S } from "../../../hooks/use-namespace/index.mjs";
+import D from "../panel-item.vue.mjs";
+const N = { class: "form-item" }, j = /* @__PURE__ */ u({
+  inheritAttrs: !1,
+  __name: "array-card",
+  props: {
+    field: {}
+  },
+  setup(s) {
+    const a = x(), { b: d } = S("panel-drag");
+    function m() {
+      return !0;
+    }
+    function c(e, t) {
+      const o = g(e), { oldIndex: f } = t, i = o[f];
+      if (i) {
+        const { shared: p } = a;
+        p.draggedContext.key = i.key;
+      }
+    }
+    return console.log(s.field), (e, t) => (h(), y("div", null, [
+      n(
+        "div",
+        null,
+        k(e.field.title),
+        1
+        /* TEXT */
+      ),
+      n("div", null, [
+        l(r(w), {
+          list: e.field.children,
+          class: C(r(d)()),
+          group: { name: "form", put: m },
+          animation: 300,
+          sort: !0,
+          "item-key": "id",
+          "chosen-class": "choose",
+          onStart: t[0] || (t[0] = (o) => c(e.field.children, o))
+        }, {
+          item: v(({ element: o }) => [
+            n("div", N, [
+              b(e.$slots, `panel-${o.key}`, {}, () => [
+                l(r(D), {
+                  field: o,
+                  space: e.field.children
+                }, null, 8, ["field", "space"])
+              ])
+            ])
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["list", "class", "group"]),
+        t[1] || (t[1] = n(
+          "div",
+          { style: { color: "#c0bebe", "text-align": "center", width: "90%", padding: "5px" } },
+          " ☝ 拖拽控件到容器内部 ",
+          -1
+          /* CACHED */
+        ))
+      ])
+    ]));
+  }
+});
+export {
+  j as default
+};

package/dist/es/src/components/panel/widget/object.vue.mjs

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

package/dist/es/src/components/panel/widget/object.vue2.mjs

@@ -0,0 +1,71 @@
+import { defineComponent as u, toRaw as g, openBlock as h, createElementBlock as k, createElementVNode as n, toDisplayString as y, createVNode as l, unref as i, normalizeClass as C, withCtx as b, renderSlot as v } from "vue";
+import w from "vuedraggable";
+import "../../../internal.mjs";
+import "../../../index.mjs";
+import { useInjectDesignContext as x } from "../../../context/design.mjs";
+import { useNamespace as S } from "../../../hooks/use-namespace/index.mjs";
+import D from "../panel-item.vue.mjs";
+const N = { class: "form-item" }, _ = /* @__PURE__ */ u({
+  inheritAttrs: !1,
+  __name: "object",
+  props: {
+    field: {}
+  },
+  setup(s) {
+    const a = x(), { b: d } = S("panel-drag");
+    function m() {
+      return !0;
+    }
+    function c(e, t) {
+      const o = g(e), { oldIndex: f } = t, r = o[f];
+      if (r) {
+        const { shared: p } = a;
+        p.draggedContext.key = r.key;
+      }
+    }
+    return console.log(s.field), (e, t) => (h(), k("div", null, [
+      n(
+        "div",
+        null,
+        y(e.field.title),
+        1
+        /* TEXT */
+      ),
+      n("div", null, [
+        l(i(w), {
+          list: e.field.children,
+          class: C(i(d)()),
+          group: { name: "form", put: m },
+          animation: 300,
+          sort: !0,
+          "item-key": "id",
+          "chosen-class": "choose",
+          onStart: t[0] || (t[0] = (o) => c(e.field.children, o))
+        }, {
+          item: b(({ element: o }) => [
+            n("div", N, [
+              v(e.$slots, `panel-${o.key}`, {}, () => [
+                l(i(D), {
+                  field: o,
+                  space: e.field.children
+                }, null, 8, ["field", "space"])
+              ])
+            ])
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["list", "class", "group"]),
+        t[1] || (t[1] = n(
+          "div",
+          { style: { color: "#c0bebe", "text-align": "center", width: "90%", padding: "5px" } },
+          " ☝ 拖拽控件到布局容器内部 ",
+          -1
+          /* CACHED */
+        ))
+      ])
+    ]));
+  }
+});
+export {
+  _ as default
+};

package/dist/es/src/components/panel/widget/select.vue.mjs

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

package/dist/es/src/components/panel/widget/select.vue2.mjs

@@ -0,0 +1,23 @@
+import { defineComponent as p, toRef as r, openBlock as l, createBlock as s, unref as o, withCtx as i, createVNode as c, mergeProps as f } from "vue";
+import { FormItem as m, Select as a } from "ant-design-vue";
+const b = /* @__PURE__ */ p({
+  __name: "select",
+  props: {
+    field: {}
+  },
+  setup(t) {
+    const n = r(t.field, "enum");
+    return (e, d) => (l(), s(o(m), {
+      label: e.field.title
+    }, {
+      default: i(() => [
+        c(o(a), f(e.field["k-component-props"], { options: n.value }), null, 16, ["options"])
+      ]),
+      _: 1
+      /* STABLE */
+    }, 8, ["label"]));
+  }
+});
+export {
+  b as default
+};

package/dist/es/src/components/props/form-props.vue.mjs

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

package/dist/es/src/components/props/form-props.vue2.mjs

@@ -0,0 +1,68 @@
+import { defineComponent as s, openBlock as m, createElementBlock as c, createCommentVNode as d, createVNode as t, unref as e, withCtx as n } from "vue";
+import { Form as f, FormItem as r, Select as p } from "ant-design-vue";
+import "../../internal.mjs";
+import { useInjectDesignContext as v } from "../../context/design.mjs";
+const b = { style: { padding: "10px" } }, k = /* @__PURE__ */ s({
+  __name: "form-props",
+  setup(_) {
+    const o = v().getFormProps(), i = [
+      {
+        value: "horizontal",
+        label: "水平"
+      },
+      {
+        value: "vertical",
+        label: "垂直"
+      }
+    ], u = [
+      {
+        value: "left",
+        label: "左对齐"
+      },
+      {
+        value: "right",
+        label: "右对齐"
+      }
+    ];
+    return (g, l) => (m(), c("div", b, [
+      d(` :label-col="{ style: { width: '85px' } }" `),
+      t(e(f), { layout: "vertical" }, {
+        default: n(() => [
+          t(e(r), {
+            label: "表单布局",
+            tooltip: "表单布局"
+          }, {
+            default: n(() => [
+              t(e(p), {
+                value: e(o).layout,
+                "onUpdate:value": l[0] || (l[0] = (a) => e(o).layout = a),
+                options: i
+              }, null, 8, ["value"])
+            ]),
+            _: 1
+            /* STABLE */
+          }),
+          t(e(r), {
+            label: "标签对齐方式",
+            tooltip: "标签对齐方式"
+          }, {
+            default: n(() => [
+              t(e(p), {
+                value: e(o).labelAlign,
+                "onUpdate:value": l[1] || (l[1] = (a) => e(o).labelAlign = a),
+                options: u
+              }, null, 8, ["value"])
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      })
+    ]));
+  }
+});
+export {
+  k as default
+};