epic-designer-gold 0.0.0

package/LICENSE

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

package/dist/_commonjsHelpers-BVfed4GL.js

@@ -0,0 +1,28 @@
+var u = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function f(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+function l(e) {
+  if (e.__esModule) return e;
+  var r = e.default;
+  if (typeof r == "function") {
+    var t = function o() {
+      return this instanceof o ? Reflect.construct(r, arguments, this.constructor) : r.apply(this, arguments);
+    };
+    t.prototype = r.prototype;
+  } else t = {};
+  return Object.defineProperty(t, "__esModule", { value: !0 }), Object.keys(e).forEach(function(o) {
+    var n = Object.getOwnPropertyDescriptor(e, o);
+    Object.defineProperty(t, o, n.get ? n : {
+      enumerable: !0,
+      get: function() {
+        return e[o];
+      }
+    });
+  }), t;
+}
+export {
+  f as a,
+  u as c,
+  l as g
+};

package/dist/_commonjsHelpers-DwTZ_eVU.cjs

@@ -0,0 +1 @@
+"use strict";var u=typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{};function f(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}function l(e){if(e.__esModule)return e;var r=e.default;if(typeof r=="function"){var t=function o(){return this instanceof o?Reflect.construct(r,arguments,this.constructor):r.apply(this,arguments)};t.prototype=r.prototype}else t={};return Object.defineProperty(t,"__esModule",{value:!0}),Object.keys(e).forEach(function(o){var n=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,n.get?n:{enumerable:!0,get:function(){return e[o]}})}),t}exports.commonjsGlobal=u;exports.getAugmentedNamespace=l;exports.getDefaultExportFromCjs=f;

package/dist/_dayjs_commonjs-external-D9ZbEWhj.js

@@ -0,0 +1,6 @@
+import * as e from "dayjs";
+import { g as r } from "./_commonjsHelpers-BVfed4GL.js";
+const m = /* @__PURE__ */ r(e);
+export {
+  m as r
+};

package/dist/_dayjs_commonjs-external-DWlrxCld.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("dayjs"),o=require("./_commonjsHelpers-DwTZ_eVU.cjs");function s(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const u=s(c),a=o.getAugmentedNamespace(u);exports.require$$0=a;

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

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

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

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

package/dist/_vue_commonjs-external-BbihI59z.cjs

@@ -0,0 +1 @@
+"use strict";const c=require("vue"),o=require("./_commonjsHelpers-DwTZ_eVU.cjs");function u(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const s=u(c),a=o.getAugmentedNamespace(s);exports.require$$0=a;

package/dist/_vue_commonjs-external-NwvjgbHK.js

@@ -0,0 +1,6 @@
+import * as e from "vue";
+import { g as r } from "./_commonjsHelpers-BVfed4GL.js";
+const o = /* @__PURE__ */ r(e);
+export {
+  o as r
+};

package/dist/attributeView-DZw_yBnS.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),l=require("./index-Bhu7a5V1.cjs"),v=require("./pluginManager-itCTrGag.cjs"),k=["title"],g=e.defineComponent({__name:"attributeView",setup(b){const d=e.inject("designer"),s=e.inject("pageSchema"),p=e.inject("revoke"),f=v.pluginManager.getComponentConfings(),c=e.computed(()=>d.state.checkedNode);function h(n){var a;return typeof n.show=="boolean"?n.show:typeof n.show=="function"?(a=n.show)==null?void 0:a.call(n,{values:c.value}):!0}const u=e.ref([]);e.watchEffect(()=>{var o,t,r;const n=(o=d.state.checkedNode)==null?void 0:o.type;if(!d.state.checkedNode||!n)return[];const a=((t=f[n])==null?void 0:t.config.attribute)??[];u.value=[{label:"组件ID",type:"input",field:"id",componentProps:{disabled:!0}},...a],d.state.checkedNode.id===((r=s.schemas[0])==null?void 0:r.id)&&u.value.push({label:"画布宽度",type:"EInputSize",field:"canvas.width",editData:s},{label:"画布高度",type:"EInputSize",field:"canvas.height",editData:s})});function y(n,a,o,t=c.value){typeof o.onChange=="function"&&o.onChange({value:n,values:t,componentAttributes:u}),o.changeSync?l.setValueByPath(t,a,n):e.nextTick(()=>{l.setValueByPath(t,a,n)}),p.push(s.schemas,"编辑组件属性")}function m(n,a,o=c.value){e.nextTick(()=>{l.setValueByPath(o,"componentProps.dynamicId",n)})}return(n,a)=>{var o;return e.openBlock(),e.createElementBlock("div",{class:"epic-attribute-view",key:(o=c.value)==null?void 0:o.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u.value,t=>{var r;return e.openBlock(),e.createElementBlock("div",{key:t.field},[h(t)?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["epic-attr-item",t.layout])},[t.label?(e.openBlock(),e.createElementBlock("div",{key:0,class:"epic-attr-label",title:t.label},e.toDisplayString(t.label),9,k)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["epic-attr-input",{"block!":t.layout==="vertical"}])},[e.createVNode(e.unref(l._sfc_main),{componentSchema:{...t,componentProps:{...t.componentProps,...t.field==="componentProps.defaultValue"?(r=c.value)==null?void 0:r.componentProps:{},input:!1,field:void 0,hidden:!1},show:!0,noFormItem:!0},dynamicId:e.unref(l.getValueByPath)(t.editData??c.value,"componentProps.dynamicId"),"model-value":e.unref(l.getValueByPath)(t.editData??c.value,t.field),"onUpdate:modelValue":i=>y(i,t.field,t,t.editData),"onUpdate:dynamicId":i=>m(i)},null,8,["componentSchema","dynamicId","model-value","onUpdate:modelValue","onUpdate:dynamicId"])],2)],2)):e.createCommentVNode("",!0)])}),128))])}}});exports.default=g;

package/dist/attributeView-oQIE06uw.js

@@ -0,0 +1,105 @@
+import { defineComponent as S, inject as i, computed as V, ref as P, watchEffect as C, openBlock as l, createElementBlock as s, Fragment as N, renderList as D, normalizeClass as m, toDisplayString as E, createCommentVNode as y, createElementVNode as U, createVNode as B, unref as f, nextTick as v } from "vue";
+import { _ as x, p as g, s as h } from "./index-Bo1Sw1k6.js";
+import { p as z } from "./pluginManager-D8PM7ICc.js";
+const F = ["title"], M = /* @__PURE__ */ S({
+  __name: "attributeView",
+  setup(T) {
+    const d = i("designer"), r = i("pageSchema"), b = i("revoke"), k = z.getComponentConfings(), o = V(() => d.state.checkedNode);
+    function _(t) {
+      var a;
+      return typeof t.show == "boolean" ? t.show : typeof t.show == "function" ? (a = t.show) == null ? void 0 : a.call(t, { values: o.value }) : !0;
+    }
+    const p = P([]);
+    C(() => {
+      var n, e, c;
+      const t = (n = d.state.checkedNode) == null ? void 0 : n.type;
+      if (!d.state.checkedNode || !t)
+        return [];
+      const a = ((e = k[t]) == null ? void 0 : e.config.attribute) ?? [];
+      p.value = [
+        {
+          label: "组件ID",
+          type: "input",
+          field: "id",
+          componentProps: {
+            disabled: !0
+          }
+        },
+        ...a
+      ], d.state.checkedNode.id === ((c = r.schemas[0]) == null ? void 0 : c.id) && p.value.push(
+        {
+          label: "画布宽度",
+          type: "EInputSize",
+          field: "canvas.width",
+          editData: r
+        },
+        {
+          label: "画布高度",
+          type: "EInputSize",
+          field: "canvas.height",
+          editData: r
+        }
+      );
+    });
+    function w(t, a, n, e = o.value) {
+      typeof n.onChange == "function" && n.onChange({ value: t, values: e, componentAttributes: p }), n.changeSync ? h(e, a, t) : v(() => {
+        h(e, a, t);
+      }), b.push(r.schemas, "编辑组件属性");
+    }
+    function I(t, a, n = o.value) {
+      v(() => {
+        h(n, "componentProps.dynamicId", t);
+      });
+    }
+    return (t, a) => {
+      var n;
+      return l(), s("div", {
+        class: "epic-attribute-view",
+        key: (n = o.value) == null ? void 0 : n.id
+      }, [
+        (l(!0), s(N, null, D(p.value, (e) => {
+          var c;
+          return l(), s("div", {
+            key: e.field
+          }, [
+            _(e) ? (l(), s("div", {
+              key: 0,
+              class: m(["epic-attr-item", e.layout])
+            }, [
+              e.label ? (l(), s("div", {
+                key: 0,
+                class: "epic-attr-label",
+                title: e.label
+              }, E(e.label), 9, F)) : y("", !0),
+              U("div", {
+                class: m(["epic-attr-input", { "block!": e.layout === "vertical" }])
+              }, [
+                B(f(x), {
+                  componentSchema: {
+                    ...e,
+                    componentProps: {
+                      ...e.componentProps,
+                      ...e.field === "componentProps.defaultValue" ? (c = o.value) == null ? void 0 : c.componentProps : {},
+                      input: !1,
+                      field: void 0,
+                      hidden: !1
+                    },
+                    show: !0,
+                    noFormItem: !0
+                  },
+                  dynamicId: f(g)(e.editData ?? o.value, "componentProps.dynamicId"),
+                  "model-value": f(g)(e.editData ?? o.value, e.field),
+                  "onUpdate:modelValue": (u) => w(u, e.field, e, e.editData),
+                  "onUpdate:dynamicId": (u) => I(u)
+                }, null, 8, ["componentSchema", "dynamicId", "model-value", "onUpdate:modelValue", "onUpdate:dynamicId"])
+              ], 2)
+            ], 2)) : y("", !0)
+          ]);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  M as default
+};