Package Exports

instant-vuetify-overlays

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (instant-vuetify-overlays) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

instant-vuetify-overlays

Description

Utility for https://vuetifyjs.com
- programmable snackbar, dialog, progress component

Instalation

npm install --save instant-vuetify-overlays

import Vue from 'vue';
import Vuetify from 'vuetify';
import InstantVuetifyOverlays from 'instant-vuetify-overlays';

Vue.use(Vuetify);
Vue.use(InstantVuetifyOverlays);

Basic usage in vue class

Snackbar

https://vuetifyjs.com/en/components/snackbars

alert

// basic (timeout: 5000ms)
this.$vsnackbar.alert('Hello');

// with timeout (timeout: 0 is disable auto close)
this.$vsnackbar.alert({ message: 'Hello', timeout: 500 });

// wait to push ok button
await this.$vsnackbar.alert({ message: 'Hello', timeout: 0 });

// manual close
const vsnackbar = this.$vsnackbar.alert({ message: 'Hello', timeout: 0 }).vsnackbar;
vsnackbar.close();

Dialog

https://vuetifyjs.com/en/components/dialogs

open

// open component with card
await this.$vdialog.open({ component: TestDialog, needCard: true });

import { Vue, Component } from 'vue-property-decorator';

@Component
export default class TestDialog extends Vue {
    protected onClick() {
        this.$emit('ok');
        // or this.$emit('cancel');
    }
}

alert

// basic
this.$vdialog.alert('Hello');

// title
this.$vdialog.alert({ title: 'Hi', message: 'Hello' });

// wait to push ok button
await this.$vdialog.alert('Hello');

// manual close
const vdialog = this.$vdialog.alert('Hello').vdialog;
vdialog.ok();

confirm

// promise
const result = await this.$vdialog.confirm('Hello');
console.log(result.confirm);

// event handler
this.$vdialog.confirm({
    message: 'Hello',
    onClose: (result) => {
        console.log(result.confirm);
    },
});

// manual close
const vdialog = this.$vdialog.confirm('Hello').vdialog;
vdialog.ok(); // or vdialog.cancel();

prompt

// promise
const result = await this.$vdialog.prompt('Hello');
if (result.confirm) {
    console.log(result.text);
}

// no cancel
const result = await this.$vdialog.prompt({
    message: 'Hello',
    persistent: true,
});
console.log(result.text);

// event handler
this.$vdialog.prompt({
    message: 'Hello',
    onClose: (result) => {
        if (result.confirm) {
            console.log(result.text);
        }
    },
});

// timeout prompt
const vdialog = this.$vdialog.prompt('Hello').vdialog;
await wait(3000);
const result = vdialog.ok();
console.log(result.text);

Progress

https://vuetifyjs.com/en/components/progress

Loading

// basic
const vdialog = await this.$vprogress.circular().vdialog;
await wait(1000);
vdialog.ok();

// basic
await this.$vprogress.circularLoading(async () => {
    await wait(1000);
});

// min time
await this.$vprogress.circularLoading(async () => {
    await wait(500);
}, { minTime: 1000 });

Timer

// basic
await this.$vprogress.circularTimer(1000);

Progress

// basic (setProgress(percent: number) => void)
await this.$vprogress.circularProgress(async (setProgress) => {
    await wait(1000);
    setProgress(25);
    await wait(1000);
    setProgress(90);
    await wait(1000);
    setProgress(100);
});