@toolmain/components 1.2.7 → 1.2.9

package/dist/index.d.ts

@@ -11,9 +11,12 @@ import { GLTF } from 'three/addons';
 import type { MaybeRef } from 'vue';
 import { OrbitControls } from 'three/addons';
 import { PointerLockControls } from 'three/addons';
+import { Primitive } from 'type-fest';
 import { PublicProps } from 'vue';
 import { Reactive } from 'vue';
 import { Ref } from 'vue';
+import { RendererElement } from 'vue';
+import { RendererNode } from 'vue';
 import { RoundedBoxGeometry } from 'three/addons';
 import { ShallowRef } from 'vue';
 import { default as Stats_2 } from 'three/addons/libs/stats.module.js';
@@ -100,6 +103,11 @@ declare type __VLS_Props_4 = {
     destroyIcon?: boolean;
 };
 
+declare type __VLS_Props_5 = {
+    lib: ComponentLibrary;
+    provider: ComponentProvider;
+};
+
 declare type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
@@ -156,6 +164,12 @@ declare type __VLS_WithSlots_5<T, S> = T & {
     };
 };
 
+declare type __VLS_WithSlots_6<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 /**
  * anger to rad
  */
@@ -170,6 +184,111 @@ export declare type AnimateDir = "left" | "top" | "bottom" | "right" | "self" |
 
 declare type ArrMutKeys = "splice" | "push" | "pop" | "shift" | "unshift";
 
+/**
+ * 组件实例数据，包含元数据
+ */
+export declare type BaseComponent = {
+    /**
+     * 组件实例id
+     */
+    id: string;
+    /**
+     * 生成当前组件的组件库id
+     */
+    libraryId: string;
+    /**
+     * 元数据
+     */
+    raw: RawComponent;
+    node: VNode;
+    /**
+     * 组件属性
+     */
+    props: Record<string, unknown>;
+    /**
+     * 组件自带事件
+     */
+    events: Record<string, CallBackFn>;
+    /**
+     * 连接provider的hooks
+     */
+    /**
+     * 全局上下文
+     */
+    context: ComponentProvider;
+    /**
+     * 当前节点的父节点
+     */
+    parent?: BaseComponent;
+    /**
+     * 当前节点所在父节点的插槽名称
+     */
+    slotname?: string;
+    /**
+     * `slotname`下的子组件
+     */
+    children: BaseComponent[];
+};
+
+/**
+ * 只包含基础数据类型的BaseComponent
+ */
+export declare type BaseComponentSerialized = {
+    label: string;
+    props: Array<BaseConfigProps & {
+        propName: string;
+    }>;
+    libraryId: string;
+    slotname?: string;
+    children: BaseComponentSerialized[];
+};
+
+declare interface BaseConfigProps {
+    /**
+     * 当属性存在多种类型时，要选择最终的类型
+     */
+    finalType?: PropsType;
+    /**
+     * 该属性设置的值，最终生成的value用于赋值给组件
+     */
+    metaValue?: Primitive;
+    /**
+     * 属性值类型，默认为`Static`
+     */
+    valueType?: ValueType;
+    /**
+     * 当前属性为变量时的变量id
+     */
+    variableId?: string;
+    /**
+     * 隐藏属性，不可配置
+     */
+    hidden?: boolean;
+    /**
+     * 禁用属性，不可配置
+     */
+    disabled?: boolean;
+}
+
+declare interface BaseProps extends BaseConfigProps {
+    /**
+     * 默认预设值
+     */
+    default?: Primitive;
+    /**
+     * 允许空值
+     */
+    allowEmpty?: boolean;
+    /**
+     * 属性值描述
+     */
+    desc: string;
+    /**
+     * 属性值所在版本
+     */
+    version?: string;
+}
+
 export declare class Bot {
     box: THREE.Box3;
     size: THREE.Vector3;
@@ -266,6 +385,156 @@ export declare type CameraConf = {
     };
 };
 
+declare interface ColorProps extends BaseProps {
+    type: PropsType.Color;
+}
+
+declare type CombArray<T> = T | T[];
+
+/**
+ * UI组件拥有的默认事件
+ */
+export declare type ComponentEvents = {
+    name: string;
+    desc: string;
+    /**
+     * 事件回调函数参数
+     *
+     * eg: ["value:string|number"]
+     */
+    args: string[];
+    returnType?: string;
+};
+
+export declare class ComponentGenerator {
+    #private;
+    constructor(provider: ComponentProvider);
+    generate(raw: RawComponent): BaseComponent | undefined;
+    /**
+     * 刷新current组件所有属性
+     */
+    refresh(newProps: Record<string, Props>, current: BaseComponent): void;
+    /**
+     * 刷新单个current组件属性
+     */
+    refreshProp(propName: string, newProp: Props, current: BaseComponent): void;
+    getPropsGenerator(): PropsGenerator;
+}
+
+export declare enum ComponentLabel {
+    /**
+     * 空label占位符
+     */
+    NULL = "NULL",
+    /**
+     * 占位组件名称，只用于填充组件默认插槽的元素的名称
+     */
+    PLACEHOLDER = "PLACEHOLDER",
+    /**
+     * 占位文本，一般用于默认插槽中添加纯文本
+     */
+    PLAIN = "PLAIN"
+}
+
+/**
+ * 组件库接口
+ */
+export declare interface ComponentLibrary {
+    /**
+     * 组件库唯一ID
+     */
+    getId: () => string;
+    /**
+     * 注册组件到当前组件库
+     */
+    registerComponent: (raw: RawComponent, node: VNode | Component) => void;
+    /**
+     * 获取元组件列表
+     */
+    getRawConfig: () => RawComponent[];
+    /**
+     * 获取元组件
+     */
+    getRaw: (label: string) => RawComponent | undefined;
+    /**
+     * 生成当前组件库设置的默认组件实例,该组件标识为一个容器，
+     * 用于在插槽中放置多个子组件,不会被渲染
+     */
+    getDefault: () => RawComponent;
+    /**
+     * 是否是组件库中的默认组件
+     */
+    isDefault(raw: RawComponent): boolean;
+    /**
+     * 是否是组件库中的占位组件
+     */
+    isPlaceHolder(raw: RawComponent): boolean;
+    /**
+     * 组件库是否拥有该组件
+     */
+    hasComponent(raw: RawComponent): boolean;
+    /**
+     * 获取组件库的原始组件
+     */
+    getRawNode(raw: RawComponent): VNode | Component | undefined;
+}
+
+/**
+ * 全局组件provider调度器
+ */
+export declare interface ComponentProvider extends EventBus<ProviderEv> {
+    /**
+     * 获取最后一次拖到画布的组件元数据，获取一次后清除
+     */
+    getCurrent: () => DeliverParam | undefined;
+    /**
+     * 向provider提供即将要生成的组件
+     */
+    setCurrent: (raw: DeliverParam) => void;
+    /**
+     * 添加组件库
+     */
+    addLibrary: (library: ComponentLibrary) => void;
+    /**
+     * 获取组件库
+     */
+    getLibrary: (libraryId: string) => ComponentLibrary | undefined;
+    /**
+     * 通过`RawComponent`获取所属组件库
+     */
+    getLibraryByRaw: (raw: RawComponent) => ComponentLibrary | undefined;
+    /**
+     * 通过`BaseComponent`获取所属组件库
+     */
+    getLibraryByComponent: (component: BaseComponent) => ComponentLibrary | undefined;
+    /**
+     * 获取所有组件库
+     */
+    getLibraries: () => ComponentLibrary[];
+    /**
+     * 获取节点树数据结构
+     */
+    getNodeTree: () => NodeTree;
+    /**
+     * 获取组件生成器
+     */
+    getComponentGenerator: () => ComponentGenerator;
+    /**
+     * 获取变量状态管理器
+     */
+    getVarState: () => ComponentVarState;
+}
+
+declare interface ComponentVarState {
+    dispose: () => void;
+    createVariable: (config: VariableStatic) => Variable;
+    delVariable: (varId: string) => Variable | undefined;
+    getVariable: (varId: string) => Variable | undefined;
+    listVariable: () => Variable[];
+    serialize: () => VariableSerialized[];
+    deserialize: (data: VariableSerialized[]) => Variable[];
+}
+
 export declare type ControlConf = {
     target: {
         x: number;
@@ -349,6 +618,19 @@ declare interface DebugPanel {
     node: VNode | Component | string;
 }
 
+export declare type DeliverParam = {
+    instanceId?: string;
+    raw?: RawComponent;
+    /**
+     * 事件触发时鼠标的X坐标
+     */
+    clientX?: number;
+    /**
+     * 事件触发时鼠标的Y坐标
+     */
+    clientY?: number;
+};
+
 export declare const DialogPanel: __VLS_WithSlots_4<typeof __VLS_component_4, __VLS_Slots_4>;
 
 declare type Dir = "horizontal" | "vertical" | "any";
@@ -424,6 +706,34 @@ export declare interface ElRect {
     y: number;
 }
 
+declare interface EnumProps extends BaseProps {
+    type: PropsType.Enum;
+    enums: Array<string | number | boolean>;
+}
+
+export declare const EpComponentFlag = "EpComponent";
+
+export declare class EpComponentParser implements ExtendPropsParser {
+    extendType(): string;
+    parse(props: Props): PropsValue;
+}
+
+export declare class EpLibrary implements ComponentLibrary {
+    #private;
+    constructor();
+    getId(): string;
+    registerComponent(raw: RawComponent, node: VNode | Component): void;
+    getRawConfig(): RawComponent[];
+    getRaw(label: string): RawComponent | undefined;
+    getDefault(): RawComponent;
+    hasComponent(raw: RawComponent): boolean;
+    getRawNode(raw: RawComponent): VNode | Component | undefined;
+    isDefault(raw: RawComponent): boolean;
+    isPlaceHolder(raw: RawComponent): boolean;
+}
+
+export declare const EpLibraryUI: DefineComponent<__VLS_Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_5> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
 /**
  * @description changed origin: https://github.com/browserify/events
  */
@@ -445,6 +755,18 @@ declare interface EventBus<T extends Record<string, any>> {
     once<K extends keyof T>(type: K, listener: T[K]): void;
 }
 
+declare type EventBusCallback = (...args: any[]) => any;
+
+declare interface ExtendProps extends BaseProps {
+    type: PropsType.Extend;
+    extendType: string;
+}
+
+declare interface ExtendPropsParser {
+    parse(value: Props): PropsValue;
+    extendType(): string;
+}
+
 export declare function fetchRemote(url: string, onProgress?: (progress: LoadProgressData) => void): Promise<{
     code: number;
     msg: string;
@@ -458,6 +780,32 @@ declare type FixedArray<T, L extends number> = Pick<T[], Exclude<keyof T[], ArrM
     readonly length: L;
 };
 
+declare interface FunctionProps extends BaseProps {
+    type: PropsType.Function;
+    /**
+     * 实际的参数字符串会被传送到`Function`的参数中
+     */
+    args: string[];
+    returnType: string;
+}
+
+/**
+ * HTML 默认文本组件库
+ */
+export declare class GeneralLibrary implements ComponentLibrary {
+    #private;
+    constructor();
+    getId(): string;
+    registerComponent(raw: RawComponent, node: VNode | Component): void;
+    getRawConfig(): RawComponent[];
+    getRaw(label: string): RawComponent | undefined;
+    getDefault(): RawComponent;
+    hasComponent(raw: RawComponent): boolean;
+    getRawNode(raw: RawComponent): VNode | Component | undefined;
+    isDefault(raw: RawComponent): boolean;
+    isPlaceHolder(raw: RawComponent): boolean;
+}
+
 export declare function getModel(url: string, onProgress?: (progress: LoadProgressData) => void): Promise<{
     code: number;
     msg: string;
@@ -471,8 +819,20 @@ export declare function gradientColor(startColorHex: string, endColorHex: string
  */
 export declare function hex2rgb(sColor: string): Array<number>;
 
+export declare const htmlTextConfig: (label: string, libraryId: string) => RawComponent;
+
+export declare const htmlTextLabel: string[];
+
+declare interface IconProps extends BaseProps {
+    type: PropsType.Icon;
+}
+
 declare type InitType = "auto" | "inherit" | "initial" | "unset";
 
+declare interface JSONProps extends BaseProps {
+    type: PropsType.JSON;
+}
+
 export declare enum KeyCode {
     init = "KEYBOARD:INIT",
     keydown = "KEYBOARD:KEYDOWN",
@@ -608,6 +968,10 @@ export declare interface LoadProgressData {
     describe?: string;
 }
 
+declare type MixedProps = BaseProps & Partial<Omit<PrimitiveProps, "type">> & Partial<Omit<ColorProps, "type">> & Partial<Omit<JSONProps, "type">> & Partial<Omit<TimeProps, "type">> & Partial<Omit<EnumProps, "type">> & Partial<Omit<FunctionProps, "type">> & Partial<Omit<VueProps, "type">> & Partial<Omit<ExtendProps, "type">> & Partial<Omit<IconProps, "type">> & {
+    type: Array<PropsType>;
+};
+
 export declare interface MoveHook {
     x?: (oldVal: number, newVal: number, width: number, height: number) => number;
     y?: (oldVal: number, newVal: number, width: number, height: number) => number;
@@ -626,13 +990,234 @@ export declare type MoveParams = DragAttr & {
     translateY: number;
 };
 
+declare class NodeTree {
+    #private;
+    constructor();
+    /**
+     * @description 根据实例id搜索节点
+     */
+    findByInstanceId(instanceId: string): BaseComponent | undefined;
+    findParent(instanceId: string, provider: ComponentProvider): BaseComponent | undefined;
+    findChild(instanceId: string, provider: ComponentProvider): BaseComponent | undefined;
+    findSibling(instanceId: string, prev: boolean, provider: ComponentProvider): BaseComponent | undefined;
+    /**
+     * @description 删除`childId`子节点，如果`parentId`不存在，则删除根节点
+     * 如果已经删除了节点，则只删除对应的map映射
+     */
+    removeChild(childId: string): BaseComponent | undefined;
+    appendNode(target: BaseComponent, provider: ComponentProvider, index: number, append: boolean, parentId?: string, slotname?: string): BaseComponent | undefined;
+    pushRaw(source: RawComponent, provider: ComponentProvider, index: number, append: boolean, parentId?: string, slotname?: string): BaseComponent | undefined;
+    moveTo(srcId: string, provider: ComponentProvider, index: number, append: boolean, parentId?: string, slotname?: string): BaseComponent | undefined;
+    /**
+     * @description 清空`target`的`slotname`插槽
+     */
+    clearSlot(target: BaseComponent, slotname: string, provider: ComponentProvider): BaseComponent | undefined;
+    /**
+     * @description 创建`target`的`slotname`插槽
+     */
+    createSlot(target: BaseComponent, slotname: string, provider: ComponentProvider): BaseComponent | undefined;
+    /**
+     * 设置根节点
+     */
+    setNodes(root: BaseComponent[]): void;
+    /**
+     * @description 获取节点树中的所有节点
+     */
+    getNodes(): BaseComponent[];
+    getNodesLength(): number;
+    clearNodes(): void;
+    /**
+     * @description 静态节点树恢复成组件树
+     */
+    deserialize(provider: ComponentProvider, root: BaseComponentSerialized[], parent?: BaseComponent): BaseComponent[];
+    /**
+     * @description 获取节点树静态数据
+     */
+    serialize(parent: BaseComponent[]): BaseComponentSerialized[];
+}
+
 export declare const ParentView: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
+export declare const placeholderNode: () => VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}>;
+
+/**
+ * 仅用于占位的元素
+ */
+export declare const placeholderRaw: () => RawComponent;
+
+/**
+ * 基础数据类型的单个或者数组结构类型
+ */
+declare interface PrimitiveProps extends BaseProps {
+    type: CombArray<PropsType.Number | PropsType.String | PropsType.Boolean | PropsType.Undefined | PropsType.Null | PropsType.Symbol | PropsType.BigInt>;
+}
+
+declare type Props = PrimitiveProps | ColorProps | JSONProps | TimeProps | EnumProps | FunctionProps | VueProps | ExtendProps | IconProps | MixedProps;
+
+declare interface PropsGenerator {
+    addParser(parser: PropsParser): this;
+    addExtendParser(extendParser: ExtendPropsParser): this;
+    getParsers(): PropsParser[];
+    getExtendParsers(): ExtendPropsParser[];
+    parse(props: Props): PropsValue | undefined;
+}
+
+export declare class PropsGeneratorImpl implements PropsGenerator {
+    #private;
+    constructor();
+    addParser(parser: PropsParser): this;
+    addExtendParser(extendParser: ExtendPropsParser): this;
+    getParsers(): PropsParser[];
+    getExtendParsers(): ExtendPropsParser[];
+    parse(props: Props): PropsValue | undefined;
+}
+
+declare interface PropsParser {
+    parse(value: Props): PropsValue;
+    propsType(): PropsType;
+}
+
+declare enum PropsType {
+    Number = "Number",
+    String = "String",
+    Boolean = "Boolean",
+    Undefined = "Undefined",
+    Null = "Null",
+    Symbol = "Symbol",
+    BigInt = "BigInt",
+    Time = "Time",
+    Color = "Color",
+    JSON = "JSON",
+    Enum = "Enum",
+    Function = "Function",
+    Icon = "Icon",
+    /**
+     * 表示为vue内置组件
+     */
+    Vue = "Vue",
+    /**
+     * 拓展类型拥有独立的解析器
+     */
+    Extend = "Extend"
+}
+
+declare type PropsValue = Props & {
+    value: unknown;
+};
+
+export declare class Provider implements ComponentProvider {
+    #private;
+    constructor();
+    getNodeTree(): NodeTree;
+    getCurrent(): DeliverParam | undefined;
+    setCurrent(component: DeliverParam): void;
+    addLibrary(library: ComponentLibrary): void;
+    getLibrary(libraryId: string): ComponentLibrary | undefined;
+    getLibraryByRaw(raw: RawComponent): ComponentLibrary | undefined;
+    getLibraryByComponent(component: BaseComponent): ComponentLibrary | undefined;
+    getLibraries(): ComponentLibrary[];
+    getComponentGenerator(): ComponentGenerator;
+    getVarState(): ComponentVarState;
+    setMaxListeners(n: number): void;
+    addListener(type: string, listener: EventBusCallback): void;
+    removeAllListeners(type?: string): void;
+    removeListener(type: string, listener: EventBusCallback): void;
+    prependListener(type: string, listener: EventBusCallback): void;
+    emit(type: string, ...args: any[]): void;
+    on(type: string, listener: EventBusCallback): void;
+    off(type: string, listener: EventBusCallback): void;
+    once(type: string, listener: EventBusCallback): void;
+}
+
+/**
+ * 全局provider事件分发和订阅器
+ */
+export declare interface ProviderEv {
+    /**
+     * 组件未被点击，只是hover
+     */
+    InstanceHover: (data?: DeliverParam) => void;
+    /**
+     * 右键画布中的组件时触发
+     */
+    InstanceContextmenu: (data?: DeliverParam) => void;
+    /**
+     * 组件点击事件,向Provider传递元信息
+     */
+    InstanceClick: (data: DeliverParam) => void;
+    /**
+     * 当source组件实例开始拖动时
+     */
+    InstanceDragstart: (src: DeliverParam) => void;
+    InstanceDragend: (src: DeliverParam) => void;
+    /**
+     * `实例组件/元组件`拖动到`实例组件/根组件`时触发
+     *
+     * 1. 元数据  拖向实例组件: src.raw && dst.instanceId
+     * 2. 元数据  拖向根组件: src.raw
+     * 3. 实例组件拖向实例组件: src.instanceId && dst.instanceId
+     * 4. 实例组件拖向根组件: src.instanceId
+     */
+    InstanceDrop: (data: {
+        src?: DeliverParam;
+        dst?: DeliverParam;
+    }) => void;
+    InstanceDragenter: (data: DeliverParam) => void;
+    InstanceDragleave: (data: DeliverParam) => void;
+    InstanceDragover: (data: DeliverParam) => void;
+    /**
+     * 组件内部自有事件被触发
+     */
+    DefaultEventsTrigger: (data: {
+        eventName: string;
+        instanceId: string;
+        data: unknown;
+    }) => void;
+    /**
+     * 组件库面板中双击元组件时触发
+     */
+    RawDbClick: (raw: DeliverParam) => void;
+    /**
+     * 通知provider组件数据结构已更新
+     */
+    NeedUpdate: () => void;
+    /**
+     * 通知provider单个组件属性已更新
+     */
+    NeedUpdateProps: (instanceId: string, key: string, prop: Props) => void;
+}
+
 /**
  * rad to anger
  */
 export declare function r2a(radian: number): number;
 
+/**
+ * 组件元数据
+ */
+export declare type RawComponent = {
+    /**
+     * 组件名
+     */
+    label: string | ComponentLabel;
+    /**
+     * 组件描述
+     */
+    desc: string;
+    /**
+     * 属性元数据
+     */
+    props: Record<string, Props>;
+    slots?: Record<string, RawComponent>;
+    /**
+     * UI组件默认事件
+     */
+    events?: Record<string, ComponentEvents>;
+    version?: string;
+};
+
 /**
  * 远程资源,贴图,视频等
  */
@@ -658,6 +1243,16 @@ export declare interface RemoteSrc {
     content?: string;
 }
 
+export declare const Renderer: DefineComponent<    {
+data: BaseComponent[];
+parentId: string;
+provider: ComponentProvider;
+}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
+data: BaseComponent[];
+parentId: string;
+provider: ComponentProvider;
+}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
 export declare type RendererConf = {
     clearColor: string;
 };
@@ -824,6 +1419,23 @@ export declare class Scene {
     private initSceneInteraction;
 }
 
+export declare const Shell: __VLS_WithSlots_6<DefineComponent<    {
+component: Component | VNode | string;
+instanceId: string;
+provider?: ComponentProvider;
+}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{
+component: Component | VNode | string;
+instanceId: string;
+provider?: ComponentProvider;
+}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    [x: string]: ((props: {
+        [x: string]: unknown;
+    }) => any) | undefined;
+    [x: number]: ((props: {
+        [x: string]: unknown;
+    }) => any) | undefined;
+}>;
+
 export declare const Spinner: DefineComponent<__VLS_Props_4, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: boolean) => any;
 }, string, PublicProps, Readonly<__VLS_Props_4> & Readonly<{
@@ -945,6 +1557,11 @@ export declare type ThreePanelConf = {
     lights: Array<LightMeta>;
 };
 
+declare interface TimeProps extends BaseProps {
+    type: PropsType.Time;
+    format?: string;
+}
+
 export declare function useCollider(bot: Bot): {
     teleport: (x: number, y: number, z: number) => void;
     getPlayer: () => THREE.Mesh<RoundedBoxGeometry, THREE.MeshStandardMaterial, THREE.Object3DEventMap>;
@@ -1009,6 +1626,76 @@ export declare const useScale: (data: {
     dispose: () => void;
 };
 
+export declare const useVarState: () => ComponentVarState;
+
+declare enum ValueType {
+    /**
+     * 属性值为静态值
+     */
+    Static = "Static",
+    /**
+     * 属性值绑定为一个变量
+     */
+    Variable = "Variable",
+    /**
+     * 属性值从远程获取
+     */
+    Remote = "Remote"
+}
+
+declare interface Variable {
+    /**
+     * 唯一ID
+     */
+    id: string;
+    /**
+     * 变量名字
+     */
+    name: string;
+    /**
+     * 变量描述
+     */
+    desc: string;
+    /**
+     * 变量类型
+     */
+    type: VarsType;
+    /**
+     * 变量响应式类型
+     */
+    reactiveType: string;
+    value: Ref<unknown> | Reactive<Array<unknown> | Record<string, unknown>>;
+}
+
+declare type VariableSerialized = Omit<Variable, "value"> & {
+    value: any;
+};
+
+declare type VariableStatic = Omit<Variable, "id" | "value" | "type"> & Partial<Pick<Variable, "id">> & {
+    value?: any;
+};
+
+export declare class VarState implements ComponentVarState {
+    #private;
+    dispose(): void;
+    createVariable(config: VariableStatic): Variable;
+    delVariable(varId: string): Variable | undefined;
+    getVariable(varId: string): Variable | undefined;
+    listVariable(): Variable[];
+    serialize(): VariableSerialized[];
+    deserialize(data: VariableSerialized[]): Variable[];
+}
+
+declare enum VarsType {
+    Primitive = "Primitive",
+    Object = "Object",
+    Array = "Array"
+}
+
+declare interface VueProps extends BaseProps {
+    type: PropsType.Vue;
+}
+
 export declare interface World {
     core: Core;
     bot: Bot | null;