maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
1 lines • 5.12 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,normalizeStyle,onUnmounted,openBlock,ref,renderSlot,unref,watch}from"vue";import{isClient}from"@maz-ui/utils/helpers/isClient";import{isStandaloneMode}from"@maz-ui/utils/helpers/isStandaloneMode";import '../assets/MazPullToRefresh.CqLZBqlg.css';var _hoisted_1={key:0,class:`header-text`};var _hoisted_2={key:1,class:`header-text`};var _hoisted_3={key:2,class:`header-text`};var _hoisted_4={class:`maz-flex maz-flex-col maz-flex-center`};var MazPullToRefresh_default=_plugin_vue_export_helper_default(defineComponent({__name:`MazPullToRefresh`,props:{distance:{default:100},offset:{default:0},onClick:{type:Function,default:void 0},containerSelector:{default:void 0},headerClass:{default:void 0},spinnerColor:{default:`contrast`},disabled:{type:Boolean,default:!1},standaloneMode:{type:Boolean,default:!1}},emits:[`loaded`,`start`,`error`,`finish`,`response`],setup(__props,{emit:__emit}){let props=__props;let emits=__emit;let MazSpinner=defineAsyncComponent(()=>import(`../components/MazSpinner.js`));let isDisabled=computed(()=>props.disabled||props.onClick===void 0||props.standaloneMode&&isClient()&&!isStandaloneMode());let margin=ref({top:0,bottom:0});let pull=ref({from:-1,to:-1,distance:0,available:!1,state:`end`});let internalLoading=ref(!1);let container=computed(()=>{if(typeof document>`u`||isDisabled.value)return;let element=props.containerSelector?document.querySelector(props.containerSelector):document.body;if(!element)throw Error(`MazPullToRefresh - container not found`);return element});let pullHeight=computed(()=>pull.value.state!==`move`&&pull.value.state!==`end`||isDisabled.value?0:pull.value.distance>props.distance?props.distance:pull.value.distance);function updateView(container){let{top,height}=container.getBoundingClientRect();margin.value={top,bottom:window.innerHeight-(height+top+props.offset)}}function setLoading(type){internalLoading.value=type}function handleTouchStart(event){if(internalLoading.value||margin.value.top<0&&margin.value.bottom<0||isDisabled.value)return;let item=event.touches.item(0);item&&(pull.value.state=`start`,pull.value.from=item.pageY)}function handleTouchMove(event){if(internalLoading.value||pull.value.from<0||window.scrollY>0||isDisabled.value)return;let item=event.touches.item(0);if(!item)return;pull.value.to=item.pageY;let distance=pull.value.to-pull.value.from;pull.value.distance=distance>0?distance:0,pull.value.available=pull.value.distance>=props.distance,pull.value.state=`move`}function handleTouchEnd(){internalLoading.value||isDisabled.value||(pullHeight.value===props.distance&&pull.value.state===`move`&&window.scrollY<=0?runAction():resetPull())}function resetPull(){pull.value={from:-1,to:-1,distance:0,available:!1,state:`end`}}async function runAction(){try{setLoading(!0),emits(`start`);let response=await props.onClick?.();emits(`loaded`),emits(`response`,response)}catch(error){throw emits(`error`,error),error}finally{resetPull(),setLoading(!1),emits(`finish`)}}watch(()=>isDisabled.value,disabled=>{disabled===!0?removeEvents():initComponentAndEvents()},{immediate:!0});function initComponentAndEvents(){!container.value||isDisabled.value||document===void 0||(container.value.addEventListener(`touchstart`,handleTouchStart),container.value.addEventListener(`touchmove`,handleTouchMove),container.value.addEventListener(`touchend`,handleTouchEnd),updateView(container.value))}function removeEvents(){!container.value||document===void 0||(container.value.removeEventListener(`touchstart`,handleTouchStart),container.value.removeEventListener(`touchmove`,handleTouchMove),container.value.removeEventListener(`touchend`,handleTouchEnd))}return onUnmounted(()=>{removeEvents()}),(_ctx,_cache)=>(openBlock(),createElementBlock(`div`,{class:normalizeClass([`m-pull-to-refresh m-reset-css`,{"--available":pull.value.available||pullHeight.value>10}])},[isDisabled.value?createCommentVNode(``,!0):(openBlock(),createElementBlock(`div`,{key:0,class:normalizeClass([`loading-header`,__props.headerClass]),style:normalizeStyle({height:`${pullHeight.value}px`})},[pull.value.available?pull.value.available&&!internalLoading.value?(openBlock(),createElementBlock(`div`,_hoisted_2,[renderSlot(_ctx.$slots,`pull-ready`,{},()=>[_cache[1]||=createElementVNode(`span`,null,` Release to refresh `,-1)],!0)])):createCommentVNode(``,!0):(openBlock(),createElementBlock(`div`,_hoisted_1,[renderSlot(_ctx.$slots,`pull-before`,{},()=>[_cache[0]||=createElementVNode(`span`,null,`Pull to refresh`,-1)],!0)])),internalLoading.value?(openBlock(),createElementBlock(`div`,_hoisted_3,[renderSlot(_ctx.$slots,`pull-loading`,{},()=>[createElementVNode(`div`,_hoisted_4,[createVNode(unref(MazSpinner),{color:__props.spinnerColor,size:`2.5em`},null,8,[`color`])])],!0)])):createCommentVNode(``,!0)],6)),renderSlot(_ctx.$slots,`default`,{},void 0,!0)],2))}}),[[`__scopeId`,`data-v-d798244e`]]);export{MazPullToRefresh_default as t};