feat: add support for column tooltips

Author: francisashley

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-screener",
-  "version": "0.15.13",
+  "version": "0.15.14",
   "type": "module",
   "description": "Easily search and filter data in Vue3.",
   "author": "Francis Ashley",
@@ -30,6 +30,7 @@
     "lint": "eslint src --ext .ts,.vue"
   },
   "dependencies": {
+    "floating-vue": "^5.2.2",
     "vue": "^3.4.27"
   },
   "devDependencies": {

src/components/table/VueScreenerTableHeadCell.vue

@@ -13,10 +13,10 @@
       Boolean(column.isSortable && getSortDirection(column.field)) && props.sortingClass,
     ]"
     @click="handleClickColumnHeader(column)"
-    :title="text"
   >
     <SortIcon v-if="column.isSortable && getSortDirection(column.field)" :direction="getSortDirection(column.field)" />
     <slot>{{ text }}</slot>
+    <Icon v-if="column.info" icon="codicon:info" class="vsc-ml-auto vsc-min-w-3 vsc-min-h-3" v-tooltip="column.info" />
   </VueScreenerTableCell>
 </template>
 
@@ -26,6 +26,8 @@ import type { IVueScreener, Column } from '../../interfaces/vue-screener'
 import VueScreenerTableCell from '../table/VueScreenerTableCell.vue'
 import SortIcon from '../icons/SortIcon.vue'
 import { twMerge } from '../../utils/tailwind-merge.utils'
+import { Icon } from '@iconify/vue'
+import { vTooltip } from 'floating-vue'
 
 const props = defineProps<{
   screener: IVueScreener

src/interfaces/vue-screener.ts

@@ -68,6 +68,7 @@ export type Column = {
   isOverlayingColumns?: boolean // Flag indicating if this pinned column should show overlay shadow
   truncate?: boolean // Flag indicating if the content should be truncated with an ellipsis
   invertSort?: boolean // When true, reverses sort logic while maintaining arrow direction
+  info?: string // Display an info tooltip in the column header
   format?: <T>(value: T, row: Row) => string // Format the value of the field.
 }
 

src/stories/2-configure-columns/8-format-column.story.vue

@@ -1,5 +1,5 @@
 <template>
-  <Story title="9. Format column" source="-">
+  <Story title="8. Format column" source="-">
     <div class="vsc-p-4 vsc-bg-zinc-800">
       <VueScreener
         title="Results"

src/stories/2-configure-columns/9-column-tooltips.story.vue

@@ -0,0 +1,24 @@
+<template>
+  <Story title="9. Column tooltips" source="-">
+    <div class="vsc-p-4 vsc-bg-zinc-800">
+      <VueScreener
+        title="Results"
+        :data="baseData"
+        :columns="{
+          id: { info: 'The ID column' },
+          first_name: { info: 'The First Name column' },
+          last_name: { info: 'The Last Name column' },
+          full_name: { info: 'The Full Name column' },
+          email: { info: 'The Email column' },
+          gender: { info: 'The Gender column' },
+          ip_address: { info: 'The IP column' },
+        }"
+      />
+    </div>
+  </Story>
+</template>
+
+<script lang="ts" setup>
+import { VueScreener } from '../../index'
+import baseData from '../../fixtures/data.json'
+</script>

yarn.lock

@@ -378,6 +378,25 @@
   resolved "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@floating-ui/core@^1.1.0":
+  version "1.6.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.8.tgz#aa43561be075815879305965020f492cdb43da12"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@~1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.1.1.tgz#66aa747e15894910869bf9144fc54fc7d6e9f975"
+  integrity sha512-TpIO93+DIujg3g7SykEAGZMDtbJRrmnYRCNYSjJlvIbGhBjRSNTLVbNeDQBrzy9qDgUbiWdc7KA0uZHZ2tJmiw==
+  dependencies:
+    "@floating-ui/core" "^1.1.0"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.8.tgz#21a907684723bbbaa5f0974cf7730bd797eb8e62"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+
 "@histoire/app@^0.17.17":
   version "0.17.17"
   resolved "https://registry.npmjs.org/@histoire/app/-/app-0.17.17.tgz"
@@ -1931,6 +1950,14 @@ [email protected]:
   resolved "https://registry.npmjs.org/flexsearch/-/flexsearch-0.7.21.tgz"
   integrity sha512-W7cHV7Hrwjid6lWmy0IhsWDFQboWSng25U3VVywpHOTJnnAZNPScog67G+cVpeX9f7yDD21ih0WDrMMT+JoaYg==
 
+floating-vue@^5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/floating-vue/-/floating-vue-5.2.2.tgz#e263932042753f59f3e36e7c1188f3f3e272a539"
+  integrity sha512-afW+h2CFafo+7Y9Lvw/xsqjaQlKLdJV7h1fCHfcYQ1C4SVMlu7OAekqWgu5d4SgvkBVU0pVpLlVsrSTBURFRkg==
+  dependencies:
+    "@floating-ui/dom" "~1.1.1"
+    vue-resize "^2.0.0-alpha.1"
+
 foreground-child@^3.1.0:
   version "3.3.0"
   resolved "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz"
@@ -3659,6 +3686,11 @@ vue-eslint-parser@^9.4.2, vue-eslint-parser@^9.4.3:
     lodash "^4.17.21"
     semver "^7.3.6"
 
+vue-resize@^2.0.0-alpha.1:
+  version "2.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz#43eeb79e74febe932b9b20c5c57e0ebc14e2df3a"
+  integrity sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==
+
 vue-tsc@^2.0.29:
   version "2.0.29"
   resolved "https://registry.yarnpkg.com/vue-tsc/-/vue-tsc-2.0.29.tgz#bf7e9605af9fadec7fd6037d242217f5c6ad2c3b"