vue-mstyle/Readme.md

``` npm install vue-mstyle ``` ##Using in your project ```js import Vue from 'vue' import 'vue-mstyle' new Vue({ render: h => h(App) }).$mount('#app') ```

#**MStyle**

##### _Component Library based on VueJS and Bootstrap 4_

##Instalation
```
npm install vue-mstyle
```
##Using in your project
```js
import Vue from 'vue'
import 'vue-mstyle'
new Vue({
   render: h => h(App)
  }).$mount('#app')
```


##Component Syntax Description

>### **MBanner**

  ```html
   <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 <br/>
**bannerHeight** - height of banner (default: 44rem) <br/>
**bannerColor** - color for overlay (default: black) <br/>
**textAlign** - alignment of text on the banner: left, center or right (default: center) <br/>
**textColor** - color of the text (default: white) <br/>
**:opacity** - overlay opacity value: 0 - transparent, 1 - opaque (default: 0.7) <br/>

>### **MCaptcha**
###### _Based on google recaptcha_ See aditional information https://developers.google.com/recaptcha/docs/invisible

  ```html
  <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<br/>
**sitekey** - mandatory parameter, google recaptcha **_data-sitekey_**<br/>
**captchaType** - type of captcha, *invisible* for invisible, *normal* for I'm not robot<br/>

>### **MCard**
```html
  <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) <br/>
**background** - set background color (default: white) <br/>
**color** - set text color (default: black) <br/>
### **```<m-card-media> properties:```**
**:radius** - set border-radius property in pixels for top-left and top-right corners (default: 0) <br/>
**background** - set background color (default: #718F9E) <br/>
**color** - set text color (default: white) <br/>

>### **MDataIterator**
```html
    <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:**
```javascript
  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** <br/>

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

>### **MDataTable**
```html
  <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:**
```javascript
  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** <br/>

### **```<m-data-table> properties:```**
**:dataTable (Array)** - array of objects which data will be added into table <br/>
**:sortingEnabled (Boolean)** - enable ascending and descending sorting table by columns (default: true) <br/>
**:paginationEnabled (Boolean)** - enable pagination of data from table (default: false) <br/>
**:itemsPerPage (Number)** - if paginationEnabled property is set to 'true' you can set the number of rows displayed on page (default: 1) <br/>
**paginationAlign (String)** - set position of the pagination on the page: left, center or right (default: left) <br/>
**paginationColor (String)** - set color of active page into pagination section (default: #718F9E) <br/>
**dark (Boolean)** - apply dark theme (default: false) <br/>
**stripped (Boolean)** - make the table stripped (default: false) <br/>
**bordered (Boolean)** - add border on the table (default: false) <br/>
**hovered (Boolean)** - rows will change color on hover (default: false) <br/>
### **```<m-data-table-head> properties:```**
**color (String)** - set text color into table header <br/>
**background (String)** - set background color of the header <br/>
**textAlign (String)** - set alignment of the text: left, center or right (default: left) <br/>
**textTransfrom (String)** - apply text-transform property for header: lowercase, uppercase or capitalize (default: uppercase)<br/>
### **```<m-data-table-body> properties:```**
**color (String)** - set text color into table body <br/>
**background (String)** - set background color of the rows <br/>
**textAlign (String)** - set alignment of the text: left, center or right (default: left) <br/>

>### **MDialog**
```html
  <!-- 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 <br/>
**size** - size of the dialog window: small, normal or large (default: normal) <br/>
**:centered (Boolean)** - vertical alignment of the dialog in the center (default: false) <br/>
**:persistent (Boolean)** - set 'true' and dialog will doesn't close on click outside (default: false) <br/>
### **```<m-dialog-header> properties:```**
**background** - background-color of dialog header (default: #718F9E) <br/>
**color** - text-color inside header section (default: white) <br/>
### **```<m-dialog-body> properties:```**
**background** - background-color of dialog body (default: white) <br/>
**color** - color of body text (default: black) <br/>
**align** - text alignment inside body section: left, center, right or justify (default: left) <br>
### **```<m-dialog-footer> properties:```**
**background** - background-color of dialog footer (default: white) <br/>
**color** - text-color inside footer section (default: black) <br/>

>### **MFooter**
```html
  <!-- 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: 123 456 679 </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: 123 456 679 </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) <br/>
**height** - height of the footer (default: auto) <br/>

### **```<m-footer-left> properties:```**
**color** - text-color for elements placed on the left of the page (default: white) <br/>

### **```<m-footer-center> properties:```**
**color** - text-color for elements placed in the center of the page (default: white) <br/>

### **```<m-footer-right> properties:```**
**color** - text-color for elements placed on the right of the page (default: white) <br/>

### **```<m-footer-list-horizontal> properties:```**
**color** - color for list items (default: white) <br/>
**items (Array)** - array of objects with properties: 'title', 'icon' and 'link'<br/>
###**Note: 'icon' property can be any FontAwesome icon and is not required** <br/>

### **```<m-footer-list-vertical> properties:```**
**name** - name of the list (example: Social, Media)
**color** - color for list items (default: white) <br/>
**items (Array)** - array of objects with properties: 'title', 'icon' and 'link'<br/>
###**Note: 'icon' property can be any FontAwesome icon and is not required** <br/>

>### **MFileUploader**

```html
  <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<br/>
**allowedFileType** - type of files allowed to be droped in file loader. Default allowed type is **_.pdf_**<br/>
**allowMultipleUpload** - if is present, allows user to load multiple files<br/>

>### **MNavbar**
```html
  <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) <br/>

### **```<m-navbar-brand> properties:```**
**color** - set color for text (default: white)<br/>
**:showButton (Boolean)** - show or hide button wich expand navbar (default: true)<br/>

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

### **```<m-navbar-item-link> properties:```**
**:item (Object)** - object with properties 'title', 'link' for adding single item into navbar <br/>
**color** - set text color of items (default: white) <br/>
**decoration** - set items decoration on hover (default: underline) <br/>

### **```<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 <br/>
**color** - set text color of items (default: white) <br/>
**decoration** - set items decoration on hover (default: underline) <br/>

### **```<m-navbar-dropdown> properties:```**
**dropdownId** - set id for dropdown <br/>
**color** - set color for dropdown (default: white) <br/>
**:dropdownItems (Array)** - array of object with properties 'title', 'value' and 'icon' for adding items into dropdown <br/>
###**Note: 'icon' property can be any FontAwesome icon and is not required** <br/>
**@selectedItem** - event, emited when an item is clicked; here you can add your method for get the 'value' property of selected item <br/>
**Important: ```<m-navbar-dropdown-right>``` section is used for align dropdown on right of the navbar** <br/>