From 95272db85f2c8f4be3442c1545f74bb2e854d1d1 Mon Sep 17 00:00:00 2001
From: "TECNOSYLVA\\fgarcia" <fernando.garcia@xeridia.com>
Date: Tue, 21 Feb 2017 17:15:07 +0100
Subject: [PATCH 1/7] Added new component, mdOnboarding

---
 docs/src/App.vue                              |   4 +
 docs/src/pages/components/Onboarding.vue      |  69 ++++++
 docs/src/routes.js                            |   6 +
 src/components/mdOnboarding/index.js          |  10 +
 src/components/mdOnboarding/mdBoard.vue       | 105 +++++++++
 src/components/mdOnboarding/mdOnboarding.scss | 137 +++++++++++
 .../mdOnboarding/mdOnboarding.theme           |  94 ++++++++
 src/components/mdOnboarding/mdOnboarding.vue  | 222 ++++++++++++++++++
 src/index.js                                  |   2 +
 9 files changed, 649 insertions(+)
 create mode 100644 docs/src/pages/components/Onboarding.vue
 create mode 100644 src/components/mdOnboarding/index.js
 create mode 100644 src/components/mdOnboarding/mdBoard.vue
 create mode 100644 src/components/mdOnboarding/mdOnboarding.scss
 create mode 100644 src/components/mdOnboarding/mdOnboarding.theme
 create mode 100644 src/components/mdOnboarding/mdOnboarding.vue

diff --git a/docs/src/App.vue b/docs/src/App.vue
index 4e3a9c8..56d6fb0 100644
--- a/docs/src/App.vue
+++ b/docs/src/App.vue
@@ -99,6 +99,10 @@
                   <router-link exact to="/components/menu">Menu</router-link>
                 </md-list-item>
 
+                <md-list-item class="md-inset">
+                  <router-link exact to="/components/onboarding">Onboarding</router-link>
+                </md-list-item>
+
                 <md-list-item class="md-inset">
                   <router-link exact to="/components/progress">Progress</router-link>
                 </md-list-item>
diff --git a/docs/src/pages/components/Onboarding.vue b/docs/src/pages/components/Onboarding.vue
new file mode 100644
index 0000000..541b213
--- /dev/null
+++ b/docs/src/pages/components/Onboarding.vue
@@ -0,0 +1,69 @@
+<template>
+  <page-content page-title="Components - Onboarding">
+    <docs-component>
+      <div slot="description">
+        <p></p>
+        <ul class="md-body-2">
+          <li><code>md-primary</code></li>
+          <li><code>md-warn</code></li>
+        </ul>
+      </div>
+
+      <div slot="api">
+        <api-table name="md-onboarding">
+          <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>v-model</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>A required model object to bind the value.</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
+
+      <div slot="example">
+        <example-box card-title="Basic">
+          <div slot="demo">
+            <md-onboarding :md-dynamic-height="false">
+              <md-board id="movies" md-label="Movies">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
+              </md-board>
+
+              <md-board id="music" md-label="Music">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
+              </md-board>
+
+              <md-board id="books" md-label="Books">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-board>
+
+              <md-board id="pictures" md-label="Pictures" md-tooltip="This is the pictures board!">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-board>
+            </md-onboarding>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<script>
+</script>
diff --git a/docs/src/routes.js b/docs/src/routes.js
index 4f220ea..ac0d10e 100644
--- a/docs/src/routes.js
+++ b/docs/src/routes.js
@@ -21,6 +21,7 @@ const InkRipple = (r) => require.ensure([], () => r(require('./pages/components/
 const Input = (r) => require.ensure([], () => r(require('./pages/components/Input')), 'input');
 const List = (r) => require.ensure([], () => r(require('./pages/components/List')), 'list');
 const Menu = (r) => require.ensure([], () => r(require('./pages/components/Menu')), 'menu');
+const Onboarding = (r) => require.ensure([], () => r(require('./pages/components/Onboarding')), 'onboarding');
 const Progress = (r) => require.ensure([], () => r(require('./pages/components/Progress')), 'progress');
 const Radio = (r) => require.ensure([], () => r(require('./pages/components/Radio')), 'radio');
 const Select = (r) => require.ensure([], () => r(require('./pages/components/Select')), 'select');
@@ -148,6 +149,11 @@ const components = [
     name: 'components:menu',
     component: Menu
   },
+  {
+    path: '/components/onboarding',
+    name: 'components:onboarding',
+    component: Onboarding
+  },
   {
     path: '/components/progress',
     name: 'components:progress',
diff --git a/src/components/mdOnboarding/index.js b/src/components/mdOnboarding/index.js
new file mode 100644
index 0000000..0791a01
--- /dev/null
+++ b/src/components/mdOnboarding/index.js
@@ -0,0 +1,10 @@
+import mdOnboarding from './mdOnboarding.vue';
+import mdBoard from './mdBoard.vue';
+import mdOnboardingTheme from './mdOnboarding.theme';
+
+export default function install(Vue) {
+  Vue.component('md-onboarding', mdOnboarding);
+  Vue.component('md-board', mdBoard);
+
+  Vue.material.styles.push(mdOnboardingTheme);
+}
diff --git a/src/components/mdOnboarding/mdBoard.vue b/src/components/mdOnboarding/mdBoard.vue
new file mode 100644
index 0000000..a54cfb9
--- /dev/null
+++ b/src/components/mdOnboarding/mdBoard.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="md-tab" :id="tabId" :style="styles">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  import uniqueId from '../../core/utils/uniqueId';
+  import getClosestVueParent from '../../core/utils/getClosestVueParent';
+
+  export default {
+    props: {
+      id: [String, Number],
+      mdLabel: [String, Number],
+      mdIcon: String,
+      mdActive: Boolean,
+      mdDisabled: Boolean,
+      mdTooltip: String,
+      mdTooltipDelay: {
+        type: String,
+        default: '0'
+      },
+      mdTooltipDirection: {
+        type: String,
+        default: 'bottom'
+      }
+    },
+    data() {
+      return {
+        mounted: false,
+        tabId: this.id || 'tab-' + uniqueId(),
+        width: '0px',
+        left: '0px'
+      };
+    },
+    watch: {
+      mdActive() {
+        this.updateTabData();
+      },
+      mdDisabled() {
+        this.updateTabData();
+      },
+      mdIcon() {
+        this.updateTabData();
+      },
+      mdLabel() {
+        this.updateTabData();
+      },
+      mdTooltip() {
+        this.updateTabData();
+      },
+      mdTooltipDelay() {
+        this.updateTabData();
+      },
+      mdTooltipDirection() {
+        this.updateTabData();
+      }
+    },
+    computed: {
+      styles() {
+        return {
+          width: this.width,
+          left: this.left
+        };
+      }
+    },
+    methods: {
+      getTabData() {
+        return {
+          id: this.tabId,
+          label: this.mdLabel,
+          icon: this.mdIcon,
+          active: this.mdActive,
+          disabled: this.mdDisabled,
+          tooltip: this.mdTooltip,
+          tooltipDelay: this.mdTooltipDelay,
+          tooltipDirection: this.mdTooltipDirection,
+          ref: this
+        };
+      },
+      updateTabData() {
+        this.parentTabs.updateTab(this.getTabData());
+      }
+    },
+    mounted() {
+      let tabData = this.getTabData();
+
+      this.parentTabs = getClosestVueParent(this.$parent, 'md-tabs');
+
+      if (!this.parentTabs) {
+        throw new Error('You must wrap the md-tab in a md-tabs');
+      }
+
+      this.mounted = true;
+      this.parentTabs.updateTab(tabData);
+
+      if (this.mdActive) {
+        this.parentTabs.setActiveTab(tabData);
+      }
+    },
+    beforeDestroy() {
+      this.parentTabs.unregisterTab(this.getTabData());
+    }
+  };
+</script>
diff --git a/src/components/mdOnboarding/mdOnboarding.scss b/src/components/mdOnboarding/mdOnboarding.scss
new file mode 100644
index 0000000..b842b6f
--- /dev/null
+++ b/src/components/mdOnboarding/mdOnboarding.scss
@@ -0,0 +1,137 @@
+@import '../../core/stylesheets/variables.scss';
+
+$tab-width: 72px;
+$tab-max-width: 264px;
+
+.md-tabs {
+  width: 100%;
+  display: flex;
+  flex-flow: column;
+  position: relative;
+
+  &.md-transition-off * {
+    transition: none !important;
+  }
+
+  &.md-dynamic-height {
+    .md-tabs-content {
+      transition: height $swift-ease-out-duration $swift-ease-out-timing-function;
+    }
+  }
+
+  .md-tabs-navigation {
+    height: 48px;
+    min-height: 48px;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    transition: $swift-ease-out;
+
+    &.md-has-icon.md-has-label {
+      min-height: 72px;
+
+      .md-icon {
+        margin-bottom: 10px;
+      }
+    }
+
+    &.md-centered {
+      justify-content: center;
+    }
+
+    &.md-fixed {
+      .md-tab-header {
+        flex: 1;
+      }
+    }
+
+    &.md-right {
+      justify-content: flex-end;
+    }
+  }
+
+  .md-tab-header {
+    min-width: $tab-width;
+    max-width: $tab-max-width;
+    margin: 0;
+    padding: 0 12px;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    border: 0;
+    background: none;
+    transition: $swift-ease-out;
+    font-family: inherit;
+    font-size: 14px;
+    font-weight: 500;
+    text-transform: uppercase;
+
+    &.md-disabled {
+      cursor: default;
+      pointer-events: none;
+      user-select: none;
+      -webkit-user-drag: none;
+    }
+  }
+
+  .md-tab-header-container {
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+
+    .md-icon {
+      margin: 0;
+    }
+  }
+
+  .md-tab-indicator {
+    height: 2px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform: translate3D(0, 0, 0);
+
+    &.md-transition-off {
+      transition: none !important;
+    }
+
+    &.md-to-right {
+      transition: $swift-ease-out,
+                  left .3s $swift-ease-in-out-timing-function,
+                  right .15s $swift-ease-in-out-timing-function;
+    }
+
+    &.md-to-left {
+      transition: $swift-ease-out,
+                  right .3s $swift-ease-in-out-timing-function,
+                  left .15s $swift-ease-in-out-timing-function;
+    }
+  }
+
+  .md-tabs-content {
+    width: 100%;
+    height: 0;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .md-tabs-wrapper {
+    width: 9999em;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translate3d(0, 0, 0);
+    transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
+  }
+
+  .md-tab {
+    padding: 16px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}
diff --git a/src/components/mdOnboarding/mdOnboarding.theme b/src/components/mdOnboarding/mdOnboarding.theme
new file mode 100644
index 0000000..e698e05
--- /dev/null
+++ b/src/components/mdOnboarding/mdOnboarding.theme
@@ -0,0 +1,94 @@
+.THEME_NAME {
+  &.md-tabs {
+    > .md-tabs-navigation {
+      background-color: #{'PRIMARY-COLOR'};
+
+      .md-tab-header {
+        color: #{'PRIMARY-CONTRAST-0.54'};
+
+        &.md-active,
+        &:focus {
+          color: #{'PRIMARY-CONTRAST'};
+        }
+
+        &.md-disabled {
+          color: #{'PRIMARY-CONTRAST-0.26'}
+        }
+      }
+
+      .md-tab-indicator {
+        background-color: #{'ACCENT-COLOR'};
+      }
+    }
+
+    &.md-transparent {
+      > .md-tabs-navigation {
+        background-color: transparent;
+        border-bottom: 1px solid #{'BACKGROUND-CONTRAST-0.12'};
+
+        .md-tab-header {
+          color: #{'BACKGROUND-CONTRAST-0.54'};
+
+          &.md-active,
+          &:focus {
+            color: #{'PRIMARY-COLOR'};
+          }
+
+          &.md-disabled {
+            color: #{'BACKGROUND-CONTRAST-0.26'}
+          }
+        }
+
+        .md-tab-indicator {
+          background-color: #{'PRIMARY-COLOR'};
+        }
+      }
+    }
+
+    &.md-accent {
+      > .md-tabs-navigation {
+        background-color: #{'ACCENT-COLOR'};
+
+        .md-tab-header {
+          color: #{'ACCENT-CONTRAST-0.54'};
+
+          &.md-active,
+          &:focus {
+            color: #{'ACCENT-CONTRAST'};
+          }
+
+          &.md-disabled {
+            color: #{'ACCENT-CONTRAST-0.26'}
+          }
+        }
+
+        .md-tab-indicator {
+          background-color: #{'BACKGROUND-COLOR'};
+        }
+      }
+    }
+
+    &.md-warn {
+      > .md-tabs-navigation {
+        background-color: #{'WARN-COLOR'};
+
+        .md-tab-header {
+          color: #{'WARN-CONTRAST-0.54'};
+
+          &.md-active,
+          &:focus {
+            color: #{'WARN-CONTRAST'};
+          }
+
+          &.md-disabled {
+            color: #{'WARN-CONTRAST-0.26'}
+          }
+        }
+
+        .md-tab-indicator {
+          background-color: #{'BACKGROUND-COLOR'};
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mdOnboarding/mdOnboarding.vue b/src/components/mdOnboarding/mdOnboarding.vue
new file mode 100644
index 0000000..2ab8e57
--- /dev/null
+++ b/src/components/mdOnboarding/mdOnboarding.vue
@@ -0,0 +1,222 @@
+<template>
+  <div class="md-tabs" :class="[themeClass, tabClasses]">
+    <md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
+      <button
+        v-for="header in tabList"
+        :key="header.id"
+        type="button"
+        class="md-tab-header"
+        :class="getHeaderClass(header)"
+        :disabled="header.disabled"
+        @click="setActiveTab(header)"
+        ref="tabHeader">
+        <md-ink-ripple :md-disabled="header.disabled"></md-ink-ripple>
+        <div class="md-tab-header-container">
+          <md-icon v-if="header.icon">{{ header.icon }}</md-icon>
+          <span v-if="header.label">{{ header.label }}</span>
+          <md-tooltip v-if="header.tooltip" :md-direction="header.tooltipDirection" :md-delay="header.tooltipDelay">{{ header.tooltip }}</md-tooltip>
+        </div>
+      </button>
+
+      <span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
+    </md-whiteframe>
+
+    <div class="md-tabs-content" ref="tabContent" :style="{ height: contentHeight }">
+      <div class="md-tabs-wrapper" :style="{ transform: `translate3D(-${contentWidth}, 0, 0)` }">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="./mdOnboarding.scss"></style>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+  import throttle from '../../core/utils/throttle';
+
+  export default {
+    props: {
+      mdFixed: Boolean,
+      mdCentered: Boolean,
+      mdRight: Boolean,
+      mdDynamicHeight: {
+        type: Boolean,
+        default: true
+      },
+      mdElevation: {
+        type: [String, Number],
+        default: 0
+      }
+    },
+    mixins: [theme],
+    data: () => ({
+      tabList: {},
+      activeTab: null,
+      activeTabNumber: 0,
+      hasIcons: false,
+      hasLabel: false,
+      transitionControl: null,
+      transitionOff: false,
+      contentHeight: '0px',
+      contentWidth: '0px'
+    }),
+    computed: {
+      tabClasses() {
+        return {
+          'md-dynamic-height': this.mdDynamicHeight,
+          'md-transition-off': this.transitionOff
+        };
+      },
+      navigationClasses() {
+        return {
+          'md-has-icon': this.hasIcons,
+          'md-has-label': this.hasLabel,
+          'md-fixed': this.mdFixed,
+          'md-right': !this.mdCentered && this.mdRight,
+          'md-centered': this.mdCentered || this.mdFixed
+        };
+      },
+      indicatorClasses() {
+        let toLeft = this.lastIndicatorNumber > this.activeTabNumber;
+
+        this.lastIndicatorNumber = this.activeTabNumber;
+
+        return {
+          'md-transition-off': this.transitionOff,
+          'md-to-right': !toLeft,
+          'md-to-left': toLeft
+        };
+      }
+    },
+    methods: {
+      getHeaderClass(header) {
+        return {
+          'md-active': this.activeTab === header.id,
+          'md-disabled': header.disabled
+        };
+      },
+      registerTab(tabData) {
+        this.tabList[tabData.id] = tabData;
+      },
+      unregisterTab(tabData) {
+        delete this.tabList[tabData.id];
+      },
+      updateTab(tabData) {
+        this.registerTab(tabData);
+
+        if (tabData.active) {
+          if (!tabData.disabled) {
+            this.setActiveTab(tabData);
+          } else if (Object.keys(this.tabList).length) {
+            let tabsIds = Object.keys(this.tabList);
+            let targetIndex = tabsIds.indexOf(tabData.id) + 1;
+            let target = tabsIds[targetIndex];
+
+            if (target) {
+              this.setActiveTab(this.tabList[target]);
+            } else {
+              this.setActiveTab(this.tabList[0]);
+            }
+          }
+        }
+      },
+      observeElementChanges() {
+        this.parentObserver = new MutationObserver(throttle(this.calculateOnWatch, 50));
+        this.parentObserver.observe(this.$refs.tabContent, {
+          childList: true,
+          attributes: true,
+          subtree: true
+        });
+      },
+      getTabIndex(id) {
+        const idList = Object.keys(this.tabList);
+
+        return idList.indexOf(id);
+      },
+      calculateIndicatorPos() {
+        if (this.$refs.tabHeader && this.$refs.tabHeader[this.activeTabNumber]) {
+          const tabsWidth = this.$el.offsetWidth;
+          const activeTab = this.$refs.tabHeader[this.activeTabNumber];
+          const left = activeTab.offsetLeft;
+          const right = tabsWidth - left - activeTab.offsetWidth;
+
+          this.$refs.indicator.style.left = left + 'px';
+          this.$refs.indicator.style.right = right + 'px';
+        }
+      },
+      calculateTabsWidthAndPosition() {
+        const width = this.$el.offsetWidth;
+        let index = 0;
+
+        this.contentWidth = width * this.activeTabNumber + 'px';
+
+        for (const tabId in this.tabList) {
+          const tab = this.tabList[tabId];
+
+          tab.ref.width = width + 'px';
+          tab.ref.left = width * index + 'px';
+          index++;
+        }
+      },
+      calculateContentHeight() {
+        this.$nextTick(() => {
+          if (Object.keys(this.tabList).length) {
+            let height = this.tabList[this.activeTab].ref.$el.offsetHeight;
+
+            this.contentHeight = height + 'px';
+          }
+        });
+      },
+      calculatePosition() {
+        window.requestAnimationFrame(() => {
+          this.calculateIndicatorPos();
+          this.calculateTabsWidthAndPosition();
+          this.calculateContentHeight();
+        });
+      },
+      debounceTransition() {
+        window.clearTimeout(this.transitionControl);
+        this.transitionControl = window.setTimeout(() => {
+          this.calculatePosition();
+          this.transitionOff = false;
+        }, 200);
+      },
+      calculateOnWatch() {
+        this.calculatePosition();
+        this.debounceTransition();
+      },
+      calculateOnResize() {
+        this.transitionOff = true;
+        this.calculateOnWatch();
+      },
+      setActiveTab(tabData) {
+        this.hasIcons = !!tabData.icon;
+        this.hasLabel = !!tabData.label;
+        this.activeTab = tabData.id;
+        this.activeTabNumber = this.getTabIndex(this.activeTab);
+        this.calculatePosition();
+        this.$emit('change', this.activeTabNumber);
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.observeElementChanges();
+        window.addEventListener('resize', this.calculateOnResize);
+
+        if (Object.keys(this.tabList).length && !this.activeTab) {
+          let firstTab = Object.keys(this.tabList)[0];
+
+          this.setActiveTab(this.tabList[firstTab]);
+        }
+      });
+    },
+    beforeDestroy() {
+      if (this.parentObserver) {
+        this.parentObserver.disconnect();
+      }
+
+      window.removeEventListener('resize', this.calculateOnResize);
+    }
+  };
+</script>
diff --git a/src/index.js b/src/index.js
index 9a0f757..2540f7b 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 MdOnboarding from './components/mdOnboarding';
 import MdProgress from './components/mdProgress';
 import MdRadio from './components/mdRadio';
 import MdSelect from './components/mdSelect';
@@ -50,6 +51,7 @@ const options = {
   MdLayout,
   MdList,
   MdMenu,
+  MdOnboarding,
   MdProgress,
   MdRadio,
   MdSelect,

From 2928200ba1407a243d87fff1d680102e0e0673e2 Mon Sep 17 00:00:00 2001
From: "TECNOSYLVA\\fgarcia" <fernando.garcia@xeridia.com>
Date: Wed, 22 Feb 2017 12:09:17 +0100
Subject: [PATCH 2/7] Added custom classes for theming. Added auto timeout
 behaviour. Finished custom mdOnboarding component based on mdTabs.

---
 docs/src/pages/components/Onboarding.vue      | 157 ++++++++--
 src/components/mdOnboarding/index.js          |   8 +-
 src/components/mdOnboarding/mdBoard.vue       |  40 +--
 .../{mdOnboarding.scss => mdBoards.scss}      |  75 ++---
 src/components/mdOnboarding/mdBoards.theme    | 116 +++++++
 src/components/mdOnboarding/mdBoards.vue      | 296 ++++++++++++++++++
 .../mdOnboarding/mdOnboarding.theme           |  94 ------
 src/components/mdOnboarding/mdOnboarding.vue  | 222 -------------
 8 files changed, 591 insertions(+), 417 deletions(-)
 rename src/components/mdOnboarding/{mdOnboarding.scss => mdBoards.scss} (55%)
 create mode 100644 src/components/mdOnboarding/mdBoards.theme
 create mode 100644 src/components/mdOnboarding/mdBoards.vue
 delete mode 100644 src/components/mdOnboarding/mdOnboarding.theme
 delete mode 100644 src/components/mdOnboarding/mdOnboarding.vue

diff --git a/docs/src/pages/components/Onboarding.vue b/docs/src/pages/components/Onboarding.vue
index 541b213..dc48729 100644
--- a/docs/src/pages/components/Onboarding.vue
+++ b/docs/src/pages/components/Onboarding.vue
@@ -2,16 +2,20 @@
   <page-content page-title="Components - Onboarding">
     <docs-component>
       <div slot="description">
-        <p></p>
-        <ul class="md-body-2">
+        <p>The onboarding offers a first and fast look for your page, with custom controls, automatized steps and swipe effects. Can be also used as a custom carousel.</p>
+        <p>Can be themed used the following:</p>
+        <ul class="md-body-4">
           <li><code>md-primary</code></li>
           <li><code>md-warn</code></li>
+          <li><code>md-accent</code></li>
+          <li><code>md-transparent</code></li>
         </ul>
       </div>
 
       <div slot="api">
         <api-table name="md-onboarding">
           <md-table slot="properties">
+
             <md-table-header>
               <md-table-row>
                 <md-table-head>Name</md-table-head>
@@ -22,41 +26,155 @@
 
             <md-table-body>
               <md-table-row>
-                <md-table-cell>v-model</md-table-cell>
-                <md-table-cell><code>String</code></md-table-cell>
-                <md-table-cell>A required model object to bind the value.</md-table-cell>
+                <md-table-cell>md-auto</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Enable auto-slider. Default <code>false</code>.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-infinite</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Enable infinite loop. Default <code>false</code>.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-timeout</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Set timeout for <code>md-auto</code> in milliseconds. Default <code>5000</code>.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-controls</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Enable prev/next controls. Default <code>false</code>.</md-table-cell>
               </md-table-row>
             </md-table-body>
+
           </md-table>
         </api-table>
       </div>
 
       <div slot="example">
-        <example-box card-title="Basic">
+        <example-box card-title="Basic, automatic, infinite, uncontrolled">
           <div slot="demo">
-            <md-onboarding :md-dynamic-height="false">
-              <md-board id="movies" md-label="Movies">
+            <md-boards :md-auto="true" :md-infinite="true">
+              <md-board id="slide1">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-board>
 
-              <md-board id="music" md-label="Music">
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
+              <md-board id="slide2">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-board>
 
-              <md-board id="books" md-label="Books">
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              <md-board id="slide3">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-board>
-
-              <md-board id="pictures" md-label="Pictures" md-tooltip="This is the pictures board!">
-                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
-              </md-board>
-            </md-onboarding>
+            </md-boards>
           </div>
 
           <div slot="code">
             <code-block lang="xml">
-              
+              &lt;md-boards :md-auto=&quot;true&quot; :md-infinite=&quot;true&quot;&gt;
+                &lt;md-board id=&quot;slide1&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+                &lt;/md-board&gt;
+
+                &lt;md-board id=&quot;slide2&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+                &lt;/md-board&gt;
+
+                &lt;md-board id=&quot;slide3&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+                &lt;/md-board&gt;
+              &lt;/md-boards&gt;
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Themed, finite, controlled">
+          <div slot="demo">
+            <md-boards class="md-transparent" :md-controls="true" style="background-color: black">
+              <md-board id="slide1" style="color: white">
+                <p>Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.</p>
+              </md-board>
+
+              <md-board id="slide2" style="color: white">
+                <p>Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.</p>
+              </md-board>
+
+              <md-board id="slide3" style="color: white">
+                <p>Transparent themed, for background-imaged slides. Background color black added for demonstration purposes.</p>
+              </md-board>
+            </md-boards>
+
+            <md-boards class="md-primary" :md-controls="true">
+              <md-board id="slide1">
+                <p>Primary themed</p>
+              </md-board>
+
+              <md-board id="slide2">
+                <p>Primary themed</p>
+              </md-board>
+            </md-boards>
+
+            <md-boards class="md-accent" :md-controls="true">
+              <md-board id="slide1">
+                <p>Accent themed</p>
+              </md-board>
+
+              <md-board id="slide2">
+                <p>Accent themed</p>
+              </md-board>
+
+              <md-board id="slide3">
+                <p>Accent themed</p>
+              </md-board>
+            </md-boards>
+
+            <md-boards class="md-warn" :md-controls="true">
+              <md-board id="slide1">
+                <p>Warn themed</p>
+              </md-board>
+
+              <md-board id="slide2">
+                <p>Warn themed</p>
+              </md-board>
+
+              <md-board id="slide3">
+                <p>Warn themed</p>
+              </md-board>
+
+              <md-board id="slide4">
+                <p>Warn themed</p>
+              </md-board>
+            </md-boards>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-boards class=&quot;md-transparent&quot; :md-controls=&quot;true&quot;&gt;
+                &lt;md-board id=&quot;slide1&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+                &lt;/md-board&gt;
+              &lt;/md-boards&gt;
+
+              &lt;md-boards class=&quot;md-primary&quot; :md-controls=&quot;true&quot;&gt;
+                &lt;md-board id=&quot;slide1&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+                &lt;/md-board&gt;
+              &lt;/md-boards&gt;
+
+              &lt;md-boards class=&quot;md-accent&quot; :md-controls=&quot;true&quot;&gt;
+                &lt;md-board id=&quot;slide1&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+                &lt;/md-board&gt;
+              &lt;/md-boards&gt;
+
+              &lt;md-boards class=&quot;md-warn&quot; :md-controls=&quot;true&quot;&gt;
+                &lt;md-board id=&quot;slide1&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
+                &lt;/md-board&gt;
+              &lt;/md-boards&gt;
             </code-block>
           </div>
         </example-box>
@@ -64,6 +182,3 @@
     </docs-component>
   </page-content>
 </template>
-
-<script>
-</script>
diff --git a/src/components/mdOnboarding/index.js b/src/components/mdOnboarding/index.js
index 0791a01..50dcec3 100644
--- a/src/components/mdOnboarding/index.js
+++ b/src/components/mdOnboarding/index.js
@@ -1,10 +1,10 @@
-import mdOnboarding from './mdOnboarding.vue';
+import mdBoards from './mdBoards.vue';
 import mdBoard from './mdBoard.vue';
-import mdOnboardingTheme from './mdOnboarding.theme';
+import mdBoardsTheme from './mdBoards.theme';
 
 export default function install(Vue) {
-  Vue.component('md-onboarding', mdOnboarding);
+  Vue.component('md-boards', mdBoards);
   Vue.component('md-board', mdBoard);
 
-  Vue.material.styles.push(mdOnboardingTheme);
+  Vue.material.styles.push(mdBoardsTheme);
 }
diff --git a/src/components/mdOnboarding/mdBoard.vue b/src/components/mdOnboarding/mdBoard.vue
index a54cfb9..8d244c9 100644
--- a/src/components/mdOnboarding/mdBoard.vue
+++ b/src/components/mdOnboarding/mdBoard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="md-tab" :id="tabId" :style="styles">
+  <div class="md-board" :id="boardId" :style="styles">
     <slot></slot>
   </div>
 </template>
@@ -28,32 +28,32 @@
     data() {
       return {
         mounted: false,
-        tabId: this.id || 'tab-' + uniqueId(),
+        boardId: this.id || 'board-' + uniqueId(),
         width: '0px',
         left: '0px'
       };
     },
     watch: {
       mdActive() {
-        this.updateTabData();
+        this.updateBoardData();
       },
       mdDisabled() {
-        this.updateTabData();
+        this.updateBoardData();
       },
       mdIcon() {
-        this.updateTabData();
+        this.updateBoardData();
       },
       mdLabel() {
-        this.updateTabData();
+        this.updateBoardData();
       },
       mdTooltip() {
-        this.updateTabData();
+        this.updateBoardData();
       },
       mdTooltipDelay() {
-        this.updateTabData();
+        this.updateBoardData();
       },
       mdTooltipDirection() {
-        this.updateTabData();
+        this.updateBoardData();
       }
     },
     computed: {
@@ -65,9 +65,9 @@
       }
     },
     methods: {
-      getTabData() {
+      getBoardData() {
         return {
-          id: this.tabId,
+          id: this.boardId,
           label: this.mdLabel,
           icon: this.mdIcon,
           active: this.mdActive,
@@ -78,28 +78,28 @@
           ref: this
         };
       },
-      updateTabData() {
-        this.parentTabs.updateTab(this.getTabData());
+      updateBoardData() {
+        this.parentBoards.updateBoard(this.getBoardData());
       }
     },
     mounted() {
-      let tabData = this.getTabData();
+      let boardData = this.getBoardData();
 
-      this.parentTabs = getClosestVueParent(this.$parent, 'md-tabs');
+      this.parentBoards = getClosestVueParent(this.$parent, 'md-boards');
 
-      if (!this.parentTabs) {
-        throw new Error('You must wrap the md-tab in a md-tabs');
+      if (!this.parentBoards) {
+        throw new Error('You must wrap the md-board in a md-boards');
       }
 
       this.mounted = true;
-      this.parentTabs.updateTab(tabData);
+      this.parentBoards.updateBoard(boardData);
 
       if (this.mdActive) {
-        this.parentTabs.setActiveTab(tabData);
+        this.parentBoards.setActiveBoard(boardData);
       }
     },
     beforeDestroy() {
-      this.parentTabs.unregisterTab(this.getTabData());
+      this.parentBoards.unregisterBoard(this.getBoardData());
     }
   };
 </script>
diff --git a/src/components/mdOnboarding/mdOnboarding.scss b/src/components/mdOnboarding/mdBoards.scss
similarity index 55%
rename from src/components/mdOnboarding/mdOnboarding.scss
rename to src/components/mdOnboarding/mdBoards.scss
index b842b6f..76cd6a7 100644
--- a/src/components/mdOnboarding/mdOnboarding.scss
+++ b/src/components/mdOnboarding/mdBoards.scss
@@ -1,9 +1,9 @@
 @import '../../core/stylesheets/variables.scss';
 
-$tab-width: 72px;
-$tab-max-width: 264px;
+$board-width: 24px;
+$board-max-width: 24px;
 
-.md-tabs {
+.md-boards {
   width: 100%;
   display: flex;
   flex-flow: column;
@@ -14,45 +14,24 @@ $tab-max-width: 264px;
   }
 
   &.md-dynamic-height {
-    .md-tabs-content {
+    .md-boards-content {
       transition: height $swift-ease-out-duration $swift-ease-out-timing-function;
     }
   }
 
-  .md-tabs-navigation {
+  .md-boards-navigation {
     height: 48px;
     min-height: 48px;
     position: relative;
     z-index: 1;
     display: flex;
     transition: $swift-ease-out;
-
-    &.md-has-icon.md-has-label {
-      min-height: 72px;
-
-      .md-icon {
-        margin-bottom: 10px;
-      }
-    }
-
-    &.md-centered {
-      justify-content: center;
-    }
-
-    &.md-fixed {
-      .md-tab-header {
-        flex: 1;
-      }
-    }
-
-    &.md-right {
-      justify-content: flex-end;
-    }
+    justify-content: space-between;
   }
 
-  .md-tab-header {
-    min-width: $tab-width;
-    max-width: $tab-max-width;
+  .md-board-header {
+    min-width: $board-width;
+    max-width: $board-max-width;
     margin: 0;
     padding: 0 12px;
     display: inline-block;
@@ -74,7 +53,7 @@ $tab-max-width: 264px;
     }
   }
 
-  .md-tab-header-container {
+  .md-board-header-container {
     display: flex;
     flex-flow: column;
     justify-content: center;
@@ -83,40 +62,24 @@ $tab-max-width: 264px;
     .md-icon {
       margin: 0;
     }
-  }
 
-  .md-tab-indicator {
-    height: 2px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    transform: translate3D(0, 0, 0);
-
-    &.md-transition-off {
-      transition: none !important;
-    }
-
-    &.md-to-right {
-      transition: $swift-ease-out,
-                  left .3s $swift-ease-in-out-timing-function,
-                  right .15s $swift-ease-in-out-timing-function;
-    }
-
-    &.md-to-left {
-      transition: $swift-ease-out,
-                  right .3s $swift-ease-in-out-timing-function,
-                  left .15s $swift-ease-in-out-timing-function;
+    .md-icon:not(.md-control) {
+      width: 16px;
+      min-width: 16px;
+      height: 16px;
+      min-height: 16px;
+      font-size: 16px;
     }
   }
 
-  .md-tabs-content {
+  .md-boards-content {
     width: 100%;
     height: 0;
     position: relative;
     overflow: hidden;
   }
 
-  .md-tabs-wrapper {
+  .md-boards-wrapper {
     width: 9999em;
     position: absolute;
     top: 0;
@@ -127,7 +90,7 @@ $tab-max-width: 264px;
     transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
   }
 
-  .md-tab {
+  .md-board {
     padding: 16px;
     position: absolute;
     top: 0;
diff --git a/src/components/mdOnboarding/mdBoards.theme b/src/components/mdOnboarding/mdBoards.theme
new file mode 100644
index 0000000..2f25932
--- /dev/null
+++ b/src/components/mdOnboarding/mdBoards.theme
@@ -0,0 +1,116 @@
+.THEME_NAME {
+  &.md-boards {
+    > .md-boards-navigation {
+      background-color: transparent;
+
+      .md-board-header {
+        color: #{'BACKGROUND-CONTRAST-0.54'};
+
+        &.md-active,
+        &:focus {
+          color: #{'PRIMARY-COLOR'};
+        }
+
+        &.md-disabled {
+          color: #{'BACKGROUND-CONTRAST-0.26'}
+        }
+      }
+
+      .md-button {
+        color: #{'PRIMARY-COLOR'};
+      }
+    }
+
+    &.md-transparent {
+      > .md-boards-navigation {
+        background-color: transparent;
+
+        .md-board-header {
+          color: #{'PRIMARY-CONTRAST-0.54'};
+
+          &.md-active,
+          &:focus {
+            color: #{'PRIMARY-CONTRAST'};
+          }
+
+          &.md-disabled {
+            color: #{'PRIMARY-CONTRAST-0.26'}
+          }
+        }
+
+        .md-button {
+          color: #{'PRIMARY-CONTRAST-0.54'};
+        }
+      }
+    }
+
+    &.md-primary {
+      > .md-boards-navigation {
+        background-color: #{'PRIMARY-COLOR'};
+
+        .md-board-header {
+          color: #{'PRIMARY-CONTRAST-0.54'};
+
+          &.md-active,
+          &:focus {
+            color: #{'PRIMARY-CONTRAST'};
+          }
+
+          &.md-disabled {
+            color: #{'PRIMARY-CONTRAST-0.26'}
+          }
+        }
+
+        .md-button {
+          color: #{'PRIMARY-CONTRAST-0.54'};
+        }
+      }
+    }
+
+    &.md-accent {
+      > .md-boards-navigation {
+        background-color: #{'ACCENT-COLOR'};
+
+        .md-board-header {
+          color: #{'ACCENT-CONTRAST-0.54'};
+
+          &.md-active,
+          &:focus {
+            color: #{'ACCENT-CONTRAST'};
+          }
+
+          &.md-disabled {
+            color: #{'ACCENT-CONTRAST-0.26'}
+          }
+        }
+
+        .md-button {
+          color: #{'ACCENT-CONTRAST-0.54'};
+        }
+      }
+    }
+
+    &.md-warn {
+      > .md-boards-navigation {
+        background-color: #{'WARN-COLOR'};
+
+        .md-board-header {
+          color: #{'WARN-CONTRAST-0.54'};
+
+          &.md-active,
+          &:focus {
+            color: #{'WARN-CONTRAST'};
+          }
+
+          &.md-disabled {
+            color: #{'WARN-CONTRAST-0.26'}
+          }
+        }
+
+        .md-button {
+          color: #{'WARN-CONTRAST-0.54'};
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/mdOnboarding/mdBoards.vue b/src/components/mdOnboarding/mdBoards.vue
new file mode 100644
index 0000000..c1aa26b
--- /dev/null
+++ b/src/components/mdOnboarding/mdBoards.vue
@@ -0,0 +1,296 @@
+<template>
+  <div class="md-boards" :class="[themeClass, boardClasses]">
+
+    <div class="md-boards-content" ref="boardContent" :style="{ height: contentHeight }">
+      <div class="md-boards-wrapper" :style="{ transform: `translate3D(-${contentWidth}, 0, 0)` }">
+        <slot></slot>
+      </div>
+    </div>
+
+    <md-whiteframe md-tag="nav" class="md-boards-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="boardNavigation">
+
+      <span style="flex: 1" v-if="!mdControls"></span>
+
+      <md-button
+        v-if="mdControls"
+        @click.native="movePrevBoard()">
+        <div class="md-board-header-container">
+          <md-icon class="md-control">chevron_left</md-icon>
+        </div>
+      </md-button>
+
+      <span style="flex: 1"></span>
+
+      <button
+        v-for="header in boardList"
+        :key="header.id"
+        type="button"
+        class="md-board-header"
+        :class="getHeaderClass(header)"
+        :disabled="header.disabled"
+        @click="setActiveBoard(header)"
+        ref="boardHeader">
+        <div class="md-board-header-container">
+          <md-icon>fiber_manual_record</md-icon>
+        </div>
+      </button>
+      
+      <span style="flex: 1"></span>
+
+      <md-button
+        v-if="mdControls"
+        @click.native="moveNextBoard()">
+        <div class="md-board-header-container">
+          <md-icon class="md-control">chevron_right</md-icon>
+        </div>
+      </md-button>
+
+      <span style="flex: 1" v-if="!mdControls"></span>
+
+      <span ref="indicator"></span>
+    </md-whiteframe>
+
+  </div>
+</template>
+
+<style lang="scss" src="./mdBoards.scss"></style>
+
+<script>
+  import theme from '../../core/components/mdTheme/mixin';
+  import throttle from '../../core/utils/throttle';
+
+  export default {
+    props: {
+      mdFixed: Boolean,
+      mdCentered: Boolean,
+      mdRight: Boolean,
+      mdDynamicHeight: {
+        type: Boolean,
+        default: true
+      },
+      mdElevation: {
+        type: [String, Number],
+        default: 0
+      },
+      mdAuto: {
+        type: Boolean,
+        default: false
+      },
+      mdTimeout: {
+        type: Number,
+        default: 5000
+      },
+      mdControls: {
+        type: Boolean,
+        default: false
+      },
+      mdInfinite: {
+        type: Boolean,
+        default: false
+      }
+    },
+    mixins: [theme],
+    data: () => ({
+      boardList: {},
+      activeBoard: null,
+      activeBoardNumber: 0,
+      hasIcons: false,
+      hasLabel: false,
+      transitionControl: null,
+      transitionOff: false,
+      contentHeight: '0px',
+      contentWidth: '0px',
+      autoTransition: null
+    }),
+    computed: {
+      boardClasses() {
+        return {
+          'md-dynamic-height': this.mdDynamicHeight,
+          'md-transition-off': this.transitionOff
+        };
+      },
+      navigationClasses() {
+        return {
+          'md-has-icon': this.hasIcons,
+          'md-has-label': this.hasLabel,
+          'md-fixed': this.mdFixed,
+          'md-right': !this.mdCentered && this.mdRight,
+          'md-centered': this.mdCentered || this.mdFixed
+        };
+      },
+      indicatorClasses() {
+        let toLeft = this.lastIndicatorNumber > this.activeBoardNumber;
+
+        this.lastIndicatorNumber = this.activeBoardNumber;
+
+        return {
+          'md-transition-off': this.transitionOff,
+          'md-to-right': !toLeft,
+          'md-to-left': toLeft
+        };
+      }
+    },
+    methods: {
+      getHeaderClass(header) {
+        return {
+          'md-active': this.activeBoard === header.id,
+          'md-disabled': header.disabled
+        };
+      },
+      registerBoard(boardData) {
+        this.boardList[boardData.id] = boardData;
+      },
+      unregisterBoard(boardData) {
+        delete this.boardList[boardData.id];
+      },
+      updateBoard(boardData) {
+        this.registerBoard(boardData);
+
+        if (boardData.active) {
+          if (!boardData.disabled) {
+            this.setActiveBoard(boardData);
+          } else if (Object.keys(this.boardList).length) {
+            let boardsIds = Object.keys(this.boardList);
+            let targetIndex = boardsIds.indexOf(boardData.id) + 1;
+            let target = boardsIds[targetIndex];
+
+            if (target) {
+              this.setActiveBoard(this.boardList[target]);
+            } else {
+              this.setActiveBoard(this.boardList[0]);
+            }
+          }
+        }
+      },
+      observeElementChanges() {
+        this.parentObserver = new MutationObserver(throttle(this.calculateOnWatch, 50));
+        this.parentObserver.observe(this.$refs.boardContent, {
+          childList: true,
+          attributes: true,
+          subtree: true
+        });
+      },
+      getBoardIndex(id) {
+        const idList = Object.keys(this.boardList);
+
+        return idList.indexOf(id);
+      },
+      calculateIndicatorPos() {
+        if (this.$refs.boardHeader && this.$refs.boardHeader[this.activeBoardNumber]) {
+          const boardsWidth = this.$el.offsetWidth;
+          const activeBoard = this.$refs.boardHeader[this.activeBoardNumber];
+          const left = activeBoard.offsetLeft;
+          const right = boardsWidth - left - activeBoard.offsetWidth;
+
+          this.$refs.indicator.style.left = left + 'px';
+          this.$refs.indicator.style.right = right + 'px';
+        }
+      },
+      calculateBoardsWidthAndPosition() {
+        const width = this.$el.offsetWidth;
+        let index = 0;
+
+        this.contentWidth = width * this.activeBoardNumber + 'px';
+
+        for (const boardId in this.boardList) {
+          const board = this.boardList[boardId];
+
+          board.ref.width = width + 'px';
+          board.ref.left = width * index + 'px';
+          index++;
+        }
+      },
+      calculateContentHeight() {
+        this.$nextTick(() => {
+          if (Object.keys(this.boardList).length) {
+            let height = this.boardList[this.activeBoard].ref.$el.offsetHeight;
+
+            this.contentHeight = height + 'px';
+          }
+        });
+      },
+      calculatePosition() {
+        window.requestAnimationFrame(() => {
+          this.calculateIndicatorPos();
+          this.calculateBoardsWidthAndPosition();
+          this.calculateContentHeight();
+        });
+      },
+      debounceTransition() {
+        window.clearTimeout(this.transitionControl);
+        this.transitionControl = window.setTimeout(() => {
+          this.calculatePosition();
+          this.transitionOff = false;
+        }, 200);
+      },
+      calculateOnWatch() {
+        this.calculatePosition();
+        this.debounceTransition();
+      },
+      calculateOnResize() {
+        this.transitionOff = true;
+        this.calculateOnWatch();
+      },
+      setActiveBoard(boardData) {
+        this.hasIcons = !!boardData.icon;
+        this.hasLabel = !!boardData.label;
+        this.activeBoard = boardData.id;
+        this.activeBoardNumber = this.getBoardIndex(this.activeBoard);
+        this.calculatePosition();
+        this.$emit('change', this.activeBoardNumber);
+      },
+      movePrevBoard() {
+        let boardsIds = Object.keys(this.boardList);
+        let targetIndex = boardsIds.indexOf(this.activeBoard) - 1;
+        let target = boardsIds[targetIndex];
+
+        if (target) {
+          this.setActiveBoard(this.boardList[target]);
+        } else if (this.mdInfinite) {
+          let lastBoard = Object.keys(this.boardList)[Object.keys(this.boardList).length - 1];
+
+          this.setActiveBoard(this.boardList[lastBoard]);
+        }
+      },
+      moveNextBoard() {
+        let boardsIds = Object.keys(this.boardList);
+        let targetIndex = boardsIds.indexOf(this.activeBoard) + 1;
+        let target = boardsIds[targetIndex];
+
+        if (target) {
+          this.setActiveBoard(this.boardList[target]);
+        } else if (this.mdInfinite) {
+          let firstBoard = Object.keys(this.boardList)[0];
+  
+          this.setActiveBoard(this.boardList[firstBoard]);
+        }
+      }
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.observeElementChanges();
+        window.addEventListener('resize', this.calculateOnResize);
+
+        if (Object.keys(this.boardList).length && !this.activeBoard) {
+          let firstBoard = Object.keys(this.boardList)[0];
+
+          this.setActiveBoard(this.boardList[firstBoard]);
+        }
+      });
+
+      /* automatic behaviour */
+      if (this.mdAuto) {
+        this.autoTransition = window.setInterval(() => {
+          this.moveNextBoard();
+        }, this.mdTimeout);
+      }
+    },
+    beforeDestroy() {
+      if (this.parentObserver) {
+        this.parentObserver.disconnect();
+      }
+
+      window.removeEventListener('resize', this.calculateOnResize);
+    }
+  };
+</script>
diff --git a/src/components/mdOnboarding/mdOnboarding.theme b/src/components/mdOnboarding/mdOnboarding.theme
deleted file mode 100644
index e698e05..0000000
--- a/src/components/mdOnboarding/mdOnboarding.theme
+++ /dev/null
@@ -1,94 +0,0 @@
-.THEME_NAME {
-  &.md-tabs {
-    > .md-tabs-navigation {
-      background-color: #{'PRIMARY-COLOR'};
-
-      .md-tab-header {
-        color: #{'PRIMARY-CONTRAST-0.54'};
-
-        &.md-active,
-        &:focus {
-          color: #{'PRIMARY-CONTRAST'};
-        }
-
-        &.md-disabled {
-          color: #{'PRIMARY-CONTRAST-0.26'}
-        }
-      }
-
-      .md-tab-indicator {
-        background-color: #{'ACCENT-COLOR'};
-      }
-    }
-
-    &.md-transparent {
-      > .md-tabs-navigation {
-        background-color: transparent;
-        border-bottom: 1px solid #{'BACKGROUND-CONTRAST-0.12'};
-
-        .md-tab-header {
-          color: #{'BACKGROUND-CONTRAST-0.54'};
-
-          &.md-active,
-          &:focus {
-            color: #{'PRIMARY-COLOR'};
-          }
-
-          &.md-disabled {
-            color: #{'BACKGROUND-CONTRAST-0.26'}
-          }
-        }
-
-        .md-tab-indicator {
-          background-color: #{'PRIMARY-COLOR'};
-        }
-      }
-    }
-
-    &.md-accent {
-      > .md-tabs-navigation {
-        background-color: #{'ACCENT-COLOR'};
-
-        .md-tab-header {
-          color: #{'ACCENT-CONTRAST-0.54'};
-
-          &.md-active,
-          &:focus {
-            color: #{'ACCENT-CONTRAST'};
-          }
-
-          &.md-disabled {
-            color: #{'ACCENT-CONTRAST-0.26'}
-          }
-        }
-
-        .md-tab-indicator {
-          background-color: #{'BACKGROUND-COLOR'};
-        }
-      }
-    }
-
-    &.md-warn {
-      > .md-tabs-navigation {
-        background-color: #{'WARN-COLOR'};
-
-        .md-tab-header {
-          color: #{'WARN-CONTRAST-0.54'};
-
-          &.md-active,
-          &:focus {
-            color: #{'WARN-CONTRAST'};
-          }
-
-          &.md-disabled {
-            color: #{'WARN-CONTRAST-0.26'}
-          }
-        }
-
-        .md-tab-indicator {
-          background-color: #{'BACKGROUND-COLOR'};
-        }
-      }
-    }
-  }
-}
diff --git a/src/components/mdOnboarding/mdOnboarding.vue b/src/components/mdOnboarding/mdOnboarding.vue
deleted file mode 100644
index 2ab8e57..0000000
--- a/src/components/mdOnboarding/mdOnboarding.vue
+++ /dev/null
@@ -1,222 +0,0 @@
-<template>
-  <div class="md-tabs" :class="[themeClass, tabClasses]">
-    <md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
-      <button
-        v-for="header in tabList"
-        :key="header.id"
-        type="button"
-        class="md-tab-header"
-        :class="getHeaderClass(header)"
-        :disabled="header.disabled"
-        @click="setActiveTab(header)"
-        ref="tabHeader">
-        <md-ink-ripple :md-disabled="header.disabled"></md-ink-ripple>
-        <div class="md-tab-header-container">
-          <md-icon v-if="header.icon">{{ header.icon }}</md-icon>
-          <span v-if="header.label">{{ header.label }}</span>
-          <md-tooltip v-if="header.tooltip" :md-direction="header.tooltipDirection" :md-delay="header.tooltipDelay">{{ header.tooltip }}</md-tooltip>
-        </div>
-      </button>
-
-      <span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
-    </md-whiteframe>
-
-    <div class="md-tabs-content" ref="tabContent" :style="{ height: contentHeight }">
-      <div class="md-tabs-wrapper" :style="{ transform: `translate3D(-${contentWidth}, 0, 0)` }">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" src="./mdOnboarding.scss"></style>
-
-<script>
-  import theme from '../../core/components/mdTheme/mixin';
-  import throttle from '../../core/utils/throttle';
-
-  export default {
-    props: {
-      mdFixed: Boolean,
-      mdCentered: Boolean,
-      mdRight: Boolean,
-      mdDynamicHeight: {
-        type: Boolean,
-        default: true
-      },
-      mdElevation: {
-        type: [String, Number],
-        default: 0
-      }
-    },
-    mixins: [theme],
-    data: () => ({
-      tabList: {},
-      activeTab: null,
-      activeTabNumber: 0,
-      hasIcons: false,
-      hasLabel: false,
-      transitionControl: null,
-      transitionOff: false,
-      contentHeight: '0px',
-      contentWidth: '0px'
-    }),
-    computed: {
-      tabClasses() {
-        return {
-          'md-dynamic-height': this.mdDynamicHeight,
-          'md-transition-off': this.transitionOff
-        };
-      },
-      navigationClasses() {
-        return {
-          'md-has-icon': this.hasIcons,
-          'md-has-label': this.hasLabel,
-          'md-fixed': this.mdFixed,
-          'md-right': !this.mdCentered && this.mdRight,
-          'md-centered': this.mdCentered || this.mdFixed
-        };
-      },
-      indicatorClasses() {
-        let toLeft = this.lastIndicatorNumber > this.activeTabNumber;
-
-        this.lastIndicatorNumber = this.activeTabNumber;
-
-        return {
-          'md-transition-off': this.transitionOff,
-          'md-to-right': !toLeft,
-          'md-to-left': toLeft
-        };
-      }
-    },
-    methods: {
-      getHeaderClass(header) {
-        return {
-          'md-active': this.activeTab === header.id,
-          'md-disabled': header.disabled
-        };
-      },
-      registerTab(tabData) {
-        this.tabList[tabData.id] = tabData;
-      },
-      unregisterTab(tabData) {
-        delete this.tabList[tabData.id];
-      },
-      updateTab(tabData) {
-        this.registerTab(tabData);
-
-        if (tabData.active) {
-          if (!tabData.disabled) {
-            this.setActiveTab(tabData);
-          } else if (Object.keys(this.tabList).length) {
-            let tabsIds = Object.keys(this.tabList);
-            let targetIndex = tabsIds.indexOf(tabData.id) + 1;
-            let target = tabsIds[targetIndex];
-
-            if (target) {
-              this.setActiveTab(this.tabList[target]);
-            } else {
-              this.setActiveTab(this.tabList[0]);
-            }
-          }
-        }
-      },
-      observeElementChanges() {
-        this.parentObserver = new MutationObserver(throttle(this.calculateOnWatch, 50));
-        this.parentObserver.observe(this.$refs.tabContent, {
-          childList: true,
-          attributes: true,
-          subtree: true
-        });
-      },
-      getTabIndex(id) {
-        const idList = Object.keys(this.tabList);
-
-        return idList.indexOf(id);
-      },
-      calculateIndicatorPos() {
-        if (this.$refs.tabHeader && this.$refs.tabHeader[this.activeTabNumber]) {
-          const tabsWidth = this.$el.offsetWidth;
-          const activeTab = this.$refs.tabHeader[this.activeTabNumber];
-          const left = activeTab.offsetLeft;
-          const right = tabsWidth - left - activeTab.offsetWidth;
-
-          this.$refs.indicator.style.left = left + 'px';
-          this.$refs.indicator.style.right = right + 'px';
-        }
-      },
-      calculateTabsWidthAndPosition() {
-        const width = this.$el.offsetWidth;
-        let index = 0;
-
-        this.contentWidth = width * this.activeTabNumber + 'px';
-
-        for (const tabId in this.tabList) {
-          const tab = this.tabList[tabId];
-
-          tab.ref.width = width + 'px';
-          tab.ref.left = width * index + 'px';
-          index++;
-        }
-      },
-      calculateContentHeight() {
-        this.$nextTick(() => {
-          if (Object.keys(this.tabList).length) {
-            let height = this.tabList[this.activeTab].ref.$el.offsetHeight;
-
-            this.contentHeight = height + 'px';
-          }
-        });
-      },
-      calculatePosition() {
-        window.requestAnimationFrame(() => {
-          this.calculateIndicatorPos();
-          this.calculateTabsWidthAndPosition();
-          this.calculateContentHeight();
-        });
-      },
-      debounceTransition() {
-        window.clearTimeout(this.transitionControl);
-        this.transitionControl = window.setTimeout(() => {
-          this.calculatePosition();
-          this.transitionOff = false;
-        }, 200);
-      },
-      calculateOnWatch() {
-        this.calculatePosition();
-        this.debounceTransition();
-      },
-      calculateOnResize() {
-        this.transitionOff = true;
-        this.calculateOnWatch();
-      },
-      setActiveTab(tabData) {
-        this.hasIcons = !!tabData.icon;
-        this.hasLabel = !!tabData.label;
-        this.activeTab = tabData.id;
-        this.activeTabNumber = this.getTabIndex(this.activeTab);
-        this.calculatePosition();
-        this.$emit('change', this.activeTabNumber);
-      }
-    },
-    mounted() {
-      this.$nextTick(() => {
-        this.observeElementChanges();
-        window.addEventListener('resize', this.calculateOnResize);
-
-        if (Object.keys(this.tabList).length && !this.activeTab) {
-          let firstTab = Object.keys(this.tabList)[0];
-
-          this.setActiveTab(this.tabList[firstTab]);
-        }
-      });
-    },
-    beforeDestroy() {
-      if (this.parentObserver) {
-        this.parentObserver.disconnect();
-      }
-
-      window.removeEventListener('resize', this.calculateOnResize);
-    }
-  };
-</script>

From f13ccff14b9b47fe9a8d148162984ad1176b6e3f Mon Sep 17 00:00:00 2001
From: "TECNOSYLVA\\fgarcia" <fernando.garcia@xeridia.com>
Date: Wed, 22 Feb 2017 16:10:14 +0100
Subject: [PATCH 3/7] Fixed some css.

---
 docs/src/pages/components/Onboarding.vue  |  4 ++--
 src/components/mdOnboarding/mdBoards.scss |  4 ++++
 src/components/mdOnboarding/mdBoards.vue  | 12 ++++++++----
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/components/Onboarding.vue b/docs/src/pages/components/Onboarding.vue
index dc48729..c1a2640 100644
--- a/docs/src/pages/components/Onboarding.vue
+++ b/docs/src/pages/components/Onboarding.vue
@@ -57,7 +57,7 @@
       <div slot="example">
         <example-box card-title="Basic, automatic, infinite, uncontrolled">
           <div slot="demo">
-            <md-boards :md-auto="true" :md-infinite="true">
+            <md-boards :md-auto="true" :md-infinite="true" :md-duration="3000">
               <md-board id="slide1">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-board>
@@ -74,7 +74,7 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-boards :md-auto=&quot;true&quot; :md-infinite=&quot;true&quot;&gt;
+              &lt;md-boards :md-auto=&quot;true&quot; :md-infinite=&quot;true&quot; :md-duration=&quot;3000&quot;&gt;
                 &lt;md-board id=&quot;slide1&quot;&gt;
                   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
                 &lt;/md-board&gt;
diff --git a/src/components/mdOnboarding/mdBoards.scss b/src/components/mdOnboarding/mdBoards.scss
index 76cd6a7..f313bdb 100644
--- a/src/components/mdOnboarding/mdBoards.scss
+++ b/src/components/mdOnboarding/mdBoards.scss
@@ -5,6 +5,7 @@ $board-max-width: 24px;
 
 .md-boards {
   width: 100%;
+  height: 100%;
   display: flex;
   flex-flow: column;
   position: relative;
@@ -20,6 +21,9 @@ $board-max-width: 24px;
   }
 
   .md-boards-navigation {
+    position: absolute !important;
+    bottom: 0;
+    width: 100%;
     height: 48px;
     min-height: 48px;
     position: relative;
diff --git a/src/components/mdOnboarding/mdBoards.vue b/src/components/mdOnboarding/mdBoards.vue
index c1aa26b..811a0d5 100644
--- a/src/components/mdOnboarding/mdBoards.vue
+++ b/src/components/mdOnboarding/mdBoards.vue
@@ -7,7 +7,7 @@
       </div>
     </div>
 
-    <md-whiteframe md-tag="nav" class="md-boards-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="boardNavigation">
+    <nav class="md-boards-navigation" :class="navigationClasses" ref="boardNavigation">
 
       <span style="flex: 1" v-if="!mdControls"></span>
 
@@ -48,7 +48,7 @@
       <span style="flex: 1" v-if="!mdControls"></span>
 
       <span ref="indicator"></span>
-    </md-whiteframe>
+    </nav>
 
   </div>
 </template>
@@ -76,7 +76,7 @@
         type: Boolean,
         default: false
       },
-      mdTimeout: {
+      mdDuration: {
         type: Number,
         default: 5000
       },
@@ -282,7 +282,7 @@
       if (this.mdAuto) {
         this.autoTransition = window.setInterval(() => {
           this.moveNextBoard();
-        }, this.mdTimeout);
+        }, this.mdDuration);
       }
     },
     beforeDestroy() {
@@ -290,6 +290,10 @@
         this.parentObserver.disconnect();
       }
 
+      if (this.autoTransition) {
+        window.clearTimeout(this.autoTransition);
+      }
+
       window.removeEventListener('resize', this.calculateOnResize);
     }
   };

From 1699134475f310543ec657769dd58a50894a7c06 Mon Sep 17 00:00:00 2001
From: "TECNOSYLVA\\fgarcia" <fernando.garcia@xeridia.com>
Date: Wed, 22 Feb 2017 17:31:03 +0100
Subject: [PATCH 4/7] Added docs css. Added clearInterval when user clicks on
 dot to restart timer duration.

---
 docs/src/pages/components/Onboarding.vue |  8 +++++++-
 src/components/mdOnboarding/mdBoards.vue | 19 ++++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/components/Onboarding.vue b/docs/src/pages/components/Onboarding.vue
index c1a2640..7fb5875 100644
--- a/docs/src/pages/components/Onboarding.vue
+++ b/docs/src/pages/components/Onboarding.vue
@@ -57,7 +57,7 @@
       <div slot="example">
         <example-box card-title="Basic, automatic, infinite, uncontrolled">
           <div slot="demo">
-            <md-boards :md-auto="true" :md-infinite="true" :md-duration="3000">
+            <md-boards :md-auto="true" :md-infinite="true" :md-duration="8000">
               <md-board id="slide1">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-board>
@@ -182,3 +182,9 @@
     </docs-component>
   </page-content>
 </template>
+
+<style>
+  .md-boards-content {
+    height: 150px !important;
+  }
+</style>
diff --git a/src/components/mdOnboarding/mdBoards.vue b/src/components/mdOnboarding/mdBoards.vue
index 811a0d5..a95b466 100644
--- a/src/components/mdOnboarding/mdBoards.vue
+++ b/src/components/mdOnboarding/mdBoards.vue
@@ -28,7 +28,7 @@
         class="md-board-header"
         :class="getHeaderClass(header)"
         :disabled="header.disabled"
-        @click="setActiveBoard(header)"
+        @click="setActiveBoard(header, true)"
         ref="boardHeader">
         <div class="md-board-header-container">
           <md-icon>fiber_manual_record</md-icon>
@@ -231,7 +231,18 @@
         this.transitionOff = true;
         this.calculateOnWatch();
       },
-      setActiveBoard(boardData) {
+      start() {
+        if (this.autoTransition) {
+          window.clearInterval(this.autoTransition);
+        }
+        this.autoTransition = window.setInterval(() => {
+          this.moveNextBoard();
+        }, this.mdDuration);
+      },
+      setActiveBoard(boardData, reset) {
+        if (reset) {
+          this.start();
+        }
         this.hasIcons = !!boardData.icon;
         this.hasLabel = !!boardData.label;
         this.activeBoard = boardData.id;
@@ -280,9 +291,7 @@
 
       /* automatic behaviour */
       if (this.mdAuto) {
-        this.autoTransition = window.setInterval(() => {
-          this.moveNextBoard();
-        }, this.mdDuration);
+        this.start();
       }
     },
     beforeDestroy() {

From fe7333ec850f29711f711b82045fa3c5259bc738 Mon Sep 17 00:00:00 2001
From: "TECNOSYLVA\\fgarcia" <fernando.garcia@xeridia.com>
Date: Wed, 22 Feb 2017 17:37:33 +0100
Subject: [PATCH 5/7] Added force restart timer to control buttons as well.

---
 src/components/mdOnboarding/mdBoards.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/mdOnboarding/mdBoards.vue b/src/components/mdOnboarding/mdBoards.vue
index a95b466..a3ab626 100644
--- a/src/components/mdOnboarding/mdBoards.vue
+++ b/src/components/mdOnboarding/mdBoards.vue
@@ -256,11 +256,11 @@
         let target = boardsIds[targetIndex];
 
         if (target) {
-          this.setActiveBoard(this.boardList[target]);
+          this.setActiveBoard(this.boardList[target], true);
         } else if (this.mdInfinite) {
           let lastBoard = Object.keys(this.boardList)[Object.keys(this.boardList).length - 1];
 
-          this.setActiveBoard(this.boardList[lastBoard]);
+          this.setActiveBoard(this.boardList[lastBoard], true);
         }
       },
       moveNextBoard() {
@@ -269,11 +269,11 @@
         let target = boardsIds[targetIndex];
 
         if (target) {
-          this.setActiveBoard(this.boardList[target]);
+          this.setActiveBoard(this.boardList[target], true);
         } else if (this.mdInfinite) {
           let firstBoard = Object.keys(this.boardList)[0];
   
-          this.setActiveBoard(this.boardList[firstBoard]);
+          this.setActiveBoard(this.boardList[firstBoard], true);
         }
       }
     },

From 6f933d21ea96044a490add968018c3fe397f50b0 Mon Sep 17 00:00:00 2001
From: "TECNOSYLVA\\fgarcia" <fernando.garcia@xeridia.com>
Date: Thu, 23 Feb 2017 15:26:53 +0100
Subject: [PATCH 6/7] Added swipeable functionality.

---
 docs/src/pages/components/Onboarding.vue | 22 ++++++--
 src/components/mdOnboarding/mdBoards.vue | 69 +++++++++++++++++++++---
 2 files changed, 78 insertions(+), 13 deletions(-)

diff --git a/docs/src/pages/components/Onboarding.vue b/docs/src/pages/components/Onboarding.vue
index 7fb5875..2bb5fc0 100644
--- a/docs/src/pages/components/Onboarding.vue
+++ b/docs/src/pages/components/Onboarding.vue
@@ -38,9 +38,9 @@
               </md-table-row>
 
               <md-table-row>
-                <md-table-cell>md-timeout</md-table-cell>
+                <md-table-cell>md-duration</md-table-cell>
                 <md-table-cell><code>Number</code></md-table-cell>
-                <md-table-cell>Set timeout for <code>md-auto</code> in milliseconds. Default <code>5000</code>.</md-table-cell>
+                <md-table-cell>Set duration for <code>md-auto</code> in milliseconds. Default <code>5000</code>.</md-table-cell>
               </md-table-row>
 
               <md-table-row>
@@ -48,6 +48,18 @@
                 <md-table-cell><code>Boolean</code></md-table-cell>
                 <md-table-cell>Enable prev/next controls. Default <code>false</code>.</md-table-cell>
               </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-swipeable</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Enable the swipe functionality. Default <code>false</code>.</md-table-cell>
+              </md-table-row>
+
+              <md-table-row>
+                <md-table-cell>md-swipe-distance</md-table-cell>
+                <md-table-cell><code>Number</code></md-table-cell>
+                <md-table-cell>Set the swipe distance needed to open/close the sidenav. Default <code>100</code>.</md-table-cell>
+              </md-table-row>
             </md-table-body>
 
           </md-table>
@@ -55,9 +67,9 @@
       </div>
 
       <div slot="example">
-        <example-box card-title="Basic, automatic, infinite, uncontrolled">
+        <example-box card-title="Basic, automatic, infinite, uncontrolled, swipeable">
           <div slot="demo">
-            <md-boards :md-auto="true" :md-infinite="true" :md-duration="8000">
+            <md-boards :md-auto="true" :md-infinite="true" :md-duration="5000" :md-swipeable="true">
               <md-board id="slide1">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
               </md-board>
@@ -74,7 +86,7 @@
 
           <div slot="code">
             <code-block lang="xml">
-              &lt;md-boards :md-auto=&quot;true&quot; :md-infinite=&quot;true&quot; :md-duration=&quot;3000&quot;&gt;
+              &lt;md-boards :md-auto=&quot;true&quot; :md-infinite=&quot;true&quot; :md-duration=&quot;5000&quot; :md-swipeable=&quot;true&quot;&gt;
                 &lt;md-board id=&quot;slide1&quot;&gt;
                   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.&lt;/p&gt;
                 &lt;/md-board&gt;
diff --git a/src/components/mdOnboarding/mdBoards.vue b/src/components/mdOnboarding/mdBoards.vue
index a3ab626..ff3483d 100644
--- a/src/components/mdOnboarding/mdBoards.vue
+++ b/src/components/mdOnboarding/mdBoards.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md-boards" :class="[themeClass, boardClasses]">
 
-    <div class="md-boards-content" ref="boardContent" :style="{ height: contentHeight }">
+    <div class="md-boards-content" ref="boardsContent" :style="{ height: contentHeight }">
       <div class="md-boards-wrapper" :style="{ transform: `translate3D(-${contentWidth}, 0, 0)` }">
         <slot></slot>
       </div>
@@ -87,6 +87,11 @@
       mdInfinite: {
         type: Boolean,
         default: false
+      },
+      mdSwipeable: Boolean,
+      mdSwipeDistance: {
+        type: Number,
+        default: 100
       }
     },
     mixins: [theme],
@@ -164,7 +169,7 @@
       },
       observeElementChanges() {
         this.parentObserver = new MutationObserver(throttle(this.calculateOnWatch, 50));
-        this.parentObserver.observe(this.$refs.boardContent, {
+        this.parentObserver.observe(this.$refs.boardsContent, {
           childList: true,
           attributes: true,
           subtree: true
@@ -240,7 +245,7 @@
         }, this.mdDuration);
       },
       setActiveBoard(boardData, reset) {
-        if (reset) {
+        if (this.mdAuto && reset) {
           this.start();
         }
         this.hasIcons = !!boardData.icon;
@@ -275,6 +280,40 @@
   
           this.setActiveBoard(this.boardList[firstBoard], true);
         }
+      },
+      isHorizontallyInside(positionX) {
+        return positionX > this.mountedRect.left && positionX < this.mountedRect.left + this.mountedRect.width;
+      },
+      isVerticallyInside(positionY) {
+        return positionY > this.mountedRect.top && positionY < this.mountedRect.top + this.mountedRect.height;
+      },
+      handleTouchStart(event) {
+        this.mountedRect = this.$refs.boardsContent.getBoundingClientRect();
+        const positionX = event.changedTouches[0].clientX;
+        const positionY = event.changedTouches[0].clientY;
+
+        if (this.isHorizontallyInside(positionX) && this.isVerticallyInside(positionY)) {
+          this.initialTouchPosition = positionX;
+          this.canMove = true;
+        }
+      },
+      handleTouchEnd(event) {
+        if (this.canMove) {
+          const positionX = event.changedTouches[0].clientX;
+
+          const difference = this.initialTouchPosition - positionX;
+
+          const action = difference > 0
+            ? 'moveNextBoard'
+            : 'movePrevBoard';
+  
+          if (Math.abs(difference) > this.mdSwipeDistance) {
+            this[action]();
+          }
+
+          this.canMove = false;
+          this.initialTouchPosition = null;
+        }
       }
     },
     mounted() {
@@ -287,12 +326,20 @@
 
           this.setActiveBoard(this.boardList[firstBoard]);
         }
-      });
 
-      /* automatic behaviour */
-      if (this.mdAuto) {
-        this.start();
-      }
+        if (this.mdSwipeable) {
+          this.mountedRect = this.$refs.boardsContent.getBoundingClientRect();
+          this.initialTouchPosition = null;
+          this.canMove = false;
+
+          document.addEventListener('touchstart', this.handleTouchStart);
+          document.addEventListener('touchend', this.handleTouchEnd);
+        }
+
+        if (this.mdAuto) {
+          this.start();
+        }
+      });
     },
     beforeDestroy() {
       if (this.parentObserver) {
@@ -304,6 +351,12 @@
       }
 
       window.removeEventListener('resize', this.calculateOnResize);
+
+      if (this.mdSwipeable) {
+        document.removeEventListener('touchstart', this.handleTouchStart);
+        document.removeEventListener('touchend', this.handleTouchEnd);
+      }
+
     }
   };
 </script>

From 8f19e8b049b60773267019f09402ca77cd08521b Mon Sep 17 00:00:00 2001
From: "TECNOSYLVA\\fgarcia" <fernando.garcia@xeridia.com>
Date: Fri, 24 Feb 2017 13:39:26 +0100
Subject: [PATCH 7/7] Added 100% height to accomodate full screen sliders.

---
 src/components/mdOnboarding/mdBoards.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/mdOnboarding/mdBoards.scss b/src/components/mdOnboarding/mdBoards.scss
index f313bdb..1f73c1e 100644
--- a/src/components/mdOnboarding/mdBoards.scss
+++ b/src/components/mdOnboarding/mdBoards.scss
@@ -5,7 +5,7 @@ $board-max-width: 24px;
 
 .md-boards {
   width: 100%;
-  height: 100%;
+  height: 100% !important;
   display: flex;
   flex-flow: column;
   position: relative;
@@ -78,13 +78,14 @@ $board-max-width: 24px;
 
   .md-boards-content {
     width: 100%;
-    height: 0;
+    height: 100% !important;
     position: relative;
     overflow: hidden;
   }
 
   .md-boards-wrapper {
     width: 9999em;
+    height: 100% !important;
     position: absolute;
     top: 0;
     right: 0;