@tmagic/editor 1.4.8 → 1.4.10

package/src/fields/Code.vue

@@ -0,0 +1,50 @@
+<template>
+  <MagicCodeEditor
+    :height="config.height"
+    :init-values="model[name]"
+    :language="config.language"
+    :options="{
+      ...config.options,
+      readOnly: disabled,
+    }"
+    :parse="config.parse"
+    @save="save"
+  ></MagicCodeEditor>
+</template>
+
+<script lang="ts" setup>
+import type { FieldProps, FormItem } from '@tmagic/form';
+
+import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
+
+defineOptions({
+  name: 'MFieldsVsCode',
+});
+
+const emit = defineEmits<{
+  change: [value: string | any];
+}>();
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<
+      {
+        language?: string;
+        options?: {
+          [key: string]: any;
+        };
+        height?: string;
+        parse?: boolean;
+      } & FormItem
+    >
+  >(),
+  {
+    disabled: false,
+  },
+);
+
+const save = (v: string | any) => {
+  props.model[props.name] = v;
+  emit('change', v);
+};
+</script>

package/src/fields/CodeLink.vue

@@ -0,0 +1,80 @@
+<template>
+  <m-fields-link :config="formConfig" :model="modelValue" name="form" @change="changeHandler"></m-fields-link>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, watch } from 'vue';
+import serialize from 'serialize-javascript';
+
+import type { FieldProps, FormItem } from '@tmagic/form';
+
+import { getConfig } from '@editor/utils/config';
+
+defineOptions({
+  name: 'MFieldsCodeLink',
+});
+
+const props = defineProps<
+  FieldProps<
+    {
+      type: 'code-link';
+      formTitle?: string;
+      codeOptions?: Object;
+    } & FormItem
+  >
+>();
+
+const emit = defineEmits(['change']);
+
+const formConfig = computed(() => {
+  const { codeOptions, ...config } = props.config;
+  return {
+    ...config,
+    text: '',
+    type: 'link',
+    form: [
+      {
+        name: props.name,
+        type: 'vs-code',
+        options: {
+          tabSize: 2,
+          ...(codeOptions || {}),
+        },
+      },
+    ],
+  };
+});
+
+const modelValue = reactive<{ form: Record<string, string> }>({
+  form: {
+    [props.name]: '',
+  },
+});
+
+watch(
+  () => props.model[props.name],
+  (value) => {
+    modelValue.form = {
+      [props.name]: serialize(value, {
+        space: 2,
+        unsafe: true,
+      }).replace(/"(\w+)":\s/g, '$1: '),
+    };
+  },
+  {
+    immediate: true,
+  },
+);
+
+const changeHandler = (v: Record<string, any>) => {
+  if (!props.name || !props.model) return;
+
+  try {
+    const parseDSL = getConfig('parseDSL');
+    props.model[props.name] = parseDSL(`(${v[props.name]})`);
+    emit('change', props.model[props.name]);
+  } catch (e) {
+    console.error(e);
+  }
+};
+</script>

package/src/fields/CodeSelect.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="m-fields-code-select" :class="config.className">
+    <TMagicCard>
+      <MContainer
+        :config="codeConfig"
+        :size="size"
+        :prop="prop"
+        :disabled="disabled"
+        :lastValues="lastValues"
+        :model="model[name]"
+        @change="changeHandler"
+      >
+      </MContainer>
+    </TMagicCard>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, watch } from 'vue';
+import { isEmpty } from 'lodash-es';
+
+import { TMagicCard } from '@tmagic/design';
+import type { FieldProps, FormItem } from '@tmagic/form';
+import { FormState, MContainer } from '@tmagic/form';
+import { HookCodeType, HookType } from '@tmagic/schema';
+
+import type { Services } from '@editor/type';
+
+defineOptions({
+  name: 'MFieldsCodeSelect',
+});
+
+const emit = defineEmits(['change']);
+
+const services = inject<Services>('services');
+
+const props = withDefaults(
+  defineProps<
+    FieldProps<
+      {
+        className?: string;
+      } & FormItem
+    >
+  >(),
+  {},
+);
+
+const codeConfig = computed(() => ({
+  type: 'group-list',
+  name: 'hookData',
+  enableToggleMode: false,
+  expandAll: true,
+  title: (mForm: FormState, { model, index }: any) => {
+    if (model.codeType === HookCodeType.DATA_SOURCE_METHOD) {
+      if (Array.isArray(model.codeId)) {
+        if (model.codeId.length < 2) {
+          return index;
+        }
+
+        const ds = services?.dataSourceService.getDataSourceById(model.codeId[0]);
+        return `${ds?.title} / ${model.codeId[1]}`;
+      }
+
+      return Array.isArray(model.codeId) ? model.codeId.join('/') : index;
+    }
+    return model.codeId || index;
+  },
+  items: [
+    {
+      type: 'row',
+      items: [
+        {
+          type: 'select',
+          name: 'codeType',
+          span: 8,
+          options: [
+            { value: HookCodeType.CODE, text: '代码块' },
+            { value: HookCodeType.DATA_SOURCE_METHOD, text: '数据源方法' },
+          ],
+          defaultValue: 'code',
+          onChange: (mForm: FormState, v: HookCodeType, { model }: any) => {
+            if (v === HookCodeType.DATA_SOURCE_METHOD) {
+              model.codeId = [];
+            } else {
+              model.codeId = '';
+            }
+
+            return v;
+          },
+        },
+        {
+          type: 'code-select-col',
+          name: 'codeId',
+          span: 16,
+          labelWidth: 0,
+          display: (mForm: FormState, { model }: any) => model.codeType !== HookCodeType.DATA_SOURCE_METHOD,
+          notEditable: () => !services?.codeBlockService.getEditStatus(),
+        },
+        {
+          type: 'data-source-method-select',
+          name: 'codeId',
+          span: 16,
+          labelWidth: 0,
+          display: (mForm: FormState, { model }: any) => model.codeType === HookCodeType.DATA_SOURCE_METHOD,
+          notEditable: () => !services?.dataSourceService.get('editable'),
+        },
+      ],
+    },
+  ],
+}));
+
+watch(
+  () => props.model[props.name],
+  (value) => {
+    // 兼容旧的数据结构
+    if (isEmpty(value)) {
+      // 空值或者空数组
+      props.model[props.name] = {
+        hookType: HookType.CODE,
+        hookData: [],
+      };
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const changeHandler = async () => {
+  emit('change', props.model[props.name]);
+};
+</script>

package/src/fields/CodeSelectCol.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="m-fields-code-select-col">
+    <div class="code-select-container">
+      <!-- 代码块下拉框 -->
+      <MContainer
+        class="select"
+        :config="selectConfig"
+        :model="model"
+        :size="size"
+        @change="onParamsChangeHandler"
+      ></MContainer>
+
+      <!-- 查看/编辑按钮 -->
+      <TMagicButton
+        v-if="model[name] && hasCodeBlockSidePanel"
+        class="m-fields-select-action-button"
+        :size="size"
+        @click="editCode(model[name])"
+      >
+        <MIcon :icon="!notEditable ? Edit : View"></MIcon>
+      </TMagicButton>
+    </div>
+
+    <!-- 参数填写框 -->
+    <CodeParams
+      v-if="paramsConfig.length"
+      name="params"
+      :key="model[name]"
+      :model="model"
+      :size="size"
+      :params-config="paramsConfig"
+      @change="onParamsChangeHandler"
+    ></CodeParams>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref, watch } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
+import { isEmpty, map } from 'lodash-es';
+
+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, CodeSelectColConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
+
+defineOptions({
+  name: 'MFieldsCodeSelectCol',
+});
+
+const mForm = inject<FormState | undefined>('mForm');
+const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
+  disabled: false,
+});
+
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasCodeBlockSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.CODE_BLOCK),
+);
+
+/**
+ * 根据代码块id获取代码块参数配置
+ * @param codeId 代码块ID
+ */
+const getParamItemsConfig = (codeId?: Id): CodeParamStatement[] => {
+  if (!codeDsl.value || !codeId) return [];
+
+  const paramStatements = codeDsl.value[codeId]?.params;
+
+  if (isEmpty(paramStatements)) return [];
+
+  return paramStatements.map((paramState: CodeParamStatement) => ({
+    labelWidth: '100px',
+    text: paramState.name,
+    ...paramState,
+  }));
+};
+
+const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
+const paramsConfig = ref<CodeParamStatement[]>(getParamItemsConfig(props.model[props.name]));
+
+watch(
+  () => props.model[props.name],
+  (v, preV) => {
+    if (v !== preV) {
+      paramsConfig.value = getParamItemsConfig(v);
+    }
+  },
+);
+
+const selectConfig = {
+  type: 'select',
+  name: props.name,
+  disable: props.disabled,
+  options: () => {
+    if (codeDsl.value) {
+      return map(codeDsl.value, (value, key) => ({
+        text: `${value.name}（${key}）`,
+        label: `${value.name}（${key}）`,
+        value: key,
+      }));
+    }
+    return [];
+  },
+  onChange: (formState: any, codeId: Id, { model }: any) => {
+    // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
+    paramsConfig.value = getParamItemsConfig(codeId);
+
+    if (paramsConfig.value.length) {
+      model.params = createValues(formState, paramsConfig.value, {}, model.params);
+    } else {
+      model.params = {};
+    }
+
+    return codeId;
+  },
+};
+
+/**
+ * 参数值修改更新
+ */
+const onParamsChangeHandler = (value: any) => {
+  props.model.params = value.params;
+  emit('change', props.model);
+};
+
+const editCode = (id: string) => {
+  eventBus?.emit('edit-code', id);
+};
+</script>

package/src/fields/CondOpSelect.vue

@@ -0,0 +1,87 @@
+<template>
+  <TMagicSelect
+    v-model="model[name]"
+    clearable
+    filterable
+    :size="size"
+    :disabled="disabled"
+    @change="fieldChangeHandler"
+  >
+    <component
+      v-for="option in options"
+      class="tmagic-design-option"
+      :key="option.value"
+      :is="optionComponent?.component || 'el-option'"
+      v-bind="
+        optionComponent?.props({
+          label: option.text,
+          value: option.value,
+        }) || {
+          label: option.text,
+          value: option.value,
+        }
+      "
+    >
+    </component>
+  </TMagicSelect>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import { getConfig as getDesignConfig, TMagicSelect } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
+
+import type { CondOpSelectConfig, Services } from '@editor/type';
+import { arrayOptions, eqOptions, numberOptions } from '@editor/utils';
+
+defineOptions({
+  name: 'MFieldsCondOpSelect',
+});
+
+const emit = defineEmits(['change']);
+const { dataSourceService } = inject<Services>('services') || {};
+
+const props = defineProps<FieldProps<CondOpSelectConfig>>();
+
+const optionComponent = getDesignConfig('components')?.option;
+
+const options = computed(() => {
+  const [id, ...fieldNames] = [...(props.config.parentFields || []), ...props.model.field];
+
+  const ds = dataSourceService?.getDataSourceById(id);
+
+  let fields = ds?.fields || [];
+  let type = '';
+  (fieldNames || []).forEach((fieldName: string) => {
+    const field = fields.find((f) => f.name === fieldName);
+    fields = field?.fields || [];
+    type = field?.type || '';
+  });
+
+  if (type === 'array') {
+    return arrayOptions;
+  }
+
+  if (type === 'boolean') {
+    return [
+      { text: '是', value: 'is' },
+      { text: '不是', value: 'not' },
+    ];
+  }
+
+  if (type === 'number') {
+    return [...eqOptions, ...numberOptions];
+  }
+
+  if (type === 'string') {
+    return [...arrayOptions, ...eqOptions];
+  }
+
+  return [...arrayOptions, ...eqOptions, ...numberOptions];
+});
+
+const fieldChangeHandler = (v: string[]) => {
+  emit('change', v);
+};
+</script>

package/src/fields/DataSourceFieldSelect/FieldSelect.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="m-editor-data-source-field-select">
+    <TMagicSelect
+      :model-value="selectDataSourceId"
+      clearable
+      filterable
+      :size="size"
+      :disabled="disabled"
+      @change="dsChangeHandler"
+    >
+      <component
+        v-for="option in dataSourcesOptions"
+        class="tmagic-design-option"
+        :key="option.value"
+        :is="optionComponent?.component || 'el-option'"
+        v-bind="
+          optionComponent?.props({
+            label: option.text,
+            value: option.value,
+            disabled: option.disabled,
+          }) || {
+            label: option.text,
+            value: option.value,
+            disabled: option.disabled,
+          }
+        "
+      >
+      </component>
+    </TMagicSelect>
+
+    <TMagicCascader
+      :model-value="selectFieldsId"
+      clearable
+      filterable
+      :size="size"
+      :disabled="disabled"
+      :options="fieldsOptions"
+      :props="{
+        checkStrictly,
+      }"
+      @change="fieldChangeHandler"
+    ></TMagicCascader>
+
+    <TMagicButton
+      v-if="selectDataSourceId && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
+      :size="size"
+      @click="editHandler(selectDataSourceId)"
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+    ></TMagicButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject, ref, watch } from 'vue';
+import { Edit, View } from '@element-plus/icons-vue';
+
+import { getConfig as getDesignConfig, TMagicButton, TMagicCascader, TMagicSelect } from '@tmagic/design';
+import { type FilterFunction, filterFunction, type FormState, type SelectOption } from '@tmagic/form';
+import { DataSourceFieldType } from '@tmagic/schema';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
+
+import MIcon from '@editor/components/Icon.vue';
+import { type EventBus, type Services, SideItemKey } from '@editor/type';
+import { getCascaderOptionsFromFields, removeDataSourceFieldPrefix } from '@editor/utils';
+
+const props = defineProps<{
+  /**
+   * 是否要编译成数据源的data。
+   * key: 不编译，就是要数据源id和field name;
+   * value: 要编译（数据源data[`${filed}`]）
+   * */
+  value?: 'key' | 'value';
+  disabled?: boolean;
+  checkStrictly?: boolean;
+  size?: 'large' | 'default' | 'small';
+  dataSourceFieldType?: DataSourceFieldType[];
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
+  notEditable?: boolean | FilterFunction;
+}>();
+
+const emit = defineEmits<{
+  change: [v: string[]];
+}>();
+
+const modelValue = defineModel<string[] | any>('modelValue', { default: [] });
+
+const optionComponent = getDesignConfig('components')?.option;
+
+const services = inject<Services>('services');
+const mForm = inject<FormState | undefined>('mForm');
+const eventBus = inject<EventBus>('eventBus');
+
+const dataSources = computed(() => services?.dataSourceService.get('dataSources') || []);
+
+const valueIsKey = computed(() => props.value === 'key');
+const notEditable = computed(() => filterFunction(mForm, props.notEditable, props));
+
+const dataSourcesOptions = computed<SelectOption[]>(() =>
+  dataSources.value.map((ds) => ({
+    text: ds.title || ds.id,
+    value: valueIsKey.value ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+  })),
+);
+
+const selectDataSourceId = ref('');
+
+const selectFieldsId = ref<string[]>([]);
+
+watch(
+  modelValue,
+  (value) => {
+    if (Array.isArray(value)) {
+      const [dsId, ...fields] = value;
+      selectDataSourceId.value = dsId;
+      selectFieldsId.value = fields;
+    } else {
+      selectDataSourceId.value = '';
+      selectFieldsId.value = [];
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const fieldsOptions = computed(() => {
+  const ds = dataSources.value.find((ds) => ds.id === removeDataSourceFieldPrefix(selectDataSourceId.value));
+
+  if (!ds) return [];
+
+  return getCascaderOptionsFromFields(ds.fields, props.dataSourceFieldType);
+});
+
+const dsChangeHandler = (v: string) => {
+  modelValue.value = [v];
+  emit('change', modelValue.value);
+};
+
+const fieldChangeHandler = (v: string[] = []) => {
+  modelValue.value = [selectDataSourceId.value, ...v];
+  emit('change', modelValue.value);
+};
+
+const hasDataSourceSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
+const editHandler = (id: string) => {
+  eventBus?.emit('edit-data-source', removeDataSourceFieldPrefix(id));
+};
+</script>