maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 4.61 kB
JavaScript
import{t as _plugin_vue_export_helper_default}from"./_plugin-vue_export-helper.ChmETRGw.js";import{useInstanceUniqId}from"../composables/useInstanceUniqId.js";import{computed,createBlock,createElementBlock,createElementVNode,createSlots,createTextVNode,defineAsyncComponent,defineComponent,normalizeClass,normalizeStyle,onBeforeUnmount,onMounted,openBlock,ref,renderSlot,toDisplayString,unref,useSlots,withCtx}from"vue";import '../assets/MazCircularProgressBar.B5iS2mNo.css';var _hoisted_1={class:`outer`};var _hoisted_2={class:`inner`};var _hoisted_3={key:0};var _hoisted_4=[`id`];var _hoisted_5=[`stop-color`];var _hoisted_6=[`stop-color`];var _hoisted_7=[`stroke-width`,`stroke-dashoffset`,`stroke`,`stroke-linecap`];var MazCircularProgressBar_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazCircularProgressBar`,props:{percentage:{},size:{default:`10em`},duration:{default:1e3},delay:{default:100},color:{},autoColor:{type:Boolean,default:!1},prefix:{},suffix:{},strokeLinecap:{default:`round`},strokeWidth:{default:6},stroke:{},successPercentage:{default:100},warningPercentage:{default:75},dangerPercentage:{default:50},once:{type:Boolean,default:!0}},setup(__props){let MazAnimatedCounter=defineAsyncComponent(()=>import(`../components/MazAnimatedCounter.js`));let slots=useSlots();let hasPrefix=computed(()=>!!__props.prefix||!!slots.prefix);let hasSuffix=computed(()=>!!__props.suffix||!!slots.suffix);let id=useInstanceUniqId({componentName:`MazCircularProgressBar`});let adjustedPercentage=computed(()=>__props.percentage>100?100:__props.percentage<=0?.5:__props.percentage);let currentColor=computed(()=>__props.autoColor?getStatusColor(adjustedPercentage.value):__props.color);function getStatusColor(percent){return percent<__props.dangerPercentage||percent>100?`destructive`:percent<__props.warningPercentage?`warning`:percent>=__props.successPercentage?`success`:`primary`}let animationDuration=computed(()=>`${__props.duration}ms`);let dashoffset=computed(()=>Math.round(290-adjustedPercentage.value/100*290));let isVisible=ref(!1);let circleRef=ref(null);let hasBeenAnimated=ref(!1);let observer=null;return onMounted(()=>{observer=new IntersectionObserver(([entry])=>{(!isVisible.value||!__props.once)&&(isVisible.value=entry.isIntersecting),__props.once&&circleRef.value&&(observer?.unobserve(circleRef.value),circleRef.value?.addEventListener(`animationend`,()=>{hasBeenAnimated.value=!0}))}),circleRef.value&&observer.observe(circleRef.value)}),onBeforeUnmount(()=>observer?.disconnect()),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{class:`m-circular-progress-bar m-reset-css`,style:normalizeStyle([{"--animation-duration":animationDuration.value,"--dashoffset":dashoffset.value,"--delay":`${__props.delay}ms`},{fontSize:__props.size}])},[createElementVNode(`div`,_hoisted_1,[createElementVNode(`div`,_hoisted_2,[unref(slots).default?(openBlock(),createElementBlock(`span`,_hoisted_3,[renderSlot(_ctx.$slots,`default`,{},void 0,!0)])):(openBlock(),createBlock(unref(MazAnimatedCounter),{key:1,count:__props.percentage,duration:__props.duration,delay:__props.delay,once:__props.once},createSlots({_:2},[hasPrefix.value?{name:`prefix`,fn:withCtx(()=>[renderSlot(_ctx.$slots,`prefix`,{},()=>[createTextVNode(toDisplayString(__props.prefix),1)],!0)]),key:`0`}:void 0,hasSuffix.value?{name:`suffix`,fn:withCtx(()=>[renderSlot(_ctx.$slots,`suffix`,{},()=>[createTextVNode(toDisplayString(__props.suffix),1)],!0)]),key:`1`}:void 0]),1032,[`count`,`duration`,`delay`,`once`]))])]),(openBlock(),createElementBlock(`svg`,{ref_key:`circleRef`,ref:circleRef,xmlns:`http://www.w3.org/2000/svg`,height:`1em`,width:`1em`,class:normalizeClass({animate:isVisible.value}),viewBox:`0 0 100 100`},[createElementVNode(`defs`,null,[createElementVNode(`linearGradient`,{id:`${unref(id)}-gradient`,x1:`0`,x2:`0`,y1:`1`,y2:`0`},[createElementVNode(`stop`,{offset:`0%`,"stop-color":currentColor.value?`hsl(var(--maz-${currentColor.value}-400))`:`hsl(var(--maz-primary))`},null,8,_hoisted_5),createElementVNode(`stop`,{offset:`100%`,"stop-color":currentColor.value?`hsl(var(--maz-${currentColor.value}-700))`:`hsl(var(--maz-secondary))`},null,8,_hoisted_6)],8,_hoisted_4)]),createElementVNode(`circle`,{cx:`50`,cy:`50`,r:`46`,"stroke-width":__props.strokeWidth,"stroke-dasharray":`290`,"stroke-dashoffset":hasBeenAnimated.value?dashoffset.value:290,stroke:__props.stroke?__props.stroke:`url(#${unref(id)}-gradient)`,fill:`none`,"stroke-linecap":__props.strokeLinecap},null,8,_hoisted_7)],2))],4))}}),[[`__scopeId`,`data-v-bfa690b0`]]);export{MazCircularProgressBar_default as t};