create base mdImage component files

docs/src/App.vue

@@ -75,6 +75,10 @@
                   <router-link exact to="/components/icon">Icon</router-link>
                 </md-list-item>
 
+                <md-list-item class="md-inset">
+                  <router-link exact to="/components/image-loader">Image Loader</router-link>
+                </md-list-item>
+
                 <md-list-item class="md-inset">
                   <router-link exact to="/components/input">Input</router-link>
                 </md-list-item>

docs/src/pages/components/ImageLoader.vue

@@ -0,0 +1,53 @@
+<template>
+  <page-content page-title="Components - Image Loader">
+    <docs-component>
+      <div slot="description">
+        <p>Illustrations and photographs may load and transition in three phases by staggering opacity, exposure, and saturation levels.</p>
+      </div>
+
+      <div slot="api">
+        <api-table name="md-image">
+          <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="Default">
+          <div slot="demo">
+            <md-image md-src="https://storage.googleapis.com/material-design/publish/material_v_10/assets/0B7WCemMG6e0VNUdkX1d5NU5KYzg/patterns_loading_images.png"></md-image>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+
+    })
+  };
+</script>

docs/src/routes.js

@@ -15,6 +15,7 @@ const Checkbox = (resolve) => require(['./pages/components/Checkbox'], resolve);
 const Chips = (resolve) => require(['./pages/components/Chips'], resolve);
 const Dialog = (resolve) => require(['./pages/components/Dialog'], resolve);
 const Icon = (resolve) => require(['./pages/components/Icon'], resolve);
+const ImageLoader = (resolve) => require(['./pages/components/ImageLoader'], resolve);
 const InkRipple = (resolve) => require(['./pages/components/InkRipple'], resolve);
 const Input = (resolve) => require(['./pages/components/Input'], resolve);
 const List = (resolve) => require(['./pages/components/List'], resolve);
@@ -114,6 +115,11 @@ const components = [
     name: 'components:icon',
     component: Icon
   },
+  {
+    path: '/components/image-loader',
+    name: 'components:image-loader',
+    component: ImageLoader
+  },
   {
     path: '/components/ink-ripple',
     name: 'components:ink-ripple',

src/components/mdImage/index.js

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

src/components/mdImage/mdImage.scss

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

src/components/mdImage/mdImage.theme

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

src/components/mdImage/mdImage.vue

@@ -0,0 +1,32 @@
+<template>
+  <img :src="imageSrc" class="md-image">
+</template>
+
+<style lang="scss" src="./mdImage.scss"></style>
+
+<script>
+  export default {
+    props: {
+      mdSrc: String
+    },
+    data: () => ({
+      imageSrc: null
+    }),
+    watch: {
+
+    },
+    computed: {
+      classes() {
+        return {
+
+        };
+      }
+    },
+    methods: {
+
+    },
+    created() {
+      console.log(this.mdSrc);
+    }
+  };
+</script>

src/components/mdTabs/mdTabs.vue

@@ -134,10 +134,11 @@
         return idList.indexOf(id);
       },
       calculateIndicatorPos() {
-        if (this.$refs.tabHeader) {
+        let activeTab = this.$refs.tabHeader && this.$refs.tabHeader[this.activeTabNumber];
+
+        if (activeTab) {
           let tabsWidth = this.$el.offsetWidth;
-          let activeTab = this.$refs.tabHeader[this.activeTabNumber];
-          let left = activeTab ? activeTab.offsetLeft : 0;
+          let left = activeTab.offsetLeft;
           let right = tabsWidth - left - activeTab.offsetWidth;
 
           this.$refs.indicator.style.left = left + 'px';

src/index.js

@@ -10,6 +10,7 @@ import MdChips from './components/mdChips';
 import MdDialog from './components/mdDialog';
 import MdDivider from './components/mdDivider';
 import MdIcon from './components/mdIcon';
+import MdImage from './components/mdImage';
 import MdInputContainer from './components/mdInputContainer';
 import MdLayout from './components/mdLayout';
 import MdList from './components/mdList';
@@ -40,6 +41,7 @@ const options = {
   MdDialog,
   MdDivider,
   MdIcon,
+  MdImage,
   MdInputContainer,
   MdLayout,
   MdList,