Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request #17 from vinayakkulkarni/update-docs
Minor Release - 1.1.0
  • Loading branch information
vinayakkulkarni committed Mar 18, 2019
2 parents 52b2e00 + 7dd1b6e commit 938e7df
Show file tree
Hide file tree
Showing 15 changed files with 3,287 additions and 3,265 deletions.
2 changes: 1 addition & 1 deletion .babelrc
@@ -1,7 +1,7 @@
{
"presets": [
[
"es2015",
"env",
{
"modules": false
}
Expand Down
18 changes: 18 additions & 0 deletions .eslintrc.js
@@ -0,0 +1,18 @@
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'plugin:vue/recommended',
],
plugins: [
'vue',
],
// add your custom rules here
rules: {}
}
5 changes: 5 additions & 0 deletions .prettierrc
@@ -0,0 +1,5 @@
{
"semi": true,
"singleQuote": true,
"trailingComma": "all"
}
81 changes: 55 additions & 26 deletions README.md
Expand Up @@ -18,68 +18,97 @@ npm install v-offline
yarn add v-offline
```

CDN: [UNPKG](https://unpkg.com/v-offline/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/v-offline/dist/)
CDN: [UNPKG](https://unpkg.com/v-offline/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/v-offline/dist/) (available as `window.VOffline`)

## :white_check_mark: Usage :mortar_board:

Register the component globally:

```javascript
Vue.component('detectNetwork', require('v-offline'));
Vue.component('VOffline', require('v-offline'));
```

Or use locally

```javascript
import detectNetwork from 'v-offline';
import VOffline from 'v-offline';
```

## :white_check_mark: Example 1 :four_leaf_clover:

### HTML
```html
<detect-network v-on:detected-condition="detected">
<div slot="online">Your Online Content!</div>
<div slot="offline">Your Offline Content!</div>
</detect-network>
<v-offline
online-class="online"
offline-class="offline"
@detected-condition="amIOnline">
<template v-slot:[onlineSlot] :slot-name="onlineSlot">
( Online: {{ onLine }} )
</template>
<template v-slot:[offlineSlot] :slot-name="offlineSlot">
( Online: {{ onLine }} )
</template>
</v-offline>
```

### JS
```javascript
import VOffline from 'v-offline';

Vue.component('example-component', {
data() {
return {
state: null,
};
components: {
VOffline
},
data: () => ({
onLine: null,
onlineSlot: 'online',
offlineSlot: 'offline',
}),
methods: {
detected(e) {
this.state = e;
amIOnline(e) {
this.onLine = e;
},
},
});
```

## :white_check_mark: Example 2 :four_leaf_clover:

```html
<detect-network>
<div slot="online">Your Online Content!</div>
<div slot="offline">Your Offline Content!</div>
</detect-network>
### CSS
```css
.offline {
background-color: #fc9842;
background-image: linear-gradient(315deg, #fc9842 0%, #fe5f75 74%);
}
.online {
background-color: #00b712;
background-image: linear-gradient(315deg, #00b712 0%, #5aff15 74%);
}
```

### :white_check_mark: :book: Props

| Name | Type | Required? | Description |
| -------------- | ------ | --------- | ----------------------------------------------------------- |
| `onlineClass` | String | No | Styling the `div` which you want to give if you're online. |
| `offlineClass` | String | No | Styling the `div` which you want to give if you're offline. |
| Name | Type | Required? | Description |
| -------------- | ------ | --------- | ----------------------------------------------------------- |
| `slot-name` | String | No | The name of the slot, refer to the [v-slot docs](https://vuejs.org/v2/guide/components-slots.html#Dynamic-Slot-Names) |
| `online-class` | String | No | Styling the `div` which you want to give if you're online. |
| `offline-class` | String | No | Styling the `div` which you want to give if you're offline. |

### :white_check_mark: :ear: Events

| Name | Description |
| -------------------- | --------------------------------------------------------------------------- |
| `detected-condition` | Emits an Boolean value which can be used for multiple purposes in your app. |

## NPM :octocat:
## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Author

**v-offline** © [Vinayak](https://github.com/vinayakkulkarni), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by Vinayak Kulkarni with help from contributors ([list](https://github.com/vinayakkulkarni/v-offline/contributors)).

[![NPM](https://nodei.co/npm/v-offline.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/v-offline/)
> [vinayak.pw](https://vinayak.pw) · GitHub [@vinayakkulkarni](https://github.com/vinayakkulkarni) · Twitter [@\_vinayak_k](https://twitter.com/_vinayak_k)
2 changes: 2 additions & 0 deletions build/rollup.conf.js
@@ -1,9 +1,11 @@
import babel from 'rollup-plugin-babel';
import vue from 'rollup-plugin-vue';
import commonjs from 'rollup-plugin-commonjs';

export default {
input: 'src/index.js',
plugins: [
commonjs(),
vue(),
babel(),
],
Expand Down
4 changes: 3 additions & 1 deletion build/rollup.min.conf.js
@@ -1,13 +1,15 @@
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import vue from 'rollup-plugin-vue';
import commonjs from 'rollup-plugin-commonjs';

export default {
input: 'src/index.js',
plugins: [
commonjs(),
vue(),
babel(),
uglify(),
babel(),
],
output: {
format: 'umd',
Expand Down
116 changes: 109 additions & 7 deletions dist/v-offline.esm.js
@@ -1,25 +1,35 @@
var EVENTS = ['online', 'offline', 'load'];

var VOffline = { render: function render() {
var _vm = this;var _h = _vm.$createElement;var _c = _vm._self._c || _h;return _c('div', { class: { onlineClass: _vm.isOnline, offlineClass: !_vm.isOnline } }, [_vm.isOnline ? _vm._t("online") : _vm._t("offline")], 2);
}, staticRenderFns: [],
name: 'v-offline',
var script = {
name: 'VOffline',
props: {
slotName: {
type: String,
required: false,
default: 'online'
},
onlineClass: {
type: String,
required: false
required: false,
default: ''
},
offlineClass: {
type: String,
required: false
required: false,
default: ''
}
},
data: function data() {
return {
isOnline: navigator.onLine || false
};
},
mounted: function mounted() {
computed: {
computedClass: function computedClass() {
return this.isOnline ? this.onlineClass : this.offlineClass;
}
},
created: function created() {
var _this = this;

EVENTS.forEach(function (event) {
Expand All @@ -42,4 +52,96 @@ var VOffline = { render: function render() {
}
};

function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
}

var options = typeof script === 'function' ? script.options : script;

if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true;

if (isFunctionalTemplate) {
options.functional = true;
}
}

if (scopeId) {
options._scopeId = scopeId;
}

var hook;

if (moduleIdentifier) {
hook = function hook(context) {
context = context || this.$vnode && this.$vnode.ssrContext || this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext;

if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
}

if (style) {
style.call(this, createInjectorSSR(context));
}

if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
};

options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}

if (hook) {
if (options.functional) {
var originalRender = options.render;

options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}

return script;
}

var normalizeComponent_1 = normalizeComponent;

var __vue_script__ = script;

var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", { class: _vm.computedClass }, [_vm._t(_vm.slotName)], 2);
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;

var __vue_inject_styles__ = undefined;

var __vue_scope_id__ = undefined;

var __vue_module_identifier__ = undefined;

var __vue_is_functional_template__ = false;


var VOffline = normalizeComponent_1({ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);

export default VOffline;

0 comments on commit 938e7df

Please sign in to comment.