@poppy-ui/vue 0.5.6 → 0.5.7-beta.0

package/src/components/display/card/card.props.ts

@@ -0,0 +1,34 @@
+import type { Booleanish } from '@/types/utils.type'
+import type { CardSize, CardVariant } from './card.types'
+
+export interface CardConfigurableProps {
+  /**
+   * Visual style of the card.
+   * - `'border'`: Adds a visible border around the card.
+   * - `'dash'`: Adds a dashed border around the card.
+   */
+  variant?: CardVariant
+
+  /**
+   * Size of the card.
+   *
+   * @default 'md'
+   */
+  size?: CardSize
+}
+
+export interface CardProps extends CardConfigurableProps {
+  /**
+   * When `true`, The image in `<figure>` will be on to the side
+   *
+   * @default false
+   */
+  side?: Booleanish
+
+  /**
+   * When `true`, the image in `<figure>` element will be the background
+   *
+   * @default false
+   */
+  imageFull?: Booleanish
+}

package/src/components/display/card/card.types.ts

@@ -0,0 +1,4 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type CardVariant = 'border' | 'dash'
+export type CardSize = ComponentSize

package/src/components/display/carousel/Carousel.story.vue

@@ -0,0 +1,216 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Carousel from './Carousel.vue'
+import type { CarouselProps } from './carousel.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<CarouselProps>({
+  direction: 'horizontal',
+  snap: 'start',
+  indicators: false,
+  autoplay: false,
+  interval: 3000,
+  initialIndex: 0,
+})
+</script>
+
+<template>
+  <Story group="components" title="Display/Carousel" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Direction" v-model="state.direction" :options="['horizontal', 'vertical']" />
+          <HstSelect title="Snap" v-model="state.snap" :options="['start', 'center', 'end']" />
+          <HstCheckbox title="Indicators" v-model="(state.indicators as boolean)" />
+          <HstCheckbox title="Autoplay" v-model="(state.autoplay as boolean)" />
+        </template>
+
+        <div class="w-full max-w-lg mx-auto">
+          <Carousel v-bind="state" class="rounded-box">
+            <div v-for="i in 5" :key="i" class="flex items-center justify-center h-64 bg-primary/10 text-primary">
+              <span class="text-2xl font-bold">Slide {{ i }}</span>
+            </div>
+          </Carousel>
+        </div>
+      </Variant>
+
+      <Variant title="With images">
+        <div class="w-full max-w-2xl mx-auto">
+          <Carousel indicators snap="center" class="rounded-box">
+            <img
+              v-for="i in 4" :key="i"
+              :src="`https://picsum.photos/seed/carousel${i}/800/400`"
+              alt="Carousel image"
+              class="w-full h-64 object-cover"
+            />
+          </Carousel>
+        </div>
+      </Variant>
+
+      <Variant title="Direction Vertical">
+        <div class="w-full max-w-xs mx-auto h-96">
+          <Carousel direction="vertical" indicators class="h-full">
+            <div v-for="i in 5" :key="i" class="flex items-center justify-center h-full bg-secondary/10 text-secondary">
+              <span class="text-xl font-bold">Slide {{ i }}</span>
+            </div>
+          </Carousel>
+        </div>
+      </Variant>
+
+      <Variant title="Snap positions">
+        <div class="card-story card-story--row">
+          <div v-for="snap in (['start', 'center', 'end'])" :key="snap" class="card-story--item">
+            <span class="card-story--label">snap: {{ snap }}</span>
+            <div class="w-full max-w-md">
+              <Carousel :snap="snap" class="rounded-box">
+                <div v-for="i in 3" :key="i" class="flex items-center justify-center h-40 bg-base-200">
+                  <span class="text-lg font-bold">{{ snap }} - {{ i }}</span>
+                </div>
+              </Carousel>
+            </div>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Custom controls">
+        <div class="w-full max-w-lg mx-auto">
+          <Carousel indicators>
+            <div v-for="i in 3" :key="i" class="flex items-center justify-center h-64 bg-accent/10 text-accent">
+              <span class="text-2xl font-bold">Content {{ i }}</span>
+            </div>
+            <template #prev-icon>
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+              </svg>
+            </template>
+            <template #next-icon>
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+              </svg>
+            </template>
+          </Carousel>
+        </div>
+      </Variant>
+
+      <Variant title="Autoplay">
+        <div class="w-full max-w-lg mx-auto">
+          <Carousel autoplay :interval="2000" indicators class="rounded-box">
+            <div v-for="i in 4" :key="i" class="flex items-center justify-center h-64 bg-info/10 text-info">
+              <span class="text-2xl font-bold">Auto Slide {{ i }}</span>
+            </div>
+          </Carousel>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.card-story {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.card-story--row {
+  align-items: flex-start;
+}
+
+.card-story--col {
+  flex-direction: column;
+}
+
+.card-story--item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.card-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+</style>
+
+<docs lang="md">
+# Carousel
+
+## Description
+
+A responsive, accessible carousel/slider component built on DaisyUI's `carousel` class system. Supports horizontal and vertical layouts, autoplay, infinite looping, indicators, and custom controls.
+
+## Carousel props
+
+| Prop           | Type                | Default        | Required | Configurable       | Description                                               |
+|----------------|---------------------|----------------|----------|--------------------|-----------------------------------------------------------|
+| `direction`    | `CarouselDirection` | `'horizontal'` | :x:      | :white_check_mark: | Direction of the carousel. `'horizontal'` / `'vertical'`. |
+| `snap`         | `CarouselSnap`      | `'start'`      | :x:      | :white_check_mark: | Snap alignment. `'start'` / `'center'` / `'end'`.         |
+| `indicators`   | `Booleanish`        | `false`        | :x:      | :white_check_mark: | When `true`, shows navigation indicator dots.             |
+| `controls`     | `Booleanish`        | `true`         | :x:      | :white_check_mark: | When `true`, shows prev/next navigation controls.         |
+| `infinite`     | `Booleanish`        | `true`         | :x:      | :white_check_mark: | When `true`, enables infinite looping.                    |
+| `autoplay`     | `Booleanish`        | `false`        | :x:      | :white_check_mark: | When `true`, enables autoplay.                            |
+| `interval`     | `number`            | `3000`         | :x:      | :white_check_mark: | Autoplay interval in milliseconds.                        |
+| `initialIndex` | `number`            | `0`            | :x:      | :x:                | Index of the initial slide.                               |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.carousel` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Slots
+
+| Name        | Description                                                                                    |
+|-------------|------------------------------------------------------------------------------------------------|
+| `default`   | The carousel items content. Each direct child will receive the `carousel-item w-full` classes. |
+| `prev-icon` | Custom previous button icon.                                                                   |
+| `next-icon` | Custom next button icon.                                                                       |
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Carousel>
+  <div v-for="i in 5" :key="i">
+    Slide {{ i }}
+  </div>
+</Carousel>
+
+<!-- With images -->
+<Carousel indicators>
+  <img v-for="item in items" :key="item.id" :src="item.image" alt="" />
+</Carousel>
+
+<!-- Direction Vertical -->
+<Carousel direction="vertical" class="h-96">
+  <div v-for="i in 5" :key="i" class="h-full">
+    Slide {{ i }}
+  </div>
+</Carousel>
+
+<!-- Snap center -->
+<Carousel snap="center">
+  <div v-for="i in 4" :key="i">
+    Slide {{ i }}
+  </div>
+</Carousel>
+
+<!-- With autoplay -->
+<Carousel autoplay :interval="5000" indicators>
+  <img v-for="i in 4" :key="i" :src="`image${i}.jpg`" alt="" />
+</Carousel>
+
+<!-- Custom controls -->
+<Carousel>
+  <div v-for="i in 3" :key="i">
+    Slide {{ i }}
+  </div>
+  <template #prev-icon>
+    <MyCustomPrevIcon />
+  </template>
+  <template #next-icon>
+    <MyCustomNextIcon />
+  </template>
+</Carousel>
+```
+</docs>

package/src/components/display/carousel/Carousel.vue

@@ -0,0 +1,157 @@
+<script lang="ts">
+import ClassWrapper from '@/components/ClassWrapper.vue'
+import { useComponentConfig } from '@/composables/use-component-config'
+import { getClass } from '@/utils/build-class.util'
+import { isTrue } from '@/utils/is-true'
+import { computed, onMounted, onUnmounted, shallowRef, useTemplateRef } from 'vue'
+import { CAROUSEL_CONFIG } from './carousel.context'
+import type { CarouselProps } from './carousel.props'
+import type { CarouselDirection, CarouselSnap } from './carousel.types'
+
+const directionClasses: Record<CarouselDirection, string> = {
+  horizontal: '',
+  vertical: 'carousel-vertical',
+}
+
+const snapClasses: Record<CarouselSnap, string> = {
+  start: 'carousel-start',
+  center: 'carousel-center',
+  end: 'carousel-end',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<CarouselProps>()
+const config = useComponentConfig(CAROUSEL_CONFIG, props, {
+  direction: 'horizontal',
+  snap: 'start',
+  indicators: false,
+  controls: false,
+  autoplay: false,
+  interval: 3000,
+  initialIndex: 0,
+})
+
+const carouselRef = useTemplateRef('carouselRef')
+const currentIndex = shallowRef(props.initialIndex ?? 0)
+let autoplayTimer: ReturnType<typeof setInterval> | null = null
+
+const isVertical = computed(() => config.value.direction === 'vertical')
+
+function getItemCount(): number {
+  if (!carouselRef.value) {
+    return 0
+  }
+
+  return carouselRef.value.querySelectorAll('.carousel-item').length
+}
+
+function getItems(): HTMLElement[] {
+  if (!carouselRef.value) {
+    return []
+  }
+
+  return Array.from(carouselRef.value.querySelectorAll('.carousel-item')) as HTMLElement[]
+}
+
+function scrollTo(index: number) {
+  const items = getItems()
+  if (!items.length || index < 0 || index >= items.length) {
+    return
+  }
+
+  items[index].scrollIntoView({
+    behavior: 'smooth',
+    block: isVertical.value ? 'nearest' : undefined,
+    inline: isVertical.value ? undefined : 'nearest',
+  })
+  currentIndex.value = index
+}
+
+function goTo(index: number) {
+  const count = getItemCount()
+  if (count === 0) {
+    return
+  }
+
+  const target = index % count
+  scrollTo(target < 0 ? count + target : target)
+}
+
+function next() {
+  goTo(currentIndex.value + 1)
+}
+
+function prev() {
+  goTo(currentIndex.value - 1)
+}
+
+function startAutoplay() {
+  if (autoplayTimer) {
+    clearInterval(autoplayTimer)
+  }
+
+  if (isTrue(config.value.autoplay) && getItemCount() > 1) {
+    autoplayTimer = setInterval(next, config.value.interval)
+  }
+}
+
+function stopAutoplay() {
+  if (autoplayTimer) {
+    clearInterval(autoplayTimer)
+    autoplayTimer = null
+  }
+}
+
+const count = computed(() => getItemCount())
+
+onMounted(() => {
+  startAutoplay()
+})
+
+onUnmounted(() => {
+  stopAutoplay()
+})
+</script>
+
+<template>
+  <div
+    ref="carouselRef"
+    class="carousel w-full"
+    :class="[
+      getClass(directionClasses, config.direction),
+      getClass(snapClasses, config.snap),
+    ]"
+    @mouseenter="stopAutoplay"
+    @mouseleave="startAutoplay"
+  >
+    <ClassWrapper class="carousel-item w-full">
+      <slot />
+    </ClassWrapper>
+
+    <template v-if="isTrue(config.indicators) && count > 1">
+      <div class="carousel-indicators absolute bottom-4 left-4 flex gap-2">
+        <button
+          v-for="(_, index) in count"
+          :key="index"
+          class="carousel-indicator btn btn-xs btn-circle"
+          :class="{ 'btn-active': currentIndex === index }"
+          @click="goTo(index)"
+        />
+      </div>
+    </template>
+  </div>
+
+  <template v-if="isTrue(config.controls) && count > 1">
+    <button class="carousel-control carousel-prev absolute left-4 top-1/2 -translate-y-1/2 btn btn-circle" @click="prev">
+      <slot name="prev-icon">
+        <ChevronLeftIcon class="size-6" />
+      </slot>
+    </button>
+    <button class="carousel-control carousel-next absolute right-4 top-1/2 -translate-y-1/2 btn btn-circle" @click="next">
+      <slot name="next-icon">
+        <ChevronRightIcon class="size-6" />
+      </slot>
+    </button>
+  </template>
+</template>

package/src/components/display/carousel/carousel.context.ts

@@ -0,0 +1,3 @@
+import { createComponentConfigKey } from '@/symbol'
+
+export const CAROUSEL_CONFIG = createComponentConfigKey('carousel')

package/src/components/display/carousel/carousel.props.ts

@@ -0,0 +1,59 @@
+import type { Booleanish } from '@/types/utils.type'
+import type { CarouselDirection, CarouselSnap } from './carousel.types'
+
+export interface CarouselConfigurableProps {
+  /**
+   * Direction of the carousel.
+   * - `'horizontal'`: Slides move left/right.
+   * - `'vertical'`: Slides move up/down.
+   *
+   * @default 'horizontal'
+   */
+  direction?: CarouselDirection
+
+  /**
+   * Snap alignment for carousel items.
+   * - `'start'`: Snap elements to start.
+   * - `'center'`: Snap elements to center.
+   * - `'end'`: Snap elements to end.
+   *
+   * @default 'start'
+   */
+  snap?: CarouselSnap
+
+  /**
+   * When `true`, shows carousel indicators.
+   *
+   * @default false
+   */
+  indicators?: Booleanish
+
+  /**
+   * When `true`, shows prev/next navigation controls.
+   *
+   * @default false
+   */
+  controls?: Booleanish
+
+  /**
+   * When `true`, enables autoplay.
+   *
+   * @default false
+   */
+  autoplay?: Booleanish
+
+  /**
+   * Autoplay interval in milliseconds.
+   *
+   * @default 3000
+   */
+  interval?: number
+}
+
+export interface CarouselProps extends CarouselConfigurableProps {
+  /**
+   * Index of the initial slide.
+   * @default 0
+   */
+  initialIndex?: number
+}

package/src/components/display/carousel/carousel.types.ts

@@ -0,0 +1,2 @@
+export type CarouselDirection = 'horizontal' | 'vertical'
+export type CarouselSnap = 'start' | 'center' | 'end'