@volverjs/ui-vue 0.0.9-beta.1 → 0.0.9-beta.3

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 (79) hide show
  1. package/dist/components/VvAccordion/VvAccordion.es.js +7 -0
  2. package/dist/components/VvAccordionGroup/VvAccordionGroup.es.js +7 -0
  3. package/dist/components/VvAction/VvAction.es.js +9 -1
  4. package/dist/components/VvAction/VvAction.umd.js +1 -1
  5. package/dist/components/VvAction/VvAction.vue.d.ts +9 -0
  6. package/dist/components/VvAction/index.d.ts +4 -0
  7. package/dist/components/VvAlert/VvAlert.es.js +7 -0
  8. package/dist/components/VvAlertGroup/VvAlertGroup.es.js +7 -0
  9. package/dist/components/VvAvatar/VvAvatar.es.js +7 -0
  10. package/dist/components/VvAvatarGroup/VvAvatarGroup.es.js +7 -0
  11. package/dist/components/VvBadge/VvBadge.es.js +7 -0
  12. package/dist/components/VvBreadcrumb/VvBreadcrumb.es.js +7 -0
  13. package/dist/components/VvButton/VvButton.es.js +11 -2
  14. package/dist/components/VvButton/VvButton.umd.js +1 -1
  15. package/dist/components/VvButton/VvButton.vue.d.ts +9 -0
  16. package/dist/components/VvButton/index.d.ts +4 -0
  17. package/dist/components/VvButtonGroup/VvButtonGroup.es.js +7 -0
  18. package/dist/components/VvCard/VvCard.es.js +7 -0
  19. package/dist/components/VvCheckbox/VvCheckbox.es.js +7 -0
  20. package/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js +7 -0
  21. package/dist/components/VvCombobox/VvCombobox.es.js +17 -10
  22. package/dist/components/VvCombobox/VvCombobox.umd.js +1 -1
  23. package/dist/components/VvDialog/VvDialog.es.js +7 -0
  24. package/dist/components/VvDropdown/VvDropdown.es.js +19 -8
  25. package/dist/components/VvDropdown/VvDropdown.umd.js +1 -1
  26. package/dist/components/VvDropdown/VvDropdown.vue.d.ts +2 -9
  27. package/dist/components/VvDropdown/VvDropdownAction.vue.d.ts +9 -0
  28. package/dist/components/VvDropdown/index.d.ts +1 -7
  29. package/dist/components/VvDropdownAction/VvDropdownAction.es.js +9 -1
  30. package/dist/components/VvDropdownAction/VvDropdownAction.umd.js +1 -1
  31. package/dist/components/VvDropdownOptgroup/VvDropdownOptgroup.es.js +7 -0
  32. package/dist/components/VvDropdownOption/VvDropdownOption.es.js +7 -0
  33. package/dist/components/VvInputText/VvInputText.es.js +7 -0
  34. package/dist/components/VvNav/VvNav.es.js +10 -2
  35. package/dist/components/VvNav/VvNav.umd.js +1 -1
  36. package/dist/components/VvNav/index.d.ts +1 -1
  37. package/dist/components/VvProgress/VvProgress.es.js +7 -0
  38. package/dist/components/VvRadio/VvRadio.es.js +7 -0
  39. package/dist/components/VvRadioGroup/VvRadioGroup.es.js +7 -0
  40. package/dist/components/VvSelect/VvSelect.es.js +7 -0
  41. package/dist/components/VvTab/VvTab.es.js +10 -2
  42. package/dist/components/VvTab/VvTab.umd.js +1 -1
  43. package/dist/components/VvTextarea/VvTextarea.es.js +7 -0
  44. package/dist/components/VvTooltip/VvTooltip.es.js +7 -0
  45. package/dist/components/index.d.ts +5 -0
  46. package/dist/components/index.es.js +714 -314
  47. package/dist/components/index.umd.js +1 -1
  48. package/dist/directives/index.es.js +7 -0
  49. package/dist/directives/v-tooltip.es.js +7 -0
  50. package/dist/icons.es.js +3 -3
  51. package/dist/icons.umd.js +1 -1
  52. package/dist/props/index.d.ts +7 -0
  53. package/dist/stories/AccordionGroup/AccordionGroupSlots.stories.d.ts +43 -258
  54. package/dist/stories/Alert/Alert.settings.d.ts +3 -7
  55. package/dist/stories/Button/Button.settings.d.ts +3 -13
  56. package/dist/stories/Combobox/Combobox.settings.d.ts +3 -7
  57. package/dist/stories/Nav/Nav.settings.d.ts +3 -21
  58. package/package.json +28 -28
  59. package/src/assets/icons/detailed.json +1 -1
  60. package/src/assets/icons/normal.json +1 -1
  61. package/src/assets/icons/simple.json +1 -1
  62. package/src/components/VvAction/VvAction.vue +2 -1
  63. package/src/components/VvButton/VvButton.vue +1 -0
  64. package/src/components/VvDropdown/VvDropdown.vue +5 -1
  65. package/src/components/VvDropdown/index.ts +2 -8
  66. package/src/components/VvNav/VvNav.vue +1 -1
  67. package/src/components/VvNav/index.ts +1 -1
  68. package/src/components/index.ts +5 -0
  69. package/src/props/index.ts +7 -0
  70. package/src/stories/Alert/Alert.settings.ts +3 -1
  71. package/src/stories/Button/Button.settings.ts +5 -3
  72. package/src/stories/Combobox/Combobox.settings.ts +4 -1
  73. package/src/stories/Nav/Nav.settings.ts +3 -1
  74. package/src/stories/Tab/Tab.stories.ts +3 -3
  75. package/src/stories/Textarea/TextareaLength.stories.ts +1 -1
  76. /package/dist/components/{VvNavItemTitle → VvNav}/VvNavItemTitle.vue.d.ts +0 -0
  77. /package/dist/components/{VvNavSeparator → VvNav}/VvNavSeparator.d.ts +0 -0
  78. /package/src/components/{VvNavItemTitle → VvNav}/VvNavItemTitle.vue +0 -0
  79. /package/src/components/{VvNavSeparator → VvNav}/VvNavSeparator.ts +0 -0
@@ -304,6 +304,13 @@ const CheckboxRadioProps = {
304
304
  type: String,
305
305
  default: ButtonType.button,
306
306
  validator: (value) => Object.values(ButtonType).includes(value)
307
+ },
308
+ /**
309
+ * Button aria-label
310
+ */
311
+ ariaLabel: {
312
+ type: String,
313
+ default: void 0
307
314
  }
308
315
  });
309
316
  function equals(obj1, obj2, field) {
@@ -545,6 +545,13 @@ const CheckboxRadioGroupProps = {
545
545
  type: String,
546
546
  default: ButtonType.button,
547
547
  validator: (value) => Object.values(ButtonType).includes(value)
548
+ },
549
+ /**
550
+ * Button aria-label
551
+ */
552
+ ariaLabel: {
553
+ type: String,
554
+ default: void 0
548
555
  }
549
556
  });
550
557
  function useInjectedGroupState(groupKey) {
@@ -665,6 +665,13 @@ const AutocompleteProps = {
665
665
  type: String,
666
666
  default: ButtonType.button,
667
667
  validator: (value) => Object.values(ButtonType).includes(value)
668
+ },
669
+ /**
670
+ * Button aria-label
671
+ */
672
+ ariaLabel: {
673
+ type: String,
674
+ default: void 0
668
675
  }
669
676
  });
670
677
  const VvSelectProps = {
@@ -230,6 +230,13 @@ const ActionProps = {
230
230
  type: String,
231
231
  default: ButtonType.button,
232
232
  validator: (value) => Object.values(ButtonType).includes(value)
233
+ },
234
+ /**
235
+ * Button aria-label
236
+ */
237
+ ariaLabel: {
238
+ type: String,
239
+ default: void 0
233
240
  }
234
241
  };
235
242
  const VvTabProps = {
@@ -306,7 +313,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
306
313
  const hasProps = computed(() => {
307
314
  const toReturn = {
308
315
  ...dropdownAria == null ? void 0 : dropdownAria.value,
309
- "aria-pressed": pressed.value ? true : void 0,
316
+ ariaPressed: pressed.value ? true : void 0,
317
+ ariaLabel: props.ariaLabel,
310
318
  role: role == null ? void 0 : role.value
311
319
  };
312
320
  switch (hasTag.value) {
@@ -443,7 +451,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
443
451
  current: unref(activeItem) == navItem.id,
444
452
  disabled: navItem.disabled
445
453
  }, "vv-nav__item-label"]
446
- }, toHandlers(navItem.on || {}), {
454
+ }, toHandlers(navItem.on), {
447
455
  onClick: ($event) => onClick(navItem)
448
456
  }), {
449
457
  default: withCtx(() => [
@@ -1 +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).VvTab=t(e.vue)}(this,(function(e){"use strict";var t=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(t||{}),o=(e=>(e.before="before",e.after="after",e))(o||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),n=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(n||{}),r=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(r||{});const a=Symbol.for("volver"),i=Symbol.for("dropdownTrigger"),s=Symbol.for("dropdownAction"),u={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(r).includes(e)},rel:{type:String,default:"noopener noreferrer"}},d={disabled:Boolean},c={active:Boolean},v={pressed:Boolean},f={label:[String,Number]},m={modifiers:[String,Array]};o.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const p={...d,...f,...v,...c,...u,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)}},b={...m,items:{type:Array,required:!0,default:()=>[]}},k={...m,items:{type:Array,required:!0,default:()=>[]}},y=p;const g=e.defineComponent({name:"VvAction",props:y,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:l}){const r=t,u=e.inject(a),d=e.ref(null);o({$el:d});const{reference:c,bus:v,aria:f,expanded:m}=e.inject(i,{});e.watch((()=>d.value),(e=>{c&&(c.value=e)}));const p=e.computed((()=>r.pressed||(null==m?void 0:m.value))),{role:b}=e.inject(s,{}),k=e.computed((()=>{switch(!0){case r.disabled:return n.button;case void 0!==r.to:return(null==u?void 0:u.nuxt)?n.nuxtLink:n.routerLink;case void 0!==r.href:return n.a;default:return n.button}})),y=e.computed((()=>{const e={...null==f?void 0:f.value,"aria-pressed":!!p.value||void 0,role:null==b?void 0:b.value};switch(k.value){case n.a:return{...e,href:r.href,target:r.target,rel:r.rel};case n.routerLink:case n.nuxtLink:return{...e,to:r.to,target:r.target};default:return{...e,type:r.type,disabled:r.disabled}}})),g=e=>{r.disabled?e.preventDefault():(null==v||v.emit("click",e),l("click",e))},B=e=>{null==v||v.emit("mouseover",e),l("mouseover",e)},_=e=>{null==v||v.emit("mouseleave",e),l("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(k)),e.mergeProps(e.unref(y),{ref_key:"element",ref:d,class:{active:t.active,pressed:e.unref(p),disabled:t.disabled},onClickPassive:g,onMouseoverPassive:B,onMouseleavePassive:_}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});function B(t,o,l){return e.computed((()=>{const n={[t]:!0},r="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return r&&Array.isArray(r)&&r.forEach((e=>{e&&(n[`${t}--${e}`]=!0)})),l&&Object.keys(l.value).forEach((o=>{n[`${t}--${o}`]=e.unref(l.value[o])})),n}))}const _={class:"vv-nav__menu",role:"menu","aria-busy":"true"},h=e.defineComponent({__name:"VvNav",props:k,emits:["click"],setup(t,{emit:o}){const l=t,{modifiers:n,items:r}=e.toRefs(l),a=e.ref(null),i=B("vv-nav",n),s=e.computed((()=>r.value.map(((e,t)=>({...e,id:e.id||`nav-item_${t}`})))));return(t,l)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(i))},[e.createElementVNode("ul",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(t=>(e.openBlock(),e.createElementBlock("li",{key:t.id,class:"vv-nav__item",role:"presentation"},[e.createVNode(g,e.mergeProps({disabled:t.disabled,to:t.to,href:t.href,tabindex:0},{class:[{current:e.unref(a)==t.id,disabled:t.disabled},"vv-nav__item-label"]},e.toHandlers(t.on||{}),{onClick:e=>{var l;(l=t).disabled||(o("click",l),a.value=l.id)}}),{default:e.withCtx((()=>[e.createTextVNode(e.toDisplayString(t.title),1)])),_:2},1040,["class","onClick"])])))),128))])],2))}}),x=["id"];return e.defineComponent({__name:"VvTab",props:b,emits:["click"],setup(t,{emit:o}){const l=t,{modifiers:n,items:r}=e.toRefs(l),a=e.ref(null),i=B("vv-tab",n),s=e.computed((()=>r.value.map(((e,t)=>({...e,id:e.id||`tab-item_${t}`})))));function u(e){e.disabled||(o("click",e),a.value=e.id)}return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(i))},[e.createVNode(h,{items:e.unref(s),modifiers:"tabs full",onClick:u},null,8,["items"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(o=>(e.openBlock(),e.createElementBlock("article",{id:o.id,key:o.id,class:e.normalizeClass([{target:e.unref(a)===o.id},"vv-tab__panel"])},[e.renderSlot(t.$slots,`${o.id}`)],10,x)))),128))],2))}})}));
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).VvTab=t(e.vue)}(this,(function(e){"use strict";var t=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(t||{}),o=(e=>(e.before="before",e.after="after",e))(o||{}),l=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(l||{}),r=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(r||{}),n=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(n||{});const a=Symbol.for("volver"),i=Symbol.for("dropdownTrigger"),s=Symbol.for("dropdownAction"),u={to:{type:[String,Object]},href:String,target:{type:String,validator:e=>Object.values(n).includes(e)},rel:{type:String,default:"noopener noreferrer"}},d={disabled:Boolean},c={active:Boolean},v={pressed:Boolean},f={label:[String,Number]},m={modifiers:[String,Array]};o.before,t.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean;const p={...d,...f,...v,...c,...u,type:{type:String,default:l.button,validator:e=>Object.values(l).includes(e)},ariaLabel:{type:String,default:void 0}},b={...m,items:{type:Array,required:!0,default:()=>[]}},k={...m,items:{type:Array,required:!0,default:()=>[]}},y=p;const g=e.defineComponent({name:"VvAction",props:y,emits:["click","mouseover","mouseleave"],setup(t,{expose:o,emit:l}){const n=t,u=e.inject(a),d=e.ref(null);o({$el:d});const{reference:c,bus:v,aria:f,expanded:m}=e.inject(i,{});e.watch((()=>d.value),(e=>{c&&(c.value=e)}));const p=e.computed((()=>n.pressed||(null==m?void 0:m.value))),{role:b}=e.inject(s,{}),k=e.computed((()=>{switch(!0){case n.disabled:return r.button;case void 0!==n.to:return(null==u?void 0:u.nuxt)?r.nuxtLink:r.routerLink;case void 0!==n.href:return r.a;default:return r.button}})),y=e.computed((()=>{const e={...null==f?void 0:f.value,ariaPressed:!!p.value||void 0,ariaLabel:n.ariaLabel,role:null==b?void 0:b.value};switch(k.value){case r.a:return{...e,href:n.href,target:n.target,rel:n.rel};case r.routerLink:case r.nuxtLink:return{...e,to:n.to,target:n.target};default:return{...e,type:n.type,disabled:n.disabled}}})),g=e=>{n.disabled?e.preventDefault():(null==v||v.emit("click",e),l("click",e))},B=e=>{null==v||v.emit("mouseover",e),l("mouseover",e)},_=e=>{null==v||v.emit("mouseleave",e),l("mouseleave",e)};return(t,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(k)),e.mergeProps(e.unref(y),{ref_key:"element",ref:d,class:{active:t.active,pressed:e.unref(p),disabled:t.disabled},onClickPassive:g,onMouseoverPassive:B,onMouseleavePassive:_}),{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(t.label),1)]))])),_:3},16,["class"]))}});function B(t,o,l){return e.computed((()=>{const r={[t]:!0},n="string"==typeof(null==o?void 0:o.value)?o.value.split(" "):null==o?void 0:o.value;return n&&Array.isArray(n)&&n.forEach((e=>{e&&(r[`${t}--${e}`]=!0)})),l&&Object.keys(l.value).forEach((o=>{r[`${t}--${o}`]=e.unref(l.value[o])})),r}))}const _={class:"vv-nav__menu",role:"menu","aria-busy":"true"},h=e.defineComponent({__name:"VvNav",props:k,emits:["click"],setup(t,{emit:o}){const l=t,{modifiers:r,items:n}=e.toRefs(l),a=e.ref(null),i=B("vv-nav",r),s=e.computed((()=>n.value.map(((e,t)=>({...e,id:e.id||`nav-item_${t}`})))));return(t,l)=>(e.openBlock(),e.createElementBlock("nav",{class:e.normalizeClass(e.unref(i))},[e.createElementVNode("ul",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(t=>(e.openBlock(),e.createElementBlock("li",{key:t.id,class:"vv-nav__item",role:"presentation"},[e.createVNode(g,e.mergeProps({disabled:t.disabled,to:t.to,href:t.href,tabindex:0},{class:[{current:e.unref(a)==t.id,disabled:t.disabled},"vv-nav__item-label"]},e.toHandlers(t.on),{onClick:e=>{var l;(l=t).disabled||(o("click",l),a.value=l.id)}}),{default:e.withCtx((()=>[e.createTextVNode(e.toDisplayString(t.title),1)])),_:2},1040,["class","onClick"])])))),128))])],2))}}),S=["id"];return e.defineComponent({__name:"VvTab",props:b,emits:["click"],setup(t,{emit:o}){const l=t,{modifiers:r,items:n}=e.toRefs(l),a=e.ref(null),i=B("vv-tab",r),s=e.computed((()=>n.value.map(((e,t)=>({...e,id:e.id||`tab-item_${t}`})))));function u(e){e.disabled||(o("click",e),a.value=e.id)}return(t,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(i))},[e.createVNode(h,{items:e.unref(s),modifiers:"tabs full",onClick:u},null,8,["items"]),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),(o=>(e.openBlock(),e.createElementBlock("article",{id:o.id,key:o.id,class:e.normalizeClass([{target:e.unref(a)===o.id},"vv-tab__panel"])},[e.renderSlot(t.$slots,`${o.id}`)],10,S)))),128))],2))}})}));
@@ -699,6 +699,13 @@ const InputTextareaProps = {
699
699
  type: String,
700
700
  default: ButtonType.button,
701
701
  validator: (value) => Object.values(ButtonType).includes(value)
702
+ },
703
+ /**
704
+ * Button aria-label
705
+ */
706
+ ariaLabel: {
707
+ type: String,
708
+ default: void 0
702
709
  }
703
710
  });
704
711
  const WRAP = {
@@ -216,6 +216,13 @@ const ModifiersProps = {
216
216
  type: String,
217
217
  default: ButtonType.button,
218
218
  validator: (value) => Object.values(ButtonType).includes(value)
219
+ },
220
+ /**
221
+ * Button aria-label
222
+ */
223
+ ariaLabel: {
224
+ type: String,
225
+ default: void 0
219
226
  }
220
227
  });
221
228
  const VvTooltipProps = {
@@ -1,5 +1,7 @@
1
1
  export { default as VvAccordion } from './VvAccordion/VvAccordion.vue';
2
2
  export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue';
3
+ export { default as VvAction } from './VvAction/VvAction.vue';
4
+ export { default as VvAlert } from './VvAlert/VvAlert.vue';
3
5
  export { default as VvBadge } from './VvBadge/VvBadge.vue';
4
6
  export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue';
5
7
  export { default as VvButton } from './VvButton/VvButton.vue';
@@ -12,8 +14,11 @@ export { default as VvDialog } from './VvDialog/VvDialog.vue';
12
14
  export { default as VvDropdown } from './VvDropdown/VvDropdown.vue';
13
15
  export { default as VvIcon } from './VvIcon/VvIcon.vue';
14
16
  export { default as VvInputText } from './VvInputText/VvInputText.vue';
17
+ export { default as VvNav } from './VvNav/VvNav.vue';
15
18
  export { default as VvProgress } from './VvProgress/VvProgress.vue';
16
19
  export { default as VvRadio } from './VvRadio/VvRadio.vue';
17
20
  export { default as VvRadioGroup } from './VvRadioGroup/VvRadioGroup.vue';
18
21
  export { default as VvSelect } from './VvSelect/VvSelect.vue';
22
+ export { default as VvTab } from './VvTab/VvTab.vue';
19
23
  export { default as VvTextarea } from './VvTextarea/VvTextarea.vue';
24
+ export { default as VvTooltip } from './VvTooltip/VvTooltip.vue';