https://github.com/bitmeal/snackstack-logger

Last synced: about 1 year ago
JSON representation

Host: GitHub
URL: https://github.com/bitmeal/snackstack-logger
Owner: bitmeal
License: mpl-2.0
Created: 2021-04-16T15:27:04.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2021-04-19T10:57:40.000Z (about 5 years ago)
Last Synced: 2024-04-24T00:41:04.240Z (about 2 years ago)
Language: JavaScript
Size: 1.34 MB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 🍪snackstack logger 📰
*Easy logging to **human targets** from anywhere in your Vue/Vuetify application.*

![snackstack sample](https://github.com/bitmeal/snackstack-logger/raw/master/assets/snackstack.gif)
> 📌 watch stacking order: queuing time vs. deliver order

*snackstack* enables you to log short information to your users, using a snackbar. The logger automatically registers and makes itself available in all Vue components.

## features
* global logger backend for all Vue components
* automatic injection into all components
* prioritizing message delivery: *error* > *warning* > *info*

## install
```shell
# using node and bundler
npm install snackstack-logger-vuetify-vuex
```
```html

```

**depends:**
> * *Vue*
> * *Vuetify*
> * *Vuex*
## use
> 📌 provide a *Vuex* instance and store. Vuex store is expected to use default `store` name.

> 📌 for a **full example** take a look at `dev/` and `demo/` directories.

### **init** *snackstack*
*When using via node and bundler only!*
```js
// main.js/index - somewhere you init your Vue root instance
import SnackStackLogger from 'snackstack-logger-vuetify-vuex';
Vue.use(SnackStackLogger);
```
Using *snackstack* from a ``-tag directly in your page will auto install and register. This requires global Vue and Vuex to be available (`window.Vue`, `window.Vuex`).
### **add** the *snackstack*
```html

<snack-stack />
```

## config
### API
```js
Vue.use(SnackStackLogger, 'loggername')
```
When installing the plugin to your Vue instance, you may pass an optional string parameter to change the logger *namespace*. Providing `'loggername'` would make the logger available as `loggername.<log|info|warn|error>()`.

### display
All properties regarding layout and display are configured as component properties.
```html

<snack-stack
:stacksize="2"
:timeout="4000"
:deadtime="0"
:dark="false"
:transparency="false"
:buttontext="null"
/>
```
* `stacksize`: size of "card-stack", when multiple messages are queued
* `timeout`: default auto-hide/close timeout
* `deadtime`: time to hide the whole stack when switching to next message (gives "pop"-effect)
* `dark`: optimize for sites with dark theme; changes stack coloring
* `transparency`: add transparency to lower cards in stack
* `buttontext`: text for the *close-button*; default is a close icon (*like:* ❌)

## use
from any Vue component, call logger as below. When logger namespace has been renamed (see above), replace `logger` with new name.
```js
logger.log('info message')
logger.info('info message')
logger.warn('warning')
logger.error('error')
```
**example**
```html
<v-btn @click="logger.info('✨ info message')">log</v-btn>
```
logger is scoped to component instances (not a global variable):
```js
// Vue component
// ...
methods: {
// ...
do_log() {
this.logger.log('✨ info message');
}
}
// ...
```
### advanced usage
Log methods take either strings or objects as parameters. Using an object, you may use following keys/options:
* `text` **[required]**: log message
* `timeout`: timeout in ms for message to auto-hide; `-1` for infinite

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/bitmeal/snackstack-logger

Awesome Lists containing this project

README