@tmagic/editor 1.3.6 → 1.3.8

package/src/services/keybinding.ts

@@ -1,6 +1,6 @@
 import KeyController, { KeyControllerEvent } from 'keycon';
 
-import { isPage } from '@tmagic/utils';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import { KeyBindingCacheItem, KeyBindingCommand, KeyBindingItem } from '@editor/type';
 
@@ -19,7 +19,7 @@ class Keybinding extends BaseService {
     [KeyBindingCommand.DELETE_NODE]: () => {
       const nodes = editorService.get('nodes');
 
-      if (!nodes || isPage(nodes[0])) return;
+      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
       editorService.remove(nodes);
     },
     [KeyBindingCommand.COPY_NODE]: () => {
@@ -29,7 +29,7 @@ class Keybinding extends BaseService {
     [KeyBindingCommand.CUT_NODE]: () => {
       const nodes = editorService.get('nodes');
 
-      if (!nodes || isPage(nodes[0])) return;
+      if (!nodes || isPage(nodes[0]) || isPageFragment(nodes[0])) return;
       editorService.copy(nodes);
       editorService.remove(nodes);
     },
@@ -84,15 +84,29 @@ class Keybinding extends BaseService {
     },
   };
 
-  public registeCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
+  public registerCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
     this.commands[command] = handler;
   }
 
-  public unregisteCommand(command: string) {
+  /**
+   * @deprecated
+   */
+  public registeCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
+    this.registerCommand(command, handler);
+  }
+
+  public unregisterCommand(command: string) {
     delete this.commands[command];
   }
 
-  public registeEl(name: string, el?: HTMLElement) {
+  /**
+   * @deprecated
+   */
+  public unregisteCommand(command: string) {
+    this.unregisterCommand(command);
+  }
+
+  public registerEl(name: string, el?: HTMLElement) {
     if (name !== 'global' && !el) {
       throw new Error('只有name为global可以不传el');
     }
@@ -102,20 +116,34 @@ class Keybinding extends BaseService {
     this.bind(name);
   }
 
-  public unregisteEl(name: string) {
+  /**
+   * @deprecated
+   */
+  public registeEl(name: string, el?: HTMLElement) {
+    this.registerEl(name, el);
+  }
+
+  public unregisterEl(name: string) {
     this.controllers.get(name)?.destroy();
     this.controllers.delete(name);
     this.bindingList.forEach((item) => {
-      item.binded = false;
+      item.bound = false;
     });
   }
 
-  public registe(maps: KeyBindingItem[]) {
+  /**
+   * @deprecated
+   */
+  public unregisteEl(name: string) {
+    this.unregisterEl(name);
+  }
+
+  public register(maps: KeyBindingItem[]) {
     for (const keybindingItem of maps) {
       const { command, keybinding, when } = keybindingItem;
 
       for (const [type = '', eventType = 'keydown'] of when) {
-        const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, binded: false };
+        const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, bound: false };
 
         this.bindingList.push(cacheItem);
       }
@@ -124,6 +152,13 @@ class Keybinding extends BaseService {
     this.bind();
   }
 
+  /**
+   * @deprecated
+   */
+  public registe(map: KeyBindingItem[]) {
+    this.register(map);
+  }
+
   public reset() {
     this.controllers.forEach((keycon) => {
       keycon.destroy();
@@ -138,13 +173,13 @@ class Keybinding extends BaseService {
 
   private bind(name?: string) {
     for (const item of this.bindingList) {
-      const { type, eventType, command, keybinding, binded } = item;
+      const { type, eventType, command, keybinding, bound } = item;
 
       if (name && name !== type) {
         continue;
       }
 
-      if (binded) {
+      if (bound) {
         continue;
       }
 
@@ -166,7 +201,7 @@ class Keybinding extends BaseService {
         }
       });
 
-      item.binded = true;
+      item.bound = true;
     }
   }
 

package/src/theme/code-block.scss

@@ -1,21 +1,5 @@
 .m-editor-code-block-list {
   height: 100%;
-
-  .list-container {
-    .list-item {
-      .codeIcon {
-        width: 22px;
-        height: 22px;
-        margin-right: 5px;
-      }
-
-      .compIcon {
-        width: 22px;
-        height: 22px;
-        margin-right: 5px;
-      }
-    }
-  }
 }
 
 .m-fields-code-select {

package/src/theme/page-bar.scss

@@ -1,7 +1,24 @@
-.m-editor-page-bar {
+.m-editor-page-bar-tabs {
   position: fixed;
   bottom: 0;
   left: 0;
+  width: 100%;
+
+  .tmagic-design-button.m-editor-page-bar-switch-type-button {
+    margin-left: 7px;
+    position: relative;
+    top: 1px;
+    border-radius: 3px 3px 0 0;
+    border: 1px solid $--border-color;
+    border-bottom: 1px solid transparent;
+
+    &.active {
+      background-color: #f3f3f3;
+    }
+  }
+}
+
+.m-editor-page-bar {
   display: flex;
   width: 100%;
   height: $--page-bar-height;

package/src/theme/page-fragment-select.scss

@@ -0,0 +1,14 @@
+.m-fields-page-fragment-select {
+  width: 100%;
+  .page-fragment-select-container {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .select {
+      flex: 1;
+    }
+    .icon {
+      margin-left: 10px;
+    }
+  }
+}

package/src/theme/theme.scss

@@ -24,3 +24,4 @@
 @import "./floatbox.scss";
 @import "./tree.scss";
 @import "./floating-box.scss";
+@import "./page-fragment-select.scss";

package/src/theme/tree.scss

@@ -80,4 +80,10 @@
       }
     }
   }
+
+  .m-editor-tree-empty {
+    text-align: center;
+    color: #909399;
+    font-size: 14px;
+  }
 }

package/src/type.ts

@@ -19,11 +19,12 @@
 import type { Component } from 'vue';
 
 import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
-import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
   CustomizeMoveableOptionsCallbackConfig,
+  GuidesOptions,
   MoveableOptions,
   RenderType,
   UpdateDragEl,
@@ -53,13 +54,14 @@ export interface FrameworkSlots {
   workspace(props: {}): any;
   'props-panel'(props: {}): any;
   'footer'(props: {}): any;
+  'page-bar'(props: {}): any;
+  'page-bar-title'(props: { page: MPage | MPageFragment }): any;
+  'page-bar-popover'(props: { page: MPage | MPageFragment }): any;
 }
 
 export interface WorkspaceSlots {
   stage(props: {}): any;
   'workspace-content'(props: {}): any;
-  'page-bar-title'(props: { page: MPage }): any;
-  'page-bar-popover'(props: { page: MPage }): any;
 }
 
 export interface ComponentListPanelSlots {
@@ -131,18 +133,23 @@ export interface StageOptions {
   isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
   updateDragEl: UpdateDragEl;
   renderType: RenderType;
+  guidesOptions: Partial<GuidesOptions>;
+  disabledMultiSelect?: boolean;
 }
 
 export interface StoreState {
   root: MApp | null;
-  page: MPage | null;
+  page: MPage | MPageFragment | null;
   parent: MContainer | null;
   node: MNode | null;
   highlightNode: MNode | null;
   nodes: MNode[];
   stage: StageCore | null;
+  stageLoading: boolean;
   modifiedNodeIds: Map<Id, Id>;
   pageLength: number;
+  pageFragmentLength: number;
+  disabledMultiSelect: boolean;
 }
 
 export type StoreStateKey = keyof StoreState;
@@ -223,7 +230,7 @@ export interface UiState {
 export interface EditorNodeInfo {
   node: MNode | null;
   parent: MContainer | null;
-  page: MPage | null;
+  page: MPage | MPageFragment | null;
 }
 
 export interface AddMNode {
@@ -488,7 +495,7 @@ export interface CodeParamStatement {
 }
 
 export interface StepValue {
-  data: MPage;
+  data: MPage | MPageFragment;
   modifiedNodeIds: Map<Id, Id>;
   nodeId: Id;
 }
@@ -571,7 +578,7 @@ export interface KeyBindingCacheItem {
   command: KeyBindingCommand | string;
   keybinding?: string | string[];
   eventType: 'keyup' | 'keydown';
-  binded: boolean;
+  bound: boolean;
 }
 
 export interface CodeSelectColConfig {
@@ -583,6 +590,15 @@ export interface CodeSelectColConfig {
   display?: boolean | FilterFunction;
 }
 
+export interface PageFragmentSelectConfig {
+  type: 'page-fragment-select';
+  name: string;
+  text: string;
+  labelWidth?: number | string;
+  disabled?: boolean | FilterFunction;
+  display?: boolean | FilterFunction;
+}
+
 export interface DataSourceMethodSelectConfig {
   type: 'data-source-method-select';
   name: string;

package/src/utils/content-menu.ts

@@ -2,7 +2,7 @@ import { computed, markRaw, Ref } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { Id, MContainer, NodeType } from '@tmagic/schema';
-import { isPage } from '@tmagic/utils';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { MenuButton, Services } from '@editor/type';
@@ -15,7 +15,7 @@ export const useDeleteMenu = (): MenuButton => ({
   icon: Delete,
   display: (services) => {
     const node = services?.editorService?.get('node');
-    return node?.type !== NodeType.ROOT && !isPage(node);
+    return node?.type !== NodeType.ROOT && !isPage(node) && !isPageFragment(node);
   },
   handler: (services) => {
     const nodes = services?.editorService?.get('nodes');

package/src/utils/editor.ts

@@ -18,24 +18,29 @@
 
 import serialize from 'serialize-javascript';
 
-import type { Id, MApp, MContainer, MNode, MPage } from '@tmagic/schema';
+import type { Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
+import { getNodePath, isNumber, isPage, isPageFragment, isPop } from '@tmagic/utils';
 
 import { Layout } from '@editor/type';
 export const COPY_STORAGE_KEY = '$MagicEditorCopyData';
 
 /**
  * 获取所有页面配置
- * @param app DSL跟节点
+ * @param root DSL跟节点
  * @returns 所有页面配置
  */
-export const getPageList = (app: MApp): MPage[] => {
-  if (app.items && Array.isArray(app.items)) {
-    return app.items.filter((item: MPage) => item.type === NodeType.PAGE);
-  }
-  return [];
+export const getPageList = (root?: MApp | null): MPage[] => {
+  if (!root) return [];
+  if (!Array.isArray(root.items)) return [];
+  return root.items.filter((item) => isPage(item)) as MPage[];
+};
+
+export const getPageFragmentList = (root?: MApp | null): MPageFragment[] => {
+  if (!root) return [];
+  if (!Array.isArray(root.items)) return [];
+  return root.items.filter((item) => isPageFragment(item)) as MPageFragment[];
 };
 
 /**
@@ -43,22 +48,23 @@ export const getPageList = (app: MApp): MPage[] => {
  * @param pages 所有页面配置
  * @returns 所有页面名称
  */
-export const getPageNameList = (pages: MPage[]): string[] => pages.map((page: MPage) => page.name || 'index');
+export const getPageNameList = (pages: (MPage | MPageFragment)[]): string[] =>
+  pages.map((page) => page.name || 'index');
 
 /**
  * 新增页面时，生成页面名称
  * @param {Object} pageNameList 所有页面名称
  * @returns {string}
  */
-export const generatePageName = (pageNameList: string[]): string => {
+export const generatePageName = (pageNameList: string[], type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string => {
   let pageLength = pageNameList.length;
 
-  if (!pageLength) return 'index';
+  if (!pageLength) return `${type}_index`;
 
-  let pageName = `page_${pageLength}`;
+  let pageName = `${type}_${pageLength}`;
   while (pageNameList.includes(pageName)) {
     pageLength += 1;
-    pageName = `page_${pageLength}`;
+    pageName = `${type}_${pageLength}`;
   }
 
   return pageName;
@@ -69,7 +75,8 @@ export const generatePageName = (pageNameList: string[]): string => {
  * @param {Object} app 所有页面配置
  * @returns {string}
  */
-export const generatePageNameByApp = (app: MApp): string => generatePageName(getPageNameList(getPageList(app)));
+export const generatePageNameByApp = (app: MApp, type: NodeType.PAGE | NodeType.PAGE_FRAGMENT): string =>
+  generatePageName(getPageNameList(type === 'page' ? getPageList(app) : getPageFragmentList(app)), type);
 
 /**
  * @param {Object} node
@@ -129,7 +136,7 @@ export const getInitPositionStyle = (style: Record<string, any> = {}, layout: La
   return style;
 };
 
-export const setChilrenLayout = (node: MContainer, layout: Layout) => {
+export const setChildrenLayout = (node: MContainer, layout: Layout) => {
   node.items?.forEach((child: MNode) => {
     setLayout(child, layout);
   });

package/src/utils/operator.ts

@@ -1,8 +1,8 @@
 import { toRaw } from 'vue';
 import { isEmpty } from 'lodash-es';
 
-import { Id, MContainer, MNode } from '@tmagic/schema';
-import { isPage } from '@tmagic/utils';
+import { Id, MContainer, MNode, NodeType } from '@tmagic/schema';
+import { isPage, isPageFragment } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
 import propsService from '@editor/services/props';
@@ -58,8 +58,8 @@ export const beforePaste = async (position: PastePosition, config: MNode[]): Pro
         };
       }
       const root = editorService.get('root');
-      if (isPage(pasteConfig) && root) {
-        pasteConfig.name = generatePageNameByApp(root);
+      if ((isPage(pasteConfig) || isPageFragment(pasteConfig)) && root) {
+        pasteConfig.name = generatePageNameByApp(root, isPage(pasteConfig) ? NodeType.PAGE : NodeType.PAGE_FRAGMENT);
       }
       return pasteConfig as MNode;
     }),

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

@@ -1,7 +1,7 @@
 import type { MenuButton, MenuComponent } from '../type';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     data?: MenuButton | MenuComponent | undefined;
-    eventType?: "click" | "mousedown" | "mouseup" | undefined;
+    eventType?: "mousedown" | "mouseup" | "click" | undefined;
 }>, {
     data: () => {
         type: string;
@@ -10,7 +10,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     eventType: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     data?: MenuButton | MenuComponent | undefined;
-    eventType?: "click" | "mousedown" | "mouseup" | undefined;
+    eventType?: "mousedown" | "mouseup" | "click" | undefined;
 }>, {
     data: () => {
         type: string;

package/types/editorProps.d.ts

@@ -1,8 +1,8 @@
 import type { EventOption } from '@tmagic/core';
-import { CustomTargetOptions } from '@tmagic/dep';
+import type { CustomTargetOptions } from '@tmagic/dep';
 import type { FormConfig, FormState } from '@tmagic/form';
 import type { DataSourceSchema, Id, MApp, MNode } from '@tmagic/schema';
-import StageCore, { ContainerHighlightType, CustomizeMoveableOptionsCallbackConfig, MoveableOptions, RenderType, UpdateDragEl } from '@tmagic/stage';
+import StageCore, { ContainerHighlightType, type CustomizeMoveableOptionsCallbackConfig, type GuidesOptions, type MoveableOptions, RenderType, type UpdateDragEl } from '@tmagic/stage';
 import type { ComponentGroup, DatasourceTypeOption, MenuBarData, MenuButton, MenuComponent, SideBarData, StageRect } from './type';
 export interface EditorProps {
     /** 页面初始值 */
@@ -62,6 +62,13 @@ export interface EditorProps {
     extendFormState?: (state: FormState) => Record<string, any> | Promise<Record<string, any>>;
     /** 自定义依赖收集器，复制组件时会将关联依赖一并复制 */
     collectorOptions?: CustomTargetOptions;
+    /** 标尺配置 */
+    guidesOptions?: Partial<GuidesOptions>;
+    /** 禁止多选 */
+    disabledMultiSelect?: boolean;
+    /** 禁用页面片 */
+    disabledPageFragment?: boolean;
+    customContentMenu?: (menus: (MenuButton | MenuComponent)[], type: string) => (MenuButton | MenuComponent)[];
 }
 export declare const defaultEditorProps: {
     componentGroupList: () => never[];
@@ -84,4 +91,6 @@ export declare const defaultEditorProps: {
     containerHighlightType: ContainerHighlightType;
     codeOptions: () => {};
     renderType: RenderType;
+    disabledMultiSelect: boolean;
+    disabledPageFragment: boolean;
 };

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

@@ -0,0 +1,31 @@
+import { FieldProps } from '@tmagic/form';
+import type { PageFragmentSelectConfig } from '../type';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<PageFragmentSelectConfig>>, {
+    disabled: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FieldProps<PageFragmentSelectConfig>>, {
+    disabled: boolean;
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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;
+    };
+};
+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];
+} & {};

package/types/index.d.ts

@@ -41,6 +41,7 @@ export { default as LayoutContainer } from './components/SplitView.vue';
 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 PageFragmentSelect } from './fields/PageFragmentSelect.vue';
 declare const _default: {
     install: (app: App, opt?: Partial<InstallOptions>) => void;
 };

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

@@ -1,2 +1,15 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    disabledPageFragment: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    disabledPageFragment: boolean;
+}>>>, {}, {}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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/layouts/Framework.vue.d.ts

@@ -1,6 +1,19 @@
 import type { FrameworkSlots } from '../type';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, Readonly<FrameworkSlots>>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    disabledPageFragment: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    disabledPageFragment: boolean;
+}>>>, {}, {}>, Readonly<FrameworkSlots>>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<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;
+    };
+};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;