https://github.com/tyom/head-up
Declarative dashboard system
https://github.com/tyom/head-up
vue vuex
Last synced: over 1 year ago
JSON representation
Declarative dashboard system
- Host: GitHub
- URL: https://github.com/tyom/head-up
- Owner: tyom
- License: mit
- Created: 2018-11-22T11:33:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-07-31T16:15:55.000Z (almost 4 years ago)
- Last Synced: 2025-02-15T22:42:25.022Z (over 1 year ago)
- Topics: vue, vuex
- Language: Vue
- Homepage: https://head-up-example.now.sh
- Size: 1.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Head-up dashboard system
[](https://circleci.com/gh/tyom/head-up)
Head-up is a Vue plugin which allows to declaratively create multiple boards (containers) containing
cells (sections) laid out within each board. Each cell can have any content and each child of Cell component
will become a sub-section, which further allows to divide the board into additional sections.
## Usage
See the [example app](./packages/example) for usage.
## Exposing data
Various components take advantage of Vue's [scoped slots](https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots). This allows us to share data from a component with its parent.
For example, `VList` takes `items` array prop which contains a list of movies with titles, ratings, images etc. `Vlist` loops through this array and applies the data of each item to inner component that is passed through default scope. It then exposes each list item in destructured `{item}` slot scope.
The following code:
```vue
{{ item.title }}
Rating: {{ item.rating }}
```
Will produce:
```html
-
Bumblebee
Rating: 6.5
-
Aquaman
Rating: 6.9
```
The same techniqus is used in other components that may want to expose internal data
to parent. Such as results of a request to an external API.
## Making requests
### `VPoller` component
This component makes requests with interval (polling). It requires `endpoint` and
`interval` props to be set. `interval` is a human-readable string and can be
set as `30m` or `30 mins` or `30 minutes` etc. It's parsed using [parse-duration](https://www.npmjs.com/package/parse-duration) package.
The component also allows making multiple requests at once, which
then become available in destructured slot prop `{result}` as array in the same
order they are defined. This could be useful if you wish to combine results of
several requests into one component.
#### Simple request
```vue
```
This makes request to the specified endpoint with the query `?api_key=` which is set on component instance (data method). It will
keep making requests every 30 mins indefinitely. The result are exposed in `result` slot scope.
```vue
{{ slot.result }}
```
or simply destructure it:
```vue
{{ result }}
```
#### Multiple requests
The `requests` share the `endpoint` (prefix) and `query` (suffix).
```vue
```
This will use the `endpoint` prop to prefix each request in `requests` and add
`query` to each request.
To make multiple requests with different queries:
```vue
```
This will do the same but merge the `query` prop with individual request's `path`.
### `VSocket` component
This component is used to make WebSocket connections. Message data is exposed to
parent component via `{result}` slot prop.
It also has `@open` event which can be used to send requests.
```vue
{{ result.params.last }}
```