Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-screen-size
Advanced tools
vue-screen-size - npm Package Compare versions
Comparing version 1.0.1 to 2.0.0
@@ -1,63 +0,52 @@ | ||
| import Vue from 'vue'; | ||
| var reactiveComponent = new Vue({ | ||
| data: function data() { | ||
| return { | ||
| event: null, | ||
| vssWidth: null, | ||
| vssHeight: null | ||
| } | ||
| } | ||
| }); | ||
| var VueScreenSizeMixin = { | ||
| computed: { | ||
| $vssEvent: function $vssEvent() { | ||
| return reactiveComponent.event | ||
| }, | ||
| $vssWidth: function $vssWidth() { | ||
| return reactiveComponent.vssWidth || this.getScreenWidth() | ||
| }, | ||
| $vssHeight: function $vssHeight() { | ||
| return reactiveComponent.vssHeight || this.getScreenHeight() | ||
| } | ||
| data: function data() { | ||
| return { | ||
| event: null, | ||
| vssWidth: null, | ||
| vssHeight: null, | ||
| }; | ||
| }, | ||
| computed: { | ||
| $vssEvent: function $vssEvent() { | ||
| return this.event; | ||
| }, | ||
| methods: { | ||
| getScreenWidth: function getScreenWidth() { | ||
| return window.innerWidth | ||
| || document.documentElement.clientWidth | ||
| || document.body.clientWidth | ||
| }, | ||
| getScreenHeight: function getScreenHeight() { | ||
| return window.innerHeight | ||
| || document.documentElement.clientHeight | ||
| || document.body.clientHeight | ||
| }, | ||
| handleResize: function handleResize(event) { | ||
| reactiveComponent.event = event; | ||
| reactiveComponent.vssWidth = this.getScreenWidth(); | ||
| reactiveComponent.vssHeight = this.getScreenHeight(); | ||
| }, | ||
| $vssDestroyListener: function $vssDestroyListener() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| } | ||
| $vssWidth: function $vssWidth() { | ||
| return this.vssWidth || this.getScreenWidth(); | ||
| }, | ||
| mounted: function mounted() { | ||
| window.addEventListener('resize', this.handleResize); | ||
| $vssHeight: function $vssHeight() { | ||
| return this.vssHeight || this.getScreenHeight(); | ||
| }, | ||
| destroyed: function destroyed() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| } | ||
| } | ||
| }, | ||
| methods: { | ||
| getScreenWidth: function getScreenWidth() { | ||
| return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | ||
| }, | ||
| getScreenHeight: function getScreenHeight() { | ||
| return ( | ||
| window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight | ||
| ); | ||
| }, | ||
| handleResize: function handleResize(event) { | ||
| this.event = event; | ||
| this.vssWidth = this.getScreenWidth(); | ||
| this.vssHeight = this.getScreenHeight(); | ||
| }, | ||
| var install = function (Vue$$1) { | ||
| Vue$$1.mixin(VueScreenSizeMixin); | ||
| $vssDestroyListener: function $vssDestroyListener() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| }, | ||
| }, | ||
| mounted: function mounted() { | ||
| window.addEventListener('resize', this.handleResize); | ||
| }, | ||
| destroyed: function destroyed() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| }, | ||
| }; | ||
| // Note that here we're not only exporting the install function, but | ||
| // also the mixin itself - this is so with can `Vue.use()` or | ||
| // `mixins: [],` it. | ||
| var index = { install: install, VueScreenSizeMixin: VueScreenSizeMixin } | ||
| var install = function (app) { | ||
| app.mixin(VueScreenSizeMixin); | ||
| }; | ||
| export default index; | ||
| export default install; | ||
| export { VueScreenSizeMixin }; |
@@ -1,70 +0,1 @@ | ||
| var VueScreenSize = (function (exports,Vue) { | ||
| 'use strict'; | ||
| Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue; | ||
| var reactiveComponent = new Vue({ | ||
| data: function data() { | ||
| return { | ||
| event: null, | ||
| vssWidth: null, | ||
| vssHeight: null | ||
| } | ||
| } | ||
| }); | ||
| var VueScreenSizeMixin = { | ||
| computed: { | ||
| $vssEvent: function $vssEvent() { | ||
| return reactiveComponent.event | ||
| }, | ||
| $vssWidth: function $vssWidth() { | ||
| return reactiveComponent.vssWidth || this.getScreenWidth() | ||
| }, | ||
| $vssHeight: function $vssHeight() { | ||
| return reactiveComponent.vssHeight || this.getScreenHeight() | ||
| } | ||
| }, | ||
| methods: { | ||
| getScreenWidth: function getScreenWidth() { | ||
| return window.innerWidth | ||
| || document.documentElement.clientWidth | ||
| || document.body.clientWidth | ||
| }, | ||
| getScreenHeight: function getScreenHeight() { | ||
| return window.innerHeight | ||
| || document.documentElement.clientHeight | ||
| || document.body.clientHeight | ||
| }, | ||
| handleResize: function handleResize(event) { | ||
| reactiveComponent.event = event; | ||
| reactiveComponent.vssWidth = this.getScreenWidth(); | ||
| reactiveComponent.vssHeight = this.getScreenHeight(); | ||
| }, | ||
| $vssDestroyListener: function $vssDestroyListener() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| } | ||
| }, | ||
| mounted: function mounted() { | ||
| window.addEventListener('resize', this.handleResize); | ||
| }, | ||
| destroyed: function destroyed() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| } | ||
| } | ||
| var install = function (Vue$$1) { | ||
| Vue$$1.mixin(VueScreenSizeMixin); | ||
| }; | ||
| // Note that here we're not only exporting the install function, but | ||
| // also the mixin itself - this is so with can `Vue.use()` or | ||
| // `mixins: [],` it. | ||
| var index = { install: install, VueScreenSizeMixin: VueScreenSizeMixin } | ||
| exports.default = index; | ||
| return exports; | ||
| }({},Vue)); | ||
| var VueScreenSize=function(e){"use strict";var t={data:function(){return{event:null,vssWidth:null,vssHeight:null}},computed:{$vssEvent:function(){return this.event},$vssWidth:function(){return this.vssWidth||this.getScreenWidth()},$vssHeight:function(){return this.vssHeight||this.getScreenHeight()}},methods:{getScreenWidth:function(){return window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth},getScreenHeight:function(){return window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight},handleResize:function(e){this.event=e,this.vssWidth=this.getScreenWidth(),this.vssHeight=this.getScreenHeight()},$vssDestroyListener:function(){window.removeEventListener("resize",this.handleResize)}},mounted:function(){window.addEventListener("resize",this.handleResize)},destroyed:function(){window.removeEventListener("resize",this.handleResize)}};return e.VueScreenSizeMixin=t,e.default=function(e){e.mixin(t)},e}({}); |
| (function (global, factory) { | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue')) : | ||
| typeof define === 'function' && define.amd ? define(['exports', 'vue'], factory) : | ||
| (factory((global.VueScreenSize = {}),global.Vue)); | ||
| }(this, (function (exports,Vue) { 'use strict'; | ||
| typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : | ||
| typeof define === 'function' && define.amd ? define(['exports'], factory) : | ||
| (global = global || self, factory(global.VueScreenSize = {})); | ||
| }(this, (function (exports) { 'use strict'; | ||
| Vue = Vue && Vue.hasOwnProperty('default') ? Vue['default'] : Vue; | ||
| var VueScreenSizeMixin = { | ||
| data: function data() { | ||
| return { | ||
| event: null, | ||
| vssWidth: null, | ||
| vssHeight: null, | ||
| }; | ||
| }, | ||
| computed: { | ||
| $vssEvent: function $vssEvent() { | ||
| return this.event; | ||
| }, | ||
| $vssWidth: function $vssWidth() { | ||
| return this.vssWidth || this.getScreenWidth(); | ||
| }, | ||
| $vssHeight: function $vssHeight() { | ||
| return this.vssHeight || this.getScreenHeight(); | ||
| }, | ||
| }, | ||
| methods: { | ||
| getScreenWidth: function getScreenWidth() { | ||
| return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | ||
| }, | ||
| getScreenHeight: function getScreenHeight() { | ||
| return ( | ||
| window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight | ||
| ); | ||
| }, | ||
| handleResize: function handleResize(event) { | ||
| this.event = event; | ||
| this.vssWidth = this.getScreenWidth(); | ||
| this.vssHeight = this.getScreenHeight(); | ||
| }, | ||
| var reactiveComponent = new Vue({ | ||
| data: function data() { | ||
| return { | ||
| event: null, | ||
| vssWidth: null, | ||
| vssHeight: null | ||
| } | ||
| } | ||
| }); | ||
| $vssDestroyListener: function $vssDestroyListener() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| }, | ||
| }, | ||
| mounted: function mounted() { | ||
| window.addEventListener('resize', this.handleResize); | ||
| }, | ||
| destroyed: function destroyed() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| }, | ||
| }; | ||
| var VueScreenSizeMixin = { | ||
| computed: { | ||
| $vssEvent: function $vssEvent() { | ||
| return reactiveComponent.event | ||
| }, | ||
| $vssWidth: function $vssWidth() { | ||
| return reactiveComponent.vssWidth || this.getScreenWidth() | ||
| }, | ||
| $vssHeight: function $vssHeight() { | ||
| return reactiveComponent.vssHeight || this.getScreenHeight() | ||
| } | ||
| }, | ||
| methods: { | ||
| getScreenWidth: function getScreenWidth() { | ||
| return window.innerWidth | ||
| || document.documentElement.clientWidth | ||
| || document.body.clientWidth | ||
| }, | ||
| getScreenHeight: function getScreenHeight() { | ||
| return window.innerHeight | ||
| || document.documentElement.clientHeight | ||
| || document.body.clientHeight | ||
| }, | ||
| handleResize: function handleResize(event) { | ||
| reactiveComponent.event = event; | ||
| reactiveComponent.vssWidth = this.getScreenWidth(); | ||
| reactiveComponent.vssHeight = this.getScreenHeight(); | ||
| }, | ||
| var install = function (app) { | ||
| app.mixin(VueScreenSizeMixin); | ||
| }; | ||
| $vssDestroyListener: function $vssDestroyListener() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| } | ||
| }, | ||
| mounted: function mounted() { | ||
| window.addEventListener('resize', this.handleResize); | ||
| }, | ||
| destroyed: function destroyed() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| } | ||
| } | ||
| exports.VueScreenSizeMixin = VueScreenSizeMixin; | ||
| exports.default = install; | ||
| var install = function (Vue$$1) { | ||
| Vue$$1.mixin(VueScreenSizeMixin); | ||
| }; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| // Note that here we're not only exporting the install function, but | ||
| // also the mixin itself - this is so with can `Vue.use()` or | ||
| // `mixins: [],` it. | ||
| var index = { install: install, VueScreenSizeMixin: VueScreenSizeMixin } | ||
| exports.default = index; | ||
| Object.defineProperty(exports, '__esModule', { value: true }); | ||
| }))); |
@@ -1,11 +0,10 @@ | ||
| import Vue from 'vue' | ||
| import App from './App.vue' | ||
| import { createApp } from 'vue'; | ||
| import App from './App.vue'; | ||
| // This is an example of loading it the gloabl way. | ||
| // import VueScreenSize from '../src/index.js' | ||
| // Vue.use(VueScreenSize) | ||
| const app = createApp(App); | ||
| new Vue({ | ||
| el: '#app', | ||
| render: h => h(App) | ||
| }) | ||
| // This is an example of loading it the global way. | ||
| // import { VueScreenSizeMixin } from '../src/index.js'; | ||
| // app.mixin(VueScreenSizeMixin); | ||
| app.mount('#app'); |
131
package.json
| { | ||
| "name": "vue-screen-size", | ||
| "version": "1.0.1", | ||
| "description": "Get easy and reactive access to the width and height of your screen.", | ||
| "author": "John Datserakis <johndatserakis@gmail.com>", | ||
| "license": "MIT", | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/johndatserakis/vue-screen-size.git" | ||
| "browser": { | ||
| "./sfc": "src/vue-screen-size.vue" | ||
| }, | ||
@@ -14,54 +9,37 @@ "bugs": { | ||
| }, | ||
| "keywords": [ | ||
| "vue", | ||
| "screen", | ||
| "size", | ||
| "width", | ||
| "height" | ||
| ], | ||
| "main": "dist/vue-screen-size.umd.js", | ||
| "module": "dist/vue-screen-size.esm.js", | ||
| "unpkg": "dist/vue-screen-size.min.js", | ||
| "browser": { | ||
| "./sfc": "src/vue-screen-size.vue" | ||
| }, | ||
| "scripts": { | ||
| "watch": "cross-env NODE_ENV=development webpack-dev-server --open --hot", | ||
| "build": "npm run test && npm run build:example && npm run build:library", | ||
| "build:umd": "rollup --config build/rollup.config.js --format umd --file dist/vue-screen-size.umd.js", | ||
| "build:es": "rollup --config build/rollup.config.js --format es --file dist/vue-screen-size.esm.js", | ||
| "build:unpkg": "rollup --config build/rollup.config.js --format iife --file dist/vue-screen-size.min.js", | ||
| "build:library": "rm -rf ./dist npm run build:umd & npm run build:es & npm run build:umd & npm run build:unpkg", | ||
| "build:example": "rm -rf ./docs && cross-env NODE_ENV=production webpack --progress --hide-modules", | ||
| "test": "jest" | ||
| }, | ||
| "dependencies": {}, | ||
| "description": "Get easy and reactive access to the width and height of your screen.", | ||
| "devDependencies": { | ||
| "@vue/test-utils": "^1.0.0-beta.25", | ||
| "babel-core": "^6.26.0", | ||
| "babel-loader": "^7.1.2", | ||
| "babel-preset-env": "^1.6.0", | ||
| "babel-preset-stage-3": "^6.24.1", | ||
| "cross-env": "^5.1.6", | ||
| "css-loader": "^0.28.7", | ||
| "file-loader": "^1.1.4", | ||
| "minimist": "^1.2.0", | ||
| "node-sass": "^4.5.3", | ||
| "rollup": "^0.57.1", | ||
| "rollup-plugin-buble": "^0.19.2", | ||
| "rollup-plugin-commonjs": "^9.2.0", | ||
| "rollup-plugin-node-resolve": "^3.3.0", | ||
| "rollup-plugin-terser": "^4.0.3", | ||
| "rollup-plugin-vue": "^4.3.0", | ||
| "rollup-plugin-css-only": "^0.4.0", | ||
| "sass-loader": "^7.0.1", | ||
| "vue": "^2.5.16", | ||
| "vue-loader": "^13.0.5", | ||
| "vue-template-compiler": "^2.5.16", | ||
| "webpack": "^3.6.0", | ||
| "webpack-dev-server": "^2.9.1", | ||
| "@babel/cli": "^7.4.4", | ||
| "@babel/core": "^7.4.5", | ||
| "@babel/preset-env": "^7.4.5", | ||
| "@vue/compiler-sfc": "^3.2.31", | ||
| "@vue/test-utils": "^2.0.0-rc.18", | ||
| "babel-core": "^7.0.0-bridge.0", | ||
| "babel-jest": "^24.8.0", | ||
| "babel-loader": "^8.0.6", | ||
| "cross-env": "^5.2.0", | ||
| "css-loader": "^3.0.0", | ||
| "file-loader": "^4.0.0", | ||
| "html-webpack-plugin": "^3.2.0", | ||
| "jest": "^23.6.0", | ||
| "jest": "^24.8.0", | ||
| "jest-serializer-vue": "^2.0.2", | ||
| "vue-jest": "^2.6.0" | ||
| "mini-css-extract-plugin": "^0.11.2", | ||
| "minimist": "^1.2.0", | ||
| "rimraf": "^3.0.2", | ||
| "rollup": "^1.15.6", | ||
| "rollup-plugin-buble": "^0.19.6", | ||
| "rollup-plugin-commonjs": "^10.0.0", | ||
| "rollup-plugin-node-resolve": "^5.0.3", | ||
| "rollup-plugin-terser": "^5.0.0", | ||
| "rollup-plugin-vue": "^6.0.0", | ||
| "sass": "^1.49.9", | ||
| "sass-loader": "^7.1.0", | ||
| "terser-webpack-plugin": "^1.3.0", | ||
| "vue": "^3.2.31", | ||
| "vue-jest": "^5.0.0-alpha.10", | ||
| "vue-loader": "^17.0.0", | ||
| "webpack": "^4.34.0", | ||
| "webpack-cli": "^3.3.4", | ||
| "webpack-dev-server": "^3.7.2" | ||
| }, | ||
@@ -76,10 +54,41 @@ "jest": { | ||
| }, | ||
| "transform": { | ||
| "^.+\\.js$": "<rootDir>/node_modules/babel-jest", | ||
| ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest" | ||
| }, | ||
| "snapshotSerializers": [ | ||
| "<rootDir>/node_modules/jest-serializer-vue" | ||
| ] | ||
| } | ||
| ], | ||
| "transform": { | ||
| ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest", | ||
| "^.+\\.js$": "<rootDir>/node_modules/babel-jest" | ||
| } | ||
| }, | ||
| "keywords": [ | ||
| "vue", | ||
| "screen", | ||
| "size", | ||
| "width", | ||
| "height" | ||
| ], | ||
| "license": "MIT", | ||
| "main": "dist/vue-screen-size.umd.js", | ||
| "module": "dist/vue-screen-size.esm.js", | ||
| "name": "vue-screen-size", | ||
| "peerDependencies": { | ||
| "vue": "^3.2.31" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "git+https://github.com/johndatserakis/vue-screen-size.git" | ||
| }, | ||
| "scripts": { | ||
| "build": "npm run test && npm run build:example && npm run build:library", | ||
| "build:es": "rollup --config rollup.config.js --format es --file dist/vue-screen-size.esm.js", | ||
| "build:example": "rimraf docs && cross-env NODE_ENV=production webpack --progress --hide-modules --mode production", | ||
| "build:library": "rimraf dist npm run build:umd & npm run build:es & npm run build:umd & npm run build:unpkg", | ||
| "build:umd": "rollup --config rollup.config.js --format umd --file dist/vue-screen-size.umd.js", | ||
| "build:unpkg": "rollup --config rollup.config.js --format iife --file dist/vue-screen-size.min.js", | ||
| "test": "jest", | ||
| "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot" | ||
| }, | ||
| "sideEffects": false, | ||
| "unpkg": "dist/vue-screen-size.min.js", | ||
| "version": "2.0.0" | ||
| } |
@@ -13,17 +13,15 @@ # vue-screen-size | ||
| ### Links | ||
| ## Vue 3 Support | ||
| [View demo](https://johndatserakis.github.io/vue-screen-size/) | ||
| Vue 3 is supported from `v2.0.0` and beyond (current `master`). To use `vue-screen-size` with Vue 2, use `v1.0.1`. | ||
| [View on npm](https://www.npmjs.com/package/vue-screen-size) | ||
| ## Links | ||
| [View on GitHub](https://github.com/johndatserakis/vue-screen-size) | ||
| - [Demo](https://johndatserakis.github.io/vue-screen-size/) | ||
| - [GitHub](https://github.com/johndatserakis/vue-screen-size) | ||
| - [npm](https://www.npmjs.com/package/vue-screen-size) | ||
| ### Install | ||
| ## Install | ||
| ```bash | ||
| # npm | ||
| npm i vue-screen-size | ||
| # yarn | ||
| yarn add vue-screen-size | ||
@@ -38,3 +36,3 @@ ``` | ||
| ### About | ||
| ## About | ||
@@ -47,3 +45,3 @@ Sometimes when building an app you need to have access to the screen's dimensions. Usually that's going to be done in the css using `@media` - but sometimes you need to access that info right in your JavaScript. | ||
| ### Usage Example 1 - Whole app has access (Not Recommended) | ||
| ## Usage Example 1 - Whole app has access (Not Recommended) | ||
@@ -53,9 +51,10 @@ In this usage - your whole app - and every child component - has access to the `$vssWidth`, `$vssHeight`, and `$vssEvent` variables. This is sorta pollutive though, as multiple instances of the mixin are initialized and it's kinda wasteful. The is due to the way Vue mixins are passed down to child components. You can read more about this [here](https://vuejs.org/v2/guide/mixins.html#Global-Mixin). The second example is recommended. | ||
| ```javascript | ||
| import VueScreenSize from 'vue-screen-size' | ||
| Vue.use(VueScreenSize) | ||
| import { VueScreenSizeMixin } from 'vue-screen-size'; | ||
| app.mixin(VueScreenSizeMixin); | ||
| // Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` anywhere in your app. | ||
| ``` | ||
| ### Usage Example 2 - Just the component you install it on has access - (Recommended) | ||
| ## Usage Example 2 - Just the component you install it on has access - (Recommended) | ||
@@ -65,56 +64,53 @@ In this usage - the component you install it on will have access to the `$vssWidth`, `$vssHeight`, and `$vssEvent` variables. This may be a bit more restrictive, but it's less wasteful and should give you better performance. | ||
| ```javascript | ||
| import VueScreenSize from 'vue-screen-size' | ||
| import { VueScreenSizeMixin } from 'vue-screen-size'; | ||
| export default { | ||
| ... | ||
| mixins: [VueScreenSize.VueScreenSizeMixin], | ||
| ... | ||
| } | ||
| mixins: [VueScreenSizeMixin], | ||
| }; | ||
| // Access `this.$vssWidth`, `this.$vssHeight`, and `this.$vssEvent` in your component. | ||
| ``` | ||
| ### Variables | ||
| | name | type | description | | ||
| |--------|------------|-------------| | ||
| | $vssWidth | Number | The width of your screen | | ||
| | $vssHeight | Number | The height of your screen | | ||
| | $vssEvent | Object | The event object data from the resizing event. | | ||
| ## Variables | ||
| ### Methods | ||
| | name | type | description | | ||
| | ---------- | ------ | ---------------------------------------------- | | ||
| | $vssWidth | Number | The width of your screen | | ||
| | $vssHeight | Number | The height of your screen | | ||
| | $vssEvent | Object | The event object data from the resizing event. | | ||
| | method | parameters | description | | ||
| |--------|------------|-------------| | ||
| | $vssDestroyListener | none | Force the removal of the attached event listener | | ||
| ## Methods | ||
| ### Development | ||
| | method | parameters | description | | ||
| | ------------------- | ---------- | ------------------------------------------------ | | ||
| | $vssDestroyListener | none | Force the removal of the attached event listener | | ||
| ## Development | ||
| ```bash | ||
| # install dependencies | ||
| npm install | ||
| # Install dependencies | ||
| yarn | ||
| # serve with hot reload | ||
| npm run watch | ||
| # Serve with hot reload | ||
| yarn dev | ||
| # run the tests | ||
| npm run test | ||
| # Run the tests | ||
| yarn test | ||
| # build demo page | ||
| npm run build:example | ||
| # Build demo page | ||
| yarn build:example | ||
| # build | ||
| npm run build | ||
| # Build library | ||
| yarn build:library | ||
| # publish to npm | ||
| npm publish | ||
| # Build everything and run tests | ||
| yarn build | ||
| ``` | ||
| ### Other | ||
| ## Other | ||
| Go ahead and fork the project! Submit an issue if needed. Have fun! | ||
| ### License | ||
| ## License | ||
| [MIT](http://opensource.org/licenses/MIT) | ||
| Packaged with a mixture of [vue-lib-template](https://github.com/biigpongsatorn/vue-lib-template) and [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup). |
@@ -1,10 +0,10 @@ | ||
| import VueScreenSizeMixin from './vue-screen-size' | ||
| import VueScreenSizeMixin from './vue-screen-size'; | ||
| const install = (Vue) => { | ||
| Vue.mixin(VueScreenSizeMixin) | ||
| } | ||
| const install = (app) => { | ||
| app.mixin(VueScreenSizeMixin); | ||
| }; | ||
| // Note that here we're not only exporting the install function, but | ||
| // also the mixin itself - this is so with can `Vue.use()` or | ||
| // `mixins: [],` it. | ||
| export default { install, VueScreenSizeMixin } | ||
| export default install; | ||
| // Also export the actual mixin so consumers can use it on a single component if they choose | ||
| export { VueScreenSizeMixin }; |
@@ -1,52 +0,45 @@ | ||
| import Vue from 'vue' | ||
| const reactiveComponent = new Vue({ | ||
| data() { | ||
| return { | ||
| event: null, | ||
| vssWidth: null, | ||
| vssHeight: null | ||
| } | ||
| } | ||
| }) | ||
| export default { | ||
| computed: { | ||
| $vssEvent() { | ||
| return reactiveComponent.event | ||
| }, | ||
| $vssWidth() { | ||
| return reactiveComponent.vssWidth || this.getScreenWidth() | ||
| }, | ||
| $vssHeight() { | ||
| return reactiveComponent.vssHeight || this.getScreenHeight() | ||
| } | ||
| data() { | ||
| return { | ||
| event: null, | ||
| vssWidth: null, | ||
| vssHeight: null, | ||
| }; | ||
| }, | ||
| computed: { | ||
| $vssEvent() { | ||
| return this.event; | ||
| }, | ||
| methods: { | ||
| getScreenWidth() { | ||
| return window.innerWidth | ||
| || document.documentElement.clientWidth | ||
| || document.body.clientWidth | ||
| }, | ||
| getScreenHeight() { | ||
| return window.innerHeight | ||
| || document.documentElement.clientHeight | ||
| || document.body.clientHeight | ||
| }, | ||
| handleResize(event) { | ||
| reactiveComponent.event = event | ||
| reactiveComponent.vssWidth = this.getScreenWidth() | ||
| reactiveComponent.vssHeight = this.getScreenHeight() | ||
| }, | ||
| $vssWidth() { | ||
| return this.vssWidth || this.getScreenWidth(); | ||
| }, | ||
| $vssHeight() { | ||
| return this.vssHeight || this.getScreenHeight(); | ||
| }, | ||
| }, | ||
| methods: { | ||
| getScreenWidth() { | ||
| return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; | ||
| }, | ||
| getScreenHeight() { | ||
| return ( | ||
| window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight | ||
| ); | ||
| }, | ||
| handleResize(event) { | ||
| this.event = event; | ||
| this.vssWidth = this.getScreenWidth(); | ||
| this.vssHeight = this.getScreenHeight(); | ||
| }, | ||
| $vssDestroyListener() { | ||
| window.removeEventListener('resize', this.handleResize) | ||
| } | ||
| $vssDestroyListener() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| }, | ||
| mounted() { | ||
| window.addEventListener('resize', this.handleResize) | ||
| }, | ||
| destroyed() { | ||
| window.removeEventListener('resize', this.handleResize) | ||
| } | ||
| } | ||
| }, | ||
| mounted() { | ||
| window.addEventListener('resize', this.handleResize); | ||
| }, | ||
| destroyed() { | ||
| window.removeEventListener('resize', this.handleResize); | ||
| }, | ||
| }; |
| let emptyComponent = { | ||
| template: ` | ||
| template: ` | ||
| <div> | ||
@@ -7,24 +7,19 @@ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus eveniet, quidem veniam. Excepturi provident at soluta, minus quasi similique fuga, eum eligendi autem magni qui modi pariatur esse tenetur vel! | ||
| `, | ||
| data () { | ||
| return { | ||
| } | ||
| } | ||
| } | ||
| data() { | ||
| return {}; | ||
| }, | ||
| }; | ||
| import { createLocalVue, shallowMount } from '@vue/test-utils' | ||
| import VueScreenSize from '@/index.js' | ||
| import { shallowMount } from '@vue/test-utils'; | ||
| import { VueScreenSizeMixin } from '@/index.js'; | ||
| describe('vue-screen-size.js', () => { | ||
| it('Sets $vssWidth and $vssHeight correctly', async () => { | ||
| it('Sets $vssWidth and $vssHeight correctly', async () => { | ||
| const wrapper = shallowMount(emptyComponent, { | ||
| mixins: [VueScreenSizeMixin], | ||
| }); | ||
| const localVue = createLocalVue() | ||
| const wrapper = shallowMount(emptyComponent, { | ||
| localVue, | ||
| mixins: [VueScreenSize.VueScreenSizeMixin], | ||
| }) | ||
| expect(wrapper.vm.$vssWidth).toBeGreaterThan(1) | ||
| expect(wrapper.vm.$vssHeight).toBeGreaterThan(1) | ||
| }) | ||
| }) | ||
| expect(wrapper.vm.$vssWidth).toBeGreaterThan(1); | ||
| expect(wrapper.vm.$vssHeight).toBeGreaterThan(1); | ||
| }); | ||
| }); |
@@ -1,11 +0,16 @@ | ||
| const path = require('path') | ||
| const webpack = require('webpack') | ||
| const HtmlWebpackPlugin = require('html-webpack-plugin') | ||
| // This webpack config is used to serve the example app in ./example | ||
| const { VueLoaderPlugin } = require('vue-loader'); | ||
| const HtmlWebpackPlugin = require('html-webpack-plugin'); | ||
| const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | ||
| const path = require('path'); | ||
| const TerserPlugin = require('terser-webpack-plugin'); | ||
| const webpack = require('webpack'); | ||
| module.exports = { | ||
| entry: './example/main.js', | ||
| output: { | ||
| filename: 'build.js', | ||
| path: path.resolve(__dirname, './docs'), | ||
| publicPath: (process.env.NODE_ENV === 'development') ? '/' : '/vue-screen-size/', | ||
| filename: 'build.js' | ||
| publicPath: process.env.NODE_ENV === 'development' ? '/' : '/vue-screen-size/', | ||
| }, | ||
@@ -17,4 +22,6 @@ module: { | ||
| use: [ | ||
| 'vue-style-loader', | ||
| 'css-loader' | ||
| { | ||
| loader: MiniCssExtractPlugin.loader, | ||
| }, | ||
| 'css-loader', | ||
| ], | ||
@@ -25,5 +32,7 @@ }, | ||
| use: [ | ||
| 'vue-style-loader', | ||
| { | ||
| loader: MiniCssExtractPlugin.loader, | ||
| }, | ||
| 'css-loader', | ||
| 'sass-loader' | ||
| 'sass-loader', | ||
| ], | ||
@@ -34,33 +43,17 @@ }, | ||
| use: [ | ||
| 'vue-style-loader', | ||
| { | ||
| loader: MiniCssExtractPlugin.loader, | ||
| }, | ||
| 'css-loader', | ||
| 'sass-loader?indentedSyntax' | ||
| 'sass-loader?indentedSyntax', | ||
| ], | ||
| }, | ||
| { | ||
| loader: 'vue-loader', | ||
| test: /\.vue$/, | ||
| loader: 'vue-loader', | ||
| options: { | ||
| loaders: { | ||
| // Since sass-loader (weirdly) has SCSS as its default parse mode, we map | ||
| // the "scss" and "sass" values for the lang attribute to the right configs here. | ||
| // other preprocessors should work out of the box, no loader config like this necessary. | ||
| 'scss': [ | ||
| 'vue-style-loader', | ||
| 'css-loader', | ||
| 'sass-loader' | ||
| ], | ||
| 'sass': [ | ||
| 'vue-style-loader', | ||
| 'css-loader', | ||
| 'sass-loader?indentedSyntax' | ||
| ] | ||
| } | ||
| // other vue-loader options go here | ||
| } | ||
| }, | ||
| { | ||
| exclude: /node_modules/, | ||
| loader: 'babel-loader', | ||
| test: /\.js$/, | ||
| loader: 'babel-loader', | ||
| exclude: /node_modules/ | ||
| }, | ||
@@ -71,12 +64,12 @@ { | ||
| options: { | ||
| name: '[name].[ext]?[hash]' | ||
| } | ||
| } | ||
| ] | ||
| name: '[name].[ext]?[hash]', | ||
| }, | ||
| }, | ||
| ], | ||
| }, | ||
| resolve: { | ||
| alias: { | ||
| 'vue$': 'vue/dist/vue.esm.js' | ||
| vue$: 'vue/dist/vue.esm-bundler.js', | ||
| }, | ||
| extensions: ['*', '.js', '.vue', '.json'] | ||
| extensions: ['*', '.js', '.vue', '.json'], | ||
| }, | ||
@@ -86,18 +79,35 @@ devServer: { | ||
| noInfo: true, | ||
| overlay: true | ||
| overlay: true, | ||
| }, | ||
| performance: { | ||
| hints: false | ||
| hints: false, | ||
| }, | ||
| optimization: { | ||
| minimizer: [ | ||
| new TerserPlugin({ | ||
| parallel: 4, | ||
| terserOptions: { | ||
| compress: { | ||
| warnings: false, | ||
| }, | ||
| warnings: false, | ||
| }, | ||
| }), | ||
| ], | ||
| }, | ||
| devtool: '#eval-source-map', | ||
| plugins: [ | ||
| new VueLoaderPlugin(), | ||
| new MiniCssExtractPlugin({ | ||
| filename: '[name].css', | ||
| }), | ||
| new HtmlWebpackPlugin({ | ||
| title: 'vue-screen-size', | ||
| template: './example/index.html' | ||
| }) | ||
| ] | ||
| } | ||
| template: './example/index.html', | ||
| }), | ||
| ], | ||
| }; | ||
| if (process.env.NODE_ENV === 'production') { | ||
| module.exports.devtool = '#source-map' | ||
| module.exports.devtool = '#source-map'; | ||
| // http://vue-loader.vuejs.org/en/workflow/production.html | ||
@@ -107,15 +117,9 @@ module.exports.plugins = (module.exports.plugins || []).concat([ | ||
| 'process.env': { | ||
| NODE_ENV: '"production"' | ||
| } | ||
| NODE_ENV: '"production"', | ||
| }, | ||
| }), | ||
| new webpack.optimize.UglifyJsPlugin({ | ||
| sourceMap: true, | ||
| compress: { | ||
| warnings: false | ||
| } | ||
| new webpack.LoaderOptionsPlugin({ | ||
| minimize: true, | ||
| }), | ||
| new webpack.LoaderOptionsPlugin({ | ||
| minimize: true | ||
| }) | ||
| ]) | ||
| ]); | ||
| } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-83.74%
175422
- Dependency count
- increased byInfinity%
1
- Dev dependency count
- increased by18.52%
32
- Lines of code
- decreased by-60.14%
340
- Number of lines in readme file
- decreased by-3.45%
112
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes