@vunk/form 0.0.0-alpha.5 → 0.0.0-alpha.8

package/components/form-item-renderer/index.js

@@ -48,6 +48,7 @@ const VkfFormItemRenderer = defineComponent({
           });
           nodes && a.push(nodes);
         } else if (c.templateSlots?.default) {
+          console.warn(c.templateType, "templateType\u4E0D\u5B58\u5728\u5C06\u8DF3\u8FC7");
           currentK.push("templateSlots", "default");
           return renderFormItems(c.templateSlots.default, currentK);
         }

package/components/ground/index.css

@@ -1,36 +1,63 @@
+
+.vkf-ground {
+  display: flex;
+}
+
+.vkf-ground-widget-x {
+  width: 15em;
+  height: 100%;
+}
+
+.vkf-ground-main-x {
+  flex: 3;
+}
+
+.vkf-ground-main-x .vkf-ground-main-card {
+  height: 100%;
+}
+
+.vkf-ground-main-card>.vk-card-title {
+  display: flex;
+  justify-content: end;
+  margin-bottom: var(--gap-xxs);
+}
+
+.vkf-ground-main-card>.vk-card-body {
+  height: 100%;
+  border: 2px var(--el-border-color) dashed;
+  overflow: auto;
+}
+
+.vkf-ground-config-x {
+  padding: 0 1em;
+  flex: 1;
+}
 
-.vkf-ground {
+.vkf-widget-tab{
+  position: relative;
+  width: 100%;
   display: flex;
+  justify-content: space-around;
+  --vk-float-block-color: var(--el-color-primary);
 }
-
-.vkf-ground-widget-x {
-  width: 15em;
-  height: 100%;
-}
-
-.vkf-ground-main-x {
-  flex: 3;
-}
-
-.vkf-ground-main-x .vkf-ground-main-card {
-  height: 100%;
+.vkf-widget-tab > .is-active.vk-tab-item{
+ color: var(--el-color-primary);
 }
-
-.vkf-ground-main-card>.vk-card-title {
-  display: flex;
-  justify-content: end;
-  margin-bottom: var(--gap-xxs);
+.vkf-widget-tab > .vk-tab-item {
+  padding: 0.5em 1em;
 }
 
-.vkf-ground-main-card>.vk-card-body {
-  height: 100%;
-  border: 2px var(--el-border-color) dashed;
-  overflow: auto;
+/* for FormItemWidget */
+.vkf-ground-widget-ul {
+  display: grid;
+  grid: auto-flow / repeat(2, 1fr);
 }
-
-.vkf-ground-config-x {
-  padding: 0 1em;
-  flex: 1;
+.vkf-ground-widget-ul li{
+  text-align: center;
+  margin: 0.25em .5em;
+  background: var(--el-color-info-light-8);
+  cursor: move;
+  border-radius: 4px;
 }
 
 .vkf-ground-main {
@@ -59,33 +86,6 @@
   padding: 1em .5em 0;
 }
 
-.vkf-widget-tab{
-  position: relative;
-  width: 100%;
-  display: flex;
-  justify-content: space-around;
-  --vk-float-block-color: var(--el-color-primary);
-}
-.vkf-widget-tab > .is-active.vk-tab-item{
- color: var(--el-color-primary);
-}
-.vkf-widget-tab > .vk-tab-item {
-  padding: 0.5em 1em;
-}
-
-/* for FormItemWidget */
-.vkf-ground-widget-ul {
-  display: grid;
-  grid: auto-flow / repeat(2, 1fr);
-}
-.vkf-ground-widget-ul li{
-  text-align: center;
-  margin: 0.25em .5em;
-  background: var(--el-color-info-light-8);
-  cursor: move;
-  border-radius: 4px;
-}
-
 .vkf-ground-main-editing-wrapper{
   overflow: hidden;
   position: relative;

package/components/ground/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, ref, createVNode, withDirectives, renderSlot, vShow, createTextVNode, computed, createCommentVNode, resolveDynamicComponent, normalizeClass, mergeProps, toHandlers, unref, getCurrentScope, onScopeDispose, watch } from 'vue';
+import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, ref, createVNode, withDirectives, renderSlot, vShow, createTextVNode, computed, createCommentVNode, resolveDynamicComponent, normalizeClass, mergeProps, unref, getCurrentScope, onScopeDispose, watch } from 'vue';
 import { VkTabGroup, VkTabItem, VkCard, VkBoxHandler } from 'vunk';
 import { VkFloatBlock } from 'vunk/gsap/components/float-block';
 import { ElCollapseItem, ElScrollbar, ElCollapse, ElIcon, ElButton, ElMessage, ElMessageBox } from 'element-plus';
@@ -8,7 +8,9 @@ import { VkfForm, _VkfFormUtils } from '@vunk/form/components/form';
 import { VkfDropWrapper, DragoverClasses } from '@vunk/form/components/drop-wrapper';
 import { VkfFormItemRendererTemplate } from '@vunk/form/components/form-item-renderer-template';
 import { setData, unsetData } from 'vunk/shared/helper';
-import { VkfConfig, _VkfConfigCtx } from '@vunk/form/components/config';
+import { VkfConfigRenderer } from '@vunk/form/components/config-renderer';
+import { VkfConfigRendererTemplate } from '@vunk/form/components/config-renderer-template';
+import { VkfInputConfig } from '@vunk/form/components/input-config';
 
 var script$5 = defineComponent({
   components: {
@@ -633,22 +635,19 @@ var script$2 = defineComponent({
       type: Array,
       default: () => []
     },
-    prop: {
+    data: Object,
+    currentK: {
       type: String,
       default: ""
-    },
-    k: {
-      type: Array,
-      default: () => []
     }
   },
   emits: {
-    "update:prop": (e) => e,
+    "update:currentK": (e) => e,
+    "setData": (e) => e,
     "setData:formItems": null,
     "unsetData:formItems": null
   },
   setup(props, { emit }) {
-    const formData = ref({});
     const groundEndClassName = ref(DragoverClasses.normal);
     const formItemsWithWrapper = computed(() => {
       const data = [];
@@ -687,21 +686,24 @@ var script$2 = defineComponent({
       addDefaultProp(source);
       if (source.templateType === "VkfEditingSelect") {
         const currentLength = props.formItems.length;
-        source.templateSlots.default.forEach((v, i) => {
+        const formItemSource = source.templateSlots.default[0];
+        if (formItemSource) {
           emit("setData:formItems", {
-            k: currentLength + i,
-            v
+            k: currentLength,
+            v: formItemSource
           });
-        });
+        }
         emit("unsetData:formItems", {
           k: source.index
         });
+        emit("update:currentK", currentLength - 1 + "");
       } else {
+        const currentK = props.formItems.length;
         emit("setData:formItems", {
-          k: props.formItems.length,
+          k: currentK,
           v: source
         });
-        emit("update:prop", source.prop);
+        emit("update:currentK", currentK + "");
       }
     }
     function editDrop(e, overClass, toData) {
@@ -725,12 +727,13 @@ var script$2 = defineComponent({
       }
       if (!fromK.length) {
         addDefaultProp(itemSource);
+        const k = toK.map((v, index) => index === toK.length - 1 ? tkl : v);
         emit("setData:formItems", {
-          k: toK.map((v, index) => index === toK.length - 1 ? tkl : v),
+          k,
           v: itemSource,
           insert: true
         });
-        itemSource.prop && emit("update:prop", itemSource.prop);
+        emit("update:currentK", k.join());
         return;
       }
       if (fromK.length === toK.length) {
@@ -755,6 +758,7 @@ var script$2 = defineComponent({
             v: itemSource,
             insert: true
           });
+          emit("update:currentK", tkl + "");
         }
       }
     }
@@ -766,7 +770,6 @@ var script$2 = defineComponent({
       drop,
       setData,
       editDrop,
-      formData,
       formItemsWithWrapper
     };
   }
@@ -791,21 +794,22 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       createCommentVNode(" {{ formItems. }} "),
       createCommentVNode(" \u5C06formItems\u6E32\u67D3 \u4E3A\u7F16\u8F91\u65F6\u7EC4\u4EF6 "),
       createVNode(_component_VkTabGroup, {
-        modelValue: _ctx.prop,
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:prop", $event))
+        modelValue: _ctx.currentK,
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:currentK", $event))
       }, {
         default: withCtx(() => [
           createVNode(_component_VkfForm, {
             formItems: _ctx.formItemsWithWrapper,
-            data: _ctx.formData,
-            onSetData: _cache[1] || (_cache[1] = ($event) => _ctx.setData(_ctx.formData, $event))
+            data: _ctx.data,
+            onSetData: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("setData", $event))
           }, {
             rendererTemplate: withCtx(() => [
               createVNode(_component_VkfFormItemRendererTemplate, { type: "VkfEditingSelect" }, {
-                default: withCtx(({ data, Renderer, raw, k }) => [
+                default: withCtx(({ Renderer, raw, k }) => [
                   createCommentVNode(" name is prop "),
                   createVNode(_component_VkTabItem, {
-                    name: data.name,
+                    name: k.join(),
+                    title: k.join(),
                     clearable: false,
                     class: "vkf-gm-form-item-x"
                   }, {
@@ -828,7 +832,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                       }, 1032, ["onDrop", "attributes", "active", "source"])
                     ]),
                     _: 2
-                  }, 1032, ["name"])
+                  }, 1032, ["name", "title"])
                 ]),
                 _: 1
               }),
@@ -853,57 +857,49 @@ script$2.__file = "ground/src/ground-main/src/index.vue";
 
 var script$1 = defineComponent({
   components: {
-    VkfConfig
+    VkfConfigRenderer,
+    VkfConfigRendererTemplate,
+    VkfInputConfig
   },
   props: {
-    ..._VkfConfigCtx.props,
-    templateType: {
-      type: String,
-      default: ""
+    data: {
+      type: Object,
+      default: () => ({})
     },
-    propDisabled: {
-      type: Boolean,
-      default: false
+    propFieldSource: {
+      type: Object,
+      default: () => ({})
     }
   },
   emits: {
-    ..._VkfConfigCtx.emits,
-    "update:propDisabled": (e) => e
+    setData: (e) => e
   },
-  setup(props, { emit }) {
-    const configProps = _VkfConfigCtx.createBindProps(props, ["source"]);
-    const configEmits = _VkfConfigCtx.createOnEmits(emit);
-    const source = computed(() => {
-      return {
-        templateType: props.templateType,
-        propDisabled: props.propDisabled
-      };
-    });
-    const setSource = (e) => {
-      if (e.k === "propDisabled") {
-        emit("update:propDisabled", e.v);
-      }
-    };
-    return {
-      source,
-      setSource,
-      configProps,
-      configEmits
-    };
+  setup() {
+    return {};
   }
 });
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_VkfConfig = resolveComponent("VkfConfig");
-  return openBlock(), createBlock(_component_VkfConfig, mergeProps({
-    source: _ctx.source,
-    "onSetData:source": _ctx.setSource
-  }, _ctx.configProps, toHandlers(_ctx.configEmits)), {
-    rendererTemplate: withCtx(() => [
-      renderSlot(_ctx.$slots, "rendererTemplate")
+  const _component_VkfInputConfig = resolveComponent("VkfInputConfig");
+  const _component_VkfConfigRendererTemplate = resolveComponent("VkfConfigRendererTemplate");
+  const _component_VkfConfigRenderer = resolveComponent("VkfConfigRenderer");
+  return openBlock(), createBlock(_component_VkfConfigRenderer, { source: _ctx.data }, {
+    default: withCtx(() => [
+      createCommentVNode(' data-example: { "templateType": "VkfInput", \r\n    "prop": "from_widget_2", "label": "inputLabel" } '),
+      createVNode(_component_VkfConfigRendererTemplate, { type: "VkfInput" }, {
+        default: withCtx(({ data: props }) => [
+          createVNode(_component_VkfInputConfig, mergeProps(props, {
+            data: _ctx.data,
+            onSetData: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("setData", $event)),
+            propFieldSource: _ctx.propFieldSource
+          }), null, 16, ["data", "propFieldSource"])
+        ]),
+        _: 1
+      }),
+      renderSlot(_ctx.$slots, "configRendererTemplate")
     ]),
     _: 3
-  }, 16, ["source", "onSetData:source"]);
+  }, 8, ["source"]);
 }
 
 script$1.render = render$1;
@@ -1062,54 +1058,79 @@ var script = defineComponent({
       type: Array,
       default: void 0
     },
+    source: {
+      type: Array,
+      default: () => []
+    },
     data: {
+      type: Object,
+      default: () => ({})
+    },
+    modelValue: {
       type: Array,
       default: () => []
     }
   },
   emits: {
-    "update:data": null,
+    "update:source": null,
+    "setData:source": (e) => e,
+    "unsetData:source": null,
     "setData": (e) => e,
-    "unsetData": null,
-    "update:componentLibCollapseExpanded": null
+    "update:componentLibCollapseExpanded": null,
+    "update:modelValue": (e) => Array.isArray(e)
   },
   setup(props, { emit }) {
-    const editProp = ref("");
     const propToFormItem = computed(() => {
-      return props.data.reduce((a, c) => {
+      return props.source.reduce((a, c) => {
         if (c.prop) {
           a[c.prop] = c;
         }
         return a;
       }, {});
     });
-    const configPropDisabled = ref(true);
-    const setFormItem = (props2, e) => {
-      if (e.k === "prop") {
-        if (e.v === props2.prop) {
-          configPropDisabled.value = true;
-        } else {
-          if (e.v in propToFormItem.value) {
-            ElMessage({
-              type: "warning",
-              message: "\u5B58\u5728\u76F8\u540C\u7684prop, \u8BF7\u91CD\u65B0\u4FEE\u6539"
-            });
-          } else if (!e.v) {
-            ElMessage({
-              type: "warning",
-              message: "prop\u4E0D\u80FD\u4E3A\u7A7A"
-            });
-          } else {
-            props2.prop = e.v;
-            editProp.value = e.v;
-            configPropDisabled.value = true;
+    const kToSourceItem = computed(() => {
+      const data = {};
+      function intoData(list, k = []) {
+        list.forEach((item, index) => {
+          const currentK = [...k, index];
+          data[currentK.join()] = item;
+          if (item.templateSlots) {
+            if (Array.isArray(item.templateSlots.default)) {
+              intoData(item.templateSlots.default, currentK);
+            }
           }
-        }
+        });
+      }
+      intoData(props.source);
+      return data;
+    });
+    const _modelValue = ref("");
+    const editK = computed({
+      get() {
+        return props.modelValue?.join() ?? _modelValue.value;
+      },
+      set(v) {
+        _modelValue.value = v;
+        emit("update:modelValue", v ? v.split(",") : []);
+      }
+    });
+    const editKArr = computed(() => editK.value ? editK.value.split(",") : []);
+    const propValidateUpdate = (ev) => {
+      if (ev in propToFormItem.value) {
+        ElMessage({
+          type: "warning",
+          message: "\u5B58\u5728\u76F8\u540C\u7684prop, \u8BF7\u91CD\u65B0\u4FEE\u6539"
+        });
+      } else if (!ev) {
+        ElMessage({
+          type: "warning",
+          message: "prop\u4E0D\u80FD\u4E3A\u7A7A"
+        });
       } else {
-        setData(props2, e);
+        return true;
       }
     };
-    const formItemStr = computed(() => JSON.stringify(props.data));
+    const formItemStr = computed(() => JSON.stringify(props.source));
     const formItemClip = useClipboard({
       source: formItemStr
     });
@@ -1130,16 +1151,17 @@ var script = defineComponent({
         }
         return obj;
       }).then((obj) => {
-        emit("update:data", obj);
+        emit("update:source", obj);
       });
     };
     return {
       propToFormItem,
-      editProp,
       setData,
       unsetData,
-      setFormItem,
-      configPropDisabled,
+      propValidateUpdate,
+      kToSourceItem,
+      editK,
+      editKArr,
       formItemClip,
       inputJson
     };
@@ -1192,36 +1214,43 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         default: withCtx(() => [
           createVNode(_component_VkfGroundMain, {
-            prop: _ctx.editProp,
-            "onUpdate:prop": _cache[2] || (_cache[2] = ($event) => _ctx.editProp = $event),
-            formItems: _ctx.data,
-            "onSetData:formItems": _cache[3] || (_cache[3] = ($event) => _ctx.$emit("setData", $event)),
-            "onUnsetData:formItems": _cache[4] || (_cache[4] = ($event) => _ctx.$emit("unsetData", $event))
+            data: _ctx.data,
+            onSetData: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("setData", $event)),
+            currentK: _ctx.editK,
+            "onUpdate:currentK": _cache[3] || (_cache[3] = ($event) => _ctx.editK = $event),
+            formItems: _ctx.source,
+            "onSetData:formItems": _cache[4] || (_cache[4] = ($event) => _ctx.$emit("setData:source", $event)),
+            "onUnsetData:formItems": _cache[5] || (_cache[5] = ($event) => _ctx.$emit("unsetData:source", $event))
           }, {
             rendererTemplate: withCtx(() => [
               renderSlot(_ctx.$slots, "rendererTemplate")
             ]),
             _: 3
-          }, 8, ["prop", "formItems"])
+          }, 8, ["data", "currentK", "formItems"])
         ]),
         _: 3
       })
     ]),
     createElementVNode("div", _hoisted_6, [
       createCommentVNode(" \u901A\u8FC7config \u4FEE\u6539\u6570\u636E\u6E90 \u5355\u9879\u7684\u5185\u5BB9 "),
-      _ctx.editProp && _ctx.propToFormItem[_ctx.editProp] ? (openBlock(), createBlock(_component_VkfGroundConfig, {
-        key: 0,
-        propDisabled: _ctx.configPropDisabled,
-        "onUpdate:propDisabled": _cache[5] || (_cache[5] = ($event) => _ctx.configPropDisabled = $event),
-        templateType: _ctx.propToFormItem[_ctx.editProp].templateType,
-        data: _ctx.propToFormItem[_ctx.editProp],
-        onSetData: _cache[6] || (_cache[6] = ($event) => _ctx.setFormItem(_ctx.propToFormItem[_ctx.editProp], $event))
+      createCommentVNode(" {{ editK }} {{ kToSourceItem[editK] }} "),
+      createCommentVNode(" {{ kToSourceItem[editK] }} "),
+      createCommentVNode('  :k="editKArr" '),
+      createVNode(_component_VkfGroundConfig, {
+        data: _ctx.kToSourceItem[_ctx.editK],
+        onSetData: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("setData:source", {
+          k: [..._ctx.editKArr, $event.k],
+          v: $event.v
+        })),
+        propFieldSource: {
+          validateUpdate: _ctx.propValidateUpdate
+        }
       }, {
-        rendererTemplate: withCtx(() => [
-          renderSlot(_ctx.$slots, "configRendererTemplate")
+        configRendererTemplate: withCtx(() => [
+          renderSlot(_ctx.$slots, "configRendererTemplate", { propValidateUpdate: _ctx.propValidateUpdate })
         ]),
         _: 3
-      }, 8, ["propDisabled", "templateType", "data"])) : createCommentVNode("v-if", true)
+      }, 8, ["data", "propFieldSource"])
     ])
   ]);
 }

package/components/ground/src/ground-config/src/index copy.vue.d.ts

@@ -0,0 +1,72 @@
+import { SetDataEvent } from '@vunk/form/shared/types';
+declare const _default: import("vue").DefineComponent<{
+    templateType: {
+        type: StringConstructor;
+        default: string;
+    };
+    propDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: import("vue").PropType<import("vunk/shared/types").AnyObject>;
+        default: () => {};
+    };
+    source: {
+        type: import("vue").PropType<{
+            [k: string]: any;
+            templateType?: string | undefined;
+        }>;
+        default: () => {};
+    };
+}, {
+    source: import("vue").ComputedRef<{
+        templateType: string;
+        propDisabled: boolean;
+    }>;
+    setSource: (e: SetDataEvent) => void;
+    configProps: import("vue").ComputedRef<{
+        data: import("vunk/shared/types").AnyObject;
+    }>;
+    configEmits: {
+        setData: ((event: "setData", e: SetDataEvent<any>) => void) & ((event: "update:propDisabled", e: boolean) => void) & ((event: "setData:source", e: SetDataEvent<any>) => void);
+        "setData:source": ((event: "setData", e: SetDataEvent<any>) => void) & ((event: "update:propDisabled", e: boolean) => void) & ((event: "setData:source", e: SetDataEvent<any>) => void);
+    };
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:propDisabled': (e: boolean) => boolean;
+    setData: (e: SetDataEvent<any>) => SetDataEvent<any>;
+    'setData:source': (e: SetDataEvent<any>) => SetDataEvent<any>;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    templateType: {
+        type: StringConstructor;
+        default: string;
+    };
+    propDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    data: {
+        type: import("vue").PropType<import("vunk/shared/types").AnyObject>;
+        default: () => {};
+    };
+    source: {
+        type: import("vue").PropType<{
+            [k: string]: any;
+            templateType?: string | undefined;
+        }>;
+        default: () => {};
+    };
+}>> & {
+    onSetData?: ((e: SetDataEvent<any>) => any) | undefined;
+    "onUpdate:propDisabled"?: ((e: boolean) => any) | undefined;
+    "onSetData:source"?: ((e: SetDataEvent<any>) => any) | undefined;
+}, {
+    templateType: string;
+    data: import("vunk/shared/types").AnyObject;
+    source: {
+        [k: string]: any;
+        templateType?: string | undefined;
+    };
+    propDisabled: boolean;
+}>;
+export default _default;