@tmagic/editor 1.3.13 → 1.3.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/style.css +8 -45
- package/dist/tmagic-editor.js +268 -338
- package/dist/tmagic-editor.umd.cjs +271 -341
- package/package.json +11 -11
- package/src/components/ToolButton.vue +6 -1
- package/src/fields/CodeSelect.vue +34 -6
- package/src/fields/CodeSelectCol.vue +2 -1
- package/src/hooks/use-float-box.ts +33 -116
- package/src/layouts/page-bar/PageBar.vue +4 -3
- package/src/layouts/sidebar/Sidebar.vue +25 -42
- package/src/layouts/sidebar/layer/LayerPanel.vue +2 -2
- package/src/layouts/sidebar/layer/use-click.ts +1 -1
- package/src/layouts/sidebar/layer/use-node-status.ts +8 -5
- package/src/theme/sidebar.scss +11 -0
- package/src/theme/theme.scss +0 -1
- package/types/hooks/use-float-box.d.ts +9 -9
- package/types/layouts/sidebar/layer/use-click.d.ts +1 -1
- package/src/theme/floatbox.scss +0 -48
package/dist/tmagic-editor.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, createStaticVNode, watchEffect, withModifiers, renderSlot,
|
|
1
|
+
import { defineComponent, ref, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, createBlock, Teleport, createElementVNode, normalizeClass, normalizeStyle, createVNode, unref, computed, reactive, resolveComponent, inject, withCtx, Fragment, resolveDynamicComponent, createTextVNode, createCommentVNode, toRaw, nextTick, mergeProps, toDisplayString, renderList, createStaticVNode, watchEffect, withModifiers, renderSlot, toHandlers, resolveDirective, withDirectives, createSlots, markRaw, getCurrentInstance, vShow, provide, Transition, mergeDefaults } from 'vue';
|
|
2
2
|
import { FullScreen, Edit, View, Coin, Delete, Plus, Close, ArrowDown, ArrowLeftBold, ArrowRightBold, CaretBottom, DocumentCopy, Grid, Memo, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Search, ArrowRight, CopyDocument, Files, Hide, Goods, List, EditPen, CloseBold, Top, Bottom } from '@element-plus/icons-vue';
|
|
3
3
|
import { throttle, isEmpty, cloneDeep, mergeWith, isObject, uniq, get, map, has, pick, keys } from 'lodash-es';
|
|
4
4
|
import serialize from 'serialize-javascript';
|
|
5
5
|
import { TMagicButton, TMagicCard, tMagicMessage, TMagicDialog, TMagicTag, tMagicMessageBox, TMagicIcon, getConfig as getConfig$1, TMagicSwitch, TMagicInput, TMagicTooltip, TMagicDivider, TMagicDropdown, TMagicDropdownMenu, TMagicDropdownItem, TMagicPopover, TMagicScrollbar, TMagicCollapse, TMagicCollapseItem } from '@tmagic/design';
|
|
6
6
|
import { emmetHTML, emmetCSS } from 'emmet-monaco-es';
|
|
7
7
|
import * as monaco from 'monaco-editor';
|
|
8
|
-
import { HookType, NodeType, ActionType } from '@tmagic/schema';
|
|
8
|
+
import { HookCodeType, HookType, NodeType, ActionType } from '@tmagic/schema';
|
|
9
9
|
import { MFormBox, MFormDrawer, MForm, createValues, MSelect } from '@tmagic/form';
|
|
10
10
|
import { MagicTable } from '@tmagic/table';
|
|
11
11
|
import { guid, isPage, isPageFragment, isPop, getNodePath, isNumber, toLine, getValueByKeyPath, setValueByKeyPath, getDefaultValueFromFields, DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, getKeys, addClassName, removeClassName, removeClassNameByClassName, convertToNumber, getNodes } from '@tmagic/utils';
|
|
12
12
|
import Gesto from 'gesto';
|
|
13
|
-
import
|
|
13
|
+
import VanillaMoveable from 'moveable';
|
|
14
14
|
import { Watcher, DepTargetType, createRelatedCompTarget, createCodeBlockTarget, createDataSourceTarget, createDataSourceMethodTarget, createDataSourceCondTarget } from '@tmagic/dep';
|
|
15
15
|
export { DepTargetType } from '@tmagic/dep';
|
|
16
16
|
import StageCore, { GuidesType, getOffset, calcValueByFontsize, RenderType, CONTAINER_HIGHLIGHT_CLASS_NAME, ContainerHighlightType } from '@tmagic/stage';
|
|
@@ -362,13 +362,38 @@ const _sfc_main$R = /* @__PURE__ */ defineComponent({
|
|
|
362
362
|
name: "hookData",
|
|
363
363
|
enableToggleMode: false,
|
|
364
364
|
expandAll: true,
|
|
365
|
-
|
|
365
|
+
title: (mForm, { model, index }) => {
|
|
366
|
+
if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
|
|
367
|
+
if (Array.isArray(model.codeId)) {
|
|
368
|
+
const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
|
|
369
|
+
return `${ds?.title} / ${model.codeId[1]}`;
|
|
370
|
+
}
|
|
371
|
+
return Array.isArray(model.codeId) ? model.codeId.join("/") : index;
|
|
372
|
+
}
|
|
373
|
+
return model.codeId || index;
|
|
374
|
+
},
|
|
366
375
|
items: [
|
|
367
376
|
{
|
|
368
|
-
type: "
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
377
|
+
type: "row",
|
|
378
|
+
items: [
|
|
379
|
+
{
|
|
380
|
+
type: "select",
|
|
381
|
+
name: "codeType",
|
|
382
|
+
span: 8,
|
|
383
|
+
options: [
|
|
384
|
+
{ value: HookCodeType.CODE, text: "代码块" },
|
|
385
|
+
{ value: HookCodeType.DATA_SOURCE_METHOD, text: "数据源方法" }
|
|
386
|
+
],
|
|
387
|
+
defaultValue: "code"
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
type: (mForm, { model }) => model.codeType === HookCodeType.DATA_SOURCE_METHOD ? "data-source-method-select" : "code-select-col",
|
|
391
|
+
name: "codeId",
|
|
392
|
+
span: 16,
|
|
393
|
+
labelWidth: 0,
|
|
394
|
+
disabled: () => !services?.codeBlockService.getEditStatus()
|
|
395
|
+
}
|
|
396
|
+
]
|
|
372
397
|
}
|
|
373
398
|
]
|
|
374
399
|
}));
|
|
@@ -3459,8 +3484,8 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
|
|
|
3459
3484
|
}, null, 8, ["icon"])) : createCommentVNode("", true)
|
|
3460
3485
|
]),
|
|
3461
3486
|
paramsConfig.value.length ? (openBlock(), createBlock(_sfc_main$P, {
|
|
3462
|
-
key: 0,
|
|
3463
3487
|
name: "params",
|
|
3488
|
+
key: _ctx.model[_ctx.name],
|
|
3464
3489
|
model: _ctx.model,
|
|
3465
3490
|
size: _ctx.size,
|
|
3466
3491
|
"params-config": paramsConfig.value,
|
|
@@ -5676,7 +5701,7 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
|
|
|
5676
5701
|
])
|
|
5677
5702
|
]),
|
|
5678
5703
|
_: 1
|
|
5679
|
-
}, 8, ["disabled"])) : _ctx.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.data.component),
|
|
5704
|
+
}, 8, ["disabled"])) : _ctx.data.type === "component" ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.data.component), mergeProps({ key: 4 }, _ctx.data.props || {}, toHandlers(_ctx.data.listeners || {})), null, 16)) : createCommentVNode("", true)
|
|
5680
5705
|
], 34)) : createCommentVNode("", true);
|
|
5681
5706
|
};
|
|
5682
5707
|
}
|
|
@@ -5952,7 +5977,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
|
|
|
5952
5977
|
);
|
|
5953
5978
|
watch(active, (active2) => {
|
|
5954
5979
|
if (active2 === NodeType.PAGE) {
|
|
5955
|
-
if (!activePage.value) {
|
|
5980
|
+
if (!activePage.value && !pageList.value.length) {
|
|
5956
5981
|
editorService?.selectRoot();
|
|
5957
5982
|
return;
|
|
5958
5983
|
}
|
|
@@ -5960,11 +5985,11 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
|
|
|
5960
5985
|
return;
|
|
5961
5986
|
}
|
|
5962
5987
|
if (active2 === NodeType.PAGE_FRAGMENT) {
|
|
5963
|
-
if (!activePageFragment.value) {
|
|
5988
|
+
if (!activePageFragment.value && !pageFragmentList.value.length) {
|
|
5964
5989
|
editorService?.selectRoot();
|
|
5965
5990
|
return;
|
|
5966
5991
|
}
|
|
5967
|
-
switchPage(activePageFragment.value);
|
|
5992
|
+
switchPage(activePageFragment.value || pageFragmentList.value[0].id);
|
|
5968
5993
|
}
|
|
5969
5994
|
});
|
|
5970
5995
|
const switchPage = (id) => {
|
|
@@ -6511,108 +6536,141 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
|
|
|
6511
6536
|
}
|
|
6512
6537
|
});
|
|
6513
6538
|
|
|
6539
|
+
const _hoisted_1$a = { class: "m-editor-float-box-body" };
|
|
6540
|
+
const _sfc_main$p = /* @__PURE__ */ defineComponent({
|
|
6541
|
+
__name: "FloatingBox",
|
|
6542
|
+
props: {
|
|
6543
|
+
visible: { type: Boolean, default: false },
|
|
6544
|
+
position: { default: () => ({ left: 0, top: 0 }) },
|
|
6545
|
+
rect: { default: () => ({ width: "auto", height: "auto" }) },
|
|
6546
|
+
title: { default: "" }
|
|
6547
|
+
},
|
|
6548
|
+
emits: ["update:visible"],
|
|
6549
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
6550
|
+
const props = __props;
|
|
6551
|
+
const emit = __emit;
|
|
6552
|
+
const target = ref();
|
|
6553
|
+
const dragTarget = ref();
|
|
6554
|
+
const style = computed(() => ({
|
|
6555
|
+
left: `${props.position.left}px`,
|
|
6556
|
+
top: `${props.position.top}px`,
|
|
6557
|
+
width: typeof props.rect.width === "string" ? props.rect.width : `${props.rect.width}px`,
|
|
6558
|
+
height: typeof props.rect.height === "string" ? props.rect.height : `${props.rect.height}px`
|
|
6559
|
+
}));
|
|
6560
|
+
let moveable = null;
|
|
6561
|
+
const initMoveable = () => {
|
|
6562
|
+
moveable = new VanillaMoveable(globalThis.document.body, {
|
|
6563
|
+
className: "m-editor-floating-box-moveable",
|
|
6564
|
+
target: target.value,
|
|
6565
|
+
draggable: true,
|
|
6566
|
+
resizable: true,
|
|
6567
|
+
edge: true,
|
|
6568
|
+
keepRatio: false,
|
|
6569
|
+
origin: false,
|
|
6570
|
+
snappable: true,
|
|
6571
|
+
dragTarget: dragTarget.value,
|
|
6572
|
+
dragTargetSelf: false,
|
|
6573
|
+
linePadding: 10,
|
|
6574
|
+
controlPadding: 10
|
|
6575
|
+
});
|
|
6576
|
+
moveable.on("drag", (e) => {
|
|
6577
|
+
e.target.style.transform = e.transform;
|
|
6578
|
+
});
|
|
6579
|
+
moveable.on("resize", (e) => {
|
|
6580
|
+
e.target.style.width = `${e.width}px`;
|
|
6581
|
+
e.target.style.height = `${e.height}px`;
|
|
6582
|
+
e.target.style.transform = e.drag.transform;
|
|
6583
|
+
});
|
|
6584
|
+
};
|
|
6585
|
+
const destroyMoveable = () => {
|
|
6586
|
+
moveable?.destroy();
|
|
6587
|
+
moveable = null;
|
|
6588
|
+
};
|
|
6589
|
+
watch(
|
|
6590
|
+
() => props.visible,
|
|
6591
|
+
async (visible) => {
|
|
6592
|
+
if (visible) {
|
|
6593
|
+
await nextTick();
|
|
6594
|
+
initMoveable();
|
|
6595
|
+
} else {
|
|
6596
|
+
destroyMoveable();
|
|
6597
|
+
}
|
|
6598
|
+
},
|
|
6599
|
+
{
|
|
6600
|
+
immediate: true
|
|
6601
|
+
}
|
|
6602
|
+
);
|
|
6603
|
+
onBeforeUnmount(() => {
|
|
6604
|
+
destroyMoveable();
|
|
6605
|
+
});
|
|
6606
|
+
const closeHandler = () => {
|
|
6607
|
+
emit("update:visible", false);
|
|
6608
|
+
};
|
|
6609
|
+
__expose({
|
|
6610
|
+
target
|
|
6611
|
+
});
|
|
6612
|
+
return (_ctx, _cache) => {
|
|
6613
|
+
return _ctx.visible ? (openBlock(), createBlock(Teleport, {
|
|
6614
|
+
key: 0,
|
|
6615
|
+
to: "body"
|
|
6616
|
+
}, [
|
|
6617
|
+
createElementVNode("div", {
|
|
6618
|
+
ref_key: "target",
|
|
6619
|
+
ref: target,
|
|
6620
|
+
class: "m-editor-float-box",
|
|
6621
|
+
style: normalizeStyle(style.value)
|
|
6622
|
+
}, [
|
|
6623
|
+
createElementVNode("div", {
|
|
6624
|
+
ref_key: "dragTarget",
|
|
6625
|
+
ref: dragTarget,
|
|
6626
|
+
class: "m-editor-float-box-title"
|
|
6627
|
+
}, [
|
|
6628
|
+
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
6629
|
+
createElementVNode("span", null, toDisplayString(_ctx.title), 1)
|
|
6630
|
+
]),
|
|
6631
|
+
createElementVNode("div", null, [
|
|
6632
|
+
createVNode(unref(TMagicButton), {
|
|
6633
|
+
link: "",
|
|
6634
|
+
size: "small",
|
|
6635
|
+
icon: unref(Close),
|
|
6636
|
+
onClick: closeHandler
|
|
6637
|
+
}, null, 8, ["icon"])
|
|
6638
|
+
])
|
|
6639
|
+
], 512),
|
|
6640
|
+
createElementVNode("div", _hoisted_1$a, [
|
|
6641
|
+
renderSlot(_ctx.$slots, "body")
|
|
6642
|
+
])
|
|
6643
|
+
], 4)
|
|
6644
|
+
])) : createCommentVNode("", true);
|
|
6645
|
+
};
|
|
6646
|
+
}
|
|
6647
|
+
});
|
|
6648
|
+
|
|
6514
6649
|
const useFloatBox = (slideKeys) => {
|
|
6515
|
-
const
|
|
6516
|
-
|
|
6517
|
-
|
|
6518
|
-
|
|
6519
|
-
|
|
6520
|
-
|
|
6521
|
-
|
|
6650
|
+
const floatBoxStates = ref(
|
|
6651
|
+
slideKeys.value.reduce(
|
|
6652
|
+
(total, cur) => ({
|
|
6653
|
+
...total,
|
|
6654
|
+
[cur]: {
|
|
6655
|
+
status: false,
|
|
6656
|
+
top: 0,
|
|
6657
|
+
left: 0
|
|
6658
|
+
}
|
|
6659
|
+
}),
|
|
6660
|
+
{}
|
|
6661
|
+
)
|
|
6522
6662
|
);
|
|
6523
6663
|
const showingBoxKeys = computed(
|
|
6524
|
-
() =>
|
|
6664
|
+
() => Object.keys(floatBoxStates.value).filter((key) => floatBoxStates.value[key].status)
|
|
6525
6665
|
);
|
|
6526
6666
|
const isDraging = ref(false);
|
|
6527
|
-
const
|
|
6528
|
-
const curBoxStatus = floatBoxStates.value?.get(curKey.value)?.status;
|
|
6529
|
-
if (curKey.value === key && curBoxStatus)
|
|
6530
|
-
return;
|
|
6531
|
-
curKey.value = key;
|
|
6532
|
-
setSlideState(key, {
|
|
6533
|
-
zIndex: getMaxZIndex() + 1,
|
|
6534
|
-
status: true
|
|
6535
|
-
});
|
|
6536
|
-
await nextTick();
|
|
6537
|
-
if (moveable.value) {
|
|
6538
|
-
moveable.value.target = target.value;
|
|
6539
|
-
moveable.value.dragTarget = getDragTarget();
|
|
6540
|
-
moveable.value.updateRect();
|
|
6541
|
-
} else {
|
|
6542
|
-
initFloatBoxMoveable();
|
|
6543
|
-
}
|
|
6544
|
-
};
|
|
6545
|
-
const setSlideState = (key, data) => {
|
|
6546
|
-
const slideState = floatBoxStates.value?.get(key);
|
|
6547
|
-
if (!slideState)
|
|
6548
|
-
return;
|
|
6549
|
-
floatBoxStates.value?.set(key, {
|
|
6550
|
-
...slideState,
|
|
6551
|
-
...data
|
|
6552
|
-
});
|
|
6553
|
-
};
|
|
6554
|
-
const getDragTarget = (key) => `.m-editor-float-box-header-${key ?? curKey.value}`;
|
|
6555
|
-
const closeFloatBox = (key) => {
|
|
6556
|
-
setSlideState(key, {
|
|
6557
|
-
status: false
|
|
6558
|
-
});
|
|
6559
|
-
if (!floatBoxStates.value?.values)
|
|
6560
|
-
return;
|
|
6561
|
-
const keys = [...floatBoxStates.value?.keys()];
|
|
6562
|
-
const values = [...floatBoxStates.value?.values()];
|
|
6563
|
-
const lastFloatBoxLen = values.filter((state) => state.status).length;
|
|
6564
|
-
if (lastFloatBoxLen === 0) {
|
|
6565
|
-
moveable.value?.destroy();
|
|
6566
|
-
moveable.value = void 0;
|
|
6567
|
-
return;
|
|
6568
|
-
}
|
|
6569
|
-
if (key === curKey.value) {
|
|
6570
|
-
const zIndexList = values.filter((item) => item.status).map((item) => item.zIndex);
|
|
6571
|
-
const maxZIndex = Math.max(...zIndexList);
|
|
6572
|
-
const key2 = keys.find((key3) => floatBoxStates.value?.get(key3)?.zIndex === maxZIndex);
|
|
6573
|
-
if (!key2)
|
|
6574
|
-
return;
|
|
6575
|
-
showFloatBox(key2);
|
|
6576
|
-
}
|
|
6577
|
-
};
|
|
6578
|
-
const getMaxZIndex = () => {
|
|
6579
|
-
if (!floatBoxStates.value?.values())
|
|
6580
|
-
return 0;
|
|
6581
|
-
const list = [...floatBoxStates.value?.values()].map((state) => state.zIndex);
|
|
6582
|
-
return Math.max(...list) ?? 0;
|
|
6583
|
-
};
|
|
6584
|
-
const initFloatBoxMoveable = () => {
|
|
6585
|
-
const dragTarget = getDragTarget();
|
|
6586
|
-
moveable.value = new Moveable(document.body, {
|
|
6587
|
-
target: target.value,
|
|
6588
|
-
draggable: true,
|
|
6589
|
-
resizable: true,
|
|
6590
|
-
edge: true,
|
|
6591
|
-
keepRatio: false,
|
|
6592
|
-
origin: false,
|
|
6593
|
-
snappable: true,
|
|
6594
|
-
dragTarget,
|
|
6595
|
-
dragTargetSelf: false,
|
|
6596
|
-
linePadding: 10,
|
|
6597
|
-
controlPadding: 10,
|
|
6598
|
-
elementGuidelines: [...floatBoxStates.value?.keys() ?? []].map((key) => getDragTarget(key)),
|
|
6599
|
-
bounds: { left: 0, top: 0, right: 0, bottom: 0, position: "css" }
|
|
6600
|
-
});
|
|
6601
|
-
moveable.value.on("drag", (e) => {
|
|
6602
|
-
e.target.style.transform = e.transform;
|
|
6603
|
-
});
|
|
6604
|
-
moveable.value.on("resize", (e) => {
|
|
6605
|
-
e.target.style.width = `${e.width}px`;
|
|
6606
|
-
e.target.style.height = `${e.height}px`;
|
|
6607
|
-
e.target.style.transform = e.drag.transform;
|
|
6608
|
-
});
|
|
6609
|
-
};
|
|
6667
|
+
const dragstartHandler = () => isDraging.value = true;
|
|
6610
6668
|
const dragendHandler = (key, e) => {
|
|
6611
|
-
|
|
6669
|
+
floatBoxStates.value[key] = {
|
|
6612
6670
|
left: e.clientX,
|
|
6613
|
-
top: e.clientY
|
|
6614
|
-
|
|
6615
|
-
|
|
6671
|
+
top: e.clientY,
|
|
6672
|
+
status: true
|
|
6673
|
+
};
|
|
6616
6674
|
isDraging.value = false;
|
|
6617
6675
|
};
|
|
6618
6676
|
document.body.addEventListener("dragover", (e) => {
|
|
@@ -6620,11 +6678,18 @@ const useFloatBox = (slideKeys) => {
|
|
|
6620
6678
|
return;
|
|
6621
6679
|
e.preventDefault();
|
|
6622
6680
|
});
|
|
6623
|
-
const dragstartHandler = () => isDraging.value = true;
|
|
6624
6681
|
watch(
|
|
6625
6682
|
() => slideKeys.value,
|
|
6626
6683
|
() => {
|
|
6627
|
-
|
|
6684
|
+
for (const key in slideKeys.value) {
|
|
6685
|
+
if (floatBoxStates.value[key])
|
|
6686
|
+
continue;
|
|
6687
|
+
floatBoxStates.value[key] = {
|
|
6688
|
+
status: false,
|
|
6689
|
+
top: 0,
|
|
6690
|
+
left: 0
|
|
6691
|
+
};
|
|
6692
|
+
}
|
|
6628
6693
|
},
|
|
6629
6694
|
{
|
|
6630
6695
|
deep: true,
|
|
@@ -6632,17 +6697,14 @@ const useFloatBox = (slideKeys) => {
|
|
|
6632
6697
|
}
|
|
6633
6698
|
);
|
|
6634
6699
|
return {
|
|
6635
|
-
showFloatBox,
|
|
6636
|
-
closeFloatBox,
|
|
6637
6700
|
dragstartHandler,
|
|
6638
6701
|
dragendHandler,
|
|
6639
6702
|
floatBoxStates,
|
|
6640
|
-
floatBox,
|
|
6641
6703
|
showingBoxKeys
|
|
6642
6704
|
};
|
|
6643
6705
|
};
|
|
6644
6706
|
|
|
6645
|
-
const _sfc_main$
|
|
6707
|
+
const _sfc_main$o = /* @__PURE__ */ defineComponent({
|
|
6646
6708
|
...{
|
|
6647
6709
|
name: "MEditorSearchInput"
|
|
6648
6710
|
},
|
|
@@ -6693,14 +6755,14 @@ const updateStatus = (nodeStatusMap, id, status) => {
|
|
|
6693
6755
|
});
|
|
6694
6756
|
};
|
|
6695
6757
|
|
|
6696
|
-
const _hoisted_1$
|
|
6758
|
+
const _hoisted_1$9 = ["draggable", "data-node-id", "data-is-container"];
|
|
6697
6759
|
const _hoisted_2$6 = { class: "tree-node-label" };
|
|
6698
6760
|
const _hoisted_3$3 = { class: "tree-node-tool" };
|
|
6699
6761
|
const _hoisted_4$3 = {
|
|
6700
6762
|
key: 0,
|
|
6701
6763
|
class: "m-editor-tree-node-children"
|
|
6702
6764
|
};
|
|
6703
|
-
const _sfc_main$
|
|
6765
|
+
const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
6704
6766
|
...{
|
|
6705
6767
|
name: "MEditorTreeNode"
|
|
6706
6768
|
},
|
|
@@ -6810,18 +6872,18 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
|
|
|
6810
6872
|
}, 1032, ["data", "node-status-map", "indent"]);
|
|
6811
6873
|
}), 128))
|
|
6812
6874
|
])) : createCommentVNode("", true)
|
|
6813
|
-
], 40, _hoisted_1$
|
|
6875
|
+
], 40, _hoisted_1$9)), [
|
|
6814
6876
|
[vShow, visible.value]
|
|
6815
6877
|
]);
|
|
6816
6878
|
};
|
|
6817
6879
|
}
|
|
6818
6880
|
});
|
|
6819
6881
|
|
|
6820
|
-
const _hoisted_1$
|
|
6882
|
+
const _hoisted_1$8 = {
|
|
6821
6883
|
key: 1,
|
|
6822
6884
|
class: "m-editor-tree-empty"
|
|
6823
6885
|
};
|
|
6824
|
-
const _sfc_main$
|
|
6886
|
+
const _sfc_main$m = /* @__PURE__ */ defineComponent({
|
|
6825
6887
|
...{
|
|
6826
6888
|
name: "MEditorTree"
|
|
6827
6889
|
},
|
|
@@ -6845,7 +6907,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
|
6845
6907
|
onDragover: handleDragOver
|
|
6846
6908
|
}, [
|
|
6847
6909
|
_ctx.data?.length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(_ctx.data, (item) => {
|
|
6848
|
-
return openBlock(), createBlock(_sfc_main$
|
|
6910
|
+
return openBlock(), createBlock(_sfc_main$n, {
|
|
6849
6911
|
key: item.id,
|
|
6850
6912
|
data: item,
|
|
6851
6913
|
indent: _ctx.indent,
|
|
@@ -6862,7 +6924,7 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
|
|
|
6862
6924
|
]),
|
|
6863
6925
|
_: 2
|
|
6864
6926
|
}, 1032, ["data", "indent", "node-status-map"]);
|
|
6865
|
-
}), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$
|
|
6927
|
+
}), 128)) : (openBlock(), createElementBlock("div", _hoisted_1$8, [
|
|
6866
6928
|
createElementVNode("p", null, toDisplayString(_ctx.emptyText), 1)
|
|
6867
6929
|
]))
|
|
6868
6930
|
], 32);
|
|
@@ -6942,7 +7004,7 @@ const useNodeStatus$1 = (nodeData) => {
|
|
|
6942
7004
|
};
|
|
6943
7005
|
};
|
|
6944
7006
|
|
|
6945
|
-
const _sfc_main$
|
|
7007
|
+
const _sfc_main$l = /* @__PURE__ */ defineComponent({
|
|
6946
7008
|
...{
|
|
6947
7009
|
name: "MEditorCodeBlockList"
|
|
6948
7010
|
},
|
|
@@ -7024,7 +7086,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
|
|
|
7024
7086
|
filter: filterTextChangeHandler
|
|
7025
7087
|
});
|
|
7026
7088
|
return (_ctx, _cache) => {
|
|
7027
|
-
return openBlock(), createBlock(_sfc_main$
|
|
7089
|
+
return openBlock(), createBlock(_sfc_main$m, {
|
|
7028
7090
|
data: codeList.value,
|
|
7029
7091
|
"node-status-map": unref(nodeStatusMap),
|
|
7030
7092
|
onNodeClick: clickHandler
|
|
@@ -7080,8 +7142,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
|
|
|
7080
7142
|
}
|
|
7081
7143
|
});
|
|
7082
7144
|
|
|
7083
|
-
const _hoisted_1$
|
|
7084
|
-
const _sfc_main$
|
|
7145
|
+
const _hoisted_1$7 = { class: "search-wrapper" };
|
|
7146
|
+
const _sfc_main$k = /* @__PURE__ */ defineComponent({
|
|
7085
7147
|
...{
|
|
7086
7148
|
name: "MEditorCodeBlockListPanel"
|
|
7087
7149
|
},
|
|
@@ -7103,8 +7165,8 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
|
|
|
7103
7165
|
createVNode(unref(TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
|
|
7104
7166
|
default: withCtx(() => [
|
|
7105
7167
|
renderSlot(_ctx.$slots, "code-block-panel-header", {}, () => [
|
|
7106
|
-
createElementVNode("div", _hoisted_1$
|
|
7107
|
-
createVNode(_sfc_main$
|
|
7168
|
+
createElementVNode("div", _hoisted_1$7, [
|
|
7169
|
+
createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
|
|
7108
7170
|
editable.value ? (openBlock(), createBlock(unref(TMagicButton), {
|
|
7109
7171
|
key: 0,
|
|
7110
7172
|
class: "create-code-button",
|
|
@@ -7120,7 +7182,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
|
|
|
7120
7182
|
renderSlot(_ctx.$slots, "code-block-panel-search")
|
|
7121
7183
|
])
|
|
7122
7184
|
]),
|
|
7123
|
-
createVNode(_sfc_main$
|
|
7185
|
+
createVNode(_sfc_main$l, {
|
|
7124
7186
|
ref_key: "codeBlockList",
|
|
7125
7187
|
ref: codeBlockList,
|
|
7126
7188
|
"custom-error": _ctx.customError,
|
|
@@ -7152,7 +7214,7 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
|
|
|
7152
7214
|
}
|
|
7153
7215
|
});
|
|
7154
7216
|
|
|
7155
|
-
const _sfc_main$
|
|
7217
|
+
const _sfc_main$j = /* @__PURE__ */ defineComponent({
|
|
7156
7218
|
...{
|
|
7157
7219
|
name: "MEditorDataSourceConfigPanel"
|
|
7158
7220
|
},
|
|
@@ -7208,7 +7270,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
|
|
|
7208
7270
|
}
|
|
7209
7271
|
});
|
|
7210
7272
|
|
|
7211
|
-
const _sfc_main$
|
|
7273
|
+
const _sfc_main$i = /* @__PURE__ */ defineComponent({
|
|
7212
7274
|
...{
|
|
7213
7275
|
name: "MEditorDataSourceList"
|
|
7214
7276
|
},
|
|
@@ -7297,7 +7359,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
|
|
|
7297
7359
|
filter: filterTextChangeHandler
|
|
7298
7360
|
});
|
|
7299
7361
|
return (_ctx, _cache) => {
|
|
7300
|
-
return openBlock(), createBlock(_sfc_main$
|
|
7362
|
+
return openBlock(), createBlock(_sfc_main$m, {
|
|
7301
7363
|
data: list.value,
|
|
7302
7364
|
"node-status-map": unref(nodeStatusMap),
|
|
7303
7365
|
onNodeClick: clickHandler
|
|
@@ -7350,9 +7412,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
|
|
|
7350
7412
|
}
|
|
7351
7413
|
});
|
|
7352
7414
|
|
|
7353
|
-
const _hoisted_1$
|
|
7415
|
+
const _hoisted_1$6 = { class: "search-wrapper" };
|
|
7354
7416
|
const _hoisted_2$5 = { class: "data-source-list-panel-add-menu" };
|
|
7355
|
-
const _sfc_main$
|
|
7417
|
+
const _sfc_main$h = /* @__PURE__ */ defineComponent({
|
|
7356
7418
|
...{
|
|
7357
7419
|
name: "MEditorDataSourceListPanel"
|
|
7358
7420
|
},
|
|
@@ -7416,8 +7478,8 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
|
|
|
7416
7478
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
7417
7479
|
createVNode(unref(TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
|
|
7418
7480
|
default: withCtx(() => [
|
|
7419
|
-
createElementVNode("div", _hoisted_1$
|
|
7420
|
-
createVNode(_sfc_main$
|
|
7481
|
+
createElementVNode("div", _hoisted_1$6, [
|
|
7482
|
+
createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
|
|
7421
7483
|
editable.value ? (openBlock(), createBlock(unref(TMagicPopover), {
|
|
7422
7484
|
key: 0,
|
|
7423
7485
|
placement: "right"
|
|
@@ -7452,14 +7514,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
|
|
|
7452
7514
|
_: 1
|
|
7453
7515
|
})) : createCommentVNode("", true)
|
|
7454
7516
|
]),
|
|
7455
|
-
createVNode(_sfc_main$
|
|
7517
|
+
createVNode(_sfc_main$i, {
|
|
7456
7518
|
onEdit: editHandler,
|
|
7457
7519
|
onRemove: removeHandler
|
|
7458
7520
|
})
|
|
7459
7521
|
]),
|
|
7460
7522
|
_: 1
|
|
7461
7523
|
}),
|
|
7462
|
-
createVNode(_sfc_main$
|
|
7524
|
+
createVNode(_sfc_main$j, {
|
|
7463
7525
|
ref_key: "editDialog",
|
|
7464
7526
|
ref: editDialog,
|
|
7465
7527
|
disabled: !editable.value,
|
|
@@ -7473,7 +7535,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
|
|
|
7473
7535
|
}
|
|
7474
7536
|
});
|
|
7475
7537
|
|
|
7476
|
-
const _sfc_main$
|
|
7538
|
+
const _sfc_main$g = /* @__PURE__ */ defineComponent({
|
|
7477
7539
|
...{
|
|
7478
7540
|
name: "MEditorContentMenu"
|
|
7479
7541
|
},
|
|
@@ -7639,7 +7701,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
|
|
|
7639
7701
|
}
|
|
7640
7702
|
});
|
|
7641
7703
|
|
|
7642
|
-
const _hoisted_1$
|
|
7704
|
+
const _hoisted_1$5 = {
|
|
7643
7705
|
width: "1em",
|
|
7644
7706
|
height: "1em",
|
|
7645
7707
|
viewBox: "0 0 16 16",
|
|
@@ -7659,14 +7721,14 @@ const _hoisted_4$2 = [
|
|
|
7659
7721
|
_hoisted_2$4,
|
|
7660
7722
|
_hoisted_3$2
|
|
7661
7723
|
];
|
|
7662
|
-
const _sfc_main$
|
|
7724
|
+
const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
7663
7725
|
...{
|
|
7664
7726
|
name: "MEditorFolderMinusIcon"
|
|
7665
7727
|
},
|
|
7666
7728
|
__name: "FolderMinusIcon",
|
|
7667
7729
|
setup(__props) {
|
|
7668
7730
|
return (_ctx, _cache) => {
|
|
7669
|
-
return openBlock(), createElementBlock("svg", _hoisted_1$
|
|
7731
|
+
return openBlock(), createElementBlock("svg", _hoisted_1$5, _hoisted_4$2);
|
|
7670
7732
|
};
|
|
7671
7733
|
}
|
|
7672
7734
|
});
|
|
@@ -7744,7 +7806,7 @@ const useMoveToMenu = (services) => {
|
|
|
7744
7806
|
};
|
|
7745
7807
|
};
|
|
7746
7808
|
|
|
7747
|
-
const _sfc_main$
|
|
7809
|
+
const _sfc_main$e = /* @__PURE__ */ defineComponent({
|
|
7748
7810
|
...{
|
|
7749
7811
|
name: "MEditorLayerMenu"
|
|
7750
7812
|
},
|
|
@@ -7811,7 +7873,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
|
7811
7873
|
{
|
|
7812
7874
|
type: "button",
|
|
7813
7875
|
text: "全部折叠",
|
|
7814
|
-
icon: _sfc_main$
|
|
7876
|
+
icon: _sfc_main$f,
|
|
7815
7877
|
display: () => isPage(node.value) || isPageFragment(node.value),
|
|
7816
7878
|
handler: () => {
|
|
7817
7879
|
emit("collapse-all");
|
|
@@ -7840,7 +7902,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
|
7840
7902
|
show
|
|
7841
7903
|
});
|
|
7842
7904
|
return (_ctx, _cache) => {
|
|
7843
|
-
return openBlock(), createBlock(_sfc_main$
|
|
7905
|
+
return openBlock(), createBlock(_sfc_main$g, {
|
|
7844
7906
|
"menu-data": menuData.value,
|
|
7845
7907
|
ref_key: "menu",
|
|
7846
7908
|
ref: menu,
|
|
@@ -7850,7 +7912,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
|
|
|
7850
7912
|
}
|
|
7851
7913
|
});
|
|
7852
7914
|
|
|
7853
|
-
const _sfc_main$
|
|
7915
|
+
const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
7854
7916
|
__name: "LayerNodeTool",
|
|
7855
7917
|
props: {
|
|
7856
7918
|
data: {}
|
|
@@ -7947,7 +8009,7 @@ const useClick = (services, isCtrlKeyDown, nodeStatusMap) => {
|
|
|
7947
8009
|
return {
|
|
7948
8010
|
menu,
|
|
7949
8011
|
nodeClickHandler,
|
|
7950
|
-
|
|
8012
|
+
nodeContentMenuHandler(event, data) {
|
|
7951
8013
|
event.preventDefault();
|
|
7952
8014
|
const nodes = services?.editorService.get("nodes") || [];
|
|
7953
8015
|
if (nodes.length < 2 || !nodes.includes(data)) {
|
|
@@ -8273,12 +8335,12 @@ const useNodeStatus = (services) => {
|
|
|
8273
8335
|
() => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map()
|
|
8274
8336
|
);
|
|
8275
8337
|
watch(
|
|
8276
|
-
page,
|
|
8277
|
-
(
|
|
8278
|
-
if (!
|
|
8338
|
+
() => page.value?.id,
|
|
8339
|
+
(pageId) => {
|
|
8340
|
+
if (!pageId) {
|
|
8279
8341
|
return;
|
|
8280
8342
|
}
|
|
8281
|
-
nodeStatusMaps.value.set(
|
|
8343
|
+
nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value, nodeStatusMaps.value.get(pageId)));
|
|
8282
8344
|
},
|
|
8283
8345
|
{
|
|
8284
8346
|
immediate: true
|
|
@@ -8306,6 +8368,8 @@ const useNodeStatus = (services) => {
|
|
|
8306
8368
|
);
|
|
8307
8369
|
services?.editorService.on("add", (newNodes) => {
|
|
8308
8370
|
newNodes.forEach((node) => {
|
|
8371
|
+
if (isPage(node) || isPageFragment(node))
|
|
8372
|
+
return;
|
|
8309
8373
|
traverseNode(node, (node2) => {
|
|
8310
8374
|
nodeStatusMap.value?.set(node2.id, {
|
|
8311
8375
|
visible: true,
|
|
@@ -8329,7 +8393,7 @@ const useNodeStatus = (services) => {
|
|
|
8329
8393
|
};
|
|
8330
8394
|
};
|
|
8331
8395
|
|
|
8332
|
-
const _sfc_main$
|
|
8396
|
+
const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
8333
8397
|
...{
|
|
8334
8398
|
name: "MEditorLayerPanel"
|
|
8335
8399
|
},
|
|
@@ -8371,15 +8435,15 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
8371
8435
|
const {
|
|
8372
8436
|
menu,
|
|
8373
8437
|
nodeClickHandler,
|
|
8374
|
-
|
|
8438
|
+
nodeContentMenuHandler,
|
|
8375
8439
|
highlightHandler: mouseenterHandler
|
|
8376
8440
|
} = useClick(services, isCtrlKeyDown, nodeStatusMap);
|
|
8377
8441
|
return (_ctx, _cache) => {
|
|
8378
8442
|
return openBlock(), createBlock(unref(TMagicScrollbar), { class: "m-editor-layer-panel" }, {
|
|
8379
8443
|
default: withCtx(() => [
|
|
8380
8444
|
renderSlot(_ctx.$slots, "layer-panel-header"),
|
|
8381
|
-
createVNode(_sfc_main$
|
|
8382
|
-
page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$
|
|
8445
|
+
createVNode(_sfc_main$o, { onSearch: unref(filterTextChangeHandler) }, null, 8, ["onSearch"]),
|
|
8446
|
+
page.value && unref(nodeStatusMap) ? (openBlock(), createBlock(_sfc_main$m, {
|
|
8383
8447
|
key: 0,
|
|
8384
8448
|
tabindex: "-1",
|
|
8385
8449
|
ref_key: "tree",
|
|
@@ -8390,7 +8454,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
8390
8454
|
onNodeDragstart: unref(handleDragStart),
|
|
8391
8455
|
onNodeDragleave: unref(handleDragLeave),
|
|
8392
8456
|
onNodeDragend: unref(handleDragEnd),
|
|
8393
|
-
onNodeContextmenu: unref(
|
|
8457
|
+
onNodeContextmenu: unref(nodeContentMenuHandler),
|
|
8394
8458
|
onNodeMouseenter: unref(mouseenterHandler),
|
|
8395
8459
|
onNodeClick: unref(nodeClickHandler)
|
|
8396
8460
|
}, {
|
|
@@ -8399,7 +8463,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
8399
8463
|
]),
|
|
8400
8464
|
"tree-node-tool": withCtx(({ data: nodeData2 }) => [
|
|
8401
8465
|
renderSlot(_ctx.$slots, "layer-node-tool", { data: nodeData2 }, () => [
|
|
8402
|
-
createVNode(_sfc_main$
|
|
8466
|
+
createVNode(_sfc_main$d, { data: nodeData2 }, null, 8, ["data"])
|
|
8403
8467
|
])
|
|
8404
8468
|
]),
|
|
8405
8469
|
"tree-node-label": withCtx(({ data: nodeData2 }) => [
|
|
@@ -8408,7 +8472,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
8408
8472
|
_: 3
|
|
8409
8473
|
}, 8, ["data", "node-status-map", "onNodeDragover", "onNodeDragstart", "onNodeDragleave", "onNodeDragend", "onNodeContextmenu", "onNodeMouseenter", "onNodeClick"])) : createCommentVNode("", true),
|
|
8410
8474
|
(openBlock(), createBlock(Teleport, { to: "body" }, [
|
|
8411
|
-
createVNode(_sfc_main$
|
|
8475
|
+
createVNode(_sfc_main$e, {
|
|
8412
8476
|
ref_key: "menu",
|
|
8413
8477
|
ref: menu,
|
|
8414
8478
|
"layer-content-menu": _ctx.layerContentMenu,
|
|
@@ -8423,9 +8487,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
|
|
|
8423
8487
|
}
|
|
8424
8488
|
});
|
|
8425
8489
|
|
|
8426
|
-
const _hoisted_1$
|
|
8490
|
+
const _hoisted_1$4 = ["onClick", "onDragstart"];
|
|
8427
8491
|
const _hoisted_2$3 = ["title"];
|
|
8428
|
-
const _sfc_main$
|
|
8492
|
+
const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
8429
8493
|
...{
|
|
8430
8494
|
name: "MEditorComponentListPanel"
|
|
8431
8495
|
},
|
|
@@ -8505,7 +8569,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
|
8505
8569
|
"model-value": collapseValue.value
|
|
8506
8570
|
}, {
|
|
8507
8571
|
default: withCtx(() => [
|
|
8508
|
-
createVNode(_sfc_main$
|
|
8572
|
+
createVNode(_sfc_main$o, { onSearch: filterTextChangeHandler }),
|
|
8509
8573
|
(openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
|
|
8510
8574
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
8511
8575
|
group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
|
|
@@ -8544,7 +8608,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
|
8544
8608
|
title: item.text
|
|
8545
8609
|
}, toDisplayString(item.text), 9, _hoisted_2$3)
|
|
8546
8610
|
])
|
|
8547
|
-
], 40, _hoisted_1$
|
|
8611
|
+
], 40, _hoisted_1$4);
|
|
8548
8612
|
}), 128))
|
|
8549
8613
|
]),
|
|
8550
8614
|
_: 2
|
|
@@ -8561,7 +8625,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
|
|
|
8561
8625
|
}
|
|
8562
8626
|
});
|
|
8563
8627
|
|
|
8564
|
-
const _hoisted_1$
|
|
8628
|
+
const _hoisted_1$3 = {
|
|
8565
8629
|
key: 0,
|
|
8566
8630
|
class: "m-editor-sidebar"
|
|
8567
8631
|
};
|
|
@@ -8571,10 +8635,8 @@ const _hoisted_4$1 = {
|
|
|
8571
8635
|
key: 1,
|
|
8572
8636
|
class: "magic-editor-tab-panel-title"
|
|
8573
8637
|
};
|
|
8574
|
-
const _hoisted_5$1 = { class: "m-editor-
|
|
8575
|
-
const
|
|
8576
|
-
const _hoisted_7 = { class: "m-editor-float-box-body" };
|
|
8577
|
-
const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
8638
|
+
const _hoisted_5$1 = { class: "m-editor-slide-list-box" };
|
|
8639
|
+
const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
8578
8640
|
...{
|
|
8579
8641
|
name: "MEditorSidebar"
|
|
8580
8642
|
},
|
|
@@ -8595,7 +8657,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
8595
8657
|
type: "component",
|
|
8596
8658
|
icon: Goods,
|
|
8597
8659
|
text: "组件",
|
|
8598
|
-
component: _sfc_main$
|
|
8660
|
+
component: _sfc_main$b,
|
|
8599
8661
|
slots: {}
|
|
8600
8662
|
},
|
|
8601
8663
|
layer: {
|
|
@@ -8607,7 +8669,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
8607
8669
|
layerContentMenu: props.layerContentMenu,
|
|
8608
8670
|
customContentMenu: props.customContentMenu
|
|
8609
8671
|
},
|
|
8610
|
-
component: _sfc_main$
|
|
8672
|
+
component: _sfc_main$c,
|
|
8611
8673
|
slots: {}
|
|
8612
8674
|
},
|
|
8613
8675
|
"code-block": {
|
|
@@ -8615,26 +8677,16 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
8615
8677
|
type: "component",
|
|
8616
8678
|
icon: EditPen,
|
|
8617
8679
|
text: "代码编辑",
|
|
8618
|
-
component: _sfc_main$
|
|
8619
|
-
slots: {}
|
|
8620
|
-
boxComponentConfig: {
|
|
8621
|
-
props: {
|
|
8622
|
-
slideType: "box"
|
|
8623
|
-
}
|
|
8624
|
-
}
|
|
8680
|
+
component: _sfc_main$k,
|
|
8681
|
+
slots: {}
|
|
8625
8682
|
},
|
|
8626
8683
|
"data-source": {
|
|
8627
8684
|
$key: "data-source",
|
|
8628
8685
|
type: "component",
|
|
8629
8686
|
icon: Coin,
|
|
8630
8687
|
text: "数据源",
|
|
8631
|
-
component: _sfc_main$
|
|
8632
|
-
slots: {}
|
|
8633
|
-
boxComponentConfig: {
|
|
8634
|
-
props: {
|
|
8635
|
-
slideType: "box"
|
|
8636
|
-
}
|
|
8637
|
-
}
|
|
8688
|
+
component: _sfc_main$h,
|
|
8689
|
+
slots: {}
|
|
8638
8690
|
}
|
|
8639
8691
|
};
|
|
8640
8692
|
return typeof data === "string" ? map[data] : data;
|
|
@@ -8647,7 +8699,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
8647
8699
|
}
|
|
8648
8700
|
);
|
|
8649
8701
|
const slideKeys = computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
|
|
8650
|
-
const {
|
|
8702
|
+
const { dragstartHandler, dragendHandler, floatBoxStates, showingBoxKeys } = useFloatBox(slideKeys);
|
|
8651
8703
|
watch(
|
|
8652
8704
|
() => showingBoxKeys.value.length,
|
|
8653
8705
|
() => {
|
|
@@ -8671,7 +8723,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
8671
8723
|
});
|
|
8672
8724
|
return (_ctx, _cache) => {
|
|
8673
8725
|
return openBlock(), createElementBlock(Fragment, null, [
|
|
8674
|
-
_ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$
|
|
8726
|
+
_ctx.data.type === "tabs" && _ctx.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1$3, [
|
|
8675
8727
|
createElementVNode("div", _hoisted_2$2, [
|
|
8676
8728
|
(openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
|
|
8677
8729
|
return withDirectives((openBlock(), createElementBlock("div", {
|
|
@@ -8689,7 +8741,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
8689
8741
|
}, null, 8, ["icon"])) : createCommentVNode("", true),
|
|
8690
8742
|
config.text ? (openBlock(), createElementBlock("div", _hoisted_4$1, toDisplayString(config.text), 1)) : createCommentVNode("", true)
|
|
8691
8743
|
], 42, _hoisted_3$1)), [
|
|
8692
|
-
[vShow, !unref(floatBoxStates)
|
|
8744
|
+
[vShow, !unref(floatBoxStates)[config.$key]?.status]
|
|
8693
8745
|
]);
|
|
8694
8746
|
}), 128))
|
|
8695
8747
|
]),
|
|
@@ -8698,7 +8750,7 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
8698
8750
|
class: "m-editor-sidebar-content",
|
|
8699
8751
|
key: config.$key ?? index
|
|
8700
8752
|
}, [
|
|
8701
|
-
config && !unref(floatBoxStates)
|
|
8753
|
+
config && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({ key: 0 }, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
|
|
8702
8754
|
config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
|
|
8703
8755
|
name: "component-list-panel-header",
|
|
8704
8756
|
fn: withCtx(() => [
|
|
@@ -8800,39 +8852,27 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
|
|
|
8800
8852
|
}), 128))
|
|
8801
8853
|
])) : createCommentVNode("", true),
|
|
8802
8854
|
(openBlock(), createBlock(Teleport, { to: "body" }, [
|
|
8803
|
-
|
|
8804
|
-
|
|
8805
|
-
|
|
8855
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
|
|
8856
|
+
return openBlock(), createElementBlock(Fragment, null, [
|
|
8857
|
+
unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(_sfc_main$p, {
|
|
8806
8858
|
key: config.$key ?? index,
|
|
8807
|
-
|
|
8808
|
-
|
|
8809
|
-
|
|
8810
|
-
|
|
8811
|
-
|
|
8812
|
-
|
|
8813
|
-
|
|
8814
|
-
|
|
8815
|
-
|
|
8816
|
-
|
|
8817
|
-
|
|
8818
|
-
|
|
8819
|
-
|
|
8820
|
-
|
|
8821
|
-
|
|
8822
|
-
|
|
8823
|
-
|
|
8824
|
-
icon: unref(Close),
|
|
8825
|
-
onClick: withModifiers(($event) => unref(closeFloatBox)(config.$key), ["stop"])
|
|
8826
|
-
}, null, 8, ["icon", "onClick"])
|
|
8827
|
-
], 10, _hoisted_6),
|
|
8828
|
-
createElementVNode("div", _hoisted_7, [
|
|
8829
|
-
config && unref(floatBoxStates)?.get(config.$key)?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.boxComponentConfig?.component || config.component), mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
|
|
8830
|
-
])
|
|
8831
|
-
], 6)), [
|
|
8832
|
-
[vShow, unref(floatBoxStates)?.get(config.$key)?.status]
|
|
8833
|
-
]);
|
|
8834
|
-
}), 128))
|
|
8835
|
-
])
|
|
8859
|
+
visible: unref(floatBoxStates)[config.$key].status,
|
|
8860
|
+
"onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
|
|
8861
|
+
title: config.text,
|
|
8862
|
+
position: {
|
|
8863
|
+
left: unref(floatBoxStates)[config.$key].left,
|
|
8864
|
+
top: unref(floatBoxStates)[config.$key].top
|
|
8865
|
+
}
|
|
8866
|
+
}, {
|
|
8867
|
+
body: withCtx(() => [
|
|
8868
|
+
createElementVNode("div", _hoisted_5$1, [
|
|
8869
|
+
config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.boxComponentConfig?.component || config.component), mergeProps({ key: 0 }, config.boxComponentConfig?.props || config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("", true)
|
|
8870
|
+
])
|
|
8871
|
+
]),
|
|
8872
|
+
_: 2
|
|
8873
|
+
}, 1032, ["visible", "onUpdate:visible", "title", "position"])) : createCommentVNode("", true)
|
|
8874
|
+
], 64);
|
|
8875
|
+
}), 256))
|
|
8836
8876
|
]))
|
|
8837
8877
|
], 64);
|
|
8838
8878
|
};
|
|
@@ -8967,7 +9007,7 @@ class ScrollViewer extends EventEmitter {
|
|
|
8967
9007
|
};
|
|
8968
9008
|
}
|
|
8969
9009
|
|
|
8970
|
-
const _sfc_main$
|
|
9010
|
+
const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
8971
9011
|
...{
|
|
8972
9012
|
name: "MEditorScrollBar"
|
|
8973
9013
|
},
|
|
@@ -9055,7 +9095,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
|
|
|
9055
9095
|
}
|
|
9056
9096
|
});
|
|
9057
9097
|
|
|
9058
|
-
const _sfc_main$
|
|
9098
|
+
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
9059
9099
|
...{
|
|
9060
9100
|
name: "MEditorScrollViewer"
|
|
9061
9101
|
},
|
|
@@ -9142,14 +9182,14 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
|
|
|
9142
9182
|
renderSlot(_ctx.$slots, "default")
|
|
9143
9183
|
], 4),
|
|
9144
9184
|
renderSlot(_ctx.$slots, "content"),
|
|
9145
|
-
scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$
|
|
9185
|
+
scrollHeight.value > _ctx.wrapHeight ? (openBlock(), createBlock(_sfc_main$9, {
|
|
9146
9186
|
key: 0,
|
|
9147
9187
|
"scroll-size": scrollHeight.value,
|
|
9148
9188
|
pos: vOffset.value,
|
|
9149
9189
|
size: _ctx.wrapHeight,
|
|
9150
9190
|
onScroll: vScrollHandler
|
|
9151
9191
|
}, null, 8, ["scroll-size", "pos", "size"])) : createCommentVNode("", true),
|
|
9152
|
-
scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$
|
|
9192
|
+
scrollWidth.value > _ctx.wrapWidth ? (openBlock(), createBlock(_sfc_main$9, {
|
|
9153
9193
|
key: 1,
|
|
9154
9194
|
"is-horizontal": true,
|
|
9155
9195
|
"scroll-size": scrollWidth.value,
|
|
@@ -9365,116 +9405,6 @@ const useStage = (stageOptions) => {
|
|
|
9365
9405
|
return stage;
|
|
9366
9406
|
};
|
|
9367
9407
|
|
|
9368
|
-
const _hoisted_1$3 = { class: "m-editor-float-box-body" };
|
|
9369
|
-
const _sfc_main$8 = /* @__PURE__ */ defineComponent({
|
|
9370
|
-
__name: "FloatingBox",
|
|
9371
|
-
props: {
|
|
9372
|
-
visible: { type: Boolean, default: false },
|
|
9373
|
-
position: { default: () => ({ left: 0, top: 0 }) },
|
|
9374
|
-
rect: { default: () => ({ width: "auto", height: "auto" }) },
|
|
9375
|
-
title: { default: "" }
|
|
9376
|
-
},
|
|
9377
|
-
emits: ["update:visible"],
|
|
9378
|
-
setup(__props, { expose: __expose, emit: __emit }) {
|
|
9379
|
-
const props = __props;
|
|
9380
|
-
const emit = __emit;
|
|
9381
|
-
const target = ref();
|
|
9382
|
-
const dragTarget = ref();
|
|
9383
|
-
const style = computed(() => ({
|
|
9384
|
-
left: `${props.position.left}px`,
|
|
9385
|
-
top: `${props.position.top}px`,
|
|
9386
|
-
width: typeof props.rect.width === "string" ? props.rect.width : `${props.rect.width}px`,
|
|
9387
|
-
height: typeof props.rect.height === "string" ? props.rect.height : `${props.rect.height}px`
|
|
9388
|
-
}));
|
|
9389
|
-
let moveable = null;
|
|
9390
|
-
const initMoveable = () => {
|
|
9391
|
-
moveable = new Moveable(globalThis.document.body, {
|
|
9392
|
-
className: "m-editor-floating-box-moveable",
|
|
9393
|
-
target: target.value,
|
|
9394
|
-
draggable: true,
|
|
9395
|
-
resizable: true,
|
|
9396
|
-
edge: true,
|
|
9397
|
-
keepRatio: false,
|
|
9398
|
-
origin: false,
|
|
9399
|
-
snappable: true,
|
|
9400
|
-
dragTarget: dragTarget.value,
|
|
9401
|
-
dragTargetSelf: false,
|
|
9402
|
-
linePadding: 10,
|
|
9403
|
-
controlPadding: 10
|
|
9404
|
-
});
|
|
9405
|
-
moveable.on("drag", (e) => {
|
|
9406
|
-
e.target.style.transform = e.transform;
|
|
9407
|
-
});
|
|
9408
|
-
moveable.on("resize", (e) => {
|
|
9409
|
-
e.target.style.width = `${e.width}px`;
|
|
9410
|
-
e.target.style.height = `${e.height}px`;
|
|
9411
|
-
e.target.style.transform = e.drag.transform;
|
|
9412
|
-
});
|
|
9413
|
-
};
|
|
9414
|
-
const destroyMoveable = () => {
|
|
9415
|
-
moveable?.destroy();
|
|
9416
|
-
moveable = null;
|
|
9417
|
-
};
|
|
9418
|
-
watch(
|
|
9419
|
-
() => props.visible,
|
|
9420
|
-
async (visible) => {
|
|
9421
|
-
if (visible) {
|
|
9422
|
-
await nextTick();
|
|
9423
|
-
initMoveable();
|
|
9424
|
-
} else {
|
|
9425
|
-
destroyMoveable();
|
|
9426
|
-
}
|
|
9427
|
-
},
|
|
9428
|
-
{
|
|
9429
|
-
immediate: true
|
|
9430
|
-
}
|
|
9431
|
-
);
|
|
9432
|
-
onBeforeUnmount(() => {
|
|
9433
|
-
destroyMoveable();
|
|
9434
|
-
});
|
|
9435
|
-
const closeHandler = () => {
|
|
9436
|
-
emit("update:visible", false);
|
|
9437
|
-
};
|
|
9438
|
-
__expose({
|
|
9439
|
-
target
|
|
9440
|
-
});
|
|
9441
|
-
return (_ctx, _cache) => {
|
|
9442
|
-
return _ctx.visible ? (openBlock(), createBlock(Teleport, {
|
|
9443
|
-
key: 0,
|
|
9444
|
-
to: "body"
|
|
9445
|
-
}, [
|
|
9446
|
-
createElementVNode("div", {
|
|
9447
|
-
ref_key: "target",
|
|
9448
|
-
ref: target,
|
|
9449
|
-
class: "m-editor-float-box",
|
|
9450
|
-
style: normalizeStyle(style.value)
|
|
9451
|
-
}, [
|
|
9452
|
-
createElementVNode("div", {
|
|
9453
|
-
ref_key: "dragTarget",
|
|
9454
|
-
ref: dragTarget,
|
|
9455
|
-
class: "m-editor-float-box-title"
|
|
9456
|
-
}, [
|
|
9457
|
-
renderSlot(_ctx.$slots, "title", {}, () => [
|
|
9458
|
-
createElementVNode("span", null, toDisplayString(_ctx.title), 1)
|
|
9459
|
-
]),
|
|
9460
|
-
createElementVNode("div", null, [
|
|
9461
|
-
createVNode(unref(TMagicButton), {
|
|
9462
|
-
link: "",
|
|
9463
|
-
size: "small",
|
|
9464
|
-
icon: unref(Close),
|
|
9465
|
-
onClick: closeHandler
|
|
9466
|
-
}, null, 8, ["icon"])
|
|
9467
|
-
])
|
|
9468
|
-
], 512),
|
|
9469
|
-
createElementVNode("div", _hoisted_1$3, [
|
|
9470
|
-
renderSlot(_ctx.$slots, "body")
|
|
9471
|
-
])
|
|
9472
|
-
], 4)
|
|
9473
|
-
])) : createCommentVNode("", true);
|
|
9474
|
-
};
|
|
9475
|
-
}
|
|
9476
|
-
});
|
|
9477
|
-
|
|
9478
9408
|
const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
9479
9409
|
__name: "NodeListMenu",
|
|
9480
9410
|
setup(__props) {
|
|
@@ -9557,7 +9487,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
9557
9487
|
]),
|
|
9558
9488
|
_: 1
|
|
9559
9489
|
})) : createCommentVNode("", true),
|
|
9560
|
-
page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$
|
|
9490
|
+
page.value && unref(nodeStatusMap) && buttonVisible.value ? (openBlock(), createBlock(_sfc_main$p, {
|
|
9561
9491
|
key: 1,
|
|
9562
9492
|
ref_key: "box",
|
|
9563
9493
|
ref: box,
|
|
@@ -9567,7 +9497,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
|
|
|
9567
9497
|
position: menuPosition.value
|
|
9568
9498
|
}, {
|
|
9569
9499
|
body: withCtx(() => [
|
|
9570
|
-
createVNode(_sfc_main$
|
|
9500
|
+
createVNode(_sfc_main$m, {
|
|
9571
9501
|
class: "m-editor-node-list-menu magic-editor-layer-tree",
|
|
9572
9502
|
data: nodeData.value,
|
|
9573
9503
|
"node-status-map": unref(nodeStatusMap),
|
|
@@ -9816,7 +9746,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
|
|
|
9816
9746
|
};
|
|
9817
9747
|
__expose({ show });
|
|
9818
9748
|
return (_ctx, _cache) => {
|
|
9819
|
-
return openBlock(), createBlock(_sfc_main$
|
|
9749
|
+
return openBlock(), createBlock(_sfc_main$g, {
|
|
9820
9750
|
"menu-data": menuData.value,
|
|
9821
9751
|
ref_key: "menu",
|
|
9822
9752
|
ref: menu
|
|
@@ -9977,7 +9907,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
|
9977
9907
|
}
|
|
9978
9908
|
};
|
|
9979
9909
|
return (_ctx, _cache) => {
|
|
9980
|
-
return openBlock(), createBlock(_sfc_main$
|
|
9910
|
+
return openBlock(), createBlock(_sfc_main$8, {
|
|
9981
9911
|
class: "m-editor-stage",
|
|
9982
9912
|
ref_key: "stageWrap",
|
|
9983
9913
|
ref: stageWrap,
|
|
@@ -11163,7 +11093,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
11163
11093
|
]),
|
|
11164
11094
|
sidebar: withCtx(() => [
|
|
11165
11095
|
renderSlot(_ctx.$slots, "sidebar", { editorService: unref(editorService) }, () => [
|
|
11166
|
-
createVNode(_sfc_main$
|
|
11096
|
+
createVNode(_sfc_main$a, {
|
|
11167
11097
|
data: _ctx.sidebar,
|
|
11168
11098
|
"layer-content-menu": _ctx.layerContentMenu,
|
|
11169
11099
|
"custom-content-menu": _ctx.customContentMenu
|
|
@@ -11287,4 +11217,4 @@ const index = {
|
|
|
11287
11217
|
}
|
|
11288
11218
|
};
|
|
11289
11219
|
|
|
11290
|
-
export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$Q as CodeBlockEditor, _sfc_main$
|
|
11220
|
+
export { CODE_DRAFT_STORAGE_KEY, COPY_STORAGE_KEY, _sfc_main$Q as CodeBlockEditor, _sfc_main$l as CodeBlockList, _sfc_main$k as CodeBlockListPanel, CodeDeleteErrorType, _sfc_main$R as CodeSelect, _sfc_main$N as CodeSelectCol, ColumnLayout, _sfc_main$b as ComponentListPanel, _sfc_main$g as ContentMenu, _sfc_main$L as DataSourceFieldSelect, _sfc_main$M as DataSourceFields, _sfc_main$K as DataSourceInput, _sfc_main$I as DataSourceMethodSelect, _sfc_main$J as DataSourceMethods, _sfc_main$H as DataSourceMocks, _sfc_main$G as DataSourceSelect, DragType, _sfc_main$F as EventSelect, Fixed2Other, H_GUIDE_LINE_STORAGE_KEY, _sfc_main$O as Icon, KeyBindingCommand, _sfc_main$D as KeyValue, Keys, LayerOffset, _sfc_main$c as LayerPanel, Layout, _sfc_main$z as LayoutContainer, _sfc_main$C as PageFragmentSelect, _sfc_main$q as PropsPanel, _sfc_main$A as Resizer, _sfc_main$z as SplitView, _sfc_main$U as TMagicCodeEditor, _sfc_main as TMagicEditor, _sfc_main$y as ToolButton, UI_SELECT_MODE_EVENT_NAME, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, beforePaste, change2Fixed, codeBlockService, dataSourceService, debug, index as default, depService, displayTabConfig, editorService, error, eventTabConfig, eventsService, fillConfig, fixNodeLeft, fixNodePosition, generatePageName, generatePageNameByApp, getAddParent, getConfig, getDefaultConfig, getDisplayField, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getNodeIndex, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, historyService, info, isFixed, log, propsService, serializeConfig, setChildrenLayout, setConfig, setLayout, stageOverlayService, storageService, styleTabConfig, traverseNode, uiService, useCodeBlockEdit, useDataSourceMethod, useFloatBox, useStage, warn };
|