@nexxtmove/ui 1.36.0 → 1.37.0

package/dist/nuxt.js

@@ -83,6 +83,8 @@ var s = {
 	NexxtEditorGap: "components/editor/molecules/EditorGap/EditorGap.vue",
 	NexxtEditorHeadingType: "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
 	NexxtEditorJustifyContent: "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
+	NexxtEditorLetterSpacing: "components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue",
+	NexxtEditorLineHeight: "components/editor/molecules/EditorLineHeight/EditorLineHeight.vue",
 	NexxtEditorMaxWidth: "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
 	NexxtEditorPadding: "components/editor/molecules/EditorPadding/EditorPadding.vue",
 	NexxtEditorRadius: "components/editor/molecules/EditorRadius/EditorRadius.vue",

package/package.json

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

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

@@ -0,0 +1,163 @@
+<script lang="ts">
+/**
+ * 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 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.
+ */
+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 },
+] as const
+
+/**
+ * The letter spacing as the editor needs it: the Tailwind class itself, so the
+ * consumer can put the model value straight on the element it styles. The
+ * default step is `null` on the model, not a member of this type.
+ */
+export type EditorLetterSpacingValue = NonNullable<
+  (typeof EDITOR_LETTER_SPACING_STEPS)[number]['token']
+>
+
+/** Overridable copy of the value readout. Every key is optional. */
+export interface EditorLetterSpacingMessages {
+  /** Unit shown behind the value. Defaults to `'px'`. */
+  unit?: string
+  /** Decimal separator of the readout. Defaults to the Dutch `','`. */
+  decimalSeparator?: string
+}
+
+export interface NexxtEditorLetterSpacingProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch
+   * `'Letterafstand'`; the library has no i18n layer, so a consumer in another
+   * language passes its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the value readout. Merged per key, so overriding one key keeps the
+   * defaults of the others. Copy is never translated inside the component.
+   */
+  messages?: EditorLetterSpacingMessages
+}
+
+const DEFAULT_MESSAGES = {
+  unit: 'px',
+  decimalSeparator: ',',
+} satisfies Required<EditorLetterSpacingMessages>
+
+/** Index of the no-class step, the middle of the list. */
+const DEFAULT_INDEX = EDITOR_LETTER_SPACING_STEPS.findIndex(({ token }) => token === null)
+</script>
+
+<script lang="ts" setup>
+import { computed } 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 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 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.
+ */
+const model = defineModel<EditorLetterSpacingValue | null>({ default: null })
+
+const copy = computed(() => ({ ...DEFAULT_MESSAGES, ...messages }))
+
+const maxIndex = EDITOR_LETTER_SPACING_STEPS.length - 1
+
+/**
+ * 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.
+ */
+const stepIndex = computed(() => {
+  const index = EDITOR_LETTER_SPACING_STEPS.findIndex(({ token }) => token === model.value)
+
+  return index === -1 ? DEFAULT_INDEX : index
+})
+
+// The slider moves over the index, not over the px value, so its model is
+// translated both ways here.
+const sliderValue = computed({
+  get: () => [stepIndex.value],
+  set: ([index]) => {
+    model.value = EDITOR_LETTER_SPACING_STEPS[index].token
+  },
+})
+
+/** `-0,5 px`: a plain hyphen-minus for the sign, the decimal separator from the copy. */
+const displayValue = computed(() => {
+  const { px } = EDITOR_LETTER_SPACING_STEPS[stepIndex.value]
+
+  return `${String(px).replace('.', copy.value.decimalSeparator)} ${copy.value.unit}`
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <div class="flex items-center gap-4">
+      <!--
+        Slider's own `showValue` prints its model, which here is the step index
+        rather than the spacing, so the readout is rendered next to it instead.
+        The thumb has the same problem in `aria-valuenow`, which
+        `aria-valuetext` overrides with the string the readout shows. The block
+        label is a <p>, not a <label>, so the name goes on the thumb explicitly.
+        Slider binds `$attrs` on its root, so the pointerup listener lands there
+        and catches the release of the captured pointer.
+      -->
+      <NexxtSlider
+        v-model="sliderValue"
+        :min="0"
+        :max="maxIndex"
+        :step="1"
+        :aria-label="label"
+        :aria-valuetext="displayValue"
+        @pointerup="emit('pointerup', $event)"
+      />
+
+      <!--
+        `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
+        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
+        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"
+      >
+        {{ displayValue }}
+      </span>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

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

@@ -0,0 +1,161 @@
+<script lang="ts">
+/**
+ * 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 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 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_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 },
+] as const
+
+/**
+ * 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
+ * default step is `null` on the model, not a member of this type.
+ */
+export type EditorLineHeightValue = NonNullable<(typeof EDITOR_LINE_HEIGHT_STEPS)[number]['token']>
+
+/** Overridable copy of the value readout. Every key is optional. */
+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
+   * the Dutch `'Standaard'`.
+   */
+  default?: string
+}
+
+export interface NexxtEditorLineHeightProps {
+  /**
+   * Header text of the settings block. Defaults to the Dutch
+   * `'Regelafstand'`; the library has no i18n layer, so a consumer in another
+   * language passes its own copy in.
+   */
+  label?: string
+  /**
+   * Copy of the value readout. Merged per key, so overriding one key keeps the
+   * defaults of the others. Copy is never translated inside the component.
+   */
+  messages?: EditorLineHeightMessages
+}
+
+const DEFAULT_MESSAGES = {
+  unit: 'px',
+  default: 'Standaard',
+} satisfies Required<EditorLineHeightMessages>
+</script>
+
+<script lang="ts" setup>
+import { computed } 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 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 selected line height, as the Tailwind class to apply. `null` -- also
+ * what an unset model is -- is the default step: no class at all.
+ */
+const model = defineModel<EditorLineHeightValue | null>({ default: null })
+
+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
+// translated both ways here.
+const sliderValue = computed({
+  get: () => [stepIndex.value],
+  set: ([index]) => {
+    model.value = EDITOR_LINE_HEIGHT_STEPS[index].token
+  },
+})
+
+const displayValue = computed(() => {
+  const { px } = EDITOR_LINE_HEIGHT_STEPS[stepIndex.value]
+
+  return px === null ? copy.value.default : `${px} ${copy.value.unit}`
+})
+</script>
+
+<template>
+  <NexxtEditorSettingsBlock :label="label">
+    <div class="flex items-center gap-4">
+      <!--
+        Slider's own `showValue` prints its model, which here is the step index
+        rather than the line height, so the readout is rendered next to it
+        instead. The thumb has the same problem in `aria-valuenow`, which
+        `aria-valuetext` overrides with the string the readout shows. The block
+        label is a <p>, not a <label>, so the name goes on the thumb explicitly.
+        Slider binds `$attrs` on its root, so the pointerup listener lands there
+        and catches the release of the captured pointer.
+      -->
+      <NexxtSlider
+        v-model="sliderValue"
+        :min="0"
+        :max="maxIndex"
+        :step="1"
+        :aria-label="label"
+        :aria-valuetext="displayValue"
+        @pointerup="emit('pointerup', $event)"
+      />
+
+      <!--
+        `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.
+      -->
+      <span
+        class="min-w-16 shrink-0 text-right small-normal whitespace-nowrap text-gray-700 tabular-nums"
+      >
+        {{ displayValue }}
+      </span>
+    </div>
+  </NexxtEditorSettingsBlock>
+</template>

package/src/components.json

@@ -80,6 +80,8 @@
   "NexxtEditorGap": "components/editor/molecules/EditorGap/EditorGap.vue",
   "NexxtEditorHeadingType": "components/editor/molecules/EditorHeadingType/EditorHeadingType.vue",
   "NexxtEditorJustifyContent": "components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue",
+  "NexxtEditorLetterSpacing": "components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue",
+  "NexxtEditorLineHeight": "components/editor/molecules/EditorLineHeight/EditorLineHeight.vue",
   "NexxtEditorMaxWidth": "components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue",
   "NexxtEditorPadding": "components/editor/molecules/EditorPadding/EditorPadding.vue",
   "NexxtEditorRadius": "components/editor/molecules/EditorRadius/EditorRadius.vue",

package/src/env.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="vite/client" />
 
-declare module '*.svg' {
+// vite-svg-loader compiles a plain SVG import to a Vue component, but
+// vite/client above declares `*.svg` as a URL string, and of two identical
+// wildcard patterns the one loaded first wins. TypeScript picks the pattern
+// with the longest prefix, so the library's own `@ui-assets` SVGs get their
+// component type here regardless of load order.
+declare module '@ui-assets/*.svg' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<object, object, unknown>
   export default component

package/src/index.ts

@@ -83,6 +83,16 @@ export type {
   EditorMaxWidthMessages,
   EditorMaxWidthValue,
 } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
+export { EDITOR_LINE_HEIGHT_STEPS } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
+export type {
+  EditorLineHeightMessages,
+  EditorLineHeightValue,
+} from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
+export { EDITOR_LETTER_SPACING_STEPS } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue'
+export type {
+  EditorLetterSpacingMessages,
+  EditorLetterSpacingValue,
+} from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue'
 export type { EditorPaddingMessages } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export type {
   NexxtTemplateCardContentFeature,
@@ -115,6 +125,8 @@ export { default as NexxtEditorFlexDirection } from './components/editor/molecul
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue'
 export { default as NexxtEditorHeadingType } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue'
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue'
+export { default as NexxtEditorLetterSpacing } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue'
+export { default as NexxtEditorLineHeight } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue'
 export { default as NexxtEditorMaxWidth } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue'
 export { default as NexxtEditorPadding } from './components/editor/molecules/EditorPadding/EditorPadding.vue'
 export { default as NexxtEditorRadius } from './components/editor/molecules/EditorRadius/EditorRadius.vue'