balm-ui
Version:
A modular and customizable UI library based on Material Design and Vue 3
1 lines • 18.2 kB
JavaScript
!function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e(require("vue")):"function"===typeof define&&define.amd?define("UiBanner",["vue"],e):"object"===typeof exports?exports.UiBanner=e(require("vue")):t.UiBanner=e(t.Vue)}("undefined"!==typeof self?self:this,(function(t){return function(){"use strict";var e={744:function(t){var e=function(t){return function(t){return!!t&&"object"===typeof t}(t)&&!function(t){var e=Object.prototype.toString.call(t);return"[object RegExp]"===e||"[object Date]"===e||function(t){return t.$$typeof===n}(t)}(t)};var n="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function o(t,e){return!1!==e.clone&&e.isMergeableObject(t)?s((n=t,Array.isArray(n)?[]:{}),t,e):t;var n}function r(t,e,n){return t.concat(e).map((function(t){return o(t,n)}))}function i(t){return Object.keys(t).concat(function(t){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(t).filter((function(e){return Object.propertyIsEnumerable.call(t,e)})):[]}(t))}function a(t,e){try{return e in t}catch(n){return!1}}function c(t,e,n){var r={};return n.isMergeableObject(t)&&i(t).forEach((function(e){r[e]=o(t[e],n)})),i(e).forEach((function(i){(function(t,e){return a(t,e)&&!(Object.hasOwnProperty.call(t,e)&&Object.propertyIsEnumerable.call(t,e))})(t,i)||(a(t,i)&&n.isMergeableObject(e[i])?r[i]=function(t,e){if(!e.customMerge)return s;var n=e.customMerge(t);return"function"===typeof n?n:s}(i,n)(t[i],e[i],n):r[i]=o(e[i],n))})),r}function s(t,n,i){(i=i||{}).arrayMerge=i.arrayMerge||r,i.isMergeableObject=i.isMergeableObject||e,i.cloneUnlessOtherwiseSpecified=o;var a=Array.isArray(n);return a===Array.isArray(t)?a?i.arrayMerge(t,n,i):c(t,n,i):o(n,i)}s.all=function(t,e){if(!Array.isArray(t))throw new Error("first argument should be an array");return t.reduce((function(t,n){return s(t,n,e)}),{})};var l=s;t.exports=l},154:function(e){e.exports=t}},n={};function o(t){var r=n[t];if(void 0!==r)return r.exports;var i=n[t]={exports:{}};return e[t](i,i.exports,o),i.exports}o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,{a:e}),e},o.d=function(t,e){for(var n in e)o.o(e,n)&&!o.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)};var r={};o.d(r,{default:function(){return ft}});var i=o(744),a=o.n(i);const c=/(?:^\[object\s(.*?)\]$)/;var s=t=>Object.prototype.toString.call(t).replace(c,"$1").toLowerCase();const l=t=>{let{componentProps:e,propName:n,props:o}=t,r=o[n];if("object"===s(r)){const t=e[n].default;e[n].default=()=>a()(t,r)}else Array.isArray(r)?e[n].default=()=>r:e[n].default=r},u=t=>{let{componentMixins:e,propName:n,props:o}=t;if(e.length){let t=e.length;for(;t--;)if(e[t].props&&void 0!==e[t].props[n]){l({componentProps:e[t].props,propName:n,props:o});break}}};var p=(t,e)=>{for(const n of Object.keys(e))t.props?void 0===t.props[n]?u({componentMixins:t.mixins,propName:n,props:e}):l({componentProps:t.props,propName:n,props:e}):u({componentMixins:t.mixins,propName:n,props:e})};var d=t=>{const e={install(e){p(t,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),e.component(t.name,t)}};return e},f=o(154),y=function(t,e){return y=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},y(t,e)};function m(t,e){if("function"!==typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}y(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}var h=function(){return h=Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++)for(var r in e=arguments[n])Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r]);return t},h.apply(this,arguments)};Object.create;function b(t,e){var n="function"===typeof Symbol&&t[Symbol.iterator];if(!n)return t;var o,r,i=n.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(c){r={error:c}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a}function v(t,e,n){if(n||2===arguments.length)for(var o,r=0,i=e.length;r<i;r++)!o&&r in e||(o||(o=Array.prototype.slice.call(e,0,r)),o[r]=e[r]);return t.concat(o||Array.prototype.slice.call(e))}Object.create;"function"===typeof SuppressedError&&SuppressedError;var g=function(){function t(t){void 0===t&&(t={}),this.adapter=t}return Object.defineProperty(t,"cssClasses",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(t,"strings",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(t,"numbers",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(t,"defaultAdapter",{get:function(){return{}},enumerable:!1,configurable:!0}),t.prototype.init=function(){},t.prototype.destroy=function(){},t}(),C=function(){function t(t,e){for(var n=[],o=2;o<arguments.length;o++)n[o-2]=arguments[o];this.root=t,this.initialize.apply(this,v([],b(n))),this.foundation=void 0===e?this.getDefaultFoundation():e,this.foundation.init(),this.initialSyncWithDOM()}return t.attachTo=function(e){return new t(e,new g({}))},t.prototype.initialize=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e]},t.prototype.getDefaultFoundation=function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")},t.prototype.initialSyncWithDOM=function(){},t.prototype.destroy=function(){this.foundation.destroy()},t.prototype.listen=function(t,e,n){this.root.addEventListener(t,e,n)},t.prototype.unlisten=function(t,e,n){this.root.removeEventListener(t,e,n)},t.prototype.emit=function(t,e,n){var o;void 0===n&&(n=!1),"function"===typeof CustomEvent?o=new CustomEvent(t,{bubbles:n,detail:e}):(o=document.createEvent("CustomEvent")).initCustomEvent(t,n,!1,e),this.root.dispatchEvent(o)},t}(),E="mdc-dom-focus-sentinel",S=function(){function t(t,e){void 0===e&&(e={}),this.root=t,this.options=e,this.elFocusedBeforeTrapFocus=null}return t.prototype.trapFocus=function(){var t=this.getFocusableElements(this.root);if(0===t.length)throw new Error("FocusTrap: Element must have at least one focusable child.");this.elFocusedBeforeTrapFocus=document.activeElement instanceof HTMLElement?document.activeElement:null,this.wrapTabFocus(this.root),this.options.skipInitialFocus||this.focusInitialElement(t,this.options.initialFocusEl)},t.prototype.releaseFocus=function(){[].slice.call(this.root.querySelectorAll("."+E)).forEach((function(t){t.parentElement.removeChild(t)})),!this.options.skipRestoreFocus&&this.elFocusedBeforeTrapFocus&&this.elFocusedBeforeTrapFocus.focus()},t.prototype.wrapTabFocus=function(t){var e=this,n=this.createSentinel(),o=this.createSentinel();n.addEventListener("focus",(function(){var n=e.getFocusableElements(t);n.length>0&&n[n.length-1].focus()})),o.addEventListener("focus",(function(){var n=e.getFocusableElements(t);n.length>0&&n[0].focus()})),t.insertBefore(n,t.children[0]),t.appendChild(o)},t.prototype.focusInitialElement=function(t,e){var n=0;e&&(n=Math.max(t.indexOf(e),0)),t[n].focus()},t.prototype.getFocusableElements=function(t){return[].slice.call(t.querySelectorAll("[autofocus], [tabindex], a, input, textarea, select, button")).filter((function(t){var e="true"===t.getAttribute("aria-disabled")||null!=t.getAttribute("disabled")||null!=t.getAttribute("hidden")||"true"===t.getAttribute("aria-hidden"),n=t.tabIndex>=0&&t.getBoundingClientRect().width>0&&!t.classList.contains(E)&&!e,o=!1;if(n){var r=getComputedStyle(t);o="none"===r.display||"hidden"===r.visibility}return n&&!o}))},t.prototype.createSentinel=function(){var t=document.createElement("div");return t.setAttribute("tabindex","0"),t.setAttribute("aria-hidden","true"),t.classList.add(E),t},t}();function x(t,e){if(t.closest)return t.closest(e);for(var n=t;n;){if(O(n,e))return n;n=n.parentElement}return null}function O(t,e){return(t.matches||t.webkitMatchesSelector||t.msMatchesSelector).call(t,e)}var A,k,T="mdc-banner--closing",B="mdc-banner--open",_="mdc-banner--opening",F=250,N=300,j="MDCBanner:closed",w="MDCBanner:closing",P="MDCBanner:opened",M="MDCBanner:opening",D="MDCBanner:actionClicked",I=".mdc-banner__content",L=".mdc-banner__primary-action",V=".mdc-banner__secondary-action",R=".mdc-banner__text";!function(t){t[t.PRIMARY=0]="PRIMARY",t[t.SECONDARY=1]="SECONDARY",t[t.UNSPECIFIED=2]="UNSPECIFIED"}(A||(A={})),function(t){t[t.PRIMARY=0]="PRIMARY",t[t.SECONDARY=1]="SECONDARY",t[t.UNKNOWN=2]="UNKNOWN"}(k||(k={}));var $=_,H=B,U=T,Y=function(t){function e(n){var o=t.call(this,h(h({},e.defaultAdapter),n))||this;return o.isOpened=!1,o.animationFrame=0,o.animationTimer=0,o}return m(e,t),Object.defineProperty(e,"defaultAdapter",{get:function(){return{addClass:function(){},getContentHeight:function(){return 0},notifyClosed:function(){},notifyClosing:function(){},notifyOpened:function(){},notifyOpening:function(){},notifyActionClicked:function(){},releaseFocus:function(){},removeClass:function(){},setStyleProperty:function(){},trapFocus:function(){}}},enumerable:!1,configurable:!0}),e.prototype.destroy=function(){cancelAnimationFrame(this.animationFrame),this.animationFrame=0,clearTimeout(this.animationTimer),this.animationTimer=0},e.prototype.open=function(){var t=this;this.isOpened=!0,this.adapter.notifyOpening(),this.adapter.removeClass(U),this.adapter.addClass($);var e=this.adapter.getContentHeight();this.animationFrame=requestAnimationFrame((function(){t.adapter.addClass(H),t.adapter.setStyleProperty("height",e+"px"),t.animationTimer=setTimeout((function(){t.handleAnimationTimerEnd(),t.adapter.trapFocus(),t.adapter.notifyOpened()}),N)}))},e.prototype.close=function(t){var e=this;this.isOpened&&(cancelAnimationFrame(this.animationFrame),this.animationFrame=0,this.isOpened=!1,this.adapter.notifyClosing(t),this.adapter.addClass(U),this.adapter.setStyleProperty("height","0"),this.adapter.removeClass(H),this.adapter.removeClass($),clearTimeout(this.animationTimer),this.animationTimer=setTimeout((function(){e.adapter.releaseFocus(),e.handleAnimationTimerEnd(),e.adapter.notifyClosed(t)}),F))},e.prototype.isOpen=function(){return this.isOpened},e.prototype.handlePrimaryActionClick=function(t){void 0===t&&(t=!1),t?this.adapter.notifyActionClicked(0):this.close(A.PRIMARY)},e.prototype.handleSecondaryActionClick=function(t){void 0===t&&(t=!1),t?this.adapter.notifyActionClicked(1):this.close(A.SECONDARY)},e.prototype.layout=function(){var t=this.adapter.getContentHeight();this.adapter.setStyleProperty("height",t+"px")},e.prototype.handleAnimationTimerEnd=function(){this.animationTimer=0,this.adapter.removeClass($),this.adapter.removeClass(U)},e}(g),q=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return m(e,t),e.attachTo=function(t){return new e(t)},e.prototype.initialize=function(t){var e=this;void 0===t&&(t=function(t,e){return new S(t,e)}),this.contentEl=this.root.querySelector(I),this.textEl=this.root.querySelector(R),this.primaryActionEl=this.root.querySelector(L),this.secondaryActionEl=this.root.querySelector(V),this.focusTrapFactory=t,this.handleContentClick=function(t){var n=t.target;x(n,L)?e.foundation.handlePrimaryActionClick():x(n,V)&&e.foundation.handleSecondaryActionClick()}},e.prototype.initialSyncWithDOM=function(){this.registerContentClickHandler(this.handleContentClick),this.focusTrap=this.focusTrapFactory(this.root,{initialFocusEl:this.primaryActionEl})},e.prototype.destroy=function(){t.prototype.destroy.call(this),this.deregisterContentClickHandler(this.handleContentClick)},e.prototype.layout=function(){this.foundation.layout()},e.prototype.open=function(){this.foundation.open()},e.prototype.close=function(t){this.foundation.close(t)},e.prototype.getDefaultFoundation=function(){var t=this;return new Y({addClass:function(e){t.root.classList.add(e)},getContentHeight:function(){return t.contentEl.offsetHeight},notifyClosed:function(e){t.emit(j,{reason:e})},notifyClosing:function(e){t.emit(w,{reason:e})},notifyOpened:function(){t.emit(P,{})},notifyOpening:function(){t.emit(M,{})},notifyActionClicked:function(e){t.emit(D,{action:e})},releaseFocus:function(){t.focusTrap.releaseFocus()},removeClass:function(e){t.root.classList.remove(e)},setStyleProperty:function(e,n){t.root.style.setProperty(e,n)},trapFocus:function(){t.focusTrap.trapFocus()}})},Object.defineProperty(e.prototype,"isOpen",{get:function(){return this.foundation.isOpen()},enumerable:!1,configurable:!0}),e.prototype.getText=function(){return this.textEl.textContent||""},e.prototype.setText=function(t){this.textEl.textContent=t},e.prototype.getPrimaryActionText=function(){return this.primaryActionEl.textContent||""},e.prototype.setPrimaryActionText=function(t){this.primaryActionEl.textContent=t},e.prototype.getSecondaryActionText=function(){return this.secondaryActionEl?this.secondaryActionEl.textContent||"":null},e.prototype.setSecondaryActionText=function(t){this.secondaryActionEl&&(this.secondaryActionEl.textContent=t)},e.prototype.registerContentClickHandler=function(t){this.contentEl.addEventListener("click",t)},e.prototype.deregisterContentClickHandler=function(t){this.contentEl.removeEventListener("click",t)},e}(C);const z={cssClasses:{icon:"material-icons"},EVENTS:{CLICK:"click"},getMaterialIconClass:function(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return[z.cssClasses.icon,...e]}};var K=z;const W={icon:{type:String,default:""}};const G=(0,f.createElementVNode)("span",{class:"mdc-button__ripple"},null,-1),J=(0,f.createElementVNode)("span",{class:"mdc-button__focus-ring"},null,-1),Q=["textContent"],X={key:1,class:"mdc-button__label"},Z={name:"MdcButton",customOptions:{UI_GLOBAL:K}};var tt=Object.assign(Z,{props:{outlined:{type:Boolean,default:!1},unelevated:{type:Boolean,default:!1},...W,noLabel:{type:Boolean,default:!1}},emits:[K.EVENTS.CLICK],setup(t,e){let{emit:n}=e;const o=t,r=n,{handleClick:i}=function(t){let{emit:e}=t;return{handleClick:function(t){e(z.EVENTS.CLICK,t)}}}({emit:r}),{materialIcon:a}=function(t){return{materialIcon:(0,f.computed)((()=>t.icon||!1))}}(o),c=(0,f.computed)((()=>({"mdc-button":!0,"mdc-button--outlined":o.outlined,"mdc-button--unelevated":o.unelevated})));return(e,n)=>((0,f.openBlock)(),(0,f.createElementBlock)("button",{type:"button",class:(0,f.normalizeClass)(c.value),onClick:n[0]||(n[0]=function(){return(0,f.unref)(i)&&(0,f.unref)(i)(...arguments)})},[G,J,(0,f.renderSlot)(e.$slots,"icon",{},(()=>[(0,f.unref)(a)?((0,f.openBlock)(),(0,f.createElementBlock)("i",{key:0,class:(0,f.normalizeClass)((0,f.unref)(K).getMaterialIconClass("mdc-button__icon")),"aria-hidden":"true",textContent:(0,f.toDisplayString)((0,f.unref)(a))},null,10,Q)):(0,f.createCommentVNode)("",!0)])),t.noLabel?(0,f.renderSlot)(e.$slots,"default",{key:0}):((0,f.openBlock)(),(0,f.createElementBlock)("span",X,[(0,f.renderSlot)(e.$slots,"default")]))],2))}});var et=tt;const nt={class:"mdc-banner__content",role:"alertdialog","aria-live":"assertive"},ot={class:"mdc-banner__graphic-text-wrapper"},rt={key:0,class:"mdc-banner__graphic",role:"img"},it={class:"mdc-banner__text"},at={class:"mdc-banner__actions"},ct={name:"MdcBannerContent",customOptions:{}};var st=Object.assign(ct,{props:{primaryButtonText:{type:String,default:"OK"},secondaryButtonText:{type:String,default:""}},setup(t){return(e,n)=>((0,f.openBlock)(),(0,f.createElementBlock)("div",nt,[(0,f.createElementVNode)("div",ot,[e.$parent.withImage?((0,f.openBlock)(),(0,f.createElementBlock)("div",rt,[(0,f.renderSlot)(e.$slots,"image")])):(0,f.createCommentVNode)("",!0),(0,f.createElementVNode)("div",it,[(0,f.renderSlot)(e.$slots,"default")])]),(0,f.createElementVNode)("div",at,[(0,f.renderSlot)(e.$slots,"actions",{},(()=>[t.secondaryButtonText?((0,f.openBlock)(),(0,f.createBlock)(et,{key:0,class:"mdc-banner__secondary-action"},{default:(0,f.withCtx)((()=>[(0,f.createTextVNode)((0,f.toDisplayString)(t.secondaryButtonText),1)])),_:1})):(0,f.createCommentVNode)("",!0),(0,f.createVNode)(et,{class:"mdc-banner__primary-action"},{default:(0,f.withCtx)((()=>[(0,f.createTextVNode)((0,f.toDisplayString)(t.primaryButtonText),1)])),_:1})]))])]))}});const lt={key:0,class:"mdc-banner__fixed"},ut={EVENTS:{CHANGE:"update:modelValue",CLOSED:"closed"}},pt={name:"UiBanner",customOptions:{UI_BANNER:ut}};var dt=Object.assign(pt,{props:{modelValue:{type:Boolean,default:!1},centered:{type:Boolean,default:!1},fixed:{type:Boolean,default:!1},withImage:{type:Boolean,default:!1},mobileStacked:{type:Boolean,default:!1},primaryButtonText:{type:String,default:"OK"},secondaryButtonText:{type:String,default:""}},emits:[ut.EVENTS.CHANGE,ut.EVENTS.CLOSED],setup(t,e){let{emit:n}=e;const o=t,r=n,i=(0,f.ref)(null),a=(0,f.reactive)({$banner:null}),c=(0,f.computed)((()=>({"mdc-banner":!0,"mdc-banner--centered":o.centered,"mdc-banner--mobile-stacked":o.mobileStacked})));return(0,f.onMounted)((()=>{a.$banner=new q(i.value),a.$banner.listen(j,(t=>{let{detail:e}=t;r(ut.EVENTS.CHANGE,!1),r(ut.EVENTS.CLOSED,e.reason)})),(0,f.watch)((()=>o.modelValue),(t=>t?a.$banner.open():a.$banner.close()))})),(e,n)=>((0,f.openBlock)(),(0,f.createElementBlock)("div",{ref_key:"banner",ref:i,class:(0,f.normalizeClass)(c.value),role:"banner"},[t.fixed?((0,f.openBlock)(),(0,f.createElementBlock)("div",lt,[(0,f.createVNode)(st,{"primary-button-text":t.primaryButtonText,"secondary-button-text":t.secondaryButtonText},(0,f.createSlots)({_:2},[(0,f.renderList)(e.$slots,((t,n)=>({name:n,fn:(0,f.withCtx)((t=>[(0,f.renderSlot)(e.$slots,n,(0,f.normalizeProps)((0,f.guardReactiveProps)(t)))]))})))]),1032,["primary-button-text","secondary-button-text"])])):((0,f.openBlock)(),(0,f.createBlock)(st,{key:1,"primary-button-text":t.primaryButtonText,"secondary-button-text":t.secondaryButtonText},(0,f.createSlots)({_:2},[(0,f.renderList)(e.$slots,((t,n)=>({name:n,fn:(0,f.withCtx)((t=>[(0,f.renderSlot)(e.$slots,n,(0,f.normalizeProps)((0,f.guardReactiveProps)(t)))]))})))]),1032,["primary-button-text","secondary-button-text"]))],2))}});var ft=d(dt);return r=r.default}()}));