@king-one/form-design 0.0.18 → 0.0.19

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/config/index.mjs

@@ -76,13 +76,17 @@ const e = {
       type: "array",
       format: "date",
       items: {
-        type: "string"
+        type: "string",
+        format: "date"
       },
       icon: "form-date",
-      "x-component": "InputNumber",
+      "x-component": "DateRange",
       "x-component-props": {
-        placeholder: "请输入",
-        formatData: "YYYY-MM-DD"
+        valueFormat: "YYYY-MM-DD",
+        placeholder: [
+          "开始日期",
+          "结束日期"
+        ]
       }
     },
     {
@@ -102,7 +106,27 @@ const e = {
       key: "k-form-area",
       type: "object",
       icon: "form-area",
-      "x-component": "FormArea"
+      "x-component": "FormArea",
+      children: [
+        {
+          title: "省份",
+          key: "k-form-area-province",
+          type: "string",
+          name: "province"
+        },
+        {
+          title: "城市",
+          key: "k-form-area-city",
+          type: "string",
+          name: "city"
+        },
+        {
+          title: "区县",
+          key: "k-form-area-county",
+          type: "string",
+          name: "county"
+        }
+      ]
     }
   ]
 }, o = {
@@ -117,7 +141,7 @@ const e = {
       children: []
     },
     {
-      title: "数组容器",
+      title: "列表容器",
       key: "k-array-card",
       type: "array",
       icon: "form-list",
@@ -152,15 +176,60 @@ const e = {
       },
       children: [
         {
-          title: "加班人",
-          key: "k-input",
-          type: "string",
-          "x-component": "Input",
-          "x-component-props": {
-            placeholder: "请输入"
-          },
-          name: "vzhax44q5mg",
-          id: "vzhax44q5mg",
+          title: "加班明细",
+          key: "k-array-card",
+          type: "array",
+          children: [
+            {
+              title: "日期范围",
+              key: "k-date-range",
+              type: "array",
+              format: "date",
+              items: {
+                type: "string",
+                format: "date"
+              },
+              "x-component": "DateRange",
+              "x-component-props": {
+                valueFormat: "YYYY-MM-DD HH:mm:ss",
+                showTime: !0,
+                placeholder: [
+                  "开始日期",
+                  "结束日期"
+                ]
+              },
+              name: "m6husq11vxw",
+              id: "m6husq11vxw",
+              "x-design-props": {
+                validate: {
+                  status: "",
+                  message: ""
+                }
+              },
+              children: []
+            },
+            {
+              title: "加班时长",
+              key: "k-input-number",
+              type: "number",
+              "x-component": "InputNumber",
+              "x-component-props": {
+                placeholder: "请输入"
+              },
+              name: "b9yt6cz0u9f",
+              id: "b9yt6cz0u9f",
+              "x-design-props": {
+                validate: {
+                  status: "",
+                  message: ""
+                }
+              }
+            }
+          ],
+          "x-component": "ArrayCard",
+          "x-decorator": "Void",
+          name: "ptkezwx2oqd",
+          id: "ptkezwx2oqd",
           "x-design-props": {
             validate: {
               status: "",
@@ -169,15 +238,15 @@ const e = {
           }
         },
         {
-          title: "加班时长",
-          key: "k-input-number",
-          type: "number",
-          "x-component": "InputNumber",
+          title: "总时长",
+          key: "k-input",
+          type: "string",
+          "x-component": "Input",
           "x-component-props": {
             placeholder: "请输入"
           },
-          name: "aaaa",
-          id: "aaaa",
+          name: "rrglkf7d06w",
+          id: "rrglkf7d06w",
           "x-design-props": {
             validate: {
               status: "",

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

@@ -1,24 +1,24 @@
 var m = Object.defineProperty;
 var p = (r, e, s) => e in r ? m(r, e, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[e] = s;
 var t = (r, e, s) => p(r, typeof e != "symbol" ? e + "" : e, s);
-import { ref as c } from "vue";
+import { ref as d } from "vue";
 import "../effects/index.mjs";
-import { widgetPanels as n } from "../components/panel/index.mjs";
+import { widgetPanels as c } from "../components/panel/index.mjs";
 import "../components/props/index.mjs";
 import { Plugin as l } from "../plugins/index.mjs";
-import { Heart as d } from "./Heart.mjs";
-import { FormSchema as a } from "./FormSchema.mjs";
-import { widgetProps as g } from "../components/props/widget/index.mjs";
+import { Heart as n } from "./Heart.mjs";
+import { FormSchema as g } from "./FormSchema.mjs";
+import { widgetProps as a } from "../components/props/widget/index.mjs";
 import { runEffects as f } from "../effects/effective.mjs";
-class L {
+class C {
   constructor(e) {
     t(this, "schema");
     t(this, "tempSchema");
     t(this, "heart");
     t(this, "plugin");
-    t(this, "FormSchema", new a());
+    t(this, "FormSchema", new g());
     t(this, "props");
-    t(this, "checkedField", c({}));
+    t(this, "checkedField", d({}));
     t(this, "shared", {
       draggedContext: {
         key: "",
@@ -33,12 +33,12 @@ class L {
     });
     const { extendFormProps: s = [], propsWidgets: i = {}, panelWidgets: o = {}, ...h } = e;
     this.shared.panelWidgets = {
-      ...n,
+      ...c,
       ...o
     }, this.shared.propsWidgets = {
-      ...g,
+      ...a,
       ...i
-    }, this.props = { ...h }, this.schema = e.schema, this.tempSchema = e.tempSchema || [], this.plugin = new l(), this.heart = new d({
+    }, this.props = { ...h }, this.schema = e.schema, this.tempSchema = e.tempSchema || [], this.plugin = new l(), this.heart = new n({
       lifecycles: this.lifecycles,
       context: this
     }), this.extendFormProps = s;
@@ -61,10 +61,13 @@ class L {
   get hooks() {
     return this.plugin.hooks;
   }
+  get dragAddResult() {
+    return this.plugin.dragAddResult;
+  }
   get fields() {
     return this.FormSchema.fields;
   }
 }
 export {
-  L as FormDesign
+  C as FormDesign
 };

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

@@ -31,7 +31,7 @@ class j {
         properties: this.jsonToschema(r.children)
       } : t.type === "array" && r.children ? o[t.name] = {
         ...t,
-        items: {
+        items: t.items || {
           type: "object",
           id: l(),
           properties: this.jsonToschema(r.children)

package/dist/es/src/internal.mjs

@@ -1,8 +1,9 @@
 import "./hooks/index.mjs";
-import { useInjectDesignContext as n, useInjectDragContext as r, useProvideDesignContext as s, useProvideDragContext as i } from "./context/design.mjs";
+import { useInjectDesignContext as r, useInjectDragContext as i, useProvideDesignContext as s, useProvideDragContext as x } from "./context/design.mjs";
+import "./utils/index.mjs";
 export {
-  n as useInjectDesignContext,
-  r as useInjectDragContext,
+  r as useInjectDesignContext,
+  i as useInjectDragContext,
   s as useProvideDesignContext,
-  i as useProvideDragContext
+  x as useProvideDragContext
 };