vue3-mq/dist/vue3-mq.cjs

Build responsive design into your Vue 3 app

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