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

package/components/ground/index.js

@@ -1,10 +1,10 @@
-import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, ref, createVNode, withDirectives, vShow, createTextVNode, withModifiers, renderSlot, computed, createCommentVNode, resolveDynamicComponent, normalizeClass, mergeProps, toHandlers } from 'vue';
+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 { VkTabGroup, VkTabItem, VkCard, VkBoxHandler } from 'vunk';
 import { VkFloatBlock } from 'vunk/gsap/components/float-block';
-import { ElCollapseItem, ElScrollbar, ElCollapse, ElIcon, ElMessage } from 'element-plus';
+import { ElCollapseItem, ElScrollbar, ElCollapse, ElIcon, ElButton, ElMessage, ElMessageBox } from 'element-plus';
 import { VkfDragWrapper } from '@vunk/form/components/drag-wrapper';
 import 'vunk/gsap/components/float-block/index.css';
-import { _VkfFormUtils, VkfForm } from '@vunk/form/components/form';
+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';
@@ -25,6 +25,24 @@ var script$5 = defineComponent({
           prop: "",
           label: "inputLabel"
         }
+      },
+      {
+        label: "select",
+        value: "VkfSelect",
+        defaultOptions: {
+          templateType: "VkfSelect",
+          prop: "",
+          label: "label"
+        }
+      },
+      {
+        label: "switch",
+        value: "VkfSwitch",
+        defaultOptions: {
+          templateType: "VkfSwitch",
+          prop: "",
+          label: "label"
+        }
       }
     ];
     return {
@@ -33,23 +51,24 @@ var script$5 = defineComponent({
   }
 });
 
-const _hoisted_1$5 = { class: "vkf-ground-widget-ul" };
+const _hoisted_1$6 = { class: "vkf-ground-widget-ul" };
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VkfDragWrapper = resolveComponent("VkfDragWrapper");
   const _component_ElCollapseItem = resolveComponent("ElCollapseItem");
   return openBlock(), createBlock(_component_ElCollapseItem, { title: "FormItems" }, {
     default: withCtx(() => [
-      createElementVNode("ul", _hoisted_1$5, [
+      createElementVNode("ul", _hoisted_1$6, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
           return openBlock(), createBlock(_component_VkfDragWrapper, {
             key: item.value,
-            data: JSON.stringify(item.defaultOptions)
+            title: JSON.stringify({ source: item.defaultOptions }),
+            data: JSON.stringify({ source: item.defaultOptions })
           }, {
             default: withCtx(() => [
               createElementVNode("li", null, toDisplayString(item.label), 1)
             ]),
             _: 2
-          }, 1032, ["data"]);
+          }, 1032, ["title", "data"]);
         }), 128))
       ])
     ]),
@@ -61,14 +80,14 @@ script$5.render = render$5;
 script$5.__file = "ground/src/ground-widget/src/form-item-widget/src/index.vue";
 
 var ComponentsType = /* @__PURE__ */ ((ComponentsType2) => {
-  ComponentsType2[ComponentsType2["container"] = 0] = "container";
-  ComponentsType2[ComponentsType2["formItems"] = 1] = "formItems";
+  ComponentsType2["container"] = "container";
+  ComponentsType2["formItems"] = "formItems";
   return ComponentsType2;
 })(ComponentsType || {});
 
 var WidgetTab = /* @__PURE__ */ ((WidgetTab2) => {
-  WidgetTab2[WidgetTab2["components"] = 0] = "components";
-  WidgetTab2[WidgetTab2["templates"] = 1] = "templates";
+  WidgetTab2["components"] = "components";
+  WidgetTab2["templates"] = "templates";
   return WidgetTab2;
 })(WidgetTab || {});
 var script$4 = defineComponent({
@@ -81,23 +100,30 @@ var script$4 = defineComponent({
     ElCollapse,
     FormItemWidget: script$5
   },
+  props: {
+    componentLibCollapseExpanded: {
+      type: Array,
+      default: () => [
+        ComponentsType.container,
+        ComponentsType.formItems
+      ]
+    }
+  },
+  emits: {
+    "update:componentLibCollapseExpanded": null
+  },
   setup() {
-    const widgetTab = ref(0 /* components */);
-    const componentsType = ref([
-      ComponentsType.container,
-      ComponentsType.formItems
-    ]);
+    const widgetTab = ref("components" /* components */);
     return {
       WidgetTab,
       ComponentsType,
-      widgetTab,
-      componentsType
+      widgetTab
     };
   }
 });
 
-const _hoisted_1$4 = /* @__PURE__ */ createTextVNode(" \u7EC4\u4EF6\u5E93 ");
-const _hoisted_2$2 = /* @__PURE__ */ createTextVNode(" \u6A21\u677F\u5E93 ");
+const _hoisted_1$5 = /* @__PURE__ */ createTextVNode(" \u7EC4\u4EF6\u5E93 ");
+const _hoisted_2$4 = /* @__PURE__ */ createTextVNode(" \u6A21\u677F\u5E93 ");
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VkTabItem = resolveComponent("VkTabItem");
   const _component_VkFloatBlock = resolveComponent("VkFloatBlock");
@@ -115,18 +141,20 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       }, {
         default: withCtx(() => [
           createVNode(_component_VkTabItem, {
-            name: _ctx.WidgetTab.components
+            name: _ctx.WidgetTab.components,
+            clearable: false
           }, {
             default: withCtx(() => [
-              _hoisted_1$4
+              _hoisted_1$5
             ]),
             _: 1
           }, 8, ["name"]),
           createVNode(_component_VkTabItem, {
-            name: _ctx.WidgetTab.templates
+            name: _ctx.WidgetTab.templates,
+            clearable: false
           }, {
             default: withCtx(() => [
-              _hoisted_2$2
+              _hoisted_2$4
             ]),
             _: 1
           }, 8, ["name"]),
@@ -139,23 +167,24 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_ElScrollbar, null, {
         default: withCtx(() => [
           withDirectives(createVNode(_component_ElCollapse, {
-            modelValue: _ctx.componentsType,
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.componentsType = $event)
+            modelValue: _ctx.componentLibCollapseExpanded,
+            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:componentLibCollapseExpanded", $event))
           }, {
             default: withCtx(() => [
               createVNode(_component_FormItemWidget, {
                 name: _ctx.ComponentsType.formItems
-              }, null, 8, ["name"])
+              }, null, 8, ["name"]),
+              renderSlot(_ctx.$slots, "componentLibCollapse")
             ]),
-            _: 1
+            _: 3
           }, 8, ["modelValue"]), [
             [vShow, _ctx.widgetTab === _ctx.WidgetTab.components]
           ])
         ]),
-        _: 1
+        _: 3
       })
     ]),
-    _: 1
+    _: 3
   });
 }
 
@@ -170,6 +199,25 @@ var _export_sfc = (sfc, props) => {
   return target;
 };
 
+const _sfc_main$1 = defineComponent({
+  name: "Delete"
+});
+const _hoisted_1$4 = {
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+const _hoisted_2$3 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"
+}, null, -1);
+const _hoisted_3$2 = [
+  _hoisted_2$3
+];
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, _hoisted_3$2);
+}
+var _delete = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+
 const _sfc_main = defineComponent({
   name: "Sort"
 });
@@ -177,12 +225,12 @@ const _hoisted_1$3 = {
   viewBox: "0 0 1024 1024",
   xmlns: "http://www.w3.org/2000/svg"
 };
-const _hoisted_2$1 = /* @__PURE__ */ createElementVNode("path", {
+const _hoisted_2$2 = /* @__PURE__ */ createElementVNode("path", {
   fill: "currentColor",
   d: "M384 96a32 32 0 0 1 64 0v786.752a32 32 0 0 1-54.592 22.656L95.936 608a32 32 0 0 1 0-45.312h.128a32 32 0 0 1 45.184 0L384 805.632V96zm192 45.248a32 32 0 0 1 54.592-22.592L928.064 416a32 32 0 0 1 0 45.312h-.128a32 32 0 0 1-45.184 0L640 218.496V928a32 32 0 1 1-64 0V141.248z"
 }, null, -1);
 const _hoisted_3$1 = [
-  _hoisted_2$1
+  _hoisted_2$2
 ];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("svg", _hoisted_1$3, _hoisted_3$1);
@@ -198,45 +246,49 @@ var script$3 = defineComponent({
     source: {
       type: Object,
       default: () => ({})
+    },
+    attributes: {
+      type: Object,
+      default: () => ({ k: [] })
     }
   },
+  emits: {
+    drop: (e, c, data) => e || c || data,
+    del: (e) => e
+  },
   components: {
     VkBoxHandler,
     ElIcon,
     Sort: sort,
+    Delete: _delete,
     VkfDragWrapper,
     VkfDropWrapper
-  },
-  setup() {
-    const dragover = (e) => {
-    };
-    const drop = (e) => {
-    };
-    return {
-      dragover,
-      drop
-    };
   }
 });
 
 const _hoisted_1$2 = /* @__PURE__ */ createTextVNode(" \u62D6\u52A8\u5355\u5143 ");
+const _hoisted_2$1 = { class: "vkf-gmew-tools vkf-gmew-rb-x" };
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Sort = resolveComponent("Sort");
   const _component_el_icon = resolveComponent("el-icon");
   const _component_VkfDragWrapper = resolveComponent("VkfDragWrapper");
   const _component_VkBoxHandler = resolveComponent("VkBoxHandler");
+  const _component_Delete = resolveComponent("Delete");
   const _component_VkfDropWrapper = resolveComponent("VkfDropWrapper");
   return openBlock(), createBlock(_component_VkfDropWrapper, {
-    onDragover: withModifiers(_ctx.dragover, ["stop"]),
+    onDrop: _cache[1] || (_cache[1] = (...arg) => _ctx.$emit("drop", ...arg, {
+      attributes: _ctx.attributes,
+      source: _ctx.source
+    })),
     class: "vkf-ground-main-editing-wrapper"
   }, {
     default: withCtx(() => [
       withDirectives(createVNode(_component_VkBoxHandler, null, {
         default: withCtx(() => [
           createVNode(_component_VkfDragWrapper, {
-            title: JSON.stringify(_ctx.source),
-            data: JSON.stringify(_ctx.source),
-            class: "vkf-gmew-drag-wrapper"
+            title: JSON.stringify({ source: _ctx.source, attributes: _ctx.attributes }),
+            data: JSON.stringify({ source: _ctx.source, attributes: _ctx.attributes }),
+            class: "vkf-gmew-drag-wrapper vkf-gmew-tools"
           }, {
             default: withCtx(() => [
               createVNode(_component_el_icon, null, {
@@ -254,10 +306,22 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       }, 512), [
         [vShow, _ctx.active]
       ]),
+      withDirectives(createElementVNode("div", _hoisted_2$1, [
+        createVNode(_component_el_icon, {
+          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("del", { k: _ctx.attributes.k }))
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_Delete)
+          ]),
+          _: 1
+        })
+      ], 512), [
+        [vShow, _ctx.active]
+      ]),
       renderSlot(_ctx.$slots, "default")
     ]),
     _: 3
-  }, 8, ["onDragover"]);
+  });
 }
 
 script$3.render = render$3;
@@ -549,7 +613,12 @@ function uniqueId(prefix) {
   return toString(prefix) + id;
 }
 
-const createDefaultSlots = _VkfFormUtils._VkfFormItemRendererUtils.createDefaultSlots;
+const createDefaultSlots = (e) => _VkfFormUtils._VkfFormItemRendererUtils.createDefaultSlots(e);
+const addDefaultProp = (source) => {
+  if ("prop" in source) {
+    source.prop ||= uniqueId("from_widget_");
+  }
+};
 var script$2 = defineComponent({
   components: {
     VkfDropWrapper,
@@ -567,12 +636,16 @@ var script$2 = defineComponent({
     prop: {
       type: String,
       default: ""
+    },
+    k: {
+      type: Array,
+      default: () => []
     }
   },
   emits: {
     "update:prop": (e) => e,
-    setFormItems: null,
-    unsetFormItems: null
+    "setData:formItems": null,
+    "unsetData:formItems": null
   },
   setup(props, { emit }) {
     const formData = ref({});
@@ -608,32 +681,82 @@ var script$2 = defineComponent({
         return;
       groundEndClassName.value = DragoverClasses.normal;
       const data = JSON.parse(e.dataTransfer.getData("text"));
-      data.prop ||= uniqueId("from_widget_");
-      if (data.templateType === "VkfEditingSelect") {
+      const source = data?.source;
+      if (!source)
+        return;
+      addDefaultProp(source);
+      if (source.templateType === "VkfEditingSelect") {
         const currentLength = props.formItems.length;
-        data.templateSlots.default.forEach((v, i) => {
-          emit("setFormItems", {
+        source.templateSlots.default.forEach((v, i) => {
+          emit("setData:formItems", {
             k: currentLength + i,
             v
           });
         });
-        emit("unsetFormItems", {
-          k: data.index
+        emit("unsetData:formItems", {
+          k: source.index
         });
       } else {
-        emit("setFormItems", {
+        emit("setData:formItems", {
           k: props.formItems.length,
-          v: data
+          v: source
         });
-        emit("update:prop", data.prop);
+        emit("update:prop", source.prop);
       }
     }
-    function editDrop(e) {
+    function editDrop(e, overClass, toData) {
+      e.stopPropagation();
       e.preventDefault();
       if (!e.dataTransfer)
         return;
-      const data = JSON.parse(e.dataTransfer.getData("text"));
-      console.log(data);
+      const fromData = JSON.parse(e.dataTransfer.getData("text"));
+      const fromSource = fromData?.source;
+      if (!fromSource)
+        return;
+      const fromK = fromData.attributes?.k ?? [];
+      let toK = toData.attributes.k;
+      let tkl = toK.at(-1);
+      if (typeof tkl === "number" && overClass === DragoverClasses["is-dragover-next"]) {
+        tkl++;
+      }
+      let itemSource = fromSource;
+      if (fromSource.templateType === "VkfEditingSelect") {
+        itemSource = fromSource.templateSlots.default[0];
+      }
+      if (!fromK.length) {
+        addDefaultProp(itemSource);
+        emit("setData:formItems", {
+          k: toK.map((v, index) => index === toK.length - 1 ? tkl : v),
+          v: itemSource,
+          insert: true
+        });
+        itemSource.prop && emit("update:prop", itemSource.prop);
+        return;
+      }
+      if (fromK.length === toK.length) {
+        const fkl = fromK.at(-1);
+        if (typeof fkl === "number" && typeof tkl === "number") {
+          if (overClass === DragoverClasses["is-dragover-prev"]) {
+            if (fkl + 1 === tkl)
+              return;
+          }
+          if (overClass === DragoverClasses["is-dragover-prev"]) {
+            if (tkl === fkl)
+              return;
+          }
+          emit("unsetData:formItems", {
+            k: fkl
+          });
+          if (fkl < tkl) {
+            tkl--;
+          }
+          emit("setData:formItems", {
+            k: tkl,
+            v: itemSource,
+            insert: true
+          });
+        }
+      }
     }
     return {
       groundEndClassName,
@@ -669,17 +792,17 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       createCommentVNode(" \u5C06formItems\u6E32\u67D3 \u4E3A\u7F16\u8F91\u65F6\u7EC4\u4EF6 "),
       createVNode(_component_VkTabGroup, {
         modelValue: _ctx.prop,
-        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:prop", $event))
+        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.$emit("update:prop", $event))
       }, {
         default: withCtx(() => [
           createVNode(_component_VkfForm, {
             formItems: _ctx.formItemsWithWrapper,
             data: _ctx.formData,
-            onSetData: _cache[0] || (_cache[0] = ($event) => _ctx.setData(_ctx.formData, $event))
+            onSetData: _cache[1] || (_cache[1] = ($event) => _ctx.setData(_ctx.formData, $event))
           }, {
             rendererTemplate: withCtx(() => [
               createVNode(_component_VkfFormItemRendererTemplate, { type: "VkfEditingSelect" }, {
-                default: withCtx(({ data, Renderer, raw }) => [
+                default: withCtx(({ data, Renderer, raw, k }) => [
                   createCommentVNode(" name is prop "),
                   createVNode(_component_VkTabItem, {
                     name: data.name,
@@ -687,11 +810,14 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                     class: "vkf-gm-form-item-x"
                   }, {
                     default: withCtx(({ isActive }) => [
-                      createCommentVNode(" \u62D6\u52A8\u65F6 \u6839\u636E source \u548C data.index   "),
+                      createCommentVNode(" \u62D6\u52A8\u65F6 \u6839\u636E source \u548C attributes\u786E\u5B9A\u4F4D\u7F6E   "),
+                      createCommentVNode(" [?] \u4E3A\u4EC0\u4E48\u5220\u9664\u4E86\u4E00\u4E2A\u6570\u636E\u540E\uFF0C\u5F53\u524D\u7684prop\u53D1\u751F\u4E86\u6539\u53D8\u3002 \u53EF\u80FD\u662F\u56E0\u4E3A\u6709\u4E2A isActive \u662F true \u88AB\u4F20\u8FDB\u53BB\u4E86 \uFF1F "),
                       createVNode(_component_EditingWrapper, {
-                        onDrop: withModifiers(_ctx.editDrop, ["stop"]),
+                        onDrop: _ctx.editDrop,
+                        attributes: { k },
                         active: isActive,
-                        source: raw
+                        source: raw,
+                        onDel: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("unsetData:formItems", $event))
                       }, {
                         default: withCtx(() => [
                           (openBlock(), createBlock(resolveDynamicComponent(Renderer), {
@@ -699,25 +825,26 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                           }, null, 8, ["source"]))
                         ]),
                         _: 2
-                      }, 1032, ["onDrop", "active", "source"])
+                      }, 1032, ["onDrop", "attributes", "active", "source"])
                     ]),
                     _: 2
                   }, 1032, ["name"])
                 ]),
                 _: 1
-              })
+              }),
+              renderSlot(_ctx.$slots, "rendererTemplate")
             ]),
-            _: 1
+            _: 3
           }, 8, ["formItems", "data"])
         ]),
-        _: 1
+        _: 3
       }, 8, ["modelValue"]),
       createElementVNode("div", {
         class: normalizeClass(["vkf-ground-end", _ctx.groundEndClassName]),
         ref: "endLineNode"
       }, null, 2)
     ]),
-    _: 1
+    _: 3
   }, 8, ["onDrop", "onDragover", "onDragleave"]);
 }
 
@@ -746,15 +873,9 @@ var script$1 = defineComponent({
   setup(props, { emit }) {
     const configProps = _VkfConfigCtx.createBindProps(props, ["source"]);
     const configEmits = _VkfConfigCtx.createOnEmits(emit);
-    const typeToConfigSource = {
-      "VkfInput": {
-        templateType: "VkfInput",
-        propDisabled: false
-      }
-    };
     const source = computed(() => {
       return {
-        ...typeToConfigSource[props.templateType],
+        templateType: props.templateType,
         propDisabled: props.propDisabled
       };
     });
@@ -777,31 +898,192 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(_component_VkfConfig, mergeProps({
     source: _ctx.source,
     "onSetData:source": _ctx.setSource
-  }, _ctx.configProps, toHandlers(_ctx.configEmits)), null, 16, ["source", "onSetData:source"]);
+  }, _ctx.configProps, toHandlers(_ctx.configEmits)), {
+    rendererTemplate: withCtx(() => [
+      renderSlot(_ctx.$slots, "rendererTemplate")
+    ]),
+    _: 3
+  }, 16, ["source", "onSetData:source"]);
 }
 
 script$1.render = render$1;
 script$1.__file = "ground/src/ground-config/src/index.vue";
 
+function tryOnScopeDispose(fn) {
+  if (getCurrentScope()) {
+    onScopeDispose(fn);
+    return true;
+  }
+  return false;
+}
+
+const isClient = typeof window !== "undefined";
+const isString = (val) => typeof val === "string";
+const noop = () => {
+};
+
+function useTimeoutFn(cb, interval, options = {}) {
+  const {
+    immediate = true
+  } = options;
+  const isPending = ref(false);
+  let timer = null;
+  function clear() {
+    if (timer) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  }
+  function stop() {
+    isPending.value = false;
+    clear();
+  }
+  function start(...args) {
+    clear();
+    isPending.value = true;
+    timer = setTimeout(() => {
+      isPending.value = false;
+      timer = null;
+      cb(...args);
+    }, unref(interval));
+  }
+  if (immediate) {
+    isPending.value = true;
+    if (isClient)
+      start();
+  }
+  tryOnScopeDispose(stop);
+  return {
+    isPending,
+    start,
+    stop
+  };
+}
+
+function unrefElement(elRef) {
+  var _a;
+  const plain = unref(elRef);
+  return (_a = plain == null ? void 0 : plain.$el) != null ? _a : plain;
+}
+
+const defaultWindow = isClient ? window : void 0;
+isClient ? window.document : void 0;
+const defaultNavigator = isClient ? window.navigator : void 0;
+isClient ? window.location : void 0;
+
+function useEventListener(...args) {
+  let target;
+  let event;
+  let listener;
+  let options;
+  if (isString(args[0])) {
+    [event, listener, options] = args;
+    target = defaultWindow;
+  } else {
+    [target, event, listener, options] = args;
+  }
+  if (!target)
+    return noop;
+  let cleanup = noop;
+  const stopWatch = watch(() => unrefElement(target), (el) => {
+    cleanup();
+    if (!el)
+      return;
+    el.addEventListener(event, listener, options);
+    cleanup = () => {
+      el.removeEventListener(event, listener, options);
+      cleanup = noop;
+    };
+  }, { immediate: true, flush: "post" });
+  const stop = () => {
+    stopWatch();
+    cleanup();
+  };
+  tryOnScopeDispose(stop);
+  return stop;
+}
+
+function useClipboard(options = {}) {
+  const {
+    navigator = defaultNavigator,
+    read = false,
+    source,
+    copiedDuring = 1500
+  } = options;
+  const events = ["copy", "cut"];
+  const isSupported = Boolean(navigator && "clipboard" in navigator);
+  const text = ref("");
+  const copied = ref(false);
+  const timeout = useTimeoutFn(() => copied.value = false, copiedDuring);
+  function updateText() {
+    navigator.clipboard.readText().then((value) => {
+      text.value = value;
+    });
+  }
+  if (isSupported && read) {
+    for (const event of events)
+      useEventListener(event, updateText);
+  }
+  async function copy(value = unref(source)) {
+    if (isSupported && value != null) {
+      await navigator.clipboard.writeText(value);
+      text.value = value;
+      copied.value = true;
+      timeout.start();
+    }
+  }
+  return {
+    isSupported,
+    text,
+    copied,
+    copy
+  };
+}
+
+const _global = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
+const globalKey = "__vueuse_ssr_handlers__";
+_global[globalKey] = _global[globalKey] || {};
+_global[globalKey];
+
+var _a, _b;
+isClient && (window == null ? void 0 : window.navigator) && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.platform) && /iP(ad|hone|od)/.test((_b = window == null ? void 0 : window.navigator) == null ? void 0 : _b.platform);
+
 var script = defineComponent({
   name: "VkfGround",
   components: {
     VkfGroundWidget: script$4,
     VkfGroundMain: script$2,
-    VkfGroundConfig: script$1
+    VkfGroundConfig: script$1,
+    VkCard,
+    ElButton
+  },
+  props: {
+    componentLibCollapseExpanded: {
+      type: Array,
+      default: void 0
+    },
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: {
+    "update:data": null,
+    "setData": (e) => e,
+    "unsetData": null,
+    "update:componentLibCollapseExpanded": null
   },
   setup(props, { emit }) {
-    const formItems = ref([]);
     const editProp = ref("");
     const propToFormItem = computed(() => {
-      return formItems.value.reduce((a, c) => {
+      return props.data.reduce((a, c) => {
         if (c.prop) {
           a[c.prop] = c;
         }
         return a;
       }, {});
     });
-    const configPropDisabled = ref(false);
+    const configPropDisabled = ref(true);
     const setFormItem = (props2, e) => {
       if (e.k === "prop") {
         if (e.v === props2.prop) {
@@ -812,6 +1094,11 @@ var script = defineComponent({
               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;
@@ -822,49 +1109,119 @@ var script = defineComponent({
         setData(props2, e);
       }
     };
+    const formItemStr = computed(() => JSON.stringify(props.data));
+    const formItemClip = useClipboard({
+      source: formItemStr
+    });
+    const inputJson = () => {
+      ElMessageBox.prompt("\u8F93\u5165Json", "\u63D0\u793A", {
+        confirmButtonText: "\u786E\u8BA4",
+        cancelButtonText: "\u53D6\u6D88"
+      }).then(({ value }) => {
+        let obj = [];
+        try {
+          obj = JSON.parse(value);
+        } catch (err) {
+          ElMessage({
+            type: "error",
+            message: "Json\u89E3\u6790\u9519\u8BEF"
+          });
+          throw err;
+        }
+        return obj;
+      }).then((obj) => {
+        emit("update:data", obj);
+      });
+    };
     return {
       propToFormItem,
-      formItems,
       editProp,
       setData,
       unsetData,
       setFormItem,
-      configPropDisabled
+      configPropDisabled,
+      formItemClip,
+      inputJson
     };
   }
 });
 
 const _hoisted_1 = { class: "vkf-ground" };
 const _hoisted_2 = { class: "vkf-ground-main-x" };
-const _hoisted_3 = { class: "vkf-ground-config-x" };
+const _hoisted_3 = { key: 0 };
+const _hoisted_4 = { key: 1 };
+const _hoisted_5 = /* @__PURE__ */ createTextVNode(" \u5BFC\u5165Json ");
+const _hoisted_6 = { class: "vkf-ground-config-x" };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VkfGroundWidget = resolveComponent("VkfGroundWidget");
+  const _component_ElButton = resolveComponent("ElButton");
   const _component_VkfGroundMain = resolveComponent("VkfGroundMain");
+  const _component_VkCard = resolveComponent("VkCard");
   const _component_VkfGroundConfig = resolveComponent("VkfGroundConfig");
   return openBlock(), createElementBlock("div", _hoisted_1, [
-    createVNode(_component_VkfGroundWidget, { class: "vkf-ground-widget-x" }),
+    createVNode(_component_VkfGroundWidget, {
+      class: "vkf-ground-widget-x",
+      componentLibCollapseExpanded: _ctx.componentLibCollapseExpanded,
+      "onUpdate:componentLibCollapseExpanded": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:componentLibCollapseExpanded", $event))
+    }, {
+      componentLibCollapse: withCtx(() => [
+        renderSlot(_ctx.$slots, "widgetComponentLibCollapse")
+      ]),
+      _: 3
+    }, 8, ["componentLibCollapseExpanded"]),
     createElementVNode("div", _hoisted_2, [
-      createCommentVNode(" {{ formItems }} "),
-      createVNode(_component_VkfGroundMain, {
-        prop: _ctx.editProp,
-        "onUpdate:prop": [
-          _cache[0] || (_cache[0] = ($event) => _ctx.editProp = $event),
-          _cache[1] || (_cache[1] = ($event) => _ctx.configPropDisabled = false)
-        ],
-        formItems: _ctx.formItems,
-        onSetFormItems: _cache[2] || (_cache[2] = ($event) => _ctx.setData(_ctx.formItems, $event)),
-        onUnsetFormItems: _cache[3] || (_cache[3] = ($event) => _ctx.unsetData(_ctx.formItems, $event))
-      }, null, 8, ["prop", "formItems"])
+      createVNode(_component_VkCard, {
+        tag: "div",
+        class: "vkf-ground-main-card"
+      }, {
+        title: withCtx(() => [
+          createVNode(_component_ElButton, {
+            onClick: _cache[1] || (_cache[1] = () => _ctx.formItemClip.copy())
+          }, {
+            default: withCtx(() => [
+              !_ctx.formItemClip.copied.value ? (openBlock(), createElementBlock("span", _hoisted_3, "\u590D\u5236Json")) : (openBlock(), createElementBlock("span", _hoisted_4, "\u5DF2\u590D\u5236!"))
+            ]),
+            _: 1
+          }),
+          createVNode(_component_ElButton, { onClick: _ctx.inputJson }, {
+            default: withCtx(() => [
+              _hoisted_5
+            ]),
+            _: 1
+          }, 8, ["onClick"])
+        ]),
+        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))
+          }, {
+            rendererTemplate: withCtx(() => [
+              renderSlot(_ctx.$slots, "rendererTemplate")
+            ]),
+            _: 3
+          }, 8, ["prop", "formItems"])
+        ]),
+        _: 3
+      })
     ]),
-    createElementVNode("div", _hoisted_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[4] || (_cache[4] = ($event) => _ctx.configPropDisabled = $event),
+        "onUpdate:propDisabled": _cache[5] || (_cache[5] = ($event) => _ctx.configPropDisabled = $event),
         templateType: _ctx.propToFormItem[_ctx.editProp].templateType,
         data: _ctx.propToFormItem[_ctx.editProp],
-        onSetData: _cache[5] || (_cache[5] = ($event) => _ctx.setFormItem(_ctx.propToFormItem[_ctx.editProp], $event))
-      }, null, 8, ["propDisabled", "templateType", "data"])) : createCommentVNode("v-if", true)
+        onSetData: _cache[6] || (_cache[6] = ($event) => _ctx.setFormItem(_ctx.propToFormItem[_ctx.editProp], $event))
+      }, {
+        rendererTemplate: withCtx(() => [
+          renderSlot(_ctx.$slots, "configRendererTemplate")
+        ]),
+        _: 3
+      }, 8, ["propDisabled", "templateType", "data"])) : createCommentVNode("v-if", true)
     ])
   ]);
 }