@king-one/form-design 0.0.23 → 0.0.25

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @king-one/form-design
 
+## 0.0.25
+
+### Patch Changes
+
+- feat：增加一大波功能，主要为void类型的解析
+
+## 0.0.24
+
+### Patch Changes
+
+- feat：优化样式
+
 ## 0.0.23
 
 ### Patch Changes

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

@@ -1,29 +1,29 @@
-import { defineComponent as O, ref as b, openBlock as l, createElementBlock as d, normalizeClass as u, unref as o, createElementVNode as i, createVNode as a, withCtx as r, createTextVNode as x, Fragment as z, renderList as F, toDisplayString as v, createBlock as J, createCommentVNode as p } from "vue";
+import { defineComponent as J, ref as w, openBlock as l, createElementBlock as m, normalizeClass as u, unref as o, createElementVNode as n, createVNode as a, withCtx as r, createTextVNode as N, Fragment as T, renderList as W, toDisplayString as y, createBlock as K, createCommentVNode as p } from "vue";
 import "../internal.mjs";
-import { RadioGroup as T, RadioButton as w } from "ant-design-vue";
-import h from "vuedraggable";
-import { uid as W } from "@king-one/utils";
-import { useInjectDragContext as G, useInjectDesignContext as K } from "../context/design.mjs";
+import { RadioGroup as L, RadioButton as S } from "ant-design-vue";
+import $ from "vuedraggable";
+import { uid as D } from "@king-one/utils";
+import { useInjectDragContext as M, useInjectDesignContext as U } from "../context/design.mjs";
 import "./base/Carousel.vue2.mjs";
-import N from "./base/widget-icon.mjs";
+import V from "./base/widget-icon.mjs";
 import { useNamespace as g } from "../hooks/use-namespace/index.mjs";
-import L from "./base/Carousel.vue.mjs";
-const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { class: "widget-item" }, A = {
+import q from "./base/Carousel.vue.mjs";
+const A = { class: "widget-group-name" }, H = { class: "widget-col" }, P = { class: "widget-item" }, Q = {
   key: 0,
   class: "widget-item-icon"
-}, H = { class: "widget-item-title" }, P = { class: "template-item" }, Q = {
+}, X = { class: "widget-item-title" }, Y = { class: "template-item" }, Z = {
   key: 0,
   class: "template-item-icon"
-}, X = { class: "template-item-name" }, de = /* @__PURE__ */ O({
+}, ee = { class: "template-item-name" }, ue = /* @__PURE__ */ J({
   name: "FormMaterial",
   __name: "form-material",
-  setup(Y) {
-    const y = b(), { updateDrag: m } = G(), { b: S } = g("material"), { b: D } = g("toolbar"), { b: $ } = g("widget"), { b: j } = g("temp"), f = K(), { schema: B, tempSchema: E } = f, _ = b("1");
-    function I(s) {
-      const { icon: e, ...t } = s, n = JSON.parse(JSON.stringify(t)), k = W(), c = {
-        ...n,
-        name: k,
-        id: k,
+  setup(te) {
+    const k = w(), { updateDrag: c } = M(), { b: j } = g("material"), { b: B } = g("toolbar"), { b: E } = g("widget"), { b: I } = g("temp"), f = U(), { schema: R, tempSchema: O } = f, _ = w("1");
+    function z(s) {
+      const { icon: e, ...t } = s, i = JSON.parse(JSON.stringify(t)), C = D(), d = {
+        ...i,
+        name: C,
+        id: C,
         "x-design-props": Object.assign({
           validate: {
             status: "",
@@ -31,54 +31,75 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
           }
         }, s["x-design-props"] || {})
       };
-      (n.type === "array" || n.type === "object") && (c.children = []);
-      const { shared: C } = f;
-      return C.draggedContext.field = c, C.draggedContext.key = c.key, c;
+      if ((i.type === "array" || i.type === "object") && (d.children = []), i.key === "k-grid") {
+        const b = [];
+        let v = 0;
+        for (; v < 2; ) {
+          const h = D();
+          b.push({
+            title: `列表容器${v + 1}`,
+            name: h,
+            id: h,
+            key: "k-grid-column",
+            type: "void",
+            icon: "form-list",
+            children: [],
+            "x-component": "GridColumn",
+            "x-decorator": "Void",
+            "x-component-props": {
+              span: 12
+            }
+          }), v++;
+        }
+        d.children = b;
+      }
+      const { shared: x } = f;
+      return x.draggedContext.field = d, x.draggedContext.key = d.key, d;
     }
-    function R(s) {
+    function F(s) {
       const { schema: e } = s, { shared: t } = f;
       return t.draggedContext.field = e, t.draggedContext.key = e.key, e;
     }
-    function V(s) {
+    function G(s) {
       var e;
-      (e = y.value) == null || e.goTo(Number(s.target.value) - 1);
+      (e = k.value) == null || e.goTo(Number(s.target.value) - 1);
     }
-    return (s, e) => (l(), d(
+    return (s, e) => (l(), m(
       "div",
       {
-        class: u(o(S)())
+        class: u(o(j)())
       },
       [
-        i(
+        n(
           "div",
           {
-            class: u(o(D)())
+            class: u(o(B)())
           },
           [
-            a(o(T), {
+            a(o(L), {
               value: _.value,
               "onUpdate:value": e[0] || (e[0] = (t) => _.value = t),
               "button-style": "solid",
               size: "default",
-              onChange: V
+              onChange: G
             }, {
               default: r(() => [
-                a(o(w), {
+                a(o(S), {
                   class: "toolbar-button",
                   value: "1"
                 }, {
                   default: r(() => e[5] || (e[5] = [
-                    x(" 组件库 ")
+                    N(" 组件库 ")
                   ])),
                   _: 1,
                   __: [5]
                 }),
-                a(o(w), {
+                a(o(S), {
                   class: "toolbar-button",
                   value: "2"
                 }, {
                   default: r(() => e[6] || (e[6] = [
-                    x(" 业务套件 ")
+                    N(" 业务套件 ")
                   ])),
                   _: 1,
                   __: [6]
@@ -92,35 +113,35 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
           /* CLASS */
         ),
         a(
-          L,
+          q,
           {
             ref_key: "carouselRef",
-            ref: y,
+            ref: k,
             "model-value": 0
           },
           {
             default: r(() => [
-              i(
+              n(
                 "div",
                 {
-                  class: u(o($)())
+                  class: u(o(E)())
                 },
                 [
-                  (l(!0), d(
-                    z,
+                  (l(!0), m(
+                    T,
                     null,
-                    F(o(B), (t) => (l(), d("div", {
+                    W(o(R), (t) => (l(), m("div", {
                       key: t.key,
                       class: "widget-group"
                     }, [
-                      i(
+                      n(
                         "div",
-                        M,
-                        v(t.name),
+                        A,
+                        y(t.name),
                         1
                         /* TEXT */
                       ),
-                      t.widget ? (l(), J(o(h), {
+                      t.widget ? (l(), K(o($), {
                         key: 0,
                         list: t.widget,
                         class: "widget-list-drag",
@@ -128,22 +149,22 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
                         group: { name: "form", pull: "clone", put: !1 },
                         sort: !1,
                         options: { animation: 150 },
-                        clone: I,
-                        onStart: e[1] || (e[1] = (n) => o(m)(!0)),
-                        onEnd: e[2] || (e[2] = (n) => o(m)(!1))
+                        clone: z,
+                        onStart: e[1] || (e[1] = (i) => o(c)(!0)),
+                        onEnd: e[2] || (e[2] = (i) => o(c)(!1))
                       }, {
-                        item: r(({ element: n }) => [
-                          i("div", U, [
-                            i("div", q, [
-                              n.icon ? (l(), d("div", A, [
-                                a(o(N), {
-                                  icon: n.icon
+                        item: r(({ element: i }) => [
+                          n("div", H, [
+                            n("div", P, [
+                              i.icon ? (l(), m("div", Q, [
+                                a(o(V), {
+                                  icon: i.icon
                                 }, null, 8, ["icon"])
                               ])) : p("v-if", !0),
-                              i(
+                              n(
                                 "div",
-                                H,
-                                v(n.title),
+                                X,
+                                y(i.title),
                                 1
                                 /* TEXT */
                               )
@@ -161,34 +182,34 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
                 2
                 /* CLASS */
               ),
-              i(
+              n(
                 "div",
                 {
-                  class: u(o(j)())
+                  class: u(o(I)())
                 },
                 [
-                  a(o(h), {
-                    list: o(E),
+                  a(o($), {
+                    list: o(O),
                     class: "template-list-drag",
                     "item-key": "key",
                     group: { name: "form", pull: "clone", put: !1 },
                     sort: !1,
                     options: { animation: 150 },
-                    clone: R,
-                    onStart: e[3] || (e[3] = (t) => o(m)(!0)),
-                    onEnd: e[4] || (e[4] = (t) => o(m)(!1))
+                    clone: F,
+                    onStart: e[3] || (e[3] = (t) => o(c)(!0)),
+                    onEnd: e[4] || (e[4] = (t) => o(c)(!1))
                   }, {
                     item: r(({ element: t }) => [
-                      i("div", P, [
-                        t.icon ? (l(), d("div", Q, [
-                          a(o(N), {
+                      n("div", Y, [
+                        t.icon ? (l(), m("div", Z, [
+                          a(o(V), {
                             icon: t.icon
                           }, null, 8, ["icon"])
                         ])) : p("v-if", !0),
-                        i(
+                        n(
                           "div",
-                          X,
-                          v(t.name),
+                          ee,
+                          y(t.name),
                           1
                           /* TEXT */
                         )
@@ -225,5 +246,5 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
   }
 });
 export {
-  de as default
+  ue as default
 };

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

@@ -1,38 +1,36 @@
-import { defineComponent as z, ref as v, nextTick as A, toRaw as E, openBlock as h, createElementBlock as k, normalizeClass as c, unref as e, createElementVNode as o, createVNode as s, withCtx as i, createCommentVNode as f, renderSlot as C, withDirectives as b, vShow as x } from "vue";
+import { defineComponent as V, ref as v, nextTick as z, toRaw as A, openBlock as h, createElementBlock as C, normalizeClass as c, unref as e, createElementVNode as o, createVNode as s, withCtx as i, createCommentVNode as f, renderSlot as k, withDirectives as x, vShow as b } from "vue";
 import "../internal.mjs";
-import { Tooltip as D, Form as R } from "ant-design-vue";
-import T from "vuedraggable";
-import { useInjectDragContext as j, useInjectDesignContext as B } from "../context/design.mjs";
+import { Modal as E, Tooltip as D, Form as R } from "ant-design-vue";
+import j from "vuedraggable";
+import { useInjectDragContext as B, useInjectDesignContext as J } from "../context/design.mjs";
 import "./panel/panel-item.vue2.mjs";
-import J from "./base/json-preview.vue.mjs";
+import O from "./base/json-preview.vue.mjs";
 import "./index.mjs";
-import { useNamespace as O } from "../hooks/use-namespace/index.mjs";
+import { useNamespace as M } from "../hooks/use-namespace/index.mjs";
 import S from "./form-icon.vue2.mjs";
 import P from "./panel/panel-item.vue.mjs";
 const q = { class: "left" }, G = { class: "right" }, H = { class: "content-panel" }, K = {
   key: 0,
   class: "prompt"
-}, L = { class: "form-item" }, M = { class: "content-editor" }, le = /* @__PURE__ */ z({
+}, L = { class: "form-item" }, Q = { class: "content-editor" }, ie = /* @__PURE__ */ V({
   name: "FormPanel",
   __name: "form-panel",
-  setup(Q) {
-    const p = v({}), { isDrag: w } = j(), d = v(!1), a = B(), { fields: r } = a;
+  setup(U) {
+    const p = v({}), { isDrag: w } = B(), d = v(!1), a = J(), { fields: r } = a;
     function y() {
-      d.value = !d.value, A(() => {
+      d.value = !d.value, z(() => {
         p.value = a.getFormSchema();
       });
     }
-    function F() {
-    }
-    const { b: $, e: u, em: g } = O("panel");
-    function I(l, t) {
-      const n = E(l), { oldIndex: V } = t, m = n[V];
+    const { b: F, e: u, em: g } = M("panel");
+    function $(l, t) {
+      const n = A(l), { oldIndex: T } = t, m = n[T];
       if (m) {
         const { shared: _ } = a;
         _.draggedContext.key = m.key, _.draggedContext.field = m;
       }
     }
-    async function N() {
+    async function I() {
       const { shared: l } = a, { field: t } = l.draggedContext, n = {
         source: t,
         traget: r.value,
@@ -40,10 +38,24 @@ const q = { class: "left" }, G = { class: "right" }, H = { class: "content-panel
       };
       a.hooks.syncDragAdd.call(n), a.setCheckedField(t);
     }
-    return (l, t) => (h(), k(
+    function N() {
+      E.confirm({
+        title: "提示?",
+        content: "确定要清空所有字段吗？",
+        okText: "确定",
+        cancelText: "取消",
+        onOk() {
+          a.clearFields();
+        },
+        onCancel() {
+          console.log("Cancel");
+        }
+      });
+    }
+    return (l, t) => (h(), C(
       "div",
       {
-        class: c(e($)())
+        class: c(e(F)())
       },
       [
         o(
@@ -68,7 +80,7 @@ const q = { class: "left" }, G = { class: "right" }, H = { class: "content-panel
                     name: "delete1",
                     class: c(e(g)("toolbar", "icon")),
                     size: 18,
-                    onClick: F
+                    onClick: N
                   }, null, 8, ["class"])
                 ]),
                 _: 1
@@ -99,7 +111,7 @@ const q = { class: "left" }, G = { class: "right" }, H = { class: "content-panel
         <FormIcon name="mobile" /> `)
             ]),
             o("div", G, [
-              C(l.$slots, "toolbar")
+              k(l.$slots, "toolbar")
             ])
           ],
           2
@@ -112,18 +124,18 @@ const q = { class: "left" }, G = { class: "right" }, H = { class: "content-panel
             class: c(e(u)("content"))
           },
           [
-            b(o(
+            x(o(
               "div",
               H,
               [
-                !e(w) && e(r).length === 0 ? (h(), k("div", K, " 👈 请在左侧选择控件并拖至此处 ")) : f("v-if", !0),
+                !e(w) && e(r).length === 0 ? (h(), C("div", K, " 👈 请在左侧选择控件并拖至此处 ")) : f("v-if", !0),
                 s(e(R), {
                   autocomplete: "off",
                   class: "design-from",
                   "label-align": "left"
                 }, {
                   default: i(() => [
-                    s(e(T), {
+                    s(e(j), {
                       class: "drag-from",
                       list: e(r),
                       group: { name: "form" },
@@ -131,12 +143,12 @@ const q = { class: "left" }, G = { class: "right" }, H = { class: "content-panel
                       sort: !0,
                       "item-key": "id",
                       "chosen-class": "choose",
-                      onStart: t[0] || (t[0] = (n) => I(e(r), n)),
-                      onAdd: N
+                      onStart: t[0] || (t[0] = (n) => $(e(r), n)),
+                      onAdd: I
                     }, {
                       item: i(({ element: n }) => [
                         o("div", L, [
-                          C(l.$slots, `panel-${n.key}`, {}, () => [
+                          k(l.$slots, `panel-${n.key}`, {}, () => [
                             s(P, {
                               field: n,
                               space: e(r)
@@ -155,18 +167,18 @@ const q = { class: "left" }, G = { class: "right" }, H = { class: "content-panel
               512
               /* NEED_PATCH */
             ), [
-              [x, !d.value]
+              [b, !d.value]
             ]),
-            b(o(
+            x(o(
               "div",
-              M,
+              Q,
               [
-                s(J, { data: p.value }, null, 8, ["data"])
+                s(O, { data: p.value }, null, 8, ["data"])
               ],
               512
               /* NEED_PATCH */
             ), [
-              [x, d.value]
+              [b, d.value]
             ])
           ],
           2
@@ -179,5 +191,5 @@ const q = { class: "left" }, G = { class: "right" }, H = { class: "content-panel
   }
 });
 export {
-  le as default
+  ie as default
 };

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

@@ -1,4 +1,4 @@
-import { Input as m, Textarea as o, InputNumber as i } from "ant-design-vue";
+import { Input as t, Textarea as o, InputNumber as i } from "ant-design-vue";
 import "./widget/object.vue.mjs";
 import { panelWarpper as r } from "./panel-wrapper.mjs";
 import "./widget/select.vue.mjs";
@@ -7,26 +7,29 @@ import "./widget/date-range.vue.mjs";
 import "./widget/date-single.vue.mjs";
 import "./widget/kit.vue.mjs";
 import "./widget/array-table.vue.mjs";
-import e from "./widget/select.vue2.mjs";
-import p from "./widget/object.vue2.mjs";
+import "./widget/grid.vue.mjs";
+import p from "./widget/select.vue2.mjs";
+import e from "./widget/object.vue2.mjs";
 import a from "./widget/date-range.vue2.mjs";
 import n from "./widget/date-single.vue2.mjs";
 import f from "./widget/array-card.vue2.mjs";
-import t from "./widget/kit.vue2.mjs";
-import c from "./widget/array-table.vue2.mjs";
-const s = r(m), _ = r(o), k = r(i), W = {
+import m from "./widget/kit.vue2.mjs";
+import _ from "./widget/array-table.vue2.mjs";
+import c from "./widget/grid.vue2.mjs";
+const s = r(t), k = r(o), u = r(i), z = {
   "k-input": s,
-  "k-textarea": _,
-  "k-input-number": k,
-  "k-select": e,
-  "k-object": p,
+  "k-textarea": k,
+  "k-input-number": u,
+  "k-select": p,
+  "k-object": e,
   "k-date-range": a,
   "k-date-single": n,
   "k-array-card": f,
-  "k-overtime": t,
-  "k-leave": t,
-  "k-table": c
+  "k-overtime": m,
+  "k-leave": m,
+  "k-table": _,
+  "k-grid": c
 };
 export {
-  W as widgetPanels
+  z as widgetPanels
 };

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

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

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

@@ -0,0 +1,117 @@
+import { defineComponent as w, toRaw as b, openBlock as l, createElementBlock as g, normalizeClass as p, unref as i, createElementVNode as c, toDisplayString as v, createVNode as f, mergeProps as D, withCtx as m, Fragment as S, renderList as A, createBlock as I, renderSlot as R } from "vue";
+import _ from "vuedraggable";
+import { message as B, Row as N, Col as u } from "ant-design-vue";
+import "../../../index.mjs";
+import "../../../internal.mjs";
+import { useNamespace as h } from "../../../hooks/use-namespace/index.mjs";
+import { useInjectDesignContext as $ } from "../../../context/design.mjs";
+import E from "../panel-item.vue.mjs";
+const V = { class: "form-item" }, J = /* @__PURE__ */ w({
+  __name: "grid",
+  props: {
+    field: {}
+  },
+  setup(a) {
+    const { b: x } = h("grid-widget"), { b: k } = h("panel-drag"), d = $();
+    function y(o, r) {
+      const n = b(o), { oldIndex: s } = r, e = n[s];
+      if (e) {
+        const { shared: t } = d;
+        t.draggedContext.key = e.key, t.draggedContext.field = e;
+      }
+    }
+    function C() {
+      const { shared: o } = d, { field: r } = o.draggedContext, n = {
+        source: r,
+        traget: a.field.children,
+        region: "k-grid"
+      };
+      if (d.hooks.syncDragAdd.call(n), !d.dragAddResult.every((e) => e)) {
+        const e = a.field.children.findIndex((t) => t.id === r.id);
+        e !== -1 && (a.field.children.splice(e, 1), B.warning("不能将该控件拖拽到列表容器中"));
+      }
+    }
+    return (o, r) => (l(), g(
+      "div",
+      {
+        class: p(i(x)())
+      },
+      [
+        c(
+          "div",
+          null,
+          v(o.field.title),
+          1
+          /* TEXT */
+        ),
+        f(
+          i(N),
+          D(i(u)["x-component-props"], { class: "grid-row" }),
+          {
+            default: m(() => [
+              (l(!0), g(
+                S,
+                null,
+                A(o.field.children, (n, s) => {
+                  var e;
+                  return l(), I(i(u), {
+                    key: s,
+                    span: ((e = n["x-component-props"]) == null ? void 0 : e.span) || 12,
+                    class: "grid-col"
+                  }, {
+                    default: m(() => [
+                      f(i(_), {
+                        list: n.children,
+                        group: { name: "form" },
+                        animation: 300,
+                        sort: !0,
+                        class: p(i(k)()),
+                        "item-key": "id",
+                        "chosen-class": "choose",
+                        onStart: (t) => y(n.children, t),
+                        onAdd: C
+                      }, {
+                        item: m(({ element: t }) => [
+                          c("div", V, [
+                            R(o.$slots, `panel-${t.key}`, {}, () => [
+                              f(i(E), {
+                                field: t,
+                                space: n.children
+                              }, null, 8, ["field", "space"])
+                            ])
+                          ])
+                        ]),
+                        _: 2
+                        /* DYNAMIC */
+                      }, 1032, ["list", "class", "onStart"])
+                    ]),
+                    _: 2
+                    /* DYNAMIC */
+                  }, 1032, ["span"]);
+                }),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ]),
+            _: 3
+            /* FORWARDED */
+          },
+          16
+          /* FULL_PROPS */
+        ),
+        r[0] || (r[0] = c(
+          "div",
+          { style: { color: "#c0bebe", "text-align": "center", width: "90%", padding: "5px" } },
+          " ☝ 拖拽控件到容器内部 ",
+          -1
+          /* CACHED */
+        ))
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+export {
+  J as default
+};

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

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