@nexxtmove/ui 2.5.0 → 2.7.0

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

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Skeleton from './Skeleton.vue'
+
+describe('Skeleton', () => {
+  it('renders with default classes', () => {
+    const wrapper = mount(Skeleton)
+
+    expect(wrapper.find('.animate-pulse').exists()).toBe(true)
+    expect(wrapper.find('.bg-gray-200').exists()).toBe(true)
+  })
+
+  // The pulse is decoration, so it stops entirely under reduced motion instead of slowing down
+  it('stops pulsing under reduced motion', () => {
+    const wrapper = mount(Skeleton)
+
+    expect(wrapper.classes()).toContain('motion-reduce:animate-none')
+  })
+
+  it('applies custom class via attrs', () => {
+    const wrapper = mount(Skeleton, {
+      attrs: { class: 'h-10 w-40' },
+    })
+
+    expect(wrapper.find('.h-10').exists()).toBe(true)
+    expect(wrapper.find('.w-40').exists()).toBe(true)
+  })
+})

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

@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Slider from './Slider.vue'
+
+export default {
+  title: 'Components/Atoms/Slider',
+  component: Slider,
+  argTypes: {
+    modelValue: {
+      control: 'object',
+    },
+    color: {
+      control: 'select',
+      options: ['blue', 'green'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: 'select',
+      options: ['filled', 'plain'],
+    },
+    label: {
+      control: 'text',
+    },
+    valueSuffix: {
+      control: 'text',
+    },
+    showValue: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    modelValue: [25],
+    min: 0,
+    max: 100,
+    step: 1,
+    color: 'blue',
+    size: 'md',
+    variant: 'filled',
+    showValue: false,
+    disabled: false,
+  },
+} satisfies Meta<typeof Slider>
+
+type Story = StoryObj<typeof Slider>
+
+export const Default: Story = {}
+
+export const WithLabel: Story = {
+  args: {
+    label: 'Ronding',
+  },
+}
+
+export const WithValue: Story = {
+  args: {
+    label: 'Ronding',
+    showValue: true,
+    valueSuffix: 'px',
+    max: 50,
+    modelValue: [12],
+  },
+}
+
+export const Percentage: Story = {
+  args: {
+    label: 'Marge',
+    showValue: true,
+    valueSuffix: '%',
+    modelValue: [40],
+  },
+}
+
+/** Two values means two thumbs — no extra prop needed */
+export const Range: Story = {
+  args: {
+    label: 'Prijsklasse',
+    showValue: true,
+    min: 0,
+    max: 1000,
+    step: 10,
+    minStepsBetweenThumbs: 1,
+    modelValue: [200, 800],
+  },
+}
+
+/** Neutral track, coloured thumb — quieter, and pairs well with a value readout */
+export const Plain: Story = {
+  args: {
+    label: 'Ronding',
+    variant: 'plain',
+    showValue: true,
+    valueSuffix: 'px',
+    max: 50,
+    modelValue: [8],
+  },
+}
+
+/** The accent is per-instance, so a slider can match the context it sits in */
+export const Green: Story = {
+  args: {
+    label: 'Voortgang',
+    color: 'green',
+    showValue: true,
+    valueSuffix: '%',
+    modelValue: [60],
+  },
+}
+
+export const Small: Story = {
+  args: {
+    label: 'Lijndikte',
+    size: 'sm',
+    showValue: true,
+    max: 50,
+    modelValue: [8],
+  },
+}
+
+export const Medium: Story = {
+  args: {
+    label: 'Lijndikte',
+    size: 'md',
+    showValue: true,
+    max: 50,
+    modelValue: [8],
+  },
+}
+
+export const Large: Story = {
+  args: {
+    label: 'Lijndikte',
+    size: 'lg',
+    showValue: true,
+    max: 50,
+    modelValue: [8],
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    label: 'Ronding',
+    showValue: true,
+    valueSuffix: 'px',
+    disabled: true,
+  },
+}

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

@@ -0,0 +1,191 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Slider from './Slider.vue'
+
+// jsdom ships no ResizeObserver, and reka-ui's slider observes its track to place the thumbs
+vi.stubGlobal(
+  'ResizeObserver',
+  class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  },
+)
+
+// jsdom implements no pointer capture either, and reka-ui captures the pointer on thumb pointerdown
+Element.prototype.setPointerCapture ??= () => {}
+Element.prototype.releasePointerCapture ??= () => {}
+Element.prototype.hasPointerCapture ??= () => false
+
+describe('Slider', () => {
+  it('renders a slider role', () => {
+    const wrapper = mount(Slider)
+
+    expect(wrapper.find('[role="slider"]').exists()).toBe(true)
+  })
+
+  it('renders one thumb per value', () => {
+    const wrapper = mount(Slider, { props: { modelValue: [20, 80] } })
+
+    expect(wrapper.findAll('[role="slider"]')).toHaveLength(2)
+  })
+
+  it('renders a single thumb by default', () => {
+    const wrapper = mount(Slider)
+
+    expect(wrapper.findAll('[role="slider"]')).toHaveLength(1)
+  })
+
+  // aria-valuenow is left out on purpose: reka-ui fills it once the thumb registers with its
+  // collection, which needs a layout pass jsdom never performs
+  it('exposes min and max on the thumb', () => {
+    const wrapper = mount(Slider, { props: { modelValue: [30], min: 5, max: 40 } })
+    const thumb = wrapper.find('[role="slider"]')
+
+    expect(thumb.attributes('aria-valuemin')).toBe('5')
+    expect(thumb.attributes('aria-valuemax')).toBe('40')
+  })
+
+  it('fills the range with the blue accent by default', () => {
+    const wrapper = mount(Slider)
+
+    expect(wrapper.html()).toContain('bg-cornflower-blue-500')
+  })
+
+  it('fills the range with the chosen accent', () => {
+    const wrapper = mount(Slider, { props: { color: 'green' } })
+
+    expect(wrapper.html()).toContain('bg-green-400')
+    expect(wrapper.html()).not.toContain('bg-cornflower-blue-500')
+  })
+
+  it('colours the thumb instead of the track in the plain variant', () => {
+    const wrapper = mount(Slider, { props: { variant: 'plain' } })
+    const thumb = wrapper.find('[role="slider"]')
+
+    expect(thumb.classes()).toContain('bg-cornflower-blue-500')
+    expect(thumb.classes()).not.toContain('bg-white')
+    expect(wrapper.html()).toContain('bg-transparent')
+  })
+
+  it('follows the accent in the plain variant', () => {
+    const wrapper = mount(Slider, { props: { variant: 'plain', color: 'green' } })
+
+    expect(wrapper.find('[role="slider"]').classes()).toContain('bg-green-400')
+  })
+
+  it('leaves the thumb white in the filled variant', () => {
+    const wrapper = mount(Slider)
+
+    expect(wrapper.find('[role="slider"]').classes()).toContain('bg-white')
+  })
+
+  it('scales the track with size', () => {
+    const wrapper = mount(Slider, { props: { size: 'lg' } })
+
+    expect(wrapper.html()).toContain('h-1.5')
+  })
+
+  // reka-ui preventDefaults the pointerdown and refocuses the thumb from script, so :focus-visible
+  // alone cannot tell a click from a keypress — the component tracks the modality itself
+  it('suppresses the focus ring after a pointer interaction', async () => {
+    const wrapper = mount(Slider)
+    await wrapper.find('[role="slider"]').trigger('pointerdown')
+
+    expect(wrapper.find('[role="slider"]').classes()).toContain('focus-visible:outline-none')
+  })
+
+  it('restores the focus ring once a key is used', async () => {
+    const wrapper = mount(Slider)
+    const thumb = wrapper.find('[role="slider"]')
+    await thumb.trigger('pointerdown')
+    await thumb.trigger('keydown', { key: 'ArrowRight' })
+
+    expect(wrapper.find('[role="slider"]').classes()).toContain('focus-visible:outline-2')
+  })
+
+  it('restores the focus ring once focus leaves the slider', async () => {
+    const wrapper = mount(Slider)
+    await wrapper.find('[role="slider"]').trigger('pointerdown')
+    await wrapper.find('[role="slider"]').trigger('focusout', { relatedTarget: null })
+
+    expect(wrapper.find('[role="slider"]').classes()).toContain('focus-visible:outline-2')
+  })
+
+  it('renders no label by default', () => {
+    const wrapper = mount(Slider)
+
+    expect(wrapper.find('label').exists()).toBe(false)
+  })
+
+  it('renders the label when given', () => {
+    const wrapper = mount(Slider, { props: { label: 'Ronding' } })
+
+    expect(wrapper.find('label').text()).toBe('Ronding')
+  })
+
+  it('labels the thumb with the label', () => {
+    const wrapper = mount(Slider, { props: { label: 'Ronding' } })
+
+    expect(wrapper.find('[role="slider"]').attributes('aria-label')).toBe('Ronding')
+  })
+
+  it('names the thumb with ariaLabel when there is no visible label', () => {
+    const wrapper = mount(Slider, { props: { ariaLabel: 'Tussenruimte' } })
+
+    expect(wrapper.find('[role="slider"]').attributes('aria-label')).toBe('Tussenruimte')
+    expect(wrapper.find('label').exists()).toBe(false)
+  })
+
+  // The model can be an index into a scale, in which case aria-valuenow announces a number the user
+  // never sees. This is the only way to correct that from outside the component.
+  it('announces ariaValuetext on the thumb', () => {
+    const wrapper = mount(Slider, { props: { modelValue: [4], ariaValuetext: '16 px' } })
+
+    expect(wrapper.find('[role="slider"]').attributes('aria-valuetext')).toBe('16 px')
+  })
+
+  it('leaves both aria attributes off the thumb when neither prop is given', () => {
+    const thumb = mount(Slider).find('[role="slider"]')
+
+    expect(thumb.attributes('aria-label')).toBeUndefined()
+    expect(thumb.attributes('aria-valuetext')).toBeUndefined()
+  })
+
+  // One string cannot describe two thumbs, so it is dropped rather than repeated on both.
+  it('omits ariaValuetext on a range', () => {
+    const wrapper = mount(Slider, { props: { modelValue: [20, 80], ariaValuetext: '16 px' } })
+
+    for (const thumb of wrapper.findAll('[role="slider"]')) {
+      expect(thumb.attributes('aria-valuetext')).toBeUndefined()
+    }
+  })
+
+  it('hides the value by default', () => {
+    const wrapper = mount(Slider, { props: { modelValue: [12] } })
+
+    expect(wrapper.text()).not.toContain('12')
+  })
+
+  it('shows the value with its suffix when showValue is set', () => {
+    const wrapper = mount(Slider, {
+      props: { modelValue: [12], showValue: true, valueSuffix: 'px' },
+    })
+
+    expect(wrapper.text()).toContain('12px')
+  })
+
+  it('shows both ends of a range', () => {
+    const wrapper = mount(Slider, {
+      props: { modelValue: [200, 800], showValue: true, max: 1000 },
+    })
+
+    expect(wrapper.text()).toContain('200 – 800')
+  })
+
+  it('disables the slider when disabled', () => {
+    const wrapper = mount(Slider, { props: { disabled: true } })
+
+    expect(wrapper.find('[role="slider"]').attributes('data-disabled')).toBeDefined()
+  })
+})

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

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Squircle from './Squircle.vue'
+import propertyPlaceholder from '../../../assets/images/property_placeholder.jpg'
+
+export default {
+  title: 'Components/Atoms/Squircle',
+  component: Squircle,
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+  },
+} satisfies Meta<typeof Squircle>
+
+type Story = StoryObj<typeof Squircle>
+
+const imageSlot = `<img src="${propertyPlaceholder}" style="width:100%;height:100%;object-fit:cover;" />`
+
+export const ExtraSmall: Story = {
+  args: { size: 'xs' },
+  render: (args) => ({
+    components: { Squircle },
+    setup: () => ({ args }),
+    template: `<Squircle v-bind="args">${imageSlot}</Squircle>`,
+  }),
+}
+
+export const Small: Story = {
+  args: { size: 'sm' },
+  render: (args) => ({
+    components: { Squircle },
+    setup: () => ({ args }),
+    template: `<Squircle v-bind="args">${imageSlot}</Squircle>`,
+  }),
+}
+
+export const Medium: Story = {
+  args: { size: 'md' },
+  render: (args) => ({
+    components: { Squircle },
+    setup: () => ({ args }),
+    template: `<Squircle v-bind="args">${imageSlot}</Squircle>`,
+  }),
+}
+
+export const Large: Story = {
+  args: { size: 'lg' },
+  render: (args) => ({
+    components: { Squircle },
+    setup: () => ({ args }),
+    template: `<Squircle v-bind="args">${imageSlot}</Squircle>`,
+  }),
+}
+
+export const ExtraLarge: Story = {
+  args: { size: 'xl' },
+  render: (args) => ({
+    components: { Squircle },
+    setup: () => ({ args }),
+    template: `<Squircle v-bind="args">${imageSlot}</Squircle>`,
+  }),
+}
+
+export const CustomSize: Story = {
+  args: { size: 120 },
+  argTypes: {
+    size: {
+      control: { type: 'number' },
+    },
+  },
+  render: (args) => ({
+    components: { Squircle },
+    setup: () => ({ args }),
+    template: `<Squircle v-bind="args">${imageSlot}</Squircle>`,
+  }),
+}
+
+export const WithImage: Story = {
+  args: { size: 'md' },
+  render: (args) => ({
+    components: { Squircle },
+    setup: () => ({ args }),
+    template: `<Squircle v-bind="args">${imageSlot}</Squircle>`,
+  }),
+}
+
+export const WithColor: Story = {
+  args: { size: 'md' },
+  render: (args) => ({
+    components: { Squircle },
+    setup: () => ({ args }),
+    template: `
+      <Squircle v-bind="args">
+        <div style="width:100%;height:100%;background:#6366f1;display:flex;align-items:center;justify-content:center;">
+          <span style="color:white;font-size:1.5em;">✦</span>
+        </div>
+      </Squircle>
+    `,
+  }),
+}
+
+export const WithGradient: Story = {
+  args: { size: 'md' },
+  render: (args) => ({
+    components: { Squircle },
+    setup: () => ({ args }),
+    template: `
+      <Squircle v-bind="args">
+        <div style="width:100%;height:100%;background:linear-gradient(135deg,#f97316,#ec4899);" />
+      </Squircle>
+    `,
+  }),
+}

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

@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Squircle from './Squircle.vue'
+
+describe('Squircle', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(Squircle, {
+      slots: {
+        default: '<div class="test-content">Content</div>',
+      },
+    })
+
+    expect(wrapper.find('.test-content').exists()).toBe(true)
+    expect(wrapper.find('.test-content').text()).toBe('Content')
+  })
+
+  it('applies default size (md)', () => {
+    const wrapper = mount(Squircle)
+
+    // md = 40px
+    expect(wrapper.attributes('style')).toContain('width: 40px')
+    expect(wrapper.attributes('style')).toContain('height: 40px')
+  })
+
+  it('applies named sizes correctly', () => {
+    const sizes = {
+      xs: '24',
+      sm: '32',
+      md: '40',
+      lg: '48',
+      xl: '64',
+    } as const
+
+    for (const [name, value] of Object.entries(sizes)) {
+      const wrapper = mount(Squircle, {
+        props: { size: name as keyof typeof sizes },
+      })
+      expect(wrapper.attributes('style')).toContain(`width: ${value}px`)
+      expect(wrapper.attributes('style')).toContain(`height: ${value}px`)
+    }
+  })
+
+  it('applies custom numeric size', () => {
+    const wrapper = mount(Squircle, {
+      props: { size: 120 },
+    })
+
+    expect(wrapper.attributes('style')).toContain('width: 120px')
+    expect(wrapper.attributes('style')).toContain('height: 120px')
+  })
+
+  it('clips the container with a unique clip-path', () => {
+    const wrapper = mount(Squircle)
+    const clipPath = wrapper.find('clipPath')
+    const id = clipPath.attributes('id')
+
+    expect(id).toMatch(/^squircle-clip-/)
+    expect(wrapper.attributes('style')).toMatch(new RegExp(`clip-path: url\\("?#${id}"?\\)`))
+  })
+
+  it('defines the squircle clipPath in objectBoundingBox units', () => {
+    const wrapper = mount(Squircle, { props: { size: 100 } })
+    const clipPath = wrapper.find('clipPath')
+    const path = clipPath.find('path')
+
+    expect(clipPath.attributes('clipPathUnits')).toBe('objectBoundingBox')
+    expect(path.exists()).toBe(true)
+    expect(path.attributes('d')).toContain('M0.5,1')
+  })
+})

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

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import Switch from './Switch.vue'
+
+export default {
+  title: 'Components/Atoms/Switch',
+  component: Switch,
+  argTypes: {
+    modelValue: {
+      control: 'boolean',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    color: {
+      control: 'select',
+      options: ['blue', 'green'],
+    },
+    labelPosition: {
+      control: 'select',
+      options: ['before', 'after'],
+    },
+    iconOn: {
+      control: 'text',
+    },
+    iconOff: {
+      control: 'text',
+    },
+    default: {
+      control: 'text',
+    },
+  },
+  args: {
+    modelValue: false,
+    size: 'lg',
+    color: 'blue',
+    labelPosition: 'after',
+  },
+} satisfies Meta<typeof Switch>
+
+type Story = StoryObj<typeof Switch>
+
+export const Default: Story = {}
+
+export const Green: Story = {
+  args: { color: 'green' },
+}
+
+export const WithIcons: Story = {
+  args: { iconOn: 'check', iconOff: 'xmark' },
+}
+
+export const GreenWithIcons: Story = {
+  args: { color: 'green', iconOn: 'check', iconOff: 'xmark' },
+}
+
+export const Small: Story = {
+  args: { size: 'sm' },
+}
+
+export const Medium: Story = {
+  args: { size: 'md' },
+}
+
+export const Large: Story = {
+  args: { size: 'lg' },
+}
+
+export const LabelAfter: Story = {
+  args: { default: 'Enable notifications', labelPosition: 'after' },
+}
+
+export const LabelBefore: Story = {
+  args: { default: 'Enable notifications', labelPosition: 'before' },
+}
+
+export const KeyboardFocus: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const input = canvas.getByRole('switch')
+    const track = input.nextElementSibling as HTMLElement
+
+    await userEvent.tab()
+
+    await waitFor(() => {
+      expect(input).toHaveFocus()
+      expect(getComputedStyle(track).outlineWidth).toBe('2px')
+    })
+  },
+}