Skip to content

Commit

Permalink
Merge pull request #5 from johndatserakis/upgrade-to-vue-3
Browse files Browse the repository at this point in the history
Upgrade to Vue 3
  • Loading branch information
johndatserakis authored Mar 20, 2022
2 parents 46336de + f0bf5e5 commit d9625c9
Show file tree
Hide file tree
Showing 23 changed files with 8,423 additions and 14,542 deletions.
31 changes: 21 additions & 10 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -1,13 +1,24 @@
{
"presets": [
["env", { "modules": false }],
"stage-3"
],
"env": {
"test": {
"presets": [
["env", { "targets": { "node": "current" }}]
]
}
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
]
],
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}
12 changes: 5 additions & 7 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
# editorconfig.org

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
trim_trailing_whitespace = false
trim_trailing_whitespace = false
8 changes: 8 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"printWidth": 100,
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false
}
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
MIT License

Copyright (c) 2018 John Datserakis, Inc.
Copyright (c) 2018 John Datserakis

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
88 changes: 42 additions & 46 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,19 @@ Get easy and reactive access to the width and height of your screen.
<img src="https://img.shields.io/twitter/url/https/github.com/johndatserakis/vue-screen-size.svg?style=social" alt="Tweet"></a>
</p>

### 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
```

Expand All @@ -34,82 +32,80 @@ Or you can include it through the browser at the bottom of your page:
<script src="https://unpkg.com/vue-screen-size/dist/vue-screen-size.min.js"></script>
```

### About
## About

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.

The issue with this is you have to worry about adding event listeners and then removing them later. We wanted to just be able to import something quickly and then be able to forget about it later. So this `mixin` does just that - just use `Vue.use()` or `mixins: [],` and you're off.

There is something to consider - where and how you include this library. There are two ways, make sure to be aware of the differences:

### Usage Example 1 - Whole app has access (Not Recommended)
## Usage Example 1 - Whole app has access (Not Recommended)

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)

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).
49 changes: 0 additions & 49 deletions build/rollup.config.js

This file was deleted.

99 changes: 44 additions & 55 deletions dist/vue-screen-size.esm.js
Original file line number Diff line number Diff line change
@@ -1,63 +1,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();
},
$vssHeight: function $vssHeight() {
return this.vssHeight || this.getScreenHeight();
},
mounted: function mounted() {
window.addEventListener('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();
},
destroyed: function destroyed() {
window.removeEventListener('resize', this.handleResize);
}
}

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 };
Loading

0 comments on commit d9625c9

Please sign in to comment.