UNPKG

accessibleprimevue

Version:

Note: This is the forked version of the Primefaces/PrimeVue repository. Since V3 has reached its EOL this is use to fix identified accessibility bugs in the v3 version of primevue. PrimeVue is an open source UI library for Vue featuring a rich set of 80+

2 lines (1 loc) 13 kB
import t from"primevue/button";import e from"primevue/icons/plus";import i from"primevue/ripple";import n from"primevue/tooltip";import{UniqueComponentId as o,DomHandler as r}from"primevue/utils";import s from"primevue/basecomponent";import c from"primevue/speeddial/style";import{resolveComponent as a,resolveDirective as l,openBlock as u,createElementBlock as d,Fragment as f,createElementVNode as h,mergeProps as p,renderSlot as m,createVNode as b,normalizeClass as y,withCtx as v,createBlock as g,resolveDynamicComponent as I,renderList as w,withDirectives as x,createCommentVNode as k}from"vue";function O(t){return O="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},O(t)}function C(t,e){var i=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),i.push.apply(i,n)}return i}function S(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{};e%2?C(Object(i),!0).forEach((function(e){P(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):C(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function P(t,e,i){var n;return(e="symbol"==O(n=A(e,"string"))?n:String(n))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}function A(t,e){if("object"!=O(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var n=i.call(t,e||"default");if("object"!=O(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(t)}function D(t){return j(t)||E(t)||_(t)||L()}function L(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _(t,e){if(t){if("string"==typeof t)return K(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);return"Object"===i&&t.constructor&&(i=t.constructor.name),"Map"===i||"Set"===i?Array.from(t):"Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i)?K(t,e):void 0}}function E(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}function j(t){if(Array.isArray(t))return K(t)}function K(t,e){(null==e||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}var N={name:"SpeedDial",extends:{name:"BaseSpeedDial",extends:s,props:{model:null,visible:{type:Boolean,default:!1},direction:{type:String,default:"up"},transitionDelay:{type:Number,default:30},type:{type:String,default:"linear"},radius:{type:Number,default:0},mask:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideOnClickOutside:{type:Boolean,default:!0},buttonClass:null,maskStyle:null,maskClass:null,showIcon:{type:String,default:void 0},hideIcon:{type:String,default:void 0},rotateAnimation:{type:Boolean,default:!0},tooltipOptions:null,style:null,class:null,ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null}},style:c,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["click","show","hide","focus","blur"],documentClickListener:null,container:null,list:null,data:function(){return{id:this.$attrs.id,d_visible:this.visible,isItemClicked:!1,focused:!1,focusedOptionIndex:-1}},watch:{"$attrs.id":function(t){this.id=t||o()},visible:function(t){this.d_visible=t}},mounted:function(){if(this.id=this.id||o(),"linear"!==this.type){var t=r.findSingle(this.container,'[data-pc-name="button"]'),e=r.findSingle(this.list,'[data-pc-section="menuitem"]');if(t&&e){var i=Math.abs(t.offsetWidth-e.offsetWidth),n=Math.abs(t.offsetHeight-e.offsetHeight);this.list.style.setProperty("--item-diff-x","".concat(i/2,"px")),this.list.style.setProperty("--item-diff-y","".concat(n/2,"px"))}}this.hideOnClickOutside&&this.bindDocumentClickListener()},beforeUnmount:function(){this.unbindDocumentClickListener()},methods:{getPTOptions:function(t,e){return this.ptm(e,{context:{active:this.isItemActive(t),hidden:!this.d_visible}})},onFocus:function(t){this.focused=!0,this.$emit("focus",t)},onBlur:function(t){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",t)},onItemClick:function(t,e){e.command&&e.command({originalEvent:t,item:e}),this.hide(),this.isItemClicked=!0,t.preventDefault()},onClick:function(t){this.d_visible?this.hide():this.show(),this.isItemClicked=!0,this.$emit("click",t)},show:function(){this.d_visible=!0,this.$emit("show")},hide:function(){this.d_visible=!1,this.$emit("hide")},calculateTransitionDelay:function(t){return(this.d_visible?t:this.model.length-t-1)*this.transitionDelay},onTogglerKeydown:function(t){switch(t.code){case"ArrowDown":case"ArrowLeft":this.onTogglerArrowDown(t);break;case"ArrowUp":case"ArrowRight":this.onTogglerArrowUp(t);break;case"Escape":this.onEscapeKey()}},onKeyDown:function(t){switch(t.code){case"ArrowDown":this.onArrowDown(t);break;case"ArrowUp":this.onArrowUp(t);break;case"ArrowLeft":this.onArrowLeft(t);break;case"ArrowRight":this.onArrowRight(t);break;case"Enter":case"NumpadEnter":case"Space":this.onEnterKey(t);break;case"Escape":this.onEscapeKey(t);break;case"Home":this.onHomeKey(t);break;case"End":this.onEndKey(t)}},onTogglerArrowUp:function(t){this.focused=!0,r.focus(this.list),this.show(),this.navigatePrevItem(t),t.preventDefault()},onTogglerArrowDown:function(t){this.focused=!0,r.focus(this.list),this.show(),this.navigateNextItem(t),t.preventDefault()},onEnterKey:function(t){var e=this,i=D(r.find(this.container,'[data-pc-section="menuitem"]')).findIndex((function(t){return t.id===e.focusedOptionIndex}));this.onItemClick(t,this.model[i]),this.onBlur(t);var n=r.findSingle(this.container,"button");n&&r.focus(n)},onEscapeKey:function(){this.hide();var t=r.findSingle(this.container,"button");t&&r.focus(t)},onArrowUp:function(t){"up"===this.direction?this.navigateNextItem(t):"down"===this.direction?this.navigatePrevItem(t):this.navigateNextItem(t)},onArrowDown:function(t){"up"===this.direction?this.navigatePrevItem(t):"down"===this.direction?this.navigateNextItem(t):this.navigatePrevItem(t)},onArrowLeft:function(t){["left","up-right","down-left"].includes(this.direction)?this.navigateNextItem(t):(["right","up-left","down-right"].includes(this.direction),this.navigatePrevItem(t))},onArrowRight:function(t){["left","up-right","down-left"].includes(this.direction)?this.navigatePrevItem(t):(["right","up-left","down-right"].includes(this.direction),this.navigateNextItem(t))},onEndKey:function(t){t.preventDefault(),this.focusedOptionIndex=-1,this.navigatePrevItem(t)},onHomeKey:function(t){t.preventDefault(),this.focusedOptionIndex=-1,this.navigateNextItem(t)},navigateNextItem:function(t){var e=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(e),t.preventDefault()},navigatePrevItem:function(t){var e=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(e),t.preventDefault()},changeFocusedOptionIndex:function(t){var e=D(r.find(this.container,'[data-pc-section="menuitem"]')).filter((function(t){return!r.hasClass(r.findSingle(t,"a"),"p-disabled")}));e[t]&&(this.focusedOptionIndex=e[t].getAttribute("id"))},findPrevOptionIndex:function(t){var e=D(r.find(this.container,'[data-pc-section="menuitem"]')).filter((function(t){return!r.hasClass(r.findSingle(t,"a"),"p-disabled")})),i=-1===t?e[e.length-1].id:t,n=e.findIndex((function(t){return t.getAttribute("id")===i}));return n=-1===t?e.length-1:n-1},findNextOptionIndex:function(t){var e=D(r.find(this.container,'[data-pc-section="menuitem"]')).filter((function(t){return!r.hasClass(r.findSingle(t,"a"),"p-disabled")})),i=-1===t?e[0].id:t,n=e.findIndex((function(t){return t.getAttribute("id")===i}));return n=-1===t?0:n+1},calculatePointStyle:function(t){var e=this.type;if("linear"!==e){var i=this.model.length,n=this.radius||20*i;if("circle"===e){var o=2*Math.PI/i;return{left:"calc(".concat(n*Math.cos(o*t),"px + var(--item-diff-x, 0px))"),top:"calc(".concat(n*Math.sin(o*t),"px + var(--item-diff-y, 0px))")}}if("semi-circle"===e){var r=this.direction,s=Math.PI/(i-1),c="calc(".concat(n*Math.cos(s*t),"px + var(--item-diff-x, 0px))"),a="calc(".concat(n*Math.sin(s*t),"px + var(--item-diff-y, 0px))");if("up"===r)return{left:c,bottom:a};if("down"===r)return{left:c,top:a};if("left"===r)return{right:a,top:c};if("right"===r)return{left:a,top:c}}else if("quarter-circle"===e){var l=this.direction,u=Math.PI/(2*(i-1)),d="calc(".concat(n*Math.cos(u*t),"px + var(--item-diff-x, 0px))"),f="calc(".concat(n*Math.sin(u*t),"px + var(--item-diff-y, 0px))");if("up-left"===l)return{right:d,bottom:f};if("up-right"===l)return{left:d,bottom:f};if("down-left"===l)return{right:f,top:d};if("down-right"===l)return{left:f,top:d}}}return{}},getItemStyle:function(t){var e=this.calculateTransitionDelay(t),i=this.calculatePointStyle(t);return S({transitionDelay:"".concat(e,"ms")},i)},bindDocumentClickListener:function(){var t=this;this.documentClickListener||(this.documentClickListener=function(e){t.d_visible&&t.isOutsideClicked(e)&&t.hide(),t.isItemClicked=!1},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener:function(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},isOutsideClicked:function(t){return this.container&&!(this.container.isSameNode(t.target)||this.container.contains(t.target)||this.isItemClicked)},isItemVisible:function(t){return"function"==typeof t.visible?t.visible():!1!==t.visible},isItemActive:function(t){return t===this.focusedOptionId},containerRef:function(t){this.container=t},listRef:function(t){this.list=t}},computed:{containerClass:function(){return[this.cx("root"),this.class]},focusedOptionId:function(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{SDButton:t,PlusIcon:e},directives:{ripple:i,tooltip:n}},T=["id","aria-activedescendant"],B=["id","aria-controls"],$=["href","target","onClick","aria-label"];N.render=function(t,e,i,n,o,r){var s=a("SDButton"),c=l("ripple"),O=l("tooltip");return u(),d(f,null,[h("div",p({ref:r.containerRef,class:r.containerClass,style:[t.style,t.sx("root")]},t.ptmi("root")),[m(t.$slots,"button",{onClick:r.onClick,toggleCallback:r.onClick},(function(){return[b(s,{type:"button",class:y([t.cx("button"),t.buttonClass]),onClick:e[0]||(e[0]=function(t){return r.onClick(t)}),disabled:t.disabled,onKeydown:r.onTogglerKeydown,"aria-expanded":o.d_visible,"aria-haspopup":!0,"aria-controls":o.id+"_list","aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabelledby,pt:t.ptm("button"),unstyled:t.unstyled},{icon:v((function(){return[m(t.$slots,"icon",{visible:o.d_visible},(function(){return[o.d_visible&&t.hideIcon?(u(),g(I(t.hideIcon?"span":"PlusIcon"),p({key:0,class:[t.hideIcon,t.cx("buttonIcon")]},t.ptm("button").icon,{"data-pc-section":"icon"}),null,16,["class"])):(u(),g(I(t.showIcon?"span":"PlusIcon"),p({key:1,class:o.d_visible&&t.hideIcon?t.hideIcon:t.showIcon},t.ptm("button").icon,{"data-pc-section":"icon"}),null,16,["class"]))]}))]})),_:3},8,["class","disabled","onKeydown","aria-expanded","aria-controls","aria-label","aria-labelledby","pt","unstyled"])]})),h("ul",p({ref:r.listRef,id:o.id+"_list",class:t.cx("menu"),style:t.sx("menu"),role:"menu","aria-activedescendant":o.focused?r.focusedOptionId:void 0,tabindex:"-1",onFocus:e[1]||(e[1]=function(){return r.onFocus&&r.onFocus.apply(r,arguments)}),onBlur:e[2]||(e[2]=function(){return r.onBlur&&r.onBlur.apply(r,arguments)}),onKeydown:e[3]||(e[3]=function(){return r.onKeyDown&&r.onKeyDown.apply(r,arguments)})},t.ptm("menu")),[(u(!0),d(f,null,w(t.model,(function(e,i){return u(),d(f,{key:i},[r.isItemVisible(e)?(u(),d("li",p({key:0,id:"".concat(o.id,"_").concat(i),"aria-controls":"".concat(o.id,"_item"),class:t.cx("menuitem",{id:"".concat(o.id,"_").concat(i)}),style:r.getItemStyle(i),role:"menuitem"},r.getPTOptions("".concat(o.id,"_").concat(i),"menuitem")),[t.$slots.item?(u(),g(I(t.$slots.item),{key:1,item:e,onClick:function(t){return r.onItemClick(t,e)}},null,8,["item","onClick"])):x((u(),d("a",p({key:0,tabindex:-1,href:e.url||"#",role:"menuitem",class:t.cx("action",{item:e}),target:e.target,onClick:function(t){return r.onItemClick(t,e)},"aria-label":e.label},r.getPTOptions("".concat(o.id,"_").concat(i),"action")),[e.icon?(u(),d("span",p({key:0,class:[t.cx("actionIcon"),e.icon]},r.getPTOptions("".concat(o.id,"_").concat(i),"actionIcon")),null,16)):k("",!0)],16,$)),[[c],[O,{value:e.label,disabled:!t.tooltipOptions},t.tooltipOptions]])],16,B)):k("",!0)],64)})),128))],16,T)],16),t.mask?(u(),d("div",p({key:0,class:[t.cx("mask"),t.maskClass],style:t.maskStyle},t.ptm("mask")),null,16)):k("",!0)],64)};export{N as default};