Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-screen

Package Overview
Dependencies
Maintainers
1
Versions
40
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-screen - npm Package Compare versions

Comparing version 1.5.0 to 1.5.1

124

dist/vue-screen.cjs.js

@@ -39,2 +39,51 @@ 'use strict';

function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
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(source, true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(source).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
var inBrowser = typeof window !== 'undefined';

@@ -114,3 +163,4 @@ var debounce = function debounce(callback, wait) {

lg: 1024,
xl: 1280
xl: 1280,
'2xl': 1536
};

@@ -134,3 +184,3 @@

var DEBOUNCE_MS = 100;
var RESERVED_KEYS = ['width', 'height', 'touch', 'portrait', 'landscape'];
var RESERVED_KEYS = ['width', 'height', 'touch', 'portrait', 'landscape', 'config'];
var CUSTOM_FRAMEWORK_NAME = '__CUSTOM__';

@@ -160,4 +210,4 @@ var DEFAULT_ORDERS = {

this.framework = '';
this.customBreakpointFn = false;
this.createScreen(Plugin.parseBreakpoints(breakpoints));
this.config = Plugin.parseBreakpoints(breakpoints);
this.createScreen();
this.init();

@@ -231,7 +281,3 @@ }

if (this.customBreakpointFn) {
return;
}
this.screen.breakpoint = this.screen.breakpointsOrder.reduce(function (activeBreakpoint, currentBreakpoint) {
this.screen.breakpoint = this.config.breakpointsOrder.reduce(function (activeBreakpoint, currentBreakpoint) {
if (_this2.screen[currentBreakpoint]) {

@@ -242,3 +288,3 @@ return currentBreakpoint;

return activeBreakpoint;
}, this.screen.breakpointsOrder[0]);
}, this.config.breakpointsOrder[0]);
}

@@ -258,4 +304,2 @@ /**

* Create the reactive object
*
* @param {object} breakpoints
*/

@@ -265,7 +309,6 @@

key: "createScreen",
value: function createScreen(breakpoints) {
value: function createScreen() {
var _this3 = this;
var breakpointKeys = Object.keys(breakpoints);
var breakpointsOrder = DEFAULT_ORDERS[this.framework] || breakpointKeys;
var breakpointKeys = Object.keys(this.config);
this.screen = Vue.observable({

@@ -277,10 +320,6 @@ width: DEFAULT_WIDTH,

landscape: false,
breakpointsOrder: breakpointsOrder,
breakpoint: breakpointsOrder[0]
breakpoint: this.config.breakpointsOrder[0],
breakpointsOrder: this.config.breakpointsOrder,
config: this.config
});
if (breakpointKeys.includes('breakpoint')) {
this.customBreakpointFn = true;
}
this.findCurrentBreakpoint();

@@ -296,3 +335,3 @@ breakpointKeys.forEach(function (name) {

if (inBrowser) {
this.initMediaQueries(breakpoints);
this.initMediaQueries();
}

@@ -302,4 +341,2 @@ }

* Initialize the media queries to test
*
* @param {object} breakpoints
*/

@@ -309,17 +346,20 @@

key: "initMediaQueries",
value: function initMediaQueries(breakpoints) {
value: function initMediaQueries() {
var _this4 = this;
Object.keys(breakpoints).forEach(function (name) {
var width = breakpoints[name];
Object.keys(this.config).forEach(function (name) {
var w = null;
if (typeof width === 'function') {
_this4.callbacks[name] = width;
} else if (typeof width === 'number') {
w = "".concat(width, "px");
} else if (typeof width === 'string') {
w = width;
} else {
_this4.screen[name] = width;
if (name !== 'breakpointsOrder') {
var width = _this4.config[name];
if (typeof width === 'function') {
_this4.callbacks[name] = width;
} else if (typeof width === 'number') {
w = "".concat(width, "px");
} else if (typeof width === 'string') {
w = width;
} else {
_this4.screen[name] = width;
}
}

@@ -330,3 +370,3 @@

_query.addListener(function (e) {
_query.addEventListener('change', function (e) {
return _this4.mediaStateChanged(name, e.matches);

@@ -339,3 +379,3 @@ });

var query = window.matchMedia('(orientation: portrait)');
query.addListener(function (e) {
query.addEventListener('change', function (e) {
_this4.mediaStateChanged('portrait', e.matches);

@@ -379,3 +419,5 @@

this.framework = CUSTOM_FRAMEWORK_NAME;
return breakpoints;
return _objectSpread2({
breakpointsOrder: Object.keys(breakpoints)
}, breakpoints);
}

@@ -405,3 +447,5 @@

return grids[this.framework];
return _objectSpread2({}, grids[this.framework], {
breakpointsOrder: DEFAULT_ORDERS[this.framework]
});
}

@@ -408,0 +452,0 @@ }, {

@@ -37,2 +37,51 @@ function _typeof(obj) {

function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
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(source, true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(source).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
var inBrowser = typeof window !== 'undefined';

@@ -112,3 +161,4 @@ var debounce = function debounce(callback, wait) {

lg: 1024,
xl: 1280
xl: 1280,
'2xl': 1536
};

@@ -132,3 +182,3 @@

var DEBOUNCE_MS = 100;
var RESERVED_KEYS = ['width', 'height', 'touch', 'portrait', 'landscape'];
var RESERVED_KEYS = ['width', 'height', 'touch', 'portrait', 'landscape', 'config'];
var CUSTOM_FRAMEWORK_NAME = '__CUSTOM__';

@@ -158,4 +208,4 @@ var DEFAULT_ORDERS = {

this.framework = '';
this.customBreakpointFn = false;
this.createScreen(Plugin.parseBreakpoints(breakpoints));
this.config = Plugin.parseBreakpoints(breakpoints);
this.createScreen();
this.init();

@@ -229,7 +279,3 @@ }

if (this.customBreakpointFn) {
return;
}
this.screen.breakpoint = this.screen.breakpointsOrder.reduce(function (activeBreakpoint, currentBreakpoint) {
this.screen.breakpoint = this.config.breakpointsOrder.reduce(function (activeBreakpoint, currentBreakpoint) {
if (_this2.screen[currentBreakpoint]) {

@@ -240,3 +286,3 @@ return currentBreakpoint;

return activeBreakpoint;
}, this.screen.breakpointsOrder[0]);
}, this.config.breakpointsOrder[0]);
}

@@ -256,4 +302,2 @@ /**

* Create the reactive object
*
* @param {object} breakpoints
*/

@@ -263,7 +307,6 @@

key: "createScreen",
value: function createScreen(breakpoints) {
value: function createScreen() {
var _this3 = this;
var breakpointKeys = Object.keys(breakpoints);
var breakpointsOrder = DEFAULT_ORDERS[this.framework] || breakpointKeys;
var breakpointKeys = Object.keys(this.config);
this.screen = Vue.observable({

@@ -275,10 +318,6 @@ width: DEFAULT_WIDTH,

landscape: false,
breakpointsOrder: breakpointsOrder,
breakpoint: breakpointsOrder[0]
breakpoint: this.config.breakpointsOrder[0],
breakpointsOrder: this.config.breakpointsOrder,
config: this.config
});
if (breakpointKeys.includes('breakpoint')) {
this.customBreakpointFn = true;
}
this.findCurrentBreakpoint();

@@ -294,3 +333,3 @@ breakpointKeys.forEach(function (name) {

if (inBrowser) {
this.initMediaQueries(breakpoints);
this.initMediaQueries();
}

@@ -300,4 +339,2 @@ }

* Initialize the media queries to test
*
* @param {object} breakpoints
*/

@@ -307,17 +344,20 @@

key: "initMediaQueries",
value: function initMediaQueries(breakpoints) {
value: function initMediaQueries() {
var _this4 = this;
Object.keys(breakpoints).forEach(function (name) {
var width = breakpoints[name];
Object.keys(this.config).forEach(function (name) {
var w = null;
if (typeof width === 'function') {
_this4.callbacks[name] = width;
} else if (typeof width === 'number') {
w = "".concat(width, "px");
} else if (typeof width === 'string') {
w = width;
} else {
_this4.screen[name] = width;
if (name !== 'breakpointsOrder') {
var width = _this4.config[name];
if (typeof width === 'function') {
_this4.callbacks[name] = width;
} else if (typeof width === 'number') {
w = "".concat(width, "px");
} else if (typeof width === 'string') {
w = width;
} else {
_this4.screen[name] = width;
}
}

@@ -328,3 +368,3 @@

_query.addListener(function (e) {
_query.addEventListener('change', function (e) {
return _this4.mediaStateChanged(name, e.matches);

@@ -337,3 +377,3 @@ });

var query = window.matchMedia('(orientation: portrait)');
query.addListener(function (e) {
query.addEventListener('change', function (e) {
_this4.mediaStateChanged('portrait', e.matches);

@@ -377,3 +417,5 @@

this.framework = CUSTOM_FRAMEWORK_NAME;
return breakpoints;
return _objectSpread2({
breakpointsOrder: Object.keys(breakpoints)
}, breakpoints);
}

@@ -403,3 +445,5 @@

return grids[this.framework];
return _objectSpread2({}, grids[this.framework], {
breakpointsOrder: DEFAULT_ORDERS[this.framework]
});
}

@@ -406,0 +450,0 @@ }, {

@@ -1,1 +0,1 @@

var VueScreen=function(){"use strict";function t(e){return(t="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){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function r(e){var t=e.split("."),n=parseInt(t[0],10);return{major:"number"==typeof n?n:1,minor:parseInt(t[1],10)||0,patch:parseInt(t[2],10)||0}}var a,o="undefined"!=typeof window,e={bootstrap:{xs:0,sm:576,md:768,lg:992,xl:1200},bulma:{mobile:0,tablet:769,desktop:1024,widescreen:1216,fullhd:1408},foundation:{small:0,medium:640,large:1024},materialize:{s:0,m:601,l:993,xl:1201},"semantic-ui":{mobile:0,tablet:768,computer:992,large:1201},tailwind:{xs:0,sm:640,md:768,lg:1024,xl:1280}},s="2.6.0",c=["width","height","touch","portrait","landscape"],u={bootstrap:["xs","sm","md","lg","xl"],bulma:["mobile","tablet","desktop","widescreen","fullhd"],foundation:["small","medium","large"],materialize:["s","m","l","xl"],"semantic-ui":["mobile","tablet","computer","large"],tailwind:["xs","sm","md","lg","xl"]},n=function(){function n(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.callbacks={},this.framework="",this.customBreakpointFn=!1,this.createScreen(n.parseBreakpoints(e)),this.init()}return function(e,t,n){t&&i(e.prototype,t),n&&i(e,n)}(n,[{key:"init",value:function(){this.attachResize(),this.setScreenSize(),this.checkTouch()}},{key:"attachResize",value:function(){o&&window.addEventListener("resize",function(n,i){var r;return function(){var e=this,t=arguments;clearTimeout(r),r=setTimeout(function(){r=null,n.apply(e,t)},i)}}(this.setScreenSize.bind(this),100))}},{key:"setScreenSize",value:function(){o&&(this.screen.width=window.innerWidth,this.screen.height=window.innerHeight,this.runCallbacks(),this.findCurrentBreakpoint())}},{key:"runCallbacks",value:function(){var t=this;Object.keys(this.callbacks).forEach(function(e){t.screen[e]=t.callbacks[e].call(null,t.screen)})}},{key:"findCurrentBreakpoint",value:function(){var n=this;this.customBreakpointFn||(this.screen.breakpoint=this.screen.breakpointsOrder.reduce(function(e,t){return n.screen[t]?t:e},this.screen.breakpointsOrder[0]))}},{key:"checkTouch",value:function(){o&&(this.screen.touch="ontouchstart"in window)}},{key:"createScreen",value:function(e){var t=this,n=Object.keys(e),i=u[this.framework]||n;this.screen=a.observable({width:410,height:730,touch:!0,portrait:!0,landscape:!1,breakpointsOrder:i,breakpoint:i[0]}),n.includes("breakpoint")&&(this.customBreakpointFn=!0),this.findCurrentBreakpoint(),n.forEach(function(e){if(0<=c.indexOf(e))throw new Error('Invalid breakpoint name: "'.concat(e,'". This key is reserved.'));a.set(t.screen,e,!1)}),o&&this.initMediaQueries(e)}},{key:"initMediaQueries",value:function(r){var a=this;Object.keys(r).forEach(function(t){var e=r[t],n=null;if("function"==typeof e?a.callbacks[t]=e:"number"==typeof e?n="".concat(e,"px"):"string"==typeof e?n=e:a.screen[t]=e,n){var i=window.matchMedia("(min-width: ".concat(n,")"));i.addListener(function(e){return a.mediaStateChanged(t,e.matches)}),a.mediaStateChanged(t,i.matches)}});var e=window.matchMedia("(orientation: portrait)");e.addListener(function(e){a.mediaStateChanged("portrait",e.matches),a.mediaStateChanged("landscape",!e.matches)}),this.mediaStateChanged("portrait",e.matches),this.mediaStateChanged("landscape",!e.matches)}},{key:"mediaStateChanged",value:function(e,t){a.set(this.screen,e,t)}}],[{key:"parseBreakpoints",value:function(e){return"object"===t(e)?e.extend?(this.framework=e.extend.toString(),delete e.extend,Object.assign({},e,n.getBreakpoints())):(this.framework="__CUSTOM__",e):(this.framework=e.toString(),n.getBreakpoints())}},{key:"getBreakpoints",value:function(){if(this.framework||(this.framework="tailwind"),!e[this.framework])throw new Error('Cannot find grid breakpoints for framework "'.concat(this.framework,'"'));return e[this.framework]}},{key:"install",value:function(e,t){if(!function(e,t){var n=r(e),i=r(t);return n.major>i.major||n.major===i.major&&n.minor>i.minor||n.major===i.major&&n.minor===i.minor&&n.patch>=i.patch}((a=e).version,s))throw Error("VueScreen requires at least Vue ".concat(s));a.prototype.$screen=new n(t).screen}}]),n}();return o&&window.Vue&&window.Vue.use(n),n}();
var VueScreen=function(){"use strict";function t(e){return(t="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 r(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function n(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)}return n}function i(i){for(var e=1;e<arguments.length;e++){var a=null!=arguments[e]?arguments[e]:{};e%2?n(a,!0).forEach(function(e){var t,n,r;t=i,r=a[n=e],n in t?Object.defineProperty(t,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[n]=r}):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(a)):n(a).forEach(function(e){Object.defineProperty(i,e,Object.getOwnPropertyDescriptor(a,e))})}return i}function a(e){var t=e.split("."),n=parseInt(t[0],10);return{major:"number"==typeof n?n:1,minor:parseInt(t[1],10)||0,patch:parseInt(t[2],10)||0}}var o,c="undefined"!=typeof window,e={bootstrap:{xs:0,sm:576,md:768,lg:992,xl:1200},bulma:{mobile:0,tablet:769,desktop:1024,widescreen:1216,fullhd:1408},foundation:{small:0,medium:640,large:1024},materialize:{s:0,m:601,l:993,xl:1201},"semantic-ui":{mobile:0,tablet:768,computer:992,large:1201},tailwind:{xs:0,sm:640,md:768,lg:1024,xl:1280,"2xl":1536}},s="2.6.0",u=["width","height","touch","portrait","landscape","config"],l={bootstrap:["xs","sm","md","lg","xl"],bulma:["mobile","tablet","desktop","widescreen","fullhd"],foundation:["small","medium","large"],materialize:["s","m","l","xl"],"semantic-ui":["mobile","tablet","computer","large"],tailwind:["xs","sm","md","lg","xl"]},f=function(){function n(){var e=0<arguments.length&&void 0!==arguments[0]?arguments[0]:"";!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,n),this.callbacks={},this.framework="",this.config=n.parseBreakpoints(e),this.createScreen(),this.init()}return function(e,t,n){t&&r(e.prototype,t),n&&r(e,n)}(n,[{key:"init",value:function(){this.attachResize(),this.setScreenSize(),this.checkTouch()}},{key:"attachResize",value:function(){c&&window.addEventListener("resize",function(n,r){var i;return function(){var e=this,t=arguments;clearTimeout(i),i=setTimeout(function(){i=null,n.apply(e,t)},r)}}(this.setScreenSize.bind(this),100))}},{key:"setScreenSize",value:function(){c&&(this.screen.width=window.innerWidth,this.screen.height=window.innerHeight,this.runCallbacks(),this.findCurrentBreakpoint())}},{key:"runCallbacks",value:function(){var t=this;Object.keys(this.callbacks).forEach(function(e){t.screen[e]=t.callbacks[e].call(null,t.screen)})}},{key:"findCurrentBreakpoint",value:function(){var n=this;this.screen.breakpoint=this.config.breakpointsOrder.reduce(function(e,t){return n.screen[t]?t:e},this.config.breakpointsOrder[0])}},{key:"checkTouch",value:function(){c&&(this.screen.touch="ontouchstart"in window)}},{key:"createScreen",value:function(){var t=this,e=Object.keys(this.config);this.screen=o.observable({width:410,height:730,touch:!0,portrait:!0,landscape:!1,breakpoint:this.config.breakpointsOrder[0],breakpointsOrder:this.config.breakpointsOrder,config:this.config}),this.findCurrentBreakpoint(),e.forEach(function(e){if(0<=u.indexOf(e))throw new Error('Invalid breakpoint name: "'.concat(e,'". This key is reserved.'));o.set(t.screen,e,!1)}),c&&this.initMediaQueries()}},{key:"initMediaQueries",value:function(){var i=this;Object.keys(this.config).forEach(function(t){var e=null;if("breakpointsOrder"!==t){var n=i.config[t];"function"==typeof n?i.callbacks[t]=n:"number"==typeof n?e="".concat(n,"px"):"string"==typeof n?e=n:i.screen[t]=n}if(e){var r=window.matchMedia("(min-width: ".concat(e,")"));r.addEventListener("change",function(e){return i.mediaStateChanged(t,e.matches)}),i.mediaStateChanged(t,r.matches)}});var e=window.matchMedia("(orientation: portrait)");e.addEventListener("change",function(e){i.mediaStateChanged("portrait",e.matches),i.mediaStateChanged("landscape",!e.matches)}),this.mediaStateChanged("portrait",e.matches),this.mediaStateChanged("landscape",!e.matches)}},{key:"mediaStateChanged",value:function(e,t){o.set(this.screen,e,t)}}],[{key:"parseBreakpoints",value:function(e){return"object"===t(e)?e.extend?(this.framework=e.extend.toString(),delete e.extend,Object.assign({},e,n.getBreakpoints())):(this.framework="__CUSTOM__",i({breakpointsOrder:Object.keys(e)},e)):(this.framework=e.toString(),n.getBreakpoints())}},{key:"getBreakpoints",value:function(){if(this.framework||(this.framework="tailwind"),!e[this.framework])throw new Error('Cannot find grid breakpoints for framework "'.concat(this.framework,'"'));return i({},e[this.framework],{breakpointsOrder:l[this.framework]})}},{key:"install",value:function(e,t){if(!function(e,t){var n=a(e),r=a(t);return n.major>r.major||n.major===r.major&&n.minor>r.minor||n.major===r.major&&n.minor===r.minor&&n.patch>=r.patch}((o=e).version,s))throw Error("VueScreen requires at least Vue ".concat(s));o.prototype.$screen=new n(t).screen}}]),n}();return c&&window.Vue&&window.Vue.use(f),f}();
{
"name": "vue-screen",
"version": "1.5.0",
"version": "1.5.1",
"description": "Reactive window size and media query states for Vue components. Integrates with most UI frameworks.",

@@ -5,0 +5,0 @@ "keywords": [

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc