@nexxtmove/ui 2.6.0 → 2.7.0

package/src/components/molecules/PlaceholderInput/PlaceholderInput.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import PlaceholderInput from './PlaceholderInput.vue'
+import type { NexxtPlaceholderGroup } from './PlaceholderInput.vue'
+
+const groups: NexxtPlaceholderGroup[] = [
+  { label: 'Contact', items: ['contact voornaam', 'contact achternaam', 'contact woonplaats'] },
+  { label: 'Woning', items: ['woning adres', 'woning plaats', 'woning prijs'] },
+]
+
+export default {
+  title: 'Components/Molecules/Placeholder Input',
+  component: PlaceholderInput,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+  },
+  args: { placeholders: groups, label: 'Titel' },
+} satisfies Meta<typeof PlaceholderInput>
+
+type Story = StoryObj<typeof PlaceholderInput>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { PlaceholderInput },
+    setup() {
+      const text = ref('Beste {{contact voornaam}},')
+      return { args, text }
+    },
+    // The value is shown as-is: the placeholders are stored as `{{key}}` in the text.
+    template: `
+      <div class="flex flex-col gap-4">
+        <PlaceholderInput v-bind="args" v-model="text" />
+        <p class="small-normal text-gray-700">{{ text }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const SingleGroup: Story = {
+  args: { placeholders: [groups[0]] },
+}
+
+export const Disabled: Story = {
+  args: { disabled: true },
+}

package/src/components/molecules/PlaceholderInput/PlaceholderInput.test.ts

@@ -0,0 +1,107 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
+import PlaceholderInput from './PlaceholderInput.vue'
+
+vi.mock('@floating-ui/vue', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@floating-ui/vue')>()
+  return {
+    ...actual,
+    useFloating: () => ({
+      floatingStyles: ref({}),
+      placement: ref('bottom-end'),
+      isPositioned: ref(true),
+    }),
+    autoUpdate: () => () => {},
+  }
+})
+
+const groups = [
+  { label: 'Contact', items: ['contact voornaam', 'contact achternaam'] },
+  { label: 'Woning', items: ['woning adres'] },
+]
+
+const openMenu = async (wrapper: ReturnType<typeof mount>) => {
+  await wrapper.find('button[aria-label="Placeholder invoegen"]').trigger('click')
+  await flushPromises()
+  await nextTick()
+}
+
+describe('NexxtPlaceholderInput', () => {
+  it('renders the label and the wand button', () => {
+    const wrapper = mount(PlaceholderInput, { props: { placeholders: groups, label: 'Titel' } })
+
+    expect(wrapper.find('label').text()).toBe('Titel')
+    expect(wrapper.find('button[aria-label="Placeholder invoegen"]').exists()).toBe(true)
+  })
+
+  it('lists the placeholders per group when the wand is clicked', async () => {
+    const wrapper = mount(PlaceholderInput, { props: { placeholders: groups } })
+    await openMenu(wrapper)
+
+    const options = wrapper.findAll('[role="option"]')
+    expect(options.map((option) => option.text())).toEqual([
+      'contact voornaam',
+      'contact achternaam',
+      'woning adres',
+    ])
+    expect(wrapper.text()).toContain('Contact')
+    expect(wrapper.text()).toContain('Woning')
+  })
+
+  it('leaves the group heading out when there is one group', async () => {
+    const wrapper = mount(PlaceholderInput, { props: { placeholders: [groups[0]] } })
+    await openMenu(wrapper)
+
+    expect(wrapper.text()).not.toContain('Contact')
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(2)
+  })
+
+  it('inserts the placeholder at the caret and closes the menu', async () => {
+    const wrapper = mount(PlaceholderInput, {
+      props: { placeholders: groups, modelValue: 'Beste , welkom' },
+      attachTo: document.body,
+    })
+    const input = wrapper.find('input').element as HTMLInputElement
+    input.focus()
+    input.setSelectionRange(6, 6)
+
+    await openMenu(wrapper)
+    await wrapper.findAll('[role="option"]')[0].trigger('click')
+    await flushPromises()
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([
+      'Beste {{contact voornaam}}, welkom',
+    ])
+    expect(wrapper.findAll('[role="option"]')).toHaveLength(0)
+
+    wrapper.unmount()
+  })
+
+  it('appends when the field was never focused', async () => {
+    const wrapper = mount(PlaceholderInput, {
+      props: { placeholders: groups, modelValue: 'Hallo ' },
+    })
+    await openMenu(wrapper)
+    await wrapper.findAll('[role="option"]')[2].trigger('click')
+
+    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual(['Hallo {{woning adres}}'])
+  })
+
+  it('uses the given button text', () => {
+    const wrapper = mount(PlaceholderInput, {
+      props: { placeholders: groups, messages: { insert: 'Veld invoegen' } },
+    })
+
+    expect(wrapper.find('button[aria-label="Veld invoegen"]').exists()).toBe(true)
+  })
+
+  it('disables the wand along with the field', () => {
+    const wrapper = mount(PlaceholderInput, { props: { placeholders: groups, disabled: true } })
+
+    expect(
+      wrapper.find('button[aria-label="Placeholder invoegen"]').attributes('disabled'),
+    ).toBeDefined()
+    expect(wrapper.find('input').attributes('disabled')).toBeDefined()
+  })
+})

package/src/components/molecules/PropertyCard/PropertyCard.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import PropertyCard from './PropertyCard.vue'
+
+export default {
+  title: 'Components/Molecules/Property card',
+  component: PropertyCard,
+} satisfies Meta<typeof PropertyCard>
+
+type Story = StoryObj<typeof PropertyCard>
+
+export const Default: Story = {
+  args: {
+    image: 'https://placehold.co/333x160',
+    imageAlt: 'Hollandscheveld - Van Echtenstraat 62b',
+    price: 520000,
+    city: 'Hollandscheveld',
+    text: 'Van Echtenstraat 62b',
+  },
+}
+
+export const WithoutImage: Story = {
+  args: {
+    price: 520000,
+    city: 'Hollandscheveld',
+    text: 'Van Echtenstraat 62b',
+  },
+}
+
+export const LongText: Story = {
+  args: {
+    image: 'https://placehold.co/333x160',
+    imageAlt: 'Hollandscheveld - Van Echtenstraat 62b',
+    price: 520000,
+    city: 'Hollandscheveld',
+    text: 'Van Echtenstraat 62b, 7913 VB, Hollandscheveld, Nederland. Dit is een extra lang adres om te testen of de tekst netjes afbreekt en de kaart langer wordt.',
+  },
+}
+
+export const OverflowingCity: Story = {
+  args: {
+    image: 'https://placehold.co/333x160',
+    imageAlt: 'Hollandscheveld - Van Echtenstraat 62b',
+    price: 1250000,
+    city: 'Nieuw-Amsterdam en Veenoord',
+  },
+}

package/src/components/molecules/PropertyCard/PropertyCard.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import PropertyCard from './PropertyCard.vue'
+
+describe('PropertyCard', () => {
+  it('renders with image and property details', () => {
+    const wrapper = mount(PropertyCard, {
+      props: {
+        image: 'https://placehold.co/333x160',
+        price: 520000,
+        city: 'Hollandscheveld',
+        text: 'Van Echtenstraat 62b',
+      },
+    })
+
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.text()).toContain('€')
+    expect(wrapper.text()).toContain('520.000')
+    expect(wrapper.text()).toContain('Hollandscheveld')
+    expect(wrapper.text()).toContain('Van Echtenstraat 62b')
+  })
+
+  it('renders placeholder with blurred overlay when no image provided', () => {
+    const wrapper = mount(PropertyCard, {
+      props: { city: 'Hollandscheveld' },
+    })
+
+    expect(wrapper.find('img').exists()).toBe(true)
+    expect(wrapper.find('.backdrop-blur-sm').exists()).toBe(true)
+    expect(wrapper.find('.backdrop-blur-sm i.fa-house').exists()).toBe(true)
+  })
+
+  it('does not render placeholder when image is provided', () => {
+    const wrapper = mount(PropertyCard, {
+      props: {
+        image: 'https://placehold.co/333x160',
+        city: 'Hollandscheveld',
+      },
+    })
+
+    expect(wrapper.find('.backdrop-blur-sm').exists()).toBe(false)
+  })
+
+  it('renders with long text', () => {
+    const longText =
+      'Van Echtenstraat 62b, 7913 VB, Hollandscheveld, Nederland. Dit is een extra lang adres om te testen of de tekst netjes afbreekt en de kaart langer wordt.'
+
+    const wrapper = mount(PropertyCard, {
+      props: {
+        image: 'https://placehold.co/333x160',
+        price: 520000,
+        city: 'Hollandscheveld',
+        text: longText,
+      },
+    })
+
+    expect(wrapper.text()).toContain(longText)
+  })
+})

package/src/components/molecules/Select/Select.stories.ts

@@ -0,0 +1,264 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test'
+import NexxtSelect from './Select.vue'
+
+export default {
+  title: 'Components/Molecules/Select',
+  component: NexxtSelect,
+  decorators: [
+    () => ({
+      template:
+        '<div style="min-height: 250px; padding: 16px; display: flex;  justify-content: center;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<typeof NexxtSelect>
+
+type Story = StoryObj<typeof NexxtSelect>
+
+const stringOptions = ['Optie 1', 'Optie 2', 'Optie 3']
+
+const objectOptions = [
+  { label: 'Amsterdam', value: 'ams' },
+  { label: 'Rotterdam', value: 'rot' },
+  { label: 'Utrecht', value: 'utr' },
+  { label: 'Den Haag', value: 'dhg' },
+]
+
+const render = (args: Story['args']) => ({
+  components: { NexxtSelect },
+  setup() {
+    return { args }
+  },
+  template: `
+    <NexxtSelect
+      v-bind="args"
+      :modelValue="args.modelValue"
+      @update:modelValue="args.modelValue = $event"
+    />
+  `,
+})
+
+export const Default: Story = {
+  render,
+  args: {
+    options: stringOptions,
+    placeholder: 'Selecteer...',
+    modelValue: null,
+  },
+  // Without a width of its own the field keeps its 240px floor, and the list
+  // opens exactly as wide as the field.
+  play: async ({ canvasElement }) => {
+    const trigger = within(canvasElement).getByRole('combobox')
+    await expect(trigger.offsetWidth).toBe(240)
+    await userEvent.click(trigger)
+    const listbox = await screen.findByRole('listbox')
+    await waitFor(() => expect(listbox.offsetWidth).toBe(trigger.offsetWidth))
+    await userEvent.click(trigger)
+  },
+}
+
+export const WithLabel: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Stad',
+    options: objectOptions,
+  },
+}
+
+export const WithValue: Story = {
+  render,
+  args: {
+    ...Default.args,
+    options: objectOptions,
+    modelValue: 'rot',
+    label: 'Stad',
+  },
+}
+
+export const WithLeftIcon: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Stad',
+    options: objectOptions,
+    leftIcon: 'location-dot',
+  },
+}
+
+/**
+ * An option can carry its own `icon`. It is rendered before the label in the
+ * list, and in the field once that option is selected — unless `leftIcon` is
+ * set, which always wins.
+ */
+export const WithIcons: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Type',
+    options: [
+      { label: 'Heading 1', value: 'h1', icon: 'h1' },
+      { label: 'Heading 2', value: 'h2', icon: 'h2' },
+      { label: 'Heading 3', value: 'h3', icon: 'h3' },
+    ],
+    modelValue: 'h1',
+  },
+}
+
+export const Required: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Verplicht veld',
+    options: objectOptions,
+    required: true,
+  },
+}
+
+export const Error: Story = {
+  render,
+  args: {
+    ...Default.args,
+    label: 'Stad',
+    options: objectOptions,
+    error: true,
+    errorMessage: 'Dit veld is verplicht',
+  },
+}
+
+const manyOptions = [
+  { label: 'Amsterdam', value: 'ams' },
+  { label: 'Rotterdam', value: 'rot' },
+  { label: 'Utrecht', value: 'utr' },
+  { label: 'Den Haag', value: 'dhg' },
+  { label: 'Eindhoven', value: 'ein' },
+  { label: 'Groningen', value: 'gro' },
+  { label: 'Maastricht', value: 'maa' },
+  { label: 'Nijmegen', value: 'nij' },
+]
+
+/**
+ * Keyboard navigation. There are no new props for this — the behaviour lives
+ * entirely in key handling, so it can only be seen by using it. Tab to the
+ * combobox below and try the keys listed beside it.
+ *
+ * The list is deliberately long: with three options, wrapping past the end and
+ * Home/End are invisible, because the first and last option are almost the same
+ * place. With eight, every one of these keys does something you can see.
+ */
+export const KeyboardNavigation: Story = {
+  render: (args) => ({
+    components: { NexxtSelect },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="display: flex; gap: 32px; align-items: flex-start; font-family: system-ui, sans-serif;">
+        <NexxtSelect
+          v-bind="args"
+          :modelValue="args.modelValue"
+          @update:modelValue="args.modelValue = $event"
+        />
+        <dl style="margin: 0; font-size: 13px; color: #374151; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: baseline;">
+          <dt style="font-weight: 600;">Tab</dt><dd style="margin: 0;">move focus to the combobox</dd>
+          <dt style="font-weight: 600;">Enter / Space</dt><dd style="margin: 0;">open the list, then select the active option</dd>
+          <dt style="font-weight: 600;">Arrow down</dt><dd style="margin: 0;">next option, wrapping from the last back to the first</dd>
+          <dt style="font-weight: 600;">Arrow up</dt><dd style="margin: 0;">previous option, wrapping from the first to the last</dd>
+          <dt style="font-weight: 600;">Home / End</dt><dd style="margin: 0;">jump to the first / last option</dd>
+          <dt style="font-weight: 600;">Escape</dt><dd style="margin: 0;">close the list, leaving the value unchanged</dd>
+        </dl>
+      </div>
+    `,
+  }),
+  args: {
+    options: manyOptions,
+    label: 'Stad',
+    placeholder: 'Selecteer...',
+    modelValue: null,
+  },
+}
+
+/**
+ * The same long list with a value already selected. Opening with the keyboard
+ * should start from the selected option rather than the top of the list, so this
+ * is where to check that Arrow down from `Maastricht` goes to `Nijmegen` and not
+ * back to `Amsterdam`.
+ */
+export const KeyboardNavigationWithValue: Story = {
+  render,
+  args: {
+    options: manyOptions,
+    label: 'Stad',
+    placeholder: 'Selecteer...',
+    modelValue: 'maa',
+  },
+}
+
+const longOptions = [
+  { label: 'Een bijzonder lange optie die nooit in het veld past', value: 'long' },
+  { label: 'Kort', value: 'short' },
+]
+
+/**
+ * Narrow fields. Without a width of its own the select is 240px wide, also
+ * inside a shrink-to-fit wrapper (`w-fit`, or `absolute` without a width), but
+ * never wider than its container: in a 200px column it is 200px, with or
+ * without `w-full`. A width class of your own (`w-48`) just works; no `min-w-0`
+ * needed. A label that does not fit is cut off with an ellipsis, and the chevron
+ * stays inside the ring.
+ */
+export const Narrow: Story = {
+  render: (args) => ({
+    components: { NexxtSelect },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="position: relative; display: flex; flex-direction: column; gap: 24px; padding-bottom: 64px;">
+        <NexxtSelect v-bind="args" class="w-60" aria-label="w-60" />
+        <NexxtSelect v-bind="args" class="w-48" aria-label="w-48" />
+        <div style="width: 200px;">
+          <NexxtSelect v-bind="args" class="w-full" aria-label="w-full" />
+        </div>
+        <div style="width: 200px;">
+          <NexxtSelect v-bind="args" aria-label="column" />
+        </div>
+        <div class="w-fit">
+          <NexxtSelect v-bind="args" aria-label="w-fit" />
+        </div>
+        <div style="position: absolute; bottom: 0; left: 0;">
+          <NexxtSelect v-bind="args" aria-label="absolute" />
+        </div>
+      </div>
+    `,
+  }),
+  args: {
+    options: longOptions,
+    modelValue: 'long',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const expected = {
+      'w-60': 240,
+      'w-48': 192,
+      'w-full': 200,
+      column: 200,
+      'w-fit': 240,
+      absolute: 240,
+    }
+
+    for (const [name, width] of Object.entries(expected)) {
+      const trigger = canvas.getByRole('combobox', { name })
+      // offsetWidth, not the rect: the test canvas is zoomed.
+      await expect(trigger.offsetWidth).toBe(width)
+
+      const chevron = trigger.lastElementChild as HTMLElement
+      const ring = trigger.getBoundingClientRect()
+      await expect(chevron.getBoundingClientRect().right).toBeLessThanOrEqual(ring.right)
+
+      const text = within(trigger).getByText(longOptions[0]!.label)
+      await expect(text.scrollWidth).toBeGreaterThan(text.clientWidth)
+      await expect(getComputedStyle(text).textOverflow).toBe('ellipsis')
+    }
+  },
+}