@tmagic/editor 1.7.7 → 1.7.8-beta.2
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/LICENSE +235 -164
- package/dist/es/Editor.js +5 -0
- package/dist/es/Editor.vue_vue_type_script_setup_true_lang.js +214 -0
- package/dist/es/_virtual/_plugin-vue_export-helper.js +8 -0
- package/dist/es/components/CodeBlockEditor.js +5 -0
- package/dist/es/components/CodeBlockEditor.vue_vue_type_script_setup_true_lang.js +337 -0
- package/dist/es/components/CodeParams.js +5 -0
- package/dist/es/components/CodeParams.vue_vue_type_script_setup_true_lang.js +63 -0
- package/dist/es/components/ContentMenu.js +5 -0
- package/dist/es/components/ContentMenu.vue_vue_type_script_setup_true_lang.js +160 -0
- package/dist/es/components/FloatingBox.js +5 -0
- package/dist/es/components/FloatingBox.vue_vue_type_script_setup_true_lang.js +161 -0
- package/dist/es/components/Icon.js +5 -0
- package/dist/es/components/Icon.vue_vue_type_script_setup_true_lang.js +39 -0
- package/dist/es/components/Resizer.js +5 -0
- package/dist/es/components/Resizer.vue_vue_type_script_setup_true_lang.js +20 -0
- package/dist/es/components/ScrollBar.js +6 -0
- package/dist/es/components/ScrollBar.vue_vue_type_script_setup_true_lang.js +72 -0
- package/dist/es/components/ScrollViewer.js +5 -0
- package/dist/es/components/ScrollViewer.vue_vue_type_script_setup_true_lang.js +104 -0
- package/dist/es/components/SearchInput.js +5 -0
- package/dist/es/components/SearchInput.vue_vue_type_script_setup_true_lang.js +40 -0
- package/dist/es/components/SplitView.js +5 -0
- package/dist/es/components/SplitView.vue_vue_type_script_setup_true_lang.js +135 -0
- package/dist/es/components/ToolButton.js +5 -0
- package/dist/es/components/ToolButton.vue_vue_type_script_setup_true_lang.js +131 -0
- package/dist/es/components/Tree.js +5 -0
- package/dist/es/components/Tree.vue_vue_type_script_setup_true_lang.js +60 -0
- package/dist/es/components/TreeNode.js +5 -0
- package/dist/es/components/TreeNode.vue_vue_type_script_setup_true_lang.js +126 -0
- package/dist/es/editorProps.js +34 -0
- package/dist/es/fields/Code.js +5 -0
- package/dist/es/fields/Code.vue_vue_type_script_setup_true_lang.js +54 -0
- package/dist/es/fields/CodeLink.js +5 -0
- package/dist/es/fields/CodeLink.vue_vue_type_script_setup_true_lang.js +69 -0
- package/dist/es/fields/CodeSelect.js +5 -0
- package/dist/es/fields/CodeSelect.vue_vue_type_script_setup_true_lang.js +116 -0
- package/dist/es/fields/CodeSelectCol.js +5 -0
- package/dist/es/fields/CodeSelectCol.vue_vue_type_script_setup_true_lang.js +145 -0
- package/dist/es/fields/CondOpSelect.js +5 -0
- package/dist/es/fields/CondOpSelect.vue_vue_type_script_setup_true_lang.js +81 -0
- package/dist/es/fields/DataSourceFieldSelect/FieldSelect.js +5 -0
- package/dist/es/fields/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js +158 -0
- package/dist/es/fields/DataSourceFieldSelect/Index.js +5 -0
- package/dist/es/fields/DataSourceFieldSelect/Index.vue_vue_type_script_setup_true_lang.js +155 -0
- package/dist/es/fields/DataSourceFields.js +5 -0
- package/dist/es/fields/DataSourceFields.vue_vue_type_script_setup_true_lang.js +390 -0
- package/dist/es/fields/DataSourceInput.js +5 -0
- package/dist/es/fields/DataSourceInput.vue_vue_type_script_setup_true_lang.js +268 -0
- package/dist/es/fields/DataSourceMethodSelect.js +5 -0
- package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js +144 -0
- package/dist/es/fields/DataSourceMethods.js +5 -0
- package/dist/es/fields/DataSourceMethods.vue_vue_type_script_setup_true_lang.js +148 -0
- package/dist/es/fields/DataSourceMocks.js +5 -0
- package/dist/es/fields/DataSourceMocks.vue_vue_type_script_setup_true_lang.js +259 -0
- package/dist/es/fields/DataSourceSelect.js +5 -0
- package/dist/es/fields/DataSourceSelect.vue_vue_type_script_setup_true_lang.js +101 -0
- package/dist/es/fields/DisplayConds.js +5 -0
- package/dist/es/fields/DisplayConds.vue_vue_type_script_setup_true_lang.js +156 -0
- package/dist/es/fields/EventSelect.js +5 -0
- package/dist/es/fields/EventSelect.vue_vue_type_script_setup_true_lang.js +338 -0
- package/dist/es/fields/KeyValue.js +5 -0
- package/dist/es/fields/KeyValue.vue_vue_type_script_setup_true_lang.js +158 -0
- package/dist/es/fields/PageFragmentSelect.js +5 -0
- package/dist/es/fields/PageFragmentSelect.vue_vue_type_script_setup_true_lang.js +81 -0
- package/dist/es/fields/StyleSetter/Index.js +5 -0
- package/dist/es/fields/StyleSetter/Index.vue_vue_type_script_setup_true_lang.js +92 -0
- package/dist/es/fields/StyleSetter/components/BackgroundPosition.js +5 -0
- package/dist/es/fields/StyleSetter/components/BackgroundPosition.vue_vue_type_script_setup_true_lang.js +96 -0
- package/dist/es/fields/StyleSetter/components/Border.js +5 -0
- package/dist/es/fields/StyleSetter/components/Border.vue_vue_type_script_setup_true_lang.js +100 -0
- package/dist/es/fields/StyleSetter/components/Box.js +5 -0
- package/dist/es/fields/StyleSetter/components/Box.vue_vue_type_script_setup_true_lang.js +81 -0
- package/dist/es/fields/StyleSetter/icons/background-repeat/NoRepeat.js +17 -0
- package/dist/es/fields/StyleSetter/icons/background-repeat/Repeat.js +14 -0
- package/dist/es/fields/StyleSetter/icons/background-repeat/RepeatX.js +17 -0
- package/dist/es/fields/StyleSetter/icons/background-repeat/RepeatY.js +17 -0
- package/dist/es/fields/StyleSetter/icons/display/Block.js +14 -0
- package/dist/es/fields/StyleSetter/icons/display/Flex.js +14 -0
- package/dist/es/fields/StyleSetter/icons/display/Inline.js +14 -0
- package/dist/es/fields/StyleSetter/icons/display/InlineBlock.js +14 -0
- package/dist/es/fields/StyleSetter/icons/display/None.js +14 -0
- package/dist/es/fields/StyleSetter/icons/flex-direction/Column.js +14 -0
- package/dist/es/fields/StyleSetter/icons/flex-direction/ColumnReverse.js +14 -0
- package/dist/es/fields/StyleSetter/icons/flex-direction/Row.js +14 -0
- package/dist/es/fields/StyleSetter/icons/flex-direction/RowReverse.js +14 -0
- package/dist/es/fields/StyleSetter/icons/justify-content/Center.js +14 -0
- package/dist/es/fields/StyleSetter/icons/justify-content/FlexEnd.js +14 -0
- package/dist/es/fields/StyleSetter/icons/justify-content/FlexStart.js +14 -0
- package/dist/es/fields/StyleSetter/icons/justify-content/SpaceAround.js +14 -0
- package/dist/es/fields/StyleSetter/icons/justify-content/SpaceBetween.js +14 -0
- package/dist/es/fields/StyleSetter/icons/text-align/Center.js +14 -0
- package/dist/es/fields/StyleSetter/icons/text-align/Left.js +14 -0
- package/dist/es/fields/StyleSetter/icons/text-align/Right.js +14 -0
- package/dist/es/fields/StyleSetter/pro/Background.js +5 -0
- package/dist/es/fields/StyleSetter/pro/Background.vue_vue_type_script_setup_true_lang.js +114 -0
- package/dist/es/fields/StyleSetter/pro/Border.js +5 -0
- package/dist/es/fields/StyleSetter/pro/Border.vue_vue_type_script_setup_true_lang.js +50 -0
- package/dist/es/fields/StyleSetter/pro/Font.js +5 -0
- package/dist/es/fields/StyleSetter/pro/Font.vue_vue_type_script_setup_true_lang.js +98 -0
- package/dist/es/fields/StyleSetter/pro/Layout.js +5 -0
- package/dist/es/fields/StyleSetter/pro/Layout.vue_vue_type_script_setup_true_lang.js +288 -0
- package/dist/es/fields/StyleSetter/pro/Position.js +5 -0
- package/dist/es/fields/StyleSetter/pro/Position.vue_vue_type_script_setup_true_lang.js +95 -0
- package/dist/es/fields/UISelect.js +6 -0
- package/dist/es/fields/UISelect.vue_vue_type_script_setup_true_lang.js +161 -0
- package/dist/es/hooks/use-code-block-edit.js +54 -0
- package/dist/es/hooks/use-data-source-edit.js +29 -0
- package/dist/es/hooks/use-editor-content-height.js +17 -0
- package/dist/es/hooks/use-filter.js +35 -0
- package/dist/es/hooks/use-float-box.js +76 -0
- package/dist/es/hooks/use-getso.js +28 -0
- package/dist/es/hooks/use-next-float-box-position.js +27 -0
- package/dist/es/hooks/use-node-status.js +28 -0
- package/dist/es/hooks/use-services.js +9 -0
- package/dist/es/hooks/use-stage.js +107 -0
- package/dist/es/hooks/use-window-rect.js +19 -0
- package/dist/es/icons/CenterIcon.js +5 -0
- package/dist/es/icons/CenterIcon.vue_vue_type_script_setup_true_lang.js +40 -0
- package/dist/es/icons/CodeIcon.js +5 -0
- package/dist/es/icons/CodeIcon.vue_vue_type_script_setup_true_lang.js +19 -0
- package/dist/es/icons/FolderMinusIcon.js +5 -0
- package/dist/es/icons/FolderMinusIcon.vue_vue_type_script_setup_true_lang.js +27 -0
- package/dist/es/index.js +79 -0
- package/dist/es/initService.js +392 -0
- package/dist/es/layouts/AddPageBox.js +5 -0
- package/dist/es/layouts/AddPageBox.vue_vue_type_script_setup_true_lang.js +38 -0
- package/dist/es/layouts/CodeEditor.js +5 -0
- package/dist/es/layouts/CodeEditor.vue_vue_type_script_setup_true_lang.js +270 -0
- package/dist/es/layouts/Framework.js +5 -0
- package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js +134 -0
- package/dist/es/layouts/NavMenu.js +5 -0
- package/dist/es/layouts/NavMenu.vue_vue_type_script_setup_true_lang.js +181 -0
- package/dist/es/layouts/page-bar/AddButton.js +5 -0
- package/dist/es/layouts/page-bar/AddButton.vue_vue_type_script_setup_true_lang.js +57 -0
- package/dist/es/layouts/page-bar/PageBar.js +5 -0
- package/dist/es/layouts/page-bar/PageBar.vue_vue_type_script_setup_true_lang.js +135 -0
- package/dist/es/layouts/page-bar/PageBarScrollContainer.js +5 -0
- package/dist/es/layouts/page-bar/PageBarScrollContainer.vue_vue_type_script_setup_true_lang.js +119 -0
- package/dist/es/layouts/page-bar/PageList.js +5 -0
- package/dist/es/layouts/page-bar/PageList.vue_vue_type_script_setup_true_lang.js +54 -0
- package/dist/es/layouts/page-bar/Search.js +5 -0
- package/dist/es/layouts/page-bar/Search.vue_vue_type_script_setup_true_lang.js +60 -0
- package/dist/es/layouts/props-panel/FormPanel.js +5 -0
- package/dist/es/layouts/props-panel/FormPanel.vue_vue_type_script_setup_true_lang.js +129 -0
- package/dist/es/layouts/props-panel/PropsPanel.js +5 -0
- package/dist/es/layouts/props-panel/PropsPanel.vue_vue_type_script_setup_true_lang.js +179 -0
- package/dist/es/layouts/props-panel/use-style-panel.js +40 -0
- package/dist/es/layouts/sidebar/ComponentListPanel.js +5 -0
- package/dist/es/layouts/sidebar/ComponentListPanel.vue_vue_type_script_setup_true_lang.js +121 -0
- package/dist/es/layouts/sidebar/Sidebar.js +5 -0
- package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js +314 -0
- package/dist/es/layouts/sidebar/code-block/CodeBlockList.js +5 -0
- package/dist/es/layouts/sidebar/code-block/CodeBlockList.vue_vue_type_script_setup_true_lang.js +161 -0
- package/dist/es/layouts/sidebar/code-block/CodeBlockListPanel.js +5 -0
- package/dist/es/layouts/sidebar/code-block/CodeBlockListPanel.vue_vue_type_script_setup_true_lang.js +113 -0
- package/dist/es/layouts/sidebar/code-block/useContentMenu.js +60 -0
- package/dist/es/layouts/sidebar/data-source/DataSourceAddButton.js +5 -0
- package/dist/es/layouts/sidebar/data-source/DataSourceAddButton.vue_vue_type_script_setup_true_lang.js +44 -0
- package/dist/es/layouts/sidebar/data-source/DataSourceConfigPanel.js +5 -0
- package/dist/es/layouts/sidebar/data-source/DataSourceConfigPanel.vue_vue_type_script_setup_true_lang.js +103 -0
- package/dist/es/layouts/sidebar/data-source/DataSourceList.js +5 -0
- package/dist/es/layouts/sidebar/data-source/DataSourceList.vue_vue_type_script_setup_true_lang.js +162 -0
- package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.js +5 -0
- package/dist/es/layouts/sidebar/data-source/DataSourceListPanel.vue_vue_type_script_setup_true_lang.js +133 -0
- package/dist/es/layouts/sidebar/data-source/useContentMenu.js +59 -0
- package/dist/es/layouts/sidebar/layer/LayerMenu.js +5 -0
- package/dist/es/layouts/sidebar/layer/LayerMenu.vue_vue_type_script_setup_true_lang.js +90 -0
- package/dist/es/layouts/sidebar/layer/LayerNodeTool.js +5 -0
- package/dist/es/layouts/sidebar/layer/LayerNodeTool.vue_vue_type_script_setup_true_lang.js +35 -0
- package/dist/es/layouts/sidebar/layer/LayerPanel.js +5 -0
- package/dist/es/layouts/sidebar/layer/LayerPanel.vue_vue_type_script_setup_true_lang.js +99 -0
- package/dist/es/layouts/sidebar/layer/use-click.js +68 -0
- package/dist/es/layouts/sidebar/layer/use-drag.js +118 -0
- package/dist/es/layouts/sidebar/layer/use-keybinding.js +36 -0
- package/dist/es/layouts/sidebar/layer/use-node-status.js +75 -0
- package/dist/es/layouts/workspace/Breadcrumb.js +5 -0
- package/dist/es/layouts/workspace/Breadcrumb.vue_vue_type_script_setup_true_lang.js +39 -0
- package/dist/es/layouts/workspace/Workspace.js +5 -0
- package/dist/es/layouts/workspace/Workspace.vue_vue_type_script_setup_true_lang.js +43 -0
- package/dist/es/layouts/workspace/viewer/NodeListMenu.js +5 -0
- package/dist/es/layouts/workspace/viewer/NodeListMenu.vue_vue_type_script_setup_true_lang.js +88 -0
- package/dist/es/layouts/workspace/viewer/Stage.js +5 -0
- package/dist/es/layouts/workspace/viewer/Stage.vue_vue_type_script_setup_true_lang.js +206 -0
- package/dist/es/layouts/workspace/viewer/StageOverlay.js +5 -0
- package/dist/es/layouts/workspace/viewer/StageOverlay.vue_vue_type_script_setup_true_lang.js +89 -0
- package/dist/es/layouts/workspace/viewer/ViewerMenu.js +5 -0
- package/dist/es/layouts/workspace/viewer/ViewerMenu.vue_vue_type_script_setup_true_lang.js +132 -0
- package/dist/es/plugin.js +61 -0
- package/dist/es/services/BaseService.js +148 -0
- package/dist/es/services/codeBlock.js +251 -0
- package/dist/es/services/componentList.js +29 -0
- package/dist/es/services/dataSource.js +157 -0
- package/dist/es/services/dep.js +173 -0
- package/dist/es/services/editor.js +752 -0
- package/dist/es/services/events.js +64 -0
- package/dist/es/services/history.js +84 -0
- package/dist/es/services/keybinding.js +182 -0
- package/dist/es/services/props.js +216 -0
- package/dist/es/services/stageOverlay.js +161 -0
- package/dist/es/services/storage.js +127 -0
- package/dist/es/services/ui.js +112 -0
- package/dist/es/style.css +1937 -0
- package/dist/es/type.js +90 -0
- package/dist/es/utils/compose.js +44 -0
- package/dist/es/utils/config.js +8 -0
- package/dist/es/utils/const.js +15 -0
- package/dist/es/utils/content-menu.js +76 -0
- package/dist/es/utils/data-source/formConfigs/base.js +28 -0
- package/dist/es/utils/data-source/formConfigs/http.js +74 -0
- package/dist/es/utils/data-source/index.js +202 -0
- package/dist/es/utils/dep/idle-task.js +76 -0
- package/dist/es/utils/dep/worker.js +19 -0
- package/dist/es/utils/editor.js +261 -0
- package/dist/es/utils/keybinding-config.js +106 -0
- package/dist/es/utils/logger.js +18 -0
- package/dist/es/utils/monaco-editor.js +13 -0
- package/dist/es/utils/operator.js +73 -0
- package/dist/es/utils/props.js +232 -0
- package/dist/es/utils/scroll-viewer.js +115 -0
- package/dist/es/utils/tree.js +11 -0
- package/dist/es/utils/undo-redo.js +43 -0
- package/dist/style.css +10 -10
- package/dist/tmagic-editor.umd.cjs +18430 -21979
- package/package.json +16 -12
- package/src/components/CodeBlockEditor.vue +2 -8
- package/src/fields/CodeLink.vue +2 -2
- package/src/fields/CodeSelectCol.vue +1 -1
- package/src/fields/DataSourceFieldSelect/Index.vue +16 -3
- package/src/fields/DataSourceFields.vue +4 -1
- package/src/fields/EventSelect.vue +11 -11
- package/src/fields/StyleSetter/components/BackgroundPosition.vue +2 -2
- package/src/fields/StyleSetter/pro/Layout.vue +8 -8
- package/src/index.ts +1 -73
- package/src/plugin.ts +92 -0
- package/src/services/props.ts +3 -1
- package/src/type.ts +1 -1
- package/src/utils/data-source/index.ts +71 -73
- package/src/utils/index.ts +1 -0
- package/src/utils/props.ts +9 -7
- package/types/index.d.ts +3369 -3319
- package/dist/tmagic-editor.js +0 -17053
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
import ToolButton_default from "./ToolButton.js";
|
|
2
|
+
import { useZIndex } from "@tmagic/design";
|
|
3
|
+
import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveComponent, useTemplateRef, vShow, withCtx, withDirectives, withModifiers } from "vue";
|
|
4
|
+
//#region packages/editor/src/components/ContentMenu.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
+
var ContentMenu_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
6
|
+
name: "MEditorContentMenu",
|
|
7
|
+
__name: "ContentMenu",
|
|
8
|
+
props: {
|
|
9
|
+
menuData: { default: () => [] },
|
|
10
|
+
isSubMenu: {
|
|
11
|
+
type: Boolean,
|
|
12
|
+
default: false
|
|
13
|
+
},
|
|
14
|
+
active: {},
|
|
15
|
+
autoHide: {
|
|
16
|
+
type: Boolean,
|
|
17
|
+
default: true
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
emits: [
|
|
21
|
+
"hide",
|
|
22
|
+
"show",
|
|
23
|
+
"mouseenter"
|
|
24
|
+
],
|
|
25
|
+
setup(__props, { expose: __expose, emit: __emit }) {
|
|
26
|
+
const props = __props;
|
|
27
|
+
const emit = __emit;
|
|
28
|
+
const menuEl = useTemplateRef("menu");
|
|
29
|
+
const buttonRefs = useTemplateRef("buttons");
|
|
30
|
+
const subMenuRef = useTemplateRef("subMenu");
|
|
31
|
+
const visible = ref(false);
|
|
32
|
+
const subMenuData = ref([]);
|
|
33
|
+
const zIndex = useZIndex();
|
|
34
|
+
const curZIndex = ref(0);
|
|
35
|
+
const menuPosition = ref({
|
|
36
|
+
left: 0,
|
|
37
|
+
top: 0
|
|
38
|
+
});
|
|
39
|
+
const menuStyle = computed(() => ({
|
|
40
|
+
top: `${menuPosition.value.top + 2}px`,
|
|
41
|
+
left: `${menuPosition.value.left + 2}px`,
|
|
42
|
+
zIndex: curZIndex.value
|
|
43
|
+
}));
|
|
44
|
+
const contains = (el) => menuEl.value?.contains(el) || subMenuRef.value?.contains(el);
|
|
45
|
+
const hide = () => {
|
|
46
|
+
if (!visible.value) return;
|
|
47
|
+
visible.value = false;
|
|
48
|
+
subMenuRef.value?.hide();
|
|
49
|
+
emit("hide");
|
|
50
|
+
};
|
|
51
|
+
const clickHandler = (event) => {
|
|
52
|
+
if (!props.autoHide) return;
|
|
53
|
+
if (event.button === 0) hide();
|
|
54
|
+
};
|
|
55
|
+
const outsideClickHideHandler = (e) => {
|
|
56
|
+
if (!props.autoHide) return;
|
|
57
|
+
const target = e.target;
|
|
58
|
+
if (!visible.value || !target) return;
|
|
59
|
+
if (contains(target)) return;
|
|
60
|
+
hide();
|
|
61
|
+
};
|
|
62
|
+
const setPosition = (e) => {
|
|
63
|
+
const menuHeight = menuEl.value?.clientHeight || 0;
|
|
64
|
+
let top = e.clientY;
|
|
65
|
+
if (menuHeight + e.clientY > document.body.clientHeight) top = document.body.clientHeight - menuHeight;
|
|
66
|
+
menuPosition.value = {
|
|
67
|
+
top,
|
|
68
|
+
left: e.clientX
|
|
69
|
+
};
|
|
70
|
+
};
|
|
71
|
+
const show = (e) => {
|
|
72
|
+
visible.value = true;
|
|
73
|
+
nextTick(() => {
|
|
74
|
+
e && setPosition(e);
|
|
75
|
+
curZIndex.value = zIndex.nextZIndex();
|
|
76
|
+
emit("show");
|
|
77
|
+
});
|
|
78
|
+
};
|
|
79
|
+
const showSubMenu = (item, index) => {
|
|
80
|
+
const menuItem = item;
|
|
81
|
+
if (typeof item !== "object") return;
|
|
82
|
+
subMenuData.value = menuItem.items || [];
|
|
83
|
+
setTimeout(() => {
|
|
84
|
+
if (!visible.value) return;
|
|
85
|
+
if (menuEl.value) {
|
|
86
|
+
let y = menuEl.value.offsetTop;
|
|
87
|
+
if (buttonRefs.value?.[index].$el) y = (buttonRefs.value?.[index].$el.getBoundingClientRect()).top;
|
|
88
|
+
subMenuRef.value?.show({
|
|
89
|
+
clientX: menuEl.value.offsetLeft + menuEl.value.clientWidth - 2,
|
|
90
|
+
clientY: y
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
}, 0);
|
|
94
|
+
};
|
|
95
|
+
const mouseenterHandler = () => {
|
|
96
|
+
emit("mouseenter");
|
|
97
|
+
};
|
|
98
|
+
onMounted(() => {
|
|
99
|
+
if (props.isSubMenu) return;
|
|
100
|
+
globalThis.addEventListener("mousedown", outsideClickHideHandler, true);
|
|
101
|
+
});
|
|
102
|
+
onBeforeUnmount(() => {
|
|
103
|
+
if (props.isSubMenu) return;
|
|
104
|
+
globalThis.removeEventListener("mousedown", outsideClickHideHandler, true);
|
|
105
|
+
});
|
|
106
|
+
__expose({
|
|
107
|
+
menu: menuEl,
|
|
108
|
+
menuPosition,
|
|
109
|
+
hide,
|
|
110
|
+
show,
|
|
111
|
+
contains,
|
|
112
|
+
setPosition
|
|
113
|
+
});
|
|
114
|
+
return (_ctx, _cache) => {
|
|
115
|
+
const _component_content_menu = resolveComponent("content-menu", true);
|
|
116
|
+
return openBlock(), createBlock(Transition, {
|
|
117
|
+
name: "fade",
|
|
118
|
+
persisted: ""
|
|
119
|
+
}, {
|
|
120
|
+
default: withCtx(() => [withDirectives(createElementVNode("div", {
|
|
121
|
+
class: "magic-editor-content-menu",
|
|
122
|
+
ref: "menu",
|
|
123
|
+
style: normalizeStyle(menuStyle.value),
|
|
124
|
+
onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler()),
|
|
125
|
+
onContextmenu: _cache[1] || (_cache[1] = withModifiers(() => {}, ["prevent"]))
|
|
126
|
+
}, [
|
|
127
|
+
renderSlot(_ctx.$slots, "title"),
|
|
128
|
+
createElementVNode("div", null, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuData, (item, index) => {
|
|
129
|
+
return openBlock(), createBlock(ToolButton_default, {
|
|
130
|
+
"event-type": "mouseup",
|
|
131
|
+
ref_for: true,
|
|
132
|
+
ref: "buttons",
|
|
133
|
+
class: normalizeClass({ active: __props.active && item.id === __props.active }),
|
|
134
|
+
data: item,
|
|
135
|
+
key: index,
|
|
136
|
+
onMouseup: clickHandler,
|
|
137
|
+
onMouseenter: ($event) => showSubMenu(item, index)
|
|
138
|
+
}, null, 8, [
|
|
139
|
+
"class",
|
|
140
|
+
"data",
|
|
141
|
+
"onMouseenter"
|
|
142
|
+
]);
|
|
143
|
+
}), 128))]),
|
|
144
|
+
(openBlock(), createBlock(Teleport, { to: "body" }, [subMenuData.value.length ? (openBlock(), createBlock(_component_content_menu, {
|
|
145
|
+
key: 0,
|
|
146
|
+
class: "sub-menu",
|
|
147
|
+
ref: "subMenu",
|
|
148
|
+
active: __props.active,
|
|
149
|
+
"menu-data": subMenuData.value,
|
|
150
|
+
"is-sub-menu": true,
|
|
151
|
+
onHide: hide
|
|
152
|
+
}, null, 8, ["active", "menu-data"])) : createCommentVNode("v-if", true)]))
|
|
153
|
+
], 36), [[vShow, visible.value]])]),
|
|
154
|
+
_: 3
|
|
155
|
+
});
|
|
156
|
+
};
|
|
157
|
+
}
|
|
158
|
+
});
|
|
159
|
+
//#endregion
|
|
160
|
+
export { ContentMenu_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import FloatingBox_vue_vue_type_script_setup_true_lang_default from "./FloatingBox.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region packages/editor/src/components/FloatingBox.vue
|
|
3
|
+
var FloatingBox_default = FloatingBox_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { FloatingBox_default as default };
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
import { useServices } from "../hooks/use-services.js";
|
|
2
|
+
import Icon_default from "./Icon.js";
|
|
3
|
+
import { TMagicButton, useZIndex } from "@tmagic/design";
|
|
4
|
+
import { Teleport, computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeStyle, onBeforeUnmount, openBlock, provide, ref, renderSlot, toDisplayString, unref, useModel, useTemplateRef, watch, withCtx } from "vue";
|
|
5
|
+
import { Close } from "@element-plus/icons-vue";
|
|
6
|
+
import VanillaMoveable from "moveable";
|
|
7
|
+
//#region packages/editor/src/components/FloatingBox.vue?vue&type=script&setup=true&lang.ts
|
|
8
|
+
var _hoisted_1 = {
|
|
9
|
+
ref: "title",
|
|
10
|
+
class: "m-editor-float-box-title"
|
|
11
|
+
};
|
|
12
|
+
var FloatingBox_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
13
|
+
__name: "FloatingBox",
|
|
14
|
+
props: /* @__PURE__ */ mergeModels({
|
|
15
|
+
position: { default: () => ({
|
|
16
|
+
left: 0,
|
|
17
|
+
top: 0
|
|
18
|
+
}) },
|
|
19
|
+
title: { default: "" },
|
|
20
|
+
beforeClose: {}
|
|
21
|
+
}, {
|
|
22
|
+
"width": { default: 0 },
|
|
23
|
+
"widthModifiers": {},
|
|
24
|
+
"height": { default: 0 },
|
|
25
|
+
"heightModifiers": {},
|
|
26
|
+
"visible": {
|
|
27
|
+
type: Boolean,
|
|
28
|
+
default: false
|
|
29
|
+
},
|
|
30
|
+
"visibleModifiers": {}
|
|
31
|
+
}),
|
|
32
|
+
emits: [
|
|
33
|
+
"update:width",
|
|
34
|
+
"update:height",
|
|
35
|
+
"update:visible"
|
|
36
|
+
],
|
|
37
|
+
setup(__props, { expose: __expose }) {
|
|
38
|
+
const width = useModel(__props, "width");
|
|
39
|
+
const height = useModel(__props, "height");
|
|
40
|
+
const visible = useModel(__props, "visible");
|
|
41
|
+
const props = __props;
|
|
42
|
+
const targetEl = useTemplateRef("target");
|
|
43
|
+
const titleEl = useTemplateRef("title");
|
|
44
|
+
const zIndex = useZIndex();
|
|
45
|
+
const curZIndex = ref(0);
|
|
46
|
+
const titleHeight = ref(0);
|
|
47
|
+
const bodyHeight = computed(() => {
|
|
48
|
+
if (height.value) return height.value - titleHeight.value;
|
|
49
|
+
if (targetEl.value) return targetEl.value.clientHeight - titleHeight.value;
|
|
50
|
+
return "auto";
|
|
51
|
+
});
|
|
52
|
+
const { uiService } = useServices();
|
|
53
|
+
const frameworkWidth = computed(() => uiService.get("frameworkRect").width || 0);
|
|
54
|
+
const style = computed(() => {
|
|
55
|
+
let { left } = props.position;
|
|
56
|
+
if (width.value) left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
|
|
57
|
+
return {
|
|
58
|
+
left: `${left}px`,
|
|
59
|
+
top: `${props.position.top}px`,
|
|
60
|
+
width: width.value ? `${width.value}px` : "auto",
|
|
61
|
+
height: height.value ? `${height.value}px` : "auto"
|
|
62
|
+
};
|
|
63
|
+
});
|
|
64
|
+
let moveable = null;
|
|
65
|
+
const initMoveable = () => {
|
|
66
|
+
moveable = new VanillaMoveable(globalThis.document.body, {
|
|
67
|
+
className: "m-editor-floating-box-moveable",
|
|
68
|
+
target: targetEl.value,
|
|
69
|
+
draggable: true,
|
|
70
|
+
resizable: true,
|
|
71
|
+
edge: true,
|
|
72
|
+
keepRatio: false,
|
|
73
|
+
origin: false,
|
|
74
|
+
snappable: true,
|
|
75
|
+
dragTarget: titleEl.value,
|
|
76
|
+
dragTargetSelf: false,
|
|
77
|
+
linePadding: 10,
|
|
78
|
+
controlPadding: 10,
|
|
79
|
+
bounds: {
|
|
80
|
+
left: 0,
|
|
81
|
+
top: 0,
|
|
82
|
+
right: 0,
|
|
83
|
+
bottom: 0,
|
|
84
|
+
position: "css"
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
moveable.on("drag", (e) => {
|
|
88
|
+
e.target.style.transform = e.transform;
|
|
89
|
+
});
|
|
90
|
+
moveable.on("resize", (e) => {
|
|
91
|
+
width.value = e.width;
|
|
92
|
+
height.value = e.height;
|
|
93
|
+
e.target.style.width = `${e.width}px`;
|
|
94
|
+
e.target.style.height = `${e.height}px`;
|
|
95
|
+
e.target.style.transform = e.drag.transform;
|
|
96
|
+
});
|
|
97
|
+
};
|
|
98
|
+
const destroyMoveable = () => {
|
|
99
|
+
moveable?.destroy();
|
|
100
|
+
moveable = null;
|
|
101
|
+
};
|
|
102
|
+
watch(visible, async (visible) => {
|
|
103
|
+
if (visible) {
|
|
104
|
+
await nextTick();
|
|
105
|
+
curZIndex.value = zIndex.nextZIndex();
|
|
106
|
+
const targetRect = targetEl.value?.getBoundingClientRect();
|
|
107
|
+
if (targetRect) {
|
|
108
|
+
width.value = targetRect.width;
|
|
109
|
+
height.value = targetRect.height;
|
|
110
|
+
initMoveable();
|
|
111
|
+
}
|
|
112
|
+
if (titleEl.value) titleHeight.value = titleEl.value.getBoundingClientRect().height;
|
|
113
|
+
} else destroyMoveable();
|
|
114
|
+
}, { immediate: true });
|
|
115
|
+
onBeforeUnmount(() => {
|
|
116
|
+
destroyMoveable();
|
|
117
|
+
});
|
|
118
|
+
const hide = (cancel) => {
|
|
119
|
+
if (cancel !== false) visible.value = false;
|
|
120
|
+
};
|
|
121
|
+
const closeHandler = () => {
|
|
122
|
+
if (typeof props.beforeClose === "function") props.beforeClose(hide);
|
|
123
|
+
else hide();
|
|
124
|
+
};
|
|
125
|
+
const nextZIndex = () => {
|
|
126
|
+
curZIndex.value = zIndex.nextZIndex();
|
|
127
|
+
};
|
|
128
|
+
provide("parentFloating", targetEl);
|
|
129
|
+
__expose({
|
|
130
|
+
bodyHeight,
|
|
131
|
+
target: targetEl,
|
|
132
|
+
titleEl
|
|
133
|
+
});
|
|
134
|
+
return (_ctx, _cache) => {
|
|
135
|
+
return visible.value ? (openBlock(), createBlock(Teleport, {
|
|
136
|
+
key: 0,
|
|
137
|
+
to: "body"
|
|
138
|
+
}, [createElementVNode("div", {
|
|
139
|
+
ref: "target",
|
|
140
|
+
class: "m-editor-float-box",
|
|
141
|
+
style: normalizeStyle({
|
|
142
|
+
...style.value,
|
|
143
|
+
zIndex: curZIndex.value
|
|
144
|
+
}),
|
|
145
|
+
onMousedown: nextZIndex
|
|
146
|
+
}, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "title", {}, () => [createElementVNode("span", null, toDisplayString(__props.title), 1)]), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
|
|
147
|
+
link: "",
|
|
148
|
+
size: "small",
|
|
149
|
+
onClick: closeHandler
|
|
150
|
+
}, {
|
|
151
|
+
default: withCtx(() => [createVNode(Icon_default, { icon: unref(Close) }, null, 8, ["icon"])]),
|
|
152
|
+
_: 1
|
|
153
|
+
})])], 512), createElementVNode("div", {
|
|
154
|
+
class: "m-editor-float-box-body",
|
|
155
|
+
style: normalizeStyle({ height: `${bodyHeight.value}px` })
|
|
156
|
+
}, [renderSlot(_ctx.$slots, "body")], 4)], 36)])) : createCommentVNode("v-if", true);
|
|
157
|
+
};
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
//#endregion
|
|
161
|
+
export { FloatingBox_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import Icon_vue_vue_type_script_setup_true_lang_default from "./Icon.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region packages/editor/src/components/Icon.vue
|
|
3
|
+
var Icon_default = Icon_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { Icon_default as default };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { TMagicIcon } from "@tmagic/design";
|
|
2
|
+
import { createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, resolveDynamicComponent, toRaw, unref, withCtx } from "vue";
|
|
3
|
+
import { Edit } from "@element-plus/icons-vue";
|
|
4
|
+
//#region packages/editor/src/components/Icon.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
+
var _hoisted_1 = ["src"];
|
|
6
|
+
var Icon_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
7
|
+
name: "MEditorIcon",
|
|
8
|
+
__name: "Icon",
|
|
9
|
+
props: { icon: {} },
|
|
10
|
+
setup(__props) {
|
|
11
|
+
const isRelativePath = (str) => /^(\.|(\.\.)?\/)/.test(str);
|
|
12
|
+
return (_ctx, _cache) => {
|
|
13
|
+
return !__props.icon ? (openBlock(), createBlock(unref(TMagicIcon), {
|
|
14
|
+
key: 0,
|
|
15
|
+
class: "magic-editor-icon"
|
|
16
|
+
}, {
|
|
17
|
+
default: withCtx(() => [createVNode(unref(Edit))]),
|
|
18
|
+
_: 1
|
|
19
|
+
})) : typeof __props.icon === "string" && (__props.icon.startsWith("http") || isRelativePath(__props.icon)) ? (openBlock(), createBlock(unref(TMagicIcon), {
|
|
20
|
+
key: 1,
|
|
21
|
+
class: "magic-editor-icon"
|
|
22
|
+
}, {
|
|
23
|
+
default: withCtx(() => [createElementVNode("img", { src: __props.icon }, null, 8, _hoisted_1)]),
|
|
24
|
+
_: 1
|
|
25
|
+
})) : typeof __props.icon === "string" ? (openBlock(), createElementBlock("i", {
|
|
26
|
+
key: 2,
|
|
27
|
+
class: normalizeClass(["magic-editor-icon", __props.icon])
|
|
28
|
+
}, null, 2)) : (openBlock(), createBlock(unref(TMagicIcon), {
|
|
29
|
+
key: 3,
|
|
30
|
+
class: "magic-editor-icon"
|
|
31
|
+
}, {
|
|
32
|
+
default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(toRaw(__props.icon))))]),
|
|
33
|
+
_: 1
|
|
34
|
+
}));
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
//#endregion
|
|
39
|
+
export { Icon_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import Resizer_vue_vue_type_script_setup_true_lang_default from "./Resizer.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region packages/editor/src/components/Resizer.vue
|
|
3
|
+
var Resizer_default = Resizer_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { Resizer_default as default };
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { useGetSo } from "../hooks/use-getso.js";
|
|
2
|
+
import { createElementBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref, useTemplateRef } from "vue";
|
|
3
|
+
//#region packages/editor/src/components/Resizer.vue?vue&type=script&setup=true&lang.ts
|
|
4
|
+
var Resizer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
5
|
+
name: "MEditorResizer",
|
|
6
|
+
__name: "Resizer",
|
|
7
|
+
emits: ["change"],
|
|
8
|
+
setup(__props, { emit: __emit }) {
|
|
9
|
+
const emit = __emit;
|
|
10
|
+
const { isDragging } = useGetSo(useTemplateRef("target"), emit);
|
|
11
|
+
return (_ctx, _cache) => {
|
|
12
|
+
return openBlock(), createElementBlock("span", {
|
|
13
|
+
ref: "target",
|
|
14
|
+
class: normalizeClass(["m-editor-resizer", { "m-editor-resizer-dragging": unref(isDragging) }])
|
|
15
|
+
}, [renderSlot(_ctx.$slots, "default")], 2);
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
//#endregion
|
|
20
|
+
export { Resizer_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import ScrollBar_vue_vue_type_script_setup_true_lang_default from "./ScrollBar.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
/* empty css */
|
|
3
|
+
//#region packages/editor/src/components/ScrollBar.vue
|
|
4
|
+
var ScrollBar_default = ScrollBar_vue_vue_type_script_setup_true_lang_default;
|
|
5
|
+
//#endregion
|
|
6
|
+
export { ScrollBar_default as default };
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, useTemplateRef } from "vue";
|
|
2
|
+
import Gesto from "gesto";
|
|
3
|
+
//#region packages/editor/src/components/ScrollBar.vue?vue&type=script&setup=true&lang.ts
|
|
4
|
+
var ScrollBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
5
|
+
name: "MEditorScrollBar",
|
|
6
|
+
__name: "ScrollBar",
|
|
7
|
+
props: {
|
|
8
|
+
size: {},
|
|
9
|
+
scrollSize: {},
|
|
10
|
+
isHorizontal: { type: Boolean },
|
|
11
|
+
pos: {}
|
|
12
|
+
},
|
|
13
|
+
emits: ["scroll"],
|
|
14
|
+
setup(__props, { emit: __emit }) {
|
|
15
|
+
const props = __props;
|
|
16
|
+
const emit = __emit;
|
|
17
|
+
const barEl = useTemplateRef("bar");
|
|
18
|
+
const thumbEl = useTemplateRef("thumb");
|
|
19
|
+
const thumbSize = computed(() => props.size * (props.size / props.scrollSize));
|
|
20
|
+
const thumbPos = computed(() => props.pos / props.scrollSize * props.size);
|
|
21
|
+
const thumbStyle = computed(() => ({
|
|
22
|
+
[props.isHorizontal ? "width" : "height"]: `${thumbSize.value}px`,
|
|
23
|
+
transform: `translate${props.isHorizontal ? "X" : "Y"}(${thumbPos.value}px)`
|
|
24
|
+
}));
|
|
25
|
+
let gesto;
|
|
26
|
+
onMounted(() => {
|
|
27
|
+
if (!thumbEl.value) return;
|
|
28
|
+
gesto = new Gesto(thumbEl.value, { container: window });
|
|
29
|
+
gesto.on("dragStart", (e) => {
|
|
30
|
+
e.inputEvent.stopPropagation();
|
|
31
|
+
e.inputEvent.preventDefault();
|
|
32
|
+
}).on("drag", (e) => {
|
|
33
|
+
scrollBy(getDelta(e));
|
|
34
|
+
});
|
|
35
|
+
barEl.value?.addEventListener("wheel", wheelHandler, false);
|
|
36
|
+
});
|
|
37
|
+
onBeforeUnmount(() => {
|
|
38
|
+
if (gesto) gesto.off();
|
|
39
|
+
barEl.value?.removeEventListener("wheel", wheelHandler, false);
|
|
40
|
+
});
|
|
41
|
+
const wheelHandler = (e) => {
|
|
42
|
+
const delta = props.isHorizontal ? e.deltaX : e.deltaY;
|
|
43
|
+
if (delta) e.preventDefault();
|
|
44
|
+
scrollBy(delta);
|
|
45
|
+
};
|
|
46
|
+
const getDelta = (e) => {
|
|
47
|
+
const ratio = (props.isHorizontal ? e.deltaX : e.deltaY) / props.size;
|
|
48
|
+
return props.scrollSize * ratio;
|
|
49
|
+
};
|
|
50
|
+
const scrollBy = (delta) => {
|
|
51
|
+
if (delta < 0) if (props.pos <= 0) emit("scroll", 0);
|
|
52
|
+
else emit("scroll", -Math.min(-delta, props.pos));
|
|
53
|
+
else {
|
|
54
|
+
const leftPos = props.size - (thumbSize.value + thumbPos.value);
|
|
55
|
+
if (leftPos <= 0) emit("scroll", 0);
|
|
56
|
+
else emit("scroll", Math.min(delta, leftPos));
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
return (_ctx, _cache) => {
|
|
60
|
+
return openBlock(), createElementBlock("div", {
|
|
61
|
+
ref: "bar",
|
|
62
|
+
class: normalizeClass(["m-editor-scroll-bar", __props.isHorizontal ? "horizontal" : "vertical"])
|
|
63
|
+
}, [createElementVNode("div", {
|
|
64
|
+
ref: "thumb",
|
|
65
|
+
class: "m-editor-scroll-bar-thumb",
|
|
66
|
+
style: normalizeStyle(thumbStyle.value)
|
|
67
|
+
}, null, 4)], 2);
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
//#endregion
|
|
72
|
+
export { ScrollBar_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import ScrollViewer_vue_vue_type_script_setup_true_lang_default from "./ScrollViewer.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region packages/editor/src/components/ScrollViewer.vue
|
|
3
|
+
var ScrollViewer_default = ScrollViewer_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { ScrollViewer_default as default };
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import { ScrollViewer } from "../utils/scroll-viewer.js";
|
|
2
|
+
import ScrollBar_default from "./ScrollBar.js";
|
|
3
|
+
import { isNumber } from "@tmagic/utils";
|
|
4
|
+
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, useTemplateRef, watch } from "vue";
|
|
5
|
+
//#region packages/editor/src/components/ScrollViewer.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
+
var _hoisted_1 = {
|
|
7
|
+
class: "m-editor-scroll-viewer-container",
|
|
8
|
+
ref: "container"
|
|
9
|
+
};
|
|
10
|
+
var ScrollViewer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
11
|
+
name: "MEditorScrollViewer",
|
|
12
|
+
__name: "ScrollViewer",
|
|
13
|
+
props: {
|
|
14
|
+
width: { default: 0 },
|
|
15
|
+
height: { default: 0 },
|
|
16
|
+
wrapWidth: { default: 0 },
|
|
17
|
+
wrapHeight: { default: 0 },
|
|
18
|
+
zoom: { default: 1 },
|
|
19
|
+
correctionScrollSize: { default: () => ({
|
|
20
|
+
width: 0,
|
|
21
|
+
height: 0
|
|
22
|
+
}) }
|
|
23
|
+
},
|
|
24
|
+
setup(__props, { expose: __expose }) {
|
|
25
|
+
const props = __props;
|
|
26
|
+
const containerEl = useTemplateRef("container");
|
|
27
|
+
const el = useTemplateRef("target");
|
|
28
|
+
const style = computed(() => `
|
|
29
|
+
width: ${isNumber(`${props.width}`) ? `${props.width}px` : props.width};
|
|
30
|
+
height: ${isNumber(`${props.height}`) ? `${props.height}px` : props.height};
|
|
31
|
+
position: absolute;
|
|
32
|
+
margin-top: 30px;
|
|
33
|
+
`);
|
|
34
|
+
const scrollWidth = ref(0);
|
|
35
|
+
const scrollHeight = ref(0);
|
|
36
|
+
let scrollViewer;
|
|
37
|
+
onMounted(() => {
|
|
38
|
+
if (!containerEl.value || !el.value) return;
|
|
39
|
+
scrollViewer = new ScrollViewer({
|
|
40
|
+
container: containerEl.value,
|
|
41
|
+
target: el.value,
|
|
42
|
+
zoom: props.zoom,
|
|
43
|
+
correctionScrollSize: props.correctionScrollSize
|
|
44
|
+
});
|
|
45
|
+
scrollViewer.on("scroll", (data) => {
|
|
46
|
+
hOffset.value = data.scrollLeft;
|
|
47
|
+
vOffset.value = data.scrollTop;
|
|
48
|
+
scrollWidth.value = data.scrollWidth;
|
|
49
|
+
scrollHeight.value = data.scrollHeight;
|
|
50
|
+
});
|
|
51
|
+
});
|
|
52
|
+
onBeforeUnmount(() => {
|
|
53
|
+
scrollViewer.destroy();
|
|
54
|
+
});
|
|
55
|
+
watch(() => props.zoom, () => {
|
|
56
|
+
scrollViewer.setZoom(props.zoom);
|
|
57
|
+
});
|
|
58
|
+
const vOffset = ref(0);
|
|
59
|
+
const vScrollHandler = (delta) => {
|
|
60
|
+
vOffset.value += delta;
|
|
61
|
+
scrollViewer.scrollTo({ top: vOffset.value });
|
|
62
|
+
};
|
|
63
|
+
const hOffset = ref(0);
|
|
64
|
+
const hScrollHandler = (delta) => {
|
|
65
|
+
hOffset.value += delta;
|
|
66
|
+
scrollViewer.scrollTo({ left: hOffset.value });
|
|
67
|
+
};
|
|
68
|
+
__expose({ container: containerEl });
|
|
69
|
+
return (_ctx, _cache) => {
|
|
70
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
71
|
+
createElementVNode("div", {
|
|
72
|
+
ref: "target",
|
|
73
|
+
style: normalizeStyle(style.value)
|
|
74
|
+
}, [renderSlot(_ctx.$slots, "default")], 4),
|
|
75
|
+
renderSlot(_ctx.$slots, "content"),
|
|
76
|
+
scrollHeight.value > __props.wrapHeight ? (openBlock(), createBlock(ScrollBar_default, {
|
|
77
|
+
key: 0,
|
|
78
|
+
"scroll-size": scrollHeight.value,
|
|
79
|
+
pos: vOffset.value,
|
|
80
|
+
size: __props.wrapHeight,
|
|
81
|
+
onScroll: vScrollHandler
|
|
82
|
+
}, null, 8, [
|
|
83
|
+
"scroll-size",
|
|
84
|
+
"pos",
|
|
85
|
+
"size"
|
|
86
|
+
])) : createCommentVNode("v-if", true),
|
|
87
|
+
scrollWidth.value > __props.wrapWidth ? (openBlock(), createBlock(ScrollBar_default, {
|
|
88
|
+
key: 1,
|
|
89
|
+
"is-horizontal": true,
|
|
90
|
+
"scroll-size": scrollWidth.value,
|
|
91
|
+
pos: hOffset.value,
|
|
92
|
+
size: __props.wrapWidth,
|
|
93
|
+
onScroll: hScrollHandler
|
|
94
|
+
}, null, 8, [
|
|
95
|
+
"scroll-size",
|
|
96
|
+
"pos",
|
|
97
|
+
"size"
|
|
98
|
+
])) : createCommentVNode("v-if", true)
|
|
99
|
+
], 512);
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
//#endregion
|
|
104
|
+
export { ScrollViewer_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import SearchInput_vue_vue_type_script_setup_true_lang_default from "./SearchInput.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region packages/editor/src/components/SearchInput.vue
|
|
3
|
+
var SearchInput_default = SearchInput_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { SearchInput_default as default };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { TMagicIcon, TMagicInput } from "@tmagic/design";
|
|
2
|
+
import { createBlock, createVNode, defineComponent, openBlock, ref, unref, withCtx } from "vue";
|
|
3
|
+
import { Search } from "@element-plus/icons-vue";
|
|
4
|
+
//#region packages/editor/src/components/SearchInput.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
+
var SearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
6
|
+
name: "MEditorSearchInput",
|
|
7
|
+
__name: "SearchInput",
|
|
8
|
+
emits: ["search"],
|
|
9
|
+
setup(__props, { emit: __emit }) {
|
|
10
|
+
const emit = __emit;
|
|
11
|
+
const filterText = ref("");
|
|
12
|
+
let timer = null;
|
|
13
|
+
const filterTextChangeHandler = () => {
|
|
14
|
+
timer && clearTimeout(timer);
|
|
15
|
+
timer = setTimeout(() => {
|
|
16
|
+
emit("search", filterText.value);
|
|
17
|
+
timer = null;
|
|
18
|
+
}, 300);
|
|
19
|
+
};
|
|
20
|
+
return (_ctx, _cache) => {
|
|
21
|
+
return openBlock(), createBlock(unref(TMagicInput), {
|
|
22
|
+
modelValue: filterText.value,
|
|
23
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => filterText.value = $event),
|
|
24
|
+
class: "search-input",
|
|
25
|
+
size: "small",
|
|
26
|
+
placeholder: "输入关键字进行过滤",
|
|
27
|
+
clearable: "",
|
|
28
|
+
onInput: filterTextChangeHandler
|
|
29
|
+
}, {
|
|
30
|
+
prefix: withCtx(() => [createVNode(unref(TMagicIcon), null, {
|
|
31
|
+
default: withCtx(() => [createVNode(unref(Search))]),
|
|
32
|
+
_: 1
|
|
33
|
+
})]),
|
|
34
|
+
_: 1
|
|
35
|
+
}, 8, ["modelValue"]);
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
//#endregion
|
|
40
|
+
export { SearchInput_vue_vue_type_script_setup_true_lang_default as default };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import SplitView_vue_vue_type_script_setup_true_lang_default from "./SplitView.vue_vue_type_script_setup_true_lang.js";
|
|
2
|
+
//#region packages/editor/src/components/SplitView.vue
|
|
3
|
+
var SplitView_default = SplitView_vue_vue_type_script_setup_true_lang_default;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { SplitView_default as default };
|