@tmagic/editor 1.4.0-beta.2 → 1.4.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0-beta.2",
+  "version": "1.4.0",
   "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.4.0-beta.2",
-    "@tmagic/dep": "1.4.0-beta.2",
-    "@tmagic/design": "1.4.0-beta.2",
-    "@tmagic/form": "1.4.0-beta.2",
-    "@tmagic/schema": "1.4.0-beta.2",
-    "@tmagic/stage": "1.4.0-beta.2",
-    "@tmagic/table": "1.4.0-beta.2",
-    "@tmagic/utils": "1.4.0-beta.2",
+    "@tmagic/core": "1.4.0",
+    "@tmagic/dep": "1.4.0",
+    "@tmagic/design": "1.4.0",
+    "@tmagic/form": "1.4.0",
+    "@tmagic/schema": "1.4.0",
+    "@tmagic/stage": "1.4.0",
+    "@tmagic/table": "1.4.0",
+    "@tmagic/utils": "1.4.0",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "emmet-monaco-es": "^5.3.0",
@@ -63,8 +63,8 @@
     "vue": "^3.4.21"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.4.0-beta.2",
-    "@tmagic/form": "1.4.0-beta.2",
+    "@tmagic/design": "1.4.0",
+    "@tmagic/form": "1.4.0",
     "monaco-editor": "^0.47.0",
     "vue": "^3.4.21"
   },

package/src/components/CodeBlockEditor.vue

@@ -9,59 +9,57 @@
     :before-close="beforeClose"
   >
     <template #body>
-      <div ref="floatingBoxBody" style="height: 100%"></div>
+      <MFormBox
+        class="m-editor-code-block-editor"
+        ref="formBox"
+        label-width="80px"
+        :close-on-press-escape="false"
+        :title="content.name"
+        :config="functionConfig"
+        :values="content"
+        :disabled="disabled"
+        style="height: 100%"
+        @change="changeHandler"
+        @submit="submitForm"
+        @error="errorHandler"
+        @closed="closedHandler"
+      >
+        <template #left>
+          <TMagicButton v-if="!disabled" type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+        </template>
+      </MFormBox>
     </template>
   </FloatingBox>
 
-  <Teleport :to="floatingBoxBody" :disabled="slideType === 'box'" v-if="editVisible">
-    <MFormBox
-      class="m-editor-code-block-editor"
-      ref="formBox"
-      label-width="80px"
-      :close-on-press-escape="false"
-      :title="content.name"
-      :config="functionConfig"
-      :values="content"
-      :disabled="disabled"
-      :height="floatingBoxBody?.clientHeight"
-      @change="changeHandler"
-      @submit="submitForm"
-      @error="errorHandler"
-      @closed="closedHandler"
-    >
-      <template #left>
-        <TMagicButton v-if="!disabled" type="primary" link @click="difVisible = true">查看修改</TMagicButton>
+  <Teleport to="body">
+    <TMagicDialog title="查看修改" v-model="difVisible" fullscreen>
+      <div style="display: flex; margin-bottom: 10px">
+        <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
+        <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
+      </div>
+
+      <CodeEditor
+        v-if="difVisible"
+        ref="magicVsEditor"
+        type="diff"
+        language="json"
+        :initValues="content.content"
+        :modifiedValues="formBox?.form?.values.content"
+        :style="`height: ${windowRect.height - 150}px`"
+      ></CodeEditor>
+
+      <template #footer>
+        <span class="dialog-footer">
+          <TMagicButton size="small" @click="difVisible = false">取消</TMagicButton>
+          <TMagicButton size="small" type="primary" @click="diffChange">确定</TMagicButton>
+        </span>
       </template>
-    </MFormBox>
+    </TMagicDialog>
   </Teleport>
-
-  <TMagicDialog v-model="difVisible" title="查看修改" fullscreen>
-    <div style="display: flex; margin-bottom: 10px">
-      <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
-      <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
-    </div>
-
-    <CodeEditor
-      v-if="difVisible"
-      ref="magicVsEditor"
-      type="diff"
-      language="json"
-      :initValues="content.content"
-      :modifiedValues="formBox?.form?.values.content"
-      :style="`height: ${windowRect.height - 150}px`"
-    ></CodeEditor>
-
-    <template #footer>
-      <span class="dialog-footer">
-        <TMagicButton size="small" @click="difVisible = false">取消</TMagicButton>
-        <TMagicButton size="small" type="primary" @click="diffChange">确定</TMagicButton>
-      </span>
-    </template>
-  </TMagicDialog>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, ref } from 'vue';
+import { computed, inject, Ref, ref } from 'vue';
 
 import { TMagicButton, TMagicDialog, tMagicMessage, tMagicMessageBox, TMagicTag } from '@tmagic/design';
 import { ColumnConfig, FormConfig, FormState, MFormBox } from '@tmagic/form';
@@ -69,9 +67,10 @@ import type { CodeBlockContent } from '@tmagic/schema';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
+import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
 import { useWindowRect } from '@editor/hooks/use-window-rect';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
-import type { Services, SlideType } from '@editor/type';
+import type { Services } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
 defineOptions({
@@ -86,7 +85,6 @@ const props = defineProps<{
   disabled?: boolean;
   isDataSource?: boolean;
   dataSourceType?: string;
-  slideType?: SlideType;
 }>();
 
 const emit = defineEmits<{
@@ -229,7 +227,6 @@ const changeHandler = (values: CodeBlockContent) => {
 
 const beforeClose = (done: (cancel?: boolean) => void) => {
   if (!changedValue.value) {
-    editVisible.value = false;
     done();
     return;
   }
@@ -242,12 +239,10 @@ const beforeClose = (done: (cancel?: boolean) => void) => {
     })
     .then(() => {
       changedValue.value && submitForm(changedValue.value);
-      editVisible.value = false;
       done();
     })
     .catch((action: string) => {
       if (action === 'cancel') {
-        editVisible.value = false;
       }
       done(action === 'cancel');
     });
@@ -257,35 +252,17 @@ const closedHandler = () => {
   changedValue.value = undefined;
 };
 
-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),
-  };
-});
+const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
 
 defineExpose({
   async show() {
-    if (props.slideType !== 'box') {
-      boxVisible.value = true;
-      await nextTick();
-    }
-
-    editVisible.value = true;
+    calcBoxPosition();
+    boxVisible.value = true;
   },
 
   async hide() {
-    editVisible.value = false;
-
-    if (props.slideType !== 'box') {
-      await nextTick();
-      boxVisible.value = false;
-    }
+    boxVisible.value = false;
   },
 });
 </script>

package/src/components/FloatingBox.vue

@@ -6,7 +6,7 @@
           <span>{{ title }}</span>
         </slot>
         <div>
-          <TMagicButton link size="small" :icon="Close" @click="closeHandler"></TMagicButton>
+          <TMagicButton link size="small" @click="closeHandler"><MIcon :icon="Close"></MIcon></TMagicButton>
         </div>
       </div>
       <div class="m-editor-float-box-body" :style="{ height: `${bodyHeight}px` }">
@@ -17,12 +17,15 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, inject, nextTick, onBeforeUnmount, provide, ref, watch } from 'vue';
 import { Close } from '@element-plus/icons-vue';
 import VanillaMoveable from 'moveable';
 
 import { TMagicButton, useZIndex } from '@tmagic/design';
 
+import MIcon from '@editor/components/Icon.vue';
+import type { Services } from '@editor/type';
+
 interface Position {
   left: number;
   top: number;
@@ -48,7 +51,7 @@ const target = ref<HTMLDivElement>();
 const titleEl = ref<HTMLDivElement>();
 
 const zIndex = useZIndex();
-const curZIndex = ref<number>(zIndex.nextZIndex());
+const curZIndex = ref<number>(0);
 
 const titleHeight = ref(0);
 const bodyHeight = computed(() => {
@@ -63,12 +66,21 @@ const bodyHeight = computed(() => {
   return 'auto';
 });
 
-const style = computed(() => ({
-  left: `${props.position.left}px`,
-  top: `${props.position.top}px`,
-  width: width.value ? `${width.value}px` : 'auto',
-  height: height.value ? `${height.value}px` : 'auto',
-}));
+const services = inject<Services>('services');
+const frameworkWidth = computed(() => services?.uiService.get('frameworkRect').width || 0);
+const style = computed(() => {
+  let { left } = props.position;
+  if (width.value) {
+    left = left + width.value > frameworkWidth.value ? frameworkWidth.value - width.value : left;
+  }
+
+  return {
+    left: `${left}px`,
+    top: `${props.position.top}px`,
+    width: width.value ? `${width.value}px` : 'auto',
+    height: height.value ? `${height.value}px` : 'auto',
+  };
+});
 
 let moveable: VanillaMoveable | null = null;
 
@@ -112,6 +124,7 @@ watch(
   async (visible) => {
     if (visible) {
       await nextTick();
+      curZIndex.value = zIndex.nextZIndex();
 
       const targetRect = target.value?.getBoundingClientRect();
       if (targetRect) {
@@ -155,6 +168,8 @@ const nextZIndex = () => {
   curZIndex.value = zIndex.nextZIndex();
 };
 
+provide('parentFloating', target);
+
 defineExpose({
   bodyHeight,
   target,

package/src/fields/DataSourceFieldSelect.vue

@@ -19,9 +19,9 @@
       style="margin-left: 5px"
       link
       :type="showDataSourceFieldSelect ? 'primary' : 'default'"
-      :icon="Coin"
       :size="size"
       @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+      ><MIcon :icon="Coin"></MIcon
     ></TMagicButton>
   </div>
 </template>
@@ -36,6 +36,7 @@ import { MCascader } from '@tmagic/form';
 import type { DataSchema, DataSourceFieldType } from '@tmagic/schema';
 import { DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX } from '@tmagic/utils';
 
+import MIcon from '@editor/components/Icon.vue';
 import type { DataSourceFieldSelectConfig, Services } from '@editor/type';
 
 defineOptions({

package/src/fields/DataSourceFields.vue

@@ -7,39 +7,57 @@
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
     </div>
 
-    <MFormDrawer
-      ref="addDialog"
-      label-width="80px"
+    <FloatingBox
+      v-model:visible="addDialogVisible"
+      v-model:width="width"
+      v-model:height="editorHeight"
       :title="fieldTitle"
-      :config="dataSourceFieldsConfig"
-      :values="fieldValues"
-      :parentValues="model[name]"
-      :disabled="disabled"
-      :width="width"
-      @submit="fieldChange"
-    ></MFormDrawer>
-
-    <MFormDrawer
-      ref="addFromJsonDialog"
+      :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="快速添加数据定义"
-      :config="jsonFromConfig"
-      :values="jsonFromValues"
-      :disabled="disabled"
-      :width="width"
-      @submit="addFromJsonFromChange"
-    ></MFormDrawer>
+      :position="boxPosition"
+    >
+      <template #body>
+        <MFormBox
+          :config="jsonFromConfig"
+          :values="jsonFromValues"
+          :disabled="disabled"
+          @submit="addFromJsonFromChange"
+        ></MFormBox>
+      </template>
+    </FloatingBox>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { inject, Ref, ref } from 'vue';
 
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
+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({
@@ -61,17 +79,16 @@ const emit = defineEmits(['change']);
 
 const services = inject<Services>('services');
 
-const addDialog = ref<InstanceType<typeof MFormDrawer>>();
-
 const fieldValues = ref<Record<string, any>>({});
 const fieldTitle = ref('');
 
-const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+const width = defineModel<number>('width', { default: 670 });
 
 const newHandler = () => {
   fieldValues.value = {};
   fieldTitle.value = '新增属性';
-  addDialog.value?.show();
+  calcBoxPosition();
+  addDialogVisible.value = true;
 };
 
 const fieldChange = ({ index, ...value }: Record<string, any>) => {
@@ -81,7 +98,7 @@ const fieldChange = ({ index, ...value }: Record<string, any>) => {
     props.model[props.name].push(value);
   }
 
-  addDialog.value?.hide();
+  addDialogVisible.value = false;
 
   emit('change', props.model[props.name]);
 };
@@ -122,7 +139,8 @@ const fieldColumns: ColumnConfig[] = [
             index,
           };
           fieldTitle.value = `编辑${row.title}`;
-          addDialog.value?.show();
+          calcBoxPosition();
+          addDialogVisible.value = true;
         },
       },
       {
@@ -220,7 +238,6 @@ const dataSourceFieldsConfig: FormConfig = [
   },
 ];
 
-const addFromJsonDialog = ref<InstanceType<typeof MFormDrawer>>();
 const jsonFromConfig: FormConfig = [
   {
     name: 'data',
@@ -238,7 +255,8 @@ const jsonFromValues = ref({
 
 const newFromJsonHandler = () => {
   jsonFromValues.value.data = getDefaultValueFromFields(props.model[props.name]);
-  addFromJsonDialog.value?.show();
+  calcBoxPosition();
+  addFromJsonDialogVisible.value = true;
 };
 
 const getValueType = (value: any) => {
@@ -288,11 +306,18 @@ const addFromJsonFromChange = ({ data }: { data: string }) => {
 
     props.model[props.name] = getFieldsConfig(value, props.model[props.name]);
 
-    addFromJsonDialog.value?.hide();
+    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

@@ -29,9 +29,13 @@
       </div>
     </template>
   </component>
-  <div :class="`tmagic-data-source-input-text el-input el-input--${size}`" @mouseup="mouseupHandler" v-else>
+  <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">
+      <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>

package/src/fields/DataSourceMocks.vue

@@ -6,32 +6,44 @@
       <TMagicButton size="small" type="primary" :disabled="disabled" plain @click="newHandler()">添加</TMagicButton>
     </div>
 
-    <MFormDrawer
-      ref="addDialog"
-      label-width="120px"
+    <FloatingBox
+      v-model:visible="addDialogVisible"
+      v-model:width="width"
+      v-model:height="editorHeight"
       :title="drawerTitle"
-      :config="formConfig"
-      :values="formValues"
-      :parentValues="model[name]"
-      :disabled="disabled"
-      :width="width"
-      @submit="formChangeHandler"
-    ></MFormDrawer>
+      :position="boxPosition"
+    >
+      <template #body>
+        <MFormBox
+          ref="addDialog"
+          label-width="120px"
+          :config="formConfig"
+          :values="formValues"
+          :parentValues="model[name]"
+          :disabled="disabled"
+          @submit="formChangeHandler"
+        ></MFormBox>
+      </template>
+    </FloatingBox>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref } from 'vue';
+import { inject, Ref, ref } from 'vue';
 
 import { TMagicButton, tMagicMessageBox, TMagicSwitch } from '@tmagic/design';
-import { type FieldProps, type FormConfig, type FormState, MFormDrawer } from '@tmagic/form';
+import { type FieldProps, type FormConfig, type FormState, MFormBox } from '@tmagic/form';
 import type { MockSchema } from '@tmagic/schema';
 import { type ColumnConfig, MagicTable } from '@tmagic/table';
 import { getDefaultValueFromFields } from '@tmagic/utils';
 
+import FloatingBox from '@editor/components/FloatingBox.vue';
+import { useNextFloatBoxPosition } from '@editor/hooks/use-next-float-box-position';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import { Services } from '@editor/type';
 
+import { useEditorContentHeight } from '..';
+
 defineOptions({
   name: 'MFieldsDataSourceMocks',
 });
@@ -50,9 +62,8 @@ const props = withDefaults(
 const emit = defineEmits(['change']);
 
 const services = inject<Services>('services');
-const width = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
+const width = defineModel<number>('width', { default: 670 });
 
-const addDialog = ref<InstanceType<typeof MFormDrawer>>();
 const drawerTitle = ref('');
 const formValues = ref<Record<string, any>>({});
 
@@ -182,7 +193,8 @@ const columns: ColumnConfig[] = [
             index,
           };
           drawerTitle.value = `编辑${row.title}`;
-          addDialog.value?.show();
+          calcBoxPosition();
+          addDialogVisible.value = true;
         },
       },
       {
@@ -206,7 +218,8 @@ const newHandler = () => {
     enable: isFirstRow,
   };
   drawerTitle.value = '新增Mock';
-  addDialog.value?.show();
+  calcBoxPosition();
+  addDialogVisible.value = true;
 };
 
 const formChangeHandler = ({ index, ...value }: Record<string, any>) => {
@@ -216,7 +229,7 @@ const formChangeHandler = ({ index, ...value }: Record<string, any>) => {
     props.model[props.name].push(value);
   }
 
-  addDialog.value?.hide();
+  addDialogVisible.value = false;
 
   emit('change', props.model[props.name]);
 };
@@ -234,4 +247,9 @@ const toggleValue = (row: MockSchema, key: 'enable' | 'useInEditor', value: bool
     index,
   });
 };
+
+const addDialogVisible = defineModel<boolean>('visible', { 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/hooks/use-editor-content-height.ts

@@ -10,7 +10,7 @@ export const useEditorContentHeight = () => {
 
   const height = ref(0);
   watchEffect(() => {
-    if (height.value > 0) return;
+    if (height.value > 0 && height.value === editorContentHeight.value) return;
     height.value = editorContentHeight.value;
   });
 

package/src/hooks/use-float-box.ts

@@ -1,4 +1,6 @@
-import { computed, ComputedRef, ref, watch } from 'vue';
+import { computed, ComputedRef, inject, ref, watch } from 'vue';
+
+import type { Services } from '@editor/type';
 
 interface State {
   status: boolean;
@@ -7,6 +9,8 @@ interface State {
 }
 
 export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
+  const services = inject<Services>('services');
+
   const floatBoxStates = ref<{
     [key in (typeof slideKeys.value)[number]]: State;
   }>(
@@ -30,9 +34,10 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
 
   const dragstartHandler = () => (isDragging.value = true);
   const dragendHandler = (key: string, e: DragEvent) => {
+    const navMenuRect = services?.uiService?.get('navMenuRect');
     floatBoxStates.value[key] = {
       left: e.clientX,
-      top: e.clientY,
+      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
       status: true,
     };
     isDragging.value = false;
@@ -47,12 +52,13 @@ export const useFloatBox = (slideKeys: ComputedRef<string[]>) => {
     () => slideKeys.value,
     (slideKeys) => {
       slideKeys.forEach((key) => {
-        if (floatBoxStates.value[key]) return;
-        floatBoxStates.value[key] = {
-          status: false,
-          top: 0,
-          left: 0,
-        };
+        if (!floatBoxStates.value[key]) {
+          floatBoxStates.value[key] = {
+            status: false,
+            top: 0,
+            left: 0,
+          };
+        }
       });
     },
     {