@volverjs/ui-vue
Version:
@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.
2 lines (1 loc) • 3.14 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownOption=t(e.vue,null,e.core)}(this,function(e,t,o){"use strict";var n=(e=>(e.local="local",e.session="session",e))(n||{}),l=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(l||{}),s=(e=>(e.before="before",e.after="after",e))(s||{}),r=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(r||{}),i=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(i||{}),u=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(u||{}),d=(e=>(e.listbox="listbox",e.menu="menu",e))(d||{});const a=Symbol.for("dropdownItem"),c=Symbol.for("dropdownAction"),f={disabled:{type:Boolean,default:!1}},p={selected:{type:Boolean,default:!1}},b={modifiers:{type:[String,Array],default:void 0}};s.before;const m={unselectable:{type:Boolean,default:!0}};l.bottom,r.button,i.button,n.local,d.menu;const v={focusOnHover:{type:Boolean,default:!1}},y={...f,...p,...m,...b,deselectHintLabel:{type:String},selectHintLabel:{type:String},selectedHintLabel:{type:String},focusOnHover:{type:Boolean,default:!1}};const h=e.defineComponent({name:"VvDropdownItem",props:v,setup(t){const n=t,{role:l,expanded:s}=e.inject(a,{}),r=e.ref(null);!function({expanded:t}){e.provide(c,{role:e.ref(u.menuitem),expanded:t})}({expanded:s});const i=o.useElementHover(r),{focused:d}=o.useFocus(r),{focused:f}=o.useFocusWithin(r);return e.watch(i,e=>{e&&n.focusOnHover&&(d.value=!0)}),(t,o)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(l)},{ref_key:"element",ref:r,class:["vv-dropdown__item",{"focus-visible":e.unref(d)||e.unref(f)}]}),[e.renderSlot(t.$slots,"default")],16))}});const x=["title"];return e.defineComponent({name:"VvDropdownOption",props:y,setup(t){const o=t,{modifiers:n}=e.toRefs(o),l=function(t,o,n){return e.computed(()=>{const l={[t]:!0},s="string"==typeof o?.value?o.value.split(" "):o?.value;return s&&Array.isArray(s)&&s.forEach(e=>{e&&(l[`${t}--${e}`]=!0)}),n&&Object.keys(n.value).forEach(o=>{l[`${t}--${o}`]=e.unref(n.value[o])}),l})}("vv-dropdown-option",n,e.computed(()=>({disabled:o.disabled,selected:o.selected,unselectable:o.unselectable&&o.selected}))),s=e.computed(()=>o.selected?o.unselectable?o.deselectHintLabel:o.selectedHintLabel:o.disabled?"":o.selectHintLabel);return(t,o)=>(e.openBlock(),e.createBlock(h,{class:e.normalizeClass(e.unref(l)),tabindex:t.disabled?-1:0,"aria-selected":t.selected,"aria-disabled":t.disabled,"focus-on-hover":t.focusOnHover},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default"),e.createElementVNode("span",{class:"vv-dropdown-option__hint",title:e.unref(s)},[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps({disabled:t.disabled,selected:t.selected,unselectable:t.unselectable})),()=>[e.createTextVNode(e.toDisplayString(e.unref(s)),1)])],8,x)]),_:3},8,["class","tabindex","aria-selected","aria-disabled","focus-on-hover"]))}})});