vue-form-craft 4.6.1 → 4.6.2

package/README.md

@@ -0,0 +1,133 @@
+# vue-form-craft
+
+基于 [vue](https://github.com/vuejs/vue) 和 [element-plus](https://github.com/ElemeFE/element) 实现的表单设计器 + 渲染器
+
+使用了最新的前端技术栈，可以让你免去vue项目中表单的烦恼。
+
+- [在线预览](https://xinnian999.github.io/vue-form-craft/zh/form-design)
+- [官方文档](https://xinnian999.github.io/vue-form-craft/zh/)
+- 作者：Elin
+- 联系方式：17803000829
+
+![ui](../../ui.png)
+
+## 特性
+
+- 可视化设计表单
+- 支持三十多种的表单组件(el所有表单组件、内置组件)
+- 支持收集Array数据（自增组件）
+- 用法简单，又非常灵活高效的表单联动
+- 可预览生成的json配置
+- 可预览生成的VUE组件
+- 高扩展性、支持自定义组件、支持各种ui组件库来替换ui
+- 支持表单填写校验
+- 组件无限深层嵌套，深层校验
+
+## 第三方插件
+
+- vuedraggable
+- element-plus
+- vue-form-craft
+- lodash
+
+## 使用
+
+### 版本要求
+
+vue@3.x
+
+### 安装
+
+```js
+npm i vue-form-craft
+//或
+yarn add vue-form-craft
+//或
+pnpm i vue-form-craft
+```
+
+### 全局注册
+
+```js
+import { createApp } from 'vue'
+import VueFormCraft from 'vue-form-craft'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(ElementPlus)
+app.use(VueFormCraft)
+app.mount('#app')
+```
+
+### 使用
+
+> 使用表单设计器
+
+```vue
+<template>
+  <div style="width:100vw;height:100vh">
+    <FormDesign />
+  </div>
+</template>
+```
+
+> 使用表单渲染器
+
+```vue
+<template>
+  <FormRender v-model="formValues" :schema="schema" ref="formRef" />
+  <el-button @click="handleSubmit">提交</el-button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { FormSchema,FormInstance } from 'vue-form-craft'
+
+const formRef = ref<FormInstance>()
+
+const formValues = ref({})
+
+const schema: FormSchema = {
+  labelWidth: 150,
+  labelAlign: 'right',
+  size: 'default',
+  items: [
+    {
+      label: '用户名',
+      component: 'Input',
+      name: 'username',
+      required: true,
+      props: {
+        placeholder: '请输入用户名'
+      }
+    },
+    {
+      label: '密码',
+      component: 'Password',
+      name: 'password',
+      required: true,
+      props: {
+        placeholder: '请输入密码'
+      }
+    }
+  ]
+}
+
+const handleSubmit = async () => {
+  await formRef.value?.validate()
+  alert(JSON.stringify(formValues.value,null,2))
+}
+</script>
+```
+
+## 捐赠 vue-form-craft 的开发
+
+`vue-form-craft` 的文档和代码完全开源，如果该项目有帮助到你的开发工作，你可以捐赠`vue-form-craft`的研发工作，捐赠无门槛，哪怕是一杯可乐也好。
+
+<div style="display:flex;gap:15px">
+<img src="./docs/assets/wechat.png" style="height:400px" />
+<img src="./docs/assets/zhifubao.png" style="height:400px" />
+</div>

package/dist/lazy/{Card-C6gLACpI.js → Card-B8pKJPp_.js}

@@ -1,5 +1,5 @@
 import { defineComponent as o, resolveComponent as t, openBlock as n, createBlock as a, normalizeProps as p, guardReactiveProps as s, withCtx as l, createVNode as c, unref as i } from "vue";
-import { _ as m } from "./index-BFu1nOLd.js";
+import { _ as m } from "./index-EwHmlOuJ.js";
 import "element-plus";
 const h = /* @__PURE__ */ o({
   __name: "Card",

package/dist/lazy/{Cascader-C2vOBOMv.js → Cascader-Bj1MKP1h.js}

@@ -1,6 +1,6 @@
 import { defineComponent as m, mergeModels as i, useModel as c, resolveComponent as f, openBlock as g, createBlock as v, mergeProps as y, unref as l } from "vue";
 import "element-plus";
-import { u as C } from "./useSelect-CFkzMGeV.js";
+import { u as C } from "./useSelect-B9KCdR90.js";
 const B = /* @__PURE__ */ m({
   __name: "Cascader",
   props: /* @__PURE__ */ i({

package/dist/lazy/{Checkbox-CqOoyq-D.js → Checkbox-C7cedqdm.js}

@@ -1,7 +1,7 @@
 import { defineComponent as w, mergeModels as B, useModel as D, watch as M, resolveComponent as u, resolveDirective as F, unref as a, openBlock as l, createElementBlock as t, toDisplayString as I, Fragment as d, createCommentVNode as i, withDirectives as S, createBlock as s, mergeProps as j, withCtx as f, renderList as k } from "vue";
 import "element-plus";
-import { u as E } from "./index-BFu1nOLd.js";
-import { u as L } from "./useSelect-CFkzMGeV.js";
+import { u as E } from "./index-EwHmlOuJ.js";
+import { u as L } from "./useSelect-B9KCdR90.js";
 const N = { key: 0 }, O = {
   key: 0,
   style: { "font-size": "12px" }

package/dist/lazy/{Collapse-Dz3-Lvqv.js → Collapse-B9aQfM0l.js}

@@ -1,5 +1,5 @@
 import { defineComponent as u, ref as f, onMounted as _, watch as h, resolveComponent as c, openBlock as o, createBlock as i, mergeProps as C, withCtx as r, createElementBlock as E, Fragment as k, renderList as v, createVNode as m, unref as V } from "vue";
-import { _ as y } from "./index-BFu1nOLd.js";
+import { _ as y } from "./index-EwHmlOuJ.js";
 import "element-plus";
 import { _ as B } from "./Title.vue_vue_type_script_setup_true_lang-Ceco_9-w.js";
 const x = /* @__PURE__ */ u({

package/dist/lazy/{Component-Dm720wpV.js → Component-90FKsVnF.js}

@@ -1,5 +1,5 @@
 import { defineComponent as a, useModel as s, resolveComponent as p, unref as d, openBlock as n, createElementBlock as i, toDisplayString as c, createBlock as _, mergeProps as f } from "vue";
-import { u as v } from "./index-BFu1nOLd.js";
+import { u as v } from "./index-EwHmlOuJ.js";
 const V = { key: 0 }, B = /* @__PURE__ */ a({
   __name: "Component",
   props: {

package/dist/lazy/{Component-B2ZMJVm4.js → Component-Bf-0vp25.js}

@@ -2,7 +2,7 @@ var u = Object.defineProperty;
 var m = (o, e, t) => e in o ? u(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
 var a = (o, e, t) => m(o, typeof e != "symbol" ? e + "" : e, t);
 import { defineComponent as g, mergeModels as v, useModel as I, ref as c, onMounted as w, resolveComponent as C, openBlock as y, createElementBlock as _, createVNode as V, createElementVNode as M } from "vue";
-import { u as b, a as x } from "./index-BFu1nOLd.js";
+import { u as b, a as x } from "./index-EwHmlOuJ.js";
 function S() {
   return "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z".split(",");
 }

package/dist/lazy/{Component-DEc_14oo.js → Component-CYzr90VJ.js}

@@ -1,6 +1,6 @@
 import { defineComponent as b, mergeModels as V, useModel as B, resolveComponent as d, openBlock as l, createBlock as n, createSlots as C, withCtx as a, createElementBlock as m, Fragment as w, createVNode as E, unref as r, createElementVNode as o, createTextVNode as i, toDisplayString as p, createCommentVNode as u } from "vue";
 import { ElMessage as M, ElMessageBox as N } from "element-plus";
-import { e as f } from "./index-BFu1nOLd.js";
+import { e as f } from "./index-EwHmlOuJ.js";
 const $ = {
   key: 0,
   style: { "min-width": "300px" }

package/dist/lazy/{Component-AnQII5TC.js → Component-DBxHG6gd.js}

@@ -1,5 +1,5 @@
 import { defineComponent as $, ref as v, computed as P, watch as L, onMounted as x, onBeforeUnmount as A, openBlock as T, createElementBlock as N, mergeModels as F, useModel as J, resolveComponent as G, unref as W, createElementVNode as E, createBlock as X, withCtx as D, createTextVNode as I, createCommentVNode as Y, createVNode as R } from "vue";
-import { a as H, u as K, b as Q } from "./index-BFu1nOLd.js";
+import { a as H, u as K, b as Q } from "./index-EwHmlOuJ.js";
 const Z = $({
   props: {
     width: {

package/dist/lazy/{Component-CM8POmAY.js → Component-XLW-HW-w.js}

@@ -1,5 +1,5 @@
 import { defineComponent as d, mergeModels as m, useModel as r, resolveComponent as u, openBlock as p, createBlock as i, mergeProps as c, unref as f } from "vue";
-import { u as V } from "./index-BFu1nOLd.js";
+import { u as V } from "./index-EwHmlOuJ.js";
 const v = /* @__PURE__ */ d({
   __name: "Component",
   props: /* @__PURE__ */ m({

package/dist/lazy/{Custom-y4v7mrhd.js → Custom-DvBd4WJt.js}

@@ -1,5 +1,5 @@
 import { defineComponent as n, mergeModels as s, useModel as p, openBlock as t, createElementBlock as r, createBlock as d, resolveDynamicComponent as u, mergeProps as c } from "vue";
-import { a as i } from "./index-BFu1nOLd.js";
+import { a as i } from "./index-EwHmlOuJ.js";
 const f = {
   key: 0,
   class: "empty"

package/dist/lazy/{FormList-BfvZLuTx.js → FormList-BU-Rshq5.js}

@@ -1,5 +1,5 @@
 import { defineComponent as A, mergeModels as q, useModel as P, computed as S, watch as T, resolveComponent as y, openBlock as l, createElementBlock as h, unref as u, createBlock as s, Fragment as g, renderList as $, withCtx as r, createElementVNode as C, createVNode as b, mergeProps as L, createCommentVNode as _, toDisplayString as F, createTextVNode as j, h as G } from "vue";
-import { u as H, l as B, c as J, d as D, e as I, f as K } from "./index-BFu1nOLd.js";
+import { u as H, l as B, c as J, d as D, e as I, f as K } from "./index-EwHmlOuJ.js";
 import "element-plus";
 const O = { class: "vfc-formList" }, Q = { key: 1 }, U = { class: "list-item-content" }, W = { class: "card-header" }, X = { style: { "margin-top": "5px" } }, ee = /* @__PURE__ */ A({
   __name: "FormList",

package/dist/lazy/{Grid-C9qf54R2.js → Grid-CCWNeHmC.js}

@@ -1,5 +1,5 @@
 import { defineComponent as t, computed as n, openBlock as p, createBlock as a, unref as c, normalizeStyle as m } from "vue";
-import { _ as s } from "./index-BFu1nOLd.js";
+import { _ as s } from "./index-EwHmlOuJ.js";
 import "element-plus";
 const _ = /* @__PURE__ */ t({
   __name: "Grid",

package/dist/lazy/{Inline-C48fwfZr.js → Inline-DjvYKa4Y.js}

@@ -1,5 +1,5 @@
 import { defineComponent as o, computed as l, openBlock as p, createBlock as r, unref as i, normalizeStyle as s } from "vue";
-import { _ as c, a as f } from "./index-BFu1nOLd.js";
+import { _ as c, a as f } from "./index-EwHmlOuJ.js";
 import "element-plus";
 const m = /* @__PURE__ */ o({
   __name: "Inline",

package/dist/lazy/{JsonEdit-CgGJ7-zD.js → JsonEdit-DWa8IstP.js}

@@ -1,5 +1,5 @@
 import { defineComponent as At, openBlock as mt, createElementBlock as wt, mergeProps as St, createElementVNode as pt, renderSlot as It, normalizeClass as bt, mergeModels as Tt, useModel as Et, createBlock as Rt, unref as $t, withCtx as _t, createVNode as Lt } from "vue";
-import { a as xt, g as Nt } from "./index-BFu1nOLd.js";
+import { a as xt, g as Nt } from "./index-EwHmlOuJ.js";
 import "element-plus";
 const Mt = /* @__PURE__ */ At({
   __name: "Disabled",

package/dist/lazy/{ObjGroup-BqSJ2vRP.js → ObjGroup-DXu3Ka-M.js}

@@ -1,5 +1,5 @@
 import { defineComponent as c, openBlock as e, createElementBlock as s, unref as o, createBlock as a, Fragment as m, renderList as l, mergeProps as i } from "vue";
-import { u, c as p, d as _ } from "./index-BFu1nOLd.js";
+import { u, c as p, d as _ } from "./index-EwHmlOuJ.js";
 import "element-plus";
 const d = { class: "vfc-ObjGroup" }, f = {
   key: 1,

package/dist/lazy/{Radio-bfCnRycA.js → Radio-DLWdhD-s.js}

@@ -1,6 +1,6 @@
 import { defineComponent as w, mergeModels as z, useModel as B, watch as T, resolveComponent as d, resolveDirective as D, unref as o, openBlock as a, createElementBlock as n, toDisplayString as M, Fragment as i, createCommentVNode as N, withDirectives as S, createBlock as u, mergeProps as f, withCtx as b, createVNode as F, renderList as v } from "vue";
-import { u as I } from "./index-BFu1nOLd.js";
-import { u as $ } from "./useSelect-CFkzMGeV.js";
+import { u as I } from "./index-EwHmlOuJ.js";
+import { u as $ } from "./useSelect-B9KCdR90.js";
 const E = { key: 0 }, L = {
   key: 0,
   style: { "font-size": "12px" }

package/dist/lazy/{Select-BDzuXjsw.js → Select-DyYeWnkW.js}

@@ -1,6 +1,6 @@
 import { defineComponent as C, mergeModels as _, useModel as B, watch as S, resolveComponent as f, resolveDirective as w, unref as o, openBlock as t, createElementBlock as n, toDisplayString as d, withDirectives as D, createBlock as v, mergeProps as M, withCtx as c, Fragment as F, renderList as I, createTextVNode as N } from "vue";
-import { u as j } from "./index-BFu1nOLd.js";
-import { u as A } from "./useSelect-CFkzMGeV.js";
+import { u as j } from "./index-EwHmlOuJ.js";
+import { u as A } from "./useSelect-B9KCdR90.js";
 const E = { key: 0 }, L = { key: 0 }, O = { key: 1 }, $ = /* @__PURE__ */ C({
   __name: "Select",
   props: /* @__PURE__ */ _({

package/dist/lazy/{Tabs-DcIncTHH.js → Tabs-BxZUuNSL.js}

@@ -1,5 +1,5 @@
 import { defineComponent as i, ref as m, watch as _, onMounted as h, resolveComponent as a, openBlock as l, createBlock as c, mergeProps as u, withCtx as d, createElementBlock as b, Fragment as v, renderList as y, createVNode as k, unref as K } from "vue";
-import { _ as V } from "./index-BFu1nOLd.js";
+import { _ as V } from "./index-EwHmlOuJ.js";
 import "element-plus";
 const w = /* @__PURE__ */ i({
   __name: "Tabs",

package/dist/lazy/{TextArea-CxzUeZFN.js → TextArea-6_Jr6BtE.js}

@@ -1,5 +1,5 @@
 import { defineComponent as m, useModel as s, resolveComponent as p, unref as d, openBlock as t, createElementBlock as i, toDisplayString as c, createBlock as f, mergeProps as _ } from "vue";
-import { u as v } from "./index-BFu1nOLd.js";
+import { u as v } from "./index-EwHmlOuJ.js";
 const V = { key: 0 }, x = /* @__PURE__ */ m({
   __name: "TextArea",
   props: {