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