README

@aphorica/vuetify-blackout-panel

github: https://aphorica.github.com
Web: https://aphorica.com

Installing

npm install @aphorica/vuetify-blackout-panel

yarn add @aphorica/vuetify-blackout-panel

Running the Demo

In a command prompt, cd info the 'demo' directory, and:

  (yarn|npm) install
  (yarn|npm run) serve)

Open a browser on localhost:8080

Overview

General Blackout implementation along with helper. Displays either a message or a spinner.

Consists of three components:

BlackoutComponent

This is the actual Blackout component. It needs to be imported and incorporated in the template html and the code as follows:

  <template>
    ...
    <BlackoutComponent v-if="mboxVisible" :show="mboxVisible"
                     :params="mboxParams"
                     @close="mboxClose" />
    ...
  </template>
  <script>
    import {BlackoutComponent, BlackoutMixin} from '@aphorica/vuetify-blackout-panel'

    export default {
      components: { ..., BlackoutComponent, ... },
      mixins: [BlackoutMixin],
      ...
    }
  </script>

You can put it in any component, but App.vue makes the most sense.

BlackoutMixin

Provides the default activation value and handlers. This needs to be imported along with the BlackoutComponent in the same component.

Blackout

A lightweight object with which you provide content and control to the BlackoutComponent. You can import this anywhere you want to show the BlackoutComponent (including non-component code), without having to reinstantiate or otherwise import the BlackoutComponent.

For example:

  import {BlackoutPanel} from '@aphorica.vuetify-blackout-panel'

   ...

  needBlackout() {
    BlackoutPanel.showBlackout('This is a message')
          // (simplest invocation)
  }

  done() {
    BlackoutPanel.hideBlackout()
  }

If showing a message, the panel instantiates a 'v-dialog', with the msg displayed in the contained 'v-card-text' subpanel.

Invocation

BlackoutPanel.showBlackout(<msg | 'busy'>)

Shows the blackout panel with either the message or a spinner.
args:

msg: The message to appear in the v-card-text subpanel
'busy': Show the spinner box without a message.

BlackoutPanel.hideBlackout()

Hide the blackout panel. Can also be accomplished with `BlackoutPanel.showBlackout('')` (send an empty string.)

General Notes

The panel is implemented in a modal state – the user cannot interact with the application until it is hidden.
This will take on any styling you specify for v-dialog and v-card, which means it should blend in seamlessly for any other dialogs you are using.
Would like to consolidate the BlackoutMixin and BlackoutComponent into a single file, but that will require some refactoring and research.
As the name implies, this is currently based on vuetify.js — may change that later.

Usage no npm install needed!