vue3-mq - npm Package Compare versions

Comparing version 3.0.1 to 3.0.2

dist/vue3-mq.cjs.js

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

dist/vue3-mq.es.js

@@ -1,1 +0,457 @@
-var e=Object.defineProperty,t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable,r=(t,n,a)=>n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):t[n]=a;import{ref as o,reactive as i,readonly as s,computed as l,h as u,TransitionGroup as d,Transition as p,inject as c}from"vue";const f=o([]),v=o(null),m=o(null),g=o(null),h=i({current:""}),y=[],b=o(!1),k=s(f),w=s(v),M=s(m),q=s(g),x=s(h),$=(e=w.value)=>{h.current=e;const t=k.value.findIndex((t=>t.name===e)),n=k.value.map((e=>e.name));for(let a=0;a<n.length;a++){if(a>0&&a<n.length-1){const e=n[a]+"Minus",r=n[a]+"Plus";h[e]=t<=a,h[r]=t>=a}h[n[a]]=n[a]===e}},V=(e=M.value)=>{h.orientation=e,h.isLandscape="landscape"===e,h.isPortrait="portrait"===e},O=(e=q.value||"light")=>{h.theme=e,h.isDark="dark"===e,h.isLight="light"===e};function j(e,t){if("undefined"==typeof window||!window.matchMedia)return!1;if("undefined"!=typeof window&&!window.matchMedia)return console.error("Vue3 Mq: No MatchMedia support detected in this browser. Responsive breakpoints not available."),!1;{b.value=!0;const n=window.matchMedia(e),a=({matches:e})=>{e&&t()};y.push({mql:n,cb:a});n.addEventListener&&"function"==typeof n.addEventListener?n.addEventListener("change",a):n.addListener(a),a(n)}}const B=e=>k.value.some((t=>t.name===e)),E=(e,t)=>{const n=t.value.map((e=>e.name));if(e){if(Array.isArray(e))return e.filter((e=>B(e)));if("string"==typeof e&&/\w+\+$/.test(e)){if(e=e.replace(/\+$/,""),!1===B(e))return console.error(`Vue3 Mq: ${e} is not a valid breakpoint key. Invalid range.`),n;const a=t.value.findIndex((t=>t.name===e));return t.value.slice(a).map((e=>e.name))}if("string"==typeof e&&/\w+-$/.test(e)){if(e=e.replace(/-$/,""),!1===B(e))return console.error(`Vue3 Mq: ${e} is not a valid breakpoint key. Invalid range.`),n;const a=t.value.findIndex((t=>t.name===e));return t.value.slice(0,a+1).map((e=>e.name))}if("string"==typeof e&&/^\w+-\w+$/.test(e)){const[a,r]=e.split("-");if(!1===B(a))return console.error(`Vue3 Mq: ${a} is not a valid breakpoint key. Invalid range.`),n;if(!1===B(r))return console.error(`Vue3 Mq: ${r} is not a valid breakpoint key. Invalid range.`),n;const o=t.value.findIndex((e=>e.name===a)),i=t.value.findIndex((e=>e.name===r));return t.value.slice(o,i+1).map((e=>e.name))}return"string"==typeof e&&!0===B(e)?[e]:n}return n},I=(e,t)=>{const n=[];return e||t?(e&&n.push("landscape"),t&&n.push("portrait"),n):["landscape","portrait"]},S=(e,t)=>{const n=[];return t||e?(t&&n.push("light"),e&&n.push("dark"),n):["light","dark"]};var L=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",bootstrap5:{xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1400},bootstrap4:{xs:0,sm:576,md:768,lg:992,xl:1200},bootstrap3:{xs:0,sm:768,md:992,lg:1200},vuetify:{xs:0,sm:600,md:960,lg:1264,xl:1904},tailwind:{xs:0,sm:640,md:768,lg:1024,xl:1280,xxl:1536},devices:{phone:0,tablet:768,laptop:1370,desktop:1906}});const T=e=>{if(!e||"object"!=typeof e)return!1;const t=[];for(let n in e){const a=parseFloat(e[n]);n&&"string"==typeof n?/^[^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.`):!a&&0!==a||isNaN(a)||a<0?console.warn(`Vue3 Mq: "${n}: ${e[n]}" is not a valid breakpoint. Breakpoints should be a number of zero or above. Skipping.`):t.push({name:n,min:a}):console.warn(`Vue3 Mq: Invalid or missing breakpoint key (${JSON.stringify(n)}). Skipping.`)}t.some((e=>0===e.min))||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.");return new Set(t.map((e=>e.min))).size<t.length&&console.warn("Vue3 Mq: Your breakpoint configuration contains duplicate values. Behaviour may be unpredictable."),0!==t.length&&t.sort(((e,t)=>e.min-t.min))},z=e=>{const t=e.split(":"),n={};for(let a of t)!1!==/\D/.test(a)&&(["landscape","portrait"].includes(a)?n.slotOrientation=a:["light","dark"].includes(a)?n.slotTheme=a:n.slotBp=a);return n},P={name:"fade",mode:"out-in"};var A={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},tag:{type:String,default:"div"},listTag:{type:String,default:"div"},group:{type:Boolean,default:!1}},setup(e,{attrs:o,emit:i,slots:s}){const c=l((()=>E(e.target,k))),f=l((()=>I(e.landscape,e.portrait))),v=l((()=>S(e.dark,e.light))),m=l((()=>c.value.includes(x.current)&&f.value.includes(x.orientation)&&v.value.includes(x.theme)));return s.default?()=>m.value?u(e.tag,((e,o)=>{for(var i in o||(o={}))n.call(o,i)&&r(e,i,o[i]);if(t)for(var i of t(o))a.call(o,i)&&r(e,i,o[i]);return e})({},o),s.default()):void 0:()=>{const t=Object.assign({},P,o,{tag:e.tag}),n=e.group?d:p;return u(n,t,(()=>(t=>{if(!e.group&&s.length>0)return s;const n=[];for(let e in s){const{slotBp:a,slotOrientation:r,slotTheme:o}=z(e),i=l((()=>E(a,k))),d=l((()=>I("landscape"===r,"portrait"===r))),p=l((()=>S("dark"===o,"light"===o)));!0===l((()=>i.value.includes(x.current)&&d.value.includes(x.orientation)&&p.value.includes(x.theme))).value&&n.push(u(t||s[e],{key:e},t?s[e]():void 0))}return n.length>0?n:void 0})(e.listTag)))}}};function R({breakpoints:e,preset:t}){const n=(e=>{if("string"==typeof e&&L[e])return L[e];{const t=Object.keys(L);return console.error(`Vue3 Mq: "${e}" is not a valid preset. Available options are: ${t.join(", ")}`),!1}})(t),a=T(e);if(!1===n&&!a)throw new TypeError("Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.");var r;r=a||T(n),f.value=r,function(){for(;y.length>0;){const e=y.shift();if(e&&"object"==typeof e){const{mql:t,cb:n}=e;t.addEventListener&&"function"==typeof t.addEventListener?t.removeEventListener("change",n):t.removeListener(n)}}}(),(()=>{const e=Object.keys(h);for(let t of e)delete h[t];$(),V(),O()})();const o=k.value.reduce(((e,t,n,a)=>{const r=`(min-width: ${t.min}px)`,o=n<a.length-1?`(max-width: ${a[n+1].min-1}px)`:null,i=r+(o?" and "+o:"");return Object.assign(e,{[t.name]:i})}),{});for(const i in o){j(o[i],(()=>{$(i)}))}["portrait","landscape"].forEach((e=>{j(`(orientation: ${e})`,(()=>{V(e)}))})),["light","dark"].forEach((e=>{j(`(prefers-color-scheme: ${e})`,(()=>{O(e)}))}))}function _(){const e=c("mq");if(e)return e;throw new Error("Vue3Mq is not installed in this app. Please follow the installation instructions and try again.")}var N={install:(e,{preset:t="bootstrap5",breakpoints:n,defaultBreakpoint:a,defaultOrientation:r="landscape",defaultTheme:o}={})=>{try{const l=!1===["landscape","portrait"].includes(s=r)?(console.error(`Vue3 Mq: "${s}" is not a valid default orientation. Reverting to unset value.`),null):s,u=((e=null)=>!1===["dark","light"].includes(e)&&null!==e?(console.error(`Vue3 Mq: "${e}" is not a valid default theme. Reverting to unset value.`),null):e)(o);i=a,v.value=i,(e=>{m.value=e})(l),(e=>{g.value=e})(u),e.provide("mq",x),e.provide("updateBreakpoints",R),R({breakpoints:n,preset:t})}catch(l){console.error(l)}var i,s}};export{A as MqResponsive,N as Vue3Mq,k as availableBreakpoints,R as updateBreakpoints,_ as useMq};
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { ref, reactive, readonly, computed, h, TransitionGroup, Transition, inject } from "vue";
+const _availableBreakpoints = ref([]);
+const _defaultBreakpoint = ref(null);
+const _defaultOrientation = ref(null);
+const _defaultTheme = ref(null);
+const _mqState = reactive({
+  current: ""
+});
+const _listeners = [];
+const _isMounted = ref(false);
+const availableBreakpoints = readonly(_availableBreakpoints);
+const defaultBreakpoint = readonly(_defaultBreakpoint);
+const defaultOrientation = readonly(_defaultOrientation);
+const defaultTheme = readonly(_defaultTheme);
+const mqState = readonly(_mqState);
+const setAvailableBreakpoints = (v) => {
+  _availableBreakpoints.value = v;
+};
+const setDefaultBreakpoint = (v) => {
+  _defaultBreakpoint.value = v;
+};
+const setDefaultOrientation = (v) => {
+  _defaultOrientation.value = v;
+};
+const setDefaultTheme = (v) => {
+  _defaultTheme.value = v;
+};
+const updateState = (v = defaultBreakpoint.value) => {
+  _mqState.current = v;
+  const currentIndex = availableBreakpoints.value.findIndex((bp) => bp.name === v);
+  const allKeys = availableBreakpoints.value.map((bp) => bp.name);
+  for (let i = 0; i < allKeys.length; i++) {
+    if (i > 0 && i < allKeys.length - 1) {
+      const mKey = allKeys[i] + "Minus";
+      const pKey = allKeys[i] + "Plus";
+      _mqState[mKey] = currentIndex <= i ? true : false;
+      _mqState[pKey] = currentIndex >= i ? true : false;
+    }
+    _mqState[allKeys[i]] = allKeys[i] === v ? true : false;
+  }
+};
+const resetState = () => {
+  const keys = Object.keys(_mqState);
+  for (let key of keys) {
+    delete _mqState[key];
+  }
+  updateState();
+  updateOrientationState();
+  updateThemeState();
+};
+const updateOrientationState = (v = defaultOrientation.value) => {
+  _mqState.orientation = v;
+  _mqState.isLandscape = v === "landscape";
+  _mqState.isPortrait = v === "portrait";
+};
+const updateThemeState = (v = defaultTheme.value || "light") => {
+  _mqState.theme = v;
+  _mqState.isDark = v === "dark";
+  _mqState.isLight = v === "light";
+};
+function removeListeners() {
+  while (_listeners.length > 0) {
+    const listener = _listeners.shift();
+    if (listener && typeof listener === "object") {
+      const { mql, cb } = listener;
+      const supportsAEL = mql.addEventListener && typeof mql.addEventListener === "function";
+      if (supportsAEL)
+        mql.removeEventListener("change", cb);
+      else
+        mql.removeListener(cb);
+    }
+  }
+}
+function createMediaQueries() {
+  const mediaQueries = availableBreakpoints.value.reduce((acc, curr, index, arr) => {
+    const min = `(min-width: ${curr.min}px)`;
+    const max = index < arr.length - 1 ? `(max-width: ${arr[index + 1].min - 1}px)` : null;
+    const query = min + (max ? " and " + max : "");
+    return Object.assign(acc, {
+      [curr.name]: query
+    });
+  }, {});
+  return mediaQueries;
+}
+function subscribeToMediaQuery(mediaQuery, callback) {
+  if (typeof window === "undefined" || !window.matchMedia)
+    return false;
+  else if (typeof window !== "undefined" && !window.matchMedia) {
+    console.error("Vue3 Mq: No MatchMedia support detected in this browser. Responsive breakpoints not available.");
+    return false;
+  } else {
+    _isMounted.value = true;
+    const mql = window.matchMedia(mediaQuery);
+    const cb = ({ matches }) => {
+      if (matches)
+        callback();
+    };
+    _listeners.push({ mql, cb });
+    const supportsAEL = mql.addEventListener && typeof mql.addEventListener === "function";
+    if (supportsAEL)
+      mql.addEventListener("change", cb);
+    else
+      mql.addListener(cb);
+    cb(mql);
+  }
+}
+const validateBreakpoint = (bp) => {
+  return availableBreakpoints.value.some((available) => available.name === bp);
+};
+const calculateBreakpointsToRender = (bp, available) => {
+  const allKeys = available.value.map((a) => a.name);
+  if (!bp)
+    return allKeys;
+  else if (Array.isArray(bp)) {
+    return bp.filter((n) => validateBreakpoint(n));
+  } else if (typeof bp === "string" && /\w+\+$/.test(bp)) {
+    bp = bp.replace(/\+$/, "");
+    if (validateBreakpoint(bp) === false) {
+      console.error(`Vue3 Mq: ${bp} is not a valid breakpoint key. Invalid range.`);
+      return allKeys;
+    }
+    const fromIndex = available.value.findIndex((n) => n.name === bp);
+    return available.value.slice(fromIndex).map((n) => n.name);
+  } else if (typeof bp === "string" && /\w+-$/.test(bp)) {
+    bp = bp.replace(/-$/, "");
+    if (validateBreakpoint(bp) === false) {
+      console.error(`Vue3 Mq: ${bp} is not a valid breakpoint key. Invalid range.`);
+      return allKeys;
+    }
+    const toIndex = available.value.findIndex((n) => n.name === bp);
+    return available.value.slice(0, toIndex + 1).map((n) => n.name);
+  } else if (typeof bp === "string" && /^\w+-\w+$/.test(bp)) {
+    const [fromKey, toKey] = bp.split("-");
+    if (validateBreakpoint(fromKey) === false) {
+      console.error(`Vue3 Mq: ${fromKey} is not a valid breakpoint key. Invalid range.`);
+      return allKeys;
+    } else if (validateBreakpoint(toKey) === false) {
+      console.error(`Vue3 Mq: ${toKey} is not a valid breakpoint key. Invalid range.`);
+      return allKeys;
+    }
+    const fromIndex = available.value.findIndex((n) => n.name === fromKey);
+    const toIndex = available.value.findIndex((n) => n.name === toKey);
+    return available.value.slice(fromIndex, toIndex + 1).map((n) => n.name);
+  } else if (typeof bp === "string" && validateBreakpoint(bp) === true) {
+    return [bp];
+  } else
+    return allKeys;
+};
+const calculateOrientationsToRender = (landscape, portrait) => {
+  const arr = [];
+  if (!landscape && !portrait)
+    return ["landscape", "portrait"];
+  if (landscape)
+    arr.push("landscape");
+  if (portrait)
+    arr.push("portrait");
+  return arr;
+};
+const calculateThemesToRender = (dark, light) => {
+  const arr = [];
+  if (!light && !dark)
+    return ["light", "dark"];
+  if (light)
+    arr.push("light");
+  if (dark)
+    arr.push("dark");
+  return arr;
+};
+const bootstrap5 = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1400
+};
+const bootstrap4 = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200
+};
+const bootstrap3 = {
+  xs: 0,
+  sm: 768,
+  md: 992,
+  lg: 1200
+};
+const vuetify = {
+  xs: 0,
+  sm: 600,
+  md: 960,
+  lg: 1264,
+  xl: 1904
+};
+const tailwind = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  xxl: 1536
+};
+const devices = {
+  phone: 0,
+  tablet: 768,
+  laptop: 1370,
+  desktop: 1906
+};
+var presets = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  bootstrap5,
+  bootstrap4,
+  bootstrap3,
+  vuetify,
+  tailwind,
+  devices
+});
+const validatePreset = (preset) => {
+  if (typeof preset === "string" && presets[preset])
+    return presets[preset];
+  else {
+    const availablePresets = Object.keys(presets);
+    console.error(`Vue3 Mq: "${preset}" is not a valid preset. Available options are: ${availablePresets.join(", ")}`);
+    return false;
+  }
+};
+const validateOrientation = (orientation) => {
+  const isValid = ["landscape", "portrait"].includes(orientation);
+  if (isValid === false) {
+    console.error(`Vue3 Mq: "${orientation}" is not a valid default orientation. Reverting to unset value.`);
+    return null;
+  } else
+    return orientation;
+};
+const validateTheme = (theme = null) => {
+  const isValid = ["dark", "light"].includes(theme);
+  if (isValid === false && theme !== null) {
+    console.error(`Vue3 Mq: "${theme}" is not a valid default theme. Reverting to unset value.`);
+    return null;
+  } else
+    return theme;
+};
+const sanitiseBreakpoints = (breakpoints) => {
+  if (!breakpoints || typeof breakpoints !== "object")
+    return false;
+  const sanitisedBreakpoints = [];
+  for (let key in breakpoints) {
+    const bp = parseFloat(breakpoints[key]);
+    if (!key || typeof key !== "string") {
+      console.warn(`Vue3 Mq: Invalid or missing breakpoint key (${JSON.stringify(key)}). Skipping.`);
+      continue;
+    } else if (/^[^a-z]/i.test(key) || /[^a-zA-Z0-9_]/.test(key)) {
+      console.warn(`Vue3 Mq: "${key}" is an invalid breakpoint key. Breakpoint keys must start with a letter and contain only alphanumeric characters and underscores. Skipping.`);
+      continue;
+    } else if (!bp && bp !== 0 || isNaN(bp) || bp < 0) {
+      console.warn(`Vue3 Mq: "${key}: ${breakpoints[key]}" is not a valid breakpoint. Breakpoints should be a number of zero or above. Skipping.`);
+      continue;
+    }
+    sanitisedBreakpoints.push({
+      name: key,
+      min: bp
+    });
+  }
+  const hasZero = sanitisedBreakpoints.some((breakpoint) => breakpoint.min === 0);
+  if (!hasZero) {
+    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.`);
+  }
+  const uniqueValues = new Set(sanitisedBreakpoints.map((breakpoint) => breakpoint.min));
+  if (uniqueValues.size < sanitisedBreakpoints.length) {
+    console.warn(`Vue3 Mq: Your breakpoint configuration contains duplicate values. Behaviour may be unpredictable.`);
+  }
+  if (sanitisedBreakpoints.length === 0)
+    return false;
+  else
+    return sanitisedBreakpoints.sort((a, b) => a.min - b.min);
+};
+const extractSlotNameProperties = (name) => {
+  const options = name.split(":");
+  const optionsObject = {};
+  for (let option of options) {
+    if (/\D/.test(option) === false)
+      continue;
+    else if (["landscape", "portrait"].includes(option))
+      optionsObject.slotOrientation = option;
+    else if (["light", "dark"].includes(option))
+      optionsObject.slotTheme = option;
+    else
+      optionsObject.slotBp = option;
+  }
+  return optionsObject;
+};
+const defaultTransitionOptions = {
+  name: "fade",
+  mode: "out-in"
+};
+var component = {
+  name: "MqResponsive",
+  props: {
+    target: [String, Array],
+    landscape: {
+      type: Boolean,
+      default: false
+    },
+    portrait: {
+      type: Boolean,
+      default: false
+    },
+    dark: {
+      type: Boolean,
+      default: false
+    },
+    light: {
+      type: Boolean,
+      default: false
+    },
+    tag: {
+      type: String,
+      default: "div"
+    },
+    listTag: {
+      type: String,
+      default: "div"
+    },
+    group: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { attrs, emit, slots }) {
+    const breakpointsToRender = computed(() => {
+      return calculateBreakpointsToRender(props.target, availableBreakpoints);
+    });
+    const orientationsToRender = computed(() => {
+      return calculateOrientationsToRender(props.landscape, props.portrait);
+    });
+    const themesToRender = computed(() => {
+      return calculateThemesToRender(props.dark, props.light);
+    });
+    const shouldRenderDefault = computed(() => {
+      return breakpointsToRender.value.includes(mqState.current) && orientationsToRender.value.includes(mqState.orientation) && themesToRender.value.includes(mqState.theme);
+    });
+    const renderSlots = (tag) => {
+      if (!props.group && slots.length > 0)
+        return slots;
+      const slotsToRender = [];
+      for (let slot in slots) {
+        const { slotBp, slotOrientation, slotTheme } = extractSlotNameProperties(slot);
+        const breakpointsToRenderSlot = computed(() => {
+          return calculateBreakpointsToRender(slotBp, availableBreakpoints);
+        });
+        const orientationsToRenderSlot = computed(() => {
+          return calculateOrientationsToRender(slotOrientation === "landscape", slotOrientation === "portrait");
+        });
+        const themesToRenderSlot = computed(() => {
+          return calculateThemesToRender(slotTheme === "dark", slotTheme === "light");
+        });
+        const shouldRenderSlot = computed(() => {
+          return breakpointsToRenderSlot.value.includes(mqState.current) && orientationsToRenderSlot.value.includes(mqState.orientation) && themesToRenderSlot.value.includes(mqState.theme);
+        });
+        if (shouldRenderSlot.value === true) {
+          slotsToRender.push(h(tag ? tag : slots[slot], { key: slot }, tag ? slots[slot]() : void 0));
+        }
+      }
+      return slotsToRender.length > 0 ? slotsToRender : void 0;
+    };
+    if (slots.default) {
+      return () => shouldRenderDefault.value ? h(props.tag, __spreadValues({}, attrs), slots.default()) : void 0;
+    } else {
+      return () => {
+        const transitionOptions = Object.assign({}, defaultTransitionOptions, attrs, { tag: props.tag });
+        const el = props.group ? TransitionGroup : Transition;
+        return h(el, transitionOptions, () => renderSlots(props.listTag));
+      };
+    }
+  }
+};
+function updateBreakpoints({ breakpoints, preset }) {
+  const validatedPreset = validatePreset(preset);
+  const sanitisedBreakpoints = sanitiseBreakpoints(breakpoints);
+  if (validatedPreset === false && !sanitisedBreakpoints) {
+    throw new TypeError("Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.");
+  } else {
+    setAvailableBreakpoints(sanitisedBreakpoints ? sanitisedBreakpoints : sanitiseBreakpoints(validatedPreset));
+  }
+  removeListeners();
+  resetState();
+  const mediaQueries = createMediaQueries();
+  for (const key in mediaQueries) {
+    const mediaQuery = mediaQueries[key];
+    const callback = () => {
+      updateState(key);
+    };
+    subscribeToMediaQuery(mediaQuery, callback);
+  }
+  ["portrait", "landscape"].forEach((o) => {
+    const orientationCallback = () => {
+      updateOrientationState(o);
+    };
+    subscribeToMediaQuery(`(orientation: ${o})`, orientationCallback);
+  });
+  ["light", "dark"].forEach((t) => {
+    const themeCallback = () => {
+      updateThemeState(t);
+    };
+    subscribeToMediaQuery(`(prefers-color-scheme: ${t})`, themeCallback);
+  });
+}
+function useMq() {
+  const mq = inject("mq");
+  if (!mq) {
+    throw new Error("Vue3Mq is not installed in this app. Please follow the installation instructions and try again.");
+  } else
+    return mq;
+}
+const install = (app, {
+  preset = "bootstrap5",
+  breakpoints,
+  defaultBreakpoint: defaultBreakpoint2,
+  defaultOrientation: defaultOrientation2 = "landscape",
+  defaultTheme: defaultTheme2
+} = {}) => {
+  try {
+    const validatedDefaultOrientation = validateOrientation(defaultOrientation2);
+    const validatedDefaultTheme = validateTheme(defaultTheme2);
+    setDefaultBreakpoint(defaultBreakpoint2);
+    setDefaultOrientation(validatedDefaultOrientation);
+    setDefaultTheme(validatedDefaultTheme);
+    app.provide("mq", mqState);
+    app.provide("updateBreakpoints", updateBreakpoints);
+    updateBreakpoints({ breakpoints, preset });
+  } catch (e) {
+    console.error(e);
+  }
+};
+var plugin = {
+  install
+};
+export { component as MqResponsive, plugin as Vue3Mq, availableBreakpoints, updateBreakpoints, useMq };

dist/vue3-mq.iife.js

@@ -1,1 +0,1 @@
-var __defProp=Object.defineProperty,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(e,t,n)=>t in e?__defProp(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,__spreadValues=(e,t)=>{for(var n in t||(t={}))__hasOwnProp.call(t,n)&&__defNormalProp(e,n,t[n]);if(__getOwnPropSymbols)for(var n of __getOwnPropSymbols(t))__propIsEnum.call(t,n)&&__defNormalProp(e,n,t[n]);return e},Vue3Mq=function(e,t){"use strict";const n=t.ref([]),r=t.ref(null),a=t.ref(null),o=t.ref(null),i=t.reactive({current:""}),s=[],l=t.ref(!1),u=t.readonly(n),p=t.readonly(r),d=t.readonly(a),c=t.readonly(o),f=t.readonly(i),m=(e=p.value)=>{i.current=e;const t=u.value.findIndex((t=>t.name===e)),n=u.value.map((e=>e.name));for(let r=0;r<n.length;r++){if(r>0&&r<n.length-1){const e=n[r]+"Minus",a=n[r]+"Plus";i[e]=t<=r,i[a]=t>=r}i[n[r]]=n[r]===e}},v=(e=d.value)=>{i.orientation=e,i.isLandscape="landscape"===e,i.isPortrait="portrait"===e},g=(e=c.value||"light")=>{i.theme=e,i.isDark="dark"===e,i.isLight="light"===e};function h(e,t){if("undefined"==typeof window||!window.matchMedia)return!1;if("undefined"!=typeof window&&!window.matchMedia)return console.error("Vue3 Mq: No MatchMedia support detected in this browser. Responsive breakpoints not available."),!1;{l.value=!0;const n=window.matchMedia(e),r=({matches:e})=>{e&&t()};s.push({mql:n,cb:r});n.addEventListener&&"function"==typeof n.addEventListener?n.addEventListener("change",r):n.addListener(r),r(n)}}const y=e=>u.value.some((t=>t.name===e)),b=(e,t)=>{const n=t.value.map((e=>e.name));if(e){if(Array.isArray(e))return e.filter((e=>y(e)));if("string"==typeof e&&/\w+\+$/.test(e)){if(e=e.replace(/\+$/,""),!1===y(e))return console.error(`Vue3 Mq: ${e} is not a valid breakpoint key. Invalid range.`),n;const r=t.value.findIndex((t=>t.name===e));return t.value.slice(r).map((e=>e.name))}if("string"==typeof e&&/\w+-$/.test(e)){if(e=e.replace(/-$/,""),!1===y(e))return console.error(`Vue3 Mq: ${e} is not a valid breakpoint key. Invalid range.`),n;const r=t.value.findIndex((t=>t.name===e));return t.value.slice(0,r+1).map((e=>e.name))}if("string"==typeof e&&/^\w+-\w+$/.test(e)){const[r,a]=e.split("-");if(!1===y(r))return console.error(`Vue3 Mq: ${r} is not a valid breakpoint key. Invalid range.`),n;if(!1===y(a))return console.error(`Vue3 Mq: ${a} is not a valid breakpoint key. Invalid range.`),n;const o=t.value.findIndex((e=>e.name===r)),i=t.value.findIndex((e=>e.name===a));return t.value.slice(o,i+1).map((e=>e.name))}return"string"==typeof e&&!0===y(e)?[e]:n}return n},k=(e,t)=>{const n=[];return e||t?(e&&n.push("landscape"),t&&n.push("portrait"),n):["landscape","portrait"]},w=(e,t)=>{const n=[];return t||e?(t&&n.push("light"),e&&n.push("dark"),n):["light","dark"]};var _=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",bootstrap5:{xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1400},bootstrap4:{xs:0,sm:576,md:768,lg:992,xl:1200},bootstrap3:{xs:0,sm:768,md:992,lg:1200},vuetify:{xs:0,sm:600,md:960,lg:1264,xl:1904},tailwind:{xs:0,sm:640,md:768,lg:1024,xl:1280,xxl:1536},devices:{phone:0,tablet:768,laptop:1370,desktop:1906}});const M=e=>{if(!e||"object"!=typeof e)return!1;const t=[];for(let n in e){const r=parseFloat(e[n]);n&&"string"==typeof n?/^[^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.`):!r&&0!==r||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.`):t.push({name:n,min:r}):console.warn(`Vue3 Mq: Invalid or missing breakpoint key (${JSON.stringify(n)}). Skipping.`)}t.some((e=>0===e.min))||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.");return new Set(t.map((e=>e.min))).size<t.length&&console.warn("Vue3 Mq: Your breakpoint configuration contains duplicate values. Behaviour may be unpredictable."),0!==t.length&&t.sort(((e,t)=>e.min-t.min))},q=e=>{const t=e.split(":"),n={};for(let r of t)!1!==/\D/.test(r)&&(["landscape","portrait"].includes(r)?n.slotOrientation=r:["light","dark"].includes(r)?n.slotTheme=r:n.slotBp=r);return n},x={name:"fade",mode:"out-in"};var O={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},tag:{type:String,default:"div"},listTag:{type:String,default:"div"},group:{type:Boolean,default:!1}},setup(e,{attrs:n,emit:r,slots:a}){const o=t.computed((()=>b(e.target,u))),i=t.computed((()=>k(e.landscape,e.portrait))),s=t.computed((()=>w(e.dark,e.light))),l=t.computed((()=>o.value.includes(f.current)&&i.value.includes(f.orientation)&&s.value.includes(f.theme)));return a.default?()=>l.value?t.h(e.tag,__spreadValues({},n),a.default()):void 0:()=>{const r=Object.assign({},x,n,{tag:e.tag}),o=e.group?t.TransitionGroup:t.Transition;return t.h(o,r,(()=>(n=>{if(!e.group&&a.length>0)return a;const r=[];for(let e in a){const{slotBp:o,slotOrientation:i,slotTheme:s}=q(e),l=t.computed((()=>b(o,u))),p=t.computed((()=>k("landscape"===i,"portrait"===i))),d=t.computed((()=>w("dark"===s,"light"===s)));!0===t.computed((()=>l.value.includes(f.current)&&p.value.includes(f.orientation)&&d.value.includes(f.theme))).value&&r.push(t.h(n||a[e],{key:e},n?a[e]():void 0))}return r.length>0?r:void 0})(e.listTag)))}}};function V({breakpoints:e,preset:t}){const r=(e=>{if("string"==typeof e&&_[e])return _[e];{const t=Object.keys(_);return console.error(`Vue3 Mq: "${e}" is not a valid preset. Available options are: ${t.join(", ")}`),!1}})(t),a=M(e);if(!1===r&&!a)throw new TypeError("Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.");var o;o=a||M(r),n.value=o,function(){for(;s.length>0;){const e=s.shift();if(e&&"object"==typeof e){const{mql:t,cb:n}=e;t.addEventListener&&"function"==typeof t.addEventListener?t.removeEventListener("change",n):t.removeListener(n)}}}(),(()=>{const e=Object.keys(i);for(let t of e)delete i[t];m(),v(),g()})();const l=u.value.reduce(((e,t,n,r)=>{const a=`(min-width: ${t.min}px)`,o=n<r.length-1?`(max-width: ${r[n+1].min-1}px)`:null,i=a+(o?" and "+o:"");return Object.assign(e,{[t.name]:i})}),{});for(const n in l){h(l[n],(()=>{m(n)}))}["portrait","landscape"].forEach((e=>{h(`(orientation: ${e})`,(()=>{v(e)}))})),["light","dark"].forEach((e=>{h(`(prefers-color-scheme: ${e})`,(()=>{g(e)}))}))}var $={install:(e,{preset:t="bootstrap5",breakpoints:n,defaultBreakpoint:i,defaultOrientation:s="landscape",defaultTheme:l}={})=>{try{const d=!1===["landscape","portrait"].includes(p=s)?(console.error(`Vue3 Mq: "${p}" is not a valid default orientation. Reverting to unset value.`),null):p,c=((e=null)=>!1===["dark","light"].includes(e)&&null!==e?(console.error(`Vue3 Mq: "${e}" is not a valid default theme. Reverting to unset value.`),null):e)(l);u=i,r.value=u,(e=>{a.value=e})(d),(e=>{o.value=e})(c),e.provide("mq",f),e.provide("updateBreakpoints",V),V({breakpoints:n,preset:t})}catch(d){console.error(d)}var u,p}};return e.MqResponsive=O,e.Vue3Mq=$,e.availableBreakpoints=u,e.updateBreakpoints=V,e.useMq=function(){const e=t.inject("mq");if(e)return e;throw new Error("Vue3Mq is not installed in this app. Please follow the installation instructions and try again.")},Object.defineProperty(e,"__esModule",{value:!0}),e[Symbol.toStringTag]="Module",e}({},Vue);
+var pe=Object.defineProperty;var E=Object.getOwnPropertySymbols;var me=Object.prototype.hasOwnProperty,he=Object.prototype.propertyIsEnumerable;var _=(i,s,u)=>s in i?pe(i,s,{enumerable:!0,configurable:!0,writable:!0,value:u}):i[s]=u,j=(i,s)=>{for(var u in s||(s={}))me.call(s,u)&&_(i,u,s[u]);if(E)for(var u of E(s))he.call(s,u)&&_(i,u,s[u]);return i};var Vue3Mq=function(i,s){"use strict";const u=s.ref([]),q=s.ref(null),T=s.ref(null),B=s.ref(null),c=s.reactive({current:""}),k=[],A=s.ref(!1),f=s.readonly(u),D=s.readonly(q),P=s.readonly(T),z=s.readonly(B),p=s.readonly(c),K=e=>{u.value=e},Q=e=>{q.value=e},N=e=>{T.value=e},Y=e=>{B.value=e},S=(e=D.value)=>{c.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 a=o[t]+"Minus",r=o[t]+"Plus";c[a]=n<=t,c[r]=n>=t}c[o[t]]=o[t]===e}},Z=()=>{const e=Object.keys(c);for(let n of e)delete c[n];S(),V(),b()},V=(e=P.value)=>{c.orientation=e,c.isLandscape=e==="landscape",c.isPortrait=e==="portrait"},b=(e=z.value||"light")=>{c.theme=e,c.isDark=e==="dark",c.isLight=e==="light"};function C(){for(;k.length>0;){const e=k.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 F(){return f.value.reduce((n,o,t,a)=>{const r=`(min-width: ${o.min}px)`,l=t<a.length-1?`(max-width: ${a[t+1].min-1}px)`:null,d=r+(l?" and "+l:"");return Object.assign(n,{[o.name]:d})},{})}function v(e,n){if(typeof window=="undefined"||!window.matchMedia)return!1;if(typeof window!="undefined"&&!window.matchMedia)return console.error("Vue3 Mq: No MatchMedia support detected in this browser. Responsive breakpoints not available."),!1;{A.value=!0;const o=window.matchMedia(e),t=({matches:r})=>{r&&n()};k.push({mql:o,cb:t}),o.addEventListener&&typeof o.addEventListener=="function"?o.addEventListener("change",t):o.addListener(t),t(o)}}const m=e=>f.value.some(n=>n.name===e),$=(e,n)=>{const o=n.value.map(t=>t.name);if(e){if(Array.isArray(e))return e.filter(t=>m(t));if(typeof e=="string"&&/\w+\+$/.test(e)){if(e=e.replace(/\+$/,""),m(e)===!1)return console.error(`Vue3 Mq: ${e} is not a valid breakpoint key. Invalid range.`),o;const t=n.value.findIndex(a=>a.name===e);return n.value.slice(t).map(a=>a.name)}else if(typeof e=="string"&&/\w+-$/.test(e)){if(e=e.replace(/-$/,""),m(e)===!1)return console.error(`Vue3 Mq: ${e} is not a valid breakpoint key. Invalid range.`),o;const t=n.value.findIndex(a=>a.name===e);return n.value.slice(0,t+1).map(a=>a.name)}else if(typeof e=="string"&&/^\w+-\w+$/.test(e)){const[t,a]=e.split("-");if(m(t)===!1)return console.error(`Vue3 Mq: ${t} is not a valid breakpoint key. Invalid range.`),o;if(m(a)===!1)return console.error(`Vue3 Mq: ${a} is not a valid breakpoint key. Invalid range.`),o;const r=n.value.findIndex(d=>d.name===t),l=n.value.findIndex(d=>d.name===a);return n.value.slice(r,l+1).map(d=>d.name)}else return typeof e=="string"&&m(e)===!0?[e]:o}else return o},x=(e,n)=>{const o=[];return!e&&!n?["landscape","portrait"]:(e&&o.push("landscape"),n&&o.push("portrait"),o)},O=(e,n)=>{const o=[];return!n&&!e?["light","dark"]:(n&&o.push("light"),e&&o.push("dark"),o)},G={xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1400},J={xs:0,sm:576,md:768,lg:992,xl:1200},H={xs:0,sm:768,md:992,lg:1200},U={xs:0,sm:600,md:960,lg:1264,xl:1904},W={xs:0,sm:640,md:768,lg:1024,xl:1280,xxl:1536},X={phone:0,tablet:768,laptop:1370,desktop:1906};var w=Object.freeze({__proto__:null,[Symbol.toStringTag]:"Module",bootstrap5:G,bootstrap4:J,bootstrap3:H,vuetify:U,tailwind:W,devices:X});const ee=e=>{if(typeof e=="string"&&w[e])return w[e];{const n=Object.keys(w);return console.error(`Vue3 Mq: "${e}" is not a valid preset. Available options are: ${n.join(", ")}`),!1}},te=e=>["landscape","portrait"].includes(e)===!1?(console.error(`Vue3 Mq: "${e}" is not a valid default orientation. Reverting to unset value.`),null):e,ne=(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,R=e=>{if(!e||typeof e!="object")return!1;const n=[];for(let a in e){const r=parseFloat(e[a]);if(!a||typeof a!="string"){console.warn(`Vue3 Mq: Invalid or missing breakpoint key (${JSON.stringify(a)}). Skipping.`);continue}else if(/^[^a-z]/i.test(a)||/[^a-zA-Z0-9_]/.test(a)){console.warn(`Vue3 Mq: "${a}" 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: "${a}: ${e[a]}" is not a valid breakpoint. Breakpoints should be a number of zero or above. Skipping.`);continue}n.push({name:a,min:r})}return n.some(a=>a.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(a=>a.min)).size<n.length&&console.warn("Vue3 Mq: Your breakpoint configuration contains duplicate values. Behaviour may be unpredictable."),n.length===0?!1:n.sort((a,r)=>a.min-r.min)},oe=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:o.slotBp=t);return o},ae={name:"fade",mode:"out-in"};var se={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},tag:{type:String,default:"div"},listTag:{type:String,default:"div"},group:{type:Boolean,default:!1}},setup(e,{attrs:n,emit:o,slots:t}){const a=s.computed(()=>$(e.target,f)),r=s.computed(()=>x(e.landscape,e.portrait)),l=s.computed(()=>O(e.dark,e.light)),d=s.computed(()=>a.value.includes(p.current)&&r.value.includes(p.orientation)&&l.value.includes(p.theme)),le=h=>{if(!e.group&&t.length>0)return t;const g=[];for(let y in t){const{slotBp:ue,slotOrientation:I,slotTheme:L}=oe(y),ce=s.computed(()=>$(ue,f)),de=s.computed(()=>x(I==="landscape",I==="portrait")),fe=s.computed(()=>O(L==="dark",L==="light"));s.computed(()=>ce.value.includes(p.current)&&de.value.includes(p.orientation)&&fe.value.includes(p.theme)).value===!0&&g.push(s.h(h||t[y],{key:y},h?t[y]():void 0))}return g.length>0?g:void 0};return t.default?()=>d.value?s.h(e.tag,j({},n),t.default()):void 0:()=>{const h=Object.assign({},ae,n,{tag:e.tag}),g=e.group?s.TransitionGroup:s.Transition;return s.h(g,h,()=>le(e.listTag))}}};function M({breakpoints:e,preset:n}){const o=ee(n),t=R(e);if(o===!1&&!t)throw new TypeError("Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.");K(t||R(o)),C(),Z();const a=F();for(const r in a){const l=a[r];v(l,()=>{S(r)})}["portrait","landscape"].forEach(r=>{const l=()=>{V(r)};v(`(orientation: ${r})`,l)}),["light","dark"].forEach(r=>{const l=()=>{b(r)};v(`(prefers-color-scheme: ${r})`,l)})}function re(){const e=s.inject("mq");if(e)return e;throw new Error("Vue3Mq is not installed in this app. Please follow the installation instructions and try again.")}var ie={install:(e,{preset:n="bootstrap5",breakpoints:o,defaultBreakpoint:t,defaultOrientation:a="landscape",defaultTheme:r}={})=>{try{const l=te(a),d=ne(r);Q(t),N(l),Y(d),e.provide("mq",p),e.provide("updateBreakpoints",M),M({breakpoints:o,preset:n})}catch(l){console.error(l)}}};return i.MqResponsive=se,i.Vue3Mq=ie,i.availableBreakpoints=f,i.updateBreakpoints=M,i.useMq=re,Object.defineProperty(i,"__esModule",{value:!0}),i[Symbol.toStringTag]="Module",i}({},Vue);

dist/vue3-mq.umd.js

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

package.json

 {
 	"name": "vue3-mq",
-	"version": "3.0.1",
+	"version": "3.0.2",
 	"description": "Build responsive design into your Vue3 app",
@@ -35,8 +35,4 @@ "files": [
 	},
-	"dependencies": {
-		"@mdi/js": "^5.9.55",
-		"prismjs": "^1.24.1",
-		"vue": "^3.0.5",
-		"vue-router": "^4.0.10",
-		"vue3-icon": "^2.0.0"
+	"peerDependencies": {
+		"vue": "^3.0.5"
 	},
@@ -46,2 +42,3 @@ "devDependencies": {
 		"@babel/preset-env": "^7.14.8",
+		"@mdi/js": "^6.5.95",
 		"@vitejs/plugin-vue": "^1.2.5",
@@ -57,5 +54,8 @@ "@vue/compiler-sfc": "^3.0.5",
 		"match-media-mock": "^0.1.1",
+		"prismjs": "^1.24.1",
 		"sass": "^1.35.2",
 		"vite": "^2.4.2",
-		"vue-jest": "^5.0.0-alpha.10"
+		"vue-jest": "^5.0.0-alpha.10",
+		"vue-router": "^4.0.10",
+		"vue3-icon": "^2.0.0"
 	},
@@ -62,0 +62,0 @@ "bugs": {

README.md

@@ -124,3 +124,3 @@ # Vue 3 MQ (Media Query)
 <script setup>
-import { useMq } from "vue-mq";
+import { useMq } from "vue3-mq";
 
@@ -127,0 +127,0 @@ const mq = useMq();

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50871

increased by19.4%

Dependency count

1

decreased by-80%

Lines of code

545

increased by378.07%

Worsened metrics

Dev dependency count

19

increased by26.67%

Dependency changes

• - Removed@mdi/js@^5.9.55

• - Removedprismjs@^1.24.1

• - Removedvue@^3.0.5

• - Removedvue-router@^4.0.10

• - Removedvue3-icon@^2.0.0

• - Removed@mdi/js@5.9.55(transitive)

• - Removed@vue/devtools-api@6.6.4(transitive)

• - Removedprismjs@1.29.0(transitive)

• - Removedvue-router@4.5.0(transitive)

• - Removedvue3-icon@2.1.0(transitive)