gepic
Version:
基于vue3的设计器,可视化开发页面表单
368 lines (367 loc) • 10.4 kB
JavaScript
var l = Object.defineProperty;
var c = (a, e, t) => e in a ? l(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
var i = (a, e, t) => c(a, typeof e != "symbol" ? e + "" : e, t);
import { loadAsyncComponent as p } from "../common/component.js";
import { ref as d, shallowRef as u } from "vue";
import "@vueuse/core";
import "../../hooks/store/index.js";
class f {
constructor() {
// 已初始化基础UI
i(this, "initialized", d(!1));
// 组件对象字典，key 为组件type，value 为组件
i(this, "components", {});
// 组件配置记录字典，key 为组件type，value 为组件配置
i(this, "componentConfigs", {});
// 基础组件type，切换ui时，可先移除该数组记录的type
i(this, "baseComponentTypes", []);
// 组件模式分组，使用 Vue Composition API 的 ref 进行响应式处理
i(this, "componentSchemaGroups", d([]));
// 隐藏的组件列表，存储需要隐藏的组件名称
i(this, "hiddenComponents", []);
// 表单模式默认schema数据
i(this, "formSchemas", [
{
label: "表单",
type: "form",
componentProps: {
layout: "horizontal",
name: "default",
labelWidth: 100,
labelLayout: "fixed",
labelCol: {
span: 5
},
wrapperCol: {
span: 19
},
colon: !0,
labelAlign: "right",
labelPlacement: "left"
},
children: [],
id: "root"
}
]);
// 组件分组名称映射，key 为组件原名称，value 为组件分组映射名称
i(this, "componentGroupNameMap", {});
// 组件分组排序列表(设置之后，按该数组下标排序)
i(this, "sortedGroups", ["表单", "布局"]);
// 视图容器模型，包含活动栏和右侧边栏的配置
i(this, "viewsContainers", {
activitybars: u([]),
// 活动栏配置列表
rightSidebars: u([])
// 右侧边栏配置列表
});
// 公共方法模型，存储插件的公共方法
i(this, "publicMethods", {
// 示例数据
// publicTest: {
// describe: "测试函数",
// name: "test",
// handler: (e) => {
// console.log(e)
// // alert("测试函数弹出");
// },
// },
});
}
/**
* 添加组件到插件管理器中
* @param componentType 组件类型
* @param component 组件
*/
component(e, t) {
typeof t == "function" && (t = p(t)), this.components[e] = t;
}
/**
* 注册组件到插件管理器中
* @param componentConfig 组件配置
*/
registerComponent(e) {
this.component(
e.defaultSchema.type,
e.component
), e.defaultSchema.input && (e.config.action || (e.config.action = []), e.config.action.unshift(
{
type: "setValue",
describe: "设置值",
// 参数配置
argsConfigs: [
{
...e.defaultSchema,
label: "设置数据",
field: "0"
}
]
},
{
type: "getValue",
describe: "获取值"
}
)), this.componentConfigs[e.defaultSchema.type] = e, this.computedComponentSchemaGroups();
}
/**
* 从已记录的基础组件类型中移除特定类型的组件
* @param componentType 要移除的组件类型
*/
removeComponent(e) {
delete this.componentConfigs[e], delete this.components[e];
}
/**
* 记录基础组件类型
* @returns baseComponentTypes string[]
*/
setBaseComponentTypes(e) {
this.baseComponentTypes = e;
}
/**
* 添加基础组件类型
* @returns baseComponentType string
*/
addBaseComponentTypes(e) {
this.baseComponentTypes.push(e);
}
/**
* 移除已记录的基础组件类型
*/
removeBaseComponents() {
this.baseComponentTypes.forEach((e) => {
this.removeComponent(e);
}), this.setBaseComponentTypes([]), this.computedComponentSchemaGroups();
}
/**
* 获取所有插件管理中的所有组件
* @returns components
*/
getComponents() {
return this.components;
}
/**
* 通过type 查询相应的组件
* @returns components
*/
getComponent(e) {
return this.components[e];
}
/**
* 注册或更新活动栏（Activitybar）模型。
* 如果模型中的组件是一个函数，则异步加载该组件。
* @param activitybar 要注册或更新的活动栏模型
*/
registerActivitybar(e) {
typeof e.component == "function" && (e.component = p(e.component)), typeof e.visible > "u" && (e.visible = !0);
const t = this.viewsContainers.activitybars.value.findIndex(
(s) => s.id === e.id
);
t !== -1 ? this.viewsContainers.activitybars.value[t] = e : this.viewsContainers.activitybars.value.push(e);
}
/**
* 获取所有activitybars
* @returns activitybars
*/
getActivitybars() {
return this.viewsContainers.activitybars.value;
}
/**
* 隐藏活动栏
* @param value 属性
* @param attr 查询字段 默认值 title
*/
hideActivitybar(e, t = "title") {
const s = this.viewsContainers.activitybars.value.findIndex(
(n) => n[t] === e
);
s !== -1 && (this.viewsContainers.activitybars.value[s].visible = !1);
}
/**
* 显示活动栏
* @param value 属性
* @param attr 查询字段 默认值 title
*/
showActivitybar(e, t = "title") {
const s = this.viewsContainers.activitybars.value.findIndex(
(n) => n[t] === e
);
s !== -1 && (this.viewsContainers.activitybars.value[s].visible = !0);
}
/**
* 注册右侧栏
*/
registerRightSidebar(e) {
typeof e.component == "function" && (e.component = p(e.component)), typeof e.visible > "u" && (e.visible = !0);
const t = this.viewsContainers.rightSidebars.value.findIndex(
(s) => s.id === e.id
);
t !== -1 ? this.viewsContainers.rightSidebars.value[t] = e : this.viewsContainers.rightSidebars.value.push(e);
}
/**
* 获取所有rightSidebars
* @returns rightSidebars
*/
getRightSidebars() {
return this.viewsContainers.rightSidebars.value;
}
/**
* 隐藏右侧边栏
* @param value 属性
* @param attr 查询字段 默认值 title
*/
hideRightSidebar(e, t = "title") {
const s = this.viewsContainers.rightSidebars.value.findIndex(
(n) => n[t] === e
);
s !== -1 && (this.viewsContainers.rightSidebars.value[s].visible = !1);
}
/**
* 显示右侧边栏
* @param value 属性
* @param attr 查询字段 默认值 title
*/
showRightSidebar(e, t = "title") {
const s = this.viewsContainers.rightSidebars.value.findIndex(
(n) => n[t] === e
);
s !== -1 && (this.viewsContainers.rightSidebars.value[s].visible = !0);
}
/**
* 获取所有插件管理中的所有组件配置
* @returns componentAttrs
*/
getComponentConfings() {
return this.componentConfigs;
}
/**
* 通过type获取ComponentConfing
* @returns
*/
getComponentConfingByType(e) {
return this.componentConfigs[e];
}
/**
* 计算componentSchemaGroups
*/
computedComponentSchemaGroups() {
const e = [];
Object.values(this.componentConfigs).forEach((t) => {
if (!this.hiddenComponents.includes(t.defaultSchema.type) && t.groupName) {
const s = this.componentGroupNameMap[t.groupName] ?? t.groupName;
let n = e.findIndex(
(r) => r.title === s
);
n === -1 && (e.push({
title: s,
list: []
}), n = e.length - 1);
const o = e[n].list.findIndex(
(r) => r.type === t.defaultSchema.type
);
o !== -1 ? e[n].list[o] = t.defaultSchema : e[n].list.push(
t.defaultSchema
);
}
}), e.sort((t, s) => {
const n = this.sortedGroups.indexOf(t.title), o = this.sortedGroups.indexOf(s.title);
return n === -1 ? 1 : o === -1 ? -1 : n - o;
}), e.forEach((t) => {
t.list.sort((s, n) => {
var h, m;
const o = ((h = this.componentConfigs[s.type]) == null ? void 0 : h.sort) ?? 1e3, r = ((m = this.componentConfigs[n.type]) == null ? void 0 : m.sort) ?? 1e3;
return o - r;
});
}), this.componentSchemaGroups.value = e;
}
/**
* 按照分组获取componentSchemaGroups 暂时没啥用
* @returns componentSchemaGroups
*/
getComponentSchemaGroups() {
return this.componentSchemaGroups;
}
/**
* 设置组件分组名称到映射名称的关系
* @param groupName 组件分组名称
* @param mapName 映射的名称
*/
setComponentGroupNameMap(e, t) {
this.componentGroupNameMap[e] = t;
}
/**
* 清空组件分组名称到映射名称的关系
*/
clearComponentGroupNameMap() {
this.componentGroupNameMap = {};
}
/**
* 设置组件分组的排序
* @param sortedGroups 包含组名和排序字段的对象数组
*/
setSortedGroups(e) {
this.sortedGroups = e, this.computedComponentSchemaGroups();
}
/**
* 清空组件分组的排序
*/
clearSortedGroups() {
this.sortedGroups = [], this.computedComponentSchemaGroups();
}
/**
* 添加需要隐藏的组件类型
* @param {*} type
* @returns
*/
hideComponent(e) {
this.hiddenComponents.push(e), this.computedComponentSchemaGroups();
}
/**
* 移除需要隐藏的组件类型
* @param {*} type
* @returns
*/
showComponent(e) {
this.hiddenComponents = this.hiddenComponents.filter(
(t) => t !== e
), this.computedComponentSchemaGroups();
}
/**
* 设置需要隐藏的组件类型数组
* @param {*} type[]
* @returns
*/
setHideComponents(e) {
this.hiddenComponents = e, this.computedComponentSchemaGroups();
}
/**
* 设置initialized的状态。
*
* @param value 要设置的布尔值。
*/
setInitialized(e) {
this.initialized.value = e;
}
/**
* 添加公共方法
* @param publicMethod
*/
addPublicMethod(e) {
const t = e.methodName ?? e.name, s = e.method ?? e.handler;
this.publicMethods[t] = {
...e,
name: t,
handler: s
};
}
/**
* 移除公共方法
* @param methodName
*/
removePublicMethod(e) {
delete this.publicMethods[e];
}
}
const S = new f();
export {
f as PluginManager,
S as pluginManager
};