@volverjs/ui-vue
Version:
@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.
2 lines (1 loc) • 1.56 kB
JavaScript
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("mitt"),require("@vueuse/core")):"function"==typeof define&&define.amd?define(["vue","mitt","@vueuse/core"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvDropdownItem=o(e.vue,null,e.core)}(this,function(e,o,t){"use strict";var n=(e=>(e.local="local",e.session="session",e))(n||{}),u=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(u||{}),r=(e=>(e.before="before",e.after="after",e))(r||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{}),s=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(s||{}),l=(e=>(e.button="button",e.link="link",e.menuitem="menuitem",e))(l||{}),f=(e=>(e.listbox="listbox",e.menu="menu",e))(f||{});const d=Symbol.for("dropdownItem"),m=Symbol.for("dropdownAction");r.before,u.bottom,i.button,s.button,n.local,f.menu;const c={focusOnHover:{type:Boolean,default:!1}};return e.defineComponent({name:"VvDropdownItem",props:c,setup(o){const n=o,{role:u,expanded:r}=e.inject(d,{}),i=e.ref(null);!function({expanded:o}){e.provide(m,{role:e.ref(l.menuitem),expanded:o})}({expanded:r});const s=t.useElementHover(i),{focused:f}=t.useFocus(i),{focused:c}=t.useFocusWithin(i);return e.watch(s,e=>{e&&n.focusOnHover&&(f.value=!0)}),(o,t)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({role:e.unref(u)},{ref_key:"element",ref:i,class:["vv-dropdown__item",{"focus-visible":e.unref(f)||e.unref(c)}]}),[e.renderSlot(o.$slots,"default")],16))}})});