├── src
    ├── components
    │   ├── pagination
    │   │   ├── index.js
    │   │   ├── md-pagination-item.vue
    │   │   └── md-pagination.vue
    │   ├── chips
    │   │   ├── index.js
    │   │   └── md-chip.vue
    │   ├── badges
    │   │   ├── index.js
    │   │   └── md-badge.vue
    │   ├── commons
    │   │   ├── index.js
    │   │   ├── md-icon.vue
    │   │   └── md-link.vue
    │   ├── crumb
    │   │   ├── index.js
    │   │   └── md-crumb.vue
    │   ├── sidenav
    │   │   ├── index.js
    │   │   └── md-sidenav.vue
    │   ├── forms
    │   │   ├── date_picker
    │   │   │   ├── index.js
    │   │   │   ├── md-date-display.vue
    │   │   │   ├── md-datepicker.vue
    │   │   │   └── md-date-table.vue
    │   │   ├── md-radio.vue
    │   │   ├── md-checkbox.vue
    │   │   ├── md-submit.vue
    │   │   ├── md-file.vue
    │   │   ├── index.js
    │   │   ├── md-select.vue
    │   │   ├── md-textarea.vue
    │   │   ├── md-input.vue
    │   │   ├── md-switch.vue
    │   │   └── md-range.vue
    │   ├── lists
    │   │   ├── md-list-avatar.vue
    │   │   ├── md-list-sec.vue
    │   │   ├── index.js
    │   │   ├── md-list.vue
    │   │   └── md-list-item.vue
    │   ├── buttons
    │   │   ├── index.js
    │   │   ├── md-btn.vue
    │   │   └── md-fab.vue
    │   ├── cards
    │   │   ├── md-card-reveal.vue
    │   │   ├── md-card-content.vue
    │   │   ├── md-card.vue
    │   │   ├── md-card-action.vue
    │   │   ├── md-panel-card.vue
    │   │   ├── md-card-img.vue
    │   │   ├── md-card-title.vue
    │   │   ├── md-basic-card.vue
    │   │   ├── index.js
    │   │   └── md-image-card.vue
    │   ├── navbar
    │   │   ├── index.js
    │   │   ├── md-nav-logo.vue
    │   │   ├── md-nav-links.vue
    │   │   ├── md-searchbar.vue
    │   │   └── md-nav.vue
    │   ├── preloader
    │   │   ├── index.js
    │   │   ├── md-circular-item.vue
    │   │   ├── md-progress.vue
    │   │   └── md-circular.vue
    │   ├── footer
    │   │   ├── index.js
    │   │   ├── md-footer.vue
    │   │   ├── md-footer-content.vue
    │   │   ├── md-footer-copyright.vue
    │   │   └── md-footer-links.vue
    │   └── mixins
    │   │   ├── common-mixin.js
    │   │   ├── card-mixin.js
    │   │   └── form-mixin.js
    ├── directives
    │   ├── index.js
    │   └── md-model.js
    ├── utils
    │   ├── index.js
    │   ├── wrapChildren.js
    │   └── cssValue.js
    └── vue-material.js
├── .npmignore
├── .gitignore
├── LICENSE
├── package.json
└── README.md


/src/components/pagination/index.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/directives/index.js:
--------------------------------------------------------------------------------
1 | import mdModel from './md-model.js';
2 | export default {
3 |     mdModel
4 | }


--------------------------------------------------------------------------------
/src/components/chips/index.js:
--------------------------------------------------------------------------------
1 | import mdChip from './md-chip.vue';
2 | 
3 | export default {
4 |     mdChip
5 | }


--------------------------------------------------------------------------------
/src/components/badges/index.js:
--------------------------------------------------------------------------------
1 | import mdBadge from './md-badge.vue';
2 | 
3 | export default {
4 |     mdBadge,
5 | }


--------------------------------------------------------------------------------
/src/components/commons/index.js:
--------------------------------------------------------------------------------
1 | import mdIcon from './md-icon.vue';
2 | 
3 | export default {
4 |     mdIcon,
5 | }


--------------------------------------------------------------------------------
/src/components/crumb/index.js:
--------------------------------------------------------------------------------
1 | import mdCrumb from './md-crumb.vue';
2 | 
3 | export default {
4 |     mdCrumb,
5 | }


--------------------------------------------------------------------------------
/src/components/sidenav/index.js:
--------------------------------------------------------------------------------
1 | import mdSidenav from "./md-sidenav.vue";
2 | export default {
3 |     mdSidenav
4 | }


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | #folders
 2 | build
 3 | node_modules
 4 | test
 5 | 
 6 | 
 7 | #files
 8 | .*
 9 | *.md
10 | *.log
11 | bower.json


--------------------------------------------------------------------------------
/src/components/forms/date_picker/index.js:
--------------------------------------------------------------------------------
1 | import mdDatepicker from './md-datepicker.vue';
2 | 
3 | export default {
4 | 	mdDatepicker
5 | }


--------------------------------------------------------------------------------
/src/components/lists/md-list-avatar.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | <li class="collection-item avatar">
3 |     <slot></slot>
4 | </li>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/components/buttons/index.js:
--------------------------------------------------------------------------------
1 | import mdBtn from './md-btn.vue';
2 | import mdFab from './md-fab.vue';
3 | 
4 | export default {
5 |     mdBtn,
6 |     mdFab,
7 | }


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
1 | import cssValue from './cssValue.js';
2 | import wrapChildren from './wrapChildren.js';
3 | 
4 | export default {
5 |     cssValue,
6 |     wrapChildren
7 | }


--------------------------------------------------------------------------------
/src/components/cards/md-card-reveal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="card-reveal">
 3 |   <slot></slot>
 4 | </div> 
 5 | </template>
 6 | 
 7 | <script type="babel">
 8 | export default {
 9 | 
10 | }
11 | </script>


--------------------------------------------------------------------------------
/src/components/cards/md-card-content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="card-content">  
 3 |     <slot></slot>
 4 | </div>
 5 | </template>
 6 | 
 7 | <script type="babel">
 8 | export default {
 9 | 
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/src/components/lists/md-list-sec.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a class="secondary-content">
 3 |       <slot></slot>
 4 |   </a>  
 5 | </template>
 6 | 
 7 | <script type="babel">
 8 |     export default {
 9 | 
10 |     }
11 | </script>


--------------------------------------------------------------------------------
/src/components/navbar/index.js:
--------------------------------------------------------------------------------
1 | import mdNav from './md-nav.vue';
2 | import mdNavLinks from './md-nav-links.vue';
3 | import mdNavLogo from './md-nav-logo.vue';
4 | 
5 | export default {
6 |     mdNav,
7 |     mdNavLinks,
8 |     mdNavLogo,
9 | }


--------------------------------------------------------------------------------
/src/components/pagination/md-pagination-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<li :class="itemClass">
 3 | 		<a href="item.href"></a>
 4 | 	</li> 
 5 | </template>
 6 | 
 7 | <script type="babel">
 8 | export default {
 9 |     data(){
10 |         
11 |     }
12 | }
13 | </script>


--------------------------------------------------------------------------------
/src/components/commons/md-icon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <i :class="['material-icons',pos]">{{text}}</i>
 3 | </template>
 4 | 
 5 | <script type="babel">
 6 | export default {
 7 |     props: {
 8 |         text:String,
 9 |         pos:String
10 |     }
11 | }
12 | </script>


--------------------------------------------------------------------------------
/src/components/preloader/index.js:
--------------------------------------------------------------------------------
1 | import mdCircular from './md-circular.vue';
2 | import mdCircularItem from './md-circular-item.vue';
3 | import mdProgress from './md-progress.vue';
4 | 
5 | export default {
6 |     mdCircular,
7 |     mdCircularItem,
8 |     mdProgress
9 | }


--------------------------------------------------------------------------------
/src/components/cards/md-card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div :class="panel?'card-panel':'card'">
 3 |         <slot></slot>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script type="babel">
 8 |     export default {
 9 |         props:{
10 |             panel:Boolean
11 |         }
12 |     }
13 | </script>


--------------------------------------------------------------------------------
/src/components/crumb/md-crumb.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <a class="breadcrumb">
 3 |     <slot>
 4 |         {{text}}
 5 |     </slot>
 6 | </a>
 7 | </template>
 8 | 
 9 | <script type="babel">
10 |     export default {
11 |         props:{
12 |             text:String
13 |         }
14 |     }
15 | </script>


--------------------------------------------------------------------------------
/src/components/badges/md-badge.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <span :class="['badge',new?'new':'']"  >
 3 |         <slot></slot>
 4 |     </span>
 5 | </template>
 6 | 
 7 | <script type="babel">
 8 | export default {
 9 |     props:{
10 |         new:Boolean,
11 |         // count:Number
12 |     }
13 | }
14 | </script>


--------------------------------------------------------------------------------
/src/components/lists/index.js:
--------------------------------------------------------------------------------
 1 | import mdList from './md-list.vue';
 2 | import mdListAvatar from './md-list-avatar.vue';
 3 | import mdListItem from './md-list-item.vue';
 4 | import mdListSec from './md-list-sec.vue';
 5 | export default {
 6 |     mdList,
 7 |     mdListAvatar,
 8 |     mdListItem,
 9 |     mdListSec,
10 | }


--------------------------------------------------------------------------------
/src/utils/wrapChildren.js:
--------------------------------------------------------------------------------
1 | export default function (parent,tag){
2 |         let len = parent.children.length;
3 |         for(let i=0; i<len;i++) {
4 |             let wrapper = document.createElement(tag);
5 |             wrapper.appendChild(parent.children[0]);
6 |             parent.appendChild(wrapper);
7 |         }
8 | }


--------------------------------------------------------------------------------
/src/components/cards/md-card-action.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="card-action">
 3 |     <slot>
 4 |         <a v-for="link in links"  :href="link.href">{{link.text}}</a>
 5 |     </slot>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script type="babel">
10 | export default {
11 |     props:{
12 |         links:Array
13 |     }
14 | }
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/components/cards/md-panel-card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="card-panel">
 3 |     <span :class="options.class">
 4 |         <slot>
 5 |                 {{options.text}}
 6 |         </slot>
 7 |     </span>
 8 | </div>
 9 | </template>
10 | 
11 | <script type="babel">
12 | export default {
13 |     props:{
14 |         options:Object
15 |     }
16 | }
17 | </script>


--------------------------------------------------------------------------------
/src/components/navbar/md-nav-logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <a :class="['brand-logo',pos]">
 3 |     <slot>
 4 |     </slot>
 5 | </a>
 6 | </template>
 7 | 
 8 | <script type="babel">
 9 |     export default {
10 |         props:{
11 |             pos:{
12 |                 type:String,
13 |                 default:"left"
14 |             }
15 |         }
16 |     }
17 | </script>


--------------------------------------------------------------------------------
/src/components/footer/index.js:
--------------------------------------------------------------------------------
 1 | import mdFooter from './md-footer.vue';
 2 | import mdFooterContent from './md-footer-content.vue';
 3 | import mdFooterCopyright from './md-footer-copyright.vue';
 4 | import mdFooterLinks from './md-footer-links.vue';
 5 | 
 6 | export default {
 7 |     mdFooter,
 8 |     mdFooterContent,
 9 |     mdFooterCopyright,
10 |     mdFooterLinks
11 | }


--------------------------------------------------------------------------------
/src/components/cards/md-card-img.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="card-image">
 3 |     <img :src="src" :class="{'activator':reveal}">
 4 |     <slot></slot>      
 5 | </div>
 6 | </template>
 7 | 
 8 | <script type="babel">
 9 | import {hasImg} from '../mixins/common-mixin.js';
10 | export default {
11 |     props:{
12 |         reveal:Boolean,
13 |         src:String
14 |     }
15 | }
16 | </script>


--------------------------------------------------------------------------------
/src/components/footer/md-footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <footer class="page-footer">
 3 |         <div class="container">
 4 |             <div v-el:row class="row">
 5 |                 <slot></slot>
 6 |             </div>
 7 |         </div>
 8 |         <slot name="copyright"></slot>
 9 |     </footer>
10 | </template>
11 | <script type="babel">
12 | export default {
13 | 
14 | }   
15 | </script>


--------------------------------------------------------------------------------
/src/components/mixins/common-mixin.js:
--------------------------------------------------------------------------------
 1 | import mdIcon from '../commons/md-icon.vue';
 2 | export default {
 3 |     hasIcon: {
 4 |         props: {
 5 |             iconText: String,
 6 |             iconPos:String
 7 |         },
 8 |         components: {
 9 |             "md-icon": mdIcon
10 |         }
11 |     },
12 |     hasImg:{
13 |         props:{
14 |             imgSrc:String,
15 |             imgAlt:String
16 |         }
17 |     }
18 | }


--------------------------------------------------------------------------------
/src/directives/md-model.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |     twoWay:true,
 3 |     bind: function () {
 4 |         this.handler = function () {
 5 |             // console.log(this.el.__vue__.mdValue);
 6 |           this.set(this.el.__vue__.mdValue);
 7 |         }.bind(this);
 8 |         this.el.addEventListener('change', this.handler)
 9 |   },
10 |   unbind: function () {
11 |     this.el.removeEventListener('change', this.handler)
12 |   }
13 | }


--------------------------------------------------------------------------------
/src/components/chips/md-chip.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="chip">
 3 |         <img v-if="imgSrc" :src="imgSrc" :alt="imgAlt">
 4 |         <slot></slot>
 5 |         <i  v-if="tag" class="material-icons">close</i>
 6 |     </div>
 7 | </template>
 8 | 
 9 | <script type="babel">
10 | import {hasImg} from '../mixins/common-mixin.js'
11 | export default {
12 |     mixins:[hasImg],
13 |     props:{
14 |         tag:Boolean
15 |     }
16 | }
17 | </script>


--------------------------------------------------------------------------------
/src/components/commons/md-link.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <a href="{{link.href}}">
 3 |     {{link.text}}
 4 |     <md-badge :badge="badge"></md-badge>
 5 | </a>
 6 | </template>
 7 | 
 8 | <script type="babel">
 9 | import mdBadge from './md-badge.vue';
10 | export default {
11 |         props : {
12 |             link:Object,
13 |             badge:Object
14 |         },
15 |         components : {
16 |             mdBadge
17 |         }
18 | }   
19 | </script>


--------------------------------------------------------------------------------
/src/components/navbar/md-nav-links.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <ul :class="[pos]">
 3 |         <slot></slot> 
 4 |     </ul>      
 5 | </template>
 6 | <script type="babel">
 7 | import {wrapChildren} from '../../utils/';
 8 | export default {
 9 |     props:{
10 |         pos:{
11 |             type:String,
12 |             default:"right"
13 |         }
14 |     },
15 |     ready(){
16 |         wrapChildren(this.$el,"li");
17 |     }
18 | }
19 | </script>


--------------------------------------------------------------------------------
/src/components/forms/md-radio.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <input :class="{'with-gap':gap}" v-model="mdValue" :checked="checked" :value="value" :name="name" type="radio" :id="id" :disabled="disabled" />
 3 |     <label :for="id"><slot></slot></label>
 4 | </template>
 5 | 
 6 | <script>
 7 | import {basicAttr,status} from '../mixins/form-mixin.js';
 8 | export default {
 9 |     mixins:[basicAttr,status],
10 |     props:{
11 |         gap:Boolean
12 |     }
13 | }
14 | </script>


--------------------------------------------------------------------------------
/src/components/cards/md-card-title.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <span :class="{'card-title':true,'activator':reveal}">
 3 |     <slot></slot>
 4 |     <md-icon v-if="reveal" :text="iconText" pos="right"></md-icon>
 5 | </span>
 6 | </template>
 7 | 
 8 | <script type="babel">
 9 | import {hasIcon} from '../mixins/common-mixin.js';
10 | export default {
11 |     mixins:[hasIcon],
12 |     props:{
13 |         reveal:Boolean,
14 |         iconText:String
15 |     }
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/src/components/lists/md-list.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div v-if="isLinks" :class="{'collection':true,'with-header':withHeader}">
 3 |     <slot></slot>
 4 | </div>
 5 | <ul v-else  :class="{'collection':true,'with-header':withHeader}">
 6 | <slot></slot>
 7 | </ul>
 8 | </template>
 9 | 
10 | <script type="babel">
11 | export default {
12 |     data(){
13 |         return {
14 |             withHeader:false,
15 |             isLinks:false
16 |         }
17 |     }
18 | }
19 | </script>


--------------------------------------------------------------------------------
/src/components/forms/md-checkbox.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |       <input type="checkbox" :id="id" :class="{'filled-in':filled}" :name="name" :checked="checked" :disabled="disabled" />
 3 |       <label :for="id"><slot></slot></label>
 4 | </template>
 5 | 
 6 | <script type="babel">
 7 | import {basicAttr,status} from '../mixins/form-mixin.js';
 8 | export default {
 9 |     mixins:[basicAttr,status],
10 |     props: {
11 |             filled:Boolean,
12 |         }
13 | }
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/components/footer/md-footer-content.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |     <slot name="title">
 4 |         <h5 :class="[options.titleClass]">{{options.title}}</h5>
 5 |     </slot>
 6 |     <slot name="text">
 7 |         <p  :class="[options.textClass]">
 8 |                 {{options.text}}
 9 |         </p>
10 |     </slot>
11 |     <slot></slot>
12 | </div>
13 | </template>
14 | <script type="babel">
15 | export default {
16 |         props:{
17 |             options:Object
18 |         }
19 |     }
20 | </script>


--------------------------------------------------------------------------------
/src/components/navbar/md-searchbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav>
 3 |     <div class="nav-wrapper">
 4 |       <form>
 5 |         <div class="input-field">
 6 |           <input id="search" type="search" required>
 7 |           <label for="search"><i class="material-icons">search</i></label>
 8 |           <i class="material-icons">close</i>
 9 |         </div>
10 |       </form>
11 |     </div>
12 |   </nav>
13 | </template>
14 | 
15 | <script type="babel">
16 |   export default {
17 |     props:{
18 |       
19 |     }
20 |   }
21 | </script>


--------------------------------------------------------------------------------
/src/components/preloader/md-circular-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div :class="['spinner-layer',color]">
 3 |       <div class="circle-clipper left">
 4 |         <div class="circle"></div>
 5 |       </div>
 6 |       <div class="gap-patch">
 7 |         <div class="circle"></div>
 8 |       </div>
 9 |       <div class="circle-clipper right">
10 |         <div class="circle"></div>
11 |       </div>
12 |    </div>
13 | </template>
14 | 
15 | <script type="babel">
16 | export default {
17 | 	props:{
18 | 		color:String
19 | 	}
20 | }
21 | </script>


--------------------------------------------------------------------------------
/src/utils/cssValue.js:
--------------------------------------------------------------------------------
 1 | export default function(element,names,pseudo=null){
 2 |     //IE<11 doesn't support pseudo
 3 |     if(element && element.nodeType ===1) {
 4 |         let cssObj = window.getComputedStyle(element,pseudo);
 5 |         if(typeof names === "string"){
 6 |             return cssObj.getPropertyValue(names);
 7 |         }else {
 8 |             let result = {};
 9 |             for(let name in names) {
10 |                 result[name] = cssObj.getPropertyValue(name);
11 |             }
12 |             return result;
13 |         }
14 |     }
15 | 
16 | }


--------------------------------------------------------------------------------
/src/components/sidenav/md-sidenav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <ul  :class="['side-nav',fixed?'fixed':'']" :style="{width:width+'px'}">
 3 |         <slot></slot>
 4 |     </ul>
 5 | </template>
 6 | 
 7 | <script type="babel">
 8 | export default {
 9 |     props:{
10 |         fixed:Boolean,
11 |         width:{
12 |             type:Number,
13 |             default:240
14 |         }
15 |     }
16 | }
17 | </script>
18 | 
19 | <style>
20 |     .side-nav.fixed li a {
21 |         font-size: 13px;
22 |         line-height: 44px;
23 |         height: 44px;
24 |     }     
25 | </style>


--------------------------------------------------------------------------------
/src/components/footer/md-footer-copyright.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="footer-copyright">
 3 |             <div class="container">
 4 |                 <slot>
 5 |                     <span :class="[textClass]">{{options.text}}</span>
 6 |                     <a :class="[options.link.linkClass,'right']" :href="options.link.href">{{options.link.text}}
 7 |                     </a>
 8 |                 </slot>
 9 |             </div>
10 |  </div> 
11 | </template>
12 | 
13 | <script type="babel">
14 | export default {
15 |     props:{
16 |         options:Object
17 |         }
18 |     }
19 | </script>


--------------------------------------------------------------------------------
/src/components/forms/md-submit.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button class="btn" type="submit" :name="name" :disabled="disabled">{{btnText}}
 3 |     <i class="material-icons right">send</i>
 4 |   </button>
 5 | </template>
 6 | 
 7 | <script type="babel">
 8 | import {basicAttr,status} from '../mixins/form-mixin.js';
 9 | export  default {
10 |     mixins:[basicAttr,status],
11 |     props:{
12 |         defaultValue:{
13 |             type:String,
14 |             default:""
15 |         },
16 |         browserDefault:Boolean,
17 |         options:Object,
18 |         title:String
19 |     }
20 | }
21 | </script>


--------------------------------------------------------------------------------
/src/components/footer/md-footer-links.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |     <slot name="title">
 4 |       <h5 :class="[options.titleClass]">{{options.title}}</h5>
 5 |     </slot>
 6 |     <slot name="links">
 7 |       <ul>
 8 |           <li v-for="link in options.links">
 9 |               <a :href="link.href"  :class="[options.linkClass]">
10 |                   {{link.text}}
11 |               </a>
12 |           </li>
13 |       </ul>
14 |     </slot>
15 | </div>
16 | </template>
17 | 
18 | <script type="babel">
19 | export default {
20 |      props:{
21 |           options:Object
22 |      }
23 | }
24 | </script>


--------------------------------------------------------------------------------
/src/components/preloader/md-progress.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |  <div class="progress">
 3 |       <div :class="[widthValue?'determinate':'indeterminate',barColor]" :style="{width:widthValue}"></div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script type="babel">
 8 | export default {
 9 |     props:{
10 |         barColor:String,
11 |         percent:Number
12 |     },
13 |     computed:{
14 |         widthValue(){
15 |              if(this.percent>=0){
16 |                 return this.percent<100?`${this.percent}%`:"100%";
17 |              }else {
18 |                 return "";
19 |              }
20 |         }
21 |     }
22 | }
23 | </script>


--------------------------------------------------------------------------------
/src/components/mixins/card-mixin.js:
--------------------------------------------------------------------------------
 1 | import mdCardAction from '../cards/md-card-action.vue';
 2 | import mdCardContent from '../cards/md-card-content.vue';
 3 | import mdCardImg from '../cards/md-card-img.vue';
 4 | import mdCardTitle from '../cards/md-card-title.vue';
 5 | export default {
 6 | 
 7 |     basic: {
 8 |         props:{
 9 |             options:Object,
10 |             reveal:Boolean
11 |         },
12 |         components: {
13 |             'md-card-action': mdCardAction,
14 |             'md-card-content': mdCardContent,
15 |             'md-card-title': mdCardTitle,
16 |             'md-card-img': mdCardImg
17 |         }
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/forms/md-file.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="file-field input-field">
 3 |     <div class="btn">
 4 |         <span>{{btnText}}</span>
 5 |         <input  type="file" :multiple="multiple">
 6 |     </div>
 7 |     <div class="file-path-wrapper">
 8 |         <input class="file-path validate" type="text">
 9 |     </div>
10 | </div>
11 | </template>
12 | 
13 | <script type="babel">
14 | import {basicAttr} from '../mixins/form-mixin.js';
15 | export default {
16 |     mixins:[basicAttr],
17 |     porps:{
18 |         multiple:Boolean,
19 |         btnText:{
20 |             type:String,
21 |             default:"File"
22 |         }
23 |     }
24 | }
25 | </script>


--------------------------------------------------------------------------------
/src/components/forms/index.js:
--------------------------------------------------------------------------------
 1 | import mdCheckbox from './md-checkbox.vue';
 2 | // import mdDatepicker from './date_picker/';
 3 | import mdFile from './md-file.vue';
 4 | import mdInput from './md-input.vue';
 5 | import mdRadio from './md-radio.vue';
 6 | import mdRange from './md-range.vue';
 7 | import mdSelect from './md-select.vue';
 8 | import mdSubmit from './md-submit.vue';
 9 | import mdSwitch from './md-switch.vue';
10 | import mdTextarea from './md-textarea.vue';
11 | 
12 | export default {
13 |     mdCheckbox,
14 |     // mdDatepicker,
15 |     mdFile,
16 |     mdInput,
17 |     mdRadio,
18 |     mdRange,
19 |     mdSelect,
20 |     mdSubmit,
21 |     mdSwitch,
22 |     mdTextarea
23 | }


--------------------------------------------------------------------------------
/src/components/cards/md-basic-card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="card">
 3 |         <md-card-content>
 4 |             <md-card-title :class="options.title.class" :reveal="reveal">
 5 |             {{options.title.text}}       
 6 |             </md-card-title>
 7 |             <p>{{options.content.text}}</p>
 8 |         </md-card-content>
 9 |         <md-card-action v-if="! reveal" :links="options.links" >
10 |             <slot name="links"></slot>
11 |         </md-card-action>
12 |         <slot name="reveal"></slot>    
13 |     </div>
14 | </template>
15 | 
16 | <script lang="babel">
17 | import {basic} from '../mixins/card-mixin.js';
18 | export default {
19 |     mixins:[basic]
20 | }
21 | </script>


--------------------------------------------------------------------------------
/src/components/cards/index.js:
--------------------------------------------------------------------------------
 1 | // import mdBasicCard from './md-basic-card.vue';
 2 | import mdCard from './md-card.vue';
 3 | import mdCardAction from './md-card-action.vue';
 4 | import mdCardContent from './md-card-content.vue';
 5 | import mdCardImg from './md-card-img.vue';
 6 | import mdCardReveal from './md-card-reveal.vue';
 7 | import mdCardTitle from './md-card-title.vue';
 8 | // import mdImageCard from './md-image-card.vue';
 9 | // import mdPanelCard from './md-panel-card.vue';
10 | 
11 | export default {
12 |     // mdBasicCard,
13 |     mdCard,
14 |     mdCardAction,
15 |     mdCardContent,
16 |     mdCardImg,
17 |     mdCardReveal,
18 |     mdCardTitle,
19 |     // mdImageCard,
20 |     // mdPanelCard,
21 | }


--------------------------------------------------------------------------------
/src/components/lists/md-list-item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <a v-if="href" :href="href" :class="header?'collection-header':'collection-item'">
 3 |     <slot></slot>
 4 | </a>
 5 | <li v-else  :class="header?'collection-header':'collection-item'">
 6 |     <slot></slot>
 7 | </li>
 8 | </template>
 9 | 
10 | <script type="babel">
11 | export default {
12 |     props:{
13 |         header:Boolean,
14 |         href:String
15 |     },
16 |     created(){
17 |         let parent = this.$parent
18 |         if(!parent.withHeader && this.header === true) {
19 |             parent.withHeader = true;
20 |         }
21 |         if(!parent.isLinks && this.href){
22 |             parent.isLinks=true;
23 |         }
24 |     }
25 | }
26 | </script>


--------------------------------------------------------------------------------
/src/components/navbar/md-nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <nav>
 3 |     <div class="nav-wrapper">
 4 |         <slot></slot>
 5 |     </div>
 6 | </nav>
 7 | </template>
 8 | 
 9 | <script type="babel">
10 | export default {
11 |     props:{
12 |         fixed:Boolean
13 |     },
14 |     ready(){
15 |         if(this.fixed){
16 |             let el = this.$el
17 |             let parentNode = el.parentNode;
18 |             let div=document.createElement("div");
19 |             div.className="navbar-fixed";
20 |             parentNode.insertBefore(div,el)
21 |             div.appendChild(el);
22 |         }
23 |     }
24 | }
25 | </script>
26 | 
27 | <style>
28 |     .brand-logo.left {
29 |         left:0.5rem;
30 |     }
31 | </style>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | 
 5 | # Runtime data
 6 | pids
 7 | *.pid
 8 | *.seed
 9 | 
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 | 
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 | 
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 | 
19 | # node-waf configuration
20 | .lock-wscript
21 | 
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 | 
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | 
29 | #elviskang
30 | 
31 | #folders
32 | doc/node_modules
33 | .vscode
34 | dist
35 | 
36 | #gedit backup files
37 | *.*~


--------------------------------------------------------------------------------
/src/components/forms/md-select.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <select :id="id" :class="{'browser-default':browserDefault}" :required="required" :disabled="disabled">
 3 |       <option :value="defaultValue" disabled selected>{{title}}</option>
 4 |       <option v-for="option in options" :value="option.value">{{option.text}}</option>
 5 |     </select>
 6 |     <label :for="id">{{label}}</label>    
 7 | </template>
 8 | 
 9 | <script type="babel">
10 | import {basicAttr,status} from '../mixins/form-mixin.js';
11 | export  default {
12 |     mixins:[basicAttr,status],
13 |     props:{
14 |         defaultValue:{
15 |             type:String,
16 |             default:""
17 |         },
18 |         browserDefault:Boolean,
19 |         options:Object,
20 |         title:String
21 |     }
22 | }
23 | </script>


--------------------------------------------------------------------------------
/src/components/forms/date_picker/md-date-display.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="picker__date-display">
 3 |         <div class="picker__weekday-display">
 4 |             {{day}}
 5 |         </div>
 6 |         <div class="picker__month-display">
 7 |             <div>
 8 |                 {{month}}
 9 |             </div>
10 |         </div>
11 |         <div class="picker__day-display">
12 |             <div>
13 |                 {{date}}
14 |             </div>
15 |         </div>
16 |         <div class="picker__year-display">
17 |             <div>
18 |                 {{year}}
19 |             </div>
20 |         </div>
21 |     </div>
22 | </template>
23 | 
24 | <script type="babel">
25 |     export default {
26 |         props:{
27 |             selectedDate:Date
28 |         }
29 |     }
30 | </script>


--------------------------------------------------------------------------------
/src/components/forms/md-textarea.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="input-field ">
 3 |     <md-icon v-if="iconText" :class="{'active':focus}" :text="iconText" :pos="iconPos"></md-icon>
 4 |     <textarea class="materialize-textarea" v-model="mdValue" :id="id" v-el:input :name="name" :value="value" :placeholder="placeholder" :disabled="disabled" :required="required" @focus="focus=true" @blur="focus=false" lazy></textarea>
 5 |     <label :for="id" :class="{'active':labelActive}"><slot></slot></label>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script type="babel">
10 | import {basicAttr,formIcon,status,actLabel} from '../mixins/form-mixin.js';
11 | export default {
12 |     mixins:[basicAttr,formIcon,status,actLabel],
13 |     data(){
14 |         return {
15 |             focus:false
16 |         }
17 |     }
18 | }
19 | </script>


--------------------------------------------------------------------------------
/src/components/preloader/md-circular.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="preloader-wrapper active">
 3 |         <md-circular-item v-for="color in colors" :color="color"></md-circular-item>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script type="babel">
 8 | import mdCircularItem from './md-circular-item.vue';
 9 | export default {
10 |     props:['colors'],
11 |     created(){
12 |         let colors = this.colors;
13 |         if(colors == undefined ){
14 |             this.colors = [""];
15 |             return;
16 |         }
17 |         if(typeof colors === "string") {
18 |             colors = colors.split(' ');
19 |         }
20 |         if(colors.length === 1){
21 |             this.colors=[`spinner-${colors[0]}-only`]
22 |         }else {
23 |             this.colors=colors.map((v)=>`spinner-${v}`)
24 |         }
25 |     },
26 |     components:{
27 |         'md-circular-item':mdCircularItem
28 |     }
29 | }
30 | </script>


--------------------------------------------------------------------------------
/src/components/cards/md-image-card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="card">
 3 |     <md-card-img v-if="options.imgSrc" :src="options.imgSrc"  :reveal="reveal">
 4 |         <md-card-title v-if="! reveal" :class="options.title.class">
 5 |             {{options.title.text}}
 6 |         </md-card-title>
 7 |     </md-card-img>
 8 |     <md-card-content  :class="options.content.class">
 9 |         <md-card-title v-if="reveal" :class="options.title.class">
10 |             {{options.title.text}}
11 |         </md-card-title>
12 |         <p>{{options.content.text}}</p>
13 |     </md-card-content>
14 |     <md-card-action v-if="! reveal":links="options.links">
15 |         <slot name="links"></slot>
16 |     </md-card-action> 
17 |     <slot name="reveal"></slot>
18 | </div>
19 | </template>
20 | 
21 | <script type="babel">
22 | import {basic} from '../mixins/card-mixin.js';
23 | export default {
24 |     mixins:[basic]
25 | }
26 | </script>


--------------------------------------------------------------------------------
/src/components/forms/md-input.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="input-field">
 3 |         <md-icon v-if="iconText" :class="{'active':focus}" :text="iconText" :pos="iconPos"></md-icon>
 4 |         <input v-model="mdValue" :id="id" v-el:input :name="name" :value="value" :placeholder="placeholder" :type="type" :disabled="disabled" :required="required" @focus="focus=true" @blur="focus=false" lazy>
 5 |         <label :for="id" :class="{'active':labelActive}"><slot></slot></label>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script type="babel">
10 | import {basicAttr,status,formIcon,actLabel} from '../mixins/form-mixin.js';
11 | export default {
12 |     mixins:[basicAttr,formIcon,status,actLabel],
13 |     data(){
14 |         return {
15 |             focus:false
16 |         }
17 |     },
18 |     props:{
19 |         type:{
20 |             type:String,
21 |             default:"text"
22 |         },
23 |         validate:Boolean
24 |     },
25 | }
26 | </script>


--------------------------------------------------------------------------------
/src/components/buttons/md-btn.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <a :class="[btnType,disabled?'disabled':'',large?'btn-large':'']">
 3 |        <slot name="icon">
 4 |             <md-icon   v-if="showIcon"  :text="iconText" :pos="iconPos"></md-icon>
 5 |        </slot> 
 6 |         <slot>
 7 |         </slot>
 8 |     </a>
 9 | </template>
10 | 
11 | <script>
12 | import {hasIcon} from '../mixins/common-mixin.js';
13 | export default {
14 |     mixins:[hasIcon],
15 |     props:{
16 |             large:Boolean,
17 |             disabled:Boolean,
18 |             type:String
19 |         },
20 |     computed:{
21 |         btnType(){
22 |            switch(this.type){
23 |                 case 'floating' :
24 |                     return 'btn-floating';
25 |                 case 'flat' :
26 |                     return 'btn-flat';
27 |                 default :
28 |                     return 'btn'
29 |            }
30 |         },
31 |         showIcon(){
32 |             return (this.type !== 'flat' && this.iconText);
33 |         }
34 |     }
35 | }
36 | </script>


--------------------------------------------------------------------------------
/src/components/forms/md-switch.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="switch">
 3 |     <label>
 4 |         <slot name="off">
 5 |         {{text[0]}}
 6 |         </slot>
 7 |         <input type="checkbox" v-model="mdValue" :false-value="value[0]" :true-value="value[1]" :checked="checked" :disabled="disabled" >
 8 |         <span class="lever"></span> 
 9 |         <slot name="on">
10 |         {{text[1]}}
11 |         </slot>
12 |     </label>
13 | </div>
14 | </template>
15 | 
16 | <script type="babel">
17 | import {basicAttr,status} from '../mixins/form-mixin.js';
18 | export default {
19 |     mixins:[basicAttr,status],
20 |     props:{
21 |         text:{
22 |             type:Array,
23 |             default(){
24 |                 return ['off','on'];
25 |             }
26 |         },
27 |         value:Array
28 |     },
29 |     created(){
30 |         if(this.text.length<2){
31 |             this.text= ['off','on'];
32 |         }
33 |         if(!this.value){
34 |             this.value=[false,true];
35 |         }
36 |     }
37 | }
38 | </script>


--------------------------------------------------------------------------------
/src/components/pagination/md-pagination.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <ul class="pagination">
 3 |     <li :class="{noPrevious?'disable':itemEffect}"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
 4 |     <li  v-for="item in items"  :class="[$index === currentPage?'active':itemEffect]">
 5 |         <a :href="item.href" @click="setCurrentPage($index+1)">{{$index+1}}</a>
 6 |     </li>
 7 |     <li :class="{noNext?'disable':itemEffect}"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
 8 | </ul>
 9 | </template>
10 | 
11 | <script type="babel">
12 | export default {
13 |     props:{
14 |         currentPage:{
15 |             twoWay=true,
16 |             type:Number
17 |         }
18 |     }
19 |     data(){
20 |         return {
21 |             max:10,
22 |             items:[]
23 |         }
24 |     },
25 |     methods:{
26 |         setCurrentPage :(value) =>this.currentPage = value;
27 | 
28 |     }
29 |     computed:{
30 |         noPrevious:()=>currentPage===1,
31 |         noNext:()=>currentPage === this.items.length
32 |     }
33 | }
34 | </script>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Kaixuan Kang
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/src/components/mixins/form-mixin.js:
--------------------------------------------------------------------------------
 1 | import {mdIcon}from '../commons/index.js';
 2 | let basicAttr = {
 3 |     props: {
 4 |         id: {
 5 |             type:String,
 6 |             default:''
 7 |         },
 8 |         name: {
 9 |             type:String,
10 |             default:''
11 |         },
12 |         placeholder: {
13 |             type:String,
14 |             default:''
15 |         },
16 |         value: {
17 |             type:String,
18 |             default:''
19 |         }
20 |     }
21 | };
22 | let status = {
23 |     props: {
24 |         checked:Boolean,
25 |         disabled: Boolean,
26 |         required: Boolean,
27 |     }
28 | };
29 | let formIcon = {
30 |     props: {
31 |         iconText: String,
32 |         iconPos:{
33 |             type:String,
34 |             default:"prefix"
35 |         }
36 |     },
37 |     components: {
38 |         'md-icon': mdIcon
39 |     }
40 | };
41 | let actLabel = {
42 |     computed:{
43 |         labelActive(){
44 |                 return (this.mdValue || this.placeholder || this.focus);
45 |             }
46 |     },
47 | };
48 | export default {
49 |     basicAttr,
50 |     formIcon,
51 |     status,
52 |     actLabel,
53 | }
54 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-material",
 3 |   "version": "0.0.14",
 4 |   "description": "Material-design components built with pure Vue.js",
 5 |   "main": "dist/vue-material.js",
 6 |   "directories": {
 7 |     "test": "test"
 8 |   },
 9 |   "scripts": {
10 |     "test": "echo \"Error: no test specified\" && exit 1",
11 |     "build": "webpack  --config build/webpack.build.dev.config.js & webpack --config build/webpack.build.prod.config.js",
12 |     "doc": "webpack --watch --config build/webpack.dev.js",
13 |     "pub": "npm run build && npm publish"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git+https://github.com/ElvisKang/vue-material.git"
18 |   },
19 |   "keywords": [
20 |     "vue",
21 |     "material",
22 |     "vue-material"
23 |   ],
24 |   "author": "elviskang",
25 |   "license": "MIT",
26 |   "bugs": {
27 |     "url": "https://github.com/ElvisKang/vue-material/issues"
28 |   },
29 |   "homepage": "https://github.com/ElvisKang/vue-material#readme",
30 |   "dependencies": {
31 |     "node-waves": "^0.7.4"
32 |   },
33 |   "devDependencies": {
34 |     "babel-core": "^5.8.25",
35 |     "babel-loader": "^5.3.2",
36 |     "babel-runtime": "^5.8.25",
37 |     "css-loader": "^0.19.0",
38 |     "style-loader": "^0.12.4",
39 |     "vue-html-loader": "^1.0.0",
40 |     "vue-loader": "^4.0.5",
41 |     "webpack": "^1.12.2",
42 |     "webpack-dev-server": "^1.12.1"
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/src/components/forms/md-range.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <p class="range-field">
 3 |         <input v-el:input :id="id" v-model="mdValue" type="range" :step="step" :value="value" :min="min" :max="max" @change="showThumb=true" @click="showThumb=true" @mouseout="showThumb=false"/>
 4 |         <span  v-show="showThumb" :class="{thumb:true,active:showThumb}" :style="thumbStyle">
 5 |             <span class="value">{{mdValue}}</span>
 6 |         </span>
 7 |     </p>
 8 | </template>
 9 | 
10 | <script type="babel">
11 | import {basicAttr,status} from '../mixins/form-mixin.js';
12 | export default {
13 |     mixins:[basicAttr,status],
14 |     data(){
15 |         return {
16 |             showThumb:false,
17 |             thumbStyle:{
18 |                 left:"0px",
19 |                 width:'30px',
20 |                 height:'30px',
21 |                 top:'-20px',
22 |                 marginLeft:"-15px"
23 |             }
24 |         }
25 |     },
26 |     props:{
27 |         id:String,
28 |         min:{
29 |             type:Number,
30 |             default:0
31 |         },
32 |         max:{
33 |             type:Number,
34 |             default:100
35 |         },
36 |         step:{
37 |             type:Number,
38 |             default:1
39 |         },
40 |         value:Number
41 |     },
42 |     watch:{
43 |         mdValue(value){
44 |             let input = this.$els.input;
45 |             let left= (value/(this.max-this.min)*input.clientWidth)+'px';
46 |             this.$set('thumbStyle.left',left); 
47 |         }
48 |     }
49 | }
50 | </script>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # THIS REPO IS DEPRECATED
 2 | 
 3 | Please Move To https://github.com/vuematerial/vue-material
 4 | 
 5 | 
 6 | <p align="center"><a href="http://elviskang.github.io/vue-material" target="_blank"><img width="150"src="https://raw.githubusercontent.com/ElvisKang/vue-material/gh-pages/static/images/materialize-150x75.png"></a></p>
 7 | 
 8 | # Introduction
 9 | 
10 | Vue-material intends to build [Materialize(0.97.2+)](http://materializecss.com/) with pure [Vue.js(1.0.0+)](http://vuejs.org/) ,which let users get rid of depending on 3rd Javascript libraries ,such as Materialize.js and Jquery.js(with plugins).In addition,I hope that you will construct a material design website easier with vue-material.
11 | 
12 | # Status
13 | 
14 | Still Under Building
15 | 
16 | # Supported Browsers:
17 | 
18 | Chrome 35+, Firefox 31+, Safari 7+, IE 10+
19 | 
20 | # Documentation
21 | 
22 | [Link](http://elviskang.github.io/vue-material/)
23 | 
24 | # Declaration & Acknowledgement
25 | 
26 | This project **doesn't** belong to Materialize. I'd like to thank Alan Chang for permitting me to use their Logo for this project. :)
27 | 
28 | # Getting Started
29 | 
30 | ## Download
31 | 
32 | Download [Materializecss](http://materializecss.com/getting-started.html) and [Vue.js(1.0.0+)](http://vuejs.org/)
33 | 
34 | ```bash
35 | npm install vue-material
36 | ```
37 | 
38 | ## Usage
39 | 
40 | ```javascript
41 | import Vue from 'vue';
42 | import Material from 'vue-material';
43 | //Globally register all of the components;
44 | Material.regAll(Vue);
45 | //or
46 | //Globally register the components that you need
47 | Material.reg(Vue,['buttons','cards']);
48 | ```
49 | 


--------------------------------------------------------------------------------
/src/components/buttons/md-fab.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div v-el:container :class="{'fixed-action-btn':true,'active':showSubs,'horizontal':horizontal}">
 3 |     <ul v-el:ul v-show="showSubs">
 4 |         <slot></slot>
 5 |     </ul>
 6 | </div>
 7 | </template>
 8 | 
 9 | <script>
10 | import {wrapChildren} from '../../utils/';
11 | export default {
12 |     data(){
13 |         return {
14 |             showSubs:false,
15 |             mainBtn:null
16 |         }
17 |     },
18 |     props:{
19 |         clickOnly:Boolean,
20 |         horizontal:Boolean
21 |     },
22 |     methods:{
23 |         toggleSubs(){
24 |             this.showSubs = !this.showSubs;
25 |         },
26 |         bindEvent(isClickOnly){
27 |             this.showSubs=false;
28 |             this.unbindEvent();
29 |             if(isClickOnly){
30 |                 this.mainBtn.addEventListener('click',this.toggleSubs);
31 |             }else{
32 |                 this.$els.container.addEventListener('mouseover',this.toggleSubs);
33 |                 this.$els.container.addEventListener('mouseout',this.toggleSubs);
34 |             }
35 |         },
36 |         unbindEvent(){
37 |             this.mainBtn.removeEventListener('click',this.toggleSubs);
38 |             this.$els.container.removeEventListener('mouseover',this.toggleSubs);
39 |             this.$els.container.removeEventListener('mouseout',this.toggleSubs);
40 |         }
41 |     },
42 |     watch:{
43 |         clickOnly(v){
44 |             this.bindEvent(v);
45 |         }
46 |     },
47 |     ready(){
48 |         let ul = this.$els.ul;
49 |         if(ul.children.length>0){
50 |             this.mainBtn = ul.children[0];
51 |             this.$el.insertBefore(this.mainBtn,ul);
52 |             wrapChildren(ul,"li");
53 |             this.bindEvent(this.clickOnly);
54 |         }
55 |     },
56 |     beforeDestroy(){
57 |         this.unbindEvent();
58 |     }
59 | }
60 | </script>
61 | 
62 | <style>
63 | .fixed-action-btn.active>ul a {
64 |     opacity: 1;
65 | }
66 | </style>


--------------------------------------------------------------------------------
/src/components/forms/date_picker/md-datepicker.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <label :for="id" class="active"><slot></slot></label>
 3 | <input :id="id" type="text" class="datepicker picker__input"  tabindex="-1">
 4 | <div class="picker" tabindex="0">
 5 |     <!-- class= picker picker- -focused picker- -opened -->
 6 |     <div class="picker__holder">
 7 |         <div class="picker__frame">
 8 |             <div class="picker__wrap">
 9 |                 <div class="picker__box">
10 |                     <md-date-display></md-date-display>
11 |                     <md-date-container></md-date-container>
12 |                 </div>
13 |                 <div class="picker__footer">
14 |                     <button class="btn-flat picker__today" type="button" @click="selectToday" :disabled="!active">
15 |                     Today
16 |                     </button>
17 |                     <button class="btn-flat picker__clear" type="button" @click="reset" :disabled="!active">
18 |                     Clear
19 |                     </button>
20 |                     <button class="btn-flat picker__close" type="button" @click="close" :disabled="!active">
21 |                     Close
22 |                     </button>
23 |                 </div>
24 |                 </div>
25 |             </div>
26 |         </div>
27 |     </div>
28 | </div>
29 | </template>
30 | //如果选择了日期，display的文字不会随着header的改变而该改变，如果未选择，display的日期会随着header改变
31 | <script type="babel">
32 |     export default {
33 |         data:{
34 |             mdValue:"",
35 |             selectedDate:null,
36 |             today:null,
37 |             displayTxt:{
38 |                 eng:{
39 |                 },
40 |                 cn:{
41 | 
42 |                 }
43 |             }
44 |         },
45 |         props:{
46 |             lang:{
47 |                 type:String,
48 |                 default:"eng"
49 |             },
50 |             valStyle:{
51 |                 type:String,
52 |                 default:"timestamp"
53 |             }
54 |         },
55 |         methods:{
56 |             numberOfDays(year, month) {
57 |                 var d = new Date(year, month, 0);
58 |                 return d.getDate();
59 |             },
60 |             setToday(){
61 |                 let now = new Date();
62 |                 this.today.month = now.getMonth();
63 |                 this.today.year= now.getFullYear();
64 |                 this.today.date=now.getDate();
65 |             }
66 |         },
67 |         created(){
68 |             this.setToday();
69 |         }
70 |     }
71 | </script>


--------------------------------------------------------------------------------
/src/vue-material.js:
--------------------------------------------------------------------------------
 1 | import badges from './components/badges/'
 2 | import buttons from './components/buttons/';
 3 | import cards from './components/cards/';
 4 | import chips from './components/chips/';
 5 | import commons from './components/commons/';
 6 | import crumb from './components/crumb';
 7 | import footer from './components/footer/';
 8 | import forms from './components/forms/';
 9 | import lists from './components/lists/';
10 | import navbar from './components/navbar/';
11 | import preloader from './components/preloader/';
12 | import sidenav from './components/sidenav/';
13 | 
14 | import directives from './directives/';
15 | 
16 | /*
17 | import pagination from './components/pagination/';
18 | import waves from 'node-waves';
19 | */
20 | 
21 | export default {
22 |     components: {
23 |         badges,
24 |         buttons,
25 |         cards,
26 |         chips,
27 |         commons,
28 |         crumb,
29 |         footer,
30 |         forms,
31 |         navbar,
32 |         sidenav,
33 |         preloader,
34 |         lists,
35 |     },
36 |     directives,
37 |     _registered: [],
38 |     regAll(Vue){
39 |         for(let comName in this.components ) {
40 |             if(this._registered.indexOf(comName) === -1){
41 |                 this._regComponent(Vue,comName);
42 |             }
43 |         }
44 |         this.regAllDirectives(Vue);
45 |     },
46 |     reg(Vue, names) {
47 |         for (let name of names) {
48 |             name = name.toLowerCase();
49 |             if ((name in this.components) && (this._registered.indexOf(name) === -1)) {
50 |                 this._regComponent(Vue, name);
51 |             }
52 |         }
53 |         this.regAllDirectives(Vue);
54 |     },
55 |     regAllDirectives(Vue){
56 |         for(let dirName in this.directives){
57 |             if(this._registered.indexOf(dirName) === -1){
58 |                 this._regDirective(Vue,dirName);
59 |             }
60 |         }
61 |     },
62 |     getConstructor(name){
63 |         let result;
64 |         if(typeof name === "string"){
65 |             
66 |         }
67 |     },
68 |     //mdXxYy=>md-xx-yy
69 |     _camel2kebab(str) {
70 |         const reg = /(?=[A-Z])/g;
71 |         return str.replace(reg, '-').toLowerCase();
72 |     },
73 |     _regComponent(Vue, name) {
74 |         let com = this.components[name];
75 |         for (let item in com) {
76 |             let regName = this._camel2kebab(item);
77 |             Vue.component(regName, com[item]);
78 |         }
79 |         this._registered.push(name);
80 |     },
81 |     _regDirective(Vue,name){
82 |         let obj = this.directives[name];
83 |         name = this._camel2kebab(name);
84 |         Vue.directive(name,obj);
85 |         this._registered.push(name);
86 |     }
87 |     
88 | }
89 | 
90 | 
91 | 


--------------------------------------------------------------------------------
/src/components/forms/date_picker/md-date-table.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="picker__calendar-container">
  3 |     <div class="picker__header">
  4 |         <div class="picker__month">
  5 |             November
  6 |         </div>
  7 |         <!-- picker 消失时，select要为disabled -->
  8 |         <select class="picker__select--year browser-default" title="Select a year" :disabled="!active">
  9 |             
 10 |         </select>
 11 |         <div class="picker__nav--prev" @click="changeMon(-1)" role="button" title="Previous month"></div>
 12 |         <div class="picker__nav--next" @click="changeMon(1)" role="button" title="Next month"></div>
 13 |     </div>
 14 | <table class="picker__table">
 15 |     <thead>
 16 |         <tr>
 17 |             <th v-for="(title,text) in weekdayText[lang]"class="picker__weekday" scope="col" :title="title">
 18 |                 {{text}}
 19 |             </th>
 20 |         </tr>
 21 |     </thead>
 22 |     <tbody>
 23 |         <template>
 24 |             
 25 |         </template>
 26 |         <tr>
 27 | 
 28 |             <td role="presentation">
 29 |                 <div class="picker__day picker__day--infocus" data-pick="1446307200000" role="gridcell" aria-label="1 November, 2015">
 30 |                     1
 31 |                 </div>
 32 |             </td>
 33 |             <td role="presentation">
 34 |                 <div class="picker__day picker__day--infocus" data-pick="1446393600000" role="gridcell" aria-label="2 November, 2015">
 35 |                     2
 36 |                 </div>
 37 |             </td>
 38 |             <td role="presentation">
 39 |                 <div class="picker__day picker__day--infocus" data-pick="1446480000000" role="gridcell" aria-label="3 November, 2015">
 40 |                     3
 41 |                 </div>
 42 |             </td>
 43 |             <td role="presentation">
 44 |                 <div class="picker__day picker__day--infocus" data-pick="1446566400000" role="gridcell" aria-label="4 November, 2015">
 45 |                     4
 46 |                 </div>
 47 |             </td>
 48 |             <td role="presentation">
 49 |                 <div class="picker__day picker__day--infocus" data-pick="1446652800000" role="gridcell" aria-label="5 November, 2015">
 50 |                     5
 51 |                 </div>
 52 |             </td>
 53 |             <td role="presentation">
 54 |                 <div class="picker__day picker__day--infocus" data-pick="1446739200000" role="gridcell" aria-label="6 November, 2015">
 55 |                     6
 56 |                 </div>
 57 |             </td>
 58 |             <td role="presentation">
 59 |                 <div class="picker__day picker__day--infocus" data-pick="1446825600000" role="gridcell" aria-label="7 November, 2015">
 60 |                     7
 61 |                 </div>
 62 |             </td>
 63 |         </tr>
 64 |         <tr>
 65 |             <td role="presentation">
 66 |                 <div class="picker__day picker__day--infocus" data-pick="1446912000000" role="gridcell" aria-label="8 November, 2015">
 67 |                     8
 68 |                 </div>
 69 |             </td>
 70 |             <td role="presentation">
 71 |                 <div class="picker__day picker__day--infocus" data-pick="1446998400000" role="gridcell" aria-label="9 November, 2015">
 72 |                     9
 73 |                 </div>
 74 |             </td>
 75 |             <td role="presentation">
 76 |                 <div class="picker__day picker__day--infocus" data-pick="1447084800000" role="gridcell" aria-label="10 November, 2015">
 77 |                     10
 78 |                 </div>
 79 |             </td>
 80 |             <td role="presentation">
 81 |                 <div class="picker__day picker__day--infocus" data-pick="1447171200000" role="gridcell" aria-label="11 November, 2015">
 82 |                     11
 83 |                 </div>
 84 |             </td>
 85 |             <td role="presentation">
 86 |                 <div class="picker__day picker__day--infocus" data-pick="1447257600000" role="gridcell" aria-label="12 November, 2015">
 87 |                     12
 88 |                 </div>
 89 |             </td>
 90 |             <td role="presentation">
 91 |                 <div class="picker__day picker__day--infocus" data-pick="1447344000000" role="gridcell" aria-label="13 November, 2015">
 92 |                     13
 93 |                 </div>
 94 |             </td>
 95 |             <td role="presentation">
 96 |                 <div class="picker__day picker__day--infocus" data-pick="1447430400000" role="gridcell" aria-label="14 November, 2015">
 97 |                     14
 98 |                 </div>
 99 |             </td>
100 |         </tr>
101 |         <tr>
102 |             <td role="presentation">
103 |                 <div class="picker__day picker__day--infocus" data-pick="1447516800000" role="gridcell" aria-label="15 November, 2015">
104 |                     15
105 |                 </div>
106 |             </td>
107 |             <td role="presentation">
108 |                 <div class="picker__day picker__day--infocus" data-pick="1447603200000" role="gridcell" aria-label="16 November, 2015">
109 |                     16
110 |                 </div>
111 |             </td>
112 |             <td role="presentation">
113 |                 <div class="picker__day picker__day--infocus" data-pick="1447689600000" role="gridcell" aria-label="17 November, 2015">
114 |                     17
115 |                 </div>
116 |             </td>
117 |             <td role="presentation">
118 |                 <div class="picker__day picker__day--infocus picker__day--selected picker__day--highlighted" data-pick="1447776000000" role="gridcell" aria-label="18 November, 2015" aria-selected="true" aria-activedescendant="true">
119 |                     18
120 |                 </div>
121 |             </td>
122 |             <td role="presentation">
123 |                 <div class="picker__day picker__day--infocus picker__day--today" data-pick="1447862400000" role="gridcell" aria-label="19 November, 2015">
124 |                     19
125 |                 </div>
126 |             </td>
127 |             <td role="presentation">
128 |                 <div class="picker__day picker__day--infocus" data-pick="1447948800000" role="gridcell" aria-label="20 November, 2015">
129 |                     20
130 |                 </div>
131 |             </td>
132 |             <td role="presentation">
133 |                 <div class="picker__day picker__day--infocus" data-pick="1448035200000" role="gridcell" aria-label="21 November, 2015">
134 |                     21
135 |                 </div>
136 |             </td>
137 |         </tr>
138 |         <tr>
139 |             <td role="presentation">
140 |                 <div class="picker__day picker__day--infocus" data-pick="1448121600000" role="gridcell" aria-label="22 November, 2015">
141 |                     22
142 |                 </div>
143 |             </td>
144 |             <td role="presentation">
145 |                 <div class="picker__day picker__day--infocus" data-pick="1448208000000" role="gridcell" aria-label="23 November, 2015">
146 |                     23
147 |                 </div>
148 |             </td>
149 |             <td role="presentation">
150 |                 <div class="picker__day picker__day--infocus" data-pick="1448294400000" role="gridcell" aria-label="24 November, 2015">
151 |                     24
152 |                 </div>
153 |             </td>
154 |             <td role="presentation">
155 |                 <div class="picker__day picker__day--infocus" data-pick="1448380800000" role="gridcell" aria-label="25 November, 2015">
156 |                     25
157 |                 </div>
158 |             </td>
159 |             <td role="presentation">
160 |                 <div class="picker__day picker__day--infocus" data-pick="1448467200000" role="gridcell" aria-label="26 November, 2015">
161 |                     26
162 |                 </div>
163 |             </td>
164 |             <td role="presentation">
165 |                 <div class="picker__day picker__day--infocus" data-pick="1448553600000" role="gridcell" aria-label="27 November, 2015">
166 |                     27
167 |                 </div>
168 |             </td>
169 |             <td role="presentation">
170 |                 <div class="picker__day picker__day--infocus" data-pick="1448640000000" role="gridcell" aria-label="28 November, 2015">
171 |                     28
172 |                 </div>
173 |             </td>
174 |         </tr>
175 |         <tr>
176 |             <td role="presentation">
177 |                 <div class="picker__day picker__day--infocus" data-pick="1448726400000" role="gridcell" aria-label="29 November, 2015">
178 |                     29
179 |                 </div>
180 |             </td>
181 |             <td role="presentation">
182 |                 <div class="picker__day picker__day--infocus" data-pick="1448812800000" role="gridcell" aria-label="30 November, 2015">
183 |                     30
184 |                 </div>
185 |             </td>
186 |             <td role="presentation">
187 |                 <div class="picker__day picker__day--outfocus" data-pick="1448899200000" role="gridcell" aria-label="1 December, 2015">
188 |                     1
189 |                 </div>
190 |             </td>
191 |             <td role="presentation">
192 |                 <div class="picker__day picker__day--outfocus" data-pick="1448985600000" role="gridcell" aria-label="2 December, 2015">
193 |                     2
194 |                 </div>
195 |             </td>
196 |             <td role="presentation">
197 |                 <div class="picker__day picker__day--outfocus" data-pick="1449072000000" role="gridcell" aria-label="3 December, 2015">
198 |                     3
199 |                 </div>
200 |             </td>
201 |             <td role="presentation">
202 |                 <div class="picker__day picker__day--outfocus" data-pick="1449158400000" role="gridcell" aria-label="4 December, 2015">
203 |                     4
204 |                 </div>
205 |             </td>
206 |             <td role="presentation">
207 |                 <div class="picker__day picker__day--outfocus" data-pick="1449244800000" role="gridcell" aria-label="5 December, 2015">
208 |                     5
209 |                 </div>
210 |             </td>
211 |         </tr>
212 |         <tr>
213 |             <td role="presentation">
214 |                 <div class="picker__day picker__day--outfocus" data-pick="1449331200000" role="gridcell" aria-label="6 December, 2015">
215 |                     6
216 |                 </div>
217 |             </td>
218 |             <td role="presentation">
219 |                 <div class="picker__day picker__day--outfocus" data-pick="1449417600000" role="gridcell" aria-label="7 December, 2015">
220 |                     7
221 |                 </div>
222 |             </td>
223 |             <td role="presentation">
224 |                 <div class="picker__day picker__day--outfocus" data-pick="1449504000000" role="gridcell" aria-label="8 December, 2015">
225 |                     8
226 |                 </div>
227 |             </td>
228 |             <td role="presentation">
229 |                 <div class="picker__day picker__day--outfocus" data-pick="1449590400000" role="gridcell" aria-label="9 December, 2015">
230 |                     9
231 |                 </div>
232 |             </td>
233 |             <td role="presentation">
234 |                 <div class="picker__day picker__day--outfocus" data-pick="1449676800000" role="gridcell" aria-label="10 December, 2015">
235 |                     10
236 |                 </div>
237 |             </td>
238 |             <td role="presentation">
239 |                 <div class="picker__day picker__day--outfocus" data-pick="1449763200000" role="gridcell" aria-label="11 December, 2015">
240 |                     11
241 |                 </div>
242 |             </td>
243 |             <td role="presentation">
244 |                 <div class="picker__day picker__day--outfocus" data-pick="1449849600000" role="gridcell" aria-label="12 December, 2015">
245 |                     12
246 |                 </div>
247 |             </td>
248 |         </tr>
249 |     </tbody>
250 | </table>
251 | </div>
252 | </template>
253 | 
254 | <script>
255 |     export default {
256 |         data(){
257 |             return {
258 |                 active:null,
259 |                 weekdayText:{
260 |                     // used:null,
261 |                     eng:{
262 |                         Sunday:'Su',
263 |                         Monday:'Mo',
264 |                         Tuesday:'Tu',
265 |                         Wednesday:'We',
266 |                         Thursday:'Th',
267 |                         Friday:'Fr',
268 |                         Saturday:'Sa',
269 |                     }
270 |                 }
271 |             }
272 |         },
273 |         props:{
274 |             lang:{
275 |                 type:String,
276 |                 default:"eng"
277 |             },
278 |             active:Boolean
279 |         },
280 |         created(){
281 |             // let weekdayText = this.weekdayText;
282 |             // weekdayText.used = weekdayText[this.lang];
283 |         },
284 |         methods:{
285 |             changeMon(value){
286 |                 this.$set('date.')
287 |             }
288 |         }
289 |     }
290 | </script>


--------------------------------------------------------------------------------