maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 2.36 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{Teleport,computed,createBlock,createElementVNode,defineComponent,mergeProps,nextTick,normalizeClass,normalizeStyle,onBeforeUnmount,onMounted,openBlock,ref,watch}from"vue";import{throttle}from"@maz-ui/utils/helpers/throttle";import '../assets/MazReadingProgressBar.B7q0nd5D.css';var MazReadingProgressBar_default=_plugin_vue_export_helper_default(defineComponent({inheritAttrs:!1,__name:`MazReadingProgressBar`,props:{height:{default:`4px`},color:{default:`primary`},teleportSelector:{default:`body`},contentSelector:{default:`body`},offset:{default:0},barClass:{type:[Boolean,null,String,Object,Array],default:void 0},distance:{default:void 0}},emits:[`begin`,`complete`],setup(__props,{emit:__emit}){let props=__props;let emits=__emit;let barColor=computed(()=>`hsl(var(--maz-${props.color}))`);let progressBarWidth=ref();let elementHeight=ref(0);watch(()=>props.distance,value=>{value&&(elementHeight.value=value)},{immediate:!0});let handleScroll=throttle(()=>{let scrollPosition=window.scrollY;scrollPosition>=0&&scrollPosition<=elementHeight.value?progressBarWidth.value=`${scrollPosition/elementHeight.value*100}%`:scrollPosition<=0?(progressBarWidth.value=`0%`,emits(`begin`)):scrollPosition>elementHeight.value?(progressBarWidth.value=`100%`,emits(`complete`)):progressBarWidth.value=`0%`},15);async function setupScroll(){if(elementHeight.value===0){let element=document.querySelector(props.contentSelector);if(!element){console.error(`HTML Element with selector "${props.contentSelector}" not found.`);return}await nextTick(),elementHeight.value=element.offsetHeight+element.offsetTop+props.offset-window.innerHeight}window.addEventListener(`scroll`,handleScroll,{passive:!0})}return onMounted(()=>{setupScroll()}),onBeforeUnmount(()=>{window.removeEventListener(`scroll`,handleScroll)}),(_ctx,_cache)=>(openBlock(),createBlock(Teleport,{to:__props.teleportSelector},[createElementVNode(`div`,mergeProps({class:`m-reading-progress-bar m-reset-css`},_ctx.$attrs),[createElementVNode(`div`,{class:normalizeClass(__props.barClass),style:normalizeStyle({width:progressBarWidth.value??`0px`,height:__props.height,backgroundColor:barColor.value})},null,6)],16)],8,[`to`]))}}),[[`__scopeId`,`data-v-896ee160`]]);export{MazReadingProgressBar_default as t};