@namelivia/vue-components 4.5.1 → 4.7.0

package/package.json

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

package/src/Badge/Badge.vue

@@ -2,13 +2,9 @@
 span(class="badge")
   | {{text}}
 </template>
-<script lang="js">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "Badge",
-  props: {
-    text: String,
-  },
+<script setup>
+defineProps({
+  text: String,
 })
 </script>
 <style scoped>

package/src/Buttons/DangerButton/DangerButton.vue

@@ -3,20 +3,12 @@ button(v-on:click="onClick" class="danger-button")
   | {{text}}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "DangerButton",
-  props: {
-    text: String,
-  },
-  emits: ['click'],
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
-  },
+<script setup>
+defineProps({
+  text: String,
 });
+const emit = defineEmits(['click']);
+const onClick = (evt) => emit('click', evt);
 </script>
 
 <style scoped>

package/src/Buttons/RegularButton/RegularButton.vue

@@ -3,36 +3,33 @@ button(v-on:click="onClick" :class="cssClass" :disabled="loading")
   | {{ loading ? textWhileLoading : text }}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "RegularButton",
-  props: {
-    text: String,
-    loading: {
-      type: Boolean,
-      default: false,
-    },
-    textWhileLoading: {
-      type: String,
-      default: '...',
-    },
-  },
-  emits: ['click'],
-  computed: {
-    cssClass: function () {
-      if (this.loading) {
-        return 'regular-button loading';
-      }
-      return 'regular-button'
-    },
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  text: String,
+  loading: {
+    type: Boolean,
+    default: false,
   },
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
+  textWhileLoading: {
+    type: String,
+    default: '...',
   },
 });
+
+const emit = defineEmits(['click']);
+
+const cssClass = computed(() => {
+  if (props.loading) {
+    return 'regular-button loading';
+  }
+  return 'regular-button';
+});
+
+const onClick = (evt) => {
+  emit('click', evt);
+};
 </script>
 
 <style scoped>
@@ -60,4 +57,3 @@ export default defineComponent({
   background-color: var(--color-regular-disabled);
 }
 </style>
-

package/src/Buttons/ResetButton/ResetButton.vue

@@ -3,13 +3,9 @@ button(type="reset" class="reset-button")
   | {{text}}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "ResetButton",
-  props: {
-    text: String,
-  },
+<script setup>
+defineProps({
+  text: String,
 });
 </script>
 

package/src/Buttons/SecondaryButton/SecondaryButton.vue

@@ -3,20 +3,12 @@ button(v-on:click="onClick" class="secondary-button")
   | {{text}}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "SecondaryButton",
-  props: {
-    text: String,
-  },
-  emits: ['click'],
-  methods: {
-    onClick(evt) {
-      this.$emit('click', evt);
-    },
-  },
+<script setup>
+defineProps({
+  text: String,
 });
+const emit = defineEmits(['click']);
+const onClick = (evt) => emit('click', evt);
 </script>
 
 <style scoped>

package/src/Buttons/SubmitButton/SubmitButton.vue

@@ -7,18 +7,10 @@ button(
   | {{text}}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "SubmitButton",
-  props: {
-    text: {
-        type: String,
-    },
-    disabled: {
-        type: Boolean,
-    },
-  },
+<script setup>
+defineProps({
+  text: String,
+  disabled: Boolean,
 });
 </script>
 

package/src/Card/Card.vue

@@ -5,26 +5,20 @@ div(v-if="!dismissed" class="card-container")
       card-body(:title="title")
         slot
 </template>
-<script lang="js">
-import { default as CardImage } from './CardImage.vue'
-import { default as CardBody } from './CardBody.vue'
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "Card",
-  props: {
-    image: String,
-    title: String,
-    dismissed: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    CardImage,
-    CardBody,
+<script setup>
+import CardImage from './CardImage.vue'
+import CardBody from './CardBody.vue'
+
+defineProps({
+  image: String,
+  title: String,
+  dismissed: {
+    type: Boolean,
+    default: false,
   },
-  emits: ['width']
-})
+});
+
+defineEmits(['width']);
 </script>
 <style scoped>
 .card-container {

package/src/Card/CardBody.vue

@@ -5,14 +5,10 @@ div(class="card-body")
   p(class="card-text")
     slot
 </template>
-<script lang="js">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "CardBody",
-  props: {
-    title: String,
-  },
-})
+<script setup>
+defineProps({
+  title: String,
+});
 </script>
 <style scoped>
 .card-body {
@@ -30,4 +26,3 @@ export default defineComponent({
   font-size: var(--font-size-base);
 }
 </style>
-

package/src/Card/CardImage.vue

@@ -2,32 +2,25 @@
 img(:src="src" :alt="alt" ref="image")
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue'
-export default defineComponent({
-  name: "CardImage",
-  props: {
-    src: String,
-    alt: String,
-  },
-  data: function () {
-    return {
-      imageWidth: 0,
-    }
-  },
-  methods: {
-    calculateWidth() {
-      return this.$refs.image.clientWidth
-    },
-  },
-  emits: ['width'],
-  mounted: function () {
-    this.$emit('width', this.calculateWidth())
-  },
-})
+<script setup>
+import { ref, onMounted } from 'vue';
+
+defineProps({
+  src: String,
+  alt: String,
+});
+
+const emit = defineEmits(['width']);
+const image = ref(null);
+
+const calculateWidth = () => image.value.clientWidth;
+
+onMounted(() => {
+  emit('width', calculateWidth());
+});
 </script>
 <style scoped>
     img {
       width: 100%;
     }
-</style
+</style>

package/src/CardGrid/CardGrid.vue

@@ -2,11 +2,8 @@
 div(class="card-grid")
   slot
 </template>
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "CardGrid"
-});
+<script setup>
+// No logic needed
 </script>
 <style scoped>
 .card-grid {

package/src/Container/Container.vue

@@ -3,11 +3,8 @@ div(class="container")
   slot
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "Container"
-});
+<script setup>
+// No logic needed
 </script>
 
 <style scoped>

package/src/Icons/CalendarIcon/CalendarIcon.vue

@@ -2,18 +2,15 @@
     <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar-icon lucide-calendar"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
 </template>
 
-<script>
-export default {
-  name: 'CalendarIcon',
-  props: {
-    size: {
-      type: [Number, String],
-      default: 24
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
+<script setup>
+defineProps({
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
   }
-}
+});
 </script>

package/src/Icons/CreateIcon/CreateIcon.vue

@@ -2,18 +2,15 @@
     <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-badge-plus-icon lucide-badge-plus"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><line x1="12" x2="12" y1="8" y2="16"/><line x1="8" x2="16" y1="12" y2="12"/></svg>
 </template>
 
-<script>
-export default {
-  name: 'CreateIcon',
-  props: {
-    size: {
-      type: [Number, String],
-      default: 24
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
+<script setup>
+defineProps({
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
   }
-}
+});
 </script>

package/src/Icons/DropIcon/DropIcon.vue

@@ -16,18 +16,15 @@
     </svg>
 </template>
 
-<script>
-export default {
-  name: 'DropIcon',
-  props: {
-    size: {
-      type: [Number, String],
-      default: 24
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
+<script setup>
+defineProps({
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
   }
-}
+});
 </script>

package/src/Icons/SaveIcon/SaveIcon.vue

@@ -2,18 +2,15 @@
     <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-save-icon lucide-save"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>
 </template>
 
-<script>
-export default {
-  name: 'SaveIcon',
-  props: {
-    size: {
-      type: [Number, String],
-      default: 24
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
+<script setup>
+defineProps({
+  size: {
+    type: [Number, String],
+    default: 24
+  },
+  color: {
+    type: String,
+    default: 'currentColor'
   }
-}
+});
 </script>

package/src/Icons/SkullIcon/SkullIcon.vue

@@ -2,18 +2,15 @@
     <svg xmlns="http://www.w3.org/2000/svg" :width="size" :height="size" viewBox="0 0 24 24" fill="none" :stroke="color" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skull-icon lucide-skull"><path d="m12.5 17-.5-1-.5 1h1z"/><path d="M15 22a1 1 0 0 0 1-1v-1a2 2 0 0 0 1.56-3.25 8 8 0 1 0-11.12 0A2 2 0 0 0 8 20v1a1 1 0 0 0 1 1z"/><circle cx="15" cy="12" r="1"/><circle cx="9" cy="12" r="1"/></svg>
 </template>
 
-<script>
-export default {
-  name: 'SkullIcon',
-  props: {
-    size: {
-      type: [Number, String],
-      default: 24
-    },
-    color: {
-      type: String,
-      default: 'currentColor'
-    }
+<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/Inputs/CheckBoxInput/CheckBoxInput.vue

@@ -12,34 +12,16 @@ div(class="checkbox-container")
   label(class="checkbox-label" :for="id") {{ label }}
 </template>
 
-<script lang="js">
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: "CheckBoxInput",
-  props: {
-    id: {
-      type: String,
-    },
-    required: {
-      type: Boolean,
-    },
-    placeholder: {
-      type: String,
-    },
-    label: {
-      type: String,
-    },
-    checked: {
-      type: Boolean,
-    },
-  },
-  emits: ['update'],
-  methods: {
-    onInput(event) {
-      this.$emit('update', event.target.value);
-    },
-  },
+<script setup>
+defineProps({
+  id: String,
+  required: Boolean,
+  placeholder: String,
+  label: String,
+  checked: Boolean,
 });
+const emit = defineEmits(['update']);
+const onInput = (event) => emit('update', event.target.value);
 </script>
 
 <style scoped>