@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,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=/* @__PURE__ */Symbol.for("dropdownItem"),_=/* @__PURE__ */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};
@@ -1,104 +1 @@
1
- import { defineComponent, createElementBlock, openBlock, toDisplayString } from "vue";
2
- var StorageType = /* @__PURE__ */ ((StorageType2) => {
3
- StorageType2["local"] = "local";
4
- StorageType2["session"] = "session";
5
- return StorageType2;
6
- })(StorageType || {});
7
- var Side = /* @__PURE__ */ ((Side2) => {
8
- Side2["left"] = "left";
9
- Side2["right"] = "right";
10
- Side2["top"] = "top";
11
- Side2["bottom"] = "bottom";
12
- return Side2;
13
- })(Side || {});
14
- var Position = /* @__PURE__ */ ((Position2) => {
15
- Position2["before"] = "before";
16
- Position2["after"] = "after";
17
- return Position2;
18
- })(Position || {});
19
- var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
20
- ButtonType2["button"] = "button";
21
- ButtonType2["submit"] = "submit";
22
- ButtonType2["reset"] = "reset";
23
- return ButtonType2;
24
- })(ButtonType || {});
25
- var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
26
- ActionTag2["nuxtLink"] = "nuxt-link";
27
- ActionTag2["routerLink"] = "router-link";
28
- ActionTag2["a"] = "a";
29
- ActionTag2["button"] = "button";
30
- return ActionTag2;
31
- })(ActionTag || {});
32
- const LabelProps = {
33
- /**
34
- * The item label
35
- */
36
- label: {
37
- type: [String, Number],
38
- default: void 0
39
- }
40
- };
41
- ({
42
- /**
43
- * VvIcon position
44
- */
45
- iconPosition: {
46
- default: Position.before
47
- }
48
- });
49
- ({
50
- /**
51
- * Dropdown placement
52
- */
53
- placement: {
54
- default: Side.bottom
55
- }
56
- });
57
- ({
58
- /**
59
- * Button type
60
- */
61
- type: {
62
- default: ButtonType.button
63
- },
64
- /**
65
- * Default tag for the action
66
- */
67
- defaultTag: {
68
- default: ActionTag.button
69
- }
70
- });
71
- ({
72
- storageType: {
73
- default: StorageType.local
74
- }
75
- });
76
- const _hoisted_1 = {
77
- class: "vv-dropdown-optgroup",
78
- role: "presentation",
79
- tabindex: "-1"
80
- };
81
- const __default__ = {
82
- name: "VvDropdownOptgroup"
83
- };
84
- const _sfc_main = /* @__PURE__ */ defineComponent({
85
- ...__default__,
86
- props: {
87
- ...LabelProps
88
- },
89
- setup(__props) {
90
- const props = __props;
91
- return (_ctx, _cache) => {
92
- return openBlock(), createElementBlock(
93
- "li",
94
- _hoisted_1,
95
- toDisplayString(props.label),
96
- 1
97
- /* TEXT */
98
- );
99
- };
100
- }
101
- });
102
- export {
103
- _sfc_main as default
104
- };
1
+ import{defineComponent as t,createElementBlock as o,openBlock as e,renderSlot as r,createTextVNode as n,toDisplayString as l}from"vue";var s=/* @__PURE__ */(t=>(t.local="local",t.session="session",t))(s||{}),u=/* @__PURE__ */(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(u||{}),a=/* @__PURE__ */(t=>(t.before="before",t.after="after",t))(a||{}),b=/* @__PURE__ */(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(b||{}),i=/* @__PURE__ */(t=>(t.nuxtLink="nuxt-link",t.routerLink="router-link",t.a="a",t.button="button",t))(i||{});const p={label:{type:[String,Number],default:void 0}};a.before,u.bottom,b.button,i.button,s.local;const f={class:"vv-dropdown-optgroup",role:"presentation",tabindex:"-1"},m=/* @__PURE__ */t({name:"VvDropdownOptgroup",props:{...p},setup(t){const s=t;return(t,u)=>(e(),o("li",f,[r(t.$slots,"default",{},()=>[n(l(s.label),1)])]))}});export{m as default};
@@ -1 +1 @@
1
- !function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("vue")):"function"==typeof define&&define.amd?define(["vue"],e):(t="undefined"!=typeof globalThis?globalThis:t||self).VvDropdownOptgroup=e(t.vue)}(this,function(t){"use strict";var e=(t=>(t.local="local",t.session="session",t))(e||{}),o=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(o||{}),n=(t=>(t.before="before",t.after="after",t))(n||{}),r=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(r||{}),u=(t=>(t.nuxtLink="nuxt-link",t.routerLink="router-link",t.a="a",t.button="button",t))(u||{});const i={label:{type:[String,Number],default:void 0}};n.before,o.bottom,r.button,u.button,e.local;const l={class:"vv-dropdown-optgroup",role:"presentation",tabindex:"-1"};return t.defineComponent({name:"VvDropdownOptgroup",props:{...i},setup(e){const o=e;return(e,n)=>(t.openBlock(),t.createElementBlock("li",l,t.toDisplayString(o.label),1))}})});
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownOptgroup=t(e.vue)}(this,function(e){"use strict";var t=(e=>(e.local="local",e.session="session",e))(t||{}),o=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(o||{}),n=(e=>(e.before="before",e.after="after",e))(n||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{}),u=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(u||{});const l={label:{type:[String,Number],default:void 0}};n.before,o.bottom,r.button,u.button,t.local;const i={class:"vv-dropdown-optgroup",role:"presentation",tabindex:"-1"};return e.defineComponent({name:"VvDropdownOptgroup",props:{...l},setup(t){const o=t;return(t,n)=>(e.openBlock(),e.createElementBlock("li",i,[e.renderSlot(t.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.label),1)])]))}})});
@@ -1,281 +1 @@
1
- import { inject, provide, ref, defineComponent, watch, createElementBlock, openBlock, mergeProps, unref, renderSlot, computed, toRefs, createBlock, normalizeClass, withCtx, createElementVNode, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString } 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
- const DisabledProps = {
52
- /**
53
- * Whether the form control is disabled
54
- */
55
- disabled: {
56
- type: Boolean,
57
- default: false
58
- }
59
- };
60
- const SelectedProps = {
61
- /**
62
- * Whether the item is selected
63
- */
64
- selected: {
65
- type: Boolean,
66
- default: false
67
- }
68
- };
69
- const ModifiersProps = {
70
- /**
71
- * Component BEM modifiers
72
- */
73
- modifiers: {
74
- type: [String, Array],
75
- default: void 0
76
- }
77
- };
78
- ({
79
- /**
80
- * VvIcon position
81
- */
82
- iconPosition: {
83
- default: Position.before
84
- }
85
- });
86
- const UnselectableProps = {
87
- /**
88
- * If true the input will be unselectable
89
- */
90
- unselectable: { type: Boolean, default: true }
91
- };
92
- ({
93
- /**
94
- * Dropdown placement
95
- */
96
- placement: {
97
- default: Side.bottom
98
- }
99
- });
100
- ({
101
- /**
102
- * Button type
103
- */
104
- type: {
105
- default: ButtonType.button
106
- },
107
- /**
108
- * Default tag for the action
109
- */
110
- defaultTag: {
111
- default: ActionTag.button
112
- }
113
- });
114
- ({
115
- storageType: {
116
- default: StorageType.local
117
- }
118
- });
119
- ({
120
- /**
121
- * Dropdown role
122
- */
123
- role: {
124
- default: DropdownRole.menu
125
- }
126
- });
127
- const VvDropdownItemProps = {
128
- focusOnHover: {
129
- type: Boolean,
130
- default: false
131
- }
132
- };
133
- const VvDropdownOptionProps = {
134
- ...DisabledProps,
135
- ...SelectedProps,
136
- ...UnselectableProps,
137
- ...ModifiersProps,
138
- deselectHintLabel: {
139
- type: String
140
- },
141
- selectHintLabel: {
142
- type: String
143
- },
144
- selectedHintLabel: {
145
- type: String
146
- },
147
- focusOnHover: {
148
- type: Boolean,
149
- default: false
150
- }
151
- };
152
- function useInjectedDropdownItem() {
153
- return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
154
- }
155
- function useDropdownProvideAction({
156
- expanded
157
- }) {
158
- provide(INJECTION_KEY_DROPDOWN_ACTION, {
159
- role: ref(ActionRoles.menuitem),
160
- expanded
161
- });
162
- }
163
- const __default__$1 = {
164
- name: "VvDropdownItem"
165
- };
166
- const _sfc_main$1 = /* @__PURE__ */ defineComponent({
167
- ...__default__$1,
168
- props: VvDropdownItemProps,
169
- setup(__props) {
170
- const props = __props;
171
- const { role, expanded } = useInjectedDropdownItem();
172
- const element = ref(null);
173
- useDropdownProvideAction({ expanded });
174
- const hovered = useElementHover(element);
175
- const { focused } = useFocus(element);
176
- const { focused: focusedWithin } = useFocusWithin(element);
177
- watch(hovered, (newValue) => {
178
- if (newValue && props.focusOnHover) {
179
- focused.value = true;
180
- }
181
- });
182
- return (_ctx, _cache) => {
183
- return openBlock(), createElementBlock(
184
- "div",
185
- mergeProps({ role: unref(role) }, {
186
- ref_key: "element",
187
- ref: element,
188
- class: ["vv-dropdown__item", { "focus-visible": unref(focused) || unref(focusedWithin) }]
189
- }),
190
- [
191
- renderSlot(_ctx.$slots, "default")
192
- ],
193
- 16
194
- /* FULL_PROPS */
195
- );
196
- };
197
- }
198
- });
199
- function useModifiers(prefix, modifiers, others) {
200
- return computed(() => {
201
- const toReturn = {
202
- [prefix]: true
203
- };
204
- const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
205
- if (modifiersArray) {
206
- if (Array.isArray(modifiersArray)) {
207
- modifiersArray.forEach((modifier) => {
208
- if (modifier) {
209
- toReturn[`${prefix}--${modifier}`] = true;
210
- }
211
- });
212
- }
213
- }
214
- if (others) {
215
- Object.keys(others.value).forEach((key) => {
216
- toReturn[`${prefix}--${key}`] = unref(others.value[key]);
217
- });
218
- }
219
- return toReturn;
220
- });
221
- }
222
- const _hoisted_1 = ["title"];
223
- const __default__ = {
224
- name: "VvDropdownOption"
225
- };
226
- const _sfc_main = /* @__PURE__ */ defineComponent({
227
- ...__default__,
228
- props: VvDropdownOptionProps,
229
- setup(__props) {
230
- const props = __props;
231
- const { modifiers } = toRefs(props);
232
- const bemCssClasses = useModifiers(
233
- "vv-dropdown-option",
234
- modifiers,
235
- computed(() => ({
236
- disabled: props.disabled,
237
- selected: props.selected,
238
- unselectable: props.unselectable && props.selected
239
- }))
240
- );
241
- const hintLabel = computed(() => {
242
- if (props.selected) {
243
- return props.unselectable ? props.deselectHintLabel : props.selectedHintLabel;
244
- }
245
- if (!props.disabled) {
246
- return props.selectHintLabel;
247
- }
248
- return "";
249
- });
250
- return (_ctx, _cache) => {
251
- return openBlock(), createBlock(_sfc_main$1, {
252
- class: normalizeClass(unref(bemCssClasses)),
253
- tabindex: _ctx.disabled ? -1 : 0,
254
- "aria-selected": _ctx.selected,
255
- "aria-disabled": _ctx.disabled,
256
- "focus-on-hover": _ctx.focusOnHover
257
- }, {
258
- default: withCtx(() => [
259
- renderSlot(_ctx.$slots, "default"),
260
- createElementVNode("span", {
261
- class: "vv-dropdown-option__hint",
262
- title: unref(hintLabel)
263
- }, [
264
- renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
265
- createTextVNode(
266
- toDisplayString(unref(hintLabel)),
267
- 1
268
- /* TEXT */
269
- )
270
- ])
271
- ], 8, _hoisted_1)
272
- ]),
273
- _: 3
274
- /* FORWARDED */
275
- }, 8, ["class", "tabindex", "aria-selected", "aria-disabled", "focus-on-hover"]);
276
- };
277
- }
278
- });
279
- export {
280
- _sfc_main as default
281
- };
1
+ import{inject as e,provide as t,ref as o,defineComponent as l,watch as n,createElementBlock as s,openBlock as a,mergeProps as d,unref as r,renderSlot as i,computed as u,toRefs as c,createBlock as b,normalizeClass as f,withCtx as p,createElementVNode as m,normalizeProps as v,guardReactiveProps as y,createTextVNode as x,toDisplayString as H}from"vue";import"mitt";import{useElementHover as h,useFocus as k,useFocusWithin as L}from"@vueuse/core";var g=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(g||{}),w=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(w||{}),$=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))($||{}),O=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(O||{}),S=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(S||{}),_=/* @__PURE__ */(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(_||{}),B=/* @__PURE__ */(e=>(e.listbox="listbox",e.menu="menu",e))(B||{});const A=/* @__PURE__ */Symbol.for("dropdownItem"),D=/* @__PURE__ */Symbol.for("dropdownAction"),E={disabled:{type:Boolean,default:!1}},I={selected:{type:Boolean,default:!1}},V={modifiers:{type:[String,Array],default:void 0}};$.before;const j={unselectable:{type:Boolean,default:!0}};w.bottom,O.button,S.button,g.local,B.menu;const q={focusOnHover:{type:Boolean,default:!1}},z={...E,...I,...j,...V,deselectHintLabel:{type:String},selectHintLabel:{type:String},selectedHintLabel:{type:String},focusOnHover:{type:Boolean,default:!1}};const C=/* @__PURE__ */l({name:"VvDropdownItem",props:q,setup(l){const u=l,{role:c,expanded:b}=e(A,{}),f=o(null);!function({expanded:e}){t(D,{role:o(_.menuitem),expanded:e})}({expanded:b});const p=h(f),{focused:m}=k(f),{focused:v}=L(f);return n(p,e=>{e&&u.focusOnHover&&(m.value=!0)}),(e,t)=>(a(),s("div",d({role:r(c)},{ref_key:"element",ref:f,class:["vv-dropdown__item",{"focus-visible":r(m)||r(v)}]}),[i(e.$slots,"default")],16))}});const F=["title"],G=/* @__PURE__ */l({name:"VvDropdownOption",props:z,setup(e){const t=e,{modifiers:o}=c(t),l=function(e,t,o){return u(()=>{const l={[e]:!0},n="string"==typeof t?.value?t.value.split(" "):t?.value;return n&&Array.isArray(n)&&n.forEach(t=>{t&&(l[`${e}--${t}`]=!0)}),o&&Object.keys(o.value).forEach(t=>{l[`${e}--${t}`]=r(o.value[t])}),l})}("vv-dropdown-option",o,u(()=>({disabled:t.disabled,selected:t.selected,unselectable:t.unselectable&&t.selected}))),n=u(()=>t.selected?t.unselectable?t.deselectHintLabel:t.selectedHintLabel:t.disabled?"":t.selectHintLabel);return(e,t)=>(a(),b(C,{class:f(r(l)),tabindex:e.disabled?-1:0,"aria-selected":e.selected,"aria-disabled":e.disabled,"focus-on-hover":e.focusOnHover},{default:p(()=>[i(e.$slots,"default"),m("span",{class:"vv-dropdown-option__hint",title:r(n)},[i(e.$slots,"hint",v(y({disabled:e.disabled,selected:e.selected,unselectable:e.unselectable})),()=>[x(H(r(n)),1)])],8,F)]),_:3},8,["class","tabindex","aria-selected","aria-disabled","focus-on-hover"]))}});export{G as default};