Jtlos-v-comp NPM

jtlos-v-comp

Bootstrap components built with Vue.js.

This repository contains a set of Vue.js components.

Installation

NPM

$ npm install jtlos-v-comp

Vue-Instance

Add this to your Vue-instance

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

ES6

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

new Vue({
  components: {
    BS3Modal
  }
})

Laravel-Mix before Vue Instance

Vue.component(
    'vmodal',
    require('jtlos-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 'jtlos-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>