balm-ui/components/side-sheet/index.js

A modular and customizable UI library based on Material Design and Vue 3

!function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define("UiSideSheet",["vue"],t):"object"===typeof exports?exports.UiSideSheet=t(require("vue")):e.UiSideSheet=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===o}(e)}(e)};var o="function"===typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function n(e,t){return!1!==t.clone&&t.isMergeableObject(e)?i((o=e,Array.isArray(o)?[]:{}),e,t):e;var o}function r(e,t,o){return e.concat(t).map((function(e){return n(e,o)}))}function c(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 s(e,t){try{return t in e}catch(o){return!1}}function a(e,t,o){var r={};return o.isMergeableObject(e)&&c(e).forEach((function(t){r[t]=n(e[t],o)})),c(t).forEach((function(c){(function(e,t){return s(e,t)&&!(Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))})(e,c)||(s(e,c)&&o.isMergeableObject(t[c])?r[c]=function(e,t){if(!t.customMerge)return i;var o=t.customMerge(e);return"function"===typeof o?o:i}(c,o)(e[c],t[c],o):r[c]=n(t[c],o))})),r}function i(e,o,c){(c=c||{}).arrayMerge=c.arrayMerge||r,c.isMergeableObject=c.isMergeableObject||t,c.cloneUnlessOtherwiseSpecified=n;var s=Array.isArray(o);return s===Array.isArray(e)?s?c.arrayMerge(e,o,c):a(e,o,c):n(o,c)}i.all=function(e,t){if(!Array.isArray(e))throw new Error("first argument should be an array");return e.reduce((function(e,o){return i(e,o,t)}),{})};var l=i;e.exports=l},154:function(t){t.exports=e}},o={};function n(e){var r=o[e];if(void 0!==r)return r.exports;var c=o[e]={exports:{}};return t[e](c,c.exports,n),c.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var r={};n.d(r,{default:function(){return A}});var c=n(744),s=n.n(c);const a=/(?:^\[object\s(.*?)\]$)/;var i=e=>Object.prototype.toString.call(e).replace(a,"$1").toLowerCase();const l=e=>{let{componentProps:t,propName:o,props:n}=e,r=n[o];if("object"===i(r)){const e=t[o].default;t[o].default=()=>s()(e,r)}else Array.isArray(r)?t[o].default=()=>r:t[o].default=r},u=e=>{let{componentMixins:t,propName:o,props:n}=e;if(t.length){let e=t.length;for(;e--;)if(t[e].props&&void 0!==t[e].props[o]){l({componentProps:t[e].props,propName:o,props:n});break}}};var d=(e,t)=>{for(const o of Object.keys(t))e.props?void 0===e.props[o]?u({componentMixins:e.mixins,propName:o,props:t}):l({componentProps:e.props,propName:o,props:t}):u({componentMixins:e.mixins,propName:o,props:t})};var p=e=>{const t={install(t){d(e,arguments.length>1&&void 0!==arguments[1]?arguments[1]:{}),t.component(e.name,e)}};return t},m=n(154);const f={cssClasses:{icon:"material-icons"},EVENTS:{CLICK:"click"},getMaterialIconClass:function(){for(var e=arguments.length,t=new Array(e),o=0;o<e;o++)t[o]=arguments[o];return[f.cssClasses.icon,...t]}};var y=f;const b=(0,m.createElementVNode)("div",{class:"mdc-icon-button__ripple"},null,-1),v=(0,m.createElementVNode)("span",{class:"mdc-icon-button__focus-ring"},null,-1),h={name:"MdcIconButton",customOptions:{UI_GLOBAL:y}};var E=Object.assign(h,{emits:[y.EVENTS.CLICK],setup(e,t){let{emit:o}=t;const n=o,{handleClick:r}=function(e){let{emit:t}=e;return{handleClick:function(e){t(f.EVENTS.CLICK,e)}}}({emit:n});return(e,t)=>((0,m.openBlock)(),(0,m.createElementBlock)("button",{type:"button",class:(0,m.normalizeClass)(["mdc-icon-button",(0,m.unref)(y).cssClasses.icon]),onClick:t[0]||(t[0]=function(){return(0,m.unref)(r)&&(0,m.unref)(r)(...arguments)})},[b,v,(0,m.renderSlot)(e.$slots,"default")],2))}});var g=E,S="mdc-dialog-scroll-lock";["textarea",".mdc-menu .mdc-list-item",".mdc-menu .mdc-deprecated-list-item"].join(", ");function j(){document.querySelector("body").classList.remove(S)}function C(e){document.querySelector("body").classList.contains(S)&&(j(),window.removeEventListener("popstate",C))}const N={key:0,class:"mdc-side-sheet__container"},k={class:"mdc-side-sheet__wrapper"},O={key:0,class:"mdc-side-sheet__header"},_={class:"mdc-side-sheet__title"},V={class:"mdc-side-sheet__content"},x={key:0,class:"mdc-side-sheet__actions"},w={EVENTS:{CHANGE:"update:modelValue"}},B={name:"UiSideSheet",customOptions:{UI_SIDE_SHEET:w}};var M=Object.assign(B,{props:{modelValue:{type:Boolean,default:!1},closable:{type:Boolean,default:!1}},emits:[w.EVENTS.CHANGE],setup(e,t){let{emit:o}=t;const n=e,r=o,c=(0,m.useSlots)(),s=(0,m.reactive)({closing:!1}),a=(0,m.computed)((()=>({"mdc-side-sheet":!0,"mdc-side-sheet--open":n.modelValue,"mdc-side-sheet--closing":s.closing}))),i=(0,m.computed)((()=>c.title||n.closable)),l=(0,m.computed)((()=>c.actions));function u(){s.closing=!0,setTimeout((()=>{r(w.EVENTS.CHANGE,!1),s.closing=!1}),300)}return(0,m.watch)((()=>n.modelValue),(e=>{e?function(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];document.querySelector("body").classList.add(S),e&&window.addEventListener("popstate",C)}():j()})),(t,o)=>((0,m.openBlock)(),(0,m.createElementBlock)("div",{class:(0,m.normalizeClass)(a.value)},[(0,m.createVNode)(m.Transition,{name:"mdc-side-sheet"},{default:(0,m.withCtx)((()=>[e.modelValue?((0,m.openBlock)(),(0,m.createElementBlock)("div",N,[(0,m.createElementVNode)("div",k,[i.value?((0,m.openBlock)(),(0,m.createElementBlock)("header",O,[(0,m.createElementVNode)("h4",_,[(0,m.renderSlot)(t.$slots,"title")]),e.closable?((0,m.openBlock)(),(0,m.createBlock)(g,{key:0,tabindex:"-1",onClick:o[0]||(o[0]=e=>u())},{default:(0,m.withCtx)((()=>[(0,m.createTextVNode)(" close ")])),_:1})):(0,m.createCommentVNode)("",!0)])):(0,m.createCommentVNode)("",!0),(0,m.createElementVNode)("div",V,[(0,m.renderSlot)(t.$slots,"default")])]),l.value?((0,m.openBlock)(),(0,m.createElementBlock)("footer",x,[(0,m.renderSlot)(t.$slots,"actions")])):(0,m.createCommentVNode)("",!0)])):(0,m.createCommentVNode)("",!0)])),_:3}),(0,m.createElementVNode)("div",{class:"mdc-side-sheet__scrim",onClick:u})],2))}});var A=p(M);return r=r.default}()}));