maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 3.6 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{computed,createCommentVNode,createElementBlock,createElementVNode,createVNode,defineAsyncComponent,defineComponent,normalizeClass,openBlock,ref,renderSlot,toDisplayString,unref,useSlots,withCtx}from"vue";import{useTranslations}from"@maz-ui/translations/composables/useTranslations";import{MazChevronLeft}from"@maz-ui/icons/static/MazChevronLeft";import{MazChevronRight}from"@maz-ui/icons/static/MazChevronRight";import '../assets/MazCarousel.DghZyYpK.css';var _hoisted_1={key:0};var _hoisted_2={class:`maz-text-xl maz-font-semibold`};var _hoisted_3={key:1,class:`m-carousel__header__actions`};var MazCarousel_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazCarousel`,props:{hideScrollButtons:{type:Boolean,default:!1},translations:{},hideScrollbar:{type:Boolean,default:!1},title:{}},setup(__props){let MazBtn=defineAsyncComponent(()=>import(`../components/MazBtn.js`));let slots=useSlots();let isScrolled=ref(!1);let isScrolledMax=ref(!1);let MazCarouselItems=ref();let{t}=useTranslations();let messages=computed(()=>({ariaLabel:{previousButton:__props.translations?.ariaLabel?.previousButton??t(`carousel.ariaLabel.previousButton`),nextButton:__props.translations?.ariaLabel?.nextButton??t(`carousel.ariaLabel.nextButton`)}}));function hasHeader(){return!__props.hideScrollButtons||slots.title||__props.title}function hasTitle(){return!!slots.title||!!__props.title}function next(){let items=MazCarouselItems.value;items?.scrollTo(items.scrollLeft+items.clientWidth,0)}function previous(){let items=MazCarouselItems.value;items?.scrollTo(items.scrollLeft-items.clientWidth,0)}function setScrollState(event){let target=event.target;if(!target)return;isScrolled.value=target.scrollLeft>=20;let itemsScrollWidth=target.scrollWidth-target.clientWidth;isScrolledMax.value=target.scrollLeft>=itemsScrollWidth-20}return(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{class:normalizeClass([`m-carousel m-reset-css`,{"--hide-scrollbar":__props.hideScrollbar}])},[hasHeader()?(openBlock(),createElementBlock(`div`,{key:0,class:normalizeClass([`m-carousel__header`,{"--has-title":hasTitle()}])},[hasTitle()?(openBlock(),createElementBlock(`div`,_hoisted_1,[renderSlot(_ctx.$slots,`title`,{},()=>[createElementVNode(`h4`,_hoisted_2,toDisplayString(__props.title),1)],!0)])):createCommentVNode(``,!0),__props.hideScrollButtons?createCommentVNode(``,!0):(openBlock(),createElementBlock(`div`,_hoisted_3,[createVNode(unref(MazBtn),{color:`transparent`,class:normalizeClass([`m-carousel__btn`,{"--muted":!isScrolled.value}]),fab:``,"aria-label":messages.value.ariaLabel.previousButton,onClick:previous},{default:withCtx(()=>[renderSlot(_ctx.$slots,`previous-icon`,{},()=>[createVNode(unref(MazChevronLeft),{class:`maz-text-lg`})],!0)]),_:3},8,[`class`,`aria-label`]),createVNode(unref(MazBtn),{color:`transparent`,class:normalizeClass([`m-carousel__btn`,{"--muted":isScrolledMax.value}]),fab:``,"aria-label":messages.value.ariaLabel.nextButton,onClick:next},{default:withCtx(()=>[renderSlot(_ctx.$slots,`next-icon`,{},()=>[createVNode(unref(MazChevronRight),{class:`maz-text-lg`})],!0)]),_:3},8,[`class`,`aria-label`])]))],2)):createCommentVNode(``,!0),createElementVNode(`div`,{ref_key:`MazCarouselItems`,ref:MazCarouselItems,class:`m-carousel__items`,onScroll:setScrollState},[renderSlot(_ctx.$slots,`default`,{},void 0,!0),_cache[0]||=createElementVNode(`div`,{class:`m-carousel__items__spacer`},null,-1)],544)],2))}}),[[`__scopeId`,`data-v-509daa66`]]);export{MazCarousel_default as t};