@nexxtmove/ui 1.40.1 → 1.42.0

package/dist/nuxt.js

@@ -62,6 +62,7 @@ var s = {
 	NexxtCountrySelect: "components/organisms/CountrySelect/CountrySelect.vue",
 	NexxtDatePicker: "components/organisms/DatePicker/DatePicker.vue",
 	NexxtDropdownButton: "components/organisms/DropdownButton/DropdownButton.vue",
+	NexxtFontPicker: "components/organisms/FontPicker/FontPicker.vue",
 	NexxtHeader: "components/organisms/Header/Header.vue",
 	NexxtModal: "components/organisms/Modal/Modal.vue",
 	NexxtPickerPanel: "components/organisms/PickerPanel/PickerPanel.vue",
@@ -80,6 +81,7 @@ var s = {
 	NexxtEditorBorder: "components/editor/molecules/EditorBorder/EditorBorder.vue",
 	NexxtEditorColor: "components/editor/molecules/EditorColor/EditorColor.vue",
 	NexxtEditorFlexDirection: "components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue",
+	NexxtEditorFontSize: "components/editor/molecules/EditorFontSize/EditorFontSize.vue",
 	NexxtEditorGap: "components/editor/molecules/EditorGap/EditorGap.vue",
 	NexxtEditorHeadingType: "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
 	NexxtEditorJustifyContent: "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "1.40.1",
+  "version": "1.42.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/atoms/Skeleton/Skeleton.vue

@@ -3,5 +3,5 @@ defineOptions({ name: 'NexxtSkeleton' })
 </script>
 
 <template>
-  <div class="animate-pulse rounded-sm bg-gray-200" />
+  <div class="animate-pulse rounded-sm bg-gray-200 motion-reduce:animate-none" />
 </template>

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

@@ -0,0 +1,253 @@
+<script lang="ts">
+/**
+ * The steps the slider can land on, as the font-size class they are stored as and the pixels that
+ * class is: every `--text-*` size of the theme, `text-xs` to `text-9xl`, with the px taken from
+ * `tailwind/nexxtmove.tailwind.theme.css` at 16px a rem. The size is absolute: a step replaces
+ * the size the text had.
+ *
+ * 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.
+ */
+export const EDITOR_FONT_SIZE_STEPS = [
+  { token: 'text-xs', px: 12 },
+  { token: 'text-sm', px: 14 },
+  { token: 'text-base', px: 16 },
+  { token: 'text-lg', px: 18 },
+  { token: 'text-xl', px: 20 },
+  { token: 'text-2xl', px: 24 },
+  { token: 'text-3xl', px: 30 },
+  { token: 'text-4xl', px: 36 },
+  { token: 'text-5xl', px: 48 },
+  { token: 'text-6xl', px: 60 },
+  { token: 'text-7xl', px: 72 },
+  { token: 'text-8xl', px: 96 },
+  { token: 'text-9xl', px: 128 },
+] as const
+
+/**
+ * The font size as the editor needs it: the Tailwind class itself, so the consumer can put the
+ * model value straight on the element it styles. "No size of its own" is `null` on the model, not
+ * a member of this type.
+ */
+export type EditorFontSizeValue = (typeof EDITOR_FONT_SIZE_STEPS)[number]['token']
+
+/** Overridable copy of the readout and the reset button. Every key is optional. */
+export interface EditorFontSizeMessages {
+  /** Unit behind the pixel size. Defaults to `'px'`. */
+  unit?: string
+  /** Accessible name and tooltip of the reset button. Defaults to the Dutch `'Terug naar standaard'`. */
+  reset?: string
+}
+
+export interface NexxtEditorFontSizeProps {
+  /**
+   * The size the text has without a class of its own; the slider sits on its step while the
+   * model is `null`. Defaults to `text-sm`, the app's text base. Pass a token from
+   * `EDITOR_FONT_SIZE_STEPS`: one that is not on the list falls back to `text-sm`, and a
+   * development build warns once per value. The fallback is for existing or faulty data, not a
+   * feature to rely on.
+   */
+  defaultToken?: EditorFontSizeValue
+  /**
+   * Header text of the settings block. Defaults to the Dutch `'Grootte'`; the library has no i18n
+   * layer, so a consumer in another language passes its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the readout and the reset button. Merged per key, so overriding one key keeps the
+   * defaults of the others. Copy is never translated inside the component.
+   */
+  messages?: EditorFontSizeMessages
+}
+
+const DEFAULT_TOKEN = 'text-sm' satisfies EditorFontSizeValue
+
+// A no-break space between number and unit, so a readout never wraps inside a value
+const NBSP = '\u00a0'
+
+const DEFAULT_MESSAGES = {
+  unit: 'px',
+  reset: 'Terug naar standaard',
+} satisfies Required<EditorFontSizeMessages>
+</script>
+
+<script lang="ts" setup>
+import { computed, useTemplateRef, watch } from 'vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import NexxtIcon from '../../../atoms/Icon/Icon.vue'
+import NexxtSlider from '../../../atoms/Slider/Slider.vue'
+import NexxtTooltip from '../../../atoms/Tooltip/Tooltip.vue'
+
+defineOptions({ name: 'NexxtEditorFontSize' })
+
+const {
+  defaultToken = DEFAULT_TOKEN,
+  label = 'Grootte',
+  messages,
+} = defineProps<NexxtEditorFontSizeProps>()
+
+const emit = defineEmits<{
+  /**
+   * The slider was let go: the end of one drag, which a consumer can use to close an undo step.
+   * Arrow keys emit no pointerup.
+   */
+  pointerup: [event: PointerEvent]
+  /**
+   * The reset button was used, after the model was set to `null`. A consumer closes an undo step
+   * here, so a reset never merges into the drag before it.
+   */
+  reset: []
+}>()
+
+/**
+ * The chosen size, as the Tailwind class to apply. `null` -- also what an unset model is -- is no
+ * class of its own: the element keeps `defaultToken`. Moving the slider always writes a token,
+ * the default step included; only the reset button writes `null`.
+ *
+ * The app should only write tokens from `EDITOR_FONT_SIZE_STEPS`. A value that is not on the list
+ * (existing or faulty data, `text-[15px]` say) is shown on the default step, keeps the reset
+ * button visible so the user can get back to a clean `null`, and makes a development build warn
+ * once per value. It is never rewritten until the user picks a step.
+ */
+const model = defineModel<EditorFontSizeValue | null>({ default: null })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const root = useTemplateRef<HTMLElement>('root')
+
+const maxIndex = EDITOR_FONT_SIZE_STEPS.length - 1
+
+const indexOf = (token: string | null | undefined) =>
+  EDITOR_FONT_SIZE_STEPS.findIndex((step) => step.token === token)
+
+/** Step of the default size; an unknown `defaultToken` falls back to `text-sm`. */
+const defaultIndex = computed(() => {
+  const index = indexOf(defaultToken)
+  return index === -1 ? indexOf(DEFAULT_TOKEN) : index
+})
+
+/**
+ * Position of the current value on the step list. `null`, and a value that is not on the list (a
+ * size outside the theme, or one that no longer exists), sit on the default step instead of
+ * leaving the thumb off the track; the first change writes a valid class back.
+ */
+const stepIndex = computed(() => {
+  const index = indexOf(model.value)
+  return index === -1 ? defaultIndex.value : index
+})
+
+// The same guard as NexxtFontPicker: `process.env.NODE_ENV` stays in the library build, so the
+// consumer's bundler decides; `import.meta.env.DEV` would be fixed when the library is built.
+// Once per value per instance: a re-render does not repeat it, a new instance starts afresh.
+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(`[NexxtEditorFontSize] ${message}`)
+  }
+
+  watch(
+    () => defaultToken,
+    (token) => {
+      if (indexOf(token) === -1) {
+        warnOnce(
+          `default:${token}`,
+          `defaultToken "${token}" is not in EDITOR_FONT_SIZE_STEPS; falling back to ${DEFAULT_TOKEN}.`,
+        )
+      }
+    },
+    { immediate: true },
+  )
+
+  watch(
+    model,
+    (value) => {
+      if (value !== null && indexOf(value) === -1) {
+        warnOnce(
+          `model:${value}`,
+          `"${value}" is not in EDITOR_FONT_SIZE_STEPS; showing the default step until a step is picked.`,
+        )
+      }
+    },
+    { immediate: true },
+  )
+}
+
+// The slider moves over the index, not over the px value, so its model is translated both ways.
+// Every step writes its token, the default one too: `null` is the reset button's alone.
+const sliderValue = computed({
+  get: () => [stepIndex.value],
+  set: ([index]) => {
+    model.value = EDITOR_FONT_SIZE_STEPS[index].token
+  },
+})
+
+const displayValue = computed(
+  () => `${EDITOR_FONT_SIZE_STEPS[stepIndex.value].px}${NBSP}${copy.value.unit}`,
+)
+
+// The button turns invisible under the focus it has, which would drop focus on <body>, so it is
+// handed to the thumb: the control the user is most likely to reach for next.
+const onReset = () => {
+  model.value = null
+  emit('reset')
+  root.value?.querySelector<HTMLElement>('[role="slider"]')?.focus()
+}
+
+const RESET_CLASSES = {
+  base: 'flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-gray-700 hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cornflower-blue-500',
+  hidden: 'invisible',
+}
+
+// Only `null` hides it: an explicit token on the default step is still a value of its own
+const resetClass = computed(() => [
+  RESET_CLASSES.base,
+  model.value === null && RESET_CLASSES.hidden,
+])
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <div ref="root" class="flex items-center gap-4">
+      <!--
+        Same set-up as NexxtEditorLineHeight: the slider walks the step index, so the readout is
+        rendered next to it and the thumb announces the readout through `aria-valuetext` instead
+        of the index. The block label is a <p>, so the name goes on the thumb explicitly.
+      -->
+      <NexxtSlider
+        v-model="sliderValue"
+        :min="0"
+        :max="maxIndex"
+        :step="1"
+        :aria-label="label"
+        :aria-valuetext="displayValue"
+        @pointerup="emit('pointerup', $event)"
+      />
+
+      <!--
+        `min-w-14` (56px) fits the widest readout, "128 px" (45px in Chromium with tabular
+        digits), with room to spare for wider digits in another font or browser, so the slider
+        keeps its width over the whole list; the ReadoutWidth story measures it.
+      -->
+      <span
+        class="min-w-14 shrink-0 text-right small-normal whitespace-nowrap text-gray-700 tabular-nums"
+      >
+        {{ displayValue }}
+      </span>
+
+      <!--
+        Always rendered and only `invisible` without a value of its own: it keeps its 28px, so the
+        slider never jumps, and an invisible button is out of the tab order.
+      -->
+      <NexxtTooltip>
+        <button type="button" :aria-label="copy.reset" :class="resetClass" @click="onReset">
+          <NexxtIcon name="arrow-rotate-left" aria-hidden="true" />
+        </button>
+        <template #tooltip>
+          <span class="extra-small-normal text-gray-900">{{ copy.reset }}</span>
+        </template>
+      </NexxtTooltip>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -1,29 +1,32 @@
 <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. Not a scale Tailwind has names for -- `tracking-wide`
- * is an em and moves with the font size, and the editor shows every size in
- * px -- so every step is an arbitrary-value class.
+ * The steps the slider can land on, as the class they are stored as and the em that class is.
+ * In em, so the spacing moves with the font size: a fixed 2px does nothing at 128px. Not a scale
+ * Tailwind has names for (`tracking-wide` is 0.025em, but there is no -0.01em), so every step is
+ * an arbitrary-value class.
  *
  * The middle step is no class at all: zero is what the text already does, and
  * storing nothing for it keeps the "no class means default" every other
  * setting has. The negative side is there on purpose: tightening a large
  * heading is a real need.
  *
- * 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_LETTER_SPACING_STEPS = [
-  { token: 'tracking-[-1px]', px: -1 },
-  { token: 'tracking-[-0.5px]', px: -0.5 },
-  { token: 'tracking-[-0.25px]', px: -0.25 },
-  { token: null, px: 0 },
-  { token: 'tracking-[0.25px]', px: 0.25 },
-  { token: 'tracking-[0.5px]', px: 0.5 },
-  { token: 'tracking-[1px]', px: 1 },
-  { token: 'tracking-[1.5px]', px: 1.5 },
-  { token: 'tracking-[2px]', px: 2 },
+  { token: 'tracking-[-0.05em]', em: -0.05 },
+  { token: 'tracking-[-0.025em]', em: -0.025 },
+  { token: 'tracking-[-0.01em]', em: -0.01 },
+  { token: null, em: 0 },
+  { token: 'tracking-[0.01em]', em: 0.01 },
+  { token: 'tracking-[0.025em]', em: 0.025 },
+  { token: 'tracking-[0.05em]', em: 0.05 },
+  { token: 'tracking-[0.075em]', em: 0.075 },
+  { token: 'tracking-[0.1em]', em: 0.1 },
 ] as const
 
 /**
@@ -44,6 +47,13 @@ export interface EditorLetterSpacingMessages {
 }
 
 export interface NexxtEditorLetterSpacingProps {
+  /**
+   * 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 em 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
    * `'Letterafstand'`; the library has no i18n layer, so a consumer in another
@@ -57,6 +67,15 @@ export interface NexxtEditorLetterSpacingProps {
   messages?: EditorLetterSpacingMessages
 }
 
+const DEFAULT_FONT_SIZE = 'text-sm' satisfies EditorFontSizeValue
+
+/**
+ * Rounds to one decimal, half away from zero. The product is snapped to 6 decimals first, so a
+ * float such as 0.075 * 18 = 1.3499999… rounds as the 1.35 it is, to 1.4.
+ */
+const roundTenths = (value: number) =>
+  (Math.sign(value) * Math.round(Number((Math.abs(value) * 10).toFixed(6)))) / 10
+
 const DEFAULT_MESSAGES = {
   unit: 'px',
   decimalSeparator: ',',
@@ -67,13 +86,17 @@ const DEFAULT_INDEX = EDITOR_LETTER_SPACING_STEPS.findIndex(({ token }) => token
 </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: 'NexxtEditorLetterSpacing' })
 
-const { label = 'Letterafstand', messages } = defineProps<NexxtEditorLetterSpacingProps>()
+const {
+  fontSize = DEFAULT_FONT_SIZE,
+  label = 'Letterafstand',
+  messages,
+} = defineProps<NexxtEditorLetterSpacingProps>()
 
 const emit = defineEmits<{
   /**
@@ -86,6 +109,10 @@ const emit = defineEmits<{
 /**
  * The selected letter spacing, as the Tailwind class to apply. `null` -- also
  * what an unset model is -- is the default step: no class at all, zero.
+ *
+ * A value that is not on the list (an old px class such as `tracking-[1px]`, 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<EditorLetterSpacingValue | null>({ default: null })
 
@@ -93,20 +120,63 @@ const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
 
 const maxIndex = EDITOR_LETTER_SPACING_STEPS.length - 1
 
+const indexOf = (token: string | null | undefined) =>
+  EDITOR_LETTER_SPACING_STEPS.findIndex((step) => step.token === token)
+
+const fontSizeStep = (token: string) => EDITOR_FONT_SIZE_STEPS.find((step) => step.token === token)
+
+/** The size in px the readout is based on; an unknown `fontSize` falls back to `text-sm`. */
+const basePx = computed(() => (fontSizeStep(fontSize) ?? fontSizeStep(DEFAULT_FONT_SIZE)!).px)
+
 /**
  * Position of the current value on the step list. A value that is not on the
- * list -- a stored `tracking-wide`, say -- falls back to the default step
- * rather than the first one: the first step here is the tightest spacing, and
- * an unknown value is no reason to show text as squeezed. The first change
- * writes a valid class back.
+ * list falls back to the default step rather than the first one: the first step here is the
+ * tightest spacing, and an unknown value is no reason to show text as squeezed.
  */
 const stepIndex = computed(() => {
-  const index = EDITOR_LETTER_SPACING_STEPS.findIndex(({ token }) => token === model.value)
+  const index = indexOf(model.value)
 
   return index === -1 ? DEFAULT_INDEX : index
 })
 
-// The slider moves over the index, not over the px value, so its model is
+// 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(`[NexxtEditorLetterSpacing] ${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_LETTER_SPACING_STEPS; showing the default step until a step is picked.`,
+        )
+      }
+    },
+    { immediate: true },
+  )
+}
+
+// The slider moves over the index, not over the em value, so its model is
 // translated both ways here.
 const sliderValue = computed({
   get: () => [stepIndex.value],
@@ -115,11 +185,15 @@ const sliderValue = computed({
   },
 })
 
-/** `-0,5 px`: a plain hyphen-minus for the sign, the decimal separator from the copy. */
+/**
+ * The spacing in px at the current size, to one decimal: `-0,7 px` for -0.05em at 14px. A plain
+ * hyphen-minus for the sign, the decimal separator from the copy; `+ 0` turns a -0 into 0.
+ */
 const displayValue = computed(() => {
-  const { px } = EDITOR_LETTER_SPACING_STEPS[stepIndex.value]
+  const { em } = EDITOR_LETTER_SPACING_STEPS[stepIndex.value]
+  const px = String(roundTenths(em * basePx.value) + 0)
 
-  return `${String(px).replace('.', copy.value.decimalSeparator)} ${copy.value.unit}`
+  return `${px.replace('.', copy.value.decimalSeparator)} ${copy.value.unit}`
 })
 </script>
 
@@ -147,7 +221,7 @@ const displayValue = computed(() => {
 
       <!--
         `min-w-16` rather than the `min-w-12` of the other editor sliders:
-        `-0,25 px` does not fit in 12. That plus `shrink-0` fixes the width of
+        `-6,4 px` and `12,8 px`, the ends at text-9xl, do not fit in 12. That plus `shrink-0` fixes the width of
         the box, so the slider keeps its size while dragging; `tabular-nums`
         only stops the digits from jittering inside it.
         gray-700, not the gray-500 Slider uses for its own readout: axe puts