@tmagic/editor 1.4.7 → 1.4.8

package/src/fields/DataSourceMethodSelect.vue

@@ -1,153 +0,0 @@
-<template>
-  <div class="m-fields-data-source-method-select">
-    <div class="data-source-method-select-container">
-      <MContainer
-        class="select"
-        :config="cascaderConfig"
-        :model="model"
-        :size="size"
-        @change="onChangeHandler"
-      ></MContainer>
-
-      <TMagicButton
-        v-if="model[name] && isCustomMethod && hasDataSourceSidePanel"
-        class="m-fields-select-action-button"
-        :size="size"
-        @click="editCodeHandler"
-      >
-        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
-      </TMagicButton>
-    </div>
-
-    <CodeParams
-      v-if="paramsConfig.length"
-      name="params"
-      :model="model"
-      :size="size"
-      :disabled="disabled"
-      :params-config="paramsConfig"
-      @change="onChangeHandler"
-    ></CodeParams>
-  </div>
-</template>
-
-<script lang="ts" setup name="">
-import { computed, inject, ref } from 'vue';
-import { Edit, View } from '@element-plus/icons-vue';
-
-import { TMagicButton } from '@tmagic/design';
-import { createValues, type FieldProps, filterFunction, type FormState, MContainer } from '@tmagic/form';
-import type { Id } from '@tmagic/schema';
-
-import CodeParams from '@editor/components/CodeParams.vue';
-import MIcon from '@editor/components/Icon.vue';
-import type { CodeParamStatement, DataSourceMethodSelectConfig, EventBus, Services } from '@editor/type';
-import { SideItemKey } from '@editor/type';
-
-defineOptions({
-  name: 'MFieldsDataSourceMethodSelect',
-});
-
-const mForm = inject<FormState | undefined>('mForm');
-const services = inject<Services>('services');
-const eventBus = inject<EventBus>('eventBus');
-
-const emit = defineEmits(['change']);
-
-const dataSourceService = services?.dataSourceService;
-
-const props = withDefaults(defineProps<FieldProps<DataSourceMethodSelectConfig>>(), {
-  disabled: false,
-});
-
-const hasDataSourceSidePanel = computed(() =>
-  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
-);
-
-const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
-
-const dataSources = computed(() => dataSourceService?.get('dataSources'));
-
-const isCustomMethod = computed(() => {
-  const [id, name] = props.model[props.name];
-
-  const dataSource = dataSourceService?.getDataSourceById(id);
-
-  return Boolean(dataSource?.methods.find((method) => method.name === name));
-});
-
-const getParamItemsConfig = ([dataSourceId, methodName]: [Id, string] = ['', '']): CodeParamStatement[] => {
-  if (!dataSourceId) return [];
-
-  const paramStatements = dataSources.value
-    ?.find((item) => item.id === dataSourceId)
-    ?.methods?.find((item) => item.name === methodName)?.params;
-
-  if (!paramStatements) return [];
-
-  return paramStatements.map((paramState: CodeParamStatement) => ({
-    text: paramState.name,
-    ...paramState,
-  }));
-};
-
-const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model.dataSourceMethod));
-
-const setParamsConfig = (dataSourceMethod: [Id, string], formState: any = {}) => {
-  // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
-  paramsConfig.value = dataSourceMethod ? getParamItemsConfig(dataSourceMethod) : [];
-
-  if (paramsConfig.value.length) {
-    props.model.params = createValues(formState, paramsConfig.value, {}, props.model.params);
-  } else {
-    props.model.params = {};
-  }
-};
-
-const methodsOptions = computed(
-  () =>
-    dataSources.value
-      ?.filter((ds) => ds.methods?.length || dataSourceService?.getFormMethod(ds.type).length)
-      ?.map((ds) => ({
-        label: ds.title || ds.id,
-        value: ds.id,
-        children: [
-          ...(dataSourceService?.getFormMethod(ds.type) || []),
-          ...(ds.methods || []).map((method) => ({
-            label: method.name,
-            value: method.name,
-          })),
-        ],
-      })) || [],
-);
-
-const cascaderConfig = computed(() => ({
-  type: 'cascader',
-  name: props.name,
-  options: methodsOptions.value,
-  disable: props.disabled,
-  onChange: (formState: any, dataSourceMethod: [Id, string]) => {
-    setParamsConfig(dataSourceMethod, formState);
-
-    return dataSourceMethod;
-  },
-}));
-
-/**
- * 参数值修改更新
- */
-const onChangeHandler = (value: any) => {
-  props.model.params = value.params;
-  emit('change', props.model);
-};
-
-const editCodeHandler = () => {
-  const [id] = props.model[props.name];
-
-  const dataSource = dataSourceService?.getDataSourceById(id);
-
-  if (!dataSource) return;
-
-  eventBus?.emit('edit-data-source', id);
-};
-</script>

package/src/fields/DataSourceMethods.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="m-editor-data-source-methods">
-    <MagicTable :data="model[name]" :columns="methodColumns"></MagicTable>
-
-    <div class="m-editor-data-source-methods-footer">
-      <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="createCodeHandler"
-        >添加</TMagicButton
-      >
-    </div>
-
-    <CodeBlockEditor
-      v-if="codeConfig"
-      ref="codeBlockEditor"
-      :disabled="disabled"
-      :content="codeConfig"
-      :is-data-source="true"
-      :data-source-type="model.type"
-      @submit="submitCodeHandler"
-    ></CodeBlockEditor>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { TMagicButton } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
-import type { CodeBlockContent } from '@tmagic/schema';
-import { type ColumnConfig, MagicTable } from '@tmagic/table';
-
-import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
-import type { CodeParamStatement } from '@editor/type';
-
-defineOptions({
-  name: 'MFieldsDataSourceMethods',
-});
-
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-methods';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
-
-const emit = defineEmits(['change']);
-
-const { codeConfig, codeBlockEditor, createCode, editCode, deleteCode, submitCode } = useDataSourceMethod();
-
-const methodColumns: ColumnConfig[] = [
-  {
-    label: '名称',
-    prop: 'name',
-  },
-  {
-    label: '描述',
-    prop: 'desc',
-  },
-  {
-    label: '执行时机',
-    prop: 'timing',
-  },
-  {
-    label: '参数',
-    prop: 'params',
-    formatter: (params: CodeParamStatement[]) => params.map((item) => item.name).join(', '),
-  },
-  {
-    label: '操作',
-    fixed: 'right',
-    actions: [
-      {
-        text: '编辑',
-        handler: (row: CodeBlockContent) => {
-          editCode(props.model, row.name);
-          emit('change', props.model[props.name]);
-        },
-      },
-      {
-        text: '删除',
-        buttonType: 'danger',
-        handler: (row: CodeBlockContent) => {
-          deleteCode(props.model, row.name);
-          emit('change', props.model[props.name]);
-        },
-      },
-    ],
-  },
-];
-
-const createCodeHandler = () => {
-  createCode(props.model);
-
-  emit('change', props.model[props.name]);
-};
-
-const submitCodeHandler = (values: CodeBlockContent) => {
-  submitCode(values);
-
-  emit('change', props.model[props.name]);
-};
-</script>

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>