@tmagic/editor 1.4.6 → 1.4.8

package/src/fields/DataSourceInput.vue

@@ -1,325 +0,0 @@
-<template>
-  <component
-    v-if="disabled || isFocused"
-    :is="getConfig('components')?.autocomplete.component || 'el-autocomplete'"
-    class="tmagic-design-auto-complete"
-    ref="autocomplete"
-    v-model="state"
-    v-bind="
-      getConfig('components')?.autocomplete.props({
-        disabled,
-        size,
-        fetchSuggestions: querySearch,
-        triggerOnFocus: false,
-        clearable: true,
-      }) || {}
-    "
-    style="width: 100%"
-    @blur="blurHandler"
-    @input="inputHandler"
-    @select="selectHandler"
-  >
-    <template #suffix>
-      <Icon :icon="Coin" />
-    </template>
-    <template #default="{ item }">
-      <div style="display: flex; flex-direction: column; line-height: 1.2em">
-        <div>{{ item.text }}</div>
-        <span style="font-size: 10px; color: rgba(0, 0, 0, 0.6)">{{ item.value }}</span>
-      </div>
-    </template>
-  </component>
-  <div
-    :class="`tmagic-data-source-input-text el-input t-input t-size-${size?.[0]} el-input--${size}`"
-    @mouseup="mouseupHandler"
-    v-else
-  >
-    <div :class="`tmagic-data-source-input-text-wrapper el-input__wrapper ${isFocused ? ' is-focus' : ''}`">
-      <div class="el-input__inner t-input__inner">
-        <template v-for="(item, index) in displayState">
-          <span :key="index" v-if="item.type === 'text'" style="margin-right: 2px">{{ item.value }}</span>
-          <TMagicTag :key="index" :size="size" v-if="item.type === 'var'">{{ item.value }}</TMagicTag>
-        </template>
-
-        <Icon class="tmagic-data-source-input-icon" :icon="Coin" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, inject, nextTick, ref, watch } from 'vue';
-import { Coin } from '@element-plus/icons-vue';
-
-import { getConfig, TMagicAutocomplete, TMagicTag } from '@tmagic/design';
-import type { FieldProps, FormItem } from '@tmagic/form';
-import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
-
-import Icon from '@editor/components/Icon.vue';
-import type { Services } from '@editor/type';
-import { getDisplayField } from '@editor/utils/data-source';
-
-defineOptions({
-  name: 'MFieldsDataSourceInput',
-});
-
-const props = withDefaults(
-  defineProps<
-    FieldProps<
-      {
-        type: 'data-source-input';
-      } & FormItem
-    >
-  >(),
-  {
-    disabled: false,
-  },
-);
-
-const emit = defineEmits<{
-  change: [value: string];
-}>();
-
-const { dataSourceService } = inject<Services>('services') || {};
-
-const autocomplete = ref<InstanceType<typeof TMagicAutocomplete>>();
-const isFocused = ref(false);
-const state = ref('');
-const displayState = ref<{ value: string; type: 'var' | 'text' }[]>([]);
-
-const input = computed<HTMLInputElement>(() => autocomplete.value?.inputRef?.input);
-const dataSources = computed(() => dataSourceService?.get('dataSources') || []);
-
-const setDisplayState = () => {
-  displayState.value = getDisplayField(dataSources.value, state.value);
-};
-
-watch(
-  () => props.model[props.name],
-  (value = '') => {
-    state.value = value;
-
-    setDisplayState();
-  },
-  { immediate: true },
-);
-
-const mouseupHandler = async () => {
-  isFocused.value = true;
-  await nextTick();
-  autocomplete.value?.focus();
-};
-
-const blurHandler = () => {
-  isFocused.value = false;
-
-  setDisplayState();
-
-  emit('change', state.value);
-};
-
-const changeHandler = (v: string) => {
-  emit('change', v);
-};
-
-let inputText = '';
-
-const inputHandler = (v: string) => {
-  if (!v) {
-    inputText = v;
-  }
-};
-
-/**
- * 光标位置是不是}
- * @param selectionStart 光标位置
- */
-const isRightCurlyBracket = (selectionStart = 0) => {
-  const lastChar = inputText.substring(selectionStart - 1, selectionStart);
-  return lastChar === '}';
-};
-
-/**
- * 获取光标位置
- */
-const getSelectionStart = () => {
-  let selectionStart = input.value?.selectionStart || 0;
-
-  // 输入法可能会自动补全}，如果当前光标前面一个字符是}，则光标前移一位
-  if (isRightCurlyBracket(selectionStart)) {
-    selectionStart -= 1;
-  }
-
-  return selectionStart;
-};
-
-/**
- * 当前输入的是{
- * @param leftCurlyBracketIndex {字符索引
- */
-const curCharIsLeftCurlyBracket = (leftCurlyBracketIndex: number) =>
-  leftCurlyBracketIndex > 0 && leftCurlyBracketIndex === getSelectionStart() - 1;
-
-/**
- * 当前输入的是.
- * @param leftCurlyBracketIndex .字符索引
- */
-const curCharIsDot = (dotIndex: number) => dotIndex > -1 && dotIndex === getSelectionStart() - 1;
-
-/**
- * @param leftCurlyBracketIndex 左大括号字符索引
- * @param cb 建议的方法
- */
-const dsQuerySearch = (queryString: string, leftCurlyBracketIndex: number, cb: (data: { value: string }[]) => void) => {
-  let result: DataSourceSchema[] = [];
-
-  if (curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
-    // 当前输入的是{
-    result = dataSources.value;
-  } else if (leftCurlyBracketIndex > 0) {
-    // 当前输入的是{xx
-    const queryName = queryString.substring(leftCurlyBracketIndex + 1).toLowerCase();
-    result = dataSources.value.filter((ds) => ds.title?.toLowerCase().includes(queryName) || ds.id.includes(queryName));
-  }
-
-  cb(
-    result.map((ds) => ({
-      value: ds.id,
-      text: ds.title,
-      type: 'dataSource',
-    })),
-  );
-};
-
-/**
- * 字段提示
- * @param queryString 当前输入框内的字符串
- * @param leftAngleIndex {字符索引
- * @param dotIndex .字符索引
- * @param cb 建议回调
- */
-const fieldQuerySearch = (
-  queryString: string,
-  leftAngleIndex: number,
-  dotIndex: number,
-  cb: (data: { value: string }[]) => void,
-) => {
-  let result: DataSchema[] = [];
-
-  const dsKey = queryString.substring(leftAngleIndex + 1, dotIndex);
-
-  // 可能是xx.xx.xx，存在链式调用
-  const keys = dsKey.split('.');
-
-  // 最前的是数据源id
-  const dsId = keys.shift();
-  const ds = dataSources.value.find((ds) => ds.id === dsId);
-  if (!ds) {
-    cb([]);
-    return;
-  }
-
-  let fields = ds.fields || [];
-
-  // 后面这些是字段
-  let key = keys.shift();
-  while (key) {
-    for (const field of fields) {
-      if (field.name === key) {
-        fields = field.fields || [];
-        key = keys.shift();
-        break;
-      }
-    }
-  }
-
-  if (curCharIsDot(dotIndex)) {
-    // 当前输入的是.
-    result = fields || [];
-  } else if (dotIndex > -1) {
-    const queryName = queryString.substring(dotIndex + 1).toLowerCase();
-    result =
-      fields.filter(
-        (field) => field.name?.toLowerCase().includes(queryName) || field.title?.toLowerCase().includes(queryName),
-      ) || [];
-  }
-
-  cb(
-    result.map((field) => ({
-      value: field.name,
-      text: field.title,
-      type: 'field',
-    })),
-  );
-};
-
-/**
- * 数据源提示
- * @param queryString 当前输入框内的字符串
- * @param cb 建议回调
- */
-const querySearch = (queryString: string, cb: (data: { value: string }[]) => void) => {
-  inputText = queryString;
-
-  const selectionStart = getSelectionStart();
-
-  const curQueryString = queryString.substring(0, selectionStart);
-
-  const fieldKeyStringLastIndex = curQueryString.lastIndexOf('.');
-  const dsKeyStringLastIndex = curQueryString.lastIndexOf('${') + 1;
-
-  const isFieldTip = fieldKeyStringLastIndex > dsKeyStringLastIndex;
-
-  if (isFieldTip) {
-    fieldQuerySearch(curQueryString, dsKeyStringLastIndex, fieldKeyStringLastIndex, cb);
-  } else {
-    dsQuerySearch(curQueryString, dsKeyStringLastIndex, cb);
-  }
-};
-
-/**
- * 选择建议
- * @param value 建议值
- * @param type 建议类型，是数据源还是字段
- */
-const selectHandler = async ({ value, type }: { value: string; type: 'dataSource' | 'field' }) => {
-  const isDataSource = type === 'dataSource';
-  const selectionStart = input.value?.selectionStart || 0;
-  let startText = inputText.substring(0, selectionStart);
-
-  const dotIndex = startText.lastIndexOf('.');
-  const leftCurlyBracketIndex = startText.lastIndexOf('${') + 1;
-
-  const endText = inputText.substring(selectionStart);
-
-  let suggestText = value;
-
-  if (isDataSource) {
-    if (!curCharIsLeftCurlyBracket(leftCurlyBracketIndex)) {
-      startText = startText.substring(0, leftCurlyBracketIndex + 1);
-    }
-
-    // 当前光标后一位是否为}，不是的话需要补上
-    if (!isRightCurlyBracket(selectionStart + 1)) {
-      suggestText = `${suggestText}}`;
-    }
-  } else if (!curCharIsDot(dotIndex)) {
-    startText = startText.substring(0, dotIndex + 1);
-  }
-
-  state.value = `${startText}${suggestText}${endText}`;
-
-  await nextTick();
-
-  // 由于选择数据源时会在后面补全}, 所以光标要前移2位
-  let newSelectionStart = 0;
-  if (isDataSource) {
-    newSelectionStart = leftCurlyBracketIndex + suggestText.length;
-  } else {
-    newSelectionStart = dotIndex + suggestText.length + 1;
-  }
-  input.value?.setSelectionRange(newSelectionStart, newSelectionStart);
-
-  changeHandler(state.value);
-};
-</script>

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>