@psff/cmp-notifications

@psff/cmp-notifications psff-notifications

Generic notifications component and $notify service,

Getting started

• Setup the package as a dependencie.

  yarn add @psff/cmp-notifications
  

• 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" />
  

• 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)