omni-magic-cube
Version:
[文档中心](https://www.yuque.com/u12572940/wujiemofang) ### 商用请保留版权信息 [演示网址](http://demo.mlyt.top/) ``` 这是一个支持VUE3主流UI组件库的可视化框架 问题交流请加QQ群：685018059 ```
1,950 lines (1,949 loc) • 177 kB
JavaScript
var Mt = Object.defineProperty;
var Rt = (t, e, o) => e in t ? Mt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o;
var Fe = (t, e, o) => Rt(t, typeof e != "symbol" ? e + "" : e, o);
import * as Ae from "vue";
import { ref as A, onDeactivated as Lt, onActivated as Dt, onErrorCaptured as Ot, onUnmounted as Se, onBeforeUnmount as lt, onUpdated as zt, onBeforeUpdate as Nt, onMounted as fe, onBeforeMount as Bt, reactive as oe, computed as E, isRef as W, mergeProps as te, withModifiers as Re, defineComponent as z, shallowRef as ae, h as me, markRaw as Ut, watch as J, nextTick as re, inject as ee, withDirectives as ve, createBlock as O, openBlock as I, resolveDynamicComponent as Ft, unref as C, createSlots as jt, renderList as q, withCtx as D, createCommentVNode as R, createElementBlock as P, Fragment as B, renderSlot as le, readonly as pe, createElementVNode as x, normalizeStyle as G, toDisplayString as $, withMemo as Kt, createVNode as M, toHandlers as je, vShow as Ke, toValue as ue, provide as qt, watchEffect as Ht, resolveComponent as Wt, normalizeClass as ne, useCssVars as Gt, Transition as ce, withKeys as qe, vModelText as Jt, createTextVNode as K, useTemplateRef as He, TransitionGroup as Xt } from "vue";
import { useStorage as ke, watchThrottled as Oe, useElementBounding as Qt, useThrottleFn as Yt, useDebouncedRefHistory as Zt, useActiveElement as en, useStyleTag as tn, useOffsetPagination as nn, refDebounced as on, useResizeObserver as sn, defaultDocument as an, tryOnMounted as rn, tryOnScopeDispose as ln, unrefElement as cn, useVModel as un } from "@vueuse/core";
import { memoize as ct } from "es-toolkit";
import * as dn from "change-case";
import pn from "dexie";
import Pe, { gsap as Q } from "gsap";
import "@vueuse/math";
import { Icon as se, getIcon as fn, addAPIProvider as mn } from "@iconify/vue";
import * as gn from "echarts";
import hn from "sortablejs";
import { useI18n as Ie } from "vue-i18n";
import * as T from "monaco-editor";
let vn = 0;
function ut(t = "") {
const e = ++vn;
return `${t}${e}`;
}
A({
SvgIcon: {
icon: {
default: "comps-default"
},
size: {
default: 32
}
}
});
const We = A({
click: ["evt"],
//点击
dblclick: ["evt"],
//双击
contextmenu: ["evt"],
//右键
mouseenter: ["evt"],
//鼠标移入
mouseleave: ["evt"],
//鼠标移出
keydown: ["evt"],
//按键按下
keyup: ["evt"],
//按键抬起
keypress: ["evt"]
//按键按下
}), ye = A({
beforeCreate: {
codeVar: [],
code: ""
},
created: {
codeVar: [],
code: ""
},
beforeMount: {
codeVar: [],
code: "",
function: Bt
},
mounted: {
codeVar: [],
code: "",
function: fe
},
beforeUpdate: {
codeVar: [],
code: "",
function: Nt
},
updated: {
codeVar: [],
code: "",
function: zt
},
beforeUnmount: {
codeVar: [],
code: "",
function: lt
},
unmounted: {
codeVar: [],
code: "",
function: Se
},
errorCaptured: {
codeVar: ["err", "vm", "info"],
code: "",
function: Ot
},
activated: {
codeVar: [],
code: "",
function: Dt
},
deactivated: {
codeVar: [],
code: "",
function: Lt
}
}), yn = A({
div: {
default: "auto"
},
span: {
default: "auto"
},
ul: {
default: {
auto: !0,
allowComps: ["li"]
}
},
li: {
default: "auto"
}
}), bn = "molian-cube";
A("https://wujie.mlyt.top/getData");
const be = A("http://flower.molianpro.com:33000");
ke("omc_setting", {
immerseLeftMode: !0,
immerseRightMode: !0
});
const Cn = Object.getPrototypeOf(async function() {
}).constructor, xn = Object.getPrototypeOf(function() {
}).constructor, ge = (t, e, o, n) => {
const s = {
asyncFunction: Cn,
function: xn
}, i = `
try {
${o}
} catch (error) {
${n === "designer" ? "throw error;" : "console.error('[Function Execution Error]:', error);"}
}
`, a = s[t];
return new a(...e, i || "");
}, wn = function(t, e, o) {
const n = W(t) ? t.value : t, s = (i, a, c, p, r = []) => {
const u = p.__type;
ge(i, c, a, u).bind(p).call(null, ...r);
};
Object.entries(n).forEach(([i, a]) => {
const { type: c, value: p } = a;
if (!p) return;
const { code: r, codeVar: u } = p, d = { app: Ae, vars: e, ...o };
ye.value[i].function ? ye.value[i].function(function(...v) {
s(c, r, u, d, v);
}) : s(c, r, u, d);
});
}, he = function(t, e, o) {
const { code: n, codeVar: s = [], functionMode: i } = t.value, a = s.map((r, u) => `const ${r} = arguments[${u}];`).join(`
`), c = { app: Ae, vars: e, ...o }, p = o.__type;
return ge(
i,
[],
a ? `${a}
${n}` : n,
p
).bind(c);
}, Ge = ["once", "capture", "passive"], An = function(t, e) {
if (!e[t]?.value?.modifiers)
return { newKey: t, modifiers: [] };
const { modifiers: o } = e[t].value, n = o.filter(
(a) => Ge.includes(a)
), s = o.filter((a) => !Ge.includes(a));
return { newKey: n.length > 0 ? `${t}${n.map(
(a) => a.charAt(0).toUpperCase() + a.slice(1)
).join("")}` : t, modifiers: s };
}, dt = (t, e, o, n, s) => {
const i = (p) => Object.entries(p).reduce((r, [u, d]) => {
if (!d) return r;
const { newKey: v, modifiers: m } = An(u, p), l = d.type === "variable" && d.value?.length ? o[d.value[0]] : d.value?.code ? d : null;
if (l) {
const h = (g, ...f) => kn(l, e, n, s)(g, ...f);
r[v] = Re(h, m);
}
return r;
}, {}), { on: a = {}, nativeOn: c = {} } = t;
return te(
i(a),
i(c)
);
}, pt = (t, e = {}, o) => {
const n = oe({}), s = { app: Ae, vars: n, ...e }, i = e.__type, a = (c) => c?.functionMode && ["asyncFunction", "function"].includes(c.functionMode) ? ge(c.functionMode, c.codeVar || [], c.code || "", i) : ge("function", [], "", i);
return Object.entries(t).forEach(([c, { type: p, value: r }]) => {
switch (p) {
case "function":
n[c] = a(r).bind(s);
break;
case "computed":
if (r?.functionMode && ["asyncFunction", "function"].includes(r.functionMode)) {
const u = {
functionMode: r.functionMode,
codeVar: r.codeVar || [],
code: r.code || ""
};
n[c] = Sn(u, n, e);
}
break;
default:
n[c] = r;
}
}), n;
}, Sn = (t, e, o = {}) => {
const n = { app: Ae, vars: oe(e), ...o }, s = o.__type, i = ge(t.functionMode, t.codeVar, t.code, s);
return E(i.bind(n));
};
function kn(t, e, o, n) {
const s = () => he(t, e, n);
return o ? (...i) => s()(...i, { $slot: o }) : s;
}
class In {
pool = /* @__PURE__ */ new Map();
maxSize = 50;
constructor(e) {
e && (this.maxSize = e);
}
acquire(e) {
const o = this.pool.get(e) || [];
return o.length > 0 ? o.pop() : null;
}
release(e, o) {
this.pool.has(e) || this.pool.set(e, []);
const n = this.pool.get(e);
n.length < this.maxSize && n.push(o);
}
clear() {
this.pool.clear();
}
}
const _n = A("element-plus"), Ki = A(!1), Pn = A(null), ze = oe([{
name: "tiny-vue",
prefix: "Tiny",
icon: "tinyvue",
docUrl: "https://opentiny.design/tiny-vue/zh-CN/os-theme/overview",
removeAttrs: ["tiny_template", "tiny_renderless", "tiny_mode", "tiny_mode_root", "tiny_theme", "tiny_chart_theme"],
compMapping: {
ButtonGroup: {},
Button: {
theme: "type",
text: {
type: "text"
},
size: {
size: "mini"
}
},
Tag: {
size: {
size: "mini"
}
},
Input: {
prefixIcon: "prefix",
size: {
size: "mini"
}
},
InputNumber: {
component: "Numeric",
size: {
size: "mini"
}
},
Divider: {},
Slider: {},
Select: {
size: {
size: "mini"
},
options: (t) => ({
default: t.map((e) => e.isGroup ? {
_isSlot: !0,
tag: "TinyOptionGroup",
attrs: {
label: e.label
},
slots: e && e.children.map((o) => ({
_isSlot: !0,
tag: "TinyOption",
attrs: {
disabled: o.disabled,
label: o.label,
value: o.value
}
}))
} : {
_isSlot: !0,
tag: "TinyOption",
attrs: {
disabled: e.disabled,
label: e.label,
value: e.value
}
})
})
},
Switch: {
size: {
size: "mini"
}
},
Tooltip: {},
Popup: {
component: "Popover",
default: "reference",
content: "default"
},
RadioGroup: {
size: {
size: "mini"
}
},
RadioButton: {
value: "label",
size: {
size: "mini"
}
},
Cascader: {
optionItems: "options",
size: {
size: "mini",
separator: "."
},
checkStrictly: {
props: {
checkStrictly: !0
}
}
},
CascaderPanel: {
optionItems: "options",
size: {
size: "mini",
separator: "."
},
checkStrictly: {
props: {
checkStrictly: !0
}
}
},
Dropdown: {
optionItems: (t) => ({
dropdown: {
_isSlot: !0,
tag: "TinyDropdownMenu",
attrs: {},
slots: t && t.map((e) => ({
_isSlot: !0,
tag: "TinyDropdownItem",
attrs: {
disabled: e.disabled,
onClick: e.onclick,
name: e.value
},
slots: e.label
}))
}
})
},
Collapse: {},
CollapseItem: {},
Dialog: {
component: "DialogBox"
}
}
}, {
name: "arco",
prefix: "A",
icon: "Arco",
docUrl: "https://arco.design/vue/docs/pro/start",
compMapping: {
ButtonGroup: {},
Button: {
theme: (t) => t !== "default" ? {
type: t
} : {},
text: {
type: "text"
}
},
Tag: {
theme: (t) => ({
color: t === "primary" && "arcoblue" || t === "default" && "gray" || "orangered"
})
},
Input: {
prefixIcon: "prefix",
onEnter: {}
},
InputNumber: {},
Divider: {},
Slider: {},
Select: {
size: {
// 设置大小的同时设置组件的props
size: "small",
fieldNames: { value: "value", label: "label" }
}
},
Switch: {},
Tooltip: {
content: "content"
},
Popup: {
component: "Popover",
default: "default",
content: "content",
trigger: {
trigger: "click"
}
},
RadioGroup: {
size: {
type: "button"
}
},
RadioButton: {
component: "Radio",
value: "value"
},
Cascader: {
optionItems: "options",
checkStrictly: "check-strictly",
size: {
size: "small",
"path-mode": !0,
"allow-clear": !0
}
},
CascaderPanel: {
optionItems: "options",
checkStrictly: "check-strictly",
size: {
size: "small",
"path-mode": !0,
"allow-clear": !0,
style: "border-width: 0px;box-shadow: none;"
}
},
Dropdown: {
optionItems: (t) => {
const e = Pn || ze.find((o) => o.name === "arco");
return {
content: {
_isSlot: !0,
tag: e + "Dgroup",
attrs: {},
slots: t && t.map((o) => ({
_isSlot: !0,
tag: e + "Doption",
attrs: {
disabled: o.disabled,
onClick: o.onclick,
command: o.value
},
slots: o.label
}))
}
};
}
},
Collapse: {},
CollapseItem: {},
Dialog: {
component: "Modal",
destroyOnClose: "unmount-on-close",
appendToBody: "render-to-body",
header: "title"
}
}
}, {
name: "tdesign-vue-next",
prefix: "T",
icon: "TDesign",
docUrl: "https://tdesign.tencent.com/vue-next/overview",
compMapping: {
ButtonGroup: {},
Button: {
theme: "theme",
text: {
variant: "text"
}
},
Tag: {},
Input: {
prefixIcon: "prefixIcon",
onKeyup: {}
},
InputNumber: {},
Divider: {},
Slider: {},
Select: {},
Switch: {},
Tooltip: {
content: {
content: "content",
destroyOnClose: !0
}
},
Popup: {
component: "Popup",
default: "default",
content: "content"
},
RadioGroup: {},
RadioButton: {
value: "label"
},
Cascader: {
optionItems: "options"
},
CascaderPanel: {
optionItems: "options"
},
Dropdown: {
optionItems: (t) => ({
options: t.map((e) => ({
content: e.label,
value: e.value,
disabled: e.disabled,
onClick: e.onclick
}))
})
},
Dialog: {
appendToBody: {
attach: "body"
}
}
}
}, {
name: "element-plus",
prefix: "El",
icon: "ElementPlus",
docUrl: "https://element-plus.org/zh-CN/",
compMapping: {
ButtonGroup: {},
Button: {
theme: "type",
text: "text"
},
Tag: {
theme: "type"
},
Input: {
prefixIcon: "prefix",
onEnter: {},
textarea: {
type: "textarea"
}
},
InputNumber: {},
Divider: {},
Slider: {},
Select: {
component: "SelectV2",
// 切换组件
size: {
// 设置大小的同时设置组件的props
size: "small",
props: {
options: "children"
},
clearable: !0
}
},
Switch: {},
Tooltip: {
content: "content"
},
Popup: {
component: "Popover",
default: "reference",
content: "default",
trigger: {
trigger: "click",
width: "auto"
}
},
Popconfirm: {
default: "reference",
content: "title",
confirmBtn: "confirmButtonText",
cancelBtn: "cancelButtonText"
},
RadioGroup: {},
RadioButton: {
value: "label"
},
Cascader: {
optionItems: "options",
checkStrictly: {
props: {
checkStrictly: !0
}
}
},
CascaderPanel: {
optionItems: "options",
checkStrictly: {
props: {
checkStrictly: !0
}
}
},
Dropdown: {
optionItems: (t) => ({
dropdown: {
_isSlot: !0,
tag: "ElDropdownMenu",
attrs: {},
slots: t && t.map((e) => ({
_isSlot: !0,
tag: "ElDropdownItem",
attrs: {
disabled: e.disabled,
onClick: e.onclick,
command: e.value
},
slots: e.label
}))
}
})
},
Collapse: {},
CollapseItem: {},
Dialog: {
visible: "modelValue",
"onUpdate:visible": "onUpdate:modelValue",
destroyOnClose: "destroy-on-close",
appendToBody: "append-to-body",
header: "title"
}
}
}, {
name: "ant-design-vue",
prefix: "A",
icon: "Ant",
docUrl: "https://www.antdv.com/components/overview",
compMapping: {
ButtonGroup: {},
Button: {
theme: (t) => t === "warning" ? {
type: "primary",
danger: !0
} : {
type: "primary"
},
text: {
type: "link"
}
},
Tag: {},
Input: {
prefixIcon: "prefix",
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
InputNumber: {
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
Divider: {},
Slider: {},
Select: {
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
Switch: {
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
Tooltip: {
content: "title"
},
Popup: {
component: "Popover"
},
RadioGroup: {
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value",
variant: {
buttonStyle: "solid"
}
},
RadioButton: {
value: "label"
},
Cascader: {
optionItems: "options",
valueType: (t) => t === "full" ? {
changeOnSelect: !0
} : {},
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
CascaderPanel: {
component: "Cascader",
optionItems: "options",
valueType: (t) => t === "full" ? {
changeOnSelect: !0
} : {},
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
Dropdown: {
optionItems: (t) => ({
overlay: {
_isSlot: !0,
tag: "AMenu",
attrs: {},
slots: t && t.map((e) => ({
_isSlot: !0,
tag: "AMenuItem",
attrs: {
disabled: e.disabled,
onClick: e.onclick,
command: e.value
},
slots: e.label
}))
}
})
},
Collapse: {},
CollapseItem: {},
Dialog: {
component: "Modal",
appendToBody: {
getContainer: () => document.body,
zIndex: 1001
},
header: "title",
visible: "open",
"onUpdate:visible": "onUpdate:open"
}
}
}, {
name: "naive",
prefix: "N",
icon: "naive",
docUrl: "https://www.naiveui.com/zh-CN/os-theme",
compMapping: {
ButtonGroup: {},
Button: {
theme: "type",
text: "text"
},
Tag: {
theme: "type"
},
Input: {
prefixIcon: "prefix",
onEnter: {},
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
InputNumber: {
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
Divider: {},
Slider: {},
Select: {
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value",
size: {
size: "small",
virtualScroll: !1
}
},
Switch: {
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
Tooltip: {
default: "trigger",
content: (t) => ({
default: {
_isSlot: !0,
tag: "NEllipsis",
attrs: {},
slots: t
}
})
},
Popup: {
component: "Popover",
default: "trigger",
content: "default",
trigger: {
trigger: "click",
style: "min-width:180px;"
},
visible: "show",
"onUpdate:visible": "onUpdate:show"
},
RadioGroup: {
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
RadioButton: {
value: "label"
},
Cascader: {
optionItems: "options",
checkStrictly: {
checkStrategy: "all",
separator: ".",
virtualScroll: !1,
cascade: !1
},
modelValue: (t) => ({
value: t[t.length - 1]
}),
"onUpdate:modelValue": "onUpdate:value"
},
CascaderPanel: {
component: "Cascader",
optionItems: "options",
checkStrictly: {
checkStrategy: "all",
separator: ".",
virtualScroll: !1,
cascade: !1
},
modelValue: (t) => ({
value: t[t.length - 1]
}),
"onUpdate:modelValue": "onUpdate:value"
},
Dropdown: {
optionItems: (t) => ({
options: t.map((e) => ({
label: e.label,
key: e.value,
disabled: e.disabled,
props: {
onClick: e.onclick
}
}))
})
},
Collapse: {},
CollapseItem: {},
Dialog: {
component: "Modal",
visible: "show",
"onUpdate:visible": "onUpdate:show",
destroyOnClose: "destroy-on-close",
appendToBody: {
preset: "dialog",
style: {
width: "80vw"
}
},
header: "title",
footer: "action"
}
}
}, {
name: "vexip",
prefix: "V",
icon: "vexip",
docUrl: "https://www.vexipui.com/zh-CN/",
compMapping: {
ButtonGroup: {},
Button: {
theme: "type",
text: "text"
},
Tag: {
theme: "type"
},
Input: {
prefixIcon: "prefix",
onEnter: {},
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
InputNumber: {
component: "NumberInput",
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
Divider: {},
Slider: {},
Select: {
size: {
// 设置大小的同时设置组件的props
size: "small",
props: {
options: "children"
},
transfer: "body"
},
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
Switch: {
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
Tooltip: {
content: (t) => ({
default: {
_isSlot: !0,
tag: "NEllipsis",
attrs: {},
slots: t
}
}),
default: "trigger"
},
Popup: {
component: "Tooltip",
default: "trigger",
content: "default",
trigger: {
trigger: "click",
transfer: !0
}
},
RadioGroup: {
size: {
size: "small",
shape: "button-group"
},
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
RadioButton: {
component: "Radio",
value: "label"
},
Cascader: {
optionItems: "options",
checkStrictly: {
clearable: !0,
noCascaded: !0
},
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
CascaderPanel: {
component: "Cascader",
optionItems: "options",
checkStrictly: {
clearable: !0,
noCascaded: !0
},
modelValue: "value",
"onUpdate:modelValue": "onUpdate:value"
},
Dropdown: {
optionItems: (t) => ({
drop: {
_isSlot: !0,
tag: "VDropdownList",
attrs: {},
slots: t && t.map((e) => ({
_isSlot: !0,
tag: "VDropdownItem",
attrs: {
disabled: e.disabled,
onClick: e.onclick,
command: e.value
},
slots: e.label
}))
}
})
},
Collapse: {},
CollapseItem: {},
Dialog: {
component: "Modal",
visible: "active",
"onUpdate:visible": "onUpdate:active",
destroyOnClose: {
"auto-remove": !0,
undivided: !0
},
appendToBody: {
transfer: !0
},
header: "title"
}
}
}]), Je = 50;
function Ce(t, e, o, n, s = 0) {
if (s > Je)
return console.warn(`递归深度超过${Je}层，可能存在循环引用`), me("div", { class: "recursion-error" }, "递归深度超限");
const i = (a) => Array.isArray(a) ? a.map((c) => Ce(
c.slots,
c.attrs,
c.tag,
n,
s + 1
)) : typeof a == "object" && a !== null ? Ce(
a.slots,
a.attrs,
a.tag,
n,
s + 1
) : typeof a == "function" ? a() : () => a;
return n[o] ? me(n[o], e, i(t)) : (console.warn(`组件 ${o} 不存在`), me("div", { class: "component-not-found" }, `组件 ${o} 不存在`));
}
const Te = /* @__PURE__ */ new Map(), Tn = function(t, e, o, n) {
const s = `${t}${e}`;
if (Te.has(s))
return Te.get(s);
const i = z({
inheritAttrs: !1,
setup(a, { attrs: c, slots: p }) {
const r = ae(n?._context?.components || {}), u = ae(null), d = ae({});
fe(() => {
try {
u.value = r.value[`${t}${e}`];
} catch (l) {
console.error(`组件${t}${e}不存在:`, l);
}
}), (() => {
const l = {};
for (const h in p) {
const g = o[h] || h;
l[g] = p[h];
}
d.value = l;
})();
const m = E(() => {
if (!Object.keys(c).length)
return { ref: "ref" };
const l = { ref: "ref" }, h = (f) => {
if (!f.length) return;
const b = {};
f.forEach((y, _) => {
b[`slot${_}`] = Ce(
y.slots,
y.attrs,
y.tag,
r.value
);
}), d.value = b;
}, g = (f, b) => {
if (b)
if (Array.isArray(b))
h(b);
else if (!b._isSlot)
l[f] = b;
else {
const y = d.value;
y[f] = Ce(
b.slots,
b.attrs,
b.tag,
r.value
), d.value = y;
}
};
for (const f in c) {
const b = typeof o[f];
try {
switch (b) {
case "string":
l[o[f]] = c[f];
break;
case "object":
o[f] && Object.assign(l, o[f]);
break;
case "function":
const y = o[f](c[f]);
if (y)
for (const _ in y)
g(_, y[_]);
break;
default:
l[f] = c[f];
}
} catch (y) {
console.error(`处理属性 ${f} 时出错:`, y), l[f] = c[f];
}
}
return l;
});
return () => {
const l = u.value;
return l ? me(l, m.value, d.value) : me("div", { class: "component-loading" }, `加载组件 ${t}${e} 中...`);
};
}
});
return Te.set(s, i), i;
}, Vn = new pn(bn);
Vn.version(2).stores({
i18n: "++id, key, UIName, value",
attrs: "++id, key, UIName, value",
slots: "++id, key, UIName, value"
});
A([]);
const $n = ae({});
A(yn.value);
const En = A({}), Xe = Ut({}), Mn = function(t, e) {
const o = ze.find((i) => i.name === (e || _n.value)), { prefix: n, compMapping: s } = o;
for (const i in s)
if (Object.hasOwnProperty.call(s, i)) {
const a = s[i];
Xe["custom" + i] = Tn(n, a.component || i, a, t);
}
t.provide("customComps", Xe);
}, { Message: Rn } = En.value, Ln = ({ comp: t, $slot: e, expandAPI: o }) => {
if (!t?.directives || !ft({
comp: {
directives: {
if: t.directives?.if
},
vars: t.vars
},
$slot: e
}))
return !1;
const { directives: n, vars: s } = t;
if (!n.for)
return !1;
const i = _e(n.for, s, {
slotData: e,
expandAPI: o
});
return typeof i == "function" ? !!i({ $slot: e }) : !!i;
}, ft = ({ comp: t, $slot: e, expandAPI: o }) => {
if (!t?.directives?.if)
return !0;
const { directives: n, vars: s } = t, i = _e(n.if, s, {
slotData: e,
expandAPI: o
});
return typeof i == "function" ? !!i({ $slot: e }) : !!i;
}, Qe = ({ comp: t, $slot: e, expandAPI: o }) => {
if (!t?.directives?.show)
return !0;
const { directives: n, vars: s } = t, i = _e(n.show, s, {
slotData: e,
expandAPI: o
});
return typeof i == "function" ? !!i({ $slot: e }) : !!i;
}, Dn = (t, e, o, n, s, i) => t.map((a) => ({
...a,
vars: e,
cacheOn: dt({ on: a.on, nativeOn: a.nativeOn }, e, s, n, o)
})), Ye = (t, e, o, n) => {
const { dataKey: s = "item", idKey: i = "key" } = o.directives.for, c = {
[`${o.key}_for`]: {
[s]: t,
[i]: e
}
};
return n ? { ...n, ...c } : c;
}, _e = (t, e, o = {}) => {
const { type: n, value: s } = t;
switch (n) {
case "variable":
return !Array.isArray(s) || !s.length ? void 0 : s.reduce((i, a, c) => c === 0 ? e[a] : i?.[a], void 0);
case "string":
return s;
case "function":
return he(t, e, o.expandAPI || {})({
$slot: o.slotData
});
default:
return;
}
}, On = (t, e, o, n, s, i) => {
const a = {};
if (!t?.attrs || !e[t.name]) {
if (console.log("不存在组件或者属性", t.name, t.attrs), ![
"a",
"abbr",
"address",
"area",
"article",
"aside",
"audio",
"b",
"base",
"bdi",
"bdo",
"blockquote",
"body",
"br",
"button",
"canvas",
"caption",
"cite",
"code",
"col",
"colgroup",
"data",
"datalist",
"dd",
"del",
"details",
"dfn",
"dialog",
"div",
"dl",
"dt",
"em",
"embed",
"fieldset",
"figcaption",
"figure",
"footer",
"form",
"h1",
"h2",
"h3",
"h4",
"h5",
"h6",
"head",
"header",
"hgroup",
"hr",
"html",
"i",
"iframe",
"img",
"input",
"ins",
"kbd",
"label",
"legend",
"li",
"link",
"main",
"map",
"mark",
"menu",
"meta",
"meter",
"nav",
"noscript",
"object",
"ol",
"optgroup",
"option",
"output",
"p",
"param",
"picture",
"pre",
"progress",
"q",
"rp",
"rt",
"ruby",
"s",
"samp",
"script",
"section",
"select",
"slot",
"small",
"source",
"span",
"strong",
"style",
"sub",
"summary",
"sup",
"svg",
"table",
"tbody",
"td",
"template",
"textarea",
"tfoot",
"th",
"thead",
"time",
"title",
"tr",
"track",
"u",
"ul",
"var",
"video",
"wbr"
].find((m) => t?.name === m))
try {
Rn.error(`${t?.name || "Unknown"} 组件不存在`);
} catch {
console.log(`${t?.name || "Unknown"} 组件不存在`);
}
return a;
}
const c = (d, v) => {
if (!d.value?.length) return null;
const m = d.value.reduce((h, g) => h && h[g] ? h[g] : void 0, o);
return typeof m != "function" ? m : (v.type === "function" || typeof v == "function" || Array.isArray(v.type) && v.type.includes("function")) && s ? (...h) => m(...h, { $slot: s }) : m.call(null, { $slot: s });
}, p = (d, v) => {
if (!d.value?.code) return null;
const m = s ? (...h) => he(d, o, n)(...h, { $slot: s }) : he(d, o, n);
return v?.type === "function" || typeof v == "function" || Array.isArray(v?.type) && v.type.includes("function") ? m : m() || null;
}, r = (d, v, m) => {
if (d.value === null || d.value === void 0) return null;
const l = e[t.name].render || e[t.name].setup ? e[t.name].props[m] : e[t.name].comp?.props[m];
return typeof l == "object" && !Array.isArray(l) ? d.value !== l.default && i === "designer" || i === "render" ? d.value : null : (typeof l == "function" && d.value !== null, d.value);
}, u = (d) => {
switch (d) {
case "array":
return [];
case "object":
return {};
case "boolean":
return !1;
case "number":
return 0;
default:
return "";
}
};
return Object.entries(t.attrs).forEach(([d, v]) => {
if (!v) return;
const m = e[t.name].props[d];
if (m?.hidden && (typeof m.hidden == "function" && m.hidden(t.attrs) || typeof m.hidden == "boolean" && m.hidden))
return;
let l = null;
switch (v.type) {
case "variable":
l = c(v, m);
break;
case "function":
l = p(v, m);
break;
default:
l = r(v, m, d);
}
m?.required && l === null && (l = u(m.type)), W(l) && (l = l.value), l !== null && (a[d] = l);
}), a;
}, zn = (t) => {
const { directives: e, vars: o } = t.comp, { text: n } = e;
switch (n.type) {
case "variable":
return E(() => {
const s = n.value.reduce((i, a) => i?.[a], o);
return typeof s == "function" ? s({
comp: t.comp,
$slot: t.$slot
}) : typeof s == "object" ? JSON.stringify(s) : String(s ?? "");
});
case "string":
return n.value;
case "function":
try {
return he(n, t.variable, t.expandAPI)({
comp: t.comp,
$slot: t.$slot
});
} catch {
return "function Text";
}
default:
return "";
}
}, Nn = {
mounted: (t, e) => {
t._once = !0, t.textContent = e.comp ?? t.innerHTML;
},
updated: (t, e) => {
!t._once && e?.comp && (t.textContent = e.comp);
}
}, Ve = (t, e, o) => {
o ? Un(t, e) : t.textContent = e;
}, Bn = (t) => {
const e = t.comp.directives?.text ? zn(t) : null, o = Object.keys(t.comp.slots || {}).length > 0;
return {
mounted(n) {
t.comp.directives.text && (W(e) ? J(
() => e.value,
(s) => Ve(n, s, o),
{ immediate: !0 }
) : Ve(n, e, o)), t.comp.directives.once && Nn.mounted(n, t);
},
updated(n) {
t.comp.directives.text && !W(e) && Ve(n, e, o);
}
};
}, Un = (t, e) => {
let o = t.querySelector("#custom-text");
if (o) {
if (o.textContent === e)
return;
o.textContent = e;
} else
o = document.createElement("span"), o.id = "custom-text", t.appendChild(o), re(() => {
o && (o.textContent = e);
});
}, ie = class ie {
/**
* 执行动画配置
* @param element 目标元素
* @param config 动画配置，可以是单个配置或配置数组
* @param context 上下文数据
* @returns 动画控制器
*/
static runAnimation(e, o, n) {
if (!(!e || !o))
if (Array.isArray(o) && o.length > 1) {
const s = Q.timeline();
return o.forEach((i) => {
const a = i.engine, p = (this.engines[a] || this.engines.gsap).runAnimation(e, i, n);
p && s.add(p);
}), s;
} else {
const s = Array.isArray(o) ? o[0] : o, i = s?.engine;
return (this.engines[i] || this.engines.gsap).runAnimation(e, s, n);
}
}
/**
* 停止动画
* @param element 目标元素
*/
static stopAnimation(e) {
e && Object.values(this.engines).forEach((o) => {
o.stopAnimation(e);
});
}
/**
* 注册新的动画引擎
* @param name 引擎名称
* @param engine 引擎实现
*/
static registerEngine(e, o) {
this.engines[e] = o;
}
/**
* 将动画效果配置转换为GSAP配置
* 从Manager移动到Service，因为这是核心动画逻辑
*/
static convertEffectsToTweenConfig(e) {
const o = {
duration: 0.3,
ease: "power1.out"
};
return e.forEach((n) => {
if (n.duration && (o.duration = n.duration), n.ease && (o.ease = n.ease), n.type === "scale" && n.to)
o.scale = n.to.scale;
else if (n.type === "fade" && n.to)
o.opacity = n.to.opacity;
else if (n.type === "slide") {
const s = n.properties?.distance ?? "100%";
n.direction === "up" ? o.y = `-${s}` : n.direction === "down" ? o.y = s : n.direction === "left" ? o.x = `-${s}` : n.direction === "right" && (o.x = s), n.to?.x !== void 0 && n.direction !== "left" && n.direction !== "right" && (o.x = n.to.x), n.to?.y !== void 0 && n.direction !== "up" && n.direction !== "down" && (o.y = n.to.y);
} else n.type === "rotate" && n.to ? o.rotation = n.to.rotation : n.type === "custom" && n.properties && Object.assign(o, n.properties);
}), o;
}
/**
* 创建直接的GSAP动画
* 新增方法，简化Manager中的代码
*/
static createDirectAnimation(e, o) {
const n = this.convertEffectsToTweenConfig(o);
return Q.to(e, n);
}
/**
* 重置元素样式到初始状态
* 新增方法，统一处理样式重置
* @param element 目标元素
* @param duration 过渡时间，设为0则立即重置
* @param immediate 是否立即重置，为true时忽略duration参数
*/
static resetElementStyles(e, o = 0.3, n = !1) {
return n ? (e.style.scale = "", e.style.backgroundColor = "", e.style.transform = "", e.style.opacity = "", e.style.translate = "", e.style.rotate = "", Q.killTweensOf(e), Q.set(e, { clearProps: "all" }), null) : Q.to(e, {
scale: 1,
backgroundColor: "",
transform: "",
opacity: "",
x: "",
y: "",
rotation: "",
duration: o,
ease: "power1.out",
clearProps: "all"
// 动画完成后清除所有属性
});
}
/**
* 执行GSAP动画
*/
static runGsapAnimation(e, o, n) {
const s = Array.isArray(o) ? o[0] : o;
if (!s || !s.effects || s.effects.length === 0)
return null;
const i = this.resolveTargets(e, s.target), a = Q.timeline({
...s.timeline || {},
onStart: s.callbacks?.onStart ? this.createCallback(s.callbacks.onStart, n) : void 0,
onUpdate: s.callbacks?.onUpdate ? this.createCallback(s.callbacks.onUpdate, n) : void 0,
onComplete: s.callbacks?.onComplete ? this.createCallback(s.callbacks.onComplete, n) : void 0
});
return s.effects.forEach((c, p) => {
const r = this.convertEffectsToTweenConfig([c]), u = p === 0 ? 0 : c.delay ? `+=${c.delay}` : "+=0";
a.to(i, {
...r,
stagger: s.target?.stagger
}, u);
}), a;
}
/**
* 执行CSS动画
*/
static runCssAnimation(e, o) {
const n = Array.isArray(o) ? o[0] : o;
if (!n || !n.effects || n.effects.length === 0)
return null;
const s = this.resolveTargets(e, n.target), i = n.effects[0], a = s instanceof HTMLElement ? [s] : Array.from(s);
return a.forEach((c) => {
if (!(c instanceof HTMLElement)) return;
c.style.animationDuration = `${i.duration}s`, c.style.animationDelay = `${i.delay || 0}s`, c.style.animationFillMode = "both";
let p = "";
if (i.type === "fade" ? p = "fade-in" : i.type === "slide" ? p = `slide-${i.direction || "up"}` : i.type === "scale" ? p = "scale-in" : i.type === "rotate" ? p = "rotate-in" : i.type === "custom" && i.properties?.className && (p = i.properties.className), p) {
c.classList.add(p);
const r = () => {
c.classList.remove(p), c.removeEventListener("animationend", r);
};
c.addEventListener("animationend", r);
}
}), {
pause: () => {
a.forEach((c) => {
c instanceof HTMLElement && (c.style.animationPlayState = "paused");
});
},
play: () => {
a.forEach((c) => {
c instanceof HTMLElement && (c.style.animationPlayState = "running");
});
},
restart: () => {
a.forEach((c) => {
c instanceof HTMLElement && (c.style.animation = "none", c.offsetHeight, c.style.animation = "");
});
}
};
}
/**
* 解析目标元素
*/
static resolveTargets(e, o) {
return o ? o.selector ? e.querySelectorAll(o.selector) : o.children ? o.childSelector ? e.querySelectorAll(o.childSelector) : e.children : e : e;
}
/**
* 创建回调函数
*/
static createCallback(e, o) {
try {
return new Function("context", `
return function() {
${e}
}.bind(context);
`)(o);
} catch (n) {
return console.error("创建动画回调函数失败:", n), () => {
};
}
}
};
// 保留引擎注册机制
Fe(ie, "engines", {}), ie.registerEngine("gsap", {
runAnimation: (e, o, n) => ie.runGsapAnimation(e, o, n),
stopAnimation: (e) => {
Q.killTweensOf(e);
}
}), ie.registerEngine("css", {
runAnimation: (e, o, n) => ie.runCssAnimation(e, o),
stopAnimation: (e) => {
e instanceof HTMLElement && (e.style.animation = "none");
}
});
let L = ie;
class Fn {
element;
animations;
context;
// 存储动画实例和事件监听器
enterAnimation = null;
leaveAnimation = null;
interactionAnimations = /* @__PURE__ */ new Map();
stateWatchers = /* @__PURE__ */ new Map();
/**
* 创建动画管理器实例
* @param element 目标DOM元素
* @param animations 动画配置
* @param context 上下文数据
*/
constructor(e, o, n) {
this.element = e, this.animations = o, this.context = n;
}
/**
* 初始化所有动画
*/
init() {
return this.setupEnterAnimation(), this.setupInteractionAnimations(), this.setupStateChangeAnimations(), this;
}
/**
* 销毁所有动画和事件监听
*/
destroy() {
this.setupLeaveAnimation(), this.cleanupInteractionAnimations(), this.cleanupStateAnimations();
}
/**
* 重置元素样式
* @param element 目标元素
* @param duration 过渡时间
*/
resetStyles(e, o = 0.3) {
return L.resetElementStyles(e, o);
}
/**
* 设置入场动画
*/
setupEnterAnimation() {
return this.animations?.enter ? (this.enterAnimation = L.runAnimation(
this.element,
this.animations.enter,
this.context
), this.enterAnimation) : null;
}
/**
* 设置离场动画
*/
setupLeaveAnimation() {
return this.animations?.leave ? (this.leaveAnimation = L.runAnimation(
this.element,
this.animations.leave,
this.context
), this.leaveAnimation) : null;
}
/**
* 设置交互动画事件监听
*/
setupInteractionAnimations() {
if (!this.animations?.interaction) return;
const e = this.animations.interaction;
if (this.element) {
if (e.hover) {
const o = () => {
const s = { ...e.hover };
if (s.effects) {
const i = L.createDirectAnimation(
this.element,
s.effects
);
this.interactionAnimations.set("hover", i);
} else {
const i = L.runAnimation(
this.element,
s,
this.context
);
i && this.interactionAnimations.set("hover", i);
}
}, n = () => {
const s = this.interactionAnimations.get("hover");
s ? typeof s.reverse == "function" ? s.reverse() : typeof s.kill == "function" && (s.kill(), L.resetElementStyles(this.element)) : L.resetElementStyles(this.element);
};
this.element.addEventListener("mouseenter", o, !0), this.element.addEventListener("mouseleave", n, !0), this.interactionAnimations.set("hoverListeners", {
mouseEnterHandler: o,
mouseLeaveHandler: n
});
}
if (e.click) {
const o = () => {
const n = { ...e.click };
if (n.effects) {
const s = Q.timeline();
s.add(L.createDirectAnimation(
this.element,
n.effects
));
const i = n.effects[0]?.duration || 0.3, a = L.resetElementStyles(this.element, i);
a && s.add(a, `+=${i + 0.2}`);
} else {
const s = L.runAnimation(
this.element,
n,
this.context
);
s && setTimeout(() => {
typeof s?.reverse == "function" ? s?.reverse() : L.resetElementStyles(this.element);
}, 800);
}
};
this.element.addEventListener("click", o, !0), this.interactionAnimations.set("clickListener", o);
}
(this.element.__vue__ || this.element._vnode) && this.element.querySelectorAll("*").forEach((n, s) => {
s < 5 && this.addInteractionToElement(n, e);
});
}
}
/**
* 为指定元素添加交互事件
*/
addInteractionToElement(e, o) {
if (o.hover) {
const n = () => {
if (o.hover.effects) {
const i = L.createDirectAnimation(
this.element,
o.hover.effects
);
this.interactionAnimations.set("hover-child", i);
} else {
const i = L.runAnimation(
this.element,
o.hover,
this.context
);
this.interactionAnimations.set("hover-child", i);
}
}, s = () => {
const i = this.interactionAnimations.get("hover-child");
i ? typeof i.reverse == "function" ? i.reverse() : typeof i.kill == "function" && (i.kill(), L.resetElementStyles(this.element)) : L.resetElementStyles(this.element);
};
e.addEventListener("mouseenter", n, !0), e.addEventListener("mouseleave", s, !0);
}
if (o.click) {
const n = () => {
if (o.click.effects) {
const s = Q.timeline();
s.add(L.createDirectAnimation(
this.element,
o.click.effects
));
const i = o.click.effects[0]?.duration || 0.3, a = L.resetElementStyles(this.element, i);
a && s.add(a, `+=${i + 0.2}`);
} else
L.runAnimation(
this.element,
o.click,
this.context
);
};
e.addEventListener("click", n, !0);
}
}
/**
* 清理交互动画事件监听
*/
cleanupInteractionAnimations() {
if (this.element) {
if (this.interactionAnimations.has("hoverListeners")) {
const { mouseEnterHandler: e, mouseLeaveHandler: o } = this.interactionAnimations.get("hoverListeners");
this.element.removeEventListener("mouseenter", e, !0), this.element.removeEventListener("mouseleave", o, !0);
}
this.interactionAnimations.has("clickListener") && this.element.removeEventListener("click", this.interactionAnimations.get("clickListener"), !0), this.interactionAnimations.clear();
}
}
/**
* 设置状态变化动画
*/
setupStateChangeAnimations() {
if (!this.animations?.stateChange || !this.context) return;
const e = this.animations.stateChange;
Object.keys(e).forEach((o) => {
const n = o.split(".");
let s = !1, i = this.context;
for (const a of n)
if (i && typeof i == "object") {
if (i.value !== void 0 && typeof i.value == "object")
i = i.value[a];
else if (a in i)
i = i[a];
else {
s = !1;
break;
}
s = !0;
} else {
s = !1;
break;
}
if (s) {
const p = J(
() => {
let r = this.context;
const u = n[0];
if (u in r && r[u] && typeof r[u].value < "u") {
r = r[u].value;
for (let d = 1; d < n.length; d++) {
const v = n[d];
if (r && typeof r == "object" && v in r)
r = r[v], r && typeof r.value < "u" && (r = r.value);
else
return;
}
} else
for (const d of n)
if (r && typeof r == "object" && d in r)
r = r[d], r && typeof r.value < "u" && (r = r.value);
else
return;
return r;
},
(r, u) => {
const d = e[o];
if (d.trigger?.condition) {
const v = d.trigger?.condition;
let m = !1;
if (v.expression)
try {
const l = {
newValue: r,
oldValue: u,
context: this.context
};
m = new Function(
"newValue",
"oldValue",
"context",
`return ${v.expression};`
)(r, u, this.context);
} catch (l) {
console.error("Error evaluating animation condition:", l);
}
else if (v.operator && v.value !== void 0)
switch (v.operator) {
case "==":
m = r == v.value;
break;
case "===":
m = r === v.value;
break;
case "!=":
m = r != v.value;
break;
case "!==":
m = r !== v.value;
break;
case ">":
m = r > v.value;
break;
case ">=":
m = r >= v.value;
break;
case "<":
m = r < v.value;
break;
case "<=":
m = r <= v.value;
break;
case "includes":
m = Array.isArray(v.value) ? v.value.includes(r) : String(r).includes(String(v.value));
break;
case "startsWith":
m = String(r).startsWith(String(v.value));
break;
case "endsWith":
m = String(r).endsWith(String(v.value));
break;
default:
m = r === v.value;
}
else
m = r === !0 || r === 1 || r === "active";
if (m)
L.runAnimation(
this.element,
d,
this.context
);
else {
const l = this.getOppositeStateName(o);
l && e[l] && L.runAnimation(
this.element,
e[l],
this.context
);
}
} else if (r === !0 || r === 1 || r === "active")
L.runAnimation(
this.element,
d,
this.context
);
else if (u === !0 || u === 1 || u === "active") {
const v = this.getOppositeStateName(o);
v && e[v] && L.runAnimation(
this.element,
e[v],
this.context
);
}
},
{ immediate: !1 }
);
this.stateWatchers.set(o, p);
}
});
}
/**
* 获取状态的反向状态名称
* @param stateName 状态名称
* @returns 反向状态名称
*/
getOppositeStateName(e) {
const o = {
active: "inactive",
selected: "unselected",
expanded: "collapsed",
enabled: "disabled",
focused: "blurred",
loading: "loaded",
visible: "hidden",
open: "closed"
// 可以根据需要添加更多的状态对应关系
};
if (e in o)
return o[e];
for (const [n, s] of Object.entries(o))
if (s === e)
return n;
return null;
}
/**
* 清理状态监听
*/
cleanupStateAnimations() {
this.stateWatchers.forEach((e) => {
typeof e == "function" && e();
}), this.stateWatchers.clear();
}
/**
* 手动触发动画
* @param animationType 动画类型
* @param animationName 动画名称
*/
triggerAnimation(e, o) {
return e === "stateChange" && this.animations?.stateChange?.[o] ? L.runAnimation(
this.element,
this.animations.stateChange[o],
this.context
) : e === "interaction" && this.animations?.interaction?.[o] ? L.runAnimation(
this.element,
this.animations.interaction[o],