@tmagic/editor 1.5.0-beta.0 → 1.5.0-beta.2

package/src/editorProps.ts

@@ -82,7 +82,7 @@ export interface EditorProps {
   /** 禁用属性配置面板右下角显示源码的按钮 */
   disabledShowSrc?: boolean;
   /** 中间工作区域中画布渲染的内容 */
-  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   /** 选中时会在画布上复制出一个大小相同的dom，实际拖拽的是这个dom，此方法用于干预这个dom的生成方式 */
   updateDragEl?: UpdateDragEl;
   /** 用于设置画布上的dom是否可以被选中 */

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -22,7 +22,7 @@
       :last-values="lastValues"
       :init-values="initValues"
       :values="values"
-      :prop="`${prop}${prop ? '.' : ''}${name}`"
+      :prop="prop"
       @change="onChangeHandler"
     ></component>
 

package/src/hooks/index.ts

@@ -22,3 +22,10 @@ export * from './use-stage';
 export * from './use-float-box';
 export * from './use-window-rect';
 export * from './use-editor-content-height';
+export * from './use-filter';
+export * from './use-float-box';
+export * from './use-getso';
+export * from './use-next-float-box-position';
+export * from './use-node-status';
+export * from './use-stage';
+export * from './use-window-rect';

package/src/index.ts

@@ -85,6 +85,8 @@ export { default as SplitView } from './components/SplitView.vue';
 export { default as Resizer } from './components/Resizer.vue';
 export { default as CodeBlockEditor } from './components/CodeBlockEditor.vue';
 export { default as FloatingBox } from './components/FloatingBox.vue';
+export { default as Tree } from './components/Tree.vue';
+export { default as TreeNode } from './components/TreeNode.vue';
 export { default as PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 export { default as DisplayConds } from './fields/DisplayConds.vue';
 export { default as CondOpSelect } from './fields/CondOpSelect.vue';

package/src/layouts/page-bar/PageBar.vue

@@ -24,7 +24,13 @@
           </slot>
         </div>
 
-        <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+        <TMagicPopover
+          popper-class="page-bar-popover"
+          placement="top"
+          trigger="hover"
+          :width="160"
+          :destroy-on-close="true"
+        >
           <div>
             <slot name="page-bar-popover" :page="item">
               <ToolButton

package/src/layouts/page-bar/PageList.vue

@@ -4,7 +4,13 @@
     id="m-editor-page-bar-list-icon"
     class="m-editor-page-bar-item m-editor-page-bar-item-icon"
   >
-    <TMagicPopover popper-class="page-bar-popover" placement="top" :width="160" trigger="hover">
+    <TMagicPopover
+      popper-class="page-bar-popover"
+      placement="top"
+      trigger="hover"
+      :width="160"
+      :destroy-on-close="true"
+    >
       <div>
         <slot name="page-list-popover" :list="list">
           <ToolButton

package/src/layouts/sidebar/Sidebar.vue

@@ -148,7 +148,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, nextTick, ref, watch } from 'vue';
 import { Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
@@ -196,7 +196,23 @@ const props = withDefaults(
 const services = inject<Services>('services');
 
 const columnLeftWidth = computed(() => services?.uiService.get('columnWidth')[ColumnLayout.LEFT] || 0);
-const { height: columnLeftHeight } = useEditorContentHeight();
+const { height: editorContentHeight } = useEditorContentHeight();
+const columnLeftHeight = ref(0);
+
+const unWatchEditorContentHeight = watch(
+  editorContentHeight,
+  (height) => {
+    if (height) {
+      columnLeftHeight.value = height * 0.5;
+      nextTick().then(() => {
+        unWatchEditorContentHeight();
+      });
+    }
+  },
+  {
+    immediate: true,
+  },
+);
 
 const activeTabName = ref(props.data?.status);
 

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

@@ -2,23 +2,27 @@
   <TMagicScrollbar class="data-source-list-panel m-editor-layer-panel">
     <div class="search-wrapper">
       <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <TMagicPopover v-if="editable" placement="right">
+      <TMagicPopover
+        v-if="editable"
+        placement="right"
+        trigger="hover"
+        popper-class="data-source-list-panel-add-menu"
+        :destroy-on-close="true"
+      >
         <template #reference>
           <TMagicButton type="primary" size="small">新增</TMagicButton>
         </template>
-        <div class="data-source-list-panel-add-menu">
-          <ToolButton
-            v-for="(item, index) in datasourceTypeList"
-            :data="{
-              type: 'button',
-              text: item.text,
-              handler: () => {
-                addHandler(item.type);
-              },
-            }"
-            :key="index"
-          ></ToolButton>
-        </div>
+        <ToolButton
+          v-for="(item, index) in datasourceTypeList"
+          :data="{
+            type: 'button',
+            text: item.text,
+            handler: () => {
+              addHandler(item.type);
+            },
+          }"
+          :key="index"
+        ></ToolButton>
       </TMagicPopover>
 
       <slot name="data-source-panel-search"></slot>

package/src/theme/data-source.scss

@@ -17,12 +17,15 @@
 }
 
 .data-source-list-panel-add-menu {
-  .tmagic-design-button {
-    width: 100%;
-    text-align: left;
+  padding: 4px 0;
 
-    span {
-      width: 100%;
+  .menu-item {
+    cursor: pointer;
+    transition: all 0.2s ease 0s;
+    padding: 5px 14px;
+
+    &:hover {
+      background-color: $--hover-color;
     }
   }
 }

package/src/theme/page-bar.scss

@@ -5,12 +5,13 @@
   width: 100%;
 
   .tmagic-design-button.m-editor-page-bar-switch-type-button {
-    margin-left: 7px;
+    margin-left: 10px;
     position: relative;
     top: 1px;
     border-radius: 3px 3px 0 0;
     border: 1px solid $--border-color;
     border-bottom: 1px solid transparent;
+    padding: 5px 10px;
 
     &.active {
       background-color: #f3f3f3;

package/src/type.ts

@@ -145,7 +145,7 @@ export interface StageOptions {
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
   disabledDragStart?: boolean;
-  render?: (stage: StageCore) => HTMLDivElement | Promise<HTMLDivElement>;
+  render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   moveableOptions?: MoveableOptions | ((config?: CustomizeMoveableOptionsCallbackConfig) => MoveableOptions);
   canSelect?: (el: HTMLElement) => boolean | Promise<boolean>;
   isContainer?: (el: HTMLElement) => boolean | Promise<boolean>;