@nexxtmove/ui 1.40.0 → 1.41.0

package/src/components/editor/molecules/EditorLineHeight/EditorLineHeight.vue

@@ -1,34 +1,55 @@
 <script lang="ts">
+import { EDITOR_FONT_SIZE_STEPS } from '../EditorFontSize/EditorFontSize.vue'
+import type { EditorFontSizeValue } from '../EditorFontSize/EditorFontSize.vue'
+
 /**
- * The steps the slider can land on, as the class they are stored as and the
- * pixels that class is. The `leading-*` classes are Tailwind's spacing scale
- * (calc of `--spacing`, 4px a step), so `leading-6` really is 24px -- and a
- * line height set here does not scale with the font size; that is the deal the
- * fixed steps make, and nothing here tries to compensate for it.
+ * The steps the slider can land on, as the class they are stored as and the factor of the font
+ * size that class is. Every class is a unitless arbitrary value (`leading-[1.5]`), so the line
+ * height scales with the text: at 128px a fixed `leading-9` (36px) would make the lines overlap.
  *
- * The first step is no class at all: the element keeps its own line height.
- * It has no px of its own, so the readout names it instead of measuring it.
+ * The first step is no class at all: the element keeps the line height of its `text-*` token,
+ * see `EDITOR_TEXT_LINE_HEIGHT_RATIOS`. Its `factor` is `null` because it depends on that token.
  *
- * The consumer stores these classes and lists them in an `@source inline` rule,
- * so adding or renaming a token is a breaking change even though the component
- * API stays the same.
+ * The consumer stores these classes and lists them in an `@source inline` rule (and the back end
+ * allows exactly these), so adding or renaming a token is a breaking change even though the
+ * component API stays the same.
  */
 export const EDITOR_LINE_HEIGHT_STEPS = [
-  { token: null, px: null },
-  { token: 'leading-3', px: 12 },
-  { token: 'leading-4', px: 16 },
-  { token: 'leading-5', px: 20 },
-  { token: 'leading-6', px: 24 },
-  { token: 'leading-7', px: 28 },
-  { token: 'leading-8', px: 32 },
-  { token: 'leading-9', px: 36 },
-  { token: 'leading-10', px: 40 },
-  { token: 'leading-11', px: 44 },
-  { token: 'leading-12', px: 48 },
-  { token: 'leading-14', px: 56 },
-  { token: 'leading-16', px: 64 },
+  { token: null, factor: null },
+  { token: 'leading-[1]', factor: 1 },
+  { token: 'leading-[1.1]', factor: 1.1 },
+  { token: 'leading-[1.2]', factor: 1.2 },
+  { token: 'leading-[1.3]', factor: 1.3 },
+  { token: 'leading-[1.4]', factor: 1.4 },
+  { token: 'leading-[1.5]', factor: 1.5 },
+  { token: 'leading-[1.6]', factor: 1.6 },
+  { token: 'leading-[1.75]', factor: 1.75 },
+  { token: 'leading-[2]', factor: 2 },
 ] as const
 
+/**
+ * The line height each `text-*` token carries by itself, as a factor of its size: Tailwind v4's
+ * default `--text-*--line-height`, written as the same fractions. The theme of this library sets
+ * the sizes but not these, so the defaults are what renders. This is what the first step of
+ * `EDITOR_LINE_HEIGHT_STEPS`, no class, looks like; exported so a consumer that needs the
+ * default line height in px does not keep a copy of its own.
+ */
+export const EDITOR_TEXT_LINE_HEIGHT_RATIOS: Readonly<Record<EditorFontSizeValue, number>> = {
+  'text-xs': 1 / 0.75,
+  'text-sm': 1.25 / 0.875,
+  'text-base': 1.5,
+  'text-lg': 1.75 / 1.125,
+  'text-xl': 1.75 / 1.25,
+  'text-2xl': 2 / 1.5,
+  'text-3xl': 2.25 / 1.875,
+  'text-4xl': 2.5 / 2.25,
+  'text-5xl': 1,
+  'text-6xl': 1,
+  'text-7xl': 1,
+  'text-8xl': 1,
+  'text-9xl': 1,
+}
+
 /**
  * The line height as the editor needs it: the Tailwind class itself, so the
  * consumer can put the model value straight on the element it styles. The
@@ -41,13 +62,20 @@ export interface EditorLineHeightMessages {
   /** Unit shown behind the value. Defaults to `'px'`. */
   unit?: string
   /**
-   * Readout of the first step, no class, which has no px size. Defaults to
+   * Name of the first step, no class, shown before its px as `Standaard · 20 px`. Defaults to
    * the Dutch `'Standaard'`.
    */
   default?: string
 }
 
 export interface NexxtEditorLineHeightProps {
+  /**
+   * The `text-*` token the text renders at on the screen on show (for a heading, the token of
+   * its heading type): the base the readout turns the factor into px with. Defaults to
+   * `text-sm`, the app's text base. A token that is not in `EDITOR_FONT_SIZE_STEPS` falls back
+   * to `text-sm`, and a development build warns once per value.
+   */
+  fontSize?: EditorFontSizeValue
   /**
    * Header text of the settings block. Defaults to the Dutch
    * `'Regelafstand'`; the library has no i18n layer, so a consumer in another
@@ -61,6 +89,14 @@ export interface NexxtEditorLineHeightProps {
   messages?: EditorLineHeightMessages
 }
 
+const DEFAULT_FONT_SIZE = 'text-sm' satisfies EditorFontSizeValue
+
+/**
+ * Rounds to whole px, half up. The product is snapped to 6 decimals first, so a float a hair under
+ * a half (or over a whole px) rounds as the decimal it stands for.
+ */
+const roundPx = (value: number) => Math.round(Number(value.toFixed(6)))
+
 const DEFAULT_MESSAGES = {
   unit: 'px',
   default: 'Standaard',
@@ -68,13 +104,17 @@ const DEFAULT_MESSAGES = {
 </script>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, watch } from 'vue'
 import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
 import NexxtSlider from '../../../atoms/Slider/Slider.vue'
 
 defineOptions({ name: 'NexxtEditorLineHeight' })
 
-const { label = 'Regelafstand', messages } = defineProps<NexxtEditorLineHeightProps>()
+const {
+  fontSize = DEFAULT_FONT_SIZE,
+  label = 'Regelafstand',
+  messages,
+} = defineProps<NexxtEditorLineHeightProps>()
 
 const emit = defineEmits<{
   /**
@@ -87,6 +127,10 @@ const emit = defineEmits<{
 /**
  * The selected line height, as the Tailwind class to apply. `null` -- also
  * what an unset model is -- is the default step: no class at all.
+ *
+ * A value that is not on the list (an old px class such as `leading-6`, say) is shown on the
+ * default step and makes a development build warn once per value; the first change writes a
+ * valid class back.
  */
 const model = defineModel<EditorLineHeightValue | null>({ default: null })
 
@@ -94,20 +138,55 @@ const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 
 const maxIndex = EDITOR_LINE_HEIGHT_STEPS.length - 1
 
-/**
- * Position of the current value on the step list. A value that is not on the
- * list -- a stored `leading-13`, say -- falls back to the first step, the
- * default, instead of leaving the thumb off the track; the first change writes
- * a valid class back.
- */
-const stepIndex = computed(() =>
-  Math.max(
-    0,
-    EDITOR_LINE_HEIGHT_STEPS.findIndex(({ token }) => token === model.value),
-  ),
-)
-
-// The slider moves over the index, not over the px value, so its model is
+const indexOf = (token: string | null | undefined) =>
+  EDITOR_LINE_HEIGHT_STEPS.findIndex((step) => step.token === token)
+
+const fontSizeStep = (token: string) => EDITOR_FONT_SIZE_STEPS.find((step) => step.token === token)
+
+/** The size the readout is based on; an unknown `fontSize` falls back to `text-sm`. */
+const baseSize = computed(() => fontSizeStep(fontSize) ?? fontSizeStep(DEFAULT_FONT_SIZE)!)
+
+/** Position of the current value on the step list; off the list is the default step. */
+const stepIndex = computed(() => Math.max(0, indexOf(model.value)))
+
+// The same guard as NexxtEditorFontSize: `process.env.NODE_ENV` stays in the library build, so
+// the consumer's bundler decides. Once per value per instance.
+if (process.env.NODE_ENV !== 'production') {
+  const warned = new Set<string>()
+  const warnOnce = (key: string, message: string) => {
+    if (warned.has(key)) return
+    warned.add(key)
+    console.warn(`[NexxtEditorLineHeight] ${message}`)
+  }
+
+  watch(
+    () => fontSize,
+    (token) => {
+      if (!fontSizeStep(token)) {
+        warnOnce(
+          `fontSize:${token}`,
+          `fontSize "${token}" is not in EDITOR_FONT_SIZE_STEPS; falling back to ${DEFAULT_FONT_SIZE}.`,
+        )
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    model,
+    (value) => {
+      if (value !== null && indexOf(value) === -1) {
+        warnOnce(
+          `model:${value}`,
+          `"${value}" is not in EDITOR_LINE_HEIGHT_STEPS; showing the default step until a step is picked.`,
+        )
+      }
+    },
+    { immediate: true },
+  )
+}
+
+// The slider moves over the index, not over the factor, so its model is
 // translated both ways here.
 const sliderValue = computed({
   get: () => [stepIndex.value],
@@ -116,10 +195,16 @@ const sliderValue = computed({
   },
 })
 
+/**
+ * The line height in whole px at the current size. The default step shows the token's own line
+ * height, named: `Standaard · 20 px`.
+ */
 const displayValue = computed(() => {
-  const { px } = EDITOR_LINE_HEIGHT_STEPS[stepIndex.value]
+  const { factor } = EDITOR_LINE_HEIGHT_STEPS[stepIndex.value]
+  const { token, px: size } = baseSize.value
+  const px = `${roundPx((factor ?? EDITOR_TEXT_LINE_HEIGHT_RATIOS[token]) * size)} ${copy.value.unit}`
 
-  return px === null ? copy.value.default : `${px} ${copy.value.unit}`
+  return factor === null ? `${copy.value.default} · ${px}` : px
 })
 </script>
 
@@ -146,13 +231,14 @@ const displayValue = computed(() => {
       />
 
       <!--
-        `min-w-16` so `Standaard` fits and the slider keeps its size moving off
-        the default step; `tabular-nums` stops the digits from jittering.
-        gray-700, not the gray-500 Slider uses for its own readout: axe puts
-        gray-500 on white at 1.84:1, well under the 4.5:1 it needs at this size.
+        `min-w-36` (144px) fits the widest readout, `Standaard · 128 px` (127px in Chromium),
+        so the slider keeps its size moving between steps; the ReadoutWidth story measures it.
+        `tabular-nums` stops the digits from jittering. gray-700, not the gray-500 Slider uses
+        for its own readout: axe puts gray-500 on white at 1.84:1, well under the 4.5:1 it needs
+        at this size.
       -->
       <span
-        class="min-w-16 shrink-0 text-right small-normal whitespace-nowrap text-gray-700 tabular-nums"
+        class="min-w-36 shrink-0 text-right small-normal whitespace-nowrap text-gray-700 tabular-nums"
       >
         {{ displayValue }}
       </span>

package/src/components/molecules/PickerList/PickerList.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, ref, useId, useTemplateRef, watch } from 'vue'
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  useId,
+  useSlots,
+  useTemplateRef,
+  watch,
+} from 'vue'
 import { usePreferredReducedMotion } from '@vueuse/core'
 import NexxtButton from '../../atoms/Button/Button.vue'
 import NexxtIcon, { type NexxtIconName } from '../../atoms/Icon/Icon.vue'
@@ -11,8 +20,8 @@ export interface NexxtPickerItemData {
   id: string
   /** Visible label and accessible name of the option; searched and matched by type-ahead. */
   label: string
-  /** Icon in front of the label, also passed to the `preview` slot. */
-  icon: NexxtIconName
+  /** Icon in front of the label, also passed to the `preview` slot. Without it the row has no icon. */
+  icon?: NexxtIconName
   /** Id of a group in `groups`. Missing, or not in `groups`: ungrouped, rendered at the top. */
   group?: string
   /** Extra search terms (synonyms, old names). Matched, never shown. */
@@ -57,6 +66,12 @@ interface NexxtPickerListProps {
    * `(n) => \`${n} resultaten\``. Without it the region stays empty.
    */
   resultsAnnouncement?: (count: number) => string
+  /**
+   * More items are on their way. Sets `aria-busy` on the listbox and holds back the empty state,
+   * so a search that finds nothing yet does not claim there is nothing. Pair it with placeholder
+   * rows in the `append` slot.
+   */
+  busy?: boolean
 }
 
 interface Section {
@@ -74,6 +89,7 @@ const props = withDefaults(defineProps<NexxtPickerListProps>(), {
   groups: () => [],
   search: '',
   collapsible: true,
+  busy: false,
 })
 
 /**
@@ -101,8 +117,15 @@ defineSlots<{
   item?(props: { item: NexxtPickerItemData; highlighted: boolean }): unknown
   /** Replaces the content of the empty state. */
   empty?(props: { search: string; clear: () => void }): unknown
+  /**
+   * Inside the listbox, after the last group: placeholder rows while `busy`, say. Not an option and
+   * never reached by the keyboard, so mark it `aria-hidden`.
+   */
+  append?(): unknown
 }>()
 
+const slots = useSlots()
+
 const PAGE_SIZE = 8
 const TYPEAHEAD_RESET_MS = 800
 const ANNOUNCE_DELAY_MS = 500
@@ -168,7 +191,7 @@ const visibleItems = computed(() => [
 
 /** Anything rendered inside the listbox, closed group headings included. */
 const hasContent = computed(() => ungrouped.value.length > 0 || sections.value.length > 0)
-const showEmpty = computed(() => searching.value && visibleItems.value.length === 0)
+const showEmpty = computed(() => searching.value && visibleItems.value.length === 0 && !props.busy)
 
 // ─── Highlight ────────────────────────────────────────────────────────────────
 
@@ -509,17 +532,31 @@ const clear = () => emit('clear')
 const announcement = ref('')
 let announceTimer: ReturnType<typeof setTimeout> | undefined
 
-// Only after the search changed, debounced, so intermediate states while typing stay silent
+/** A search change that has not been announced yet. */
+let announcePending = false
+
+// Only after the search changed, debounced, so intermediate states while typing stay silent. While
+// `busy` the count is not final, so the announcement waits and follows once `busy` ends; a list
+// that is never busy announces exactly as before.
+const scheduleAnnouncement = () => {
+  clearTimeout(announceTimer)
+  if (!announcePending || props.busy) return
+  announceTimer = setTimeout(() => {
+    announcePending = false
+    announcement.value = props.resultsAnnouncement?.(visibleItems.value.length) ?? ''
+  }, ANNOUNCE_DELAY_MS)
+}
+
 watch(
   () => props.search,
   () => {
-    clearTimeout(announceTimer)
-    announceTimer = setTimeout(() => {
-      announcement.value = props.resultsAnnouncement?.(visibleItems.value.length) ?? ''
-    }, ANNOUNCE_DELAY_MS)
+    announcePending = true
+    scheduleAnnouncement()
   },
 )
 
+watch(() => props.busy, scheduleAnnouncement)
+
 onBeforeUnmount(() => {
   clearTimeout(announceTimer)
   clearTimeout(typeaheadTimer)
@@ -548,7 +585,7 @@ const EMPTY_CLASSES = {
 
 const listboxClass = computed(() => [
   LISTBOX_CLASSES.base,
-  hasContent.value && LISTBOX_CLASSES.filled,
+  (hasContent.value || !!slots.append) && LISTBOX_CLASSES.filled,
 ])
 
 defineExpose({
@@ -575,6 +612,7 @@ defineExpose({
       :tabindex="hasContent ? 0 : -1"
       :aria-label="ariaLabel"
       :aria-activedescendant="activeDescendantId"
+      :aria-busy="busy ? 'true' : undefined"
       :class="listboxClass"
       @keydown="onKeydown"
       @focus="scrollToItem(effectiveId)"
@@ -616,6 +654,8 @@ defineExpose({
           </template>
         </NexxtPickerItem>
       </NexxtPickerGroup>
+
+      <slot name="append" />
     </div>
 
     <Transition