@tmagic/editor 1.7.6 → 1.7.8-beta.1

package/dist/es/layouts/props-panel/PropsPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,179 @@
+import { styleTabConfig } from "../../utils/props.js";
+import { Protocol } from "../../services/storage.js";
+import { PROPS_PANEL_WIDTH_STORAGE_KEY } from "../../utils/const.js";
+import { useServices } from "../../hooks/use-services.js";
+import Resizer_default from "../../components/Resizer.js";
+import Icon_default from "../../components/Icon.js";
+import FormPanel_default from "./FormPanel.js";
+import { useStylePanel } from "./use-style-panel.js";
+import { TMagicButton } from "@tmagic/design";
+import { setValueByKeyPath } from "@tmagic/utils";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, unref, useTemplateRef, vShow, watch, watchEffect, withCtx, withDirectives } from "vue";
+import { Close, Sugar } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/props-panel/PropsPanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	ref: "propsPanel",
+	class: "m-editor-props-panel"
+};
+var _hoisted_2 = { class: "m-editor-props-style-panel-title" };
+var PropsPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorPropsPanel",
+	__name: "PropsPanel",
+	props: {
+		disabledShowSrc: { type: Boolean },
+		extendState: { type: Function }
+	},
+	emits: [
+		"submit-error",
+		"form-error",
+		"mounted",
+		"unmounted"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const emit = __emit;
+		const { editorService, uiService, propsService, storageService } = useServices();
+		const values = ref({});
+		const curFormConfig = ref([]);
+		const node = computed(() => editorService.get("node"));
+		const nodes = computed(() => editorService.get("nodes"));
+		const styleFormConfig = [{
+			tabPosition: "right",
+			items: styleTabConfig.items
+		}];
+		const init = async () => {
+			if (!node.value) {
+				curFormConfig.value = [];
+				return;
+			}
+			const type = node.value.type || (node.value.items ? "container" : "text");
+			curFormConfig.value = await propsService.getPropsConfig(type);
+			values.value = node.value;
+		};
+		watchEffect(init);
+		propsService.on("props-configs-change", init);
+		onBeforeUnmount(() => {
+			propsService.off("props-configs-change", init);
+		});
+		const submit = async (v, eventData) => {
+			try {
+				if (!v.id) v.id = values.value.id;
+				const newValue = {
+					...v,
+					style: {}
+				};
+				if (v.style) {
+					Object.entries(v.style).forEach(([key, value]) => {
+						if (value !== "" && newValue.style) newValue.style[key] = value;
+					});
+					eventData?.changeRecords?.forEach((record) => {
+						if (record.propPath?.startsWith("style") && record.value === "") setValueByKeyPath(record.propPath, record.value, newValue);
+					});
+				}
+				editorService.update(newValue, { changeRecords: eventData?.changeRecords });
+			} catch (e) {
+				emit("submit-error", e);
+			}
+		};
+		const errorHandler = (e) => {
+			emit("form-error", e);
+		};
+		const mountedHandler = () => {
+			if (propertyFormPanelRef.value) emit("mounted", propertyFormPanelRef.value);
+		};
+		const unmountedHandler = () => {
+			emit("unmounted");
+		};
+		const propsPanelEl = useTemplateRef("propsPanel");
+		const propsPanelWidth = ref(storageService.getItem("$MagicEditorPropsPanelWidthData", { protocol: Protocol.NUMBER }) || 300);
+		onMounted(() => {
+			propsPanelEl.value?.style.setProperty("--props-style-panel-width", `${Math.max(propsPanelWidth.value, 0)}px`);
+		});
+		const widthChange = ({ deltaX }) => {
+			if (!propsPanelEl.value) return;
+			let value = globalThis.parseFloat(getComputedStyle(propsPanelEl.value).getPropertyValue("--props-style-panel-width")) - deltaX;
+			if (value > uiService.get("columnWidth").right) value = uiService.get("columnWidth").right - 40;
+			propsPanelWidth.value = Math.max(value, 0);
+		};
+		watch(propsPanelWidth, (value) => {
+			propsPanelEl.value?.style.setProperty("--props-style-panel-width", `${value}px`);
+			storageService.setItem(PROPS_PANEL_WIDTH_STORAGE_KEY, value, { protocol: Protocol.NUMBER });
+		});
+		const { showStylePanel, showStylePanelToggleButton, toggleStylePanel } = useStylePanel({
+			storageService,
+			uiService
+		}, propsPanelWidth);
+		const propertyFormPanelRef = useTemplateRef("propertyFormPanel");
+		__expose({
+			getFormState() {
+				return propertyFormPanelRef.value?.configForm?.formState;
+			},
+			submit
+		});
+		return (_ctx, _cache) => {
+			return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
+				renderSlot(_ctx.$slots, "props-panel-header"),
+				createVNode(FormPanel_default, {
+					ref: "propertyFormPanel",
+					class: normalizeClass(["m-editor-props-property-panel", { "show-style-panel": unref(showStylePanel) }]),
+					config: curFormConfig.value,
+					values: values.value,
+					disabledShowSrc: __props.disabledShowSrc,
+					extendState: __props.extendState,
+					onSubmit: submit,
+					onSubmitError: errorHandler,
+					onFormError: errorHandler,
+					onMounted: mountedHandler,
+					onUnmounted: unmountedHandler
+				}, null, 8, [
+					"class",
+					"config",
+					"values",
+					"disabledShowSrc",
+					"extendState"
+				]),
+				unref(showStylePanel) ? (openBlock(), createBlock(Resizer_default, {
+					key: 0,
+					onChange: widthChange
+				})) : createCommentVNode("v-if", true),
+				unref(showStylePanel) ? (openBlock(), createBlock(FormPanel_default, {
+					key: 1,
+					class: "m-editor-props-style-panel",
+					"label-position": "top",
+					"code-value-key": "style",
+					config: styleFormConfig,
+					values: values.value,
+					disabledShowSrc: __props.disabledShowSrc,
+					extendState: __props.extendState,
+					onSubmit: submit,
+					onSubmitError: errorHandler,
+					onFormError: errorHandler
+				}, {
+					"props-form-panel-header": withCtx(() => [createElementVNode("div", _hoisted_2, [_cache[2] || (_cache[2] = createElementVNode("span", null, "样式", -1)), createElementVNode("div", null, [createVNode(unref(TMagicButton), {
+						link: "",
+						size: "small",
+						onClick: _cache[0] || (_cache[0] = ($event) => unref(toggleStylePanel)(false))
+					}, {
+						default: withCtx(() => [createVNode(Icon_default, { icon: unref(Close) }, null, 8, ["icon"])]),
+						_: 1
+					})])])]),
+					_: 1
+				}, 8, [
+					"values",
+					"disabledShowSrc",
+					"extendState"
+				])) : createCommentVNode("v-if", true),
+				unref(showStylePanelToggleButton) && !unref(showStylePanel) ? (openBlock(), createBlock(unref(TMagicButton), {
+					key: 2,
+					class: "m-editor-props-panel-style-icon",
+					circle: "",
+					onClick: _cache[1] || (_cache[1] = ($event) => unref(toggleStylePanel)(true))
+				}, {
+					default: withCtx(() => [createVNode(Icon_default, { icon: unref(Sugar) }, null, 8, ["icon"])]),
+					_: 1
+				})) : createCommentVNode("v-if", true)
+			], 512)), [[vShow, nodes.value.length === 1]]);
+		};
+	}
+});
+//#endregion
+export { PropsPanel_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/props-panel/use-style-panel.js

@@ -0,0 +1,40 @@
+import { Protocol } from "../../services/storage.js";
+import { RIGHT_COLUMN_WIDTH_STORAGE_KEY } from "../../utils/const.js";
+import { computed, watch } from "vue";
+//#region packages/editor/src/layouts/props-panel/use-style-panel.ts
+var useStylePanel = ({ uiService, storageService }, propsPanelWidth) => {
+	const showStylePanelStorageKey = "props-panel-show-style-panel";
+	const showStylePanelStorageValue = storageService.getItem(showStylePanelStorageKey, { protocol: Protocol.BOOLEAN });
+	if (typeof showStylePanelStorageValue === "boolean") uiService.set("showStylePanel", showStylePanelStorageValue);
+	const showStylePanel = computed(() => showStylePanelToggleButton.value && (uiService.get("showStylePanel") ?? true));
+	const showStylePanelToggleButton = computed(() => uiService.get("frameworkRect").width >= 1280);
+	watch(() => uiService.get("frameworkRect").width, () => {
+		if (uiService.get("columnWidth").right < propsPanelWidth.value) toggleStylePanel(false);
+	});
+	const toggleStylePanel = (showStylePanel) => {
+		uiService.set("showStylePanel", showStylePanel);
+		storageService.setItem(showStylePanelStorageKey, showStylePanel, { protocol: Protocol.BOOLEAN });
+		const columnWidth = { ...uiService.get("columnWidth") };
+		if (showStylePanel) {
+			columnWidth.right += propsPanelWidth.value;
+			columnWidth.center -= propsPanelWidth.value;
+		} else {
+			columnWidth.right -= propsPanelWidth.value;
+			columnWidth.center += propsPanelWidth.value;
+		}
+		if (columnWidth.center < 0) {
+			columnWidth.right = columnWidth.right + columnWidth.center - 400;
+			columnWidth.center = 400;
+			propsPanelWidth.value = columnWidth.right / 2;
+		}
+		storageService.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, columnWidth.right, { protocol: Protocol.NUMBER });
+		uiService.set("columnWidth", columnWidth);
+	};
+	return {
+		showStylePanel,
+		showStylePanelToggleButton,
+		toggleStylePanel
+	};
+};
+//#endregion
+export { useStylePanel };

package/dist/es/layouts/sidebar/ComponentListPanel.js

@@ -0,0 +1,5 @@
+import ComponentListPanel_vue_vue_type_script_setup_true_lang_default from "./ComponentListPanel.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+var ComponentListPanel_default = ComponentListPanel_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ComponentListPanel_default as default };

package/dist/es/layouts/sidebar/ComponentListPanel.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,121 @@
+import { DragType } from "../../type.js";
+import { useServices } from "../../hooks/use-services.js";
+import Icon_default from "../../components/Icon.js";
+import SearchInput_default from "../../components/SearchInput.js";
+import { TMagicCollapse, TMagicCollapseItem, TMagicScrollbar, TMagicTooltip } from "@tmagic/design";
+import { removeClassNameByClassName } from "@tmagic/utils";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch, withCtx } from "vue";
+import serialize from "serialize-javascript";
+import { Grid } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/ComponentListPanel.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["onClick", "onDragstart"];
+var _hoisted_2 = ["title"];
+var ComponentListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorComponentListPanel",
+	__name: "ComponentListPanel",
+	setup(__props) {
+		const searchText = ref("");
+		const filterTextChangeHandler = (v) => {
+			searchText.value = v;
+		};
+		const { editorService, componentListService } = useServices();
+		const stageOptions = inject("stageOptions");
+		const stage = computed(() => editorService.get("stage"));
+		const list = computed(() => componentListService.getList().map((group) => ({
+			...group,
+			items: group.items.filter((item) => item.text.includes(searchText.value))
+		})));
+		const collapseValue = ref();
+		watch(list, () => {
+			collapseValue.value = Array(list.value?.length).fill(1).map((x, i) => `${i}`);
+		}, { immediate: true });
+		let timeout;
+		let clientX;
+		let clientY;
+		const appendComponent = ({ text, type, data = {} }) => {
+			editorService.add({
+				name: text,
+				type,
+				...data
+			});
+		};
+		const dragstartHandler = ({ text, type, data = {} }, e) => {
+			e.dataTransfer?.setData("text/json", serialize({
+				dragType: DragType.COMPONENT_LIST,
+				data: {
+					name: text,
+					type,
+					...data
+				}
+			}));
+		};
+		const dragendHandler = () => {
+			if (timeout) {
+				globalThis.clearTimeout(timeout);
+				timeout = void 0;
+			}
+			const doc = stage.value?.renderer?.getDocument();
+			if (doc && stageOptions?.containerHighlightClassName) removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+			clientX = 0;
+			clientY = 0;
+		};
+		const dragHandler = (e) => {
+			if (e.clientX !== clientX || e.clientY !== clientY) {
+				clientX = e.clientX;
+				clientY = e.clientY;
+				if (timeout) {
+					globalThis.clearTimeout(timeout);
+					timeout = void 0;
+				}
+				return;
+			}
+			if (timeout || !stage.value) return;
+			timeout = stage.value.delayedMarkContainer(e);
+		};
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(TMagicScrollbar), null, {
+				default: withCtx(() => [
+					renderSlot(_ctx.$slots, "component-list-panel-header"),
+					createVNode(SearchInput_default, { onSearch: filterTextChangeHandler }),
+					renderSlot(_ctx.$slots, "component-list", { componentGroupList: list.value }, () => [createVNode(unref(TMagicCollapse), {
+						class: "ui-component-panel",
+						modelValue: collapseValue.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => collapseValue.value = $event)
+					}, {
+						default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(list.value, (group, index) => {
+							return openBlock(), createElementBlock(Fragment, null, [group.items && group.items.length ? (openBlock(), createBlock(unref(TMagicCollapseItem), {
+								key: index,
+								name: `${index}`
+							}, {
+								title: withCtx(() => [createVNode(Icon_default, { icon: unref(Grid) }, null, 8, ["icon"]), createTextVNode(toDisplayString(group.title), 1)]),
+								default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (item) => {
+									return openBlock(), createElementBlock("div", {
+										class: "component-item",
+										draggable: "true",
+										key: item.type,
+										onClick: ($event) => appendComponent(item),
+										onDragstart: ($event) => dragstartHandler(item, $event),
+										onDragend: dragendHandler,
+										onDrag: dragHandler
+									}, [renderSlot(_ctx.$slots, "component-list-item", { component: item }, () => [createVNode(unref(TMagicTooltip), {
+										placement: "right",
+										disabled: !Boolean(item.desc),
+										content: item.desc
+									}, {
+										default: withCtx(() => [createVNode(Icon_default, { icon: item.icon }, null, 8, ["icon"])]),
+										_: 2
+									}, 1032, ["disabled", "content"]), createElementVNode("span", { title: item.text }, toDisplayString(item.text), 9, _hoisted_2)])], 40, _hoisted_1);
+								}), 128))]),
+								_: 2
+							}, 1032, ["name"])) : createCommentVNode("v-if", true)], 64);
+						}), 256))]),
+						_: 3
+					}, 8, ["modelValue"])])
+				]),
+				_: 3
+			});
+		};
+	}
+});
+//#endregion
+export { ComponentListPanel_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/Sidebar.js

@@ -0,0 +1,5 @@
+import Sidebar_vue_vue_type_script_setup_true_lang_default from "./Sidebar.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/Sidebar.vue
+var Sidebar_default = Sidebar_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { Sidebar_default as default };

package/dist/es/layouts/sidebar/Sidebar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,314 @@
+import { ColumnLayout, SideItemKey } from "../../type.js";
+import { useServices } from "../../hooks/use-services.js";
+import { useFloatBox } from "../../hooks/use-float-box.js";
+import { useEditorContentHeight } from "../../hooks/use-editor-content-height.js";
+import Icon_default from "../../components/Icon.js";
+import FloatingBox_default from "../../components/FloatingBox.js";
+import CodeBlockListPanel_default from "./code-block/CodeBlockListPanel.js";
+import DataSourceListPanel_default from "./data-source/DataSourceListPanel.js";
+import LayerPanel_default from "./layer/LayerPanel.js";
+import ComponentListPanel_default from "./ComponentListPanel.js";
+import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, mergeProps, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toHandlers, unref, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
+import { Close, Coin, EditPen, Goods, List } from "@element-plus/icons-vue";
+//#region packages/editor/src/layouts/sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = {
+	key: 0,
+	class: "m-editor-sidebar"
+};
+var _hoisted_2 = { class: "m-editor-sidebar-header" };
+var _hoisted_3 = [
+	"draggable",
+	"onClick",
+	"onDragend"
+];
+var _hoisted_4 = {
+	key: 1,
+	class: "magic-editor-tab-panel-title"
+};
+var _hoisted_5 = {
+	key: 0,
+	class: "m-editor-sidebar-tips"
+};
+var _hoisted_6 = { class: "m-editor-slide-list-box" };
+var Sidebar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "MEditorSidebar",
+	__name: "Sidebar",
+	props: {
+		data: { default: () => ({
+			type: "tabs",
+			status: "组件",
+			items: [
+				SideItemKey.COMPONENT_LIST,
+				SideItemKey.LAYER,
+				SideItemKey.CODE_BLOCK,
+				SideItemKey.DATA_SOURCE
+			]
+		}) },
+		layerContentMenu: {},
+		indent: {},
+		nextLevelIndentIncrement: {},
+		customContentMenu: {}
+	},
+	setup(__props, { expose: __expose }) {
+		const props = __props;
+		const { depService, uiService, propsService } = useServices();
+		const collecting = computed(() => depService.get("collecting"));
+		const taskLength = computed(() => depService.get("taskLength"));
+		const tipsBarVisible = ref(true);
+		const columnLeftWidth = computed(() => uiService.get("columnWidth")[ColumnLayout.LEFT]);
+		const { height: editorContentHeight } = useEditorContentHeight();
+		const columnLeftHeight = ref(0);
+		const unWatchEditorContentHeight = watch(editorContentHeight, (height) => {
+			if (height) {
+				columnLeftHeight.value = height * .5;
+				nextTick().then(() => {
+					unWatchEditorContentHeight();
+				});
+			}
+		}, { immediate: true });
+		const activeTabName = ref(props.data?.status);
+		const getItemConfig = (data) => {
+			const map = {
+				[SideItemKey.COMPONENT_LIST]: {
+					$key: SideItemKey.COMPONENT_LIST,
+					type: "component",
+					icon: Goods,
+					text: "组件",
+					component: ComponentListPanel_default,
+					slots: {}
+				},
+				layer: {
+					$key: "layer",
+					type: "component",
+					icon: List,
+					text: "已选组件",
+					props: {
+						layerContentMenu: props.layerContentMenu,
+						customContentMenu: props.customContentMenu,
+						indent: props.indent,
+						nextLevelIndentIncrement: props.nextLevelIndentIncrement
+					},
+					component: LayerPanel_default,
+					slots: {}
+				},
+				[SideItemKey.CODE_BLOCK]: {
+					$key: "code-block",
+					type: "component",
+					icon: EditPen,
+					text: "代码编辑",
+					component: CodeBlockListPanel_default,
+					props: {
+						indent: props.indent,
+						nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+						customContentMenu: props.customContentMenu
+					},
+					slots: {}
+				},
+				[SideItemKey.DATA_SOURCE]: {
+					$key: SideItemKey.DATA_SOURCE,
+					type: "component",
+					icon: Coin,
+					text: "数据源",
+					component: DataSourceListPanel_default,
+					props: {
+						indent: props.indent,
+						nextLevelIndentIncrement: props.nextLevelIndentIncrement,
+						customContentMenu: props.customContentMenu
+					},
+					slots: {}
+				}
+			};
+			return typeof data === "string" ? map[data] : data;
+		};
+		const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)).filter((item) => {
+			if (item.$key === SideItemKey.DATA_SOURCE) return !propsService.getDisabledDataSource();
+			if (item.$key === SideItemKey.CODE_BLOCK) return !propsService.getDisabledCodeBlock();
+			return true;
+		}));
+		watch(sideBarItems, (items) => {
+			uiService.set("sideBarItems", items);
+		}, { immediate: true });
+		watch(() => props.data.status, (status) => {
+			activeTabName.value = status || "0";
+		});
+		const { dragstartHandler, dragendHandler, floatBoxStates, showingBoxKeys } = useFloatBox(computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key)));
+		watch(() => showingBoxKeys.value.length, () => {
+			if (!showingBoxKeys.value.some((key) => activeTabName.value === sideBarItems.value.find((v) => v.$key === key)?.text) && activeTabName.value) return;
+			const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key));
+			if (!nextSlideBarItem) {
+				activeTabName.value = "";
+				uiService.set("hideSlideBar", true);
+				return;
+			}
+			uiService.set("hideSlideBar", false);
+			activeTabName.value = nextSlideBarItem?.text;
+		});
+		const headerItemClickHandler = async (config, index) => {
+			if (typeof config.beforeClick === "function") {
+				if (await config.beforeClick(config) === false) return;
+			}
+			activeTabName.value = config.text || config.$key || `${index}`;
+		};
+		__expose({ activeTabName });
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [__props.data.type === "tabs" && __props.data.items.length ? (openBlock(), createElementBlock("div", _hoisted_1, [
+				createElementVNode("div", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
+					return withDirectives((openBlock(), createElementBlock("div", {
+						class: normalizeClass(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
+						draggable: config.draggable ?? true,
+						key: config.$key ?? index,
+						style: normalizeStyle(config.tabStyle || {}),
+						onClick: ($event) => headerItemClickHandler(config, index),
+						onDragstart: _cache[0] || (_cache[0] = (...args) => unref(dragstartHandler) && unref(dragstartHandler)(...args)),
+						onDragend: ($event) => unref(dragendHandler)(config.$key, $event)
+					}, [config.icon ? (openBlock(), createBlock(Icon_default, {
+						key: 0,
+						icon: config.icon
+					}, null, 8, ["icon"])) : createCommentVNode("v-if", true), config.text ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(config.text), 1)) : createCommentVNode("v-if", true)], 46, _hoisted_3)), [[vShow, !unref(floatBoxStates)[config.$key]?.status]]);
+				}), 128))]),
+				(openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
+					return withDirectives((openBlock(), createElementBlock("div", {
+						class: normalizeClass(["m-editor-sidebar-content", { "m-editor-dep-collecting": collecting.value }]),
+						key: config.$key ?? index
+					}, [config?.component && !unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
+						key: 0,
+						ref_for: true
+					}, config.props || {}, toHandlers(config?.listeners || {})), createSlots({ _: 2 }, [
+						config.$key === "component-list" || config.slots?.componentList ? {
+							name: "component-list",
+							fn: withCtx(({ componentGroupList }) => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list", {
+								key: 0,
+								componentGroupList
+							}) : config.slots?.componentList ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentList), { key: 1 })) : createCommentVNode("v-if", true)]),
+							key: "0"
+						} : void 0,
+						config.$key === "component-list" || config.slots?.componentListPanelHeader ? {
+							name: "component-list-panel-header",
+							fn: withCtx(() => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-panel-header", { key: 0 }) : config.slots?.componentListPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
+							key: "1"
+						} : void 0,
+						config.$key === "component-list" || config.slots?.componentListItem ? {
+							name: "component-list-item",
+							fn: withCtx(({ component }) => [config.$key === "component-list" ? renderSlot(_ctx.$slots, "component-list-item", {
+								key: 0,
+								component
+							}) : config.slots?.componentListItem ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.componentListItem), {
+								key: 1,
+								component
+							}, null, 8, ["component"])) : createCommentVNode("v-if", true)]),
+							key: "2"
+						} : void 0,
+						config.$key === "layer" || config.slots?.layerPanelHeader ? {
+							name: "layer-panel-header",
+							fn: withCtx(() => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-panel-header", { key: 0 }) : config.slots?.layerPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
+							key: "3"
+						} : void 0,
+						config.$key === "code-block" || config.slots?.codeBlockPanelHeader ? {
+							name: "code-block-panel-header",
+							fn: withCtx(() => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-header", { key: 0 }) : config.slots?.codeBlockPanelHeader ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelHeader), { key: 1 })) : createCommentVNode("v-if", true)]),
+							key: "4"
+						} : void 0,
+						config.$key === "code-block" || config.slots?.codeBlockPanelTool ? {
+							name: "code-block-panel-tool",
+							fn: withCtx(({ id, data }) => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-tool", {
+								key: 0,
+								id,
+								data
+							}) : config.slots?.codeBlockPanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelTool), { key: 1 })) : createCommentVNode("v-if", true)]),
+							key: "5"
+						} : void 0,
+						config.$key === "code-block" || config.slots?.codeBlockPanelSearch ? {
+							name: "code-block-panel-search",
+							fn: withCtx(() => [config.$key === "code-block" ? renderSlot(_ctx.$slots, "code-block-panel-search", { key: 0 }) : config.slots?.codeBlockPanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.codeBlockPanelSearch), { key: 1 })) : createCommentVNode("v-if", true)]),
+							key: "6"
+						} : void 0,
+						config.$key === "layer" || config.slots?.layerNodeContent ? {
+							name: "layer-node-content",
+							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-content", {
+								key: 0,
+								data: nodeData
+							}) : config.slots?.layerNodeContent ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeContent), {
+								key: 1,
+								data: nodeData
+							}, null, 8, ["data"])) : createCommentVNode("v-if", true)]),
+							key: "7"
+						} : void 0,
+						config.$key === "layer" || config.slots?.layerNodeLabel ? {
+							name: "layer-node-label",
+							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-label", {
+								key: 0,
+								data: nodeData
+							}) : config.slots?.layerNodeLabel ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
+								key: 1,
+								data: nodeData
+							}, null, 8, ["data"])) : createCommentVNode("v-if", true)]),
+							key: "8"
+						} : void 0,
+						config.$key === "layer" || config.slots?.layerNodeTool ? {
+							name: "layer-node-tool",
+							fn: withCtx(({ data: nodeData }) => [config.$key === "layer" ? renderSlot(_ctx.$slots, "layer-node-tool", {
+								key: 0,
+								data: nodeData
+							}) : config.slots?.layerNodeTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.layerNodeTool), {
+								key: 1,
+								data: nodeData
+							}, null, 8, ["data"])) : createCommentVNode("v-if", true)]),
+							key: "9"
+						} : void 0,
+						config.$key === "data-source" || config.slots?.dataSourcePanelTool ? {
+							name: "data-source-panel-tool",
+							fn: withCtx(({ data }) => [config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-tool", {
+								key: 0,
+								data
+							}) : config.slots?.DataSourcePanelTool ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.DataSourcePanelTool), { key: 1 })) : createCommentVNode("v-if", true)]),
+							key: "10"
+						} : void 0,
+						config.$key === "data-source" || config.slots?.dataSourcePanelSearch ? {
+							name: "data-source-panel-search",
+							fn: withCtx(() => [config.$key === "data-source" ? renderSlot(_ctx.$slots, "data-source-panel-search", { key: 0 }) : config.slots?.dataSourcePanelSearch ? (openBlock(), createBlock(resolveDynamicComponent(config.slots.dataSourcePanelSearch), { key: 1 })) : createCommentVNode("v-if", true)]),
+							key: "11"
+						} : void 0
+					]), 1040)) : createCommentVNode("v-if", true)], 2)), [[vShow, [
+						config.text,
+						config.$key,
+						`${index}`
+					].includes(activeTabName.value)]]);
+				}), 128)),
+				tipsBarVisible.value && collecting.value && taskLength.value > 0 ? (openBlock(), createElementBlock("div", _hoisted_5, [createElementVNode("span", null, "依赖收集中(剩余任务：" + toDisplayString(taskLength.value) + ")", 1), createVNode(Icon_default, {
+					icon: unref(Close),
+					class: "close-icon",
+					onClick: _cache[1] || (_cache[1] = withModifiers(($event) => tipsBarVisible.value = false, ["stop"]))
+				}, null, 8, ["icon"])])) : createCommentVNode("v-if", true)
+			])) : createCommentVNode("v-if", true), (openBlock(), createBlock(Teleport, { to: "body" }, [(openBlock(true), createElementBlock(Fragment, null, renderList(sideBarItems.value, (config, index) => {
+				return openBlock(), createElementBlock(Fragment, null, [unref(floatBoxStates)[config.$key]?.status ? (openBlock(), createBlock(FloatingBox_default, {
+					key: config.$key ?? index,
+					visible: unref(floatBoxStates)[config.$key].status,
+					"onUpdate:visible": ($event) => unref(floatBoxStates)[config.$key].status = $event,
+					height: columnLeftHeight.value,
+					"onUpdate:height": _cache[2] || (_cache[2] = ($event) => columnLeftHeight.value = $event),
+					width: columnLeftWidth.value,
+					title: config.text,
+					position: {
+						left: unref(floatBoxStates)[config.$key].left,
+						top: unref(floatBoxStates)[config.$key].top
+					}
+				}, {
+					body: withCtx(() => [createElementVNode("div", _hoisted_6, [config && unref(floatBoxStates)[config.$key].status ? (openBlock(), createBlock(resolveDynamicComponent(config.component), mergeProps({
+						key: 0,
+						ref_for: true
+					}, config.props || {}, toHandlers(config?.listeners || {})), null, 16)) : createCommentVNode("v-if", true)])]),
+					_: 2
+				}, 1032, [
+					"visible",
+					"onUpdate:visible",
+					"height",
+					"width",
+					"title",
+					"position"
+				])) : createCommentVNode("v-if", true)], 64);
+			}), 256))]))], 64);
+		};
+	}
+});
+//#endregion
+export { Sidebar_vue_vue_type_script_setup_true_lang_default as default };

package/dist/es/layouts/sidebar/code-block/CodeBlockList.js

@@ -0,0 +1,5 @@
+import CodeBlockList_vue_vue_type_script_setup_true_lang_default from "./CodeBlockList.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/layouts/sidebar/code-block/CodeBlockList.vue
+var CodeBlockList_default = CodeBlockList_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { CodeBlockList_default as default };