balm-ui
Version:
A modular and customizable UI library based on Material Design and Vue 3
1 lines • 19.1 kB
JavaScript
!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define("UiSnackbar",["vue"],t):"object"===typeof exports?exports.UiSnackbar=t(require("vue")):e.UiSnackbar=t(e.Vue)}("undefined"!==typeof self?self:this,(function(e){return function(){"use strict";var t={744:function(e){var t=function(e){return function(e){return!!e&&"object"===typeof e}(e)&&!function(e){var t=Object.prototype.toString.call(e);return"[object RegExp]"===t||"[object Date]"===t||function(e){return e.$$typeof===n}(e)}(e)};var n="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function o(e,t){return!1!==t.clone&&t.isMergeableObject(e)?c((n=e,Array.isArray(n)?[]:{}),e,t):e;var n}function r(e,t,n){return e.concat(t).map((function(e){return o(e,n)}))}function i(e){return Object.keys(e).concat(function(e){return Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter((function(t){return Object.propertyIsEnumerable.call(e,t)})):[]}(e))}function a(e,t){try{return t in e}catch(n){return!1}}function s(e,t,n){var r={};return n.isMergeableObject(e)&&i(e).forEach((function(t){r[t]=o(e[t],n)})),i(t).forEach((function(i){(function(e,t){return a(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,i)||(a(e,i)&&n.isMergeableObject(t[i])?r[i]=function(e,t){if(!t.customMerge)return c;var n=t.customMerge(e);return"function"===typeof n?n:c}(i,n)(e[i],t[i],n):r[i]=o(t[i],n))})),r}function c(e,n,i){(i=i||{}).arrayMerge=i.arrayMerge||r,i.isMergeableObject=i.isMergeableObject||t,i.cloneUnlessOtherwiseSpecified=o;var a=Array.isArray(n);return a===Array.isArray(e)?a?i.arrayMerge(e,n,i):s(e,n,i):o(n,i)}c.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,n){return c(e,n,t)}),{})};var u=c;e.exports=u},154:function(t){t.exports=e}},n={};function o(e){var r=n[e];if(void 0!==r)return r.exports;var i=n[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,{a:t}),t},o.d=function(e,t){for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var r={};o.d(r,{default:function(){return de}});var i=o(744),a=o.n(i);const s=/(?:^\[object\s(.*?)\]$)/;var c=e=>Object.prototype.toString.call(e).replace(s,"$1").toLowerCase();const u=e=>{let{componentProps:t,propName:n,props:o}=e,r=o[n];if("object"===c(r)){const e=t[n].default;t[n].default=()=>a()(e,r)}else Array.isArray(r)?t[n].default=()=>r:t[n].default=r},l=e=>{let{componentMixins:t,propName:n,props:o}=e;if(t.length){let e=t.length;for(;e--;)if(t[e].props&&void 0!==t[e].props[n]){u({componentProps:t[e].props,propName:n,props:o});break}}};var p=(e,t)=>{for(const n of Object.keys(t))e.props?void 0===e.props[n]?l({componentMixins:e.mixins,propName:n,props:t}):u({componentProps:e.props,propName:n,props:t}):l({componentMixins:e.mixins,propName:n,props:t})};var f=e=>{const t={install(t){p(e,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),t.component(e.name,e)}};return t},d=o(154),m={CLOSING:"mdc-snackbar--closing",OPEN:"mdc-snackbar--open",OPENING:"mdc-snackbar--opening"},y={ACTION_SELECTOR:".mdc-snackbar__action",ARIA_LIVE_LABEL_TEXT_ATTR:"data-mdc-snackbar-label-text",CLOSED_EVENT:"MDCSnackbar:closed",CLOSING_EVENT:"MDCSnackbar:closing",DISMISS_SELECTOR:".mdc-snackbar__dismiss",LABEL_SELECTOR:".mdc-snackbar__label",OPENED_EVENT:"MDCSnackbar:opened",OPENING_EVENT:"MDCSnackbar:opening",REASON_ACTION:"action",REASON_DISMISS:"dismiss",SURFACE_SELECTOR:".mdc-snackbar__surface"},E={DEFAULT_AUTO_DISMISS_TIMEOUT_MS:5e3,INDETERMINATE:-1,MAX_AUTO_DISMISS_TIMEOUT_MS:1e4,MIN_AUTO_DISMISS_TIMEOUT_MS:4e3,SNACKBAR_ANIMATION_CLOSE_TIME_MS:75,SNACKBAR_ANIMATION_OPEN_TIME_MS:150,ARIA_LIVE_DELAY_MS:1e3},b=E.ARIA_LIVE_DELAY_MS,h=y.ARIA_LIVE_LABEL_TEXT_ATTR;function T(e,t){void 0===t&&(t=e);var n=e.getAttribute("aria-live"),o=t.textContent.trim();if(o&&n){e.setAttribute("aria-live","off"),t.textContent="";var r=document.createElement("span");r.setAttribute("style","display: inline-block; width: 0; height: 1px;"),r.textContent="\xa0",t.appendChild(r),t.setAttribute(h,o),setTimeout((function(){e.setAttribute("aria-live",n),t.removeAttribute(h),t.textContent=o}),b)}}var O=function(e,t){return O=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},O(e,t)};function S(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}O(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}var C=function(){return C=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},C.apply(this,arguments)};Object.create;function _(e,t){var n="function"===typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(s){r={error:s}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a}function v(e,t,n){if(n||2===arguments.length)for(var o,r=0,i=t.length;r<i;r++)!o&&r in t||(o||(o=Array.prototype.slice.call(t,0,r)),o[r]=t[r]);return e.concat(o||Array.prototype.slice.call(t))}Object.create;"function"===typeof SuppressedError&&SuppressedError;var A=function(){function e(e){void 0===e&&(e={}),this.adapter=e}return Object.defineProperty(e,"cssClasses",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(e,"strings",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(e,"numbers",{get:function(){return{}},enumerable:!1,configurable:!0}),Object.defineProperty(e,"defaultAdapter",{get:function(){return{}},enumerable:!1,configurable:!0}),e.prototype.init=function(){},e.prototype.destroy=function(){},e}(),g=function(){function e(e,t){for(var n=[],o=2;o<arguments.length;o++)n[o-2]=arguments[o];this.root=e,this.initialize.apply(this,v([],_(n))),this.foundation=void 0===t?this.getDefaultFoundation():t,this.foundation.init(),this.initialSyncWithDOM()}return e.attachTo=function(t){return new e(t,new A({}))},e.prototype.initialize=function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t]},e.prototype.getDefaultFoundation=function(){throw new Error("Subclasses must override getDefaultFoundation to return a properly configured foundation class")},e.prototype.initialSyncWithDOM=function(){},e.prototype.destroy=function(){this.foundation.destroy()},e.prototype.listen=function(e,t,n){this.root.addEventListener(e,t,n)},e.prototype.unlisten=function(e,t,n){this.root.removeEventListener(e,t,n)},e.prototype.emit=function(e,t,n){var o;void 0===n&&(n=!1),"function"===typeof CustomEvent?o=new CustomEvent(e,{bubbles:n,detail:t}):(o=document.createEvent("CustomEvent")).initCustomEvent(e,n,!1,t),this.root.dispatchEvent(o)},e}();function N(e,t){if(e.closest)return e.closest(t);for(var n=e;n;){if(I(n,t))return n;n=n.parentElement}return null}function I(e,t){return(e.matches||e.webkitMatchesSelector||e.msMatchesSelector).call(e,t)}var M=m.OPENING,k=m.OPEN,D=m.CLOSING,L=y.REASON_ACTION,B=y.REASON_DISMISS,j=function(e){function t(n){var o=e.call(this,C(C({},t.defaultAdapter),n))||this;return o.opened=!1,o.animationFrame=0,o.animationTimer=0,o.autoDismissTimer=0,o.autoDismissTimeoutMs=E.DEFAULT_AUTO_DISMISS_TIMEOUT_MS,o.closeOnEscape=!0,o}return S(t,e),Object.defineProperty(t,"cssClasses",{get:function(){return m},enumerable:!1,configurable:!0}),Object.defineProperty(t,"strings",{get:function(){return y},enumerable:!1,configurable:!0}),Object.defineProperty(t,"numbers",{get:function(){return E},enumerable:!1,configurable:!0}),Object.defineProperty(t,"defaultAdapter",{get:function(){return{addClass:function(){},announce:function(){},notifyClosed:function(){},notifyClosing:function(){},notifyOpened:function(){},notifyOpening:function(){},removeClass:function(){}}},enumerable:!1,configurable:!0}),t.prototype.destroy=function(){this.clearAutoDismissTimer(),cancelAnimationFrame(this.animationFrame),this.animationFrame=0,clearTimeout(this.animationTimer),this.animationTimer=0,this.adapter.removeClass(M),this.adapter.removeClass(k),this.adapter.removeClass(D)},t.prototype.open=function(){var e=this;this.clearAutoDismissTimer(),this.opened=!0,this.adapter.notifyOpening(),this.adapter.removeClass(D),this.adapter.addClass(M),this.adapter.announce(),this.runNextAnimationFrame((function(){e.adapter.addClass(k),e.animationTimer=setTimeout((function(){var t=e.getTimeoutMs();e.handleAnimationTimerEnd(),e.adapter.notifyOpened(),t!==E.INDETERMINATE&&(e.autoDismissTimer=setTimeout((function(){e.close(B)}),t))}),E.SNACKBAR_ANIMATION_OPEN_TIME_MS)}))},t.prototype.close=function(e){var t=this;void 0===e&&(e=""),this.opened&&(cancelAnimationFrame(this.animationFrame),this.animationFrame=0,this.clearAutoDismissTimer(),this.opened=!1,this.adapter.notifyClosing(e),this.adapter.addClass(m.CLOSING),this.adapter.removeClass(m.OPEN),this.adapter.removeClass(m.OPENING),clearTimeout(this.animationTimer),this.animationTimer=setTimeout((function(){t.handleAnimationTimerEnd(),t.adapter.notifyClosed(e)}),E.SNACKBAR_ANIMATION_CLOSE_TIME_MS))},t.prototype.isOpen=function(){return this.opened},t.prototype.getTimeoutMs=function(){return this.autoDismissTimeoutMs},t.prototype.setTimeoutMs=function(e){var t=E.MIN_AUTO_DISMISS_TIMEOUT_MS,n=E.MAX_AUTO_DISMISS_TIMEOUT_MS;if(!(e===E.INDETERMINATE||e<=n&&e>=t))throw new Error("\n timeoutMs must be an integer in the range "+t+"\u2013"+n+"\n (or "+E.INDETERMINATE+" to disable), but got '"+e+"'");this.autoDismissTimeoutMs=e},t.prototype.getCloseOnEscape=function(){return this.closeOnEscape},t.prototype.setCloseOnEscape=function(e){this.closeOnEscape=e},t.prototype.handleKeyDown=function(e){("Escape"===e.key||27===e.keyCode)&&this.getCloseOnEscape()&&this.close(B)},t.prototype.handleActionButtonClick=function(e){this.close(L)},t.prototype.handleActionIconClick=function(e){this.close(B)},t.prototype.clearAutoDismissTimer=function(){clearTimeout(this.autoDismissTimer),this.autoDismissTimer=0},t.prototype.handleAnimationTimerEnd=function(){this.animationTimer=0,this.adapter.removeClass(m.OPENING),this.adapter.removeClass(m.CLOSING)},t.prototype.runNextAnimationFrame=function(e){var t=this;cancelAnimationFrame(this.animationFrame),this.animationFrame=requestAnimationFrame((function(){t.animationFrame=0,clearTimeout(t.animationTimer),t.animationTimer=setTimeout(e,0)}))},t}(A),w=y.SURFACE_SELECTOR,x=y.LABEL_SELECTOR,P=y.ACTION_SELECTOR,V=y.DISMISS_SELECTOR,R=y.OPENING_EVENT,U=y.OPENED_EVENT,F=y.CLOSING_EVENT,$=y.CLOSED_EVENT,K=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return S(t,e),t.attachTo=function(e){return new t(e)},t.prototype.initialize=function(e){void 0===e&&(e=function(){return T}),this.announce=e()},t.prototype.initialSyncWithDOM=function(){var e=this;this.surfaceEl=this.root.querySelector(w),this.labelEl=this.root.querySelector(x),this.actionEl=this.root.querySelector(P),this.handleKeyDown=function(t){e.foundation.handleKeyDown(t)},this.handleSurfaceClick=function(t){var n=t.target;e.isActionButton(n)?e.foundation.handleActionButtonClick(t):e.isActionIcon(n)&&e.foundation.handleActionIconClick(t)},this.registerKeyDownHandler(this.handleKeyDown),this.registerSurfaceClickHandler(this.handleSurfaceClick)},t.prototype.destroy=function(){e.prototype.destroy.call(this),this.deregisterKeyDownHandler(this.handleKeyDown),this.deregisterSurfaceClickHandler(this.handleSurfaceClick)},t.prototype.open=function(){this.foundation.open()},t.prototype.close=function(e){void 0===e&&(e=""),this.foundation.close(e)},t.prototype.getDefaultFoundation=function(){var e=this;return new j({addClass:function(t){e.root.classList.add(t)},announce:function(){e.announce(e.labelEl)},notifyClosed:function(t){return e.emit($,t?{reason:t}:{})},notifyClosing:function(t){return e.emit(F,t?{reason:t}:{})},notifyOpened:function(){return e.emit(U,{})},notifyOpening:function(){return e.emit(R,{})},removeClass:function(t){return e.root.classList.remove(t)}})},Object.defineProperty(t.prototype,"timeoutMs",{get:function(){return this.foundation.getTimeoutMs()},set:function(e){this.foundation.setTimeoutMs(e)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"closeOnEscape",{get:function(){return this.foundation.getCloseOnEscape()},set:function(e){this.foundation.setCloseOnEscape(e)},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"isOpen",{get:function(){return this.foundation.isOpen()},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"labelText",{get:function(){return this.labelEl.textContent},set:function(e){this.labelEl.textContent=e},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"actionButtonText",{get:function(){return this.actionEl.textContent},set:function(e){this.actionEl.textContent=e},enumerable:!1,configurable:!0}),t.prototype.registerKeyDownHandler=function(e){this.listen("keydown",e)},t.prototype.deregisterKeyDownHandler=function(e){this.unlisten("keydown",e)},t.prototype.registerSurfaceClickHandler=function(e){this.surfaceEl.addEventListener("click",e)},t.prototype.deregisterSurfaceClickHandler=function(e){this.surfaceEl.removeEventListener("click",e)},t.prototype.isActionButton=function(e){return Boolean(N(e,P))},t.prototype.isActionIcon=function(e){return Boolean(N(e,V))},t}(g);const G={cssClasses:{icon:"material-icons"},EVENTS:{CLICK:"click"},getMaterialIconClass:function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return[G.cssClasses.icon,...t]}};function H(e){let{emit:t}=e;return{handleClick:function(e){t(G.EVENTS.CLICK,e)}}}var z=G;const X={icon:{type:String,default:""}};const q=(0,d.createElementVNode)("span",{class:"mdc-button__ripple"},null,-1),Y=(0,d.createElementVNode)("span",{class:"mdc-button__focus-ring"},null,-1),W=["textContent"],J={key:1,class:"mdc-button__label"},Q={name:"MdcButton",customOptions:{UI_GLOBAL:z}};var Z=Object.assign(Q,{props:{outlined:{type:Boolean,default:!1},unelevated:{type:Boolean,default:!1},...X,noLabel:{type:Boolean,default:!1}},emits:[z.EVENTS.CLICK],setup(e,t){let{emit:n}=t;const o=e,r=n,{handleClick:i}=H({emit:r}),{materialIcon:a}=function(e){return{materialIcon:(0,d.computed)((()=>e.icon||!1))}}(o),s=(0,d.computed)((()=>({"mdc-button":!0,"mdc-button--outlined":o.outlined,"mdc-button--unelevated":o.unelevated})));return(t,n)=>((0,d.openBlock)(),(0,d.createElementBlock)("button",{type:"button",class:(0,d.normalizeClass)(s.value),onClick:n[0]||(n[0]=function(){return(0,d.unref)(i)&&(0,d.unref)(i)(...arguments)})},[q,Y,(0,d.renderSlot)(t.$slots,"icon",{},(()=>[(0,d.unref)(a)?((0,d.openBlock)(),(0,d.createElementBlock)("i",{key:0,class:(0,d.normalizeClass)((0,d.unref)(z).getMaterialIconClass("mdc-button__icon")),"aria-hidden":"true",textContent:(0,d.toDisplayString)((0,d.unref)(a))},null,10,W)):(0,d.createCommentVNode)("",!0)])),e.noLabel?(0,d.renderSlot)(t.$slots,"default",{key:0}):((0,d.openBlock)(),(0,d.createElementBlock)("span",J,[(0,d.renderSlot)(t.$slots,"default")]))],2))}});var ee=Z;const te=(0,d.createElementVNode)("div",{class:"mdc-icon-button__ripple"},null,-1),ne=(0,d.createElementVNode)("span",{class:"mdc-icon-button__focus-ring"},null,-1),oe={name:"MdcIconButton",customOptions:{UI_GLOBAL:z}};var re=Object.assign(oe,{emits:[z.EVENTS.CLICK],setup(e,t){let{emit:n}=t;const o=n,{handleClick:r}=H({emit:o});return(e,t)=>((0,d.openBlock)(),(0,d.createElementBlock)("button",{type:"button",class:(0,d.normalizeClass)(["mdc-icon-button",(0,d.unref)(z).cssClasses.icon]),onClick:t[0]||(t[0]=function(){return(0,d.unref)(r)&&(0,d.unref)(r)(...arguments)})},[te,ne,(0,d.renderSlot)(e.$slots,"default")],2))}});var ie=re;const ae={class:"mdc-snackbar__surface",role:"status","aria-relevant":"additions"},se={class:"mdc-snackbar__label","aria-atomic":"false"},ce={class:"mdc-snackbar__actions","aria-atomic":"true"},ue="UiSnackbar",le={ACTION_TYPE:{ACTION_BUTTON:0,DISMISS_ICON:1},timeoutMs:{MIN:4e3,MAX:1e4,DEFAULTS:5e3,disabled:-1},position:{TOP:"top",BOTTOM:"bottom",CENTER:"center"},EVENTS:{CHANGE:"update:modelValue",CLOSED:"closed"}},pe={name:ue,customOptions:{name:ue,UI_SNACKBAR:le}};var fe=Object.assign(pe,{props:{actionType:{type:Number,default:le.ACTION_TYPE.ACTION_BUTTON},modelValue:{type:Boolean,default:!1},timeoutMs:{type:[Number,String],default:le.timeoutMs.DEFAULTS},message:{type:String,default:""},actionButtonText:{type:String,default:""},stacked:{type:Boolean,default:!1},leading:{type:Boolean,default:!1},position:{type:String,default:le.position.BOTTOM}},emits:[le.EVENTS.CHANGE,le.EVENTS.CLOSED],setup(e,t){let{emit:n}=t;const o=e,r=n,i=(0,d.ref)(null),a=(0,d.reactive)({$snackbar:null}),s=(0,d.computed)((()=>["top","center"].includes(o.position)?`mdc-snackbar--${o.position}`:"")),c=(0,d.computed)((()=>i.value&&i.value.classList.contains("mdc-snackbar--open"))),u=(0,d.computed)((()=>[{"mdc-snackbar":!0,"mdc-snackbar--stacked":o.stacked,"mdc-snackbar--leading":o.leading,"mdc-snackbar--open":c.value},s.value])),l=(0,d.computed)((()=>o.actionType===le.ACTION_TYPE.DISMISS_ICON)),p=(0,d.computed)((()=>l.value?"mdc-snackbar__dismiss":"mdc-snackbar__action"));function f(e){e>=le.timeoutMs.MIN&&e<=le.timeoutMs.MAX||e===le.timeoutMs.disabled?a.$snackbar.timeoutMs=e:console.warn(`[${ue}]: The 'timeoutMs' prop must be between ${le.timeoutMs.MIN} and ${le.timeoutMs.MAX}`)}return(0,d.watch)((()=>o.modelValue),(e=>{e&&a.$snackbar.open()})),(0,d.watch)((()=>o.timeoutMs),(e=>{f(+e)})),(0,d.watch)((()=>o.message),(e=>{a.$snackbar.labelText=e})),(0,d.onMounted)((()=>{a.$snackbar=new K(i.value),f(+o.timeoutMs),o.message&&(a.$snackbar.labelText=o.message),a.$snackbar.listen(y.CLOSED_EVENT,(()=>{r(le.EVENTS.CHANGE,!1),r(le.EVENTS.CLOSED)}))})),(t,n)=>((0,d.openBlock)(),(0,d.createElementBlock)("div",{ref_key:"snackbar",ref:i,class:(0,d.normalizeClass)(u.value)},[(0,d.createElementVNode)("div",ae,[(0,d.createElementVNode)("div",se,[(0,d.renderSlot)(t.$slots,"default",{},(()=>[(0,d.createTextVNode)((0,d.toDisplayString)(e.message),1)]))]),(0,d.createElementVNode)("div",ce,[(0,d.renderSlot)(t.$slots,"action",{actionClass:p.value},(()=>[l.value?((0,d.openBlock)(),(0,d.createBlock)(ie,{key:0,class:(0,d.normalizeClass)(p.value)},{default:(0,d.withCtx)((()=>[(0,d.createTextVNode)(" close ")])),_:1},8,["class"])):((0,d.openBlock)(),(0,d.createElementBlock)(d.Fragment,{key:1},[e.actionButtonText?((0,d.openBlock)(),(0,d.createBlock)(ee,{key:0,class:(0,d.normalizeClass)(p.value)},{default:(0,d.withCtx)((()=>[(0,d.createTextVNode)((0,d.toDisplayString)(e.actionButtonText),1)])),_:1},8,["class"])):(0,d.createCommentVNode)("",!0)],64))]))])])],2))}});var de=f(fe);return r=r.default}()}));