@volverjs/ui-vue 0.0.11 → 0.0.13-beta.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.
Files changed (98) hide show
  1. package/bin/icons.js +1 -93
  2. package/dist/components/VvAccordion/VvAccordion.es.js +1 -366
  3. package/dist/components/VvAccordion/VvAccordion.vue.d.ts +7 -2
  4. package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js +2 -702
  5. package/dist/components/VvAccordionGroup/VvAccordionGroup.vue.d.ts +5 -2
  6. package/dist/components/VvAction/VvAction.es.js +1 -302
  7. package/dist/components/VvAction/VvAction.umd.js +1 -1
  8. package/dist/components/VvAction/VvAction.vue.d.ts +3 -2
  9. package/dist/components/VvAlert/VvAlert.es.js +1 -527
  10. package/dist/components/VvAlert/VvAlert.vue.d.ts +3 -2
  11. package/dist/components/VvAlertGroup/VvAlertGroup.es.js +1 -730
  12. package/dist/components/VvAlertGroup/VvAlertGroup.vue.d.ts +3 -3
  13. package/dist/components/VvAvatar/VvAvatar.es.js +1 -132
  14. package/dist/components/VvAvatar/VvAvatar.vue.d.ts +2 -2
  15. package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js +1 -250
  16. package/dist/components/VvAvatarGroup/VvAvatarGroup.vue.d.ts +2 -2
  17. package/dist/components/VvBadge/VvBadge.es.js +1 -131
  18. package/dist/components/VvBadge/VvBadge.vue.d.ts +2 -2
  19. package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js +1 -410
  20. package/dist/components/VvBreadcrumb/VvBreadcrumb.umd.js +1 -1
  21. package/dist/components/VvBreadcrumb/VvBreadcrumb.vue.d.ts +2 -2
  22. package/dist/components/VvButton/VvButton.es.js +1 -882
  23. package/dist/components/VvButton/VvButton.umd.js +1 -1
  24. package/dist/components/VvButton/VvButton.vue.d.ts +3 -2
  25. package/dist/components/VvButtonGroup/VvButtonGroup.es.js +1 -214
  26. package/dist/components/VvButtonGroup/VvButtonGroup.vue.d.ts +2 -2
  27. package/dist/components/VvCard/VvCard.es.js +1 -152
  28. package/dist/components/VvCard/VvCard.vue.d.ts +2 -2
  29. package/dist/components/VvCheckbox/VvCheckbox.es.js +1 -741
  30. package/dist/components/VvCheckbox/VvCheckbox.vue.d.ts +2 -2
  31. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +1 -981
  32. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.vue.d.ts +2 -2
  33. package/dist/components/VvCombobox/VvCombobox.es.js +1 -3463
  34. package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
  35. package/dist/components/VvCombobox/VvCombobox.vue.d.ts +16 -7
  36. package/dist/components/VvDialog/VvDialog.es.js +1 -317
  37. package/dist/components/VvDialog/VvDialog.vue.d.ts +4 -2
  38. package/dist/components/VvDropdown/VvDropdown.es.js +1 -750
  39. package/dist/components/VvDropdown/VvDropdown.vue.d.ts +14 -2
  40. package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +2 -2
  41. package/dist/components/VvDropdown/VvDropdownItem.vue.d.ts +2 -2
  42. package/dist/components/VvDropdown/VvDropdownOptgroup.vue.d.ts +11 -4
  43. package/dist/components/VvDropdown/VvDropdownOption.vue.d.ts +2 -2
  44. package/dist/components/VvDropdownAction/VvDropdownAction.es.js +1 -448
  45. package/dist/components/VvDropdownAction/VvDropdownAction.umd.js +1 -1
  46. package/dist/components/VvDropdownItem/VvDropdownItem.es.js +1 -149
  47. package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.es.js +1 -104
  48. package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.umd.js +1 -1
  49. package/dist/components/VvDropdownOption/VvDropdownOption.es.js +1 -281
  50. package/dist/components/VvIcon/VvIcon.es.js +1 -143
  51. package/dist/components/VvIcon/VvIcon.vue.d.ts +2 -2
  52. package/dist/components/VvInputFile/VvInputFile.es.js +1 -1704
  53. package/dist/components/VvInputFile/VvInputFile.umd.js +1 -1
  54. package/dist/components/VvInputFile/VvInputFile.vue.d.ts +34 -4
  55. package/dist/components/VvInputFile/index.d.ts +7 -0
  56. package/dist/components/VvInputText/VvInputText.es.js +4 -2790
  57. package/dist/components/VvInputText/VvInputText.umd.js +1 -1
  58. package/dist/components/VvInputText/VvInputText.vue.d.ts +8 -3
  59. package/dist/components/VvNav/VvNav.es.js +1 -438
  60. package/dist/components/VvNav/VvNav.umd.js +1 -1
  61. package/dist/components/VvNav/VvNav.vue.d.ts +2 -2
  62. package/dist/components/VvNav/VvNavItem.vue.d.ts +2 -2
  63. package/dist/components/VvNav/VvNavSeparator.vue.d.ts +1 -1
  64. package/dist/components/VvNavItem/VvNavItem.es.js +1 -337
  65. package/dist/components/VvNavItem/VvNavItem.umd.js +1 -1
  66. package/dist/components/VvNavSeparator/VvNavSeparator.es.js +1 -24
  67. package/dist/components/VvProgress/VvProgress.es.js +1 -163
  68. package/dist/components/VvProgress/VvProgress.vue.d.ts +2 -2
  69. package/dist/components/VvRadio/VvRadio.es.js +1 -661
  70. package/dist/components/VvRadio/VvRadio.vue.d.ts +2 -2
  71. package/dist/components/VvRadioGroup/VvRadioGroup.es.js +1 -901
  72. package/dist/components/VvRadioGroup/VvRadioGroup.vue.d.ts +2 -2
  73. package/dist/components/VvSelect/VvSelect.es.js +1 -1103
  74. package/dist/components/VvSelect/VvSelect.vue.d.ts +11 -7
  75. package/dist/components/VvTab/VvTab.es.js +1 -558
  76. package/dist/components/VvTab/VvTab.umd.js +1 -1
  77. package/dist/components/VvTab/VvTab.vue.d.ts +2 -2
  78. package/dist/components/VvTextarea/VvTextarea.es.js +2 -1989
  79. package/dist/components/VvTextarea/VvTextarea.vue.d.ts +3 -3
  80. package/dist/components/VvTooltip/VvTooltip.es.js +1 -154
  81. package/dist/components/VvTooltip/VvTooltip.vue.d.ts +2 -2
  82. package/dist/components/index.es.js +6 -8558
  83. package/dist/components/index.umd.js +1 -1
  84. package/dist/composables/index.es.js +2 -247
  85. package/dist/composables/index.umd.js +1 -1
  86. package/dist/directives/index.es.js +2 -311
  87. package/dist/directives/index.umd.js +1 -1
  88. package/dist/directives/v-contextmenu.es.js +2 -142
  89. package/dist/directives/v-contextmenu.umd.js +1 -1
  90. package/dist/directives/v-tooltip.es.js +1 -172
  91. package/dist/icons.es.js +1 -39
  92. package/dist/icons.umd.js +1 -1
  93. package/dist/index.es.js +1 -219
  94. package/dist/props/index.d.ts +7 -0
  95. package/dist/resolvers/unplugin.es.js +1 -187
  96. package/dist/stories/AccordionGroup/AccordionGroupSlots.stories.d.ts +2 -2
  97. package/dist/stories/Avatar/Avatar.settings.d.ts +1 -1
  98. package/package.json +47 -40
@@ -1,527 +1 @@
1
- import { inject, computed, useId, unref, watch, ref, defineComponent, mergeDefaults, toRefs, createBlock, createCommentVNode, openBlock, mergeProps, createElementBlock, normalizeProps, guardReactiveProps, renderSlot, createTextVNode, toDisplayString, withModifiers, createElementVNode } from "vue";
2
- import { iconLoaded, Icon, addIcon } from "@iconify/vue";
3
- var StorageType = /* @__PURE__ */ ((StorageType2) => {
4
- StorageType2["local"] = "local";
5
- StorageType2["session"] = "session";
6
- return StorageType2;
7
- })(StorageType || {});
8
- var Side = /* @__PURE__ */ ((Side2) => {
9
- Side2["left"] = "left";
10
- Side2["right"] = "right";
11
- Side2["top"] = "top";
12
- Side2["bottom"] = "bottom";
13
- return Side2;
14
- })(Side || {});
15
- var Position = /* @__PURE__ */ ((Position2) => {
16
- Position2["before"] = "before";
17
- Position2["after"] = "after";
18
- return Position2;
19
- })(Position || {});
20
- var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
21
- ButtonType2["button"] = "button";
22
- ButtonType2["submit"] = "submit";
23
- ButtonType2["reset"] = "reset";
24
- return ButtonType2;
25
- })(ButtonType || {});
26
- var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
27
- ActionTag2["nuxtLink"] = "nuxt-link";
28
- ActionTag2["routerLink"] = "router-link";
29
- ActionTag2["a"] = "a";
30
- ActionTag2["button"] = "button";
31
- return ActionTag2;
32
- })(ActionTag || {});
33
- var AlertRole = /* @__PURE__ */ ((AlertRole2) => {
34
- AlertRole2["alert"] = "alert";
35
- AlertRole2["alertdialog"] = "alertdialog";
36
- return AlertRole2;
37
- })(AlertRole || {});
38
- const INJECTION_KEY_VOLVER = Symbol.for("volver");
39
- const INJECTION_KEY_ALERT_GROUP = Symbol.for(
40
- "alertGroup"
41
- );
42
- const VvIconPropsDefaults = {
43
- prefix: "normal"
44
- /* normal */
45
- };
46
- const IconProps = {
47
- /**
48
- * VvIcon name or props
49
- * @see VvIcon
50
- */
51
- icon: {
52
- type: [String, Object],
53
- default: void 0
54
- },
55
- /**
56
- * VvIcon position
57
- */
58
- iconPosition: {
59
- type: String,
60
- default: Position.before,
61
- validation: (value) => Object.values(Position).includes(value)
62
- }
63
- };
64
- const IdProps = {
65
- /**
66
- * Global attribute id
67
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
68
- */
69
- id: [String, Number]
70
- };
71
- ({
72
- /**
73
- * Dropdown placement
74
- */
75
- placement: {
76
- default: Side.bottom
77
- }
78
- });
79
- ({
80
- /**
81
- * Button type
82
- */
83
- type: {
84
- default: ButtonType.button
85
- },
86
- /**
87
- * Default tag for the action
88
- */
89
- defaultTag: {
90
- default: ActionTag.button
91
- }
92
- });
93
- ({
94
- storageType: {
95
- default: StorageType.local
96
- }
97
- });
98
- function useInjectedAlertGroup() {
99
- return inject(INJECTION_KEY_ALERT_GROUP, {});
100
- }
101
- function useUniqueId(id) {
102
- return computed(() => String(id?.value || useId()));
103
- }
104
- function useComponentIcon(icon, iconPosition) {
105
- const hasIcon = computed(() => {
106
- if (typeof icon?.value === "string") {
107
- return { name: icon?.value };
108
- }
109
- return icon?.value;
110
- });
111
- const hasIconBefore = computed(
112
- () => iconPosition?.value === Position.before ? hasIcon.value : void 0
113
- );
114
- const hasIconAfter = computed(
115
- () => iconPosition?.value === Position.after ? hasIcon.value : void 0
116
- );
117
- const hasIconLeft = computed(
118
- () => iconPosition?.value === Side.left ? hasIcon.value : void 0
119
- );
120
- const hasIconRight = computed(
121
- () => iconPosition?.value === Side.right ? hasIcon.value : void 0
122
- );
123
- const hasIconTop = computed(
124
- () => iconPosition?.value === Side.top ? hasIcon.value : void 0
125
- );
126
- const hasIconBottom = computed(
127
- () => iconPosition?.value === Side.bottom ? hasIcon.value : void 0
128
- );
129
- return {
130
- hasIcon,
131
- hasIconLeft,
132
- hasIconRight,
133
- hasIconTop,
134
- hasIconBottom,
135
- hasIconBefore,
136
- hasIconAfter
137
- };
138
- }
139
- function useModifiers(prefix, modifiers, others) {
140
- return computed(() => {
141
- const toReturn = {
142
- [prefix]: true
143
- };
144
- const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
145
- if (modifiersArray) {
146
- if (Array.isArray(modifiersArray)) {
147
- modifiersArray.forEach((modifier) => {
148
- if (modifier) {
149
- toReturn[`${prefix}--${modifier}`] = true;
150
- }
151
- });
152
- }
153
- }
154
- if (others) {
155
- Object.keys(others.value).forEach((key) => {
156
- toReturn[`${prefix}--${key}`] = unref(others.value[key]);
157
- });
158
- }
159
- return toReturn;
160
- });
161
- }
162
- const VvAlertProps = {
163
- ...IdProps,
164
- ...IconProps,
165
- /**
166
- * Component BEM modifiers
167
- */
168
- modifiers: {
169
- type: [String, Array],
170
- default: void 0
171
- },
172
- /**
173
- * The alert is dismissable
174
- * @default false
175
- * @type boolean
176
- */
177
- dismissable: {
178
- type: Boolean,
179
- default: false
180
- },
181
- /**
182
- * The alert auto close after the specified time in milliseconds
183
- * @default 0
184
- * @type number
185
- */
186
- autoClose: {
187
- type: Number,
188
- default: 0
189
- },
190
- /**
191
- * The alert close label
192
- * @default 'Close'
193
- * @type string
194
- */
195
- closeLabel: {
196
- type: String,
197
- default: "Close"
198
- },
199
- /**
200
- * The alert title
201
- * @default ''
202
- * @type string
203
- */
204
- title: {
205
- type: String,
206
- default: void 0
207
- },
208
- /**
209
- * The alert content
210
- * @default ''
211
- * @type string
212
- */
213
- content: {
214
- type: String,
215
- default: void 0
216
- },
217
- /**
218
- * The alert footer
219
- * @default ''
220
- * @type string
221
- */
222
- footer: {
223
- type: String,
224
- default: void 0
225
- },
226
- /**
227
- * The alert role
228
- * @default 'alert'
229
- * @type string
230
- * @values 'alert', 'alertdialog'
231
- * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role
232
- * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
233
- */
234
- role: {
235
- type: String,
236
- default: AlertRole.alert
237
- }
238
- };
239
- const VvAlertEvents = ["close"];
240
- function useVvAlert(props, emit) {
241
- const { bus } = useInjectedAlertGroup();
242
- const hasId = useUniqueId(computed(() => props.id));
243
- const hasTitleId = computed(() => `${hasId.value}-title`);
244
- let timeout;
245
- const close = () => {
246
- if (timeout) {
247
- clearTimeout(timeout);
248
- }
249
- emit("close", hasId.value);
250
- bus?.emit("close", hasId.value);
251
- };
252
- watch(
253
- () => props.autoClose,
254
- (value) => {
255
- if (value > 0) {
256
- timeout = setTimeout(close, value);
257
- return;
258
- }
259
- if (timeout) {
260
- clearTimeout(timeout);
261
- }
262
- },
263
- {
264
- immediate: true
265
- }
266
- );
267
- const isMouseover = ref(false);
268
- const onMouseover = () => {
269
- isMouseover.value = true;
270
- if (timeout) {
271
- clearTimeout(timeout);
272
- }
273
- };
274
- const onMouseleave = () => {
275
- isMouseover.value = false;
276
- if (props.autoClose > 0) {
277
- timeout = setTimeout(close, props.autoClose);
278
- }
279
- };
280
- const { hasIcon } = useComponentIcon(computed(() => props.icon));
281
- const hasClass = useModifiers(
282
- "vv-alert",
283
- computed(() => props.modifiers),
284
- computed(() => ({
285
- "dismissable": props.autoClose > 0 || props.dismissable,
286
- "auto-close": props.autoClose > 0,
287
- "hover": isMouseover.value
288
- }))
289
- );
290
- const hasStyle = computed(() => ({
291
- "--alert-duration": `${props.autoClose}ms`
292
- }));
293
- return {
294
- close,
295
- hasIcon,
296
- hasTitleId,
297
- hasProps: computed(() => ({
298
- onMouseover,
299
- onMouseleave,
300
- "class": hasClass.value,
301
- "style": hasStyle.value,
302
- "role": props.role,
303
- "aria-labelledby": hasTitleId.value
304
- }))
305
- };
306
- }
307
- function useVolver() {
308
- return inject(INJECTION_KEY_VOLVER, void 0);
309
- }
310
- const __default__$1 = {
311
- name: "VvIcon"
312
- };
313
- const _sfc_main$1 = /* @__PURE__ */ defineComponent({
314
- ...__default__$1,
315
- props: /* @__PURE__ */ mergeDefaults({
316
- name: {},
317
- color: {},
318
- width: {},
319
- height: {},
320
- provider: {},
321
- prefix: {},
322
- src: {},
323
- horizontalFlip: { type: Boolean },
324
- verticalFlip: { type: Boolean },
325
- flip: {},
326
- mode: {},
327
- inline: { type: Boolean },
328
- rotate: {},
329
- onLoad: { type: Function },
330
- svg: {},
331
- modifiers: {}
332
- }, VvIconPropsDefaults),
333
- setup(__props) {
334
- const props = __props;
335
- const hasRotate = computed(() => {
336
- if (typeof props.rotate === "string") {
337
- return Number.parseFloat(props.rotate);
338
- }
339
- return props.rotate;
340
- });
341
- const show = ref(true);
342
- const volver = useVolver();
343
- const { modifiers } = toRefs(props);
344
- const bemCssClasses = useModifiers("vv-icon", modifiers);
345
- const provider = computed(() => {
346
- return props.provider || volver?.iconsProvider;
347
- });
348
- const icon = computed(() => {
349
- const name = props.name ?? "";
350
- const iconName = `@${provider.value}:${props.prefix}:${name}`;
351
- if (iconLoaded(iconName)) {
352
- return iconName;
353
- }
354
- const iconsCollection = volver?.iconsCollections.find(
355
- (iconsCollection2) => {
356
- const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
357
- return iconLoaded(icon2);
358
- }
359
- );
360
- if (iconsCollection) {
361
- return `@${provider.value}:${iconsCollection.prefix}:${name}`;
362
- }
363
- return name;
364
- });
365
- function getSvgContent(svg) {
366
- let dom;
367
- if (typeof window === "undefined") {
368
- const { JSDOM } = require("jsdom");
369
- dom = new JSDOM().window;
370
- }
371
- const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
372
- const svgDomString = domParser.parseFromString(svg, "text/html");
373
- const svgEl = svgDomString.querySelector("svg");
374
- return svgEl;
375
- }
376
- function addIconFromSvg(svg) {
377
- const svgContentEl = getSvgContent(svg);
378
- const svgContent = svgContentEl?.innerHTML.trim() || "";
379
- if (svgContentEl && svgContent) {
380
- addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
381
- body: svgContent,
382
- // Set height and width from svg content
383
- height: svgContentEl.viewBox.baseVal.height,
384
- width: svgContentEl.viewBox.baseVal.width
385
- });
386
- }
387
- }
388
- if (volver) {
389
- if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
390
- show.value = false;
391
- volver.fetchIcon(props.src).then((svg) => {
392
- if (svg) {
393
- addIconFromSvg(svg);
394
- show.value = true;
395
- }
396
- }).catch((e) => {
397
- throw new Error(`Error during fetch icon: ${e?.message}`);
398
- });
399
- }
400
- }
401
- if (props.svg) {
402
- addIconFromSvg(props.svg);
403
- }
404
- return (_ctx, _cache) => {
405
- return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
406
- key: 0,
407
- class: unref(bemCssClasses)
408
- }, {
409
- inline: __props.inline,
410
- width: __props.width,
411
- height: __props.height,
412
- horizontalFlip: __props.horizontalFlip,
413
- verticalFlip: __props.verticalFlip,
414
- flip: __props.flip,
415
- rotate: unref(hasRotate),
416
- color: __props.color,
417
- icon: unref(icon)
418
- }, { onLoad: __props.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
419
- };
420
- }
421
- });
422
- const _hoisted_1 = {
423
- key: 0,
424
- class: "vv-alert__header"
425
- };
426
- const _hoisted_2 = ["id"];
427
- const _hoisted_3 = ["aria-label"];
428
- const _hoisted_4 = {
429
- key: 1,
430
- class: "vv-alert__content"
431
- };
432
- const _hoisted_5 = {
433
- key: 2,
434
- class: "vv-alert__footer"
435
- };
436
- const __default__ = {
437
- name: "VvAlert"
438
- };
439
- const _sfc_main = /* @__PURE__ */ defineComponent({
440
- ...__default__,
441
- props: VvAlertProps,
442
- emits: VvAlertEvents,
443
- setup(__props, { expose: __expose, emit: __emit }) {
444
- const props = __props;
445
- const emit = __emit;
446
- const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit);
447
- __expose({ close });
448
- return (_ctx, _cache) => {
449
- return openBlock(), createElementBlock(
450
- "div",
451
- normalizeProps(guardReactiveProps(unref(hasProps))),
452
- [
453
- _ctx.$slots.header || _ctx.$slots.title || _ctx.$slots.close || _ctx.$slots["title::before"] || _ctx.$slots["title::after"] || _ctx.title || unref(hasIcon) || _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("div", _hoisted_1, [
454
- unref(hasIcon) ? (openBlock(), createBlock(
455
- _sfc_main$1,
456
- mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }),
457
- null,
458
- 16
459
- /* FULL_PROPS */
460
- )) : createCommentVNode("v-if", true),
461
- renderSlot(_ctx.$slots, "header", {}, () => [
462
- renderSlot(_ctx.$slots, "title::before"),
463
- _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("strong", {
464
- key: 0,
465
- id: unref(hasTitleId),
466
- class: "vv-alert__title"
467
- }, [
468
- renderSlot(_ctx.$slots, "title", {}, () => [
469
- createTextVNode(
470
- toDisplayString(_ctx.title),
471
- 1
472
- /* TEXT */
473
- )
474
- ])
475
- ], 8, _hoisted_2)) : createCommentVNode("v-if", true),
476
- renderSlot(_ctx.$slots, "title::after")
477
- ]),
478
- renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps({ close: unref(close) })), () => [
479
- _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("button", {
480
- key: 0,
481
- class: "vv-alert__close",
482
- type: "button",
483
- "aria-label": _ctx.closeLabel,
484
- onClick: _cache[0] || (_cache[0] = withModifiers(
485
- //@ts-ignore
486
- (...args) => unref(close) && unref(close)(...args),
487
- ["stop"]
488
- ))
489
- }, [..._cache[1] || (_cache[1] = [
490
- createElementVNode(
491
- "div",
492
- { class: "vv-alert__close-mask" },
493
- null,
494
- -1
495
- /* CACHED */
496
- )
497
- ])], 8, _hoisted_3)) : createCommentVNode("v-if", true)
498
- ])
499
- ])) : createCommentVNode("v-if", true),
500
- _ctx.$slots.default || _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_4, [
501
- renderSlot(_ctx.$slots, "default", {}, () => [
502
- createTextVNode(
503
- toDisplayString(_ctx.content),
504
- 1
505
- /* TEXT */
506
- )
507
- ])
508
- ])) : createCommentVNode("v-if", true),
509
- _ctx.$slots.footer || _ctx.footer ? (openBlock(), createElementBlock("div", _hoisted_5, [
510
- renderSlot(_ctx.$slots, "footer", {}, () => [
511
- createTextVNode(
512
- toDisplayString(_ctx.footer),
513
- 1
514
- /* TEXT */
515
- )
516
- ])
517
- ])) : createCommentVNode("v-if", true)
518
- ],
519
- 16
520
- /* FULL_PROPS */
521
- );
522
- };
523
- }
524
- });
525
- export {
526
- _sfc_main as default
527
- };
1
+ import{inject as e,computed as t,useId as o,unref as l,watch as a,ref as i,defineComponent as s,mergeDefaults as r,toRefs as n,createBlock as u,createCommentVNode as v,openBlock as c,mergeProps as f,createElementBlock as d,normalizeProps as p,guardReactiveProps as m,renderSlot as h,createTextVNode as b,toDisplayString as y,withModifiers as $,createElementVNode as g}from"vue";import{iconLoaded as w,Icon as S,addIcon as k}from"@iconify/vue";var x=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(x||{}),I=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(I||{}),_=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(_||{}),C=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(C||{}),L=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(L||{}),F=/* @__PURE__ */(e=>(e.alert="alert",e.alertdialog="alertdialog",e))(F||{});const T=/* @__PURE__ */Symbol.for("volver"),B=/* @__PURE__ */Symbol.for("alertGroup"),M={prefix:"normal"},O={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:_.before,validation:e=>Object.values(_).includes(e)}},P={id:[String,Number]};function A(e,o,a){return t(()=>{const t={[e]:!0},i="string"==typeof o?.value?o.value.split(" "):o?.value;return i&&Array.isArray(i)&&i.forEach(o=>{o&&(t[`${e}--${o}`]=!0)}),a&&Object.keys(a.value).forEach(o=>{t[`${e}--${o}`]=l(a.value[o])}),t})}I.bottom,C.button,L.button,x.local;const j={...P,...O,modifiers:{type:[String,Array],default:void 0},dismissable:{type:Boolean,default:!1},autoClose:{type:Number,default:0},closeLabel:{type:String,default:"Close"},title:{type:String,default:void 0},content:{type:String,default:void 0},footer:{type:String,default:void 0},role:{type:String,default:F.alert}};function E(l,s){const{bus:r}=e(B,{}),n=(u=t(()=>l.id),t(()=>String(u?.value||o())));var u;const v=t(()=>`${n.value}-title`);let c;const f=()=>{c&&clearTimeout(c),s("close",n.value),r?.emit("close",n.value)};a(()=>l.autoClose,e=>{e>0?c=setTimeout(f,e):c&&clearTimeout(c)},{immediate:!0});const d=i(!1),p=()=>{d.value=!0,c&&clearTimeout(c)},m=()=>{d.value=!1,l.autoClose>0&&(c=setTimeout(f,l.autoClose))},{hasIcon:h}=function(e,o){const l=t(()=>"string"==typeof e?.value?{name:e?.value}:e?.value),a=t(()=>o?.value===_.before?l.value:void 0),i=t(()=>o?.value===_.after?l.value:void 0),s=t(()=>o?.value===I.left?l.value:void 0),r=t(()=>o?.value===I.right?l.value:void 0),n=t(()=>o?.value===I.top?l.value:void 0),u=t(()=>o?.value===I.bottom?l.value:void 0);return{hasIcon:l,hasIconLeft:s,hasIconRight:r,hasIconTop:n,hasIconBottom:u,hasIconBefore:a,hasIconAfter:i}}(t(()=>l.icon)),b=A("vv-alert",t(()=>l.modifiers),t(()=>({dismissable:l.autoClose>0||l.dismissable,"auto-close":l.autoClose>0,hover:d.value}))),y=t(()=>({"--alert-duration":`${l.autoClose}ms`}));return{close:f,hasIcon:h,hasTitleId:v,hasProps:t(()=>({onMouseover:p,onMouseleave:m,class:b.value,style:y.value,role:l.role,"aria-labelledby":v.value}))}}const V=/* @__PURE__ */s({name:"VvIcon",props:/* @__PURE__ */r({name:{},color:{},width:{},height:{},provider:{},prefix:{},src:{},horizontalFlip:{type:Boolean},verticalFlip:{type:Boolean},flip:{},mode:{},inline:{type:Boolean},rotate:{},onLoad:{type:Function},svg:{},modifiers:{}},M),setup(o){const a=o,s=t(()=>"string"==typeof a.rotate?Number.parseFloat(a.rotate):a.rotate),r=i(!0),d=e(T,void 0),{modifiers:p}=n(a),m=A("vv-icon",p),h=t(()=>a.provider||d?.iconsProvider),b=t(()=>{const e=a.name??"",t=`@${h.value}:${a.prefix}:${e}`;if(w(t))return t;const o=d?.iconsCollections.find(t=>{const o=`@${h.value}:${t.prefix}:${e}`;return w(o)});return o?`@${h.value}:${o.prefix}:${e}`:e});function y(e){const t=function(e){let t;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");t=(new e).window}return(t?new t.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),o=t?.innerHTML.trim()||"";t&&o&&k(`@${h.value}:${a.prefix}:${a.name}`,{body:o,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return d&&a.src&&!w(`@${h.value}:${a.prefix}:${a.name}`)&&(r.value=!1,d.fetchIcon(a.src).then(e=>{e&&(y(e),r.value=!0)}).catch(e=>{throw new Error(`Error during fetch icon: ${e?.message}`)})),a.svg&&y(a.svg),(e,t)=>l(r)?(c(),u(l(S),f({key:0,class:l(m)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:l(s),color:o.color,icon:l(b)},{onLoad:o.onLoad}),null,16,["class","onLoad"])):v("v-if",!0)}}),z={key:0,class:"vv-alert__header"},D=["id"],N=["aria-label"],q={key:1,class:"vv-alert__content"},G={key:2,class:"vv-alert__footer"},H=/* @__PURE__ */s({name:"VvAlert",props:j,emits:["close"],setup(e,{expose:t,emit:o}){const a=e,i=o,{hasProps:s,hasTitleId:r,hasIcon:n,close:w}=E(a,i);return t({close:w}),(e,t)=>(c(),d("div",p(m(l(s))),[e.$slots.header||e.$slots.title||e.$slots.close||e.$slots["title::before"]||e.$slots["title::after"]||e.title||l(n)||e.dismissable||e.autoClose?(c(),d("div",z,[l(n)?(c(),u(V,f({key:0},l(n),{class:"vv-alert__icon"}),null,16)):v("v-if",!0),h(e.$slots,"header",{},()=>[h(e.$slots,"title::before"),e.$slots.title||e.title?(c(),d("strong",{key:0,id:l(r),class:"vv-alert__title"},[h(e.$slots,"title",{},()=>[b(y(e.title),1)])],8,D)):v("v-if",!0),h(e.$slots,"title::after")]),h(e.$slots,"close",p(m({close:l(w)})),()=>[e.dismissable||e.autoClose?(c(),d("button",{key:0,class:"vv-alert__close",type:"button","aria-label":e.closeLabel,onClick:t[0]||(t[0]=$((...e)=>l(w)&&l(w)(...e),["stop"]))},[...t[1]||(t[1]=[g("div",{class:"vv-alert__close-mask"},null,-1)])],8,N)):v("v-if",!0)])])):v("v-if",!0),e.$slots.default||e.content?(c(),d("div",q,[h(e.$slots,"default",{},()=>[b(y(e.content),1)])])):v("v-if",!0),e.$slots.footer||e.footer?(c(),d("div",G,[h(e.$slots,"footer",{},()=>[b(y(e.footer),1)])])):v("v-if",!0)],16))}});export{H as default};
@@ -1,3 +1,5 @@
1
+ declare const _default: typeof __VLS_export;
2
+ export default _default;
1
3
  declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<globalThis.ExtractPropTypes<{
2
4
  modifiers: {
3
5
  type: PropType<import("../..").AlertModifier | import("../..").AlertModifier[]>;
@@ -42,6 +44,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<global
42
44
  };
43
45
  id: (StringConstructor | NumberConstructor)[];
44
46
  }>, {
47
+ /** Close the alert */
45
48
  close: () => void;
46
49
  }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
47
50
  modifiers: {
@@ -114,8 +117,6 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<global
114
117
  } & {
115
118
  footer?: (props: {}) => any;
116
119
  }>;
117
- declare const _default: typeof __VLS_export;
118
- export default _default;
119
120
  type __VLS_WithSlots<T, S> = T & {
120
121
  new (): {
121
122
  $slots: S;