Merge pull request #45 from onmax/animated-list

Add AnimatedList component

src/constants/Categories.ts

@@ -57,6 +57,7 @@ export const CATEGORIES = [
   {
     name: 'Components',
     subcategories: [
+      'Animated List',
       'Masonry',
       'Profile Card',
       'Dock',

src/constants/Components.ts

@@ -45,6 +45,7 @@ const textAnimations = {
 };
 
 const components = {
+  'animated-list': () => import('../demo/Components/AnimatedListDemo.vue'),
   'masonry': () => import('../demo/Components/MasonryDemo.vue'),
   'profile-card': () => import('../demo/Components/ProfileCardDemo.vue'),
   'dock': () => import('../demo/Components/DockDemo.vue'),

src/constants/code/Components/animatedListCode.ts

@@ -0,0 +1,27 @@
+import code from '@content/Components/AnimatedList/AnimatedList.vue?raw'
+import type { CodeObject } from '../../../types/code'
+
+export const animatedList: CodeObject = {
+  cli: `npx jsrepo add https://vue-bits.dev/ui/Components/AnimatedList`,
+  installation: `npm install motion-v`,
+  usage: `<template>
+  <AnimatedList
+    :items="items"
+    :showGradients="true"
+    :enableArrowNavigation="true"
+    :displayScrollbar="true"
+    @itemSelected="(item, index) => console.log(item, index)"
+  />
+</template>
+
+<script setup lang="ts">
+import AnimatedList from './AnimatedList.vue'
+
+const items = [
+  'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5',
+  'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10',
+  'Item 11', 'Item 12', 'Item 13', 'Item 14', 'Item 15'
+]
+</script>`,
+  code
+}