@tmagic/editor 1.1.0-beta.7 → 1.1.0

package/src/utils/scroll-viewer.ts

@@ -1,4 +1,4 @@
-import { Keys } from '../type';
+import { EventEmitter } from 'events';
 
 interface ScrollViewerOptions {
   container: HTMLDivElement;
@@ -6,10 +6,7 @@ interface ScrollViewerOptions {
   zoom: number;
 }
 
-export class ScrollViewer {
-  private enter = false;
-  private targetEnter = false;
-  private keydown = false;
+export class ScrollViewer extends EventEmitter {
   private container: HTMLDivElement;
   private target: HTMLDivElement;
   private zoom = 1;
@@ -17,200 +14,135 @@ export class ScrollViewer {
   private scrollLeft = 0;
   private scrollTop = 0;
 
-  private x = 0;
-  private y = 0;
+  private scrollHeight = 0;
+  private scrollWidth = 0;
 
-  private resizeObserver = new ResizeObserver((entries) => {
-    for (const { contentRect } of entries) {
-      const { width, height } = contentRect;
-      const targetRect = this.target.getBoundingClientRect();
-      const targetWidth = targetRect.width * this.zoom;
-      const targetMarginTop = Number(this.target.style.marginTop) || 0;
-      const targetHeight = (targetRect.height + targetMarginTop) * this.zoom;
+  private width = 0;
+  private height = 0;
 
-      if (targetWidth < width) {
-        (this.target as any)._left = 0;
-      }
-      if (targetHeight < height) {
-        (this.target as any)._top = 0;
-      }
+  private translateXCorrectionValue = 0;
+  private translateYCorrectionValue = 0;
 
-      this.scroll();
-    }
+  private resizeObserver = new ResizeObserver(() => {
+    this.setSize();
+    this.setScrollSize();
   });
 
   constructor(options: ScrollViewerOptions) {
+    super();
+
     this.container = options.container;
     this.target = options.target;
     this.zoom = options.zoom;
 
-    globalThis.addEventListener('keydown', this.keydownHandler);
-    globalThis.addEventListener('keyup', this.keyupHandler);
-
-    this.container.addEventListener('mouseenter', this.mouseEnterHandler);
-    this.container.addEventListener('mouseleave', this.mouseLeaveHandler);
-    this.target.addEventListener('mouseenter', this.targetMouseEnterHandler);
-    this.target.addEventListener('mouseleave', this.targetMouseLeaveHandler);
-
-    this.container.addEventListener('wheel', this.wheelHandler);
+    this.container.addEventListener('wheel', this.wheelHandler, false);
 
+    this.setSize();
+    this.setScrollSize();
     this.resizeObserver.observe(this.container);
   }
 
   public destroy() {
     this.resizeObserver.disconnect();
-
-    this.container.removeEventListener('mouseenter', this.mouseEnterHandler);
-    this.container.removeEventListener('mouseleave', this.mouseLeaveHandler);
-    this.target.removeEventListener('mouseenter', this.targetMouseEnterHandler);
-    this.target.removeEventListener('mouseleave', this.targetMouseLeaveHandler);
-    globalThis.removeEventListener('keydown', this.keydownHandler);
-    globalThis.removeEventListener('keyup', this.keyupHandler);
+    this.container.removeEventListener('wheel', this.wheelHandler, false);
+    this.removeAllListeners();
   }
 
   public setZoom(zoom: number) {
     this.zoom = zoom;
+    this.setScrollSize();
   }
 
-  private scroll() {
-    const scrollLeft = (this.target as any)._left;
-    const scrollTop = (this.target as any)._top;
+  public scrollTo({ left, top }: { left?: number; top?: number }) {
+    if (typeof left !== 'undefined') {
+      this.scrollLeft = left;
+    }
 
-    this.target.style.transform = `translate(${scrollLeft}px, ${scrollTop}px)`;
-  }
+    if (typeof top !== 'undefined') {
+      this.scrollTop = top;
+    }
 
-  private removeHandler() {
-    this.target.style.cursor = '';
-    this.target.removeEventListener('mousedown', this.mousedownHandler);
-    document.removeEventListener('mousemove', this.mousemoveHandler);
-    document.removeEventListener('mouseup', this.mouseupHandler);
+    const translateX = -this.scrollLeft + this.translateXCorrectionValue;
+    const translateY = -this.scrollTop + this.translateYCorrectionValue;
+    this.target.style.transform = `translate(${translateX}px, ${translateY}px)`;
   }
 
   private wheelHandler = (event: WheelEvent) => {
-    if (this.targetEnter) return;
-
     const { deltaX, deltaY, currentTarget } = event;
 
     if (currentTarget !== this.container) return;
 
-    this.setScrollOffset(deltaX, deltaY);
-    this.scroll();
-    this.scrollLeft = (this.target as any)._left;
-    this.scrollTop = (this.target as any)._top;
-  };
-
-  private mouseEnterHandler = () => {
-    this.enter = true;
-  };
-
-  private mouseLeaveHandler = () => {
-    this.enter = false;
-  };
-
-  private targetMouseEnterHandler = () => {
-    this.targetEnter = true;
-  };
-
-  private targetMouseLeaveHandler = () => {
-    this.targetEnter = false;
-  };
-
-  private mousedownHandler = (event: MouseEvent) => {
-    if (!this.keydown) return;
-
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-
-    this.target.style.cursor = 'grabbing';
-
-    this.x = event.clientX;
-    this.y = event.clientY;
-
-    document.addEventListener('mousemove', this.mousemoveHandler);
-    document.addEventListener('mouseup', this.mouseupHandler);
-  };
-
-  private mouseupHandler = () => {
-    this.x = 0;
-    this.y = 0;
-
-    this.scrollLeft = (this.target as any)._left;
-    this.scrollTop = (this.target as any)._top;
-    this.removeHandler();
-  };
-
-  private mousemoveHandler = (event: MouseEvent) => {
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-
-    const deltaX = event.clientX - this.x;
-    const deltaY = event.clientY - this.y;
-
-    this.setScrollOffset(deltaX, deltaY);
-    this.scroll();
-  };
-
-  private keydownHandler = (event: KeyboardEvent) => {
-    if (event.code === Keys.ESCAPE && this.enter) {
-      event.preventDefault();
-      event.stopImmediatePropagation();
-      event.stopPropagation();
+    let top: number | undefined;
+    if (this.scrollHeight > this.height) {
+      top = this.scrollTop + this.getPos(deltaY, this.scrollTop, this.scrollHeight, this.height);
     }
 
-    if (event.code !== Keys.ESCAPE || !this.enter || this.keydown) {
-      return;
+    let left: number | undefined;
+    if (this.scrollWidth > this.width) {
+      left = this.scrollLeft + this.getPos(deltaX, this.scrollLeft, this.scrollWidth, this.width);
     }
 
-    this.keydown = true;
-
-    this.target.style.cursor = 'grab';
-    this.container.addEventListener('mousedown', this.mousedownHandler);
+    this.scrollTo({ left, top });
+    this.emit('scroll', {
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth,
+    });
   };
 
-  private keyupHandler = (event: KeyboardEvent) => {
-    if (event.code !== Keys.ESCAPE || !this.keydown) {
-      return;
+  private getPos(delta: number, scrollPos: number, scrollSize: number, size: number) {
+    let pos = 0;
+    if (delta < 0) {
+      if (scrollPos > 0) {
+        pos = Math.max(delta, -scrollPos);
+      }
+    } else {
+      const leftPos = scrollSize - size - scrollPos;
+      if (leftPos > 0) {
+        pos = Math.min(delta, leftPos);
+      }
     }
+    return pos;
+  }
 
-    event.preventDefault();
-    event.stopImmediatePropagation();
-    event.stopPropagation();
-
-    this.keydown = false;
-
-    event.preventDefault();
-
-    this.removeHandler();
-  };
-
-  private setScrollOffset(deltaX: number, deltaY: number) {
-    const { width, height } = this.container.getBoundingClientRect();
+  private setScrollSize = () => {
     const targetRect = this.target.getBoundingClientRect();
-
-    const targetWidth = targetRect.width * this.zoom;
-    const targetHeight = targetRect.height * this.zoom;
-
-    let y = 0;
-
-    if (targetHeight > height) {
-      if (deltaY > 0) {
-        y = this.scrollTop + Math.min(targetHeight - height - this.scrollTop, deltaY);
-      } else {
-        y = this.scrollTop + Math.max(-(targetHeight - height + this.scrollTop), deltaY);
-      }
+    this.scrollWidth = targetRect.width * this.zoom + 100;
+    const targetMarginTop = Number(this.target.style.marginTop) || 0;
+    this.scrollHeight = (targetRect.height + targetMarginTop) * this.zoom + 100;
+
+    let left: number | undefined;
+    let top: number | undefined;
+    if (this.scrollWidth < this.width) {
+      left = 0;
+      this.translateXCorrectionValue = 0;
+    } else {
+      this.translateXCorrectionValue = (this.scrollWidth - this.width) / 2;
     }
-
-    let x = 0;
-
-    if (targetWidth > width) {
-      if (deltaX > 0) {
-        x = this.scrollLeft + Math.min(targetWidth - width - this.scrollLeft, deltaX);
-      } else {
-        x = this.scrollLeft + Math.max(-(targetWidth - width + this.scrollLeft), deltaX);
-      }
+    if (this.scrollHeight < this.height) {
+      top = 0;
+      this.translateYCorrectionValue = 0;
+    } else {
+      this.translateYCorrectionValue = (this.scrollHeight - this.height) / 2;
     }
 
-    (this.target as any)._left = x;
-    (this.target as any)._top = y;
-  }
+    this.scrollTo({
+      left,
+      top,
+    });
+
+    this.emit('scroll', {
+      scrollLeft: this.scrollLeft,
+      scrollTop: this.scrollTop,
+      scrollHeight: this.scrollHeight,
+      scrollWidth: this.scrollWidth,
+    });
+  };
+
+  private setSize = () => {
+    const { width, height } = this.container.getBoundingClientRect();
+    this.width = width;
+    this.height = height;
+  };
 }

package/src/utils/stage.ts

@@ -0,0 +1,91 @@
+import { computed } from 'vue';
+
+import { MApp, MPage } from '@tmagic/schema';
+import StageCore, { GuidesType, SortEventData, UpdateEventData } from '@tmagic/stage';
+
+import editorService from '../services/editor';
+import uiService from '../services/ui';
+import { H_GUIDE_LINE_STORAGE_KEY, StageOptions, V_GUIDE_LINE_STORAGE_KEY } from '../type';
+
+import { getGuideLineFromCache } from './editor';
+
+const root = computed(() => editorService.get<MApp>('root'));
+const page = computed(() => editorService.get<MPage>('page'));
+const zoom = computed(() => uiService.get<number>('zoom') || 1);
+const uiSelectMode = computed(() => uiService.get<boolean>('uiSelectMode'));
+
+const getGuideLineKey = (key: string) => `${key}_${root.value?.id}_${page.value?.id}`;
+
+export const useStage = (stageOptions: StageOptions) => {
+  const stage = new StageCore({
+    render: stageOptions.render,
+    runtimeUrl: stageOptions.runtimeUrl,
+    zoom: zoom.value,
+    autoScrollIntoView: stageOptions.autoScrollIntoView,
+    isContainer: stageOptions.isContainer,
+    containerHighlightClassName: stageOptions.containerHighlightClassName,
+    containerHighlightDuration: stageOptions.containerHighlightDuration,
+    containerHighlightType: stageOptions.containerHighlightType,
+    canSelect: (el, event, stop) => {
+      const elCanSelect = stageOptions.canSelect(el);
+      // 在组件联动过程中不能再往下选择，返回并触发 ui-select
+      if (uiSelectMode.value && elCanSelect && event.type === 'mousedown') {
+        document.dispatchEvent(new CustomEvent('ui-select', { detail: el }));
+        return stop();
+      }
+
+      return elCanSelect;
+    },
+    moveableOptions: stageOptions.moveableOptions,
+    updateDragEl: stageOptions.updateDragEl,
+  });
+
+  stage.mask.setGuides([
+    getGuideLineFromCache(getGuideLineKey(H_GUIDE_LINE_STORAGE_KEY)),
+    getGuideLineFromCache(getGuideLineKey(V_GUIDE_LINE_STORAGE_KEY)),
+  ]);
+
+  stage.on('select', (el: HTMLElement) => {
+    editorService.select(el.id);
+  });
+
+  stage.on('highlight', (el: HTMLElement) => {
+    editorService.highlight(el.id);
+  });
+
+  stage.on('multiSelect', (els: HTMLElement[]) => {
+    editorService.multiSelect(els.map((el) => el.id));
+  });
+
+  stage.on('update', (ev: UpdateEventData) => {
+    if (ev.parentEl) {
+      for (const data of ev.data) {
+        editorService.moveToContainer({ id: data.el.id, style: data.style }, ev.parentEl.id);
+      }
+      return;
+    }
+
+    editorService.update(ev.data.map((data) => ({ id: data.el.id, style: data.style })));
+  });
+
+  stage.on('sort', (ev: SortEventData) => {
+    editorService.sort(ev.src, ev.dist);
+  });
+
+  stage.on('changeGuides', (e) => {
+    uiService.set('showGuides', true);
+
+    if (!root.value || !page.value) return;
+
+    const storageKey = getGuideLineKey(
+      e.type === GuidesType.HORIZONTAL ? H_GUIDE_LINE_STORAGE_KEY : V_GUIDE_LINE_STORAGE_KEY,
+    );
+    if (e.guides.length) {
+      globalThis.localStorage.setItem(storageKey, JSON.stringify(e.guides));
+    } else {
+      globalThis.localStorage.removeItem(storageKey);
+    }
+  });
+
+  return stage;
+};

package/types/Editor.vue.d.ts

@@ -2,8 +2,8 @@ import { PropType } from 'vue';
 import type { FormConfig } from '@tmagic/form';
 import type { MApp, MNode } from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
-import { MoveableOptions } from '@tmagic/stage';
-import type { ComponentGroup, MenuBarData, MenuItem, Services, SideBarData, StageRect } from './type';
+import { ContainerHighlightType, MoveableOptions } from '@tmagic/stage';
+import type { ComponentGroup, MenuBarData, MenuButton, MenuComponent, Services, SideBarData, StageRect } from './type';
 declare const _default: import("vue").DefineComponent<{
     /** 页面初始值 */
     modelValue: {
@@ -21,11 +21,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<SideBarData>;
     };
     layerContentMenu: {
-        type: PropType<MenuItem[]>;
+        type: PropType<(MenuButton | MenuComponent)[]>;
         default: () => never[];
     };
     stageContentMenu: {
-        type: PropType<MenuItem[]>;
+        type: PropType<(MenuButton | MenuComponent)[]>;
         default: () => never[];
     };
     /** 顶部工具栏配置 */
@@ -83,6 +83,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    containerHighlightType: {
+        type: PropType<ContainerHighlightType>;
+        default: ContainerHighlightType;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -110,11 +114,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<SideBarData>;
     };
     layerContentMenu: {
-        type: PropType<MenuItem[]>;
+        type: PropType<(MenuButton | MenuComponent)[]>;
         default: () => never[];
     };
     stageContentMenu: {
-        type: PropType<MenuItem[]>;
+        type: PropType<(MenuButton | MenuComponent)[]>;
         default: () => never[];
     };
     /** 顶部工具栏配置 */
@@ -172,6 +176,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    containerHighlightType: {
+        type: PropType<ContainerHighlightType>;
+        default: ContainerHighlightType;
+    };
     stageRect: {
         type: PropType<StageRect>;
     };
@@ -188,8 +196,8 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     menu: MenuBarData;
     codeOptions: Record<string, any>;
-    layerContentMenu: MenuItem[];
-    stageContentMenu: MenuItem[];
+    layerContentMenu: (MenuButton | MenuComponent)[];
+    stageContentMenu: (MenuButton | MenuComponent)[];
     modelValue: MApp;
     componentGroupList: ComponentGroup[];
     autoScrollIntoView: boolean;
@@ -200,5 +208,6 @@ declare const _default: import("vue").DefineComponent<{
     isContainer: (el: HTMLElement) => boolean | Promise<boolean>;
     containerHighlightClassName: string;
     containerHighlightDuration: number;
+    containerHighlightType: ContainerHighlightType;
 }>;
 export default _default;

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

@@ -1,14 +1,14 @@
 import { nextTick } from 'vue';
-import { MenuItem } from '../type';
+import { MenuButton, MenuComponent } from '../type';
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            menuData: MenuItem[];
+            menuData: (MenuButton | MenuComponent)[];
             isSubMenu: boolean;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            menuData?: MenuItem[] | undefined;
+            menuData?: (MenuButton | MenuComponent)[] | undefined;
             isSubMenu?: boolean | undefined;
         }>, {
             menuData: () => never[];
@@ -31,7 +31,7 @@ declare const _default: {
         $emit: (event: "hide" | "show", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            menuData?: MenuItem[] | undefined;
+            menuData?: (MenuButton | MenuComponent)[] | undefined;
             isSubMenu?: boolean | undefined;
         }>, {
             menuData: () => never[];
@@ -43,7 +43,7 @@ declare const _default: {
             hide: () => void;
             show: (e: MouseEvent) => void;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], string, {
-            menuData: MenuItem[];
+            menuData: (MenuButton | MenuComponent)[];
             isSubMenu: boolean;
         }> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -66,7 +66,7 @@ declare const _default: {
         $nextTick: typeof nextTick;
         $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-        menuData?: MenuItem[] | undefined;
+        menuData?: (MenuButton | MenuComponent)[] | undefined;
         isSubMenu?: boolean | undefined;
     }>, {
         menuData: () => never[];
@@ -82,7 +82,7 @@ declare const _default: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    menuData?: MenuItem[] | undefined;
+    menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;
 }>, {
     menuData: () => never[];
@@ -94,7 +94,7 @@ declare const _default: {
     hide: () => void;
     show: (e: MouseEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", {
-    menuData: MenuItem[];
+    menuData: (MenuButton | MenuComponent)[];
     isSubMenu: boolean;
 }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {};

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

@@ -1,13 +1,63 @@
-import { Component, PropType, toRaw } from 'vue';
-declare const _default: import("vue").DefineComponent<{
-    icon: {
-        type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-    };
-}, {
-    toRaw: typeof toRaw;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    icon: {
-        type: PropType<string | Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>>;
-    };
-}>>, {}>;
+declare const _default: {
+    new (...args: any[]): {
+        $: import("vue").ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+            icon?: any;
+        }>>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        };
+        $slots: Readonly<{
+            [name: string]: import("vue").Slot | undefined;
+        }>;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: any;
+        $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+            icon?: any;
+        }>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {}> & {
+            beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+            created?: ((() => void) | (() => void)[]) | undefined;
+            beforeMount?: ((() => void) | (() => void)[]) | undefined;
+            mounted?: ((() => void) | (() => void)[]) | undefined;
+            beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+            updated?: ((() => void) | (() => void)[]) | undefined;
+            activated?: ((() => void) | (() => void)[]) | undefined;
+            deactivated?: ((() => void) | (() => void)[]) | undefined;
+            beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+            beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+            destroyed?: ((() => void) | (() => void)[]) | undefined;
+            unmounted?: ((() => void) | (() => void)[]) | undefined;
+            renderTracked?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import("vue").nextTick;
+        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+    } & Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+        icon?: any;
+    }>>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    icon?: any;
+}>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {};
+});
 export default _default;
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+declare 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;
+    };
+};