ImageGallery Component

A single-image-at-a-time carousel with prev/next controls, an image counter, and an optional caption/credit line below the image.

Installation

pnpm add @phila/phila-ui-image-gallery @phila/phila-ui-core
# or
npm install @phila/phila-ui-image-gallery @phila/phila-ui-core

Import core styles in your main entry file (e.g., main.js|ts):

import "@phila/phila-ui-core/styles/template-light.css";

Usage

<script setup lang="ts">
import { ImageGallery } from "@phila/phila-ui-image-gallery";

const images = [
  {
    src: "https://example.com/photo1.jpg",
    credit: "John Doe",
    caption: "A description of the first photo.",
  },
  {
    src: "https://example.com/photo2.jpg",
    alt: "Alt text for the second photo",
    credit: "Jane Smith",
    caption: "A description of the second photo.",
  },
];
</script>

<template>
  <ImageGallery :images="images" />
</template>

Props

| Prop | Type | Default | Description | | ----------- | ------------- | -------- | --------------------------------------------------------------------------------------------------------- | | images | ImageItem[] | required | { src: string, alt?: string, caption?: string, credit?: string }[] — see ImageItem below. | | className | string | — | Additional CSS classes. |

ImageItem

ImageItem isn't exported from the package — it's declared locally inside ImageGallery.vue, not in src/index.ts. Shape your array to match it directly:

interface ImageItem {
  src: string;
  alt?: string; // falls back to "image" if omitted
  caption?: string; // shown below the image if provided
  credit?: string; // shown as "Photo by: <credit>" if provided
}

Note for maintainers: src/index.ts still exports an empty ImageGalleryProps stub left over from scaffolding — it isn't actually used by ImageGallery.vue, which declares images/className inline instead. If you touch this component, consider moving the real props (above) into src/index.ts per the usual convention instead of documenting around the mismatch further.

Behavior

• Starts on the first image (index 0). The prev/next buttons disable at the first/last image instead of wrapping around.
• The counter (1 / 3, etc.) and the caption/credit line update as you navigate.
• There is no keyboard or swipe navigation beyond the two buttons, and no thumbnail strip — it's a single large image with simple prev/next controls.

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

Publishing to NPM

Follow the release instructions using changesets.

License

MIT