@volverjs/ui-vue 0.0.11 → 0.0.12
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/VvAccordionGroup/VvAccordionGroup.es.js +2 -702
- package/dist/components/VvAction/VvAction.es.js +1 -302
- package/dist/components/VvAlert/VvAlert.es.js +1 -527
- package/dist/components/VvAlertGroup/VvAlertGroup.es.js +1 -730
- package/dist/components/VvAvatar/VvAvatar.es.js +1 -132
- package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js +1 -250
- package/dist/components/VvBadge/VvBadge.es.js +1 -131
- package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js +1 -410
- package/dist/components/VvButton/VvButton.es.js +1 -882
- package/dist/components/VvButtonGroup/VvButtonGroup.es.js +1 -214
- package/dist/components/VvCard/VvCard.es.js +1 -152
- package/dist/components/VvCheckbox/VvCheckbox.es.js +1 -741
- package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +1 -981
- 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 +8 -1
- package/dist/components/VvDialog/VvDialog.es.js +1 -317
- package/dist/components/VvDropdown/VvDropdown.es.js +1 -750
- package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +2 -2
- package/dist/components/VvDropdown/VvDropdownOptgroup.vue.d.ts +9 -2
- package/dist/components/VvDropdownAction/VvDropdownAction.es.js +1 -448
- 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/VvInputFile/VvInputFile.es.js +1 -1704
- package/dist/components/VvInputText/VvInputText.es.js +4 -2790
- package/dist/components/VvNav/VvNav.es.js +1 -438
- package/dist/components/VvNavItem/VvNavItem.es.js +1 -337
- package/dist/components/VvNavSeparator/VvNavSeparator.es.js +1 -24
- package/dist/components/VvProgress/VvProgress.es.js +1 -163
- package/dist/components/VvRadio/VvRadio.es.js +1 -661
- package/dist/components/VvRadioGroup/VvRadioGroup.es.js +1 -901
- package/dist/components/VvSelect/VvSelect.es.js +1 -1103
- package/dist/components/VvSelect/VvSelect.vue.d.ts +3 -1
- package/dist/components/VvTab/VvTab.es.js +1 -558
- package/dist/components/VvTextarea/VvTextarea.es.js +2 -1989
- package/dist/components/VvTooltip/VvTooltip.es.js +1 -154
- 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/resolvers/unplugin.es.js +1 -187
- package/package.json +33 -33
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
declare var
|
|
1
|
+
declare var __VLS_12: {};
|
|
2
2
|
type __VLS_Slots = {} & {
|
|
3
|
-
default?: (props: typeof
|
|
3
|
+
default?: (props: typeof __VLS_12) => any;
|
|
4
4
|
};
|
|
5
5
|
declare const __VLS_base: import("vue").DefineComponent<globalThis.ExtractPropTypes<{
|
|
6
6
|
modifiers: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const __VLS_export: import("vue").DefineComponent<globalThis.ExtractPropTypes<{
|
|
1
|
+
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<globalThis.ExtractPropTypes<{
|
|
2
2
|
label: {
|
|
3
3
|
type: (StringConstructor | NumberConstructor)[];
|
|
4
4
|
default: undefined;
|
|
@@ -10,6 +10,13 @@ declare const __VLS_export: import("vue").DefineComponent<globalThis.ExtractProp
|
|
|
10
10
|
};
|
|
11
11
|
}>> & Readonly<{}>, {
|
|
12
12
|
label: string | number;
|
|
13
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any
|
|
13
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {
|
|
14
|
+
default?: (props: {}) => any;
|
|
15
|
+
}>;
|
|
14
16
|
declare const _default: typeof __VLS_export;
|
|
15
17
|
export default _default;
|
|
18
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
19
|
+
new (): {
|
|
20
|
+
$slots: S;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
@@ -1,448 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import "mitt";
|
|
3
|
-
import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
|
|
4
|
-
var StorageType = /* @__PURE__ */ ((StorageType2) => {
|
|
5
|
-
StorageType2["local"] = "local";
|
|
6
|
-
StorageType2["session"] = "session";
|
|
7
|
-
return StorageType2;
|
|
8
|
-
})(StorageType || {});
|
|
9
|
-
var Side = /* @__PURE__ */ ((Side2) => {
|
|
10
|
-
Side2["left"] = "left";
|
|
11
|
-
Side2["right"] = "right";
|
|
12
|
-
Side2["top"] = "top";
|
|
13
|
-
Side2["bottom"] = "bottom";
|
|
14
|
-
return Side2;
|
|
15
|
-
})(Side || {});
|
|
16
|
-
var Position = /* @__PURE__ */ ((Position2) => {
|
|
17
|
-
Position2["before"] = "before";
|
|
18
|
-
Position2["after"] = "after";
|
|
19
|
-
return Position2;
|
|
20
|
-
})(Position || {});
|
|
21
|
-
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
|
|
22
|
-
ButtonType2["button"] = "button";
|
|
23
|
-
ButtonType2["submit"] = "submit";
|
|
24
|
-
ButtonType2["reset"] = "reset";
|
|
25
|
-
return ButtonType2;
|
|
26
|
-
})(ButtonType || {});
|
|
27
|
-
var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
|
|
28
|
-
ActionTag2["nuxtLink"] = "nuxt-link";
|
|
29
|
-
ActionTag2["routerLink"] = "router-link";
|
|
30
|
-
ActionTag2["a"] = "a";
|
|
31
|
-
ActionTag2["button"] = "button";
|
|
32
|
-
return ActionTag2;
|
|
33
|
-
})(ActionTag || {});
|
|
34
|
-
var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
|
|
35
|
-
ActionRoles2["button"] = "button";
|
|
36
|
-
ActionRoles2["link"] = "link";
|
|
37
|
-
ActionRoles2["menuitem"] = "menuitem";
|
|
38
|
-
return ActionRoles2;
|
|
39
|
-
})(ActionRoles || {});
|
|
40
|
-
var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
|
|
41
|
-
DropdownRole2["listbox"] = "listbox";
|
|
42
|
-
DropdownRole2["menu"] = "menu";
|
|
43
|
-
return DropdownRole2;
|
|
44
|
-
})(DropdownRole || {});
|
|
45
|
-
const INJECTION_KEY_VOLVER = Symbol.for("volver");
|
|
46
|
-
const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
|
|
47
|
-
"dropdownTrigger"
|
|
48
|
-
);
|
|
49
|
-
const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
|
|
50
|
-
"dropdownItem"
|
|
51
|
-
);
|
|
52
|
-
const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
|
|
53
|
-
"dropdownAction"
|
|
54
|
-
);
|
|
55
|
-
const LinkProps = {
|
|
56
|
-
/**
|
|
57
|
-
* The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
|
|
58
|
-
* @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
|
|
59
|
-
*/
|
|
60
|
-
to: {
|
|
61
|
-
type: [String, Object]
|
|
62
|
-
},
|
|
63
|
-
/**
|
|
64
|
-
* Anchor href
|
|
65
|
-
*/
|
|
66
|
-
href: String,
|
|
67
|
-
/**
|
|
68
|
-
* Anchor target
|
|
69
|
-
*/
|
|
70
|
-
target: String,
|
|
71
|
-
/**
|
|
72
|
-
* Anchor rel
|
|
73
|
-
*/
|
|
74
|
-
rel: {
|
|
75
|
-
type: String,
|
|
76
|
-
default: "noopener noreferrer"
|
|
77
|
-
}
|
|
78
|
-
};
|
|
79
|
-
const DisabledProps = {
|
|
80
|
-
/**
|
|
81
|
-
* Whether the form control is disabled
|
|
82
|
-
*/
|
|
83
|
-
disabled: {
|
|
84
|
-
type: Boolean,
|
|
85
|
-
default: false
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
const ActiveProps = {
|
|
89
|
-
/**
|
|
90
|
-
* Whether the item is active
|
|
91
|
-
*/
|
|
92
|
-
active: {
|
|
93
|
-
type: Boolean,
|
|
94
|
-
default: false
|
|
95
|
-
}
|
|
96
|
-
};
|
|
97
|
-
const CurrentProps = {
|
|
98
|
-
/**
|
|
99
|
-
* Whether the item is current
|
|
100
|
-
*/
|
|
101
|
-
current: {
|
|
102
|
-
type: Boolean,
|
|
103
|
-
default: false
|
|
104
|
-
}
|
|
105
|
-
};
|
|
106
|
-
const PressedProps = {
|
|
107
|
-
/**
|
|
108
|
-
* Whether the item is pressed
|
|
109
|
-
*/
|
|
110
|
-
pressed: {
|
|
111
|
-
type: Boolean,
|
|
112
|
-
default: false
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
const LabelProps = {
|
|
116
|
-
/**
|
|
117
|
-
* The item label
|
|
118
|
-
*/
|
|
119
|
-
label: {
|
|
120
|
-
type: [String, Number],
|
|
121
|
-
default: void 0
|
|
122
|
-
}
|
|
123
|
-
};
|
|
124
|
-
const ModifiersProps = {
|
|
125
|
-
/**
|
|
126
|
-
* Component BEM modifiers
|
|
127
|
-
*/
|
|
128
|
-
modifiers: {
|
|
129
|
-
type: [String, Array],
|
|
130
|
-
default: void 0
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
({
|
|
134
|
-
/**
|
|
135
|
-
* VvIcon position
|
|
136
|
-
*/
|
|
137
|
-
iconPosition: {
|
|
138
|
-
default: Position.before
|
|
139
|
-
}
|
|
140
|
-
});
|
|
141
|
-
({
|
|
142
|
-
/**
|
|
143
|
-
* Dropdown placement
|
|
144
|
-
*/
|
|
145
|
-
placement: {
|
|
146
|
-
default: Side.bottom
|
|
147
|
-
}
|
|
148
|
-
});
|
|
149
|
-
const ActionProps = {
|
|
150
|
-
...DisabledProps,
|
|
151
|
-
...LabelProps,
|
|
152
|
-
...PressedProps,
|
|
153
|
-
...ActiveProps,
|
|
154
|
-
...CurrentProps,
|
|
155
|
-
...LinkProps,
|
|
156
|
-
/**
|
|
157
|
-
* Button type
|
|
158
|
-
*/
|
|
159
|
-
type: {
|
|
160
|
-
type: String,
|
|
161
|
-
default: ButtonType.button,
|
|
162
|
-
validator: (value) => Object.values(ButtonType).includes(value)
|
|
163
|
-
},
|
|
164
|
-
/**
|
|
165
|
-
* Button aria-label
|
|
166
|
-
*/
|
|
167
|
-
ariaLabel: {
|
|
168
|
-
type: String,
|
|
169
|
-
default: void 0
|
|
170
|
-
},
|
|
171
|
-
/**
|
|
172
|
-
* Default tag for the action
|
|
173
|
-
*/
|
|
174
|
-
defaultTag: {
|
|
175
|
-
type: String,
|
|
176
|
-
default: ActionTag.button
|
|
177
|
-
}
|
|
178
|
-
};
|
|
179
|
-
({
|
|
180
|
-
storageType: {
|
|
181
|
-
default: StorageType.local
|
|
182
|
-
}
|
|
183
|
-
});
|
|
184
|
-
const VvActionEvents = ["click", "mouseover", "mouseleave"];
|
|
185
|
-
const VvActionProps = ActionProps;
|
|
186
|
-
function useVolver() {
|
|
187
|
-
return inject(INJECTION_KEY_VOLVER, void 0);
|
|
188
|
-
}
|
|
189
|
-
function useInjectedDropdownTrigger() {
|
|
190
|
-
return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
|
|
191
|
-
}
|
|
192
|
-
function useInjectedDropdownItem() {
|
|
193
|
-
return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
|
|
194
|
-
}
|
|
195
|
-
function useInjectedDropdownAction() {
|
|
196
|
-
return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
|
|
197
|
-
}
|
|
198
|
-
const __default__$1 = {
|
|
199
|
-
name: "VvAction"
|
|
200
|
-
};
|
|
201
|
-
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
202
|
-
...__default__$1,
|
|
203
|
-
props: VvActionProps,
|
|
204
|
-
emits: VvActionEvents,
|
|
205
|
-
setup(__props, { expose: __expose, emit: __emit }) {
|
|
206
|
-
const props = __props;
|
|
207
|
-
const emit = __emit;
|
|
208
|
-
const instance = getCurrentInstance();
|
|
209
|
-
const volver = useVolver();
|
|
210
|
-
const element = ref(null);
|
|
211
|
-
__expose({ $el: element });
|
|
212
|
-
const {
|
|
213
|
-
reference: dropdownTriggerReference,
|
|
214
|
-
bus: dropdownEventBus,
|
|
215
|
-
aria: dropdownAria,
|
|
216
|
-
expanded: dropdownExpanded
|
|
217
|
-
} = useInjectedDropdownTrigger();
|
|
218
|
-
watch(
|
|
219
|
-
() => element.value,
|
|
220
|
-
(newValue) => {
|
|
221
|
-
if (dropdownTriggerReference) {
|
|
222
|
-
dropdownTriggerReference.value = newValue;
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
);
|
|
226
|
-
const pressed = computed(() => {
|
|
227
|
-
return props.pressed || dropdownExpanded?.value;
|
|
228
|
-
});
|
|
229
|
-
const { role } = useInjectedDropdownAction();
|
|
230
|
-
const hasTag = computed(() => {
|
|
231
|
-
switch (true) {
|
|
232
|
-
case props.disabled:
|
|
233
|
-
return ActionTag.button;
|
|
234
|
-
case props.to !== void 0:
|
|
235
|
-
return volver?.nuxt ? resolveComponent(ActionTag.nuxtLink) : ActionTag.routerLink;
|
|
236
|
-
case props.href !== void 0:
|
|
237
|
-
return ActionTag.a;
|
|
238
|
-
default:
|
|
239
|
-
return props.defaultTag;
|
|
240
|
-
}
|
|
241
|
-
});
|
|
242
|
-
const hasProps = computed(() => {
|
|
243
|
-
const toReturn = {
|
|
244
|
-
...dropdownAria?.value,
|
|
245
|
-
ariaPressed: pressed.value ? true : void 0,
|
|
246
|
-
ariaLabel: props.ariaLabel,
|
|
247
|
-
role: role?.value
|
|
248
|
-
};
|
|
249
|
-
switch (hasTag.value) {
|
|
250
|
-
case ActionTag.a:
|
|
251
|
-
return {
|
|
252
|
-
...toReturn,
|
|
253
|
-
href: props.href,
|
|
254
|
-
target: props.target,
|
|
255
|
-
rel: props.rel
|
|
256
|
-
};
|
|
257
|
-
case ActionTag.routerLink:
|
|
258
|
-
case ActionTag.nuxtLink:
|
|
259
|
-
return {
|
|
260
|
-
...toReturn,
|
|
261
|
-
to: props.to,
|
|
262
|
-
target: props.target
|
|
263
|
-
};
|
|
264
|
-
case ActionTag.button:
|
|
265
|
-
return {
|
|
266
|
-
...toReturn,
|
|
267
|
-
type: props.type,
|
|
268
|
-
disabled: props.disabled
|
|
269
|
-
};
|
|
270
|
-
default:
|
|
271
|
-
return toReturn;
|
|
272
|
-
}
|
|
273
|
-
});
|
|
274
|
-
function onClick(e) {
|
|
275
|
-
if (props.disabled) {
|
|
276
|
-
e.preventDefault();
|
|
277
|
-
return;
|
|
278
|
-
}
|
|
279
|
-
if (instance?.vnode.props?.onClick) {
|
|
280
|
-
emit("click", e);
|
|
281
|
-
return;
|
|
282
|
-
}
|
|
283
|
-
dropdownEventBus?.emit("click", e);
|
|
284
|
-
}
|
|
285
|
-
function onMouseover(e) {
|
|
286
|
-
if (instance?.vnode.props?.onMouseover) {
|
|
287
|
-
emit("mouseover", e);
|
|
288
|
-
return;
|
|
289
|
-
}
|
|
290
|
-
dropdownEventBus?.emit("mouseover", e);
|
|
291
|
-
}
|
|
292
|
-
function onMouseleave(e) {
|
|
293
|
-
if (instance?.vnode.props?.onMouseleave) {
|
|
294
|
-
emit("mouseleave", e);
|
|
295
|
-
return;
|
|
296
|
-
}
|
|
297
|
-
dropdownEventBus?.emit("mouseleave", e);
|
|
298
|
-
}
|
|
299
|
-
return (_ctx, _cache) => {
|
|
300
|
-
return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
|
|
301
|
-
ref_key: "element",
|
|
302
|
-
ref: element,
|
|
303
|
-
class: {
|
|
304
|
-
active: _ctx.active,
|
|
305
|
-
pressed: unref(pressed),
|
|
306
|
-
disabled: _ctx.disabled,
|
|
307
|
-
current: _ctx.current
|
|
308
|
-
},
|
|
309
|
-
onClickPassive: onClick,
|
|
310
|
-
onMouseoverPassive: onMouseover,
|
|
311
|
-
onMouseleavePassive: onMouseleave
|
|
312
|
-
}), {
|
|
313
|
-
default: withCtx(() => [
|
|
314
|
-
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
315
|
-
createTextVNode(
|
|
316
|
-
toDisplayString(_ctx.label),
|
|
317
|
-
1
|
|
318
|
-
/* TEXT */
|
|
319
|
-
)
|
|
320
|
-
])
|
|
321
|
-
]),
|
|
322
|
-
_: 3
|
|
323
|
-
/* FORWARDED */
|
|
324
|
-
}, 16, ["class"]);
|
|
325
|
-
};
|
|
326
|
-
}
|
|
327
|
-
});
|
|
328
|
-
({
|
|
329
|
-
/**
|
|
330
|
-
* Dropdown role
|
|
331
|
-
*/
|
|
332
|
-
role: {
|
|
333
|
-
default: DropdownRole.menu
|
|
334
|
-
}
|
|
335
|
-
});
|
|
336
|
-
const VvDropdownItemProps = {
|
|
337
|
-
focusOnHover: {
|
|
338
|
-
type: Boolean,
|
|
339
|
-
default: false
|
|
340
|
-
}
|
|
341
|
-
};
|
|
342
|
-
function useDropdownProvideAction({
|
|
343
|
-
expanded
|
|
344
|
-
}) {
|
|
345
|
-
provide(INJECTION_KEY_DROPDOWN_ACTION, {
|
|
346
|
-
role: ref(ActionRoles.menuitem),
|
|
347
|
-
expanded
|
|
348
|
-
});
|
|
349
|
-
}
|
|
350
|
-
const __default__ = {
|
|
351
|
-
name: "VvDropdownItem"
|
|
352
|
-
};
|
|
353
|
-
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
354
|
-
...__default__,
|
|
355
|
-
props: VvDropdownItemProps,
|
|
356
|
-
setup(__props) {
|
|
357
|
-
const props = __props;
|
|
358
|
-
const { role, expanded } = useInjectedDropdownItem();
|
|
359
|
-
const element = ref(null);
|
|
360
|
-
useDropdownProvideAction({ expanded });
|
|
361
|
-
const hovered = useElementHover(element);
|
|
362
|
-
const { focused } = useFocus(element);
|
|
363
|
-
const { focused: focusedWithin } = useFocusWithin(element);
|
|
364
|
-
watch(hovered, (newValue) => {
|
|
365
|
-
if (newValue && props.focusOnHover) {
|
|
366
|
-
focused.value = true;
|
|
367
|
-
}
|
|
368
|
-
});
|
|
369
|
-
return (_ctx, _cache) => {
|
|
370
|
-
return openBlock(), createElementBlock(
|
|
371
|
-
"div",
|
|
372
|
-
mergeProps({ role: unref(role) }, {
|
|
373
|
-
ref_key: "element",
|
|
374
|
-
ref: element,
|
|
375
|
-
class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
|
|
376
|
-
}),
|
|
377
|
-
[
|
|
378
|
-
renderSlot(_ctx.$slots, "default")
|
|
379
|
-
],
|
|
380
|
-
16
|
|
381
|
-
/* FULL_PROPS */
|
|
382
|
-
);
|
|
383
|
-
};
|
|
384
|
-
}
|
|
385
|
-
});
|
|
386
|
-
function useModifiers(prefix, modifiers, others) {
|
|
387
|
-
return computed(() => {
|
|
388
|
-
const toReturn = {
|
|
389
|
-
[prefix]: true
|
|
390
|
-
};
|
|
391
|
-
const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
|
|
392
|
-
if (modifiersArray) {
|
|
393
|
-
if (Array.isArray(modifiersArray)) {
|
|
394
|
-
modifiersArray.forEach((modifier) => {
|
|
395
|
-
if (modifier) {
|
|
396
|
-
toReturn[`${prefix}--${modifier}`] = true;
|
|
397
|
-
}
|
|
398
|
-
});
|
|
399
|
-
}
|
|
400
|
-
}
|
|
401
|
-
return toReturn;
|
|
402
|
-
});
|
|
403
|
-
}
|
|
404
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
405
|
-
__name: "VvDropdownAction",
|
|
406
|
-
props: {
|
|
407
|
-
...ActionProps,
|
|
408
|
-
...ModifiersProps
|
|
409
|
-
},
|
|
410
|
-
setup(__props) {
|
|
411
|
-
const props = __props;
|
|
412
|
-
const { modifiers } = toRefs(props);
|
|
413
|
-
const bemCssClasses = useModifiers("vv-dropdown-action", modifiers);
|
|
414
|
-
return (_ctx, _cache) => {
|
|
415
|
-
return openBlock(), createBlock(_sfc_main$1, null, {
|
|
416
|
-
default: withCtx(() => [
|
|
417
|
-
createVNode(_sfc_main$2, mergeProps({
|
|
418
|
-
disabled: _ctx.disabled,
|
|
419
|
-
pressed: _ctx.pressed,
|
|
420
|
-
active: _ctx.active,
|
|
421
|
-
type: _ctx.type,
|
|
422
|
-
to: _ctx.to,
|
|
423
|
-
href: _ctx.href,
|
|
424
|
-
target: _ctx.target,
|
|
425
|
-
rel: _ctx.rel
|
|
426
|
-
}, { class: unref(bemCssClasses) }), {
|
|
427
|
-
default: withCtx(() => [
|
|
428
|
-
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
429
|
-
createTextVNode(
|
|
430
|
-
toDisplayString(_ctx.label),
|
|
431
|
-
1
|
|
432
|
-
/* TEXT */
|
|
433
|
-
)
|
|
434
|
-
])
|
|
435
|
-
]),
|
|
436
|
-
_: 3
|
|
437
|
-
/* FORWARDED */
|
|
438
|
-
}, 16, ["class"])
|
|
439
|
-
]),
|
|
440
|
-
_: 3
|
|
441
|
-
/* FORWARDED */
|
|
442
|
-
});
|
|
443
|
-
};
|
|
444
|
-
}
|
|
445
|
-
});
|
|
446
|
-
export {
|
|
447
|
-
_sfc_main as default
|
|
448
|
-
};
|
|
1
|
+
import{inject as e,defineComponent as t,getCurrentInstance as o,ref as r,watch as n,computed as a,resolveComponent as l,createBlock as s,openBlock as u,resolveDynamicComponent as i,unref as d,mergeProps as c,withCtx as f,renderSlot as p,createTextVNode as v,toDisplayString as m,provide as b,createElementBlock as y,toRefs as g,createVNode as k}from"vue";import"mitt";import{useElementHover as x,useFocus as S,useFocusWithin as h}from"@vueuse/core";var w=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(w||{}),L=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(L||{}),_=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(_||{}),A=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(A||{}),$=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))($||{}),B=/* @__PURE__ */(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(B||{}),M=/* @__PURE__ */(e=>(e.listbox="listbox",e.menu="menu",e))(M||{});const O=Symbol.for("volver"),P=Symbol.for("dropdownTrigger"),D=Symbol.for("dropdownItem"),T=Symbol.for("dropdownAction"),V={to:{type:[String,Object]},href:String,target:String,rel:{type:String,default:"noopener noreferrer"}},j={disabled:{type:Boolean,default:!1}},C={active:{type:Boolean,default:!1}},H={current:{type:Boolean,default:!1}},I={pressed:{type:Boolean,default:!1}},E={label:{type:[String,Number],default:void 0}},N={modifiers:{type:[String,Array],default:void 0}};_.before,L.bottom;const q={...j,...E,...I,...C,...H,...V,type:{type:String,default:A.button,validator:e=>Object.values(A).includes(e)},ariaLabel:{type:String,default:void 0},defaultTag:{type:String,default:$.button}};w.local;const z=/* @__PURE__ */t({name:"VvAction",props:q,emits:["click","mouseover","mouseleave"],setup(t,{expose:b,emit:y}){const g=t,k=y,x=o(),S=e(O,void 0),h=r(null);b({$el:h});const{reference:w,bus:L,aria:_,expanded:A}=e(P,{});n(()=>h.value,e=>{w&&(w.value=e)});const B=a(()=>g.pressed||A?.value),{role:M}=e(T,{}),D=a(()=>{switch(!0){case g.disabled:return $.button;case void 0!==g.to:return S?.nuxt?l($.nuxtLink):$.routerLink;case void 0!==g.href:return $.a;default:return g.defaultTag}}),V=a(()=>{const e={..._?.value,ariaPressed:!!B.value||void 0,ariaLabel:g.ariaLabel,role:M?.value};switch(D.value){case $.a:return{...e,href:g.href,target:g.target,rel:g.rel};case $.routerLink:case $.nuxtLink:return{...e,to:g.to,target:g.target};case $.button:return{...e,type:g.type,disabled:g.disabled};default:return e}});function j(e){g.disabled?e.preventDefault():x?.vnode.props?.onClick?k("click",e):L?.emit("click",e)}function C(e){x?.vnode.props?.onMouseover?k("mouseover",e):L?.emit("mouseover",e)}function H(e){x?.vnode.props?.onMouseleave?k("mouseleave",e):L?.emit("mouseleave",e)}return(e,t)=>(u(),s(i(d(D)),c(d(V),{ref_key:"element",ref:h,class:{active:e.active,pressed:d(B),disabled:e.disabled,current:e.current},onClickPassive:j,onMouseoverPassive:C,onMouseleavePassive:H}),{default:f(()=>[p(e.$slots,"default",{},()=>[v(m(e.label),1)])]),_:3},16,["class"]))}});M.menu;const F=/* @__PURE__ */t({name:"VvDropdownItem",props:{focusOnHover:{type:Boolean,default:!1}},setup(t){const o=t,{role:a,expanded:l}=e(D,{}),s=r(null);!function({expanded:e}){b(T,{role:r(B.menuitem),expanded:e})}({expanded:l});const i=x(s),{focused:f}=S(s),{focused:v}=h(s);return n(i,e=>{e&&o.focusOnHover&&(f.value=!0)}),(e,t)=>(u(),y("div",c({role:d(a)},{ref_key:"element",ref:s,class:["vv-dropdown__item",{"focus-visible":d(f)||d(v)}]}),[p(e.$slots,"default")],16))}});const G=/* @__PURE__ */t({__name:"VvDropdownAction",props:{...q,...N},setup(e){const t=e,{modifiers:o}=g(t),r=function(e,t){return a(()=>{const o={[e]:!0},r="string"==typeof t?.value?t.value.split(" "):t?.value;return r&&Array.isArray(r)&&r.forEach(t=>{t&&(o[`${e}--${t}`]=!0)}),o})}("vv-dropdown-action",o);return(e,t)=>(u(),s(F,null,{default:f(()=>[k(z,c({disabled:e.disabled,pressed:e.pressed,active:e.active,type:e.type,to:e.to,href:e.href,target:e.target,rel:e.rel},{class:d(r)}),{default:f(()=>[p(e.$slots,"default",{},()=>[v(m(e.label),1)])]),_:3},16,["class"])]),_:3}))}});export{G as default};
|
|
@@ -1,149 +1 @@
|
|
|
1
|
-
import
|
|
2
|
-
import "mitt";
|
|
3
|
-
import { useElementHover, useFocus, useFocusWithin } from "@vueuse/core";
|
|
4
|
-
var StorageType = /* @__PURE__ */ ((StorageType2) => {
|
|
5
|
-
StorageType2["local"] = "local";
|
|
6
|
-
StorageType2["session"] = "session";
|
|
7
|
-
return StorageType2;
|
|
8
|
-
})(StorageType || {});
|
|
9
|
-
var Side = /* @__PURE__ */ ((Side2) => {
|
|
10
|
-
Side2["left"] = "left";
|
|
11
|
-
Side2["right"] = "right";
|
|
12
|
-
Side2["top"] = "top";
|
|
13
|
-
Side2["bottom"] = "bottom";
|
|
14
|
-
return Side2;
|
|
15
|
-
})(Side || {});
|
|
16
|
-
var Position = /* @__PURE__ */ ((Position2) => {
|
|
17
|
-
Position2["before"] = "before";
|
|
18
|
-
Position2["after"] = "after";
|
|
19
|
-
return Position2;
|
|
20
|
-
})(Position || {});
|
|
21
|
-
var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
|
|
22
|
-
ButtonType2["button"] = "button";
|
|
23
|
-
ButtonType2["submit"] = "submit";
|
|
24
|
-
ButtonType2["reset"] = "reset";
|
|
25
|
-
return ButtonType2;
|
|
26
|
-
})(ButtonType || {});
|
|
27
|
-
var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
|
|
28
|
-
ActionTag2["nuxtLink"] = "nuxt-link";
|
|
29
|
-
ActionTag2["routerLink"] = "router-link";
|
|
30
|
-
ActionTag2["a"] = "a";
|
|
31
|
-
ActionTag2["button"] = "button";
|
|
32
|
-
return ActionTag2;
|
|
33
|
-
})(ActionTag || {});
|
|
34
|
-
var ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
|
|
35
|
-
ActionRoles2["button"] = "button";
|
|
36
|
-
ActionRoles2["link"] = "link";
|
|
37
|
-
ActionRoles2["menuitem"] = "menuitem";
|
|
38
|
-
return ActionRoles2;
|
|
39
|
-
})(ActionRoles || {});
|
|
40
|
-
var DropdownRole = /* @__PURE__ */ ((DropdownRole2) => {
|
|
41
|
-
DropdownRole2["listbox"] = "listbox";
|
|
42
|
-
DropdownRole2["menu"] = "menu";
|
|
43
|
-
return DropdownRole2;
|
|
44
|
-
})(DropdownRole || {});
|
|
45
|
-
const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for(
|
|
46
|
-
"dropdownItem"
|
|
47
|
-
);
|
|
48
|
-
const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
|
|
49
|
-
"dropdownAction"
|
|
50
|
-
);
|
|
51
|
-
({
|
|
52
|
-
/**
|
|
53
|
-
* VvIcon position
|
|
54
|
-
*/
|
|
55
|
-
iconPosition: {
|
|
56
|
-
default: Position.before
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
({
|
|
60
|
-
/**
|
|
61
|
-
* Dropdown placement
|
|
62
|
-
*/
|
|
63
|
-
placement: {
|
|
64
|
-
default: Side.bottom
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
({
|
|
68
|
-
/**
|
|
69
|
-
* Button type
|
|
70
|
-
*/
|
|
71
|
-
type: {
|
|
72
|
-
default: ButtonType.button
|
|
73
|
-
},
|
|
74
|
-
/**
|
|
75
|
-
* Default tag for the action
|
|
76
|
-
*/
|
|
77
|
-
defaultTag: {
|
|
78
|
-
default: ActionTag.button
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
({
|
|
82
|
-
storageType: {
|
|
83
|
-
default: StorageType.local
|
|
84
|
-
}
|
|
85
|
-
});
|
|
86
|
-
({
|
|
87
|
-
/**
|
|
88
|
-
* Dropdown role
|
|
89
|
-
*/
|
|
90
|
-
role: {
|
|
91
|
-
default: DropdownRole.menu
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
const VvDropdownItemProps = {
|
|
95
|
-
focusOnHover: {
|
|
96
|
-
type: Boolean,
|
|
97
|
-
default: false
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
function useInjectedDropdownItem() {
|
|
101
|
-
return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
|
|
102
|
-
}
|
|
103
|
-
function useDropdownProvideAction({
|
|
104
|
-
expanded
|
|
105
|
-
}) {
|
|
106
|
-
provide(INJECTION_KEY_DROPDOWN_ACTION, {
|
|
107
|
-
role: ref(ActionRoles.menuitem),
|
|
108
|
-
expanded
|
|
109
|
-
});
|
|
110
|
-
}
|
|
111
|
-
const __default__ = {
|
|
112
|
-
name: "VvDropdownItem"
|
|
113
|
-
};
|
|
114
|
-
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
115
|
-
...__default__,
|
|
116
|
-
props: VvDropdownItemProps,
|
|
117
|
-
setup(__props) {
|
|
118
|
-
const props = __props;
|
|
119
|
-
const { role, expanded } = useInjectedDropdownItem();
|
|
120
|
-
const element = ref(null);
|
|
121
|
-
useDropdownProvideAction({ expanded });
|
|
122
|
-
const hovered = useElementHover(element);
|
|
123
|
-
const { focused } = useFocus(element);
|
|
124
|
-
const { focused: focusedWithin } = useFocusWithin(element);
|
|
125
|
-
watch(hovered, (newValue) => {
|
|
126
|
-
if (newValue && props.focusOnHover) {
|
|
127
|
-
focused.value = true;
|
|
128
|
-
}
|
|
129
|
-
});
|
|
130
|
-
return (_ctx, _cache) => {
|
|
131
|
-
return openBlock(), createElementBlock(
|
|
132
|
-
"div",
|
|
133
|
-
mergeProps({ role: unref(role) }, {
|
|
134
|
-
ref_key: "element",
|
|
135
|
-
ref: element,
|
|
136
|
-
class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
|
|
137
|
-
}),
|
|
138
|
-
[
|
|
139
|
-
renderSlot(_ctx.$slots, "default")
|
|
140
|
-
],
|
|
141
|
-
16
|
|
142
|
-
/* FULL_PROPS */
|
|
143
|
-
);
|
|
144
|
-
};
|
|
145
|
-
}
|
|
146
|
-
});
|
|
147
|
-
export {
|
|
148
|
-
_sfc_main as default
|
|
149
|
-
};
|
|
1
|
+
import{inject as o,provide as e,ref as t,defineComponent as n,watch as r,createElementBlock as u,openBlock as l,mergeProps as s,unref as i,renderSlot as m}from"vue";import"mitt";import{useElementHover as f,useFocus as b,useFocusWithin as d}from"@vueuse/core";var a=/* @__PURE__ */(o=>(o.local="local",o.session="session",o))(a||{}),p=/* @__PURE__ */(o=>(o.left="left",o.right="right",o.top="top",o.bottom="bottom",o))(p||{}),c=/* @__PURE__ */(o=>(o.before="before",o.after="after",o))(c||{}),v=/* @__PURE__ */(o=>(o.button="button",o.submit="submit",o.reset="reset",o))(v||{}),x=/* @__PURE__ */(o=>(o.nuxtLink="nuxt-link",o.routerLink="router-link",o.a="a",o.button="button",o))(x||{}),k=/* @__PURE__ */(o=>(o.button="button",o.link="link",o.menuitem="menuitem",o))(k||{}),w=/* @__PURE__ */(o=>(o.listbox="listbox",o.menu="menu",o))(w||{});const y=Symbol.for("dropdownItem"),_=Symbol.for("dropdownAction");c.before,p.bottom,v.button,x.button,a.local,w.menu;const g=/* @__PURE__ */n({name:"VvDropdownItem",props:{focusOnHover:{type:Boolean,default:!1}},setup(n){const a=n,{role:p,expanded:c}=o(y,{}),v=t(null);!function({expanded:o}){e(_,{role:t(k.menuitem),expanded:o})}({expanded:c});const x=f(v),{focused:w}=b(v),{focused:g}=d(v);return r(x,o=>{o&&a.focusOnHover&&(w.value=!0)}),(o,e)=>(l(),u("div",s({role:i(p)},{ref_key:"element",ref:v,class:["vv-dropdown__item",{"focus-visible":i(w)||i(g)}]}),[m(o.$slots,"default")],16))}});export{g as default};
|