@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.
- package/bin/icons.js +1 -93
- package/dist/components/VvAccordion/VvAccordion.es.js +1 -366
- package/dist/components/VvAccordion/VvAccordion.vue.d.ts +7 -2
- package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js +2 -702
- package/dist/components/VvAccordionGroup/VvAccordionGroup.vue.d.ts +5 -2
- package/dist/components/VvAction/VvAction.es.js +1 -302
- package/dist/components/VvAction/VvAction.umd.js +1 -1
- package/dist/components/VvAction/VvAction.vue.d.ts +3 -2
- package/dist/components/VvAlert/VvAlert.es.js +1 -527
- package/dist/components/VvAlert/VvAlert.vue.d.ts +3 -2
- package/dist/components/VvAlertGroup/VvAlertGroup.es.js +1 -730
- package/dist/components/VvAlertGroup/VvAlertGroup.vue.d.ts +3 -3
- package/dist/components/VvAvatar/VvAvatar.es.js +1 -132
- package/dist/components/VvAvatar/VvAvatar.vue.d.ts +2 -2
- package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js +1 -250
- package/dist/components/VvAvatarGroup/VvAvatarGroup.vue.d.ts +2 -2
- package/dist/components/VvBadge/VvBadge.es.js +1 -131
- package/dist/components/VvBadge/VvBadge.vue.d.ts +2 -2
- package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js +1 -410
- package/dist/components/VvBreadcrumb/VvBreadcrumb.umd.js +1 -1
- package/dist/components/VvBreadcrumb/VvBreadcrumb.vue.d.ts +2 -2
- package/dist/components/VvButton/VvButton.es.js +1 -882
- package/dist/components/VvButton/VvButton.umd.js +1 -1
- package/dist/components/VvButton/VvButton.vue.d.ts +3 -2
- package/dist/components/VvButtonGroup/VvButtonGroup.es.js +1 -214
- package/dist/components/VvButtonGroup/VvButtonGroup.vue.d.ts +2 -2
- package/dist/components/VvCard/VvCard.es.js +1 -152
- package/dist/components/VvCard/VvCard.vue.d.ts +2 -2
- package/dist/components/VvCheckbox/VvCheckbox.es.js +1 -741
- package/dist/components/VvCheckbox/VvCheckbox.vue.d.ts +2 -2
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +1 -981
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.vue.d.ts +2 -2
- package/dist/components/VvCombobox/VvCombobox.es.js +1 -3463
- package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
- package/dist/components/VvCombobox/VvCombobox.vue.d.ts +16 -7
- package/dist/components/VvDialog/VvDialog.es.js +1 -317
- package/dist/components/VvDialog/VvDialog.vue.d.ts +4 -2
- package/dist/components/VvDropdown/VvDropdown.es.js +1 -750
- package/dist/components/VvDropdown/VvDropdown.vue.d.ts +14 -2
- package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +2 -2
- package/dist/components/VvDropdown/VvDropdownItem.vue.d.ts +2 -2
- package/dist/components/VvDropdown/VvDropdownOptgroup.vue.d.ts +11 -4
- package/dist/components/VvDropdown/VvDropdownOption.vue.d.ts +2 -2
- package/dist/components/VvDropdownAction/VvDropdownAction.es.js +1 -448
- package/dist/components/VvDropdownAction/VvDropdownAction.umd.js +1 -1
- package/dist/components/VvDropdownItem/VvDropdownItem.es.js +1 -149
- package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.es.js +1 -104
- package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.umd.js +1 -1
- package/dist/components/VvDropdownOption/VvDropdownOption.es.js +1 -281
- package/dist/components/VvIcon/VvIcon.es.js +1 -143
- package/dist/components/VvIcon/VvIcon.vue.d.ts +2 -2
- package/dist/components/VvInputFile/VvInputFile.es.js +1 -1704
- package/dist/components/VvInputFile/VvInputFile.umd.js +1 -1
- package/dist/components/VvInputFile/VvInputFile.vue.d.ts +34 -4
- package/dist/components/VvInputFile/index.d.ts +7 -0
- package/dist/components/VvInputText/VvInputText.es.js +4 -2790
- package/dist/components/VvInputText/VvInputText.umd.js +1 -1
- package/dist/components/VvInputText/VvInputText.vue.d.ts +8 -3
- package/dist/components/VvNav/VvNav.es.js +1 -438
- package/dist/components/VvNav/VvNav.umd.js +1 -1
- package/dist/components/VvNav/VvNav.vue.d.ts +2 -2
- package/dist/components/VvNav/VvNavItem.vue.d.ts +2 -2
- package/dist/components/VvNav/VvNavSeparator.vue.d.ts +1 -1
- package/dist/components/VvNavItem/VvNavItem.es.js +1 -337
- package/dist/components/VvNavItem/VvNavItem.umd.js +1 -1
- package/dist/components/VvNavSeparator/VvNavSeparator.es.js +1 -24
- package/dist/components/VvProgress/VvProgress.es.js +1 -163
- package/dist/components/VvProgress/VvProgress.vue.d.ts +2 -2
- package/dist/components/VvRadio/VvRadio.es.js +1 -661
- package/dist/components/VvRadio/VvRadio.vue.d.ts +2 -2
- package/dist/components/VvRadioGroup/VvRadioGroup.es.js +1 -901
- package/dist/components/VvRadioGroup/VvRadioGroup.vue.d.ts +2 -2
- package/dist/components/VvSelect/VvSelect.es.js +1 -1103
- package/dist/components/VvSelect/VvSelect.vue.d.ts +11 -7
- package/dist/components/VvTab/VvTab.es.js +1 -558
- package/dist/components/VvTab/VvTab.umd.js +1 -1
- package/dist/components/VvTab/VvTab.vue.d.ts +2 -2
- package/dist/components/VvTextarea/VvTextarea.es.js +2 -1989
- package/dist/components/VvTextarea/VvTextarea.vue.d.ts +3 -3
- package/dist/components/VvTooltip/VvTooltip.es.js +1 -154
- package/dist/components/VvTooltip/VvTooltip.vue.d.ts +2 -2
- package/dist/components/index.es.js +6 -8558
- package/dist/components/index.umd.js +1 -1
- package/dist/composables/index.es.js +2 -247
- package/dist/composables/index.umd.js +1 -1
- package/dist/directives/index.es.js +2 -311
- package/dist/directives/index.umd.js +1 -1
- package/dist/directives/v-contextmenu.es.js +2 -142
- package/dist/directives/v-contextmenu.umd.js +1 -1
- package/dist/directives/v-tooltip.es.js +1 -172
- package/dist/icons.es.js +1 -39
- package/dist/icons.umd.js +1 -1
- package/dist/index.es.js +1 -219
- package/dist/props/index.d.ts +7 -0
- package/dist/resolvers/unplugin.es.js +1 -187
- package/dist/stories/AccordionGroup/AccordionGroupSlots.stories.d.ts +2 -2
- package/dist/stories/Avatar/Avatar.settings.d.ts +1 -1
- package/package.json +47 -40
|
@@ -1,527 +1 @@
|
|
|
1
|
-
import
|
|
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;
|