maz-ui
Version:
A standalone components library for Vue.Js 3 & Nuxt.Js 3
151 lines (150 loc) • 6.6 kB
JavaScript
import { defineComponent, defineAsyncComponent, computed, ref, watch, onUnmounted, createElementBlock, openBlock, normalizeClass, createCommentVNode, renderSlot, normalizeStyle, createElementVNode, createVNode, unref } from "vue";
import { e as e$1 } from "../chunks/isClient.8V3qjGdO.js";
import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper.B--vMWp3.js";
import '../assets/MazPullToRefresh.C0HGlupm.css';function e() {
if (!e$1())
return !1;
const a = navigator, n = globalThis.matchMedia("(display-mode: standalone)").matches;
return a.standalone || n;
}
const _hoisted_1 = {
key: 0,
class: "header-text"
}, _hoisted_2 = {
key: 1,
class: "header-text"
}, _hoisted_3 = {
key: 2,
class: "header-text"
}, _hoisted_4 = { class: "maz-flex maz-flex-col maz-flex-center" }, _sfc_main = /* @__PURE__ */ 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 }) {
const props = __props, emits = __emit, MazSpinner = defineAsyncComponent(() => import("./MazSpinner.js")), isDisabled = computed(
() => props.disabled || props.onClick === void 0 || props.standaloneMode && e$1() && !e()
), margin = ref({
top: 0,
bottom: 0
}), pull = ref({
from: -1,
to: -1,
distance: 0,
available: !1,
state: "end"
}), internalLoading = ref(!1), container = computed(() => {
if (typeof document > "u" || isDisabled.value)
return;
const element = props.containerSelector ? document.querySelector(props.containerSelector) : document.body;
if (!element)
throw new Error("MazPullToRefresh - container not found");
return element;
}), 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(container2) {
const { top, height } = container2.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;
const 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;
const item = event.touches.item(0);
if (!item)
return;
pull.value.to = item.pageY;
const 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");
const 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", _ctx.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] || (_cache[1] = createElementVNode("span", null, " Release to refresh ", -1))
], !0)
])) : createCommentVNode("", !0) : (openBlock(), createElementBlock("div", _hoisted_1, [
renderSlot(_ctx.$slots, "pull-before", {}, () => [
_cache[0] || (_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: _ctx.spinnerColor,
size: "2.5em"
}, null, 8, ["color"])
])
], !0)
])) : createCommentVNode("", !0)
], 6)),
renderSlot(_ctx.$slots, "default", {}, void 0, !0)
], 2));
}
}), MazPullToRefresh = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-515facf3"]]);
export {
MazPullToRefresh as default
};