@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.
Files changed (55) hide show
  1. package/bin/icons.js +1 -93
  2. package/dist/components/VvAccordion/VvAccordion.es.js +1 -366
  3. package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js +2 -702
  4. package/dist/components/VvAction/VvAction.es.js +1 -302
  5. package/dist/components/VvAlert/VvAlert.es.js +1 -527
  6. package/dist/components/VvAlertGroup/VvAlertGroup.es.js +1 -730
  7. package/dist/components/VvAvatar/VvAvatar.es.js +1 -132
  8. package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js +1 -250
  9. package/dist/components/VvBadge/VvBadge.es.js +1 -131
  10. package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js +1 -410
  11. package/dist/components/VvButton/VvButton.es.js +1 -882
  12. package/dist/components/VvButtonGroup/VvButtonGroup.es.js +1 -214
  13. package/dist/components/VvCard/VvCard.es.js +1 -152
  14. package/dist/components/VvCheckbox/VvCheckbox.es.js +1 -741
  15. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +1 -981
  16. package/dist/components/VvCombobox/VvCombobox.es.js +1 -3463
  17. package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
  18. package/dist/components/VvCombobox/VvCombobox.vue.d.ts +8 -1
  19. package/dist/components/VvDialog/VvDialog.es.js +1 -317
  20. package/dist/components/VvDropdown/VvDropdown.es.js +1 -750
  21. package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +2 -2
  22. package/dist/components/VvDropdown/VvDropdownOptgroup.vue.d.ts +9 -2
  23. package/dist/components/VvDropdownAction/VvDropdownAction.es.js +1 -448
  24. package/dist/components/VvDropdownItem/VvDropdownItem.es.js +1 -149
  25. package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.es.js +1 -104
  26. package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.umd.js +1 -1
  27. package/dist/components/VvDropdownOption/VvDropdownOption.es.js +1 -281
  28. package/dist/components/VvIcon/VvIcon.es.js +1 -143
  29. package/dist/components/VvInputFile/VvInputFile.es.js +1 -1704
  30. package/dist/components/VvInputText/VvInputText.es.js +4 -2790
  31. package/dist/components/VvNav/VvNav.es.js +1 -438
  32. package/dist/components/VvNavItem/VvNavItem.es.js +1 -337
  33. package/dist/components/VvNavSeparator/VvNavSeparator.es.js +1 -24
  34. package/dist/components/VvProgress/VvProgress.es.js +1 -163
  35. package/dist/components/VvRadio/VvRadio.es.js +1 -661
  36. package/dist/components/VvRadioGroup/VvRadioGroup.es.js +1 -901
  37. package/dist/components/VvSelect/VvSelect.es.js +1 -1103
  38. package/dist/components/VvSelect/VvSelect.vue.d.ts +3 -1
  39. package/dist/components/VvTab/VvTab.es.js +1 -558
  40. package/dist/components/VvTextarea/VvTextarea.es.js +2 -1989
  41. package/dist/components/VvTooltip/VvTooltip.es.js +1 -154
  42. package/dist/components/index.es.js +6 -8558
  43. package/dist/components/index.umd.js +1 -1
  44. package/dist/composables/index.es.js +2 -247
  45. package/dist/composables/index.umd.js +1 -1
  46. package/dist/directives/index.es.js +2 -311
  47. package/dist/directives/index.umd.js +1 -1
  48. package/dist/directives/v-contextmenu.es.js +2 -142
  49. package/dist/directives/v-contextmenu.umd.js +1 -1
  50. package/dist/directives/v-tooltip.es.js +1 -172
  51. package/dist/icons.es.js +1 -39
  52. package/dist/icons.umd.js +1 -1
  53. package/dist/index.es.js +1 -219
  54. package/dist/resolvers/unplugin.es.js +1 -187
  55. package/package.json +33 -33
@@ -1,6 +1,6 @@
1
- declare var __VLS_10: {};
1
+ declare var __VLS_12: {};
2
2
  type __VLS_Slots = {} & {
3
- default?: (props: typeof __VLS_10) => any;
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 { inject, defineComponent, getCurrentInstance, ref, watch, computed, resolveComponent, createBlock, openBlock, resolveDynamicComponent, unref, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, provide, createElementBlock, toRefs, createVNode } from "vue";
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 { inject, provide, ref, defineComponent, watch, createElementBlock, openBlock, mergeProps, unref, renderSlot } from "vue";
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};