aurora-v-comp

Bootstrap components built with Vue.js.

This repository contains a set of Vue.js components.

Installation

NPM

$ npm install aurora-v-comp

Vue-Instance

Add this to your Vue-instance or create the events instance before your main instance

methods: {
           fireEvent(event, data){
               this.$root.$emit(event, data);
           }
       }

"Event" Instance

window.events = new Vue({
       methods: {
           fireEvent(event, data) {
               this.$root.$emit(event, data);
           },
       },
   });

You can use the root or the events instance for this components, not both!

ES6

 import vmodal from 'aurora-v-comp/src/components/BS3Modal.vue'

new Vue({
  components: {
    BS3Modal
  }
})

Laravel-Mix before Vue Instance

Vue.component(
    'vmodal',
    require('aurora-v-comp/src/components/BS3Modal.vue')
);

Example

 <vmodal modal-id="BS3Modal"
             title="BS3Modal"
             :on-submit-callback="createWatcher"
             :backdrop-dissmiss="true"
             :onlyCloseButton="true">
         <div class="container-fluid">
             <div class="row">
                 <div style="padding: 10px;">
                     This is an "ExampleModal"!
                 </div>
             </div>
         </div>
     </vmodal>

Example Vue Modal

<template>
    <vmodal modal-id="watcher-create-modal"
            title="Create Watcher"
            :on-close-callback="reset"
            :on-submit-callback="submit"
            :backdrop-dissmiss="true">
            
        <div class="container-fluid">
            <div class="row">
                <div style="padding: 10px;">
                     This is an "CustomExampleModal"!
                </div>
            </div>
        </div>
        
    </vmodal>
</template>
<script>
    import vmodal from 'aurora-v-comp/src/components/BS3Modal.vue'
    export default{
        name: 'CustomModal',
        components: {vmodal},
        data() {
            return {
                reset: () => {
                    alert('Your reset code here!');
                },
                submit: () => {
                    alert('Your submit code here!');
                }
            }
        },
    }
</script>

Example Vue FlashNotification

Implement this function between your vue events instance and your app vue instance.

window.flashNotification = (message, level = 'success') => {
    if (typeof  window.events !== 'undefined') {
        window.events.fireEvent('flashNotification', {message, level});
    } else {
        window.Vue.fireEvent('flashNotification', {message, level});
    }
};

Include this component!

Vue.component(
   'flash-notification',
   require('aurora-v-comp/src/components/BS3FlashNotification.vue')
);

Put this code in your body section!

<flash-notification message="{{ session('flash') }}"></flash-notification>

Docs

See the documentation.

License

aurora-v-comp is licensed under The MIT License.