@king-one/form-design 0.0.24 → 0.0.26

package/dist/es/src/components/props/widget/GridProps.vue2.mjs

@@ -0,0 +1,108 @@
+import { defineComponent as _, computed as k, resolveComponent as y, openBlock as p, createBlock as C, unref as o, normalizeClass as g, withCtx as a, createVNode as n, createElementBlock as c, Fragment as h, renderList as b, createTextVNode as N } from "vue";
+import { Form as I, FormItem as d, InputNumber as B, Button as F } from "ant-design-vue";
+import "../../../internal.mjs";
+import { uid as w } from "@king-one/utils";
+import "../../form-icon.vue.mjs";
+import { useNamespace as U } from "../../../hooks/use-namespace/index.mjs";
+import { useInjectDesignContext as V } from "../../../context/design.mjs";
+import $ from "../../form-icon.vue2.mjs";
+const q = /* @__PURE__ */ _({
+  __name: "GridProps",
+  setup(z) {
+    const { b: f } = U("grid-props"), { checkedField: r } = V(), s = k(() => r.value["x-component-props"] || {});
+    function v(l) {
+      var e;
+      (e = r.value.children) == null || e.splice(l, 1);
+    }
+    function x() {
+      var t, i;
+      const l = w(), m = {
+        title: `列表容器${(((t = r.value.children) == null ? void 0 : t.length) || 0) + 1}`,
+        name: l,
+        id: l,
+        key: "k-grid-column",
+        type: "void",
+        icon: "form-list",
+        children: [],
+        "x-component": "GridColumn",
+        "x-decorator": "Void",
+        "x-component-props": {
+          span: 12
+        }
+      };
+      (i = r.value.children) == null || i.push(m);
+    }
+    return (l, e) => {
+      const m = y("AInputNumber");
+      return p(), C(o(I), {
+        layout: "vertical",
+        class: g(o(f)())
+      }, {
+        default: a(() => [
+          n(o(d), { label: "间隔大小" }, {
+            default: a(() => [
+              n(o(B), {
+                value: s.value.gutter,
+                "onUpdate:value": e[0] || (e[0] = (t) => s.value.gutter = t),
+                style: { width: "100%" },
+                min: 1,
+                precision: 0,
+                max: 999,
+                "addon-after": "px"
+              }, null, 8, ["value"])
+            ]),
+            _: 1
+            /* STABLE */
+          }),
+          n(o(d), { label: "配置项" }, {
+            default: a(() => [
+              (p(!0), c(
+                h,
+                null,
+                b(o(r).children, (t, i) => (p(), c("div", {
+                  key: t.id,
+                  class: "col-item"
+                }, [
+                  n(m, {
+                    value: t["x-component-props"].span,
+                    "onUpdate:value": (u) => t["x-component-props"].span = u,
+                    min: 1,
+                    style: { width: "200px" },
+                    precision: 0,
+                    max: 24
+                  }, null, 8, ["value", "onUpdate:value"]),
+                  n($, {
+                    name: "delete1",
+                    class: "close-icon",
+                    onClick: (u) => v(i)
+                  }, null, 8, ["onClick"])
+                ]))),
+                128
+                /* KEYED_FRAGMENT */
+              )),
+              n(o(F), {
+                size: "small",
+                type: "primary",
+                style: { "margin-bottom": "10px" },
+                onClick: x
+              }, {
+                default: a(() => e[1] || (e[1] = [
+                  N(" 添加 + ")
+                ])),
+                _: 1,
+                __: [1]
+              })
+            ]),
+            _: 1
+            /* STABLE */
+          })
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["class"]);
+    };
+  }
+});
+export {
+  q as default
+};

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

@@ -5,13 +5,15 @@ import "./BaseProps.vue.mjs";
 import "./SelectProps.vue.mjs";
 import "./OvertimeProps.vue.mjs";
 import { propsWidgetDecorator as a } from "./PropsDecorator.mjs";
+import "./GridProps.vue.mjs";
 import o from "./BaseProps.vue2.mjs";
 import s from "./InputProps.vue2.mjs";
 import d from "./TextareaProps.vue2.mjs";
 import f from "./InputNumberProps.vue2.mjs";
 import h from "./SelectProps.vue2.mjs";
 import g from "./OvertimeProps.vue2.mjs";
-const _ = {
+import _ from "./GridProps.vue2.mjs";
+const w = {
   "k-input": {
     component: [
       { header: "基础设置", widget: o },
@@ -40,23 +42,28 @@ const _ = {
     component: [
       { header: "组件属性", widget: g }
     ]
+  },
+  "k-grid": {
+    component: [
+      { header: "组件属性", widget: _ }
+    ]
   }
 };
-function T(c = []) {
+function z(c = []) {
   const i = {};
-  for (const [e, p] of Object.entries(_)) {
-    const n = [...p.component];
-    for (const m of c) {
-      const { keys: r, exclude: t } = m;
+  for (const [e, p] of Object.entries(w)) {
+    const m = [...p.component];
+    for (const n of c) {
+      const { keys: r, exclude: t } = n;
       if (t && (Array.isArray(t) ? t.includes(e) : t.test(e)))
         continue;
-      (Array.isArray(r) ? r.includes(e) : r.test(e)) && n.push(m.component);
+      (Array.isArray(r) ? r.includes(e) : r.test(e)) && m.push(n.component);
     }
-    i[e] = a(e, n);
+    i[e] = a(e, m);
   }
   return i;
 }
 export {
-  T as expandProps,
-  _ as widgetProps
+  z as expandProps,
+  w as widgetProps
 };

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

@@ -1,23 +1,28 @@
-const e = {
+import { valueTypeMap as e } from "../types.mjs";
+const o = {
   name: "布局组件",
   key: "layout",
   widget: [
     {
-      title: "表单布局",
+      title: "栅格布局",
       icon: "k-form-grid",
-      key: "form-layout",
-      type: "void",
-      "x-component": "FormLayout"
+      key: "k-grid",
+      type: e.void,
+      "x-component": "FormGrid",
+      "x-component-props": {
+        gutter: 20
+      },
+      "x-decorator": "Void"
     }
   ]
-}, t = {
+}, a = {
   name: "基础组件",
   key: "basic",
   widget: [
     {
       title: "输入框",
       key: "k-input",
-      type: "string",
+      type: e.string,
       icon: "form-input",
       "x-component": "Input",
       "x-component-props": {
@@ -27,7 +32,7 @@ const e = {
     {
       title: "多文本输入框",
       key: "k-textarea",
-      type: "string",
+      type: e.string,
       icon: "form-textarea",
       "x-component": "Textarea",
       "x-component-props": {
@@ -37,7 +42,7 @@ const e = {
     {
       title: "数字输入框",
       key: "k-input-number",
-      type: "number",
+      type: e.number,
       icon: "form-number",
       "x-component": "InputNumber",
       "x-component-props": {
@@ -47,9 +52,9 @@ const e = {
     {
       title: "下拉选择框",
       key: "k-select",
-      type: "array",
+      type: e.array,
       items: {
-        type: "string"
+        type: e.string
       },
       icon: "form-select",
       "x-component": "Select",
@@ -73,10 +78,10 @@ const e = {
     {
       title: "日期范围",
       key: "k-date-range",
-      type: "array",
+      type: e.array,
       format: "date",
       items: {
-        type: "string",
+        type: e.string,
         format: "date"
       },
       icon: "form-date",
@@ -92,7 +97,7 @@ const e = {
     {
       title: "单个日期",
       key: "k-date-single",
-      type: "string",
+      type: e.string,
       format: "date",
       icon: "form-date",
       "x-component": "InputNumber",
@@ -104,46 +109,46 @@ const e = {
     {
       title: "地区选择",
       key: "k-form-area",
-      type: "object",
+      type: e.object,
       icon: "form-area",
       "x-component": "FormArea",
       children: [
         {
           title: "省份",
           key: "k-form-area-province",
-          type: "string",
+          type: e.string,
           name: "province"
         },
         {
           title: "城市",
           key: "k-form-area-city",
-          type: "string",
+          type: e.string,
           name: "city"
         },
         {
           title: "区县",
           key: "k-form-area-county",
-          type: "string",
+          type: e.string,
           name: "county"
         }
       ]
     }
   ]
-}, o = {
+}, r = {
   name: "扩展组件",
   key: "extend",
   widget: [
     {
       title: "对象容器",
       key: "k-object",
-      type: "object",
+      type: e.object,
       icon: "form-object",
       children: []
     },
     {
       title: "列表容器",
       key: "k-array-card",
-      type: "array",
+      type: e.array,
       icon: "form-list",
       children: [],
       "x-component": "ArrayCard",
@@ -152,7 +157,7 @@ const e = {
     {
       title: "明细表",
       key: "k-table",
-      type: "array",
+      type: e.array,
       icon: "form-table",
       "x-component": "ArrayTable",
       "x-decorator-props": {
@@ -160,7 +165,7 @@ const e = {
       }
     }
   ]
-}, a = [
+}, n = [
   {
     name: "加班模版",
     key: "overtime",
@@ -168,7 +173,7 @@ const e = {
     schema: {
       title: "加班模版",
       key: "k-overtime",
-      type: "object",
+      type: e.object,
       name: "overtime",
       id: "overtime",
       "x-design-props": {
@@ -181,15 +186,15 @@ const e = {
         {
           title: "加班明细",
           key: "k-array-card",
-          type: "array",
+          type: e.array,
           children: [
             {
               title: "日期范围",
               key: "k-date-range",
-              type: "array",
+              type: e.array,
               format: "date",
               items: {
-                type: "string",
+                type: e.string,
                 format: "date"
               },
               "x-component": "DateRange",
@@ -208,13 +213,12 @@ const e = {
                   status: "",
                   message: ""
                 }
-              },
-              children: []
+              }
             },
             {
               title: "加班时长",
               key: "k-input-number",
-              type: "number",
+              type: e.number,
               "x-component": "InputNumber",
               "x-component-props": {
                 placeholder: "请输入"
@@ -243,7 +247,7 @@ const e = {
         {
           title: "总时长",
           key: "k-input",
-          type: "string",
+          type: e.string,
           "x-component": "Input",
           "x-component-props": {
             placeholder: "请输入"
@@ -267,7 +271,7 @@ const e = {
     schema: {
       title: "请假模版",
       key: "k-leave",
-      type: "object",
+      type: e.object,
       name: "leave",
       id: "leave",
       "x-design-props": {
@@ -280,9 +284,9 @@ const e = {
         {
           title: "下拉选择框",
           key: "k-select",
-          type: "array",
+          type: e.array,
           items: {
-            type: "string"
+            type: e.string
           },
           "x-component": "Select",
           enum: [
@@ -315,8 +319,8 @@ const e = {
   }
 ];
 export {
-  t as BaseSchema,
-  o as ExtendSchema,
-  e as LayoutSchema,
-  a as tempSchema
+  a as BaseSchema,
+  r as ExtendSchema,
+  o as LayoutSchema,
+  n as tempSchema
 };

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

@@ -1,24 +1,25 @@
 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 d } from "vue";
+import { ref as c } from "vue";
 import "../effects/index.mjs";
-import { widgetPanels as c } from "../components/panel/index.mjs";
+import { widgetPanels as d } from "../components/panel/index.mjs";
 import "../components/props/index.mjs";
 import { Plugin as l } from "../plugins/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 C {
+import { FormSchema as a } from "./FormSchema.mjs";
+import { widgetProps as g } from "../components/props/widget/index.mjs";
+import { DesignEffectDict as f } from "../effects/effect-dict.mjs";
+import { runEffects as u } from "../effects/effective.mjs";
+class N {
   constructor(e) {
     t(this, "schema");
     t(this, "tempSchema");
     t(this, "heart");
     t(this, "plugin");
-    t(this, "FormSchema", new g());
+    t(this, "FormSchema", new a());
     t(this, "props");
-    t(this, "checkedField", d({}));
+    t(this, "checkedField", c({}));
     t(this, "shared", {
       draggedContext: {
         key: "",
@@ -33,15 +34,15 @@ class C {
     });
     const { extendFormProps: s = [], propsWidgets: i = {}, panelWidgets: o = {}, ...h } = e;
     this.shared.panelWidgets = {
-      ...c,
+      ...d,
       ...o
     }, this.shared.propsWidgets = {
-      ...a,
+      ...g,
       ...i
     }, 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;
+    }), this.extendFormProps = s, this.notify(f.ON_DESIGN_INIT);
   }
   use(e) {
     this.plugin.use(e);
@@ -52,11 +53,17 @@ class C {
   getFieldList() {
     return this.FormSchema.getFieldList();
   }
+  setFields(e) {
+    return this.FormSchema.setFields(e);
+  }
+  clearFields() {
+    return this.FormSchema.clearFields();
+  }
   setCheckedField(e) {
     this.checkedField.value = e;
   }
   get lifecycles() {
-    return this.props.effects ? f(this, this.props.effects) : [];
+    return this.props.effects ? u(this, this.props.effects) : [];
   }
   get hooks() {
     return this.plugin.hooks;
@@ -69,5 +76,5 @@ class C {
   }
 }
 export {
-  C as FormDesign
+  N as FormDesign
 };

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

@@ -1,51 +1,74 @@
-var n = Object.defineProperty;
-var a = (s, e, o) => e in s ? n(s, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : s[e] = o;
-var i = (s, e, o) => a(s, typeof e != "symbol" ? e + "" : e, o);
-import { ref as c, toRaw as h } from "vue";
-import { uid as l } from "@king-one/utils";
-import { Field as m } from "./Field.mjs";
-class j {
+var h = Object.defineProperty;
+var p = (r, s, t) => s in r ? h(r, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[s] = t;
+var n = (r, s, t) => p(r, typeof s != "symbol" ? s + "" : s, t);
+import { ref as a, toRaw as m } from "vue";
+import { uid as d } from "@king-one/utils";
+import { Field as f } from "./Field.mjs";
+class g {
   constructor() {
-    i(this, "version", "1.0.0");
-    i(this, "fields", c([]));
+    n(this, "version", "1.0.0");
+    n(this, "fields", a([]));
   }
   getSchema() {
-    const e = h(this.fields.value);
-    console.log(e, "s");
-    const o = this.jsonToschema(e);
+    const s = m(this.fields.value);
+    console.log(s, "s");
+    const t = this.jsonToschema(s);
     return {
       version: this.version,
       form: {
-        schema: o
+        schema: t
       }
     };
   }
   getFieldList() {
-    return this.fields.value.map((e) => new m(e));
-  }
-  jsonToschema(e, o = {}) {
-    return e.forEach((r) => {
-      const t = this.omit(r, ["children"]);
-      t.type === "object" || t.type === "void" ? o[t.name] = {
-        ...t,
-        properties: this.jsonToschema(r.children)
-      } : t.type === "array" && r.children ? o[t.name] = {
-        ...t,
-        items: t.items || {
+    return this.fields.value.map((s) => new f(s));
+  }
+  clearFields() {
+    return this.fields.value = [];
+  }
+  jsonToschema(s, t = {}) {
+    return s.forEach((i) => {
+      const e = this.omit(i, ["children"]);
+      e.type === "object" && i.children ? t[e.name] = {
+        ...e,
+        properties: this.jsonToschema(i.children)
+      } : e.type === "void" && i.children ? t[e.name] = {
+        ...e,
+        properties: this.jsonToschema(i.children)
+      } : e.type === "array" && i.children ? t[e.name] = {
+        ...e,
+        items: e.items || {
           type: "object",
-          id: l(),
-          properties: this.jsonToschema(r.children)
+          id: d(),
+          properties: this.jsonToschema(i.children)
         }
-      } : o[t.name] = t;
-    }), o;
+      } : t[e.name] = e;
+    }), t;
+  }
+  /**
+   * 将 schema 对象格式还原为数组格式
+   * @param schema schema 对象
+   * @returns FieldSchema[] 数组格式
+   */
+  schemaToJson(s) {
+    const t = [];
+    return Object.keys(s).forEach((i) => {
+      var l;
+      const e = s[i], o = this.omit(e, ["properties", "items"]);
+      (e.type === "object" || e.type === "void") && e.properties ? o.children = this.schemaToJson(e.properties) : e.type === "array" && ((l = e.items) != null && l.properties) ? (o.children = this.schemaToJson(e.items.properties), Object.keys(e.items).every((c) => ["type", "id", "properties"].includes(c)) || (o.items = this.omit(e.items, ["properties"]))) : e.type === "array" && e.items && (o.items = e.items), t.push(o);
+    }), t;
+  }
+  setFields(s) {
+    const t = this.schemaToJson(s);
+    this.fields.value = t;
   }
-  omit(e, o) {
-    const r = { ...e };
-    return o.forEach((t) => {
-      delete r[t];
-    }), r;
+  omit(s, t) {
+    const i = { ...s };
+    return t.forEach((e) => {
+      delete i[e];
+    }), i;
   }
 }
 export {
-  j as FormSchema
+  g as FormSchema
 };

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

@@ -1,6 +1,8 @@
 import { LifeCycle as r } from "./LifeCycle.mjs";
 import { runEffects as t } from "./effective.mjs";
+import { DesignEffectDict as i } from "./effect-dict.mjs";
 export {
+  i as DesignEffectDict,
   r as LifeCycle,
   t as runEffects
 };

package/dist/es/src/plugins/modules/drag-add.mjs

@@ -1,17 +1,17 @@
-var n = Object.defineProperty;
-var k = (e, r, a) => r in e ? n(e, r, { enumerable: !0, configurable: !0, writable: !0, value: a }) : e[r] = a;
-var s = (e, r, a) => k(e, typeof r != "symbol" ? r + "" : r, a);
-const u = ["k-array-card", "k-object", "k-table"];
+var o = Object.defineProperty;
+var l = (a, r, e) => r in a ? o(a, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[r] = e;
+var d = (a, r, e) => l(a, typeof r != "symbol" ? r + "" : r, e);
+const k = ["k-array-card", "k-object", "k-table"];
 class g {
   constructor() {
-    s(this, "name", "BaseDragAdd");
+    d(this, "name", "BaseDragAdd");
   }
   install(r) {
-    r.hooks.syncDragAdd.tap("formPanelDragAdd", (a) => !0), r.hooks.syncDragAdd.tap("NestedDragAdd", (a) => {
-      const { region: t, source: c } = a;
-      if (t === "k-array-card" || t === "k-object" || t === "k-table") {
-        const d = ["k-array-card", "k-object", "k-table"], { key: o } = c;
-        return !d.includes(o);
+    r.hooks.syncDragAdd.tap("formPanelDragAdd", (e) => !0), r.hooks.syncDragAdd.tap("NestedDragAdd", (e) => {
+      const { region: t, source: n } = e, s = ["k-array-card", "k-object", "k-table", "k-grid"];
+      if (s.includes(t)) {
+        const { key: c } = n;
+        return !s.includes(c);
       }
       return !0;
     });
@@ -19,5 +19,5 @@ class g {
 }
 export {
   g as BaseDragAdd,
-  u as exclusion
+  k as exclusion
 };

package/dist/es/src/types.mjs

@@ -0,0 +1,11 @@
+const o = {
+  string: "string",
+  number: "number",
+  boolean: "boolean",
+  object: "object",
+  array: "array",
+  void: "void"
+};
+export {
+  o as valueTypeMap
+};

package/dist/lib/src/components/form-desgin.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../internal.js");const s=require("../context/design.js");require("./index.js");const a=require("./types.js"),c=require("../utils/merge.js");require("@king-one/form-design/dist/theme-chalk/index.css");const l=require("../hooks/use-namespace/index.js"),g=require("./form-material.vue.js"),_=require("./form-panel.vue.js"),p=require("./form-setting.vue.js"),{b:d}=l.useNamespace("main"),f={config:{theme:"dark",tags:["frontend","vue"]}},m={config:{language:"zh-CN",tags:["typescript","javascript"]}},v=c.merge(f,m,{});console.log(v);const q=e.defineComponent({name:"FormDesign",props:a.FormDesignProps,setup(u,{slots:n}){const{toolbar:o,setting:r}=n,t=e.ref(!1);return s.useProvideDragContext({isDrag:t,updateDrag:i=>{t.value=i}}),s.useProvideDesignContext(u.design),()=>e.h("form",{class:d()},[e.h(g.default),e.h(_.default,{},{toolbar:o}),e.h(p.default,null,{default:()=>r==null?void 0:r()})])}});exports.default=q;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue");require("../internal.js");const s=require("../context/design.js");require("./index.js");const a=require("./types.js"),c=require("../utils/merge.js");require("@king-one/form-design/dist/theme-chalk/index.css");const l=require("../hooks/use-namespace/index.js"),g=require("./form-material.vue.js"),_=require("./form-panel.vue.js"),p=require("./form-setting.vue.js"),{b:d}=l.useNamespace("main"),f={config:{theme:"dark",tags:["frontend","vue"]}},v={config:{language:"zh-CN",tags:["typescript","javascript"]}},m=c.merge(f,v,{});console.log(m);const q=e.defineComponent({name:"FormDesign",props:a.FormDesignProps,setup(u,{slots:n}){const{toolbar:o,setting:r}=n,t=e.ref(!1);return s.useProvideDragContext({isDrag:t,updateDrag:i=>{t.value=i}}),s.useProvideDesignContext(u.design),()=>e.h("div",{class:d()},[e.h(g.default),e.h(_.default,{},{toolbar:o}),e.h(p.default,null,{default:()=>r==null?void 0:r()})])}});exports.default=q;