v1.0.0-beta-14 (#2223)

* fix(MdRadio): internal radio not being checked (#2063)

* fix(MdMenu): unexpected close on item click (#2062)

* docs: add funding

* test: add a "testURL" field to jest config (#2082)

fixes the " SecurityError: localStorage is not available for opaque
origins"  error message that everyone seems to get on their PRs.

Using the solution provided here jestjs/jest#3630

* Docs/restyle (#2139)

* Changed 'roboto mono' to 'roboto'

* Changed code fund position to bottom right

* updates

Added ‘supported by Creative Tim’ in About page
Added open collective

* added links to header

* Removed disclaimer, added sponsors, changed footer

* Add premium-themes page and link to it from the footer

* Added products to premium themes page

* Finished premium page

* Finished installation/usage/premium-themes section

* Installed vue-github-buttons

* Added GitHub star button

* Added license, download and chat buttons

* Changed order in gh star button

* Changed page transition

* Added vue-toc

* Style modified for toc

* Added ids on getting started for vue-toc

* Added ids on themes-congifuration for vue-toc

* Added ids on layouts for vue-toc

* Added ids on typography

* Added ids on components->app for vue-toc

* Added ids on buttomBar for vue-toc

* Added ids on Button for vue-toc

* Added ids on Card for vue-toc

* Added ids on datepicker for vue-toc

* Added ids on Dialog for vue-toc

* Added ids on Drawer for vue-toc

* Added ids on autocomplete for vue-toc

* Added ids on Chips for vue-toc

* Added ids on Input for vue-toc

* Added ids on Icon for vue-toc

* Added ids on List for vue-toc

* Added ids on Menu for vue-toc

* Added ids on speedDial for vue-toc

* Added ids on steppers for vue-toc

* Added ids on table for vue-toc

* Added ids on Tabs for vue-toc

* Added ids on toolbar for vue-toc

* Added ids on Tooltip for vue-toc

* Updated license

* Added key to vue-toc

* Small change

* Changed codeinwp logo

* updates

* Css changes for logo and gh-button

* Added more space between buttons

* Removed arrow down & nabber buttons hidden on mobile

* style changes, added premium themes in navbar, centered premium themes

* Cards change

* toc style

* Changed style for code-fund

* restyle codefund

* Restyled home premium section

* Commented contribuitors section

* Changed Patreon text to Open Collective

* Changed home premium background color

* Removed open collective

* Added link to premium-themes from themes image

* Added target blank

* Restyled vue-toc

* added refs

* Responsive changes

* Changed margin on title

* Added custom development link

* Added links from sponsors

* lint fix

* add margin left

* Updated footer links (#2145)

* Docs/restyle (#2150)

* Added dropdown in nabber

* Added sponsors

* restyled codefund

* Codefund restyle

* Restyled footer

* Restyled footer

* Footer restyle on responsive

* Add "new" tag and modify logo in footer

* Cleaned console.log test texts

* Added arrow on dropdown

* Modified sponsors and dropdown

* Codefund on responsive

* Footer restyle on responsive

* Added tag manager (#2153)

* [MdTabs] fix mdActiveTab not selecting set tab on load (#2164)

content and indicator were not initializing to the set active tab

* [core] RTL support #80 (#2181)

added rtl support to tabs component with mdIsRtl prop

* update the work with Vue router page grammar (#2100)

* docs: fix typo (#2080)

* Update About.vue (#2117)

Fix typo

* docs(Tabs): add prop `md-is-rtl` to tabs table component (#2198)

* docs(Tabs): add prop `md-is-rtl` to tabs table component

* docs(Tabs): prop `md-is-rtl` move last item in table

* Fix typo (#1819)

* Fix typo

I'm pretty sure you meant to write here `md-alignment-[vertical]-[horizontal]`, but in the docs it says `md-alignment-[horizontal]-[vertical]`. That threw me off for a bit.

Overall, this is a super awesome package! I love working with it!!

* fix typo in api section

I noticed that at the bottom of the page, in the API section, the order also needs to be reversed. "x" should refer to horizontal, and "y" should refer to vertical.

Co-authored-by: dragosct <17456857+dragosct10@users.noreply.github.com>

* Added index to "md-table-row" slot-scope (#2064)

Co-authored-by: hastom <aklyavlin@onvis.ru>

* Improved grammar in Table.vue (docs) (#2178)

* build: 1.0.0-beta-12

* build: release

* build: changelog 1.0.0-beta-12

* Moving observers to setTimeout (#2201)

Co-authored-by: hastom <aklyavlin@onvis.ru>

* fix: Drawer detection (#1929)

* fix(MdDialog):change position principle from transform to flex wrapper (#2023)

* Changed dialog positioning to flex

* Revert to transition root element

Co-authored-by: hastom <aklyavlin@onvis.ru>

* Fixed dialog transitions (#2021)

Co-authored-by: hastom <aklyavlin@onvis.ru>
Co-authored-by: dragosct <17456857+dragosct10@users.noreply.github.com>

* Prevent tabs overflow inside dialog content (#2065)

Co-authored-by: hastom <aklyavlin@onvis.ru>

* fix(MdApp): remove height 100 to make md-app-content span content height (#1957)

* remove height 100 to make md-app-content span content height

* use min-height of 100 instead of height

Co-authored-by: xxRockOnxx <xxRockOnxx@users.noreply.github.com>

* build: 1.0.0-beta-13

* build: release

* build: changelog 1.0.0-beta-13

* fix(MdDialog): position centered

* fix(MdDialog): revert

* Datepicker now emits the md-clear event when cleared, and has the option to not be clearable (#1967)

* fix(components,doc): fix the character counter not reseting when (#2081)

reseting the form

fixes #2054

Co-authored-by: BOUTIGNY Adrien <adrien.boutigny@akka.eu>

* Fix checking mouseevent in IE11 (#2091)

* fix undefined dom.contains in IE11 (#2090)

* Allow false as a value for an MdOption (#2183)

* Auto insert in MdChips after focusout (#2189)

* Implemented the function of automatically adding a value in the MdChips component, in case of loss of focus

* fixed code format

* Fix/md dialog position centered (#2211)

* docs(Tabs): add prop `md-is-rtl` to tabs table component

* docs(Tabs): add prop `md-is-rtl` to tabs table component

* docs(Tabs): prop `md-is-rtl` move last item in table

* docs(Tabs): prop `md-is-rtl` move last item in table

* fix(MdDialog): position centered

* fix(MdStep): set tabindex for not active step (#2215)

* fix(MdStep): set tabindex for not active step

* feat(MdStep): add v-show to hide content

Co-authored-by: Samuell1 <samuell.patro@gmail.com>

* fix(components,doc): fix the character counter not reseting when (#2213)

reseting the form

fixes #2054

Co-authored-by: BOUTIGNY Adrien <adrien.boutigny@akka.eu>
Co-authored-by: hastom <aklyavlin@onvis.ru>

* Fix checking mouseevent in IE11 (#2212)

Co-authored-by: kmsheng <kmsh3ng@gmail.com>
Co-authored-by: hastom <aklyavlin@onvis.ru>

* Revert "fix undefined dom.contains in IE11 (#2090)" (#2220)

This reverts commit 05649bb.

* Util to replace Node.contains (#2214)

* fix undefined dom.contains in IE11

* Added util to polyfill Node.contains

Co-authored-by: kmsheng <kmsh3ng@gmail.com>
Co-authored-by: hastom <aklyavlin@onvis.ru>

Co-authored-by: hastom <hastomit@gmail.com>
Co-authored-by: Marcos Moura <marcosvmmoura@gmail.com>
Co-authored-by: Adrien Boutigny <mounch-man@hotmail.fr>
Co-authored-by: rarestoma <tomairares@gmail.com>
Co-authored-by: gaby64 <gaby_64@live.ca>
Co-authored-by: tom dorofeyev <tomdorofey@gmail.com>
Co-authored-by: Brett Kinnamon <b.kinnamon@icloud.com>
Co-authored-by: Jason Cooke <Jason-Cooke@users.noreply.github.com>
Co-authored-by: Amit Gurbani <amit1994.gurbani@gmail.com>
Co-authored-by: Avraham Appel <33736292+avrahamappel@users.noreply.github.com>
Co-authored-by: hastom <aklyavlin@onvis.ru>
Co-authored-by: starsky135 <starsky135@gmail.com>
Co-authored-by: Marcu Beniamin <marqbeniamin@yahoo.com>
Co-authored-by: Hugome <Hugome@users.noreply.github.com>
Co-authored-by: Lemuel Flores <is101.lemuel@gmail.com>
Co-authored-by: xxRockOnxx <xxRockOnxx@users.noreply.github.com>
Co-authored-by: Shira Gold <shira14@gmail.com>
Co-authored-by: BOUTIGNY Adrien <adrien.boutigny@akka.eu>
Co-authored-by: kmsheng <kmsh3ng@gmail.com>
Co-authored-by: Jaryd Carolin <jaryd@upgear.com.au>
Co-authored-by: Konstantin Mohov <htmlmak@gmail.com>
Co-authored-by: Oliver Ni <oliver.ni@gmail.com>
Co-authored-by: Samuell1 <samuell.patro@gmail.com>

docs/app/pages/Components/Chips/Chips.vue

@@ -5,6 +5,7 @@
 <example src="./examples/DuplicatedFeedback.vue" />
 <example src="./examples/Format.vue" />
 <example src="./examples/Themed.vue" />
+<example src="./examples/AutoInsert.vue" />
 
 <template>
   <page-container centered :title="$t('pages.chips.title')">
@@ -61,6 +62,13 @@
       <code-example title="Formatted chips" :component="examples['format']" />
     </div>
 
+    <div class="page-container-section">
+      <h2 id="auto-insert">Auto insert</h2>
+
+      <p>Automatic value entry when focus is lost:</p>
+      <code-example title="Auto insert" :component="examples['auto-insert']" />
+    </div>
+
     <div class="page-container-section">
       <h2 id="hue-colors">Hue Colors</h2>
 

docs/app/pages/Components/Chips/examples/AutoInsert.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <md-chips class="md-primary" v-model="emails" md-placeholder="Enter a email" :md-auto-insert="true">
+      <label>Recipients</label>
+    </md-chips>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AutoInsert',
+  data: () => ({
+    emails: [
+      'John.Smith@example.com',
+    ]
+  })
+}
+</script>

docs/app/pages/Components/Input/examples/Counters.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <form>
     <md-field>
       <label>Counter</label>
       <md-input v-model="regular" md-counter="30"></md-input>
@@ -24,7 +24,9 @@
       <label>Textarea</label>
       <md-textarea v-model="textarea" md-counter="80"></md-textarea>
     </md-field>
-  </div>
+
+    <md-button class="md-raised" type="reset">RESET</md-button>
+  </form>
 </template>
 
 <script>

src/components/MdChips/MdChips.vue

@@ -24,7 +24,8 @@
       :placeholder="mdPlaceholder"
       @input="handleInput"
       @keydown.enter="insertChip"
-      @keydown.8="handleBackRemove">
+      @keydown.8="handleBackRemove"
+      @focusout="handleFocusOut">
     </md-input>
   </md-field>
 </template>
@@ -54,6 +55,10 @@
       },
       mdPlaceholder: [String, Number],
       mdStatic: Boolean,
+      mdAutoInsert: {
+        type: Boolean,
+        default: false
+      },
       mdLimit: Number,
       mdCheckDuplicated: {
         type: Boolean,
@@ -127,7 +132,12 @@
           this.duplicatedChip = null
         }
       },
-      checkDuplicated () {
+      handleFocusOut({ target }) {
+        if (this.mdAutoInsert) {
+          this.insertChip(target)
+        }
+      },
+      checkDuplicated() {
         if (!this.value.includes(this.formattedInputValue)) {
           this.duplicatedChip = null
           return false

src/components/MdDatepicker/MdDatepicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <md-field :class="['md-datepicker', { 'md-native': !this.mdOverrideNative }]" md-clearable>
+  <md-field :class="['md-datepicker', { 'md-native': !this.mdOverrideNative }]" :md-clearable="mdClearable" @md-clear="onClear">
     <md-date-icon class="md-date-icon" @click.native="toggleDialog" />
     <md-input :type="type" ref="input" v-model="inputDate" @focus.native="onFocus" :pattern="pattern" />
 
@@ -65,6 +65,10 @@
       MdDebounce: {
         type: Number,
         default: 1000
+      },
+      mdClearable: {
+        type: Boolean,
+        default: true
       }
     },
     data: () => ({
@@ -221,6 +225,9 @@
         } else {
           Vue.util.warn(`The datepicker value is not a valid date. Given value: ${this.value}`)
         }
+      },
+      onClear() {
+        this.$emit('md-clear')
       }
     },
     created () {

src/components/MdDialog/MdDialog.vue

@@ -162,7 +162,6 @@
     backface-visibility: hidden;
     pointer-events: auto;
     opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
     transform-origin: center center;
     transition: opacity $opacity-transition-duration $md-transition-stand-timing, transform $transform-transition-duration $md-transition-stand-timing;
     will-change: opacity, transform;

src/components/MdField/MdFieldMixin.js

@@ -95,6 +95,23 @@ export default {
         }
       }
     },
+    setFormResetListener () {
+      if (!this.$el.form) {
+        return
+      }
+      const parentForm = this.$el.form
+      parentForm.addEventListener('reset', this.onParentFormReset)
+    },
+    removeFormResetListener () {
+      if (!this.$el.form) {
+        return
+      }
+      const parentForm = this.$el.form
+      parentForm.removeEventListener('reset', this.onParentFormReset)
+    },
+    onParentFormReset () {
+      this.clearField()
+    },
     setFieldValue () {
       this.MdField.value = this.model
     },
@@ -130,5 +147,9 @@ export default {
   },
   mounted () {
     this.setLabelFor()
+    this.setFormResetListener()
+  },
+  beforeDestroy () {
+    this.removeFormResetListener()
   }
 }

src/components/MdField/MdSelect/MdOption.vue

@@ -39,7 +39,7 @@
         return this.MdOptgroup.disabled || this.disabled
       },
       key () {
-        let isSet = (this.value || this.value === 0)
+        let isSet = (this.value || this.value === 0 || this.value === false)
         return isSet ? this.value : this.uniqueId
       },
       inputLabel () {

src/components/MdMenu/MdMenuContent.vue

@@ -22,6 +22,7 @@
   import MdPopover from 'components/MdPopover/MdPopover'
   import MdFocusTrap from 'components/MdFocusTrap/MdFocusTrap'
   import MdList from 'components/MdList/MdList'
+  import MdContains from 'core/utils/MdContains'
 
   export default new MdComponent({
     name: 'MdMenuContent',
@@ -193,13 +194,10 @@
         return Boolean(alignTrigger || offsetY || offsetX)
       },
       isMenu ({ target }) {
-        return this.MdMenu.$el ? this.MdMenu.$el.contains(target) : false
+        return this.MdMenu.$el ? MdContains(this.MdMenu.$el, target) : false
       },
       isMenuContentEl ({ target }) {
-        return this.$refs.menu ? this.$refs.menu.contains(target) : false
-      },
-      isBackdropExpectMenu ($event) {
-        return !this.$el.contains($event.target) && !this.isMenu($event)
+        return this.$refs.menu ? MdContains(this.$refs.menu, target) : false
       },
       createClickEventObserver () {
         if (document) {

src/components/MdRipple/MdRipple.vue

@@ -52,7 +52,7 @@
     watch: {
       mdActive (active) {
         const isBoolean = typeof active === 'boolean'
-        const isEvent = active.constructor.toString().match(/function (\w*)/)[1].toLowerCase() === 'mouseevent'
+        const isEvent = active instanceof MouseEvent
 
         if (isBoolean && this.mdCentered && active) {
           this.startRipple({

src/components/MdSteppers/MdStep.vue

@@ -2,7 +2,7 @@
   <div class="md-stepper">
     <md-step-header v-if="MdSteppers.isVertical" :index="id" />
 
-    <div class="md-stepper-content" :class="{ 'md-active': !MdSteppers.syncRoute && id === MdSteppers.activeStep }">
+    <div :class="['md-stepper-content', { 'md-active': isActive }]" :tabindex="tabIndex" v-show="isActive">
       <slot />
     </div>
   </div>
@@ -43,6 +43,16 @@
         }
       }
     },
+    computed: {
+      isActive () {
+        return this.id === this.MdSteppers.activeStep
+      },
+      tabIndex () {
+        return !this.isActive
+          ? -1
+          : false
+      }
+    },
     methods: {
       getPropValues () {
         const propNames = Object.keys(this.$options.props)

src/core/utils/MdContains.js

@@ -0,0 +1,7 @@
+export default (parent, child) => {
+  if (typeof Node.prototype.contains === 'function') {
+    return Node.prototype.contains.call(parent, child)
+  } else {
+    return (Node.prototype.compareDocumentPosition.call(child, parent) & Node.prototype.DOCUMENT_POSITION_CONTAINS) !== 0
+  }
+}

yarn.lock

@@ -4425,6 +4425,11 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+format-thousands@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/format-thousands/-/format-thousands-1.1.1.tgz#7975bee30338d9006390da5831db0b41c323fbfa"
+  integrity sha1-eXW+4wM42QBjkNpYMdsLQcMj+/o=
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -7300,6 +7305,11 @@ node-fetch@1.6.3:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+node-fetch@^2.3.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
+  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
+
 node-gyp@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/node-gyp/-/node-gyp-3.8.0.tgz#540304261c330e80d0d5edce253a68cb3964218c"
@@ -10294,6 +10304,11 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
   integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==
 
+tslib@^1.9.3:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.2.tgz#9c79d83272c9a7aaf166f73915c9667ecdde3cc9"
+  integrity sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg==
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
@@ -10646,6 +10661,15 @@ vue-ga@^1.1.0:
   resolved "https://registry.yarnpkg.com/vue-ga/-/vue-ga-1.1.0.tgz#366fea37afb953b5b115e56feb1005cc6bd1e20e"
   integrity sha512-cnwIW75CwsqGZP62dFZt7e4/k9vhKsos3pJBBKkREXJ4bk2ePVgJiOeynhjvAtvyRzEmfsASfYMwzt0Dra/cng==
 
+vue-github-buttons@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/vue-github-buttons/-/vue-github-buttons-3.1.0.tgz#eaea2ba0b7e0df5a7fd1c61ba37dabf7553dd79a"
+  integrity sha512-x0b9bdhP5xZOD5kQ9+nnCzvKqVyHb4moqN2l06mjYB/k2WRdW5jiAWlneUgoPFwPvcqM40vrTDXVvBrS0MMlEQ==
+  dependencies:
+    format-thousands "^1.1.1"
+    node-fetch "^2.3.0"
+    tslib "^1.9.3"
+
 vue-hot-reload-api@^2.2.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.3.tgz#2756f46cb3258054c5f4723de8ae7e87302a1ccf"
@@ -10701,6 +10725,13 @@ vue-template-es2015-compiler@^1.5.3, vue-template-es2015-compiler@^1.6.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
+vue-toc@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/vue-toc/-/vue-toc-0.0.1.tgz#6a4dfa9c144445679705cd7b991a1a73ac080cc0"
+  integrity sha512-RZfVgLzk/kpEmk05ptvU/+x3TVo4Ai4BBARvV4iCurR9bJsAqnnrqwjEBKnEG+s6NT0yQ6EY0JMGViyOUGysDw==
+  dependencies:
+    vue "^2.6.10"
+
 vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"