├── .babelrc
├── .eslintignore
├── .gitignore
├── .npmignore
├── README.md
├── demo
    ├── .gitignore
    ├── package-lock.json
    ├── package.json
    ├── public
    │   ├── favicon.ico
    │   └── index.html
    ├── src
    │   ├── App.vue
    │   ├── assets
    │   │   └── logo.png
    │   ├── components
    │   │   └── HelloWorld.vue
    │   └── main.js
    └── yarn.lock
├── package-lock.json
├── package.json
├── src
    ├── VueStatus.vue
    └── index.js
├── webpack.config.js
└── yarn.lock


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     [
 4 |       "env",
 5 |       {
 6 |         "modules": false
 7 |       }
 8 |     ]
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | build/*.js


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist/
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mbj36/vue-status/7755a520bda5535f813ad7256a966c8baef37971/.npmignore


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-status
 2 | 
 3 | Vue component for detecting the network status - online or offline
 4 | 
 5 | ## Requirements
 6 | 
 7 | * Vue.js 2.x
 8 | 
 9 | ## Installation
10 | 
11 | `yarn add vue-status`
12 | 
13 | or
14 | 
15 | `npm install vue-status`
16 | 
17 | ## Demo
18 | 
19 | [![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lllnp9m84l)
20 | 
21 | ## Usage
22 | 
23 | To use it locally in your component
24 | 
25 | `import VueStatus from 'vue-status'`
26 | 
27 | ```javascript
28 | export default {
29 |   components: {
30 |     VueStatus
31 |   }
32 | };
33 | ```
34 | 
35 | ```html
36 | <vue-status>
37 |     <h2 slot="online">You are online (Any online content can be put here)</h2>
38 |     <h2 slot="offline">You are offline (Any Offline content can be put here)</h2>
39 |  </vue-status>
40 | ```
41 | 


--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve --open",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "vue": "^2.5.16",
12 |     "vue-status": "^1.0.0"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "^3.0.0-beta.11",
16 |     "@vue/cli-plugin-eslint": "^3.0.0-beta.11",
17 |     "@vue/cli-service": "^3.0.0-beta.11",
18 |     "vue-template-compiler": "^2.5.16"
19 |   },
20 |   "babel": {
21 |     "presets": [
22 |       "@vue/app"
23 |     ]
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "rules": {},
35 |     "parserOptions": {
36 |       "parser": "babel-eslint"
37 |     }
38 |   },
39 |   "postcss": {
40 |     "plugins": {
41 |       "autoprefixer": {}
42 |     }
43 |   },
44 |   "browserslist": [
45 |     "> 1%",
46 |     "last 2 versions",
47 |     "not ie <= 8"
48 |   ]
49 | }
50 | 


--------------------------------------------------------------------------------
/demo/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mbj36/vue-status/7755a520bda5535f813ad7256a966c8baef37971/demo/public/favicon.ico


--------------------------------------------------------------------------------
/demo/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>demo</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/demo/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <img src="./assets/logo.png">
 4 |     <HelloWorld msg="Welcome to Your Vue.js App"/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import HelloWorld from './components/HelloWorld.vue'
10 | 
11 | export default {
12 |   name: 'app',
13 |   components: {
14 |     HelloWorld
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | #app {
21 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
22 |   -webkit-font-smoothing: antialiased;
23 |   -moz-osx-font-smoothing: grayscale;
24 |   text-align: center;
25 |   color: #2c3e50;
26 |   margin-top: 60px;
27 | }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/demo/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mbj36/vue-status/7755a520bda5535f813ad7256a966c8baef37971/demo/src/assets/logo.png


--------------------------------------------------------------------------------
/demo/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <vue-status>
 3 |     <h2 slot="online">You are online</h2>
 4 |     <h2 slot="offline">You are offline</h2>
 5 |   </vue-status>
 6 | </template>
 7 | 
 8 | <script>
 9 |   import VueStatus from 'vue-status';
10 |   export default {
11 |     components: {
12 |       VueStatus
13 |     }
14 |   };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/demo/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-status",
 3 |   "version": "1.0.1",
 4 |   "description": "",
 5 |   "main": "./src/index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "build": "webpack -p"
 9 |   },
10 |   "author": {
11 |     "name": "Mohit Bajoria",
12 |     "email": "mohitbajo36@gmail.com",
13 |     "url": "https://mbj36.xyz"
14 |   },
15 |   "keywords": ["vuejs", "offline", "network-detection", "vue-component"],
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "git+https://github.com/mbj36/vue-status.git"
19 |   },
20 |   "license": "ISC",
21 |   "dependencies": {
22 |     "vue": "^2.5.16"
23 |   },
24 |   "devDependencies": {
25 |     "babel-core": "^6.26.3",
26 |     "babel-loader": "^7.1.4",
27 |     "babel-preset-env": "^1.7.0",
28 |     "cross-env": "^5.1.6",
29 |     "css-loader": "^0.28.11",
30 |     "file-loader": "^1.1.11",
31 |     "node-sass": "^4.9.0",
32 |     "sass-loader": "^7.0.1",
33 |     "vue-loader": "^15.2.0",
34 |     "vue-template-compiler": "^2.5.16",
35 |     "webpack": "^4.8.3",
36 |     "webpack-cli": "^2.1.3",
37 |     "webpack-dev-server": "^3.1.4"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/VueStatus.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <slot v-if="isOnline" name="online" />
 4 |         <slot v-else name="offline" />
 5 |     </div>
 6 | </template>
 7 | 
 8 | <script>
 9 |     const networkEvents = ['online', 'offline'];
10 |     export default {
11 |       name: 'vue-status',
12 |       data() {
13 |         return {
14 |           isOnline: navigator.onLine || false
15 |         };
16 |       },
17 |       created() {
18 |         networkEvents.forEach(event =>
19 |           window.addEventListener(event, this.currentStatus)
20 |         );
21 |       },
22 |       beforeDestroy() {
23 |         networkEvents.forEach(event =>
24 |           window.removeEventListener(event, this.currentStatus)
25 |         );
26 |       },
27 |       methods: {
28 |         currentStatus() {
29 |           this.isOnline = navigator.onLine || false;
30 |           this.$emit('current-status', this.isOnline);
31 |         }
32 |       }
33 |     };
34 | </script>


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import VueStatus from './VueStatus.vue';
2 | 
3 | export default VueStatus;
4 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var webpack = require('webpack');
 3 | var VueLoaderPlugin = require('vue-loader/lib/plugin');
 4 | module.exports = {
 5 |   entry: './src/index.js',
 6 | 
 7 |   module: {
 8 |     rules: [
 9 |       // use babel-loader for js files
10 |       { test: /\.js$/, use: 'babel-loader' },
11 |       // use vue-loader for .vue files
12 |       { test: /\.vue$/, use: 'vue-loader' }
13 |     ]
14 |   },
15 |   // default for pretty much every project
16 |   context: __dirname,
17 |   // specify your entry/main file
18 |   output: {
19 |     // specify your output directory...
20 |     path: path.resolve(__dirname, './dist'),
21 |     // and filename
22 |     filename: 'vue-status.js'
23 |   },
24 |   plugins: [new VueLoaderPlugin()]
25 | };
26 | 
27 | if (process.env.NODE_ENV === 'production') {
28 |   module.exports.devtool = '#source-map';
29 |   module.exports.plugins = (module.exports.plugins || []).concat([
30 |     new webpack.DefinePlugin({
31 |       'process.env': {
32 |         NODE_ENV: '"production"'
33 |       }
34 |     }),
35 |     new webpack.optimize.UglifyJsPlugin({
36 |       sourceMap: true,
37 |       compress: {
38 |         warnings: false
39 |       }
40 |     }),
41 |     new webpack.LoaderOptionsPlugin({
42 |       minimize: true
43 |     })
44 |   ]);
45 | }
46 | 


--------------------------------------------------------------------------------