@psff/cmp-notifications v1.0.3

@psff/cmp-notifications psff-notifications

Generic notifications component and $notify service,

Getting started

1. Setup the package as a dependencie.

   yarn add @psff/cmp-notifications

2. Use the component <psff-notifications />, normaly in App component.

   import { PsffNotifications } from '@psff/cmp-notifications'
   
   @Component({
     components: {
       'psff-notifications': PsffNotifications,
     },
   })
   export default class App extends Vue {}

   .my-notifications {
     --psff-notifications-z-index: 1000;
     --psff-notifications-background-color: #fabada;
     --psff-notifications-text-color: #000;
   }

   <psff-notifications class="my-notifications" />

3. Now, you only have to notify something with the service Vue.$notify:

       // Inside of a Vue component
       this.$notify.success('The object has been created');

       // Outside of a component
       Vue.$notify.error({
         title: 'Error creating the object',
         message: 'Our server is busy, please try again later.'
       });

Specifications

Interface NotificationEvent

Represents a notifications:

• title (string, optional): The notification title.
• message (string, optional): The notificaion message.
• type (string, optional): The notificaion type (by default it should be 'info', 'success' or 'error').
• group (string, default: 'default') The notification group.
• duration (number, default: 5000): The notificaion display time, in miliseconds.
• data (object, optional): Notification extra data, useful when you overwrite the notification slot content.

Service Vue.$notify

Methods

• Show a generic notification.

  Vue.$notify.add(attr: string | NotificationEvent)

• Show an info notification.

  Vue.$notify.info(attr: string | NotificationEvent)

• Show a success notification.

  Vue.$notify.success(attr: string | NotificationEvent)

• Show an error notification.

  Vue.$notify.error(attr: string | NotificationEvent)

• Clean all pending notifications.

  Vue.$notify.clean()

Component <psff-notifications />

Parameters:

• group (string, default: 'default'): Define the notification group associated.

Slots:

• Default: Represents a notification.

  <slot :item="item" :close="() => destroy(item)">
    <h2 class="title" v-if="item.title">
      {{ item.title }}
    </h2>
    <div class="message" v-if="item.message">
      {{ item.message }}
    </div>
  </slot>

  • item (NotificationEvent): the notification.
  • close (function): on close handler.

Custom propperties:

• Commons

  • --psff-notifications-height (default: 5rem)
  • --psff-notifications-width (default: 16rem)
  • --psff-notifications-border (default: 2px solid)
  • --psff-notifications-border-radius (default: 1rem)
  • --psff-notifications-margin (default: .5rem 0 0)
  • --psff-notifications-padding (default: 0)
  • --psff-notifications-gap (default: 1rem)
  • --psff-notifications-z-index (default: 5000)

• Generic Notification

  • `--psff-notifications-border-color, #313131)*
  • --psff-notifications-box-shadow (default: 0 8px 12px 0 rgba(0, 0, 0, .25))
  • --psff-notifications-background-color (default: #ede9e5)
  • --psff-notifications-text-color (default: #313131)

• Info notification:

  • --psff-notifications-border-color-info (default: #5e88fc)
  • --psff-notifications-box-shadow-info (default: var(--box-shadow))
  • --psff-notifications-background-color-info (default: #ede9e5)
  • --psff-notifications-text-color-info (default: #5e88fc)

• Success notification:

  • --psff-notifications-border-color-success (default: #8bd418)
  • --psff-notifications-box-shadow-success (default: var(--box-shadow))
  • --psff-notifications-background-color-success (default: #ede9e5)
  • --psff-notifications-text-color-success (default: #8bd418)

• Error notification:

  • --psff-notifications-border-color-error (default: #fb5f4f)
  • --psff-notifications-box-shadow-error (default: var(--box-shadow))
  • --psff-notifications-background-color-error (default: #ede9e5)
  • --psff-notifications-text-color-error (default: #fb5f4f)