@tmagic/editor 1.4.6 → 1.4.8

package/src/layouts/sidebar/Sidebar.vue

@@ -1,278 +0,0 @@
-<template>
-  <div class="m-editor-sidebar" v-if="data.type === 'tabs' && data.items.length">
-    <div class="m-editor-sidebar-header">
-      <div
-        class="m-editor-sidebar-header-item"
-        v-for="(config, index) in sideBarItems"
-        v-show="!floatBoxStates[config.$key]?.status"
-        draggable="true"
-        :key="config.$key ?? index"
-        :class="{ 'is-active': activeTabName === config.text }"
-        :style="config.tabStyle || {}"
-        @click="activeTabName = config.text || config.$key || `${index}`"
-        @dragstart="dragstartHandler"
-        @dragend="dragendHandler(config.$key, $event)"
-      >
-        <MIcon v-if="config.icon" :icon="config.icon"></MIcon>
-        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
-      </div>
-    </div>
-    <div
-      class="m-editor-sidebar-content"
-      v-for="(config, index) in sideBarItems"
-      :key="config.$key ?? index"
-      v-show="[config.text, config.$key, `${index}`].includes(activeTabName)"
-    >
-      <component
-        v-if="config && !floatBoxStates[config.$key]?.status"
-        :is="config.component"
-        v-bind="config.props || {}"
-        v-on="config?.listeners || {}"
-      >
-        <template
-          #component-list-panel-header
-          v-if="config.$key === 'component-list' || config.slots?.componentListPanelHeader"
-        >
-          <slot v-if="config.$key === 'component-list'" name="component-list-panel-header"></slot>
-          <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
-        </template>
-
-        <template
-          #component-list-item="{ component }"
-          v-if="config.$key === 'component-list' || config.slots?.componentListItem"
-        >
-          <slot v-if="config.$key === 'component-list'" name="component-list-item" :component="component"></slot>
-          <component
-            v-else-if="config.slots?.componentListItem"
-            :is="config.slots.componentListItem"
-            :component="component"
-          />
-        </template>
-
-        <template #layer-panel-header v-if="config.$key === 'layer' || config.slots?.layerPanelHeader">
-          <slot v-if="config.$key === 'layer'" name="layer-panel-header"></slot>
-          <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
-        </template>
-
-        <template #code-block-panel-header v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelHeader">
-          <slot v-if="config.$key === 'code-block'" name="code-block-panel-header"></slot>
-          <component v-else-if="config.slots?.codeBlockPanelHeader" :is="config.slots.codeBlockPanelHeader" />
-        </template>
-
-        <template
-          #code-block-panel-tool="{ id, data }"
-          v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelTool"
-        >
-          <slot v-if="config.$key === 'code-block'" name="code-block-panel-tool" :id="id" :data="data"></slot>
-          <component v-else-if="config.slots?.codeBlockPanelTool" :is="config.slots.codeBlockPanelTool" />
-        </template>
-
-        <template #code-block-panel-search v-if="config.$key === 'code-block' || config.slots?.codeBlockPanelSearch">
-          <slot v-if="config.$key === 'code-block'" name="code-block-panel-search"></slot>
-          <component v-else-if="config.slots?.codeBlockPanelSearch" :is="config.slots.codeBlockPanelSearch" />
-        </template>
-
-        <template
-          #layer-node-content="{ data: nodeData }"
-          v-if="config.$key === 'layer' || config.slots?.layerNodeContent"
-        >
-          <slot v-if="config.$key === 'layer'" name="layer-node-content" :data="nodeData"></slot>
-          <component v-else-if="config.slots?.layerNodeContent" :is="config.slots.layerNodeContent" :data="nodeData" />
-        </template>
-
-        <template #layer-node-label="{ data: nodeData }" v-if="config.$key === 'layer' || config.slots?.layerNodeLabel">
-          <slot v-if="config.$key === 'layer'" name="layer-node-label" :data="nodeData"></slot>
-          <component v-else-if="config.slots?.layerNodeLabel" :is="config.slots.layerNodeTool" :data="nodeData" />
-        </template>
-
-        <template #layer-node-tool="{ data: nodeData }" v-if="config.$key === 'layer' || config.slots?.layerNodeTool">
-          <slot v-if="config.$key === 'layer'" name="layer-node-tool" :data="nodeData"></slot>
-          <component v-else-if="config.slots?.layerNodeTool" :is="config.slots.layerNodeTool" :data="nodeData" />
-        </template>
-
-        <template
-          #data-source-panel-tool="{ data }"
-          v-if="config.$key === 'data-source' || config.slots?.dataSourcePanelTool"
-        >
-          <slot v-if="config.$key === 'data-source'" name="data-source-panel-tool" :data="data"></slot>
-          <component v-else-if="config.slots?.DataSourcePanelTool" :is="config.slots.DataSourcePanelTool" />
-        </template>
-
-        <template #data-source-panel-search v-if="config.$key === 'data-source' || config.slots?.dataSourcePanelSearch">
-          <slot v-if="config.$key === 'data-source'" name="data-source-panel-search"></slot>
-          <component v-else-if="config.slots?.dataSourcePanelSearch" :is="config.slots.dataSourcePanelSearch" />
-        </template>
-      </component>
-    </div>
-  </div>
-
-  <Teleport to="body">
-    <template v-for="(config, index) in sideBarItems">
-      <FloatingBox
-        :key="config.$key ?? index"
-        v-if="floatBoxStates[config.$key]?.status"
-        v-model:visible="floatBoxStates[config.$key].status"
-        v-model:height="columnLeftHeight"
-        :width="columnLeftWidth"
-        :title="config.text"
-        :position="{
-          left: floatBoxStates[config.$key].left,
-          top: floatBoxStates[config.$key].top,
-        }"
-      >
-        <template #body>
-          <div class="m-editor-slide-list-box">
-            <component
-              v-if="config && floatBoxStates[config.$key].status"
-              :is="config.component"
-              v-bind="config.props || {}"
-              v-on="config?.listeners || {}"
-            />
-          </div>
-        </template>
-      </FloatingBox>
-    </template>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue';
-import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
-
-import FloatingBox from '@editor/components/FloatingBox.vue';
-import MIcon from '@editor/components/Icon.vue';
-import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
-import { useFloatBox } from '@editor/hooks/use-float-box';
-import {
-  ColumnLayout,
-  type MenuButton,
-  type MenuComponent,
-  type Services,
-  type SideBarData,
-  type SidebarSlots,
-  type SideComponent,
-  type SideItem,
-  SideItemKey,
-} from '@editor/type';
-
-import CodeBlockListPanel from './code-block/CodeBlockListPanel.vue';
-import DataSourceListPanel from './data-source/DataSourceListPanel.vue';
-import LayerPanel from './layer/LayerPanel.vue';
-import ComponentListPanel from './ComponentListPanel.vue';
-
-defineSlots<SidebarSlots>();
-
-defineOptions({
-  name: 'MEditorSidebar',
-});
-
-const props = withDefaults(
-  defineProps<{
-    data: SideBarData;
-    layerContentMenu: (MenuButton | MenuComponent)[];
-    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
-  }>(),
-  {
-    data: () => ({
-      type: 'tabs',
-      status: '组件',
-      items: [SideItemKey.COMPONENT_LIST, SideItemKey.LAYER, SideItemKey.CODE_BLOCK, SideItemKey.DATA_SOURCE],
-    }),
-  },
-);
-
-const services = inject<Services>('services');
-
-const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
-const { height: columnLeftHeight } = useEditorContentHeight();
-
-const activeTabName = ref(props.data?.status);
-
-const getItemConfig = (data: SideItem): SideComponent => {
-  const map: Record<string, SideComponent> = {
-    [SideItemKey.COMPONENT_LIST]: {
-      $key: SideItemKey.COMPONENT_LIST,
-      type: 'component',
-      icon: Goods,
-      text: '组件',
-      component: ComponentListPanel,
-      slots: {},
-    },
-    layer: {
-      $key: 'layer',
-      type: 'component',
-      icon: List,
-      text: '已选组件',
-      props: {
-        layerContentMenu: props.layerContentMenu,
-        customContentMenu: props.customContentMenu,
-      },
-      component: LayerPanel,
-      slots: {},
-    },
-    [SideItemKey.CODE_BLOCK]: {
-      $key: 'code-block',
-      type: 'component',
-      icon: EditPen,
-      text: '代码编辑',
-      component: CodeBlockListPanel,
-      slots: {},
-    },
-    [SideItemKey.DATA_SOURCE]: {
-      $key: SideItemKey.DATA_SOURCE,
-      type: 'component',
-      icon: Coin,
-      text: '数据源',
-      component: DataSourceListPanel,
-      slots: {},
-    },
-  };
-
-  return typeof data === 'string' ? map[data] : data;
-};
-
-const sideBarItems = computed(() => props.data.items.map((item) => getItemConfig(item)));
-
-watch(
-  sideBarItems,
-  (items) => {
-    services?.uiService.set('sideBarItems', items);
-  },
-  {
-    immediate: true,
-  },
-);
-
-watch(
-  () => props.data.status,
-  (status) => {
-    activeTabName.value = status || '0';
-  },
-);
-
-const slideKeys = computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
-
-const { dragstartHandler, dragendHandler, floatBoxStates, showingBoxKeys } = useFloatBox(slideKeys);
-
-watch(
-  () => showingBoxKeys.value.length,
-  () => {
-    const isActiveTabShow = showingBoxKeys.value.some(
-      (key) => activeTabName.value === sideBarItems.value.find((v) => v.$key === key)?.text,
-    );
-    if (!isActiveTabShow && activeTabName.value) return;
-    const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key));
-    if (!nextSlideBarItem) {
-      activeTabName.value = '';
-      services?.uiService.set('hideSlideBar', true);
-      return;
-    }
-    services?.uiService.set('hideSlideBar', false);
-    activeTabName.value = nextSlideBarItem?.text;
-  },
-);
-
-defineExpose({
-  activeTabName,
-});
-</script>

package/src/layouts/sidebar/code-block/CodeBlockList.vue

@@ -1,142 +0,0 @@
-<template>
-  <Tree :data="codeList" :node-status-map="nodeStatusMap" @node-click="clickHandler">
-    <template #tree-node-label="{ data }">
-      <div
-        :class="{
-          code: data.type === 'code',
-          hook: data.type === 'key',
-          disabled: data.type === 'key' || data.type === 'code',
-        }"
-      >
-        {{ data.name }} {{ data.key ? `(${data.key})` : '' }}
-      </div>
-    </template>
-
-    <template #tree-node-tool="{ data }">
-      <TMagicTooltip v-if="data.type === 'code'" effect="dark" :content="editable ? '编辑' : '查看'" placement="bottom">
-        <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.key}`)"></Icon>
-      </TMagicTooltip>
-      <TMagicTooltip v-if="data.type === 'code' && editable" effect="dark" content="删除" placement="bottom">
-        <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.key}`)"></Icon>
-      </TMagicTooltip>
-      <slot name="code-block-panel-tool" :id="data.key" :data="data"></slot>
-    </template>
-  </Tree>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject } from 'vue';
-import { Close, Edit, View } from '@element-plus/icons-vue';
-
-import { DepTargetType } from '@tmagic/dep';
-import { tMagicMessage, tMagicMessageBox, TMagicTooltip } from '@tmagic/design';
-import type { Id, MNode } from '@tmagic/schema';
-
-import Icon from '@editor/components/Icon.vue';
-import Tree from '@editor/components/Tree.vue';
-import { useFilter } from '@editor/hooks/use-filter';
-import { useNodeStatus } from '@editor/hooks/use-node-status';
-import { type CodeBlockListSlots, CodeDeleteErrorType, type Services, type TreeNodeData } from '@editor/type';
-
-defineSlots<CodeBlockListSlots>();
-
-defineOptions({
-  name: 'MEditorCodeBlockList',
-});
-
-const props = defineProps<{
-  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
-}>();
-
-const emit = defineEmits<{
-  edit: [id: string];
-  remove: [id: string];
-}>();
-
-const services = inject<Services>('services');
-const { codeBlockService, depService, editorService } = services || {};
-
-// 代码块列表
-const codeList = computed<TreeNodeData[]>(() =>
-  Object.values(depService?.getTargets(DepTargetType.CODE_BLOCK) || {}).map((target) => {
-    // 组件节点
-    const compNodes: TreeNodeData[] = Object.entries(target.deps).map(([id, dep]) => ({
-      name: dep.name,
-      type: 'node',
-      id: `${target.id}_${id}`,
-      key: id,
-      items: dep.keys.map((key) => {
-        const data: TreeNodeData = { name: `${key}`, id: `${target.id}_${id}_${key}`, type: 'key' };
-        return data;
-      }),
-    }));
-
-    const data: TreeNodeData = {
-      id: target.id,
-      key: target.id,
-      name: target.name,
-      type: 'code',
-      codeBlockContent: codeBlockService?.getCodeContentById(target.id),
-      items: compNodes,
-    };
-
-    return data;
-  }),
-);
-
-const filterNode = (value: string, data: MNode): boolean => {
-  if (!value) {
-    return true;
-  }
-  return `${data.name}${data.id}`.toLocaleLowerCase().includes(value.toLocaleLowerCase());
-};
-
-const { nodeStatusMap } = useNodeStatus(codeList);
-const { filterTextChangeHandler } = useFilter(codeList, nodeStatusMap, filterNode);
-
-const editable = computed(() => codeBlockService?.getEditStatus());
-
-// 选中组件
-const selectComp = (compId: Id) => {
-  const stage = editorService?.get('stage');
-  editorService?.select(compId);
-  stage?.select(compId);
-};
-
-const clickHandler = (event: MouseEvent, data: any) => {
-  if (data.type === 'node') {
-    selectComp(data.key);
-  }
-};
-
-// 编辑代码块
-const editCode = (id: string) => {
-  emit('edit', id);
-};
-
-const deleteCode = async (id: string) => {
-  const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
-  const existBinds = Boolean(currentCode?.items?.length);
-  const undeleteableList = codeBlockService?.getUndeletableList() || [];
-  if (!existBinds && !undeleteableList.includes(id)) {
-    await tMagicMessageBox.confirm('确定删除该代码块吗？', '提示', {
-      confirmButtonText: '确定',
-      cancelButtonText: '取消',
-      type: 'warning',
-    });
-
-    // 无绑定关系，且不在不可删除列表中
-    emit('remove', id);
-  } else {
-    if (typeof props.customError === 'function') {
-      props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);
-    } else {
-      tMagicMessage.error('代码块删除失败');
-    }
-  }
-};
-
-defineExpose({
-  filter: filterTextChangeHandler,
-});
-</script>

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -1,70 +0,0 @@
-<template>
-  <TMagicScrollbar class="m-editor-code-block-list m-editor-layer-panel">
-    <slot name="code-block-panel-header">
-      <div class="search-wrapper">
-        <SearchInput @search="filterTextChangeHandler"></SearchInput>
-        <TMagicButton v-if="editable" class="create-code-button" type="primary" size="small" @click="createCodeBlock"
-          >新增</TMagicButton
-        >
-        <slot name="code-block-panel-search"></slot>
-      </div>
-    </slot>
-
-    <!-- 代码块列表 -->
-    <CodeBlockList ref="codeBlockList" :custom-error="customError" @edit="editCode" @remove="deleteCode">
-      <template #code-block-panel-tool="{ id, data }">
-        <slot name="code-block-panel-tool" :id="id" :data="data"></slot>
-      </template>
-    </CodeBlockList>
-  </TMagicScrollbar>
-
-  <CodeBlockEditor
-    v-if="codeConfig"
-    ref="codeBlockEditor"
-    :disabled="!editable"
-    :content="codeConfig"
-    @submit="submitCodeBlockHandler"
-  ></CodeBlockEditor>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, ref } from 'vue';
-
-import { TMagicButton, TMagicScrollbar } from '@tmagic/design';
-import type { Id } from '@tmagic/schema';
-
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import SearchInput from '@editor/components/SearchInput.vue';
-import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeBlockListPanelSlots, CodeDeleteErrorType, EventBus, Services } from '@editor/type';
-
-import CodeBlockList from './CodeBlockList.vue';
-
-defineSlots<CodeBlockListPanelSlots>();
-
-defineOptions({
-  name: 'MEditorCodeBlockListPanel',
-});
-
-defineProps<{
-  customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
-}>();
-
-const eventBus = inject<EventBus>('eventBus');
-const { codeBlockService } = inject<Services>('services') || {};
-
-const editable = computed(() => codeBlockService?.getEditStatus());
-
-const { codeBlockEditor, codeConfig, editCode, deleteCode, createCodeBlock, submitCodeBlockHandler } =
-  useCodeBlockEdit(codeBlockService);
-
-const codeBlockList = ref<InstanceType<typeof CodeBlockList>>();
-
-const filterTextChangeHandler = (val: string) => {
-  codeBlockList.value?.filter(val);
-};
-
-eventBus?.on('edit-code', (id: string) => {
-  editCode(id);
-});
-</script>

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -1,84 +0,0 @@
-<template>
-  <FloatingBox
-    v-model:visible="boxVisible"
-    v-model:width="width"
-    v-model:height="editorHeight"
-    :title="title"
-    :position="boxPosition"
-  >
-    <template #body>
-      <MFormBox
-        label-width="80px"
-        :title="title"
-        :config="dataSourceConfig"
-        :values="initValues"
-        :disabled="disabled"
-        style="height: 100%"
-        @submit="submitHandler"
-        @error="errorHandler"
-      ></MFormBox>
-    </template>
-  </FloatingBox>
-</template>
-
-<script setup lang="ts">
-import { inject, Ref, ref, watchEffect } from 'vue';
-
-import { tMagicMessage } from '@tmagic/design';
-import { FormConfig, MFormBox } from '@tmagic/form';
-import { DataSourceSchema } from '@tmagic/schema';
-
-import FloatingBox from '@editor/components/FloatingBox.vue';
-import { useEditorContentHeight } from '@editor/hooks';
-import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
-import type { Services } from '@editor/type';
-
-defineOptions({
-  name: 'MEditorDataSourceConfigPanel',
-});
-
-const props = defineProps<{
-  title?: string;
-  values: any;
-  disabled: boolean;
-}>();
-
-const boxVisible = defineModel<boolean>('visible', { default: false });
-const width = defineModel<number>('width', { default: 670 });
-
-const emit = defineEmits(['submit']);
-
-const services = inject<Services>('services');
-
-const initValues = ref<Partial<DataSourceSchema>>({});
-const dataSourceConfig = ref<FormConfig>([]);
-
-const { height: editorHeight } = useEditorContentHeight();
-
-const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
-const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
-
-watchEffect(() => {
-  initValues.value = props.values;
-  dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
-});
-
-const submitHandler = (values: any) => {
-  emit('submit', values);
-};
-
-const errorHandler = (error: any) => {
-  tMagicMessage.error(error.message);
-};
-
-defineExpose({
-  show() {
-    calcBoxPosition();
-    boxVisible.value = true;
-  },
-
-  hide() {
-    boxVisible.value = false;
-  },
-});
-</script>