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

Nextcloud vue components

var _=require("../assets/index4.css");const l=require("../chunks/ScopeComponent-f6122f5a.cjs"),u=require("../chunks/focusTrap-139520e2.cjs"),i=require("../chunks/l10n-46d0c1c0.cjs"),c=require("../chunks/GenRandomId-67df40eb.cjs"),d=require("../chunks/l10n-dacb6440.cjs"),h=require("./NcActions.cjs"),p=require("./NcButton.cjs");require("../Directives/Tooltip.cjs");const m=require("vue-material-design-icons/ChevronLeft.vue"),y=require("vue-material-design-icons/ChevronRight.vue"),w=require("vue-material-design-icons/Close.vue"),f=require("vue-material-design-icons/Pause.vue"),v=require("vue-material-design-icons/Play.vue"),g=require("focus-trap"),T=require("@vueuse/core"),C=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs"),b=require("floating-vue");function S(e,t){let s,n,o=t,a;this.start=function(){a=!0,n=new Date,s=setTimeout(e,o)},this.pause=function(){a=!1,clearTimeout(s),o-=new Date-n},this.clear=function(){a=!1,clearTimeout(s),o=0},this.getTimeLeft=function(){return a&&(this.pause(),this.start()),o},this.getStateRunning=function(){return a},this.start()}const k={name:"NcModal",components:{NcActions:h,ChevronLeft:m,ChevronRight:y,Close:w,Pause:f,Play:v,NcButton:p},directives:{tooltip:b.VTooltip},mixins:[d.l10n],props:{name:{type:String,default:""},hasPrevious:{type:Boolean,default:!1},hasNext:{type:Boolean,default:!1},outTransition:{type:Boolean,default:!1},enableSlideshow:{type:Boolean,default:!1},slideshowDelay:{type:Number,default:5e3},slideshowPaused:{type:Boolean,default:!1},enableSwipe:{type:Boolean,default:!0},spreadNavigation:{type:Boolean,default:!1},size:{type:String,default:"normal",validator:e=>["small","normal","large","full"].includes(e)},canClose:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0},dark:{type:Boolean,default:!1},container:{type:[String,null],default:"body"},closeButtonContained:{type:Boolean,default:!0},additionalTrapElements:{type:Array,default:()=>[]},inlineActions:{type:Number,default:0},show:{type:Boolean,default:void 0}},emits:["previous","next","close","update:show"],data(){return{mc:null,playing:!1,slideshowTimeout:null,iconSize:24,focusTrap:null,randId:c.GenRandomId(),internalShow:!0}},computed:{showModal(){return this.show===void 0?this.internalShow:this.show},modalTransitionName(){return`modal-${this.outTransition?"out":"in"}`},playPauseName(){return this.playing?i.t("Pause slideshow"):i.t("Start slideshow")},cssVariables(){return{"--slideshow-duration":this.slideshowDelay+"ms","--icon-size":this.iconSize+"px"}},closeButtonAriaLabel(){return i.t("Close modal")},prevButtonAriaLabel(){return i.t("Previous")},nextButtonAriaLabel(){return i.t("Next")}},watch:{slideshowPaused(e){this.slideshowTimeout&&(e?this.slideshowTimeout.pause():this.slideshowTimeout.start())},additionalTrapElements(e){if(this.focusTrap){const t=this.$refs.mask;this.focusTrap.updateContainerElements([t,...e])}}},beforeMount(){window.addEventListener("keydown",this.handleKeydown)},beforeDestroy(){window.removeEventListener("keydown",this.handleKeydown),this.mc.stop()},mounted(){this.useFocusTrap(),this.mc=T.useSwipe(this.$refs.mask,{onSwipeEnd:this.handleSwipe}),this.container&&(this.container==="body"?document.body.insertBefore(this.$el,document.body.lastChild):document.querySelector(this.container).appendChild(this.$el))},destroyed(){this.clearFocusTrap(),this.$el.remove()},methods:{previous(e){this.hasPrevious&&(e&&this.resetSlideshow(),this.$emit("previous",e))},next(e){this.hasNext&&(e&&this.resetSlideshow(),this.$emit("next",e))},close(e){this.canClose&&(this.internalShow=!1,this.$emit("update:show",!1),setTimeout(()=>{this.$emit("close",e)},300))},handleClickModalWrapper(e){this.closeOnClickOutside&&this.close(e)},handleKeydown(e){if(e.key==="Escape")return this.close(e);const t={ArrowLeft:this.previous,ArrowRight:this.next};if(t[e.key])return document.activeElement&&!this.$el.contains(document.activeElement)?void 0:t[e.key](e)},handleSwipe(e,t){this.enableSwipe&&(t==="left"?this.next(e):t==="right"&&this.previous(e))},togglePlayPause(){this.playing=!this.playing,this.playing?this.handleSlideshow():this.clearSlideshowTimeout()},resetSlideshow(){this.playing=!this.playing,this.clearSlideshowTimeout(),this.$nextTick(function(){this.togglePlayPause()})},handleSlideshow(){this.playing=!0,this.hasNext?this.slideshowTimeout=new S(()=>{this.next(),this.handleSlideshow()},this.slideshowDelay):(this.playing=!1,this.clearSlideshowTimeout())},clearSlideshowTimeout(){this.slideshowTimeout&&this.slideshowTimeout.clear()},async useFocusTrap(){if(!this.showModal||this.focusTrap)return;const e=this.$refs.mask;await this.$nextTick();const t={allowOutsideClick:!0,fallbackFocus:e,trapStack:u.getTrapStack(),escapeDeactivates:!1};this.focusTrap=g.createFocusTrap([e,...this.additionalTrapElements],t),this.focusTrap.activate()},clearFocusTrap(){var e;this.focusTrap&&((e=this.focusTrap)==null||e.deactivate(),this.focusTrap=null)}}};var x=function(){var e=this,t=e._self._c;return t("transition",{attrs:{name:"fade",appear:""},on:{"after-enter":e.useFocusTrap,"before-leave":e.clearFocusTrap}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.showModal,expression:"showModal"}],ref:"mask",staticClass:"modal-mask",class:{"modal-mask--dark":e.dark},style:e.cssVariables,attrs:{role:"dialog","aria-modal":"true","aria-labelledby":"modal-name-"+e.randId,"aria-describedby":"modal-description-"+e.randId,tabindex:"-1"}},[t("transition",{attrs:{name:"fade-visibility",appear:""}},[t("div",{staticClass:"modal-header"},[e.name.trim()!==""?t("h2",{staticClass:"modal-name",attrs:{id:"modal-name-"+e.randId}},[e._v(" "+e._s(e.name)+" ")]):e._e(),t("div",{staticClass:"icons-menu"},[e.hasNext&&e.enableSlideshow?t("button",{directives:[{name:"tooltip",rawName:"v-tooltip.auto",value:e.playPauseName,expression:"playPauseName",modifiers:{auto:!0}}],staticClass:"play-pause-icons",class:{"play-pause-icons--paused":e.slideshowPaused},attrs:{type:"button"},on:{click:e.togglePlayPause}},[e.playing?t("Pause",{staticClass:"play-pause-icons__pause",attrs:{size:e.iconSize}}):t("Play",{staticClass:"play-pause-icons__play",attrs:{size:e.iconSize}}),t("span",{staticClass:"hidden-visually"},[e._v(" "+e._s(e.playPauseName)+" ")]),e.playing?t("svg",{staticClass:"progress-ring",attrs:{height:"50",width:"50"}},[t("circle",{staticClass:"progress-ring__circle",attrs:{stroke:"white","stroke-width":"2",fill:"transparent",r:"15",cx:"25",cy:"25"}})]):e._e()],1):e._e(),t("NcActions",{staticClass:"header-actions",attrs:{inline:e.inlineActions}},[e._t("actions")],2),e.canClose&&!e.closeButtonContained?t("NcButton",{staticClass:"header-close",attrs:{"aria-label":e.closeButtonAriaLabel,type:"tertiary"},on:{click:e.close},scopedSlots:e._u([{key:"icon",fn:function(){return[t("Close",{attrs:{size:e.iconSize}})]},proxy:!0}],null,!1,1841713362)}):e._e()],1)])]),t("transition",{attrs:{name:e.modalTransitionName,appear:""}},[t("div",{directives:[{name:"show",rawName:"v-show",value:e.showModal,expression:"showModal"}],staticClass:"modal-wrapper",class:[`modal-wrapper--${e.size}`,e.spreadNavigation?"modal-wrapper--spread-navigation":""],on:{mousedown:function(s){return s.target!==s.currentTarget?null:e.handleClickModalWrapper.apply(null,arguments)}}},[t("transition",{attrs:{name:"fade-visibility",appear:""}},[t("NcButton",{directives:[{name:"show",rawName:"v-show",value:e.hasPrevious,expression:"hasPrevious"}],staticClass:"prev",class:{invisible:!e.hasPrevious},attrs:{type:"tertiary-no-background","aria-label":e.prevButtonAriaLabel},on:{click:e.previous},scopedSlots:e._u([{key:"icon",fn:function(){return[t("ChevronLeft",{attrs:{size:40}})]},proxy:!0}])})],1),t("div",{staticClass:"modal-container",attrs:{id:"modal-description-"+e.randId}},[e.canClose&&e.closeButtonContained?t("NcButton",{staticClass:"modal-container__close",attrs:{type:"tertiary","aria-label":e.closeButtonAriaLabel},on:{click:e.close},scopedSlots:e._u([{key:"icon",fn:function(){return[t("Close",{attrs:{size:20}})]},proxy:!0}],null,!1,2121748766)}):e._e(),t("div",{staticClass:"modal-container__content"},[e._t("default")],2)],1),t("transition",{attrs:{name:"fade-visibility",appear:""}},[t("NcButton",{directives:[{name:"show",rawName:"v-show",value:e.hasNext,expression:"hasNext"}],staticClass:"next",class:{invisible:!e.hasNext},attrs:{type:"tertiary-no-background","aria-label":e.nextButtonAriaLabel},on:{click:e.next},scopedSlots:e._u([{key:"icon",fn:function(){return[t("ChevronRight",{attrs:{size:40}})]},proxy:!0}])})],1)],1)])],1)])},N=[],B=C.normalizeComponent(k,x,N,!1,null,"27c27b41",null,null);const r=B.exports;l.ScopeComponent(r),module.exports=r;