@king-one/form-design 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @king-one/form-design
+
+## 0.0.1
+
+### Patch Changes
+
+- text：测试发布

package/dist/es/index.mjs

@@ -0,0 +1,10 @@
+import "./src/index.mjs";
+import { default as m } from "./src/components/form-desgin.mjs";
+import { CreateFormDesign as t } from "./src/core/index.mjs";
+import { BaseSchema as p, LayoutSchema as s } from "./src/config/index.mjs";
+export {
+  p as BaseSchema,
+  t as CreateFormDesign,
+  m as FormDesign,
+  s as LayoutSchema
+};

package/dist/es/src/components/base/collapse.vue.mjs

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

package/dist/es/src/components/base/collapse.vue2.mjs

@@ -0,0 +1,53 @@
+import { defineComponent as e, openBlock as s, createBlock as i, Transition as o, mergeProps as n, toHandlers as r, withCtx as l, renderSlot as f } from "vue";
+const p = /* @__PURE__ */ e({
+  __name: "collapse",
+  setup(g) {
+    function d(t) {
+      t.style.maxWidth = "", t.style.overflow = t.dataset.oldOverflow, t.style.paddingLeft = t.dataset.oldPaddingLeft, t.style.paddingRight = t.dataset.oldPaddingRight;
+    }
+    const a = {
+      beforeEnter(t) {
+        t.dataset || (t.dataset = {}), t.dataset.oldPaddingLeft = t.style.paddingLeft, t.dataset.oldPaddingRight = t.style.paddingRight, t.style.width && (t.dataset.elExistsWidth = t.style.width), t.style.maxWidth = 0, t.style.paddingLeft = 0, t.style.paddingRight = 0;
+      },
+      enter(t) {
+        requestAnimationFrame(() => {
+          t.dataset.oldOverflow = t.style.overflow, t.dataset.elExistsWidth ? t.style.maxWidth = t.dataset.elExistsWidth : t.scrollWidth !== 0 ? t.style.maxWidth = `${t.scrollWidth}px` : t.style.maxWidth = 0, t.style.paddingLeft = t.dataset.oldPaddingLeft, t.style.paddingRight = t.dataset.oldPaddingRight, t.style.overflow = "hidden";
+        });
+      },
+      afterEnter(t) {
+        t.style.maxWidth = "", t.style.overflow = t.dataset.oldOverflow;
+      },
+      enterCancelled(t) {
+        d(t);
+      },
+      beforeLeave(t) {
+        t.dataset || (t.dataset = {}), t.dataset.oldPaddingTop = t.style.paddingTop, t.dataset.oldPaddingRight = t.style.paddingRight, t.dataset.oldOverflow = t.style.overflow, t.style.maxWidth = `${t.scrollWidth}px`, t.style.overflow = "hidden";
+      },
+      leave(t) {
+        t.scrollWidth !== 0 && (t.style.maxWidth = 0, t.style.paddingTop = 0, t.style.paddingRight = 0);
+      },
+      afterLeave(t) {
+        d(t);
+      },
+      leaveCancelled(t) {
+        d(t);
+      }
+    };
+    return (t, h) => (s(), i(
+      o,
+      n({ name: "form-design-collapse" }, r(a)),
+      {
+        default: l(() => [
+          f(t.$slots, "default")
+        ]),
+        _: 3
+        /* FORWARDED */
+      },
+      16
+      /* FULL_PROPS */
+    ));
+  }
+});
+export {
+  p as default
+};

package/dist/es/src/components/base/widget-icon.mjs

@@ -0,0 +1,18 @@
+import { defineComponent as r, createVNode as t } from "vue";
+import "../../utils/index.mjs";
+import { widgetIconProps as e } from "../types.mjs";
+import "../form-icon.vue.mjs";
+import { isStr as n } from "../../utils/checkers.mjs";
+import i from "../form-icon.vue2.mjs";
+const u = /* @__PURE__ */ r({
+  name: "WidgetIcon",
+  props: e,
+  setup(o) {
+    return () => n(o.icon) ? t(i, {
+      name: o.icon
+    }, null, 8, ["name"]) : o.icon;
+  }
+});
+export {
+  u as default
+};

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

@@ -0,0 +1,29 @@
+import { defineComponent as s, ref as t, h as r } from "vue";
+import "../internal.mjs";
+import { useProvideDragContext as i, useProvideDesignContext as n } from "../context/design.mjs";
+import "./index.mjs";
+import { FormDesignProps as p } from "./types.mjs";
+import { useNamespace as a } from "../hooks/use-namespace/index.mjs";
+import f from "./form-material.vue.mjs";
+import u from "./form-panel.vue.mjs";
+import c from "./form-setting.vue.mjs";
+const {
+  b: g
+} = a("main"), $ = /* @__PURE__ */ s({
+  name: "FormDesign",
+  props: p,
+  setup(e) {
+    const o = t(!1);
+    return i({
+      isDrag: o,
+      updateDrag: (m) => {
+        o.value = m;
+      }
+    }), n(e.design), () => r("form", {
+      class: g()
+    }, [r(f), r(u), r(c)]);
+  }
+});
+export {
+  $ as default
+};

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

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

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

@@ -0,0 +1,27 @@
+import { defineComponent as i, computed as e, openBlock as l, createElementBlock as m, normalizeClass as a, normalizeStyle as p } from "vue";
+import "../internal.mjs";
+import { iconProps as u } from "./types.mjs";
+import { useNamespace as f } from "../hooks/use-namespace/index.mjs";
+const C = /* @__PURE__ */ i({
+  __name: "form-icon",
+  props: u,
+  setup(n) {
+    const o = n, { b: r } = f("icon"), t = e(() => `icon-from-design-${o.name}`), c = e(() => ({
+      fontSize: `${o.size}px`,
+      color: o.color
+    })), s = e(() => [r(), t.value]);
+    return (_, d) => (l(), m(
+      "i",
+      {
+        class: a(s.value),
+        style: p(c.value)
+      },
+      null,
+      6
+      /* CLASS, STYLE */
+    ));
+  }
+});
+export {
+  C as default
+};

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

@@ -0,0 +1,144 @@
+import { defineComponent as N, ref as B, openBlock as n, createElementBlock as a, normalizeClass as d, unref as e, createElementVNode as i, createVNode as r, withCtx as l, createTextVNode as p, Fragment as V, renderList as E, toDisplayString as g, createBlock as I, createCommentVNode as v } from "vue";
+import "../internal.mjs";
+import { RadioGroup as S, RadioButton as _ } from "ant-design-vue";
+import j from "vuedraggable";
+import { uid as z } from "@king-one/utils";
+import { useInjectDragContext as F, useInjectDesignContext as R } from "../context/design.mjs";
+import G from "./base/widget-icon.mjs";
+import { useNamespace as u } from "../hooks/use-namespace/index.mjs";
+const K = { class: "widget-group-name" }, L = { class: "widget-col" }, M = { class: "widget-item" }, T = {
+  key: 0,
+  class: "widget-item-icon"
+}, U = { class: "widget-item-title" }, W = /* @__PURE__ */ N({
+  name: "FormMaterial",
+  __name: "form-material",
+  setup($) {
+    const { updateDrag: m } = F(), { b: w } = u("material"), { b } = u("toolbar"), { b: k } = u("widget"), y = R(), { schema: C } = y, c = B("1");
+    function x(f) {
+      const t = z();
+      return {
+        ...f,
+        name: t,
+        id: t
+      };
+    }
+    function D() {
+      m(!0);
+    }
+    return (f, t) => (n(), a(
+      "div",
+      {
+        class: d(e(w)())
+      },
+      [
+        i(
+          "div",
+          {
+            class: d(e(b)())
+          },
+          [
+            r(e(S), {
+              value: c.value,
+              "onUpdate:value": t[0] || (t[0] = (o) => c.value = o),
+              "button-style": "solid",
+              size: "default"
+            }, {
+              default: l(() => [
+                r(e(_), {
+                  class: "toolbar-button",
+                  value: "1"
+                }, {
+                  default: l(() => t[2] || (t[2] = [
+                    p(" 组件库 ")
+                  ])),
+                  _: 1,
+                  __: [2]
+                }),
+                r(e(_), {
+                  class: "toolbar-button",
+                  value: "2"
+                }, {
+                  default: l(() => t[3] || (t[3] = [
+                    p(" 流程模版 ")
+                  ])),
+                  _: 1,
+                  __: [3]
+                })
+              ]),
+              _: 1
+              /* STABLE */
+            }, 8, ["value"])
+          ],
+          2
+          /* CLASS */
+        ),
+        i(
+          "div",
+          {
+            class: d(e(k)())
+          },
+          [
+            (n(!0), a(
+              V,
+              null,
+              E(e(C), (o) => (n(), a("div", {
+                key: o.key,
+                class: "widget-group"
+              }, [
+                i(
+                  "div",
+                  K,
+                  g(o.name),
+                  1
+                  /* TEXT */
+                ),
+                o.widget ? (n(), I(e(j), {
+                  key: 0,
+                  list: o.widget,
+                  class: "widget-list-drag",
+                  "item-key": "key",
+                  group: { name: "form", pull: "clone", put: !1 },
+                  sort: !1,
+                  options: { animation: 150 },
+                  clone: x,
+                  onStart: D,
+                  onEnd: t[1] || (t[1] = (s) => e(m)(!1))
+                }, {
+                  item: l(({ element: s }) => [
+                    i("div", L, [
+                      i("div", M, [
+                        s.icon ? (n(), a("div", T, [
+                          r(e(G), {
+                            icon: s.icon
+                          }, null, 8, ["icon"])
+                        ])) : v("v-if", !0),
+                        i(
+                          "div",
+                          U,
+                          g(s.title),
+                          1
+                          /* TEXT */
+                        )
+                      ])
+                    ])
+                  ]),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["list"])) : v("v-if", !0)
+              ]))),
+              128
+              /* KEYED_FRAGMENT */
+            ))
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+export {
+  W as default
+};

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

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

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

@@ -0,0 +1,160 @@
+import { defineComponent as S, useTemplateRef as F, ref as N, openBlock as p, createElementBlock as u, normalizeClass as l, unref as e, createElementVNode as t, createVNode as o, withCtx as n, createCommentVNode as i, withDirectives as _, renderSlot as T, vShow as h } from "vue";
+import "../internal.mjs";
+import { Tooltip as v, Form as V } from "ant-design-vue";
+import y from "vuedraggable";
+import { useInjectDragContext as I, useInjectDesignContext as $ } from "../context/design.mjs";
+import "./panel/panel-item.vue.mjs";
+import "./index.mjs";
+import { useMonaco as z } from "../hooks/use-monaco.mjs";
+import { useNamespace as j } from "../hooks/use-namespace/index.mjs";
+import g from "./form-icon.vue2.mjs";
+import B from "./panel/panel-item.vue2.mjs";
+const R = { class: "left" }, J = { class: "content-panel" }, M = {
+  key: 0,
+  class: "prompt"
+}, O = { class: "form-item" }, P = {
+  ref: "contentEditorTel",
+  class: "content-editor"
+}, ee = /* @__PURE__ */ S({
+  name: "FormPanel",
+  __name: "form-panel",
+  setup(q) {
+    const b = F("contentEditorTel"), { isDrag: C } = I(), { setEditorValue: k } = z(b), s = N(!1), r = $(), { fields: c } = r;
+    function E() {
+      s.value = !s.value, k(r.getFormSchema());
+    }
+    function w() {
+    }
+    const { b: x, e: m, em: d } = j("panel");
+    return (D, a) => (p(), u(
+      "div",
+      {
+        class: l(e(x)())
+      },
+      [
+        t(
+          "div",
+          {
+            class: l(e(m)("toolbar"))
+          },
+          [
+            t("div", R, [
+              o(e(v), { placement: "bottom" }, {
+                title: n(() => a[0] || (a[0] = [
+                  t(
+                    "span",
+                    null,
+                    "全部删除",
+                    -1
+                    /* CACHED */
+                  )
+                ])),
+                default: n(() => [
+                  o(e(g), {
+                    name: "delete1",
+                    class: l(e(d)("toolbar", "icon")),
+                    size: 18,
+                    onClick: w
+                  }, null, 8, ["class"])
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              o(e(v), { placement: "bottom" }, {
+                title: n(() => a[1] || (a[1] = [
+                  t(
+                    "span",
+                    null,
+                    "查看JSON Schema",
+                    -1
+                    /* CACHED */
+                  )
+                ])),
+                default: n(() => [
+                  o(e(g), {
+                    name: "code",
+                    class: l(e(d)("toolbar", "icon")),
+                    size: 18,
+                    onClick: E
+                  }, null, 8, ["class"])
+                ]),
+                _: 1
+                /* STABLE */
+              }),
+              i(` <FormIcon name="desktop" />
+        <FormIcon name="mobile" /> `)
+            ])
+          ],
+          2
+          /* CLASS */
+        ),
+        i(' ref="contentTelRef" '),
+        t(
+          "div",
+          {
+            class: l(e(m)("content"))
+          },
+          [
+            _(t(
+              "div",
+              J,
+              [
+                !e(C) && e(c).length === 0 ? (p(), u("div", M, " 👈 请在左侧选择控件并拖至此处 ")) : i("v-if", !0),
+                o(e(V), {
+                  autocomplete: "off",
+                  class: "design-from",
+                  "label-col": { style: { width: "100px" } },
+                  "label-align": "left"
+                }, {
+                  default: n(() => [
+                    o(e(y), {
+                      class: "drag-from",
+                      list: e(c),
+                      group: "form",
+                      animation: 300,
+                      sort: !0,
+                      "item-key": "id",
+                      "chosen-class": "choose"
+                    }, {
+                      item: n(({ element: f }) => [
+                        t("div", O, [
+                          T(D.$slots, `panel-${f.key}`, {}, () => [
+                            o(B, { field: f }, null, 8, ["field"])
+                          ])
+                        ])
+                      ]),
+                      _: 3
+                      /* FORWARDED */
+                    }, 8, ["list"])
+                  ]),
+                  _: 3
+                  /* FORWARDED */
+                })
+              ],
+              512
+              /* NEED_PATCH */
+            ), [
+              [h, !s.value]
+            ]),
+            _(t(
+              "div",
+              P,
+              null,
+              512
+              /* NEED_PATCH */
+            ), [
+              [h, s.value]
+            ])
+          ],
+          2
+          /* CLASS */
+        )
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+export {
+  ee as default
+};

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

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

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

@@ -0,0 +1,116 @@
+import { defineComponent as k, ref as v, computed as b, openBlock as s, createElementBlock as g, normalizeClass as y, createVNode as t, withCtx as o, withDirectives as C, createElementVNode as i, unref as e, createBlock as r, createTextVNode as h, vShow as x } from "vue";
+import { Tabs as $, TabPane as n, Collapse as z, CollapsePanel as m, Empty as N } from "ant-design-vue";
+import "../internal.mjs";
+import "../hooks/index.mjs";
+import "./form-icon.vue.mjs";
+import "./base/collapse.vue.mjs";
+import "./props/index.mjs";
+import { useInjectDesignContext as w } from "../context/design.mjs";
+import { useNamespace as c } from "../hooks/use-namespace/index.mjs";
+import B from "./base/collapse.vue2.mjs";
+import E from "./props/base-props.vue.mjs";
+import T from "./props/component-props.vue.mjs";
+import p from "./form-icon.vue2.mjs";
+const V = { class: "setting-aside" }, R = /* @__PURE__ */ k({
+  name: "FormSetting",
+  __name: "form-setting",
+  setup(j) {
+    const { checkedField: d } = w(), { b: u } = c("setting"), { b: f } = c("setting-collapse"), a = v(!0), _ = b(() => [u(), !a.value && f()]);
+    return (D, l) => (s(), g(
+      "div",
+      {
+        class: y(_.value)
+      },
+      [
+        t(B, null, {
+          default: o(() => [
+            C(i(
+              "div",
+              null,
+              [
+                i("aside", V, [
+                  t(e($), {
+                    size: "small",
+                    centered: ""
+                  }, {
+                    default: o(() => [
+                      t(e(n), {
+                        key: "1",
+                        tab: "组件配置"
+                      }, {
+                        default: o(() => [
+                          Object.keys(e(d)).length ? (s(), r(e(z), { key: 0 }, {
+                            default: o(() => [
+                              t(e(m), { header: "基础设置" }, {
+                                default: o(() => [
+                                  t(e(E))
+                                ]),
+                                _: 1
+                                /* STABLE */
+                              }),
+                              t(e(m), { header: "属性设置" }, {
+                                default: o(() => [
+                                  t(e(T))
+                                ]),
+                                _: 1
+                                /* STABLE */
+                              })
+                            ]),
+                            _: 1
+                            /* STABLE */
+                          })) : (s(), r(e(N), {
+                            key: 1,
+                            description: "暂无配置"
+                          }))
+                        ]),
+                        _: 1
+                        /* STABLE */
+                      }),
+                      t(e(n), {
+                        key: "2",
+                        tab: "表单配置"
+                      }, {
+                        default: o(() => l[1] || (l[1] = [
+                          h(" 表单配置 ")
+                        ])),
+                        _: 1,
+                        __: [1]
+                      })
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ])
+              ],
+              512
+              /* NEED_PATCH */
+            ), [
+              [x, a.value]
+            ])
+          ]),
+          _: 1
+          /* STABLE */
+        }),
+        i("div", {
+          class: "setting-collapse",
+          onClick: l[0] || (l[0] = (F) => a.value = !a.value)
+        }, [
+          a.value ? (s(), r(p, {
+            key: 0,
+            name: "double-left",
+            size: 18
+          })) : (s(), r(p, {
+            key: 1,
+            name: "double-right",
+            size: 18
+          }))
+        ])
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+export {
+  R as default
+};

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

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

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

@@ -0,0 +1,4 @@
+import "./form-material.vue2.mjs";
+import "./form-setting.vue2.mjs";
+import "./form-panel.vue2.mjs";
+import "./form-icon.vue.mjs";

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

@@ -0,0 +1,9 @@
+import { Input as t, Textarea as e, InputNumber as n } from "ant-design-vue";
+const r = {
+  input: t,
+  textarea: e,
+  "input-number": n
+};
+export {
+  r as panels
+};

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

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

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

@@ -0,0 +1,66 @@
+import { defineComponent as k, computed as v, openBlock as l, createElementBlock as c, normalizeClass as n, createVNode as C, unref as o, withCtx as y, createBlock as b, resolveDynamicComponent as g, mergeProps as h } from "vue";
+import { FormItem as B } from "ant-design-vue";
+import "../../internal.mjs";
+import { useInjectDesignContext as w } from "../../context/design.mjs";
+import { useNamespace as D } from "../../hooks/use-namespace/index.mjs";
+const P = /* @__PURE__ */ k({
+  __name: "panel-item",
+  props: {
+    field: {}
+  },
+  setup(p) {
+    const d = p, { b: t, e: r, m: i } = D("panel-item");
+    console.log(i("active"));
+    const { panelComponents: s, checkedField: a } = w();
+    function f(e) {
+      a.value = e;
+    }
+    const u = v(() => {
+      var e;
+      return ((e = a.value) == null ? void 0 : e.id) === d.field.id ? [t(), i("active")] : [t()];
+    });
+    return (e, m) => (l(), c(
+      "div",
+      {
+        class: n(u.value),
+        onClick: m[0] || (m[0] = (F) => f(e.field))
+      },
+      [
+        C(o(B), {
+          class: n(o(r)("form")),
+          label: e.field.title
+        }, {
+          default: y(() => [
+            o(s)[e.field.key] ? (l(), b(
+              g(o(s)[e.field.key]),
+              h({
+                key: 0,
+                style: { width: "100%" },
+                readonly: ""
+              }, e.field["k-component-props"]),
+              null,
+              16
+              /* FULL_PROPS */
+            )) : (l(), c(
+              "div",
+              {
+                key: 1,
+                class: n(o(r)("error"))
+              },
+              " 未定义组件 ",
+              2
+              /* CLASS */
+            ))
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["class", "label"])
+      ],
+      2
+      /* CLASS */
+    ));
+  }
+});
+export {
+  P as default
+};