🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vue-match-media

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-match-media - npm Package Compare versions

Comparing version

1.0.1
to
1.0.2

entry.js
rollup.config.js

9

CHANGELOG.md

@@ -9,2 +9,11 @@ # Changelog

## 1.0.2 - 2017-07-19
### Changed
- Transpile code in "dist" to ES5
- Add "module" field in package.json to indicate src/index.js as importable ES6 module
- Build with Rollup from entry.js
- Remove native Symbols (it's just easier)
- Remove Flow annotations (nothing was happening there anyway)
- Update README for distributable code, IE compatibility
## 1.0.1 - 2017-07-18

@@ -11,0 +20,0 @@ ### Fixed

98

dist/index.js

@@ -1,9 +0,18 @@

import Vue from 'vue';
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('vue')) :
typeof define === 'function' && define.amd ? define(['vue'], factory) :
(factory(global.Vue));
}(this, (function (Vue) { 'use strict';
export const MQ = Symbol('mq');
const MQMAP = Symbol('mqueries');
Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue;
export default ((Vue, options) => {
Object.defineProperty(Vue.prototype, '$mq', {
get() {
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
/* eslint no-unused-vars:0 */
var MQ = 'VUE-MATCH-MEDIA-MQ';
var MQMAP = 'VUE-MATCH-MEDIA-MQUERIES';
var MQ$1 = (function (Vue$$1, options) {
Object.defineProperty(Vue$$1.prototype, '$mq', {
get: function get() {
return this[MQ];

@@ -13,18 +22,22 @@ }

Vue.mixin({
beforeCreate() {
const isIsolated = this.$options.mq && this.$options.mq.config && this.$options.mq.config.isolated;
const isRoot = this === this.$root;
const inherited = this.$parent && this.$parent[MQMAP];
const inheritedKeys = isIsolated || isRoot || !inherited ? [] : Object.keys(inherited);
Vue$$1.mixin({
beforeCreate: function beforeCreate() {
var _this = this;
var isIsolated = this.$options.mq && this.$options.mq.config && this.$options.mq.config.isolated;
var isRoot = this === this.$root;
var inherited = this.$parent && this.$parent[MQMAP];
var inheritedKeys = isIsolated || isRoot || !inherited ? [] : Object.keys(inherited);
if (this.$options.mq) {
this[MQMAP] = {};
const mergedKeys = new Set(inheritedKeys.concat(Object.keys(this.$options.mq).filter(k => k !== 'config')));
var mergedKeys = new Set(inheritedKeys.concat(Object.keys(this.$options.mq).filter(function (k) {
return k !== 'config';
})));
const observed = Array.from(mergedKeys).reduce((obs, k) => {
const ownQuery = this.$options.mq[k];
const mql = ownQuery ? window.matchMedia(ownQuery) : inherited[k];
mql.addListener(e => {
var observed = Array.from(mergedKeys).reduce(function (obs, k) {
var ownQuery = _this.$options.mq[k];
var mql = ownQuery ? window.matchMedia(ownQuery) : inherited[k];
mql.addListener(function (e) {
obs[k] = e.matches;

@@ -34,3 +47,3 @@ });

obs[k] = mql.matches;
this[MQMAP][k] = mql;
_this[MQMAP][k] = mql;
return obs;

@@ -42,11 +55,17 @@ }, {});

configurable: true,
get() {
return Object.keys(this).filter(k => k !== 'all').filter(k => this[k]);
get: function get() {
var _this2 = this;
return Object.keys(this).filter(function (k) {
return k !== 'all';
}).filter(function (k) {
return _this2[k];
});
}
});
Vue.util.defineReactive(this, MQ, observed);
Vue$$1.util.defineReactive(this, MQ, observed);
} else if (inherited) {
this[MQMAP] = inherited;
Vue.util.defineReactive(this, MQ, this.$parent[MQ]);
Vue$$1.util.defineReactive(this, MQ, this.$parent[MQ]);
}

@@ -56,11 +75,16 @@ }

Vue.directive('onmedia', {
bind(el, { value, expression, arg, modifiers }, { context }) {
const matchers = [...Object.keys(modifiers)];
const ANY = !matchers.length || modifiers.any;
const NOT = arg;
Vue$$1.directive('onmedia', {
bind: function bind(el, _ref, _ref2) {
var value = _ref.value,
expression = _ref.expression,
arg = _ref.arg,
modifiers = _ref.modifiers;
var context = _ref2.context;
var matchers = [].concat(_toConsumableArray(Object.keys(modifiers)));
var ANY = !matchers.length || modifiers.any;
var NOT = arg;
if (!(value instanceof Function)) {
Vue.util.warn(`Error binding v-onmedia: expression "${expression}" doesn't resolve to
a component method, so there's nothing to call back on change`, context);
Vue$$1.util.warn('Error binding v-onmedia: expression "' + expression + '" doesn\'t resolve to\n a component method, so there\'s nothing to call back on change', context);
return;

@@ -70,7 +94,7 @@ }

if (ANY) {
Vue.util.warn(`Error binding v-onmedia: a ":not" argument was passed without any modifiers`, context);
Vue$$1.util.warn('Error binding v-onmedia: a ":not" argument was passed without any modifiers', context);
return;
}
if (NOT !== 'not') {
Vue.util.warn(`Error binding v-onmedia: unknown argument "${arg}" was passed`, context);
Vue$$1.util.warn('Error binding v-onmedia: unknown argument "' + arg + '" was passed', context);
return;

@@ -80,4 +104,8 @@ }

Object.keys(context[MQMAP]).filter(k => ANY || matchers.find(m => NOT ? m !== k : m === k)).forEach(k => {
context.$watch(`$mq.${k}`, (newVal, oldVal) => {
Object.keys(context[MQMAP]).filter(function (k) {
return ANY || matchers.find(function (m) {
return NOT ? m !== k : m === k;
});
}).forEach(function (k) {
context.$watch('$mq.' + k, function (newVal, oldVal) {
value.call(context, k, newVal);

@@ -92,1 +120,5 @@ });

});
Vue.use(MQ$1);
})));

13

package.json
{
"name": "vue-match-media",
"version": "1.0.1",
"version": "1.0.2",
"description": "A Vue.js plugin that offers a consistent, semantic approach to making components media query-aware.",
"main": "dist/index.js",
"module": "src/index.js",
"engines": {

@@ -11,6 +12,5 @@ "node": "8",

"scripts": {
"watch": "cb watch",
"test": "jest",
"prepublish": "npm run test && npm run build",
"build": "babel --no-babelrc src/index.js -o dist/index.js --presets=flow"
"build": "rollup -c"
},

@@ -41,8 +41,5 @@ "jest": {

"devDependencies": {
"babel-cli": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-env": "^1.5.2",
"babel-preset-flow": "^6.23.0",
"crossbow": "^4.1.0",
"eslint": "^4.0.0",

@@ -55,8 +52,10 @@ "eslint-config-standard": "^10.2.1",

"eslint-plugin-standard": "^3.0.1",
"flow-bin": "^0.48.0",
"jasmine-expect": "^3.7.0",
"jest": "^20.0.4",
"match-media-mock": "^0.1.0",
"rollup": "^0.45.2",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-eslint": "^4.0.0",
"vue": "^2.3.4"
}
}

52

README.md
# vue-match-media
A plugin for Vue.js (v. 2+) that offers a consistent, semantic approach to making components media query-aware.
<!-- TOC depthFrom:1 depthTo:6 withLinks:1 updateOnSave:1 orderedList:0 -->
- [Why?](#why)
- [What's it do?](#whats-it-do)
- [How's it work?](#hows-it-work)
- [Use](#use)
- [$mq](#mq)
- [$mq.all](#mqall)
- [Directive: v-onmedia](#directive-v-onmedia)
- [Options](#options)
- [Other stuff](#other-stuff)
- [Install](#install)
- [Compatibility warning](#compatibility-warning)
- [vue-match-media](#vue-match-media)
- [Why?](#why)
- [What's it do?](#whats-it-do)
- [How's it work?](#hows-it-work)
- [Install](#install)
- [Use](#use)
- [$mq](#mq)
- [$mq.all](#mqall)
- [Directive: v-onmedia](#directive-v-onmedia)
- [Options](#options)
- [IE compatibility](#ie-compatibility)
<!-- /TOC -->
## Why?

@@ -34,10 +36,19 @@ Media queries are great! Can't do responsive work without them. Try as you might, though, to keep everything you do with them inside the bounds of CSS, inevitably there's going to come a time&mdash;especially when you're working with artful/elaborate/fussy design&mdash;that last-mile pixel or DOM jiggering requires you to get dirty in client-side script. And you go ahead and do the dirty, knowing that down the road you or some other poor soul is in for a headache when some piece of layout changes and all of a sudden that last-mile formatting (long since lost to memory) gets broken.

## How's it work?
### Use
Basic Vue plugin setup:
### Install
From NPM:
import MQ from 'vue-match-media'
npm i vue-match-media
A transpiled ES5 distributable (dist/index.js) is set as "main" in package.json. Simply require it (after Vue, of course) and MQ will install itself and be ready to configure. If you prefer using the plugin as an ES6 module, it's a single file, so you can just import from src/index.js. But you'l have to install it to Vue yourself:
import MQ from 'vue-match-media/src'
Vue.use(MQ)
Instantiate Vue with your aliased media queries in an "mq" key:
If you're building with Rollup, package.json provides a "module" field, which will make the additional "/src" path unnecessary.
**Be aware** that the transpiled distributable will NOT run as-is in IE. See [below](#ie-compatibility) for notes.
### Use
Having required or imported MQ, instantiate Vue with your aliased media queries in an "mq" key:
const vm = new Vue({

@@ -176,9 +187,8 @@ el: '#some-element',

## Other stuff
### Install
From this repo, or from NPM:
## IE compatibility
If you're targeting IE, I'm going to assume you've got a polyfill strategy already in place; for that reason the MQ distributable doesn't supply any. MQ relies on the presence of `Array.from` and `new Set(iterable)`, neither of which have IE support. My own practice in client code has been to polyfill piecemeal from [Core JS](https://github.com/zloirock/core-js):
npm install vue-match-media
import 'core-js/es6/set'
import 'core-js/fn/array/from'
### Compatibility warning
MQ uses ES-native Symbols to obscure its internals. So it won't work in retrograde browsers (\*cough\*IE\*cough\*) without Symbol support. Just ponyfill with something like [es6-symbol](https://github.com/medikoo/es6-symbol).
Globals need to be modified (as in the above imports) to provide these features or the code won't work.

22

src/index.js

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

// @flow
/* eslint no-unused-vars:0 */
import Vue from 'vue'
export const MQ = Symbol('mq')
const MQMAP = Symbol('mqueries')
const MQ = 'VUE-MATCH-MEDIA-MQ'
const MQMAP = 'VUE-MATCH-MEDIA-MQUERIES'
export default (Vue: Vue, options?: Object): void => {
Object.defineProperty(Vue.prototype, '$mq', ({
get (): Object {
export default (Vue, options) => {
Object.defineProperty(Vue.prototype, '$mq', {
get () {
return this[MQ]
}
}: Object))
})
Vue.mixin({
beforeCreate (): void {
beforeCreate () {
const isIsolated = this.$options.mq && this.$options.mq.config && this.$options.mq.config.isolated

@@ -40,3 +40,3 @@ const isRoot = this === this.$root

Object.defineProperty(observed, 'all', ({
Object.defineProperty(observed, 'all', {
enumerable: true,

@@ -49,3 +49,3 @@ configurable: true,

}
}: Object))
})

@@ -61,3 +61,3 @@ Vue.util.defineReactive(this, MQ, observed)

Vue.directive('onmedia', {
bind (el?: Node, {value, expression, arg, modifiers}, {context}): void {
bind (el, {value, expression, arg, modifiers}, {context}) {
const matchers = [...Object.keys(modifiers)]

@@ -64,0 +64,0 @@ const ANY = !matchers.length || modifiers.any

4

src/index.test.js
import Vue from 'vue/dist/vue.js'
import plugin, {MQ} from './index.js'
import plugin from './index.js'
import 'jasmine-expect'

@@ -96,3 +96,3 @@ import matchMediaMock from 'match-media-mock'

expect(vmchild[MQ]._tablet).toEqual(vmchild[MQ]._phone)
expect(vmchild.$mq._tablet).toEqual(vmchild.$mq._phone)
})

@@ -99,0 +99,0 @@ it('allows a child component to declare an isolated scope', () => {

.npmignore

Sorry, the diff of this file is not supported yet