@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/editor/molecules/EditorSize/EditorSize.test.ts

@@ -0,0 +1,253 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, ref } from 'vue'
+import EditorSize from './EditorSize.vue'
+import type { EditorSizeValue } from './EditorSize.vue'
+
+// ToggleGroup awaits document.fonts.ready on mount, which jsdom does not ship.
+beforeEach(() => {
+  Object.defineProperty(document, 'fonts', {
+    value: { ready: Promise.resolve() },
+    configurable: true,
+  })
+})
+
+let wrapper: VueWrapper
+
+const mountSize = (
+  modelValue: EditorSizeValue,
+  props: Record<string, unknown> = {},
+  // Focus only lands on an element that is in the document.
+  attachTo?: HTMLElement,
+) => {
+  wrapper = mount(EditorSize, {
+    attachTo,
+    props: {
+      modelValue,
+      'onUpdate:modelValue': (value: EditorSizeValue) => wrapper.setProps({ modelValue: value }),
+      ...props,
+    },
+  })
+  return wrapper
+}
+
+const option = (text: string) => wrapper.findAll('button').find((button) => button.text() === text)!
+
+const fixedRow = () => wrapper.get('[data-testid="editor-size-fixed-row"]')
+
+const focusedInput = () => document.activeElement === wrapper.get('input').element
+
+afterEach(() => wrapper?.unmount())
+
+/**
+ * Mounts behind a consumer that applies each write itself, the way a debounced
+ * or store-backed model does: after `delay` ms, or never when `delay` is null.
+ */
+const mountBehindConsumer = (modelValue: EditorSizeValue, delay: number | null) => {
+  const model = ref(modelValue)
+  const Consumer = defineComponent(
+    () => () =>
+      h(EditorSize, {
+        modelValue: model.value,
+        'onUpdate:modelValue': (value: EditorSizeValue) => {
+          if (delay !== null) setTimeout(() => (model.value = value), delay)
+        },
+      }),
+  )
+  wrapper = mount(Consumer, { attachTo: document.body })
+  return model
+}
+
+const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const writes = () => wrapper.emitted('update:modelValue')?.map(([value]) => value) ?? []
+
+describe('EditorSize', () => {
+  // The mode options sit in a ToggleGroup toolbar; its name is the block label.
+  it('names the mode toolbar with the block label', () => {
+    mountSize({ mode: 'auto' }, { label: 'Breedte' })
+
+    expect(wrapper.get('[role="toolbar"]').attributes('aria-label')).toBe('Breedte')
+  })
+
+  it('renders the Dutch defaults', () => {
+    mountSize({ mode: 'auto' })
+
+    expect(wrapper.find('p').text()).toBe('Formaat')
+    expect(wrapper.findAll('button').map((button) => button.text())).toEqual([
+      'Automatisch',
+      'Vullen',
+      'Vast',
+    ])
+  })
+
+  it('names each option after the label, so a width and a height block differ', () => {
+    mountSize({ mode: 'auto' }, { label: 'Breedte' })
+
+    expect(wrapper.findAll('button').map((button) => button.attributes('aria-label'))).toEqual([
+      'Breedte automatisch',
+      'Breedte vullen',
+      'Breedte vast',
+    ])
+  })
+
+  it('takes the accessible names from messages when given, per key', () => {
+    mountSize(
+      { mode: 'auto' },
+      { label: 'Breite', messages: { fixed: 'Fest', fixedAriaLabel: 'Feste Breite' } },
+    )
+
+    expect(wrapper.findAll('button').map((button) => button.attributes('aria-label'))).toEqual([
+      'Breite automatisch',
+      'Breite vullen',
+      'Feste Breite',
+    ])
+  })
+
+  it('offers only the modes passed, in the library order', () => {
+    mountSize({ mode: 'auto' }, { modes: ['fixed', 'auto'] })
+
+    expect(wrapper.findAll('button').map((button) => button.text())).toEqual([
+      'Automatisch',
+      'Vast',
+    ])
+  })
+
+  it('keeps the field out of reach unless the mode is fixed', () => {
+    mountSize({ mode: 'fill' })
+
+    expect(fixedRow().attributes('inert')).toBeDefined()
+  })
+
+  it('shows the fixed dimension, named after the label', () => {
+    mountSize({ mode: 'fixed', fixed: { value: 320, unit: 'px' } }, { label: 'Breedte' })
+
+    expect(fixedRow().attributes('inert')).toBeUndefined()
+    expect((wrapper.get('input').element as HTMLInputElement).value).toBe('320')
+    expect(wrapper.get('input').attributes('aria-label')).toBe('Breedte (px)')
+  })
+
+  it('writes a picked mode and keeps the fixed dimension for later', async () => {
+    mountSize({ mode: 'fixed', fixed: { value: 320, unit: 'px' } })
+
+    await option('Vullen').trigger('click')
+    await option('Vast').trigger('click')
+
+    expect(writes()).toEqual([
+      { mode: 'fill', fixed: { value: 320, unit: 'px' } },
+      { mode: 'fixed', fixed: { value: 320, unit: 'px' } },
+    ])
+    expect(wrapper.emitted('commit')).toHaveLength(2)
+  })
+
+  it('writes nothing for the mode that is already picked', async () => {
+    mountSize({ mode: 'auto' })
+
+    await option('Automatisch').trigger('click')
+
+    expect(writes()).toEqual([])
+    expect(wrapper.emitted('commit')).toBeUndefined()
+  })
+
+  describe('focus', () => {
+    it('moves into the field when fixed is picked, with a kept value selected', async () => {
+      mountSize({ mode: 'auto', fixed: { value: 320, unit: 'px' } }, {}, document.body)
+      // jsdom keeps no selection range on a number input, so the call is checked.
+      const select = vi.spyOn(wrapper.get('input').element as HTMLInputElement, 'select')
+
+      await option('Vast').trigger('click')
+      await flushPromises()
+
+      expect(focusedInput()).toBe(true)
+      expect((wrapper.get('input').element as HTMLInputElement).value).toBe('320')
+      expect(select).toHaveBeenCalled()
+    })
+
+    it('stays where it is when mounted in fixed', async () => {
+      mountSize({ mode: 'fixed', fixed: { value: 320, unit: 'px' } }, {}, document.body)
+      await flushPromises()
+
+      expect(focusedInput()).toBe(false)
+    })
+
+    it('stays where it is when the model turns fixed from outside', async () => {
+      mountSize({ mode: 'auto' }, {}, document.body)
+
+      await wrapper.setProps({ modelValue: { mode: 'fixed' } })
+      await flushPromises()
+
+      expect(focusedInput()).toBe(false)
+    })
+
+    it('waits for a consumer that applies the pick later', async () => {
+      mountBehindConsumer({ mode: 'auto', fixed: { value: 320, unit: 'px' } }, 20)
+
+      await option('Vast').trigger('click')
+      await flushPromises()
+      expect(focusedInput()).toBe(false)
+
+      await wait(30)
+      await flushPromises()
+      expect(focusedInput()).toBe(true)
+    })
+
+    it('drops a pick the consumer never applied once the user moves on', async () => {
+      const model = mountBehindConsumer({ mode: 'auto' }, null)
+
+      await option('Vast').trigger('click')
+      document.body.dispatchEvent(new Event('pointerdown', { bubbles: true }))
+
+      model.value = { mode: 'fixed' }
+      await flushPromises()
+      expect(focusedInput()).toBe(false)
+    })
+
+    it('drops a pick the consumer never applied at the next mode change', async () => {
+      const model = mountBehindConsumer({ mode: 'auto' }, null)
+
+      await option('Vast').trigger('click')
+      model.value = { mode: 'fill' }
+      await flushPromises()
+
+      model.value = { mode: 'fixed' }
+      await flushPromises()
+      expect(focusedInput()).toBe(false)
+    })
+
+    it('stays where it is for another mode', async () => {
+      mountSize({ mode: 'auto' }, {}, document.body)
+
+      await option('Vullen').trigger('click')
+      await flushPromises()
+
+      expect(focusedInput()).toBe(false)
+    })
+  })
+
+  it('writes a typed fixed value and passes its commit on', async () => {
+    mountSize({ mode: 'fixed' })
+
+    await wrapper.get('input').setValue('2000')
+    await wrapper.get('input').trigger('blur')
+    await flushPromises()
+
+    expect(writes()).toEqual([{ mode: 'fixed', fixed: { value: 1600, unit: 'px' } }])
+    expect(wrapper.emitted('commit')).toHaveLength(1)
+  })
+
+  it('passes the units, limits and messages through to the field', async () => {
+    mountSize(
+      { mode: 'fixed', fixed: { value: 80, unit: '%' } },
+      { units: ['px', '%'], max: { '%': 50 }, messages: { unit: 'Unit', fixed: 'Fixed' } },
+    )
+
+    expect(option('Fixed')).toBeDefined()
+    expect(wrapper.get('select').attributes('aria-label')).toBe('Unit')
+
+    await wrapper.get('input').setValue('80')
+    await wrapper.get('input').trigger('blur')
+    await flushPromises()
+
+    expect(writes()).toEqual([{ mode: 'fixed', fixed: { value: 50, unit: '%' } }])
+  })
+})

package/src/components/editor/molecules/EditorSizeLimit/EditorSizeLimit.stories.ts

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import EditorSizeLimit from './EditorSizeLimit.vue'
+import NexxtEditorSettingsBlock from '../../atoms/EditorSettingsBlock/EditorSettingsBlock.vue'
+import type { EditorDimensionValue } from '../../atoms/EditorDimensionField/EditorDimensionField.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Size Limit',
+  component: EditorSizeLimit,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  args: { label: 'Maximale breedte' },
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorSizeLimit>
+
+type Story = StoryObj<typeof EditorSizeLimit>
+
+/** No limit: the field is empty and shows the placeholder. */
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorSizeLimit },
+    setup() {
+      const limit = ref<EditorDimensionValue | null>(null)
+      return { args, limit }
+    },
+    template: `<EditorSizeLimit v-bind="args" v-model="limit" />`,
+  }),
+}
+
+/** The two limits side by side inside the block of the sizes they limit, as an editor places them. */
+export const SideBySide: Story = {
+  render: () => ({
+    components: { EditorSizeLimit, NexxtEditorSettingsBlock },
+    setup() {
+      const maxWidth = ref<EditorDimensionValue | null>({ value: 960, unit: 'px' })
+      const minHeight = ref<EditorDimensionValue | null>(null)
+      return { maxWidth, minHeight }
+    },
+    template: `
+      <NexxtEditorSettingsBlock label="Formaat">
+        <div class="grid grid-cols-2 gap-2">
+          <EditorSizeLimit v-model="maxWidth" label="Maximale breedte" :units="['px', '%']" />
+          <EditorSizeLimit v-model="minHeight" label="Minimale hoogte" />
+        </div>
+      </NexxtEditorSettingsBlock>
+    `,
+  }),
+}

package/src/components/editor/molecules/EditorSizeLimit/EditorSizeLimit.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import EditorSizeLimit from './EditorSizeLimit.vue'
+
+describe('EditorSizeLimit', () => {
+  it('shows its label above the field and names the field with it', () => {
+    const wrapper = mount(EditorSizeLimit, { props: { label: 'Maximale breedte' } })
+
+    expect(wrapper.get('label > span').text()).toBe('Maximale breedte')
+    expect(wrapper.get('input').attributes('aria-label')).toBe('Maximale breedte (px)')
+  })
+
+  it('is empty with the placeholder while there is no limit', () => {
+    const wrapper = mount(EditorSizeLimit, {
+      props: { label: 'Maximale breedte', modelValue: null },
+    })
+
+    expect((wrapper.get('input').element as HTMLInputElement).value).toBe('')
+    expect(wrapper.get('input').attributes('placeholder')).toBe('Geen')
+  })
+
+  it('removes the limit when the field is emptied', async () => {
+    const wrapper = mount(EditorSizeLimit, {
+      props: { label: 'Minimale hoogte', modelValue: { value: 400, unit: 'px' } },
+    })
+
+    await wrapper.get('input').setValue('')
+    await wrapper.get('input').trigger('blur')
+    await flushPromises()
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([[null]])
+    expect(wrapper.emitted('commit')).toHaveLength(1)
+  })
+
+  it('passes units and messages through to the field', () => {
+    const wrapper = mount(EditorSizeLimit, {
+      props: { label: 'Max width', units: ['px', '%'], messages: { placeholder: 'None' } },
+    })
+
+    expect(wrapper.get('input').attributes('placeholder')).toBe('None')
+    expect(wrapper.find('select').exists()).toBe(true)
+  })
+})

package/src/components/editor/molecules/EditorTextAlign/EditorTextAlign.stories.ts

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import EditorTextAlign from './EditorTextAlign.vue'
+import type { EditorTextAlignValue } from './EditorTextAlign.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Text Align',
+  component: EditorTextAlign,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorTextAlign>
+
+type Story = StoryObj<typeof EditorTextAlign>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorTextAlign },
+    setup() {
+      const align = ref<EditorTextAlignValue>('text-left')
+      return { args, align }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorTextAlign v-bind="args" v-model="align" />
+        <p class="small-normal text-gray-700">{{ align }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Text alignment',
+    messages: { left: 'Left', center: 'Center', right: 'Right', justify: 'Justify' },
+  },
+  render: (args) => ({
+    components: { EditorTextAlign },
+    setup() {
+      const align = ref<EditorTextAlignValue>('text-left')
+      return { args, align }
+    },
+    template: `<EditorTextAlign v-bind="args" v-model="align" />`,
+  }),
+}
+
+/**
+ * A subset of the options, for an element whose alignment the consumer writes
+ * as something other than `text-*` and so cannot justify. Always shown in the
+ * canonical order, whatever order `options` is in.
+ */
+export const OptionsSubset: Story = {
+  args: { label: 'Uitlijning', options: ['text-left', 'text-center', 'text-right'] },
+  render: (args) => ({
+    components: { EditorTextAlign },
+    setup() {
+      const align = ref<EditorTextAlignValue>('text-center')
+      return { args, align }
+    },
+    template: `
+      <div>
+        <EditorTextAlign v-bind="args" v-model="align" />
+        <p class="small-normal text-gray-700">{{ align }}</p>
+      </div>
+    `,
+  }),
+}

package/src/components/editor/molecules/EditorTextAlign/EditorTextAlign.test.ts

@@ -0,0 +1,155 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import EditorTextAlign, { EDITOR_TEXT_ALIGN_OPTIONS } from './EditorTextAlign.vue'
+
+// ToggleGroup awaits document.fonts.ready on mount, which jsdom does not ship.
+beforeEach(() => {
+  Object.defineProperty(document, 'fonts', {
+    value: { ready: Promise.resolve() },
+    configurable: true,
+  })
+})
+
+/**
+ * The options are icon-only, so their copy lives on the button as the
+ * accessible name rather than as visible text.
+ */
+const optionNames = (wrapper: VueWrapper) =>
+  wrapper.findAll('button').map((button) => button.attributes('aria-label'))
+
+describe('EditorTextAlign', () => {
+  // The options sit in a ToggleGroup toolbar; its name is the block label, so
+  // a screen reader announces which setting the pressed option belongs to.
+  it('names the options toolbar with the block label', async () => {
+    const wrapper = mount(EditorTextAlign, { props: { modelValue: 'text-left' } })
+    expect(wrapper.get('[role="toolbar"]').attributes('aria-label')).toBe('Tekst uitlijning')
+
+    await wrapper.setProps({ label: 'Custom' })
+    expect(wrapper.get('[role="toolbar"]').attributes('aria-label')).toBe('Custom')
+  })
+
+  // No assertions on typography utilities: copy is found by structure or by
+  // accessible name, so restyling the block or the toggle group cannot turn
+  // these red.
+  it('renders the Dutch default label', () => {
+    const wrapper = mount(EditorTextAlign, { props: { modelValue: 'text-left' } })
+
+    expect(wrapper.find('p').text()).toBe('Tekst uitlijning')
+  })
+
+  it('renders a button for each of the four options', () => {
+    const wrapper = mount(EditorTextAlign, { props: { modelValue: 'text-left' } })
+
+    expect(wrapper.findAll('button')).toHaveLength(4)
+  })
+
+  it('names the options with the Dutch defaults', () => {
+    const wrapper = mount(EditorTextAlign, { props: { modelValue: 'text-left' } })
+
+    expect(optionNames(wrapper)).toEqual(['Links', 'Midden', 'Rechts', 'Uitvullen'])
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorTextAlign, {
+      props: { modelValue: 'text-left', label: 'Text alignment' },
+    })
+
+    expect(wrapper.find('p').text()).toBe('Text alignment')
+  })
+
+  it('names the options with custom messages', () => {
+    const wrapper = mount(EditorTextAlign, {
+      props: {
+        modelValue: 'text-left',
+        messages: { left: 'Left', center: 'Center', right: 'Right', justify: 'Justify' },
+      },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Left', 'Center', 'Right', 'Justify'])
+  })
+
+  it('keeps the untouched defaults when only one message is overridden', () => {
+    const wrapper = mount(EditorTextAlign, {
+      props: { modelValue: 'text-left', messages: { justify: 'Justify' } },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Links', 'Midden', 'Rechts', 'Justify'])
+  })
+
+  it('emits update:modelValue with the Tailwind class of the clicked option', async () => {
+    const wrapper = mount(EditorTextAlign, { props: { modelValue: 'text-left' } })
+
+    await wrapper.findAll('button')[3].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['text-justify']])
+  })
+
+  it('renders only icons, no visible option text', () => {
+    const wrapper = mount(EditorTextAlign, { props: { modelValue: 'text-left' } })
+
+    // Each icon is rendered twice: once per toggle group layer.
+    expect(wrapper.findAll('i')).toHaveLength(8)
+    wrapper.findAll('button').forEach((button) => expect(button.text()).toBe(''))
+  })
+
+  it('renders no tooltip: the copy is the accessible name, not a hover overlay', () => {
+    const wrapper = mount(EditorTextAlign, { props: { modelValue: 'text-left' } })
+
+    // ToggleGroup only mounts NexxtTooltip -- and with it reka-ui's
+    // TooltipProvider and the trigger's data attribute -- for options that
+    // carry a `tooltip`.
+    expect(wrapper.findAllComponents({ name: 'TooltipProvider' })).toHaveLength(0)
+    expect(wrapper.find('[data-grace-area-trigger]').exists()).toBe(false)
+  })
+
+  it('offers all four options when `options` is not given', () => {
+    const wrapper = mount(EditorTextAlign, { props: { modelValue: 'text-left' } })
+
+    expect(optionNames(wrapper)).toEqual(['Links', 'Midden', 'Rechts', 'Uitvullen'])
+  })
+
+  it('offers only the options passed in `options`', () => {
+    const wrapper = mount(EditorTextAlign, {
+      props: { modelValue: 'text-left', options: ['text-left', 'text-center', 'text-right'] },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Links', 'Midden', 'Rechts'])
+  })
+
+  it('keeps the canonical order whatever order `options` is in', () => {
+    const wrapper = mount(EditorTextAlign, {
+      props: { modelValue: 'text-left', options: ['text-right', 'text-justify', 'text-left'] },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Links', 'Rechts', 'Uitvullen'])
+  })
+
+  it('emits the class of a clicked option from a subset', async () => {
+    const wrapper = mount(EditorTextAlign, {
+      props: { modelValue: 'text-left', options: ['text-left', 'text-right'] },
+    })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['text-right']])
+  })
+
+  it('is always visible, so it renders no switch', () => {
+    const wrapper = mount(EditorTextAlign, { props: { modelValue: 'text-left' } })
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(false)
+  })
+})
+
+// The consumer derives its class matchers from this list, so the list is a
+// contract: any change here changes what the app recognises.
+describe('EDITOR_TEXT_ALIGN_OPTIONS', () => {
+  it('offers exactly the agreed options', () => {
+    expect(EDITOR_TEXT_ALIGN_OPTIONS).toEqual([
+      { token: 'left' },
+      { token: 'center' },
+      { token: 'right' },
+      { token: 'justify' },
+    ])
+  })
+})