From 43a9d3f34e9da065af7c73702709a1146b811694 Mon Sep 17 00:00:00 2001 From: stasson Date: Sun, 7 Jan 2018 17:32:44 +0100 Subject: [PATCH] feat(button): add support for vue-router --- components/base/custom-button.js | 55 +++++++++++++++++++++++++++ components/base/index.js | 1 + components/button/README.md | 39 ++++++++++++++++--- components/button/demo.vue | 45 ++++++++++------------ components/button/index.js | 3 +- components/button/mdc-button-base.vue | 24 ++++++++++++ components/button/mdc-button.vue | 33 ++-------------- 7 files changed, 140 insertions(+), 60 deletions(-) create mode 100644 components/base/custom-button.js create mode 100644 components/button/mdc-button-base.vue diff --git a/components/base/custom-button.js b/components/base/custom-button.js new file mode 100644 index 00000000..5b455acb --- /dev/null +++ b/components/base/custom-button.js @@ -0,0 +1,55 @@ +export const CustomButton = { + name: 'custom-button', + functional: true, + props: { + link : Object, + }, + render (h, context) { + let element + let data = Object.assign({}, context.data) + + if (context.props.link && context.parent.$router) { + // router-link case + element = context.parent.$root.$options.components['router-link'] + data.props = Object.assign({tag: context.props.tag}, context.props.link) + data.attrs.role = 'button' + } else if (data.attrs && data.attrs.href) { + // href case + element = 'a' + data.attrs.role = 'button' + } else { + // button fallback + element = 'button' + } + + return h(element, data, context.children) + } +} + +export const CustomButtonMixin = { + props: { + href: String, + disabled: Boolean, + to: [String, Object], + exact: Boolean, + append: Boolean, + replace: Boolean, + activeClass: String, + exactActiveClass: String, + }, + computed: { + link () { + return this.to && { + to: this.to, + exact: this.exact, + append: this.append, + replace: this.replace, + activeClass: this.activeClass, + exactActiveClass: this.exactActiveClass, + } + } + }, + components : { + CustomButton + } +} diff --git a/components/base/index.js b/components/base/index.js index 9591a09e..d5aabb56 100644 --- a/components/base/index.js +++ b/components/base/index.js @@ -3,5 +3,6 @@ export * from './base-plugin.js' export * from './custom-element.js' export * from './custom-link.js' export * from './custom-event.js' +export * from './custom-button.js' export * from './dispatch-event-mixin.js' export * from './dispatch-focus-mixin.js' diff --git a/components/button/README.md b/components/button/README.md index 4f8a0c7c..af759f56 100644 --- a/components/button/README.md +++ b/components/button/README.md @@ -36,8 +36,14 @@ var vm = new Vue({ |`event-target`|Object| vm.$root | optional event target, defaults to root bus | |`event-args`|Array| [] | optional event args | |`href`|String|| link's href, renders anchor (see notes below) | +|`to`|String, Object| undefined | router-link property _(*)_ | +|`replace`|Boolean| false | router-link property _(*)_ | +|`append`|Boolean| false | router-link property _(*)_ | +|`exact`|Boolean| false | router-link property _(*)_ | +|`active-class`|String| router-link-active | router-link property _(*)_ | +|`exact-active-class`|String| router-link-exact-active | router-link property _(*)_ | -> (*) initializer attribute, not dynamic property +> _(*)_ Requires [vue-router](https://router.vuejs.org) ### text buttons @@ -71,13 +77,25 @@ var vm = new Vue({ ### Link buttons +#### simple Link + +Using the href attribute will render `` + ```html Home ``` -Using the href attribute will render `` +#### router-link + +If the `to` property is defined, the item behaves as a +[router-link](https://router.vuejs.org/en/api/router-link.html) + +```html +Home +``` + +#### Accessibility Warning: -> Accessibility Warning: > Buttons are expected to be triggered using the Space or Enter key, > while links are expected to be triggered using the Enter key. > Additionally, button and links have different behaviors on right click. @@ -87,8 +105,19 @@ You might want to keep button behavior and do the navigation programatically: ```html Home -``` +Home +``` + +### Triggering events + +```html + Do Something +``` + +```javascript + // register event from some component context + this.$root.$on('my-event', () => doSomething()) +``` ### Reference - - diff --git a/components/button/demo.vue b/components/button/demo.vue index 8950bd45..bdb38a01 100644 --- a/components/button/demo.vue +++ b/components/button/demo.vue @@ -1,32 +1,29 @@ diff --git a/components/button/index.js b/components/button/index.js index 3d1f1700..a12cecd8 100644 --- a/components/button/index.js +++ b/components/button/index.js @@ -1,7 +1,8 @@ import {BasePlugin} from '../base' import mdcButton from './mdc-button.vue' +import mdcButtonBase from './mdc-button-base.vue' -export {mdcButton} +export {mdcButtonBase, mdcButton} export default BasePlugin({ mdcButton diff --git a/components/button/mdc-button-base.vue b/components/button/mdc-button-base.vue new file mode 100644 index 00000000..70df93c4 --- /dev/null +++ b/components/button/mdc-button-base.vue @@ -0,0 +1,24 @@ + + + diff --git a/components/button/mdc-button.vue b/components/button/mdc-button.vue index 90c617fa..45016236 100644 --- a/components/button/mdc-button.vue +++ b/components/button/mdc-button.vue @@ -1,26 +1,10 @@ - -