@poppy-ui/vue 0.0.0-dev.36.93ba5b2

package/src/components/media/img/Img.story.vue

@@ -0,0 +1,214 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Img from './Img.vue'
+import type { ImgProps } from './img.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<Partial<ImgProps> & Pick<ImgProps, 'src' | 'alt'>>({
+  src: 'https://picsum.photos/seed/poppy/800/600',
+  alt: 'Sample image',
+  fit: 'cover',
+  rounded: undefined,
+  skeleton: true,
+  aspect: 'video',
+  eager: false,
+})
+</script>
+
+<template>
+  <Story group="components" title="Media/Img" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstText title="src" v-model="state.src" />
+          <HstText title="alt" v-model="state.alt" />
+          <HstSelect title="aspect" v-model="state.aspect" :options="[{ label: '-- none --', value: undefined }, 'auto', 'square', 'video', '4/3', '3/2']" />
+          <HstSelect title="fit" v-model="state.fit" :options="[{ label: '-- none --', value: undefined }, 'cover', 'contain', 'fill', 'none', 'scale-down']" />
+          <HstSelect title="rounded" v-model="state.rounded" :options="[{ label: '-- none --', value: undefined }, 'none', 'sm', 'md', 'lg', 'xl', 'full']" />
+          <HstCheckbox title="skeleton" v-model="state.skeleton" />
+          <HstCheckbox title="eager" v-model="state.eager" />
+        </template>
+
+        <div class="w-80">
+          <Img v-bind="state" />
+        </div>
+      </Variant>
+
+      <Variant title="Fallback on error">
+        <div class="flex gap-4 flex-wrap">
+          <div class="w-64">
+            <p class="text-xs text-base-content/50 mb-2">Default fallback slot</p>
+            <Img src="/does-not-exist.jpg" alt="Broken image" aspect="video" fit="cover" :eager="true" />
+          </div>
+          <div class="w-64">
+            <p class="text-xs text-base-content/50 mb-2">Custom fallback slot</p>
+            <Img src="/does-not-exist.jpg" alt="Broken image" aspect="video" :eager="true">
+              <template #fallback>
+                <div class="flex flex-col items-center gap-1 text-base-content/40">
+                  <span class="text-2xl">🖼️</span>
+                  <span class="text-xs">Not found</span>
+                </div>
+              </template>
+            </Img>
+          </div>
+          <div class="w-64">
+            <p class="text-xs text-base-content/50 mb-2">With fallback-src</p>
+            <Img
+              src="/does-not-exist.jpg"
+              fallback-src="https://picsum.photos/seed/fallback/400/300"
+              alt="Image with fallback src"
+              aspect="video"
+              fit="cover"
+              :eager="true"
+            />
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Art direction (sources / picture)">
+        <div class="w-80">
+          <Img
+            src="https://picsum.photos/seed/desktop/800/450"
+            alt="Art direction example"
+            aspect="video"
+            fit="cover"
+            :eager="true"
+            :sources="[
+              { srcset: 'https://picsum.photos/seed/mobile/400/600', media: '(max-width: 640px)' },
+              { srcset: 'https://picsum.photos/seed/desktop/800/450', media: '(min-width: 641px)' },
+            ]"
+          />
+          <p class="text-xs text-base-content/50 mt-2">Resize the window to see a different image below 640px.</p>
+        </div>
+      </Variant>
+
+      <Variant title="Rounded">
+        <div class="flex gap-4 flex-wrap items-end">
+          <div v-for="r in ['none', 'sm', 'md', 'lg', 'xl', 'full']" :key="r" class="flex flex-col items-center gap-2">
+            <div class="w-24 h-24">
+              <Img
+                src="https://picsum.photos/seed/rounded/200/200"
+                alt="Rounded image"
+                aspect="square"
+                fit="cover"
+                :rounded="r"
+                :eager="true"
+              />
+            </div>
+            <span class="text-xs text-base-content/50 font-mono">{{ r }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Object fit">
+        <div class="flex gap-4 flex-wrap">
+          <div v-for="f in ['cover', 'contain', 'fill', 'none', 'scale-down']" :key="f" class="flex flex-col items-center gap-2">
+            <div class="w-40 h-28 border border-base-300">
+              <Img
+                src="https://picsum.photos/seed/fit/300/150"
+                alt="Object fit demo"
+                :fit="f"
+                :eager="true"
+              />
+            </div>
+            <span class="text-xs text-base-content/50 font-mono">{{ f }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Aspect ratios">
+        <div class="flex gap-4 flex-wrap">
+          <div v-for="[label, a] in [['auto', undefined], ['square', 'square'], ['video', 'video'], ['4/3', '4/3'], ['3/2', '3/2']]" :key="label" class="flex flex-col items-center gap-2">
+            <div class="w-40">
+              <Img
+                src="https://picsum.photos/seed/aspect/400/300"
+                alt="Aspect ratio demo"
+                fit="cover"
+                :aspect="a"
+                :eager="true"
+              />
+            </div>
+            <span class="text-xs text-base-content/50 font-mono">{{ label }}</span>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<docs lang="md">
+# Img
+
+## Description
+
+A smart image wrapper with IntersectionObserver-based lazy loading, skeleton placeholder, error fallback,
+and `<picture />` art-direction support.
+
+## API
+
+### Props
+
+| Prop          | Type                                      | Default     | Required           | Configurable       | Description                                               |
+|---------------|-------------------------------------------|-------------|--------------------|--------------------|-----------------------------------------------------------|
+| `src`         | `string`                                  | -           | :white_check_mark: | :x:                | Image source URL.                                         |
+| `alt`         | `string`                                  | -           | :white_check_mark: | :x:                | Accessible alt text.                                      |
+| `fallbackSrc` | `string`                                  | `undefined` | :x:                | :x:                | Secondary URL used when the primary image fails to load.  |
+| `sources`     | `ImgSource[]`                             | `undefined` | :x:                | :x:                | `<source />` descriptors for `<picture />` art direction. |
+| `width`       | `number \| string`                        | `undefined` | :x:                | :x:                | Intrinsic width forwarded to `<img />` (CLS prevention).  |
+| `height`      | `number \| string`                        | `undefined` | :x:                | :x:                | Intrinsic height forwarded to `<img />` (CLS prevention). |
+| `aspect`      | `'auto' \| 'square' \| 'video' \| string` | `'auto'`    | :x:                | :x:                | Forced aspect ratio of the container.                     |
+| `fit`         | `ImgFit`                                  | `undefined` | :x:                | :white_check_mark: | Tailwind `object-*` sizing mode.                          |
+| `rounded`     | `ImgRounded`                              | `undefined` | :x:                | :white_check_mark: | Border radius of the container.                           |
+| `skeleton`    | `boolean`                                 | `true`      | :x:                | :white_check_mark: | Show skeleton placeholder while loading.                  |
+| `threshold`   | `number`                                  | `0`         | :x:                | :white_check_mark: | IntersectionObserver threshold.                           |
+| `rootMargin`  | `string`                                  | `'200px'`   | :x:                | :white_check_mark: | IntersectionObserver rootMargin.                          |
+| `eager`       | `boolean`                                 | `false`     | :x:                | :x:                | Disable lazy loading and load immediately.                |
+
+### Slots
+
+| Slot       | Bindings | Description                                                                                  |
+|------------|----------|----------------------------------------------------------------------------------------------|
+| `fallback` | —        | Shown when the image (and `fallbackSrc`) fail to load. Defaults to "Image unavailable" text. |
+
+### Exposed
+
+| Name       | Type      | Description                   |
+|------------|-----------|-------------------------------|
+| `isLoaded` | `boolean` | `true` once the image loaded. |
+| `hasError` | `boolean` | `true` if all sources failed. |
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Img src="/photo.jpg" alt="A photo" aspect="video" fit="cover" />
+
+<!-- With fallback src -->
+<Img src="/photo.jpg" fallback-src="/placeholder.jpg" alt="Photo" aspect="video" fit="cover" />
+
+<!-- With custom fallback slot -->
+<Img src="/photo.jpg" alt="Photo" aspect="square">
+  <template #fallback>
+    <span>Could not load image</span>
+  </template>
+</Img>
+
+<!-- Art direction -->
+<Img
+  src="/hero-desktop.jpg"
+  alt="Hero"
+  aspect="video"
+  fit="cover"
+  :sources="[
+    { srcset: '/hero-mobile.webp', media: '(max-width: 640px)', type: 'image/webp' },
+    { srcset: '/hero-desktop.webp', type: 'image/webp' },
+  ]"
+/>
+
+<!-- Eager (above the fold) -->
+<Img src="/logo.png" alt="Logo" :eager="true" />
+```
+</docs>

package/src/components/media/img/Img.vue

@@ -0,0 +1,189 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import { getClass } from '@/utils/build-class.util'
+import { computed, onMounted, onUnmounted, shallowRef, useTemplateRef, watch } from 'vue'
+import { IMG_CONFIG } from './img.context'
+import type { ImgProps } from './img.props'
+import type { ImgFit, ImgRounded } from './img.types'
+
+const fitClasses: Record<ImgFit, string> = {
+  cover: 'object-cover',
+  contain: 'object-contain',
+  fill: 'object-fill',
+  none: 'object-none',
+  'scale-down': 'object-scale-down',
+}
+
+const roundedClasses: Record<ImgRounded, string> = {
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  xl: 'rounded-xl',
+  full: 'rounded-full',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<ImgProps>()
+const config = useComponentConfig(IMG_CONFIG, props, {
+  skeleton: true,
+  threshold: 0,
+  rootMargin: '200px',
+})
+
+const containerRef = useTemplateRef('containerRef')
+const isIntersecting = shallowRef(false)
+const isLoaded = shallowRef(false)
+const hasError = shallowRef(false)
+const activeSrc = shallowRef('')
+
+let observer: IntersectionObserver | null = null
+
+const aspectClass = computed(() => {
+  const a = props.aspect
+  if (!a || a === 'auto') {
+    return undefined
+  }
+
+  if (a === 'square') {
+    return 'aspect-square'
+  }
+
+  if (a === 'video') {
+    return 'aspect-video'
+  }
+
+  return undefined
+})
+
+const aspectStyle = computed(() => {
+  const a = props.aspect
+  if (!a || a === 'auto' || a === 'square' || a === 'video') {
+    return undefined
+  }
+
+  return { aspectRatio: a }
+})
+
+const fitClass = computed(() => getClass(fitClasses, config.value.fit))
+const roundedClass = computed(() => getClass(roundedClasses, config.value.rounded))
+const showSkeleton = computed(() => config.value.skeleton !== false && !isLoaded.value && !hasError.value)
+
+function onLoad() {
+  isLoaded.value = true
+  hasError.value = false
+}
+
+function onError() {
+  if (props.fallbackSrc && activeSrc.value !== props.fallbackSrc) {
+    isLoaded.value = false
+    activeSrc.value = props.fallbackSrc
+  } else {
+    hasError.value = true
+  }
+}
+
+function load() {
+  isIntersecting.value = true
+  activeSrc.value = props.src
+}
+
+function startObserving() {
+  if (!containerRef.value || props.eager) {
+    load()
+    return
+  }
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting) {
+        load()
+        observer?.disconnect()
+        observer = null
+      }
+    },
+    {
+      threshold: config.value.threshold,
+      rootMargin: config.value.rootMargin,
+    },
+  )
+  observer.observe(containerRef.value)
+}
+
+watch(
+  () => props.src,
+  (val) => {
+    isLoaded.value = false
+    hasError.value = false
+    if (isIntersecting.value) activeSrc.value = val
+  },
+)
+
+onMounted(() => {
+  startObserving()
+})
+onUnmounted(() => {
+  observer?.disconnect()
+})
+
+defineExpose({
+  isLoaded,
+  hasError,
+})
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="relative overflow-hidden"
+    :class="[aspectClass, roundedClass]"
+    :style="aspectStyle"
+  >
+    <div v-if="showSkeleton" class="skeleton absolute inset-0 rounded-none" />
+
+    <template v-if="!hasError">
+      <picture v-if="sources?.length" class="block w-full h-full">
+        <source
+          v-for="source in sources"
+          :key="source.srcset"
+          :srcset="source.srcset"
+          :media="source.media"
+          :type="source.type"
+        />
+        <img
+          :src="activeSrc || undefined"
+          :alt="alt"
+          :width="width"
+          :height="height"
+          class="w-full h-full"
+          :class="[fitClass, { 'opacity-0': !isLoaded }]"
+          style="transition: opacity 0.3s ease"
+          @load="onLoad"
+          @error="onError"
+        />
+      </picture>
+      <img
+        v-else
+        :src="activeSrc || undefined"
+        :alt="alt"
+        :width="width"
+        :height="height"
+        class="w-full h-full"
+        :class="[fitClass, { 'opacity-0': !isLoaded }]"
+        style="transition: opacity 0.3s ease"
+        @load="onLoad"
+        @error="onError"
+      />
+    </template>
+
+    <div
+      v-if="hasError"
+      class="absolute inset-0 flex items-center justify-center bg-base-200"
+    >
+      <slot name="fallback">
+        <span class="text-base-content/40 text-sm select-none">Image unavailable</span>
+      </slot>
+    </div>
+  </div>
+</template>

package/src/components/media/img/img.context.ts

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

package/src/components/media/img/img.props.ts

@@ -0,0 +1,88 @@
+import type { ImgAspect, ImgFit, ImgRounded, ImgSource } from './img.types'
+
+export interface ImgConfigurableProps {
+  /**
+   * How the image should be sized within its container.
+   * Maps to Tailwind `object-*` utilities.
+   */
+  fit?: ImgFit
+
+  /**
+   * Border radius applied to the image container.
+   * Maps to Tailwind `rounded-*` utilities.
+   */
+  rounded?: ImgRounded
+
+  /**
+   * Show a skeleton placeholder while the image is loading.
+   *
+   * @default true
+   */
+  skeleton?: boolean
+
+  /**
+   * IntersectionObserver threshold — fraction of the element visible before loading starts.
+   *
+   * @default 0
+   */
+  threshold?: number
+
+  /**
+   * IntersectionObserver rootMargin — start loading before the image enters the viewport.
+   *
+   * @default '200px'
+   */
+  rootMargin?: string
+}
+
+export interface ImgProps extends ImgConfigurableProps {
+  /**
+   * Image source URL.
+   */
+  src: string
+
+  /**
+   * Accessible alt text forwarded to the `<img>` element.
+   */
+  alt: string
+
+  /**
+   * Fallback source URL shown when the primary image fails to load.
+   * If the fallback also fails, the `fallback` slot is rendered instead.
+   */
+  fallbackSrc?: string
+
+  /**
+   * Art-direction sources rendered as `<source>` elements inside a `<picture>`.
+   * Each entry maps to `srcset`, optional `media`, and optional `type`.
+   */
+  sources?: ImgSource[]
+
+  /**
+   * Intrinsic width forwarded to `<img>` to prevent layout shift (CLS).
+   */
+  width?: number | string
+
+  /**
+   * Intrinsic height forwarded to `<img>` to prevent layout shift (CLS).
+   */
+  height?: number | string
+
+  /**
+   * Forced aspect ratio of the image container.
+   * - `'auto'` — no constraint
+   * - `'square'` — 1:1
+   * - `'video'` — 16:9
+   * - any string like `'4/3'`, `'3/2'` — applied as inline `aspect-ratio` style
+   *
+   * @default 'auto'
+   */
+  aspect?: ImgAspect
+
+  /**
+   * When `true`, loads the image immediately without waiting for it to enter the viewport.
+   *
+   * @default false
+   */
+  eager?: boolean
+}

package/src/components/media/img/img.types.ts

@@ -0,0 +1,35 @@
+export type ImgFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+export type ImgRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'
+export type ImgAspect = 'auto' | 'square' | 'video' | (string & {})
+
+export interface ImgSource {
+  /**
+   * One or more image candidates, forwarded directly to the `<source srcset>` attribute.
+   *
+   * Accepts the same syntax as the native `srcset`:
+   * - Width descriptors: `'image-400.webp 400w, image-800.webp 800w'`
+   * - Pixel-density descriptors: `'image.webp 1x, image@2x.webp 2x'`
+   * - A single URL with no descriptor: `'image.webp'`
+   */
+  srcset: string
+
+  /**
+   * Media condition that must match for this source to be selected, forwarded to `<source media>`.
+   *
+   * Uses standard CSS media query syntax:
+   * - `'(max-width: 640px)'` — mobile
+   * - `'(min-width: 641px) and (max-width: 1024px)'` — tablet
+   * - `'(prefers-color-scheme: dark)'` — dark mode
+   *
+   * When omitted, this source acts as a format fallback (evaluated after all media-matched sources).
+   */
+  media?: string
+
+  /**
+   * MIME type hint for the source, forwarded to `<source type>`.
+   * Allows the browser to skip sources whose format it does not support without fetching them.
+   *
+   * Common values: `'image/webp'`, `'image/avif'`, `'image/png'`, `'image/jpeg'`
+   */
+  type?: string
+}

package/src/components/media/public.ts

@@ -0,0 +1 @@
+export { default as Img } from './img/Img.vue'

package/src/components/media/public.types.ts

@@ -0,0 +1,3 @@
+// Img
+export type { ImgConfigurableProps, ImgProps } from './img/img.props'
+export * from './img/img.types'

package/src/components/navigation/breadcrumbs/Breadcrumbs.story.vue

@@ -0,0 +1,94 @@
+<script lang="ts">
+import { FilePlus, FolderOpen, Home } from '@lucide/vue'
+import { reactive } from 'vue'
+import Breadcrumbs from './Breadcrumbs.vue'
+import type { BreadcrumbsProps } from './breadcrumbs.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<BreadcrumbsProps>({
+  items: [
+    { label: 'Home', to: '#' },
+    { label: 'Documents', to: '#' },
+    { label: 'Add Document' },
+  ],
+  maxWidth: undefined,
+})
+</script>
+
+<template>
+  <Story group="components" title="Navigation/Breadcrumbs" auto-props-disabled>
+
+    <Variant title="Default">
+      <template #controls>
+        <HstSelect
+          v-model="state.maxWidth"
+          title="Max Width"
+          :options="[
+            { label: '-- none --', value: undefined },
+            'max-w-xs',
+            'max-w-sm',
+            'max-w-md',
+          ]"
+        />
+      </template>
+      <Breadcrumbs v-bind="state" />
+    </Variant>
+
+    <Variant title="With icons">
+      <Breadcrumbs
+        :items="[
+          { label: 'Home', to: '#', icon: Home },
+          { label: 'Documents', to: '#', icon: FolderOpen },
+          { label: 'Add Document', icon: FilePlus },
+        ]"
+      />
+    </Variant>
+
+    <Variant title="With max-width (scroll)">
+      <Breadcrumbs
+        max-width="max-w-xs"
+        :items="[
+          { label: 'Long text 1', to: '#'},
+          { label: 'Long text 2', to: '#' },
+          { label: 'Long text 3', to: '#' },
+          { label: 'Long text 4', to: '#' },
+          { label: 'Long text 5' },
+        ]"
+      />
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Breadcrumbs
+
+## Description
+Affiche un fil d'Ariane pour aider les utilisateurs à naviguer dans le site.
+Le dernier item est automatiquement traité comme la page courante (non cliquable).
+
+## Props
+| Prop       | Type               | Default     | Required           | Configurable       | Description                                     |
+|------------|--------------------|-------------|--------------------|--------------------|-------------------------------------------------|
+| `items`    | `BreadcrumbItem[]` | `undefined` | :white_check_mark: | :x:                | Liste des items du fil d'Ariane                 |
+| `maxWidth` | `string`           | `undefined` | :x:                | :white_check_mark: | Classe Tailwind de largeur max (ex: `max-w-xs`) |
+
+## Type `BreadcrumbItem`
+| Prop    | Type               | Description                                   |
+|---------|--------------------|-----------------------------------------------|
+| `label` | `string`           | Texte affiché                                 |
+| `to`    | `RouteLocationRaw` | Route Vue Router. Absent = item non cliquable |
+| `icon`  | `Component`        | SVG inline optionnel                          |
+
+## Usage
+```vue
+<Breadcrumbs
+  :items="[
+    { label: 'Home', to: '/' },
+    { label: 'Documents', to: { name: 'documents' } },
+    { label: 'Add Document' },
+  ]"
+/>
+```
+</docs>

package/src/components/navigation/breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,53 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import { RouterLink } from 'vue-router'
+import { BREADCRUMBS_CONFIG } from './breadcrumbs.context'
+import type { BreadcrumbsProps } from './breadcrumbs.props'
+</script>
+
+<script setup lang="ts">
+const props = defineProps<BreadcrumbsProps>()
+const config = useComponentConfig(BREADCRUMBS_CONFIG, props, {})
+
+function isLast(index: number) {
+  return index === props.items.length - 1
+}
+</script>
+
+<template>
+  <div
+    class="breadcrumbs text-sm"
+    :class="config.maxWidth"
+  >
+    <ul>
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+      >
+        <!-- Clickable item (not the last) -->
+        <component
+          :is="item.to ? item.to === '#' ? 'a' : RouterLink : 'a'"
+          v-if="!isLast(index)"
+          v-bind="{
+            to: item.to && item.to !== '#',
+            href: item.to && item.to === '#',
+          }"
+          :to="item.to"
+          class="inline-flex items-center gap-2"
+        >
+          <component :is="item.icon" v-if="item.icon" :size="16" />
+          {{ item.label }}
+        </component>
+
+        <!-- Last item (current page, non-clickable) -->
+        <span
+          v-else
+          class="inline-flex items-center gap-2"
+        >
+          <component :is="item.icon" v-if="item.icon" :size="16" />
+          {{ item.label }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>