@aphorica/vuetify-message-box v1.0.4

@aphorica/vuetify-message-box

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

Installing

npm install @aphorica/vuetify-message-box

or

yarn add @aphorica/vuetify-message-box

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 messageBox implementation along with helper. Configurable with title, message, buttons, checkboxes, and completion action.

Consists of three components:

  <template>
    ...
    <MessageBoxComponent v-if="mboxVisible" :show="mboxVisible"
                     :params="mboxParams"
                     @close="mboxClose" />
    ...
  </template>
  <script>
    import {MessageBoxComponent, MessageBoxMixin} from '@aphorica/vuetify-message-box'

    export default {
      components: { ..., MessageBoxComponent, ... },
      mixins: [MessageBoxMixin],
      ...
    }
  </script>

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

For example:

  import {MessageBox} from '@aphorica.vuetify-message-box'

   ...

  MessageBox('Title', 'This is a message')
        // (simplest invocation)

Invocation

MessageBox(title, message, <info>)

args:

btn2: { (same members as above) },

prompts: (optional) [ { prompt: (string) - the prompt string, 'initial-value': (string) - the initial value of the corresponding field, rules: (set of rule functions for the corresponding input field ), modifier: function for the corresponding input field, 'setFocus': set this to the initially focused element, 'selectAllOnFocus': self explanatory } ] (see notes)

doneFn: (optional) a function that will be called when the MessageBox is closed. called with: - btnIX - the button index that was triggered (1-based), and - responses - (if prompts array is present) responses to the input fields.

returnFocus: (optional) (a dom object to which the focus should be returned when the MessageBox is closed.) }

### Notes on the Info Object:
  If a prompts array is present, a number of things happen:
  
  - textfields will be displayed with the prompt strings.  Responses will be returned
    as an array, corresponding to each prompt.

  - rules are of the form: `v => (some condition test about v) || '(some error message)'`.  A rule
    returns either 'true' or a string indicating the error.  The string decorates the corresponding
    input field.

  - If rules are specified and there is a primary button, that button will be disabled until the
    rules are satisfied.

  - A modifier function accepts the current value and modifies it, if necessary, to
    fit constraints (such as lower casing everything.)  Modifiers are applied in 'keyup'
    handler.

## General Notes
 - In any invocation, this is non-blocking.  You need to remember 
   your app is still running – any code following will be executed.

   See further examples for acting on responses.

 - It is, however, implemented in a modal state – the user cannot
   interact with the application until they respond.

 - 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 MessageBoxMixin and MessageBox component
   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.