@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/atoms/Switch/Switch.test.ts

@@ -0,0 +1,183 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Switch from './Switch.vue'
+
+describe('Switch', () => {
+  it('renders a checkbox input', () => {
+    const wrapper = mount(Switch)
+
+    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+  })
+
+  // A toggle is on/off, not selected/unselected, so it is exposed as a switch.
+  // No `aria-checked` rides along: on a native checkbox the browser derives the
+  // state, and a hand-written one would be the thing that goes stale.
+  it('exposes the input as a switch', () => {
+    const wrapper = mount(Switch)
+    const input = wrapper.find('input[type="checkbox"]')
+
+    expect(input.attributes('role')).toBe('switch')
+    expect(input.attributes('aria-checked')).toBeUndefined()
+  })
+
+  it('is unchecked by default', () => {
+    const wrapper = mount(Switch)
+
+    expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(false)
+  })
+
+  it('is checked when modelValue is true', () => {
+    const wrapper = mount(Switch, { props: { modelValue: true } })
+
+    expect((wrapper.find('input').element as HTMLInputElement).checked).toBe(true)
+  })
+
+  it('emits update:modelValue when toggled', async () => {
+    const wrapper = mount(Switch, { props: { modelValue: false } })
+
+    await wrapper.find('input').setValue(true)
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+  })
+
+  it('applies blue track color when checked by default', () => {
+    const wrapper = mount(Switch, { props: { modelValue: true } })
+
+    expect(wrapper.find('span.absolute.inset-0').classes()).toContain('bg-cornflower-blue-500')
+  })
+
+  it('applies green track color when checked and color is green', () => {
+    const wrapper = mount(Switch, { props: { modelValue: true, color: 'green' } })
+
+    expect(wrapper.find('span.absolute.inset-0').classes()).toContain('bg-green-400')
+  })
+
+  it('applies gray track color when unchecked', () => {
+    const wrapper = mount(Switch, { props: { modelValue: false } })
+
+    expect(wrapper.find('span.absolute.inset-0').classes()).toContain('bg-gray-200')
+  })
+
+  it('applies the large size by default', () => {
+    const wrapper = mount(Switch)
+
+    expect(wrapper.find('span.relative').classes()).toEqual(expect.arrayContaining(['h-8', 'w-15']))
+  })
+
+  it('applies the medium size classes', () => {
+    const wrapper = mount(Switch, { props: { size: 'md' } })
+
+    expect(wrapper.find('span.relative').classes()).toEqual(expect.arrayContaining(['h-6', 'w-11']))
+  })
+
+  it('applies the small size classes', () => {
+    const wrapper = mount(Switch, { props: { size: 'sm' } })
+
+    expect(wrapper.find('span.relative').classes()).toEqual(expect.arrayContaining(['h-5', 'w-9']))
+  })
+
+  it('never lets the track shrink', () => {
+    const wrapper = mount(Switch)
+
+    expect(wrapper.find('span.relative').classes()).toContain('shrink-0')
+  })
+
+  it('renders a focus ring on the track when the input is focus-visible', () => {
+    const wrapper = mount(Switch)
+
+    expect(wrapper.find('span.absolute.inset-0').classes()).toEqual(
+      expect.arrayContaining([
+        'peer-focus-visible:outline-2',
+        'peer-focus-visible:outline-offset-2',
+        'peer-focus-visible:outline-cornflower-blue-500',
+      ]),
+    )
+  })
+
+  it('keeps the input and the track as siblings so the peer selector resolves', () => {
+    const wrapper = mount(Switch)
+    const input = wrapper.find('input').element
+    const track = wrapper.find('span.absolute.inset-0').element
+
+    expect(track.parentElement).toBe(input.parentElement)
+    expect(input.nextElementSibling).toBe(track)
+  })
+
+  it('translates the knob by the size-specific distance when checked', () => {
+    const wrapper = mount(Switch, { props: { modelValue: true, size: 'sm' } })
+
+    expect(wrapper.find('span.rounded-full').classes()).toContain('translate-x-4')
+  })
+
+  it('does not translate the knob when unchecked', () => {
+    const wrapper = mount(Switch, { props: { modelValue: false, size: 'sm' } })
+
+    expect(wrapper.find('span.rounded-full').classes()).not.toContain('translate-x-4')
+  })
+
+  it('renders iconOn when checked', () => {
+    const wrapper = mount(Switch, { props: { modelValue: true, iconOn: 'check' } })
+
+    expect(wrapper.find('i').exists()).toBe(true)
+  })
+
+  it('renders iconOff when unchecked', () => {
+    const wrapper = mount(Switch, { props: { modelValue: false, iconOff: 'xmark' } })
+
+    expect(wrapper.find('i').exists()).toBe(true)
+  })
+
+  it('does not render iconOn when unchecked', () => {
+    const wrapper = mount(Switch, { props: { modelValue: false, iconOn: 'check' } })
+
+    expect(wrapper.find('i').exists()).toBe(false)
+  })
+
+  it('does not render iconOff when checked', () => {
+    const wrapper = mount(Switch, { props: { modelValue: true, iconOff: 'xmark' } })
+
+    expect(wrapper.find('i').exists()).toBe(false)
+  })
+
+  it('does not render an icon when neither iconOn nor iconOff is set', () => {
+    const wrapper = mount(Switch)
+
+    expect(wrapper.find('i').exists()).toBe(false)
+  })
+
+  it('renders slot content after the toggle by default', () => {
+    const wrapper = mount(Switch, {
+      props: { labelPosition: 'after' },
+      slots: { default: '<span>Enable notifications</span>' },
+    })
+    const label = wrapper.find('label')
+    const toggle = wrapper.find('span.relative')
+
+    expect(label.html()).toContain('Enable notifications')
+    expect(label.element.lastElementChild?.textContent).toContain('Enable notifications')
+    expect(toggle.element.compareDocumentPosition(label.element.lastElementChild!)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    )
+  })
+
+  it('renders slot content before the toggle when labelPosition is before', () => {
+    const wrapper = mount(Switch, {
+      props: { labelPosition: 'before' },
+      slots: { default: '<span>Enable notifications</span>' },
+    })
+    const label = wrapper.find('label')
+    const toggle = wrapper.find('span.relative')
+
+    expect(label.html()).toContain('Enable notifications')
+    expect(label.element.firstElementChild?.textContent).toContain('Enable notifications')
+    expect(toggle.element.compareDocumentPosition(label.element.firstElementChild!)).toBe(
+      Node.DOCUMENT_POSITION_PRECEDING,
+    )
+  })
+
+  it('forwards attributes to the input', () => {
+    const wrapper = mount(Switch, { attrs: { 'aria-label': 'Enable notifications' } })
+
+    expect(wrapper.find('input').attributes('aria-label')).toBe('Enable notifications')
+  })
+})

package/src/components/atoms/Tooltip/Tooltip.stories.ts

@@ -0,0 +1,158 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Tooltip from './Tooltip.vue'
+
+export default {
+  title: 'Components/Atoms/Tooltip',
+  component: Tooltip,
+} satisfies Meta<typeof Tooltip>
+
+type Story = StoryObj<typeof Tooltip>
+
+const trigger = `<button class="rounded border border-gray-300 px-3 py-1 text-sm">Hover me</button>`
+
+export const Default: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip>
+        ${trigger}
+        <template #tooltip>This is a tooltip</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const WithDelay: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip :delay="500">
+        <button class="rounded border border-gray-300 px-3 py-1 text-sm">Hover me (500ms delay)</button>
+        <template #tooltip>Appears after a delay</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const SideBottom: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip side="bottom">
+        ${trigger}
+        <template #tooltip>Tooltip below</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const SideLeft: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip side="left">
+        ${trigger}
+        <template #tooltip>Tooltip on the left</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const SideRight: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip side="right">
+        ${trigger}
+        <template #tooltip>Tooltip on the right</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const AlignStart: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip align="start">
+        ${trigger}
+        <template #tooltip>Aligned to start</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const AlignEnd: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip align="end">
+        ${trigger}
+        <template #tooltip>Aligned to end</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const CustomOffset: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip :side-offset="20">
+        ${trigger}
+        <template #tooltip>Further away (20px offset)</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const DisableHoverableContent: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip :disable-hoverable-content="true">
+        ${trigger}
+        <template #tooltip>Closes when you move to the tooltip</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const DisableClosingTrigger: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip :disable-closing-trigger="true">
+        <button class="rounded border border-gray-300 px-3 py-1 text-sm">Click me — tooltip stays open</button>
+        <template #tooltip>Stays open after clicking the trigger</template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const RichContent: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip>
+        <button class="rounded border border-gray-300 px-3 py-1 text-sm">Hover for details</button>
+        <template #tooltip>
+          <strong>Title</strong>
+          <p class="mt-1 text-gray-500">Additional description here</p>
+        </template>
+      </Tooltip>
+    `,
+  }),
+}
+
+export const OnIcon: Story = {
+  render: () => ({
+    components: { Tooltip },
+    template: `
+      <Tooltip>
+        <span class="inline-flex h-5 w-5 cursor-pointer items-center justify-center rounded-full bg-gray-200 text-xs text-gray-600">?</span>
+        <template #tooltip>Helpful information about this field</template>
+      </Tooltip>
+    `,
+  }),
+}

package/src/components/atoms/Tooltip/Tooltip.test.ts

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { defineComponent } from 'vue'
+import Tooltip from './Tooltip.vue'
+
+// Stub reka-ui components so we can inspect slots and props without portal/hover behaviour
+const TooltipProviderStub = defineComponent({ template: '<div><slot /></div>' })
+const TooltipRootStub = defineComponent({
+  props: ['delayDuration', 'disableHoverableContent', 'disableClosingTrigger'],
+  template:
+    '<div :data-delay="delayDuration" :data-disable-hoverable="disableHoverableContent" :data-disable-closing-trigger="disableClosingTrigger"><slot /></div>',
+})
+const TooltipTriggerStub = defineComponent({ template: '<div><slot /></div>' })
+const TooltipPortalStub = defineComponent({ template: '<div><slot /></div>' })
+const TooltipContentStub = defineComponent({
+  props: ['side', 'sideOffset', 'align'],
+  template:
+    '<div class="tooltip-content" :data-side="side" :data-side-offset="sideOffset" :data-align="align"><slot /></div>',
+})
+
+const stubs = {
+  TooltipProvider: TooltipProviderStub,
+  TooltipRoot: TooltipRootStub,
+  TooltipTrigger: TooltipTriggerStub,
+  TooltipPortal: TooltipPortalStub,
+  TooltipContent: TooltipContentStub,
+}
+
+const mountTooltip = (slots = {}, props = {}) => mount(Tooltip, { props, slots, global: { stubs } })
+
+describe('Tooltip', () => {
+  describe('trigger slot', () => {
+    it('renders the default slot as the trigger', () => {
+      const wrapper = mountTooltip({ default: '<button>Click me</button>' })
+      expect(wrapper.find('button').exists()).toBe(true)
+      expect(wrapper.find('button').text()).toBe('Click me')
+    })
+
+    it('renders plain text in the default slot', () => {
+      const wrapper = mountTooltip({ default: 'Trigger text' })
+      expect(wrapper.text()).toContain('Trigger text')
+    })
+  })
+
+  describe('tooltip slot', () => {
+    it('renders the tooltip slot content', () => {
+      const wrapper = mountTooltip({ tooltip: 'Tooltip message' })
+      expect(wrapper.find('.tooltip-content').text()).toContain('Tooltip message')
+    })
+
+    it('renders rich HTML in the tooltip slot', () => {
+      const wrapper = mountTooltip({ tooltip: '<strong>Bold text</strong>' })
+      expect(wrapper.find('.tooltip-content strong').exists()).toBe(true)
+      expect(wrapper.find('.tooltip-content strong').text()).toBe('Bold text')
+    })
+
+    it('renders an empty tooltip content when no tooltip slot is provided', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.find('.tooltip-content').text()).toBe('')
+    })
+  })
+
+  describe('delay prop', () => {
+    it('passes the delay to TooltipRoot', () => {
+      const wrapper = mountTooltip({}, { delay: 500 })
+      expect(wrapper.findComponent(TooltipRootStub).attributes('data-delay')).toBe('500')
+    })
+
+    it('defaults delay to 0', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.findComponent(TooltipRootStub).attributes('data-delay')).toBe('0')
+    })
+  })
+
+  describe('side prop', () => {
+    it('passes the side to TooltipContent', () => {
+      const wrapper = mountTooltip({}, { side: 'bottom' })
+      expect(wrapper.find('.tooltip-content').attributes('data-side')).toBe('bottom')
+    })
+
+    it('defaults side to top', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.find('.tooltip-content').attributes('data-side')).toBe('top')
+    })
+  })
+
+  describe('sideOffset prop', () => {
+    it('passes the sideOffset to TooltipContent', () => {
+      const wrapper = mountTooltip({}, { sideOffset: 16 })
+      expect(wrapper.find('.tooltip-content').attributes('data-side-offset')).toBe('16')
+    })
+
+    it('defaults sideOffset to 8', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.find('.tooltip-content').attributes('data-side-offset')).toBe('8')
+    })
+  })
+
+  describe('align prop', () => {
+    it('passes the align to TooltipContent', () => {
+      const wrapper = mountTooltip({}, { align: 'start' })
+      expect(wrapper.find('.tooltip-content').attributes('data-align')).toBe('start')
+    })
+
+    it('defaults align to center', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.find('.tooltip-content').attributes('data-align')).toBe('center')
+    })
+  })
+
+  describe('disableHoverableContent prop', () => {
+    it('passes disableHoverableContent to TooltipRoot', () => {
+      const wrapper = mountTooltip({}, { disableHoverableContent: true })
+      expect(wrapper.findComponent(TooltipRootStub).props('disableHoverableContent')).toBe(true)
+    })
+
+    it('defaults disableHoverableContent to false', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.findComponent(TooltipRootStub).props('disableHoverableContent')).toBe(false)
+    })
+  })
+
+  describe('disableClosingTrigger prop', () => {
+    it('passes disableClosingTrigger to TooltipRoot', () => {
+      const wrapper = mountTooltip({}, { disableClosingTrigger: true })
+      expect(wrapper.findComponent(TooltipRootStub).props('disableClosingTrigger')).toBe(true)
+    })
+
+    it('defaults disableClosingTrigger to false', () => {
+      const wrapper = mountTooltip()
+      expect(wrapper.findComponent(TooltipRootStub).props('disableClosingTrigger')).toBe(false)
+    })
+  })
+})

package/src/components/editor/atoms/EditorDimensionField/EditorDimensionField.stories.ts

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import EditorDimensionField from './EditorDimensionField.vue'
+import type { EditorDimensionValue } from './EditorDimensionField.vue'
+
+export default {
+  title: 'Components/Editor Components/Atoms/Editor Dimension Field',
+  component: EditorDimensionField,
+  decorators: [() => ({ template: '<div class="w-64 mx-auto"><story /></div>' })],
+  args: { label: 'Breedte' },
+  argTypes: {
+    label: { control: 'text' },
+    optional: { control: 'boolean' },
+  },
+} satisfies Meta<typeof EditorDimensionField>
+
+type Story = StoryObj<typeof EditorDimensionField>
+
+/** Shows the model as-is under the field, with the number of finished edits. */
+const render = (args: Story['args'], initial: EditorDimensionValue | null) => ({
+  components: { EditorDimensionField },
+  setup() {
+    const dimension = ref(initial)
+    const commits = ref(0)
+    return { args, dimension, commits }
+  },
+  template: `
+    <div class="flex flex-col gap-2">
+      <EditorDimensionField v-bind="args" v-model="dimension" @commit="commits++" />
+      <p data-testid="dimension-value" class="small-normal text-gray-700">
+        {{ dimension === null ? 'null' : dimension.value + ' ' + dimension.unit }} · {{ commits }}
+      </p>
+    </div>
+  `,
+})
+
+const readout = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[data-testid="dimension-value"]')!.textContent!.trim()
+
+/** px only, the default: the unit is plain text, as in the padding fields. */
+export const Default: Story = {
+  render: (args) => render(args, { value: 320, unit: 'px' }),
+  play: async ({ canvasElement }) => {
+    const input = within(canvasElement).getByRole('spinbutton') as HTMLInputElement
+
+    // Typing is left alone until it is confirmed, then clamped to 40..1600.
+    await userEvent.clear(input)
+    await userEvent.type(input, '12')
+    expect(readout(canvasElement)).toBe('320 px · 0')
+
+    await userEvent.keyboard('{Enter}')
+    await waitFor(() => expect(input.value).toBe('40'))
+    expect(readout(canvasElement)).toBe('40 px · 1')
+
+    // A stream of arrow steps is one finished edit, closed when the key is let go.
+    await userEvent.keyboard('{Shift>}{ArrowUp}{ArrowUp}{/Shift}')
+    await waitFor(() => expect(readout(canvasElement)).toBe('60 px · 3'))
+
+    // Escape undoes the typing, not the value.
+    await userEvent.clear(input)
+    await userEvent.type(input, '999')
+    await userEvent.keyboard('{Escape}')
+    await waitFor(() => expect(input.value).toBe('60'))
+  },
+}
+
+/**
+ * px and %: the unit becomes a selector. Switching keeps the number, clamped
+ * into the range of the new unit -- 320 px becomes 100 %.
+ */
+export const PixelsAndPercent: Story = {
+  args: { units: ['px', '%'] },
+  render: (args) => render(args, { value: 320, unit: 'px' }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    await userEvent.selectOptions(canvas.getByRole('combobox', { name: 'Eenheid' }), '%')
+
+    await waitFor(() => expect(readout(canvasElement)).toBe('100 % · 1'))
+  },
+}
+
+/** An optional field without a value: empty means none, shown as the placeholder next to the unit. */
+export const OptionalEmpty: Story = {
+  args: { optional: true },
+  render: (args) => render(args, null),
+}
+
+/**
+ * Optional with both units: the selector stays in sight on an empty field, so
+ * the unit can be picked before a value is typed -- Tab from the input reaches it.
+ */
+export const OptionalEmptyWithUnits: Story = {
+  args: { optional: true, units: ['px', '%'] },
+  render: (args) => render(args, null),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    expect(canvas.getByRole('combobox', { name: 'Eenheid' })).toBeVisible()
+
+    await userEvent.click(canvas.getByRole('spinbutton'))
+    await userEvent.tab()
+    const select = canvas.getByRole('combobox', { name: 'Eenheid' })
+    expect(select).toHaveFocus()
+
+    await userEvent.selectOptions(select, '%')
+    await userEvent.click(canvas.getByRole('spinbutton'))
+    await userEvent.type(canvas.getByRole('spinbutton'), '250')
+    await userEvent.keyboard('{Enter}')
+
+    await waitFor(() => expect(readout(canvasElement)).toBe('100 % · 1'))
+  },
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Width',
+    optional: true,
+    units: ['px', '%'],
+    messages: { placeholder: 'None', unit: 'Unit', px: 'px', percent: '%' },
+  },
+  render: (args) => render(args, null),
+}