Inline Overflow ListCommunity Asset

<script setup lang="ts">
const shortList = ['Apple', 'Banana', 'Orange']
const longList = [
  'Apple',
  'Banana',
  'Orange',
  'Grape',
  'Mango',
  'Pineapple',
  'Peach',
  'Plum',
  'Kiwi',
  'Strawberry',
  'Blueberry',
  '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>
          <InlineOverflowList class="n-font-size-s" :items="shortList" />
        </div>

        <div class="n-stack n-gap-s">
          <h3 class="n-font-size-m n-font-weight-heading">
            Long list (will overflow)
          </h3>
          <InlineOverflowList class="n-font-size-s" :items="longList" />
        </div>
      </div>
    </nord-card>
  </div>
</template>

<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' },
]
</script>

<template>
  <div class="n-container-m n-stack n-gap-l n-align-center">
    <nord-card>
      <h2 slot="header">
        Advanced Example – with custom item and custom divider
      </h2>

      <InlineOverflowList class="n-font-size-l" :items="users">
        <!-- Custom rendering for visible items -->
        <template #item="{ item }">
          <span
            class="user-item n-stack-horizontal n-gap-s n-stack-no-wrap n-items-center n-justify-center whitespace-nowrap"
          >
            <nord-avatar size="s" :name="item.name" />
            <span>{{ item.name }}</span>
          </span>
        </template>

        <!-- Custom rendering for overflow items -->
        <template #overflow-item="{ item }">
          <span class="user-item">
            <nord-avatar size="s" :name="item.name" />
            <span>{{ item.name }}</span>
            <span class="user-email">{{ item.email }}</span>
          </span>
        </template>

        <!-- Custom divider -->
        <template #divider>
          <nord-divider direction="vertical" class="n-margin-i-m" />
        </template>
      </InlineOverflowList>
    </nord-card>
  </div>
</template>

<style scoped>
.user-item {
  white-space: nowrap;
}

.user-email {
  color: var(--n-color-text-weaker);
  font-size: var(--n-font-size-s);
}

nord-divider {
  block-size: var(--n-size-icon-m);
}

:deep(.list-item-more-trigger) {
  --n-button-font-size: var(--n-font-size-l);
}
</style>

<script setup lang="ts">
const items = [
  'Red',
  'Blue',
  'Green',
  'Yellow',
  'Purple',
  'Orange',
  'Pink',
  'Brown',
  'Gray',
  'Black',
  'White',
]
</script>

<template>
  <div class="n-container-m n-stack n-gap-l n-align-center">
    <nord-card>
      <h2 slot="header">Custom Divider</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">
            Using bullet points
          </h3>
          <InlineOverflowList class="n-font-size-s" :items>
            <template #divider>
              <span class="n-margin-i-s">•</span>
            </template>
          </InlineOverflowList>
        </div>

        <div class="n-stack n-gap-s">
          <h3 class="n-font-size-m n-font-weight-heading">Using divider</h3>
          <InlineOverflowList class="n-font-size-s" :items>
            <template #divider>
              <nord-divider direction="vertical" class="n-margin-i-s" />
            </template>
          </InlineOverflowList>
        </div>

        <div class="n-stack n-gap-s">
          <h3 class="n-font-size-m n-font-weight-heading">Using arrows</h3>
          <InlineOverflowList class="n-font-size-s" :items>
            <template #divider>
              <span class="n-margin-i-s">→</span>
            </template>
          </InlineOverflowList>
        </div>
      </div>
    </nord-card>
  </div>
</template>

<style scoped>
nord-divider {
  block-size: var(--n-size-icon-m);
}
</style>

<script setup lang="ts">
const colors = [
  { name: 'Red', hex: '#FF0000' },
  { name: 'Blue', hex: '#0000FF' },
  { name: 'Green', hex: '#00FF00' },
  { name: 'Yellow', hex: '#FFFF00' },
  { name: 'Purple', hex: '#800080' },
  { name: 'Orange', hex: '#FFA500' },
  { name: 'Pink', hex: '#FFC0CB' },
  { name: 'Brown', hex: '#A52A2A' },
  { name: 'Gray', hex: '#808080' },
  { name: 'Black', hex: '#000000' },
  { 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">
        <InlineOverflowList class="n-font-size-s" :items="colors">
          <template #item="{ item }">
            <span class="n-stack-horizontal n-gap-xs">
              <span
                class="color-swatch"
                :style="{ backgroundColor: item.hex }"
              />
              <span>{{ item.name }}</span>
            </span>
          </template>
        </InlineOverflowList>
      </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 emptyList: string[] = []
</script>

<template>
  <div class="n-container-m n-stack n-gap-l n-align-center">
    <nord-card>
      <h2 slot="header">Empty State</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">
            Default empty state
          </h3>
          <InlineOverflowList class="n-font-size-s" :items="emptyList" />
        </div>

        <div class="n-stack n-gap-s">
          <h3 class="n-font-size-m n-font-weight-heading">
            Custom empty state text
          </h3>
          <InlineOverflowList
            class="n-font-size-s"
            :items="emptyList"
            empty-text="No items available"
          />
        </div>
      </div>
    </nord-card>
  </div>
</template>