@sysvale/show 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +44 -0
- package/dist/@sysvale/show.esm.js +398 -0
- package/dist/@sysvale/show.min.js +1 -0
- package/dist/@sysvale/show.ssr.js +372 -0
- package/package.json +131 -0
package/README.md
ADDED
@@ -0,0 +1,44 @@
|
|
1
|
+
## Instalando
|
2
|
+
|
3
|
+
- O SHOW pode ser instalado com o npm:
|
4
|
+
```bash
|
5
|
+
$ npm i @sysvale/show;
|
6
|
+
```
|
7
|
+
|
8
|
+
## Usando
|
9
|
+
|
10
|
+
|
11
|
+
```bash
|
12
|
+
$ npm i @sysvale/show;
|
13
|
+
```
|
14
|
+
|
15
|
+
- Para usar o SHOW, importe a biblioteca no seu entry point, provavelmente vai ser seu main.js ou app.js:
|
16
|
+
```js
|
17
|
+
import SHOW from '@sysvale/show';
|
18
|
+
```
|
19
|
+
|
20
|
+
- Para usar o SHOW, importe a biblioteca no seu entry point, provavelmente vai ser seu main.js ou app.js:
|
21
|
+
|
22
|
+
- E instale o SHOW:
|
23
|
+
```js
|
24
|
+
Vue.use(SHOW);
|
25
|
+
```
|
26
|
+
|
27
|
+
- Agora para utilizar os componentes, basta usá-los no seu template. Como exemplo, para usar a
|
28
|
+
[RequestProvider]():
|
29
|
+
```html
|
30
|
+
<show-request-provider
|
31
|
+
v-slot="{ loading, failed, errorMessage, data: posts }"
|
32
|
+
:service="getPosts"
|
33
|
+
>
|
34
|
+
<div>
|
35
|
+
<div v-if="loading">Carregando...</div>
|
36
|
+
<div v-else-if="failed">{{ errorMessage }}</div>
|
37
|
+
<div v-else>
|
38
|
+
<div v-for="post in posts">
|
39
|
+
<a :href="post.link">{{ post.title }}</a>
|
40
|
+
</div>
|
41
|
+
</div>
|
42
|
+
</div>
|
43
|
+
</show-request-provider>
|
44
|
+
```
|
@@ -0,0 +1,398 @@
|
|
1
|
+
import swal from 'sweetalert2';
|
2
|
+
import get$1 from 'lodash.get';
|
3
|
+
import { isArray, isObject, snakeCase, get } from 'lodash';
|
4
|
+
|
5
|
+
var convertKeysToCamelCase = function (data) {
|
6
|
+
if (_.isArray(data)) {
|
7
|
+
return data.map(function (element) {
|
8
|
+
if (_.isObject(element) || _.isArray(element)) {
|
9
|
+
return convertKeysToCamelCase(element);
|
10
|
+
}
|
11
|
+
return element;
|
12
|
+
});
|
13
|
+
}
|
14
|
+
var newData = {};
|
15
|
+
Object.keys(data).forEach(function (key) {
|
16
|
+
if (_.isObject(data[key]) || _.isArray(data[key])) {
|
17
|
+
newData[_.camelCase(key)] = convertKeysToCamelCase(data[key]);
|
18
|
+
} else {
|
19
|
+
newData[_.camelCase(key)] = data[key];
|
20
|
+
}
|
21
|
+
});
|
22
|
+
|
23
|
+
return newData;
|
24
|
+
};
|
25
|
+
|
26
|
+
var convertKeysToSnakeCase = function (data) {
|
27
|
+
if (isArray(data)) {
|
28
|
+
return data.map(function (element) {
|
29
|
+
if (isObject(element) || isArray(element)) {
|
30
|
+
return convertKeysToSnakeCase(element);
|
31
|
+
}
|
32
|
+
return element;
|
33
|
+
});
|
34
|
+
}
|
35
|
+
var newData = {};
|
36
|
+
Object.keys(data).forEach(function (key) {
|
37
|
+
if (isObject(data[key]) || isArray(data[key])) {
|
38
|
+
newData[snakeCase(key)] = convertKeysToSnakeCase(data[key]);
|
39
|
+
} else {
|
40
|
+
newData[snakeCase(key)] = data[key];
|
41
|
+
}
|
42
|
+
});
|
43
|
+
|
44
|
+
return newData;
|
45
|
+
};
|
46
|
+
|
47
|
+
function getFirstErrorMessage(response, fallbackMsg) {
|
48
|
+
if ( fallbackMsg === void 0 ) fallbackMsg = 'Não conseguimos processar sua requisição. Tente novamente.';
|
49
|
+
|
50
|
+
var errors = get(response, 'errors', false);
|
51
|
+
if (!errors) { return fallbackMsg; }
|
52
|
+
var ref = Object.keys(errors);
|
53
|
+
var firstKey = ref[0];
|
54
|
+
return errors[firstKey][0] || fallbackMsg;
|
55
|
+
}
|
56
|
+
|
57
|
+
var SUCCESS_SWAL_DEFAULT_CONFIG = {
|
58
|
+
title: 'Informações salvas com sucesso!',
|
59
|
+
icon: 'success',
|
60
|
+
text: '',
|
61
|
+
showCloseButton: true,
|
62
|
+
confirmButtonText: 'Ok',
|
63
|
+
};
|
64
|
+
|
65
|
+
var ERROR_SWAL_DEFAULT_CONFIG = {
|
66
|
+
icon: 'error',
|
67
|
+
title: 'Erro',
|
68
|
+
text: 'mensagem de error',
|
69
|
+
showCancelButton: true,
|
70
|
+
showConfirmButton: false,
|
71
|
+
cancelButtonText: 'Fechar',
|
72
|
+
};
|
73
|
+
|
74
|
+
var script = {
|
75
|
+
props: {
|
76
|
+
service: {
|
77
|
+
type: Function,
|
78
|
+
default: function () { return ({}); },
|
79
|
+
},
|
80
|
+
payload: {
|
81
|
+
type: Object,
|
82
|
+
default: function () { return ({}); },
|
83
|
+
},
|
84
|
+
payloadResolver: {
|
85
|
+
type: Function,
|
86
|
+
default: function (data) { return convertKeysToSnakeCase(data); },
|
87
|
+
},
|
88
|
+
dataResolver: {
|
89
|
+
type: Function,
|
90
|
+
default: function (data) { return convertKeysToCamelCase(data); },
|
91
|
+
},
|
92
|
+
successSwalConfig: {
|
93
|
+
type: Object,
|
94
|
+
default: function () { return SUCCESS_SWAL_DEFAULT_CONFIG; },
|
95
|
+
},
|
96
|
+
errorSwalConfig: {
|
97
|
+
type: Object,
|
98
|
+
default: function () { return ERROR_SWAL_DEFAULT_CONFIG; },
|
99
|
+
},
|
100
|
+
errorFeedbackResolver: {
|
101
|
+
type: Function,
|
102
|
+
},
|
103
|
+
successFeedbackResolver: {
|
104
|
+
type: Function,
|
105
|
+
},
|
106
|
+
showSuccessFeedback: {
|
107
|
+
type: Boolean,
|
108
|
+
default: false,
|
109
|
+
},
|
110
|
+
hideErrorFeedback: {
|
111
|
+
type: Boolean,
|
112
|
+
default: false,
|
113
|
+
},
|
114
|
+
immediate: {
|
115
|
+
type: Boolean,
|
116
|
+
default: false,
|
117
|
+
},
|
118
|
+
forceResetError: {
|
119
|
+
type: Boolean,
|
120
|
+
default: false,
|
121
|
+
},
|
122
|
+
initialData: {
|
123
|
+
default: null,
|
124
|
+
},
|
125
|
+
},
|
126
|
+
|
127
|
+
data: function data() {
|
128
|
+
return {
|
129
|
+
loading: false,
|
130
|
+
failed: false,
|
131
|
+
error: null,
|
132
|
+
data: this.initialData,
|
133
|
+
};
|
134
|
+
},
|
135
|
+
|
136
|
+
watch: {
|
137
|
+
forceResetError: function forceResetError(newValue) {
|
138
|
+
if (newValue) {
|
139
|
+
this.error = null;
|
140
|
+
}
|
141
|
+
},
|
142
|
+
},
|
143
|
+
|
144
|
+
mounted: function mounted() {
|
145
|
+
if (this.immediate) {
|
146
|
+
this.action();
|
147
|
+
}
|
148
|
+
},
|
149
|
+
|
150
|
+
methods: {
|
151
|
+
action: function action(payloadFromArgs) {
|
152
|
+
var this$1 = this;
|
153
|
+
|
154
|
+
this.startRequest();
|
155
|
+
var payload = payloadFromArgs || this.payload;
|
156
|
+
this.service(this.payloadResolver(payload))
|
157
|
+
.then(
|
158
|
+
function (data) {
|
159
|
+
this$1.data = this$1.dataResolver(data);
|
160
|
+
this$1.$emit('success', this$1.data);
|
161
|
+
|
162
|
+
if (this$1.showSuccessFeedback) {
|
163
|
+
if (this$1.successFeedbackResolver) {
|
164
|
+
this$1.successFeedbackResolver({ vm: this$1, data: this$1.data });
|
165
|
+
return;
|
166
|
+
}
|
167
|
+
swal.fire(Object.assign({}, SUCCESS_SWAL_DEFAULT_CONFIG,
|
168
|
+
this$1.successSwalConfig)).then(function () {
|
169
|
+
this$1.$emit('success-feedback-ok', this$1.data);
|
170
|
+
});
|
171
|
+
}
|
172
|
+
}
|
173
|
+
).catch(
|
174
|
+
function (error) {
|
175
|
+
this$1.failed = true;
|
176
|
+
this$1.error = error;
|
177
|
+
this$1.$emit('error', error);
|
178
|
+
|
179
|
+
if (!this$1.hideErrorFeedback) {
|
180
|
+
var errorMessage = getFirstErrorMessage(
|
181
|
+
get$1(error, 'response.data', null),
|
182
|
+
'Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.'
|
183
|
+
);
|
184
|
+
|
185
|
+
if (this$1.errorFeedback) {
|
186
|
+
this$1.errorFeedback(this$1);
|
187
|
+
return;
|
188
|
+
}
|
189
|
+
|
190
|
+
if (this$1.errorFeedbackResolver) {
|
191
|
+
this$1.errorFeedbackResolver({ vm: this$1, error: error, errorMessage: errorMessage });
|
192
|
+
return;
|
193
|
+
}
|
194
|
+
|
195
|
+
swal.fire(Object.assign({}, ERROR_SWAL_DEFAULT_CONFIG,
|
196
|
+
this$1.errorSwalConfig,
|
197
|
+
{text: errorMessage})).then(function (result) {
|
198
|
+
if (result.isDismissed) {
|
199
|
+
this$1.$emit('error-feedback-cancel', error);
|
200
|
+
}
|
201
|
+
if (result.isConfirmed) {
|
202
|
+
this$1.$emit('error-feedback-ok', error);
|
203
|
+
}
|
204
|
+
});
|
205
|
+
}
|
206
|
+
}
|
207
|
+
).finally(function () {
|
208
|
+
this$1.loading = false;
|
209
|
+
});
|
210
|
+
},
|
211
|
+
|
212
|
+
labelHelper: function labelHelper(label, loadingLabel) {
|
213
|
+
if ( loadingLabel === void 0 ) loadingLabel = 'Carregando...';
|
214
|
+
|
215
|
+
if (this.loading) {
|
216
|
+
return loadingLabel;
|
217
|
+
}
|
218
|
+
return label;
|
219
|
+
},
|
220
|
+
|
221
|
+
startRequest: function startRequest() {
|
222
|
+
this.loading = true;
|
223
|
+
this.failed = false;
|
224
|
+
this.error = null;
|
225
|
+
},
|
226
|
+
},
|
227
|
+
|
228
|
+
render: function render() {
|
229
|
+
var slot = this.$scopedSlots.default({
|
230
|
+
loading: this.loading,
|
231
|
+
failed: this.failed,
|
232
|
+
error: this.error,
|
233
|
+
data: this.data,
|
234
|
+
action: this.action,
|
235
|
+
labelHelper: this.labelHelper,
|
236
|
+
errorMessage: getFirstErrorMessage(
|
237
|
+
get$1(this.error, 'response.data', null),
|
238
|
+
'Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.'
|
239
|
+
),
|
240
|
+
});
|
241
|
+
|
242
|
+
return Array.isArray(slot) ? slot[0] : slot;
|
243
|
+
},
|
244
|
+
};
|
245
|
+
|
246
|
+
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
247
|
+
if (typeof shadowMode !== 'boolean') {
|
248
|
+
createInjectorSSR = createInjector;
|
249
|
+
createInjector = shadowMode;
|
250
|
+
shadowMode = false;
|
251
|
+
}
|
252
|
+
// Vue.extend constructor export interop.
|
253
|
+
var options = typeof script === 'function' ? script.options : script;
|
254
|
+
// render functions
|
255
|
+
if (template && template.render) {
|
256
|
+
options.render = template.render;
|
257
|
+
options.staticRenderFns = template.staticRenderFns;
|
258
|
+
options._compiled = true;
|
259
|
+
// functional template
|
260
|
+
if (isFunctionalTemplate) {
|
261
|
+
options.functional = true;
|
262
|
+
}
|
263
|
+
}
|
264
|
+
// scopedId
|
265
|
+
if (scopeId) {
|
266
|
+
options._scopeId = scopeId;
|
267
|
+
}
|
268
|
+
var hook;
|
269
|
+
if (moduleIdentifier) {
|
270
|
+
// server build
|
271
|
+
hook = function (context) {
|
272
|
+
// 2.3 injection
|
273
|
+
context =
|
274
|
+
context || // cached call
|
275
|
+
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
276
|
+
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
|
277
|
+
// 2.2 with runInNewContext: true
|
278
|
+
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
279
|
+
context = __VUE_SSR_CONTEXT__;
|
280
|
+
}
|
281
|
+
// inject component styles
|
282
|
+
if (style) {
|
283
|
+
style.call(this, createInjectorSSR(context));
|
284
|
+
}
|
285
|
+
// register component module identifier for async chunk inference
|
286
|
+
if (context && context._registeredComponents) {
|
287
|
+
context._registeredComponents.add(moduleIdentifier);
|
288
|
+
}
|
289
|
+
};
|
290
|
+
// used by ssr in case component is cached and beforeCreate
|
291
|
+
// never gets called
|
292
|
+
options._ssrRegister = hook;
|
293
|
+
}
|
294
|
+
else if (style) {
|
295
|
+
hook = shadowMode
|
296
|
+
? function (context) {
|
297
|
+
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
298
|
+
}
|
299
|
+
: function (context) {
|
300
|
+
style.call(this, createInjector(context));
|
301
|
+
};
|
302
|
+
}
|
303
|
+
if (hook) {
|
304
|
+
if (options.functional) {
|
305
|
+
// register for functional component in vue file
|
306
|
+
var originalRender = options.render;
|
307
|
+
options.render = function renderWithStyleInjection(h, context) {
|
308
|
+
hook.call(context);
|
309
|
+
return originalRender(h, context);
|
310
|
+
};
|
311
|
+
}
|
312
|
+
else {
|
313
|
+
// inject component registration as beforeCreate hook
|
314
|
+
var existing = options.beforeCreate;
|
315
|
+
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
316
|
+
}
|
317
|
+
}
|
318
|
+
return script;
|
319
|
+
}
|
320
|
+
|
321
|
+
/* script */
|
322
|
+
var __vue_script__ = script;
|
323
|
+
|
324
|
+
/* template */
|
325
|
+
|
326
|
+
/* style */
|
327
|
+
var __vue_inject_styles__ = undefined;
|
328
|
+
/* scoped */
|
329
|
+
var __vue_scope_id__ = undefined;
|
330
|
+
/* module identifier */
|
331
|
+
var __vue_module_identifier__ = undefined;
|
332
|
+
/* functional template */
|
333
|
+
var __vue_is_functional_template__ = undefined;
|
334
|
+
/* style inject */
|
335
|
+
|
336
|
+
/* style inject SSR */
|
337
|
+
|
338
|
+
/* style inject shadow dom */
|
339
|
+
|
340
|
+
|
341
|
+
|
342
|
+
var __vue_component__ = /*#__PURE__*/normalizeComponent(
|
343
|
+
{},
|
344
|
+
__vue_inject_styles__,
|
345
|
+
__vue_script__,
|
346
|
+
__vue_scope_id__,
|
347
|
+
__vue_is_functional_template__,
|
348
|
+
__vue_module_identifier__,
|
349
|
+
false,
|
350
|
+
undefined,
|
351
|
+
undefined,
|
352
|
+
undefined
|
353
|
+
);
|
354
|
+
|
355
|
+
|
356
|
+
|
357
|
+
var components = /*#__PURE__*/Object.freeze({
|
358
|
+
__proto__: null,
|
359
|
+
RequestProvider: __vue_component__
|
360
|
+
});
|
361
|
+
|
362
|
+
// install function executed by Vue.use()
|
363
|
+
function install(Vue) {
|
364
|
+
if (install.installed) { return; }
|
365
|
+
|
366
|
+
install.installed = true;
|
367
|
+
|
368
|
+
Object.defineProperty(Vue.prototype, '_', { value: _ });
|
369
|
+
|
370
|
+
Object.keys(components).forEach(function (componentName) {
|
371
|
+
Vue.component(
|
372
|
+
("show-" + (componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase())),
|
373
|
+
components[componentName]
|
374
|
+
);
|
375
|
+
});
|
376
|
+
}
|
377
|
+
|
378
|
+
// Create module definition for Vue.use()
|
379
|
+
var plugin = {
|
380
|
+
install: install,
|
381
|
+
};
|
382
|
+
|
383
|
+
// To auto-install when vue is found
|
384
|
+
/* global window global */
|
385
|
+
var GlobalVue = null;
|
386
|
+
|
387
|
+
if (typeof window !== 'undefined') {
|
388
|
+
GlobalVue = window.Vue;
|
389
|
+
} else if (typeof global !== 'undefined') {
|
390
|
+
GlobalVue = global.Vue;
|
391
|
+
}
|
392
|
+
|
393
|
+
if (GlobalVue) {
|
394
|
+
GlobalVue.use(plugin);
|
395
|
+
}
|
396
|
+
|
397
|
+
export default plugin;
|
398
|
+
export { __vue_component__ as RequestProvider };
|
@@ -0,0 +1 @@
|
|
1
|
+
var SHOW=function(e,t,r,o){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t,r=r&&Object.prototype.hasOwnProperty.call(r,"default")?r.default:r;var n=function(e){if(_.isArray(e))return e.map((function(e){return _.isObject(e)||_.isArray(e)?n(e):e}));var t={};return Object.keys(e).forEach((function(r){_.isObject(e[r])||_.isArray(e[r])?t[_.camelCase(r)]=n(e[r]):t[_.camelCase(r)]=e[r]})),t},a=function(e){if(o.isArray(e))return e.map((function(e){return o.isObject(e)||o.isArray(e)?a(e):e}));var t={};return Object.keys(e).forEach((function(r){o.isObject(e[r])||o.isArray(e[r])?t[o.snakeCase(r)]=a(e[r]):t[o.snakeCase(r)]=e[r]})),t};function i(e,t){void 0===t&&(t="Não conseguimos processar sua requisição. Tente novamente.");var r=o.get(e,"errors",!1);return r&&r[Object.keys(r)[0]][0]||t}var s={title:"Informações salvas com sucesso!",icon:"success",text:"",showCloseButton:!0,confirmButtonText:"Ok"},c={icon:"error",title:"Erro",text:"mensagem de error",showCancelButton:!0,showConfirmButton:!1,cancelButtonText:"Fechar"};function u(e,t,r,o,n,a,i,s,c,u){"boolean"!=typeof i&&(c=s,s=i,i=!1);var l,d="function"==typeof r?r.options:r;if(e&&e.render&&(d.render=e.render,d.staticRenderFns=e.staticRenderFns,d._compiled=!0,n&&(d.functional=!0)),o&&(d._scopeId=o),a?(l=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,c(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},d._ssrRegister=l):t&&(l=i?function(e){t.call(this,u(e,this.$root.$options.shadowRoot))}:function(e){t.call(this,s(e))}),l)if(d.functional){var f=d.render;d.render=function(e,t){return l.call(t),f(e,t)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,l):[l]}return r}var l=u({},void 0,{props:{service:{type:Function,default:function(){return{}}},payload:{type:Object,default:function(){return{}}},payloadResolver:{type:Function,default:function(e){return a(e)}},dataResolver:{type:Function,default:function(e){return n(e)}},successSwalConfig:{type:Object,default:function(){return s}},errorSwalConfig:{type:Object,default:function(){return c}},errorFeedbackResolver:{type:Function},successFeedbackResolver:{type:Function},showSuccessFeedback:{type:Boolean,default:!1},hideErrorFeedback:{type:Boolean,default:!1},immediate:{type:Boolean,default:!1},forceResetError:{type:Boolean,default:!1},initialData:{default:null}},data:function(){return{loading:!1,failed:!1,error:null,data:this.initialData}},watch:{forceResetError:function(e){e&&(this.error=null)}},mounted:function(){this.immediate&&this.action()},methods:{action:function(e){var o=this;this.startRequest();var n=e||this.payload;this.service(this.payloadResolver(n)).then((function(e){if(o.data=o.dataResolver(e),o.$emit("success",o.data),o.showSuccessFeedback){if(o.successFeedbackResolver)return void o.successFeedbackResolver({vm:o,data:o.data});t.fire(Object.assign({},s,o.successSwalConfig)).then((function(){o.$emit("success-feedback-ok",o.data)}))}})).catch((function(e){if(o.failed=!0,o.error=e,o.$emit("error",e),!o.hideErrorFeedback){var n=i(r(e,"response.data",null),"Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.");if(o.errorFeedback)return void o.errorFeedback(o);if(o.errorFeedbackResolver)return void o.errorFeedbackResolver({vm:o,error:e,errorMessage:n});t.fire(Object.assign({},c,o.errorSwalConfig,{text:n})).then((function(t){t.isDismissed&&o.$emit("error-feedback-cancel",e),t.isConfirmed&&o.$emit("error-feedback-ok",e)}))}})).finally((function(){o.loading=!1}))},labelHelper:function(e,t){return void 0===t&&(t="Carregando..."),this.loading?t:e},startRequest:function(){this.loading=!0,this.failed=!1,this.error=null}},render:function(){var e=this.$scopedSlots.default({loading:this.loading,failed:this.failed,error:this.error,data:this.data,action:this.action,labelHelper:this.labelHelper,errorMessage:i(r(this.error,"response.data",null),"Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.")});return Array.isArray(e)?e[0]:e}},void 0,void 0,void 0,!1,void 0,void 0,void 0),d=Object.freeze({__proto__:null,RequestProvider:l});var f={install:function e(t){e.installed||(e.installed=!0,Object.defineProperty(t.prototype,"_",{value:_}),Object.keys(d).forEach((function(e){t.component("show-"+e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),d[e])})))}},p=null;return"undefined"!=typeof window?p=window.Vue:"undefined"!=typeof global&&(p=global.Vue),p&&p.use(f),e.RequestProvider=l,e.default=f,e}({},swal,get,lodash);
|
@@ -0,0 +1,372 @@
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});function _interopDefault(e){return(e&&(typeof e==='object')&&'default'in e)?e['default']:e}var swal=_interopDefault(require('sweetalert2')),get=_interopDefault(require('lodash.get')),lodash=require('lodash');var convertKeysToCamelCase = function (data) {
|
2
|
+
if (_.isArray(data)) {
|
3
|
+
return data.map(function (element) {
|
4
|
+
if (_.isObject(element) || _.isArray(element)) {
|
5
|
+
return convertKeysToCamelCase(element);
|
6
|
+
}
|
7
|
+
return element;
|
8
|
+
});
|
9
|
+
}
|
10
|
+
var newData = {};
|
11
|
+
Object.keys(data).forEach(function (key) {
|
12
|
+
if (_.isObject(data[key]) || _.isArray(data[key])) {
|
13
|
+
newData[_.camelCase(key)] = convertKeysToCamelCase(data[key]);
|
14
|
+
} else {
|
15
|
+
newData[_.camelCase(key)] = data[key];
|
16
|
+
}
|
17
|
+
});
|
18
|
+
|
19
|
+
return newData;
|
20
|
+
};var convertKeysToSnakeCase = function (data) {
|
21
|
+
if (lodash.isArray(data)) {
|
22
|
+
return data.map(function (element) {
|
23
|
+
if (lodash.isObject(element) || lodash.isArray(element)) {
|
24
|
+
return convertKeysToSnakeCase(element);
|
25
|
+
}
|
26
|
+
return element;
|
27
|
+
});
|
28
|
+
}
|
29
|
+
var newData = {};
|
30
|
+
Object.keys(data).forEach(function (key) {
|
31
|
+
if (lodash.isObject(data[key]) || lodash.isArray(data[key])) {
|
32
|
+
newData[lodash.snakeCase(key)] = convertKeysToSnakeCase(data[key]);
|
33
|
+
} else {
|
34
|
+
newData[lodash.snakeCase(key)] = data[key];
|
35
|
+
}
|
36
|
+
});
|
37
|
+
|
38
|
+
return newData;
|
39
|
+
};function getFirstErrorMessage(response, fallbackMsg) {
|
40
|
+
if ( fallbackMsg === void 0 ) fallbackMsg = 'Não conseguimos processar sua requisição. Tente novamente.';
|
41
|
+
|
42
|
+
var errors = lodash.get(response, 'errors', false);
|
43
|
+
if (!errors) { return fallbackMsg; }
|
44
|
+
var ref = Object.keys(errors);
|
45
|
+
var firstKey = ref[0];
|
46
|
+
return errors[firstKey][0] || fallbackMsg;
|
47
|
+
}var SUCCESS_SWAL_DEFAULT_CONFIG = {
|
48
|
+
title: 'Informações salvas com sucesso!',
|
49
|
+
icon: 'success',
|
50
|
+
text: '',
|
51
|
+
showCloseButton: true,
|
52
|
+
confirmButtonText: 'Ok',
|
53
|
+
};
|
54
|
+
|
55
|
+
var ERROR_SWAL_DEFAULT_CONFIG = {
|
56
|
+
icon: 'error',
|
57
|
+
title: 'Erro',
|
58
|
+
text: 'mensagem de error',
|
59
|
+
showCancelButton: true,
|
60
|
+
showConfirmButton: false,
|
61
|
+
cancelButtonText: 'Fechar',
|
62
|
+
};
|
63
|
+
|
64
|
+
var script = {
|
65
|
+
props: {
|
66
|
+
service: {
|
67
|
+
type: Function,
|
68
|
+
default: function () { return ({}); },
|
69
|
+
},
|
70
|
+
payload: {
|
71
|
+
type: Object,
|
72
|
+
default: function () { return ({}); },
|
73
|
+
},
|
74
|
+
payloadResolver: {
|
75
|
+
type: Function,
|
76
|
+
default: function (data) { return convertKeysToSnakeCase(data); },
|
77
|
+
},
|
78
|
+
dataResolver: {
|
79
|
+
type: Function,
|
80
|
+
default: function (data) { return convertKeysToCamelCase(data); },
|
81
|
+
},
|
82
|
+
successSwalConfig: {
|
83
|
+
type: Object,
|
84
|
+
default: function () { return SUCCESS_SWAL_DEFAULT_CONFIG; },
|
85
|
+
},
|
86
|
+
errorSwalConfig: {
|
87
|
+
type: Object,
|
88
|
+
default: function () { return ERROR_SWAL_DEFAULT_CONFIG; },
|
89
|
+
},
|
90
|
+
errorFeedbackResolver: {
|
91
|
+
type: Function,
|
92
|
+
},
|
93
|
+
successFeedbackResolver: {
|
94
|
+
type: Function,
|
95
|
+
},
|
96
|
+
showSuccessFeedback: {
|
97
|
+
type: Boolean,
|
98
|
+
default: false,
|
99
|
+
},
|
100
|
+
hideErrorFeedback: {
|
101
|
+
type: Boolean,
|
102
|
+
default: false,
|
103
|
+
},
|
104
|
+
immediate: {
|
105
|
+
type: Boolean,
|
106
|
+
default: false,
|
107
|
+
},
|
108
|
+
forceResetError: {
|
109
|
+
type: Boolean,
|
110
|
+
default: false,
|
111
|
+
},
|
112
|
+
initialData: {
|
113
|
+
default: null,
|
114
|
+
},
|
115
|
+
},
|
116
|
+
|
117
|
+
data: function data() {
|
118
|
+
return {
|
119
|
+
loading: false,
|
120
|
+
failed: false,
|
121
|
+
error: null,
|
122
|
+
data: this.initialData,
|
123
|
+
};
|
124
|
+
},
|
125
|
+
|
126
|
+
watch: {
|
127
|
+
forceResetError: function forceResetError(newValue) {
|
128
|
+
if (newValue) {
|
129
|
+
this.error = null;
|
130
|
+
}
|
131
|
+
},
|
132
|
+
},
|
133
|
+
|
134
|
+
mounted: function mounted() {
|
135
|
+
if (this.immediate) {
|
136
|
+
this.action();
|
137
|
+
}
|
138
|
+
},
|
139
|
+
|
140
|
+
methods: {
|
141
|
+
action: function action(payloadFromArgs) {
|
142
|
+
var this$1 = this;
|
143
|
+
|
144
|
+
this.startRequest();
|
145
|
+
var payload = payloadFromArgs || this.payload;
|
146
|
+
this.service(this.payloadResolver(payload))
|
147
|
+
.then(
|
148
|
+
function (data) {
|
149
|
+
this$1.data = this$1.dataResolver(data);
|
150
|
+
this$1.$emit('success', this$1.data);
|
151
|
+
|
152
|
+
if (this$1.showSuccessFeedback) {
|
153
|
+
if (this$1.successFeedbackResolver) {
|
154
|
+
this$1.successFeedbackResolver({ vm: this$1, data: this$1.data });
|
155
|
+
return;
|
156
|
+
}
|
157
|
+
swal.fire(Object.assign({}, SUCCESS_SWAL_DEFAULT_CONFIG,
|
158
|
+
this$1.successSwalConfig)).then(function () {
|
159
|
+
this$1.$emit('success-feedback-ok', this$1.data);
|
160
|
+
});
|
161
|
+
}
|
162
|
+
}
|
163
|
+
).catch(
|
164
|
+
function (error) {
|
165
|
+
this$1.failed = true;
|
166
|
+
this$1.error = error;
|
167
|
+
this$1.$emit('error', error);
|
168
|
+
|
169
|
+
if (!this$1.hideErrorFeedback) {
|
170
|
+
var errorMessage = getFirstErrorMessage(
|
171
|
+
get(error, 'response.data', null),
|
172
|
+
'Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.'
|
173
|
+
);
|
174
|
+
|
175
|
+
if (this$1.errorFeedback) {
|
176
|
+
this$1.errorFeedback(this$1);
|
177
|
+
return;
|
178
|
+
}
|
179
|
+
|
180
|
+
if (this$1.errorFeedbackResolver) {
|
181
|
+
this$1.errorFeedbackResolver({ vm: this$1, error: error, errorMessage: errorMessage });
|
182
|
+
return;
|
183
|
+
}
|
184
|
+
|
185
|
+
swal.fire(Object.assign({}, ERROR_SWAL_DEFAULT_CONFIG,
|
186
|
+
this$1.errorSwalConfig,
|
187
|
+
{text: errorMessage})).then(function (result) {
|
188
|
+
if (result.isDismissed) {
|
189
|
+
this$1.$emit('error-feedback-cancel', error);
|
190
|
+
}
|
191
|
+
if (result.isConfirmed) {
|
192
|
+
this$1.$emit('error-feedback-ok', error);
|
193
|
+
}
|
194
|
+
});
|
195
|
+
}
|
196
|
+
}
|
197
|
+
).finally(function () {
|
198
|
+
this$1.loading = false;
|
199
|
+
});
|
200
|
+
},
|
201
|
+
|
202
|
+
labelHelper: function labelHelper(label, loadingLabel) {
|
203
|
+
if ( loadingLabel === void 0 ) loadingLabel = 'Carregando...';
|
204
|
+
|
205
|
+
if (this.loading) {
|
206
|
+
return loadingLabel;
|
207
|
+
}
|
208
|
+
return label;
|
209
|
+
},
|
210
|
+
|
211
|
+
startRequest: function startRequest() {
|
212
|
+
this.loading = true;
|
213
|
+
this.failed = false;
|
214
|
+
this.error = null;
|
215
|
+
},
|
216
|
+
},
|
217
|
+
|
218
|
+
render: function render() {
|
219
|
+
var slot = this.$scopedSlots.default({
|
220
|
+
loading: this.loading,
|
221
|
+
failed: this.failed,
|
222
|
+
error: this.error,
|
223
|
+
data: this.data,
|
224
|
+
action: this.action,
|
225
|
+
labelHelper: this.labelHelper,
|
226
|
+
errorMessage: getFirstErrorMessage(
|
227
|
+
get(this.error, 'response.data', null),
|
228
|
+
'Um erro aconteceu... por favor, tente novamente. Se o erro persistir, contate o suporte.'
|
229
|
+
),
|
230
|
+
});
|
231
|
+
|
232
|
+
return Array.isArray(slot) ? slot[0] : slot;
|
233
|
+
},
|
234
|
+
};function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
235
|
+
if (typeof shadowMode !== 'boolean') {
|
236
|
+
createInjectorSSR = createInjector;
|
237
|
+
createInjector = shadowMode;
|
238
|
+
shadowMode = false;
|
239
|
+
}
|
240
|
+
// Vue.extend constructor export interop.
|
241
|
+
var options = typeof script === 'function' ? script.options : script;
|
242
|
+
// render functions
|
243
|
+
if (template && template.render) {
|
244
|
+
options.render = template.render;
|
245
|
+
options.staticRenderFns = template.staticRenderFns;
|
246
|
+
options._compiled = true;
|
247
|
+
// functional template
|
248
|
+
if (isFunctionalTemplate) {
|
249
|
+
options.functional = true;
|
250
|
+
}
|
251
|
+
}
|
252
|
+
// scopedId
|
253
|
+
if (scopeId) {
|
254
|
+
options._scopeId = scopeId;
|
255
|
+
}
|
256
|
+
var hook;
|
257
|
+
if (moduleIdentifier) {
|
258
|
+
// server build
|
259
|
+
hook = function (context) {
|
260
|
+
// 2.3 injection
|
261
|
+
context =
|
262
|
+
context || // cached call
|
263
|
+
(this.$vnode && this.$vnode.ssrContext) || // stateful
|
264
|
+
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
|
265
|
+
// 2.2 with runInNewContext: true
|
266
|
+
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
267
|
+
context = __VUE_SSR_CONTEXT__;
|
268
|
+
}
|
269
|
+
// inject component styles
|
270
|
+
if (style) {
|
271
|
+
style.call(this, createInjectorSSR(context));
|
272
|
+
}
|
273
|
+
// register component module identifier for async chunk inference
|
274
|
+
if (context && context._registeredComponents) {
|
275
|
+
context._registeredComponents.add(moduleIdentifier);
|
276
|
+
}
|
277
|
+
};
|
278
|
+
// used by ssr in case component is cached and beforeCreate
|
279
|
+
// never gets called
|
280
|
+
options._ssrRegister = hook;
|
281
|
+
}
|
282
|
+
else if (style) {
|
283
|
+
hook = shadowMode
|
284
|
+
? function (context) {
|
285
|
+
style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
286
|
+
}
|
287
|
+
: function (context) {
|
288
|
+
style.call(this, createInjector(context));
|
289
|
+
};
|
290
|
+
}
|
291
|
+
if (hook) {
|
292
|
+
if (options.functional) {
|
293
|
+
// register for functional component in vue file
|
294
|
+
var originalRender = options.render;
|
295
|
+
options.render = function renderWithStyleInjection(h, context) {
|
296
|
+
hook.call(context);
|
297
|
+
return originalRender(h, context);
|
298
|
+
};
|
299
|
+
}
|
300
|
+
else {
|
301
|
+
// inject component registration as beforeCreate hook
|
302
|
+
var existing = options.beforeCreate;
|
303
|
+
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
304
|
+
}
|
305
|
+
}
|
306
|
+
return script;
|
307
|
+
}/* script */
|
308
|
+
var __vue_script__ = script;
|
309
|
+
|
310
|
+
/* template */
|
311
|
+
|
312
|
+
/* style */
|
313
|
+
var __vue_inject_styles__ = undefined;
|
314
|
+
/* scoped */
|
315
|
+
var __vue_scope_id__ = undefined;
|
316
|
+
/* module identifier */
|
317
|
+
var __vue_module_identifier__ = "data-v-8619f05c";
|
318
|
+
/* functional template */
|
319
|
+
var __vue_is_functional_template__ = undefined;
|
320
|
+
/* style inject */
|
321
|
+
|
322
|
+
/* style inject SSR */
|
323
|
+
|
324
|
+
/* style inject shadow dom */
|
325
|
+
|
326
|
+
|
327
|
+
|
328
|
+
var __vue_component__ = /*#__PURE__*/normalizeComponent(
|
329
|
+
{},
|
330
|
+
__vue_inject_styles__,
|
331
|
+
__vue_script__,
|
332
|
+
__vue_scope_id__,
|
333
|
+
__vue_is_functional_template__,
|
334
|
+
__vue_module_identifier__,
|
335
|
+
false,
|
336
|
+
undefined,
|
337
|
+
undefined,
|
338
|
+
undefined
|
339
|
+
);var components=/*#__PURE__*/Object.freeze({__proto__:null,RequestProvider: __vue_component__});// install function executed by Vue.use()
|
340
|
+
function install(Vue) {
|
341
|
+
if (install.installed) { return; }
|
342
|
+
|
343
|
+
install.installed = true;
|
344
|
+
|
345
|
+
Object.defineProperty(Vue.prototype, '_', { value: _ });
|
346
|
+
|
347
|
+
Object.keys(components).forEach(function (componentName) {
|
348
|
+
Vue.component(
|
349
|
+
("show-" + (componentName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase())),
|
350
|
+
components[componentName]
|
351
|
+
);
|
352
|
+
});
|
353
|
+
}
|
354
|
+
|
355
|
+
// Create module definition for Vue.use()
|
356
|
+
var plugin = {
|
357
|
+
install: install,
|
358
|
+
};
|
359
|
+
|
360
|
+
// To auto-install when vue is found
|
361
|
+
/* global window global */
|
362
|
+
var GlobalVue = null;
|
363
|
+
|
364
|
+
if (typeof window !== 'undefined') {
|
365
|
+
GlobalVue = window.Vue;
|
366
|
+
} else if (typeof global !== 'undefined') {
|
367
|
+
GlobalVue = global.Vue;
|
368
|
+
}
|
369
|
+
|
370
|
+
if (GlobalVue) {
|
371
|
+
GlobalVue.use(plugin);
|
372
|
+
}exports.RequestProvider=__vue_component__;exports.default=plugin;
|
package/package.json
ADDED
@@ -0,0 +1,131 @@
|
|
1
|
+
{
|
2
|
+
"name": "@sysvale/show",
|
3
|
+
"version": "0.0.1",
|
4
|
+
"description": "A set of components used at Sysvale",
|
5
|
+
"repository": {
|
6
|
+
"type": "git",
|
7
|
+
"url": "git+https://github.com/Sysvale/show.git"
|
8
|
+
},
|
9
|
+
"main": "dist/@sysvale/show.ssr.js",
|
10
|
+
"module": "dist/@sysvale/show.esm.js",
|
11
|
+
"unpkg": "dist/@sysvale/show.min.js",
|
12
|
+
"files": [
|
13
|
+
"dist/*"
|
14
|
+
],
|
15
|
+
"scripts": {
|
16
|
+
"serve": "vue-cli-service serve",
|
17
|
+
"test:unit": "vue-cli-service test:unit",
|
18
|
+
"test": "jest",
|
19
|
+
"lint": "vue-cli-service lint",
|
20
|
+
"storybook": "start-storybook -p 6006 --docs",
|
21
|
+
"build-storybook": "build-storybook -s public --docs",
|
22
|
+
"build": "cross-env NODE_ENV=production rollup --config build/rollup.config.js",
|
23
|
+
"build:ssr": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format cjs",
|
24
|
+
"build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es",
|
25
|
+
"build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife",
|
26
|
+
"chromatic": "npx chromatic --project-token=a0f13ffc7d61"
|
27
|
+
},
|
28
|
+
"dependencies": {
|
29
|
+
"lodash.get": "^4.4.2",
|
30
|
+
"sweetalert2": "^11.3.5",
|
31
|
+
"vue": "^2.6.12"
|
32
|
+
},
|
33
|
+
"devDependencies": {
|
34
|
+
"@babel/core": "^7.11.6",
|
35
|
+
"@rollup/plugin-alias": "^2.2.0",
|
36
|
+
"@rollup/plugin-buble": "^0.20.0",
|
37
|
+
"@rollup/plugin-replace": "^2.3.0",
|
38
|
+
"@storybook/addon-actions": "^6.1.0-alpha.10",
|
39
|
+
"@storybook/addon-essentials": "^6.1.0-alpha.10",
|
40
|
+
"@storybook/addon-links": "^6.1.0-alpha.10",
|
41
|
+
"@storybook/preset-scss": "^1.0.2",
|
42
|
+
"@storybook/vue": "^6.1.0-alpha.10",
|
43
|
+
"@vue/cli-plugin-babel": "~4.5.0",
|
44
|
+
"@vue/cli-plugin-eslint": "~4.5.0",
|
45
|
+
"@vue/cli-plugin-unit-jest": "~4.5.0",
|
46
|
+
"@vue/cli-service": "~4.5.0",
|
47
|
+
"@vue/eslint-config-airbnb": "^5.0.2",
|
48
|
+
"@vue/test-utils": "^1.1.0",
|
49
|
+
"babel-eslint": "^10.1.0",
|
50
|
+
"babel-loader": "^8.1.0",
|
51
|
+
"chromatic": "^6.0.4",
|
52
|
+
"cross-env": "^6.0.3",
|
53
|
+
"css-loader": "^4.3.0",
|
54
|
+
"eslint": "^6.7.2",
|
55
|
+
"eslint-plugin-import": "^2.20.2",
|
56
|
+
"eslint-plugin-vue": "^6.2.2",
|
57
|
+
"highlight.js": "^10.6.0",
|
58
|
+
"react-is": "^16.13.1",
|
59
|
+
"rollup": "^1.29.0",
|
60
|
+
"rollup-plugin-commonjs": "^10.1.0",
|
61
|
+
"rollup-plugin-terser": "^5.2.0",
|
62
|
+
"rollup-plugin-vue": "5.1.1",
|
63
|
+
"vue-hljs": "^2.0.0",
|
64
|
+
"vue-template-compiler": "^2.6.11"
|
65
|
+
},
|
66
|
+
"eslintConfig": {
|
67
|
+
"root": true,
|
68
|
+
"env": {
|
69
|
+
"node": true
|
70
|
+
},
|
71
|
+
"extends": [
|
72
|
+
"plugin:vue/essential",
|
73
|
+
"@vue/airbnb"
|
74
|
+
],
|
75
|
+
"parserOptions": {
|
76
|
+
"parser": "babel-eslint"
|
77
|
+
},
|
78
|
+
"rules": {
|
79
|
+
"vue/html-indent": [
|
80
|
+
"error",
|
81
|
+
"tab",
|
82
|
+
{
|
83
|
+
"attribute": 1,
|
84
|
+
"closeBracket": 0,
|
85
|
+
"alignAttributesVertically": true,
|
86
|
+
"ignores": []
|
87
|
+
}
|
88
|
+
],
|
89
|
+
"no-tabs": "off",
|
90
|
+
"indent": [
|
91
|
+
"error",
|
92
|
+
"tab",
|
93
|
+
{
|
94
|
+
"SwitchCase": 1
|
95
|
+
}
|
96
|
+
],
|
97
|
+
"quotes": [
|
98
|
+
"error",
|
99
|
+
"single",
|
100
|
+
{
|
101
|
+
"allowTemplateLiterals": true
|
102
|
+
}
|
103
|
+
]
|
104
|
+
},
|
105
|
+
"overrides": [
|
106
|
+
{
|
107
|
+
"files": [
|
108
|
+
"**/__tests__/*.{j,t}s?(x)",
|
109
|
+
"**/tests/unit/**/*.spec.{j,t}s?(x)"
|
110
|
+
],
|
111
|
+
"env": {
|
112
|
+
"jest": true
|
113
|
+
}
|
114
|
+
}
|
115
|
+
]
|
116
|
+
},
|
117
|
+
"browserslist": [
|
118
|
+
"> 1%",
|
119
|
+
"last 2 versions",
|
120
|
+
"not dead"
|
121
|
+
],
|
122
|
+
"jest": {
|
123
|
+
"preset": "@vue/cli-plugin-unit-jest"
|
124
|
+
},
|
125
|
+
"bugs": {
|
126
|
+
"url": "https://github.com/Sysvale/show/issues"
|
127
|
+
},
|
128
|
+
"homepage": "https://github.com/Sysvale/show#readme",
|
129
|
+
"author": "Sysvale",
|
130
|
+
"license": "MIT"
|
131
|
+
}
|