Vuefy module

Quick startQuick start

Note: Supported Vue version at least 3

To start using the Vue version of the API, just connect the @mappable-world/mappable-vuefy:

const mappableVue = await mappable.import('@mappable-world/mappable-vuefy');
const vuefy = mappableVue.vuefy.bindTo(Vue);
const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapMarker} = vuefy.module(mappable);

And then use any JS API objects as Vue components:

<template>
  <MMap :location="location">
    <MMapDefaultSchemeLayer />
    <MMapDefaultFeaturesLayer />
    <MMapMarker :coordinates="[34, 57]" draggable>
      <div class="marker marker_pill">I'm marker!</div>
    </MMapMarker>
  </MMap>
</template>

Props Declaration for own custom classesProps Declaration for own custom classes

Vue components require explicit declaration of requisites so that Vue knows which external requisites passed to the component should be considered as fallthrough attributes.

For basic objects from the mappable namespace, attributes are defined by default and no additional actions need to be done.

If you are a developer who creates your own objects (for example, within a separate package), then you can define which props will be in the component. The definition of props supports the Vue format. For example the custom class MMapSomeClass:

type MMapSomeClassProps = {
  id: string;
  counter?: number;
};
export class MMapSomeClass extends mappable.MMapComplexEntity<MMapSomeClassProps> {
  static [mappableVue.vuefy.optionsKey] = {props: ['id', 'counter']};
  //...
}

In addition to declaring props using an array of strings, we can also use the object syntax:

export class MMapSomeClass extends mappable.MMapComplexEntity<MMapSomeClassProps> {
  static [mappableVue.vuefy.optionsKey] = {
    props: {
      id: String,
      counter: Number
    }
  };
  //...
}

or with props validation:

export class MMapSomeClass extends mappable.MMapComplexEntity<MMapSomeClassProps> {
  static [mappableVue.vuefy.optionsKey] = {
    props: {
      id: {type: String, required: true},
      counter: {type: Number, required: false}
    }
  };
  //...
}

Props Declaration for using third-party packagesProps Declaration for using third-party packages

If the developers of third-party packages have not defined the props for their classes, then you can specify them yourself when calling vuefy by passing them as the second argument:

const mappableVue = await mappable.import('@mappable-world/mappable-vuefy');
const vuefy = mappableVue.vuefy.bindTo(Vue);
const {MMapSomeClass as MMapSomeClassV} = vuefy.module(
  {MMapSomeClass},
  {
    MMapSomeClass: ['id', 'counter']
  }
);

Similarly, the syntax of the object and validation is supported.

Custom implementations for Vue mappable.MMapEntity entitiesCustom implementations for Vue mappable.MMapEntity entities

Use the overrideKey key to define a custom implementation for vuefy:

type MMapSomeClassProps = {
  id: string;
  counter?: number;
};
export class MMapSomeClass extends mappable.MMapComplexEntity<MMapSomeClassProps> {
  static [mappableVue.vuefy.overrideKey] = MMapSomeClassVuefyOverride;
  //...
}

and

export const MMapSomeClassVuefyOverride: CustomVuefyFn<MMapSomeClass> = (
  MMapSomeClassI, // it is same MMapSomeClass
  props, // props declaration
  {vuefy, Vue}
) => {
  // Standard vuefy method
  const MMapSomeClassVuefied = vuefy.entity(MMapSomeClassI, props);
  const MMapSomeClassV = Vue.defineComponent({
    props,
    name: 'MMapSomeClassV',
    components: {MMapSomeClassVuefied},
    setup() {
      //...
    },
    template: `<MMapSomeClassVuefied v-bind="$props" ... />`
  });
  return MMapSomeClassV;
};

and in the end app

const mappableVue = await mappable.import('@mappable-world/mappable-vuefy');
const vuefy = mappableVue.vuefy.bindTo(Vue);
const {MMapSomeClass as MMapSomeClassV} = vuefy.module({MMapSomeClass});
const app = createApp({
  components: {MMapSomeClassV},
  template: `<MMapSomeClassV id="some_id" />`
});
app.mount('#app');

Class: Context<_T>

Type parametersType parameters

Name
_T

ConstructorsConstructors

constructorconstructor

new Context<_T>(name)

Type parametersType parameters

Name
_T

ParametersParameters

Name	Type
name	string

PropertiesProperties

namename

readonly name: string

Class: GenericComplexEntity<Props, DefaultProps, Root>

Entity that aggregates multiple Entities but looks basic from the outside.

Example

type MMapSomeComplexEntityProps = {
 name?: string;
};
const defaultProps = {
 name: 'entity'
};
class MMapSomeComplexEntity extends GenericComplexEntity<MMapSomeComplexEntityProps, typeof defaultProps> {
 static defaultProps = defaultProps;
 private _someEntity?: MMapSomeEntity; // MMapSomeEntity extends GenericEntity
 protected _onAttach(): void {
     this._someEntity = new MMapSomeEntity();
     this.addChild(this._someEntity); // add someEntity as children
     // ...
 }
 // ...
}

Type parametersType parameters

Name	Type	Description
Props	Props	Type of input props of the Entity.
DefaultProps	extends Object = {}	Type of default input props of the Entity.
Root	extends GenericRootEntity<unknown> = GenericRootEntity<unknown>	Root Entity Class.

ConstructorsConstructors

constructorconstructor

new GenericComplexEntity<Props, DefaultProps, Root>(props, options?)

Type parametersType parameters

Name	Type
Props	Props
DefaultProps	extends Object = {}
Root	extends GenericRootEntity<unknown, {}, Root> = GenericRootEntity<unknown, {}>

ParametersParameters

Name	Type	Description
props	Props	The value of input props.
options?	ComplexOptions<Root>	Optional options object.

OverridesOverrides

GenericEntity.constructor

new GenericComplexEntity<Props, DefaultProps, Root>(props, children?, options?)

Type parametersType parameters

Name	Type
Props	Props
DefaultProps	extends Object = {}
Root	extends GenericRootEntity<unknown, {}, Root> = GenericRootEntity<unknown, {}>

ParametersParameters

Name	Type
props	Props
children?	GenericEntity<unknown, {}, Root>[]
options?	Omit<ComplexOptions<Root>, "children">

OverridesOverrides

GenericEntity<Props, DefaultProps, Root&gt;.constructor

AccessorsAccessors

parentparent

get parent(): null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Get parent entity.

ReturnsReturns

null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Inherited fromInherited from

GenericEntity.parent

---

rootroot

get root(): null | Root

Get root entity.

ReturnsReturns

null | Root

Inherited fromInherited from

GenericEntity.root

MethodsMethods

updateupdate

update(changedProps): void

Method for updating props of Entity.

ParametersParameters

Name	Type	Description
changedProps	Partial<Props>	New props values.

ReturnsReturns

void

Inherited fromInherited from

GenericEntity.update

Class: GenericEntity<Props, DefaultProps, Root>

Entity Base Class. It has event handlers for attaching, detaching and updating props. Has a method for providing and using context.

Example

type MMapSomeEntityProps = {
 name?: string;
};
const defaultProps = {
 name: 'entity'
};
class MMapSomeEntity extends GenericEntity<MMapSomeEntityProps, typeof defaultProps> {
 static defaultProps = defaultProps;
 public isAttached: boolean;
 constructor(props: MMapSomeEntityProps) {
     super(props);
     this.isAttached = false
     // Additional actions can be taken in the constructor of a class.
 }
 protected _onAttach(): void {
     this.isAttached = true;
     // Additional actions can be taken when an Entity is attached.
 }
 // ...
}

Type parametersType parameters

Name	Type	Description
Props	Props	Type of input props of the Entity.
DefaultProps	extends Object = {}	Type of default input props of the Entity.
Root	extends GenericRootEntity<unknown> = GenericRootEntity<unknown>	Root Entity Class.

ConstructorsConstructors

constructorconstructor

new GenericEntity<Props, DefaultProps, Root>(props)

Type parametersType parameters

Name	Type
Props	Props
DefaultProps	extends Object = {}
Root	extends GenericRootEntity<unknown, {}, Root> = GenericRootEntity<unknown, {}>

ParametersParameters

Name	Type	Description
props	Props	The value of input props.

AccessorsAccessors

parentparent

get parent(): null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Get parent entity.

ReturnsReturns

null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

---

rootroot

get root(): null | Root

Get root entity.

ReturnsReturns

null | Root

MethodsMethods

updateupdate

update(changedProps): void

Method for updating props of Entity.

ParametersParameters

Name	Type	Description
changedProps	Partial<Props>	New props values.

ReturnsReturns

void

Class: GenericGroupEntity<Props, DefaultProps, Root>

Entity that aggregates multiple Entities, and allows you to publicly add and remove entities to a subtree.

Example

type MMapSomeGroupEntityProps = {
 name?: string;
};
const defaultProps = {
 name: 'entity'
};
class MMapSomeGroupEntity extends GenericGroupEntity<MMapSomeGroupEntityProps, typeof defaultProps> {
 static defaultProps = defaultProps;
 // ...
}
const groupEntity = new MMapSomeGroupEntity()
const someEntity = new MMapSomeEntity(); // MMapSomeEntity extends GenericEntity
groupEntity.addChild(someEntity); // add someEntity in MMapSomeGroupEntity object
groupEntity.removeChild(someEntity); // remove someEntity from MMapSomeGroupEntity object

Type parametersType parameters

Name	Type	Description
Props	Props	Type of input props of the Entity.
DefaultProps	extends Object = {}	Type of default input props of the Entity.
Root	extends GenericRootEntity<unknown> = GenericRootEntity<unknown>	Root Entity Class.

ConstructorsConstructors

constructorconstructor

new GenericGroupEntity<Props, DefaultProps, Root>(props, options?)

Type parametersType parameters

Name	Type
Props	Props
DefaultProps	extends Object = {}
Root	extends GenericRootEntity<unknown, {}, Root> = GenericRootEntity<unknown, {}>

ParametersParameters

Name	Type	Description
props	Props	The value of input props.
options?	ComplexOptions<Root>	Optional options object.

Inherited fromInherited from

GenericComplexEntity.constructor

new GenericGroupEntity<Props, DefaultProps, Root>(props, children?, options?)

Type parametersType parameters

Name	Type
Props	Props
DefaultProps	extends Object = {}
Root	extends GenericRootEntity<unknown, {}, Root> = GenericRootEntity<unknown, {}>

ParametersParameters

Name	Type
props	Props
children?	GenericEntity<unknown, {}, Root>[]
options?	Omit<ComplexOptions<Root>, "children">

Inherited fromInherited from

GenericComplexEntity.constructor

PropertiesProperties

childrenchildren

readonly children: readonly GenericEntity<unknown, {}, Root>[]

OverridesOverrides

GenericComplexEntity.children

AccessorsAccessors

parentparent

get parent(): null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Get parent entity.

ReturnsReturns

null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Inherited fromInherited from

GenericComplexEntity.parent

---

rootroot

get root(): null | Root

Get root entity.

ReturnsReturns

null | Root

Inherited fromInherited from

GenericComplexEntity.root

MethodsMethods

addChildaddChild

addChild(child, index?): GenericGroupEntity<Props, DefaultProps, Root>

ParametersParameters

Name	Type
child	GenericEntity<unknown, {}, Root>
index?	number

ReturnsReturns

GenericGroupEntity<Props, DefaultProps, Root>

OverridesOverrides

GenericComplexEntity.addChild

---

removeChildremoveChild

removeChild(child): GenericGroupEntity<Props, DefaultProps, Root>

ParametersParameters

Name	Type
child	GenericEntity<unknown, {}, Root>

ReturnsReturns

GenericGroupEntity<Props, DefaultProps, Root>

OverridesOverrides

GenericComplexEntity.removeChild

---

updateupdate

update(changedProps): void

Method for updating props of Entity.

ParametersParameters

Name	Type	Description
changedProps	Partial<Props>	New props values.

ReturnsReturns

void

Inherited fromInherited from

GenericComplexEntity.update

Class: GenericRootEntity<Props, DefaultProps>

Entity that is root and cannot be added anywhere

Example

type MMapProps = {
 name?: string;
};
class MMap extends GenericRootEntity<MMapProps, typeof defaultProps> {
 // ...
}
// Now we can specify their root element for the Entity
class MMapSomeEntity extends GenericEntity<MMapSomeEntityProps, typeof defaultProps, MMap> {
 static defaultProps = defaultProps;
 // ...
}

Type parametersType parameters

Name	Type	Description
Props	Props	Type of input props of the Entity.
DefaultProps	extends Object = {}	Type of default input props of the Entity.

ConstructorsConstructors

constructorconstructor

new GenericRootEntity<Props, DefaultProps>(props, options?)

Type parametersType parameters

Name	Type
Props	Props
DefaultProps	extends Object = {}

ParametersParameters

Name	Type	Description
props	Props	The value of input props.
options?	ComplexOptions<GenericRootEntity<unknown, {}>>	Optional options object.

Inherited fromInherited from

GenericGroupEntity.constructor

new GenericRootEntity<Props, DefaultProps>(props, children?, options?)

Type parametersType parameters

Name	Type
Props	Props
DefaultProps	extends Object = {}

ParametersParameters

Name	Type
props	Props
children?	GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>[]
options?	Omit<ComplexOptions<GenericRootEntity<unknown, {}>>, "children">

Inherited fromInherited from

GenericGroupEntity.constructor

PropertiesProperties

childrenchildren

readonly children: readonly GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>[]

Inherited fromInherited from

GenericGroupEntity.children

AccessorsAccessors

parentparent

get parent(): null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Get parent entity.

ReturnsReturns

null | GenericComplexEntity<unknown, {}, GenericRootEntity<unknown, {}>>

Inherited fromInherited from

GenericGroupEntity.parent

---

rootroot

get root(): this

Get root entity.

ReturnsReturns

this

OverridesOverrides

GenericGroupEntity.root

MethodsMethods

addChildaddChild

addChild(child, index?): GenericRootEntity<Props, DefaultProps>

ParametersParameters

Name	Type
child	GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>
index?	number

ReturnsReturns

GenericRootEntity<Props, DefaultProps>

Inherited fromInherited from

GenericGroupEntity.addChild

---

destroydestroy

Abstract destroy(): void

Completely destroys the entity tree including the current entity

ReturnsReturns

void

---

removeChildremoveChild

removeChild(child): GenericRootEntity<Props, DefaultProps>

ParametersParameters

Name	Type
child	GenericEntity<unknown, {}, GenericRootEntity<unknown, {}>>

ReturnsReturns

GenericRootEntity<Props, DefaultProps>

Inherited fromInherited from

GenericGroupEntity.removeChild

---

updateupdate

update(changedProps): void

Method for updating props of Entity.

ParametersParameters

Name	Type	Description
changedProps	Partial<Props>	New props values.

ReturnsReturns

void

Inherited fromInherited from

GenericGroupEntity.update

Interface: ComplexOptions<Root>

Type parametersType parameters

Name	Type
Root	extends GenericRootEntity<unknown> = GenericRootEntity<unknown>

PropertiesProperties

childrenchildren

optional children: GenericEntity<unknown, {}, Root>[]

---

containercontainer

optional container: boolean

Interface: VuefyModuleFnInterface: VuefyModuleFn

CallableCallable

VuefyModuleFnVuefyModuleFn

VuefyModuleFn<TModule>(module, props?): VuefiedModule<TModule>

Type parametersType parameters

Name	Type
TModule	extends BaseModule = BaseModule

ParametersParameters

Name	Type
module	TModule
props?	VuefyPropsModule<TModule>

ReturnsReturns

VuefiedModule<TModule>

Type AliasesType Aliases

CustomVuefyFnCustomVuefyFn

CustomVuefyFn<TEntity,
 TExternalProps\>: (`ctor`: EntityConstructor<TEntity>, `props`: VuefyPropsObject<TExternalProps>, `params`: {
	Vue: typeof TVue;
	vuefy: {
		context: VuefyContextFn;
		entity: VuefyEntityFn;
		module: VuefyModuleFn 
	} 
}) => TVue.Component<TExternalProps>

Type parametersType parameters

Name	Type
TEntity	extends DefaultEntity
TExternalProps	EntityProps<TEntity>

Type declarationType declaration

(ctor, props, params): TVue.Component<TExternalProps>

ParametersParameters

Name	Type
ctor	EntityConstructor<TEntity>
props	VuefyPropsObject<TExternalProps>
params	Object
params.Vue	typeof TVue
params.vuefy	Object
params.vuefy.context	VuefyContextFn
params.vuefy.entity	VuefyEntityFn
params.vuefy.module	VuefyModuleFn

ReturnsReturns

TVue.Component<TExternalProps>

---

CustomVuefyOptionsCustomVuefyOptions

CustomVuefyOptions<TEntity,
 TExternalProps\>: Object

Type parametersType parameters

Name	Type
TEntity	extends DefaultEntity
TExternalProps	EntityProps<TEntity>

Type declarationType declaration

Name	Type
props	VuefyPropsObject<TExternalProps> | VuefyPropsArray<TExternalProps>

---

GenericVuefyGenericVuefy

GenericVuefy: Object

Type declarationType declaration

Name	Type
optionsKey	typeof optionsKeyVuefy
overrideKey	typeof overrideKeyVuefy
bindTo	(Vue: __module) => Vuefy

---

VuefyVuefy

Vuefy: Object

Type declarationType declaration

Name	Type
entity	VuefyEntityFn
module	VuefyModuleFn

VariablesVariables

vuefyvuefy

const vuefy: Readonly<GenericVuefy>

Module: <internalModule: <internal>

Type AliasesType Aliases

BaseModuleBaseModule

BaseModule: Record<string | symbol, unknown>

---

ContextWatcherFnContextWatcherFn

ContextWatcherFn: () => void

Type declarationType declaration

(): void

ReturnsReturns

void

---

DefaultContextDefaultContext

DefaultContext: Context<unknown>

---

DefaultCtorDefaultCtor

DefaultCtor: EntityConstructor<DefaultEntity>

---

DefaultEntityDefaultEntity

DefaultEntity: GenericEntity<unknown>

---

EntityConstructorEntityConstructor

EntityConstructor<TEntity\>: (...`args`: any[]) => TEntity

Type parametersType parameters

Name	Type
TEntity	extends GenericEntity<unknown>

Type declarationType declaration

(...args)

ParametersParameters

Name	Type
...args	any[]

---

EntityPropsEntityProps

EntityProps<T\>: T extends GenericEntity<infer P> ? P : never

Type parametersType parameters

Name	Type
T	extends GenericEntity<unknown>

---

PropsFromCtorPropsFromCtor

PropsFromCtor<TCtor\>: EntityProps<InstanceType<TCtor>>

Type parametersType parameters

Name	Type
TCtor	extends DefaultCtor

---

VuefiedModuleVuefiedModule

VuefiedModule<TModule\>: { [Property in keyof TModule]: TModule[Property] extends DefaultCtor ? ReturnType<VuefyEntityFnGen<TModule[Property]\>\> : TModule[Property] extends typeof Context ? ReturnType<VuefyContextFn\> : TModule[Property] }

Type parametersType parameters

Name	Type
TModule	extends BaseModule

---

VuefyContextFnVuefyContextFn

VuefyContextFn: <TContext>(`context?`: TContext) => symbol

Type declarationType declaration

<TContext>(context?): symbol

Type parametersType parameters

Name	Type
TContext	extends DefaultContext

ParametersParameters

Name	Type
context?	TContext

ReturnsReturns

symbol

---

VuefyEntityFnVuefyEntityFn

VuefyEntityFn: <TCtor, TProps>(...`args`: Parameters<VuefyEntityFnGen<TCtor, TProps>>) => ReturnType<VuefyEntityFnGen<TCtor, TProps>>

Type declarationType declaration

<TCtor, TProps>(...args): ReturnType<VuefyEntityFnGen<TCtor, TProps>>

Type parametersType parameters

Name	Type
TCtor	extends DefaultCtor
TProps	PropsFromCtor<TCtor>

ParametersParameters

Name	Type
...args	Parameters<VuefyEntityFnGen<TCtor, TProps>>

ReturnsReturns

ReturnType<VuefyEntityFnGen<TCtor, TProps>>

---

VuefyEntityFnGenVuefyEntityFnGen

VuefyEntityFnGen<TCtor,
 TProps\>: (`ctor`: TCtor, `props?`: VuefyPropsObject<TProps> | VuefyPropsArray<TProps>, `displayName?`: string) => TVue.Component<TProps>

Type parametersType parameters

Name	Type
TCtor	extends DefaultCtor
TProps	PropsFromCtor<TCtor>

Type declarationType declaration

(ctor, props?, displayName?): TVue.Component<TProps>

ParametersParameters

Name	Type
ctor	TCtor
props?	VuefyPropsObject<TProps> | VuefyPropsArray<TProps>
displayName?	string

ReturnsReturns

TVue.Component<TProps>

---

VuefyPropsArrayVuefyPropsArray

VuefyPropsArray<RawProps\>: keyof RawProps[]

Type parametersType parameters

Name
RawProps

---

VuefyPropsModuleVuefyPropsModule

VuefyPropsModule<TModule\>: { [Key in keyof TModule]: TModule[Key] extends GenericEntity<infer Props\> ? VuefyPropsObject<Props\> \| VuefyPropsArray<Props\> : unknown }

Type parametersType parameters

Name	Type
TModule	extends BaseModule

---

VuefyPropsObjectVuefyPropsObject

VuefyPropsObject<RawProps\>: { [K in keyof RawProps]-?: TVue.PropType<RawProps[K]\> \| TVue.Prop<RawProps[K]\> }

Type parametersType parameters

Name
RawProps

---

WithDefaultsWithDefaults

WithDefaults<Props,
 DefaultProps\>: Props & { [K in keyof DefaultProps]: K extends keyof Props ? NonNullable<Props[K]\> : never }

Type parametersType parameters

Name	Type
Props	Props
DefaultProps	extends Partial<Props>

VariablesVariables

optionsKeyVuefyoptionsKeyVuefy

const optionsKeyVuefy: unique symbol

---

overrideKeyVuefyoverrideKeyVuefy

const overrideKeyVuefy: unique symbol