Repository: johnleider/vue-materials
Branch: master
Commit: e2f344e58e33
Files: 70
Total size: 53.3 KB

Directory structure:
gitextract_g08_wqlj/

├── .babelrc
├── .gitignore
├── .npmignore
├── README.md
├── build/
│   ├── release.sh
│   ├── webpack.config.js
│   └── webpack.dev.config.js
├── index.html
├── package.json
└── src/
    ├── components/
    │   ├── _index.js
    │   ├── badge.vue
    │   ├── breadcrumbs.vue
    │   ├── button-link.vue
    │   ├── button.vue
    │   ├── card.vue
    │   ├── carousel-item.vue
    │   ├── carousel.vue
    │   ├── checkbox.vue
    │   ├── chip.vue
    │   ├── collapsible.vue
    │   ├── collection-avatar.vue
    │   ├── collection-item.vue
    │   ├── collection-link.vue
    │   ├── collection.vue
    │   ├── date-input.vue
    │   ├── fab.vue
    │   ├── file-input.vue
    │   ├── footer.vue
    │   ├── functional/
    │   │   ├── _index.js
    │   │   ├── collapsible-body.js
    │   │   ├── collapsible-header.js
    │   │   ├── container.js
    │   │   ├── dropdown.js
    │   │   ├── grid.js
    │   │   └── row.js
    │   ├── icon.vue
    │   ├── material-box.vue
    │   ├── modal.vue
    │   ├── nav.vue
    │   ├── pagination-item.vue
    │   ├── pagination.vue
    │   ├── parallax.vue
    │   ├── progress-circular.vue
    │   ├── progress-linear.vue
    │   ├── radio.vue
    │   ├── range.vue
    │   ├── select.vue
    │   ├── side-nav.vue
    │   ├── slide.vue
    │   ├── slider.vue
    │   ├── switch.vue
    │   ├── tab.vue
    │   ├── tabs.vue
    │   ├── text-area.vue
    │   └── text-input.vue
    ├── directives/
    │   ├── _index.js
    │   ├── dropdown.js
    │   ├── modal.js
    │   ├── side-nav.js
    │   └── tooltip.js
    ├── index.js
    ├── mixins/
    │   ├── buttons.js
    │   ├── collection-item.js
    │   ├── counter.js
    │   ├── dropdown.js
    │   ├── is-loadable.js
    │   └── waves.js
    └── util/
        ├── dialog.js
        ├── load.js
        └── scroll-fire.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": ["es2015"]
}

================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
npm-debug.log
.idea/
dev/

================================================
FILE: .npmignore
================================================
dev/
build/
index.html

================================================
FILE: README.md
================================================
# Docs
https://vuematerials.com

# Deprecated

This project is no longer maintained, please see [Vuetify](https://github.com/vuetifyjs/vuetify)


================================================
FILE: build/release.sh
================================================
set -e
echo "Enter release version: "
read VERSION

read -p "Releasing $VERSION - are you sure (y/n)" -n 1 -r
echo #
if [[ $REPLY =~ ^[Yy]$ ]]
then
  echo "Releasing $VERSION ..."

  npm run build
  git add -A
  git commit -m "[build] $VERSION"
  npm version $VERSION --message "[release] $VERSION"

  git push
  npm publish
fi


================================================
FILE: build/webpack.config.js
================================================
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'vue-materials.min.js',
    library: 'VueMaterials',
    libraryTarget: 'umd'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          loader: 'file?name=/fonts/[name].[ext]'
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true
      }
    })
  ])
}


================================================
FILE: build/webpack.dev.config.js
================================================
var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './dev/index.js',
  output: {
    path: path.resolve(__dirname, '../dev'),
    publicPath: '/dev/',
    filename: 'dev.js'
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
  },
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules|dist/
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass']
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file',
        query: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          loader: 'file?name=/fonts/[name].[ext]'
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  devtool: '#eval-source-map'
}


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-materialize</title>
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="app">
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
    <script src="/dev/dev.js"></script>
  </body>
</html>


================================================
FILE: package.json
================================================
{
  "name": "vue-materials",
  "description": "Materialize.css components for Vue JS",
  "author": "John Leider <john.j.leider@gmail.com>",
  "version": "1.0.7-rc.7",
  "private": false,
  "main": "dist/vue-materials.min.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --host=0.0.0.0 --port=8082 --config=build/webpack.dev.config.js",
    "build": "cross-env NODE_ENV=production webpack  --progress --hide-modules --config=build/webpack.config.js"
  },
  "dependencies": {
    "vue": "^2.0.1"
  },
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "cross-env": "^1.0.6",
    "css-loader": "^0.23.1",
    "file-loader": "^0.8.4",
    "materialize-css": "^0.97.6",
    "node-sass": "^3.8.0",
    "rollup": "^0.33.0",
    "rollup-plugin-babel": "^2.6.1",
    "rollup-plugin-vue": "^2.0.1",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "uglify-js": "^2.7.0",
    "vue-hot-reload-api": "^2.0.5",
    "vue-loader": "^9.1.2",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.12.0"
  }
}


================================================
FILE: src/components/_index.js
================================================
import VFooter from './footer.vue'
import VNav from './nav.vue'
import VSideNav from './side-nav.vue'
import VBadge from './badge.vue'
import VBreadcrumbs from './breadcrumbs.vue'
import VBtn from './button.vue'
import VBtnLink from './button-link.vue'
import VCard from './card.vue'
import VCarousel from './carousel.vue'
import VCarouselItem from './carousel-item.vue'
import VCheckbox from './checkbox.vue'
import VChip from './chip.vue'
import VCollapsible from './collapsible.vue'
import VCollection from './collection.vue'
import VCollectionItem from './collection-item.vue'
import VCollectionLink from './collection-link.vue'
import VCollectionAvatar from './collection-avatar.vue'
import VDateInput from './date-input.vue'
import VFileInput from './file-input.vue'
import VIcon from './icon.vue'
import VMaterialBox from './material-box.vue'
import VModal from './modal.vue'
import VFab from './fab.vue'
import VPagination from './pagination.vue'
import VPaginationItem from './pagination-item.vue'
import VParallax from './parallax.vue'
import VProgressLinear from './progress-linear.vue'
import VProgressCircular from './progress-circular.vue'
import VRadio from './radio.vue'
import VRange from './range.vue'
import VSelect from './select.vue'
import VSlider from './slider.vue'
import VSlide from './slide.vue'
import VSwitch from './switch.vue'
import VTab from './tab.vue'
import VTabs from './tabs.vue'
import VTextArea from './text-area.vue'
import VTextInput from './text-input.vue'

export default {
    VFooter,
    VNav,
    VSideNav,
    VBadge,
    VBreadcrumbs,
    VBtn,
    VBtnLink,
    VCard,
    VCarousel,
    VCarouselItem,
    VChip,
    VCollapsible,
    VCollection,
    VCollectionItem,
    VCheckbox,
    VCollectionLink,
    VCollectionAvatar,
    VDateInput,
    VFileInput,
    VIcon,
    VMaterialBox,
    VModal,
    VFab,
    VPagination,
    VPaginationItem,
    VParallax,
    VProgressLinear,
    VProgressCircular,
    VRadio,
    VRange,
    VSelect,
    VSlider,
    VSlide,
    VSwitch,
    VTab,
    VTabs,
    VTextArea,
    VTextInput
}

================================================
FILE: src/components/badge.vue
================================================
<template>
    <span class="badge"
          :class="classes"
    >
        <slot></slot>
    </span>
</template>

<script type="text/babel">
    export default {
        props: {
            new: {
                type: Boolean,
                default: false
            }
        },

        computed: {
            classes () {
                return {
                    'new': this.new
                }
            }
        }
    }
</script>


================================================
FILE: src/components/breadcrumbs.vue
================================================
<template>
    <nav>
        <div class="nav-wrapper">
            <div class="col s12">
                <a v-for="crumb in items"
                   :href="crumb.href" 
                   class="breadcrumb"
                >
                    {{ crumb.text }}    
                </a>
                <slot></slot>
            </div>
        </div>
    </nav>
</template>

<script type="text/babel">
    export default {
        props: {
            items: {
                type: Array,
                default: () => []
            }
        }
    }
</script>


================================================
FILE: src/components/button-link.vue
================================================
<template>
    <a :class="classes"
       :href="href"
       :data-induration="induration"
       :data-outduration="outduration"
       :data-constrainwidth="constrainwidth"
       :data-hover="hover"
       :data-gutter="gutter"
       :data-beloworigin="beloworigin"
       :data-alignment="alignment"
    >
        <slot></slot>
    </a>
</template>

<script type="text/babel">
    import Buttons from '../mixins/buttons'
    import Waves from '../mixins/waves'
    import Dropdown from '../mixins/dropdown'
    
    export default {
        mixins: [
            Buttons,
            Waves,
            Dropdown
        ],

        props: {
            href: {
                type: String,
                default: '#!'
            }
        },

        computed: {
            classes () {
                return Object.assign(
                    this.buttonsMixin,
                    this.wavesMixin
                )
            }
        }
    }
</script>


================================================
FILE: src/components/button.vue
================================================
<template>
    <button :class="classes"
            :type="type"
            :data-induration="induration"
            :data-outduration="outduration"
            :data-constrainwidth="constrainwidth"
            :data-hover="hover"
            :data-gutter="gutter"
            :data-beloworigin="beloworigin"
            :data-alignment="alignment"
    >
        <slot></slot>
    </button>
</template>

<script type="text/babel">
    import Buttons from '../mixins/buttons'
    import Waves from '../mixins/waves'
    import Dropdown from '../mixins/dropdown'

    export default {
        mixins: [
            Buttons,
            Waves,
            Dropdown
        ],

        props: {
            type: {
                type: String,
                default: 'button'
            }
        },

        computed: {
            classes () {
                return Object.assign(
                    this.buttonsMixin,
                    this.wavesMixin
                )
            }
        }
    }
</script>


================================================
FILE: src/components/card.vue
================================================
<template>
    <div :class="classes">
        <slot></slot>
    </div>
</template>

<script type="text/babel">
    export default {
        props: {
            large: {
                type: Boolean,
                default: false
            },

            medium: {
                type: Boolean,
                default: false
            },

            panel: {
                type: Boolean,
                default: false
            },

            small: {
                type: Boolean,
                default: false
            }
        },

        computed: {
            classes () {
                return {
                    'card': !this.panel,
                    'card-panel': this.panel,
                    'large': this.large,
                    'medium': this.medium,
                    'small': this.small
                }
            }
        }
    }
</script>


================================================
FILE: src/components/carousel-item.vue
================================================
<template>
    <a href="#!"
       class="carousel-item"
    >
        <img :src="src">
        <slot></slot>
    </a>
</template>

<script type="text/babel">
    export default {
        props: {
            src: {
                type: String,
                required: true
            }
        }
    }
</script>


================================================
FILE: src/components/carousel.vue
================================================
<template>
    <div class="carousel"
         :class="classes"
         :style="styles"
    >
        <v-carousel-item v-for="i in items"
                       :src="i"
        ></v-carousel-item>
        <slot></slot>
    </div>
</template>

<script type="text/babel">
    import IsLoadable from '../mixins/is-loadable'

    export default {
        mixins: [
            IsLoadable
        ],
        
        props: {
            height: {
                type: Number,
                default: 300
            },

            dist: {
                type: Number,
                default: -100
            },
            
            timeConstant: {
                type: Number,
                default: 200
            },

            shift: {
                type: Number,
                default: 0
            },

            padding: {
                type: Number,
                default: 0
            },

            full_width: {
                type: Boolean,
                default: false
            },

            slider: {
                type: Boolean,
                default: false
            },

            items: {
                type: Array,
                default: () => []
            }
        },

        computed: {
            classes () {
                return {
                    'carousel-slider': this.slider
                }
            },

            styles () {
                return {
                    'height': this.height
                }
            },

            params () {
                return {
                    time_constant: this.timeConstant,
                    dist: this.dist,
                    shift: this.shift,
                    padding: this.padding,
                    full_width: this.fullWidth
                }
            }
        },

        methods: {
            init () {
                $(this.$el).carousel(this.params)
            },

            next (n = 1) {
                $(this.$el).carousel('next', [n])
                this.$emit('next')
            },

            prev (n = 1) {
                $(this.$el).carousel('prev', [n])
                this.$emit('prev')
            }
        }
    }
</script>


================================================
FILE: src/components/checkbox.vue
================================================
<template>
    <p>
      <input type="checkbox"
             :id="id || name"
             :name="name"
             :disabled="disabled"
             :class="classes"
             ref="checkbox"
      >
      <label :for="id || name">
          <slot></slot>
      </label>
    </p>
</template>

<script type="text/babel">
    export default {
        props: {
            id: String,

            name: {
                type: String,
                required: true
            },

            checked: {
                type: Boolean,
                default: false
            },

            value: {
                required: false
            },

            disabled: {
                type: Boolean,
                default: false
            },

            indeterminate: {
                type: Boolean,
                default: false
            },

            filledIn: {
                type: Boolean,
                default: false
            },

            valueV: {
                required: false
            }
        },

        computed: {
            classes () {
                return {
                    'filled-in': this.filledIn
                }
            }
        },

        watch: {
            value () {
                if (Array.isArray(this.value)) {
                    const index = this.value.indexOf(this.valueV)

                    if (index !== -1) {
                        this.$refs.checkbox.checked = true
                    } else {
                        this.$refs.checkbox.checked = false
                    }
                } else {
                    this.$refs.checkbox.checked = this.value
                }
                this.check()
            }
        },

        mounted () {
            if (this.indeterminate) {
                this.$refs.checkbox.indeterminate = true
            }

            this.check()

            const vm = this
            this.$refs.checkbox.onchange = function () {
                let value = vm.value
                if (Array.isArray(vm.value)) {
                    const index = vm.value.indexOf(vm.valueV)

                    if (index !== -1) {
                        value.splice(index, 1)
                    } else {
                        value = vm.value
                        value.push(vm.valueV)
                    }
                }

                vm.$emit('input', value)
            }
        },

        methods: {
            check () {
                if ((Array.isArray(this.value) &&
                    this.value.includes(this.valueV)) ||
                        (!Array.isArray(this.value) &&
                            this.value)
                ) {
                    this.$refs.checkbox.setAttribute('checked', true)
                }
            }
        }
    }
</script>


================================================
FILE: src/components/chip.vue
================================================
<template>
    <div class="chip"
         v-if="!remove"
    >
        <slot></slot>
        <v-icon v-if="close">close</v-icon>
    </div>
</template>

<script type="text/babel">
    import IsLoadable from '../mixins/is-loadable'

    export default {
        mixins: [
            IsLoadable
        ],

        events: {
            close () {
                this.remove = true
            }
        },

        data () {
            return {
                remove: false
            }
        },

        props: {
            close: {
                type: Boolean,
                default: false
            }
        },

        methods: {
            init () {
                if (this.remove) {
                    this.$el.addEventListener('click', () => this.$emit('close'))
                }
            }
        }
    }
</script>


================================================
FILE: src/components/collapsible.vue
================================================
<template>
    <ul class="collapsible"
        :data-collapsible="type"
        :class="classes"
    >
        <slot></slot>
    </ul>
</template>

<script type="text/babel">
    import IsLoadable from '../mixins/is-loadable'

    export default {
        mixins: [
            IsLoadable
        ],

        props: {
            collapse: {
                type: Boolean,
                default: false
            },

            expand: {
                type: Boolean,
                default: false
            },

            popout: {
                type: Boolean,
                default: false
            }
        },

        computed: {
            classes () {
                return {
                    'popout': this.popout
                }
            },

            params () {
                return {
                    accordion: this.type === 'accordion'
                }
            },

            type () {
                if (this.collapse) return 'accordion'
                if (this.expand)  return 'expandable'
            }
        },

        methods: {
            init () {
                $(this.$el).collapsible(this.params)
            }
        }
    }
</script>


================================================
FILE: src/components/collection-avatar.vue
================================================
<template>
    <li class="avatar"
        :class="classes"
    >
        <img :src="src" 
             class="circle"
        >
        <slot></slot>
        <a href="#!" 
           class="secondary-content"
        >
            <slot name="secondary"></slot>
        </a>
    </li>
</template>

<script type="text/babel">
    import CollectionItem from '../mixins/collection-item'

    export default {
        mixins: [
            CollectionItem
        ],

        props: {
            src: {
                type: String,
                required: true
            }
        },

        computed: {
            classes () {
                return this.collectionsMixin
            }
        }
    }
</script>


================================================
FILE: src/components/collection-item.vue
================================================
<template>
    <li :class="classes">
        <slot></slot>
        <a href="#!" 
           class="secondary-content"
        >
            <slot name="secondary"></slot>
        </a>
    </li>
</template>

<script type="text/babel">
    import CollectionItem from '../mixins/collection-item'

    export default {
        mixins: [
            CollectionItem
        ],

        computed: {
            classes () {
                return this.collectionsMixin
            }
        }
    }
</script>


================================================
FILE: src/components/collection-link.vue
================================================
<template>
    <a href="#!"
       :class="classes"
    >
        <slot></slot>
        <a href="#!" 
           class="secondary-content"
        >
            <slot name="secondary"></slot>
        </a>
    </a>
</template>

<script type="text/babel">
    import CollectionItem from '../mixins/collection-item'

    export default {
        mixins: [
            CollectionItem
        ],

        computed: {
            classes () {
                return this.collectionsMixin
            }
        }
    }
</script>


================================================
FILE: src/components/collection.vue
================================================
<template>
    <ul class="collection"
        :class="classes"
    >
        <slot></slot>
    </ul>
</template>

<script type="text/babel">
    export default {
        props: {
            withHeader: {
                type: Boolean,
                default: false
            }
        },

        computed: {
            classes () {
                return {
                    'with-header': this.withHeader
                }
            }
        }
    }
</script>


================================================
FILE: src/components/date-input.vue
================================================
<template>
    <input type="date" 
           class="datepicker"
    >
</template>

<script type="text/babel">
    import IsLoadable from '../mixins/is-loadable'

    export default {
        mixins: [
            IsLoadable
        ],

        props: {
            value: {
                type: String
            },
            format: {
                type: String
            }
        },

        methods: {
            init () {
                if (this.format) $(this.$el).pickadate({format: this.format})
                else $(this.$el).pickadate()

                const picker = $(this.$el).pickadate('picker')
                picker.set('select', this.value)

                const vm = this
                this.$el.onchange = function () {
                    if (vm.format)
                        vm.$emit('input', picker.get('select', vm.format))
                    else
                        vm.$emit('input', picker.get('select', 'd mmmm, yyyy'))
                }
            }
        }    
    }
</script>


================================================
FILE: src/components/fab.vue
================================================
<template>
    <div class="fixed-action-btn"
         :class="classes"
    >
        <v-btn-link large
                  floating
        >
            <v-icon>{{ icon }}</v-icon>
        </v-btn-link>
        <slot name="items"></slot>
    </div>
</template>

<script type="text/babel">
    export default {
        props: {
            icon: {
                type: String,
                required: true
            },
            
            horizontal: {
                type: Boolean,
                default: false
            },

            toggle: {
                type: Boolean,
                default: false
            }
        },

        computed: {
            classes () {
                return {
                    'click-to-toggle': this.toggle,
                    'horizontal': this.horizontal
                }
            }
        },

        methods: {
            open () {
                $(this.$el).openFAB()
                this.$emit('open')
            },

            close () {
                $(this.$el).closeFAB()
                this.$emit('close')
            }
        }
    }
</script>


================================================
FILE: src/components/file-input.vue
================================================
<template>
    <div class="file-field input-field">
        <div class="btn">
            <span>File</span>
            <input type="file"
                   :multiple="multiple"
            >
        </div>
        <div class="file-path-wrapper">
            <v-text-input class="file-path validate"></v-text-input>
        </div>
    </div>
</template>

<script type="text/babel">
    export default {
        props: {
            multiple: {
                type: Boolean,
                default: false
            }
        }
    }
</script>


================================================
FILE: src/components/footer.vue
================================================
<template>
    <footer class="page-footer">
        <slot name="content"></slot>
        <div class="footer-copyright">
            <slot name="copyright"></slot>
        </div>
    </footer>
</template>


================================================
FILE: src/components/functional/_index.js
================================================
import VRow from './row'
import VGrid from './grid'
import VContainer from './container'
import VCollapsibleHeader from './collapsible-header'
import VCollapsibleBody from './collapsible-body'
import VDropdown from './dropdown'

export default {
    VRow,
    VGrid,
    VContainer,
    VCollapsibleHeader,
    VCollapsibleBody,
    VDropdown
}


================================================
FILE: src/components/functional/collapsible-body.js
================================================
export default {
    functional: true,

    render: (h, { data, children }) => {
        if (!data.staticClass) {
            data.staticClass = ''
        }

        data.staticClass += ' collapsible-body'

        return h('div', data, children)
    }
}


================================================
FILE: src/components/functional/collapsible-header.js
================================================
export default {
    functional: true,

    render: (h, { data, children }) => {
        if (!data.staticClass) {
            data.staticClass = ''
        }

        data.staticClass += ' collapsible-header'

        return h('div', data, children)
    }
}


================================================
FILE: src/components/functional/container.js
================================================
export default {
    functional: true,

    render: (h, { data, children }) => {
        data.staticClass = data.staticClass || ''
        data.staticClass += ' container'

        return h('div', data, children)
    }
}


================================================
FILE: src/components/functional/dropdown.js
================================================
export default {
    functional: true,

    render: (h, { data, children }) => {
        if (!data.staticClass) {
            data.staticClass = ''
        }

        data.staticClass += ' dropdown-content'

        return h('ul', data, children)
    }
}


================================================
FILE: src/components/functional/grid.js
================================================
export default {
    functional: true,

    render: (h, { data, children }) => {
        let attrs = Object.keys(data.attrs)
        attrs.unshift('col')
        data.attrs = {}
        data.attrs.class = attrs.join(' ')

        return h('div', data, children)
    }
}


================================================
FILE: src/components/functional/row.js
================================================
export default {
    functional: true,

    render: (h, { data, children }) => {
        data.staticClass = data.staticClass || ''
        data.staticClass += ' row'

        return h('div', data, children)
    }
}


================================================
FILE: src/components/icon.vue
================================================
<template>
    <i class="material-icons"
       :class="classes"
    >
        <slot></slot>
    </i>
</template>

<script type="text/babel">
    export default {
        props: {
            tiny: {
                type: Boolean,
                default: false
            },
            
            small: {
                type: Boolean,
                default: false
            },
            
            medium: {
                type: Boolean,
                default: false
            },

            large: {
                type: Boolean,
                default: false
            },

            prefix: {
                type: Boolean,
                default: false
            },

            right: {
                type: Boolean,
                default: false
            },

            left: {
                type: Boolean,
                default: false
            }
        },

        computed: {
            classes () {
                return {
                    'tiny': this.tiny,
                    'small': this.small,
                    'medium': this.medium,
                    'large': this.large,
                    'prefix': this.prefix,
                    'right': this.right,
                    'left': this.left
                }
            }
        }
    }
</script>


================================================
FILE: src/components/material-box.vue
================================================
<template>
    <img class="materialboxed" 
         :width="width"
         :src="src"
         :data-caption="caption"
    >
</template>

<script type="text/babel">
    import IsLoadable from '../mixins/is-loadable'

    export default {
        mixins: [
            IsLoadable
        ],

        props: {
            caption: {
                type: [Boolean, String],
                default: false
            },

            src: {
                type: String,
                required: true
            },

            width: {
                type: [Boolean, Number, String],
                default: '100%'
            }
        },

        methods: {
            init () {
                $(this.$el).materialbox()
            }
        }
    }
</script>


================================================
FILE: src/components/modal.vue
================================================
<template>
    <div :id="id" 
         :class="classes"
         class="modal"
    >
        <div class="modal-content">
            <slot name="content"></slot>
        </div>
        <div class="modal-footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script type="text/babel">
    export default {
        props: {
            bottomSheet: {
                type: Boolean,
                default: false
            },

            id: {
                type: String,
                required: true
            },

            fixedFooter: {
                type: Boolean,
                default: false
            },

            params: {
                type: Object,
                default: () => {}
            }
        },

        computed: {
            classes () {
                return {
                    'bottom-sheet': this.bottomSheet,
                    'modal-fixed-footer': this.fixedFooter
                }
            }
        },

        methods: {
            close () {
                $(this.$el).closeModal()
                this.$emit('close')
            },
            
            open () {
                $(this.$el).openModal()
                this.$emit('open')
            }
        }
    }
</script>


================================================
FILE: src/components/nav.vue
================================================
<template>
    <div :class="{ 'navbar-fixed': fixed }">
        <nav :class="[navClass]">
            <div class="nav-wrapper">
                <slot name="logo"></slot>
                <slot></slot>
                <slot name="side-nav"></slot>
            </div>
        </nav>
    </div>
</template>

<script type="text/babel">
    export default {
        props: {
            navClass: {
                type: String,
                default: ''
            },

            fixed: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

================================================
FILE: src/components/pagination-item.vue
================================================
<template>
    <li :class="classes"
        @click.prevent="click"
    >
        <a href="#!">
            <slot></slot>
        </a>
    </li>
</template>

<script type="text/babel">
    export default {
        props: {
            active: {
                type: Boolean,
                default: false
            },

            color: {
                type: String,
                default: ''
            },

            disabled: {
                type: Boolean,
                default: false
            },

            waves: {
                type: Boolean,
                default: false
            }
        },

        computed: {
            classes () {
                return {
                    'active': this.active,
                    [this.color]: this.active,
                    'disabled': this.disabled,
                    'waves-effect': this.waves
                }
            }
        },

        methods: {
            click () {
                if (!this.disabled) {
                    this.$emit('click')
                }
            }
        }
    }
</script>


================================================
FILE: src/components/pagination.vue
================================================
<template>
    <ul class="pagination">
        <v-pagination-item :disabled="value === 1"
                         @click="prev"
        >
            <i class="material-icons">chevron_left</i>
        </v-pagination-item>
        <v-pagination-item v-if="length > 0"
                         v-for="n in length"
                         :active="value === n"
                         :waves="waves"
                         :color="color"
                         @click="page(n)"
        >
            {{ n }}
        </v-pagination-item>
        <v-pagination-item :disabled="value === length"
                         @click="next"
        >
            <i class="material-icons">chevron_right</i>
        </v-pagination-item>
    </ul>
</template>

<script type="text/babel">
    export default {
        props: {
            active: {
                type: Boolean,
                default: false
            },

            value: {
                type: [Number, String],
                default: 0
            },

            color: {
                type: String,
                default: ''
            },

            length: {
                type: Number,
                default: 0
            },

            waves: {
                type: Boolean,
                default: false
            }
        },

        methods: {
            next () {
                this.$emit('input', this.value + 1)
            },

            page (n) {
                this.$emit('input', n)
            },

            prev () {
                this.$emit('input', this.value - 1)
            }
        }
    }
</script>


================================================
FILE: src/components/parallax.vue
================================================
<template>
    <div class="parallax-container"
         :style="style"
    >
        <div class="parallax">
            <img :src="src">
        </div>
        <slot></slot>
    </div>
</template>

<script type="text/babel">
    import IsLoadable from '../mixins/is-loadable'

    export default {
        mixins: [
            IsLoadable
        ],

        props: {
            height: {
                type: Number,
                default: 500
            },

            src: {
                type: String,
                required: true
            }
        },

        computed: {
            style () {
                return {
                    height: `${this.height}px`
                }
            }
        },

        methods: {
            init () {
                $('.parallax').parallax()
            }
        }
    }
</script>


================================================
FILE: src/components/progress-circular.vue
================================================
<template>
    <div class="preloader-wrapper"
         :class="wrapper_classes"
    >
        <div class="spinner-layer"
             :class="classes"
        >
            <div class="circle-clipper left">
                <div class="circle"></div>
            </div>
            <div class="gap-patch">
                <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
                <div class="circle"></div>
            </div>
        </div>
    </div>
</template>

<script type="text/babel">
    export default {
        props: {
            active: {
                type: Boolean,
                default: false
            },

            blue: {
                type: Boolean,
                default: false
            },

            blueFlash: {
                type: Boolean,
                default: false
            },

            green: {
                type: Boolean,
                default: false
            },

            greenFlash: {
                type: Boolean,
                default: false
            },

            small: {
                type: Boolean,
                default: false
            },

            large: {
                type: Boolean,
                default: false
            },

            red: {
                type: Boolean,
                default: false
            },

            redFlash: {
                type: Boolean,
                default: false
            },

            yellow: {
                type: Boolean,
                default: false
            },

            yellowFlash: {
                type: Boolean,
                default: false
            }
        },

        computed: {
            classes () {
                return {
                    'spinner-blue-only': this.blue,
                    'spinner-red-only': this.red,
                    'spinner-green-only': this.green,
                    'spinner-yellow-only': this.yellow,
                    'spinner-blue': this.blueFlash,
                    'spinner-red': this.redFlash,
                    'spinner-green': this.greenFlash,
                    'spinner-yellow': this.yellowFlash
                }
            },

            wrapper_classes () {
                return {
                    'active': this.active,
                    'small': this.small,
                    'large': this.large
                }
            }
        }
    }
</script>


================================================
FILE: src/components/progress-linear.vue
================================================
<template>
    <div class="progress">
        <div :class="classes" 
             :style="style"
        ></div>
    </div>
</template>

<script type="text/babel">
    export default {
        props: {
            determinate: {
                type: Boolean,
                default: false
            },

            indeterminate: {
                type: Boolean,
                default: false
            },

            value: {
                type: [String, Number]
            },

            width: {
                type: [String, Number]
            }
        },

        computed: {
            classes () {
                return {
                    'determinate': this.determinate,
                    'indeterminate': this.indeterminate
                }
            },

            style () {
                if (!this.width && !this.value) {
                    return {}
                }

                const value = this.value ? this.value : this.width

                return {
                    'width': value
                }
            }
        }
    }
</script>


================================================
FILE: src/components/radio.vue
================================================
<template>
    <p>
      <input type="radio"
             :id="id"
             :name="name"
             :disabled="disabled"
             :class="classes"
             :value="val"
             ref="radio"
      >
      <label :for="id">
          <slot></slot>
      </label>
    </p>
</template>

<script type="text/babel">
    export default {
        props: {
            id: {
                type: String,
                required: true
            },

            name: {
                type: String
            },

            checked: {
                type: Boolean,
                default: false
            },

            val: {
                type: [String, Number]
            },

            value: {
                type: [String, Number]
            },

            disabled: {
                type: Boolean,
                default: false
            },

            withGap: {
                type: Boolean,
                default: false
            }
        },

        watch: {
            value () {
                this.$refs.radio.checked = this.value == this.val
            }
        },

        computed: {
            classes () {
                return {
                    'with-gap': this.withGap
                }
            }
        },

        mounted () {
            this.$refs.radio.checked = this.$refs.radio.value == this.value || this.checked

            const vm = this
            this.$refs.radio.onchange = function () {
                vm.$emit('input', this.value)
            }
        }
    }
</script>


================================================
FILE: src/components/range.vue
================================================
<template>
    <p class="range-field">
        <input type="range"
               :min="min"
               :max="max"
               :value="value"
               ref="range"
        >
    </p>
</template>

<script type="text/babel">
    export default {
        props: {
            max: {
                type: [String, Number],
                default: 100
            },

            min: {
                type: [String, Number],
                default: 0
            },

            value: {
                type: [String, Number]
            }
        },

        mounted () {
            const vm = this
            this.$refs.range.onchange = function () {
                vm.$emit('input', this.value)
            }
        }
    }
</script>


================================================
FILE: src/components/select.vue
================================================
<template>
    <select v-model="model" v-bind:multiple="multiple">
        <option value=""
                disabled
        >{{ selectText }}</option>
        <option v-for="item in items"
                v-bind:value="item.id"
                v-text="item[textField]"
        ></option>
        <slot></slot>
    </select>
</template>

<script type="text/babel">
    import IsLoadable from '../mixins/is-loadable'

    export default {
        props: {
            items: {
                type: Array,
                default: () => []
            },
            multiple: {
                type: Boolean,
                default: false
            },
            selectText: {
                type: String,
                default: 'Choose your options'
            },
            value: {
                default: null,
                required: false
            },
            textField: {
                type: String,
                default: 'text'
            }
        },

        watch: {
            items () {
                this.$el.removeAttribute('onchange')
                this.$nextTick(this.init)
            },
            value () {
                this.$el.removeAttribute('onchange')
                this.$nextTick(this.init)
            }
        },

        computed: {
            model () {
                if (this.multiple && !this.value) {
                    return []
                }

                return this.value
            }
        },

        mixins: [
            IsLoadable
        ],

        methods: {
            init () {
                $(this.$el).material_select()

                const vm = this
                this.$el.onchange = function () {
                    if (!this.multiple) {
                        vm.$emit('input', this.value)
                    } else {
                        vm.multi(this, vm)
                    }
                }
            },

            multi (context, vm) {
                const siblings = [...vm.$el.previousSibling.getElementsByClassName('active')].map(i => {
                    return i.getElementsByTagName('label')[0].nextSibling.nodeValue
                })

                const options = [...context.getElementsByTagName('option')]
                let array = []
                
                siblings.forEach(i => {
                    const option = options.find(j => j.textContent == i)
                    
                    if (option) {
                        array.push(option.value)
                    }
                })

                vm.$emit('input', array)
            }
        }
    }
</script>


================================================
FILE: src/components/side-nav.vue
================================================
<template>
    <ul :id="id" 
        :class="options"
        class="side-nav"
    >
        <slot></slot>
    </ul>
</template>

<script type="text/babel">
    export default {
        props: {
            fixed: {
                type: Boolean,
                default: false
            },

            id: {
                type: String,
                required: true
            }
        },

        computed: {
            options () {
                return {
                    'fixed': this.fixed
                }
            }
        }
    }
</script>


================================================
FILE: src/components/slide.vue
================================================
<template>
    <li>
        <img :src="src">
        <div class="caption"
             :class="classes"
        >
            <slot></slot>
        </div>
    </li>
</template>

<script type="text/babel">
    export default {
        props: {
            center: {
                type: Boolean,
                default: false
            },

            left: {
                type: Boolean,
                default: false
            },

            right: {
                type: Boolean,
                default: false
            },

            src: {
                type: String,
                required: true
            }
        },

        computed: {
            classes () {
                return {
                    'left-align': this.left,
                    'center-align': this.center,
                    'right-align': this.right
                }
            }
        }
    }
</script>


================================================
FILE: src/components/slider.vue
================================================
<template>
    <div class="slider"
         :class="classes"
    >
        <ul class="slides">
            <slot></slot>
        </ul>
    </div>
</template>

<script type="text/babel">
    import IsLoadable from '../mixins/is-loadable'

    export default {
        mixins: [
            IsLoadable
        ],

        props: {
            fullWidth: {
                type: Boolean,
                default: false
            },

            indicators: {
                type: Boolean,
                default: true
            },

            height: {
                type: Number,
                default: 400
            },

            transition: {
                type: Number,
                default: 500
            },

            interval: {
                type: Number,
                default: 6000
            }
        },

        computed: {
            classes () {
                return {
                    'fullscreen': this.fullWidth
                }
            },

            params () {
                return {
                    full_width: this.fullWidth,
                    indicators: this.indicators,
                    height: this.height,
                    transition: this.transition,
                    interval: this.interval
                }
            }
        },

        methods: {
            init () {
                $(this.$el).slider(this.params)
            },

            pause () {
                $(this.$el).slider('pause')
                this.$emit('pause')
            },

            start () {
                $(this.$el).slider('start')
                this.$emit('start')
            },

            next () {
                $(this.$el).slider('next')
                this.$emit('next')
            },

            prev () {
                $(this.$el).slider('prev')
                this.$emit('prev')
            }
        }
    }
</script>


================================================
FILE: src/components/switch.vue
================================================
<template>
    <div class="switch">
        <label>
            {{ off }}
            <input type="checkbox"
                   ref="checkbox"
                   :name="name"
            >
            <span class="lever"></span>
            {{ on }}
        </label>
    </div>
</template>

<script type="text/babel">
    export default {
        props: {
            off: {
                type: String,
                default: 'Off'
            },

            on: {
                type: String,
                default: 'On'
            },

            name: String,

            checked: {
                type: Boolean,
                default: false
            },

            value: {
                type: Boolean
            }
        },

        mounted () {
            if (this.value || this.checked) {
                this.$refs.checkbox.checked = true
            }

            const vm = this
            this.$el.onchange = function () {
                vm.$emit('input', vm.$refs.checkbox.checked)
            }
        }
    }
</script>


================================================
FILE: src/components/tab.vue
================================================
<template>
    <li class="tab col"
        :class="{ 'disabled': this.disabled }"
    >
        <a :href="target"
           :class="classes"
        >
            <slot></slot>
        </a>
    </li>
</template>

<script type="text/babel">
    export default {
        props: {
            active: {
                type: Boolean,
                default: false
            },

            target: {
                type: String,
                required: true
            }
        },

        computed: {
            classes () {
                return {
                    'active': this.active
                }
            }
        }
    }
</script>


================================================
FILE: src/components/tabs.vue
================================================
<template>
    <ul class="tabs">
        <slot></slot>
    </ul>
</template>

<script type="text/babel">
    import IsLoadable from '../mixins/is-loadable'

    export default {
        mixins: [
            IsLoadable
        ],

        props: {
            selected: {
                type: String,
                default: ''
            }
        },

        methods: {
            init () {
                if (!this.selected) {
                    $(this.$el).tabs()
                } else {
                    $(this.$el).tabs('select_tab', this.selected)
                }
            }
        }
    }
</script>


================================================
FILE: src/components/text-area.vue
================================================
<template>
    <textarea class="materialize-textarea"
              :length="length"
              @input="$emit('input', $event.target.value)"
    >
        <slot></slot>
    </textarea>
</template>

<script type="text/babel">
    import Counter from '../mixins/counter'

    export default {
        mixins: [
            Counter
        ]
    }
</script>


================================================
FILE: src/components/text-input.vue
================================================
<template>
    <input class="validate"
           type="text"
           :length="length"
           :value="value"
           @input="$emit('input', $event.target.value)"
    >
</template>

<script type="text/babel">
    import Counter from '../mixins/counter'

    export default {
        props: ['value'],

        mixins: [
            Counter
        ]
    }
</script>


================================================
FILE: src/directives/_index.js
================================================
import Dropdown from './dropdown'
import Modal from './modal'
import SideNav from './side-nav'
import Tooltip from './tooltip'

export default {
    Dropdown,
    Modal,
    SideNav,
    Tooltip
}


================================================
FILE: src/directives/dropdown.js
================================================
import Load from '../util/load'

export default {
    bind (el, binding, vnode) {
        Load.call(vnode.context, () => {
            const params = binding.value || {}

            el.setAttribute('data-activates', binding.arg || params.value)
            $(el).dropdown(params)
        })
    }
}


================================================
FILE: src/directives/modal.js
================================================
import Load from '../util/load'

export default {
    bind (el, binding, vnode) {
        Load.call(vnode.context, () => {
            const params = binding.value || {}
            if (el.nodeName === 'button') {
                el.setAttribute('data-target', binding.arg || params.value)
            } else {
                el.setAttribute('href', `#${binding.arg || params.value}`)
            }
            
            $(`#${binding.arg || params.value}`).modal()
        })
    }
}


================================================
FILE: src/directives/side-nav.js
================================================
import Load from '../util/load'

export default {
    bind (el, binding, vnode) {
        Load.call(vnode.context, () => {
            el.setAttribute('data-activates', binding.arg)
            $(el).sideNav(binding.value || {})
        })
    }
}


================================================
FILE: src/directives/tooltip.js
================================================
import Load from '../util/load'

const tooltip = (el, binding, vnode) => {
    const delay = typeof binding.modifiers !== 'undefined'
        ? Object.keys(binding.modifiers)[0]
        : 50

    el.classList.add('tooltipped')
    el.setAttribute('data-position', binding.arg)
    el.setAttribute('data-delay', delay)
    el.setAttribute('data-tooltip', binding.expression.replace(/\'/g, ''))

    Load.call(vnode.context, () => $(el).tooltip())
} 

export default {
    bind (el, binding, vnode) {
        tooltip(el, binding, vnode)
    },

    postupdate (el, binding, vnode) {
        tooltip(el, binding, vnode)
    }
}


================================================
FILE: src/index.js
================================================
import Components from './components/_index'
import Directives from './directives/_index'
import Functional from './components/functional/_index'
import Dialog from './util/dialog'
import ScrollFire from './util/scroll-fire'

function plugin(Vue) {
    if (plugin.installed) return

    for (let key in Components) {
        Vue.component(key, Components[key])
    }
    
    for (let key in Functional) {
        Vue.component(key, Functional[key])
    }

    for (let key in Directives) {
        Vue.directive(key, Directives[key])
    }

    Vue.dialog = Dialog
    Vue.scrollFire = ScrollFire

    Object.defineProperties(Vue.prototype, {
        $dialog: {
            get: () => Vue.dialog.bind(this)
        },

        $scrollFire: {
            get: () => Vue.scrollFire.bind(this)
        }
    })
}

if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(plugin);
}

export default plugin


================================================
FILE: src/mixins/buttons.js
================================================
export default {
    props: {
        disabled: {
            type: Boolean,
            default: false
        },

        flat: {
            type: Boolean,
            default: false
        },

        floating: {
            type: Boolean,
            default: false
        },

        large: {
            type: Boolean,
            default: false
        },

        modal: {
            type: Boolean,
            default: false
        }
    },

    computed: {
        buttonsMixin () {
            return {
                'btn': !this.flat,
                'btn-floating': this.floating,
                'btn-large': this.large,
                'btn-flat': this.flat,
                'modal-action modal-close': this.modal,
                'disabled': this.disabled
            }
        }
    }
}


================================================
FILE: src/mixins/collection-item.js
================================================
export default {
    props: {
        active: {
            type: Boolean,
            default: false
        },

        dismissable: {
            type: Boolean,
            default: false
        },

        header: {
            type: Boolean,
            default: false
        }
    },

    computed: {
        collectionsMixin () {
            return {
                'active': this.active,
                'dismissable': this.dismissable,
                'collection-item': !this.header,
                'collection-header': this.header
            }
        }
    }
}


================================================
FILE: src/mixins/counter.js
================================================
import Load from '../util/load'

export default {
    props: {
        length: {
            type: [Boolean, Number, String],
            default: false
        }
    },

    mounted () {
        Load.call(this, () => $(this.$el).characterCounter())
    },

    postupdate () {
        Load.call(this, () => $(this.$el).characterCounter())
    }
}


================================================
FILE: src/mixins/dropdown.js
================================================
export default {
    props: {
        induration: {
            type: Number,
            default: 300
        },

        outduration: {
            type: Number,
            default: 225
        },

        constrainwidth: {
            type: Boolean,
            default: true
        },

        hover: {
            type: Boolean,
            default: false
        },

        gutter: {
            type: Number,
            default: 0
        },

        beloworigin: {
            type: Boolean,
            default: false
        },

        alignment: {
            type: String,
            default: 'left'
        }
    }
}

================================================
FILE: src/mixins/is-loadable.js
================================================
import Load from '../util/load'

export default {
    mounted () {
        Load.call(this, () => this.init())
    }
}


================================================
FILE: src/mixins/waves.js
================================================
export default {
    props: {
        wavesCircle: {
            type: Boolean,
            default: false
        },

        wavesLight: {
            type: Boolean,
            default: false
        },

        wavesOrange: {
            type: Boolean,
            default: false
        },

        wavesPurple: {
            type: Boolean,
            default: false
        },

        wavesGreen: {
            type: Boolean,
            default: false
        },

        wavesTeal: {
            type: Boolean,
            default: false
        },

        wavesRed: {
            type: Boolean,
            default: false
        },

        wavesYellow: {
            type: Boolean,
            default: false
        }
    },

    computed: {
        wavesMixin () {
            return {
                'waves-effect waves-light': this.wavesLight,
                'waves-effect waves-red': this.wavesRed,
                'waves-effect waves-yellow': this.wavesYellow,
                'waves-effect waves-orange': this.wavesOrange,
                'waves-effect waves-purple': this.wavesPurple,
                'waves-effect waves-green': this.wavesGreen,
                'waves-effect waves-teal': this.wavesTeal,
                'waves-circle': this.wavesCircle
            }
        }
    }
}


================================================
FILE: src/util/dialog.js
================================================
export default function Dialog(message, duration = 4000, rounded, cb) {
    if (typeof rounded === 'function') {
        cb = rounded
        rounded = ''
    }
    
    Materialize.toast(message, duration, rounded, cb)
}


================================================
FILE: src/util/load.js
================================================
export default function (cb) {
    if (document.readyState !== 'loading') {
        this.$nextTick(() => cb())
    } else {
        document.addEventListener('DOMContentLoaded', () => cb())
    }
}


================================================
FILE: src/util/scroll-fire.js
================================================
export default function ScrollFire(options) {
    Materialize.scrollFire(options)
}