This package has been deprecated

Author message:

this package has been deprecated

garyobrien-components

garyobrieneu-components

This Library is a suite of Custom Vue components. The purpose of this library is to provide components that can be reused across projects, to help for rapid front end development.

Installation
Components
EventBus
Mixin
Props
CSS

Installation

Npm

npm install garyobrien-components

Setup

import Vue from 'vue'
import 'garyobrien-components'

// Importing css
import '../node_modules/garyobrien-components/dist/garyobrieneu-components.css'

Import the library inside main.js where your Vue instance is registered. All components in library are globally available.

In your HTML file

<div id="app">
    <app-panel>
        <h3 slot="header">Custom panel</h3>
        <section slot="body">
            Body
        </section>
    </app-panel>
</div>

Components

app-header

<app-header>
        <span slot="logo" class="logo"></span>

        <ul slot="links">
            <li class="active"><a href="/one">One</a></li>
        </ul>

        <div class="logout" slot="logout">
            <app-dropdown>
                <span slot="dropdown-items">
                    <button @click="closeDropdown()">Logout</button>
                </span>

                <p slot="dropdown-info">Username</p>
            </app-dropdown>
        </div>
</app-header>

Slots

App-header has three slots. Slots allow the component to be flexible.

logo

logo is top left of the app-header, and is normally used for for web application logo.

<span slot="logo" class="logo"></span>

links

links is where your href tags will go, normally is a ul element.

<ul slot="links">
    <li class="active"><a href="/one">One</a></li>
</ul>

logout

logout is where you have your logout link or dropdown, here i am using app-dropdown which is included in this library.

<div class="logout" slot="logout">
    <app-dropdown>
        <span slot="dropdown-items">
            <button @click="closeDropdown()">Logout</button>
        </span>

        <p slot="dropdown-info">Username</p>
    </app-dropdown>
</div>

app-dropdown

App dropdown is a small menu dropdown component.

<app-dropdown>
    <span slot="dropdown-items">
        <button @click="closeDropdown()">Profile</button>
        <button @click="closeDropdown()">Settings</button>
        <button @click="closeDropdown()">Logout</button>
    </span>

    <p slot="dropdown-info">Gary</p>
</app-dropdown>

Slots

dropdown-items

dropdown-items is where menu items go, normally using buttons and see in example above.

dropdown-info

dropdown-info is where the placeholder text goes for the dropdown menu, also a up and down caret will be show depending on status of dropdown.

Events

app.dropdown.close

app dropdown listens for a event in the mounted hook called app.dropdown.close.

mounted() {
    eventBus.$on('app.dropdown.close', () => this.display = false)
},

When this event is emitted it will close the dropdown.

// In Template
<button @click="closeDropdown()">Profile</button>

// Vue Instance
methods: {
    closeDropdown() {
        eventBus.$emit('app.dropdown.close')
    }
}

app-panel

App panel is a basic panel component.

<app-panel>
    <h3 slot="header">My Tasks</h3>
    <section slot="body">
        List of tasks
    </section>
    <footer class="panel-footer" slot="footer">
        Gary O Brien
    </footer>
</app-panel>

// Without footer
<app-panel>
    <h3 slot="header">My Tasks</h3>
    <section slot="body">
        List of tasks
    </section>
</app-panel>

Slots

header

This is for the heading of the panel.

body

This is for the main content.

footer

This is optional and is for any footer content.

app-modal

This is a modal component which can be reused to create other modals.

Extending app-modal (Example AboutModal)

When creating new modal reused app-modal and pass in the new content using the slots available.

<app-modal>
    <h4 slot="header">About Screen</h4>

    <span slot="body">
        {{ params }}
    </span>

    <button slot="footer" @click="closeModal()">
        OK
    </button>
</app-modal>

Slots

header

This is for the heading or title of the modal.

body

This is for the main content of the modal.

footer

This is for any footer content of the modal.

Mixin

app-modal uses the mixin that is included in this library. Any new modals that are created can use the app-modal component and customize.

app-overlays

app-overlays is a dynamic component that uses Vues internal dynamic component. app-overlays is a placeholder to where your popups/modals will appear. This component has a data property called overlay which will be a placeholder for the modal you want to open.

Overlay is a object with two props name and parmas.

overlay: {
    name: "app-modal", // Name of modal/popup
    parmas: {} // Any data that you want to pass into modal.
}

Events

app.overlay.open

To open an overlay emit the app.overlay.open event.

eventBus.$emit('app.overlay.open', {name: 'app-modal', params: {id: 1, type: 'basic'}})

app.overlay.close

To close an overlay emit the app.overlay.close event.

eventBus.$emit("app.overlay.close")

These event listeners are inside the mounted hook inside app-overlays.

// Listening
eventBus.$on('app.overlay.open', (overlay) => {
    self.overlay = overlay
})

eventBus.$on('app.overlay.close', () => {
    self.overlay = {}
})  

Vue will then look for component app-modal and render.

<component :is="overlay.name" :params="overlay.params"></component>

Vues Dynamic Component

https://vuejs.org/v2/guide/components-dynamic-async.html

Include app-overlays

Once app-overlays in included in your vue template, now any modals that are opened will be placed inside this component.

<app-overlays/>

Esc keydown listener

app-overlays also has a keydown listener to close the overlay if esc key is pressed.

window.addEventListener('keydown', function(e) {
    if(e.keyCode == 27)
        self.overlay = {}    
})

EventBus

EventBus is a vue instance that is used for emitting and listening for events. This allows all components to communicate with each other from differnet areas of the web application.

Import Globally

import { eventBus } from 'garyobrien-components'

// Global
window.eventBus = eventBus

Import Locally

import { eventBus } from 'garyobrien-components'

Usage

// Listen for events
mounted() {
    window.eventBus.$on('new-event', (event) => {
        console.log(event)
    })
},

// Emit events
methods: {
    aboutModal() {
        window.eventBus.$emit('app.overlay.open', {name: 'about-modal', params: {})
    }
}

Mixin

Mixin is used for for any modals or popups with your app. Mixin included a params prop which is used to pass data. There is also a method called close which if called will close any modals or popups that are open.

Any modals or popups that are created should use this mixin to allow functionality to be shared.

mixin.js

import eventBus from '@/eventBus'

export default {

    props: ['params'],

    methods: {

        close() {
            eventBus.$emit("app.overlay.close")
        }
    }
}

Usage

<script>
    import { mixin } from 'garyobrien-components'

    export default {
        mixins: [mixin]
    }
</script>

Props

className

This prop is available on the following components.

• app-header
• app-panel
• app-dropdown

This prop allows the css of these components to be overidden. This is applied at the top element of the each component, to apply a class just simply pass in string value to the component.

<app-header className="custom-class"></app-header>

<app-panel className="custom-class"></app-panel>

<app-dropdown className="custom-class"></app-dropdown>

CSS

All css can be overidden. Components top level styling are all prefixed with app.

.app-header {background: red; color: white;}