@nexxtmove/ui 1.47.0 → 1.48.0

package/src/components/organisms/IconPicker/_IconPickerGrid.vue

@@ -0,0 +1,282 @@
+<script lang="ts">
+import type { NexxtIconPickerIcon } from './IconPicker.vue'
+import type { GridPosition, GridRow } from './useIconPickerCatalogue'
+
+interface IconPickerGridProps {
+  /** Every row of the list on show; only those in view (and the overscan) are rendered. */
+  rows: GridRow[]
+  /** Skeleton cells instead of the rows: the catalogue is on its way. */
+  skeleton?: boolean
+  /** Id of the grid element, for the search field's `aria-controls`. */
+  gridId: string
+  /** Id of the active tab that names the grid. */
+  labelledby: string
+  /** A cell's id is this prefix, its row and its column. */
+  cellIdPrefix: string
+  /** Id of the hidden "Huidige keuze", the description of the selected cell. */
+  currentDescriptionId: string
+  /** The highlighted cell; drawn while the grid has focus. */
+  highlight: GridPosition | null
+  /** Whether the grid has focus. */
+  focused: boolean
+  /** The one selected cell: the first place of the current icon. */
+  selected: GridPosition | null
+  /** The classes that draw an icon's glyph in the style a choice would write. */
+  glyphClass: (icon: NexxtIconPickerIcon) => string[]
+}
+
+/** The cell size until the grid has been measured: what the 576px panel gives. */
+const FALLBACK_CELL = 51
+const CELL_GAP = 12
+const HEADING_HEIGHT = 32
+/** The grid's `p-2`. */
+const GRID_PADDING = 8
+const OVERSCAN = 3
+
+/**
+ * The selected glyph is cornflower-blue-600 on -100: 3.6:1, past the 3:1 a meaningful graphic
+ * needs. A highlight on a selected cell sits on its ring, so its outline moves in by the ring's
+ * width.
+ */
+const CELL_CLASSES = {
+  base: 'flex aspect-square w-full cursor-pointer items-center justify-center rounded-lg text-2xl transition-colors duration-100 ease-out motion-reduce:transition-none',
+  idle: 'text-gray-800 hover:bg-gray-100',
+  selected:
+    'bg-cornflower-blue-100 text-cornflower-blue-600 ring-2 ring-cornflower-blue-500 ring-inset',
+  highlighted: 'outline-2 -outline-offset-2 outline-cornflower-blue-500',
+  highlightedSelected: 'outline-2 -outline-offset-4 outline-cornflower-blue-500',
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useResizeObserver, useVirtualList } from '@vueuse/core'
+import NexxtSkeleton from '../../atoms/Skeleton/Skeleton.vue'
+import { COLUMNS } from './useIconPickerCatalogue'
+import type { IconPickerGridHandle } from './useIconPickerNavigation'
+
+defineOptions({ name: 'NexxtIconPickerGrid' })
+
+const {
+  rows,
+  skeleton = false,
+  gridId,
+  labelledby,
+  cellIdPrefix,
+  currentDescriptionId,
+  highlight,
+  focused,
+  selected,
+  glyphClass,
+} = defineProps<IconPickerGridProps>()
+
+const emit = defineEmits<{
+  /** The grid took focus. */
+  focus: []
+  /** The grid lost focus. */
+  blur: []
+  /** A key on the grid; the navigation decides. */
+  keydown: [event: KeyboardEvent]
+  /** The pointer is on a cell: it becomes the highlight. */
+  hover: [position: GridPosition]
+  /** A click on a cell. */
+  choose: [icon: NexxtIconPickerIcon]
+}>()
+
+const SKELETON_CELLS = 6 * COLUMNS
+
+/** The grid's content width, without padding and scrollbar; 0 until measured. */
+const gridWidth = ref(0)
+
+/**
+ * The cells share the grid's width and stay square, so a row is one cell plus the gap: about
+ * 51 + 12px in the 576px panel. The width is measured, as a scrollbar or a narrow viewport takes
+ * from it.
+ */
+const cellSize = computed(() =>
+  gridWidth.value > 0 ? (gridWidth.value - (COLUMNS - 1) * CELL_GAP) / COLUMNS : FALLBACK_CELL,
+)
+
+/** A row of cells: one cell plus the gap under it. */
+const iconRowHeight = computed(() => cellSize.value + CELL_GAP)
+
+// Exactly the height the virtual list counts with, so its offsets never drift from the layout
+const iconRowStyle = computed(() => ({ height: `${iconRowHeight.value}px` }))
+
+const rowHeight = (index: number) =>
+  rows[index]?.kind === 'heading' ? HEADING_HEIGHT : iconRowHeight.value
+
+/** Where each row starts in the grid's content, without the padding. */
+const rowTops = computed(() => {
+  let top = 0
+  return rows.map((_, index) => {
+    const start = top
+    top += rowHeight(index)
+    return start
+  })
+})
+
+// Per row, not per cell: six cells a row, so the DOM holds about fourteen rows whatever the catalogue
+const {
+  list: renderedRows,
+  containerProps,
+  wrapperProps,
+} = useVirtualList(
+  computed(() => rows),
+  { itemHeight: rowHeight, overscan: OVERSCAN },
+)
+
+// The cells follow the measured width, and with them the row height the list is laid out with
+useResizeObserver(containerProps.ref, ([entry]) => {
+  gridWidth.value = entry?.contentRect.width ?? 0
+})
+
+const cellId = (row: number, col: number) => `${cellIdPrefix}-${row}-${col}`
+
+const isHighlightedIcon = (position: GridPosition | null) => {
+  const row = position ? rows[position.row] : undefined
+  return !!position && row?.kind === 'icons' && !!row.icons[position.col]
+}
+
+/** Only a cell that is rendered: `reveal` puts the highlighted one there first. */
+const activeDescendant = computed(() => {
+  if (!focused || !highlight || !isHighlightedIcon(highlight)) return undefined
+  const { row, col } = highlight
+  return renderedRows.value.some(({ index }) => index === row) ? cellId(row, col) : undefined
+})
+
+/**
+ * One selected cell, the first place the current icon appears: in the pinned section when there
+ * is one. Its second place in "all icons" is a plain cell, or a screen reader hears two selections.
+ */
+const isSelected = (row: number, col: number) => selected?.row === row && selected.col === col
+
+const isHighlighted = (row: number, col: number) =>
+  focused && highlight?.row === row && highlight.col === col
+
+const cellClass = (row: number, col: number) => {
+  const isSelectedCell = isSelected(row, col)
+  const highlighted = isHighlighted(row, col)
+  return [
+    CELL_CLASSES.base,
+    isSelectedCell ? CELL_CLASSES.selected : CELL_CLASSES.idle,
+    highlighted && (isSelectedCell ? CELL_CLASSES.highlightedSelected : CELL_CLASSES.highlighted),
+  ]
+}
+
+const inView = (row: number) => {
+  const grid = containerProps.ref.value
+  const top = rowTops.value[row]
+  if (!grid || top === undefined) return false
+  return (
+    GRID_PADDING + top >= grid.scrollTop &&
+    GRID_PADDING + top + iconRowHeight.value <= grid.scrollTop + grid.clientHeight
+  )
+}
+
+/**
+ * Scrolls the least needed to show a row, its section heading along when it is the first row under
+ * one, and renders the rows there at once: `aria-activedescendant` may only point at a cell that
+ * exists.
+ */
+const reveal = (row: number) => {
+  const grid = containerProps.ref.value
+  const top = rowTops.value[rows[row - 1]?.kind === 'heading' ? row - 1 : row]
+  const bottom = (rowTops.value[row] ?? 0) + iconRowHeight.value + GRID_PADDING
+  if (!grid || top === undefined) return
+  if (top < grid.scrollTop) grid.scrollTop = top
+  else if (bottom > grid.scrollTop + grid.clientHeight) {
+    grid.scrollTop = bottom - grid.clientHeight + GRID_PADDING
+  }
+  containerProps.onScroll()
+}
+
+// The rows that fit in view, less one, so a page step keeps one row of context
+const pageRows = () =>
+  Math.max(1, Math.floor((containerProps.ref.value?.clientHeight ?? 0) / iconRowHeight.value) - 1)
+
+const scrollToTop = () => {
+  const grid = containerProps.ref.value
+  if (grid) grid.scrollTop = 0
+}
+
+const focus = () => containerProps.ref.value?.focus()
+
+defineExpose<IconPickerGridHandle>({ focus, reveal, inView, pageRows, scrollToTop })
+</script>
+
+<template>
+  <div
+    v-if="skeleton"
+    :id="gridId"
+    role="grid"
+    aria-busy="true"
+    :aria-labelledby="labelledby"
+    class="min-h-0 flex-1 overflow-hidden p-2"
+  >
+    <div class="grid grid-cols-6 gap-3" aria-hidden="true">
+      <NexxtSkeleton
+        v-for="index in SKELETON_CELLS"
+        :key="index"
+        class="aspect-square w-full rounded-lg"
+      />
+    </div>
+  </div>
+
+  <!--
+    The grid is the scroll container and the focus: the highlight is an active descendant, so
+    focus never moves onto a cell that scrolling could unmount.
+  -->
+  <div
+    v-else
+    :id="gridId"
+    v-bind="containerProps"
+    role="grid"
+    tabindex="0"
+    :aria-labelledby="labelledby"
+    :aria-rowcount="rows.length"
+    :aria-colcount="COLUMNS"
+    :aria-activedescendant="activeDescendant"
+    class="min-h-0 flex-1 p-2 focus:outline-none"
+    @focus="emit('focus')"
+    @blur="emit('blur')"
+    @keydown="emit('keydown', $event)"
+  >
+    <div v-bind="wrapperProps">
+      <template v-for="{ data: row, index: rowIndex } in renderedRows" :key="row.key">
+        <div
+          v-if="row.kind === 'heading'"
+          role="row"
+          :aria-rowindex="rowIndex + 1"
+          class="flex h-8 items-end px-1 pt-2 pb-1 extra-small-semibold text-gray-700"
+        >
+          <span role="rowheader" :aria-colspan="COLUMNS">{{ row.label }}</span>
+        </div>
+
+        <div
+          v-else
+          role="row"
+          :aria-rowindex="rowIndex + 1"
+          class="grid grid-cols-6 content-start gap-x-3"
+          :style="iconRowStyle"
+        >
+          <div
+            v-for="(icon, col) in row.icons"
+            :id="cellId(rowIndex, col)"
+            :key="icon.name"
+            role="gridcell"
+            :aria-colindex="col + 1"
+            :aria-label="icon.label"
+            :aria-selected="isSelected(rowIndex, col) ? 'true' : undefined"
+            :aria-describedby="isSelected(rowIndex, col) ? currentDescriptionId : undefined"
+            :class="cellClass(rowIndex, col)"
+            @mouseenter="emit('hover', { row: rowIndex, col })"
+            @click="emit('choose', icon)"
+          >
+            <i :class="glyphClass(icon)" aria-hidden="true" />
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

package/src/components/organisms/IconPicker/_IconPickerRail.vue

@@ -0,0 +1,112 @@
+<script lang="ts">
+import type { RailTab } from './useIconPickerCatalogue'
+
+interface IconPickerRailProps {
+  /** "Alle iconen" first, then the categories that hold an icon, sorted. */
+  tabs: RailTab[]
+  /** Index of the selected tab in `tabs`: the one tab stop. */
+  activeIndex: number
+  /** Accessible name of the tablist. */
+  label: string
+  /** Id of the tab panel every tab controls. */
+  panelId: string
+  /** The id of the tab at an index; the tab panel and the grid are labelled by the active one. */
+  tabId: (index: number) => string
+  /** Skeleton bars after the tabs: the categories are on their way. */
+  loading?: boolean
+}
+
+const RAIL_SKELETONS = [72, 56, 80, 64, 48, 76, 60, 68].map((width) => ({ width: `${width}%` }))
+
+const RAIL_KEYS: Record<string, (index: number, count: number) => number> = {
+  ArrowDown: (index, count) => Math.min(index + 1, count - 1),
+  ArrowUp: (index) => Math.max(index - 1, 0),
+  Home: () => 0,
+  End: (_, count) => count - 1,
+}
+
+// No `focus:outline-none` next to the focus-visible outline: in Tailwind v4 it sets
+// `--tw-outline-style: none`, which `focus-visible:outline-2` picks up (see EditorSettingsGroup)
+const TAB_CLASSES = {
+  base: 'flex h-8 w-full min-w-0 shrink-0 cursor-pointer items-center rounded-md px-3 text-left focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cornflower-blue-500',
+  idle: 'small-normal text-gray-800 hover:bg-gray-50',
+  active: 'small-semibold bg-gray-100 text-gray-950',
+}
+</script>
+
+<script lang="ts" setup>
+import { useTemplateRef } from 'vue'
+import NexxtSkeleton from '../../atoms/Skeleton/Skeleton.vue'
+
+defineOptions({ name: 'NexxtIconPickerRail' })
+
+const {
+  tabs,
+  activeIndex,
+  label,
+  panelId,
+  tabId,
+  loading = false,
+} = defineProps<IconPickerRailProps>()
+
+const emit = defineEmits<{
+  /** A tab was chosen, by a click or the arrow keys; `null` is "all icons". */
+  select: [id: string | null]
+}>()
+
+const rail = useTemplateRef<HTMLElement>('rail')
+
+const tabClass = (index: number) => [
+  TAB_CLASSES.base,
+  index === activeIndex ? TAB_CLASSES.active : TAB_CLASSES.idle,
+]
+
+// Tabs with automatic activation: moving focus is choosing
+const onKeydown = (event: KeyboardEvent) => {
+  const move = RAIL_KEYS[event.key]
+  if (!move) return
+  event.preventDefault()
+  const index = move(activeIndex, tabs.length)
+  emit('select', tabs[index]?.id ?? null)
+  rail.value?.querySelector<HTMLElement>(`[id="${tabId(index)}"]`)?.focus()
+}
+</script>
+
+<template>
+  <!-- One tab stop; the arrow keys move and choose at once -->
+  <div
+    ref="rail"
+    role="tablist"
+    aria-orientation="vertical"
+    :aria-label="label"
+    class="flex w-48 shrink-0 flex-col gap-0.5 overflow-y-auto border-r border-gray-200 p-2"
+    @keydown="onKeydown"
+  >
+    <button
+      v-for="(tab, index) in tabs"
+      :id="tabId(index)"
+      :key="tab.id ?? ''"
+      type="button"
+      role="tab"
+      :aria-selected="index === activeIndex"
+      :aria-controls="panelId"
+      :tabindex="index === activeIndex ? 0 : -1"
+      :class="tabClass(index)"
+      :title="tab.label"
+      @click="emit('select', tab.id)"
+    >
+      <span class="truncate">{{ tab.label }}</span>
+    </button>
+
+    <template v-if="loading">
+      <div
+        v-for="(style, index) in RAIL_SKELETONS"
+        :key="index"
+        class="flex h-8 shrink-0 items-center px-3"
+        aria-hidden="true"
+      >
+        <NexxtSkeleton class="h-3" :style="style" />
+      </div>
+    </template>
+  </div>
+</template>

package/src/components/organisms/IconPicker/iconPickerHelpers.ts

@@ -0,0 +1,111 @@
+import type { NexxtIconPickerIcon } from './IconPicker.vue'
+
+/**
+ * The pure parts of `NexxtIconPicker`: the label of an icon outside the catalogue, the sort, the
+ * search and the style an icon is drawn in. Generic like the picker itself: no icon set, no class
+ * names.
+ */
+
+/** The locale rail and grid sort in unless the consumer gives another. */
+export const DEFAULT_SORT_LOCALE = 'nl'
+
+/** An icon in the search index: its words prepared once, not per keystroke. */
+export interface NexxtIconPickerSearchEntry {
+  icon: NexxtIconPickerIcon
+  /** The label, lower case. */
+  label: string
+  /** Name, label and terms in one lower-case string, for the substring match. */
+  haystack: string
+  /** The words of the name and the label, for "a word starts with". */
+  words: string[]
+}
+
+/**
+ * `house-chimney` → `House chimney`. What an icon is called while the catalogue that holds its
+ * label is not in yet, and the label a catalogue can derive for every icon whose label is just its
+ * name.
+ */
+export const iconLabelFromName = (name: string) => {
+  const words = name.replaceAll('-', ' ')
+
+  return words.charAt(0).toUpperCase() + words.slice(1)
+}
+
+// One collator per sort: `localeCompare` with a locale builds one per comparison, which a sort of
+// a few thousand icons notices
+const byLabel = (locale: string) => {
+  const { compare } = new Intl.Collator(locale)
+
+  return (a: NexxtIconPickerIcon, b: NexxtIconPickerIcon) => compare(a.label, b.label)
+}
+
+/** A sorted copy, alphabetical on label in `locale`. */
+export const sortIconsByLabel = (
+  icons: readonly NexxtIconPickerIcon[],
+  locale: string = DEFAULT_SORT_LOCALE,
+) => [...icons].sort(byLabel(locale))
+
+/** Sorted by label, so the stable sort of a search keeps every rank in alphabetical order. */
+export const iconSearchIndex = (
+  icons: readonly NexxtIconPickerIcon[],
+  locale: string = DEFAULT_SORT_LOCALE,
+): NexxtIconPickerSearchEntry[] =>
+  sortIconsByLabel(icons, locale).map((icon) => {
+    const label = icon.label.toLowerCase()
+
+    return {
+      icon,
+      label,
+      haystack: `${icon.name} ${label} ${icon.terms.join(' ')}`.toLowerCase(),
+      words: [...icon.name.split('-'), ...label.split(/\s+/)],
+    }
+  })
+
+/**
+ * 0: the name or label is the search; 1: it starts with it; 2: every word of the search starts a
+ * word of the name or label; 3: the rest, a match on the search terms or inside a word.
+ */
+const searchRank = (entry: NexxtIconPickerSearchEntry, words: string[]) => {
+  const asName = words.join('-')
+  const asLabel = words.join(' ')
+
+  if (entry.icon.name === asName || entry.label === asLabel) return 0
+  if (entry.icon.name.startsWith(asName) || entry.label.startsWith(asLabel)) return 1
+  if (words.every((word) => entry.words.some((own) => own.startsWith(word)))) return 2
+
+  return 3
+}
+
+/**
+ * Every word of the search has to occur in the name, the label or the terms (AND, any case); the
+ * results come in the order of `searchRank`, alphabetical within a rank. An empty search finds
+ * nothing.
+ */
+export const searchIcons = (
+  index: readonly NexxtIconPickerSearchEntry[],
+  search: string,
+): NexxtIconPickerIcon[] => {
+  const words = search.toLowerCase().split(/\s+/).filter(Boolean)
+
+  if (words.length === 0) return []
+
+  return index
+    .filter((entry) => words.every((word) => entry.haystack.includes(word)))
+    .map((entry) => ({ icon: entry.icon, rank: searchRank(entry, words) }))
+    .sort((a, b) => a.rank - b.rank)
+    .map(({ icon }) => icon)
+}
+
+/**
+ * The style an icon is drawn and chosen in: the given one when the icon has it, otherwise the
+ * first of `order` it has. `null` only for an icon that has none of the styles in `order`.
+ */
+export const iconStyleFor = (
+  styles: readonly string[],
+  preferred: string | undefined,
+  order: readonly string[],
+) => {
+  if (preferred && styles.includes(preferred)) return preferred
+
+  return order.find((style) => styles.includes(style)) ?? null
+}