@tmagic/editor 1.4.7 → 1.4.8

package/src/fields/EventSelect.vue

@@ -1,375 +0,0 @@
-<template>
-  <div class="m-fields-event-select">
-    <m-form-table
-      v-if="isOldVersion"
-      ref="eventForm"
-      name="events"
-      :size="size"
-      :disabled="disabled"
-      :model="model"
-      :config="tableConfig"
-      @change="onChangeHandler"
-    ></m-form-table>
-
-    <div v-else class="fullWidth">
-      <TMagicButton class="create-button" type="primary" :size="size" :disabled="disabled" @click="addEvent()"
-        >添加事件</TMagicButton
-      >
-      <MPanel
-        v-for="(cardItem, index) in model[name]"
-        :key="index"
-        :disabled="disabled"
-        :size="size"
-        :config="actionsConfig"
-        :model="cardItem"
-        :label-width="config.labelWidth || '100px'"
-        @change="onChangeHandler"
-      >
-        <template #header>
-          <MFormContainer
-            class="fullWidth"
-            :config="eventNameConfig"
-            :model="cardItem"
-            :disabled="disabled"
-            :size="size"
-            @change="onChangeHandler"
-          ></MFormContainer>
-          <TMagicButton
-            style="color: #f56c6c"
-            link
-            :icon="Delete"
-            :disabled="disabled"
-            :size="size"
-            @click="removeEvent(index)"
-          ></TMagicButton>
-        </template>
-      </MPanel>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { computed, inject } from 'vue';
-import { Delete } from '@element-plus/icons-vue';
-import { has } from 'lodash-es';
-
-import type { EventOption } from '@tmagic/core';
-import { TMagicButton } from '@tmagic/design';
-import type { CascaderOption, ChildConfig, FieldProps, FormState, PanelConfig } from '@tmagic/form';
-import { MContainer as MFormContainer, MPanel } from '@tmagic/form';
-import { ActionType, type MComponent, type MContainer } from '@tmagic/schema';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
-
-import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
-import { getCascaderOptionsFromFields, traverseNode } from '@editor/utils';
-
-defineOptions({
-  name: 'MFieldsEventSelect',
-});
-
-const props = defineProps<FieldProps<EventSelectConfig>>();
-
-const emit = defineEmits(['change']);
-
-const services = inject<Services>('services');
-
-const editorService = services?.editorService;
-const dataSourceService = services?.dataSourceService;
-const eventsService = services?.eventsService;
-const codeBlockService = services?.codeBlockService;
-
-// 事件名称下拉框表单配置
-const eventNameConfig = computed(() => {
-  const defaultEventNameConfig: ChildConfig = {
-    name: 'name',
-    text: '事件',
-    type: (mForm, { formValue }: any) => {
-      if (
-        props.config.src !== 'component' ||
-        (formValue.type === 'page-fragment-container' && formValue.pageFragmentId)
-      ) {
-        return 'cascader';
-      }
-      return 'select';
-    },
-    labelWidth: '40px',
-    checkStrictly: () => props.config.src !== 'component',
-    valueSeparator: '.',
-    options: (mForm: FormState, { formValue }: any) => {
-      let events: EventOption[] | CascaderOption[] = [];
-
-      if (!eventsService || !dataSourceService) return events;
-
-      if (props.config.src === 'component') {
-        events = eventsService.getEvent(formValue.type);
-
-        if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
-          const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
-          if (pageFragment) {
-            events = [
-              {
-                label: pageFragment.name || '迭代器容器',
-                value: pageFragment.id,
-                children: events,
-              },
-            ];
-            pageFragment.items.forEach((node) => {
-              traverseNode<MComponent | MContainer>(node, (node) => {
-                const nodeEvents = (node.type && eventsService.getEvent(node.type)) || [];
-
-                events.push({
-                  label: `${node.name}_${node.id}`,
-                  value: `${node.id}`,
-                  children: nodeEvents,
-                });
-              });
-            });
-
-            return events;
-          }
-        }
-
-        return events.map((option) => ({
-          text: option.label,
-          value: option.value,
-        }));
-      }
-
-      if (props.config.src === 'datasource') {
-        // 从数据源类型中获取到相关事件
-        events = dataSourceService.getFormEvent(formValue.type);
-        // 从数据源类型和实例中分别获取数据以追加数据变化的事件
-        const dataSource = dataSourceService.getDataSourceById(formValue.id);
-        const fields = dataSource?.fields || [];
-        if (fields.length > 0) {
-          return [
-            ...events,
-            {
-              label: '数据变化',
-              value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
-              children: getCascaderOptionsFromFields(fields),
-            },
-          ];
-        }
-
-        return events;
-      }
-    },
-  };
-  return { ...defaultEventNameConfig, ...props.config.eventNameConfig };
-});
-
-// 联动类型
-const actionTypeConfig = computed(() => {
-  const defaultActionTypeConfig = {
-    name: 'actionType',
-    text: '联动类型',
-    type: 'select',
-    defaultValue: ActionType.COMP,
-    options: () => [
-      {
-        text: '组件',
-        label: '组件',
-        value: ActionType.COMP,
-      },
-      {
-        text: '代码',
-        label: '代码',
-        disabled: !Object.keys(codeBlockService?.getCodeDsl() || {}).length,
-        value: ActionType.CODE,
-      },
-      {
-        text: '数据源',
-        label: '数据源',
-        disabled: !dataSourceService
-          ?.get('dataSources')
-          ?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length).length,
-        value: ActionType.DATA_SOURCE,
-      },
-    ],
-  };
-  return { ...defaultActionTypeConfig, ...props.config.actionTypeConfig };
-});
-
-// 联动组件配置
-const targetCompConfig = computed(() => {
-  const defaultTargetCompConfig = {
-    name: 'to',
-    text: '联动组件',
-    type: 'ui-select',
-    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
-    onChange: (MForm: FormState, v: string, { model }: any) => {
-      model.method = '';
-      return v;
-    },
-  };
-  return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
-});
-
-// 联动组件动作配置
-const compActionConfig = computed(() => {
-  const defaultCompActionConfig: ChildConfig = {
-    name: 'method',
-    text: '动作',
-    type: (mForm, { model }: any) => {
-      const to = editorService?.getNodeById(model.to);
-
-      if (to && to.type === 'page-fragment-container' && to.pageFragmentId) {
-        return 'cascader';
-      }
-
-      return 'select';
-    },
-    checkStrictly: () => props.config.src !== 'component',
-    display: (mForm, { model }: any) => model.actionType === ActionType.COMP,
-    options: (mForm: FormState, { model }: any) => {
-      const node = editorService?.getNodeById(model.to);
-      if (!node?.type) return [];
-
-      let methods: EventOption[] | CascaderOption[] = [];
-
-      methods = eventsService?.getMethod(node.type) || [];
-
-      if (node.type === 'page-fragment-container' && node.pageFragmentId) {
-        const pageFragment = editorService?.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
-        if (pageFragment) {
-          methods = [];
-          pageFragment.items.forEach((node: MComponent | MContainer) => {
-            traverseNode<MComponent | MContainer>(node, (node) => {
-              const nodeMethods = (node.type && eventsService?.getMethod(node.type)) || [];
-
-              if (nodeMethods.length) {
-                methods.push({
-                  label: `${node.name}_${node.id}`,
-                  value: `${node.id}`,
-                  children: nodeMethods,
-                });
-              }
-            });
-          });
-
-          return methods;
-        }
-      }
-
-      return methods.map((method) => ({
-        text: method.label,
-        value: method.value,
-      }));
-    },
-  };
-  return { ...defaultCompActionConfig, ...props.config.compActionConfig };
-});
-
-// 代码联动配置
-const codeActionConfig = computed(() => {
-  const defaultCodeActionConfig: CodeSelectColConfig = {
-    type: 'code-select-col',
-    text: '代码块',
-    name: 'codeId',
-    notEditable: () => !codeBlockService?.getEditStatus(),
-    display: (mForm, { model }) => model.actionType === ActionType.CODE,
-  };
-  return { ...defaultCodeActionConfig, ...props.config.codeActionConfig };
-});
-
-// 数据源联动配置
-const dataSourceActionConfig = computed(() => {
-  const defaultDataSourceActionConfig: DataSourceMethodSelectConfig = {
-    type: 'data-source-method-select',
-    text: '数据源方法',
-    name: 'dataSourceMethod',
-    notEditable: () => !services?.dataSourceService.get('editable'),
-    display: (mForm, { model }) => model.actionType === ActionType.DATA_SOURCE,
-  };
-  return { ...defaultDataSourceActionConfig, ...props.config.dataSourceActionConfig };
-});
-
-// 兼容旧的数据格式
-const tableConfig = computed(() => ({
-  type: 'table',
-  name: 'events',
-  items: [
-    {
-      name: 'name',
-      label: '事件名',
-      type: eventNameConfig.value.type,
-      options: (mForm: FormState, { formValue }: any) =>
-        eventsService?.getEvent(formValue.type).map((option: any) => ({
-          text: option.label,
-          value: option.value,
-        })),
-    },
-    {
-      name: 'to',
-      label: '联动组件',
-      type: 'ui-select',
-    },
-    {
-      name: 'method',
-      label: '动作',
-      type: compActionConfig.value.type,
-      options: (mForm: FormState, { model }: any) => {
-        const node = editorService?.getNodeById(model.to);
-        if (!node?.type) return [];
-
-        return eventsService?.getMethod(node.type).map((option: any) => ({
-          text: option.label,
-          value: option.value,
-        }));
-      },
-    },
-  ],
-}));
-
-// 组件动作组表单配置
-const actionsConfig = computed<PanelConfig>(() => ({
-  type: 'panel',
-  items: [
-    {
-      type: 'group-list',
-      name: 'actions',
-      expandAll: true,
-      enableToggleMode: false,
-      titlePrefix: '动作',
-      items: [
-        actionTypeConfig.value,
-        targetCompConfig.value,
-        compActionConfig.value,
-        codeActionConfig.value,
-        dataSourceActionConfig.value,
-      ],
-    },
-  ],
-}));
-
-// 是否为旧的数据格式
-const isOldVersion = computed(() => {
-  if (props.model[props.name].length === 0) return false;
-  return !has(props.model[props.name][0], 'actions');
-});
-
-// 添加事件
-const addEvent = () => {
-  const defaultEvent = {
-    name: '',
-    actions: [],
-  };
-  if (!props.model[props.name]) {
-    props.model[props.name] = [];
-  }
-  props.model[props.name].push(defaultEvent);
-  onChangeHandler();
-};
-
-// 删除事件
-const removeEvent = (index: number) => {
-  if (!props.name) return;
-  props.model[props.name].splice(index, 1);
-  onChangeHandler();
-};
-
-const onChangeHandler = () => {
-  emit('change', props.model);
-};
-</script>

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>