From 31fe0e343e0c3f4de10a845d61b7a0b753eeda6d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Moritz=20Kr=C3=B6ger?= Date: Sat, 16 Jun 2018 10:35:07 +0200 Subject: [PATCH] :sparkles: Updated to a11y-dialog@5.1.0 and added way to disable native dialog element --- README.md | 14 +++++++++++++- dist/vue-a11y-dialog.js | 2 +- package-lock.json | 20 ++++++++++---------- package.json | 4 ++-- src/A11yDialog.vue | 16 +++++++++++++--- 5 files changed, 39 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index f9f4678..f8cf743 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Vue A11yDialog -This is a Vue.js wrapper component for [`a11y-dialog`](https://github.com/edenspiekermann/a11y-dialog) ([**demo**](https://codesandbox.io/s/rj20wr1kpp)). +This is a Vue.js wrapper component for [`a11y-dialog@5.1.0`](https://github.com/edenspiekermann/a11y-dialog) ([**demo**](https://codesandbox.io/s/rj20wr1kpp)). - [Install](#install) - [Usage](#usage) @@ -89,6 +89,18 @@ export default { > All `a11y-dialog` instance methods are available, see their [docs](https://github.com/edenspiekermann/a11y-dialog#js-api) for more. +### `disable-native` +- **Property**: `disable-native` +- **Type**: `Boolean` +- **Default**: `false` +- **Description**: Per default we're using the native `` element. However, if you want to disable that and use a `
` instead, you can just do that by adding this attribute. This gives you full control (and responsibilites) over styling. Read the [`a11y-dialog` Styling layer documentation](http://edenspiekermann.github.io/a11y-dialog/#styling-layer) for more information. +- **Usage**: +```html + + + +``` + ### `id` - **Property**: `id` - **Type**: `String` diff --git a/dist/vue-a11y-dialog.js b/dist/vue-a11y-dialog.js index c0acad7..b0b9755 100644 --- a/dist/vue-a11y-dialog.js +++ b/dist/vue-a11y-dialog.js @@ -1 +1 @@ -(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports):'function'==typeof define&&define.amd?define(['exports'],b):b(a.VueA11yDialog={})})(this,function(a){'use strict';function b(){const a=document.head||document.getElementsByTagName('head')[0],c=b.styles||(b.styles={}),d='undefined'!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(b,e){if(!document.querySelector('style[data-vue-ssr-id~="'+b+'"]')){const f=d?e.media||'default':b,g=c[f]||(c[f]={ids:[],parts:[],element:void 0});if(!g.ids.includes(b)){let c=e.source,h=g.ids.length;if(g.ids.push(b),d&&(g.element=g.element||document.querySelector('style[data-group='+f+']')),!g.element){const b=g.element=document.createElement('style');b.type='text/css',e.media&&b.setAttribute('media',e.media),d&&(b.setAttribute('data-group',f),b.setAttribute('data-next-index','0')),a.appendChild(b)}if(d&&(h=parseInt(g.element.getAttribute('data-next-index')),g.element.setAttribute('data-next-index',h+1)),g.element.styleSheet)g.parts.push(c),g.element.styleSheet.cssText=g.parts.filter(Boolean).join('\n');else{const a=document.createTextNode(c),b=g.element.childNodes;b[h]&&g.element.removeChild(b[h]),b.length?g.element.insertBefore(a,b[h]):g.element.appendChild(a)}}}}}var c='undefined'==typeof window?'undefined'==typeof global?'undefined'==typeof self?{}:self:global:window,d=function(a,b){return b={exports:{}},a(b,b.exports),b.exports}(function(a){(function(){function b(a,b){this._show=this.show.bind(this),this._hide=this.hide.bind(this),this._maintainFocus=this._maintainFocus.bind(this),this._bindKeypress=this._bindKeypress.bind(this),this.container=a,this.dialog=a.querySelector('dialog'),this._listeners={},this.create(b)}function c(a){return Array.prototype.slice.call(a)}function d(a,b){return c((b||document).querySelectorAll(a))}function e(a){return NodeList.prototype.isPrototypeOf(a)?c(a):Element.prototype.isPrototypeOf(a)?[a]:'string'==typeof a?d(a):void 0}function f(a){var b=g(a),c=a.querySelector('[autofocus]')||b[0];c&&c.focus()}function g(a){return d(k.join(','),a).filter(function(a){return!!(a.offsetWidth||a.offsetHeight||a.getClientRects().length)})}function h(a,b){var c=g(a),d=c.indexOf(document.activeElement);b.shiftKey&&0===d?(c[c.length-1].focus(),b.preventDefault()):!b.shiftKey&&d===c.length-1&&(c[0].focus(),b.preventDefault())}function i(a){var b=c(a.parentNode.childNodes),d=b.filter(function(a){return 1===a.nodeType});return d.splice(d.indexOf(a),1),d}var j,k=['a[href]:not([tabindex^="-"]):not([inert])','area[href]:not([tabindex^="-"]):not([inert])','input:not([disabled]):not([inert])','select:not([disabled]):not([inert])','textarea:not([disabled]):not([inert])','button:not([disabled]):not([inert])','iframe:not([tabindex^="-"]):not([inert])','[contenteditable]:not([tabindex^="-"]):not([inert])','[tabindex]:not([tabindex^="-"]):not([inert])'],l='show'in document.createElement('dialog');b.prototype.create=function(a){return this._targets=this._targets||e(a)||i(this.container),this.shown=this.dialog.hasAttribute('open'),this.dialog.setAttribute('role','dialog'),l?this.container.setAttribute('data-a11y-dialog-native',''):this.shown?this.container.removeAttribute('aria-hidden'):this.container.setAttribute('aria-hidden',!0),this._openers=d('[data-a11y-dialog-show="'+this.container.id+'"]'),this._openers.forEach(function(a){a.addEventListener('click',this._show)}.bind(this)),this._closers=d('[data-a11y-dialog-hide]',this.container).concat(d('[data-a11y-dialog-hide="'+this.container.id+'"]')),this._closers.forEach(function(a){a.addEventListener('click',this._hide)}.bind(this)),this._fire('create'),this},b.prototype.show=function(a){return this.shown?this:(this.shown=!0,j=document.activeElement,l?this.dialog.showModal(a instanceof Event?void 0:a):(this.dialog.setAttribute('open',''),this.container.removeAttribute('aria-hidden'),this._targets.forEach(function(a){a.setAttribute('aria-hidden','true')})),f(this.dialog),document.body.addEventListener('focus',this._maintainFocus,!0),document.addEventListener('keydown',this._bindKeypress),this._fire('show',a),this)},b.prototype.hide=function(a){return this.shown?(this.shown=!1,l?this.dialog.close(a instanceof Event?void 0:a):(this.dialog.removeAttribute('open'),this.container.setAttribute('aria-hidden','true'),this._targets.forEach(function(a){a.removeAttribute('aria-hidden')})),j&&j.focus(),document.body.removeEventListener('focus',this._maintainFocus,!0),document.removeEventListener('keydown',this._bindKeypress),this._fire('hide',a),this):this},b.prototype.destroy=function(){return this.hide(),this._openers.forEach(function(a){a.removeEventListener('click',this._show)}.bind(this)),this._closers.forEach(function(a){a.removeEventListener('click',this._hide)}.bind(this)),this._fire('destroy'),this._listeners={},this},b.prototype.on=function(a,b){return'undefined'==typeof this._listeners[a]&&(this._listeners[a]=[]),this._listeners[a].push(b),this},b.prototype.off=function(a,b){var c=this._listeners[a].indexOf(b);return-1({})},titleId:{type:String},closeButtonLabel:{type:String,default:'Close this dialog window'}},computed:{fullTitleId(){return this.titleId||this.id+'-title'}},data:()=>({dialog:null}),methods:{close(){this.dialog.hide()}},mounted(){this.dialog=new d(this.$refs.rootElement,this.appRoot),this.$emit('dialog-ref',this.dialog)},destroyed(){this.dialog&&this.dialog.destroy(),this.$emit('dialog-ref')}};const f=e;var g=function(){var a=this,b=a.$createElement,c=a._self._c||b;return c('div',{ref:'rootElement',class:a.classNames.base,attrs:{id:a.id}},[c('div',{class:a.classNames.overlay,attrs:{tabIndex:'-1'},on:{click:a.close}}),a._v(' '),c('dialog',{class:a.classNames.element,attrs:{"aria-labelledby":a.titleId}},[c('div',{class:a.classNames.document,attrs:{role:'document'}},[c('button',{class:a.classNames.closeButton,attrs:{type:'button',"aria-label":a.closeButtonLabel},on:{click:a.close}},[a._t('closeButtonContent',[a._v('\n '+a._s('\xD7')+'\n ')])],2),a._v(' '),c('h1',{class:a.classNames.title,attrs:{id:a.fullTitleId}},[a._t('title')],2),a._v(' '),a._t('default')],2)])])};g._withStripped=!0;const h='undefined'==typeof g?{}:{render:g,staticRenderFns:[]};var i=function(a,b,c,d,e){const f=('function'==typeof c?c.options:c)||{};return f.__file='/Users/morkro/Projects/Personal/vue-a11y-dialog/src/A11yDialog.vue',f.render||(f.render=a.render,f.staticRenderFns=a.staticRenderFns,f._compiled=!0,e&&(f.functional=!0)),f._scopeId=d,f}(h,void 0,'undefined'==typeof f?{}:f,void 0,!1,void 0,'undefined'==typeof b?function(){}:b,'undefined'==typeof __vue_create_injector_ssr__?function(){}:__vue_create_injector_ssr__),j={install(a){a.component('a11y-dialog',i)}};a.A11yDialog=i,a.default=j,Object.defineProperty(a,'__esModule',{value:!0})}); +(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports):'function'==typeof define&&define.amd?define(['exports'],b):b(a.VueA11yDialog={})})(this,function(a){'use strict';function b(){const a=document.head||document.getElementsByTagName('head')[0],c=b.styles||(b.styles={}),d='undefined'!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());return function(b,e){if(!document.querySelector('style[data-vue-ssr-id~="'+b+'"]')){const f=d?e.media||'default':b,g=c[f]||(c[f]={ids:[],parts:[],element:void 0});if(!g.ids.includes(b)){let c=e.source,h=g.ids.length;if(g.ids.push(b),d&&(g.element=g.element||document.querySelector('style[data-group='+f+']')),!g.element){const b=g.element=document.createElement('style');b.type='text/css',e.media&&b.setAttribute('media',e.media),d&&(b.setAttribute('data-group',f),b.setAttribute('data-next-index','0')),a.appendChild(b)}if(d&&(h=parseInt(g.element.getAttribute('data-next-index')),g.element.setAttribute('data-next-index',h+1)),g.element.styleSheet)g.parts.push(c),g.element.styleSheet.cssText=g.parts.filter(Boolean).join('\n');else{const a=document.createTextNode(c),b=g.element.childNodes;b[h]&&g.element.removeChild(b[h]),b.length?g.element.insertBefore(a,b[h]):g.element.appendChild(a)}}}}}var c='undefined'==typeof window?'undefined'==typeof global?'undefined'==typeof self?{}:self:global:window,d=function(a,b){return b={exports:{}},a(b,b.exports),b.exports}(function(a){(function(){function b(a,b){this._show=this.show.bind(this),this._hide=this.hide.bind(this),this._maintainFocus=this._maintainFocus.bind(this),this._bindKeypress=this._bindKeypress.bind(this),this.container=a,this.dialog=a.querySelector('dialog, [role="dialog"]'),this.useDialog=l&&'DIALOG'===this.dialog.nodeName,this._listeners={},this.create(b)}function c(a){return Array.prototype.slice.call(a)}function d(a,b){return c((b||document).querySelectorAll(a))}function e(a){return NodeList.prototype.isPrototypeOf(a)?c(a):Element.prototype.isPrototypeOf(a)?[a]:'string'==typeof a?d(a):void 0}function f(a){var b=g(a),c=a.querySelector('[autofocus]')||b[0];c&&c.focus()}function g(a){return d(k.join(','),a).filter(function(a){return!!(a.offsetWidth||a.offsetHeight||a.getClientRects().length)})}function h(a,b){var c=g(a),d=c.indexOf(document.activeElement);b.shiftKey&&0===d?(c[c.length-1].focus(),b.preventDefault()):!b.shiftKey&&d===c.length-1&&(c[0].focus(),b.preventDefault())}function i(a){var b=c(a.parentNode.childNodes),d=b.filter(function(a){return 1===a.nodeType});return d.splice(d.indexOf(a),1),d}var j,k=['a[href]:not([tabindex^="-"]):not([inert])','area[href]:not([tabindex^="-"]):not([inert])','input:not([disabled]):not([inert])','select:not([disabled]):not([inert])','textarea:not([disabled]):not([inert])','button:not([disabled]):not([inert])','iframe:not([tabindex^="-"]):not([inert])','[contenteditable]:not([tabindex^="-"]):not([inert])','[tabindex]:not([tabindex^="-"]):not([inert])'],l='show'in document.createElement('dialog');b.prototype.create=function(a){return this._targets=this._targets||e(a)||i(this.container),this.shown=this.dialog.hasAttribute('open'),this.dialog.setAttribute('role','dialog'),this.useDialog?this.container.setAttribute('data-a11y-dialog-native',''):this.shown?this.container.removeAttribute('aria-hidden'):this.container.setAttribute('aria-hidden',!0),this._openers=d('[data-a11y-dialog-show="'+this.container.id+'"]'),this._openers.forEach(function(a){a.addEventListener('click',this._show)}.bind(this)),this._closers=d('[data-a11y-dialog-hide]',this.container).concat(d('[data-a11y-dialog-hide="'+this.container.id+'"]')),this._closers.forEach(function(a){a.addEventListener('click',this._hide)}.bind(this)),this._fire('create'),this},b.prototype.show=function(a){return this.shown?this:(this.shown=!0,j=document.activeElement,this.useDialog?this.dialog.showModal(a instanceof Event?void 0:a):(this.dialog.setAttribute('open',''),this.container.removeAttribute('aria-hidden'),this._targets.forEach(function(a){a.setAttribute('aria-hidden','true')})),f(this.dialog),document.body.addEventListener('focus',this._maintainFocus,!0),document.addEventListener('keydown',this._bindKeypress),this._fire('show',a),this)},b.prototype.hide=function(a){return this.shown?(this.shown=!1,this.useDialog?this.dialog.close(a instanceof Event?void 0:a):(this.dialog.removeAttribute('open'),this.container.setAttribute('aria-hidden','true'),this._targets.forEach(function(a){a.removeAttribute('aria-hidden')})),j&&j.focus(),document.body.removeEventListener('focus',this._maintainFocus,!0),document.removeEventListener('keydown',this._bindKeypress),this._fire('hide',a),this):this},b.prototype.destroy=function(){return this.hide(),this._openers.forEach(function(a){a.removeEventListener('click',this._show)}.bind(this)),this._closers.forEach(function(a){a.removeEventListener('click',this._hide)}.bind(this)),this._fire('destroy'),this._listeners={},this},b.prototype.on=function(a,b){return'undefined'==typeof this._listeners[a]&&(this._listeners[a]=[]),this._listeners[a].push(b),this},b.prototype.off=function(a,b){var c=this._listeners[a].indexOf(b);return-1({})},titleId:{type:String},closeButtonLabel:{type:String,default:'Close this dialog window'},disableNative:{type:Boolean,default:!1}},computed:{fullTitleId(){return this.titleId||this.id+'-title'},dialogElement(){return this.disableNative?'div':'dialog'}},data:()=>({dialog:null}),methods:{close(){this.dialog.hide()}},mounted(){this.dialog=new d(this.$refs.rootElement,this.appRoot),this.$emit('dialog-ref',this.dialog)},destroyed(){this.dialog&&this.dialog.destroy(),this.$emit('dialog-ref')}};const f=e;var g=function(){var a=this,b=a.$createElement,c=a._self._c||b;return c('div',{ref:'rootElement',class:a.classNames.base,attrs:{id:a.id}},[c('div',{class:a.classNames.overlay,attrs:{"data-a11y-dialog-hide":'',tabIndex:'-1'},on:{click:a.close}}),a._v(' '),c(a.dialogElement,{tag:'component',class:a.classNames.element,attrs:{role:'dialog',"aria-labelledby":a.titleId}},[c('div',{class:a.classNames.document,attrs:{role:'document'}},[c('button',{class:a.classNames.closeButton,attrs:{"data-a11y-dialog-hide":'',type:'button',"aria-label":a.closeButtonLabel},on:{click:a.close}},[a._t('closeButtonContent',[a._v('\n '+a._s('\xD7')+'\n ')])],2),a._v(' '),c('h1',{class:a.classNames.title,attrs:{id:a.fullTitleId}},[a._t('title')],2),a._v(' '),a._t('default')],2)])],1)};g._withStripped=!0;const h='undefined'==typeof g?{}:{render:g,staticRenderFns:[]};var i=function(a,b,c,d,e){const f=('function'==typeof c?c.options:c)||{};return f.__file='/Users/morkro/Projects/Personal/vue-a11y-dialog/src/A11yDialog.vue',f.render||(f.render=a.render,f.staticRenderFns=a.staticRenderFns,f._compiled=!0,e&&(f.functional=!0)),f._scopeId=d,f}(h,void 0,'undefined'==typeof f?{}:f,void 0,!1,void 0,'undefined'==typeof b?function(){}:b,'undefined'==typeof __vue_create_injector_ssr__?function(){}:__vue_create_injector_ssr__),j={install(a){a.component('a11y-dialog',i)}};a.A11yDialog=i,a.default=j,Object.defineProperty(a,'__esModule',{value:!0})}); diff --git a/package-lock.json b/package-lock.json index dd7d899..7eb1bf0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-a11y-dialog", - "version": "0.0.1", + "version": "0.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -35,9 +35,9 @@ "dev": true }, "@types/node": { - "version": "10.3.2", - "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.2.tgz", - "integrity": "sha512-9NfEUDp3tgRhmoxzTpTo+lq+KIVFxZahuRX0LHF/9IzKHaWuoWsIrrJ61zw5cnnlGINX8lqJzXYfQTOICS5Q+A==", + "version": "10.3.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-10.3.3.tgz", + "integrity": "sha512-/gwCgiI2e9RzzZTKbl+am3vgNqOt7a9fJ/uxv4SqYKxenoEDNVU3KZEadlpusWhQI0A0dOrZ0T68JYKVjzmgdQ==", "dev": true }, "@vue/component-compiler": { @@ -70,9 +70,9 @@ } }, "a11y-dialog": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/a11y-dialog/-/a11y-dialog-5.0.2.tgz", - "integrity": "sha512-+5LttyLqD9+nDO/iZOR8R0YR/OgkcMu6BL+WuwMOhVngT/ZWoEOJyGArfdOVqpqKeHv0/3fko6R+U/vYBEDYlw==" + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/a11y-dialog/-/a11y-dialog-5.1.0.tgz", + "integrity": "sha512-Gf7ZaOwcsvAafSPdJcZLYlao8QVKuBgIIXKOZ+g+NlXTRox4BB0Knh9NBwzFgOz2dlPLwT282u3hnI23nKKggw==" }, "acorn": { "version": "5.6.2", @@ -3324,9 +3324,9 @@ } }, "rollup": { - "version": "0.60.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.60.4.tgz", - "integrity": "sha512-55x0sY6LPF7waMOaDa6QvTfEngyYpMNh48UWNEiZzwGA8x+sP2aH4c+H+1fTpFLay8Q6w1eE5Asrty7NW0nfrQ==", + "version": "0.60.7", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-0.60.7.tgz", + "integrity": "sha512-Uj5I1A2PnDgA79P+v1dsNs1IHVydNgeJdKWRfoEJJdNMmyx07TRYqUtPUINaZ/gDusncFy1SZsT3lJnBBI8CGw==", "dev": true, "requires": { "@types/estree": "0.0.39", diff --git a/package.json b/package.json index c2a1fec..2cb0245 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "url": "https://github.com/morkro/vue-a11y-dialog" }, "dependencies": { - "a11y-dialog": "^5.0.2" + "a11y-dialog": "^5.1.0" }, "peerDependencies": { "vue": "2.x" @@ -40,7 +40,7 @@ "babel-preset-env": "^1.7.0", "eslint": "^4.19.1", "eslint-plugin-vue": "^4.5.0", - "rollup": "^0.60.4", + "rollup": "^0.60.7", "rollup-plugin-babel": "^3.0.4", "rollup-plugin-babel-minify": "^5.0.0", "rollup-plugin-commonjs": "^9.1.3", diff --git a/src/A11yDialog.vue b/src/A11yDialog.vue index 6b0d894..15d75db 100644 --- a/src/A11yDialog.vue +++ b/src/A11yDialog.vue @@ -1,12 +1,18 @@ @@ -37,12 +43,16 @@ appRoot: { type: [String, Array], required: true }, classNames: { type: Object, default: () => ({}) }, titleId: { type: String }, - closeButtonLabel: { type: String, default: 'Close this dialog window' } + closeButtonLabel: { type: String, default: 'Close this dialog window' }, + disableNative: { type: Boolean, default: false } }, computed: { fullTitleId () { return this.titleId || this.id + '-title' + }, + dialogElement () { + return this.disableNative ? 'div' : 'dialog' } },