create base mdProgress component files

Author: marcosmoura

docs/src/App.vue

@@ -95,6 +95,10 @@
                   <router-link exact to="/components/menu">Menu</router-link>
                 </md-list-item>
 
+                <md-list-item class="md-inset">
+                  <router-link exact to="/components/progress">Progress</router-link>
+                </md-list-item>
+
                 <md-list-item class="md-inset">
                   <router-link exact to="/components/radio">Radio</router-link>
                 </md-list-item>

docs/src/pages/components/Progress.vue

@@ -0,0 +1,80 @@
+<template>
+  <page-content page-title="Components - Progress">
+    <docs-component>
+      <div slot="description">
+        <p>A linear progress indicator should always fill from 0% to 100% and never decrease in value. It should be represented by bars on the edge of a header or sheet that appear and disappear.</p>
+        <p>The following classes can be applied to change the color palette:</p>
+        <ul class="md-body-2">
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+        </ul>
+      </div>
+
+      <div slot="api">
+        <api-table name="md-progress">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
+
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>empty</md-table-cell>
+                <md-table-cell><code>Type</code></md-table-cell>
+                <md-table-cell>Description</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
+
+      <div slot="example">
+        <example-box card-title="Determinate">
+          <div class="progress-demo" slot="demo">
+            <md-progress></md-progress>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Indeterminate">
+          <div class="progress-demo" slot="demo">
+            <md-progress></md-progress>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
+
+<script>
+  export default {
+    data: () => ({
+
+    }),
+    methods: {
+
+    },
+    mounted() {
+      console.log(this.$material);
+    }
+  };
+</script>

docs/src/routes.js

@@ -21,6 +21,7 @@ const InkRipple = (resolve) => require(['./pages/components/InkRipple'], resolve
 const Input = (resolve) => require(['./pages/components/Input'], resolve);
 const List = (resolve) => require(['./pages/components/List'], resolve);
 const Menu = (resolve) => require(['./pages/components/Menu'], resolve);
+const Progress = (resolve) => require(['./pages/components/Progress'], resolve);
 const Radio = (resolve) => require(['./pages/components/Radio'], resolve);
 const Select = (resolve) => require(['./pages/components/Select'], resolve);
 const Sidenav = (resolve) => require(['./pages/components/Sidenav'], resolve);
@@ -146,6 +147,11 @@ const components = [
     name: 'components:menu',
     component: Menu
   },
+  {
+    path: '/components/progress',
+    name: 'components:progress',
+    component: Progress
+  },
   {
     path: '/components/radio',
     name: 'components:radio',

src/components/mdProgress/index.js

@@ -0,0 +1,8 @@
+import mdProgress from './mdProgress.vue';
+import mdProgressTheme from './mdProgress.theme';
+
+export default function install(Vue) {
+  Vue.component('md-progress', Vue.extend(mdProgress));
+
+  Vue.material.styles.push(mdProgressTheme);
+}

src/components/mdProgress/mdProgress.scss

@@ -0,0 +1,5 @@
+@import '../../core/stylesheets/variables.scss';
+
+.md-progress {
+
+}

src/components/mdProgress/mdProgress.theme

@@ -0,0 +1,5 @@
+.THEME_NAME {
+  &.md-progress {
+
+  }
+}

src/components/mdProgress/mdProgress.vue

@@ -0,0 +1,37 @@
+<template>
+  <transition name="md-progress" appear>
+    <div class="md-progress" :class="[themeClass, classes]":style="styles">
+    </div>
+  </transition>
+</template>
+
+<style lang="scss" src="./mdProgress.scss"></style>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+
+  export default {
+    props: {
+
+    },
+    mixins: [theme],
+    computed: {
+      classes() {
+        return {
+
+        };
+      },
+      styles() {
+        return {
+
+        };
+      }
+    },
+    data: () => ({
+
+    }),
+    methods: {
+
+    }
+  };
+</script>

src/index.js

@@ -16,6 +16,7 @@ import MdInputContainer from './components/mdInputContainer';
 import MdLayout from './components/mdLayout';
 import MdList from './components/mdList';
 import MdMenu from './components/mdMenu';
+import MdProgress from './components/mdProgress';
 import MdRadio from './components/mdRadio';
 import MdSelect from './components/mdSelect';
 import MdSidenav from './components/mdSidenav';
@@ -48,6 +49,7 @@ const options = {
   MdLayout,
   MdList,
   MdMenu,
+  MdProgress,
   MdRadio,
   MdSelect,
   MdSidenav,