sun-form-v3 1.0.123 → 1.0.125

package/README.md

@@ -1,29 +1,136 @@
-# sun-form-v3
+# 关于 sun-form-v3
 
-This template should help get you started developing with Vue 3 in Vite.
+## 0.简介
 
-## Recommended IDE Setup
+`sun-form-v3` 是基于 `vue3`+`tailwindcss` 所编写的低代码框架引擎，其中 UI 基于 `element-plus`，表格基于 `vxe-table`。定位为前端开发人员提供快速搭建页面、实现不仅仅是表单的数据交互。
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+`sun-form-v3` 由设计器`designer`和渲染器`sunForm`两个组件构成。
 
-## Customize configuration
+`sun-form-v3` 提供了非常丰富的组件属性、表单交互和 api 方法等，可通过拖转或单击生成你想要的页面。
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+## 1.安装
 
-## Project Setup
+```shell
+ npm i sun-form-v3@latest
+ npm i element-plus@2.7.3
+ npm i @element-plus/icons-vue@2.3.1
+ npm i vxe-table@4.6.17
+```
+
+## 2.引入并全局注册`sun-form-v3`组件
+
+```javascript
+import { createApp } from "vue";
+
+import App from "./App.vue";
+import ElementPlus from "element-plus";
+import "sun-form-v3/dist/style.css";
+import "element-plus/dist/index.css";
+import zhCn from "element-plus/dist/locale/zh-cn.mjs";
+import sunFormV3 from "sun-form-v3";
+import VxeUITable from "vxe-table";
 
-```sh
-npm install
+import "vxe-table/lib/style.css";
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+const app = createApp(App);
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component);
+}
+app
+  .use(sunFormV3)
+  .use(ElementPlus, {
+    locale: zhCn,
+  })
+  .use(VxeUITable)
+  .mount("#app");
 ```
 
-### Compile and Hot-Reload for Development
+## 3.在 Vue3 模版中使用设计器组件
 
-```sh
-npm run dev
+```vue
+<script setup>
+import { ref, watch, onMounted } from "vue";
+//请求成功回调
+const httpSuccessHandle = (res) => {
+  console.log(res);
+};
+//请求失败回调
+const httpErrorHandle = (err) => {
+  console.log(err);
+};
+//请求之前发送参数
+const httpBeforeSendHandle = () => {
+  return {};
+};
+//每个请求所带的前缀
+const baseUrl = "/api";
+//请求头
+const headers = {
+  //比如store中的token放在请求头中
+  token: "***",
+};
+//低代码组件传递的事件，如：低代码中按钮点击事件传递到项目中可以再此接收
+const componentEvent = (params) => {
+  console.log(params);
+};
+</script>
+
+<template>
+  <div class="h-screen">
+    <designer
+      ref="des"
+      :httpSuccessHandle="httpSuccessHandle"
+      :httpErrorHandle="httpErrorHandle"
+      :httpBeforeSendHandle="httpBeforeSendHandle"
+      :baseUrl="baseUrl"
+      :headers="headers"
+      @componentEvent="componentEvent"
+    >
+      <div>我是弹窗插槽内容</div>
+    </designer>
+  </div>
+</template>
+
+<style scoped></style>
 ```
 
-### Compile and Minify for Production
+## 4.在 Vue3 模版中使用渲染器组件
+
+```vue
+<template>
+  <sunForm
+    :widgetConfig="widgetConfig"
+    :httpSuccessHandle="httpSuccessHandle"
+    :httpErrorHandle="httpErrorHandle"
+    :httpBeforeSendHandle="httpBeforeSendHandle"
+    :baseUrl="baseUrl"
+    :headers="headers"
+    @componentEvent="componentEvent"
+    ref="formRef"
+  >
+  </sunForm>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick } from "vue";
+const widgetConfig = ref(null);
+const httpSuccessHandle = (res) => {};
+const httpErrorHandle = (err) => {};
+const httpBeforeSendHandle = () => {
+  return {};
+};
+const baseUrl = "/api";
+const headers = {};
+const formRef = ref(null);
+//获取低代码所有的方法
+const getDesigner = () => {
+  return formRef.value.designer;
+};
+defineExpose({
+  getDesigner: getDesigner,
+});
+getConfig();
+</script>
 
-```sh
-npm run build
+<style scoped lang="scss"></style>
 ```

package/dist/{index-vN8Pef9j.js → index-BTVP3Lpa.js}

@@ -1,4 +1,4 @@
-import { resolveComponent as u, openBlock as V, createElementBlock as g, Fragment as w, createVNode as e, withCtx as p, unref as t } from "vue";
+import { resolveComponent as n, openBlock as V, createElementBlock as g, Fragment as w, createVNode as e, withCtx as p, unref as t } from "vue";
 const _ = /* @__PURE__ */ Object.assign({ name: "config-cascader" }, {
   __name: "index",
   props: {
@@ -14,7 +14,7 @@ const _ = /* @__PURE__ */ Object.assign({ name: "config-cascader" }, {
   setup(m) {
     let l = m;
     return (b, o) => {
-      const s = u("el-option"), i = u("el-select"), a = u("common-label-container"), r = u("el-input"), n = u("el-switch");
+      const s = n("el-option"), i = n("el-select"), a = n("common-label-container"), r = n("el-input"), u = n("el-switch");
       return V(), g(w, null, [
         e(a, { label: "组件尺寸" }, {
           default: p(() => [
@@ -73,7 +73,7 @@ const _ = /* @__PURE__ */ Object.assign({ name: "config-cascader" }, {
         }),
         e(a, { label: "是否必填" }, {
           default: p(() => [
-            e(n, {
+            e(u, {
               modelValue: t(l).widget.props.required,
               "onUpdate:modelValue": o[4] || (o[4] = (d) => t(l).widget.props.required = d)
             }, null, 8, ["modelValue"])
@@ -82,7 +82,7 @@ const _ = /* @__PURE__ */ Object.assign({ name: "config-cascader" }, {
         }),
         e(a, { label: "是否禁用" }, {
           default: p(() => [
-            e(n, {
+            e(u, {
               modelValue: t(l).widget.props.disabled,
               "onUpdate:modelValue": o[5] || (o[5] = (d) => t(l).widget.props.disabled = d)
             }, null, 8, ["modelValue"])
@@ -91,7 +91,7 @@ const _ = /* @__PURE__ */ Object.assign({ name: "config-cascader" }, {
         }),
         e(a, { label: "显示全部级" }, {
           default: p(() => [
-            e(n, {
+            e(u, {
               modelValue: t(l).widget.props.showAllLevels,
               "onUpdate:modelValue": o[6] || (o[6] = (d) => t(l).widget.props.showAllLevels = d)
             }, null, 8, ["modelValue"])
@@ -100,7 +100,7 @@ const _ = /* @__PURE__ */ Object.assign({ name: "config-cascader" }, {
         }),
         e(a, { label: "是否可清除" }, {
           default: p(() => [
-            e(n, {
+            e(u, {
               modelValue: t(l).widget.props.clearable,
               "onUpdate:modelValue": o[7] || (o[7] = (d) => t(l).widget.props.clearable = d)
             }, null, 8, ["modelValue"])
@@ -109,12 +109,21 @@ const _ = /* @__PURE__ */ Object.assign({ name: "config-cascader" }, {
         }),
         e(a, { label: "是否只传末级" }, {
           default: p(() => [
-            e(n, {
+            e(u, {
               modelValue: t(l).widget.props.postLastLevel,
               "onUpdate:modelValue": o[8] || (o[8] = (d) => t(l).widget.props.postLastLevel = d)
             }, null, 8, ["modelValue"])
           ]),
           _: 1
+        }),
+        e(a, { label: "是否可选任一级" }, {
+          default: p(() => [
+            e(u, {
+              modelValue: t(l).widget.props.checkStrictly,
+              "onUpdate:modelValue": o[9] || (o[9] = (d) => t(l).widget.props.checkStrictly = d)
+            }, null, 8, ["modelValue"])
+          ]),
+          _: 1
         })
       ], 64);
     };

package/dist/{index-NHAHXyUC.js → index-C-yx7X4z.js}

@@ -1,5 +1,5 @@
 import { computed as j, ref as g, onMounted as $, resolveComponent as f, openBlock as v, createElementBlock as h, Fragment as x, createVNode as u, withCtx as o, createTextVNode as C, createElementVNode as a, renderList as B, unref as V, toDisplayString as N, nextTick as U, createBlock as D } from "vue";
-import { e as E, i as M } from "./index-DVv_8Ocd.js";
+import { e as E, i as M } from "./index-CUfTg3I4.js";
 const R = { class: "flex-wrap flex" }, S = ["onClick"], T = { class: "inner cursor-pointer hover:shadow-md hover:shadow-blue-200 border w-full h-full p-1 flex flex-col overflow-hidden items-center rounded-md shadow-sm" }, z = { class: "lab border-t w-full text-center mt-1 font-bold" }, F = /* @__PURE__ */ Object.assign({ name: "chatChoose" }, {
   __name: "chartChoose",
   props: {

package/dist/{index-BZ_UYXm-.js → index-C5cxJjmq.js}

@@ -1,5 +1,5 @@
 import { computed as S, ref as C, resolveComponent as u, openBlock as k, createElementBlock as O, Fragment as U, createVNode as e, withCtx as l, createTextVNode as f, unref as i, isRef as J, createElementVNode as c } from "vue";
-import { _ as E } from "./index-DVv_8Ocd.js";
+import { _ as E } from "./index-CUfTg3I4.js";
 const H = { class: "h-full flex flex-col" }, B = { class: "flex-1 overflow-hidden" }, T = {
   __name: "dataConfig",
   props: {