vue3-mq/dist/vue3-mq.cjs

Build responsive design into your Vue 3 app

Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n&&e(r,Symbol.toStringTag,{value:`Module`}),r};let n=require(`vue`);var r=(0,n.ref)([]),i=(0,n.ref)(null),a=(0,n.ref)(null),o=(0,n.ref)(null),s=(0,n.ref)(null),c=(0,n.reactive)({current:``});const l=[],u=(0,n.ref)(!1),d=(0,n.readonly)(r),f=(0,n.readonly)(i),p=(0,n.readonly)(a),m=(0,n.readonly)(o),h=(0,n.readonly)(s),g=(0,n.readonly)(c),_=e=>{r.value=e},v=e=>{i.value=e},ee=e=>{a.value=e},y=e=>{o.value=e},b=e=>{s.value=e},x=(e=f.value)=>{c.current=e;let t=d.value.findIndex(t=>t.name===e),n=d.value.map(e=>e.name);for(let r=0;r<n.length;r++){if(r>0&&r<n.length-1){let e=n[r]+`Minus`,i=n[r]+`Plus`;c[e]=t<=r,c[i]=t>=r}c[n[r]]=n[r]===e}},S=()=>{let e=Object.keys(c);for(let t of e)delete c[t];x(),C(),w(),T()},C=(e=p.value)=>{c.orientation=e,c.isLandscape=e===`landscape`,c.isPortrait=e===`portrait`},w=(e=m.value||`light`)=>{c.theme=e,c.isDark=e===`dark`,c.isLight=e===`light`},T=(e=h.value||`no-preference`)=>{c.motionPreference=e,c.isMotion=e===`no-preference`,c.isInert=e===`reduce`};function E(){for(;l.length>0;){let e=l.shift();if(e&&typeof e==`object`){let{mql:t,cb:n}=e;t.addEventListener&&typeof t.addEventListener==`function`?t.removeEventListener(`change`,n):t.removeListener(n)}}}function te(){return d.value.reduce((e,t,n,r)=>{let i=`(min-width: ${t.min}px)`,a=n<r.length-1?`(max-width: ${r[n+1].min-1}px)`:null,o=i+(a?` and `+a:``);return Object.assign(e,{[t.name]:o})},{})}function D(e,t){if(typeof window>`u`||!window.matchMedia)return!1;if(typeof window<`u`&&!window.matchMedia)return console.error(`Vue3 Mq: No MatchMedia support detected in this browser. Responsive breakpoints not available.`),!1;{u.value=!0;let n=window.matchMedia(e),r=({matches:e})=>{e&&t()};l.push({mql:n,cb:r}),n.addEventListener&&typeof n.addEventListener==`function`?n.addEventListener(`change`,r):n.addListener(r),r(n)}}var O=e=>d.value.some(t=>t.name===e);const k=(e,t)=>{let n=t.value.map(e=>e.name);if(e){if(Array.isArray(e))return e.filter(e=>O(e));if(typeof e==`string`&&/\w+\+$/.test(e)){if(e=e.replace(/\+$/,``),O(e)===!1)return console.error(`Vue3 Mq: ${e} is not a valid breakpoint key. Invalid range.`),n;let r=t.value.findIndex(t=>t.name===e);return t.value.slice(r).map(e=>e.name)}else if(typeof e==`string`&&/\w+-$/.test(e)){if(e=e.replace(/-$/,``),O(e)===!1)return console.error(`Vue3 Mq: ${e} is not a valid breakpoint key. Invalid range.`),n;let r=t.value.findIndex(t=>t.name===e);return t.value.slice(0,r+1).map(e=>e.name)}else if(typeof e==`string`&&/^\w+-\w+$/.test(e)){let[r,i]=e.split(`-`);if(O(r)===!1)return console.error(`Vue3 Mq: ${r} is not a valid breakpoint key. Invalid range.`),n;if(O(i)===!1)return console.error(`Vue3 Mq: ${i} is not a valid breakpoint key. Invalid range.`),n;let a=t.value.findIndex(e=>e.name===r),o=t.value.findIndex(e=>e.name===i);return t.value.slice(a,o+1).map(e=>e.name)}else if(typeof e==`string`&&O(e)===!0)return[e];else return n}else return n},A=(e,t)=>{let n=[];return!e&&!t?[`landscape`,`portrait`]:(e&&n.push(`landscape`),t&&n.push(`portrait`),n)},j=(e,t)=>{let n=[];return!t&&!e?[`light`,`dark`]:(t&&n.push(`light`),e&&n.push(`dark`),n)},M=(e,t)=>{let n=[];return!e&&!t?[`reduce`,`no-preference`]:(e&&n.push(`reduce`),t&&n.push(`no-preference`),n)};var N=t({bootstrap3:()=>I,bootstrap4:()=>F,bootstrap5:()=>P,bulma:()=>W,devices:()=>V,mui:()=>U,tailwind:()=>B,vuetify:()=>z,vuetify3:()=>R,vuetify4:()=>L,wordpress:()=>H},1);const P={xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1400},F={xs:0,sm:576,md:768,lg:992,xl:1200},I={xs:0,sm:768,md:992,lg:1200},L={xs:0,sm:600,md:840,lg:1145,xl:1545,xxl:2138},R={xs:0,sm:600,md:960,lg:1280,xl:1920,xxl:2560},z={xs:0,sm:600,md:960,lg:1264,xl:1904},B={xs:0,sm:640,md:768,lg:1024,xl:1280,xxl:1536},V={phone:0,tablet:768,laptop:1370,desktop:1906},H={mobile:0,small:600,medium:782,large:960,xlarge:1080,wide:1280,huge:1440},U={xs:0,sm:600,md:900,lg:1200,xl:1536},W={mobile:0,tablet:768,desktop:1024,widescreen:1216,fullhd:1408},G=e=>{if(typeof e==`string`&&N[e])return N[e];{let t=Object.keys(N);return console.error(`Vue3 Mq: "${e}" is not a valid preset. Available options are: ${t.join(`, `)}`),!1}},K=e=>[`landscape`,`portrait`].includes(e)===!1?(console.error(`Vue3 Mq: "${e}" is not a valid default orientation. Reverting to unset value.`),null):e,q=(e=null)=>[`dark`,`light`].includes(e)===!1&&e!==null?(console.error(`Vue3 Mq: "${e}" is not a valid default theme. Reverting to unset value.`),null):e,J=(e=null)=>[`no-preference`,`reduce`].includes(e)===!1&&e!==null?(console.error(`Vue3 Mq: "${e}" is not a valid default motion preference. Reverting to unset value.`),null):e,Y=e=>{if(!e||typeof e!=`object`)return!1;let t=[];for(let n in e){let r=parseFloat(e[n]);if(!n||typeof n!=`string`){console.warn(`Vue3 Mq: Invalid or missing breakpoint key (${JSON.stringify(n)}). Skipping.`);continue}else if(/^[^a-z]/i.test(n)||/[^a-zA-Z0-9_]/.test(n)){console.warn(`Vue3 Mq: "${n}" is an invalid breakpoint key. Breakpoint keys must start with a letter and contain only alphanumeric characters and underscores. Skipping.`);continue}else if(!r&&r!==0||isNaN(r)||r<0){console.warn(`Vue3 Mq: "${n}: ${e[n]}" is not a valid breakpoint. Breakpoints should be a number of zero or above. Skipping.`);continue}t.push({name:n,min:r})}return t.some(e=>e.min===0)||console.warn(`Vue3 Mq: You have not declared a breakpoint with a minimum value of 0. There may be screen sizes to which Vue3Mq does not respond.`),new Set(t.map(e=>e.min)).size<t.length&&console.warn(`Vue3 Mq: Your breakpoint configuration contains duplicate values. Behaviour may be unpredictable.`),t.length===0?!1:t.sort((e,t)=>e.min-t.min)},X=e=>{let t=e.split(`:`),n={};for(let e of t)if(/\D/.test(e)===!1)continue;else [`landscape`,`portrait`].includes(e)?n.slotOrientation=e:[`light`,`dark`].includes(e)?n.slotTheme=e:[`inert`,`motion`].includes(e)?n.slotMotion=e:n.slotBp=e;return n};var Z={name:`fade`,mode:`out-in`},Q={name:`MqResponsive`,props:{target:[String,Array],landscape:{type:Boolean,default:!1},portrait:{type:Boolean,default:!1},dark:{type:Boolean,default:!1},light:{type:Boolean,default:!1},inert:{type:Boolean,default:!1},motion:{type:Boolean,default:!1},tag:{type:String,default:`div`},listTag:{type:String,default:`div`},group:{type:Boolean,default:!1}},setup(e,{attrs:t,emit:r,slots:i}){let a=(0,n.computed)(()=>k(e.target,d)),o=(0,n.computed)(()=>A(e.landscape,e.portrait)),s=(0,n.computed)(()=>j(e.dark,e.light)),c=(0,n.computed)(()=>M(e.inert,e.motion)),l=(0,n.computed)(()=>a.value.includes(g.current)&&o.value.includes(g.orientation)&&s.value.includes(g.theme)&&c.value.includes(g.motionPreference)),u=t=>{if(!e.group&&i.length>0)return i;let r=[];for(let e in i){let{slotBp:a,slotOrientation:o,slotTheme:s,slotMotion:c}=X(e),l=(0,n.computed)(()=>k(a,d)),u=(0,n.computed)(()=>A(o===`landscape`,o===`portrait`)),f=(0,n.computed)(()=>j(s===`dark`,s===`light`)),p=(0,n.computed)(()=>M(c===`inert`,c===`motion`));(0,n.computed)(()=>l.value.includes(g.current)&&u.value.includes(g.orientation)&&f.value.includes(g.theme)&&p.value.includes(g.motionPreference)).value===!0&&r.push((0,n.h)(t||i[e],{key:e},t?i[e]():void 0))}return r.length>0?r:void 0};return i.default?()=>l.value?(0,n.h)(e.tag,{...t},i.default()):void 0:()=>{let r=Object.assign({},Z,t,{tag:e.tag});return(0,n.h)(e.group?n.TransitionGroup:n.Transition,r,()=>u(e.listTag))}}};function $({breakpoints:e,mergeBreakpoints:t={},preset:n}){let r=n?G(n):!1,i=e?Y(e):!1;if(r===!1&&!i)throw TypeError(`Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.`);_(i||Y({...r,...t})),E(),S();let a=te();for(let e in a){let t=a[e];D(t,()=>{x(e)})}[`portrait`,`landscape`].forEach(e=>{D(`(orientation: ${e})`,()=>{C(e)})}),[`light`,`dark`].forEach(e=>{D(`(prefers-color-scheme: ${e})`,()=>{w(e)})}),[`reduce`,`no-preference`].forEach(e=>{D(`(prefers-reduced-motion: ${e})`,()=>{T(e)})})}function ne(){let e=(0,n.inject)(`mq`);if(e)return e;throw Error(`Vue3Mq is not installed in this app. Please follow the installation instructions and try again.`)}var re=(e,{preset:t=`bootstrap5`,breakpoints:n,mergeBreakpoints:r,defaultBreakpoint:i,defaultOrientation:a=`landscape`,defaultMotion:o=`no-preference`,defaultTheme:s,global:c=!1}={})=>{try{let l=K(a),u=q(s),d=J(o);v(i),ee(l),y(u),b(d),e.provide(`mq`,g),e.provide(`updateBreakpoints`,$),c===!0&&(e.component(`MqResponsive`,Q),e.config.globalProperties.$mq=g),$({breakpoints:n,mergeBreakpoints:r,preset:t})}catch(e){console.error(e)}},ie={install:re};exports.MqResponsive=Q,exports.Vue3Mq=ie,exports.availableBreakpoints=d,exports.updateBreakpoints=$,exports.useMq=ne;