vue-mstyle

MStyle

Component Library based on VueJS and Bootstrap 4

Instalation

npm install vue-mstyle

Using in your project

import Vue from 'vue'
import 'vue-mstyle'
new Vue({
   render: h => h(App)
  }).$mount('#app')

Component Syntax Description

MBanner

 <m-banner bannerImage="url('/url_to_your_image')" 
           bannerHeight="44rem" 
           bannerColor="black" 
           textAlign="center" 
           textColor="white" 
           :opacity=0.7>
    <h1 class="display-4">Banner title</h1>
    <button class="btn btn-outline-light btn-lg mt-4"> Button </button>
 </m-banner>

<m-banner> properties:

bannerImage - url or path to image
bannerHeight - height of banner (default: 44rem)
bannerColor - color for overlay (default: black)
textAlign - alignment of text on the banner: left, center or right (default: center)
textColor - color of the text (default: white)
:opacity - overlay opacity value: 0 - transparent, 1 - opaque (default: 0.7)

MCaptcha

Based on google recaptcha See aditional information https://developers.google.com/recaptcha/docs/invisible

<m-captcha @response='manageCaptchaResponse' 
           siteKey='Your_Site_Key' 
           captchaType="invisible">
</m-captcha>

<m-captcha> properties:

@response - event, emitted by m-captcha when captcha is passed. Returns captcha key, see google documentation
sitekey - mandatory parameter, google recaptcha data-sitekey
captchaType - type of captcha, invisible for invisible, normal for I'm not robot

MCard

  <m-card background="white" color="black" :radius="5">
    <m-card-media background="#455A64" color="white" :radius="5">
        <img src="...">
        <h4> Header text </h4>
    </m-card-media>
    <m-card-title>
        <h5> Title </h5>
    </m-card-title>
    <m-card-text>
        <p> Some text here Some text here Some text here </p>
    </m-card-text>
    <m-card-action>
        <button class="btn btn-outline-secondary"> Button </button>
    </m-card-action>
  </m-card>

<m-card> properties:

:radius - set border-radius property in pixels for rounded corners (default: 0)
background - set background color (default: white)
color - set text color (default: black)

<m-card-media> properties:

:radius - set border-radius property in pixels for top-left and top-right corners (default: 0)
background - set background color (default: #718F9E)
color - set text color (default: white)

MDataIterator

    <m-data-iterator :data="items" 
                     :itemsPerPage="4",
                     itemsPerPageText = "Items per page:"
                     backgroundHeader="#455A64"
                     colorHeader="white"
                     background="white"
                     color="black"
                     >
    </m-data-iterator>

Data structure example:

  items: [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: "14%",
          iron: "1%"
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: "8%",
          iron: "1%"
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          sodium: 337,
          calcium: "6%",
          iron: "7%"
        },
        {
          name: "Cupcake",
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          sodium: 413,
          calcium: "3%",
          iron: "8%"
        },
        {
          name: "Gingerbread",
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          sodium: 327,
          calcium: "7%",
          iron: "16%"
        },
        {
          name: "Jelly bean",
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          sodium: 50,
          calcium: "0%",
          iron: "0%"
        }
      ]

Note: property 'name' will be added into header of data iterator cards and is required, other property names must be the same for each object

<m-data-iterator> properties:

:data (Array) - array of objects which data will be added into data iterator
:itemsPerPage (Number) - number of visible items for each page (default: 1)
itemsPerPageText (String) - label for element where you can select number of items displayed on page (default: Items per page:)
backgroundHeader (String) - background color for header (default: #455A64)
colorHeader (String) - text color for header (default: white)
background (String) - background color for data iterator cards (default: white)
color (String) - text color for data iterator cards content (default: black)

MDataTable

  <m-data-table :dataTable="items" 
                :sortingEnabled="true"
                :paginationEnabled="true" 
                :itemsPerPage="3"
                paginationAlign="center" 
                paginationColor="#455A64"
                :dark="false" 
                :striped="false" 
                :bordered="false" 
                :hovered="false">
    <m-data-table-head background="#455A64" 
                       color="white" 
                       textTransform="uppercase" 
                       textAlign="left">
    </m-data-table-head>
    <m-data-table-body textAlign="left"></m-data-table-body>
  </m-data-table>

Data structure example:

  items: [
        {
          name: "Frozen Yogurt",
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          sodium: 87,
          calcium: "14%",
          iron: "1%"
        },
        {
          name: "Ice cream sandwich",
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          sodium: 129,
          calcium: "8%",
          iron: "1%"
        },
        {
          name: "Eclair",
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          sodium: 337,
          calcium: "6%",
          iron: "7%"
        },
        {
          name: "Cupcake",
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          sodium: 413,
          calcium: "3%",
          iron: "8%"
        },
        {
          name: "Gingerbread",
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          sodium: 327,
          calcium: "7%",
          iron: "16%"
        },
        {
          name: "Jelly bean",
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          sodium: 50,
          calcium: "0%",
          iron: "0%"
        }
      ]

Note: property names will be the name of columns and must be the same for each object from array

<m-data-table> properties:

:dataTable (Array) - array of objects which data will be added into table
:sortingEnabled (Boolean) - enable ascending and descending sorting table by columns (default: true)
:paginationEnabled (Boolean) - enable pagination of data from table (default: false)
:itemsPerPage (Number) - if paginationEnabled property is set to 'true' you can set the number of rows displayed on page (default: 1)
paginationAlign (String) - set position of the pagination on the page: left, center or right (default: left)
paginationColor (String) - set color of active page into pagination section (default: #718F9E)
dark (Boolean) - apply dark theme (default: false)
stripped (Boolean) - make the table stripped (default: false)
bordered (Boolean) - add border on the table (default: false)
hovered (Boolean) - rows will change color on hover (default: false)

<m-data-table-head> properties:

color (String) - set text color into table header
background (String) - set background color of the header
textAlign (String) - set alignment of the text: left, center or right (default: left)
textTransfrom (String) - apply text-transform property for header: lowercase, uppercase or capitalize (default: uppercase)

<m-data-table-body> properties:

color (String) - set text color into table body
background (String) - set background color of the rows
textAlign (String) - set alignment of the text: left, center or right (default: left)

MDialog

  <!-- Dialog trigger button -->
  <button type="button" 
          class="btn btn-primary" 
          data-toggle="modal" 
          data-target="#exampleModal">
    Show dialog
  </button>
 
  <!-- Dialog component -->
  <m-dialog id="exampleModal" 
            size="normal" 
            :centered="true" 
            :persistent="true">
    
    <m-dialog-header background="#455A64" color="white">
        <h5> Modal header </h5>
    </m-dialog-header>
 
    <m-dialog-body background="white" 
                   color="black" 
                   align="justify">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Curabitur vestibulum sem vel tellus gravida, at bibendum 
        lorem iaculis. Aenean sed turpis dignissim, commodo diam eu, 
        dignissim tellus. In hac habitasse platea dictumst.
        Phasellus consectetur ultricies metus. Sed quis neque mi.
    </m-dialog-body>
 
    <m-dialog-footer background="white" color="black">
        <button type="button" 
                class="btn btn-secondary" 
                data-dismiss="modal"> 
          Close 
        </button>
    </m-dialog-footer>
  </m-dialog>

<m-dialog> properties:

id - id of the dialog component
size - size of the dialog window: small, normal or large (default: normal)
:centered (Boolean) - vertical alignment of the dialog in the center (default: false)
:persistent (Boolean) - set 'true' and dialog will doesn't close on click outside (default: false)

<m-dialog-header> properties:

background - background-color of dialog header (default: #718F9E)
color - text-color inside header section (default: white)

<m-dialog-body> properties:

background - background-color of dialog body (default: white)
color - color of body text (default: black)
align - text alignment inside body section: left, center, right or justify (default: left)

<m-dialog-footer> properties:

background - background-color of dialog footer (default: white)
color - text-color inside footer section (default: black)

MFooter

  <!-- Footer with horizontal list in center section -->
  <m-footer background="#455A64" height="150px">
    <m-footer-left class="col-lg-4" color="white">
        <h1 class="text-uppercase">Company name</h1>
        <h3> Phone: [phone] </h3>
    </m-footer-left>
 
    <m-footer-center class="col-lg-4">
      <m-footer-list-horizontal class="mt-3"  color="white"
          :items="[{ title: 'Facebook', 
                     icon: 'fab fa-facebook fa-2x', 
                     link: '#' 
                    },
                    { title: 'Google+', 
                      icon: 'fab fa-google-plus-g fa-2x', 
                      link: '#' 
                    },
                    { title: 'Twitter', 
                      icon: 'fab fa-twitter fa-2x', 
                      link: '#' 
                    },
                    { title: 'Google Play', 
                      icon: 'fab fa-google-play fa-2x', 
                      link: '#' 
                    },
                    { title: 'YouTube', 
                      icon: 'fab fa-youtube fa-2x', 
                      link: '#' 
                    }
                  ]">
      </m-footer-list-horizontal>
    </m-footer-center>
 
    <m-footer-right class="col-lg-4" color="white">
        <p> © 2018 All rights reserved </p>
    </m-footer-right>
  </m-footer>
 
  <!-- Footer with vertical list in center section -->
  <m-footer background="#455A64" height="150px">
    <m-footer-left class="col-lg-4">
        <h1 class="text-uppercase">Company name</h1>
        <h3> Phone: [phone] </h3>
    </m-footer-left>
 
    <m-footer-center class="col-lg-4">
        <div class="row">
          <m-footer-list-vertical name="Social 1" color="white" 
            :items="[{ title: 'Facebook', 
                     icon: 'fab fa-facebook fa-2x', 
                     link: '#' 
                    },
                    { title: 'Google+', 
                      icon: 'fab fa-google-plus-g fa-2x', 
                      link: '#' 
                    },
                    { title: 'Twitter', 
                      icon: 'fab fa-twitter fa-2x', 
                      link: '#' 
                    },
                    { title: 'Google Play', 
                      icon: 'fab fa-google-play fa-2x', 
                      link: '#' 
                    },
                    { title: 'YouTube', 
                      icon: 'fab fa-youtube fa-2x', 
                      link: '#' 
                    }
                  ]">
            </m-footer-list-vertical>
 
            <m-footer-list-vertical name="Social 2" color="white" 
              :items="[{ title: 'Facebook', 
                     icon: 'fab fa-facebook fa-2x', 
                     link: '#' 
                    },
                    { title: 'Google+', 
                      icon: 'fab fa-google-plus-g fa-2x', 
                      link: '#' 
                    },
                    { title: 'Twitter', 
                      icon: 'fab fa-twitter fa-2x', 
                      link: '#' 
                    },
                    { title: 'Google Play', 
                      icon: 'fab fa-google-play fa-2x', 
                      link: '#' 
                    },
                    { title: 'YouTube', 
                      icon: 'fab fa-youtube fa-2x', 
                      link: '#' 
                    }
                  ]">
            </m-footer-list-vertical>
        </div>
    </m-footer-center>
 
    <m-footer-right class="col-lg-4" color="white">
        <p> © 2018 All rights reserved </p>
    </m-footer-right>
  </m-footer>

<m-footer> properties:

background - background color of the footer section (default: #718F9E)
height - height of the footer (default: auto)

<m-footer-left> properties:

color - text-color for elements placed on the left of the page (default: white)

<m-footer-center> properties:

color - text-color for elements placed in the center of the page (default: white)

<m-footer-right> properties:

color - text-color for elements placed on the right of the page (default: white)

<m-footer-list-horizontal> properties:

color - color for list items (default: white)
items (Array) - array of objects with properties: 'title', 'icon' and 'link'

Note: 'icon' property can be any FontAwesome icon and is not required

<m-footer-list-vertical> properties:

name - name of the list (example: Social, Media) color - color for list items (default: white)
items (Array) - array of objects with properties: 'title', 'icon' and 'link'

Note: 'icon' property can be any FontAwesome icon and is not required

MFileUploader

  <m-file-uploader @loaded="ready" 
                   serverUrl="url-where-to-post-files" 
                   allowedFileType=".pdf"
                   allowMultipleUpload>
  </m-file-uploader>

<m-file-uploader> properties:

@loaded - event, emitted by m-file-loader when all dropped files are successful loaded
allowedFileType - type of files allowed to be droped in file loader. Default allowed type is .pdf
allowMultipleUpload - if is present, allows user to load multiple files

MNavbar

  <m-navbar class="navbar-expand-lg" background="#455A64" >
    <m-navbar-brand :showButton="true" color="white">
        <span> Brand </span>
    </m-navbar-brand>
 
    <m-navbar-item-action color="white" 
      decoration="underline" 
      :item="{ 'title': 'Item 1', 'action': methodName }"> 
    </m-navbar-item-action>
 
    <m-navbar-dropdown color="white" 
      dropdownId="dropdownMenu" 
      :dropdownItems="[{ title: 'Item 1', value: 'item1' },
                        { title: 'Item 2', value: 'item2' }
                      ]" 
      @selectedItem="getSelectedItem"
    >
      <span> Dropdown </span>
    </m-navbar-dropdown>
 
    <m-navbar-item-link color="white" 
      decoration="underline" 
      :item="{ 'title': 'Item 2', 'link':'/link2' }"> 
    </m-navbar-item-link>
 
    <m-navbar-items color="white" 
      decoration="underline" 
      :items="[{ 'title': 'Home', 'link':'/' },
               { 'title': 'About', 'link':'/about' },
               { 'title': 'Contacts', 'link':'/contacts' }
              ]">
    </m-navbar-items>
 
    <m-navbar-items-right color="white" 
      decoration="underline" 
      :items="[{ 'title': 'Home', 'link':'/' },
               { 'title': 'About', 'link':'/about' },
               { 'title': 'Contacts', 'link':'/contacts' }
              ]">
    </m-navbar-items-right>
 
    <m-navbar-dropdown-right color="white" 
      dropdownId="dropdownRight" 
      :dropdownItems="[{ title: 'Romanian', value: 'ro', icon: 'fas fa-globe' },
                       { title: 'English', value: 'en', icon: 'fas fa-globe' }, 
                       { title: 'Russian', value: 'ru', icon: 'fas fa-globe' }
                      ]" 
      @selectedItem="getSelectedLanguage"
    >
        <i class="fas fa-globe"></i>
        <span> Language </span>
    </m-navbar-dropdown-right>
  </m-navbar>

<m-navbar> properties:

background - set navbar color (default: #718F9E)

<m-navbar-brand> properties:

color - set color for text (default: white)
:showButton (Boolean) - show or hide button wich expand navbar (default: true)

<m-navbar-items> properties:

:items (Array) - array of objects with properties 'title', 'link' for adding multiple items into navbar
color - set text color of items (default: white)
decoration - set items decoration on hover (default: underline)
Important: <m-navbar-items-right> section is used for align items on right of the navbar

<m-navbar-item-link> properties:

:item (Object) - object with properties 'title', 'link' for adding single item into navbar
color - set text color of items (default: white)
decoration - set items decoration on hover (default: underline)

<m-navbar-item-action> properties:

:item (Object) - object with properties 'title', 'action' (name of the method called on click) for adding single item into navbar
color - set text color of items (default: white)
decoration - set items decoration on hover (default: underline)

<m-navbar-dropdown> properties:

dropdownId - set id for dropdown
color - set color for dropdown (default: white)
:dropdownItems (Array) - array of object with properties 'title', 'value' and 'icon' for adding items into dropdown

Note: 'icon' property can be any FontAwesome icon and is not required

@selectedItem - event, emited when an item is clicked; here you can add your method for get the 'value' property of selected item
Important: <m-navbar-dropdown-right> section is used for align dropdown on right of the navbar