@tmagic/editor 1.5.0 → 1.5.1

package/src/theme/page-bar.scss

@@ -1,3 +1,5 @@
+@use "common/var" as *;
+
 .m-editor-page-bar-tabs {
   position: fixed;
   bottom: 0;
@@ -9,24 +11,24 @@
 .m-editor-page-list-item {
   display: flex;
   width: 100%;
-  height: $--page-bar-height;
-  line-height: $--page-bar-height;
-  color: $--font-color;
+  height: $page-bar-height;
+  line-height: $page-bar-height;
+  color: $font-color;
   z-index: 2;
   overflow: hidden;
   &:hover {
-    background-color: $--hover-color;
+    background-color: $hover-color;
   }
 }
 
 .m-editor-page-bar {
   display: flex;
   width: 100%;
-  height: $--page-bar-height;
-  line-height: $--page-bar-height;
-  color: $--font-color;
+  height: $page-bar-height;
+  line-height: $page-bar-height;
+  color: $font-color;
   background-color: #f3f3f3;
-  border-top: 1px solid $--border-color;
+  border-top: 1px solid $border-color;
   z-index: 2;
   overflow: hidden;
 
@@ -38,7 +40,7 @@
   &-item {
     padding: 0 10px;
     cursor: pointer;
-    border-right: 1px solid $--border-color;
+    border-right: 1px solid $border-color;
     display: flex;
     justify-items: center;
     align-items: center;
@@ -60,7 +62,7 @@
 
       .icon-active {
         font-weight: bold;
-        color: $--theme-color;
+        color: $theme-color;
       }
     }
 
@@ -96,16 +98,16 @@
     padding: 5px 14px;
 
     .tmagic-design-button {
-      color: $--font-color;
+      color: $font-color;
     }
 
     &:hover {
-      background-color: $--hover-color;
+      background-color: $hover-color;
     }
 
     &.active {
       .tmagic-design-button {
-        color: $--theme-color;
+        color: $theme-color;
       }
     }
   }
@@ -113,8 +115,8 @@
 
 .m-editor-page-bar-search-panel {
   position: absolute;
-  bottom: $--page-bar-height;
-  border: 1px solid $--border-color;
+  bottom: $page-bar-height;
+  border: 1px solid $border-color;
   padding: 6px 10px;
   width: 100%;
   box-sizing: border-box;

package/src/theme/props-panel.scss

@@ -1,5 +1,78 @@
+@use "common/var" as *;
+
 .m-editor-props-panel {
-  padding: 0 10px 50px 10px;
+  height: 100%;
+  position: relative;
+
+  --props-style-panel-width: 300px;
+
+  .m-editor-props-form-panel {
+    padding-bottom: 10px;
+    position: relative;
+    height: 100%;
+    box-sizing: border-box;
+
+    .tmagic-design-scrollbar {
+      height: 100%;
+    }
+  }
+
+  .m-editor-props-property-panel {
+    &.show-style-panel {
+      padding-right: var(--props-style-panel-width);
+
+      .m-editor-props-panel-src-icon {
+        right: calc(15px + var(--props-style-panel-width));
+      }
+    }
+
+    .tmagic-design-form {
+      padding-right: 10px;
+      padding-left: 10px;
+
+      > .m-container-tab {
+        > .tmagic-design-tabs {
+          > .el-tabs__content {
+            padding-top: 55px;
+          }
+          > .el-tabs__header.is-top {
+            position: absolute;
+            top: 0;
+            width: 100%;
+            background: #fff;
+            z-index: 2;
+          }
+        }
+      }
+    }
+  }
+
+  .m-editor-props-style-panel {
+    position: absolute;
+    width: var(--props-style-panel-width);
+    right: 0;
+    top: 0;
+    background: #fff;
+    z-index: 12;
+
+    $style-panel-title-height: 38px;
+
+    .tmagic-design-scrollbar {
+      height: calc(100% - $style-panel-title-height - 1px);
+    }
+
+    .m-editor-props-style-panel-title {
+      text-align: center;
+      font-size: 14px;
+      font-weight: 600;
+      padding: 0 5px;
+      height: $style-panel-title-height;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 2px solid $border-color;
+    }
+  }
 
   .m-editor-props-panel-src-icon {
     position: absolute;
@@ -8,6 +81,13 @@
     z-index: 30;
   }
 
+  .m-editor-props-panel-style-icon {
+    position: absolute;
+    right: 15px;
+    bottom: 60px;
+    z-index: 30;
+  }
+
   .m-editor-props-panel-src-code.magic-code-editor {
     position: absolute;
     left: 0;

package/src/theme/resizer.scss

@@ -20,7 +20,7 @@
     }
   }
 
-  &.m-editor-resizer-draging {
+  &.m-editor-resizer-dragging {
     &::after {
       content: "";
       position: absolute;

package/src/theme/sidebar.scss

@@ -1,9 +1,11 @@
+@use "common/var" as *;
+
 .m-editor-sidebar {
   display: flex;
   height: 100%;
 
   .m-editor-sidebar-header {
-    background: $--sidebar-heder-background-color;
+    background: $sidebar-heder-background-color;
     height: 100%;
     width: 40px;
 
@@ -16,7 +18,7 @@
       cursor: pointer;
 
       &.is-active {
-        background: $--sidebar-content-background-color;
+        background: $sidebar-content-background-color;
 
         i {
           color: #353140;

package/src/theme/stage.scss

@@ -1,7 +1,9 @@
+@use "common/var" as *;
+
 .m-editor-stage {
   position: relative;
   width: 100%;
-  height: calc(100% - #{$--page-bar-height});
+  height: calc(100% - #{$page-bar-height});
   overflow: hidden;
   display: flex;
   justify-content: center;

package/src/theme/theme.scss

@@ -1,28 +1,28 @@
-@import "./search-input.scss";
-@import "./nav-menu.scss";
-@import "./framework.scss";
-@import "./sidebar.scss";
-@import "./layer-panel.scss";
-@import "./component-list-panel.scss";
-@import "./resizer.scss";
-@import "./workspace.scss";
-@import "./page-bar.scss";
-@import "./props-panel.scss";
-@import "./content-menu.scss";
-@import "./stage.scss";
-@import "./code-editor.scss";
-@import "./icon.scss";
-@import "./code-block.scss";
-@import "./event.scss";
-@import "./layout.scss";
-@import "./breadcrumb.scss";
-@import "./data-source.scss";
-@import "./data-source-fields.scss";
-@import "./data-source-methods.scss";
-@import "./data-source-input.scss";
-@import "./key-value.scss";
-@import "./tree.scss";
-@import "./floating-box.scss";
-@import "./page-fragment-select.scss";
-@import "./data-source-field.scss";
-@import "./data-source-field-select.scss";
+@use "./search-input.scss";
+@use "./nav-menu.scss";
+@use "./framework.scss";
+@use "./sidebar.scss";
+@use "./layer-panel.scss";
+@use "./component-list-panel.scss";
+@use "./resizer.scss";
+@use "./workspace.scss";
+@use "./page-bar.scss";
+@use "./props-panel.scss";
+@use "./content-menu.scss";
+@use "./stage.scss";
+@use "./code-editor.scss";
+@use "./icon.scss";
+@use "./code-block.scss";
+@use "./event.scss";
+@use "./layout.scss";
+@use "./breadcrumb.scss";
+@use "./data-source.scss";
+@use "./data-source-fields.scss";
+@use "./data-source-methods.scss";
+@use "./data-source-input.scss";
+@use "./key-value.scss";
+@use "./tree.scss";
+@use "./floating-box.scss";
+@use "./page-fragment-select.scss";
+@use "./data-source-field.scss";
+@use "./data-source-field-select.scss";

package/src/theme/tree.scss

@@ -1,6 +1,8 @@
+@use "common/var" as *;
+
 .m-editor-tree {
-  $--node-height: 22px;
-  color: $--font-color;
+  $node-height: 22px;
+  color: $font-color;
   font-size: 13px;
 
   .m-editor-tree-node {
@@ -12,31 +14,31 @@
       align-items: center;
 
       &:hover {
-        background-color: $--hover-color;
-        color: $--font-color;
+        background-color: $hover-color;
+        color: $font-color;
       }
 
       &.selected {
-        background-color: $--theme-color;
-        color: $--hover-color;
+        background-color: $theme-color;
+        color: $hover-color;
       }
 
       &.drag-inner {
         .tree-node-content {
-          background-color: rgba($color: $--theme-color, $alpha: 0.5);
-          color: $--hover-color;
+          background-color: rgba($color: $theme-color, $alpha: 0.5);
+          color: $hover-color;
         }
       }
 
       &.drag-before {
         .tree-node-content {
-          border-top-color: rgba($color: $--theme-color, $alpha: 0.5);
+          border-top-color: rgba($color: $theme-color, $alpha: 0.5);
         }
       }
 
       &.drag-after {
         .tree-node-content {
-          border-bottom-color: rgba($color: $--theme-color, $alpha: 0.5);
+          border-bottom-color: rgba($color: $theme-color, $alpha: 0.5);
         }
       }
 
@@ -50,11 +52,11 @@
         display: flex;
         flex: 1;
         justify-content: space-between;
-        height: $--node-height;
+        height: $node-height;
         border-top: 2px solid transparent;
         border-bottom: 2px solid transparent;
         .tree-node-label {
-          line-height: $--node-height;
+          line-height: $node-height;
           flex: 1;
           width: 100px;
           overflow: hidden;

package/src/type.ts

@@ -231,6 +231,8 @@ export interface UiState {
   uiSelectMode: boolean;
   /** 是否显示整个配置源码， true: 显示， false: 不显示，默认为false */
   showSrc: boolean;
+  /** 是否将样式配置单独一列显示， true: 显示， false: 不显示，默认为true */
+  showStylePanel: boolean;
   /** 画布显示放大倍数，默认为 1 */
   zoom: number;
   /** 画布容器的宽高 */
@@ -766,6 +768,7 @@ export type SyncHookPlugin<
 
 export interface EventBusEvent {
   'edit-data-source': [id: string];
+  'remove-data-source': [id: string];
   'edit-code': [id: string];
 }
 
@@ -787,3 +790,8 @@ export interface PageBarSortOptions extends PartSortableOptions {
   /** 在onStart之前调用 */
   beforeStart?: (event: SortableEvent, sortable: Sortable) => void | Promise<void>;
 }
+
+export type CustomContentMenuFunction = (
+  menus: (MenuButton | MenuComponent)[],
+  type: 'layer' | 'data-source' | 'viewer' | 'code-block',
+) => (MenuButton | MenuComponent)[];

package/src/utils/content-menu.ts

@@ -1,4 +1,4 @@
-import { computed, markRaw, Ref } from 'vue';
+import { computed, markRaw, type ShallowRef } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { Id, MContainer, NodeType } from '@tmagic/core';
@@ -33,7 +33,7 @@ export const useCopyMenu = (): MenuButton => ({
   },
 });
 
-export const usePasteMenu = (menu?: Ref<InstanceType<typeof ContentMenu> | undefined>): MenuButton => ({
+export const usePasteMenu = (menu?: ShallowRef<InstanceType<typeof ContentMenu> | null>): MenuButton => ({
   type: 'button',
   text: '粘贴',
   icon: markRaw(DocumentCopy),

package/src/utils/props.ts

@@ -18,6 +18,7 @@
  */
 
 import { NODE_CONDS_KEY } from '@tmagic/core';
+import { tMagicMessage } from '@tmagic/design';
 import type { FormConfig, FormState, TabPaneConfig } from '@tmagic/form';
 
 export const arrayOptions = [
@@ -41,6 +42,7 @@ export const numberOptions = [
 
 export const styleTabConfig: TabPaneConfig = {
   title: '样式',
+  display: ({ services }: any) => !(services.uiService.get('showStylePanel') ?? true),
   items: [
     {
       name: 'style',
@@ -53,6 +55,7 @@ export const styleTabConfig: TabPaneConfig = {
               type: 'data-source-field-select',
               name: 'position',
               text: '固定定位',
+              labelPosition: 'left',
               checkStrictly: false,
               dataSourceFieldType: ['string'],
               fieldConfig: {
@@ -112,6 +115,27 @@ export const styleTabConfig: TabPaneConfig = {
           type: 'fieldset',
           legend: '盒子',
           items: [
+            {
+              type: 'data-source-field-select',
+              name: 'display',
+              text: 'display',
+              checkStrictly: false,
+              dataSourceFieldType: ['string'],
+              fieldConfig: {
+                type: 'select',
+                clearable: true,
+                allowCreate: true,
+                options: [
+                  { text: 'block', value: 'block' },
+                  { text: 'flex', value: 'flex' },
+                  { text: 'none', value: 'none' },
+                  { text: 'inline-block', value: 'inline-block' },
+                  { text: 'grid', value: 'grid' },
+                  { text: 'inline', value: 'inline' },
+                  { text: 'initial', value: 'initial' },
+                ],
+              },
+            },
             {
               type: 'data-source-field-select',
               name: 'width',
@@ -140,6 +164,8 @@ export const styleTabConfig: TabPaneConfig = {
               dataSourceFieldType: ['string'],
               fieldConfig: {
                 type: 'select',
+                clearable: true,
+                allowCreate: true,
                 options: [
                   { text: 'visible', value: 'visible' },
                   { text: 'hidden', value: 'hidden' },
@@ -147,6 +173,7 @@ export const styleTabConfig: TabPaneConfig = {
                   { text: 'scroll', value: 'scroll' },
                   { text: 'auto', value: 'auto' },
                   { text: 'overlay', value: 'overlay' },
+                  { text: 'initial', value: 'initial' },
                 ],
               },
             },
@@ -213,7 +240,7 @@ export const styleTabConfig: TabPaneConfig = {
               checkStrictly: false,
               dataSourceFieldType: ['string'],
               fieldConfig: {
-                type: 'text',
+                type: 'img-upload',
               },
             },
             {
@@ -344,11 +371,13 @@ export const advancedTabConfig: TabPaneConfig = {
     {
       name: 'created',
       text: 'created',
+      labelPosition: 'top',
       type: 'code-select',
     },
     {
       name: 'mounted',
       text: 'mounted',
+      labelPosition: 'top',
       type: 'code-select',
     },
   ],
@@ -389,8 +418,21 @@ export const fillConfig = (config: FormConfig = [], labelWidth = '80px'): FormCo
           // 组件id，必须要有
           {
             name: 'id',
-            type: 'display',
-            text: 'id',
+            text: 'ID',
+            type: 'text',
+            disabled: true,
+            append: {
+              type: 'button',
+              text: '复制',
+              handler: async (vm, { model }) => {
+                try {
+                  await navigator.clipboard.writeText(`${model.id}`);
+                  tMagicMessage.success('已复制');
+                } catch (err) {
+                  tMagicMessage.error('复制失败');
+                }
+              },
+            },
           },
           {
             name: 'name',