@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/editor/composables/useRadioGrid.test.ts

@@ -0,0 +1,261 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { defineComponent, h, ref, type Ref } from 'vue'
+import { useRadioGrid, type UseRadioGridOptions } from './useRadioGrid'
+
+const mounted: VueWrapper[] = []
+
+afterEach(() => {
+  mounted.splice(0).forEach((wrapper) => wrapper.unmount())
+})
+
+/**
+ * A bare 3×3 host: one button per registered position, laid out by index only.
+ * The composable owns no markup, so this is all it needs.
+ */
+const mountGrid = (
+  options: Partial<Omit<UseRadioGridOptions, 'selected' | 'onChoose'>> & {
+    initial?: number | null
+  } = {},
+) => {
+  const selected: Ref<number | null> = ref(options.initial === undefined ? 4 : options.initial)
+  const onChoose = vi.fn((position: number) => (selected.value = position))
+  const onLeave = vi.fn()
+  let api!: ReturnType<typeof useRadioGrid>
+
+  const Host = defineComponent({
+    setup() {
+      api = useRadioGrid({
+        rows: 3,
+        columns: 3,
+        ...options,
+        selected,
+        onChoose,
+        onLeave,
+      })
+      const positions = () =>
+        (options.positions as readonly number[] | undefined) ?? [0, 1, 2, 3, 4, 5, 6, 7, 8]
+      return () =>
+        h('div', [
+          h(
+            'div',
+            { 'data-grid': '', onFocusout: api.onFocusout },
+            positions().map((position) =>
+              h('button', {
+                key: position,
+                'data-position': position,
+                tabindex: api.tabStop.value === position ? 0 : -1,
+                ref: api.cellRef(position),
+                onKeydown: (event: KeyboardEvent) => api.onKeydown(event, position),
+              }),
+            ),
+          ),
+          h('button', { 'data-outside': '' }),
+        ])
+    },
+  })
+
+  const wrapper = mount(Host, { attachTo: document.body })
+  mounted.push(wrapper)
+  return { wrapper, selected, onChoose, onLeave, api: () => api }
+}
+
+const cell = (wrapper: VueWrapper, position: number) =>
+  wrapper.get(`[data-position="${position}"]`).element as HTMLElement
+
+const focused = () => Number((document.activeElement as HTMLElement).dataset.position)
+
+/** A real, cancelable keydown on the focused cell; returns whether it was prevented. */
+const press = (key: string, init: KeyboardEventInit = {}) => {
+  const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true, ...init })
+  document.activeElement!.dispatchEvent(event)
+  return event.defaultPrevented
+}
+
+describe('useRadioGrid', () => {
+  describe('tab stop', () => {
+    it('is the chosen position', () => {
+      const { api } = mountGrid({ initial: 7 })
+
+      expect(api().tabStop.value).toBe(7)
+    })
+
+    it('is the preferred position while none is chosen', () => {
+      const { api } = mountGrid({ initial: null, preferred: () => 3 })
+
+      expect(api().tabStop.value).toBe(3)
+    })
+
+    it('falls back to the first position without a usable preference', () => {
+      const { api } = mountGrid({ initial: null, preferred: () => 5, positions: [6, 0, 3] })
+
+      expect(api().tabStop.value).toBe(0)
+    })
+
+    it('ignores a chosen position that holds no radio', () => {
+      const { api } = mountGrid({ initial: 4, positions: [0, 3, 6], preferred: () => 3 })
+
+      expect(api().tabStop.value).toBe(3)
+    })
+  })
+
+  describe('arrows', () => {
+    it('move in two dimensions, choose and focus', () => {
+      const { wrapper, onChoose } = mountGrid()
+      cell(wrapper, 4).focus()
+
+      press('ArrowUp')
+      press('ArrowRight')
+      press('ArrowDown')
+      press('ArrowLeft')
+
+      expect(onChoose.mock.calls.map(([position]) => position)).toEqual([1, 2, 5, 4])
+      expect(focused()).toBe(4)
+    })
+
+    it('stop at the edge without wrapping, and still prevent the scroll', () => {
+      const { wrapper, onChoose } = mountGrid({ initial: 2 })
+      cell(wrapper, 2).focus()
+
+      expect(press('ArrowRight')).toBe(true)
+      expect(press('ArrowUp')).toBe(true)
+
+      expect(onChoose).not.toHaveBeenCalled()
+      expect(focused()).toBe(2)
+    })
+
+    it('only move along the given positions', () => {
+      const { wrapper, onChoose } = mountGrid({ initial: 3, positions: [0, 3, 6] })
+      cell(wrapper, 3).focus()
+
+      press('ArrowRight')
+      press('ArrowLeft')
+      expect(onChoose).not.toHaveBeenCalled()
+
+      press('ArrowDown')
+      expect(onChoose).toHaveBeenLastCalledWith(6)
+      expect(focused()).toBe(6)
+    })
+
+    it('choose the cell they stay on while nothing is chosen', () => {
+      const { wrapper, onChoose } = mountGrid({ initial: null, preferred: () => 3 })
+      cell(wrapper, 3).focus()
+
+      press('ArrowLeft')
+
+      expect(onChoose).toHaveBeenCalledWith(3)
+    })
+
+    it('leave keys with a modifier to the browser', () => {
+      const { wrapper, onChoose } = mountGrid()
+      cell(wrapper, 4).focus()
+
+      for (const init of [
+        { altKey: true },
+        { ctrlKey: true },
+        { metaKey: true },
+        { shiftKey: true },
+      ]) {
+        expect(press('ArrowLeft', init)).toBe(false)
+      }
+      expect(onChoose).not.toHaveBeenCalled()
+    })
+
+    it('leave other keys alone', () => {
+      const { wrapper, onChoose } = mountGrid()
+      cell(wrapper, 4).focus()
+
+      expect(press('a')).toBe(false)
+      expect(onChoose).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('Home and End', () => {
+    it("jump to the first and last radio of the grid with 'grid'", () => {
+      const { wrapper, onChoose } = mountGrid({ homeEnd: 'grid' })
+      cell(wrapper, 4).focus()
+
+      press('Home')
+      expect(focused()).toBe(0)
+      press('End')
+      expect(focused()).toBe(8)
+      expect(onChoose.mock.calls.map(([position]) => position)).toEqual([0, 8])
+    })
+
+    it("jump within the current row with 'row'", () => {
+      const { wrapper } = mountGrid({ homeEnd: 'row' })
+      cell(wrapper, 4).focus()
+
+      press('Home')
+      expect(focused()).toBe(3)
+      press('End')
+      expect(focused()).toBe(5)
+    })
+
+    it("default to 'grid'", () => {
+      const { wrapper } = mountGrid()
+      cell(wrapper, 4).focus()
+
+      press('End')
+      expect(focused()).toBe(8)
+    })
+  })
+
+  describe('focusTabStop', () => {
+    it('focuses the radio that holds the tab stop', () => {
+      const { wrapper, api } = mountGrid({ initial: 7 })
+
+      api().focusTabStop()
+
+      expect(document.activeElement).toBe(cell(wrapper, 7))
+    })
+  })
+
+  describe('leaving', () => {
+    it('signals the end of a keyboard run when the focus leaves', () => {
+      const { wrapper, onLeave } = mountGrid()
+      cell(wrapper, 4).focus()
+
+      press('ArrowUp')
+      press('ArrowUp')
+      cell(wrapper, 0).focus()
+      expect(onLeave).not.toHaveBeenCalled()
+
+      ;(wrapper.get('[data-outside]').element as HTMLElement).focus()
+      expect(onLeave).toHaveBeenCalledOnce()
+    })
+
+    it('stays silent when the focus only passes through, without a key', () => {
+      const { wrapper, onLeave } = mountGrid()
+
+      cell(wrapper, 4).focus()
+      cell(wrapper, 5).focus()
+      ;(wrapper.get('[data-outside]').element as HTMLElement).focus()
+
+      expect(onLeave).not.toHaveBeenCalled()
+    })
+
+    it('signals one run once, not again on a later visit without a key', () => {
+      const { wrapper, onLeave } = mountGrid()
+      cell(wrapper, 4).focus()
+
+      press('ArrowRight')
+      ;(wrapper.get('[data-outside]').element as HTMLElement).focus()
+      cell(wrapper, 4).focus()
+      ;(wrapper.get('[data-outside]').element as HTMLElement).focus()
+
+      expect(onLeave).toHaveBeenCalledOnce()
+    })
+
+    it('stays silent on leaving after reset closed the run', () => {
+      const { wrapper, onLeave, api } = mountGrid()
+      cell(wrapper, 4).focus()
+
+      press('ArrowRight')
+      api().reset()
+      ;(wrapper.get('[data-outside]').element as HTMLElement).focus()
+
+      expect(onLeave).not.toHaveBeenCalled()
+    })
+  })
+})

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

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import EditorAlignItems from './EditorAlignItems.vue'
+import type { EditorAlignItemsValue } from './EditorAlignItems.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Align Items',
+  component: EditorAlignItems,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorAlignItems>
+
+type Story = StoryObj<typeof EditorAlignItems>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorAlignItems },
+    setup() {
+      const align = ref<EditorAlignItemsValue>('items-start')
+      return { args, align }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorAlignItems v-bind="args" v-model="align" />
+        <p class="small-normal text-gray-700">{{ align }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Align items',
+    messages: { start: 'Start', center: 'Center', end: 'End', stretch: 'Stretch' },
+  },
+  render: (args) => ({
+    components: { EditorAlignItems },
+    setup() {
+      const align = ref<EditorAlignItemsValue>('items-start')
+      return { args, align }
+    },
+    template: `<EditorAlignItems v-bind="args" v-model="align" />`,
+  }),
+}
+
+/**
+ * A subset in canonical order: top, middle and bottom, as the vertical divider
+ * in a row group uses it. In a row the cross axis is vertical, so the
+ * `objects-align-top / center-vertical / bottom` icons say what they do.
+ */
+export const OptionsSubset: Story = {
+  args: {
+    label: 'Uitlijning',
+    options: ['items-start', 'items-center', 'items-end'],
+    messages: { start: 'Boven', center: 'Midden', end: 'Onder' },
+  },
+  render: (args) => ({
+    components: { EditorAlignItems },
+    setup() {
+      const align = ref<EditorAlignItemsValue>('items-center')
+      return { args, align }
+    },
+    template: `
+      <div>
+        <EditorAlignItems v-bind="args" v-model="align" />
+        <p class="small-normal text-gray-700">{{ align }}</p>
+      </div>
+    `,
+  }),
+}

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

@@ -0,0 +1,189 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import EditorAlignItems, { EDITOR_ALIGN_ITEMS_OPTIONS } from './EditorAlignItems.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('EditorAlignItems', () => {
+  // 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(EditorAlignItems, { props: { modelValue: 'items-start' } })
+    expect(wrapper.get('[role="toolbar"]').attributes('aria-label')).toBe('Uitlijning items')
+
+    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(EditorAlignItems, { props: { modelValue: 'items-start' } })
+
+    expect(wrapper.find('p').text()).toBe('Uitlijning items')
+  })
+
+  it('renders a button for each of the four options', () => {
+    const wrapper = mount(EditorAlignItems, { props: { modelValue: 'items-start' } })
+
+    expect(wrapper.findAll('button')).toHaveLength(4)
+  })
+
+  it('names the options with the Dutch defaults', () => {
+    const wrapper = mount(EditorAlignItems, { props: { modelValue: 'items-start' } })
+
+    expect(optionNames(wrapper)).toEqual(['Begin', 'Midden', 'Einde', 'Uitrekken'])
+  })
+
+  it('renders a custom label', () => {
+    const wrapper = mount(EditorAlignItems, {
+      props: { modelValue: 'items-start', label: 'Align items' },
+    })
+
+    expect(wrapper.find('p').text()).toBe('Align items')
+  })
+
+  it('names the options with custom messages', () => {
+    const wrapper = mount(EditorAlignItems, {
+      props: {
+        modelValue: 'items-start',
+        messages: { start: 'Start', center: 'Center', end: 'End', stretch: 'Stretch' },
+      },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Start', 'Center', 'End', 'Stretch'])
+  })
+
+  it('keeps the untouched defaults when only one message is overridden', () => {
+    const wrapper = mount(EditorAlignItems, {
+      props: { modelValue: 'items-start', messages: { stretch: 'Stretch' } },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Begin', 'Midden', 'Einde', 'Stretch'])
+  })
+
+  it('emits update:modelValue with the Tailwind class of the clicked option', async () => {
+    const wrapper = mount(EditorAlignItems, { props: { modelValue: 'items-start' } })
+
+    await wrapper.findAll('button')[3].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['items-stretch']])
+  })
+
+  it('renders only icons, no visible option text', () => {
+    const wrapper = mount(EditorAlignItems, { props: { modelValue: 'items-start' } })
+
+    // 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(EditorAlignItems, { props: { modelValue: 'items-start' } })
+
+    // 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(EditorAlignItems, { props: { modelValue: 'items-start' } })
+
+    expect(optionNames(wrapper)).toEqual(['Begin', 'Midden', 'Einde', 'Uitrekken'])
+  })
+
+  it('offers only the options passed in `options`', () => {
+    const wrapper = mount(EditorAlignItems, {
+      props: { modelValue: 'items-center', options: ['items-start', 'items-center', 'items-end'] },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Begin', 'Midden', 'Einde'])
+  })
+
+  it('keeps the canonical order and drops duplicates, whatever `options` says', () => {
+    const wrapper = mount(EditorAlignItems, {
+      props: {
+        modelValue: 'items-end',
+        options: ['items-stretch', 'items-end', 'items-start', 'items-end'],
+      },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Begin', 'Einde', 'Uitrekken'])
+  })
+
+  it('ignores values that are not on the list, like JustifyContent', () => {
+    const unknown = ['items-baseline', 'items-center'] as unknown as ['items-center']
+    const wrapper = mount(EditorAlignItems, {
+      props: { modelValue: 'items-center', options: unknown },
+    })
+
+    expect(optionNames(wrapper)).toEqual(['Midden'])
+  })
+
+  it('renders no options for an empty subset, like JustifyContent', () => {
+    const wrapper = mount(EditorAlignItems, { props: { modelValue: 'items-center', options: [] } })
+
+    expect(wrapper.findAll('button')).toHaveLength(0)
+  })
+
+  it('keeps the top, middle and bottom icons in a subset', () => {
+    const wrapper = mount(EditorAlignItems, {
+      props: {
+        modelValue: 'items-center',
+        options: ['items-start', 'items-center', 'items-end'],
+        messages: { start: 'Boven', center: 'Midden', end: 'Onder' },
+      },
+    })
+    const icons = wrapper.findAll('button i').map((icon) => icon.classes().join(' '))
+
+    expect(optionNames(wrapper)).toEqual(['Boven', 'Midden', 'Onder'])
+    expect(icons[0]).toContain('objects-align-top')
+    expect(icons[1]).toContain('objects-align-center-vertical')
+    expect(icons[2]).toContain('objects-align-bottom')
+  })
+
+  it('emits the class of a clicked option from a subset', async () => {
+    const wrapper = mount(EditorAlignItems, {
+      props: { modelValue: 'items-start', options: ['items-start', 'items-end'] },
+    })
+
+    await wrapper.findAll('button')[1].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')).toEqual([['items-end']])
+  })
+
+  it('is always visible, so it renders no switch', () => {
+    const wrapper = mount(EditorAlignItems, { props: { modelValue: 'items-start' } })
+
+    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_ALIGN_ITEMS_OPTIONS', () => {
+  it('offers exactly the agreed options', () => {
+    expect(EDITOR_ALIGN_ITEMS_OPTIONS).toEqual([
+      { token: 'start' },
+      { token: 'center' },
+      { token: 'end' },
+      { token: 'stretch' },
+    ])
+  })
+})