@tmagic/editor 1.4.6 → 1.4.8

package/src/fields/KeyValue.vue

@@ -1,137 +0,0 @@
-<template>
-  <div class="m-fields-key-value">
-    <div v-if="!showCode">
-      <div class="m-fields-key-value-item" v-for="(item, index) in records" :key="index">
-        <TMagicInput
-          placeholder="key"
-          v-model="records[index][0]"
-          :disabled="disabled"
-          :size="size"
-          @change="keyChangeHandler"
-        ></TMagicInput>
-        <span class="m-fileds-key-value-delimiter">:</span>
-        <TMagicInput
-          placeholder="value"
-          v-model="records[index][1]"
-          :disabled="disabled"
-          :size="size"
-          @change="valueChangeHandler"
-        ></TMagicInput>
-
-        <TMagicButton
-          class="m-fileds-key-value-delete"
-          type="danger"
-          :size="size"
-          :disabled="disabled"
-          circle
-          plain
-          :icon="Delete"
-          @click="deleteHandler(index)"
-        ></TMagicButton>
-      </div>
-
-      <TMagicButton type="primary" :size="size" :disabled="disabled" plain :icon="Plus" @click="addHandler"
-        >添加</TMagicButton
-      >
-    </div>
-
-    <MagicCodeEditor
-      v-if="config.advanced && showCode"
-      height="200px"
-      :init-values="model[name]"
-      language="json"
-      :options="{
-        readOnly: disabled,
-      }"
-      :parse="true"
-      @save="save"
-    ></MagicCodeEditor>
-
-    <TMagicButton
-      v-if="config.advanced"
-      size="default"
-      :disabled="disabled"
-      link
-      :icon="CodeIcon"
-      @click="showCode = !showCode"
-    ></TMagicButton>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, watchEffect } from 'vue';
-import { Delete, Plus } from '@element-plus/icons-vue';
-
-import { TMagicButton, TMagicInput } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
-
-import CodeIcon from '@editor/icons/CodeIcon.vue';
-import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
-
-defineOptions({
-  name: 'MFieldsKeyValue',
-});
-
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        type: 'key-value';
-        advanced?: boolean;
-      } & FormItem
-    >
-  >(),
-  {
-    disabled: false,
-  },
-);
-
-const emit = defineEmits<(e: 'change', value: Record<string, any>) => void>();
-
-const records = ref<[string, string][]>([]);
-const showCode = ref(false);
-
-watchEffect(() => {
-  const initValues: [string, any][] = Object.entries(props.model[props.name] || {});
-
-  for (const [, value] of initValues) {
-    if (typeof value !== 'string') {
-      showCode.value = true;
-      break;
-    }
-  }
-
-  records.value = initValues;
-});
-
-const getValue = () => {
-  const record: Record<string, string> = {};
-  records.value.forEach(([key, value]) => {
-    if (key) {
-      record[key] = value;
-    }
-  });
-  return record;
-};
-
-const keyChangeHandler = () => {
-  emit('change', getValue());
-};
-
-const valueChangeHandler = () => {
-  emit('change', getValue());
-};
-
-const addHandler = () => {
-  records.value.push(['', '']);
-};
-
-const deleteHandler = (index: number) => {
-  records.value.splice(index, 1);
-  emit('change', getValue());
-};
-
-const save = (v: string | any) => {
-  emit('change', v);
-};
-</script>

package/src/fields/PageFragmentSelect.vue

@@ -1,63 +0,0 @@
-<template>
-  <div class="m-fields-page-fragment-select">
-    <div class="page-fragment-select-container">
-      <!-- 页面片下拉框 -->
-      <m-form-container
-        class="select"
-        :config="selectConfig"
-        :model="model"
-        :size="size"
-        @change="changeHandler"
-      ></m-form-container>
-      <!-- 编辑按钮 -->
-      <Icon v-if="model[name]" class="icon" :icon="Edit" @click="editPageFragment(model[name])"></Icon>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject } from 'vue';
-import { Edit } from '@element-plus/icons-vue';
-
-import { FieldProps } from '@tmagic/form';
-import { Id, NodeType } from '@tmagic/schema';
-
-import Icon from '@editor/components/Icon.vue';
-import type { PageFragmentSelectConfig, Services } from '@editor/type';
-
-defineOptions({
-  name: 'MFieldsPageFragmentSelect',
-});
-
-const services = inject<Services>('services');
-const emit = defineEmits(['change']);
-
-const props = withDefaults(defineProps<FieldProps<PageFragmentSelectConfig>>(), {
-  disabled: false,
-});
-const pageList = computed(() =>
-  services?.editorService.get('root')?.items.filter((item) => item.type === NodeType.PAGE_FRAGMENT),
-);
-
-const selectConfig = {
-  type: 'select',
-  name: props.name,
-  options: () => {
-    if (pageList.value) {
-      return pageList.value.map((item) => ({
-        text: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
-        label: `${item.devconfig?.tabName || item.title || item.name}（${item.id}）`,
-        value: item.id,
-      }));
-    }
-    return [];
-  },
-};
-const changeHandler = async () => {
-  emit('change', props.model[props.name]);
-};
-
-const editPageFragment = (id: Id) => {
-  services?.editorService.select(id);
-};
-</script>

package/src/fields/UISelect.vue

@@ -1,135 +0,0 @@
-<template>
-  <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <TMagicButton type="danger" :icon="Delete" :disabled="disabled" :size="size" link style="padding: 0"
-      >取消</TMagicButton
-    >
-  </div>
-  <div class="m-fields-ui-select" v-else style="display: flex">
-    <template v-if="val">
-      <TMagicTooltip content="清除" placement="top">
-        <TMagicButton
-          style="padding: 0"
-          type="danger"
-          :icon="Close"
-          :disabled="disabled"
-          :size="size"
-          link
-          @click.stop="deleteHandler"
-        ></TMagicButton>
-      </TMagicTooltip>
-
-      <TMagicTooltip content="点击选中组件" placement="top">
-        <TMagicButton
-          link
-          style="padding: 0; margin: 0"
-          :disabled="disabled"
-          :size="size"
-          @click="selectNode(val)"
-          @mouseenter="highlight(val)"
-          @mouseleave="unhighlight"
-          >{{ `${toName}_${val}` }}</TMagicButton
-        >
-      </TMagicTooltip>
-    </template>
-
-    <TMagicTooltip v-else content="点击此处选择" placement="top">
-      <TMagicButton link style="padding: 0; margin: 0" :disabled="disabled" :size="size" @click="startSelect"
-        >点击此处选择</TMagicButton
-      >
-    </TMagicTooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject, ref } from 'vue';
-import { Close, Delete } from '@element-plus/icons-vue';
-import { throttle } from 'lodash-es';
-
-import { TMagicButton, TMagicTooltip } from '@tmagic/design';
-import type { FieldProps, FormItem, FormState } from '@tmagic/form';
-import type { Id } from '@tmagic/schema';
-
-import { Services, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
-
-defineOptions({
-  name: 'MFieldsUISelect',
-});
-
-const props = defineProps<FieldProps<{ type: 'ui-select' } & FormItem>>();
-
-const emit = defineEmits(['change']);
-
-const services = inject<Services>('services');
-const mForm = inject<FormState>('mForm');
-const val = computed(() => props.model[props.name]);
-const uiSelectMode = ref(false);
-
-const cancelHandler = () => {
-  if (!services?.uiService) return;
-  services.uiService.set('uiSelectMode', false);
-  uiSelectMode.value = false;
-  globalThis.document.removeEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
-};
-
-const clickHandler = ({ detail }: Event & { detail: any }) => {
-  if (detail.id) {
-    props.model[props.name] = detail.id;
-    emit('change', detail.id);
-    mForm?.$emit('field-change', props.prop, detail.id);
-  }
-
-  if (cancelHandler) {
-    cancelHandler();
-  }
-};
-
-const toName = computed(() => {
-  const config = services?.editorService.getNodeById(val.value);
-  return config?.name || '';
-});
-
-const startSelect = () => {
-  if (!services?.uiService) return;
-  services.uiService.set('uiSelectMode', true);
-  uiSelectMode.value = true;
-  globalThis.document.addEventListener(UI_SELECT_MODE_EVENT_NAME, clickHandler as EventListener);
-};
-
-const deleteHandler = () => {
-  if (props.model) {
-    props.model[props.name] = '';
-    emit('change', '');
-    mForm?.$emit('field-change', props.prop, '');
-  }
-};
-
-const selectNode = async (id: Id) => {
-  await services?.editorService.select(id);
-  services?.editorService.get('stage')?.select(id);
-  services?.stageOverlayService.get('stage')?.select(id);
-};
-
-const highlight = throttle((id: Id) => {
-  services?.editorService.highlight(id);
-  services?.editorService.get('stage')?.highlight(id);
-  services?.stageOverlayService.get('stage')?.highlight(id);
-}, 150);
-
-const unhighlight = () => {
-  services?.editorService.set('highlightNode', null);
-  services?.editorService.get('stage')?.clearHighlight();
-  services?.stageOverlayService.get('stage')?.clearHighlight();
-};
-</script>
-
-<style lang="scss">
-.m-fields-ui-select {
-  cursor: pointer;
-  i {
-    margin-right: 3px;
-  }
-  span {
-    color: #2882e0;
-  }
-}
-</style>

package/src/hooks/index.ts

@@ -1,24 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export * from './use-code-block-edit';
-export * from './use-data-source-method';
-export * from './use-stage';
-export * from './use-float-box';
-export * from './use-window-rect';
-export * from './use-editor-content-height';

package/src/hooks/use-code-block-edit.ts

@@ -1,83 +0,0 @@
-import { nextTick, ref } from 'vue';
-import { cloneDeep } from 'lodash-es';
-
-import { tMagicMessage } from '@tmagic/design';
-import type { CodeBlockContent } from '@tmagic/schema';
-
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import type { CodeBlockService } from '@editor/services/codeBlock';
-
-export const useCodeBlockEdit = (codeBlockService?: CodeBlockService) => {
-  const codeConfig = ref<CodeBlockContent>();
-  const codeId = ref<string>();
-  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
-
-  // 新增代码块
-  const createCodeBlock = async () => {
-    if (!codeBlockService) {
-      tMagicMessage.error('新增代码块失败');
-      return;
-    }
-
-    codeConfig.value = {
-      name: '',
-      content: `({app, params}) => {\n  // place your code here\n}`,
-      params: [],
-    };
-
-    codeId.value = await codeBlockService.getUniqueId();
-
-    await nextTick();
-
-    codeBlockEditor.value?.show();
-  };
-
-  // 编辑代码块
-  const editCode = async (id: string) => {
-    const codeBlock = await codeBlockService?.getCodeContentById(id);
-
-    if (!codeBlock) {
-      tMagicMessage.error('获取代码块内容失败');
-      return;
-    }
-
-    let codeContent = codeBlock.content;
-
-    if (typeof codeContent !== 'string') {
-      codeContent = codeContent.toString();
-    }
-
-    codeConfig.value = {
-      ...cloneDeep(codeBlock),
-      content: codeContent,
-    };
-    codeId.value = id;
-
-    await nextTick();
-    codeBlockEditor.value?.show();
-  };
-
-  // 删除代码块
-  const deleteCode = async (key: string) => {
-    codeBlockService?.deleteCodeDslByIds([key]);
-  };
-
-  const submitCodeBlockHandler = async (values: CodeBlockContent) => {
-    if (!codeId.value) return;
-
-    await codeBlockService?.setCodeDslById(codeId.value, values);
-
-    codeBlockEditor.value?.hide();
-  };
-
-  return {
-    codeId,
-    codeConfig,
-    codeBlockEditor,
-
-    createCodeBlock,
-    editCode,
-    deleteCode,
-    submitCodeBlockHandler,
-  };
-};

package/src/hooks/use-data-source-edit.ts

@@ -1,46 +0,0 @@
-import { computed, ref } from 'vue';
-
-import type { DataSourceSchema } from '@tmagic/schema';
-
-import DataSourceConfigPanel from '@editor/layouts/sidebar/data-source/DataSourceConfigPanel.vue';
-import type { DataSourceService } from '@editor/services/dataSource';
-
-export const useDataSourceEdit = (dataSourceService?: DataSourceService) => {
-  const dialogTitle = ref('');
-  const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();
-  const dataSourceValues = ref<Record<string, any>>({});
-
-  const editable = computed(() => dataSourceService?.get('editable') ?? true);
-
-  const editHandler = (id: string) => {
-    if (!editDialog.value) return;
-
-    dataSourceValues.value = {
-      ...dataSourceService?.getDataSourceById(id),
-    };
-
-    dialogTitle.value = `编辑${dataSourceValues.value.title || ''}`;
-
-    editDialog.value.show();
-  };
-
-  const submitDataSourceHandler = (value: DataSourceSchema) => {
-    if (value.id) {
-      dataSourceService?.update(value);
-    } else {
-      dataSourceService?.add(value);
-    }
-
-    editDialog.value?.hide();
-  };
-
-  return {
-    dialogTitle,
-    editDialog,
-    dataSourceValues,
-    editable,
-
-    editHandler,
-    submitDataSourceHandler,
-  };
-};

package/src/hooks/use-data-source-method.ts

@@ -1,100 +0,0 @@
-import { nextTick, ref } from 'vue';
-import { cloneDeep } from 'lodash-es';
-
-import { tMagicMessage } from '@tmagic/design';
-import type { CodeBlockContent, DataSourceSchema } from '@tmagic/schema';
-
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import { getConfig } from '@editor/utils/config';
-
-export const useDataSourceMethod = () => {
-  const codeConfig = ref<CodeBlockContent>();
-  const codeBlockEditor = ref<InstanceType<typeof CodeBlockEditor>>();
-
-  const dataSource = ref<DataSourceSchema>();
-  const dataSourceMethod = ref('');
-
-  return {
-    codeConfig,
-    codeBlockEditor,
-
-    createCode: async (model: DataSourceSchema) => {
-      codeConfig.value = {
-        name: '',
-        content: `({ params, dataSource, app }) => {\n  // place your code here\n}`,
-        params: [],
-      };
-
-      await nextTick();
-
-      dataSource.value = model;
-      dataSourceMethod.value = '';
-
-      codeBlockEditor.value?.show();
-    },
-
-    editCode: async (model: DataSourceSchema, methodName: string) => {
-      const method = model.methods?.find((method) => method.name === methodName);
-
-      if (!method) {
-        tMagicMessage.error('获取数据源方法失败');
-        return;
-      }
-
-      let codeContent = method.content;
-
-      if (typeof codeContent !== 'string') {
-        codeContent = codeContent.toString();
-      }
-
-      codeConfig.value = {
-        ...cloneDeep(method),
-        content: codeContent,
-      };
-
-      await nextTick();
-
-      dataSource.value = model;
-      dataSourceMethod.value = methodName;
-
-      codeBlockEditor.value?.show();
-    },
-
-    deleteCode: async (model: DataSourceSchema, methodName: string) => {
-      if (!model.methods) return;
-
-      const index = model.methods.findIndex((method) => method.name === methodName);
-
-      if (index === -1) {
-        return;
-      }
-
-      model.methods.splice(index, 1);
-    },
-
-    submitCode: (values: CodeBlockContent) => {
-      if (!dataSource.value) return;
-
-      if (!dataSource.value.methods) {
-        dataSource.value.methods = [];
-      }
-
-      if (values.content) {
-        // 在保存的时候转换代码内容
-        const parseDSL = getConfig('parseDSL');
-        if (typeof values.content === 'string') {
-          values.content = parseDSL<(...args: any[]) => any>(values.content);
-        }
-      }
-
-      if (dataSourceMethod.value) {
-        const index = dataSource.value.methods.findIndex((method) => method.name === dataSourceMethod.value);
-        dataSource.value.methods.splice(index, 1, values);
-      } else {
-        dataSource.value.methods.push(values);
-      }
-
-      codeBlockEditor.value?.hide();
-    },
-  };
-};

package/src/hooks/use-editor-content-height.ts

@@ -1,26 +0,0 @@
-import { computed, inject, ref, watch } from 'vue';
-
-import type { Services } from '@editor/type';
-
-export const useEditorContentHeight = () => {
-  const services = inject<Services>('services');
-  const frameworkHeight = computed(() => services?.uiService.get('frameworkRect').height || 0);
-  const navMenuHeight = computed(() => services?.uiService.get('navMenuRect').height || 0);
-  const editorContentHeight = computed(() => frameworkHeight.value - navMenuHeight.value);
-
-  const height = ref(0);
-  watch(
-    editorContentHeight,
-    () => {
-      if (height.value > 0 && height.value === editorContentHeight.value) return;
-      height.value = editorContentHeight.value;
-    },
-    {
-      immediate: true,
-    },
-  );
-
-  return {
-    height,
-  };
-};

package/src/hooks/use-filter.ts

@@ -1,55 +0,0 @@
-import { type Ref, ref } from 'vue';
-
-import type { Id, MNode } from '@tmagic/schema';
-
-import type { LayerNodeStatus, TreeNodeData } from '@editor/type';
-import { traverseNode } from '@editor/utils';
-import { updateStatus } from '@editor/utils/tree';
-
-export const useFilter = (
-  nodeData: Ref<TreeNodeData[]>,
-  nodeStatusMap: Ref<Map<Id, LayerNodeStatus> | undefined>,
-  filterNodeMethod: (value: string, data: MNode) => boolean,
-) => {
-  // tree方法：对树节点进行筛选时执行的方法
-  const filterIsMatch = (value: string | string[], data: MNode): boolean => {
-    const string = !Array.isArray(value) ? [value] : value;
-
-    if (!string.length) {
-      return true;
-    }
-
-    return string.some((v) => filterNodeMethod(v, data));
-  };
-
-  const filter = (text: string | string[]) => {
-    if (!nodeData.value.length) return;
-
-    nodeData.value.forEach((node) => {
-      traverseNode(node, (node: MNode, parents: MNode[]) => {
-        if (!nodeStatusMap.value) return;
-
-        const visible = filterIsMatch(text, node);
-        if (visible && parents.length) {
-          parents.forEach((parent) => {
-            updateStatus(nodeStatusMap.value!, parent.id, {
-              visible,
-              expand: true,
-            });
-          });
-        }
-
-        updateStatus(nodeStatusMap.value, node.id, {
-          visible,
-        });
-      });
-    });
-  };
-
-  return {
-    filterText: ref(''),
-    filterTextChangeHandler(text: string | string[]) {
-      filter(text);
-    },
-  };
-};