@namelivia/vue-components 4.6.0 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namelivia/vue-components",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "peerDependencies": {

package/src/InfiniteScroll/InfiniteScroll.cy.js

@@ -0,0 +1,7 @@
+import InfiniteScroll from './InfiniteScroll.vue'
+
+describe('<InfiniteScroll />', () => {
+  it.skip('emits load-more event when sentinel is visible', () => {
+      // TODO
+  })
+})

package/src/InfiniteScroll/InfiniteScroll.stories.js

@@ -0,0 +1,38 @@
+import InfiniteScroll from './InfiniteScroll.vue';
+import Card from '../Card/Card.vue';
+import { ref } from 'vue';
+
+export default {
+  title: 'Components/InfiniteScroll',
+  component: InfiniteScroll,
+};
+
+export const Default = {
+  render: (args) => ({
+    components: { InfiniteScroll, Card },
+    setup() {
+      const items = ref([1, 2, 3, 4, 5]);
+      const loadMore = () => {
+        const last = items.value[items.value.length - 1];
+        // Simulate API delay
+        setTimeout(() => {
+          for (let i = 1; i <= 5; i++) {
+            items.value.push(last + i);
+          }
+        }, 500);
+      };
+      return { args, items, loadMore };
+    },
+    template: `
+      <div style="height: 400px; overflow-y: auto; border: 1px solid #ccc;">
+        <InfiniteScroll v-bind="args" @load-more="loadMore">
+          <div v-for="item in items" :key="item" style="padding: 20px; border-bottom: 1px solid #eee;">
+            <Card :title="'Item ' + item">
+              <p>Scroll down to load more content...</p>
+            </Card>
+          </div>
+        </InfiniteScroll>
+      </div>
+    `,
+  }),
+};

package/src/InfiniteScroll/InfiniteScroll.vue

@@ -0,0 +1,59 @@
+<template lang="pug">
+div(class="infinite-scroll-container")
+  slot
+  div(ref="sentinel" class="sentinel")
+</template>
+
+<script setup>
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  threshold: {
+    type: Number,
+    default: 0.1
+  },
+  rootMargin: {
+    type: String,
+    default: '0px'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const emit = defineEmits(['load-more']);
+const sentinel = ref(null);
+let observer = null;
+
+onMounted(() => {
+  observer = new IntersectionObserver(([entry]) => {
+    if (entry.isIntersecting && !props.disabled) {
+      emit('load-more');
+    }
+  }, {
+    rootMargin: props.rootMargin,
+    threshold: props.threshold
+  });
+
+  if (sentinel.value) {
+    observer.observe(sentinel.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  if (observer) {
+    observer.disconnect();
+  }
+});
+</script>
+
+<style scoped>
+.infinite-scroll-container {
+  width: 100%;
+}
+.sentinel {
+  height: var(--infinite-scroll-sentinel-height, 1px);
+  width: 100%;
+}
+</style>

package/src/index.js

@@ -29,3 +29,4 @@ export { default as SkullIcon } from './Icons/SkullIcon/SkullIcon.vue'
 export { default as CalendarIcon } from './Icons/CalendarIcon/CalendarIcon.vue'
 export { default as SaveIcon } from './Icons/SaveIcon/SaveIcon.vue'
 export { default as CreateIcon } from './Icons/CreateIcon/CreateIcon.vue'
+export { default as InfiniteScroll } from './InfiniteScroll/InfiniteScroll.vue'

package/styles/index.css

@@ -109,6 +109,8 @@
   --color-navbar-current-background: hsl(210, 80%, 23%);
   --color-navbar-link-background: hsl(210, 50%, 23%);
   --font-size-navbar: 0.875rem;
+  /* INFINITE SCROLL */
+  --infinite-scroll-sentinel-height: 1px;
 }
 
 .one-theme{