Compo-views NPM

Views Component

ViewManager {
	View route='a' default { /* template */ }
	View route='b' path='./foo.mask';
}

Routing

Using Ruta.

Resolve routes. The `ViewMap`.

First of all, ViewManager gets the list of all available routes from different sources:

Route attributes of children Views.
By an expression from current model, scope, ctx or ancestors.

Parameters

Current route parameter values are passed to the rendered view.

ViewManager {
	View route='/users' { /* list template */ }
	View route='/user/:id/edit' { /* edit template */ }
	View route='/user/create' { /* create template */ }
}

`ViewManager`

Attributes
Signals
Slots

Components

	#### Input Elements
	- [View](#view)
	- [Progress](#progress)
	- [Notification](#notification)

`ViewManager` Attributes

Name	Type	Default	Description
`base`	`string`	`current location`	Base location, from which remote templates are loaded
`viewmap`	`string`	`empty`	Expression to get the viewmap
`routing`	`boolean`	`true`	Should update the window location with HistoryAPI when navigating to the view
`nested`	`boolean`	`true`	Depends on parent `ViewManager`

Api

navigate(path: string):Promise<Route> Open View for the path, and hides current if any.

Signals

ViewManager Component emits signals to current View on various states.

viewActivity(type)
```
	Types:

	- `start`
	- `end`
```
viewActivation
viewDeactivation

Slots

viewNavigate(path:string) Signal alias for navigate method.

Components

ViewManager defines some nested components. So you can override or extend each.

`View`

View template is placed inside the View component

Attributes

Name	Type	Default	Description
`default`	`boolean`	`false`	If no route is matched, this view will be shown to user
`detach`	`boolean`	`true`	After the view was hidden, detach the view from DOM.
`recycle`	`boolean`	`false`	Completely destroy the view on hide and re-render the next time it gets visible .

Methods

hide:Promise

	_Hides the view with `display:none` style._
	> Note that it will be also detached from DOM

show:Promise

	_Attaches, if detached, and shows the view_.

Both methods can be overridden to perform some animations or other behavior.

Progress

Progress component is always rendered. Current implementation shows the progress element when current View is loading.

Notification

Notification component is always rendered. Current implementation shows the notification messages, on errors etc.

Examples

/examples

# install atma toolkit
npm install atma -g
# run examples static server
npm run examples

# navigate `http://localhost:5777/examples/tabs/sync.html`
# and many more...