Merge pull request #35 from oumoussa98/feat/intersection-observer

Feat/intersection observer

Author: oumoussa98

example/README.md renamed to demo/README.md

@@ -1,13 +1,12 @@
 {
-  "name": "vu3-infinite-loading-example",
+  "name": "vu3-infinite-loading-demo",
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview"
   },
   "dependencies": {
-    "v3-infinite-loading": "^1.1.4",
     "vue": "^3.2.13"
   },
   "devDependencies": {

example/index.html renamed to demo/index.html

@@ -3,37 +3,32 @@ import { ref, nextTick } from "vue";
 import Top from "./components/Top.vue";
 import Bottom from "./components/Bottom.vue";
 import Checkbox from "./components/Checkbox.vue";
-
 let page = 0;
 let mount = ref(true);
 let resetData = ref(false);
 let target = ref(".bottom-results");
-let distance = ref(100);
+let distance = ref(0);
 let top = ref(false);
 let comments = ref([]);
 let mountname = ref("Unmount");
-
 const refresh = () => {
   page = 0;
   comments.value.length = 0;
   resetData.value = !resetData.value;
 };
-
 const reset = () => {
   target.value = ".bottom-results";
-  distance.value = 100;
+  distance.value = 0;
   top.value = false;
   mount.value = true;
   mountname.value = "Unmount";
   refresh();
 };
-
 const mountToggler = async () => {
   mount.value = !mount.value;
   if (!mount.value) mountname.value = "Mount";
   else mountname.value = "Unmount";
 };
-
 const targetToggler = async () => {
   top.value = false;
   if (target.value) target.value = false;
@@ -44,18 +39,21 @@ const targetToggler = async () => {
   mountToggler();
   refresh();
 };
-
 const topToggler = async () => {
   top.value = !top.value;
   if (top.value) target.value = ".top-results";
   else target.value = ".bottom-results";
+  mountToggler();
+  await nextTick();
+  mountToggler();
   refresh();
 };
-
 const distanceHandler = async () => {
+  mountToggler();
+  await nextTick();
+  mountToggler();
   refresh();
 };
-
 const load = async $state => {
   console.log("loading more...");
   page++;
@@ -78,12 +76,19 @@ const load = async $state => {
 
 <template>
   <div class="settings">
-    <a target="_blank" href="https://github.com/oumoussa98/vue3-infinite-loading/tree/main/example">
+    <a
+      target="_blank"
+      href="https://github.com/oumoussa98/vue3-infinite-loading/tree/main/example"
+    >
       <img src="./assets/github.svg" alt="github icon" />
     </a>
     <span class="props">
-      <Checkbox :checked="top" :disabled="!target" label="top" @click="topToggler"> Top </Checkbox>
-      <Checkbox :checked="target" label="target" @click="targetToggler"> Target </Checkbox>
+      <Checkbox :checked="top" :disabled="!target" label="top" @click="topToggler">
+        Top
+      </Checkbox>
+      <Checkbox :checked="target" label="target" @click="targetToggler">
+        Target
+      </Checkbox>
       <div>
         Distance:
         <input
@@ -226,6 +231,9 @@ body {
   background: #101011;
   border-radius: 10px;
 }
+.loader {
+  padding: 10px;
+}
 .results::-webkit-scrollbar-track {
   border-radius: 4px;
   background: #333536;

example/package-lock.json renamed to demo/package-lock.json

@@ -14,7 +14,7 @@ const { comments } = toRefs(props);
         <div>{{ comment.email }}</div>
         <div>{{ comment.id }}</div>
       </div>
-      <infinite-loading v-bind="$attrs" />
+      <infinite-loading class="loader" v-bind="$attrs" />
     </div>
   </div>
 </template>

example/package.json renamed to demo/package.json

@@ -10,7 +10,7 @@ const { comments } = toRefs(props);
 <template>
   <div v-bind="$attrs">
     <div class="results" :class="{ 'top-results': $attrs.target }">
-      <infinite-loading top v-bind="$attrs" />
+      <infinite-loading class="loader" top v-bind="$attrs" />
       <div class="result" v-for="comment in comments" :key="comment.id">
         <div>{{ comment.email }}</div>
         <div>{{ comment.id }}</div>

example/public/favicon.ico renamed to demo/public/favicon.ico

@@ -0,0 +1,15 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import "../lib/style.css";
+
+import InfiniteLoading from "../../src/components/InfiniteLoading.vue";
+
+const app = createApp(App);
+
+if (import.meta.env.MODE === "production") {
+  const modules = import.meta.glob("../lib/v3-infinite-loading.mjs", { eager: true });
+  const InfiniteLoadingProd = modules["../lib/v3-infinite-loading.mjs"].default;
+  app.component("infinite-loading", InfiniteLoadingProd);
+} else app.component("infinite-loading", InfiniteLoading);
+
+app.mount("#app");

example/src/App.vue renamed to demo/src/App.vue

@@ -4,4 +4,7 @@ import vue from "@vitejs/plugin-vue";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  alias: {
+    "@parent/": require("path").resolve(__dirname, "../../"),
+  },
 });

example/src/assets/github.svg renamed to demo/src/assets/github.svg

@@ -24,10 +24,10 @@ async function isUsingAlertBlock(base = 'origin/master') {
       result
         .trim()
         .split(/\r?\n/)
-        .map(file =>
+        .map((file) =>
           run(`git diff ${base} -- ${file}`)
-            .then(diff => ALERT_BLOCK.test(diff))
-            .then(usesAlertBlock => (usesAlertBlock ? file : ''))
+            .then((diff) => ALERT_BLOCK.test(diff))
+            .then((usesAlertBlock) => (usesAlertBlock ? file : ''))
         )
     )
   ).filter(Boolean)

example/src/assets/logo.png renamed to demo/src/assets/logo.png

@@ -1,4 +1,3 @@
-
 import { defineConfigWithTheme } from 'vitepress'
 import baseConfig from '@vue/theme/config'
 import type { Config } from '@vue/theme'
@@ -9,7 +8,7 @@ const nav = [
     text: 'Docs',
     activeMatch: `^/(guide)/`,
     link: '/guide/introduction'
-  },
+  }
 ]
 
 export const sidebar = {
@@ -39,18 +38,19 @@ export const sidebar = {
         {
           text: 'Slots',
           link: '/guide/api/slots'
-        },
-      ],
-    },
-  ],
+        }
+      ]
+    }
+  ]
 }
 
 export default defineConfigWithTheme<Config>({
   extends: baseConfig as () => UserConfig<Config>,
 
   lang: 'en-US',
   title: 'infinite scroll',
-  description: 'An infinite scroll component compatible with vue.js 3 and vite',
+  description:
+    'An infinite scroll component compatible with vue.js 3 and vite',
   srcDir: 'src',
   scrollOffset: 'header',
 
@@ -63,7 +63,7 @@ export default defineConfigWithTheme<Config>({
         name: 'twitter:image',
         content: 'https://vuejs.org/images/logo.png'
       }
-    ], 
+    ]
   ],
 
   themeConfig: {
@@ -85,14 +85,17 @@ export default defineConfigWithTheme<Config>({
     // },
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/oumoussa98/vue3-infinite-loading' },
+      {
+        icon: 'github',
+        link: 'https://github.com/oumoussa98/vue3-infinite-loading'
+      }
     ],
 
     footer: {
       license: {
         text: 'MIT License',
         link: 'https://opensource.org/licenses/MIT'
-      },
+      }
     }
   },
 

example/src/components/Bottom.vue renamed to demo/src/components/Bottom.vue

@@ -1,31 +1,30 @@
 <script setup>
-const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
 const displayHint = async (text) => {
-  const el = document.querySelector("div.install .inner-text");
-  el.innerText = text;
-  el.parentElement.style.color = "#00c96f";
+  const el = document.querySelector('div.install .inner-text')
+  el.innerText = text
+  el.parentElement.style.color = '#00c96f'
   await sleep(1500)
-  el.parentElement.style.color = "#aac8e4"
-  el.innerText = "npm i v3-infinite-loading";
-};
+  el.parentElement.style.color = '#aac8e4'
+  el.innerText = 'npm i v3-infinite-loading'
+}
 
 const copyText = () => {
   navigator.clipboard
-        .writeText("npm i v3-infinite-loading")
-        .then(() => {
-          displayHint("Copied to clipboard");
-        })
-        .catch(() => {
-          displayHint("Failed to copy 😞");
-        });
-};
-
+    .writeText('npm i v3-infinite-loading')
+    .then(() => {
+      displayHint('Copied to clipboard')
+    })
+    .catch(() => {
+      displayHint('Failed to copy 😞')
+    })
+}
 </script>
 
 <template>
   <section id="hero">
     <h1 class="tagline">
-       Vue.js 3
+      Vue.js 3
       <span class="accent">Infinite</span>
       <br />loading Component
     </h1>
@@ -52,36 +51,47 @@ const copyText = () => {
       <div @click="copyText" class="install">
         <span class="inner-text">npm i v3-infinite-loading</span>
         <svg width="16" height="19" xmlns="http://www.w3.org/2000/svg">
-        <g>
-          <title>Layer 1</title>
-          <path fill="#666666" stroke="null" id="svg_1" opacity="0.35" d="m2.50926,14.0668l0,-11.0873c0,-1.53097 1.24085,-2.77183 2.77182,-2.77183l4.61971,0l5.54365,5.54365l0,8.31548c0,1.53097 -1.24085,2.77182 -2.77182,2.77182l-7.39154,0c-1.53097,0 -2.77182,-1.24085 -2.77182,-2.77182z"/>
-          <path stroke="null" fill="#666666" id="svg_2" d="m9.84788,3.95635l0,-3.69577l5.54365,5.54365l-3.69577,0c-1.02096,0 -1.84788,-0.82693 -1.84788,-1.84788z"/>
-          <path stroke="null" fill="#757575" id="svg_3" d="m5.22817,16.89153c-1.53097,0 -2.77183,-1.24085 -2.77183,-2.77183l0,-11.0873c-1.02096,0 -1.84788,0.82693 -1.84788,1.84788l0,11.0873c0,1.53097 1.24085,2.77183 2.77183,2.77183l7.39153,0c1.02096,0 1.84788,-0.82693 1.84788,-1.84788l-7.39153,0z"/>
-        </g>
+          <g>
+            <title>Layer 1</title>
+            <path
+              fill="#666666"
+              stroke="null"
+              id="svg_1"
+              opacity="0.35"
+              d="m2.50926,14.0668l0,-11.0873c0,-1.53097 1.24085,-2.77183 2.77182,-2.77183l4.61971,0l5.54365,5.54365l0,8.31548c0,1.53097 -1.24085,2.77182 -2.77182,2.77182l-7.39154,0c-1.53097,0 -2.77182,-1.24085 -2.77182,-2.77182z"
+            />
+            <path
+              stroke="null"
+              fill="#666666"
+              id="svg_2"
+              d="m9.84788,3.95635l0,-3.69577l5.54365,5.54365l-3.69577,0c-1.02096,0 -1.84788,-0.82693 -1.84788,-1.84788z"
+            />
+            <path
+              stroke="null"
+              fill="#757575"
+              id="svg_3"
+              d="m5.22817,16.89153c-1.53097,0 -2.77183,-1.24085 -2.77183,-2.77183l0,-11.0873c-1.02096,0 -1.84788,0.82693 -1.84788,1.84788l0,11.0873c0,1.53097 1.24085,2.77183 2.77183,2.77183l7.39153,0c1.02096,0 1.84788,-0.82693 1.84788,-1.84788l-7.39153,0z"
+            />
+          </g>
         </svg>
       </div>
     </div>
   </section>
 
-
   <section id="highlights" class="vt-box-container">
     <div class="vt-box text-center">
       <h2>Light and Simple</h2>
       <p>
-       Light weight, Simple and easy to use api and a built in spinner
+        Light weight, Simple and easy to use api and a built in spinner
       </p>
     </div>
     <div class="vt-box text-center">
       <h2>2-directions support</h2>
-      <p>
-        Support top and bottom directions
-      </p>
+      <p>Support top and bottom directions</p>
     </div>
     <div class="vt-box text-center">
       <h2>Result display</h2>
-      <p>
-        Fully configurable load result display
-      </p>
+      <p>Fully configurable load result display</p>
     </div>
   </section>
 </template>

example/src/components/Checkbox.vue renamed to demo/src/components/Checkbox.vue

@@ -2,10 +2,9 @@ import './styles/index.css'
 import { h, App } from 'vue'
 import { VPTheme } from '@vue/theme'
 
-
 export default Object.assign({}, VPTheme, {
   Layout: () => {
     // @ts-ignore
     return h(VPTheme.Layout, null)
-  },
+  }
 })

example/src/components/Top.vue renamed to demo/src/components/Top.vue

@@ -1,8 +1,7 @@
-@import "./pages.css";
-@import "./badges.css";
-@import "./options-boxes.css";
-@import "./inline-demo.css";
-@import "./utilities.css";
-@import "./style-guide.css";
-@import "./overrides.css";
-
+@import './pages.css';
+@import './badges.css';
+@import './options-boxes.css';
+@import './inline-demo.css';
+@import './utilities.css';
+@import './style-guide.css';
+@import './overrides.css';

demo/src/main.js

@@ -1,5 +1,6 @@
-.vt-doc a[href^="https://sfc.vuejs.org"]:before {
-  content: "▶";
+.vt-doc a[href^="https://sfc.vuejs.org"]:before
+{
+  content: '▶';
   width: 20px;
   height: 20px;
   display: inline-block;