@tmagic/editor 1.3.16 → 1.4.0-beta.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.16",
+  "version": "1.4.0-beta.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -42,14 +42,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "@tmagic/core": "1.3.16",
-    "@tmagic/dep": "1.3.16",
-    "@tmagic/design": "1.3.16",
-    "@tmagic/form": "1.3.16",
-    "@tmagic/schema": "1.3.16",
-    "@tmagic/stage": "1.3.16",
-    "@tmagic/table": "1.3.16",
-    "@tmagic/utils": "1.3.16",
+    "@tmagic/core": "1.4.0-beta.1",
+    "@tmagic/dep": "1.4.0-beta.1",
+    "@tmagic/design": "1.4.0-beta.1",
+    "@tmagic/form": "1.4.0-beta.1",
+    "@tmagic/schema": "1.4.0-beta.1",
+    "@tmagic/stage": "1.4.0-beta.1",
+    "@tmagic/table": "1.4.0-beta.1",
+    "@tmagic/utils": "1.4.0-beta.1",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -57,16 +57,16 @@
     "gesto": "^1.19.1",
     "keycon": "^1.4.0",
     "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.41.0",
+    "monaco-editor": "^0.47.0",
     "moveable": "^0.51.1",
     "serialize-javascript": "^6.0.0",
-    "vue": "^3.3.8"
+    "vue": "^3.4.21"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.3.16",
-    "@tmagic/form": "1.3.16",
-    "monaco-editor": "^0.41.0",
-    "vue": "^3.3.8"
+    "@tmagic/design": "1.4.0-beta.1",
+    "@tmagic/form": "1.4.0-beta.1",
+    "monaco-editor": "^0.47.0",
+    "vue": "^3.4.21"
   },
   "devDependencies": {
     "@types/events": "^3.0.0",
@@ -74,18 +74,20 @@
     "@types/node": "^18.19.0",
     "@types/serialize-javascript": "^5.0.1",
     "@vitejs/plugin-vue": "^4.5.2",
-    "@vue/compiler-sfc": "^3.3.8",
-    "@vue/test-utils": "^2.3.2",
+    "@vue/compiler-sfc": "^3.4.21",
+    "@vue/test-utils": "^2.4.4",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
     "tsc-alias": "^1.8.5",
-    "typescript": "^5.0.4",
-    "vite": "^5.0.7",
-    "vue-tsc": "^1.8.25"
+    "type-fest": "^4.10.3",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.6",
+    "vue-tsc": "^2.0.6"
   },
   "scripts": {
     "build": "npm run build:type && vite build",
     "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "clear:type": "rimraf ./types"
+    "clear:type": "rimraf ./types",
+    "type:check": "vue-tsc --noEmit"
   }
 }

package/src/components/CodeBlockEditor.vue

@@ -1,26 +1,33 @@
 <template>
-  <component
-    :is="slideType === 'box' ? MFormBox : MFormDrawer"
-    class="m-editor-code-block-editor"
-    ref="fomDrawer"
-    label-width="80px"
-    :close-on-press-escape="false"
-    :title="content.name"
-    :width="size"
-    :config="functionConfig"
-    :values="content"
-    :disabled="disabled"
-    :before-close="beforeClose"
-    @change="changeHandler"
-    @submit="submitForm"
-    @error="errorHandler"
-    @open="openHandler"
-    @closed="closedHandler"
-  >
-    <template #left>
-      <TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+  <!-- 代码块编辑区 -->
+  <FloatingBox v-model:visible="boxVisible" title="代码编辑" :position="boxPosition" :before-close="beforeClose">
+    <template #body>
+      <div ref="floatingBoxBody"></div>
     </template>
-  </component>
+  </FloatingBox>
+
+  <Teleport :to="floatingBoxBody" :disabled="slideType === 'box'" v-if="editVisible">
+    <MFormBox
+      class="m-editor-code-block-editor"
+      ref="fomDrawer"
+      label-width="80px"
+      :close-on-press-escape="false"
+      :title="content.name"
+      :width="size"
+      :config="functionConfig"
+      :values="content"
+      :disabled="disabled"
+      @change="changeHandler"
+      @submit="submitForm"
+      @error="errorHandler"
+      @open="openHandler"
+      @closed="closedHandler"
+    >
+      <template #left>
+        <TMagicButton type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+      </template>
+    </MFormBox>
+  </Teleport>
 
   <TMagicDialog v-model="difVisible" title="查看修改" fullscreen>
     <div style="display: flex; margin-bottom: 10px">
@@ -48,12 +55,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeUnmount, ref } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, ref } from 'vue';
 
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
 import { ColumnConfig, FormConfig, FormState, MFormBox, MFormDrawer } from '@tmagic/form';
 import type { CodeBlockContent } from '@tmagic/schema';
 
+import FloatingBox from '@editor/components/FloatingBox.vue';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { Services, SlideType } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
@@ -248,7 +256,7 @@ const beforeClose = (done: (cancel?: boolean) => void) => {
       done();
     })
     .catch((action: string) => {
-      done(action === 'close');
+      done(action === 'cancel');
     });
 };
 
@@ -256,8 +264,26 @@ const closedHandler = () => {
   changedValue.value = undefined;
 };
 
+const boxVisible = ref<boolean>(false);
+const editVisible = ref<boolean>(false);
+const floatingBoxBody = ref<HTMLDivElement>();
+
+const boxPosition = computed(() => {
+  const columnWidth = services?.uiService?.get('columnWidth');
+  const navMenuRect = services?.uiService?.get('navMenuRect');
+  return {
+    left: columnWidth?.left ?? 0,
+    top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+  };
+});
+
 defineExpose({
-  show() {
+  async show() {
+    if (props.slideType !== 'box') {
+      boxVisible.value = true;
+    }
+    await nextTick();
+    editVisible.value = true;
     fomDrawer.value?.show();
   },
 

package/src/components/FloatingBox.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body" v-if="visible">
-    <div ref="target" class="m-editor-float-box" :style="style">
+    <div ref="target" class="m-editor-float-box" :style="{ ...style, zIndex: curZIndex }" @mousedown="nextZIndex">
       <div ref="dragTarget" class="m-editor-float-box-title">
         <slot name="title">
           <span>{{ title }}</span>
@@ -17,11 +17,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, nextTick, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
-import { TMagicButton } from '@tmagic/design';
+import { TMagicButton, useZIndex } from '@tmagic/design';
 
 interface Position {
   left: number;
@@ -33,12 +33,21 @@ interface Rect {
   height: number | string;
 }
 
-const props = withDefaults(defineProps<{ visible: boolean; position?: Position; rect?: Rect; title?: string }>(), {
-  visible: false,
-  title: '',
-  position: () => ({ left: 0, top: 0 }),
-  rect: () => ({ width: 'auto', height: 'auto' }),
-});
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    position?: Position;
+    rect?: Rect;
+    title?: string;
+    beforeClose?: (done: (cancel?: boolean) => void) => void;
+  }>(),
+  {
+    visible: false,
+    title: '',
+    position: () => ({ left: 0, top: 0 }),
+    rect: () => ({ width: 'auto', height: 'auto' }),
+  },
+);
 
 const emit = defineEmits<{
   'update:visible': [boolean];
@@ -47,11 +56,26 @@ const emit = defineEmits<{
 const target = ref<HTMLDivElement>();
 const dragTarget = ref<HTMLDivElement>();
 
+const zIndex = useZIndex();
+const curZIndex = ref<number>(zIndex.nextZIndex());
+
+const rect = ref({
+  width: props.rect.width,
+  height: props.rect.height,
+});
+
+watchEffect(() => {
+  rect.value = {
+    width: props.rect.width,
+    height: props.rect.height,
+  };
+});
+
 const style = computed(() => ({
   left: `${props.position.left}px`,
   top: `${props.position.top}px`,
-  width: typeof props.rect.width === 'string' ? props.rect.width : `${props.rect.width}px`,
-  height: typeof props.rect.height === 'string' ? props.rect.height : `${props.rect.height}px`,
+  width: typeof rect.value.width === 'string' ? rect.value.width : `${rect.value.width}px`,
+  height: typeof rect.value.height === 'string' ? rect.value.height : `${rect.value.height}px`,
 }));
 
 let moveable: VanillaMoveable | null = null;
@@ -70,6 +94,7 @@ const initMoveable = () => {
     dragTargetSelf: false,
     linePadding: 10,
     controlPadding: 10,
+    bounds: { left: 0, top: 0, right: 0, bottom: 0, position: 'css' },
   });
 
   moveable.on('drag', (e) => {
@@ -77,6 +102,8 @@ const initMoveable = () => {
   });
 
   moveable.on('resize', (e) => {
+    rect.value.width = e.width;
+    rect.value.height = e.height;
     e.target.style.width = `${e.width}px`;
     e.target.style.height = `${e.height}px`;
     e.target.style.transform = e.drag.transform;
@@ -107,8 +134,22 @@ onBeforeUnmount(() => {
   destroyMoveable();
 });
 
+const hide = (cancel?: boolean) => {
+  if (cancel !== false) {
+    emit('update:visible', false);
+  }
+};
+
 const closeHandler = () => {
-  emit('update:visible', false);
+  if (typeof props.beforeClose === 'function') {
+    props.beforeClose(hide);
+  } else {
+    hide();
+  }
+};
+
+const nextZIndex = () => {
+  curZIndex.value = zIndex.nextZIndex();
 };
 
 defineExpose({

package/src/fields/Code.vue

@@ -13,12 +13,12 @@
 </template>
 
 <script lang="ts" setup>
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 
 import MagicCodeEditor from '@editor/layouts/CodeEditor.vue';
 
 defineOptions({
-  name: 'MEditorCode',
+  name: 'MFieldsVsCode',
 });
 
 const emit = defineEmits<{
@@ -27,14 +27,16 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
-      language?: string;
-      options?: {
-        [key: string]: any;
-      };
-      height?: string;
-      parse?: boolean;
-    }>
+    FieldProps<
+      {
+        language?: string;
+        options?: {
+          [key: string]: any;
+        };
+        height?: string;
+        parse?: boolean;
+      } & FormItem
+    >
   >(),
   {
     disabled: false,

package/src/fields/CodeLink.vue

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

package/src/fields/CodeSelect.vue

@@ -11,14 +11,14 @@ import { computed, inject, watch } from 'vue';
 import { isEmpty } from 'lodash-es';
 
 import { TMagicCard } from '@tmagic/design';
-import type { FieldProps } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 import { FormState } from '@tmagic/form';
 import { HookCodeType, HookType } from '@tmagic/schema';
 
 import type { Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorCodeSelect',
+  name: 'MFieldsCodeSelect',
 });
 
 const emit = defineEmits(['change']);
@@ -27,9 +27,11 @@ const services = inject<Services>('services');
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
-      className?: string;
-    }>
+    FieldProps<
+      {
+        className?: string;
+      } & FormItem
+    >
   >(),
   {},
 );

package/src/fields/CodeSelectCol.vue

@@ -49,7 +49,7 @@ import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
 import type { CodeParamStatement, CodeSelectColConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorCodeSelectCol',
+  name: 'MFieldsCodeSelectCol',
 });
 
 const mForm = inject<FormState | undefined>('mForm');

package/src/fields/DataSourceFieldSelect.vue

@@ -1,23 +1,47 @@
 <template>
-  <m-form-container
-    :config="{
-      ...config,
-      ...cascaderConfig,
-    }"
-    :model="model"
-    @change="onChangeHandler"
-  ></m-form-container>
+  <div style="width: 100%; display: flex; align-items: center">
+    <component
+      style="width: 100%"
+      :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="config.fieldConfig"
+      style="margin-left: 5px"
+      link
+      :type="showDataSourceFieldSelect ? 'primary' : 'default'"
+      :icon="Coin"
+      :size="size"
+      @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+    ></TMagicButton>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue';
+import { computed, inject, onMounted, ref, resolveComponent } from 'vue';
+import { Coin } from '@element-plus/icons-vue';
 
-import type { CascaderOption, FieldProps } from '@tmagic/form';
-import type { DataSchema } from '@tmagic/schema';
+import { TMagicButton } from '@tmagic/design';
+import type { CascaderConfig, CascaderOption, FieldProps, FormState } from '@tmagic/form';
+import { MCascader } from '@tmagic/form';
+import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
 import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
 
+defineOptions({
+  name: 'MFieldsDataSourceFieldSelect',
+});
+
 const services = inject<Services>('services');
 const emit = defineEmits(['change']);
 
@@ -27,32 +51,99 @@ const props = withDefaults(defineProps<FieldProps<DataSourceFieldSelectConfig>>(
 
 const dataSources = computed(() => services?.dataSourceService.get('dataSources'));
 
-const getOptionChildren = (fields: DataSchema[] = []): CascaderOption[] =>
-  fields.map((field) => ({
-    label: field.title || field.name,
-    value: field.name,
-    children: field.type === 'array' ? [] : getOptionChildren(field.fields),
-  }));
+const getOptionChildren = (
+  fields: DataSchema[] = [],
+  dataSourceFieldType: DataSourceFieldType[] = ['any'],
+): CascaderOption[] => {
+  const child: CascaderOption[] = [];
+  fields.forEach((field) => {
+    if (!dataSourceFieldType.length) {
+      dataSourceFieldType.push('any');
+    }
+
+    const children = getOptionChildren(field.fields, dataSourceFieldType);
+
+    const item = {
+      label: field.title || field.name,
+      value: field.name,
+      children,
+    };
+
+    const fieldType = field.type || 'any';
+    if (dataSourceFieldType.includes('any') || dataSourceFieldType.includes(fieldType)) {
+      child.push(item);
+      return;
+    }
+
+    if (!dataSourceFieldType.includes(fieldType) && fieldType !== 'object') {
+      return;
+    }
+
+    if (!children.length && ['object', 'array', 'any'].includes(field.type || '')) {
+      return;
+    }
+
+    child.push(item);
+  });
+  return child;
+};
 
-const cascaderConfig = computed(() => {
+const cascaderConfig = computed<CascaderConfig>(() => {
   const valueIsKey = props.config.value === 'key';
 
   return {
     type: 'cascader',
-    name: props.name,
-    checkStrictly: !valueIsKey,
-    text: '',
-    options: () =>
-      dataSources.value
-        ?.filter((ds) => ds.fields?.length)
-        ?.map((ds) => ({
+    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: getOptionChildren(ds.fields),
-        })) || [],
+          children: getOptionChildren(ds.fields, props.config.dataSourceFieldType),
+        })) || [];
+      return options.filter((option) => option.children.length);
+    },
   };
 });
 
+const showDataSourceFieldSelect = ref(false);
+
+onMounted(() => {
+  const value = props.model[props.name];
+  if (
+    Array.isArray(value) &&
+    typeof value[0] === 'string' &&
+    value[0].startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
+  ) {
+    return (showDataSourceFieldSelect.value = 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);
 };

package/src/fields/DataSourceFields.vue

@@ -37,13 +37,13 @@ import { computed, inject, ref } from 'vue';
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
 import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
 import type { DataSchema } from '@tmagic/schema';
-import { MagicTable } from '@tmagic/table';
+import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceFields',
+  name: 'MFieldsDataSourceFields',
 });
 
 const props = withDefaults(
@@ -86,7 +86,7 @@ const fieldChange = ({ index, ...value }: Record<string, any>) => {
   emit('change', props.model[props.name]);
 };
 
-const fieldColumns = [
+const fieldColumns: ColumnConfig[] = [
   {
     label: '属性名称',
     prop: 'title',
@@ -102,6 +102,13 @@ const fieldColumns = [
   {
     label: '默认值',
     prop: 'defaultValue',
+    formatter(item, row) {
+      try {
+        return JSON.stringify(row.defaultValue);
+      } catch (e) {
+        return row.defaultValue;
+      }
+    },
   },
   {
     label: '操作',

package/src/fields/DataSourceInput.vue

@@ -48,7 +48,7 @@ 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 } from '@tmagic/form';
+import type { FieldProps, FormItem } from '@tmagic/form';
 import type { DataSchema, DataSourceSchema } from '@tmagic/schema';
 
 import Icon from '@editor/components/Icon.vue';
@@ -56,16 +56,16 @@ import type { Services } from '@editor/type';
 import { getDisplayField } from '@editor/utils/data-source';
 
 defineOptions({
-  name: 'MEditorDataSourceInput',
+  name: 'MFieldsDataSourceInput',
 });
 
 const props = withDefaults(
   defineProps<
-    FieldProps<{
-      type: 'data-source-input';
-      name: string;
-      text: string;
-    }>
+    FieldProps<
+      {
+        type: 'data-source-input';
+      } & FormItem
+    >
   >(),
   {
     disabled: false,

package/src/fields/DataSourceMethodSelect.vue

@@ -49,7 +49,7 @@ import { useDataSourceMethod } from '@editor/hooks/use-data-source-method';
 import type { CodeParamStatement, DataSourceMethodSelectConfig, Services } from '@editor/type';
 
 defineOptions({
-  name: 'MEditorDataSourceMethodSelect',
+  name: 'MFieldsDataSourceMethodSelect',
 });
 
 const mForm = inject<FormState | undefined>('mForm');