1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | (function (global, factory) {
|
9 | typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@vue/composition-api'), require('ping.js')) :
|
10 | typeof define === 'function' && define.amd ? define(['exports', '@vue/composition-api', 'ping.js'], factory) :
|
11 | (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VOffline = {}, global.vueCompositionApi, global.ping));
|
12 | }(this, (function (exports, VueCompositionApi, Ping) { 'use strict';
|
13 |
|
14 | function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
15 |
|
16 | var VueCompositionApi__default = _interopDefaultLegacy(VueCompositionApi);
|
17 | var Ping__default = _interopDefaultLegacy(Ping);
|
18 |
|
19 | var script = VueCompositionApi.defineComponent({
|
20 | name: 'VOffline',
|
21 | props: {
|
22 | onlineClass: {
|
23 | type: String ,
|
24 | required: false,
|
25 | default: '',
|
26 | },
|
27 | offlineClass: {
|
28 | type: String ,
|
29 | required: false,
|
30 | default: '',
|
31 | },
|
32 | pingUrl: {
|
33 | type: String ,
|
34 | required: false,
|
35 | default: 'https://google.com',
|
36 | },
|
37 | },
|
38 | setup(props, { emit }) {
|
39 |
|
40 | const isOnline = VueCompositionApi.ref(navigator.onLine || false);
|
41 | const events = VueCompositionApi.ref(['online', 'offline', 'load']);
|
42 | const url = VueCompositionApi.ref(props.pingUrl || 'https://google.com');
|
43 |
|
44 |
|
45 | const wrapperClass = VueCompositionApi.computed(() => {
|
46 | if (isOnline.value) {
|
47 | return typeof props.onlineClass === 'string' ? props.onlineClass : '';
|
48 | } else {
|
49 | return typeof props.offlineClass === 'string'
|
50 | ? props.offlineClass
|
51 | : '';
|
52 | }
|
53 | });
|
54 |
|
55 | |
56 |
|
57 |
|
58 | events.value.forEach((event) => window.addEventListener(event, check));
|
59 |
|
60 | |
61 |
|
62 |
|
63 | VueCompositionApi.onBeforeUnmount(() => {
|
64 |
|
65 | events.value.forEach((event) =>
|
66 | window.removeEventListener(event, check),
|
67 | );
|
68 | });
|
69 |
|
70 |
|
71 | |
72 |
|
73 |
|
74 |
|
75 |
|
76 |
|
77 | async function check() {
|
78 | const p = new Ping__default['default']();
|
79 | try {
|
80 | const ping = await p.ping(url.value);
|
81 | if (ping || navigator.onLine) {
|
82 | isOnline.value = true;
|
83 | emit('detected-condition', isOnline.value);
|
84 | }
|
85 | } catch (error) {
|
86 | if (error || !navigator.onLine) {
|
87 | isOnline.value = false;
|
88 | emit('detected-condition', isOnline.value);
|
89 | }
|
90 | }
|
91 | }
|
92 |
|
93 | return {
|
94 | wrapperClass,
|
95 | };
|
96 | },
|
97 | });
|
98 |
|
99 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
100 | if (typeof shadowMode !== 'boolean') {
|
101 | createInjectorSSR = createInjector;
|
102 | createInjector = shadowMode;
|
103 | shadowMode = false;
|
104 | }
|
105 |
|
106 | const options = typeof script === 'function' ? script.options : script;
|
107 |
|
108 | if (template && template.render) {
|
109 | options.render = template.render;
|
110 | options.staticRenderFns = template.staticRenderFns;
|
111 | options._compiled = true;
|
112 |
|
113 | if (isFunctionalTemplate) {
|
114 | options.functional = true;
|
115 | }
|
116 | }
|
117 |
|
118 | if (scopeId) {
|
119 | options._scopeId = scopeId;
|
120 | }
|
121 | let hook;
|
122 | if (moduleIdentifier) {
|
123 |
|
124 | hook = function (context) {
|
125 |
|
126 | context =
|
127 | context ||
|
128 | (this.$vnode && this.$vnode.ssrContext) ||
|
129 | (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext);
|
130 |
|
131 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
132 | context = __VUE_SSR_CONTEXT__;
|
133 | }
|
134 |
|
135 | if (style) {
|
136 | style.call(this, createInjectorSSR(context));
|
137 | }
|
138 |
|
139 | if (context && context._registeredComponents) {
|
140 | context._registeredComponents.add(moduleIdentifier);
|
141 | }
|
142 | };
|
143 |
|
144 |
|
145 | options._ssrRegister = hook;
|
146 | }
|
147 | else if (style) {
|
148 | hook = shadowMode
|
149 | ? function (context) {
|
150 | style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
151 | }
|
152 | : function (context) {
|
153 | style.call(this, createInjector(context));
|
154 | };
|
155 | }
|
156 | if (hook) {
|
157 | if (options.functional) {
|
158 |
|
159 | const originalRender = options.render;
|
160 | options.render = function renderWithStyleInjection(h, context) {
|
161 | hook.call(context);
|
162 | return originalRender(h, context);
|
163 | };
|
164 | }
|
165 | else {
|
166 |
|
167 | const existing = options.beforeCreate;
|
168 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
169 | }
|
170 | }
|
171 | return script;
|
172 | }
|
173 |
|
174 |
|
175 | const __vue_script__ = script;
|
176 |
|
177 |
|
178 | var __vue_render__ = function () {
|
179 | var _vm = this;
|
180 | var _h = _vm.$createElement;
|
181 | var _c = _vm._self._c || _h;
|
182 | return _c("div", { class: _vm.wrapperClass }, [_vm._t("default")], 2)
|
183 | };
|
184 | var __vue_staticRenderFns__ = [];
|
185 | __vue_render__._withStripped = true;
|
186 |
|
187 |
|
188 | const __vue_inject_styles__ = undefined;
|
189 |
|
190 | const __vue_scope_id__ = undefined;
|
191 |
|
192 | const __vue_module_identifier__ = undefined;
|
193 |
|
194 | const __vue_is_functional_template__ = false;
|
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 |
|
202 |
|
203 | const __vue_component__ = normalizeComponent(
|
204 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
205 | __vue_inject_styles__,
|
206 | __vue_script__,
|
207 | __vue_scope_id__,
|
208 | __vue_is_functional_template__,
|
209 | __vue_module_identifier__,
|
210 | false,
|
211 | undefined,
|
212 | undefined,
|
213 | undefined
|
214 | );
|
215 |
|
216 | let installed = false;
|
217 |
|
218 | const install = {
|
219 | install(Vue) {
|
220 | if (installed) return;
|
221 | Vue.use(VueCompositionApi__default['default']);
|
222 | Vue.component('VOffline', __vue_component__);
|
223 | installed = true;
|
224 | },
|
225 | };
|
226 |
|
227 | exports.VOffline = __vue_component__;
|
228 | exports.default = install;
|
229 |
|
230 | Object.defineProperty(exports, '__esModule', { value: true });
|
231 |
|
232 | })));
|
233 |
|