@king-one/form-design 0.0.18 → 0.0.19

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @king-one/form-design
 
+## 0.0.19
+
+### Patch Changes
+
+- feat：升级部分功能
+
 ## 0.0.18
 
 ### Patch Changes

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

@@ -1,12 +1,12 @@
-import { defineComponent as O, ref as b, openBlock as l, createElementBlock as d, normalizeClass as c, unref as o, createElementVNode as n, createVNode as a, withCtx as r, createTextVNode as x, Fragment as z, renderList as F, toDisplayString as v, createBlock as J, createCommentVNode as u } from "vue";
+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 "../internal.mjs";
 import { RadioGroup as T, RadioButton as w } from "ant-design-vue";
-import N from "vuedraggable";
+import h from "vuedraggable";
 import { uid as W } from "@king-one/utils";
 import { useInjectDragContext as G, useInjectDesignContext as K } from "../context/design.mjs";
 import "./base/Carousel.vue2.mjs";
-import h from "./base/widget-icon.mjs";
-import { useNamespace as p } from "../hooks/use-namespace/index.mjs";
+import N 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 = {
   key: 0,
@@ -18,10 +18,10 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
   name: "FormMaterial",
   __name: "form-material",
   setup(Y) {
-    const _ = b(), { updateDrag: m } = G(), { b: S } = p("material"), { b: D } = p("toolbar"), { b: $ } = p("widget"), { b: B } = p("temp"), g = K(), { schema: E, tempSchema: I } = g, y = b("1");
-    function R(i) {
-      const { icon: e, ...t } = i, s = JSON.parse(JSON.stringify(t)), k = W(), f = {
-        ...s,
+    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,
         "x-design-props": Object.assign({
@@ -29,36 +29,38 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
             status: "",
             message: ""
           }
-        }, i["x-design-props"] || {})
-      }, { shared: C } = g;
-      return C.draggedContext.field = f, C.draggedContext.key = f.key, f;
+        }, 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;
     }
-    function V(i) {
-      const { schema: e } = i, { shared: t } = g;
+    function R(s) {
+      const { schema: e } = s, { shared: t } = f;
       return t.draggedContext.field = e, t.draggedContext.key = e.key, e;
     }
-    function j(i) {
+    function V(s) {
       var e;
-      (e = _.value) == null || e.goTo(Number(i.target.value) - 1);
+      (e = y.value) == null || e.goTo(Number(s.target.value) - 1);
     }
-    return (i, e) => (l(), d(
+    return (s, e) => (l(), d(
       "div",
       {
-        class: c(o(S)())
+        class: u(o(S)())
       },
       [
-        n(
+        i(
           "div",
           {
-            class: c(o(D)())
+            class: u(o(D)())
           },
           [
             a(o(T), {
-              value: y.value,
-              "onUpdate:value": e[0] || (e[0] = (t) => y.value = t),
+              value: _.value,
+              "onUpdate:value": e[0] || (e[0] = (t) => _.value = t),
               "button-style": "solid",
               size: "default",
-              onChange: j
+              onChange: V
             }, {
               default: r(() => [
                 a(o(w), {
@@ -93,32 +95,32 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
           L,
           {
             ref_key: "carouselRef",
-            ref: _,
+            ref: y,
             "model-value": 0
           },
           {
             default: r(() => [
-              n(
+              i(
                 "div",
                 {
-                  class: c(o($)())
+                  class: u(o($)())
                 },
                 [
                   (l(!0), d(
                     z,
                     null,
-                    F(o(E), (t) => (l(), d("div", {
+                    F(o(B), (t) => (l(), d("div", {
                       key: t.key,
                       class: "widget-group"
                     }, [
-                      n(
+                      i(
                         "div",
                         M,
                         v(t.name),
                         1
                         /* TEXT */
                       ),
-                      t.widget ? (l(), J(o(N), {
+                      t.widget ? (l(), J(o(h), {
                         key: 0,
                         list: t.widget,
                         class: "widget-list-drag",
@@ -126,22 +128,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: R,
-                        onStart: e[1] || (e[1] = (s) => o(m)(!0)),
-                        onEnd: e[2] || (e[2] = (s) => o(m)(!1))
+                        clone: I,
+                        onStart: e[1] || (e[1] = (n) => o(m)(!0)),
+                        onEnd: e[2] || (e[2] = (n) => o(m)(!1))
                       }, {
-                        item: r(({ element: s }) => [
-                          n("div", U, [
-                            n("div", q, [
-                              s.icon ? (l(), d("div", A, [
-                                a(o(h), {
-                                  icon: s.icon
+                        item: r(({ element: n }) => [
+                          i("div", U, [
+                            i("div", q, [
+                              n.icon ? (l(), d("div", A, [
+                                a(o(N), {
+                                  icon: n.icon
                                 }, null, 8, ["icon"])
-                              ])) : u("v-if", !0),
-                              n(
+                              ])) : p("v-if", !0),
+                              i(
                                 "div",
                                 H,
-                                v(s.title),
+                                v(n.title),
                                 1
                                 /* TEXT */
                               )
@@ -150,7 +152,7 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
                         ]),
                         _: 2
                         /* DYNAMIC */
-                      }, 1032, ["list"])) : u("v-if", !0)
+                      }, 1032, ["list"])) : p("v-if", !0)
                     ]))),
                     128
                     /* KEYED_FRAGMENT */
@@ -159,31 +161,31 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
                 2
                 /* CLASS */
               ),
-              n(
+              i(
                 "div",
                 {
-                  class: c(o(B)())
+                  class: u(o(j)())
                 },
                 [
-                  a(o(N), {
-                    list: o(I),
+                  a(o(h), {
+                    list: o(E),
                     class: "template-list-drag",
                     "item-key": "key",
                     group: { name: "form", pull: "clone", put: !1 },
                     sort: !1,
                     options: { animation: 150 },
-                    clone: V,
+                    clone: R,
                     onStart: e[3] || (e[3] = (t) => o(m)(!0)),
                     onEnd: e[4] || (e[4] = (t) => o(m)(!1))
                   }, {
                     item: r(({ element: t }) => [
-                      n("div", P, [
+                      i("div", P, [
                         t.icon ? (l(), d("div", Q, [
-                          a(o(h), {
+                          a(o(N), {
                             icon: t.icon
                           }, null, 8, ["icon"])
-                        ])) : u("v-if", !0),
-                        n(
+                        ])) : p("v-if", !0),
+                        i(
                           "div",
                           X,
                           v(t.name),
@@ -195,7 +197,7 @@ const M = { class: "widget-group-name" }, U = { class: "widget-col" }, q = { cla
                     _: 1
                     /* STABLE */
                   }, 8, ["list"]),
-                  u(` <div class="template-list">
+                  p(` <div class="template-list">
           <div v-for="g in tempSchema" :key="g.key" class="template-item">
             <div v-if="g.icon" class="template-item-icon">
               <WidgetIcon :icon="g.icon" />

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

@@ -1,63 +1,61 @@
-import { defineComponent as E, ref as h, nextTick as R, toRaw as T, openBlock as v, createElementBlock as k, normalizeClass as r, unref as e, createElementVNode as n, createVNode as s, withCtx as i, createCommentVNode as f, renderSlot as C, withDirectives as b, vShow as x } from "vue";
+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 "../internal.mjs";
-import { Tooltip as S, Form as j } from "ant-design-vue";
-import B from "vuedraggable";
-import { useInjectDragContext as J, useInjectDesignContext as P } from "../context/design.mjs";
-import "../utils/index.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 "./panel/panel-item.vue2.mjs";
-import O from "./base/json-preview.vue.mjs";
+import J from "./base/json-preview.vue.mjs";
 import "./index.mjs";
-import { useNamespace as q } from "../hooks/use-namespace/index.mjs";
-import { debounce as A } from "../utils/debounce.mjs";
-import w from "./form-icon.vue2.mjs";
-import G from "./panel/panel-item.vue.mjs";
-const H = { class: "left" }, K = { class: "right" }, L = { class: "content-panel" }, M = {
+import { useNamespace as O } 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"
-}, Q = { class: "form-item" }, U = { class: "content-editor" }, me = /* @__PURE__ */ E({
+}, L = { class: "form-item" }, M = { class: "content-editor" }, le = /* @__PURE__ */ z({
   name: "FormPanel",
   __name: "form-panel",
-  setup(W) {
-    const p = h({}), { isDrag: D } = J(), c = h(!1), a = P(), { fields: m } = a;
-    function F() {
-      c.value = !c.value, R(() => {
+  setup(Q) {
+    const p = v({}), { isDrag: w } = j(), d = v(!1), a = B(), { fields: r } = a;
+    function y() {
+      d.value = !d.value, A(() => {
         p.value = a.getFormSchema();
       });
     }
-    function y() {
-    }
-    const { b: $, e: u, em: g } = q("panel"), I = A(N, 200);
-    function N() {
-      const { shared: l } = a, { key: t, field: o } = l.draggedContext, d = a.hooks.dragPut.call({
-        key: t,
-        field: o,
-        region: "form-panel"
-      });
-      return a.setCheckedField(o), d;
+    function F() {
     }
-    function V(l, t) {
-      const o = T(l), { oldIndex: d } = t, _ = o[d];
-      if (_) {
-        const { shared: z } = a;
-        z.draggedContext.key = _.key;
+    const { b: $, e: u, em: g } = O("panel");
+    function I(l, t) {
+      const n = E(l), { oldIndex: V } = t, m = n[V];
+      if (m) {
+        const { shared: _ } = a;
+        _.draggedContext.key = m.key, _.draggedContext.field = m;
       }
     }
-    return (l, t) => (v(), k(
+    async function N() {
+      const { shared: l } = a, { field: t } = l.draggedContext, n = {
+        source: t,
+        traget: r.value,
+        region: "form-panel"
+      };
+      a.hooks.syncDragAdd.call(n), a.setCheckedField(t);
+    }
+    return (l, t) => (h(), k(
       "div",
       {
-        class: r(e($)())
+        class: c(e($)())
       },
       [
-        n(
+        o(
           "div",
           {
-            class: r(e(u)("toolbar"))
+            class: c(e(u)("toolbar"))
           },
           [
-            n("div", H, [
-              s(e(S), { placement: "bottom" }, {
+            o("div", q, [
+              s(e(D), { placement: "bottom" }, {
                 title: i(() => t[1] || (t[1] = [
-                  n(
+                  o(
                     "span",
                     null,
                     "全部删除",
@@ -66,19 +64,19 @@ const H = { class: "left" }, K = { class: "right" }, L = { class: "content-panel
                   )
                 ])),
                 default: i(() => [
-                  s(e(w), {
+                  s(e(S), {
                     name: "delete1",
-                    class: r(e(g)("toolbar", "icon")),
+                    class: c(e(g)("toolbar", "icon")),
                     size: 18,
-                    onClick: y
+                    onClick: F
                   }, null, 8, ["class"])
                 ]),
                 _: 1
                 /* STABLE */
               }),
-              s(e(S), { placement: "bottom" }, {
+              s(e(D), { placement: "bottom" }, {
                 title: i(() => t[2] || (t[2] = [
-                  n(
+                  o(
                     "span",
                     null,
                     "查看JSON Schema",
@@ -87,11 +85,11 @@ const H = { class: "left" }, K = { class: "right" }, L = { class: "content-panel
                   )
                 ])),
                 default: i(() => [
-                  s(e(w), {
+                  s(e(S), {
                     name: "code",
-                    class: r(e(g)("toolbar", "icon")),
+                    class: c(e(g)("toolbar", "icon")),
                     size: 18,
-                    onClick: F
+                    onClick: y
                   }, null, 8, ["class"])
                 ]),
                 _: 1
@@ -100,7 +98,7 @@ const H = { class: "left" }, K = { class: "right" }, L = { class: "content-panel
               f(` <FormIcon name="desktop" />
         <FormIcon name="mobile" /> `)
             ]),
-            n("div", K, [
+            o("div", G, [
               C(l.$slots, "toolbar")
             ])
           ],
@@ -108,46 +106,47 @@ const H = { class: "left" }, K = { class: "right" }, L = { class: "content-panel
           /* CLASS */
         ),
         f(' ref="contentTelRef" '),
-        n(
+        o(
           "div",
           {
-            class: r(e(u)("content"))
+            class: c(e(u)("content"))
           },
           [
-            b(n(
+            b(o(
               "div",
-              L,
+              H,
               [
-                !e(D) && e(m).length === 0 ? (v(), k("div", M, " 👈 请在左侧选择控件并拖至此处 ")) : f("v-if", !0),
-                s(e(j), {
+                !e(w) && e(r).length === 0 ? (h(), k("div", K, " 👈 请在左侧选择控件并拖至此处 ")) : f("v-if", !0),
+                s(e(R), {
                   autocomplete: "off",
                   class: "design-from",
                   "label-align": "left"
                 }, {
                   default: i(() => [
-                    s(e(B), {
+                    s(e(T), {
                       class: "drag-from",
-                      list: e(m),
-                      group: { name: "form", put: e(I) },
+                      list: e(r),
+                      group: { name: "form" },
                       animation: 300,
                       sort: !0,
                       "item-key": "id",
                       "chosen-class": "choose",
-                      onStart: t[0] || (t[0] = (o) => V(e(m), o))
+                      onStart: t[0] || (t[0] = (n) => I(e(r), n)),
+                      onAdd: N
                     }, {
-                      item: i(({ element: o }) => [
-                        n("div", Q, [
-                          C(l.$slots, `panel-${o.key}`, {}, () => [
-                            s(G, {
-                              field: o,
-                              space: e(m)
+                      item: i(({ element: n }) => [
+                        o("div", L, [
+                          C(l.$slots, `panel-${n.key}`, {}, () => [
+                            s(P, {
+                              field: n,
+                              space: e(r)
                             }, null, 8, ["field", "space"])
                           ])
                         ])
                       ]),
                       _: 3
                       /* FORWARDED */
-                    }, 8, ["list", "group"])
+                    }, 8, ["list"])
                   ]),
                   _: 3
                   /* FORWARDED */
@@ -156,18 +155,18 @@ const H = { class: "left" }, K = { class: "right" }, L = { class: "content-panel
               512
               /* NEED_PATCH */
             ), [
-              [x, !c.value]
+              [x, !d.value]
             ]),
-            b(n(
+            b(o(
               "div",
-              U,
+              M,
               [
-                s(O, { data: p.value }, null, 8, ["data"])
+                s(J, { data: p.value }, null, 8, ["data"])
               ],
               512
               /* NEED_PATCH */
             ), [
-              [x, c.value]
+              [x, d.value]
             ])
           ],
           2
@@ -180,5 +179,5 @@ const H = { class: "left" }, K = { class: "right" }, L = { class: "content-panel
   }
 });
 export {
-  me as default
+  le as default
 };

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

@@ -1,4 +1,4 @@
-import { Input as m, Textarea as o, InputNumber as e } from "ant-design-vue";
+import { Input as m, 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";
@@ -6,24 +6,27 @@ import "./widget/array-card.vue.mjs";
 import "./widget/date-range.vue.mjs";
 import "./widget/date-single.vue.mjs";
 import "./widget/kit.vue.mjs";
-import i from "./widget/select.vue2.mjs";
+import "./widget/array-table.vue.mjs";
+import e from "./widget/select.vue2.mjs";
 import p 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";
-const c = r(m), s = r(o), _ = r(e), w = {
-  "k-input": c,
-  "k-textarea": s,
-  "k-input-number": _,
-  "k-select": i,
+import c from "./widget/array-table.vue2.mjs";
+const s = r(m), _ = r(o), k = r(i), W = {
+  "k-input": s,
+  "k-textarea": _,
+  "k-input-number": k,
+  "k-select": e,
   "k-object": p,
   "k-date-range": a,
   "k-date-single": n,
   "k-array-card": f,
   "k-overtime": t,
-  "k-leave": t
+  "k-leave": t,
+  "k-table": c
 };
 export {
-  w as widgetPanels
+  W as widgetPanels
 };

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

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