Carousel

<script setup lang="ts">
  import { ref } from 'vue'
  import { ChevronLeft, ChevronRight } from '@lucide/vue'
  import {
    Carousel,
    FormField,
    IconButton,
    Image,
    Inline,
    Link,
    Slider,
    Stack,
    Switch,
    Text,
  } from '@hina-ui/vue'
  import { dataListDemo } from '../../data-list'
  const library = dataListDemo('en')
  const items = [0, 3, 10, 5, 11, 6, 4, 8].map(index => library[index]!)
  const width = ref(100)
  const rtl = ref(false)
</script>
<template>
  <Stack class="w-full max-w-2xl" data-demo-carousel-grouped>
    <Inline gap="lg" align="end">
      <FormField label="Container width" class="min-w-40 flex-1">
        <Slider v-model="width" :min="50" :max="100" :format="value => value + '%'" />
      </FormField>
      <Switch v-model="rtl" class="mb-1">Right-to-left</Switch>
    </Inline>
    <Text size="sm" tone="muted">
      Portrait, square and landscape covers keep their proportions. Resize the container to regroup
      them.
    </Text>
    <Carousel
      :items="items"
      :get-key="item => item.id"
      :dir="rtl ? 'rtl' : 'ltr'"
      slides-to-scroll="auto"
      item-class="basis-auto"
      label="Browse the library"
      class="self-center"
      :style="{ width: width + '%' }"
    >
      <template #default="{ item }">
        <Stack
          gap="sm"
          class="h-full"
          :style="{ width: `min(${(192 * item.cover.width) / item.cover.height}px, 100cqw)` }"
        >
          <Image
            :src="item.cover.src"
            :alt="item.title"
            :ratio="item.cover.width / item.cover.height"
            :draggable="false"
            class="rounded-lg"
          />
          <Link
            :href="item.url"
            target="_blank"
            rel="noopener noreferrer"
            tone="neutral"
            class="line-clamp-2 w-fit max-w-full text-sm"
          >
            {{ item.title }}
          </Link>
          <Text size="xs" tone="muted" truncate>{{ item.developer }}</Text>
        </Stack>
      </template>
      <template #controls="{ prev, next, canPrev, canNext, index, snapCount }">
        <Inline justify="between" class="w-full">
          <Text size="sm" tone="muted" dir="ltr">
            {{ snapCount ? `${index + 1} / ${snapCount}` : '—' }}
          </Text>
          <Inline gap="xs">
            <IconButton label="Previous group" :disabled="!canPrev" @click="prev">
              <ChevronLeft class="rtl:rotate-180" />
            </IconButton>
            <IconButton label="Next group" :disabled="!canNext" @click="next">
              <ChevronRight class="rtl:rotate-180" />
            </IconButton>
          </Inline>
        </Inline>
      </template>
    </Carousel>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Carousel, Image, Inline, Progress, SegmentedControl, Stack, Text } from '@hina-ui/vue'
  import { dataListDemo } from '../../data-list'
  const items = dataListDemo('en').slice(0, 4)
  const mode = ref('thumbnails')
  const index = ref(0)
  const options = [
    { value: 'capsule', label: 'Default' },
    { value: 'thumbnails', label: 'Thumbnails' },
    { value: 'progress', label: 'Progress' },
  ]
</script>
<template>
  <Stack class="w-full max-w-lg" data-demo-carousel-indicators>
    <SegmentedControl
      v-model="mode"
      :options="options"
      aria-label="Indicator style"
      size="sm"
      class="self-center"
    />
    <Carousel
      v-model:index="index"
      :items="items"
      :get-key="item => item.id"
      indicators
      label="Custom cover gallery"
    >
      <template #default="{ item }">
        <Image
          :src="item.cover.src"
          :alt="item.title"
          :ratio="16 / 10"
          :draggable="false"
          class="rounded-xl"
        />
      </template>
      <template v-if="mode === 'thumbnails'" #indicator="{ index: position, active }">
        <Image
          :src="items[position]!.cover.src"
          alt=""
          :ratio="3 / 4"
          :lazy="false"
          :draggable="false"
          :class="`w-8 rounded-sm transition-opacity duration-(--hn-duration-base) motion-reduce:transition-none ${active ? 'opacity-100 ring-2 ring-accent ring-offset-2 ring-offset-surface' : 'opacity-50'}`"
        />
      </template>
      <template v-if="mode === 'progress'" #indicators="{ index: position, snapCount }">
        <Inline gap="sm" :wrap="false" class="w-36">
          <Progress
            :value="position + 1"
            :max="Math.max(1, snapCount)"
            size="sm"
            aria-label="Gallery progress"
            class="flex-1"
          />
          <Text size="xs" tone="muted" dir="ltr" class="shrink-0 tabular-nums">
            {{ position + 1 }} / {{ snapCount }}
          </Text>
        </Inline>
      </template>
    </Carousel>
  </Stack>
</template>

<script setup lang="ts">
  import { Carousel, Card, Image, Link, Stack, Text } from '@hina-ui/vue'
  import { dataListDemo } from '../../data-list'
  const items = dataListDemo('en').slice(0, 6)
</script>
<template>
  <Carousel
    :items="items"
    :get-key="item => item.id"
    orientation="vertical"
    viewport-class="h-72"
    item-class="basis-1/2"
    label="Reading queue"
    class="max-w-lg"
  >
    <template #default="{ item }">
      <Card class="flex h-full items-center gap-4 shadow-none">
        <Image
          :src="item.cover.src"
          alt=""
          :ratio="3 / 4"
          :draggable="false"
          class="w-16 shrink-0 rounded-md"
        />
        <Stack gap="xs" class="min-w-0">
          <Link
            :href="item.url"
            target="_blank"
            rel="noopener noreferrer"
            tone="neutral"
            class="line-clamp-2 w-fit text-sm font-medium"
          >
            {{ item.title }}
          </Link>
          <Text size="xs" tone="muted" truncate>{{ item.developer }}</Text>
          <Text as="time" :datetime="item.released" size="xs" tone="muted">
            {{ item.released }}
          </Text>
        </Stack>
      </Card>
    </template>
  </Carousel>
</template>

<script setup lang="ts">
  import { Carousel, Card, Image, Link, Stack, Text } from '@hina-ui/vue'
  import { dataListDemo } from '../../data-list'
  const items = dataListDemo('en').slice(0, 4)
</script>
<template>
  <Stack class="w-full max-w-lg">
    <Carousel
      :items="items"
      :get-key="item => item.id"
      loop
      :autoplay="4000"
      indicators
      label="Reading recommendations"
    >
      <template #default="{ item }">
        <Card class="flex items-center gap-5 shadow-none">
          <Image
            :src="item.cover.src"
            alt=""
            :ratio="3 / 4"
            :draggable="false"
            class="w-24 shrink-0 rounded-md"
          />
          <Stack gap="sm" class="min-w-0">
            <Link
              :href="item.url"
              target="_blank"
              rel="noopener noreferrer"
              tone="neutral"
              class="line-clamp-2 w-fit font-medium"
            >
              {{ item.title }}
            </Link>
            <Text size="sm" tone="muted" class="line-clamp-2">{{ item.developer }}</Text>
          </Stack>
        </Card>
      </template>
    </Carousel>
    <Text size="sm" tone="muted">
      Hover to pause temporarily. After using the keyboard or changing slides, choose Start rotation
      to resume.
    </Text>
  </Stack>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { Carousel, Image } from '@hina-ui/vue'
  import { dataListDemo } from '../../data-list'
  const items = dataListDemo('en').slice(0, 5)
  const index = ref(2)
</script>
<template>
  <Carousel
    v-model:index="index"
    :items="items"
    :get-key="item => item.id"
    indicators
    label="Cover gallery"
    class="max-w-lg"
  >
    <template #default="{ item }">
      <Image
        :src="item.cover.src"
        :alt="item.title"
        :ratio="4 / 3"
        :draggable="false"
        class="rounded-xl"
      />
    </template>
  </Carousel>
</template>