instant-vuetify-overlays

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);
});