@nextcloud/vue/dist/Components/NcActions.cjs

Nextcloud vue components

var U=require("../assets/index56.css");const _=require("./NcButton.cjs"),z=require("./NcPopover.cjs"),T=require("../chunks/GenRandomId-67df40eb.cjs"),P=require("../chunks/l10n-46d0c1c0.cjs"),R=require("vue"),K=require("vue-material-design-icons/DotsHorizontal.vue"),V=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const y=".focusable",j={name:"NcActions",components:{NcButton:_,DotsHorizontal:K,NcPopover:z},props:{open:{type:Boolean,default:!1},manualOpen:{type:Boolean,default:!1},forceMenu:{type:Boolean,default:!1},forceName:{type:Boolean,default:!1},menuName:{type:String,default:null},primary:{type:Boolean,default:!1},type:{type:String,validator(e){return["primary","secondary","tertiary","tertiary-no-background","tertiary-on-primary","error","warning","success"].indexOf(e)!==-1},default:null},defaultIcon:{type:String,default:""},ariaLabel:{type:String,default:P.t("Actions")},ariaHidden:{type:Boolean,default:null},placement:{type:String,default:"bottom"},boundariesElement:{type:Element,default:()=>document.querySelector("body")},container:{type:[String,Object,Element,Boolean],default:"body"},disabled:{type:Boolean,default:!1},inline:{type:Number,default:0}},emits:["open","update:open","close","focus","blur"],data(){return{opened:this.open,focusIndex:0,randomId:`menu-${T.GenRandomId()}`}},computed:{triggerBtnType(){return this.type||(this.primary?"primary":this.menuName?"secondary":"tertiary")}},watch:{open(e){e!==this.opened&&(this.opened=e)}},methods:{isValidSingleAction(e){var c,a,r,p,d;const n=(d=(r=(a=(c=e==null?void 0:e.componentOptions)==null?void 0:c.Ctor)==null?void 0:a.extendOptions)==null?void 0:r.name)!=null?d:(p=e==null?void 0:e.componentOptions)==null?void 0:p.tag;return["NcActionButton","NcActionLink","NcActionRouter"].includes(n)},openMenu(e){this.opened||(this.opened=!0,this.$emit("update:open",!0),this.$emit("open"))},closeMenu(e=!0){this.opened&&(this.opened=!1,this.$refs.popover.clearFocusTrap({returnFocus:e}),this.$emit("update:open",!1),this.$emit("close"),this.focusIndex=0,this.$refs.menuButton.$el.focus())},onOpen(e){this.$nextTick(()=>{this.focusFirstAction(e)})},onMouseFocusAction(e){if(document.activeElement===e.target)return;const n=e.target.closest("li");if(n){const c=n.querySelector(y);if(c){const a=[...this.$refs.menu.querySelectorAll(y)].indexOf(c);a>-1&&(this.focusIndex=a,this.focusAction())}}},onKeydown(e){(e.keyCode===38||e.keyCode===9&&e.shiftKey)&&this.focusPreviousAction(e),(e.keyCode===40||e.keyCode===9&&!e.shiftKey)&&this.focusNextAction(e),e.keyCode===33&&this.focusFirstAction(e),e.keyCode===34&&this.focusLastAction(e),e.keyCode===27&&(this.closeMenu(),e.preventDefault())},removeCurrentActive(){const e=this.$refs.menu.querySelector("li.active");e&&e.classList.remove("active")},focusAction(){const e=this.$refs.menu.querySelectorAll(y)[this.focusIndex];if(e){this.removeCurrentActive();const n=e.closest("li.action");e.focus(),n&&n.classList.add("active")}},focusPreviousAction(e){this.opened&&(this.focusIndex===0?this.closeMenu():(this.preventIfEvent(e),this.focusIndex=this.focusIndex-1),this.focusAction())},focusNextAction(e){if(this.opened){const n=this.$refs.menu.querySelectorAll(y).length-1;this.focusIndex===n?this.closeMenu():(this.preventIfEvent(e),this.focusIndex=this.focusIndex+1),this.focusAction()}},focusFirstAction(e){this.opened&&(this.preventIfEvent(e),this.focusIndex=0,this.focusAction())},focusLastAction(e){this.opened&&(this.preventIfEvent(e),this.focusIndex=this.$refs.menu.querySelectorAll(y).length-1,this.focusAction())},preventIfEvent(e){e&&(e.preventDefault(),e.stopPropagation())},onFocus(e){this.$emit("focus",e)},onBlur(e){this.$emit("blur",e)}},render(e){const n=(this.$slots.default||[]).filter(t=>{var i,o,s,l;return((i=t==null?void 0:t.componentOptions)==null?void 0:i.tag)||((l=(s=(o=t==null?void 0:t.componentOptions)==null?void 0:o.Ctor)==null?void 0:s.extendOptions)==null?void 0:l.name)}),c=t=>{var i,o,s,l,h,u,m,f;return((h=(s=(o=(i=t==null?void 0:t.componentOptions)==null?void 0:i.Ctor)==null?void 0:o.extendOptions)==null?void 0:s.name)!=null?h:(l=t==null?void 0:t.componentOptions)==null?void 0:l.tag)==="NcActionLink"&&((f=(m=(u=t==null?void 0:t.componentOptions)==null?void 0:u.propsData)==null?void 0:m.href)==null?void 0:f.startsWith(window.location.origin))},a=n.every(c);let r=n.filter(this.isValidSingleAction);if(this.forceMenu&&r.length>0&&this.inline>0&&(R.util.warn("Specifying forceMenu will ignore any inline actions rendering."),r=[]),n.length===0)return;const p=t=>{var m,f,v,A,b,x,B,I,O,$,g,N,S,C,k,q,w,M,E,F,D,L;const i=((v=(f=(m=t==null?void 0:t.data)==null?void 0:m.scopedSlots)==null?void 0:f.icon())==null?void 0:v[0])||e("span",{class:["icon",(b=(A=t==null?void 0:t.componentOptions)==null?void 0:A.propsData)==null?void 0:b.icon]}),o=(B=(x=t==null?void 0:t.componentOptions)==null?void 0:x.listeners)==null?void 0:B.click,s=(N=(g=($=(O=(I=t==null?void 0:t.componentOptions)==null?void 0:I.children)==null?void 0:O[0])==null?void 0:$.text)==null?void 0:g.trim)==null?void 0:N.call(g),l=((C=(S=t==null?void 0:t.componentOptions)==null?void 0:S.propsData)==null?void 0:C.ariaLabel)||s,h=this.forceName?s:"";let u=(q=(k=t==null?void 0:t.componentOptions)==null?void 0:k.propsData)==null?void 0:q.title;return this.forceName||u||(u=s),e("NcButton",{class:["action-item action-item--single",(w=t==null?void 0:t.data)==null?void 0:w.staticClass,(M=t==null?void 0:t.data)==null?void 0:M.class],attrs:{"aria-label":l,title:u},ref:(E=t==null?void 0:t.data)==null?void 0:E.ref,props:{type:this.type||(h?"secondary":"tertiary"),disabled:this.disabled||((D=(F=t==null?void 0:t.componentOptions)==null?void 0:F.propsData)==null?void 0:D.disabled),ariaHidden:this.ariaHidden,...(L=t==null?void 0:t.componentOptions)==null?void 0:L.propsData},on:{focus:this.onFocus,blur:this.onBlur,...!!o&&{click:H=>{o&&o(H)}}}},[e("template",{slot:"icon"},[i]),h])},d=t=>{var o,s;const i=((o=this.$slots.icon)==null?void 0:o[0])||(this.defaultIcon?e("span",{class:["icon",this.defaultIcon]}):e("DotsHorizontal",{props:{size:20}}));return e("NcPopover",{ref:"popover",props:{delay:0,handleResize:!0,shown:this.opened,placement:this.placement,boundary:this.boundariesElement,container:this.container,popoverBaseClass:"action-item__popper",setReturnFocus:(s=this.$refs.menuButton)==null?void 0:s.$el},attrs:{delay:0,handleResize:!0,shown:this.opened,placement:this.placement,boundary:this.boundariesElement,container:this.container,...this.manualOpen&&{triggers:[]},popoverBaseClass:"action-item__popper"},on:{show:this.openMenu,"after-show":this.onOpen,hide:this.closeMenu}},[e("NcButton",{class:"action-item__menutoggle",props:{type:this.triggerBtnType,disabled:this.disabled,ariaHidden:this.ariaHidden},slot:"trigger",ref:"menuButton",attrs:{"aria-haspopup":a?null:"menu","aria-label":this.menuName?null:this.ariaLabel,"aria-controls":this.opened?this.randomId:null,"aria-expanded":this.opened.toString()},on:{focus:this.onFocus,blur:this.onBlur}},[e("template",{slot:"icon"},[i]),this.menuName]),e("div",{class:{open:this.opened},attrs:{tabindex:"-1"},on:{keydown:this.onKeydown,mousemove:this.onMouseFocusAction},ref:"menu"},[e("ul",{attrs:{id:this.randomId,tabindex:"-1",role:a?null:"menu"}},[t])])])};if(n.length===1&&r.length===1&&!this.forceMenu)return p(r[0]);if(r.length>0&&this.inline>0){const t=r.slice(0,this.inline),i=n.filter(o=>!t.includes(o));return e("div",{class:["action-items",`action-item--${this.triggerBtnType}`]},[...t.map(p),i.length>0?e("div",{class:["action-item",{"action-item--open":this.opened}]},[d(i)]):null])}return e("div",{class:["action-item action-item--default-popover",`action-item--${this.triggerBtnType}`,{"action-item--open":this.opened}]},[d(n)])}},G=null,W=null;var J=V.normalizeComponent(j,G,W,!1,null,"b84866e9",null,null);const Q=J.exports;module.exports=Q;