vue3-mq - npm Package Compare versions

Comparing version 2.3.0 to 2.3.1

dist/index.es.js

@@ -263,3 +263,3 @@ import json2mq from 'json2mq';
     });
-    if (!from || from.length === 0) throw new Error('Range from breakpoint (' + mqProp[0].trim() + ') not found');
+    if (!from || from.length === 0) throw new Error("Range from breakpoint (" + mqProp[0].trim() + ") not found");
     var to = ents.find(function (_ref4) {
@@ -272,3 +272,3 @@ var _ref5 = _slicedToArray(_ref4, 2),
     });
-    if (!to || to.length === 0) throw new Error('Range to breakpoint (' + mqProp[1].trim() + ') not found');
+    if (!to || to.length === 0) throw new Error("Range to breakpoint (" + mqProp[1].trim() + ") not found");
 
@@ -330,4 +330,9 @@ if (from[1] > to[1]) {
   });
-  mql.addEventListener('change', cb); //subscribing
 
+  if (mql.addEventListener && typeof mql.addEventListener === "function") {
+    mql.addEventListener("change", cb); //subscribing
+  } else {
+    mql.addListener("change", cb);
+  }
+
   cb(mql); //initial trigger
@@ -337,5 +342,5 @@ }
   for (var bp in breakpoints) {
-    if (!['string', 'number'].includes(_typeof(bp)) || !bp) throw new Error("Invalid or missing breakpoint key");
-    if (typeof breakpoints[bp] === 'string') breakpoints[bp] = parseFloat(breakpoints[bp].replace(/[^0-9]/g, ""));
-    if (typeof breakpoints[bp] !== 'number' || breakpoints[bp] < 0) throw new Error("Invalid breakpoint value for " + bp + ". Please use a valid number.");
+    if (!["string", "number"].includes(_typeof(bp)) || !bp) throw new Error("Invalid or missing breakpoint key");
+    if (typeof breakpoints[bp] === "string") breakpoints[bp] = parseFloat(breakpoints[bp].replace(/[^0-9]/g, ""));
+    if (typeof breakpoints[bp] !== "number" || breakpoints[bp] < 0) throw new Error("Invalid breakpoint value for " + bp + ". Please use a valid number.");
     if (!breakpoints[bp]) throw new Error("No valid breakpoint value for " + bp + " was found");
@@ -361,2 +366,3 @@ }
   setup: function setup(props, context) {
+    console.log("Running setup()");
     var defaultOptions = {
@@ -416,8 +422,11 @@ name: "fade",
 
-      return slots;
+      return slots.length > 0 ? slots : undefined;
     };
 
+    console.log(context.slots["default"]); // If the user includes a bare element inside the mq-layout component
+    // Uses the props.tag property to render an element
+
     if (context.slots["default"]) {
       return function () {
-        return shouldRenderChildren.value ? h(props.tag, {}, context.slots["default"]()) : h();
+        return shouldRenderChildren.value ? h(props.tag, {}, context.slots["default"]()) : undefined;
       };
@@ -424,0 +433,0 @@ } else {

dist/index.js

@@ -269,3 +269,3 @@ 'use strict';
     });
-    if (!from || from.length === 0) throw new Error('Range from breakpoint (' + mqProp[0].trim() + ') not found');
+    if (!from || from.length === 0) throw new Error("Range from breakpoint (" + mqProp[0].trim() + ") not found");
     var to = ents.find(function (_ref4) {
@@ -278,3 +278,3 @@ var _ref5 = _slicedToArray(_ref4, 2),
     });
-    if (!to || to.length === 0) throw new Error('Range to breakpoint (' + mqProp[1].trim() + ') not found');
+    if (!to || to.length === 0) throw new Error("Range to breakpoint (" + mqProp[1].trim() + ") not found");
 
@@ -336,4 +336,9 @@ if (from[1] > to[1]) {
   });
-  mql.addEventListener('change', cb); //subscribing
 
+  if (mql.addEventListener && typeof mql.addEventListener === "function") {
+    mql.addEventListener("change", cb); //subscribing
+  } else {
+    mql.addListener("change", cb);
+  }
+
   cb(mql); //initial trigger
@@ -343,5 +348,5 @@ }
   for (var bp in breakpoints) {
-    if (!['string', 'number'].includes(_typeof(bp)) || !bp) throw new Error("Invalid or missing breakpoint key");
-    if (typeof breakpoints[bp] === 'string') breakpoints[bp] = parseFloat(breakpoints[bp].replace(/[^0-9]/g, ""));
-    if (typeof breakpoints[bp] !== 'number' || breakpoints[bp] < 0) throw new Error("Invalid breakpoint value for " + bp + ". Please use a valid number.");
+    if (!["string", "number"].includes(_typeof(bp)) || !bp) throw new Error("Invalid or missing breakpoint key");
+    if (typeof breakpoints[bp] === "string") breakpoints[bp] = parseFloat(breakpoints[bp].replace(/[^0-9]/g, ""));
+    if (typeof breakpoints[bp] !== "number" || breakpoints[bp] < 0) throw new Error("Invalid breakpoint value for " + bp + ". Please use a valid number.");
     if (!breakpoints[bp]) throw new Error("No valid breakpoint value for " + bp + " was found");
@@ -367,2 +372,3 @@ }
   setup: function setup(props, context) {
+    console.log("Running setup()");
     var defaultOptions = {
@@ -422,8 +428,11 @@ name: "fade",
 
-      return slots;
+      return slots.length > 0 ? slots : undefined;
     };
 
+    console.log(context.slots["default"]); // If the user includes a bare element inside the mq-layout component
+    // Uses the props.tag property to render an element
+
     if (context.slots["default"]) {
       return function () {
-        return shouldRenderChildren.value ? vue.h(props.tag, {}, context.slots["default"]()) : vue.h();
+        return shouldRenderChildren.value ? vue.h(props.tag, {}, context.slots["default"]()) : undefined;
       };
@@ -430,0 +439,0 @@ } else {

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('vue')) :
-  typeof define === 'function' && define.amd ? define(['vue'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global['vue3-mq'] = factory(global.vue));
-}(this, (function (vue) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('json2mq'), require('vue')) :
+  typeof define === 'function' && define.amd ? define(['json2mq', 'vue'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global['vue3-mq'] = factory(global.json2mq, global.vue));
+}(this, (function (json2mq, vue) { 'use strict';
 
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var json2mq__default = /*#__PURE__*/_interopDefaultLegacy(json2mq);
+
   function _typeof(obj) {
@@ -144,62 +148,2 @@ "@babel/helpers - typeof";
 
-  var camel2hyphen = function (str) {
-    return str
-            .replace(/[A-Z]/g, function (match) {
-              return '-' + match.toLowerCase();
-            })
-            .toLowerCase();
-  };
-
-  var camel2hyphen_1 = camel2hyphen;
-
-  var isDimension = function (feature) {
-    var re = /[height|width]$/;
-    return re.test(feature);
-  };
-
-  var obj2mq = function (obj) {
-    var mq = '';
-    var features = Object.keys(obj);
-    features.forEach(function (feature, index) {
-      var value = obj[feature];
-      feature = camel2hyphen_1(feature);
-      // Add px to dimension features
-      if (isDimension(feature) && typeof value === 'number') {
-        value = value + 'px';
-      }
-      if (value === true) {
-        mq += feature;
-      } else if (value === false) {
-        mq += 'not ' + feature;
-      } else {
-        mq += '(' + feature + ': ' + value + ')';
-      }
-      if (index < features.length-1) {
-        mq += ' and ';
-      }
-    });
-    return mq;
-  };
-
-  var json2mq = function (query) {
-    var mq = '';
-    if (typeof query === 'string') {
-      return query;
-    }
-    // Handling array of media queries
-    if (query instanceof Array) {
-      query.forEach(function (q, index) {
-        mq += obj2mq(q);
-        if (index < query.length-1) {
-          mq += ', ';
-        }
-      });
-      return mq;
-    }
-    // Handling single media query
-    return obj2mq(query);
-  };
-
-  var json2mq_1 = json2mq;
-
   var DEFAULT_BREAKPOINTS = {
@@ -292,3 +236,3 @@ xs: 576,
       } : {});
-      var mediaQuery = json2mq_1(options);
+      var mediaQuery = json2mq__default['default'](options);
       return Object.assign(accumulator, _defineProperty({}, keys[index], mediaQuery));
@@ -328,3 +272,3 @@ }, {});
       });
-      if (!from || from.length === 0) throw new Error('Range from breakpoint (' + mqProp[0].trim() + ') not found');
+      if (!from || from.length === 0) throw new Error("Range from breakpoint (" + mqProp[0].trim() + ") not found");
       var to = ents.find(function (_ref4) {
@@ -337,3 +281,3 @@ var _ref5 = _slicedToArray(_ref4, 2),
       });
-      if (!to || to.length === 0) throw new Error('Range to breakpoint (' + mqProp[1].trim() + ') not found');
+      if (!to || to.length === 0) throw new Error("Range to breakpoint (" + mqProp[1].trim() + ") not found");
 
@@ -395,4 +339,9 @@ if (from[1] > to[1]) {
     });
-    mql.addEventListener('change', cb); //subscribing
 
+    if (mql.addEventListener && typeof mql.addEventListener === "function") {
+      mql.addEventListener("change", cb); //subscribing
+    } else {
+      mql.addListener("change", cb);
+    }
+
     cb(mql); //initial trigger
@@ -402,5 +351,5 @@ }
     for (var bp in breakpoints) {
-      if (!['string', 'number'].includes(_typeof(bp)) || !bp) throw new Error("Invalid or missing breakpoint key");
-      if (typeof breakpoints[bp] === 'string') breakpoints[bp] = parseFloat(breakpoints[bp].replace(/[^0-9]/g, ""));
-      if (typeof breakpoints[bp] !== 'number' || breakpoints[bp] < 0) throw new Error("Invalid breakpoint value for " + bp + ". Please use a valid number.");
+      if (!["string", "number"].includes(_typeof(bp)) || !bp) throw new Error("Invalid or missing breakpoint key");
+      if (typeof breakpoints[bp] === "string") breakpoints[bp] = parseFloat(breakpoints[bp].replace(/[^0-9]/g, ""));
+      if (typeof breakpoints[bp] !== "number" || breakpoints[bp] < 0) throw new Error("Invalid breakpoint value for " + bp + ". Please use a valid number.");
       if (!breakpoints[bp]) throw new Error("No valid breakpoint value for " + bp + " was found");
@@ -426,2 +375,3 @@ }
     setup: function setup(props, context) {
+      console.log("Running setup()");
       var defaultOptions = {
@@ -481,8 +431,11 @@ name: "fade",
 
-        return slots;
+        return slots.length > 0 ? slots : undefined;
       };
 
+      console.log(context.slots["default"]); // If the user includes a bare element inside the mq-layout component
+      // Uses the props.tag property to render an element
+
       if (context.slots["default"]) {
         return function () {
-          return shouldRenderChildren.value ? vue.h(props.tag, {}, context.slots["default"]()) : vue.h();
+          return shouldRenderChildren.value ? vue.h(props.tag, {}, context.slots["default"]()) : undefined;
         };
@@ -489,0 +442,0 @@ } else {

dist/index.umd.min.js

@@ -1,2 +0,2 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("vue")):"function"==typeof define&&define.amd?define(["vue"],r):(e="undefined"!=typeof globalThis?globalThis:e||self)["vue3-mq"]=r(e.vue)}(this,(function(e){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function t(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function n(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function o(e){for(var r=1;r<arguments.length;r++){var o=null!=arguments[r]?arguments[r]:{};r%2?n(Object(o),!0).forEach((function(r){t(e,r,o[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(o,r))}))}return e}function i(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var t=[],n=!0,o=!1,i=void 0;try{for(var u,a=e[Symbol.iterator]();!(n=(u=a.next()).done)&&(t.push(u.value),!r||t.length!==r);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==a.return||a.return()}finally{if(o)throw i}}return t}(e,r)||a(e,r)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e){return function(e){if(Array.isArray(e))return l(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||a(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function a(e,r){if(e){if("string"==typeof e)return l(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?l(e,r):void 0}}function l(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var f=function(e){return e.replace(/[A-Z]/g,(function(e){return"-"+e.toLowerCase()})).toLowerCase()},c=function(e){var r="",t=Object.keys(e);return t.forEach((function(n,o){var i=e[n];(function(e){return/[height|width]$/.test(e)})(n=f(n))&&"number"==typeof i&&(i+="px"),r+=!0===i?n:!1===i?"not "+n:"("+n+": "+i+")",o<t.length-1&&(r+=" and ")})),r},s=function(e){var r="";return"string"==typeof e?e:e instanceof Array?(e.forEach((function(t,n){r+=c(t),n<e.length-1&&(r+=", ")})),r):c(e)},v={xs:576,sm:768,md:992,lg:1200,xl:1400,xxl:1/0},p={mqAvailableBreakpoints:e.ref({}),currentBreakpoint:e.ref("")},m=e.readonly(p.mqAvailableBreakpoints),d=function(e){return p.currentBreakpoint.value=e},y=e.readonly(p.currentBreakpoint);function b(e){for(var n=g.length-1;n>=0;n--){var o=g[n],i=o.mql,a=o.cb;i.removeEventListener("change",a),g.splice(n,1)}var l;!function(e){for(var t in e){if(!["string","number"].includes(r(t))||!t)throw new Error("Invalid or missing breakpoint key");if("string"==typeof e[t]&&(e[t]=parseFloat(e[t].replace(/[^0-9]/g,""))),"number"!=typeof e[t]||e[t]<0)throw new Error("Invalid breakpoint value for "+t+". Please use a valid number.");if(!e[t])throw new Error("No valid breakpoint value for "+t+" was found")}}(e),l=e,p.mqAvailableBreakpoints.value=l;var f=function(e){var r=Object.keys(e),n=r.map((function(r){return e[r]})),o=[0].concat(u(n.slice(0,-1)));return o.reduce((function(e,n,i){var u=Object.assign({minWidth:n},i<r.length-1?{maxWidth:o[i+1]-1}:{}),a=s(u);return Object.assign(e,t({},r[i],a))}),{})}(e),c=function(e){!function(e,r){var t=window.matchMedia(e),n=function(e){e.matches&&r()};g.push({mql:t,cb:n}),t.addEventListener("change",n),n(t)}(f[e],(function(){d(e)}))};for(var v in f)c(v)}var g=[];function h(e){var r,t=e.mqProp,n=e.isMqPlus,o=void 0===n?{value:!1}:n,u=e.isMqMinus,a=void 0===u?{value:!1}:u,l=e.isMqRange,f=void 0===l?{value:!1}:l,c=Object.entries(m.value);if(0===c.length)return[];if(o.value)t=t.replace(/\+$/,"");else if(a.value)t=t.replace(/-$/,"");else if(f.value&&(!(t=t.split("-"))||2!==t.length))throw new Error("Invalid MQ range provided");if(f.value){var s=c.find((function(e){var r=i(e,2),n=r[0];r[1];return n==t[0].trim()}));if(!s||0===s.length)throw new Error("Range from breakpoint ("+t[0].trim()+") not found");var v=c.find((function(e){var r=i(e,2),n=r[0];r[1];return n==t[1].trim()}));if(!v||0===v.length)throw new Error("Range to breakpoint ("+t[1].trim()+") not found");if(s[1]>v[1]){var p=[v,s];s=p[0],v=p[1]}r=c.filter((function(e){var r=i(e,2),t=(r[0],r[1]);return t>=s[1]&&t<=v[1]}))}else{var d=c.find((function(e){var r=i(e,2),n=r[0];r[1];return n==t}));o.value?r=c.filter((function(e){var r=i(e,2);r[0];return r[1]>=d[1]})):a.value&&(r=c.filter((function(e){var r=i(e,2);r[0];return r[1]<=d[1]})))}return r.sort((function(e,r){return e[1]-r[1]})),r.map((function(e){return e[0]}))}var w={name:"MqLayout",props:{mq:{type:[String,Array]},tag:{type:String,default:"div"},group:{type:Boolean,default:!1}},setup:function(t,n){var i={name:"fade",mode:"out-in"},u=e.computed((function(){return Array.isArray(t.mq)})),a=e.computed((function(){return!u.value&&!0===/\+$/.test(t.mq)})),l=e.computed((function(){return!u.value&&!0===/-$/.test(t.mq)})),f=e.computed((function(){return!u.value&&!0===/^\w*-\w*/.test(t.mq)})),c=e.computed((function(){return u.value?t.mq:a.value||l.value||f.value?h({mqProp:t.mq,isMqPlus:a,isMqMinus:l,isMqRange:f}):[t.mq]})),s=e.computed((function(){return c.value.includes(y.value)})),v=function(o){var i=[],u=function(r){if(!t.group&&i.length>0)return{v:i};e.computed((function(){return function(r){var t=Array.isArray(r),n=!t.value&&!0===/\+$/.test(r),o=!t.value&&!0===/-$/.test(r),i=!t.value&&!0===/^\w*-\w*/.test(r);return e.computed((function(){return t?r:n||o||i?h({mqProp:r,isMqPlus:{value:n},isMqMinus:{value:o},isMqRange:{value:i}}):[r]})).value.includes(y.value)}(r.split(":")[0])})).value&&i.push(e.h(o||n.slots[r],{key:r},o?n.slots[r]():void 0))};for(var a in n.slots){var l=u(a);if("object"===r(l))return l.v}return i};return n.slots.default?function(){return s.value?e.h(t.tag,{},n.slots.default()):e.h()}:function(){var r=o(o({},i),n.attrs),u=t.group?e.TransitionGroup:e.Transition;return e.h(u,r,v(t.tag))}}};return{install:function(r){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.breakpoints,o=void 0===n?v:n,i=t.defaultBreakpoint,u=void 0===i?"sm":i,a=!1;d(u),r.provide("updateBreakpoints",b),r.provide("mq",e.readonly(y)),r.mixin({computed:{$mq:function(){return y.value}},mounted:function(){a||(b(o),a=!0)}}),r.config.globalProperties.$mqAvailableBreakpoints=o,r.component("MqLayout",w)}}}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("json2mq"),require("vue")):"function"==typeof define&&define.amd?define(["json2mq","vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["vue3-mq"]=t(e.json2mq,e.vue)}(this,(function(e,t){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e);function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function u(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?u(Object(r),!0).forEach((function(t){i(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):u(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function l(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var r=[],n=!0,o=!1,i=void 0;try{for(var u,a=e[Symbol.iterator]();!(n=(u=a.next()).done)&&(r.push(u.value),!t||r.length!==t);n=!0);}catch(e){o=!0,i=e}finally{try{n||null==a.return||a.return()}finally{if(o)throw i}}return r}(e,t)||c(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function f(e){return function(e){if(Array.isArray(e))return s(e)}(e)||function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}(e)||c(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function c(e,t){if(e){if("string"==typeof e)return s(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?s(e,t):void 0}}function s(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var v={xs:576,sm:768,md:992,lg:1200,xl:1400,xxl:1/0},p={mqAvailableBreakpoints:t.ref({}),currentBreakpoint:t.ref("")},d=t.readonly(p.mqAvailableBreakpoints),m=function(e){return p.currentBreakpoint.value=e},y=t.readonly(p.currentBreakpoint);function b(e){for(var t=g.length-1;t>=0;t--){var r=g[t],u=r.mql,a=r.cb;u.removeEventListener("change",a),g.splice(t,1)}var l;!function(e){for(var t in e){if(!["string","number"].includes(o(t))||!t)throw new Error("Invalid or missing breakpoint key");if("string"==typeof e[t]&&(e[t]=parseFloat(e[t].replace(/[^0-9]/g,""))),"number"!=typeof e[t]||e[t]<0)throw new Error("Invalid breakpoint value for "+t+". Please use a valid number.");if(!e[t])throw new Error("No valid breakpoint value for "+t+" was found")}}(e),l=e,p.mqAvailableBreakpoints.value=l;var c=function(e){var t=Object.keys(e),r=t.map((function(t){return e[t]})),o=[0].concat(f(r.slice(0,-1)));return o.reduce((function(e,r,u){var a=Object.assign({minWidth:r},u<t.length-1?{maxWidth:o[u+1]-1}:{}),l=n.default(a);return Object.assign(e,i({},t[u],l))}),{})}(e),s=function(e){!function(e,t){var r=window.matchMedia(e),n=function(e){e.matches&&t()};g.push({mql:r,cb:n}),r.addEventListener&&"function"==typeof r.addEventListener?r.addEventListener("change",n):r.addListener("change",n);n(r)}(c[e],(function(){m(e)}))};for(var v in c)s(v)}var g=[];function h(e){var t,r=e.mqProp,n=e.isMqPlus,o=void 0===n?{value:!1}:n,i=e.isMqMinus,u=void 0===i?{value:!1}:i,a=e.isMqRange,f=void 0===a?{value:!1}:a,c=Object.entries(d.value);if(0===c.length)return[];if(o.value)r=r.replace(/\+$/,"");else if(u.value)r=r.replace(/-$/,"");else if(f.value&&(!(r=r.split("-"))||2!==r.length))throw new Error("Invalid MQ range provided");if(f.value){var s=c.find((function(e){var t=l(e,2),n=t[0];t[1];return n==r[0].trim()}));if(!s||0===s.length)throw new Error("Range from breakpoint ("+r[0].trim()+") not found");var v=c.find((function(e){var t=l(e,2),n=t[0];t[1];return n==r[1].trim()}));if(!v||0===v.length)throw new Error("Range to breakpoint ("+r[1].trim()+") not found");if(s[1]>v[1]){var p=[v,s];s=p[0],v=p[1]}t=c.filter((function(e){var t=l(e,2),r=(t[0],t[1]);return r>=s[1]&&r<=v[1]}))}else{var m=c.find((function(e){var t=l(e,2),n=t[0];t[1];return n==r}));o.value?t=c.filter((function(e){var t=l(e,2);t[0];return t[1]>=m[1]})):u.value&&(t=c.filter((function(e){var t=l(e,2);t[0];return t[1]<=m[1]})))}return t.sort((function(e,t){return e[1]-t[1]})),t.map((function(e){return e[0]}))}var q={name:"MqLayout",props:{mq:{type:[String,Array]},tag:{type:String,default:"div"},group:{type:Boolean,default:!1}},setup:function(e,r){console.log("Running setup()");var n={name:"fade",mode:"out-in"},i=t.computed((function(){return Array.isArray(e.mq)})),u=t.computed((function(){return!i.value&&!0===/\+$/.test(e.mq)})),l=t.computed((function(){return!i.value&&!0===/-$/.test(e.mq)})),f=t.computed((function(){return!i.value&&!0===/^\w*-\w*/.test(e.mq)})),c=t.computed((function(){return i.value?e.mq:u.value||l.value||f.value?h({mqProp:e.mq,isMqPlus:u,isMqMinus:l,isMqRange:f}):[e.mq]})),s=t.computed((function(){return c.value.includes(y.value)})),v=function(n){var i=[],u=function(o){if(!e.group&&i.length>0)return{v:i};t.computed((function(){return function(e){var r=Array.isArray(e),n=!r.value&&!0===/\+$/.test(e),o=!r.value&&!0===/-$/.test(e),i=!r.value&&!0===/^\w*-\w*/.test(e);return t.computed((function(){return r?e:n||o||i?h({mqProp:e,isMqPlus:{value:n},isMqMinus:{value:o},isMqRange:{value:i}}):[e]})).value.includes(y.value)}(o.split(":")[0])})).value&&i.push(t.h(n||r.slots[o],{key:o},n?r.slots[o]():void 0))};for(var a in r.slots){var l=u(a);if("object"===o(l))return l.v}return i.length>0?i:void 0};return console.log(r.slots.default),r.slots.default?function(){return s.value?t.h(e.tag,{},r.slots.default()):void 0}:function(){var o=a(a({},n),r.attrs),i=e.group?t.TransitionGroup:t.Transition;return t.h(i,o,v(e.tag))}}};return{install:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=r.breakpoints,o=void 0===n?v:n,i=r.defaultBreakpoint,u=void 0===i?"sm":i,a=!1;m(u),e.provide("updateBreakpoints",b),e.provide("mq",t.readonly(y)),e.mixin({computed:{$mq:function(){return y.value}},mounted:function(){a||(b(o),a=!0)}}),e.config.globalProperties.$mqAvailableBreakpoints=o,e.component("MqLayout",q)}}}));
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "vue3-mq",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "description": "Handle media queries easily & build responsive design with Vue 3",
@@ -20,28 +20,29 @@ "main": "dist/index.js",
   "license": "MIT",
+  "dependencies": {
+    "json2mq": "^0.2.0"
+  },
   "devDependencies": {
-    "@babel/preset-env": "^7.12.1",
-    "@vue/cli-plugin-unit-jest": "^4.5.8",
-    "@vue/cli-service": "^4.5.7",
-    "@vue/compiler-sfc": "^3.0.2",
-    "@vue/test-utils": "^2.0.0-beta.7",
+    "@babel/preset-env": "^7.12.11",
+    "@vue/cli-plugin-unit-jest": "^4.5.9",
+    "@vue/cli-service": "^4.5.9",
+    "@vue/compiler-sfc": "^3.0.4",
+    "@vue/test-utils": "^2.0.0-beta.13",
+    "babel-plugin-prismjs": "^2.0.1",
     "bili": "^5.0.0",
     "browser-env": "^3.2.1",
-    "eslint": "^7.12.1",
+    "eslint": "^7.16.0",
     "eslint-config-prettier": "^6.15.0",
-    "eslint-plugin-vue": "^7.1.0",
+    "eslint-plugin-vue": "^7.3.0",
     "gh-pages": "^3.1.0",
-    "json2mq": "^0.2.0",
     "match-media-mock": "^0.1.1",
-    "prettier": "^2.1.2",
+    "prettier": "^2.2.1",
     "primeflex": "^2.0.0",
-    "primeicons": "^4.0.0",
-    "primevue": "^3.0.1",
-    "sass": "^1.28.0",
-    "vite": "^1.0.0-rc.8",
-    "vue": "^3.0.2",
-    "vue-jest": "^5.0.0-alpha.5"
-  },
-  "dependencies": {
-    "vue-ripple-directive": "^2.0.1"
+    "primeicons": "^4.1.0",
+    "primevue": "^3.1.1",
+    "prismjs": "^1.22.0",
+    "sass": "^1.30.0",
+    "vite": "^1.0.0-rc.13",
+    "vue": "^3.0.4",
+    "vue-jest": "^5.0.0-alpha.7"
   }
 }

README.md

@@ -25,3 +25,3 @@ # Vue 3 MQ (Media Query)
 
-See https://craigrileyuk.github.io/vue3-mq/ for a demonstration and usage guide for Vue3-MQ.
+See https://vue3-mq.info for a demonstration and usage guide for Vue3-MQ.
 
@@ -28,0 +28,0 @@ ## Installation

src/component.js

@@ -1,85 +0,93 @@
-// USAGE // mq-layout(mq="lg") // p I’m lg
-import {
-    selectBreakpoints
-} from "./helpers";
-import {
-    currentBreakpoint,
-    shouldRender
-} from "./store";
-import {
-    computed,
-    h,
-    Transition,
-    TransitionGroup
-} from "vue";
+import { selectBreakpoints } from "./helpers";
+import { currentBreakpoint, shouldRender } from "./store";
+import { computed, h, Transition, TransitionGroup } from "vue";
 
 export default {
-    name: "MqLayout",
-    props: {
-        mq: {
-            type: [String,Array]
-        },
-        tag: {
-            type: String,
-            default: "div"
-        },
-        group: {
-            type: Boolean,
-            default: false
-        }
-    },
-    setup(props, context) {
-        const defaultOptions = {
-            name: "fade",
-            mode: "out-in"
-        }
-        const isMqArray = computed(() => Array.isArray(props.mq));
-        const isMqPlus = computed(
-            () => !isMqArray.value && /\+$/.test(props.mq) === true
-        );
-        const isMqMinus = computed(
-            () => !isMqArray.value && /-$/.test(props.mq) === true
-        );
-        const isMqRange = computed(
-            () => !isMqArray.value && /^\w*-\w*/.test(props.mq) === true
-        );
+	name: "MqLayout",
+	props: {
+		mq: {
+			type: [String, Array],
+		},
+		tag: {
+			type: String,
+			default: "div",
+		},
+		group: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, context) {
+		console.log("Running setup()");
+		const defaultOptions = {
+			name: "fade",
+			mode: "out-in",
+		};
+		const isMqArray = computed(() => Array.isArray(props.mq));
+		const isMqPlus = computed(
+			() => !isMqArray.value && /\+$/.test(props.mq) === true
+		);
+		const isMqMinus = computed(
+			() => !isMqArray.value && /-$/.test(props.mq) === true
+		);
+		const isMqRange = computed(
+			() => !isMqArray.value && /^\w*-\w*/.test(props.mq) === true
+		);
 
-        const activeBreakpoints = computed(() => {
-            if (isMqArray.value) return props.mq;
-            else if (!isMqPlus.value && !isMqMinus.value && !isMqRange.value) return [props.mq];
-            else {
-                return selectBreakpoints({mqProp: props.mq, isMqPlus, isMqMinus, isMqRange });
-            }
-        });
+		const activeBreakpoints = computed(() => {
+			if (isMqArray.value) return props.mq;
+			else if (!isMqPlus.value && !isMqMinus.value && !isMqRange.value)
+				return [props.mq];
+			else {
+				return selectBreakpoints({
+					mqProp: props.mq,
+					isMqPlus,
+					isMqMinus,
+					isMqRange,
+				});
+			}
+		});
 
-        const shouldRenderChildren = computed(() =>
-            activeBreakpoints.value.includes(currentBreakpoint.value)
-        );
+		const shouldRenderChildren = computed(() =>
+			activeBreakpoints.value.includes(currentBreakpoint.value)
+		);
 
-
-        const renderSlots = (tag) => {
-            let slots = [];
-            for (let slot in context.slots) {
-                if (!props.group && slots.length > 0) return slots;
-                let shouldRenderSlot = computed(() => shouldRender(slot.split(":")[0]));
-                if (shouldRenderSlot.value) {
-                    slots.push(h(tag ? tag : context.slots[slot],{ key: slot }, tag ? context.slots[slot]() : undefined));
-                }
-            }
-            return slots;
-        }
-        if (context.slots.default) {
-            return () =>
-            shouldRenderChildren.value ?
-            h(props.tag, {}, context.slots.default()) :
-            h();
-        }
-        else {
-            return () => {
-                const transitionOptions = {...defaultOptions, ...context.attrs };
-                const el = props.group ? TransitionGroup : Transition;
-                return h(el, transitionOptions, renderSlots(props.tag))
-            }
-        }
-    }
+		const renderSlots = (tag) => {
+			let slots = [];
+			for (let slot in context.slots) {
+				if (!props.group && slots.length > 0) return slots;
+				let shouldRenderSlot = computed(() =>
+					shouldRender(slot.split(":")[0])
+				);
+				if (shouldRenderSlot.value) {
+					slots.push(
+						h(
+							tag ? tag : context.slots[slot],
+							{ key: slot },
+							tag ? context.slots[slot]() : undefined
+						)
+					);
+				}
+			}
+			return slots.length > 0 ? slots : undefined;
+		};
+		console.log(context.slots.default);
+		// If the user includes a bare element inside the mq-layout component
+		// Uses the props.tag property to render an element
+		if (context.slots.default) {
+			return () =>
+				shouldRenderChildren.value
+					? h(props.tag, {}, context.slots.default())
+					: undefined;
+		} else {
+			return () => {
+				const transitionOptions = {
+					...defaultOptions,
+					...context.attrs,
+				};
+				const el = props.group ? TransitionGroup : Transition;
+				return h(el, transitionOptions, renderSlots(props.tag));
+			};
+		}
+	},
 };

src/helpers.js

@@ -1,2 +0,2 @@
-import json2mq from 'json2mq';
+import json2mq from "json2mq";
 import { mqAvailableBreakpoints } from "./store";
@@ -6,67 +6,100 @@ export const listeners = [];
 export function convertBreakpointsToMediaQueries(breakpoints) {
-  const keys = Object.keys(breakpoints)
-  const values = keys.map(key => breakpoints[key])
-  const breakpointValues = [0, ...values.slice(0, -1)]
-  const mediaQueries = breakpointValues.reduce((accumulator, current, index) => {
-    const options = Object.assign(
-      {
-        minWidth: current,
-      },
-      index < keys.length - 1 ? { maxWidth: breakpointValues[index+1] - 1 } : {}
-    )
-    const mediaQuery = json2mq(options)
-    return Object.assign(
-      accumulator,
-      {
-        [keys[index]]: mediaQuery,
-      }
-    )
-  }, {});
-  return mediaQueries
+	const keys = Object.keys(breakpoints);
+	const values = keys.map((key) => breakpoints[key]);
+	const breakpointValues = [0, ...values.slice(0, -1)];
+	const mediaQueries = breakpointValues.reduce(
+		(accumulator, current, index) => {
+			const options = Object.assign(
+				{
+					minWidth: current,
+				},
+				index < keys.length - 1
+					? { maxWidth: breakpointValues[index + 1] - 1 }
+					: {}
+			);
+			const mediaQuery = json2mq(options);
+			return Object.assign(accumulator, {
+				[keys[index]]: mediaQuery,
+			});
+		},
+		{}
+	);
+	return mediaQueries;
 }
 
-export function selectBreakpoints({mqProp, isMqPlus = {value: false}, isMqMinus = {value: false}, isMqRange = {value: false}}) {
-  const ents = Object.entries(mqAvailableBreakpoints.value);
-  if (ents.length === 0) return [];
-  if (isMqPlus.value) mqProp = mqProp.replace(/\+$/,"");
-  else if (isMqMinus.value) mqProp = mqProp.replace(/-$/,"");
-  else if (isMqRange.value) {
-    mqProp = mqProp.split("-");
-    if (!mqProp || mqProp.length !== 2) throw new Error("Invalid MQ range provided");
-  }
-  let eligible;
-  if (isMqRange.value) {
-    let from = ents.find(([key,value]) => key == mqProp[0].trim());
-    if (!from || from.length === 0) throw new Error('Range from breakpoint (' + mqProp[0].trim() + ') not found');
-    let to = ents.find(([key,value]) => key == mqProp[1].trim());
-    if (!to || to.length === 0) throw new Error('Range to breakpoint (' + mqProp[1].trim() + ') not found');
-    if (from[1] > to[1]) [from,to] = [to,from];
-    eligible = ents.filter(([key,value]) => value >= from[1] && value <= to[1]);
-  }
-  else {
-    const base = ents.find(([key,value]) => key == mqProp);
-    if (isMqPlus.value) eligible = ents.filter(([key,value]) => value >= base[1]);
-    else if (isMqMinus.value) eligible = ents.filter(([key,value]) => value <= base[1]);
-  }
-  eligible.sort((a,b) => a[1] - b[1]);
-  return eligible.map(el => el[0]);
+export function selectBreakpoints({
+	mqProp,
+	isMqPlus = { value: false },
+	isMqMinus = { value: false },
+	isMqRange = { value: false },
+}) {
+	const ents = Object.entries(mqAvailableBreakpoints.value);
+	if (ents.length === 0) return [];
+	if (isMqPlus.value) mqProp = mqProp.replace(/\+$/, "");
+	else if (isMqMinus.value) mqProp = mqProp.replace(/-$/, "");
+	else if (isMqRange.value) {
+		mqProp = mqProp.split("-");
+		if (!mqProp || mqProp.length !== 2)
+			throw new Error("Invalid MQ range provided");
+	}
+	let eligible;
+	if (isMqRange.value) {
+		let from = ents.find(([key, value]) => key == mqProp[0].trim());
+		if (!from || from.length === 0)
+			throw new Error(
+				"Range from breakpoint (" + mqProp[0].trim() + ") not found"
+			);
+		let to = ents.find(([key, value]) => key == mqProp[1].trim());
+		if (!to || to.length === 0)
+			throw new Error(
+				"Range to breakpoint (" + mqProp[1].trim() + ") not found"
+			);
+		if (from[1] > to[1]) [from, to] = [to, from];
+		eligible = ents.filter(
+			([key, value]) => value >= from[1] && value <= to[1]
+		);
+	} else {
+		const base = ents.find(([key, value]) => key == mqProp);
+		if (isMqPlus.value)
+			eligible = ents.filter(([key, value]) => value >= base[1]);
+		else if (isMqMinus.value)
+			eligible = ents.filter(([key, value]) => value <= base[1]);
+	}
+	eligible.sort((a, b) => a[1] - b[1]);
+	return eligible.map((el) => el[0]);
 }
 
 export function subscribeToMediaQuery(mediaQuery, enter) {
-  const mql = window.matchMedia(mediaQuery)
-  const cb = ({ matches }) => {
-    if (matches) enter()
-  }
-  listeners.push({mql, cb});
-  mql.addEventListener('change', cb) //subscribing
-  cb(mql) //initial trigger
+	const mql = window.matchMedia(mediaQuery);
+	const cb = ({ matches }) => {
+		if (matches) enter();
+	};
+	listeners.push({ mql, cb });
+	if (mql.addEventListener && typeof mql.addEventListener === "function") {
+		mql.addEventListener("change", cb); //subscribing
+	} else {
+		mql.addListener("change", cb);
+	}
+	cb(mql); //initial trigger
 }
 
 export function sanitiseBreakpoints(breakpoints) {
-  for (let bp in breakpoints) {
-    if (!['string','number'].includes(typeof bp) || !bp ) throw new Error("Invalid or missing breakpoint key");
-    if (typeof breakpoints[bp] === 'string') breakpoints[bp] = parseFloat(breakpoints[bp].replace(/[^0-9]/g,""));
-    if (typeof breakpoints[bp] !== 'number' || breakpoints[bp] < 0) throw new Error("Invalid breakpoint value for " + bp + ". Please use a valid number.");
-    if (!breakpoints[bp]) throw new Error("No valid breakpoint value for " + bp + " was found");
-  }
-}
+	for (let bp in breakpoints) {
+		if (!["string", "number"].includes(typeof bp) || !bp)
+			throw new Error("Invalid or missing breakpoint key");
+		if (typeof breakpoints[bp] === "string")
+			breakpoints[bp] = parseFloat(
+				breakpoints[bp].replace(/[^0-9]/g, "")
+			);
+		if (typeof breakpoints[bp] !== "number" || breakpoints[bp] < 0)
+			throw new Error(
+				"Invalid breakpoint value for " +
+					bp +
+					". Please use a valid number."
+			);
+		if (!breakpoints[bp])
+			throw new Error(
+				"No valid breakpoint value for " + bp + " was found"
+			);
+	}
+}

src/index.js

@@ -28,3 +28,3 @@ import MqLayout from './component';
   app.config.globalProperties.$mqAvailableBreakpoints = breakpoints;
-  app.component('MqLayout', MqLayout)
+  app.component('MqLayout', MqLayout);
 }
@@ -31,0 +31,0 @@

tests/unit/index.spec.js

@@ -35,2 +35,3 @@ import plugin from "../../src/index.js";
 	test("should default to defaultBreakpoint in options", () => {
+		matchMediaMock.setConfig({});
 		const plugins = [
@@ -69,9 +70,18 @@ [
 		);
-		expect(window.matchMedia).toBeCalledWith("(min-width: 1250px)");
+		expect(window.matchMedia).toBeCalledWith("(min-width: 1400px)");
 		expect(window.matchMedia).toBeCalledWith(
-			"(min-width: 450px) and (max-width: 1249px)"
+			"(min-width: 1200px) and (max-width: 1399px)"
 		);
 		expect(window.matchMedia).toBeCalledWith(
-			"(min-width: 0px) and (max-width: 449px)"
+			"(min-width: 992px) and (max-width: 1199px)"
 		);
+		expect(window.matchMedia).toBeCalledWith(
+			"(min-width: 768px) and (max-width: 991px)"
+		);
+		expect(window.matchMedia).toBeCalledWith(
+			"(min-width: 576px) and (max-width: 767px)"
+		);
+		expect(window.matchMedia).toBeCalledWith(
+			"(min-width: 0px) and (max-width: 575px)"
+		);
 	});
@@ -90,3 +100,3 @@
 		Array.from(results)[1].callListeners();
-		expect(wrapper.vm.$mq).toBe("md");
+		expect(wrapper.vm.$mq).toBe("sm");
 	});
@@ -93,0 +103,0 @@

vite.config.js

 module.exports = {
-    root: 'demo',
-    base: '/vue3-mq',
-    optimizeDeps: {
-        include: ['json2mq','primevue/toolbar']
-    },
-    assetsDir: ''
-}
+	root: "demo",
+	base: "/",
+	optimizeDeps: {
+		include: ["json2mq", "primevue/toolbar", "prismjs"],
+	},
+	assetsDir: "",
+};

No alert changes

Improved metrics

Lines of code

1839

increased by1.27%

Worsened metrics

Total package byte prevSize

88970

decreased by-1.49%

Dev dependency count

22

increased by4.76%

Dependency changes

• + Addedjson2mq@^0.2.0

• + Addedjson2mq@0.2.0(transitive)

• + Addedstring-convert@0.2.1(transitive)

• - Removedvue-ripple-directive@^2.0.1

• - Removed@babel/helper-string-parser@7.25.9(transitive)

• - Removed@babel/helper-validator-identifier@7.25.9(transitive)

• - Removed@babel/parser@7.26.5(transitive)

• - Removed@babel/types@7.26.5(transitive)

• - Removed@vue/compiler-sfc@2.7.16(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removednanoid@3.3.8(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedpostcss@8.5.1(transitive)

• - Removedprettier@2.8.8(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedvue@2.7.16(transitive)

• - Removedvue-ripple-directive@2.0.1(transitive)