Overflow ListCommunity Asset

<script setup lang="ts">
const shortList = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' },
]

const longList = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Orange' },
  { id: 4, name: 'Grape' },
  { id: 5, name: 'Mango' },
  { id: 6, name: 'Pineapple' },
  { id: 7, name: 'Peach' },
  { id: 8, name: 'Plum' },
  { id: 9, name: 'Kiwi' },
  { id: 10, name: 'Strawberry' },
  { id: 11, name: 'Blueberry' },
  { id: 12, name: 'Raspberry' },
]
</script>

<template>
  <div class="n-container-m n-stack n-gap-l n-align-center">
    <nord-card>
      <h2 slot="header">Basic Usage</h2>

      <div class="n-stack n-gap-m">
        <div class="n-stack n-gap-s">
          <h3 class="n-font-size-m n-font-weight-heading">
            Short list (no overflow)
          </h3>
          <UiOverflowList :items="shortList" item-key="id">
            <template #item="{ item }">
              <span>{{ item.name }}</span>
            </template>
          </UiOverflowList>
        </div>

        <div class="n-stack n-gap-s">
          <h3 class="n-font-size-m n-font-weight-heading">
            Long list (will overflow after 5 items)
          </h3>
          <UiOverflowList :items="longList" item-key="id">
            <template #item="{ item }">
              <span>{{ item.name }}</span>
            </template>
          </UiOverflowList>
        </div>

        <div class="n-stack n-gap-s">
          <h3 class="n-font-size-m n-font-weight-heading">
            Custom maxVisible (3 items)
          </h3>
          <UiOverflowList :items="longList" item-key="id" :max-visible="3">
            <template #item="{ item }">
              <span>{{ item.name }}</span>
            </template>
          </UiOverflowList>
        </div>
      </div>
    </nord-card>
  </div>
</template>

<script setup lang="ts">
const colors = [
  { id: 1, name: 'Red', hex: '#FF0000' },
  { id: 2, name: 'Blue', hex: '#0000FF' },
  { id: 3, name: 'Green', hex: '#00FF00' },
  { id: 4, name: 'Yellow', hex: '#FFFF00' },
  { id: 5, name: 'Purple', hex: '#800080' },
  { id: 6, name: 'Orange', hex: '#FFA500' },
  { id: 7, name: 'Pink', hex: '#FFC0CB' },
  { id: 8, name: 'Brown', hex: '#A52A2A' },
  { id: 9, name: 'Gray', hex: '#808080' },
  { id: 10, name: 'Black', hex: '#000000' },
  { id: 11, name: 'White', hex: '#FFFFFF' },
]
</script>

<template>
  <div class="n-container-m n-stack n-gap-l n-align-center">
    <nord-card>
      <h2 slot="header">Custom Item</h2>

      <div class="n-stack n-gap-s">
        <UiOverflowList :items="colors" item-key="id" :max-visible="4">
          <template #item="{ item }">
            <span class="n-stack-horizontal n-gap-xs n-align-items-center">
              <span
                class="color-swatch"
                :style="{ backgroundColor: item.hex }"
              />
              <span>{{ item.name }}</span>
            </span>
          </template>
        </UiOverflowList>
      </div>
    </nord-card>
  </div>
</template>

<style scoped>
.color-swatch {
  display: inline-block;
  inline-size: var(--n-size-icon-s);
  block-size: var(--n-size-icon-s);
  border-radius: var(--n-border-radius-s);
  border: 1px solid var(--n-color-border);
}
</style>

<script setup lang="ts">
const users = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
  { id: 3, name: 'Bob Wilson', email: 'bob@example.com' },
  { id: 4, name: 'Alice Brown', email: 'alice@example.com' },
  { id: 5, name: 'Charlie Davis', email: 'charlie@example.com' },
  { id: 6, name: 'Diana Evans', email: 'diana@example.com' },
  { id: 7, name: 'Edward Fox', email: 'edward@example.com' },
  { id: 8, name: 'Fiona Green', email: 'fiona@example.com' },
]
</script>

<template>
  <div class="n-container-m n-stack n-gap-l n-align-center">
    <nord-card>
      <h2 slot="header">Custom Overflow Item</h2>
      <p class="n-color-text-weaker n-margin-be-m">
        The overflow popout can show different content than the inline items
        using the <code>overflowItem</code> slot.
      </p>

      <div class="n-stack n-gap-s">
        <UiOverflowList :items="users" item-key="id" :max-visible="3">
          <!-- Inline: just show name -->
          <template #item="{ item }">
            <span class="n-stack-horizontal n-gap-xs n-align-items-center">
              <nord-avatar size="s" :name="item.name" />
              <span>{{ item.name }}</span>
            </span>
          </template>

          <!-- Popout: show name and email -->
          <template #overflow-item="{ item }">
            <div class="n-stack-horizontal n-gap-s n-align-items-center">
              <nord-avatar size="s" :name="item.name" />
              <div class="n-stack n-gap-none">
                <span>{{ item.name }}</span>
                <span class="n-font-size-xs n-color-text-weaker">
                  {{ item.email }}
                </span>
              </div>
            </div>
          </template>
        </UiOverflowList>
      </div>
    </nord-card>
  </div>
</template>

<script setup lang="ts">
const users = [
  { id: 1, name: 'John Doe', role: 'Admin' },
  { id: 2, name: 'Jane Smith', role: 'Editor' },
  { id: 3, name: 'Bob Wilson', role: 'Viewer' },
  { id: 4, name: 'Alice Brown', role: 'Editor' },
  { id: 5, name: 'Charlie Davis', role: 'Viewer' },
  { id: 6, name: 'Diana Evans', role: 'Admin' },
  { id: 7, name: 'Edward Fox', role: 'Viewer' },
  { id: 8, name: 'Fiona Green', role: 'Editor' },
]
</script>

<template>
  <div class="n-container-m n-stack n-gap-l n-align-center">
    <nord-card>
      <h2 slot="header">Stacked Variant</h2>
      <p class="n-color-text-weaker n-margin-be-m">
        Use <code>variant="stack"</code> to display items vertically without
        separators.
      </p>

      <div class="n-stack n-gap-l">
        <div class="n-stack n-gap-s">
          <h3 class="n-font-size-m n-font-weight-heading">Inline (default)</h3>
          <UiOverflowList :items="users" item-key="id" :max-visible="3">
            <template #item="{ item }">
              <span>{{ item.name }}</span>
            </template>
          </UiOverflowList>
        </div>

        <div class="n-stack n-gap-s">
          <h3 class="n-font-size-m n-font-weight-heading">Stacked</h3>
          <UiOverflowList
            variant="stack"
            item-key="id"
            :items="users"
            :max-visible="3"
          >
            <template #item="{ item }">
              <div class="n-stack-horizontal n-gap-s n-align-items-center">
                <nord-avatar size="s" :name="item.name" />
                <div class="n-stack n-gap-none">
                  <span>{{ item.name }}</span>
                  <span class="n-font-size-xs n-color-text-weaker">
                    {{ item.role }}
                  </span>
                </div>
              </div>
            </template>
          </UiOverflowList>
        </div>
      </div>
    </nord-card>
  </div>
</template>