@tmagic/editor 1.3.0-beta.6 → 1.3.0-beta.8

package/src/layouts/sidebar/layer/use-click.ts

@@ -0,0 +1,105 @@
+import { type ComputedRef, nextTick, type Ref, ref } from 'vue';
+import { throttle } from 'lodash-es';
+
+import { Id, MNode } from '@tmagic/schema';
+
+import { LayerNodeStatus, Services, TreeNodeData, UI_SELECT_MODE_EVENT_NAME } from '@editor/type';
+import { updateStatus } from '@editor/utils/tree';
+
+import LayerMenu from './LayerMenu.vue';
+
+export const useClick = (
+  services: Services | undefined,
+  isCtrlKeyDown: Ref<boolean>,
+  nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,
+) => {
+  // 触发画布选中
+  const select = async (data: MNode) => {
+    if (!data.id) {
+      throw new Error('没有id');
+    }
+
+    if (isCtrlKeyDown.value) {
+      multiSelect(data);
+    } else {
+      await services?.editorService.select(data);
+      services?.editorService.get('stage')?.select(data.id);
+    }
+  };
+
+  const multiSelect = async (data: MNode) => {
+    const nodes = services?.editorService.get('nodes') || [];
+
+    const newNodes: Id[] = [];
+    let isCancel = false;
+    nodes.forEach((node) => {
+      if (node.id === data.id) {
+        isCancel = true;
+        return;
+      }
+
+      newNodes.push(node.id);
+    });
+
+    // 只剩一个不能取消选中
+    if (!isCancel || newNodes.length === 0) {
+      newNodes.push(data.id);
+    }
+
+    await services?.editorService.multiSelect(newNodes);
+    services?.editorService.get('stage')?.multiSelect(newNodes);
+  };
+
+  const throttleTime = 300;
+  // 鼠标在组件树移动触发高亮
+  const highlightHandler = throttle((event: MouseEvent, data: TreeNodeData) => {
+    highlight(data);
+  }, throttleTime);
+
+  // 触发画布高亮
+  const highlight = (data: TreeNodeData) => {
+    services?.editorService?.highlight(data);
+    services?.editorService?.get('stage')?.highlight(data.id);
+  };
+
+  const nodeClickHandler = (event: MouseEvent, data: TreeNodeData) => {
+    if (!nodeStatusMap?.value) return;
+
+    if (services?.uiService.get('uiSelectMode')) {
+      document.dispatchEvent(new CustomEvent(UI_SELECT_MODE_EVENT_NAME, { detail: data }));
+      return;
+    }
+
+    if (data.items && data.items.length > 0 && !isCtrlKeyDown.value) {
+      updateStatus(nodeStatusMap.value, data.id, {
+        expand: true,
+      });
+    }
+
+    nextTick(() => {
+      select(data);
+    });
+  };
+
+  // 右键菜单
+  const menu = ref<InstanceType<typeof LayerMenu>>();
+
+  return {
+    menu,
+
+    nodeClickHandler,
+
+    nodeContentmenuHandler(event: MouseEvent, data: TreeNodeData) {
+      event.preventDefault();
+
+      const nodes = services?.editorService.get('nodes') || [];
+      if (nodes.length < 2 || !nodes.includes(data)) {
+        nodeClickHandler(event, data);
+      }
+
+      menu.value?.show(event);
+    },
+
+    highlightHandler,
+  };
+};

package/src/layouts/sidebar/layer/use-drag.ts

@@ -65,7 +65,7 @@ export const useDrag = (services: Services | undefined) => {
     if (!event.target) return;
 
     const targetEl = getNodeEl(event.target as HTMLElement);
-    if (!targetEl) return;
+    if (!targetEl?.draggable) return;
 
     const labelEl = targetEl.children[0];
     if (!labelEl) return;

package/src/layouts/sidebar/layer/use-filter.ts

@@ -1,21 +1,10 @@
 import { type ComputedRef, ref } from 'vue';
 
 import { Id, MNode, MPage } from '@tmagic/schema';
-import { getKeys } from '@tmagic/utils';
 
 import { LayerNodeStatus } from '@editor/type';
 import { traverseNode } from '@editor/utils';
-
-export const updateStatus = (nodeStatusMap: Map<Id, LayerNodeStatus>, id: Id, status: Partial<LayerNodeStatus>) => {
-  const nodeStatus = nodeStatusMap.get(id);
-
-  if (!nodeStatus) return;
-  getKeys(status).forEach((key) => {
-    if (nodeStatus[key] !== undefined && status[key] !== undefined) {
-      nodeStatus[key] = Boolean(status[key]);
-    }
-  });
-};
+import { updateStatus } from '@editor/utils/tree';
 
 export const useFilter = (
   nodeStatusMap: ComputedRef<Map<Id, LayerNodeStatus> | undefined>,

package/src/layouts/sidebar/layer/use-keybinding.ts

@@ -1,9 +1,13 @@
 import { type Ref, ref, watchEffect } from 'vue';
 
+import Tree from '@editor/components/Tree.vue';
 import type { Services } from '@editor/type';
 import { KeyBindingContainerKey } from '@editor/utils/keybinding-config';
 
-export const useKeybinding = (services: Services | undefined, contianer: Ref<HTMLDivElement | undefined>) => {
+export const useKeybinding = (
+  services: Services | undefined,
+  contianer: Ref<InstanceType<typeof Tree> | undefined>,
+) => {
   const keybindingService = services?.keybindingService;
 
   // 是否多选
@@ -37,7 +41,7 @@ export const useKeybinding = (services: Services | undefined, contianer: Ref<HTM
   watchEffect(() => {
     if (contianer.value) {
       globalThis.addEventListener('blur', windowBlurHandler);
-      keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value);
+      keybindingService?.registeEl(KeyBindingContainerKey.LAYER_PANEL, contianer.value.$el);
     } else {
       globalThis.removeEventListener('blur', windowBlurHandler);
       keybindingService?.unregisteEl(KeyBindingContainerKey.LAYER_PANEL);

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -5,8 +5,7 @@ import { getNodePath } from '@tmagic/utils';
 
 import { LayerNodeStatus, Services } from '@editor/type';
 import { traverseNode } from '@editor/utils';
-
-import { updateStatus } from './use-filter';
+import { updateStatus } from '@editor/utils/tree';
 
 const createPageNodeStatus = (services: Services | undefined, pageId: Id) => {
   const map = new Map<Id, LayerNodeStatus>();
@@ -15,6 +14,7 @@ const createPageNodeStatus = (services: Services | undefined, pageId: Id) => {
     visible: true,
     expand: true,
     selected: true,
+    draggable: false,
   });
 
   services?.editorService.getNodeById(pageId)?.items.forEach((node: MNode) =>
@@ -23,6 +23,7 @@ const createPageNodeStatus = (services: Services | undefined, pageId: Id) => {
         visible: true,
         expand: false,
         selected: false,
+        draggable: true,
       });
     }),
   );
@@ -87,6 +88,7 @@ export const useNodeStatus = (services: Services | undefined, page: ComputedRef<
           visible: true,
           expand: Array.isArray(node.items),
           selected: true,
+          draggable: true,
         });
       });
     });

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -26,11 +26,15 @@ import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { ComponentItem, MenuButton, Services } from '@editor/type';
 
 import NodeListMenuTitle from './NodeListMenuTitle.vue';
+
+const PINNED_STATUE_CACHE_KEY = 'tmagic-pinned-node-list-pinned-status';
+
 const props = defineProps<{ isMultiSelect?: boolean }>();
 
 const menu = ref<InstanceType<typeof ContentMenu>>();
 const nodeList = ref<MNode[]>([]);
-const pinned = ref(false);
+const pinned = ref(Boolean(globalThis.localStorage.getItem(PINNED_STATUE_CACHE_KEY)));
+const firstShow = ref(true);
 
 const services = inject<Services>('services');
 const editorService = services?.editorService;
@@ -94,7 +98,8 @@ const unWatch = watch(
         nodeList.value = nodes;
 
         if (nodeList.value.length > 1) {
-          menu.value?.show(pinned.value ? undefined : event);
+          menu.value?.show(pinned.value && !firstShow.value ? undefined : event);
+          firstShow.value = false;
         }
       }, 1500);
     });
@@ -163,4 +168,8 @@ const dragMenuHandler = ({ deltaY, deltaX }: OnDrag) => {
 const closeHandler = () => {
   menu.value?.hide();
 };
+
+watch(pinned, () => {
+  globalThis.localStorage.setItem(PINNED_STATUE_CACHE_KEY, pinned.value.toString());
+});
 </script>

package/src/services/dep.ts

@@ -299,7 +299,7 @@ export class Watcher extends EventEmitter {
         const keyIsItems = key === 'items';
         const fullKey = prop ? `${prop}.${key}` : key;
 
-        if (target.isTarget(key, value)) {
+        if (target.isTarget(fullKey, value)) {
           target.updateDep(node, fullKey);
           this.emit('update-dep', node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {

package/src/theme/layer-panel.scss

@@ -1,79 +1,7 @@
-.magic-editor-layer-panel {
-  $--node-height: 22px;
-
+.m-editor-layer-panel {
   background: $--sidebar-content-background-color;
 
-  .magic-editor-layer-tree {
+  .m-editor-tree {
     padding-top: 48px;
-    background-color: $--sidebar-content-background-color;
-    color: $--font-color;
-    font-size: 13px;
-
-    .magic-editor-layer-node {
-      cursor: pointer;
-      white-space: nowrap;
-
-      .layer-node {
-        display: flex;
-        align-items: center;
-
-        &:hover {
-          background-color: $--hover-color;
-          color: $--font-color;
-        }
-
-        &.selected {
-          background-color: $--theme-color;
-          color: $--hover-color;
-        }
-
-        &.drag-inner {
-          .layer-node-content {
-            background-color: rgba($color: $--theme-color, $alpha: 0.5);
-            color: $--hover-color;
-          }
-        }
-
-        &.drag-before {
-          .layer-node-content {
-            border-top-color: rgba($color: $--theme-color, $alpha: 0.5);
-          }
-        }
-
-        &.drag-after {
-          .layer-node-content {
-            border-bottom-color: rgba($color: $--theme-color, $alpha: 0.5);
-          }
-        }
-
-        .expand-icon {
-          padding: 4px;
-          box-sizing: content-box;
-          font-size: 14px;
-        }
-
-        .layer-node-content {
-          display: flex;
-          flex: 1;
-          justify-content: space-between;
-          height: $--node-height;
-          border-top: 2px solid transparent;
-          border-bottom: 2px solid transparent;
-          .layer-node-label {
-            line-height: $--node-height;
-            flex: 1;
-            width: 100px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
-        }
-
-        .layer-node-tool {
-          margin-right: 15px;
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
   }
 }

package/src/theme/theme.scss

@@ -22,3 +22,4 @@
 @import "./data-source-methods.scss";
 @import "./data-source-input.scss";
 @import "./key-value.scss";
+@import "./tree.scss";

package/src/theme/tree.scss

@@ -0,0 +1,72 @@
+.m-editor-tree {
+  $--node-height: 22px;
+  color: $--font-color;
+  font-size: 13px;
+
+  .m-editor-tree-node {
+    cursor: pointer;
+    white-space: nowrap;
+
+    .tree-node {
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        background-color: $--hover-color;
+        color: $--font-color;
+      }
+
+      &.selected {
+        background-color: $--theme-color;
+        color: $--hover-color;
+      }
+
+      &.drag-inner {
+        .tree-node-content {
+          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);
+        }
+      }
+
+      &.drag-after {
+        .tree-node-content {
+          border-bottom-color: rgba($color: $--theme-color, $alpha: 0.5);
+        }
+      }
+
+      .expand-icon {
+        padding: 4px;
+        box-sizing: content-box;
+        font-size: 14px;
+      }
+
+      .tree-node-content {
+        display: flex;
+        flex: 1;
+        justify-content: space-between;
+        height: $--node-height;
+        border-top: 2px solid transparent;
+        border-bottom: 2px solid transparent;
+        .tree-node-label {
+          line-height: $--node-height;
+          flex: 1;
+          width: 100px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+
+      .tree-node-tool {
+        margin-right: 15px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}

package/src/type.ts

@@ -75,19 +75,25 @@ export interface CodeBlockListSlots {
   'code-block-panel-tool'(props: { id: Id; data: CodeBlockContent }): any;
 }
 
+export interface DataSourceListSlots {
+  'data-source-panel-tool'(props: { data: any }): any;
+}
+
 export interface LayerNodeSlots {
   'layer-node-content'(props: { data: MNode }): any;
 }
 
 export interface LayerPanelSlots extends LayerNodeSlots {
   'layer-panel-header'(props: {}): any;
+  'layer-node-tool'(props: { data: MNode }): any;
+  'layer-node-content'(props: { data: MNode }): any;
 }
 
 export interface PropsPanelSlots {
   'props-panel-header'(props: {}): any;
 }
 
-export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & ComponentListPanelSlots;
+export type SidebarSlots = LayerPanelSlots & CodeBlockListPanelSlots & ComponentListPanelSlots & DataSourceListSlots;
 
 export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> | MNode;
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
@@ -595,6 +601,8 @@ export interface LayerNodeStatus {
   expand: boolean;
   /** 选中 */
   selected: boolean;
+  /** 是否可拖拽 */
+  draggable: boolean;
 }
 
 /** 拖拽类型 */
@@ -607,3 +615,10 @@ export enum DragType {
 
 /** 当uiService.get('uiSelectMode')为true,点击组件（包括任何形式，组件树/画布）时触发的事件名 */
 export const UI_SELECT_MODE_EVENT_NAME = 'ui-select';
+
+export interface TreeNodeData {
+  id: Id;
+  name?: string;
+  items?: TreeNodeData[];
+  [key: string]: any;
+}

package/src/utils/dep.ts

@@ -58,8 +58,13 @@ export const createDataSourceCondTarget = (id: string) =>
   new Target({
     type: DepTargetType.DATA_SOURCE_COND,
     id,
-    isTarget: (key: string | number, value: any) =>
-      Array.isArray(value) && value[0] === id && Boolean(dataSourceService.getDataSourceById(id)),
+    isTarget: (key: string | number, value: any) => {
+      if (!Array.isArray(value) || value[0] !== id || !`${key}`.startsWith('displayConds')) return false;
+
+      const ds = dataSourceService.getDataSourceById(id);
+
+      return Boolean(ds?.fields?.find((field) => field.name === value[1]));
+    },
   });
 
 export const createDataSourceMethodTarget = (id: string) =>

package/src/utils/tree.ts

@@ -0,0 +1,15 @@
+import type { Id } from '@tmagic/schema';
+import { getKeys } from '@tmagic/utils';
+
+import type { LayerNodeStatus } from '@editor/type';
+
+export const updateStatus = (nodeStatusMap: Map<Id, LayerNodeStatus>, id: Id, status: Partial<LayerNodeStatus>) => {
+  const nodeStatus = nodeStatusMap.get(id);
+
+  if (!nodeStatus) return;
+  getKeys(status).forEach((key) => {
+    if (nodeStatus[key] !== undefined && status[key] !== undefined) {
+      nodeStatus[key] = Boolean(status[key]);
+    }
+  });
+};

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

@@ -15,7 +15,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
         top: number;
     }>;
     hide: () => void;
-    show: (e?: MouseEvent | undefined) => void;
+    show: (e?: {
+        clientY: number;
+        clientX: number;
+    } | undefined) => void;
     contains: (el: HTMLElement) => any;
     setPosition: (e: {
         clientY: number;

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

@@ -11,7 +11,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     minLeft: number;
     minRight: number;
     minCenter: number;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:left" | "update:right")[], "change" | "update:left" | "update:right", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+}>, {
+    updateWidth(): void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:left" | "update:right")[], "change" | "update:left" | "update:right", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     left?: number | undefined;
     right?: number | undefined;
     minLeft?: number | undefined;

package/types/{layouts/sidebar/layer/LayerNode.vue.d.ts → components/Tree.vue.d.ts}

@@ -1,30 +1,32 @@
-import type { MContainer, MNode } from '@tmagic/schema';
-import { LayerNodeSlots } from '../../../type';
+import type { Id } from '@tmagic/schema';
+import type { LayerNodeStatus, TreeNodeData } from '../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    data: MNode;
-    parent?: MContainer | undefined;
+    data: TreeNodeData[];
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number | undefined;
-    filterText?: string | undefined;
-    isCtrlKeyDown?: boolean | undefined;
+    emptyText?: string | undefined;
 }>, {
     indent: number;
-    filterText: string;
-    isCtrlKeyDown: boolean;
+    emptyText: 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: MNode;
-    parent?: MContainer | undefined;
+    data: TreeNodeData[];
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
     indent?: number | undefined;
-    filterText?: string | undefined;
-    isCtrlKeyDown?: boolean | undefined;
+    emptyText?: string | undefined;
 }>, {
     indent: number;
-    filterText: string;
-    isCtrlKeyDown: boolean;
+    emptyText: string;
 }>>>, {
-    filterText: string;
+    emptyText: string;
     indent: number;
-    isCtrlKeyDown: boolean;
-}, {}>, LayerNodeSlots>;
+}, {}>, {
+    'tree-node-content'(props: {
+        data: TreeNodeData;
+    }): any;
+    'tree-node-tool'(props: {
+        data: TreeNodeData;
+    }): any;
+}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -0,0 +1,47 @@
+import type { Id } from '@tmagic/schema';
+import type { LayerNodeStatus, TreeNodeData } from '../type';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    data: TreeNodeData;
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
+    indent?: number | undefined;
+}>, {
+    indent: number;
+}>, {}, 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: TreeNodeData;
+    nodeStatusMap: Map<Id, LayerNodeStatus>;
+    indent?: number | undefined;
+}>, {
+    indent: number;
+}>>>, {
+    indent: number;
+}, {}>, {
+    'tree-node-tool'(props: {
+        data: TreeNodeData;
+    }): any;
+    'tree-node-content'(props: {
+        data: TreeNodeData;
+    }): any;
+}>;
+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_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/types/layouts/sidebar/data-source/DataSourceList.vue.d.ts

@@ -1,11 +1,7 @@
+import { type DataSourceListSlots } from '../../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
     filter(val: string): void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
-    "data-source-panel-tool"?(_: {
-        id: any;
-        data: any;
-    }): any;
-}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, DataSourceListSlots>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

package/types/layouts/sidebar/data-source/DataSourceListPanel.vue.d.ts

@@ -1,2 +1,8 @@
-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<{}>>, {}, {}>;
+import type { DataSourceListSlots } 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<{}>>, {}, {}>, DataSourceListSlots>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/types/layouts/sidebar/layer/LayerPanel.vue.d.ts

@@ -1,4 +1,4 @@
-import type { LayerPanelSlots, MenuButton, MenuComponent } from '../../../type';
+import { LayerPanelSlots, MenuButton, MenuComponent } from '../../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     layerContentMenu: (MenuButton | MenuComponent)[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{