v3-infinite-loading - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

lib/v3-infinite-loading.es.js

@@ -12,5 +12,5 @@ import { openBlock, createElementBlock, pushScopeId, popScopeId, createElementVNode, ref, toRefs, onMounted, watch, onUnmounted, renderSlot, createVNode, createCommentVNode, toDisplayString, unref } from "vue";
 const _hoisted_1$1 = { class: "container" };
-const _hoisted_2$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "spinner" }, null, -1));
+const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "spinner" }, null, -1));
 const _hoisted_3 = [
-  _hoisted_2$1
+  _hoisted_2
 ];
@@ -63,3 +63,3 @@ function _sfc_render(_ctx, _cache) {
   const target = document.querySelector(params.target) || window;
-  const infiniteLoading = document.getElementById("vue3-infinite-loading");
+  const infiniteLoading = params.vue3InfiniteLoading.value;
   if (isVisible(infiniteLoading, el) && params.firstLoad)
@@ -75,4 +75,3 @@ params.emitInfiniteEvent();
 var InfiniteLoading_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1 = { id: "vue3-infinite-loading" };
-const _hoisted_2 = { class: "state-error" };
+const _hoisted_1 = { class: "state-error" };
 const _sfc_main = {
@@ -82,3 +81,3 @@ props: {
     target: { type: [String, Boolean], required: false },
-    distance: { type: Number, required: false, default: 0 },
+    distance: { type: Number, required: false, default: 100 },
     identifier: { required: false },
@@ -91,2 +90,3 @@ firstLoad: { type: Boolean, required: false, default: true },
     const props = __props;
+    const vue3InfiniteLoading = ref(null);
     const state = ref("");
@@ -96,2 +96,3 @@ const { top, target, distance, firstLoad, slots } = props;
     const params = {
+      vue3InfiniteLoading,
       state,
@@ -131,3 +132,8 @@ target,
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", {
+        ref: (_value, _refs) => {
+          _refs["vue3InfiniteLoading"] = _value;
+          vue3InfiniteLoading.value = _value;
+        }
+      }, [
         state.value == "loading" ? renderSlot(_ctx.$slots, "spinner", { key: 0 }, () => [
@@ -148,3 +154,3 @@ createVNode(Spinner)
           return [
-            createElementVNode("span", _hoisted_2, [
+            createElementVNode("span", _hoisted_1, [
               createElementVNode("span", null, toDisplayString(((_a = unref(slots)) == null ? void 0 : _a.error) || "Oops something went wrong!"), 1),
@@ -158,3 +164,3 @@ createElementVNode("button", {
         }) : createCommentVNode("v-if", true)
-      ]);
+      ], 512);
     };
@@ -161,0 +167,0 @@ }

lib/v3-infinite-loading.umd.js

@@ -1,1 +0,1 @@
-(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.V3InfiniteLoading={},l.Vue))})(this,function(l,e){"use strict";var R="",E=(t,n)=>{for(const[r,o]of n)t[r]=o;return t};const S={},v=t=>(e.pushScopeId("data-v-39432f99"),t=t(),e.popScopeId(),t),q={class:"container"},V=[v(()=>e.createElementVNode("div",{class:"spinner"},null,-1))];function I(t,n){return e.openBlock(),e.createElementBlock("div",q,V)}var N=E(S,[["render",I],["__scopeId","data-v-39432f99"]]);const B=t=>({loading(){t.value="loading"},loaded(){t.value="loaded"},complete(){t.value="complete"},error(){t.value="error"}}),k=(t,n)=>()=>{n.loading(),t("infinite",n)},H=(t,n)=>{const r=t.getBoundingClientRect(),o=n.getBoundingClientRect();return r.top-o.top<=n.clientHeight||!n.clientHeight},L=(t,{state:n,distance:r,emitInfiniteEvent:o,top:a})=>()=>{const{scrollTop:f,scrollHeight:g,clientHeight:_}=t,u=n.value=="loaded"||!n.value;a&&Math.ceil(f)-r<=0&&u&&o(),!a&&Math.ceil(f)+_>=g-r&&u&&o()};let p;const y=t=>{if(t.target&&!document.querySelector(t.target))return console.error("Vue3 infinite loading: target prop should be a valid css selector");const n=document.querySelector(t.target)||document.documentElement,r=document.querySelector(t.target)||window,o=document.getElementById("vue3-infinite-loading");H(o,n)&&t.firstLoad&&t.emitInfiniteEvent(),p=L(n,t),r.addEventListener("scroll",p)},m=t=>{(document.querySelector(t.target)||window).removeEventListener("scroll",p)};var x="";const b={id:"vue3-infinite-loading"},w={class:"state-error"},T={props:{top:{type:Boolean,required:!1},target:{type:[String,Boolean],required:!1},distance:{type:Number,required:!1,default:0},identifier:{required:!1},firstLoad:{type:Boolean,required:!1,default:!0},slots:{type:Object,required:!1}},emits:["infinite"],setup(t,{emit:n}){const r=t,o=e.ref(""),{top:a,target:f,distance:g,firstLoad:_,slots:u}=r,{identifier:h}=e.toRefs(r),c={state:o,target:f,distance:g,top:a,firstLoad:_,emitInfiniteEvent:k(n,B(o))},$=(i,d)=>e.watch(o,s=>{s=="loaded"&&a&&(Promise.resolve().then(()=>{i.scrollTop=i.scrollHeight-d}),d=i.scrollHeight),s=="complete"&&m(c)}),C=()=>e.watch(h,()=>{o.value="",m(c),y(c)});return e.onMounted(()=>{y(c);let i=document.querySelector(f)||document.documentElement,d=i.scrollHeight;$(i,d),h&&C()}),e.onUnmounted(()=>{m(c)}),(i,d)=>(e.openBlock(),e.createElementBlock("div",b,[o.value=="loading"?e.renderSlot(i.$slots,"spinner",{key:0},()=>[e.createVNode(N)]):e.createCommentVNode("v-if",!0),o.value=="complete"?e.renderSlot(i.$slots,"complete",{key:1},()=>{var s;return[e.createElementVNode("span",null,e.toDisplayString(((s=e.unref(u))==null?void 0:s.complete)||"No more results!"),1)]}):e.createCommentVNode("v-if",!0),o.value=="error"?e.renderSlot(i.$slots,"error",{key:2,retry:c.emitInfiniteEvent},()=>{var s;return[e.createElementVNode("span",w,[e.createElementVNode("span",null,e.toDisplayString(((s=e.unref(u))==null?void 0:s.error)||"Oops something went wrong!"),1),e.createElementVNode("button",{class:"retry",onClick:d[0]||(d[0]=(...M)=>c.emitInfiniteEvent&&c.emitInfiniteEvent(...M))},"retry")])]}):e.createCommentVNode("v-if",!0)]))}};l.default=T,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});
+(function(s,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis!="undefined"?globalThis:s||self,e(s.V3InfiniteLoading={},s.Vue))})(this,function(s,e){"use strict";var R="",E=(t,n)=>{for(const[o,r]of n)t[o]=r;return t};const I={},q=t=>(e.pushScopeId("data-v-39432f99"),t=t(),e.popScopeId(),t),V={class:"container"},L=[q(()=>e.createElementVNode("div",{class:"spinner"},null,-1))];function N(t,n){return e.openBlock(),e.createElementBlock("div",V,L)}var k=E(I,[["render",N],["__scopeId","data-v-39432f99"]]);const B=t=>({loading(){t.value="loading"},loaded(){t.value="loaded"},complete(){t.value="complete"},error(){t.value="error"}}),H=(t,n)=>()=>{n.loading(),t("infinite",n)},b=(t,n)=>{const o=t.getBoundingClientRect(),r=n.getBoundingClientRect();return o.top-r.top<=n.clientHeight||!n.clientHeight},w=(t,{state:n,distance:o,emitInfiniteEvent:r,top:i})=>()=>{const{scrollTop:f,scrollHeight:u,clientHeight:_}=t,p=n.value=="loaded"||!n.value;i&&Math.ceil(f)-o<=0&&p&&r(),!i&&Math.ceil(f)+_>=u-o&&p&&r()};let g;const h=t=>{if(t.target&&!document.querySelector(t.target))return console.error("Vue3 infinite loading: target prop should be a valid css selector");const n=document.querySelector(t.target)||document.documentElement,o=document.querySelector(t.target)||window,r=t.vue3InfiniteLoading.value;b(r,n)&&t.firstLoad&&t.emitInfiniteEvent(),g=w(n,t),o.addEventListener("scroll",g)},m=t=>{(document.querySelector(t.target)||window).removeEventListener("scroll",g)};var x="";const T={class:"state-error"},C={props:{top:{type:Boolean,required:!1},target:{type:[String,Boolean],required:!1},distance:{type:Number,required:!1,default:100},identifier:{required:!1},firstLoad:{type:Boolean,required:!1,default:!0},slots:{type:Object,required:!1}},emits:["infinite"],setup(t,{emit:n}){const o=t,r=e.ref(null),i=e.ref(""),{top:f,target:u,distance:_,firstLoad:p,slots:v}=o,{identifier:S}=e.toRefs(o),d={vue3InfiniteLoading:r,state:i,target:u,distance:_,top:f,firstLoad:p,emitInfiniteEvent:H(n,B(i))},M=(c,a)=>e.watch(i,l=>{l=="loaded"&&f&&(Promise.resolve().then(()=>{c.scrollTop=c.scrollHeight-a}),a=c.scrollHeight),l=="complete"&&m(d)}),$=()=>e.watch(S,()=>{i.value="",m(d),h(d)});return e.onMounted(()=>{h(d);let c=document.querySelector(u)||document.documentElement,a=c.scrollHeight;M(c,a),S&&$()}),e.onUnmounted(()=>{m(d)}),(c,a)=>(e.openBlock(),e.createElementBlock("div",{ref:(l,y)=>{y.vue3InfiniteLoading=l,r.value=l}},[i.value=="loading"?e.renderSlot(c.$slots,"spinner",{key:0},()=>[e.createVNode(k)]):e.createCommentVNode("v-if",!0),i.value=="complete"?e.renderSlot(c.$slots,"complete",{key:1},()=>{var l;return[e.createElementVNode("span",null,e.toDisplayString(((l=e.unref(v))==null?void 0:l.complete)||"No more results!"),1)]}):e.createCommentVNode("v-if",!0),i.value=="error"?e.renderSlot(c.$slots,"error",{key:2,retry:d.emitInfiniteEvent},()=>{var l;return[e.createElementVNode("span",T,[e.createElementVNode("span",null,e.toDisplayString(((l=e.unref(v))==null?void 0:l.error)||"Oops something went wrong!"),1),e.createElementVNode("button",{class:"retry",onClick:a[0]||(a[0]=(...y)=>d.emitInfiniteEvent&&d.emitInfiniteEvent(...y))},"retry")])]}):e.createCommentVNode("v-if",!0)],512))}};s.default=C,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});

package.json

 {
   "name": "v3-infinite-loading",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Infinite scroller component for vuejs-3",
@@ -5,0 +5,0 @@ "homepage": "https://vue3-infinite-loading.netlify.app/",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

12497

increased by1.46%

Lines of code

177

increased by4.12%

No dependency changes