@tmagic/editor 1.0.2 → 1.0.5

package/dist/types/src/Editor.vue.d.ts

@@ -1,4 +1,5 @@
-import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
+import { PropType } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';

package/dist/types/src/components/Icon.vue.d.ts

@@ -1,4 +1,5 @@
-import type { DefineComponent, ComputedOptions, MethodOptions, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, Component,  PropType,  toRaw } from 'vue';
+import type { DefineComponent, ComputedOptions, MethodOptions, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
+import { Component, PropType, toRaw } from 'vue';
 declare const _default: DefineComponent<{
     icon: {
         type: PropType<string | Component<any, any, any, ComputedOptions, MethodOptions>>;

package/dist/types/src/components/ScrollViewer.vue.d.ts

@@ -1,4 +1,5 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { Ref, ComputedRef } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 declare const _default: DefineComponent<{
     width: NumberConstructor;
     height: NumberConstructor;

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

@@ -1,4 +1,5 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { ComputedRef } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 declare const _default: DefineComponent<Readonly<{
     name?: any;
     config?: any;

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

@@ -1,4 +1,6 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { Ref, ComputedRef } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
+import { PropType } from 'vue';
 interface CodeLinkConfig {
     type: 'code-link';
     name: string;

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

@@ -1,4 +1,4 @@
-import type { DefineComponent, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { DefineComponent, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 declare const _default: DefineComponent<{}, {
     clickHandler(): void;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{}>>, {}>;

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

@@ -1,4 +1,5 @@
-import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { Ref } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 import * as monaco from 'monaco-editor';
 declare const _default: DefineComponent<{
     initValues: {

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

@@ -1,4 +1,5 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { ComputedRef } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 import type { MApp } from '@tmagic/schema';
 import { GetColumnWidth } from '../type';
 declare const _default: DefineComponent<{

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

@@ -1,4 +1,6 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { ComputedRef } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
+import { PropType } from 'vue';
 import { GetColumnWidth, MenuBarData } from '../type';
 declare const _default: DefineComponent<{
     data: {

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

@@ -1,4 +1,5 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { Ref, ComputedRef } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 import type { FormValue } from '@tmagic/form';
 declare const _default: DefineComponent<{}, {
     values: Ref<FormValue>;

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

@@ -1,4 +1,5 @@
-import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { Ref } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 declare const _default: DefineComponent<{
     type: {
         type: StringConstructor;

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

@@ -1,4 +1,5 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { Ref, ComputedRef } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 import type { ComponentItem } from '../../type';
 declare const _default: DefineComponent<{}, {
     searchText: Ref<string>;

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

@@ -1,4 +1,6 @@
-import type { DefineComponent, Ref, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { Ref } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
+import { PropType } from 'vue';
 import { SideBarData } from '../../type';
 declare const _default: DefineComponent<{
     data: {

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

@@ -1,4 +1,6 @@
-import type { DefineComponent, ComputedRef, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+import type { ComputedRef } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
+import { PropType } from 'vue';
 import { SideComponent, SideItem } from '../../type';
 declare const _default: DefineComponent<{
     data: {

package/dist/types/src/layouts/workspace/Workspace.vue.d.ts

@@ -1,4 +1,5 @@
-import type { DefineComponent, Ref, ComputedRef, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+import type { Ref, ComputedRef } from '@vue/reactivity';
+import type { DefineComponent, ComponentOptionsMixin, EmitsOptions, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from '@vue/runtime-core';
 import type { MPage } from '@tmagic/schema';
 declare const _default: DefineComponent<{}, {
     workspace: Ref<HTMLDivElement | undefined>;

package/dist/types/src/services/history.d.ts

@@ -1,4 +1,4 @@
-import { Id, MPage } from '@tmagic/schema';
+import type { Id, MPage } from '@tmagic/schema';
 import { UndoRedo } from '../utils/undo-redo';
 import BaseService from './BaseService';
 export interface StepValue {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.2",
+  "version": "1.0.5",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -22,7 +22,7 @@
   },
   "license": "Apache-2.0",
   "scripts": {
-    "build": "vite build"
+    "build": "vue-tsc --noEmit && vite build"
   },
   "engines": {
     "node": ">=14"
@@ -43,14 +43,14 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "1.0.2",
-    "@tmagic/form": "1.0.2",
-    "@tmagic/schema": "1.0.2",
-    "@tmagic/stage": "1.0.2",
-    "@tmagic/utils": "1.0.2",
+    "@tmagic/core": "1.0.5",
+    "@tmagic/form": "1.0.5",
+    "@tmagic/schema": "1.0.5",
+    "@tmagic/stage": "1.0.5",
+    "@tmagic/utils": "1.0.5",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
-    "element-plus": "^2.2.0",
+    "element-plus": "^2.2.6",
     "events": "^3.3.0",
     "gesto": "^1.7.0",
     "keycon": "^1.1.2",
@@ -60,8 +60,8 @@
     "vue": "^3.2.0"
   },
   "peerDependencies": {
-    "@tmagic/form": "1.0.2",
-    "element-plus": "^2.2.0",
+    "@tmagic/form": "1.0.5",
+    "element-plus": "^2.2.6",
     "monaco-editor": "^0.32.1",
     "vue": "^3.2.0"
   },
@@ -70,14 +70,13 @@
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.4",
     "@types/serialize-javascript": "^5.0.1",
-    "@vitejs/plugin-vue": "^1.2.3",
-    "@vitejs/plugin-vue-jsx": "^1.1.6",
+    "@vitejs/plugin-vue": "^2.3.3",
     "@vue/compiler-sfc": "^3.2.0",
     "@vue/test-utils": "^2.0.0",
     "sass": "^1.35.1",
     "typescript": "^4.3.4",
-    "vite": "^2.3.7",
+    "vite": "^2.9.13",
     "vite-plugin-dts": "^0.9.6",
-    "vue-tsc": "^0.0.24"
+    "vue-tsc": "^0.38.2"
   }
 }

package/src/Editor.vue

@@ -6,7 +6,15 @@
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <sidebar :data="sidebar"></sidebar>
+        <sidebar :data="sidebar">
+          <template #layer-panel-header>
+            <slot name="layer-panel-header"></slot>
+          </template>
+
+          <template #component-list-panel-header>
+            <slot name="component-list-panel-header"></slot>
+          </template>
+        </sidebar>
       </slot>
     </template>
 
@@ -20,9 +28,13 @@
       </slot>
     </template>
 
-    <template #propsPanel>
-      <slot name="propsPanel">
-        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)"></props-panel>
+    <template #props-panel>
+      <slot name="props-panel">
+        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)">
+          <template #props-panel-header>
+            <slot name="props-panel-header"></slot>
+          </template>
+        </props-panel>
       </slot>
     </template>
 

package/src/layouts/AddPageBox.vue

@@ -17,7 +17,7 @@ import { Plus } from '@element-plus/icons';
 
 import { NodeType } from '@tmagic/schema';
 
-import { Services } from '@editor/type';
+import type { Services } from '@editor/type';
 import { generatePageNameByApp } from '@editor/utils';
 
 export default defineComponent({

package/src/layouts/Framework.vue

@@ -26,7 +26,7 @@
 
         <div class="m-editor-framework-right" :style="`width: ${columnWidth?.right}px`">
           <el-scrollbar>
-            <slot name="propsPanel"></slot>
+            <slot name="props-panel"></slot>
           </el-scrollbar>
         </div>
       </template>

package/src/layouts/PropsPanel.vue

@@ -1,13 +1,16 @@
 <template>
-  <m-form
-    :class="`m-editor-props-panel ${propsPanelSize}`"
-    :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
-    ref="configForm"
-    :size="propsPanelSize"
-    :init-values="values"
-    :config="curFormConfig"
-    @change="submit"
-  ></m-form>
+  <div class="`m-editor-props-panel">
+    <slot name="props-panel-header"></slot>
+    <m-form
+      :class="`m-editor-props-panel ${propsPanelSize}`"
+      :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
+      ref="configForm"
+      :size="propsPanelSize"
+      :init-values="values"
+      :config="curFormConfig"
+      @change="submit"
+    ></m-form>
+  </div>
 </template>
 
 <script lang="ts">

package/src/layouts/sidebar/ComponentListPanel.vue

@@ -1,5 +1,7 @@
 <template>
   <el-scrollbar>
+    <slot name="component-list-panel-header"></slot>
+
     <el-collapse class="ui-component-panel" :model-value="collapseValue">
       <el-input
         prefix-icon="el-icon-search"

package/src/layouts/sidebar/LayerPanel.vue

@@ -1,5 +1,7 @@
 <template>
   <el-scrollbar class="magic-editor-layer-panel">
+    <slot name="layer-panel-header"></slot>
+
     <el-input
       class="filterInput"
       size="small"

package/src/layouts/sidebar/Sidebar.vue

@@ -6,7 +6,15 @@
     type="card"
     tab-position="left"
   >
-    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item"></tab-pane>
+    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item">
+      <template #layer-panel-header v-if="item === 'layer'">
+        <slot name="layer-panel-header"></slot>
+      </template>
+
+      <template #component-list-panel-header v-if="item === 'component-list'">
+        <slot name="component-list-panel-header"></slot>
+      </template>
+    </tab-pane>
   </el-tabs>
 </template>
 

package/src/layouts/sidebar/TabPane.vue

@@ -8,6 +8,16 @@
     </template>
 
     <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
+      <template #component-list-panel-header v-if="data === 'component-list' || config.slots?.componentListPanelHeader">
+        <slot v-if="data === 'component-list'" name="component-list-panel-header"></slot>
+        <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
+      </template>
+
+      <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
+        <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
+        <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
+      </template>
+
       <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">
         <component :is="config.slots?.layerNodeContent" :data="data" :node="node" />
       </template>

package/src/services/history.ts

@@ -18,7 +18,7 @@
 
 import { reactive } from 'vue';
 
-import { Id, MPage } from '@tmagic/schema';
+import type { Id, MPage } from '@tmagic/schema';
 
 import { UndoRedo } from '@editor/utils/undo-redo';