@smart-overflow/vue

Vue composable adapter for @smart-overflow/core.

It does not render UI and does not include styles. It only measures DOM elements and calls the headless SmartOverflow core.

Installation

npm install @smart-overflow/core @smart-overflow/vue

Usage

<script setup lang="ts">
import { useSmartOverflow } from '@smart-overflow/vue';

const actions = [
  {
    id: 'edit',
    priority: 100,
    meta: {
      label: 'Edit',
    },
  },
  {
    id: 'delete',
    priority: 80,
    meta: {
      label: 'Delete',
    },
  },
  {
    id: 'export',
    priority: 40,
    meta: {
      label: 'Export',
    },
  },
];

const {
  containerRef,
  overflowRef,
  getItemRef,
  visibleItems,
  hiddenItems,
} = useSmartOverflow(actions, {
  gap: 8,
  strategy: 'priority',
});
</script>

<template>
  <div ref="containerRef" class="toolbar">
    <button
      v-for="item in visibleItems"
      :key="item.id"
      :ref="getItemRef(item.id)"
    >
      {{ item.meta?.label }}
    </button>

    <button
      v-if="hiddenItems.length"
      ref="overflowRef"
    >
      More
    </button>
  </div>
</template>

API

const {
  containerRef,
  overflowRef,
  getItemRef,
  result,
  visibleItems,
  hiddenItems,
  visibleIds,
  hiddenIds,
  recalculate,
} = useSmartOverflow(items, options);

The UI is fully controlled by your application.