@aphorica/vuetify-blackout-panel

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

Installing

npm install @aphorica/vuetify-blackout-panel

or

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:

  <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.

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

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.