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)

Author: marcosmoura

.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 : []