From cf304f14eb5455ae0e9ca0fdc16868d4bf7712a0 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Thu, 29 Dec 2016 02:42:00 -0200
Subject: [PATCH 1/2] create base mdProgress component files

---
 docs/src/App.vue                           |  4 ++
 docs/src/pages/components/Progress.vue     | 80 ++++++++++++++++++++++
 docs/src/routes.js                         |  6 ++
 src/components/mdProgress/index.js         |  8 +++
 src/components/mdProgress/mdProgress.scss  |  5 ++
 src/components/mdProgress/mdProgress.theme |  5 ++
 src/components/mdProgress/mdProgress.vue   | 37 ++++++++++
 src/index.js                               |  2 +
 8 files changed, 147 insertions(+)
 create mode 100644 docs/src/pages/components/Progress.vue
 create mode 100644 src/components/mdProgress/index.js
 create mode 100644 src/components/mdProgress/mdProgress.scss
 create mode 100644 src/components/mdProgress/mdProgress.theme
 create mode 100644 src/components/mdProgress/mdProgress.vue

diff --git a/docs/src/App.vue b/docs/src/App.vue
index a41d3c8..f6fab75 100644
--- a/docs/src/App.vue
+++ b/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>
diff --git a/docs/src/pages/components/Progress.vue b/docs/src/pages/components/Progress.vue
new file mode 100644
index 0000000..fab2713
--- /dev/null
+++ b/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>
diff --git a/docs/src/routes.js b/docs/src/routes.js
index cd2c4c4..4f6f6d3 100644
--- a/docs/src/routes.js
+++ b/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',
diff --git a/src/components/mdProgress/index.js b/src/components/mdProgress/index.js
new file mode 100644
index 0000000..696e8c3
--- /dev/null
+++ b/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);
+}
diff --git a/src/components/mdProgress/mdProgress.scss b/src/components/mdProgress/mdProgress.scss
new file mode 100644
index 0000000..b1efbfc
--- /dev/null
+++ b/src/components/mdProgress/mdProgress.scss
@@ -0,0 +1,5 @@
+@import '../../core/stylesheets/variables.scss';
+
+.md-progress {
+
+}
diff --git a/src/components/mdProgress/mdProgress.theme b/src/components/mdProgress/mdProgress.theme
new file mode 100644
index 0000000..d3192a0
--- /dev/null
+++ b/src/components/mdProgress/mdProgress.theme
@@ -0,0 +1,5 @@
+.THEME_NAME {
+  &.md-progress {
+
+  }
+}
diff --git a/src/components/mdProgress/mdProgress.vue b/src/components/mdProgress/mdProgress.vue
new file mode 100644
index 0000000..8b27a3e
--- /dev/null
+++ b/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>
diff --git a/src/index.js b/src/index.js
index 0c9286d..a8d3d89 100644
--- a/src/index.js
+++ b/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,

From 4bdfcf9e08cd63fde56f79c38ee2bfe61129b24d Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Tue, 3 Jan 2017 00:10:11 -0200
Subject: [PATCH 2/2] create progress bars

---
 docs/src/pages/components/Progress.vue     | 84 +++++++++++++++++++---
 src/components/mdProgress/mdProgress.scss  | 79 ++++++++++++++++++++
 src/components/mdProgress/mdProgress.theme | 41 +++++++++++
 src/components/mdProgress/mdProgress.vue   | 25 +++----
 src/components/mdSpinner/mdSpinner.theme   |  6 +-
 src/components/mdSpinner/mdSpinner.vue     |  6 --
 6 files changed, 212 insertions(+), 29 deletions(-)

diff --git a/docs/src/pages/components/Progress.vue b/docs/src/pages/components/Progress.vue
index fab2713..f0767be 100644
--- a/docs/src/pages/components/Progress.vue
+++ b/docs/src/pages/components/Progress.vue
@@ -23,9 +23,15 @@
 
             <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-cell>md-indeterminate</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Enable the indeterminate state. Default <code>false</code></md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-progress</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Define the current progress of the progress. Default <code>0</code></md-table-cell>
               </md-table-row>
             </md-table-body>
           </md-table>
@@ -35,24 +41,56 @@
       <div slot="example">
         <example-box card-title="Determinate">
           <div class="progress-demo" slot="demo">
-            <md-progress></md-progress>
+            <div class="progress-area">
+              <md-progress :md-progress="progress" v-if="transition"></md-progress>
+              <md-progress class="md-accent" :md-progress="progress" v-if="transition"></md-progress>
+              <md-progress class="md-warn" :md-progress="progress" v-if="transition"></md-progress>
+            </div>
+
+            <md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
-
+              &lt;md-progress :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
+              &lt;md-progress class=&quot;md-accent&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
+              &lt;md-progress class=&quot;md-warn&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
             </code-block>
           </div>
         </example-box>
 
         <example-box card-title="Indeterminate">
           <div class="progress-demo" slot="demo">
-            <md-progress></md-progress>
+            <div class="progress-area">
+              <md-progress md-indeterminate v-if="transition"></md-progress>
+              <md-progress class="md-accent" md-indeterminate v-if="transition"></md-progress>
+              <md-progress class="md-warn" md-indeterminate v-if="transition"></md-progress>
+            </div>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
+              &lt;md-progress md-indeterminate&gt;&lt;/md-progress&gt;
+              &lt;md-progress class=&quot;md-accent&quot; md-indeterminate&gt;&lt;/md-progress&gt;
+              &lt;md-progress class=&quot;md-warn&quot; md-indeterminate&gt;&lt;/md-progress&gt;
+            </code-block>
+          </div>
+        </example-box>
 
+        <example-box card-title="Themes">
+          <div class="progress-demo" slot="demo">
+            <div class="progress-area">
+              <md-progress md-theme="orange" md-indeterminate v-if="transition"></md-progress>
+              <md-progress md-theme="green" :md-progress="progress" v-if="transition"></md-progress>
+              <md-progress md-theme="purple" md-indeterminate v-if="transition"></md-progress>
+            </div>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-progress md-theme=&quot;orange&quot; md-indeterminate&gt;&lt;/md-progress&gt;
+              &lt;md-progress md-theme=&quot;green&quot; :md-progress=&quot;progress&quot;&gt;&lt;/md-progress&gt;
+              &lt;md-progress md-theme=&quot;purple&quot; md-indeterminate&gt;&lt;/md-progress&gt;
             </code-block>
           </div>
         </example-box>
@@ -62,19 +100,49 @@
 </template>
 
 <style lang="scss" scoped>
+  .progress-area {
+    height: 44px;
 
+    + .md-button {
+      margin: 16px 0 0;
+    }
+  }
+
+  .md-progress {
+    margin-bottom: 16px;
+  }
 </style>
 
 <script>
   export default {
     data: () => ({
-
+      progress: 0,
+      progressInterval: null,
+      transition: true
     }),
     methods: {
+      startProgress() {
+        this.progressInterval = window.setInterval(() => {
+          this.progress += 3;
 
+          if (this.progress > 100) {
+            window.clearInterval(this.progressInterval);
+          }
+        }, 100);
+      },
+      restartProgress() {
+        this.progress = 0;
+        this.transition = false;
+
+        window.clearInterval(this.progressInterval);
+        window.setTimeout(() => {
+          this.transition = true;
+          this.startProgress();
+        }, 600);
+      }
     },
     mounted() {
-      console.log(this.$material);
+      this.startProgress();
     }
   };
 </script>
diff --git a/src/components/mdProgress/mdProgress.scss b/src/components/mdProgress/mdProgress.scss
index b1efbfc..792a9b0 100644
--- a/src/components/mdProgress/mdProgress.scss
+++ b/src/components/mdProgress/mdProgress.scss
@@ -1,5 +1,84 @@
 @import '../../core/stylesheets/variables.scss';
 
 .md-progress {
+  width: 100%;
+  height: 4px;
+  position: relative;
+  overflow: hidden;
+  transition: $swift-ease-out;
 
+  &.md-indeterminate .md-progress-track {
+    right: 0;
+
+    &:before,
+    &:after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      will-change: left, right;
+      content: '';
+    }
+
+    &:before {
+      animation: progress-indeterminate 2.3s cubic-bezier(.65, .815, .735, .395) infinite;
+    }
+
+    &:after {
+      animation: progress-indeterminate-short 2.3s cubic-bezier(.165, .84, .44, 1) infinite;
+      animation-delay: 1.15s;
+    }
+  }
+
+  &.md-progress-enter,
+  &.md-progress-leave-active {
+    opacity: 0;
+    transform: scaleY(0) translateZ(0);
+  }
+
+  &.md-progress-enter-active {
+    transform: scaleY(1) translateZ(0);
+  }
+}
+
+.md-progress-track {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  transition: $swift-ease-out;
+}
+
+@keyframes progress-indeterminate {
+  0% {
+    right: 100%;
+    left: -35%;
+  }
+
+  60% {
+    right: -100%;
+    left: 100%;
+  }
+
+  100% {
+    right: -100%;
+    left: 100%;
+  }
+}
+
+@keyframes progress-indeterminate-short {
+  0% {
+    right: 100%;
+    left: -200%;
+  }
+
+  60% {
+    right: -8%;
+    left: 107%;
+  }
+
+  100% {
+    right: -8%;
+    left: 107%;
+  }
 }
diff --git a/src/components/mdProgress/mdProgress.theme b/src/components/mdProgress/mdProgress.theme
index d3192a0..a1c3d5c 100644
--- a/src/components/mdProgress/mdProgress.theme
+++ b/src/components/mdProgress/mdProgress.theme
@@ -1,5 +1,46 @@
 .THEME_NAME {
   &.md-progress {
+    background-color: #{'PRIMARY-COLOR-0.38'};
 
+    &:not(.md-indeterminate) .md-progress-track {
+      background-color: #{'PRIMARY-COLOR'};
+    }
+
+    .md-progress-track {
+      &:after,
+      &:before {
+        background-color: #{'PRIMARY-COLOR'};
+      }
+    }
+
+    &.md-accent {
+      background-color: #{'ACCENT-COLOR-0.38'};
+
+      &:not(.md-indeterminate) .md-progress-track {
+        background-color: #{'ACCENT-COLOR'};
+      }
+
+      .md-progress-track {
+        &:after,
+        &:before {
+          background-color: #{'ACCENT-COLOR'};
+        }
+      }
+    }
+
+    &.md-warn {
+      background-color: #{'WARN-COLOR-0.38'};
+
+      &:not(.md-indeterminate) .md-progress-track {
+        background-color: #{'WARN-COLOR'};
+      }
+
+      .md-progress-track {
+        &:after,
+        &:before {
+          background-color: #{'WARN-COLOR'};
+        }
+      }
+    }
   }
 }
diff --git a/src/components/mdProgress/mdProgress.vue b/src/components/mdProgress/mdProgress.vue
index 8b27a3e..4c0a715 100644
--- a/src/components/mdProgress/mdProgress.vue
+++ b/src/components/mdProgress/mdProgress.vue
@@ -1,6 +1,7 @@
 <template>
   <transition name="md-progress" appear>
-    <div class="md-progress" :class="[themeClass, classes]":style="styles">
+    <div class="md-progress" :class="[themeClass, classes]">
+      <div class="md-progress-track" :style="styles"></div>
     </div>
   </transition>
 </template>
@@ -12,26 +13,26 @@
 
   export default {
     props: {
-
+      mdIndeterminate: Boolean,
+      mdProgress: {
+        type: Number,
+        default: 0
+      }
     },
     mixins: [theme],
     computed: {
       classes() {
         return {
-
+          'md-indeterminate': this.mdIndeterminate
         };
       },
       styles() {
-        return {
-
-        };
+        if (!this.mdIndeterminate) {
+          return {
+            width: this.mdProgress + '%'
+          };
+        }
       }
-    },
-    data: () => ({
-
-    }),
-    methods: {
-
     }
   };
 </script>
diff --git a/src/components/mdSpinner/mdSpinner.theme b/src/components/mdSpinner/mdSpinner.theme
index ad8abf4..25f5cb9 100644
--- a/src/components/mdSpinner/mdSpinner.theme
+++ b/src/components/mdSpinner/mdSpinner.theme
@@ -1,18 +1,18 @@
 .THEME_NAME {
   &.md-spinner {
     .md-spinner-path {
-      stroke: #{'PRIMARY-COLOR'}
+      stroke: #{'PRIMARY-COLOR'};
     }
 
     &.md-accent {
       .md-spinner-path {
-        stroke: #{'ACCENT-COLOR'}
+        stroke: #{'ACCENT-COLOR'};
       }
     }
 
     &.md-warn {
       .md-spinner-path {
-        stroke: #{'WARN-COLOR'}
+        stroke: #{'WARN-COLOR'};
       }
     }
   }
diff --git a/src/components/mdSpinner/mdSpinner.vue b/src/components/mdSpinner/mdSpinner.vue
index 8ef1c6d..0262f40 100644
--- a/src/components/mdSpinner/mdSpinner.vue
+++ b/src/components/mdSpinner/mdSpinner.vue
@@ -57,12 +57,6 @@
 
         return `${progress}, 200`;
       }
-    },
-    data: () => ({
-
-    }),
-    methods: {
-
     }
   };
 </script>