@namelivia/vue-components 4.6.0 → 4.8.0

package/package.json

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

package/src/Icons/BanIcon/BanIcon.cy.js

@@ -0,0 +1,10 @@
+import BanIcon from './BanIcon.vue'
+
+describe('<BanIcon />', () => {
+  it('renders with default values', () => {
+    cy.mount(BanIcon)
+    cy.get('svg')
+      .should('be.visible')
+      .and('have.attr', 'width', '24')
+  })
+})

package/src/Icons/BanIcon/BanIcon.stories.js

@@ -0,0 +1,24 @@
+import BanIcon from './BanIcon.vue';
+
+export default {
+  title: 'Icons/BanIcon',
+  component: BanIcon,
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 } },
+    color: { control: 'color' },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 24,
+    color: '#000000',
+  },
+  render: (args) => ({
+    components: { BanIcon },
+    setup() {
+      return { args };
+    },
+    template: '<BanIcon v-bind="args" />',
+  }),
+};

package/src/Icons/BanIcon/BanIcon.vue

@@ -0,0 +1,16 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban-icon lucide-ban"><path d="M4.929 4.929 19.07 19.071"/><circle cx="12" cy="12" r="10"/></svg>
+</template>
+
+<script setup>
+defineProps({
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
+  }
+});
+</script>

package/src/Icons/BasketIcon/BasketIcon.cy.js

@@ -0,0 +1,10 @@
+import BasketIcon from './BasketIcon.vue'
+
+describe('<BasketIcon />', () => {
+  it('renders with default values', () => {
+    cy.mount(BasketIcon)
+    cy.get('svg')
+      .should('be.visible')
+      .and('have.attr', 'width', '24')
+  })
+})

package/src/Icons/BasketIcon/BasketIcon.stories.js

@@ -0,0 +1,24 @@
+import BasketIcon from './BasketIcon.vue';
+
+export default {
+  title: 'Icons/BasketIcon',
+  component: BasketIcon,
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 } },
+    color: { control: 'color' },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 24,
+    color: '#000000',
+  },
+  render: (args) => ({
+    components: { BasketIcon },
+    setup() {
+      return { args };
+    },
+    template: '<BasketIcon v-bind="args" />',
+  }),
+};

package/src/Icons/BasketIcon/BasketIcon.vue

@@ -0,0 +1,16 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-basket-icon lucide-shopping-basket"><path d="m15 11-1 9"/><path d="m19 11-4-7"/><path d="M2 11h20"/><path d="m3.5 11 1.6 7.4a2 2 0 0 0 2 1.6h9.8a2 2 0 0 0 2-1.6l1.7-7.4"/><path d="M4.5 15.5h15"/><path d="m5 11 4-7"/><path d="m9 11 1 9"/></svg>
+</template>
+
+<script setup>
+defineProps({
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
+  }
+});
+</script>

package/src/Icons/ShirtIcon/ShirtIcon.cy.js

@@ -0,0 +1,10 @@
+import ShirtIcon from './ShirtIcon.vue'
+
+describe('<ShirtIcon />', () => {
+  it('renders with default values', () => {
+    cy.mount(ShirtIcon)
+    cy.get('svg')
+      .should('be.visible')
+      .and('have.attr', 'width', '24')
+  })
+})

package/src/Icons/ShirtIcon/ShirtIcon.stories.js

@@ -0,0 +1,24 @@
+import ShirtIcon from './ShirtIcon.vue';
+
+export default {
+  title: 'Icons/ShirtIcon',
+  component: ShirtIcon,
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 } },
+    color: { control: 'color' },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 24,
+    color: '#000000',
+  },
+  render: (args) => ({
+    components: { ShirtIcon },
+    setup() {
+      return { args };
+    },
+    template: '<ShirtIcon v-bind="args" />',
+  }),
+};

package/src/Icons/ShirtIcon/ShirtIcon.vue

@@ -0,0 +1,16 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shirt-icon lucide-shirt"><path d="M20.38 3.46 16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z"/></svg>
+</template>
+
+<script setup>
+defineProps({
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
+  }
+});
+</script>

package/src/Icons/ThrashIcon/ThrashIcon.cy.js

@@ -0,0 +1,10 @@
+import ThrashIcon from './ThrashIcon.vue'
+
+describe('<ThrashIcon />', () => {
+  it('renders with default values', () => {
+    cy.mount(ThrashIcon)
+    cy.get('svg')
+      .should('be.visible')
+      .and('have.attr', 'width', '24')
+  })
+})

package/src/Icons/ThrashIcon/ThrashIcon.stories.js

@@ -0,0 +1,24 @@
+import ThrashIcon from './ThrashIcon.vue';
+
+export default {
+  title: 'Icons/ThrashIcon',
+  component: ThrashIcon,
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 } },
+    color: { control: 'color' },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 24,
+    color: '#000000',
+  },
+  render: (args) => ({
+    components: { ThrashIcon },
+    setup() {
+      return { args };
+    },
+    template: '<ThrashIcon v-bind="args" />',
+  }),
+};

package/src/Icons/ThrashIcon/ThrashIcon.vue

@@ -0,0 +1,16 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2-icon lucide-trash-2"><path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+</template>
+
+<script setup>
+defineProps({
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
+  }
+});
+</script>

package/src/Icons/WahingMachineIcon/WashingMachineIcon.cy.js

@@ -0,0 +1,10 @@
+import WashingMachineIcon from './WashingMachineIcon.vue'
+
+describe('<WashingMachineIcon />', () => {
+  it('renders with default values', () => {
+    cy.mount(WashingMachineIcon)
+    cy.get('svg')
+      .should('be.visible')
+      .and('have.attr', 'width', '24')
+  })
+})

package/src/Icons/WahingMachineIcon/WashingMachineIcon.stories.js

@@ -0,0 +1,24 @@
+import WashingMachineIcon from './WashingMachineIcon.vue';
+
+export default {
+  title: 'Icons/WashingMachineIcon',
+  component: WashingMachineIcon,
+  argTypes: {
+    size: { control: { type: 'range', min: 12, max: 100, step: 1 } },
+    color: { control: 'color' },
+  },
+};
+
+export const Default = {
+  args: {
+    size: 24,
+    color: '#000000',
+  },
+  render: (args) => ({
+    components: { WashingMachineIcon },
+    setup() {
+      return { args };
+    },
+    template: '<WashingMachineIcon v-bind="args" />',
+  }),
+};

package/src/Icons/WahingMachineIcon/WashingMachineIcon.vue

@@ -0,0 +1,16 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-washing-machine-icon lucide-washing-machine"><path d="M3 6h3"/><path d="M17 6h.01"/><rect width="18" height="20" x="3" y="2" rx="2"/><circle cx="12" cy="13" r="5"/><path d="M12 18a2.5 2.5 0 0 0 0-5 2.5 2.5 0 0 1 0-5"/></svg>
+</template>
+
+<script setup>
+defineProps({
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
+  }
+});
+</script>

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{