Component Boom

src/demo/Components/CarouselDemo.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="carousel-demo">
+    <TabbedLayout>
+      <template #preview>
+        <div class="demo-container relative h-[500px] overflow-hidden flex items-center justify-center">
+          <Carousel :key="rerenderKey" :base-width="width" :autoplay="autoplay" :autoplay-delay="autoplayDelay"
+            :pause-on-hover="pauseOnHover" :loop="loop" :round="round" />
+        </div>
+
+        <Customize>
+          <PreviewSlider title="Width" v-model="width" :min="250" :max="330" :step="10"
+            @update:model-value="forceRerender" />
+
+          <PreviewSwitch title="Round Variant" v-model="round" @update:model-value="forceRerender" />
+
+          <PreviewSwitch title="Loop" v-model="loop" @update:model-value="forceRerender" />
+
+          <PreviewSwitch title="Autoplay" v-model="autoplay" @update:model-value="forceRerender" />
+
+          <PreviewSlider title="Delay" v-model="autoplayDelay" :min="1000" :max="4000" :step="1000"
+            :disabled="!autoplay" @update:model-value="forceRerender" />
+
+          <PreviewSwitch title="Pause On Hover" v-model="pauseOnHover" :disabled="!autoplay"
+            @update:model-value="forceRerender" />
+        </Customize>
+
+        <PropTable :data="propData" />
+        <Dependencies :dependency-list="['motion-v']" />
+      </template>
+
+      <template #code>
+        <CodeExample :code-object="carousel" />
+      </template>
+
+      <template #cli>
+        <CliInstallation :command="carousel.cli" />
+      </template>
+    </TabbedLayout>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import TabbedLayout from '../../components/common/TabbedLayout.vue'
+import PropTable from '../../components/common/PropTable.vue'
+import Dependencies from '../../components/code/Dependencies.vue'
+import CliInstallation from '../../components/code/CliInstallation.vue'
+import CodeExample from '../../components/code/CodeExample.vue'
+import Customize from '../../components/common/Customize.vue'
+import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
+import PreviewSlider from '../../components/common/PreviewSlider.vue'
+import Carousel from '../../content/Components/Carousel/Carousel.vue'
+import { carousel } from '@/constants/code/Components/carouselCode'
+import { useForceRerender } from '@/composables/useForceRerender'
+
+const width = ref(300)
+const autoplay = ref(false)
+const autoplayDelay = ref(3000)
+const pauseOnHover = ref(false)
+const loop = ref(false)
+const round = ref(false)
+
+const { rerenderKey, forceRerender } = useForceRerender()
+
+const propData = [
+  {
+    name: "items",
+    type: "CarouselItem[]",
+    default: "DEFAULT_ITEMS",
+    description:
+      "An array of carousel items. Each item must include title, description, id, and icon."
+  },
+  {
+    name: "baseWidth",
+    type: "number",
+    default: "300",
+    description:
+      "Total width (in px) of the carousel container. Effective item width is baseWidth minus padding."
+  },
+  {
+    name: "autoplay",
+    type: "boolean",
+    default: "false",
+    description:
+      "Enables automatic scrolling to the next item at a fixed interval."
+  },
+  {
+    name: "autoplayDelay",
+    type: "number",
+    default: "3000",
+    description:
+      "Delay in milliseconds between automatic scrolls when autoplay is enabled."
+  },
+  {
+    name: "pauseOnHover",
+    type: "boolean",
+    default: "false",
+    description:
+      "Pauses the autoplay functionality when the carousel is hovered."
+  },
+  {
+    name: "loop",
+    type: "boolean",
+    default: "false",
+    description:
+      "When true, the carousel loops seamlessly from the last item back to the first."
+  },
+  {
+    name: "round",
+    type: "boolean",
+    default: "false",
+    description:
+      "When true, the carousel is rendered with a 1:1 aspect ratio and circular container/items."
+  }
+]
+</script>