Package Exports

vue-md-kmh-components

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-md-kmh-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue Material Design KMH Components

A Vue.js 2.0 Component Collection

Development

Prerequisites

Vue
```
$ npm i vue
```
Vue Material ^1.0.0-beta-7
```
$ yarn add vue-material@beta
```

Usage

Installation

$ npm install vue-md-kmh-components

$ yarn add vue-md-kmh-components

Use component

add material design icons to html

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">

add to components:

import {
  dataTable,
  ...
} from 'vue-md-kmh-components';
...
components: {
    dataTable,
    ...
},

add Vue Material lib to Vue init script:

import VueMaterial from 'vue-material';
require('vue-material/dist/vue-material.css');
Vue.use(VueMaterial);

in template:

<data-table
    :headData="birdsHeadData"
    :data="birds"
    max=10>
</data-table>

data and headData in parent component

  birds: [
    {
      name: 'Birdy',
      variety: 'Eagle',
      size: 330,
      wingCount: 1.5,
    },
    {
      name: 'Rosa',
      variety: 'Peacock',
      size: 630,
      wingCount: 2,
    },
  ],
  birdsHeadData: [
    {
      key: 'name',
      name: 'Birds Name',
    }, {
      key: 'variety',
      name: 'Birds variety',
    }, {
      key: 'size',
      name: 'Size of Bird',
      format: (value) => { // dynamically change format
        if (value) {
          return `${value} mm`;
        }
        return '';
      },
    }, {
      key: 'wingCount',
      name: 'Number of wings',
    },
  ],

vue slots in table columns

  birdsHeadData: [
    ...
    {
      key: 'comment',
      name: 'Comment',
      type: 'slot'
    }
    ...
  ],

slotname must be named; columnname + underscore + row index

  <template :slot="'comment_' + value.id" v-for="value in birds">
    <md-field :key="'comment_' + value.id">
      <label>Comment</label>
      <md-input v-model="comment['comment_' + value.id]"></md-input>
    </md-field>
  </template>

! Attention ! Please make sure every row in the table data has a unique id