WIP: the next version

.circleci/config.yml

@@ -5,22 +5,22 @@ jobs:
       - image: circleci/node:lts
     steps:
       - checkout
-      - run: npm ci
-      - run: npm run build:min
+      - run: yarn ci
+      - run: yarn run build:min
   test:
     docker:
       - image: circleci/node:lts
     steps:
       - checkout
-      - run: npm ci
-      - run: npm run test
+      - run: yarn ci
+      - run: yarn run test
   docs:
     docker:
       - image: circleci/node:lts
     steps:
       - checkout
-      - run: npm ci
-      - run: npm run docs:prod
+      - run: yarn ci
+      - run: yarn run docs:prod
       - persist_to_workspace:
           root: docs/.vuepress/
           paths: dist
@@ -37,7 +37,7 @@ jobs:
       - run:
           name: Install and configure dependencies
           command: |
-            npm install -D gh-pages
+            yarn install -D gh-pages
             git config user.email "ci-build@circleci.com"
             git config user.name "ci-build"
       - run: ./node_modules/.bin/gh-pages --dist docs/.vuepress/dist

.gitignore

@@ -1,7 +1,6 @@
 node_modules/
 .vscode/
 yarn-error.log
-yarn.lock
 reports/
 dist/
 .idea/

components/button/Button.vue

@@ -1,129 +1,133 @@
-<template>
-  <a
-    v-if="href"
-    :class="classes"
-    :href="href"
-    v-bind="$attrs"
-    role="button"
-    class="mdc-button"
-    v-on="$listeners"
-  >
-    <slot name="icon" />
-    <span class="mdc-button__label"><slot /></span>
-    <slot name="trailingIcon" />
-  </a>
-  <button
-    v-else
-    :class="classes"
-    v-bind="$attrs"
-    class="mdc-button"
-    v-on="$listeners"
-  >
-    <slot name="icon" />
-    <span class="mdc-button__label"><slot /></span>
-    <slot name="trailingIcon" />
-  </button>
-</template>
-
 <script>
 import { MDCRipple } from '@material/ripple'
 import { baseComponentMixin, themeClassMixin } from '../base'
 
 export default {
   mixins: [baseComponentMixin, themeClassMixin],
   props: {
+    /**
+     * Optional. Styles a contained button that is elevated above the surface.
+     */
     raised: {
       type: Boolean,
       default: false
     },
+    /**
+     * Optional. Styles a contained button that is flush with the surface.
+     */
     unelevated: {
       type: Boolean,
       default: false
     },
+    /**
+     * Optional. Styles an outlined button that is flush with the surface.
+     */
     outlined: {
       type: Boolean,
       default: false
     },
-    dense: {
-      type: Boolean,
-      default: false
-    },
     href: {
       type: String,
       default: ''
     },
     ripple: {
       type: Boolean,
       default: true
-    }
-  },
-  data () {
-    return {
-      mdcRipple: undefined,
-      slotObserver: undefined
-    }
-  },
-  computed: {
-    classes () {
-      return {
-        'mdc-button--raised': this.raised,
-        'mdc-button--unelevated': this.unelevated,
-        'mdc-button--outlined': this.outlined,
-        'mdc-button--dense': this.dense
-      }
+    },
+    unbounded: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
-    classes () {
-      this.reInstantiateRipple()
-    },
-    ripple () {
-      this.reInstantiateRipple()
+    unbounded (value) {
+      if (this.ripple) {
+        this.mdcRipple.unbounded = value
+      }
     }
   },
   mounted () {
-    this.updateSlot()
-    this.slotObserver = new MutationObserver(() => this.updateSlot())
-    this.slotObserver.observe(this.$el, {
-      childList: true,
-      subtree: true
-    })
-    if (this.ripple) this.mdcRipple = MDCRipple.attachTo(this.$el)
+    this.instantiate()
   },
-  beforeDestroy () {
-    this.slotObserver.disconnect()
-    if (this.mdcRipple) {
-      this.mdcRipple.destroy()
+  activated () {
+    this.instantiate()
+  },
+  beforeUpdate () {
+    // usually when user add or remove a class on the root DOM($el), this hook will be called and the ripple needs re-instantiation
+    // if only the slots change, it doesn't have to re-instantiate
+    // it's hard to judge, so re-instantiate it whatever
+    this.destroy()
+  },
+  updated () {
+    if (this.ripple) {
+      this.instantiate()
     }
   },
+  beforeDestroy () {
+    this.destroy()
+  },
+  deactivated () {
+    this.destroy()
+  },
   methods: {
-    updateSlot () {
-      if (this.$slots.icon) {
-        this.$slots.icon.map(n => {
-          n.elm.classList.add('mdc-button__icon')
-          n.elm.setAttribute('aria-hidden', 'true')
-        })
-      }
-      if (this.$slots.trailingIcon) {
-        this.$slots.trailingIcon.map(n => {
-          n.elm.classList.add('mdc-button__icon')
-          n.elm.setAttribute('aria-hidden', 'true')
-        })
+    instantiate () {
+      if (this.ripple && this.mdcRipple == null) {
+        this.mdcRipple = MDCRipple.attachTo(this.$el)
+        this.mdcRipple.unbounded = this.unbounded
       }
     },
-    reInstantiateRipple () {
-      if (this.ripple) {
-        if (this.mdcRipple) {
-          this.mdcRipple.destroy()
-        }
-        MDCRipple.attachTo(this.$el)
-      } else {
-        if (this.mdcRipple) {
-          this.mdcRipple.destroy()
-        }
-        this.mdcRipple = undefined
+    destroy () {
+      if (this.mdcRipple != null && typeof this.mdcRipple === 'object' && typeof this.mdcRipple.destroy === 'function') {
+        this.mdcRipple.destroy()
+        this.mdcRipple = null
+      }
+    }
+  },
+  render (h) {
+    let tag = 'button'
+    const data = {
+      class: {
+        'mdc-button': true,
+        'mdc-button--raised': this.raised,
+        'mdc-button--unelevated': this.unelevated,
+        'mdc-button--outlined': this.outlined
+      },
+      attrs: this.$attrs,
+      on: this.$listeners
+    }
+    if (this.href.length > 0) {
+      tag = 'a'
+      data.attrs.href = this.href
+    }
+    const children = [h('div', {
+      staticClass: 'mdc-button__ripple'
+    })]
+    const leadingIcon = this.$scopedSlots.leadingIcon ? this.$scopedSlots.leadingIcon().filter(i => i.text == null && !i.isComment) : null
+    if (leadingIcon != null && leadingIcon.length > 0) {
+      if (leadingIcon[0].data.class == null) leadingIcon[0].data.class = {}
+      leadingIcon[0].data.class['mdc-button__icon'] = true
+      if (leadingIcon[0].data.attrs == null) leadingIcon[0].data.attrs = {}
+      leadingIcon[0].data.attrs['aria-hidden'] = 'true'
+      children.push(leadingIcon[0])
+    }
+    children.push(h('span', {
+      class: {
+        'mdc-button__label': true
       }
+    }, this.$scopedSlots.default()))
+    const trailingIcon = this.$scopedSlots.trailingIcon ? this.$scopedSlots.trailingIcon().filter(i => i.text == null && !i.isComment) : null
+    if (trailingIcon != null && trailingIcon.length > 0) {
+      if (trailingIcon[0].data.class == null) trailingIcon[0].data.class = {}
+      trailingIcon[0].data.class['mdc-button__icon'] = true
+      if (trailingIcon[0].data.attrs == null) trailingIcon[0].data.attrs = {}
+      trailingIcon[0].data.attrs['aria-hidden'] = 'true'
+      children.push(trailingIcon[0])
     }
+    return h(
+      tag,
+      data,
+      children
+    )
   }
 }
 </script>

components/button/styles.scss

@@ -1 +1 @@
-@import "@material/button/mdc-button";
+@use "@material/button/mdc-button";