@tmagic/editor 1.4.6 → 1.4.8

package/src/fields/DataSourceMocks.vue

@@ -1,255 +0,0 @@
-<template>
-  <div class="m-editor-data-source-fields">
-    <MagicTable :data="model[name]" :columns="columns"></MagicTable>
-
-    <div class="m-editor-data-source-fields-footer">
-      <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
-    </div>
-
-    <FloatingBox
-      v-model:visible="addDialogVisible"
-      v-model:width="width"
-      v-model:height="editorHeight"
-      :title="drawerTitle"
-      :position="boxPosition"
-    >
-      <template #body>
-        <MFormBox
-          ref="addDialog"
-          label-width="120px"
-          :config="formConfig"
-          :values="formValues"
-          :parentValues="model[name]"
-          :disabled="disabled"
-          @submit="formChangeHandler"
-        ></MFormBox>
-      </template>
-    </FloatingBox>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject, Ref, ref } from 'vue';
-
-import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
-import type { MockSchema } from '@tmagic/schema';
-import { type ColumnConfig, MagicTable } from '@tmagic/table';
-import { getDefaultValueFromFields } from '@tmagic/utils';
-
-import FloatingBox from '@editor/components/FloatingBox.vue';
-import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
-import CodeEditor from '@editor/layouts/CodeEditor.vue';
-import { Services } from '@editor/type';
-
-import { useEditorContentHeight } from '..';
-
-defineOptions({
-  name: 'MFieldsDataSourceMocks',
-});
-
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-mocks';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
-
-const emit = defineEmits(['change']);
-
-const services = inject<Services>('services');
-const width = defineModel<number>('width', { default: 670 });
-
-const drawerTitle = ref('');
-const formValues = ref<Record<string, any>>({});
-
-const formConfig: FormConfig = [
-  { name: 'index', type: 'hidden', filter: 'number', defaultValue: -1 },
-  {
-    name: 'title',
-    text: '名称',
-    rules: [
-      {
-        required: true,
-        message: '请输入字段名称',
-      },
-      {
-        required: true,
-        message: '请输入名称',
-      },
-    ],
-  },
-  {
-    name: 'description',
-    text: '描述',
-  },
-  {
-    name: 'enable',
-    text: '启用',
-    type: 'switch',
-  },
-  {
-    name: 'useInEditor',
-    text: '编辑器中使用',
-    type: 'switch',
-  },
-  {
-    name: 'data',
-    text: 'mock数据',
-    type: 'vs-code',
-    language: 'json',
-    options: inject('codeOptions', {}),
-    defaultValue: '{}',
-    height: '400px',
-    onChange: (formState: FormState | undefined, v: string | any) => {
-      if (typeof v !== 'string') return v;
-      return JSON.parse(v);
-    },
-    rules: [
-      {
-        validator: ({ value, callback }) => {
-          if (typeof value !== 'string') return callback();
-
-          try {
-            // 检测json是否存在语法错误
-            JSON.parse(value);
-
-            callback();
-          } catch (error: any) {
-            callback(error);
-          }
-        },
-      },
-    ],
-  },
-];
-
-const columns: ColumnConfig[] = [
-  {
-    type: 'expand',
-    component: CodeEditor,
-    props: (row: MockSchema) => ({
-      initValues: row.data,
-      language: 'json',
-      height: '150px',
-      options: {
-        readOnly: true,
-      },
-    }),
-  },
-  {
-    label: '名称',
-    prop: 'title',
-  },
-  {
-    label: '描述',
-    prop: 'description',
-  },
-  {
-    label: '是否启用',
-    prop: 'enable',
-    type: 'component',
-    component: TMagicSwitch,
-    props: (row: MockSchema) => ({
-      modelValue: row.enable,
-      activeValue: true,
-      inactiveValue: false,
-    }),
-    listeners: (row: MockSchema, index: number) => ({
-      'update:modelValue': (v: boolean) => {
-        toggleValue(row, 'enable', v, index);
-      },
-    }),
-  },
-  {
-    label: '编辑器中使用',
-    prop: 'useInEditor',
-    type: 'component',
-    component: TMagicSwitch,
-    props: (row: MockSchema) => ({
-      modelValue: row.useInEditor,
-      activeValue: true,
-      inactiveValue: false,
-    }),
-    listeners: (row: MockSchema, index: number) => ({
-      'update:modelValue': (v: boolean) => {
-        toggleValue(row, 'useInEditor', v, index);
-      },
-    }),
-  },
-  {
-    label: '操作',
-    fixed: 'right',
-    actions: [
-      {
-        text: '编辑',
-        handler: (row: MockSchema, index: number) => {
-          formValues.value = {
-            ...row,
-            index,
-          };
-          drawerTitle.value = `编辑${row.title}`;
-          calcBoxPosition();
-          addDialogVisible.value = true;
-        },
-      },
-      {
-        text: '删除',
-        buttonType: 'danger',
-        handler: async (row: MockSchema, index: number) => {
-          await tMagicMessageBox.confirm(`确定删除${row.title}?`, '提示');
-          props.model[props.name].splice(index, 1);
-          emit('change', props.model[props.name]);
-        },
-      },
-    ],
-  },
-];
-
-const newHandler = () => {
-  const isFirstRow = props.model[props.name].length === 0;
-  formValues.value = {
-    data: getDefaultValueFromFields(props.model.fields || []),
-    useInEditor: isFirstRow,
-    enable: isFirstRow,
-  };
-  drawerTitle.value = '新增Mock';
-  calcBoxPosition();
-  addDialogVisible.value = true;
-};
-
-const formChangeHandler = ({ index, ...value }: Record<string, any>) => {
-  if (index > -1) {
-    props.model[props.name][index] = value;
-  } else {
-    props.model[props.name].push(value);
-  }
-
-  addDialogVisible.value = false;
-
-  emit('change', props.model[props.name]);
-};
-
-const toggleValue = (row: MockSchema, key: 'enable' | 'useInEditor', value: boolean, index: number) => {
-  if (value) {
-    props.model[props.name].forEach((item: MockSchema) => {
-      item[key] = false;
-    });
-  }
-
-  formChangeHandler({
-    ...row,
-    [key]: value,
-    index,
-  });
-};
-
-const addDialogVisible = defineModel<boolean>('visible', { default: false });
-const { height: editorHeight } = useEditorContentHeight();
-const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
-const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
-</script>

package/src/fields/DataSourceSelect.vue

@@ -1,98 +0,0 @@
-<template>
-  <div class="m-fields-data-source-select">
-    <MSelect
-      :model="model"
-      :name="name"
-      :size="size"
-      :prop="prop"
-      :disabled="disabled"
-      :config="selectConfig"
-      :last-values="lastValues"
-      @change="changeHandler"
-    ></MSelect>
-
-    <TMagicButton
-      v-if="model[name] && hasDataSourceSidePanel"
-      class="m-fields-select-action-button"
-      :size="size"
-      @click="editHandler"
-      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
-    ></TMagicButton>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject } from 'vue';
-import { Edit, View } from '@element-plus/icons-vue';
-
-import { TMagicButton } from '@tmagic/design';
-import { type FieldProps, filterFunction, type FormState, MSelect, type SelectConfig } from '@tmagic/form';
-
-import MIcon from '@editor/components/Icon.vue';
-import type { DataSourceSelect, EventBus, Services } from '@editor/type';
-import { SideItemKey } from '@editor/type';
-
-defineOptions({
-  name: 'MFieldsDataSourceSelect',
-});
-
-const emit = defineEmits(['change']);
-
-const props = withDefaults(defineProps<FieldProps<DataSourceSelect>>(), {
-  disabled: false,
-});
-
-const mForm = inject<FormState | undefined>('mForm');
-const { dataSourceService, uiService } = inject<Services>('services') || {};
-const eventBus = inject<EventBus>('eventBus');
-
-const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
-
-const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
-
-const hasDataSourceSidePanel = computed(() =>
-  (uiService?.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
-);
-
-const selectConfig = computed<SelectConfig>(() => {
-  const { type, dataSourceType, value, ...config } = props.config;
-
-  const valueIsId = props.config.value === 'id';
-
-  return {
-    ...config,
-    type: 'select',
-    valueKey: 'dataSourceId',
-    options: dataSources.value
-      .filter((ds) => !props.config.dataSourceType || ds.type === props.config.dataSourceType)
-      .map((ds) => ({
-        value: valueIsId
-          ? ds.id
-          : {
-              isBindDataSource: true,
-              dataSourceType: ds.type,
-              dataSourceId: ds.id,
-            },
-        text: ds.title || ds.id,
-      })),
-  };
-});
-
-const changeHandler = (value: any) => {
-  emit('change', value);
-};
-
-const editHandler = () => {
-  const value = props.model[props.name];
-
-  if (!value) return;
-
-  const id = typeof value === 'string' ? value : value.dataSourceId;
-
-  const dataSource = dataSourceService?.getDataSourceById(id);
-
-  if (!dataSource) return;
-
-  eventBus?.emit('edit-data-source', id);
-};
-</script>

package/src/fields/EventSelect.vue

@@ -1,301 +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>
-          <MContainer
-            class="fullWidth"
-            :config="eventNameConfig"
-            :model="cardItem"
-            :disabled="disabled"
-            :size="size"
-            @change="onChangeHandler"
-          ></MContainer>
-          <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, FieldProps, FormState, PanelConfig } from '@tmagic/form';
-import { MContainer, MPanel } from '@tmagic/form';
-import { ActionType } from '@tmagic/schema';
-import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX } from '@tmagic/utils';
-
-import type { CodeSelectColConfig, DataSourceMethodSelectConfig, EventSelectConfig, Services } from '@editor/type';
-import { getCascaderOptionsFromFields } 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 fieldType = props.config.src === 'component' ? 'select' : 'cascader';
-  const defaultEventNameConfig = {
-    name: 'name',
-    text: '事件',
-    type: fieldType,
-    labelWidth: '40px',
-    checkStrictly: true,
-    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);
-        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,
-  };
-  return { ...defaultTargetCompConfig, ...props.config.targetCompConfig };
-});
-
-// 联动组件动作配置
-const compActionConfig = computed(() => {
-  const defaultCompActionConfig = {
-    name: 'method',
-    text: '动作',
-    type: 'select',
-    display: (mForm: FormState, { model }: { model: Record<any, any> }) => model.actionType === ActionType.COMP,
-    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,
-      }));
-    },
-  };
-  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>