@tmagic/editor 1.3.0-alpha.9 → 1.3.0-beta.1

package/src/components/SplitView.vue

@@ -22,6 +22,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
 
@@ -111,7 +112,7 @@ onUnmounted(() => {
 
 const center = ref(0);
 
-const changeLeft = (deltaX: number) => {
+const changeLeft = ({ deltaX }: OnDrag) => {
   if (typeof props.left === 'undefined') return;
   let left = Math.max(props.left + deltaX, props.minLeft) || 0;
   emit('update:left', left);
@@ -131,7 +132,7 @@ const changeLeft = (deltaX: number) => {
   });
 };
 
-const changeRight = (deltaX: number) => {
+const changeRight = ({ deltaX }: OnDrag) => {
   if (typeof props.right === 'undefined') return;
   let right = Math.max(props.right - deltaX, props.minRight) || 0;
   emit('update:right', right);

package/src/editorProps.ts

@@ -1,8 +1,8 @@
 import type { PropType } from 'vue';
 
 import type { EventOption } from '@tmagic/core';
-import type { FormConfig } from '@tmagic/form';
-import type { MApp, MNode } from '@tmagic/schema';
+import type { FormConfig, FormState } from '@tmagic/form';
+import type { DataSourceSchema, MApp, MNode } from '@tmagic/schema';
 import StageCore, {
   CONTAINER_HIGHLIGHT_CLASS_NAME,
   ContainerHighlightType,
@@ -11,7 +11,15 @@ import StageCore, {
   UpdateDragEl,
 } from '@tmagic/stage';
 
-import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, SideBarData, StageRect } from './type';
+import type {
+  ComponentGroup,
+  DatasourceTypeOption,
+  MenuBarData,
+  MenuButton,
+  MenuComponent,
+  SideBarData,
+  StageRect,
+} from './type';
 
 export default {
   /** 页面初始值 */
@@ -27,6 +35,12 @@ export default {
     default: () => [],
   },
 
+  /** 左侧面板中的组件列表 */
+  datasourceList: {
+    type: Array as PropType<DatasourceTypeOption[]>,
+    default: () => [],
+  },
+
   /** 左侧面板配置 */
   sidebar: {
     type: Object as PropType<SideBarData>,
@@ -69,7 +83,7 @@ export default {
 
   /** 添加组件时的默认值 */
   propsValues: {
-    type: Object as PropType<Record<string, MNode>>,
+    type: Object as PropType<Record<string, Partial<MNode>>>,
     default: () => ({}),
   },
 
@@ -79,7 +93,14 @@ export default {
     default: () => ({}),
   },
 
-  dataScourceConfigs: {
+  /** 添加数据源时的默认值 */
+  datasourceValues: {
+    type: Object as PropType<Record<string, Partial<DataSourceSchema>>>,
+    default: () => ({}),
+  },
+
+  /** 数据源的属性配置表单的dsl */
+  datasourceConfigs: {
     type: Object as PropType<Record<string, FormConfig>>,
     default: () => ({}),
   },
@@ -137,4 +158,8 @@ export default {
   disabledDragStart: {
     type: Boolean,
   },
+
+  extendFormState: {
+    type: Function as PropType<(state: FormState) => Record<string, any> | Promise<Record<string, any>>>,
+  },
 };

package/src/fields/Code.vue

@@ -1,15 +1,20 @@
 <template>
-  <magic-code-editor
-    :style="`height: ${height}`"
+  <MagicCodeEditor
+    :height="config.height"
     :init-values="model[name]"
-    :language="language"
-    :options="config.options"
+    :language="config.language"
+    :options="{
+      ...config.options,
+      readOnly: disabled,
+    }"
     @save="save"
-  ></magic-code-editor>
+  ></MagicCodeEditor>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import type { FieldProps } from '@tmagic/form';
+
+import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
 defineOptions({
   name: 'MEditorCode',
@@ -17,19 +22,18 @@ defineOptions({
 
 const emit = defineEmits(['change']);
 
-const props = defineProps<{
-  model: any;
-  name: string;
-  config: {
-    language?: string;
-    options?: Object;
-    height?: string;
-  };
-  prop: string;
-}>();
-
-const language = computed(() => props.config.language || 'javascript');
-const height = computed(() => props.config.height || `${document.body.clientHeight - 168}px`);
+const props = withDefaults(
+  defineProps<
+    FieldProps<{
+      language?: string;
+      options?: Object;
+      height?: string;
+    }>
+  >(),
+  {
+    disabled: false,
+  },
+);
 
 const save = (v: string) => {
   props.model[props.name] = v;

package/src/fields/CodeLink.vue

@@ -6,24 +6,23 @@
 import { computed, reactive, watch } from 'vue';
 import serialize from 'serialize-javascript';
 
+import type { FieldProps } from '@tmagic/form';
+
 import { getConfig } from '@editor/utils/config';
 
 defineOptions({
   name: 'MEditorCodeLink',
 });
 
-const props = defineProps<{
-  config: {
+const props = defineProps<
+  FieldProps<{
     type: 'code-link';
     name: string;
     text?: string;
     formTitle?: string;
     codeOptions?: Object;
-  };
-  model: any;
-  name: string;
-  prop: string;
-}>();
+  }>
+>();
 
 const emit = defineEmits(['change']);
 

package/src/fields/CodeSelect.vue

@@ -7,28 +7,29 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from 'vue';
+import { computed, inject, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
+import type { FieldProps } from '@tmagic/form';
 import { HookType } from '@tmagic/schema';
 
+import type { Services } from '@editor/type';
+
 defineOptions({
   name: 'MEditorCodeSelect',
 });
 
 const emit = defineEmits(['change']);
 
+const services = inject<Services>('services');
+
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       className?: string;
-    };
-    model: any;
-    prop: string;
-    name: string;
-    size: 'small' | 'default' | 'large';
-  }>(),
+    }>
+  >(),
   {},
 );
 
@@ -41,7 +42,9 @@ const codeConfig = computed(() => ({
   items: [
     {
       type: 'code-select-col',
+      name: 'codeId',
       labelWidth: 0,
+      disabled: () => !services?.codeBlockService.getEditStatus(),
     },
   ],
 }));

package/src/fields/CodeSelectCol.vue

@@ -9,10 +9,26 @@
         @change="onParamsChangeHandler"
       ></m-form-container>
       <!-- 查看/编辑按钮 -->
-      <Icon class="icon" :icon="editable ? Edit : View" @click="editCode"></Icon>
+      <Icon v-if="model[name]" class="icon" :icon="!disabled ? Edit : View" @click="editCode(model[name])"></Icon>
     </div>
+
     <!-- 参数填写框 -->
-    <m-form-container :config="codeParamsConfig" :model="model" @change="onParamsChangeHandler"></m-form-container>
+    <CodeParams
+      v-if="paramsConfig.length"
+      name="params"
+      :model="model"
+      :size="size"
+      :params-config="paramsConfig"
+      @change="onParamsChangeHandler"
+    ></CodeParams>
+
+    <CodeBlockEditor
+      ref="codeBlockEditor"
+      v-if="codeConfig"
+      :disabled="disabled"
+      :content="codeConfig"
+      @submit="submitCodeBlockHandler"
+    ></CodeBlockEditor>
   </div>
 </template>
 
@@ -21,45 +37,61 @@ import { computed, inject, ref, watch } from 'vue';
 import { Edit, View } from '@element-plus/icons-vue';
 import { isEmpty, map } from 'lodash-es';
 
-import { createValues, FieldsetConfig, FormState } from '@tmagic/form';
-import { Id } from '@tmagic/schema';
+import { createValues, FieldProps } from '@tmagic/form';
+import type { Id } from '@tmagic/schema';
 
+import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
+import CodeParams from '@editor/components/CodeParams.vue';
 import Icon from '@editor/components/Icon.vue';
-import type { CodeParamStatement, Services } from '@editor/type';
+import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
+import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
 
 defineOptions({
   name: 'MEditorCodeSelectCol',
 });
 
 const services = inject<Services>('services');
-const mForm = inject<FormState>('mForm');
 const emit = defineEmits(['change']);
 
-const props = withDefaults(
-  defineProps<{
-    config: any;
-    model: any;
-    prop: string;
-    name: string;
-    size: 'small' | 'default' | 'large';
-  }>(),
-  {},
-);
-const codeDsl = computed(() => services?.codeBlockService.getCodeDsl());
-const editable = computed(() => services?.codeBlockService.getEditStatus());
-const codeParamsConfig = ref<FieldsetConfig>({
-  type: 'fieldset',
-  items: [],
-  legend: '参数',
-  labelWidth: '70px',
-  name: 'params',
-  display: false,
+const props = withDefaults(defineProps<FieldProps<CodeSelectColConfig>>(), {
+  disabled: false,
 });
+
+/**
+ * 根据代码块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',
   text: '代码块',
-  name: 'codeId',
-  labelWidth: '70px',
+  name: props.name,
+  labelWidth: '80px',
   options: () => {
     if (codeDsl.value) {
       return map(codeDsl.value, (value, key) => ({
@@ -72,68 +104,25 @@ const selectConfig = {
   },
   onChange: (formState: any, codeId: Id, { model }: any) => {
     // 通过下拉框选择的codeId变化后修正model的值，避免写入其他codeId的params
-    model.params = {};
-  },
-};
+    paramsConfig.value = getParamItemsConfig(codeId);
 
-/**
- * 根据代码块id获取代码块参数配置
- * @param codeId 代码块ID
- */
-const getParamItemsConfig = (codeId: Id): CodeParamStatement[] => {
-  if (!codeDsl.value) return [];
-  const paramStatements = codeDsl.value[codeId]?.params;
-  if (isEmpty(paramStatements)) return [];
-  return paramStatements.map((paramState: CodeParamStatement) => ({
-    labelWidth: '100px',
-    text: paramState.name,
-    ...paramState,
-  }));
-};
+    if (paramsConfig.value.length) {
+      model.params = createValues(formState, paramsConfig.value, {}, model.params);
+    } else {
+      model.params = {};
+    }
 
-/**
- * 根据代码块id获取参数fieldset表单配置
- * @param codeId 代码块ID
- */
-const getCodeParamsConfig = (codeId: Id) => {
-  const paramsConfig = getParamItemsConfig(codeId);
-  // 如果参数没有填值，则使用createValues补全空值
-  if (!props.model.params || isEmpty(props.model.params)) {
-    props.model.params = {};
-    createValues(mForm, paramsConfig, {}, props.model.params);
-  }
-  codeParamsConfig.value = {
-    type: 'fieldset',
-    items: paramsConfig,
-    legend: '参数',
-    labelWidth: '70px',
-    name: 'params',
-    display: !isEmpty(paramsConfig),
-  };
+    return codeId;
+  },
 };
 
 /**
  * 参数值修改更新
  */
-const onParamsChangeHandler = () => {
+const onParamsChangeHandler = (value: any) => {
+  props.model.params = value.params;
   emit('change', props.model);
 };
 
-// 监听代码块顺序变化以及下拉选择的变化，并更新参数配置
-// TODO onchange在watch之前触发
-watch(
-  () => props.model.codeId,
-  (codeId: Id) => {
-    if (!codeId) return;
-    getCodeParamsConfig(codeId);
-  },
-  {
-    immediate: true,
-  },
-);
-
-// 打开代码编辑框
-const editCode = () => {
-  services?.codeBlockService.setCodeEditorContent(true, props.model.codeId);
-};
+const { codeBlockEditor, codeConfig, editCode, submitCodeBlockHandler } = useCodeBlockEdit(services?.codeBlockService);
 </script>

package/src/fields/DataSourceFieldSelect.vue

@@ -0,0 +1,47 @@
+<template>
+  <m-form-container
+    :config="{
+      ...config,
+      ...cascaderConfig,
+    }"
+    :model="model"
+    @change="onChangeHandler"
+  ></m-form-container>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue';
+
+import type { FieldProps } from '@tmagic/form';
+
+import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
+
+const services = inject<Services>('services');
+const emit = defineEmits(['change']);
+
+const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(), {
+  disabled: false,
+});
+
+const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
+
+const cascaderConfig = {
+  type: 'cascader',
+  name: props.name,
+  options: () =>
+    dataSources.value
+      ?.filter((ds) => ds.fields?.length)
+      ?.map((ds) => ({
+        label: ds.title || ds.id,
+        value: ds.id,
+        children: ds.fields?.map((field) => ({
+          label: field.title,
+          value: field.name,
+        })),
+      })) || [],
+};
+
+const onChangeHandler = (value: any) => {
+  emit('change', value);
+};
+</script>

package/src/fields/DataSourceFields.vue

@@ -1,43 +1,44 @@
 <template>
   <div class="m-editor-data-source-fields">
-    <MagicTable :data="model[name]" :columns="filedColumns"></MagicTable>
+    <MagicTable :data="model[name]" :columns="fieldColumns"></MagicTable>
 
     <div class="m-editor-data-source-fields-footer">
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
     </div>
 
-    <MFormDialog
+    <MFormDrawer
       ref="addDialog"
+      label-width="80px"
       :title="filedTitle"
       :config="dataSourceFieldsConfig"
       :values="fieldValues"
       :parentValues="model[name]"
+      :disabled="disabled"
+      :width="width"
       @submit="fieldChange"
-    ></MFormDialog>
+    ></MFormDrawer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import { TMagicButton, tMagicMessageBox } from '@tmagic/design';
-import { FormConfig, FormState, MFormDialog } from '@tmagic/form';
+import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
 import { MagicTable } from '@tmagic/table';
 
+import type { Services } from '@editor/type';
+
 defineOptions({
   name: 'MEditorDataSourceFields',
 });
 
 const props = withDefaults(
-  defineProps<{
-    config: {
+  defineProps<
+    FieldProps<{
       type: 'data-source-fields';
-    };
-    model: any;
-    prop: string;
-    disabled: boolean;
-    name: string;
-  }>(),
+    }>
+  >(),
   {
     disabled: false,
   },
@@ -45,32 +46,33 @@ const props = withDefaults(
 
 const emit = defineEmits(['change']);
 
-const addDialog = ref<InstanceType<typeof MFormDialog>>();
+const services = inject<Services>('services');
+
+const addDialog = ref<InstanceType<typeof MFormDrawer>>();
 const fieldValues = ref<Record<string, any>>({});
 const filedTitle = ref('');
 
+const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+
 const newHandler = () => {
-  if (!addDialog.value) return;
   fieldValues.value = {};
   filedTitle.value = '新增属性';
-  addDialog.value.dialogVisible = true;
+  addDialog.value?.show();
 };
 
 const fieldChange = ({ index, ...value }: Record<string, any>) => {
-  if (!addDialog.value) return;
-
   if (index > -1) {
     props.model[props.name][index] = value;
   } else {
     props.model[props.name].push(value);
   }
 
-  addDialog.value.dialogVisible = false;
+  addDialog.value?.hide();
 
   emit('change', props.model[props.name]);
 };
 
-const filedColumns = [
+const fieldColumns = [
   {
     label: '属性名称',
     prop: 'title',
@@ -83,6 +85,10 @@ const filedColumns = [
     label: '属性描述',
     prop: 'desc',
   },
+  {
+    label: '默认值',
+    prop: 'defaultValue',
+  },
   {
     label: '操作',
     fixed: 'right',
@@ -90,13 +96,12 @@ const filedColumns = [
       {
         text: '编辑',
         handler: (row: Record<string, any>, index: number) => {
-          if (!addDialog.value) return;
           fieldValues.value = {
             ...row,
             index,
           };
           filedTitle.value = `编辑${row.title}`;
-          addDialog.value.dialogVisible = true;
+          addDialog.value?.show();
         },
       },
       {
@@ -161,10 +166,21 @@ const dataSourceFieldsConfig: FormConfig = [
   {
     name: 'description',
     text: '描述',
+    type: 'textarea',
   },
   {
     name: 'defaultValue',
     text: '默认值',
+    type: (mForm: FormState | undefined, { model }: any) => {
+      if (model.type === 'number') return 'number';
+      if (model.type === 'boolean') return 'select';
+
+      return 'string';
+    },
+    options: [
+      { text: 'true', value: true },
+      { text: 'false', value: false },
+    ],
   },
   {
     name: 'enable',