@king-one/form-design 0.0.18 → 0.0.20

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
 };

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

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

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

@@ -1,52 +1,65 @@
-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 { defineComponent as p, toRaw as h, openBlock as y, createElementBlock as k, createElementVNode as o, toDisplayString as x, createVNode as c, unref as a, normalizeClass as C, withCtx as v, renderSlot as w } from "vue";
+import A from "vuedraggable";
 import "../../../internal.mjs";
+import { message as D } from "ant-design-vue";
 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({
+import { useInjectDesignContext as b } from "../../../context/design.mjs";
+import { useNamespace as I } from "../../../hooks/use-namespace/index.mjs";
+import S from "../panel-item.vue.mjs";
+const N = { class: "form-item" }, F = /* @__PURE__ */ p({
   inheritAttrs: !1,
   __name: "array-card",
   props: {
     field: {}
   },
   setup(s) {
-    const a = x(), { b: d } = S("panel-drag");
+    const i = b(), { b: f } = I("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;
+    function g(e, t) {
+      const n = h(e), { oldIndex: l } = t, r = n[l];
+      if (r) {
+        const { shared: d } = i;
+        d.draggedContext.key = r.key, d.draggedContext.field = r;
       }
     }
-    return console.log(s.field), (e, t) => (h(), y("div", null, [
-      n(
+    function u() {
+      const { shared: e } = i, { field: t } = e.draggedContext, n = {
+        source: t,
+        traget: s.field.children,
+        region: "k-array-card"
+      };
+      if (i.hooks.syncDragAdd.call(n), !i.dragAddResult.every((r) => r)) {
+        const r = s.field.children.findIndex((d) => d.id === t.id);
+        r !== -1 && (s.field.children.splice(r, 1), D.warning("不能将该控件拖拽到列表容器中"));
+      }
+    }
+    return (e, t) => (y(), k("div", null, [
+      o(
         "div",
         null,
-        k(e.field.title),
+        x(e.field.title),
         1
         /* TEXT */
       ),
-      n("div", null, [
-        l(r(w), {
+      o("div", null, [
+        c(a(A), {
           list: e.field.children,
-          class: C(r(d)()),
+          class: C(a(f)()),
           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))
+          onStart: t[0] || (t[0] = (n) => g(e.field.children, n)),
+          onAdd: u
         }, {
-          item: v(({ element: o }) => [
-            n("div", N, [
-              b(e.$slots, `panel-${o.key}`, {}, () => [
-                l(r(D), {
-                  field: o,
+          item: v(({ element: n }) => [
+            o("div", N, [
+              w(e.$slots, `panel-${n.key}`, {}, () => [
+                c(a(S), {
+                  field: n,
                   space: e.field.children
                 }, null, 8, ["field", "space"])
               ])
@@ -55,7 +68,7 @@ const N = { class: "form-item" }, j = /* @__PURE__ */ u({
           _: 3
           /* FORWARDED */
         }, 8, ["list", "class", "group"]),
-        t[1] || (t[1] = n(
+        t[1] || (t[1] = o(
           "div",
           { style: { color: "#c0bebe", "text-align": "center", width: "90%", padding: "5px" } },
           " ☝ 拖拽控件到容器内部 ",
@@ -67,5 +80,5 @@ const N = { class: "form-item" }, j = /* @__PURE__ */ u({
   }
 });
 export {
-  j as default
+  F as default
 };

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

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

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

@@ -0,0 +1,105 @@
+import { defineComponent as f, openBlock as g, createElementBlock as p, normalizeClass as b, unref as l, createElementVNode as e, createVNode as o, withCtx as y, renderSlot as u, toDisplayString as v } from "vue";
+import h from "vuedraggable";
+import "../../../index.mjs";
+import "../../../internal.mjs";
+import { message as x } from "ant-design-vue";
+import { useInjectDesignContext as _ } from "../../../context/design.mjs";
+import { useNamespace as C } from "../../../hooks/use-namespace/index.mjs";
+import k from "../panel-item.vue.mjs";
+const A = { class: "array-table-box" }, D = { class: "array-table-drag" }, w = { class: "form-item" }, I = { class: "table-item" }, N = { class: "array-table-drag-header" }, $ = { class: "array-table-drag-content" }, T = /* @__PURE__ */ f({
+  name: "ArrayTable",
+  __name: "array-table",
+  props: {
+    field: {}
+  },
+  setup(s) {
+    const d = _(), { b: n } = C("array-table");
+    function c() {
+      const { shared: a } = d, { field: t } = a.draggedContext, r = {
+        source: t,
+        traget: s.field.children,
+        region: "k-array-card"
+      };
+      if (d.hooks.syncDragAdd.call(r), !d.dragAddResult.every((i) => i)) {
+        const i = s.field.children.findIndex((m) => m.id === t.id);
+        i !== -1 && (s.field.children.splice(i, 1), x.warning("不能将该控件拖拽到列表容器中"));
+      }
+    }
+    return (a, t) => (g(), p(
+      "div",
+      {
+        class: b(l(n)())
+      },
+      [
+        t[1] || (t[1] = e(
+          "div",
+          null,
+          "明细列表",
+          -1
+          /* CACHED */
+        )),
+        e("div", A, [
+          t[0] || (t[0] = e(
+            "div",
+            { class: "array-table-left" },
+            [
+              e("div", { class: "array-table-drag-header" }, " 表头 "),
+              e("div", { class: "array-table-drag-content" })
+            ],
+            -1
+            /* CACHED */
+          )),
+          e("div", D, [
+            o(l(h), {
+              class: "widget-drag",
+              list: a.field.children,
+              group: { name: "form", direction: "vertical", removeCloneOnHide: !1 },
+              animation: 300,
+              sort: !0,
+              "item-key": "id",
+              "drag-class": "table-item-drag-class",
+              onAdd: c
+            }, {
+              item: y(({ element: r }) => [
+                e("div", w, [
+                  u(a.$slots, `panel-${r.key}`, {}, () => [
+                    e("div", I, [
+                      e(
+                        "div",
+                        N,
+                        v(r.title),
+                        1
+                        /* TEXT */
+                      ),
+                      e("div", $, [
+                        o(l(k), {
+                          field: r,
+                          space: a.field.children,
+                          "hide-title": ""
+                        }, null, 8, ["field", "space"])
+                      ])
+                    ])
+                  ])
+                ])
+              ]),
+              _: 3
+              /* FORWARDED */
+            }, 8, ["list"])
+          ])
+        ]),
+        t[2] || (t[2] = e(
+          "div",
+          { style: { color: "#c0bebe", "text-align": "center", width: "90%", padding: "5px" } },
+          " ☝ 拖拽控件到明细列表 ",
+          -1
+          /* CACHED */
+        ))
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+export {
+  T as default
+};

package/dist/es/src/components/panel/widget/date-range.vue2.mjs

@@ -1,18 +1,18 @@
-import { defineComponent as o, openBlock as t, createBlock as a, unref as r, withCtx as n, createVNode as l, normalizeProps as p, guardReactiveProps as i } from "vue";
-import { FormItem as m, RangePicker as c } from "ant-design-vue";
-const _ = /* @__PURE__ */ o({
+import { defineComponent as r, openBlock as t, createBlock as n, unref as o, withCtx as l, createVNode as p, mergeProps as a } from "vue";
+import { FormItem as f, RangePicker as m } from "ant-design-vue";
+const u = /* @__PURE__ */ r({
   __name: "date-range",
   props: {
     field: {}
   },
-  setup(f) {
-    return (e, d) => (t(), a(r(m), {
+  setup(i) {
+    return (e, c) => (t(), n(o(f), {
       label: e.field.title
     }, {
-      default: n(() => [
-        l(
-          r(c),
-          p(i(e.field["x-component-props"])),
+      default: l(() => [
+        p(
+          o(m),
+          a(e.field["x-component-props"], { open: !1 }),
           null,
           16
           /* FULL_PROPS */
@@ -24,5 +24,5 @@ const _ = /* @__PURE__ */ o({
   }
 });
 export {
-  _ as default
+  u as default
 };

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

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

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

@@ -1,19 +1,18 @@
-import { defineComponent as k, computed as y, openBlock as o, createElementBlock as a, normalizeClass as _, unref as e, createVNode as t, withCtx as n, Fragment as g, createBlock as s, resolveDynamicComponent as x, renderSlot as b } from "vue";
+import { defineComponent as k, computed as y, openBlock as o, createElementBlock as m, normalizeClass as _, unref as e, createVNode as t, withCtx as n, Fragment as g, createBlock as s, resolveDynamicComponent as x, renderSlot as b } from "vue";
 import { Tabs as v, TabPane as p, Empty as c } from "ant-design-vue";
 import "../../internal.mjs";
 import { FormConfigProps as C } from "../types.mjs";
 import "./form-props.vue.mjs";
 import { expandProps as P } from "./widget/index.mjs";
-import "@king-one/form-design/dist/theme-chalk/form-config.css";
 import { useInjectDesignContext as h } from "../../context/design.mjs";
 import { useNamespace as F } from "../../hooks/use-namespace/index.mjs";
 import B from "./form-props.vue2.mjs";
-const V = /* @__PURE__ */ k({
+const S = /* @__PURE__ */ k({
   __name: "form-config",
   props: C,
   setup(i) {
-    const l = i, { checkedField: f } = h(), r = y(() => f.value.key || ""), { b: d } = F("form-config"), m = P(l.expandProps);
-    return (u, z) => (o(), a(
+    const l = i, { checkedField: f } = h(), r = y(() => f.value.key || ""), { b: d } = F("form-config"), a = P(l.expandProps);
+    return (u, z) => (o(), m(
       "div",
       {
         class: _(e(d)())
@@ -30,11 +29,11 @@ const V = /* @__PURE__ */ k({
               tab: "组件配置"
             }, {
               default: n(() => [
-                r.value ? (o(), a(
+                r.value ? (o(), m(
                   g,
                   { key: 0 },
                   [
-                    e(m)[r.value] ? (o(), s(x(e(m)[r.value]), { key: 0 })) : (o(), s(e(c), {
+                    e(a)[r.value] ? (o(), s(x(e(a)[r.value]), { key: 0 })) : (o(), s(e(c), {
                       key: 1,
                       style: { "margin-top": "50px" },
                       description: "暂无配置"
@@ -74,5 +73,5 @@ const V = /* @__PURE__ */ k({
   }
 });
 export {
-  V as default
+  S as default
 };