Merge pull request #9 from selemondev/fix/custom-gap-speed

fix: custom gap and speed

Author: selemondev

examples/vue3-marquee/package.json

@@ -11,7 +11,7 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
-    "@selemondev/vue3-marquee": "0.0.2",
+    "@selemondev/vue3-marquee": "0.0.7",
     "@wdns/vue-code-block": "^2.3.1",
     "vue": "^3.4.15"
   },

examples/vue3-marquee/src/App.vue

@@ -84,7 +84,7 @@ const verticalCodeSnippet = ref(`<Marquee class="h-[400px]" direction="up" :fade
 </Marquee>`
 );
 
-const customGapAndSpeedSnippet = ref(`<Marquee class="gap-[3rem] [--duration:5s]" innerClassName="gap-[3rem] [--gap:3rem]" :fade="true">
+const customGapAndSpeedSnippet = ref(`<Marquee class="gap-[3rem] [--duration:5s] [--gap:3rem]" innerClassName="gap-[3rem]" :fade="true">
   <div>Content 1</div>
   <div>Content 2</div>
   <div>Content 3</div>
@@ -243,7 +243,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       <hr class="border-stone-200" />
       <div class="space-y-1 ">
         <h3 class="font-semibold">Custom gap and speed</h3>
-        <Marquee class="gap-[3rem] [--duration:10s] py-4" innerClassName="gap-[3rem] [--gap:3rem]" :fade="true">
+        <Marquee class="gap-[3rem] [--duration:5s] [--gap:3rem]" innerClassName="gap-[3rem]" :fade="true">
           <div v-for="testimonial in testimonials" :key="testimonial.name">
             <Card :avatar="testimonial.avatar" :name="testimonial.name" :title="testimonial.title"
               :content="testimonial.content" />
@@ -258,8 +258,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       <div class="space-y-1">
         <h3 class="font-semibold">Reduced motion</h3>
         <div>Disable animation when user device prefers reduced motion.</div>
-        <Marquee class="py-4 motion-reduce:overflow-auto"
-          innerclass="motion-reduce:animate-none motion-reduce:first:hidden">
+        <Marquee class="py-4 motion-reduce:overflow-auto" innerClassName="motion-reduce:animate-none motion-reduce:first:hidden">
           <div v-for="testimonial in testimonials" :key="testimonial.name">
             <Card :avatar="testimonial.avatar" :name="testimonial.name" :title="testimonial.title"
               :content="testimonial.content" />

packages/vue3-marquee/src/components/Marquee.vue

@@ -19,11 +19,17 @@ const props = withDefaults(defineProps<{
 const attrs = useAttrs();
 </script>
 
+<script lang="ts">
+export default {
+    name: 'Marquee',
+    inheritAttrs: false
+}
+</script>
 <template>
-    <div v-bind="attrs"  :class="cn('group flex gap-[1rem] overflow-hidden', {
+    <div :class="cn('group flex gap-[1rem] overflow-hidden', {
         'flex-row': props.direction === 'left',
         'flex-col': props.direction !== 'left',
-    })" :style="{
+    }, attrs && attrs.class )" :style="{
     maskImage: props.fade
         ? `linear-gradient(${props.direction === 'left' ? 'to right' : 'to bottom'
         }, transparent 0%, rgba(0, 0, 0, 1.0) 10%, rgba(0, 0, 0, 1.0) 90%, transparent 100%)`

packages/vue3-marquee/src/lib/utils.ts

@@ -1,6 +1,6 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export function cn(...inputs: ClassValue[]) {
+export function cn(...inputs: ClassValue[] | any) {
   return twMerge(clsx(inputs));
 }

pnpm-lock.yaml

@@ -1,3 +1,3 @@
 packages:
   - examples/*
-  - 'packages/*'
+  - packages/*