@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
3 lines (2 loc) • 5.88 kB
JavaScript
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),d=require("../../common/mixins/modal.cjs"),l=require("./modal-constants.cjs"),n=require("../../common/utils/index.cjs"),i=require("../../common/constants/index.cjs"),c=require("../../shared/sr_only_close_button.cjs"),u=require("../../localization/index.cjs"),_=require("../../node_modules/@linusborg/vue-simple-portal.cjs"),m=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),h=require("../button/button.cjs"),f=require("../lazy-show/lazy-show.cjs"),E=require("../notice/notice-constants.cjs"),p={name:"DtModal",components:{DtLazyShow:f.default,DtButton:h.default,DtIconClose:r.DtIconClose,SrOnlyCloseButton:c.default,Portal:_.Portal},mixins:[d.default],props:{copy:{type:String,default:""},describedById:{type:String,default:""},labelledById:{type:String,default:function(){return n.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:""},bannerTitle:{type:String,default:""},kind:{type:String,default:"default",validator:e=>Object.keys(l.MODAL_KIND_MODIFIERS).includes(e)},size:{type:String,default:"default",validator:e=>Object.keys(l.MODAL_SIZE_MODIFIERS).includes(e)},modalClass:{type:[String,Object,Array],default:""},dialogClass:{type:[String,Object,Array],default:""},contentClass:{type:[String,Object,Array],default:""},bannerKind:{type:String,default:"warning",validate(e){return E.NOTICE_KINDS.includes(e)}},bannerClass:{type:[String,Object,Array],default:""},hideClose:{type:Boolean,default:!1},closeOnClick:{type:Boolean,default:!0},fixedHeaderFooter:{type:Boolean,default:!0},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:e=>e==="first"||e instanceof HTMLElement||e.startsWith("#")},appendTo:{type:String,default:void 0}},emits:["update:show"],data(){return{MODAL_KIND_MODIFIERS:l.MODAL_KIND_MODIFIERS,MODAL_SIZE_MODIFIERS:l.MODAL_SIZE_MODIFIERS,MODAL_BANNER_KINDS:l.MODAL_BANNER_KINDS,EVENT_KEYNAMES:i.EVENT_KEYNAMES,i18n:new u.DialtoneLocalization}},computed:{modalListeners(){return{...this.$listeners,click:e=>{this.closeOnClick&&e.target===e.currentTarget?this.close():this.show&&e.target!==e.currentTarget&&this.handleModalClick(e),this.$emit("click",e)},keydown:e=>{switch(e.code){case i.EVENT_KEYNAMES.esc:case i.EVENT_KEYNAMES.escape:this.close();break;case i.EVENT_KEYNAMES.tab:this.trapFocus(e);break}this.$emit("keydown",e)},"after-enter":async()=>{this.$emit("update:show",!0),await this.setFocusAfterTransition()}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return l.MODAL_BANNER_KINDS[this.bannerKind]},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},watch:{show:{handler(e){var t,s,a;if(e){this.previousActiveElement=document.activeElement;const o=((t=this.$refs.modalRoot)==null?void 0:t.$el)||this.$el;n.disableRootScrolling(o.getRootNode().host)}else{const o=((s=this.$refs.modalRoot)==null?void 0:s.$el)||this.$el;n.enableRootScrolling(o.getRootNode().host),(a=this.previousActiveElement)==null||a.focus(),this.previousActiveElement=null}}}},methods:{close(){this.$emit("update:show",!1)},async setFocusAfterTransition(){var t;const e=((t=this.$refs.modalRoot)==null?void 0:t.$el)||this.$el;this.initialFocusElement==="first"?await this.focusFirstElement(e):this.initialFocusElement.startsWith("#")?await this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(e){var t;if(this.show){const s=((t=this.$refs.modalRoot)==null?void 0:t.$el)||this.$el;this.focusTrappedTabPress(e,s)}},handleModalClick(e){var o;const t=e.target,s=((o=this.$refs.modalRoot)==null?void 0:o.$el)||this.$el,a=this._getFocusableElements(s);a.length&&!a.includes(t)&&(a.includes(document.activeElement)||this.focusFirstElement(s))}}};var b=function(){var t=this,s=t._self._c;return s("portal",{attrs:{disabled:!t.appendTo,selector:t.appendTo}},[s("dt-lazy-show",t._g({ref:"modalRoot",class:["d-modal",t.MODAL_KIND_MODIFIERS[t.kind],t.MODAL_SIZE_MODIFIERS[t.size],t.modalClass],attrs:{transition:"d-zoom",show:t.show,"data-qa":"dt-modal","aria-hidden":t.open}},t.modalListeners),[t.show&&(t.$slots.banner||t.bannerTitle)?s("div",{class:["d-modal__banner",t.bannerClass,t.bannerKindClass],attrs:{"data-qa":"dt-modal-banner"}},[t._t("banner",function(){return[t._v(" "+t._s(t.bannerTitle)+" ")]})],2):t._e(),s("transition",{attrs:{appear:"",name:"d-modal__dialog"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],class:["d-modal__dialog",{"d-modal__dialog--scrollable":t.fixedHeaderFooter},t.dialogClass],attrs:{role:"dialog","aria-modal":"true","aria-describedby":t.describedById,"aria-labelledby":t.labelledById}},[t.$slots.header?s("div",{staticClass:"d-modal__header",attrs:{id:t.labelledById,"data-qa":"dt-modal-title"}},[t._t("header")],2):s("h2",{staticClass:"d-modal__header",attrs:{id:t.labelledById,"data-qa":"dt-modal-title"}},[t._v(" "+t._s(t.title)+" ")]),t.$slots.default?s("div",{class:["d-modal__content",t.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[t._t("default")],2):s("p",{class:["d-modal__content",t.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[t._v(" "+t._s(t.copy)+" ")]),t.hasFooterSlot?s("footer",{staticClass:"d-modal__footer"},[t._t("footer")],2):t._e(),t.hideClose?s("sr-only-close-button",{on:{close:t.close}}):s("dt-button",{staticClass:"d-modal__close",attrs:{"data-qa":"dt-modal-close-button",size:"md",kind:"muted",importance:"clear","aria-label":t.closeButtonTitle,title:t.closeButtonTitle},on:{click:t.close},scopedSlots:t._u([{key:"icon",fn:function({iconSize:a}){return[s("dt-icon-close",{attrs:{size:a}})]}}])})],1)])],1)],1)},y=[],S=m.n(p,b,y);const g=S.exports;exports.default=g;
//# sourceMappingURL=modal.cjs.map