vue3-mq - npm Package Compare versions

Comparing version 2.3.1 to 2.3.2

dist/index.es.js

 import json2mq from 'json2mq';
 import { ref, readonly, computed, h, TransitionGroup, Transition } from 'vue';
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _typeof(obj) {
@@ -35,36 +73,2 @@ "@babel/helpers - typeof";
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 function _slicedToArray(arr, i) {
@@ -87,14 +91,17 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
 
+  var _s, _e;
+
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
@@ -151,14 +158,15 @@
 };
-var state = {
-  mqAvailableBreakpoints: ref({}),
-  currentBreakpoint: ref("")
-};
+
+var _currentBreakpoint = ref("");
+
+var _mqAvailableBreakpoints = ref({});
+
 var setAvailableBreakpoints = function setAvailableBreakpoints(v) {
-  return state.mqAvailableBreakpoints.value = v;
+  return _mqAvailableBreakpoints.value = v;
 };
-var mqAvailableBreakpoints = readonly(state.mqAvailableBreakpoints);
+var mqAvailableBreakpoints = readonly(_mqAvailableBreakpoints);
 var setCurrentBreakpoint = function setCurrentBreakpoint(v) {
-  return state.currentBreakpoint.value = v;
+  return _currentBreakpoint.value = v;
 };
-var currentBreakpoint = readonly(state.currentBreakpoint);
+var currentBreakpoint = readonly(_currentBreakpoint);
 function updateBreakpoints(breakpoints) {
@@ -170,3 +178,3 @@ // Remove any existing MQ listeners
         cb = _listeners$i.cb;
-    mql.removeEventListener('change', cb);
+    mql.removeEventListener("change", cb);
     listeners.splice(i, 1);
@@ -262,4 +270,4 @@ }
       var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          value = _ref3[1];
+          key = _ref3[0];
+          _ref3[1];
 
@@ -271,4 +279,4 @@ return key == mqProp[0].trim();
       var _ref5 = _slicedToArray(_ref4, 2),
-          key = _ref5[0],
-          value = _ref5[1];
+          key = _ref5[0];
+          _ref5[1];
 
@@ -286,5 +294,5 @@ return key == mqProp[1].trim();
     eligible = ents.filter(function (_ref7) {
-      var _ref8 = _slicedToArray(_ref7, 2),
-          key = _ref8[0],
-          value = _ref8[1];
+      var _ref8 = _slicedToArray(_ref7, 2);
+          _ref8[0];
+          var value = _ref8[1];
 
@@ -296,4 +304,4 @@ return value >= from[1] && value <= to[1];
       var _ref10 = _slicedToArray(_ref9, 2),
-          key = _ref10[0],
-          value = _ref10[1];
+          key = _ref10[0];
+          _ref10[1];
 
@@ -303,11 +311,11 @@ return key == mqProp;
     if (isMqPlus.value) eligible = ents.filter(function (_ref11) {
-      var _ref12 = _slicedToArray(_ref11, 2),
-          key = _ref12[0],
-          value = _ref12[1];
+      var _ref12 = _slicedToArray(_ref11, 2);
+          _ref12[0];
+          var value = _ref12[1];
 
       return value >= base[1];
     });else if (isMqMinus.value) eligible = ents.filter(function (_ref13) {
-      var _ref14 = _slicedToArray(_ref13, 2),
-          key = _ref14[0],
-          value = _ref14[1];
+      var _ref14 = _slicedToArray(_ref13, 2);
+          _ref14[0];
+          var value = _ref14[1];
 
@@ -341,2 +349,3 @@ return value <= base[1];
   } else {
+    // Deprecated property included for backwards compatibility
     mql.addListener("change", cb);
@@ -372,3 +381,2 @@ }
   setup: function setup(props, context) {
-    console.log("Running setup()");
     var defaultOptions = {
@@ -429,7 +437,6 @@ name: "fade",
       return slots.length > 0 ? slots : undefined;
-    };
-
-    console.log(context.slots["default"]); // If the user includes a bare element inside the mq-layout component
+    }; // 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"]) {
@@ -436,0 +443,0 @@ return function () {

dist/index.js

@@ -10,2 +10,40 @@ 'use strict';
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _typeof(obj) {
@@ -42,36 +80,2 @@ "@babel/helpers - typeof";
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 function _slicedToArray(arr, i) {
@@ -94,14 +98,17 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
 
+  var _s, _e;
+
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
@@ -158,14 +165,15 @@
 };
-var state = {
-  mqAvailableBreakpoints: vue.ref({}),
-  currentBreakpoint: vue.ref("")
-};
+
+var _currentBreakpoint = vue.ref("");
+
+var _mqAvailableBreakpoints = vue.ref({});
+
 var setAvailableBreakpoints = function setAvailableBreakpoints(v) {
-  return state.mqAvailableBreakpoints.value = v;
+  return _mqAvailableBreakpoints.value = v;
 };
-var mqAvailableBreakpoints = vue.readonly(state.mqAvailableBreakpoints);
+var mqAvailableBreakpoints = vue.readonly(_mqAvailableBreakpoints);
 var setCurrentBreakpoint = function setCurrentBreakpoint(v) {
-  return state.currentBreakpoint.value = v;
+  return _currentBreakpoint.value = v;
 };
-var currentBreakpoint = vue.readonly(state.currentBreakpoint);
+var currentBreakpoint = vue.readonly(_currentBreakpoint);
 function updateBreakpoints(breakpoints) {
@@ -177,3 +185,3 @@ // Remove any existing MQ listeners
         cb = _listeners$i.cb;
-    mql.removeEventListener('change', cb);
+    mql.removeEventListener("change", cb);
     listeners.splice(i, 1);
@@ -269,4 +277,4 @@ }
       var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          value = _ref3[1];
+          key = _ref3[0];
+          _ref3[1];
 
@@ -278,4 +286,4 @@ return key == mqProp[0].trim();
       var _ref5 = _slicedToArray(_ref4, 2),
-          key = _ref5[0],
-          value = _ref5[1];
+          key = _ref5[0];
+          _ref5[1];
 
@@ -293,5 +301,5 @@ return key == mqProp[1].trim();
     eligible = ents.filter(function (_ref7) {
-      var _ref8 = _slicedToArray(_ref7, 2),
-          key = _ref8[0],
-          value = _ref8[1];
+      var _ref8 = _slicedToArray(_ref7, 2);
+          _ref8[0];
+          var value = _ref8[1];
 
@@ -303,4 +311,4 @@ return value >= from[1] && value <= to[1];
       var _ref10 = _slicedToArray(_ref9, 2),
-          key = _ref10[0],
-          value = _ref10[1];
+          key = _ref10[0];
+          _ref10[1];
 
@@ -310,11 +318,11 @@ return key == mqProp;
     if (isMqPlus.value) eligible = ents.filter(function (_ref11) {
-      var _ref12 = _slicedToArray(_ref11, 2),
-          key = _ref12[0],
-          value = _ref12[1];
+      var _ref12 = _slicedToArray(_ref11, 2);
+          _ref12[0];
+          var value = _ref12[1];
 
       return value >= base[1];
     });else if (isMqMinus.value) eligible = ents.filter(function (_ref13) {
-      var _ref14 = _slicedToArray(_ref13, 2),
-          key = _ref14[0],
-          value = _ref14[1];
+      var _ref14 = _slicedToArray(_ref13, 2);
+          _ref14[0];
+          var value = _ref14[1];
 
@@ -348,2 +356,3 @@ return value <= base[1];
   } else {
+    // Deprecated property included for backwards compatibility
     mql.addListener("change", cb);
@@ -379,3 +388,2 @@ }
   setup: function setup(props, context) {
-    console.log("Running setup()");
     var defaultOptions = {
@@ -436,7 +444,6 @@ name: "fade",
       return slots.length > 0 ? slots : undefined;
-    };
-
-    console.log(context.slots["default"]); // If the user includes a bare element inside the mq-layout component
+    }; // 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"]) {
@@ -443,0 +450,0 @@ return function () {

dist/index.umd.js

@@ -11,2 +11,40 @@ (function (global, factory) {
 
+  function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+
+    if (Object.getOwnPropertySymbols) {
+      var symbols = Object.getOwnPropertySymbols(object);
+
+      if (enumerableOnly) {
+        symbols = symbols.filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+      }
+
+      keys.push.apply(keys, symbols);
+    }
+
+    return keys;
+  }
+
+  function _objectSpread2(target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i] != null ? arguments[i] : {};
+
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
+    }
+
+    return target;
+  }
+
   function _typeof(obj) {
@@ -43,36 +81,2 @@ "@babel/helpers - typeof";
 
-  function ownKeys(object, enumerableOnly) {
-    var keys = Object.keys(object);
-
-    if (Object.getOwnPropertySymbols) {
-      var symbols = Object.getOwnPropertySymbols(object);
-      if (enumerableOnly) symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      });
-      keys.push.apply(keys, symbols);
-    }
-
-    return keys;
-  }
-
-  function _objectSpread2(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys(Object(source), true).forEach(function (key) {
-          _defineProperty(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys(Object(source)).forEach(function (key) {
-          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-      }
-    }
-
-    return target;
-  }
-
   function _slicedToArray(arr, i) {
@@ -95,14 +99,17 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
   }
 
   function _iterableToArrayLimit(arr, i) {
-    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+    var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+
+    if (_i == null) return;
     var _arr = [];
     var _n = true;
     var _d = false;
-    var _e = undefined;
 
+    var _s, _e;
+
     try {
-      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+      for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
         _arr.push(_s.value);
@@ -159,14 +166,15 @@
   };
-  var state = {
-    mqAvailableBreakpoints: vue.ref({}),
-    currentBreakpoint: vue.ref("")
-  };
+
+  var _currentBreakpoint = vue.ref("");
+
+  var _mqAvailableBreakpoints = vue.ref({});
+
   var setAvailableBreakpoints = function setAvailableBreakpoints(v) {
-    return state.mqAvailableBreakpoints.value = v;
+    return _mqAvailableBreakpoints.value = v;
   };
-  var mqAvailableBreakpoints = vue.readonly(state.mqAvailableBreakpoints);
+  var mqAvailableBreakpoints = vue.readonly(_mqAvailableBreakpoints);
   var setCurrentBreakpoint = function setCurrentBreakpoint(v) {
-    return state.currentBreakpoint.value = v;
+    return _currentBreakpoint.value = v;
   };
-  var currentBreakpoint = vue.readonly(state.currentBreakpoint);
+  var currentBreakpoint = vue.readonly(_currentBreakpoint);
   function updateBreakpoints(breakpoints) {
@@ -178,3 +186,3 @@ // Remove any existing MQ listeners
           cb = _listeners$i.cb;
-      mql.removeEventListener('change', cb);
+      mql.removeEventListener("change", cb);
       listeners.splice(i, 1);
@@ -270,4 +278,4 @@ }
         var _ref3 = _slicedToArray(_ref2, 2),
-            key = _ref3[0],
-            value = _ref3[1];
+            key = _ref3[0];
+            _ref3[1];
 
@@ -279,4 +287,4 @@ return key == mqProp[0].trim();
         var _ref5 = _slicedToArray(_ref4, 2),
-            key = _ref5[0],
-            value = _ref5[1];
+            key = _ref5[0];
+            _ref5[1];
 
@@ -294,5 +302,5 @@ return key == mqProp[1].trim();
       eligible = ents.filter(function (_ref7) {
-        var _ref8 = _slicedToArray(_ref7, 2),
-            key = _ref8[0],
-            value = _ref8[1];
+        var _ref8 = _slicedToArray(_ref7, 2);
+            _ref8[0];
+            var value = _ref8[1];
 
@@ -304,4 +312,4 @@ return value >= from[1] && value <= to[1];
         var _ref10 = _slicedToArray(_ref9, 2),
-            key = _ref10[0],
-            value = _ref10[1];
+            key = _ref10[0];
+            _ref10[1];
 
@@ -311,11 +319,11 @@ return key == mqProp;
       if (isMqPlus.value) eligible = ents.filter(function (_ref11) {
-        var _ref12 = _slicedToArray(_ref11, 2),
-            key = _ref12[0],
-            value = _ref12[1];
+        var _ref12 = _slicedToArray(_ref11, 2);
+            _ref12[0];
+            var value = _ref12[1];
 
         return value >= base[1];
       });else if (isMqMinus.value) eligible = ents.filter(function (_ref13) {
-        var _ref14 = _slicedToArray(_ref13, 2),
-            key = _ref14[0],
-            value = _ref14[1];
+        var _ref14 = _slicedToArray(_ref13, 2);
+            _ref14[0];
+            var value = _ref14[1];
 
@@ -349,2 +357,3 @@ return value <= base[1];
     } else {
+      // Deprecated property included for backwards compatibility
       mql.addListener("change", cb);
@@ -380,3 +389,2 @@ }
     setup: function setup(props, context) {
-      console.log("Running setup()");
       var defaultOptions = {
@@ -437,7 +445,6 @@ name: "fade",
         return slots.length > 0 ? slots : undefined;
-      };
-
-      console.log(context.slots["default"]); // If the user includes a bare element inside the mq-layout component
+      }; // 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"]) {
@@ -444,0 +451,0 @@ return function () {

dist/index.umd.min.js

@@ -1,2 +0,2 @@
-!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)}}}));
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r(require("json2mq"),require("vue")):"function"==typeof define&&define.amd?define(["json2mq","vue"],r):(e="undefined"!=typeof globalThis?globalThis:e||self)["vue3-mq"]=r(e.json2mq,e.vue)}(this,(function(e,r){"use strict";function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e);function o(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 u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?o(Object(t),!0).forEach((function(r){a(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function i(e){return(i="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 a(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function l(e,r){return function(e){if(Array.isArray(e))return e}(e)||function(e,r){var t=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==t)return;var n,o,u=[],i=!0,a=!1;try{for(t=t.call(e);!(i=(n=t.next()).done)&&(u.push(n.value),!r||u.length!==r);i=!0);}catch(e){a=!0,o=e}finally{try{i||null==t.return||t.return()}finally{if(a)throw o}}return u}(e,r)||c(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 f(e){return function(e){if(Array.isArray(e))return s(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])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,r){if(e){if("string"==typeof e)return s(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)?s(e,r):void 0}}function s(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 v={xs:576,sm:768,md:992,lg:1200,xl:1400,xxl:1/0},d=r.ref(""),p=r.ref({}),m=r.readonly(p),y=function(e){return d.value=e},b=r.readonly(d);function g(e){for(var r=h.length-1;r>=0;r--){var t=h[r],o=t.mql,u=t.cb;o.removeEventListener("change",u),h.splice(r,1)}var l;!function(e){for(var r in e){if(!["string","number"].includes(i(r))||!r)throw new Error("Invalid or missing breakpoint key");if("string"==typeof e[r]&&(e[r]=parseFloat(e[r].replace(/[^0-9]/g,""))),"number"!=typeof e[r]||e[r]<0)throw new Error("Invalid breakpoint value for "+r+". Please use a valid number.");if(!e[r])throw new Error("No valid breakpoint value for "+r+" was found")}}(e),l=e,p.value=l;var c=function(e){var r=Object.keys(e),t=r.map((function(r){return e[r]})),o=[0].concat(f(t.slice(0,-1)));return o.reduce((function(e,t,u){var i=Object.assign({minWidth:t},u<r.length-1?{maxWidth:o[u+1]-1}:{}),l=n.default(i);return Object.assign(e,a({},r[u],l))}),{})}(e),s=function(e){!function(e,r){var t=window.matchMedia(e),n=function(e){e.matches&&r()};h.push({mql:t,cb:n}),t.addEventListener&&"function"==typeof t.addEventListener?t.addEventListener("change",n):t.addListener("change",n);n(t)}(c[e],(function(){y(e)}))};for(var v in c)s(v)}var h=[];function q(e){var r,t=e.mqProp,n=e.isMqPlus,o=void 0===n?{value:!1}:n,u=e.isMqMinus,i=void 0===u?{value:!1}:u,a=e.isMqRange,f=void 0===a?{value:!1}:a,c=Object.entries(m.value);if(0===c.length)return[];if(o.value)t=t.replace(/\+$/,"");else if(i.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=l(e,2),n=r[0];return r[1],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=l(e,2),n=r[0];return r[1],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 d=[v,s];s=d[0],v=d[1]}r=c.filter((function(e){var r=l(e,2);r[0];var t=r[1];return t>=s[1]&&t<=v[1]}))}else{var p=c.find((function(e){var r=l(e,2),n=r[0];return r[1],n==t}));o.value?r=c.filter((function(e){var r=l(e,2);return r[0],r[1]>=p[1]})):i.value&&(r=c.filter((function(e){var r=l(e,2);return r[0],r[1]<=p[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(e,t){var n={name:"fade",mode:"out-in"},o=r.computed((function(){return Array.isArray(e.mq)})),a=r.computed((function(){return!o.value&&!0===/\+$/.test(e.mq)})),l=r.computed((function(){return!o.value&&!0===/-$/.test(e.mq)})),f=r.computed((function(){return!o.value&&!0===/^\w*-\w*/.test(e.mq)})),c=r.computed((function(){return o.value?e.mq:a.value||l.value||f.value?q({mqProp:e.mq,isMqPlus:a,isMqMinus:l,isMqRange:f}):[e.mq]})),s=r.computed((function(){return c.value.includes(b.value)})),v=function(n){var o=[],u=function(u){if(!e.group&&o.length>0)return{v:o};r.computed((function(){return function(e){var t=Array.isArray(e),n=!t.value&&!0===/\+$/.test(e),o=!t.value&&!0===/-$/.test(e),u=!t.value&&!0===/^\w*-\w*/.test(e);return r.computed((function(){return t?e:n||o||u?q({mqProp:e,isMqPlus:{value:n},isMqMinus:{value:o},isMqRange:{value:u}}):[e]})).value.includes(b.value)}(u.split(":")[0])})).value&&o.push(r.h(n||t.slots[u],{key:u},n?t.slots[u]():void 0))};for(var a in t.slots){var l=u(a);if("object"===i(l))return l.v}return o.length>0?o:void 0};return t.slots.default?function(){return s.value?r.h(e.tag,{},t.slots.default()):void 0}:function(){var o=u(u({},n),t.attrs),i=e.group?r.TransitionGroup:r.Transition;return r.h(i,o,v(e.tag))}}};return{install:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=t.breakpoints,o=void 0===n?v:n,u=t.defaultBreakpoint,i=void 0===u?"sm":u,a=!1;y(i),e.provide("updateBreakpoints",g),e.provide("mq",r.readonly(b)),e.mixin({computed:{$mq:function(){return b.value}},mounted:function(){a||(g(o),a=!0)}}),e.config.globalProperties.$mqAvailableBreakpoints=o,e.component("MqLayout",w)}}}));
 //# sourceMappingURL=index.umd.min.js.map

package.json

 {
   "name": "vue3-mq",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Handle media queries easily & build responsive design with Vue 3",
@@ -24,3 +24,5 @@ "main": "dist/index.js",
   "devDependencies": {
+    "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
+    "@vitejs/plugin-vue": "^1.2.3",
     "@vue/cli-plugin-unit-jest": "^4.5.9",
@@ -34,3 +36,3 @@ "@vue/cli-service": "^4.5.9",
     "eslint": "^7.16.0",
-    "eslint-config-prettier": "^6.15.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-vue": "^7.3.0",
@@ -45,3 +47,3 @@ "gh-pages": "^3.1.0",
     "sass": "^1.30.0",
-    "vite": "^1.0.0-rc.13",
+    "vite": "^2.3.7",
     "vue": "^3.0.4",
@@ -48,0 +50,0 @@ "vue-jest": "^5.0.0-alpha.7"

README.md

 # Vue 3 MQ (Media Query)
 Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue 3.
 
-_Use with `vue:  ^3.x.x`
-_
+Use with `vue@^3.x.x`
 
+Not compatible with Vue 2. Use [vue-mq](https://www.npmjs.com/package/vue-mq) if you require Vue 2 support.
 
+
 ## Table of Contents
@@ -16,11 +17,10 @@
 
-## Migration Guide
+## Migration Guide from vue-mq
 
-#### Filter
-Since Vue 3 has dropped support for filters, the previous functionality has been removed 
-#### SSR
-Presently, support for SSR has been removed
+#### **Filter**
+Since Vue 3 has dropped support for filters, the previous functionality has been removed.
+#### **SSR**
+Presently, support for SSR has been removed until it can be tested properly.
 
 ## Demo
-
 See https://vue3-mq.info for a demonstration and usage guide for Vue3-MQ.
@@ -30,3 +30,3 @@
 
-#### Using NPM
+#### **Using NPM**
 
@@ -57,6 +57,9 @@ ```sh
 app.use(VueMq, {
-  breakpoints: { // default breakpoints - customize this
-    sm: 450,
-    md: 1250,
-    lg: Infinity,
+  breakpoints: { // default breakpoints - customise this
+    xs: 576,
+    sm: 768,
+    md: 992,
+    lg: 1200,
+    xl: 1400,
+    xxl: Infinity
   }
@@ -147,3 +150,11 @@ })
 
-#### MQ prop: plus modifier
+#### **MQ prop: no modifier**
+Renders the component only on screens matching your mq value
+```html
+<mq-layout mq="lg">
+  <span> Display on lg </span>
+</mq-layout>
+```
+
+#### **MQ prop: plus modifier**
 Appending a `+` to your mq property will make the component render on that breakpoint and any *above*
@@ -154,3 +165,3 @@ ```html
 
-#### MQ prop: minus modifier
+#### **MQ prop: minus modifier**
 Appending a `-` to your mq property will make the component render on that breakpoint and any *below*
@@ -161,3 +172,3 @@ ```html
 
-#### MQ prop: range modifier
+#### **MQ prop: range modifier**
 Placing a `-` between two breakpoints in your mq property will make the component render on any breakpoints in that range
@@ -168,8 +179,19 @@ ```html
 
+#### **MQ prop: array of breakpoints**
+Will render the component if the current screen size matches any of the breakpoints in the array. Remember that you'll need to precede the property with a ```:``` in your template.
+```html
+<mq-layout :mq="['sm', 'lg']" tag="span">
+  Display on sm and lg
+</mq-layout>
+```
+
 ## Browser Support
-This plugin relies on matchMedia API to detect screen size change. So for older browsers and IE, you should polyfill this out:
+Since Vue3 will never support Internet Explorer, this browser is not supported.
+
+If your browser doesn't support the MatchMedia API, you will need to use a polyfill to add support:
+
 Paul Irish: [matchMedia polyfill](https://github.com/paulirish/matchMedia.js)
 
-## Support
+## Bugs / Support
 
 Please [open an issue](https://github.com/craigrileyuk/vue3-mq/issues/new) for support.

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

191

increased by13.02%

Worsened metrics

Total package byte prevSize

72654

decreased by-18.34%

Dev dependency count

24

increased by9.09%

Number of package files

8

decreased by-61.9%

Lines of code

1257

decreased by-31.65%

No dependency changes