maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 9.62 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{t as hasSlotContent}from"./hasSlotContent.akaXJLAp.js";import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{t as MazPopover_default}from"./MazPopover.BTvrYenI.js";import{Fragment,computed,createBlock,createElementBlock,createElementVNode,createSlots,createTextVNode,createVNode,defineAsyncComponent,defineComponent,mergeModels,mergeProps,normalizeClass,normalizeStyle,openBlock,renderList,renderSlot,resolveDynamicComponent,toDisplayString,unref,useModel,useTemplateRef,watch,withCtx,withKeys,withModifiers}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{MazChevronDown}from"@maz-ui/icons/static/MazChevronDown";import{isClient}from"@maz-ui/utils/helpers/isClient";import '../assets/MazDropdown.BjBiB-fm.css';var _hoisted_1=[`id`];var _hoisted_2=[`id`];var _hoisted_3=[`id`];var _hoisted_4=[`onClick`,`onKeypress`];var MazDropdown_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazDropdown`,props:mergeModels({modelValue:{type:Boolean},style:{type:[Boolean,null,String,Object,Array]},class:{type:[Boolean,null,String,Object,Array]},items:{default:()=>[]},id:{},trigger:{default:`adaptive`},color:{default:`transparent`},position:{default:`auto`},closeOnClick:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},chevron:{type:Boolean,default:!0},screenReaderDescription:{},menuPanelClass:{type:[Boolean,null,String,Object,Array]},menuPanelStyle:{type:[Boolean,null,String,Object,Array]},block:{type:Boolean},dropdownIcon:{type:[String,Function,Object]},dropdownIconAnimation:{type:Boolean,default:!0},size:{default:`md`},transition:{default:`scale-pop`},preferPosition:{default:`bottom-start`},fallbackPosition:{},ariaLabel:{},announceChanges:{type:Boolean},offset:{},delay:{},hoverDelay:{},teleportTo:{},overlayClass:{type:[Boolean,null,String,Object,Array]},panelClass:{type:[Boolean,null,String,Object,Array]},panelStyle:{type:[Boolean,null,String,Object,Array]},closeOnClickOutside:{type:Boolean},closeOnEscape:{type:Boolean},persistent:{type:Boolean},ariaLabelledby:{},ariaDescribedby:{},trapFocus:{type:Boolean},keepOpenOnHover:{type:Boolean},positionReference:{}},{modelValue:{default:!1},modelModifiers:{}}),emits:mergeModels([`menuitem-clicked`,`update:model-value`],[`update:modelValue`]),setup(__props,{emit:__emit}){let emits=__emit;let MazBtn=defineAsyncComponent(()=>import(`../components/MazBtn.js`));let MazIcon=defineAsyncComponent(()=>import(`../components/MazIcon.js`));let MazLink=defineAsyncComponent(()=>import(`../components/MazLink.js`));let instanceId=useInstanceUniqId({componentName:`MazDropdown`,providedId:__props.id});let{t}=useTranslations();let isOpen=useModel(__props,`modelValue`);let iconClassSize=computed(()=>__props.size===`xl`?`maz-text-lg`:__props.size===`lg`||__props.size===`md`||__props.size===`sm`?`maz-text-base`:__props.size===`xs`||__props.size===`mini`?`maz-text-sm`:`maz-text-lg`);function setDropdown(value){__props.disabled||(isOpen.value=value)}function isLinkItem(item){return`href`in item||`to`in item}async function runAction(item,event){emits(`menuitem-clicked`,event),await item.onClick?.(),closeDropdown()}function closeDropdown(){__props.closeOnClick&&setDropdown(!1)}function keydownHandler(event){[`ArrowDown`,`ArrowUp`].includes(event.key)?arrowHandler(event):event.key===`Enter`&&(event.preventDefault(),document.activeElement?.click(),closeDropdown())}function arrowHandler(event){event.preventDefault();let code=event.key;let itemLength=__props.items?.length;if(!itemLength)return;let currentElement=document.activeElement;let itemsElements=document.querySelectorAll(`#${instanceId.value}-menu .menuitem`);let currentIndex=[...itemsElements].indexOf(currentElement);if(currentIndex===-1){itemsElements[0]?.focus();return}itemsElements[code===`ArrowDown`?(currentIndex+1)%itemLength:(currentIndex-1+itemLength)%itemLength]?.focus()}let mazPopoverElement=useTemplateRef(`mazPopoverRef`);function onBlurTrigger(event){event.preventDefault(),!(mazPopoverElement.value?.panelRef)?.contains(event.relatedTarget)&&setDropdown(!1)}return watch(isOpen,value=>{isClient()&&(value?document.addEventListener(`keydown`,keydownHandler):document.removeEventListener(`keydown`,keydownHandler))}),(_ctx,_cache)=>(openBlock(),createBlock(MazPopover_default,{ref:`mazPopoverRef`,trigger:__props.trigger,"model-value":isOpen.value,class:normalizeClass([`m-dropdown m-reset-css`,[__props.class]]),role:`menu`,style:normalizeStyle(__props.style),"prefer-position":__props.preferPosition,color:`background`,position:__props.position,transition:__props.transition,disabled:__props.disabled,offset:__props.offset,delay:__props.delay,"fallback-position":__props.fallbackPosition,persistent:__props.persistent,"hover-delay":__props.hoverDelay,"panel-class":__props.panelClass,"panel-style":__props.panelStyle,"close-on-escape":__props.closeOnEscape,"close-on-click":__props.closeOnClick,"teleport-to":__props.teleportTo,"trap-focus":__props.trapFocus,"overlay-class":__props.overlayClass,"close-on-click-outside":__props.closeOnClickOutside,"aria-describedby":__props.ariaDescribedby,"announce-changes":__props.announceChanges,"aria-label":__props.ariaLabel,"aria-labelledby":__props.ariaLabelledby,"position-reference":__props.positionReference,"keep-open-on-hover":__props.trigger===`hover`||__props.trigger===`adaptive`,block:__props.block,"onUpdate:modelValue":setDropdown},{trigger:withCtx(({toggle,close,open})=>[createElementVNode(`div`,{id:unref(instanceId),tabindex:`-1`,class:`m-dropdown__wrapper`},[createElementVNode(`span`,{id:`${unref(instanceId)}-labelspan`,class:`maz-sr-only`},[renderSlot(_ctx.$slots,`screen-reader-description`,{},()=>[createTextVNode(toDisplayString(__props.screenReaderDescription||unref(t)(`dropdown.screenReaderDescription`)),1)],!0)],8,_hoisted_2),renderSlot(_ctx.$slots,`trigger`,{isOpen:isOpen.value,toggle,close,open},()=>[createVNode(unref(MazBtn),mergeProps({"aria-labelledby":`${unref(instanceId)}-labelspan`,color:__props.color,disabled:__props.disabled},_ctx.$attrs,{block:__props.block,size:__props.size,onKeydown:[withKeys(withModifiers(toggle,[`stop`,`prevent`]),[`enter`]),withKeys(withModifiers(toggle,[`stop`,`prevent`]),[`space`]),withKeys(withModifiers(close,[`stop`,`prevent`]),[`escape`])],onBlur:withModifiers(onBlurTrigger,[`stop`,`prevent`])}),createSlots({default:withCtx(()=>[renderSlot(_ctx.$slots,`default`,{},void 0,!0)]),_:2},[__props.chevron||unref(hasSlotContent)(_ctx.$slots[`dropdown-icon`])?{name:`right-icon`,fn:withCtx(()=>[renderSlot(_ctx.$slots,`dropdown-icon`,{isOpen:isOpen.value,toggle,close,open},()=>[typeof __props.dropdownIcon==`string`?(openBlock(),createBlock(unref(MazIcon),{key:0,name:__props.dropdownIcon,class:normalizeClass([{"--open":isOpen.value&&__props.dropdownIconAnimation},iconClassSize.value])},null,8,[`name`,`class`])):__props.dropdownIcon?(openBlock(),createBlock(resolveDynamicComponent(__props.dropdownIcon),{key:1,class:normalizeClass([[{"--open":isOpen.value&&__props.dropdownIconAnimation},iconClassSize.value],`m-dropdown__icon`])},null,8,[`class`])):(openBlock(),createBlock(unref(MazChevronDown),{key:2,class:normalizeClass([[{"--open":isOpen.value&&__props.dropdownIconAnimation},iconClassSize.value],`m-dropdown__icon`])},null,8,[`class`]))],!0)]),key:`0`}:void 0]),1040,[`aria-labelledby`,`color`,`disabled`,`block`,`size`,`onKeydown`])],!0)],8,_hoisted_1)]),default:withCtx(({open,close,toggle})=>[createElementVNode(`div`,{id:`${unref(instanceId)}-menu`,role:`menu`,"aria-label":`Menu`,class:normalizeClass([`m-dropdown__menu`,__props.menuPanelClass]),tabindex:`-1`,style:normalizeStyle(__props.menuPanelStyle)},[renderSlot(_ctx.$slots,`dropdown`,{items:__props.items,open,close,isOpen:isOpen.value,toggle},()=>[(openBlock(!0),createElementBlock(Fragment,null,renderList(__props.items,(item,index)=>renderSlot(_ctx.$slots,`menuitem`,{key:index,item,open,close,isOpen:isOpen.value,toggle},()=>[isLinkItem(item)?(openBlock(),createBlock(unref(MazLink),mergeProps({key:0,target:item.href?item.target??`_self`:void 0,to:item.to,href:item.href,color:item.color??`contrast`},{ref_for:!0},item,{"underline-only-hover":item.underlineOnlyHover??!1,class:[`menuitem`,[item.class]],onClick:withModifiers(closeDropdown,[`stop`])}),{default:withCtx(()=>[renderSlot(_ctx.$slots,`menuitem-label`,{item,open,close,isOpen:isOpen.value,toggle},()=>[createTextVNode(toDisplayString(item.label),1)],!0)]),_:2},1040,[`target`,`to`,`href`,`color`,`underline-only-hover`,`class`])):(openBlock(),createElementBlock(`button`,mergeProps({key:1,type:`button`},{ref_for:!0},{...item,onClick:void 0},{class:[`menuitem menuitem__button`,[item.class,item.color?`--${item.color}`:``]],onClick:withModifiers($event=>runAction(item,$event),[`stop`]),onKeypress:withKeys(withModifiers($event=>runAction(item,$event),[`stop`,`prevent`]),[`enter`])}),[renderSlot(_ctx.$slots,`menuitem-label`,{item,open,close,isOpen:isOpen.value,toggle},()=>[createTextVNode(toDisplayString(item.label),1)],!0)],16,_hoisted_4))],!0)),128))],!0)],14,_hoisted_3)]),_:3},8,`trigger.model-value.style.prefer-position.position.transition.disabled.offset.delay.fallback-position.persistent.hover-delay.panel-class.panel-style.close-on-escape.close-on-click.teleport-to.trap-focus.overlay-class.close-on-click-outside.aria-describedby.announce-changes.aria-label.aria-labelledby.position-reference.keep-open-on-hover.class.block`.split(`.`)))}}),[[`__scopeId`,`data-v-6e000b9e`]]);export{MazDropdown_default as t};