@volverjs/ui-vue
Version:
@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.
2 lines (1 loc) • 3.01 kB
JavaScript
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=Symbol.for("dropdownItem"),D=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};