@tmagic/editor 1.0.0-beta.15 → 1.0.0-beta.16

package/dist/types/src/fields/UISelect.vue.d.ts

@@ -1,4 +1,4 @@
-import type { DefineComponent, ComputedRef, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { DefineComponent, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ComputedRef, Ref, ExtractPropTypes } from 'vue';
 declare const _default: DefineComponent<{
     labelWidth: StringConstructor;
     config: ObjectConstructor;
@@ -9,6 +9,9 @@ declare const _default: DefineComponent<{
     };
     name: StringConstructor;
 }, {
+    Delete: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
+    Pointer: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
+    Close: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<{}>, {}>;
     val: ComputedRef<any>;
     uiSelectMode: Ref<boolean>;
     toName: ComputedRef<string>;

package/dist/types/src/layouts/CodeEditor.vue.d.ts

@@ -8,13 +8,17 @@ declare const _default: DefineComponent<{
         type: (StringConstructor | ObjectConstructor)[];
     };
     type: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
     language: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
+    options: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }, {
     values: Ref<string>;
     loading: Ref<boolean>;
@@ -30,18 +34,23 @@ declare const _default: DefineComponent<{
         type: (StringConstructor | ObjectConstructor)[];
     };
     type: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
     language: {
-        type: StringConstructor[];
+        type: StringConstructor;
         default: () => string;
     };
+    options: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
 }>> & {
     onInitd?: ((...args: any[]) => any) | undefined;
     onSave?: ((...args: any[]) => any) | undefined;
 }, {
     type: string;
     language: string;
+    options: Record<string, any>;
 }>;
 export default _default;

package/dist/types/src/layouts/sidebar/Sidebar.vue.d.ts

@@ -1,5 +1,5 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
-import { SideBarData, SideComponent } from '../../type';
+import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import { SideBarData } from '../../type';
 declare const _default: DefineComponent<{
     data: {
         type: PropType<SideBarData>;
@@ -11,7 +11,6 @@ declare const _default: DefineComponent<{
     };
 }, {
     activeTabName: Ref<string>;
-    items: ComputedRef<SideComponent[] | Record<string, any>[]>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     data: {
         type: PropType<SideBarData>;

package/dist/types/src/layouts/sidebar/TabPane.vue.d.ts

@@ -0,0 +1,14 @@
+import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import { SideComponent, SideItem } from '../../type';
+declare const _default: DefineComponent<{
+    data: {
+        type: PropType<SideItem>;
+    };
+}, {
+    config: ComputedRef<SideComponent | undefined>;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    data: {
+        type: PropType<SideItem>;
+    };
+}>>, {}>;
+export default _default;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-beta.15",
+  "version": "1.0.0-beta.16",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -44,11 +44,11 @@
   ],
   "dependencies": {
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-beta.15",
-    "@tmagic/form": "^1.0.0-beta.15",
-    "@tmagic/schema": "^1.0.0-beta.15",
-    "@tmagic/stage": "^1.0.0-beta.15",
-    "@tmagic/utils": "^1.0.0-beta.15",
+    "@tmagic/core": "^1.0.0-beta.16",
+    "@tmagic/form": "^1.0.0-beta.16",
+    "@tmagic/schema": "^1.0.0-beta.16",
+    "@tmagic/stage": "^1.0.0-beta.16",
+    "@tmagic/utils": "^1.0.0-beta.16",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.0",
@@ -80,5 +80,5 @@
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
   },
-  "gitHead": "340e4e3018c8699d6cf49001e0c367996ecea857"
+  "gitHead": "2aebfb1b8ceb5c8e26dfb59b643ed9f4f4b7bd15"
 }

package/src/components/ToolButton.vue

@@ -12,12 +12,12 @@
 
     <template v-else-if="item.type === 'zoom'">
       <tool-button
-        :data="{ type: 'button', icon: ZoomIn, handler: zoomInHandler, tooltip: '放大' }"
+        :data="{ type: 'button', icon: ZoomOut, handler: zoomOutHandler, tooltip: '缩小' }"
         :event-type="eventType"
       ></tool-button>
       <span class="menu-item-text" style="margin: 0 5px">{{ parseInt(`${zoom * 100}`, 10) }}%</span>
       <tool-button
-        :data="{ type: 'button', icon: ZoomOut, handler: zoomOutHandler, tooltip: '缩小' }"
+        :data="{ type: 'button', icon: ZoomIn, handler: zoomInHandler, tooltip: '放大' }"
         :event-type="eventType"
       ></tool-button>
     </template>

package/src/fields/UISelect.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="m-fields-ui-select" v-if="uiSelectMode" @click="cancelHandler">
-    <i class="el-icon-delete" style="color: rgb(221, 75, 57)">取消</i>
+    <el-button type="danger" :icon="Delete" text style="padding: 0">取消</el-button>
   </div>
-  <div class="m-fields-ui-select" v-else @click="startSelect">
-    <i class="el-icon-thumb"></i>
-    <span>{{ val ? toName + '_' + val : '点击此处选择' }}</span>
-    <i class="el-icon-delete" @click.stop="deleteHandler" v-if="val"></i>
+  <div class="m-fields-ui-select" v-else @click="startSelect" style="display: flex">
+    <el-tooltip content="清除">
+      <el-button v-if="val" style="padding: 0" type="danger" :icon="Close" text @click.stop="deleteHandler"></el-button>
+    </el-tooltip>
+    <el-tooltip :content="val ? toName + '_' + val : '点击此处选择'">
+      <el-button text style="padding: 0; margin: 0">{{ val ? toName + '_' + val : '点击此处选择' }}</el-button>
+    </el-tooltip>
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, defineComponent, inject, markRaw, ref } from 'vue';
+import { Close, Delete, Pointer } from '@element-plus/icons';
 
 import { FormState } from '@tmagic/form';
 
@@ -60,6 +64,10 @@ export default defineComponent({
     };
 
     return {
+      Delete: markRaw(Delete),
+      Pointer: markRaw(Pointer),
+      Close: markRaw(Close),
+
       val,
       uiSelectMode,
       toName: computed(() => {

package/src/layouts/CodeEditor.vue

@@ -4,6 +4,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
@@ -36,14 +37,19 @@ export default defineComponent({
     },
 
     type: {
-      type: [String],
+      type: String,
       default: () => '',
     },
 
     language: {
-      type: [String],
+      type: String,
       default: () => 'javascript',
     },
+
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
   },
 
   emits: ['initd', 'save'],
@@ -51,10 +57,18 @@ export default defineComponent({
   setup(props, { emit }) {
     let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
     let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
+
     const values = ref('');
     const loading = ref(false);
     const codeEditor = ref<HTMLDivElement>();
 
+    const resizeObserver = new globalThis.ResizeObserver(
+      throttle((): void => {
+        vsEditor?.layout();
+        vsDiffEditor?.layout();
+      }, 300),
+    );
+
     const setEditorValue = (v: string | any, m: string | any) => {
       values.value = toString(v, props.language);
 
@@ -71,11 +85,6 @@ export default defineComponent({
       return vsEditor?.setValue(values.value);
     };
 
-    const resizeHandler = () => {
-      vsEditor?.layout();
-      vsDiffEditor?.layout();
-    };
-
     const getEditorValue = () =>
       props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
 
@@ -88,8 +97,9 @@ export default defineComponent({
         tabSize: 2,
         theme: 'vs-dark',
         fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-        fontSize: 15,
+        fontSize: 14,
         formatOnPaste: true,
+        ...props.options,
       };
 
       if (props.type === 'diff') {
@@ -117,7 +127,7 @@ export default defineComponent({
         });
       }
 
-      globalThis.addEventListener('resize', resizeHandler);
+      resizeObserver.observe(codeEditor.value);
     };
 
     watch(
@@ -140,7 +150,7 @@ export default defineComponent({
     });
 
     onUnmounted(() => {
-      globalThis.removeEventListener('resize', resizeHandler);
+      resizeObserver.disconnect();
     });
 
     return {

package/src/layouts/sidebar/Sidebar.vue

@@ -1,36 +1,26 @@
 <template>
-  <el-tabs v-if="data.type === 'tabs'" class="m-editor-sidebar" v-model="activeTabName" type="card" tab-position="left">
-    <el-tab-pane v-for="item in items" :key="item.text" :name="item.text">
-      <template #label>
-        <span>
-          <m-icon v-if="item.icon" :icon="item.icon"></m-icon>
-          <div v-if="item.text" class="magic-editor-tab-panel-title">{{ item.text }}</div>
-        </span>
-      </template>
-
-      <component :is="item.component" v-bind="item.props || {}" v-on="item.listeners || {}">
-        <template #layer-node-content="{ data, node }" v-if="item.slots?.layerNodeContent">
-          <component :is="item.slots.layerNodeContent" :data="data" :node="node" />
-        </template>
-      </component>
-    </el-tab-pane>
+  <el-tabs
+    v-if="data.type === 'tabs' && data.items.length"
+    class="m-editor-sidebar"
+    v-model="activeTabName"
+    type="card"
+    tab-position="left"
+  >
+    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item"></tab-pane>
   </el-tabs>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, PropType, ref, watch } from 'vue';
-import { Coin, Files } from '@element-plus/icons';
+import { defineComponent, PropType, ref, watch } from 'vue';
 
-import MIcon from '@editor/components/Icon.vue';
-import { SideBarData, SideComponent } from '@editor/type';
+import { SideBarData } from '@editor/type';
 
-import ComponentListPanel from './ComponentListPanel.vue';
-import LayerPanel from './LayerPanel.vue';
+import TabPane from './TabPane.vue';
 
 export default defineComponent({
-  name: 'm-sidebar',
+  components: { TabPane },
 
-  components: { MIcon },
+  name: 'm-sidebar',
 
   props: {
     data: {
@@ -51,35 +41,6 @@ export default defineComponent({
 
     return {
       activeTabName,
-
-      items: computed<SideComponent[] | Record<string, any>[]>(() =>
-        props.data?.items.map((item) => {
-          if (typeof item !== 'string') {
-            return item;
-          }
-
-          switch (item) {
-            case 'component-list':
-              return {
-                type: 'component',
-                icon: Coin,
-                text: '组件',
-                component: ComponentListPanel,
-                slots: {},
-              };
-            case 'layer':
-              return {
-                type: 'component',
-                icon: Files,
-                text: '已选组件',
-                component: LayerPanel,
-                slots: {},
-              };
-            default:
-              return {};
-          }
-        }),
-      ),
     };
   },
 });

package/src/layouts/sidebar/TabPane.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-tab-pane v-if="config" :name="config.text">
+    <template #label>
+      <div :key="config.text">
+        <m-icon v-if="config.icon" :icon="config.icon"></m-icon>
+        <div v-if="config.text" class="magic-editor-tab-panel-title">{{ config.text }}</div>
+      </div>
+    </template>
+
+    <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
+      <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">
+        <component :is="config.slots?.layerNodeContent" :data="data" :node="node" />
+      </template>
+    </component>
+  </el-tab-pane>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType } from 'vue';
+import { Coin, Files } from '@element-plus/icons';
+
+import MIcon from '@editor/components/Icon.vue';
+import { SideComponent, SideItem } from '@editor/type';
+
+import ComponentListPanel from './ComponentListPanel.vue';
+import LayerPanel from './LayerPanel.vue';
+
+export default defineComponent({
+  components: { MIcon },
+
+  props: {
+    data: {
+      type: Object as PropType<SideItem>,
+    },
+  },
+
+  setup(props) {
+    return {
+      config: computed<SideComponent | undefined>(() => {
+        if (typeof props.data !== 'string') {
+          return props.data;
+        }
+
+        switch (props.data) {
+          case 'component-list':
+            return {
+              type: 'component',
+              icon: Coin,
+              text: '组件',
+              component: ComponentListPanel,
+              slots: {},
+            };
+          case 'layer':
+            return {
+              type: 'component',
+              icon: Files,
+              text: '已选组件',
+              component: LayerPanel,
+              slots: {},
+            };
+          default:
+            return undefined;
+        }
+      }),
+    };
+  },
+});
+</script>

package/src/services/editor.ts

@@ -291,7 +291,7 @@ class Editor extends BaseService {
     await this.select(newNode);
 
     this.addModifiedNodeId(newNode.id);
-    if (type !== NodeType.PAGE) {
+    if (!isPage) {
       this.pushHistoryState();
     }
 

package/src/theme/props-panel.scss

@@ -14,6 +14,10 @@
   .el-tabs__item {
     font-size: 12px;
   }
+
+  .el-input__wrapper {
+    border-radius: 0;
+  }
 }
 
 .m-editor-props-panel-popper {