Merge remote-tracking branch 'origin' into docs/add-ads

* origin:
  docs: fix 2 wrong property names with autocomplete docs (#2006)
  fix(MdTable): undefined table sorting #1906 (#2012)
  docs: fix dynamic tooltip text to show bottom instead of top (#2013)
  refactor(MdDatepicker): upgrade date-fns (#2037)
  fix(MdDatepicker): positioning when used inside flex container (#2036)
  fix(MdSelect): infinite loop error, when no v-model provided (#2035)
  fix(MdApp): normalized component's tag before checking to match slot … (#1994)
  chore: some misspellings in config.js (#1986)
  fixFixed non unique ids on MdSelect (#2001)
  fix(MdInput): invert password on-off icons (#2008)
  test: fix test selectors for checkbox and switch (#2009)
  docs: add default theme as a suggestion (#2043)
  Fixed md-wave transition (#2034)
  fix(MdRipple): fixed missing ripple effect (#2059)

.gitignore

@@ -7,3 +7,4 @@ coverage/
 yarn-debug.log
 npm-debug.log
 .vscode
+.idea

build/config.js

@@ -8,11 +8,11 @@ export const resolvePath = (...args) => {
 }
 
 export const getRandomInt = (min, max) => {
-  const minNotAlowed = 8080
-  const maxNotAlowed = 8090
+  const minNotAllowed = 8080
+  const maxNotAllowed = 8090
   const generated = Math.floor(Math.random() * (max - min + 1)) + min
 
-  if (generated >= minNotAlowed && generated <= maxNotAlowed) {
+  if (generated >= minNotAllowed && generated <= maxNotAllowed) {
     return getRandomInt(min, max)
   }
 

docs/app/pages/Components/Autocomplete/examples/AutocompleteSearch.vue

@@ -1,20 +1,20 @@
 <template>
   <div>
     <strong>Fuzzy Search:</strong>
-    <md-autocomplete v-model="selectedCountry" :md-options="employees">
+    <md-autocomplete v-model="selectedEmployee" :md-options="employees">
       <label>Manager</label>
 
       <template slot="md-autocomplete-item" slot-scope="{ item, term }">
         <md-highlight-text :md-term="term">{{ item }}</md-highlight-text>
       </template>
 
       <template slot="md-autocomplete-empty" slot-scope="{ term }">
-        No countries matching "{{ term }}" were found. <a @click="noop()">Create a new</a> one!
+        No employees matching "{{ term }}" were found. <a @click="noop()">Create a new</a> one!
       </template>
     </md-autocomplete>
 
     <strong>Normal Search:</strong>
-    <md-autocomplete v-model="selectedEmployee" :md-options="countries" :md-fuzzy-search="false">
+    <md-autocomplete v-model="selectedCountry" :md-options="countries" :md-fuzzy-search="false">
       <label>Country</label>
 
       <template slot="md-autocomplete-item" slot-scope="{ item, term }">
@@ -32,8 +32,8 @@
   export default {
     name: 'AutocompleteSearch',
     data: () => ({
-      selectedCountry: null,
       selectedEmployee: null,
+      selectedCountry: null,
       countries: [
         'Algeria',
         'Argentina',

docs/app/pages/Components/Datepicker/examples/BasicDatepicker.vue

@@ -12,10 +12,10 @@
     <md-field>
       <label for="movie">Date format</label>
       <md-select v-model="dateFormat">
-        <md-option value="YYYY-MM-DD">default</md-option>
-        <md-option value="YYYY/MM/DD">YYYY/MM/DD</md-option>
-        <md-option value="DD/MM/YYYY">DD/MM/YYYY</md-option>
-        <md-option value="MM/DD/YYYY">MM/DD/YYYY</md-option>
+        <md-option value="yyyy-MM-dd">default</md-option>
+        <md-option value="yyyy/MM/dd">yyyy/MM/dd</md-option>
+        <md-option value="dd/MM/yyyy">dd/MM/yyyy</md-option>
+        <md-option value="MM/dd/yyyy">MM/dd/yyyy</md-option>
       </md-select>
       <span class="md-helper-text">This config is global.</span>
     </md-field>

docs/app/pages/Components/Datepicker/examples/MultiTypesDatepicker.vue

@@ -46,7 +46,7 @@
   export default {
     name: 'MultiTypesDatepicker',
     data () {
-      let dateFormat = this.$material.locale.dateFormat || 'YYYY-MM-DD'
+      let dateFormat = this.$material.locale.dateFormat || 'yyyy-MM-dd'
       let now = new Date()
 
       return {
@@ -82,7 +82,7 @@
         }
       },
       dateFormat () {
-        return this.$material.locale.dateFormat || 'YYYY-MM-DD'
+        return this.$material.locale.dateFormat || 'yyyy-MM-dd'
       },
       mdType () {
         switch (this.mdTypeValue) {

docs/app/pages/Components/Tooltip/examples/Dynamically.vue

@@ -2,7 +2,7 @@
   <div>
     <md-avatar>
       <img src="/assets/examples/avatar.png" alt="Avatar">
-      <md-tooltip :md-active.sync="tooltipActive">Top</md-tooltip>
+      <md-tooltip :md-active.sync="tooltipActive">Bottom</md-tooltip>
     </md-avatar>
 
     <md-button class="md-raised md-primary" @click="tooltipActive = !tooltipActive">Toggle Tooltip</md-button>

docs/app/pages/Configuration.vue

@@ -8,14 +8,14 @@
         import Vue from 'vue'
 
         // change single option
-        Vue.material.locale.dateFormat = 'DD/MM/YYYY'
+        Vue.material.locale.dateFormat = 'dd/MM/yyyy'
 
         // change multiple options
         Vue.material = {
           ...Vue.material,
           locale: {
             ...Vue.material.locale,
-            dateFormat: 'DD/MM/YYYY',
+            dateFormat: 'dd/MM/yyyy',
             firstDayOfAWeek: 1
           }
         }
@@ -51,7 +51,7 @@
             endYear: 2099,
 
             // date format for date picker
-            dateFormat: 'YYYY-MM-DD',
+            dateFormat: 'yyyy-MM-dd',
 
             // i18n strings
             days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],

docs/app/pages/GettingStarted.vue

@@ -34,6 +34,7 @@
         import Vue from 'vue'
         import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
         import 'vue-material/dist/vue-material.min.css'
+        import 'vue-material/dist/theme/default.css'
 
         Vue.use(MdButton)
         Vue.use(MdContent)

package.json

@@ -66,7 +66,7 @@
     "css-loader": "^0.28.11",
     "css-mqpacker": "^6.0.2",
     "cz-conventional-changelog": "^2.1.0",
-    "date-fns": "^2.0.0-alpha.7",
+    "date-fns": "^2.0.0-alpha.27",
     "deepmerge": "^3.2.0",
     "eslint": "^4.19.1",
     "eslint-config-standard": "^11.0.0",

src/components/MdApp/MdApp.vue

@@ -10,8 +10,12 @@
     'md-app-content'
   ]
 
+  function normilizeTagName (tagName) {
+    return tagName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+  }
+
   function isValidChild (componentOptions) {
-    return componentOptions && componentTypes.includes(componentOptions.tag)
+    return componentOptions && componentTypes.includes(normilizeTagName(componentOptions.tag))
   }
 
   function isRightDrawer (propsData) {
@@ -42,7 +46,7 @@
         const componentOptions = child.componentOptions
 
         if (shouldRenderSlot(data, componentOptions)) {
-          const slotName = data.slot || componentOptions.tag
+          const slotName = data.slot || normilizeTagName(componentOptions.tag)
           child.data.slot = slotName
 
           if (slotName === 'md-app-drawer') {
@@ -79,7 +83,7 @@
 
   function getDrawers (children) {
     const drawerVnodes = children.filter(child => {
-      const tag = child.data.slot || child.componentOptions.tag
+      const tag = child.data.slot || normilizeTagName(child.componentOptions.tag)
       return tag === 'md-app-drawer'
     })
     return drawerVnodes.length ? drawerVnodes : []

src/components/MdCheckbox/MdCheckbox.test.js

@@ -113,12 +113,12 @@ test('should add and remove a value from model when model is an array by clickin
       model: []
     }
   })
-  const label = wrapper.find('label')[0]
+  const container = wrapper.find('.md-checkbox-container')[0]
 
-  label.trigger('click')
+  container.trigger('click')
   expect(wrapper.data().model).toEqual(['1'])
 
-  label.trigger('click')
+  container.trigger('click')
   expect(wrapper.data().model).toEqual([])
 })
 
@@ -134,11 +134,11 @@ test('should toggle a checked class when checked', async () => {
     }
   })
   const checkbox = wrapper.find(MdCheckbox)[0]
-  const label = wrapper.find('label')[0]
+  const container = wrapper.find('.md-checkbox-container')[0]
 
   expect(checkbox.hasClass('md-checked')).toBe(true)
 
-  label.trigger('click')
+  container.trigger('click')
   await checkbox.vm.$nextTick()
   expect(checkbox.hasClass('md-checked')).toBe(false)
 })

src/components/MdDatepicker/MdDatepicker.vue

@@ -84,7 +84,7 @@
           : 'date'
       },
       dateFormat () {
-        return this.locale.dateFormat || 'YYYY-MM-DD'
+        return this.locale.dateFormat || 'yyyy-MM-dd'
       },
       modelType () {
         if (this.isModelTypeString) {
@@ -120,12 +120,12 @@
         return parsedDate && isValid(parsedDate) ? parsedDate : null
       },
       pattern () {
-        return this.dateFormat.replace(/YYYY|MM|DD/g, match => {
+        return this.dateFormat.replace(/yyyy|MM|dd/g, match => {
           switch (match) {
-          case 'YYYY':
+          case 'yyyy':
             return '[0-9]{4}'
           case 'MM':
-          case 'DD':
+          case 'dd':
             return '[0-9]{2}'
           }
         })
@@ -172,7 +172,7 @@
       },
       dateFormat () {
         if (this.localDate) {
-          this.inputDate = format(this.inputDate, this.dateFormat)
+          this.inputDate = format(this.localDate, this.dateFormat)
         }
       }
     },

src/components/MdDatepicker/MdDatepickerDialog.vue

@@ -366,6 +366,7 @@
     backface-visibility: hidden;
     pointer-events: auto;
     transform-origin: top left;
+    flex-shrink: 0;
     transition: opacity .2s $md-transition-stand-timing,
                 transform .35s $md-transition-stand-timing;
     will-change: opacity, transform, left, top;

src/components/MdField/MdField.vue

@@ -12,8 +12,8 @@
 
     <transition name="md-input-action" appear>
       <md-button tabindex="-1" class="md-icon-button md-dense md-input-action md-toggle-password" @click="togglePassword" v-if="hasPasswordToggle">
-        <md-password-off-icon v-if="MdField.togglePassword" />
-        <md-password-on-icon v-else />
+        <md-password-on-icon v-if="MdField.togglePassword" />
+        <md-password-off-icon v-else />
       </md-button>
     </transition>
   </div>
@@ -208,7 +208,6 @@
       font-family: inherit;
       font-size: 16px;
       line-height: $md-input-height;
-      box-shadow: 0px 0px transparent; // firefox required fix
 
       &[type="date"] {
         font-size: 16px;

src/components/MdField/MdSelect/MdSelect.vue

@@ -108,7 +108,7 @@
         return {
           ...this.$attrs,
           name: this.name,
-          id: this.id
+          id: undefined
         }
       },
       inputListeners () {
@@ -283,9 +283,9 @@
         let isArray = Array.isArray(this.localValue)
 
         if (this.multiple && !isArray) {
-          this.localValue = this.setLocalValueIfMultiple()
+          this.setLocalValueIfMultiple()
         } else if (!this.multiple && isArray) {
-          this.localValue = this.setLocalValueIfNotMultiple()
+          this.setLocalValueIfNotMultiple()
         }
       },
       emitSelected (value) {

src/components/MdRipple/MdWave.vue

@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-ripple" @after-enter="end">
+  <transition name="md-ripple" @after-enter="end" appear>
     <span v-if="animating" />
   </transition>
 </template>
@@ -10,16 +10,19 @@
     name: 'MdWave',
     data () {
       return {
-        animating: true
+        animating: false
       }
     },
     props: {
       waveClasses: null,
       waveStyles: null
     },
+    mounted: function() {
+      this.animating = true;
+    },
     methods: {
       end () {
-        this.animating = null
+        this.animating = false
         this.$emit('md-end')
       }
     }

src/components/MdSwitch/MdSwitch.test.js

@@ -113,12 +113,12 @@ test('should add and remove a value from model when model is an array by clickin
       model: []
     }
   })
-  const label = wrapper.find('label')[0]
+  const container = wrapper.find('.md-switch-container')[0]
 
-  label.trigger('click')
+  container.trigger('click')
   expect(wrapper.data().model).toEqual(['1'])
 
-  label.trigger('click')
+  container.trigger('click')
   expect(wrapper.data().model).toEqual([])
 })
 
@@ -134,11 +134,11 @@ test('should toggle a checked class when checked', async () => {
     }
   })
   const toggle = wrapper.find(MdSwitch)[0]
-  const label = wrapper.find('label')[0]
+  const container = wrapper.find('.md-switch-container')[0]
 
   expect(toggle.hasClass('md-checked')).toBe(true)
 
-  label.trigger('click')
+  container.trigger('click')
   await toggle.vm.$nextTick()
   expect(toggle.hasClass('md-checked')).toBe(false)
 })

src/components/MdTable/MdTable.vue

@@ -112,6 +112,14 @@
             const isAsc = this.MdTable.sortOrder === 'asc'
             let isNumber = typeof aAttr === 'number'
 
+            if (!aAttr) {
+              return 1;
+            }
+
+            if(!bAttr) {
+              return -1
+            }
+
             if (isNumber) {
               return isAsc ? (aAttr - bAttr) : (bAttr - aAttr)
             }

src/material.js

@@ -9,7 +9,7 @@ const init = () => {
     locale: {
       startYear: 1900,
       endYear: 2099,
-      dateFormat: 'YYYY-MM-DD',
+      dateFormat: 'yyyy-MM-dd',
       days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
       shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
       shorterDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],