diygw-designer 1.1.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 diygw
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,236 @@
+![](https://examples.diygwjs.cn/static/logo.png#pic_center)
+
+<h3 align="center" style="background-image:-webkit-linear-gradient(left,#44c0fa,#c26cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;">EpicDesigner</h3>
+
+
+<h4 align="center">一个开箱即用的拖拽式的可视化低代码设计器</h4>
+
+<p align="center">
+  <a href="https://github.com/vuejs/core">
+    <img src="https://img.shields.io/badge/vue-3.3.4-brightgreen.svg" alt="vue">
+  </a>
+  <a href="https://github.com/microsoft/TypeScript">
+    <img src="https://img.shields.io/badge/typescript-5.1.6-blue" alt="ant-design-vue">
+  </a>
+  <a href="#">
+    <img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
+  </a>
+</p>
+
+
+📦github仓库：[https://gitee.com/diygw/diygw-designer](https://gitee.com/diygw/diygw-designer)
+
+📦gitee仓库：[https://gitee.com/kcz66/diygw-designer](https://gitee.com/kcz66/diygw-designer)
+
+📖文档地址：[https://docs.diygwjs.cn](https://docs.diygwjs.cn)
+
+📖文档备用地址：[https://www.kcz66.com/diygw-designer/](https://www.kcz66.com/diygw-designer/)
+
+💎项目预览地址：
+
+- ElementPlus：[https://examples.diygwjs.cn/element-plus/designer/basic](https://examples.diygwjs.cn/element-plus/designer/basic?maximize=1)
+- AntDesignVue：[https://examples.diygwjs.cn/ant-designe-vue/designer/basic](https://examples.diygwjs.cn/ant-designe-vue/designer/basic?maximize=1)
+- NaiveUi：[https://examples.diygwjs.cn/naive-ui/designer/basic](https://examples.diygwjs.cn/naive-ui/designer/basic?maximize=1)
+
+> 使用必须遵守国家法律法规，⛔不允许非法项目使用，后果自负❗
+
+## 简介
+
+可以简称`diygw设计器`，是一个功能强大、开箱即用的拖拽式低代码设计器。它基于 Vue3 开发，兼容多套 UI 组件库，除了基础的页面设计功能，EpicDesigner 还提供了强大的扩展功能，可以让开发者根据自己的需求自由扩展和定制组件。此外，EpicDesigner使用 JSON 配置来生成页面，可帮助开发者快速生成页面，提高开发效率。它提供了两个重要组件：`e-designer` 设计器和 `e-builder` 生成器。
+
+
+## 最新版本
+
+[![](https://img.shields.io/npm/v/diygw-designer.svg?style=flat-square)](https://www.npmjs.com/package/diygw-designer)
+
+[查看更新日志](./docs/updateLog.md)
+
+#### 功能
+
+- [x] 拖拽设计
+- [x] 自定义动作栏扩展
+- [x] 自定义组件扩展
+- [x] 布局组件扩展
+- [x] 事件扩展
+- [x] 组件懒加载
+- [x] 右侧栏扩展
+- [x] 组件属性自定义
+- [x] 支持不同 UI
+- [x] 插件扩展
+
+
+
+## 核心组件介绍
+
+#### EDesigner 设计器
+
+`EDesigner ` 是一个可视化设计器组件，用户可以通过拖拽组件的方式快速生成 JSON 配置。它提供了丰富的组件库和配置项，用户可以根据需要选择合适的组件并配置相应的属性、事件和动作。设计器还提供了实时预览功能，用户可以随时查看所设计页面的效果。最终，用户可以将 JSON 配置导出，用于页面的生成和修改。
+
+#### EBuilder 生成器
+
+`EBuilder` 是一个页面构建组件，它可以将设计器生成的 JSON 配置构建成页面，完成组件的渲染、事件绑定和数据回显等操作。
+
+## 安装 diygw-designer
+
+```bash
+npm i diygw-designer
+```
+
+diygw-designer 目标是支持多 UI 兼容,目前支持以下 UI
+
+- element-plus
+- ant-design-vue
+- naive-ui
+
+## 选择 UI 组件库
+
+### 选择 element-plus
+
+安装ui框架依赖
+
+```bash
+npm i element-plus @diygw-designer/element-plus
+```
+
+main.ts 或者 main.js 引入注册组件
+
+```javascript
+// 引入diygw-designer样式
+import "diygw-designer/dist/style.css";
+
+// 引入Element plus样式
+import "element-plus/dist/index.css";
+
+import { setupElementPlus } from "@diygw-designer/element-plus";
+// 注册Element UI
+setupElementPlus();
+```
+
+### 选择 ant-design-vue v4.x版本（antd推荐使用v4.x版本）
+
+安装ui框架依赖
+
+```bash
+npm i ant-design-vue @diygw-designer/antd
+```
+
+main.ts 或者 main.js 引入注册组件
+
+```javascript
+// 引入diygw-designer样式
+import "diygw-designer/dist/style.css";
+
+// 引入antd UI 重置样式
+import "ant-design-vue/dist/reset.css";
+
+import { setupAntd } from "@diygw-designer/antd";
+// 使用Antd UI
+setupAntd();
+```
+
+### ant-design-vue v3.x版本需要改成下面方式
+
+  为了减少维护精力，后续开发测试主要以 v4.x版本，不再对v3.x版本进行测试，建议升级ant-design-vue到v4.x最新版本
+
+```javascript
+// 引入diygw-designer样式
+import "diygw-designer/dist/style.css";
+
+// 引入antd UI样式
+import "ant-design-vue/dist/antd.css";
+
+import { setupAntd } from "@diygw-designer/antd";
+// 使用Antd UI
+setupAntd();
+```
+
+### 选择 naive-ui
+
+安装ui框架依赖
+
+```bash
+npm i -D naive-ui @diygw-designer/naive-ui
+```
+
+main.ts 或者 main.js 引入注册组件
+
+```javascript
+// 引入diygw-designer样式
+import "diygw-designer/dist/style.css";
+
+import { setupNaiveUi } from "@diygw-designer/naive-ui";
+// 注册Naive Ui
+setupNaiveUi();
+```
+
+## EDesigner(设计器) 基础用法
+
+```vue
+<template>
+  <div class="h-full">
+    <EDesigner />
+  </div>
+</template>
+<script setup lang="ts">
+import { EDesigner } from "diygw-designer";
+</script>
+<style>
+.h-full {
+  height: 100vh;
+}
+</style>
+```
+## EBuilder(生成器) 基础用法
+
+```vue
+<template>
+  <div>
+    <EBuilder :pageSchema="pageSchema" />
+  </div>
+</template>
+<script setup>
+import { EBuilder } from "diygw-designer";
+
+const pageSchema = {
+  schemas: [
+    {
+      type: "page",
+      id: "root",
+      children: [
+        {
+          label: "输入框",
+          type: "input",
+          field: "input",
+          icon: "diygw-icon-write",
+          input: true,
+          props: {
+            defaultValue: "",
+            placeholder: "请输入",
+            size: "default",
+            type: "text",
+          },
+          id: "gbm1xhrrj5s00",
+        },
+      ],
+      props: {
+        style: {
+          padding: "16px",
+        },
+      },
+    },
+  ],
+};
+</script>
+```
+
+## 交流
+
+点击链接加入 qq 群聊
+
+- [【diygw-designer 交流群：747609683】](https://jq.qq.com/?_wv=1027&k=CtrM9ce2)
+
+## 捐赠
+如果你觉得diygw-designer对你有帮助，欢迎给我捐赠
+
+![](https://examples.diygwjs.cn/static/donation.png)
+

package/dist/_virtual/_plugin-vue_export-helper.cjs

@@ -0,0 +1 @@
+"use strict";const e=(t,r)=>{const o=t.__vccOpts||t;for(const[s,c]of r)o[s]=c;return o};module.exports=e;

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/dist/core/src/components/builder/hooks/useBuilder.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("vue"),S=require("../../../../../manager/src/pageManager.cjs");require("../../../../../manager/src/pluginManager.cjs");;/* empty css                                             */;/* empty css                                                         */;/* empty css                                                              */require("@vueuse/core");require("../../../../../hooks/src/store/index.cjs");;/* empty css                                                       */require("vue-draggable-plus");const s=require("../../../../../utils/src/common/data.cjs");require("jsep");function b(){const i=c.ref(!1),u=S.createPageManager(),r=c.ref({});function o(){return new Promise(e=>{if(i.value)e();else{const a=c.watch(i,()=>{a(),e()})}})}async function l(e="default"){var t;await o();const a=Object.keys(r.value||{});if(a.length===1)return r.value[a[0]];const n=(t=r.value)==null?void 0:t[e];if(!n)throw new Error(`表单 [name=${e}] 不存在`);return n}async function f(e,a){const n=await l(e);return s.deepClone(await a(n))}async function m(e="default"){return await f(e,a=>a.getData())}function d(e,a="default"){var w,y,v;const n=s.findSchemas(u.pageSchema.schemas,M=>M.type==="form");n&&n.length===1&&(a=n[0].props.name),u.setFormData(e,a);const t=(w=r.value)==null?void 0:w[a];((y=t==null?void 0:t.clearValidate)==null?void 0:y.call(t))??((v=t==null?void 0:t.restoreValidation)==null||v.call(t))}async function q(e="default"){return await f(e,async a=>(await a.validate(),await a.getData()))}async function g(e){await o();const a={};for(const n in r.value){const t=r.value[n];t&&(a[n]=s.deepClone(await e(t)))}return a}async function h(){return await g(e=>e.getData())}function D(e){for(const a in e)d(e[a],a)}async function p(){return await g(async e=>(await e.validate(),await e.getData()))}function F(){for(const e in r.value){const a=r.value[e];a&&a.resetData()}}return{formInstances:r,getData:m,getFormInstance:l,getForms:h,pageManager:u,ready:i,resetData:F,setData:d,setForms:D,validate:q,validateAll:p}}exports.useBuilder=b;

package/dist/core/src/components/builder/hooks/useBuilder.d.ts

@@ -0,0 +1,90 @@
+import { FormDataModel } from '../../../../../types/src/index';
+export declare function useBuilder(): {
+    formInstances: import('vue').Ref<any, any>;
+    getData: (formName?: string) => Promise<FormDataModel>;
+    getFormInstance: (formName?: string) => Promise<any>;
+    getForms: () => Promise<Record<string, FormDataModel>>;
+    pageManager: {
+        addComponentInstance: (id: string, instance: import('../../../../../types/src/index').EpNodeInstance, scopeName?: string) => void;
+        componentInstances: import('vue').Ref<import('../../../../../manager/src/index').ComponentInstances, import('../../../../../manager/src/index').ComponentInstances>;
+        defaultComponentIds: import('vue').Ref<string[], string[]>;
+        doActions: (actions: import('../../../../../manager/src/index').ActionsModel[], scopeName?: string, ...args: unknown[]) => void;
+        find: (queryValue: string, queryField?: string, scopeName?: string) => import('../../../../../types/src/index').EpNodeInstance["exposed"] | null;
+        findAll: (queryValue: string, queryField?: string, scopeName?: string) => import('../../../../../types/src/index').EpNodeInstance["exposed"][];
+        findInstance: (queryValue: string, queryField?: string, scopeName?: string) => import('../../../../../types/src/index').EpNodeInstance | null;
+        findInstanceAll: (queryValue: string, queryField?: string, scopeName?: string) => import('../../../../../types/src/index').EpNodeInstance[];
+        forms: Record<string, unknown>;
+        funcs: import('vue').Ref<Record<string, Function>, Record<string, Function>>;
+        getComponentInstance: (queryValue: string, queryField?: string, scopeName?: string) => import('../../../../../types/src/index').EpNodeInstance["exposed"] | null;
+        hook: {
+            clear: (hookName?: keyof import('diygw-designer').Hooks) => void;
+            execute: (hookName: keyof import('diygw-designer').Hooks, context: any) => Promise<void>;
+            getCount: (hookName: keyof import('diygw-designer').Hooks) => number;
+            register: (hookName: keyof import('diygw-designer').Hooks, callback: import('diygw-designer').HookCallback) => (() => void);
+        };
+        isDesignMode: import('vue').Ref<boolean, boolean>;
+        mountMonitor: {
+            isAllMounted: import('vue').ComputedRef<boolean>;
+            pendingIds: import('vue').Ref<string[], string[]>;
+            pop: (id: string) => void;
+            push: (id: string) => void;
+            reset: () => void;
+        };
+        pageSchema: {
+            canvas?: {
+                height?: string | undefined;
+                mode?: "desktop" | "mobile" | "pad" | "pc" | "tablet" | undefined;
+                width?: string | undefined;
+            } | undefined;
+            schemas: {
+                [x: string]: any;
+                children?: /*elided*/ any[] | undefined;
+                description?: string | undefined;
+                editData?: object | undefined;
+                field?: string | undefined;
+                id?: string | undefined;
+                input?: boolean | undefined;
+                label?: string | undefined;
+                noFormItem?: boolean | undefined;
+                on?: {
+                    [eventName: string]: import('../../../../../manager/src/index').ActionsModel[];
+                } | undefined;
+                props?: any;
+                rules?: {
+                    [x: string]: any;
+                    trigger?: string | string[] | undefined;
+                    enum?: Array<boolean | null | number | string | undefined> | undefined;
+                    isValidator?: boolean | undefined;
+                    len?: number | undefined;
+                    max?: number | undefined;
+                    message?: ((a?: string) => string) | string | undefined;
+                    min?: number | undefined;
+                    pattern?: (RegExp | string) | undefined;
+                    required?: boolean | undefined;
+                    type?: string | undefined;
+                    validator?: (Function | string) | undefined;
+                    whitespace?: boolean | undefined;
+                }[] | undefined;
+                show?: ((renderCallbackParams: import('../../../../../types/src/index').RenderCallbackParams) => boolean) | boolean | undefined;
+                slotName?: string | undefined;
+                slots?: {
+                    [slotName: string]: import('../../../../../types/src/index').ComponentSchema[];
+                } | undefined;
+                type: string;
+            }[];
+            script?: string | undefined;
+        };
+        removeComponentInstance: (id: string, scopeName?: string) => void;
+        setDefaultComponentIds: (schemas: import('../../../../../types/src/index').ComponentSchema[]) => void;
+        setDesignMode: (isDesign?: boolean) => void;
+        setFormData: (formData: Record<string, unknown>, formName?: string) => Record<string, unknown>;
+        setMethods: (scriptStr: string, outputError?: boolean) => void;
+        setPageSchema: (schema: import('../../../../../types/src/index').PageSchema) => void;
+    };
+    ready: import('vue').Ref<boolean, boolean>;
+    resetData: () => void;
+    setData: (data: FormDataModel, formName?: string) => void;
+    setForms: (data: Record<string, FormDataModel>) => void;
+    validate: (formName?: string) => Promise<FormDataModel>;
+    validateAll: () => Promise<Record<string, FormDataModel>>;
+};

package/dist/core/src/components/builder/hooks/useBuilder.js

@@ -0,0 +1,97 @@
+import { ref as d, watch as I } from "vue";
+import { createPageManager as M } from "../../../../../manager/src/pageManager.js";
+import "../../../../../manager/src/pluginManager.js";
+/* empty css                                           */
+/* empty css                                                       */
+/* empty css                                                            */
+import "@vueuse/core";
+import "../../../../../hooks/src/store/index.js";
+/* empty css                                                     */
+import "vue-draggable-plus";
+import { findSchemas as P, deepClone as g } from "../../../../../utils/src/common/data.js";
+import "jsep";
+function q() {
+  const i = d(!1), o = M(), r = d({});
+  function c() {
+    return new Promise((t) => {
+      if (i.value)
+        t();
+      else {
+        const a = I(i, () => {
+          a(), t();
+        });
+      }
+    });
+  }
+  async function s(t = "default") {
+    var e;
+    await c();
+    const a = Object.keys(r.value || {});
+    if (a.length === 1)
+      return r.value[a[0]];
+    const n = (e = r.value) == null ? void 0 : e[t];
+    if (!n) throw new Error(`表单 [name=${t}] 不存在`);
+    return n;
+  }
+  async function u(t, a) {
+    const n = await s(t);
+    return g(await a(n));
+  }
+  async function y(t = "default") {
+    return await u(t, (a) => a.getData());
+  }
+  function l(t, a = "default") {
+    var m, p, w;
+    const n = P(
+      o.pageSchema.schemas,
+      (A) => A.type === "form"
+    );
+    n && n.length === 1 && (a = n[0].props.name), o.setFormData(t, a);
+    const e = (m = r.value) == null ? void 0 : m[a];
+    ((p = e == null ? void 0 : e.clearValidate) == null ? void 0 : p.call(e)) ?? ((w = e == null ? void 0 : e.restoreValidation) == null || w.call(e));
+  }
+  async function v(t = "default") {
+    return await u(t, async (a) => (await a.validate(), await a.getData()));
+  }
+  async function f(t) {
+    await c();
+    const a = {};
+    for (const n in r.value) {
+      const e = r.value[n];
+      e && (a[n] = g(await t(e)));
+    }
+    return a;
+  }
+  async function h() {
+    return await f((t) => t.getData());
+  }
+  function D(t) {
+    for (const a in t)
+      l(t[a], a);
+  }
+  async function F() {
+    return await f(async (t) => (await t.validate(), await t.getData()));
+  }
+  function S() {
+    for (const t in r.value) {
+      const a = r.value[t];
+      a && a.resetData();
+    }
+  }
+  return {
+    formInstances: r,
+    getData: y,
+    getFormInstance: s,
+    getForms: h,
+    pageManager: o,
+    ready: i,
+    resetData: S,
+    setData: l,
+    setForms: D,
+    validate: v,
+    validateAll: F
+  };
+}
+export {
+  q as useBuilder
+};

package/dist/core/src/components/builder/index.d.ts

@@ -0,0 +1 @@
+export { default as EBuilder } from './src/builder.vue';

package/dist/core/src/components/builder/src/builder.vue.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("vue");;/* empty css                                             */const g=require("../../../../../ui-kit/base-ui/src/asyncLoader/baseLoader.vue.cjs");;/* empty css                                                         */;/* empty css                                                              */const D=require("../../../../../ui-kit/base-ui/src/node/node.vue.cjs");;/* empty css                                                       */const i=require("../../../../../utils/src/common/data.cjs");require("jsep");const N=require("../../../../../hooks/src/common/createEventBus.cjs");require("@vueuse/core");require("../../../../../hooks/src/store/index.cjs");const R=require("../../../../../hooks/src/designer/useBuiderDisabled.cjs"),F=require("../../../../../hooks/src/designer/useBuilderContext.cjs"),I=require("../../../../../hooks/src/designer/usePageManager.cjs"),w=require("../../../../../hooks/src/logic/useForm.cjs"),u=require("../../../../../manager/src/pluginManager.cjs");require("vue-draggable-plus");const A=require("../../../../../ui-kit/panel-ui/src/components/index.cjs");;/* empty css                                              */const V=require("../hooks/useBuilder.cjs"),P={key:0,class:"diygw-loading-box"},K={class:"diygw-builder-main ep-scoped"},L={class:"diygw-loading-box"},Y=e.defineComponent({__name:"builder",props:{disabled:{type:Boolean},fieldStates:{},formData:{},pageSchema:{}},emits:["change","ready"],setup(m,{expose:f,emit:_}){const a=m,c=_;A.setupPage(u.pluginManager);const d=u.pluginManager.component.get("epBuilderSlot"),{formInstances:h,getData:v,getFormInstance:y,getForms:q,pageManager:r,ready:s,resetData:B,setData:l,setForms:k,validate:M,validateAll:C}=V.useBuilder(),p=e.ref(0);e.watch(()=>a.pageSchema,t=>{var n;(n=t==null?void 0:t.schemas)!=null&&n.length&&(i.migrateComponentProps(t,!0),i.deepCompareAndModify(r.pageSchema,t),r.mountMonitor.reset(),p.value++,s.value=!1)},{deep:!0,immediate:!0}),e.watch(()=>a.formData,t=>{t&&l(t)},{deep:!0,immediate:!0}),N.createEventBus(),R.provideBuilderDisabled(e.computed(()=>a.disabled)),e.provide(F.BUILDER_KEY,{fieldStateMap:e.computed(()=>{var n;const t={};return(n=a.fieldStates)==null||n.forEach(o=>{t[o.field]=o}),t}),slots:e.useSlots()}),I.providePageManager(r),e.provide(w.FORM_INSTANCES_KEY,h);function E(){const t=e.watch(()=>r.mountMonitor.isAllMounted.value,n=>{n&&(t&&t(),b())})}function b(){s.value=!0,c("ready",r),i.findSchemas(r.pageSchema.schemas,t=>{var n;return(n=t.on)!=null&&n.diygwReady&&r.doActions(t.on.diygwReady),!1})}const S=e.getCurrentInstance();return r.addComponentInstance("builder",S),r.hook.register("formChange",t=>{c("change",t)}),f({getData:v,getFormInstance:y,getForms:q,pageManager:r,ready:s,resetData:B,setData:l,setForms:k,validate:M,validateAll:C}),(t,n)=>!e.unref(u.pluginManager).designer.initialized.value||e.unref(r).pageSchema.schemas.length===0?(e.openBlock(),e.createElementBlock("div",P,[e.createVNode(e.unref(g))])):(e.openBlock(),e.createBlock(e.Suspense,{key:p.value,onResolve:E},{default:e.withCtx(()=>[e.createElementVNode("div",K,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(r).pageSchema.schemas,(o,x)=>(e.openBlock(),e.createBlock(e.unref(D),{key:x,"component-schema":o},null,8,["component-schema"]))),128)),e.unref(d)?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(d)),{key:0})):e.createCommentVNode("",!0)])]),fallback:e.withCtx(()=>[e.createElementVNode("div",L,[e.createVNode(e.unref(g))])]),_:1}))}});module.exports=Y;