@tmagic/editor 1.4.0-beta.2 → 1.4.0

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

@@ -0,0 +1,29 @@
+import { Ref, ref } from 'vue';
+
+import { UiService } from '@editor/services/ui';
+
+export const useNextFloatBoxPosition = (uiService?: UiService, parent?: Ref<HTMLDivElement | null>) => {
+  const boxPosition = ref({
+    left: 0,
+    top: 0,
+  });
+
+  const calcBoxPosition = () => {
+    const columnWidth = uiService?.get('columnWidth');
+    const navMenuRect = uiService?.get('navMenuRect');
+    let left = columnWidth?.left ?? 0;
+    if (parent?.value) {
+      const rect = parent?.value?.getBoundingClientRect();
+      left = (rect?.left ?? 0) + (rect?.width ?? 0);
+    }
+    boxPosition.value = {
+      left,
+      top: (navMenuRect?.top ?? 0) + (navMenuRect?.height ?? 0),
+    };
+  };
+
+  return {
+    boxPosition,
+    calcBoxPosition,
+  };
+};

package/src/layouts/CodeEditor.vue

@@ -5,12 +5,8 @@
         :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
         :style="!fullScreen && height ? `height: ${height}` : '100%'"
       >
-        <TMagicButton
-          class="magic-code-editor-full-screen-icon"
-          circle
-          size="small"
-          :icon="FullScreen"
-          @click="fullScreenHandler"
+        <TMagicButton class="magic-code-editor-full-screen-icon" circle size="small" @click="fullScreenHandler"
+          ><MIcon :icon="FullScreen"></MIcon
         ></TMagicButton>
         <div ref="codeEditor" class="magic-code-editor-content"></div>
       </div>
@@ -26,6 +22,7 @@ import serialize from 'serialize-javascript';
 
 import { TMagicButton } from '@tmagic/design';
 
+import MIcon from '@editor/components/Icon.vue';
 import { getConfig } from '@editor/utils/config';
 import monaco from '@editor/utils/monaco-editor';
 

package/src/layouts/PropsPanel.vue

@@ -18,10 +18,11 @@
       circle
       size="large"
       title="源码"
-      :icon="DocumentIcon"
       :type="showSrc ? 'primary' : ''"
       @click="showSrc = !showSrc"
-    ></TMagicButton>
+    >
+      <MIcon :icon="DocumentIcon"></MIcon>
+    </TMagicButton>
 
     <CodeEditor
       v-if="showSrc"
@@ -43,6 +44,7 @@ import type { FormState, FormValue } from '@tmagic/form';
 import { MForm } from '@tmagic/form';
 import type { MNode } from '@tmagic/schema';
 
+import MIcon from '@editor/components/Icon.vue';
 import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import type { PropsPanelSlots, Services } from '@editor/type';
 

package/src/layouts/sidebar/Sidebar.vue

@@ -111,8 +111,8 @@
         :key="config.$key ?? index"
         v-if="floatBoxStates[config.$key]?.status"
         v-model:visible="floatBoxStates[config.$key].status"
-        :width="columnLeftWitch"
-        :height="600"
+        v-model:height="columnLeftHeight"
+        :width="columnLeftWidth"
         :title="config.text"
         :position="{
           left: floatBoxStates[config.$key].left,
@@ -123,8 +123,8 @@
           <div class="m-editor-slide-list-box">
             <component
               v-if="config && floatBoxStates[config.$key].status"
-              :is="config.boxComponentConfig?.component || config.component"
-              v-bind="config.boxComponentConfig?.props || config.props || {}"
+              :is="config.component"
+              v-bind="config.props || {}"
               v-on="config?.listeners || {}"
             />
           </div>
@@ -140,6 +140,7 @@ import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import MIcon from '@editor/components/Icon.vue';
+import { useEditorContentHeight } from '@editor/hooks/use-editor-content-height';
 import { useFloatBox } from '@editor/hooks/use-float-box';
 import {
   ColumnLayout,
@@ -176,7 +177,8 @@ const props = withDefaults(
 
 const services = inject<Services>('services');
 
-const columnLeftWitch = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
+const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
+const { height: columnLeftHeight } = useEditorContentHeight();
 
 const activeTabName = ref(props.data?.status);
 
@@ -209,11 +211,6 @@ const getItemConfig = (data: SideItem): SideComponent => {
       text: '代码编辑',
       component: CodeBlockListPanel,
       slots: {},
-      boxComponentConfig: {
-        props: {
-          slideType: 'box',
-        },
-      },
     },
     'data-source': {
       $key: 'data-source',

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -23,7 +23,6 @@
     ref="codeBlockEditor"
     :disabled="!editable"
     :content="codeConfig"
-    :slideType="slideType"
     @submit="submitCodeBlockHandler"
   ></CodeBlockEditor>
 </template>
@@ -37,7 +36,7 @@ import type { Id } from '@tmagic/schema';
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
 import SearchInput from '@editor/components/SearchInput.vue';
 import { useCodeBlockEdit } from '@editor/hooks/use-code-block-edit';
-import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services, SlideType } from '@editor/type';
+import type { CodeBlockListPanelSlots, CodeDeleteErrorType, Services } from '@editor/type';
 
 import CodeBlockList from './CodeBlockList.vue';
 
@@ -49,7 +48,6 @@ defineOptions({
 
 defineProps<{
   customError?: (id: Id, errorType: CodeDeleteErrorType) => any;
-  slideType?: SlideType;
 }>();
 
 const { codeBlockService } = inject<Services>('services') || {};

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -1,27 +1,37 @@
 <template>
-  <component
-    :is="slideType === 'box' ? MFormBox : MFormDrawer"
-    ref="fomDrawer"
-    label-width="80px"
-    :close-on-press-escape="false"
+  <FloatingBox
+    v-model:visible="boxVisible"
+    v-model:width="width"
+    v-model:height="editorHeight"
     :title="title"
-    :width="size"
-    :config="dataSourceConfig"
-    :values="initValues"
-    :disabled="disabled"
-    @submit="submitHandler"
-    @error="errorHandler"
-  ></component>
+    :position="boxPosition"
+  >
+    <template #body>
+      <MFormBox
+        label-width="80px"
+        :title="title"
+        :config="dataSourceConfig"
+        :values="initValues"
+        :disabled="disabled"
+        style="height: 100%"
+        @submit="submitHandler"
+        @error="errorHandler"
+      ></MFormBox>
+    </template>
+  </FloatingBox>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watchEffect } from 'vue';
+import { inject, Ref, ref, watchEffect } from 'vue';
 
 import { tMagicMessage } from '@tmagic/design';
-import { FormConfig, MFormBox, MFormDrawer } from '@tmagic/form';
+import { FormConfig, MFormBox } from '@tmagic/form';
 import { DataSourceSchema } from '@tmagic/schema';
 
-import type { Services, SlideType } from '@editor/type';
+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({
   name: 'MEditorDataSourceConfigPanel',
@@ -31,20 +41,23 @@ const props = defineProps<{
   title?: string;
   values: any;
   disabled: boolean;
-  slideType?: SlideType;
 }>();
 
+const boxVisible = defineModel<boolean>('visible', { default: false });
+const width = defineModel<number>('width', { default: 670 });
+
 const emit = defineEmits(['submit']);
 
 const services = inject<Services>('services');
 
-const size = computed(() => globalThis.document.body.clientWidth - (services?.uiService.get('columnWidth').left || 0));
-
-const fomDrawer = ref<InstanceType<typeof MFormDrawer>>();
-
 const initValues = ref<Partial<DataSourceSchema>>({});
 const dataSourceConfig = ref<FormConfig>([]);
 
+const { height: editorHeight } = useEditorContentHeight();
+
+const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
+const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(services?.uiService, parentFloating);
+
 watchEffect(() => {
   initValues.value = props.values;
   dataSourceConfig.value = services?.dataSourceService.getFormConfig(initValues.value.type) || [];
@@ -60,11 +73,12 @@ const errorHandler = (error: any) => {
 
 defineExpose({
   show() {
-    fomDrawer.value?.show();
+    calcBoxPosition();
+    boxVisible.value = true;
   },
 
   hide() {
-    fomDrawer.value?.hide();
+    boxVisible.value = false;
   },
 });
 </script>

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -33,7 +33,6 @@
     :disabled="!editable"
     :values="dataSourceValues"
     :title="dialogTitle"
-    :slideType="slideType"
     @submit="submitDataSourceHandler"
   ></DataSourceConfigPanel>
 </template>
@@ -47,7 +46,7 @@ import type { DataSourceSchema } from '@tmagic/schema';
 
 import SearchInput from '@editor/components/SearchInput.vue';
 import ToolButton from '@editor/components/ToolButton.vue';
-import type { DataSourceListSlots, Services, SlideType } from '@editor/type';
+import type { DataSourceListSlots, Services } from '@editor/type';
 
 import DataSourceConfigPanel from './DataSourceConfigPanel.vue';
 import DataSourceList from './DataSourceList.vue';
@@ -58,10 +57,6 @@ defineOptions({
   name: 'MEditorDataSourceListPanel',
 });
 
-defineProps<{
-  slideType?: SlideType;
-}>();
-
 const { dataSourceService } = inject<Services>('services') || {};
 
 const editDialog = ref<InstanceType<typeof DataSourceConfigPanel>>();

package/src/layouts/workspace/viewer/StageOverlay.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-if="stageOverlayVisible" class="m-editor-stage-overlay" @click="closeOverlayHandler">
-    <TMagicIcon class="m-editor-stage-overlay-close" :size="20" @click="closeOverlayHandler"><CloseBold /></TMagicIcon>
+    <TMagicIcon class="m-editor-stage-overlay-close" :size="'20'" @click="closeOverlayHandler"
+      ><CloseBold
+    /></TMagicIcon>
     <div ref="stageOverlay" class="m-editor-stage-overlay-container" :style="style" @click.stop></div>
   </div>
 </template>

package/src/theme/code-block.scss

@@ -1,20 +1,6 @@
-.m-editor-code-block-list {
-  height: 100%;
-}
-
 .m-fields-code-select {
   width: 100%;
   .el-card__header {
     display: none;
   }
 }
-
-.m-editor-code-block-editor {
-  .tmagic-design-table {
-    height: 180px;
-  }
-
-  .el-drawer__body {
-    padding: 10px 20px;
-  }
-}

package/src/theme/component-list-panel.scss

@@ -1,6 +1,5 @@
 .ui-component-panel {
   &.tmagic-design-collapse {
-    height: 100%;
     border-top: 0 !important;
     margin-top: 48px;
     background-color: $--sidebar-content-background-color;

package/src/theme/icon.scss

@@ -1,4 +1,10 @@
-.magic-editor-icon {
+.tmagic-design-icon {
+  --color: inherit;
+  height: 1em;
+  width: 1em;
+  position: relative;
+  fill: currentColor;
+
   img {
     max-width: 100%;
     max-height: 100%;

package/src/theme/layer-panel.scss

@@ -1,6 +1,5 @@
 .m-editor-layer-panel {
   background: $--sidebar-content-background-color;
-  position: relative;
 
   .m-editor-tree {
     padding-top: 48px;

package/src/theme/sidebar.scss

@@ -50,10 +50,6 @@
     overflow: auto;
   }
 
-  .tmagic-design-scrollbar {
-    height: 100%;
-  }
-
   .fold-icon {
     position: absolute;
     bottom: 8px;
@@ -72,9 +68,6 @@
 }
 
 .m-editor-slide-list-box {
-  display: flex;
-  min-width: 240px;
-  min-height: 500px;
   > div {
     &:first-child {
       min-width: 240px;

package/src/type.ts

@@ -401,12 +401,6 @@ export interface SideBarData {
   items: SideItem[];
 }
 
-/**
- * drawer 抽屉
- * box 悬浮窗
- */
-export type SlideType = 'drawer' | 'box';
-
 export interface ComponentItem {
   /** 显示文案 */
   text: string;

package/types/components/CodeBlockEditor.vue.d.ts

@@ -1,5 +1,4 @@
 import type { CodeBlockContent } from '@tmagic/schema';
-import type { SlideType } from '../type';
 declare const _default: import("vue").DefineComponent<{
     width: import("vue").PropType<number>;
     visible: import("vue").PropType<boolean>;
@@ -16,9 +15,6 @@ declare const _default: import("vue").DefineComponent<{
     dataSourceType: {
         type: import("vue").PropType<string>;
     };
-    slideType: {
-        type: import("vue").PropType<SlideType>;
-    };
 }, {
     show(): Promise<void>;
     hide(): Promise<void>;
@@ -42,9 +38,6 @@ declare const _default: import("vue").DefineComponent<{
     dataSourceType: {
         type: import("vue").PropType<string>;
     };
-    slideType: {
-        type: import("vue").PropType<SlideType>;
-    };
 }>> & {
     onSubmit?: ((values: CodeBlockContent) => any) | undefined;
     "onUpdate:width"?: ((width: number) => any) | undefined;

package/types/fields/DataSourceFields.vue.d.ts

@@ -1,34 +1,90 @@
-import { type FieldProps } from '@tmagic/form';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<FieldProps<{
-    type: 'data-source-fields';
-}>>, {
-    disabled: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<{
+    width: import("vue").PropType<number>;
+    visible: import("vue").PropType<boolean>;
+    visible1: import("vue").PropType<boolean>;
+    name: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    values: {
+        type: import("vue").PropType<any>;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "large" | "default">;
+    };
+    model: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    config: {
+        type: import("vue").PropType<{
+            type: 'data-source-fields';
+        }>;
+        required: true;
+    };
+    initValues: {
+        type: import("vue").PropType<any>;
+    };
+    lastValues: {
+        type: import("vue").PropType<Record<string, any>>;
+    };
+    prop: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:width": (width: number) => void;
+    "update:visible": (visible: boolean) => void;
+    "update:visible1": (visible1: boolean) => void;
     change: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<FieldProps<{
-    type: 'data-source-fields';
-}>>, {
-    disabled: boolean;
-}>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: import("vue").PropType<number>;
+    visible: import("vue").PropType<boolean>;
+    visible1: import("vue").PropType<boolean>;
+    name: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    values: {
+        type: import("vue").PropType<any>;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "large" | "default">;
+    };
+    model: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    config: {
+        type: import("vue").PropType<{
+            type: 'data-source-fields';
+        }>;
+        required: true;
+    };
+    initValues: {
+        type: import("vue").PropType<any>;
+    };
+    lastValues: {
+        type: import("vue").PropType<Record<string, any>>;
+    };
+    prop: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}>> & {
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:width"?: ((width: number) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
+    "onUpdate:visible1"?: ((visible1: boolean) => any) | undefined;
 }, {
     disabled: boolean;
 }, {}>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/types/fields/DataSourceMocks.vue.d.ts

@@ -1,34 +1,86 @@
-import { type FieldProps } from '@tmagic/form';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<FieldProps<{
-    type: 'data-source-mocks';
-}>>, {
-    disabled: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: import("vue").DefineComponent<{
+    width: import("vue").PropType<number>;
+    visible: import("vue").PropType<boolean>;
+    name: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    values: {
+        type: import("vue").PropType<any>;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "large" | "default">;
+    };
+    model: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    config: {
+        type: import("vue").PropType<{
+            type: 'data-source-mocks';
+        }>;
+        required: true;
+    };
+    initValues: {
+        type: import("vue").PropType<any>;
+    };
+    lastValues: {
+        type: import("vue").PropType<Record<string, any>>;
+    };
+    prop: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:width": (width: number) => void;
+    "update:visible": (visible: boolean) => void;
     change: (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<FieldProps<{
-    type: 'data-source-mocks';
-}>>, {
-    disabled: boolean;
-}>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    width: import("vue").PropType<number>;
+    visible: import("vue").PropType<boolean>;
+    name: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+    values: {
+        type: import("vue").PropType<any>;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "large" | "default">;
+    };
+    model: {
+        type: import("vue").PropType<any>;
+        required: true;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    config: {
+        type: import("vue").PropType<{
+            type: 'data-source-mocks';
+        }>;
+        required: true;
+    };
+    initValues: {
+        type: import("vue").PropType<any>;
+    };
+    lastValues: {
+        type: import("vue").PropType<Record<string, any>>;
+    };
+    prop: {
+        type: import("vue").PropType<string>;
+        required: true;
+    };
+}>> & {
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:width"?: ((width: number) => any) | undefined;
+    "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
 }, {
     disabled: boolean;
 }, {}>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};

package/types/hooks/use-code-block-edit.d.ts

@@ -19,9 +19,6 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
         dataSourceType: {
             type: import("vue").PropType<string>;
         };
-        slideType: {
-            type: import("vue").PropType<import("..").SlideType>;
-        };
     }>> & {
         onSubmit?: ((values: CodeBlockContent) => any) | undefined;
         "onUpdate:width"?: ((width: number) => any) | undefined;
@@ -49,9 +46,6 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
         dataSourceType: {
             type: import("vue").PropType<string>;
         };
-        slideType: {
-            type: import("vue").PropType<import("..").SlideType>;
-        };
     }>> & {
         onSubmit?: ((values: CodeBlockContent) => any) | undefined;
         "onUpdate:width"?: ((width: number) => any) | undefined;
@@ -79,9 +73,6 @@ export declare const useCodeBlockEdit: (codeBlockService?: CodeBlockService) =>
         dataSourceType: {
             type: import("vue").PropType<string>;
         };
-        slideType: {
-            type: import("vue").PropType<import("..").SlideType>;
-        };
     }>> & {
         onSubmit?: ((values: CodeBlockContent) => any) | undefined;
         "onUpdate:width"?: ((width: number) => any) | undefined;