@tmagic/editor 1.4.7 → 1.4.8

package/src/fields/DataSourceFields.vue

@@ -1,323 +0,0 @@
-<template>
-  <div class="m-editor-data-source-fields">
-    <MagicTable :data="model[name]" :columns="fieldColumns"></MagicTable>
-
-    <div class="m-editor-data-source-fields-footer">
-      <TMagicButton size="small" :disabled="disabled" plain @click="newFromJsonHandler()">快速添加</TMagicButton>
-      <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="fieldTitle"
-      :position="boxPosition"
-    >
-      <template #body>
-        <MFormBox
-          label-width="80px"
-          :title="fieldTitle"
-          :config="dataSourceFieldsConfig"
-          :values="fieldValues"
-          :parentValues="model[name]"
-          :disabled="disabled"
-          @submit="fieldChange"
-        ></MFormBox>
-      </template>
-    </FloatingBox>
-
-    <FloatingBox
-      v-model:visible="addFromJsonDialogVisible"
-      v-model:width="width"
-      v-model:height="editorHeight"
-      title="快速添加数据定义"
-      :position="boxPosition"
-    >
-      <template #body>
-        <MFormBox
-          :config="jsonFromConfig"
-          :values="jsonFromValues"
-          :disabled="disabled"
-          @submit="addFromJsonFromChange"
-        ></MFormBox>
-      </template>
-    </FloatingBox>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { inject, Ref, ref } from 'vue';
-
-import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
-import type { DataSchema } from '@tmagic/schema';
-import { type ColumnConfig, MagicTable } from '@tmagic/table';
-import { getDefaultValueFromFields } from '@tmagic/utils';
-
-import FloatingBox from '@editor/components/FloatingBox.vue';
-import { useEditorContentHeight } from '@editor/hooks';
-import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
-import type { Services } from '@editor/type';
-
-defineOptions({
-  name: 'MFieldsDataSourceFields',
-});
-
-const props = withDefaults(
-  defineProps<
-    FieldProps<{
-      type: 'data-source-fields';
-    }>
-  >(),
-  {
-    disabled: false,
-  },
-);
-
-const emit = defineEmits(['change']);
-
-const services = inject<Services>('services');
-
-const fieldValues = ref<Record<string, any>>({});
-const fieldTitle = ref('');
-
-const width = defineModel<number>('width', { default: 670 });
-
-const newHandler = () => {
-  fieldValues.value = {};
-  fieldTitle.value = '新增属性';
-  calcBoxPosition();
-  addDialogVisible.value = true;
-};
-
-const fieldChange = ({ 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 fieldColumns: ColumnConfig[] = [
-  {
-    label: '属性名称',
-    prop: 'title',
-  },
-  {
-    label: '属性key',
-    prop: 'name',
-  },
-  {
-    label: '属性描述',
-    prop: 'description',
-  },
-  {
-    label: '默认值',
-    prop: 'defaultValue',
-    formatter(item, row) {
-      try {
-        return JSON.stringify(row.defaultValue);
-      } catch (e) {
-        return row.defaultValue;
-      }
-    },
-  },
-  {
-    label: '操作',
-    fixed: 'right',
-    actions: [
-      {
-        text: '编辑',
-        handler: (row: Record<string, any>, index: number) => {
-          fieldValues.value = {
-            ...row,
-            index,
-          };
-          fieldTitle.value = `编辑${row.title}`;
-          calcBoxPosition();
-          addDialogVisible.value = true;
-        },
-      },
-      {
-        text: '删除',
-        buttonType: 'danger',
-        handler: async (row: Record<string, any>, index: number) => {
-          await tMagicMessageBox.confirm(`确定删除${row.title}(${row.name})?`, '提示');
-          props.model[props.name].splice(index, 1);
-          emit('change', props.model[props.name]);
-        },
-      },
-    ],
-  },
-];
-
-const dataSourceFieldsConfig: FormConfig = [
-  { name: 'index', type: 'hidden', filter: 'number', defaultValue: -1 },
-  {
-    name: 'type',
-    text: '数据类型',
-    type: 'select',
-    defaultValue: 'string',
-    options: [
-      { text: '字符串', value: 'string' },
-      { text: '数字', value: 'number' },
-      { text: '布尔值', value: 'boolean' },
-      { text: '对象', value: 'object' },
-      { text: '数组', value: 'array' },
-      { text: 'null', value: 'null' },
-      { text: 'any', value: 'any' },
-    ],
-  },
-  {
-    name: 'name',
-    text: '字段名称',
-    rules: [
-      {
-        required: true,
-        message: '请输入字段名称',
-      },
-      {
-        validator: ({ value, callback }, { model, parent }) => {
-          const index = parent.findIndex((item: Record<string, any>) => item.name === value);
-          if ((model.index === -1 && index > -1) || (model.index > -1 && index > -1 && index !== model.index)) {
-            return callback(`属性key（${value}）已存在`);
-          }
-          callback();
-        },
-      },
-    ],
-  },
-  {
-    name: 'title',
-    text: '展示名称',
-    rules: [
-      {
-        required: true,
-        message: '请输入展示名称',
-      },
-    ],
-  },
-  {
-    name: 'description',
-    text: '描述',
-    type: 'textarea',
-  },
-  {
-    name: 'defaultValue',
-    text: '默认值',
-    height: '200px',
-    parse: true,
-    type: (mForm: FormState | undefined, { model }: any) => {
-      if (model.type === 'number') return 'number';
-      if (model.type === 'boolean') return 'select';
-      if (model.type === 'string') return 'text';
-
-      return 'vs-code';
-    },
-    options: [
-      { text: 'true', value: true },
-      { text: 'false', value: false },
-    ],
-  },
-  {
-    name: 'enable',
-    text: '是否可用',
-    type: 'switch',
-    defaultValue: true,
-  },
-  {
-    name: 'fields',
-    type: 'data-source-fields',
-    defaultValue: [],
-    display: (formState: FormState | undefined, { model }: any) => model.type === 'object' || model.type === 'array',
-  },
-];
-
-const jsonFromConfig: FormConfig = [
-  {
-    name: 'data',
-    type: 'vs-code',
-    labelWidth: '0',
-    language: 'json',
-    height: '600px',
-    options: inject('codeOptions', {}),
-  },
-];
-
-const jsonFromValues = ref({
-  data: {},
-});
-
-const newFromJsonHandler = () => {
-  jsonFromValues.value.data = getDefaultValueFromFields(props.model[props.name]);
-  calcBoxPosition();
-  addFromJsonDialogVisible.value = true;
-};
-
-const getValueType = (value: any) => {
-  if (Array.isArray(value)) return 'array';
-  if (value === null) return 'null';
-  if (typeof value === 'object') return 'object';
-  if (typeof value === 'number') return 'number';
-  if (typeof value === 'boolean') return 'boolean';
-  if (typeof value === 'string') return 'string';
-
-  return 'any';
-};
-
-const getFieldsConfig = (value: any, fields: DataSchema[] = []) => {
-  if (!value || typeof value !== 'object') throw new Error('数据格式错误');
-
-  const newFields: DataSchema[] = [];
-  Object.entries(value).forEach(([key, value]) => {
-    const type = getValueType(value);
-
-    const oldField = fields.find((field) => field.name === key);
-
-    let childFields: DataSchema[] = [];
-    if (Array.isArray(value) && value.length > 0) {
-      childFields = getFieldsConfig(value[0], oldField?.fields);
-    } else if (type === 'object') {
-      childFields = getFieldsConfig(value, oldField?.fields);
-    }
-
-    newFields.push({
-      name: key,
-      title: oldField?.title || key,
-      type,
-      description: oldField?.description || '',
-      enable: oldField?.enable ?? true,
-      defaultValue: value,
-      fields: childFields,
-    });
-  });
-
-  return newFields;
-};
-
-const addFromJsonFromChange = ({ data }: { data: string }) => {
-  try {
-    const value = JSON.parse(data);
-
-    props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
-
-    addFromJsonDialogVisible.value = false;
-
-    emit('change', props.model[props.name]);
-  } catch (e: any) {
-    tMagicMessage.error(e.message);
-  }
-};
-
-const addDialogVisible = defineModel<boolean>('visible', { default: false });
-const addFromJsonDialogVisible = defineModel<boolean>('visible1', { 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/DataSourceInput.vue

@@ -1,331 +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 { isNumber } from '@tmagic/utils';
-
-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.replaceAll(/\[(\d+)\]/g, '.$1').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) {
-    if (isNumber(key)) {
-      key = keys.shift();
-      continue;
-    }
-
-    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>