Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue3-mq - npm Package Compare versions
Comparing version 3.1.3 to 3.2.0
@@ -1,1 +0,1 @@ | ||
| var Vue3Mq=function(d,s){"use strict";const T=s.ref([]),V=s.ref(null),B=s.ref(null),S=s.ref(null),b=s.ref(null),i=s.reactive({current:""}),v=[],z=s.ref(!1),f=s.readonly(T),K=s.readonly(V),Q=s.readonly(B),N=s.readonly(S),C=s.readonly(b),c=s.readonly(i),Y=e=>{T.value=e},Z=e=>{V.value=e},F=e=>{B.value=e},G=e=>{S.value=e},J=e=>{b.value=e},$=(e=K.value)=>{i.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",a=o[t]+"Plus";i[r]=n<=t,i[a]=n>=t}i[o[t]]=o[t]===e}},H=()=>{const e=Object.keys(i);for(let n of e)delete i[n];$(),x(),R(),O()},x=(e=Q.value)=>{i.orientation=e,i.isLandscape=e==="landscape",i.isPortrait=e==="portrait"},R=(e=N.value||"light")=>{i.theme=e,i.isDark=e==="dark",i.isLight=e==="light"},O=(e=C.value||"no-preference")=>{i.motionPreference=e,i.isMotion=e==="no-preference",i.isInert=e==="reduce"};function U(){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 W(){return f.value.reduce((n,o,t,r)=>{const a=`(min-width: ${o.min}px)`,l=t<r.length-1?`(max-width: ${r[t+1].min-1}px)`:null,u=a+(l?" and "+l:"");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;{z.value=!0;const o=window.matchMedia(e),t=({matches:a})=>{a&&n()};v.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),I=(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 a=n.value.findIndex(u=>u.name===t),l=n.value.findIndex(u=>u.name===r);return n.value.slice(a,l+1).map(u=>u.name)}else return typeof e=="string"&&p(e)===!0?[e]:o}else return o},E=(e,n)=>{const o=[];return!e&&!n?["landscape","portrait"]:(e&&o.push("landscape"),n&&o.push("portrait"),o)},L=(e,n)=>{const o=[];return!n&&!e?["light","dark"]:(n&&o.push("light"),e&&o.push("dark"),o)},_=(e,n)=>{const o=[];return!e&&!n?["reduce","no-preference"]:(e&&o.push("reduce"),n&&o.push("no-preference"),o)},k=Object.freeze(Object.defineProperty({__proto__:null,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},wordpress:{mobile:0,small:600,medium:782,large:960,xlarge:1080,wide:1280,huge:1440}},Symbol.toStringTag,{value:"Module"})),X=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}},ee=e=>["landscape","portrait"].includes(e)===!1?(console.error(`Vue3 Mq: "${e}" is not a valid default orientation. Reverting to unset value.`),null):e,te=(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,ne=(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,j=e=>{if(!e||typeof e!="object")return!1;const n=[];for(let r in e){const a=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(!a&&a!==0||isNaN(a)||a<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:a})}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,a)=>r.min-a.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:["inert","motion"].includes(t)?o.slotMotion=t:o.slotBp=t);return o},re={name:"fade",mode:"out-in"},ae={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=s.computed(()=>I(e.target,f)),a=s.computed(()=>E(e.landscape,e.portrait)),l=s.computed(()=>L(e.dark,e.light)),u=s.computed(()=>_(e.inert,e.motion)),w=s.computed(()=>r.value.includes(c.current)&&a.value.includes(c.orientation)&&l.value.includes(c.theme)&&u.value.includes(c.motionPreference)),q=m=>{if(!e.group&&t.length>0)return t;const h=[];for(let y in t){const{slotBp:le,slotOrientation:P,slotTheme:A,slotMotion:D}=oe(y),ue=s.computed(()=>I(le,f)),ce=s.computed(()=>E(P==="landscape",P==="portrait")),de=s.computed(()=>L(A==="dark",A==="light")),fe=s.computed(()=>_(D==="inert",D==="motion"));s.computed(()=>ue.value.includes(c.current)&&ce.value.includes(c.orientation)&&de.value.includes(c.theme)&&fe.value.includes(c.motionPreference)).value===!0&&h.push(s.h(m||t[y],{key:y},m?t[y]():void 0))}return h.length>0?h:void 0};return t.default?()=>w.value?s.h(e.tag,{...n},t.default()):void 0:()=>{const m=Object.assign({},re,n,{tag:e.tag}),h=e.group?s.TransitionGroup:s.Transition;return s.h(h,m,()=>q(e.listTag))}}};function M({breakpoints:e,preset:n}){const o=n?X(n):!1,t=e?j(e):!1;if(o===!1&&!t)throw new TypeError("Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.");Y(t||j(o)),U(),H();const r=W();for(const a in r){const l=r[a];g(l,()=>{$(a)})}["portrait","landscape"].forEach(a=>{const l=()=>{x(a)};g(`(orientation: ${a})`,l)}),["light","dark"].forEach(a=>{const l=()=>{R(a)};g(`(prefers-color-scheme: ${a})`,l)}),["reduce","no-preference"].forEach(a=>{const l=()=>{O(a)};g(`(prefers-reduced-motion: ${a})`,l)})}function se(){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 ie={install:(e,{preset:n="bootstrap5",breakpoints:o,defaultBreakpoint:t,defaultOrientation:r="landscape",defaultMotion:a="no-preference",defaultTheme:l}={})=>{try{const u=ee(r),w=te(l),q=ne(a);Z(t),F(u),G(w),J(q),e.provide("mq",c),e.provide("updateBreakpoints",M),M({breakpoints:o,preset:n})}catch(u){console.error(u)}}};return d.MqResponsive=ae,d.Vue3Mq=ie,d.availableBreakpoints=f,d.updateBreakpoints=M,d.useMq=se,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),d}({},Vue); | ||
| var Vue3Mq=function(d,s){"use strict";const T=s.ref([]),V=s.ref(null),B=s.ref(null),S=s.ref(null),b=s.ref(null),i=s.reactive({current:""}),k=[],z=s.ref(!1),f=s.readonly(T),K=s.readonly(V),Q=s.readonly(B),N=s.readonly(S),C=s.readonly(b),c=s.readonly(i),Y=e=>{T.value=e},Z=e=>{V.value=e},F=e=>{B.value=e},G=e=>{S.value=e},J=e=>{b.value=e},R=(e=K.value)=>{i.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",a=o[t]+"Plus";i[r]=n<=t,i[a]=n>=t}i[o[t]]=o[t]===e}},H=()=>{const e=Object.keys(i);for(let n of e)delete i[n];R(),$(),x(),O()},$=(e=Q.value)=>{i.orientation=e,i.isLandscape=e==="landscape",i.isPortrait=e==="portrait"},x=(e=N.value||"light")=>{i.theme=e,i.isDark=e==="dark",i.isLight=e==="light"},O=(e=C.value||"no-preference")=>{i.motionPreference=e,i.isMotion=e==="no-preference",i.isInert=e==="reduce"};function U(){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 W(){return f.value.reduce((n,o,t,r)=>{const a=`(min-width: ${o.min}px)`,l=t<r.length-1?`(max-width: ${r[t+1].min-1}px)`:null,u=a+(l?" and "+l:"");return Object.assign(n,{[o.name]:u})},{})}function y(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;{z.value=!0;const o=window.matchMedia(e),t=({matches:a})=>{a&&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),I=(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(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(/-$/,""),m(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(m(t)===!1)return console.error(`Vue3 Mq: ${t} is not a valid breakpoint key. Invalid range.`),o;if(m(r)===!1)return console.error(`Vue3 Mq: ${r} is not a valid breakpoint key. Invalid range.`),o;const a=n.value.findIndex(u=>u.name===t),l=n.value.findIndex(u=>u.name===r);return n.value.slice(a,l+1).map(u=>u.name)}else return typeof e=="string"&&m(e)===!0?[e]:o}else return o},E=(e,n)=>{const o=[];return!e&&!n?["landscape","portrait"]:(e&&o.push("landscape"),n&&o.push("portrait"),o)},L=(e,n)=>{const o=[];return!n&&!e?["light","dark"]:(n&&o.push("light"),e&&o.push("dark"),o)},_=(e,n)=>{const o=[];return!e&&!n?["reduce","no-preference"]:(e&&o.push("reduce"),n&&o.push("no-preference"),o)},M=Object.freeze(Object.defineProperty({__proto__:null,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},wordpress:{mobile:0,small:600,medium:782,large:960,xlarge:1080,wide:1280,huge:1440}},Symbol.toStringTag,{value:"Module"})),X=e=>{if(typeof e=="string"&&M[e])return M[e];{const n=Object.keys(M);return console.error(`Vue3 Mq: "${e}" is not a valid preset. Available options are: ${n.join(", ")}`),!1}},ee=e=>["landscape","portrait"].includes(e)===!1?(console.error(`Vue3 Mq: "${e}" is not a valid default orientation. Reverting to unset value.`),null):e,te=(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,ne=(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,P=e=>{if(!e||typeof e!="object")return!1;const n=[];for(let r in e){const a=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(!a&&a!==0||isNaN(a)||a<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:a})}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,a)=>r.min-a.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:["inert","motion"].includes(t)?o.slotMotion=t:o.slotBp=t);return o},re={name:"fade",mode:"out-in"},ae={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=s.computed(()=>I(e.target,f)),a=s.computed(()=>E(e.landscape,e.portrait)),l=s.computed(()=>L(e.dark,e.light)),u=s.computed(()=>_(e.inert,e.motion)),h=s.computed(()=>r.value.includes(c.current)&&a.value.includes(c.orientation)&&l.value.includes(c.theme)&&u.value.includes(c.motionPreference)),q=p=>{if(!e.group&&t.length>0)return t;const g=[];for(let v in t){const{slotBp:le,slotOrientation:j,slotTheme:A,slotMotion:D}=oe(v),ue=s.computed(()=>I(le,f)),ce=s.computed(()=>E(j==="landscape",j==="portrait")),de=s.computed(()=>L(A==="dark",A==="light")),fe=s.computed(()=>_(D==="inert",D==="motion"));s.computed(()=>ue.value.includes(c.current)&&ce.value.includes(c.orientation)&&de.value.includes(c.theme)&&fe.value.includes(c.motionPreference)).value===!0&&g.push(s.h(p||t[v],{key:v},p?t[v]():void 0))}return g.length>0?g:void 0};return t.default?()=>h.value?s.h(e.tag,{...n},t.default()):void 0:()=>{const p=Object.assign({},re,n,{tag:e.tag}),g=e.group?s.TransitionGroup:s.Transition;return s.h(g,p,()=>q(e.listTag))}}};function w({breakpoints:e,preset:n}){const o=n?X(n):!1,t=e?P(e):!1;if(o===!1&&!t)throw new TypeError("Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.");Y(t||P(o)),U(),H();const r=W();for(const a in r){const l=r[a];y(l,()=>{R(a)})}["portrait","landscape"].forEach(a=>{const l=()=>{$(a)};y(`(orientation: ${a})`,l)}),["light","dark"].forEach(a=>{const l=()=>{x(a)};y(`(prefers-color-scheme: ${a})`,l)}),["reduce","no-preference"].forEach(a=>{const l=()=>{O(a)};y(`(prefers-reduced-motion: ${a})`,l)})}function se(){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 ie={install:(e,{preset:n="bootstrap5",breakpoints:o,defaultBreakpoint:t,defaultOrientation:r="landscape",defaultMotion:a="no-preference",defaultTheme:l,global:u=!1}={})=>{try{const h=ee(r),q=te(l),p=ne(a);Z(t),F(h),G(q),J(p),e.provide("mq",c),e.provide("updateBreakpoints",w),u===!0&&(e.component("MqResponsive",MqResponsive),e.config.globalProperties.$mq=c),w({breakpoints:o,preset:n})}catch(h){console.error(h)}}};return d.MqResponsive=ae,d.Vue3Mq=ie,d.availableBreakpoints=f,d.updateBreakpoints=w,d.useMq=se,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),d}({},Vue); |
@@ -1,1 +0,1 @@ | ||
| "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("vue"),b=s.ref([]),O=s.ref(null),I=s.ref(null),E=s.ref(null),L=s.ref(null),l=s.reactive({current:""}),M=[],C=s.ref(!1),d=s.readonly(b),Y=s.readonly(O),Z=s.readonly(I),F=s.readonly(E),G=s.readonly(L),c=s.readonly(l),J=e=>{b.value=e},H=e=>{O.value=e},U=e=>{I.value=e},W=e=>{E.value=e},X=e=>{L.value=e},_=(e=Y.value)=>{l.current=e;const n=d.value.findIndex(t=>t.name===e),o=d.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",a=o[t]+"Plus";l[r]=n<=t,l[a]=n>=t}l[o[t]]=o[t]===e}},ee=()=>{const e=Object.keys(l);for(let n of e)delete l[n];_(),j(),P(),A()},j=(e=Z.value)=>{l.orientation=e,l.isLandscape=e==="landscape",l.isPortrait=e==="portrait"},P=(e=F.value||"light")=>{l.theme=e,l.isDark=e==="dark",l.isLight=e==="light"},A=(e=G.value||"no-preference")=>{l.motionPreference=e,l.isMotion=e==="no-preference",l.isInert=e==="reduce"};function te(){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 ne(){return d.value.reduce((n,o,t,r)=>{const a=`(min-width: ${o.min}px)`,i=t<r.length-1?`(max-width: ${r[t+1].min-1}px)`:null,u=a+(i?" and "+i:"");return Object.assign(n,{[o.name]:u})},{})}function h(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;{C.value=!0;const o=window.matchMedia(e),t=({matches:a})=>{a&&n()};M.push({mql:o,cb:t}),o.addEventListener&&typeof o.addEventListener=="function"?o.addEventListener("change",t):o.addListener(t),t(o)}}const f=e=>d.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=>f(t));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.`),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(/-$/,""),f(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(f(t)===!1)return console.error(`Vue3 Mq: ${t} is not a valid breakpoint key. Invalid range.`),o;if(f(r)===!1)return console.error(`Vue3 Mq: ${r} is not a valid breakpoint key. Invalid range.`),o;const a=n.value.findIndex(u=>u.name===t),i=n.value.findIndex(u=>u.name===r);return n.value.slice(a,i+1).map(u=>u.name)}else return typeof e=="string"&&f(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)},$=(e,n)=>{const o=[];return!e&&!n?["reduce","no-preference"]:(e&&o.push("reduce"),n&&o.push("no-preference"),o)},oe={xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1400},re={xs:0,sm:576,md:768,lg:992,xl:1200},ae={xs:0,sm:768,md:992,lg:1200},se={xs:0,sm:600,md:960,lg:1264,xl:1904},ie={xs:0,sm:640,md:768,lg:1024,xl:1280,xxl:1536},le={phone:0,tablet:768,laptop:1370,desktop:1906},ue={mobile:0,small:600,medium:782,large:960,xlarge:1080,wide:1280,huge:1440},k=Object.freeze(Object.defineProperty({__proto__:null,bootstrap5:oe,bootstrap4:re,bootstrap3:ae,vuetify:se,tailwind:ie,devices:le,wordpress:ue},Symbol.toStringTag,{value:"Module"})),ce=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}},de=e=>["landscape","portrait"].includes(e)===!1?(console.error(`Vue3 Mq: "${e}" is not a valid default orientation. Reverting to unset value.`),null):e,fe=(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,pe=(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,R=e=>{if(!e||typeof e!="object")return!1;const n=[];for(let r in e){const a=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(!a&&a!==0||isNaN(a)||a<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:a})}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,a)=>r.min-a.min)},me=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},ve={name:"fade",mode:"out-in"},he={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=s.computed(()=>B(e.target,d)),a=s.computed(()=>S(e.landscape,e.portrait)),i=s.computed(()=>V(e.dark,e.light)),u=s.computed(()=>$(e.inert,e.motion)),g=s.computed(()=>r.value.includes(c.current)&&a.value.includes(c.orientation)&&i.value.includes(c.theme)&&u.value.includes(c.motionPreference)),y=p=>{if(!e.group&&t.length>0)return t;const m=[];for(let v in t){const{slotBp:D,slotOrientation:q,slotTheme:T,slotMotion:x}=me(v),z=s.computed(()=>B(D,d)),K=s.computed(()=>S(q==="landscape",q==="portrait")),Q=s.computed(()=>V(T==="dark",T==="light")),N=s.computed(()=>$(x==="inert",x==="motion"));s.computed(()=>z.value.includes(c.current)&&K.value.includes(c.orientation)&&Q.value.includes(c.theme)&&N.value.includes(c.motionPreference)).value===!0&&m.push(s.h(p||t[v],{key:v},p?t[v]():void 0))}return m.length>0?m:void 0};return t.default?()=>g.value?s.h(e.tag,{...n},t.default()):void 0:()=>{const p=Object.assign({},ve,n,{tag:e.tag}),m=e.group?s.TransitionGroup:s.Transition;return s.h(m,p,()=>y(e.listTag))}}};function w({breakpoints:e,preset:n}){const o=n?ce(n):!1,t=e?R(e):!1;if(o===!1&&!t)throw new TypeError("Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.");J(t||R(o)),te(),ee();const r=ne();for(const a in r){const i=r[a];h(i,()=>{_(a)})}["portrait","landscape"].forEach(a=>{const i=()=>{j(a)};h(`(orientation: ${a})`,i)}),["light","dark"].forEach(a=>{const i=()=>{P(a)};h(`(prefers-color-scheme: ${a})`,i)}),["reduce","no-preference"].forEach(a=>{const i=()=>{A(a)};h(`(prefers-reduced-motion: ${a})`,i)})}function ge(){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 ye=(e,{preset:n="bootstrap5",breakpoints:o,defaultBreakpoint:t,defaultOrientation:r="landscape",defaultMotion:a="no-preference",defaultTheme:i}={})=>{try{const u=de(r),g=fe(i),y=pe(a);H(t),U(u),W(g),X(y),e.provide("mq",c),e.provide("updateBreakpoints",w),w({breakpoints:o,preset:n})}catch(u){console.error(u)}},ke={install:ye};exports.MqResponsive=he;exports.Vue3Mq=ke;exports.availableBreakpoints=d;exports.updateBreakpoints=w;exports.useMq=ge; | ||
| "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[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=[],C=a.ref(!1),f=a.readonly(b),Y=a.readonly(O),Z=a.readonly(I),F=a.readonly(E),G=a.readonly(L),c=a.readonly(l),J=e=>{b.value=e},H=e=>{O.value=e},U=e=>{I.value=e},W=e=>{E.value=e},X=e=>{L.value=e},_=(e=Y.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}},ee=()=>{const e=Object.keys(l);for(let n of e)delete l[n];_(),P(),j(),A()},P=(e=Z.value)=>{l.orientation=e,l.isLandscape=e==="landscape",l.isPortrait=e==="portrait"},j=(e=F.value||"light")=>{l.theme=e,l.isDark=e==="dark",l.isLight=e==="light"},A=(e=G.value||"no-preference")=>{l.motionPreference=e,l.isMotion=e==="no-preference",l.isInert=e==="reduce"};function te(){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 ne(){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;{C.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)},oe={xs:0,sm:576,md:768,lg:992,xl:1200,xxl:1400},re={xs:0,sm:576,md:768,lg:992,xl:1200},se={xs:0,sm:768,md:992,lg:1200},ae={xs:0,sm:600,md:960,lg:1264,xl:1904},ie={xs:0,sm:640,md:768,lg:1024,xl:1280,xxl:1536},le={phone:0,tablet:768,laptop:1370,desktop:1906},ue={mobile:0,small:600,medium:782,large:960,xlarge:1080,wide:1280,huge:1440},k=Object.freeze(Object.defineProperty({__proto__:null,bootstrap5:oe,bootstrap4:re,bootstrap3:se,vuetify:ae,tailwind:ie,devices:le,wordpress:ue},Symbol.toStringTag,{value:"Module"})),ce=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}},de=e=>["landscape","portrait"].includes(e)===!1?(console.error(`Vue3 Mq: "${e}" is not a valid default orientation. Reverting to unset value.`),null):e,fe=(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,pe=(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)},me=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},ve={name:"fade",mode:"out-in"},he={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:D,slotOrientation:w,slotTheme:T,slotMotion:x}=me(h),z=a.computed(()=>B(D,f)),K=a.computed(()=>S(w==="landscape",w==="portrait")),Q=a.computed(()=>V(T==="dark",T==="light")),N=a.computed(()=>R(x==="inert",x==="motion"));a.computed(()=>z.value.includes(c.current)&&K.value.includes(c.orientation)&&Q.value.includes(c.theme)&&N.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({},ve,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?ce(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.");J(t||$(o)),te(),ee();const r=ne();for(const s in r){const i=r[s];g(i,()=>{_(s)})}["portrait","landscape"].forEach(s=>{const i=()=>{P(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 ge(){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 ye=(e,{preset:n="bootstrap5",breakpoints:o,defaultBreakpoint:t,defaultOrientation:r="landscape",defaultMotion:s="no-preference",defaultTheme:i,global:u=!1}={})=>{try{const m=de(r),y=fe(i),d=pe(s);H(t),U(m),W(y),X(d),e.provide("mq",c),e.provide("updateBreakpoints",q),u===!0&&(e.component("MqResponsive",MqResponsive),e.config.globalProperties.$mq=c),q({breakpoints:o,preset:n})}catch(m){console.error(m)}},ke={install:ye};exports.MqResponsive=he;exports.Vue3Mq=ke;exports.availableBreakpoints=f;exports.updateBreakpoints=q;exports.useMq=ge; |
@@ -1,1 +0,1 @@ | ||
| (function(c,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(c=typeof globalThis<"u"?globalThis:c||self,a(c.Vue3Mq={},c.Vue))})(this,function(c,a){"use strict";const T=a.ref([]),V=a.ref(null),B=a.ref(null),S=a.ref(null),x=a.ref(null),i=a.reactive({current:""}),v=[],z=a.ref(!1),f=a.readonly(T),K=a.readonly(V),Q=a.readonly(B),N=a.readonly(S),C=a.readonly(x),d=a.readonly(i),Y=e=>{T.value=e},Z=e=>{V.value=e},F=e=>{B.value=e},G=e=>{S.value=e},J=e=>{x.value=e},b=(e=K.value)=>{i.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";i[r]=n<=t,i[s]=n>=t}i[o[t]]=o[t]===e}},H=()=>{const e=Object.keys(i);for(let n of e)delete i[n];b(),$(),R(),O()},$=(e=Q.value)=>{i.orientation=e,i.isLandscape=e==="landscape",i.isPortrait=e==="portrait"},R=(e=N.value||"light")=>{i.theme=e,i.isDark=e==="dark",i.isLight=e==="light"},O=(e=C.value||"no-preference")=>{i.motionPreference=e,i.isMotion=e==="no-preference",i.isInert=e==="reduce"};function U(){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 W(){return f.value.reduce((n,o,t,r)=>{const s=`(min-width: ${o.min}px)`,l=t<r.length-1?`(max-width: ${r[t+1].min-1}px)`:null,u=s+(l?" and "+l:"");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;{z.value=!0;const o=window.matchMedia(e),t=({matches:s})=>{s&&n()};v.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),I=(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),l=n.value.findIndex(u=>u.name===r);return n.value.slice(s,l+1).map(u=>u.name)}else return typeof e=="string"&&p(e)===!0?[e]:o}else return o},E=(e,n)=>{const o=[];return!e&&!n?["landscape","portrait"]:(e&&o.push("landscape"),n&&o.push("portrait"),o)},L=(e,n)=>{const o=[];return!n&&!e?["light","dark"]:(n&&o.push("light"),e&&o.push("dark"),o)},_=(e,n)=>{const o=[];return!e&&!n?["reduce","no-preference"]:(e&&o.push("reduce"),n&&o.push("no-preference"),o)},k=Object.freeze(Object.defineProperty({__proto__:null,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},wordpress:{mobile:0,small:600,medium:782,large:960,xlarge:1080,wide:1280,huge:1440}},Symbol.toStringTag,{value:"Module"})),X=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}},ee=e=>["landscape","portrait"].includes(e)===!1?(console.error(`Vue3 Mq: "${e}" is not a valid default orientation. Reverting to unset value.`),null):e,te=(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,ne=(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,j=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)},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:["inert","motion"].includes(t)?o.slotMotion=t:o.slotBp=t);return o},re={name:"fade",mode:"out-in"},ae={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(()=>I(e.target,f)),s=a.computed(()=>E(e.landscape,e.portrait)),l=a.computed(()=>L(e.dark,e.light)),u=a.computed(()=>_(e.inert,e.motion)),w=a.computed(()=>r.value.includes(d.current)&&s.value.includes(d.orientation)&&l.value.includes(d.theme)&&u.value.includes(d.motionPreference)),q=m=>{if(!e.group&&t.length>0)return t;const h=[];for(let y in t){const{slotBp:le,slotOrientation:P,slotTheme:A,slotMotion:D}=oe(y),ue=a.computed(()=>I(le,f)),ce=a.computed(()=>E(P==="landscape",P==="portrait")),de=a.computed(()=>L(A==="dark",A==="light")),fe=a.computed(()=>_(D==="inert",D==="motion"));a.computed(()=>ue.value.includes(d.current)&&ce.value.includes(d.orientation)&&de.value.includes(d.theme)&&fe.value.includes(d.motionPreference)).value===!0&&h.push(a.h(m||t[y],{key:y},m?t[y]():void 0))}return h.length>0?h:void 0};return t.default?()=>w.value?a.h(e.tag,{...n},t.default()):void 0:()=>{const m=Object.assign({},re,n,{tag:e.tag}),h=e.group?a.TransitionGroup:a.Transition;return a.h(h,m,()=>q(e.listTag))}}};function M({breakpoints:e,preset:n}){const o=n?X(n):!1,t=e?j(e):!1;if(o===!1&&!t)throw new TypeError("Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.");Y(t||j(o)),U(),H();const r=W();for(const s in r){const l=r[s];g(l,()=>{b(s)})}["portrait","landscape"].forEach(s=>{const l=()=>{$(s)};g(`(orientation: ${s})`,l)}),["light","dark"].forEach(s=>{const l=()=>{R(s)};g(`(prefers-color-scheme: ${s})`,l)}),["reduce","no-preference"].forEach(s=>{const l=()=>{O(s)};g(`(prefers-reduced-motion: ${s})`,l)})}function se(){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 ie={install:(e,{preset:n="bootstrap5",breakpoints:o,defaultBreakpoint:t,defaultOrientation:r="landscape",defaultMotion:s="no-preference",defaultTheme:l}={})=>{try{const u=ee(r),w=te(l),q=ne(s);Z(t),F(u),G(w),J(q),e.provide("mq",d),e.provide("updateBreakpoints",M),M({breakpoints:o,preset:n})}catch(u){console.error(u)}}};c.MqResponsive=ae,c.Vue3Mq=ie,c.availableBreakpoints=f,c.updateBreakpoints=M,c.useMq=se,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); | ||
| (function(c,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(c=typeof globalThis<"u"?globalThis:c||self,s(c.Vue3Mq={},c.Vue))})(this,function(c,s){"use strict";const T=s.ref([]),V=s.ref(null),B=s.ref(null),S=s.ref(null),x=s.ref(null),a=s.reactive({current:""}),k=[],z=s.ref(!1),f=s.readonly(T),K=s.readonly(V),Q=s.readonly(B),N=s.readonly(S),C=s.readonly(x),d=s.readonly(a),Y=e=>{T.value=e},Z=e=>{V.value=e},F=e=>{B.value=e},G=e=>{S.value=e},J=e=>{x.value=e},b=(e=K.value)=>{a.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",i=o[t]+"Plus";a[r]=n<=t,a[i]=n>=t}a[o[t]]=o[t]===e}},H=()=>{const e=Object.keys(a);for(let n of e)delete a[n];b(),R(),$(),O()},R=(e=Q.value)=>{a.orientation=e,a.isLandscape=e==="landscape",a.isPortrait=e==="portrait"},$=(e=N.value||"light")=>{a.theme=e,a.isDark=e==="dark",a.isLight=e==="light"},O=(e=C.value||"no-preference")=>{a.motionPreference=e,a.isMotion=e==="no-preference",a.isInert=e==="reduce"};function U(){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 W(){return f.value.reduce((n,o,t,r)=>{const i=`(min-width: ${o.min}px)`,l=t<r.length-1?`(max-width: ${r[t+1].min-1}px)`:null,u=i+(l?" and "+l:"");return Object.assign(n,{[o.name]:u})},{})}function y(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;{z.value=!0;const o=window.matchMedia(e),t=({matches:i})=>{i&&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),I=(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(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(/-$/,""),m(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(m(t)===!1)return console.error(`Vue3 Mq: ${t} is not a valid breakpoint key. Invalid range.`),o;if(m(r)===!1)return console.error(`Vue3 Mq: ${r} is not a valid breakpoint key. Invalid range.`),o;const i=n.value.findIndex(u=>u.name===t),l=n.value.findIndex(u=>u.name===r);return n.value.slice(i,l+1).map(u=>u.name)}else return typeof e=="string"&&m(e)===!0?[e]:o}else return o},E=(e,n)=>{const o=[];return!e&&!n?["landscape","portrait"]:(e&&o.push("landscape"),n&&o.push("portrait"),o)},L=(e,n)=>{const o=[];return!n&&!e?["light","dark"]:(n&&o.push("light"),e&&o.push("dark"),o)},_=(e,n)=>{const o=[];return!e&&!n?["reduce","no-preference"]:(e&&o.push("reduce"),n&&o.push("no-preference"),o)},M=Object.freeze(Object.defineProperty({__proto__:null,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},wordpress:{mobile:0,small:600,medium:782,large:960,xlarge:1080,wide:1280,huge:1440}},Symbol.toStringTag,{value:"Module"})),X=e=>{if(typeof e=="string"&&M[e])return M[e];{const n=Object.keys(M);return console.error(`Vue3 Mq: "${e}" is not a valid preset. Available options are: ${n.join(", ")}`),!1}},ee=e=>["landscape","portrait"].includes(e)===!1?(console.error(`Vue3 Mq: "${e}" is not a valid default orientation. Reverting to unset value.`),null):e,te=(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,ne=(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,j=e=>{if(!e||typeof e!="object")return!1;const n=[];for(let r in e){const i=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(!i&&i!==0||isNaN(i)||i<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:i})}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,i)=>r.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:["inert","motion"].includes(t)?o.slotMotion=t:o.slotBp=t);return o},re={name:"fade",mode:"out-in"},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},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=s.computed(()=>I(e.target,f)),i=s.computed(()=>E(e.landscape,e.portrait)),l=s.computed(()=>L(e.dark,e.light)),u=s.computed(()=>_(e.inert,e.motion)),h=s.computed(()=>r.value.includes(d.current)&&i.value.includes(d.orientation)&&l.value.includes(d.theme)&&u.value.includes(d.motionPreference)),w=p=>{if(!e.group&&t.length>0)return t;const g=[];for(let v in t){const{slotBp:le,slotOrientation:P,slotTheme:A,slotMotion:D}=oe(v),ue=s.computed(()=>I(le,f)),ce=s.computed(()=>E(P==="landscape",P==="portrait")),de=s.computed(()=>L(A==="dark",A==="light")),fe=s.computed(()=>_(D==="inert",D==="motion"));s.computed(()=>ue.value.includes(d.current)&&ce.value.includes(d.orientation)&&de.value.includes(d.theme)&&fe.value.includes(d.motionPreference)).value===!0&&g.push(s.h(p||t[v],{key:v},p?t[v]():void 0))}return g.length>0?g:void 0};return t.default?()=>h.value?s.h(e.tag,{...n},t.default()):void 0:()=>{const p=Object.assign({},re,n,{tag:e.tag}),g=e.group?s.TransitionGroup:s.Transition;return s.h(g,p,()=>w(e.listTag))}}};function q({breakpoints:e,preset:n}){const o=n?X(n):!1,t=e?j(e):!1;if(o===!1&&!t)throw new TypeError("Vue3 Mq: You must provide a valid preset, or valid breakpoint settings.");Y(t||j(o)),U(),H();const r=W();for(const i in r){const l=r[i];y(l,()=>{b(i)})}["portrait","landscape"].forEach(i=>{const l=()=>{R(i)};y(`(orientation: ${i})`,l)}),["light","dark"].forEach(i=>{const l=()=>{$(i)};y(`(prefers-color-scheme: ${i})`,l)}),["reduce","no-preference"].forEach(i=>{const l=()=>{O(i)};y(`(prefers-reduced-motion: ${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.")}const ae={install:(e,{preset:n="bootstrap5",breakpoints:o,defaultBreakpoint:t,defaultOrientation:r="landscape",defaultMotion:i="no-preference",defaultTheme:l,global:u=!1}={})=>{try{const h=ee(r),w=te(l),p=ne(i);Z(t),F(h),G(w),J(p),e.provide("mq",d),e.provide("updateBreakpoints",q),u===!0&&(e.component("MqResponsive",MqResponsive),e.config.globalProperties.$mq=d),q({breakpoints:o,preset:n})}catch(h){console.error(h)}}};c.MqResponsive=se,c.Vue3Mq=ae,c.availableBreakpoints=f,c.updateBreakpoints=q,c.useMq=ie,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); |
| { | ||
| "name": "vue3-mq", | ||
| "version": "3.1.3", | ||
| "version": "3.2.0", | ||
| "description": "Build responsive design into your Vue 3 app", | ||
@@ -35,6 +35,5 @@ "files": [ | ||
| "dev": "vite", | ||
| "docs:dev": "vuepress dev docs", | ||
| "docs:build": "vuepress build docs", | ||
| "docs:deploy": "gh-pages -d docs/.vuepress/dist", | ||
| "build": "vite build -c vite-build.config.js", | ||
| "docs:dev": "pnpm --filter ./docs run dev", | ||
| "docs:build": "pnpm --filter ./docs run build", | ||
| "test": "jest" | ||
@@ -52,6 +51,2 @@ }, | ||
| "@vue/test-utils": "^2.0.0-rc.10", | ||
| "@vuepress/plugin-back-to-top": "^2.0.0-beta.35", | ||
| "@vuepress/plugin-prismjs": "^2.0.0-beta.35", | ||
| "@vuepress/plugin-register-components": "^2.0.0-beta.35", | ||
| "@vuepress/plugin-search": "^2.0.0-beta.35", | ||
| "autoprefixer": "^10.4.4", | ||
@@ -64,3 +59,2 @@ "babel-plugin-prismjs": "^2.1.0", | ||
| "eslint-plugin-vue": "^9.4.0", | ||
| "gh-pages": "^4.0.0", | ||
| "match-media-mock": "^0.1.1", | ||
@@ -72,4 +66,3 @@ "postcss": "^8.4.12", | ||
| "vue-jest": "^5.0.0-alpha.10", | ||
| "vue3-icon": "^2.0.0", | ||
| "vuepress": "^2.0.0-beta.35" | ||
| "vue3-icon": "^2.0.0" | ||
| }, | ||
@@ -76,0 +69,0 @@ "bugs": { |
@@ -15,14 +15,14 @@ <p align="center"> | ||
| - Completely customisable breakpoints | ||
| - Includes MQ-Responsive Vue component for unparalleled ease of use | ||
| - Access a fully reactive environment analysis object | ||
| - Adapt to your users' preference for light or dark themes | ||
| - React to changes in screen orientation | ||
| - Respect user preference for reduced motion direct in your Vue files | ||
| - Choose from a range of breakpoint presets, including Bootstrap 4, Bootstrap 5, Vuetify or Tailwind | ||
| - Render on single breakpoints, arrays of breakpoints or ranges | ||
| - Completely customisable breakpoints | ||
| - Includes MQ-Responsive Vue component for unparalleled ease of use | ||
| - Access a fully reactive environment analysis object | ||
| - Adapt to your users' preference for light or dark themes | ||
| - React to changes in screen orientation | ||
| - Respect user preference for reduced motion direct in your Vue files | ||
| - Choose from a range of breakpoint presets, including Bootstrap 4, Bootstrap 5, Vuetify or Tailwind | ||
| - Render on single breakpoints, arrays of breakpoints or ranges | ||
| ## Documentation | ||
| Check out the documentation at https://vue3-mq.info. | ||
| Check out the documentation at [Vue3 MQ: Github Pages](https://craigrileyuk.github.io/vue3-mq/). | ||
@@ -41,9 +41,8 @@ ## License | ||
| - [Tailwind Fluid Typography](https://github.com/craigrileyuk/tailwind-fluid-typography) | ||
| - [Laravel Mix Ziggy Watch](https://github.com/craigrileyuk/laravel-mix-ziggy-watch) | ||
| - [Vue 3 Snackbar](https://github.com/craigrileyuk/vue3-snackbar) | ||
| - [Vue 3 Slide Up Down](https://github.com/craigrileyuk/vue3-slide-up-down) | ||
| - [Vue 3 Icon](https://github.com/craigrileyuk/vue3-icon) | ||
| - [Tailwind Fluid Typography](https://github.com/craigrileyuk/tailwind-fluid-typography) | ||
| - [Laravel Mix Ziggy Watch](https://github.com/craigrileyuk/laravel-mix-ziggy-watch) | ||
| - [Vue 3 Snackbar](https://github.com/craigrileyuk/vue3-snackbar) | ||
| - [Vue 3 Slide Up Down](https://github.com/craigrileyuk/vue3-slide-up-down) | ||
| - [Vue 3 Icon](https://github.com/craigrileyuk/vue3-icon) | ||
| ## Bugs / Support | ||
@@ -55,2 +54,2 @@ | ||
| Thanks to [Alexandre Bonaventure](https://github.com/AlexandreBonaventure/vue-mq) for creating the Vue 2 project that this is based upon. | ||
| Thanks to [Alexandre Bonaventure](https://github.com/AlexandreBonaventure/vue-mq) for creating the Vue 2 project that this is based upon. |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage 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
- increased by0.42%
41551
- Dev dependency count
- decreased by-23.08%
20
- Lines of code
- increased by0.61%
493
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes