@tmagic/editor 1.4.8 → 1.4.9

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/DataSourceFieldSelect.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class="m-fields-data-source-field-select">
+    <component
+      :is="tagName"
+      :config="showDataSourceFieldSelect || !config.fieldConfig ? cascaderConfig : config.fieldConfig"
+      :model="model"
+      :name="name"
+      :disabled="disabled"
+      :size="size"
+      :last-values="lastValues"
+      :init-values="initValues"
+      :values="values"
+      :prop="`${prop}${prop ? '.' : ''}${name}`"
+      @change="onChangeHandler"
+    ></component>
+
+    <TMagicButton
+      v-if="(showDataSourceFieldSelect || !config.fieldConfig) && selectedDataSourceId && hasDataSourceSidePanel"
+      class="m-fields-select-action-button"
+      :size="size"
+      @click="editHandler(selectedDataSourceId)"
+      ><MIcon :icon="!notEditable ? Edit : View"></MIcon
+    ></TMagicButton>
+
+    <TMagicButton
+      v-if="config.fieldConfig"
+      style="margin-left: 5px"
+      :type="showDataSourceFieldSelect ? 'primary' : 'default'"
+      :size="size"
+      @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+      ><MIcon :icon="Coin"></MIcon
+    ></TMagicButton>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, resolveComponent, watch } from 'vue';
+import { Coin, Edit, View } from '@element-plus/icons-vue';
+
+import { TMagicButton } from '@tmagic/design';
+import type { CascaderConfig, FieldProps, FormState } from '@tmagic/form';
+import { filterFunction, MCascader } from '@tmagic/form';
+import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
+
+import MIcon from '@editor/components/Icon.vue';
+import type { DataSourceFieldSelectConfig, EventBus, Services } from '@editor/type';
+import { SideItemKey } from '@editor/type';
+import { getCascaderOptionsFromFields } from '@editor/utils';
+
+defineOptions({
+  name: 'MFieldsDataSourceFieldSelect',
+});
+
+const services = inject<Services>('services');
+const eventBus = inject<EventBus>('eventBus');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
+  disabled: false,
+});
+
+const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+
+const hasDataSourceSidePanel = computed(() =>
+  (services?.uiService.get('sideBarItems') || []).find((item) => item.$key === SideItemKey.DATA_SOURCE),
+);
+
+const selectedDataSourceId = computed(() => {
+  const value = props.model[props.name];
+  if (!Array.isArray(value) || !value.length) {
+    return '';
+  }
+
+  return value[0].replace(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX, '');
+});
+
+const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
+
+const cascaderConfig = computed<CascaderConfig>(() => {
+  const valueIsKey = props.config.value === 'key';
+
+  return {
+    type: 'cascader',
+    checkStrictly: props.config.checkStrictly ?? !valueIsKey,
+    popperClass: 'm-editor-data-source-field-select-popper',
+    options: () => {
+      const options =
+        dataSources.value?.map((ds) => ({
+          label: ds.title || ds.id,
+          value: valueIsKey ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`,
+          children: getCascaderOptionsFromFields(ds.fields, props.config.dataSourceFieldType),
+        })) || [];
+      return options.filter((option) => option.children.length);
+    },
+  };
+});
+
+const showDataSourceFieldSelect = ref(false);
+
+watch(
+  () => props.model[props.name],
+  (value) => {
+    if (
+      Array.isArray(value) &&
+      typeof value[0] === 'string' &&
+      value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
+    ) {
+      showDataSourceFieldSelect.value = true;
+    } else {
+      showDataSourceFieldSelect.value = false;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+const mForm = inject<FormState | undefined>('mForm');
+
+const type = computed((): string => {
+  let type = props.config.fieldConfig?.type;
+  if (typeof type === 'function') {
+    type = type(mForm, {
+      model: props.model,
+    });
+  }
+  if (type === 'form') return '';
+  if (type === 'container') return '';
+  return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (props.config.items ? '' : 'text');
+});
+
+const tagName = computed(() => {
+  if (showDataSourceFieldSelect.value || !props.config.fieldConfig) {
+    return MCascader;
+  }
+
+  const component = resolveComponent(`m-${props.config.items ? 'form' : 'fields'}-${type.value}`);
+  if (typeof component !== 'string') return component;
+  return 'm-fields-text';
+});
+
+const onChangeHandler = (value: any) => {
+  emit('change', value);
+};
+
+const editHandler = (id: string) => {
+  eventBus?.emit('edit-data-source', id);
+};
+</script>