@vuesimple/vs-alert 1.4.18 → 3.0.0

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.
Files changed (11) hide show
  1. package/README.md +8 -13
  2. package/build/rollup.config.js +6 -1
  3. package/build/vite.config.js +33 -0
  4. package/dist/index.js +226 -0
  5. package/dist/index.min.js +1 -0
  6. package/dist/index.umd.js +1 -0
  7. package/package.json +8 -14
  8. package/src/index.js +4 -23
  9. package/dist/vs-alert.esm.js +0 -611
  10. package/dist/vs-alert.min.js +0 -1
  11. package/dist/vs-alert.umd.js +0 -621
package/dist/vs-alert.umd.js DELETED
@@ -1,621 +0,0 @@
1
- (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
3
- typeof define === 'function' && define.amd ? define(['exports'], factory) :
4
- (global = global || self, factory(global.VsAlert = {}));
5
- }(this, (function (exports) { 'use strict';
6
-
7
- //
8
- //
9
- //
10
- //
11
- //
12
- //
13
- //
14
- //
15
- //
16
- //
17
- //
18
- //
19
- //
20
- //
21
- //
22
- //
23
- //
24
- //
25
- //
26
- //
27
- //
28
- //
29
- //
30
- //
31
- //
32
- //
33
- //
34
- //
35
- //
36
- //
37
- //
38
- //
39
- //
40
- //
41
- //
42
- //
43
- //
44
- //
45
- //
46
- //
47
- //
48
- //
49
- //
50
- //
51
- //
52
- //
53
- //
54
- //
55
- //
56
- //
57
- //
58
- //
59
- //
60
- //
61
- //
62
- //
63
- //
64
- //
65
- //
66
- //
67
- //
68
- //
69
- //
70
- //
71
- //
72
- //
73
- //
74
- //
75
- //
76
- //
77
- //
78
- //
79
- //
80
- //
81
- //
82
- //
83
- //
84
- //
85
- //
86
- //
87
- //
88
- //
89
- //
90
- //
91
- //
92
- //
93
- //
94
- //
95
- //
96
- //
97
- //
98
- //
99
- //
100
- //
101
- //
102
- //
103
- //
104
- //
105
- //
106
- //
107
- //
108
- //
109
- //
110
- //
111
- //
112
- //
113
- //
114
- //
115
- //
116
- //
117
-
118
- var script = {
119
- name: 'VsAlert',
120
-
121
- props: {
122
- // Variants: success, warning, error, info, secondary
123
- variant: {
124
- type: String,
125
- required: true,
126
- validator: function (value) { return ['success', 'error', 'info', 'warning', 'secondary'].includes(value.toLowerCase()); },
127
- },
128
- showClose: {
129
- type: Boolean,
130
- default: false,
131
- },
132
- title: {
133
- type: String,
134
- },
135
- noBg: {
136
- type: Boolean,
137
- default: false,
138
- },
139
- small: {
140
- type: Boolean,
141
- default: false,
142
- },
143
- toast: {
144
- type: Boolean,
145
- default: false,
146
- },
147
- },
148
-
149
- computed: {
150
- classList: function classList() {
151
- return [
152
- ("vs-alert-" + (this.variant)),
153
- { 'vs-alert--no-bg': this.noBg },
154
- { 'vs-alert--small': this.small },
155
- { 'vs-alert--toast': this.toast },
156
- { 'vs-alert--is-close': this.showClose } ];
157
- },
158
- },
159
- };
160
-
161
- function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
162
- if (typeof shadowMode !== 'boolean') {
163
- createInjectorSSR = createInjector;
164
- createInjector = shadowMode;
165
- shadowMode = false;
166
- }
167
- // Vue.extend constructor export interop.
168
- var options = typeof script === 'function' ? script.options : script;
169
- // render functions
170
- if (template && template.render) {
171
- options.render = template.render;
172
- options.staticRenderFns = template.staticRenderFns;
173
- options._compiled = true;
174
- // functional template
175
- if (isFunctionalTemplate) {
176
- options.functional = true;
177
- }
178
- }
179
- // scopedId
180
- if (scopeId) {
181
- options._scopeId = scopeId;
182
- }
183
- var hook;
184
- if (moduleIdentifier) {
185
- // server build
186
- hook = function (context) {
187
- // 2.3 injection
188
- context =
189
- context || // cached call
190
- (this.$vnode && this.$vnode.ssrContext) || // stateful
191
- (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
192
- // 2.2 with runInNewContext: true
193
- if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
194
- context = __VUE_SSR_CONTEXT__;
195
- }
196
- // inject component styles
197
- if (style) {
198
- style.call(this, createInjectorSSR(context));
199
- }
200
- // register component module identifier for async chunk inference
201
- if (context && context._registeredComponents) {
202
- context._registeredComponents.add(moduleIdentifier);
203
- }
204
- };
205
- // used by ssr in case component is cached and beforeCreate
206
- // never gets called
207
- options._ssrRegister = hook;
208
- }
209
- else if (style) {
210
- hook = shadowMode
211
- ? function (context) {
212
- style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
213
- }
214
- : function (context) {
215
- style.call(this, createInjector(context));
216
- };
217
- }
218
- if (hook) {
219
- if (options.functional) {
220
- // register for functional component in vue file
221
- var originalRender = options.render;
222
- options.render = function renderWithStyleInjection(h, context) {
223
- hook.call(context);
224
- return originalRender(h, context);
225
- };
226
- }
227
- else {
228
- // inject component registration as beforeCreate hook
229
- var existing = options.beforeCreate;
230
- options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
231
- }
232
- }
233
- return script;
234
- }
235
-
236
- var isOldIE = typeof navigator !== 'undefined' &&
237
- /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
238
- function createInjector(context) {
239
- return function (id, style) { return addStyle(id, style); };
240
- }
241
- var HEAD;
242
- var styles = {};
243
- function addStyle(id, css) {
244
- var group = isOldIE ? css.media || 'default' : id;
245
- var style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
246
- if (!style.ids.has(id)) {
247
- style.ids.add(id);
248
- var code = css.source;
249
- if (css.map) {
250
- // https://developer.chrome.com/devtools/docs/javascript-debugging
251
- // this makes source maps inside style tags work properly in Chrome
252
- code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
253
- // http://stackoverflow.com/a/26603875
254
- code +=
255
- '\n/*# sourceMappingURL=data:application/json;base64,' +
256
- btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
257
- ' */';
258
- }
259
- if (!style.element) {
260
- style.element = document.createElement('style');
261
- style.element.type = 'text/css';
262
- if (css.media)
263
- { style.element.setAttribute('media', css.media); }
264
- if (HEAD === undefined) {
265
- HEAD = document.head || document.getElementsByTagName('head')[0];
266
- }
267
- HEAD.appendChild(style.element);
268
- }
269
- if ('styleSheet' in style.element) {
270
- style.styles.push(code);
271
- style.element.styleSheet.cssText = style.styles
272
- .filter(Boolean)
273
- .join('\n');
274
- }
275
- else {
276
- var index = style.ids.size - 1;
277
- var textNode = document.createTextNode(code);
278
- var nodes = style.element.childNodes;
279
- if (nodes[index])
280
- { style.element.removeChild(nodes[index]); }
281
- if (nodes.length)
282
- { style.element.insertBefore(textNode, nodes[index]); }
283
- else
284
- { style.element.appendChild(textNode); }
285
- }
286
- }
287
- }
288
-
289
- /* script */
290
- var __vue_script__ = script;
291
-
292
- /* template */
293
- var __vue_render__ = function() {
294
- var _vm = this;
295
- var _h = _vm.$createElement;
296
- var _c = _vm._self._c || _h;
297
- return _c(
298
- "div",
299
- { class: ["vs-alert", _vm.classList] },
300
- [
301
- _c(
302
- "span",
303
- { staticClass: "vs-alert-icon__wrapper" },
304
- [
305
- _vm._t("icon", [
306
- _vm.variant === "success"
307
- ? _c(
308
- "svg",
309
- {
310
- attrs: {
311
- xmlns: "http://www.w3.org/2000/svg",
312
- width: "16",
313
- height: "16",
314
- viewBox: "0 0 16 16",
315
- role: "presentation",
316
- focussable: "false"
317
- }
318
- },
319
- [
320
- _c(
321
- "g",
322
- {
323
- attrs: {
324
- fill: "none",
325
- stroke: "var(--vs-alert-success-icon)"
326
- }
327
- },
328
- [
329
- _c("path", {
330
- attrs: {
331
- "stroke-linecap": "round",
332
- "stroke-linejoin": "round",
333
- d: "M4 9l2.5 2.5 5-5"
334
- }
335
- }),
336
- _vm._v(" "),
337
- _c("circle", {
338
- attrs: { cx: "7.5", cy: "8.5", r: "7" }
339
- })
340
- ]
341
- )
342
- ]
343
- )
344
- : _vm._e(),
345
- _vm._v(" "),
346
- _vm.variant === "warning"
347
- ? _c(
348
- "svg",
349
- {
350
- attrs: {
351
- xmlns: "http://www.w3.org/2000/svg",
352
- width: "16",
353
- height: "16",
354
- viewBox: "0 0 16 16",
355
- role: "presentation",
356
- focussable: "false"
357
- }
358
- },
359
- [
360
- _c("path", {
361
- attrs: {
362
- fill: "none",
363
- stroke: "var(--vs-alert-warning-icon)",
364
- "stroke-linecap": "round",
365
- d:
366
- "M.88 13.77L7.06 1.86c.19-.36.7-.36.89 0l6.18 11.91c.17.33-.07.73-.44.73H1.32c-.37 0-.61-.4-.44-.73zM7.5 6v3.5"
367
- }
368
- }),
369
- _vm._v(" "),
370
- _c("circle", {
371
- attrs: { cx: "7.5", cy: "12", r: "1", fill: "#ad5918" }
372
- })
373
- ]
374
- )
375
- : _vm._e(),
376
- _vm._v(" "),
377
- _vm.variant === "error"
378
- ? _c(
379
- "svg",
380
- {
381
- attrs: {
382
- xmlns: "http://www.w3.org/2000/svg",
383
- width: "16",
384
- height: "16",
385
- viewBox: "0 0 16 16",
386
- role: "presentation",
387
- focussable: "false"
388
- }
389
- },
390
- [
391
- _c(
392
- "g",
393
- {
394
- attrs: {
395
- fill: "none",
396
- stroke: "var(--vs-alert-error-icon)"
397
- }
398
- },
399
- [
400
- _c("circle", {
401
- attrs: { cx: "7.5", cy: "8.5", r: "7" }
402
- }),
403
- _vm._v(" "),
404
- _c("path", {
405
- attrs: { "stroke-linecap": "round", d: "M7.5 4.5V9" }
406
- })
407
- ]
408
- ),
409
- _vm._v(" "),
410
- _c("circle", {
411
- attrs: {
412
- cx: "7.5",
413
- cy: "12",
414
- r: "1",
415
- fill: "var(--vs-alert-error-icon)"
416
- }
417
- })
418
- ]
419
- )
420
- : _vm._e(),
421
- _vm._v(" "),
422
- _vm.variant === "info"
423
- ? _c(
424
- "svg",
425
- {
426
- attrs: {
427
- xmlns: "http://www.w3.org/2000/svg",
428
- width: "16",
429
- height: "16",
430
- viewBox: "0 0 16 16",
431
- role: "presentation",
432
- focussable: "false"
433
- }
434
- },
435
- [
436
- _c(
437
- "g",
438
- { attrs: { stroke: "var(--vs-alert-info-icon)" } },
439
- [
440
- _c("circle", {
441
- attrs: { cx: "7.5", cy: "8.5", r: "7", fill: "none" }
442
- }),
443
- _vm._v(" "),
444
- _c("path", {
445
- attrs: { "stroke-linecap": "round", d: "M7.5 12.5V8" }
446
- })
447
- ]
448
- ),
449
- _vm._v(" "),
450
- _c("circle", {
451
- attrs: {
452
- cx: "7.5",
453
- cy: "5",
454
- r: "1",
455
- fill: "var(--vs-alert-info-icon)"
456
- }
457
- })
458
- ]
459
- )
460
- : _vm._e(),
461
- _vm._v(" "),
462
- _vm.variant === "secondary"
463
- ? _c(
464
- "svg",
465
- {
466
- attrs: {
467
- xmlns: "http://www.w3.org/2000/svg",
468
- width: "16",
469
- height: "16",
470
- viewBox: "0 0 16 16",
471
- role: "presentation",
472
- focussable: "false"
473
- }
474
- },
475
- [
476
- _c(
477
- "g",
478
- { attrs: { stroke: "var(--vs-alert-secondary-icon)" } },
479
- [
480
- _c("circle", {
481
- attrs: { cx: "7.5", cy: "8.5", r: "7", fill: "none" }
482
- }),
483
- _vm._v(" "),
484
- _c("path", {
485
- attrs: { "stroke-linecap": "round", d: "M7.5 12.5V8" }
486
- })
487
- ]
488
- ),
489
- _vm._v(" "),
490
- _c("circle", {
491
- attrs: {
492
- cx: "7.5",
493
- cy: "5",
494
- r: "1",
495
- fill: "var(--vs-alert-secondary-icon)"
496
- }
497
- })
498
- ]
499
- )
500
- : _vm._e()
501
- ])
502
- ],
503
- 2
504
- ),
505
- _vm._v(" "),
506
- _c(
507
- "div",
508
- { staticClass: "vs-alert__heading" },
509
- [_vm._t("title", [_vm.title ? [_vm._v(_vm._s(_vm.title))] : _vm._e()])],
510
- 2
511
- ),
512
- _vm._v(" "),
513
- _vm._t("default"),
514
- _vm._v(" "),
515
- _vm.showClose
516
- ? _c(
517
- "button",
518
- {
519
- class: ["vs-alert-button", _vm.variant],
520
- attrs: { "aria-label": "Close" },
521
- on: {
522
- click: function($event) {
523
- return _vm.$emit("close", true)
524
- }
525
- }
526
- },
527
- [
528
- _c(
529
- "svg",
530
- {
531
- attrs: {
532
- xmlns: "http://www.w3.org/2000/svg",
533
- width: "12",
534
- height: "12",
535
- viewBox: "0 0 12 12",
536
- role: "presentation",
537
- focusable: "false"
538
- }
539
- },
540
- [
541
- _c("path", {
542
- attrs: {
543
- stroke: "currentColor",
544
- "stroke-linecap": "round",
545
- d: "M3 9l6-6m0 6L3 3"
546
- }
547
- })
548
- ]
549
- )
550
- ]
551
- )
552
- : _vm._e()
553
- ],
554
- 2
555
- )
556
- };
557
- var __vue_staticRenderFns__ = [];
558
- __vue_render__._withStripped = true;
559
-
560
- /* style */
561
- var __vue_inject_styles__ = function (inject) {
562
- if (!inject) { return }
563
- inject("data-v-98c9a0d8_0", { source: ".vs-alert {\n --vs-alert-success-bc: #aecfc2;\n --vs-alert-success-bg: #edf8f4;\n --vs-alert-success-color: #186146;\n --vs-alert-success-icon: #038153;\n --vs-alert-warning-bc: #fed6a8;\n --vs-alert-warning-bg: #fff7ed;\n --vs-alert-warning-color: #ad5918;\n --vs-alert-warning-icon: #ad5918;\n --vs-alert-error-bc: #f5b5ba;\n --vs-alert-error-bg: #fff0f1;\n --vs-alert-error-color: #8c232c;\n --vs-alert-error-icon: #cc3340;\n --vs-alert-info-bc: #adcce4;\n --vs-alert-info-bg: #edf7ff;\n --vs-alert-info-color: #1f73b7;\n --vs-alert-info-icon: #337fbd;\n --vs-alert-secondary-bc: #d8dcde;\n --vs-alert-secondary-bg: #f8f9f9;\n --vs-alert-secondary-color: #68737d;\n --vs-alert-secondary-icon: #68737d;\n position: relative;\n border-radius: 4px;\n padding: 20px 20px 20px 40px;\n line-height: 1.42857;\n font-size: 14px;\n}\n.vs-alert-icon__wrapper svg {\n position: absolute;\n left: 15px;\n margin-top: 1px;\n}\n.vs-alert__heading {\n font-weight: 600;\n filter: brightness(85%);\n}\n.vs-alert-button {\n display: block;\n position: absolute;\n top: 15px;\n right: 10px;\n transition: background-color 0.1s ease-in-out 0s, color 0.25s ease-in-out 0s;\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0px;\n width: 28px;\n height: 28px;\n overflow: hidden;\n color: #333333;\n font-size: 0px;\n user-select: none;\n}\n.vs-alert-button.success {\n color: var(--vs-alert-success-color);\n}\n.vs-alert-button.warning {\n color: var(--vs-alert-warning-color);\n}\n.vs-alert-button.error {\n color: var(--vs-alert-error-color);\n}\n.vs-alert-button.info {\n color: var(--vs-alert-info-color);\n}\n.vs-alert-button.secondary {\n color: var(--vs-alert-secondary-color);\n}\n.vs-alert-success {\n border: 1px solid var(--vs-alert-success-bc);\n background-color: var(--vs-alert-success-bg);\n color: var(--vs-alert-success-color);\n}\n.vs-alert-warning {\n border: 1px solid var(--vs-alert-warning-bc);\n background-color: var(--vs-alert-warning-bg);\n color: var(--vs-alert-warning-color);\n}\n.vs-alert-error {\n border: 1px solid var(--vs-alert-error-bc);\n background-color: var(--vs-alert-error-bg);\n color: var(--vs-alert-error-color);\n}\n.vs-alert-info {\n border: 1px solid var(--vs-alert-info-bc);\n background-color: var(--vs-alert-info-bg);\n color: var(--vs-alert-info-color);\n}\n.vs-alert-secondary {\n border: 1px solid var(--vs-alert-secondary-bc);\n background-color: var(--vs-alert-secondary-bg);\n color: var(--vs-alert-secondary-color);\n}\n.vs-alert.vs-alert--small:not(.vs-alert--is-close) {\n padding: 12px 20px 12px 40px;\n}\n.vs-alert.vs-alert--is-close:not(.vs-alert--small) {\n padding: 20px 40px;\n}\n.vs-alert.vs-alert--is-close.vs-alert--small {\n padding: 12px 40px;\n}\n.vs-alert.vs-alert--is-close.vs-alert--small .vs-alert-button {\n top: 8px;\n}\n.vs-alert--no-bg {\n background-color: transparent;\n border-color: transparent;\n padding: 0 22px;\n font-size: 13px;\n}\n.vs-alert--no-bg .vs-alert-icon__wrapper svg {\n left: 0;\n margin-top: 0;\n}\n.vs-alert--no-bg.vs-alert-warning {\n color: var(--vs-alert-warning-icon);\n}\n.vs-alert--no-bg.vs-alert-error {\n color: var(--vs-alert-error-icon);\n}\n.vs-alert--toast {\n background-color: transparent;\n border: solid 1px #d8dcde;\n color: #2f3941;\n box-shadow: rgba(23, 73, 77, 0.15) 0px 20px 28px 0px;\n padding: 15px 40px;\n}\n.vs-alert--toast .vs-alert__heading {\n filter: brightness(100%);\n}\n.vs-alert--toast.vs-alert-success .vs-alert__heading {\n color: var(--vs-alert-success-icon);\n}\n.vs-alert--toast.vs-alert-warning .vs-alert__heading {\n color: var(--vs-alert-warning-icon);\n}\n.vs-alert--toast.vs-alert-error .vs-alert__heading {\n color: var(--vs-alert-error-icon);\n}\n.vs-alert--toast.vs-alert-info .vs-alert__heading {\n color: var(--vs-alert-info-icon);\n}\n.vs-alert--toast.vs-alert-secondary .vs-alert__heading {\n color: var(--vs-alert-secondary-icon);\n}\n.vs-alert--toast .vs-alert-button {\n color: #68737d;\n top: 10px;\n}", map: undefined, media: undefined });
564
-
565
- };
566
- /* scoped */
567
- var __vue_scope_id__ = undefined;
568
- /* module identifier */
569
- var __vue_module_identifier__ = undefined;
570
- /* functional template */
571
- var __vue_is_functional_template__ = false;
572
- /* style inject SSR */
573
-
574
- /* style inject shadow dom */
575
-
576
-
577
-
578
- var __vue_component__ = /*#__PURE__*/normalizeComponent(
579
- { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
580
- __vue_inject_styles__,
581
- __vue_script__,
582
- __vue_scope_id__,
583
- __vue_is_functional_template__,
584
- __vue_module_identifier__,
585
- false,
586
- createInjector,
587
- undefined,
588
- undefined
589
- );
590
-
591
- // Import vue component
592
-
593
- // Declare install function executed by Vue.use()
594
- function install(Vue) {
595
- if (install.installed) { return; }
596
- install.installed = true;
597
- Vue.component('VsAlert', __vue_component__);
598
- }
599
-
600
- // Create module definition for Vue.use()
601
- var plugin = {
602
- install: install,
603
- };
604
-
605
- // Auto-install when vue is found (eg. in browser via <script> tag)
606
- var GlobalVue = null;
607
- if (typeof window !== 'undefined') {
608
- GlobalVue = window.Vue;
609
- } else if (typeof global !== 'undefined') {
610
- GlobalVue = global.Vue;
611
- }
612
- if (GlobalVue) {
613
- GlobalVue.use(plugin);
614
- }
615
-
616
- exports.default = __vue_component__;
617
- exports.install = install;
618
-
619
- Object.defineProperty(exports, '__esModule', { value: true });
620
-
621
- })));