@king-one/form-design 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @king-one/form-design
 
+## 0.0.6
+
+### Patch Changes
+
+- test:测试
+
+## 0.0.5
+
+### Patch Changes
+
+- test：测试 monaco 的构建
+
 ## 0.0.4
 
 ### Patch Changes

package/dist/es/index.mjs

@@ -1,18 +1,20 @@
 import "./src/index.mjs";
 import { default as t } from "./src/components/panel/panel-item.vue.mjs";
-import { useInjectDesignContext as n } from "./src/context/design.mjs";
-import { default as s } from "./src/components/form-desgin.mjs";
+import { useInjectDesignContext as a } from "./src/context/design.mjs";
+import { default as f } from "./src/components/form-desgin.mjs";
 import { CreateFormDesign as i } from "./src/core/index.mjs";
-import { BaseSchema as p, ExtendSchema as g, LayoutSchema as D } from "./src/config/index.mjs";
-import { onDesignFieldChange as d, onDesignInit as h } from "./src/effects/onEffects.mjs";
+import { default as p } from "./src/components/props/form-config.vue.mjs";
+import { BaseSchema as d, ExtendSchema as l, LayoutSchema as u } from "./src/config/index.mjs";
+import { onDesignFieldChange as F, onDesignInit as c } from "./src/effects/onEffects.mjs";
 export {
-  p as BaseSchema,
+  d as BaseSchema,
   i as CreateFormDesign,
-  g as ExtendSchema,
-  s as FormDesign,
+  l as ExtendSchema,
+  p as FormConfig,
+  f as FormDesign,
   t as FormPanelItem,
-  D as LayoutSchema,
-  d as onDesignFieldChange,
-  h as onDesignInit,
-  n as useInjectDesignContext
+  u as LayoutSchema,
+  F as onDesignFieldChange,
+  c as onDesignInit,
+  a as useInjectDesignContext
 };

package/dist/es/src/components/form-desgin.mjs

@@ -1,26 +1,26 @@
-import { defineComponent as n, ref as i, h as o } from "vue";
+import { defineComponent as a, ref as i, h as o } from "vue";
 import "../internal.mjs";
-import { useProvideDragContext as a, useProvideDesignContext as p } from "../context/design.mjs";
+import { useProvideDragContext as f, useProvideDesignContext as p } from "../context/design.mjs";
 import "./index.mjs";
-import { FormDesignProps as f } from "./types.mjs";
-import { merge as c } from "../utils/merge.mjs";
-import { useNamespace as g } from "../hooks/use-namespace/index.mjs";
-import u from "./form-material.vue.mjs";
-import l from "./form-panel.vue.mjs";
-import d from "./form-setting.vue.mjs";
+import { FormDesignProps as c } from "./types.mjs";
+import { merge as g } from "../utils/merge.mjs";
+import { useNamespace as u } from "../hooks/use-namespace/index.mjs";
+import l from "./form-material.vue.mjs";
+import d from "./form-panel.vue.mjs";
+import D from "./form-setting.vue.mjs";
 const {
-  b: D
-} = g("main"), _ = {
+  b: _
+} = u("main"), v = {
   config: {
     theme: "dark",
     tags: ["frontend", "vue"]
   }
-}, v = {
+}, C = {
   config: {
     language: "zh-CN",
     tags: ["typescript", "javascript"]
   }
-}, C = c(_, v, {
+}, h = g(v, C, {
   // customMerge: () => {
   //   return (target, source) => {
   //     if (Array.isArray(target) && Array.isArray(source)) {
@@ -34,28 +34,31 @@ const {
   //   return type
   // }
 });
-console.log(C);
-const z = /* @__PURE__ */ n({
+console.log(h);
+const q = /* @__PURE__ */ a({
   name: "FormDesign",
-  props: f,
-  setup(e, {
-    slots: t
+  props: c,
+  setup(t, {
+    slots: s
   }) {
     const {
-      toolbar: s
-    } = t, r = i(!1);
-    return a({
-      isDrag: r,
-      updateDrag: (m) => {
-        r.value = m;
+      toolbar: m,
+      setting: r
+    } = s, e = i(!1);
+    return f({
+      isDrag: e,
+      updateDrag: (n) => {
+        e.value = n;
       }
-    }), p(e.design), () => o("form", {
-      class: D()
-    }, [o(u), o(l, {}, {
-      toolbar: s
-    }), o(d)]);
+    }), p(t.design), () => o("form", {
+      class: _()
+    }, [o(l), o(d, {}, {
+      toolbar: m
+    }), o(D, null, {
+      default: () => r == null ? void 0 : r()
+    })]);
   }
 });
 export {
-  z as default
+  q as default
 };

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

@@ -21,7 +21,9 @@ const A = { class: "left" }, G = { class: "right" }, H = { class: "content-panel
   setup(U) {
     const S = $("contentEditorTel"), { isDrag: w } = J(), { setEditorValue: x } = O(S), i = R(!1), c = M(), { fields: m } = c;
     function E() {
-      i.value = !i.value, x(c.getFormSchema());
+      x(c.getFormSchema()).then(() => {
+        i.value = !i.value;
+      });
     }
     function y() {
     }

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

@@ -1,104 +1,66 @@
-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 { defineComponent as d, ref as u, computed as f, openBlock as t, createElementBlock as v, normalizeClass as b, createVNode as o, withCtx as _, withDirectives as g, createElementVNode as s, createCommentVNode as k, renderSlot as y, unref as h, vShow as C, createBlock as a } from "vue";
+import { Empty as P } from "ant-design-vue";
 import "../hooks/index.mjs";
 import "./form-icon.vue.mjs";
 import "./base/collapse.vue.mjs";
-import "./props/index.mjs";
-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({
+import { useNamespace as l } from "../hooks/use-namespace/index.mjs";
+import T from "./base/collapse.vue2.mjs";
+import i from "./form-icon.vue2.mjs";
+const z = { style: { height: "100%" } }, E = { class: "setting-aside" }, O = /* @__PURE__ */ d({
   name: "FormSetting",
   __name: "form-setting",
-  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(), _(
+  setup(N) {
+    const { b: r } = l("setting"), { b: m } = l("setting-collapse"), e = u(!0), c = f(() => [r(), !e.value && m()]);
+    return (p, n) => (t(), v(
       "div",
       {
-        class: x(b.value)
+        class: b(c.value)
       },
       [
-        s(S, null, {
-          default: n(() => [
-            z(m(
+        o(T, null, {
+          default: _(() => [
+            g(s(
               "div",
-              V,
+              z,
               [
-                m("aside", I, [
-                  s(t(E), {
-                    size: "small",
-                    centered: "",
-                    class: "setting-tabs"
-                  }, {
-                    default: n(() => [
-                      s(t(v), {
-                        key: "1",
-                        tab: "组件配置"
-                      }, {
-                        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 */
-                          })) : (e(), r(t(N), {
-                            key: 1,
-                            style: { "margin-top": "50px" },
-                            description: "请选择添加的组件"
-                          }))
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      }),
-                      s(t(v), {
-                        key: "2",
-                        tab: "表单配置"
-                      }, {
-                        default: n(() => [
-                          s(t(T))
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      })
-                    ]),
-                    _: 1
-                    /* STABLE */
-                  })
+                s("aside", E, [
+                  k(` <Tabs size="small" centered class="setting-tabs">
+            <TabPane key="1" tab="组件配置">
+              <Collapse v-if="Object.keys(checkedField).length && CollapsePanels.length">
+                <component :is="item" v-for="item in CollapsePanels" :key="item.key" />
+              </Collapse>
+              <Empty v-else style="margin-top: 50px;" description="请选择添加的组件" />
+            </TabPane>
+            <TabPane key="2" tab="表单配置">
+              <FormProps />
+            </TabPane>
+          </Tabs> `),
+                  y(p.$slots, "default", {}, () => [
+                    o(h(P), {
+                      class: "setting-empty",
+                      description: "暂无配置项"
+                    })
+                  ])
                 ])
               ],
               512
               /* NEED_PATCH */
             ), [
-              [D, o.value]
+              [C, e.value]
             ])
           ]),
-          _: 1
-          /* STABLE */
+          _: 3
+          /* FORWARDED */
         }),
-        m("div", {
+        s("div", {
           class: "setting-collapse",
-          onClick: a[0] || (a[0] = (i) => o.value = !o.value)
+          onClick: n[0] || (n[0] = ($) => e.value = !e.value)
         }, [
-          o.value ? (e(), r(g, {
+          e.value ? (t(), a(i, {
             key: 1,
             name: "double-right",
             size: 18
-          })) : (e(), r(g, {
+          })) : (t(), a(i, {
             key: 0,
             name: "double-left",
             size: 18
@@ -111,5 +73,5 @@ const V = { style: { height: "100%" } }, I = { class: "setting-aside" }, X = /*
   }
 });
 export {
-  X as default
+  O as default
 };

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

@@ -2,3 +2,4 @@ import "./form-material.vue2.mjs";
 import "./form-setting.vue2.mjs";
 import "./form-panel.vue2.mjs";
 import "./form-icon.vue.mjs";
+import "./props/index.mjs";

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

@@ -0,0 +1,78 @@
+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 { 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({
+  __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(
+      "div",
+      {
+        class: _(e(d)())
+      },
+      [
+        t(e(v), {
+          size: "small",
+          centered: "",
+          class: "setting-tabs"
+        }, {
+          default: n(() => [
+            t(e(p), {
+              key: "1",
+              tab: "组件配置"
+            }, {
+              default: n(() => [
+                r.value ? (o(), a(
+                  g,
+                  { key: 0 },
+                  [
+                    e(m)[r.value] ? (o(), s(x(e(m)[r.value]), { key: 0 })) : (o(), s(e(c), {
+                      key: 1,
+                      style: { "margin-top": "50px" },
+                      description: "当前组件不支持配置"
+                    }))
+                  ],
+                  64
+                  /* STABLE_FRAGMENT */
+                )) : (o(), s(e(c), {
+                  key: 1,
+                  style: { "margin-top": "50px" },
+                  description: "请选择添加的组件"
+                }))
+              ]),
+              _: 1
+              /* STABLE */
+            }),
+            t(e(p), {
+              key: "2",
+              tab: "表单配置"
+            }, {
+              default: n(() => [
+                b(u.$slots, "formProps", {}, () => [
+                  t(B)
+                ])
+              ]),
+              _: 3
+              /* FORWARDED */
+            })
+          ]),
+          _: 3
+          /* FORWARDED */
+        })
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+export {
+  V as default
+};

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

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

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

@@ -1,11 +1,12 @@
-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({
+import { defineComponent as s, reactive as m, openBlock as d, createElementBlock as v, createCommentVNode as f, createVNode as l, unref as e, withCtx as n } from "vue";
+import { Form as c, FormItem as r, Select as i } from "ant-design-vue";
+const b = { style: { padding: "10px" } }, h = /* @__PURE__ */ s({
   __name: "form-props",
   setup(_) {
-    const o = v().getFormProps(), i = [
+    const t = m({
+      layout: "horizontal",
+      labelAlign: "left"
+    }), u = [
       {
         value: "horizontal",
         label: "水平"
@@ -14,7 +15,7 @@ const b = { style: { padding: "10px" } }, k = /* @__PURE__ */ s({
         value: "vertical",
         label: "垂直"
       }
-    ], u = [
+    ], p = [
       {
         value: "left",
         label: "左对齐"
@@ -24,33 +25,33 @@ const b = { style: { padding: "10px" } }, k = /* @__PURE__ */ s({
         label: "右对齐"
       }
     ];
-    return (g, l) => (m(), c("div", b, [
-      d(` :label-col="{ style: { width: '85px' } }" `),
-      t(e(f), { layout: "vertical" }, {
+    return (y, o) => (d(), v("div", b, [
+      f(` :label-col="{ style: { width: '85px' } }" `),
+      l(e(c), { layout: "vertical" }, {
         default: n(() => [
-          t(e(r), {
+          l(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
+              l(e(i), {
+                value: t.layout,
+                "onUpdate:value": o[0] || (o[0] = (a) => t.layout = a),
+                options: u
               }, null, 8, ["value"])
             ]),
             _: 1
             /* STABLE */
           }),
-          t(e(r), {
+          l(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
+              l(e(i), {
+                value: t.labelAlign,
+                "onUpdate:value": o[1] || (o[1] = (a) => t.labelAlign = a),
+                options: p
               }, null, 8, ["value"])
             ]),
             _: 1
@@ -64,5 +65,5 @@ const b = { style: { padding: "10px" } }, k = /* @__PURE__ */ s({
   }
 });
 export {
-  k as default
+  h as default
 };

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

@@ -1,5 +1,6 @@
 import "./form-props.vue.mjs";
-import { widgetProps as t } from "./widget/index.mjs";
+import { widgetProps as i } from "./widget/index.mjs";
+import "./form-config.vue2.mjs";
 export {
-  t as widgetProps
+  i as widgetProps
 };

package/dist/es/src/components/props/widget/index.mjs

@@ -1,27 +1,54 @@
+import { defineComponent as u, h as i } from "vue";
+import { Collapse as d } from "ant-design-vue";
 import "./InputProps.vue.mjs";
 import "./TextareaProps.vue.mjs";
 import "./InputNumberProps.vue.mjs";
 import "./BaseProps.vue.mjs";
-import t from "./InputProps.vue2.mjs";
-import m from "./TextareaProps.vue2.mjs";
-import n from "./InputNumberProps.vue2.mjs";
-import o from "./BaseProps.vue2.mjs";
-const _ = {
-  "k-input": t,
-  "k-textarea": m,
-  "k-input-number": n
-}, k = {
+import s from "./InputProps.vue2.mjs";
+import c from "./TextareaProps.vue2.mjs";
+import a from "./InputNumberProps.vue2.mjs";
+import e from "./BaseProps.vue2.mjs";
+const j = {
+  "k-input": s,
+  "k-textarea": c,
+  "k-input-number": a
+}, _ = {
   "k-input": {
-    component: [o, t]
+    component: [e, s]
   },
   "k-textarea": {
-    component: [o, m]
+    component: [e, c]
   },
   "k-input-number": {
-    component: [o, n]
+    component: [e, a]
   }
 };
+function D(n = []) {
+  const o = {};
+  for (const [t, f] of Object.entries(_)) {
+    const p = [...f.component];
+    for (const m of n) {
+      const { keys: r } = m;
+      (Array.isArray(r) ? r.includes(t) : r.test(t)) && p.push(m.component);
+    }
+    o[t] = k(t, p);
+  }
+  return o;
+}
+function k(n, o) {
+  return u({
+    name: `${n}-props`,
+    inheritAttrs: !1,
+    setup() {
+      return () => i(d, null, {
+        default: () => o.map((t) => i(t))
+      });
+    }
+  });
+}
 export {
-  _ as components,
-  k as widgetProps
+  j as components,
+  D as expandProps,
+  k as propsWidgetDecorator,
+  _ as widgetProps
 };

package/dist/es/src/components/types.mjs

@@ -15,14 +15,20 @@ const r = (e) => e, t = {
     required: !0
   }
 }, n = {
+  expandProps: {
+    type: Array,
+    default: () => []
+  }
+}, p = {
   icon: {
     type: r([Object, String]),
     required: !0
   }
 };
 export {
+  n as FormConfigProps,
   o as FormDesignProps,
   r as definePropType,
   t as iconProps,
-  n as widgetIconProps
+  p as widgetIconProps
 };

package/dist/es/src/config/index.mjs

@@ -74,7 +74,6 @@ const e = {
       key: "k-object",
       type: "object",
       icon: "form-object",
-      "k-component": "FormLayout",
       children: []
     },
     {
@@ -83,7 +82,7 @@ const e = {
       type: "array",
       icon: "form-list",
       children: [],
-      "k-component": "FormLayout"
+      "k-component": "ArrayCard"
     },
     {
       title: "明细表",

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

@@ -6,16 +6,16 @@ import "../effects/index.mjs";
 import { widgetPanels as c } from "../components/panel/index.mjs";
 import "../components/props/index.mjs";
 import { Plugin as g } from "../plugins/index.mjs";
-import { Heart as a } from "./Heart.mjs";
-import { FormSchema as d } from "./FormSchema.mjs";
-import { widgetProps as f } from "../components/props/widget/index.mjs";
-import { runEffects as l } from "../effects/effective.mjs";
+import { Heart as d } from "./Heart.mjs";
+import { FormSchema as l } from "./FormSchema.mjs";
+import { widgetProps as a } from "../components/props/widget/index.mjs";
+import { runEffects as f } from "../effects/effective.mjs";
 class b {
   constructor(e) {
     t(this, "schema");
     t(this, "heart");
     t(this, "plugin");
-    t(this, "FormSchema", new d());
+    t(this, "FormSchema", new l());
     t(this, "props");
     t(this, "checkedField", n({}));
     t(this, "shared", {
@@ -23,7 +23,7 @@ class b {
         key: ""
       },
       panelWidgets: {},
-      widgetProps: {}
+      propsWidgets: {}
     });
     t(this, "extendFormProps", []);
     t(this, "notify", (e, ...r) => {
@@ -33,10 +33,10 @@ class b {
     this.shared.panelWidgets = {
       ...c,
       ...o
-    }, this.shared.widgetProps = {
-      ...f,
+    }, this.shared.propsWidgets = {
+      ...a,
       ...i
-    }, this.props = { ...h }, this.schema = e.schema, this.plugin = new g(), this.heart = new a({
+    }, this.props = { ...h }, this.schema = e.schema, this.plugin = new g(), this.heart = new d({
       lifecycles: this.lifecycles,
       context: this
     }), this.extendFormProps = r;
@@ -51,10 +51,7 @@ class b {
     return this.FormSchema.getFieldList();
   }
   get lifecycles() {
-    return this.props.effects ? l(this, this.props.effects) : [];
-  }
-  getFormProps() {
-    return this.FormSchema.formProps;
+    return this.props.effects ? f(this, this.props.effects) : [];
   }
   get hooks() {
     return this.plugin.hooks;