@nexxtmove/ui 2.5.0 → 2.7.0

package/src/components/molecules/Tree/tree-drop.test.ts

@@ -0,0 +1,223 @@
+import { describe, expect, it } from 'vitest'
+import type { NexxtTreeNode } from './Tree.vue'
+import {
+  ghostSlot,
+  hitTest,
+  isNoOp,
+  resolveDrop,
+  samePlace,
+  type RestSlot,
+  type TreeDrop,
+  type TreeRow,
+} from './tree-drop'
+
+const NODES: NexxtTreeNode[] = [
+  {
+    id: 'page',
+    label: 'Pagina',
+    children: [
+      { id: 'image', label: 'Afbeelding' },
+      {
+        id: 'group',
+        label: 'Groep',
+        children: [
+          { id: 'title', label: 'Titel' },
+          { id: 'text', label: 'Tekst' },
+        ],
+      },
+      { id: 'empty', label: 'Lege groep', children: [] },
+    ],
+  },
+  { id: 'about', label: 'Over ons' },
+]
+
+/** The visible rows of `NODES`, as the tree flattens them. */
+const rowsOf = (collapsed: string[] = []) => {
+  const rows: TreeRow[] = []
+  const walk = (nodes: NexxtTreeNode[], depth: number, parentId: string | null) =>
+    nodes.forEach((node, index) => {
+      const expandable = !!node.children?.length
+      const expanded = expandable && !collapsed.includes(node.id)
+      rows.push({
+        node,
+        depth,
+        parentId,
+        expandable,
+        canHaveChildren: !!node.children,
+        draggable: true,
+        expanded,
+        position: index + 1,
+        setSize: nodes.length,
+      })
+      if (expanded) walk(node.children!, depth + 1, node.id)
+    })
+  walk(NODES, 0, null)
+
+  return rows
+}
+
+const row = (id: string, collapsed?: string[]) =>
+  rowsOf(collapsed).find((item) => item.node.id === id)!
+
+const drop = (parentId: string | null, index: number): TreeDrop => ({
+  rowId: 'any',
+  parentId,
+  index,
+  marker: 'before',
+})
+
+describe('hitTest', () => {
+  // three 28px rows with a 2px gap under each
+  const slots: RestSlot[] = ['a', 'b', 'c'].map((id, index) => ({
+    id,
+    top: index * 30,
+    height: 28,
+    bottom: index * 30 + 30,
+  }))
+
+  it('reads the row under the pointer and how far down it is', () => {
+    expect(hitTest({ slots, ghost: null }, 37)).toEqual({ kind: 'row', id: 'b', ratio: 0.25 })
+  })
+
+  it('counts a gap as the bottom of the row above it', () => {
+    expect(hitTest({ slots, ghost: null }, 29)).toEqual({ kind: 'row', id: 'a', ratio: 1 })
+  })
+
+  it('keeps the spot while the pointer is on the ghost row, its gap included', () => {
+    const ghost = { top: 30, bottom: 60 }
+
+    expect(hitTest({ slots, ghost }, 30)).toEqual({ kind: 'keep' })
+    expect(hitTest({ slots, ghost }, 59)).toEqual({ kind: 'keep' })
+  })
+
+  it('reads a pointer below the ghost row against where the rows are without it', () => {
+    const ghost = { top: 30, bottom: 60 }
+
+    // `b` is drawn at 60 now, but it is `b` at rest that counts
+    expect(hitTest({ slots, ghost }, 67)).toEqual({ kind: 'row', id: 'b', ratio: 0.25 })
+    expect(hitTest({ slots, ghost }, 67)).toEqual(hitTest({ slots, ghost: null }, 37))
+  })
+
+  it('reads the empty space below the last row as the bottom of that row', () => {
+    expect(hitTest({ slots, ghost: null }, 200)).toEqual({ kind: 'row', id: 'c', ratio: 1 })
+    // with the ghost row at the end, below it is still the same spot
+    expect(hitTest({ slots, ghost: { top: 90, bottom: 120 } }, 230)).toEqual({
+      kind: 'row',
+      id: 'c',
+      ratio: 1,
+    })
+  })
+
+  it('keeps the spot when there are no rows', () => {
+    expect(hitTest({ slots: [], ghost: null }, 10)).toEqual({ kind: 'keep' })
+  })
+})
+
+describe('resolveDrop', () => {
+  const image = row('image').node
+
+  it('splits a leaf at its middle', () => {
+    expect(resolveDrop(row('title'), 0.49, image)).toMatchObject({
+      parentId: 'group',
+      index: 0,
+      marker: 'before',
+    })
+    expect(resolveDrop(row('title'), 0.5, image)).toMatchObject({
+      parentId: 'group',
+      index: 1,
+      marker: 'after',
+    })
+  })
+
+  it('splits a group into before, inside and after', () => {
+    expect(resolveDrop(row('group'), 0.3, image)).toMatchObject({ marker: 'before', index: 1 })
+    expect(resolveDrop(row('group'), 0.69, image)).toMatchObject({ marker: 'inside' })
+    expect(resolveDrop(row('group'), 0.7, image)).toMatchObject({ marker: 'after', index: 2 })
+  })
+
+  it('lands inside always as the first child, wherever in the middle the pointer is', () => {
+    for (const ratio of [0.31, 0.5, 0.69]) {
+      expect(resolveDrop(row('group'), ratio, image)).toEqual({
+        rowId: 'group',
+        parentId: 'group',
+        index: 0,
+        marker: 'inside',
+      })
+    }
+  })
+
+  it('accepts an empty group as a parent', () => {
+    expect(resolveDrop(row('empty'), 0.5, image)).toMatchObject({ parentId: 'empty', index: 0 })
+  })
+
+  it('refuses the dragged node and everything inside it', () => {
+    const group = row('group').node
+
+    expect(resolveDrop(row('group'), 0.1, group)).toBeNull()
+    expect(resolveDrop(row('group'), 0.5, group)).toBeNull()
+    expect(resolveDrop(row('title'), 0.9, group)).toBeNull()
+  })
+})
+
+describe('isNoOp', () => {
+  it('is the spot right before or right after the node itself', () => {
+    const title = row('title')
+
+    expect(isNoOp(drop('group', 0), title)).toBe(true)
+    expect(isNoOp(drop('group', 1), title)).toBe(true)
+    expect(isNoOp(drop('group', 2), title)).toBe(false)
+    expect(isNoOp(drop('page', 0), title)).toBe(false)
+  })
+
+  it('includes inside on its own parent, now that inside lands first', () => {
+    const inside = resolveDrop(row('group'), 0.5, row('image').node)!
+
+    expect(isNoOp(inside, row('title'))).toBe(true)
+    expect(isNoOp(inside, row('text'))).toBe(false)
+  })
+})
+
+describe('samePlace', () => {
+  it('matches spots by where they land, not by the row that picked them', () => {
+    const afterTitle = { ...drop('group', 1), rowId: 'title', marker: 'after' as const }
+    const beforeText = { ...drop('group', 1), rowId: 'text' }
+
+    expect(samePlace(afterTitle, beforeText)).toBe(true)
+    expect(samePlace(afterTitle, drop('group', 2))).toBe(false)
+    expect(samePlace(null, null)).toBe(true)
+    expect(samePlace(afterTitle, null)).toBe(false)
+  })
+})
+
+describe('ghostSlot', () => {
+  const ids = (rows: TreeRow[]) => rows.map((item) => item.node.id)
+
+  it('goes right before the sibling that is at the index now', () => {
+    const rows = rowsOf()
+
+    expect(ids(rows)).toEqual(['page', 'image', 'group', 'title', 'text', 'empty', 'about'])
+    expect(ghostSlot(rows, NODES, drop('group', 1))).toEqual({ at: 4, depth: 2 })
+    expect(ghostSlot(rows, NODES, drop('page', 0))).toEqual({ at: 1, depth: 1 })
+  })
+
+  it('goes after everything shown inside the parent at the end of its children', () => {
+    const rows = rowsOf()
+
+    expect(ghostSlot(rows, NODES, drop('group', 2))).toEqual({ at: 5, depth: 2 })
+    // past `group` and its children, after `empty`
+    expect(ghostSlot(rows, NODES, drop('page', 3))).toEqual({ at: 6, depth: 1 })
+    expect(ghostSlot(rows, NODES, drop(null, 2))).toEqual({ at: 7, depth: 0 })
+  })
+
+  it('goes right under an empty group', () => {
+    expect(ghostSlot(rowsOf(), NODES, drop('empty', 0))).toEqual({ at: 6, depth: 2 })
+  })
+
+  it('leaves a collapsed group to mark itself', () => {
+    expect(ghostSlot(rowsOf(['group']), NODES, drop('group', 0))).toBeNull()
+  })
+
+  it('has no spot without a drop', () => {
+    expect(ghostSlot(rowsOf(), NODES, null)).toBeNull()
+  })
+})

package/src/components/organisms/Calendar/Calendar.stories.ts

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import { enUS } from 'date-fns/locale'
+import Calendar from './Calendar.vue'
+export default {
+  title: 'Components/Organisms/Calendar',
+  component: Calendar,
+} satisfies Meta<typeof Calendar>
+
+type Story = StoryObj<typeof Calendar>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const WithSelectedDate: Story = {
+  args: {
+    modelValue: new Date(),
+  },
+}
+
+export const WithMarkedDates: Story = {
+  args: {
+    markedDates: [
+      new Date(new Date().getFullYear(), new Date().getMonth(), 5),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 12),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 20),
+    ],
+  },
+}
+
+export const WithDisabledDates: Story = {
+  args: {
+    disabledDates: [
+      new Date(new Date().getFullYear(), new Date().getMonth(), 10),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 11),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 12),
+    ],
+  },
+}
+
+export const WithDateRange: Story = {
+  args: {
+    minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 5),
+    maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 20),
+  },
+}
+
+export const WithMonthYearPicker: Story = {
+  args: {
+    monthYearPicker: true,
+  },
+}
+
+export const EnglishLocale: Story = {
+  args: {
+    locale: enUS,
+  },
+}
+
+export const DateTime: Story = {
+  render: (args) => ({
+    components: { Calendar },
+    setup() {
+      const selected = ref<Date | null>(new Date())
+      return { args, selected }
+    },
+    template: `
+      <Calendar
+        v-bind="args"
+        v-model="selected"
+        datetime
+      />
+      <p v-if="selected" style="margin-top: 12px; font-size: 13px; color: #555; display: block;">
+        Geselecteerd: {{ selected.toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' }) }}
+      </p>
+    `,
+  }),
+  args: {
+    datetime: true,
+  },
+}
+
+export const Playground: Story = {
+  render: (args) => ({
+    components: { Calendar },
+    setup() {
+      const selected = ref<Date | null>(null)
+      return { args, selected }
+    },
+    template: `
+      <Calendar
+        v-bind="args"
+        v-model="selected"
+      />
+      <p v-if="selected" style="margin-top: 12px; font-size: 13px; color: #555; display: block;">
+        Geselecteerd: {{ args.datetime ? selected.toLocaleString('nl-NL', { dateStyle: 'short', timeStyle: 'short' }) : selected.toLocaleDateString('nl-NL') }}
+      </p>
+    `,
+  }),
+  args: {
+    monthYearPicker: true,
+    markedDates: [
+      new Date(new Date().getFullYear(), new Date().getMonth(), 8),
+      new Date(new Date().getFullYear(), new Date().getMonth(), 15),
+    ],
+  },
+}

package/src/components/organisms/Calendar/Calendar.test.ts

@@ -0,0 +1,279 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Calendar from './Calendar.vue'
+
+// Mock today's date for consistent testing
+const MOCK_TODAY = new Date(Date.UTC(2026, 2, 20)) // March 20, 2026
+vi.useFakeTimers()
+vi.setSystemTime(MOCK_TODAY)
+
+// Fixed reference date used across tests
+const YEAR = 2026
+const MONTH = 2 // March (0-indexed)
+const TODAY = new Date(Date.UTC(YEAR, MONTH, 20))
+
+const mountCalendar = (props = {}) => mount(Calendar, { props })
+
+describe('Calendar', () => {
+  // ── Rendering ─────────────────────────────────────────────────────────────
+
+  it('renders the calendar widget', () => {
+    const wrapper = mountCalendar({ modelValue: TODAY })
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
+  })
+
+  it('shows 7 weekday header columns', () => {
+    const wrapper = mountCalendar({ modelValue: TODAY })
+    const headers = wrapper.findAll('[class*="grid-cols-7"] > div').slice(0, 7)
+    expect(headers.length).toBe(7)
+  })
+
+  // ── Day selection ──────────────────────────────────────────────────────────
+
+  it('emits update:modelValue and select when a day is clicked', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY })
+
+    const dayButtons = wrapper
+      .findAll('button[type="button"]')
+      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
+    await dayButtons[10]!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')![0]![0]).toBeInstanceOf(Date)
+    expect(wrapper.emitted('select')).toBeTruthy()
+  })
+
+  // ── Month navigation ───────────────────────────────────────────────────────
+
+  it('navigates to next month', async () => {
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)) })
+
+    const labelBefore = wrapper
+      .find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+      .text()
+    const nextBtn = wrapper
+      .findAll('button[aria-label]')
+      .find((b) => b.attributes('aria-label') === 'Volgende maand')
+    await nextBtn!.trigger('click')
+    await nextTick()
+
+    const labelAfter = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
+    expect(labelAfter).not.toBe(labelBefore)
+  })
+
+  it('navigates to previous month', async () => {
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)) })
+
+    const labelBefore = wrapper
+      .find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+      .text()
+    const prevBtn = wrapper
+      .findAll('button[aria-label]')
+      .find((b) => b.attributes('aria-label') === 'Vorige maand')
+    await prevBtn!.trigger('click')
+    await nextTick()
+
+    const labelAfter = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
+    expect(labelAfter).not.toBe(labelBefore)
+  })
+
+  // ── Marked dates ───────────────────────────────────────────────────────────
+
+  it('renders a dot for marked dates', () => {
+    const markedDates = [new Date(Date.UTC(YEAR, MONTH, 10))]
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)), markedDates })
+
+    expect(wrapper.find('[class*="rounded-full"][class*="bg-cornflower"]').exists()).toBe(true)
+  })
+
+  // ── Disabled dates ─────────────────────────────────────────────────────────
+
+  it('disables specified dates', () => {
+    const disabledDates = [new Date(Date.UTC(YEAR, MONTH, 15))]
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)), disabledDates })
+
+    const disabled = wrapper
+      .findAll('button[disabled]')
+      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
+    expect(disabled.length).toBeGreaterThan(0)
+  })
+
+  it('does not emit when clicking a disabled date', async () => {
+    const disabledDates = [new Date(Date.UTC(YEAR, MONTH, 15))]
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 1)), disabledDates })
+
+    const disabledBtn = wrapper
+      .findAll('button[disabled]')
+      .find((b) => /^\d{1,2}$/.test(b.text().trim()))
+    await disabledBtn?.trigger('click')
+    await nextTick()
+
+    expect(wrapper.emitted('update:modelValue')).toBeFalsy()
+  })
+
+  // ── minDate / maxDate ──────────────────────────────────────────────────────
+
+  it('disables dates before minDate', () => {
+    const minDate = new Date(Date.UTC(YEAR, MONTH, 10))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), minDate })
+
+    const disabled = wrapper
+      .findAll('button[disabled]')
+      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
+    expect(disabled.length).toBeGreaterThan(0)
+  })
+
+  it('disables dates after maxDate', () => {
+    const maxDate = new Date(Date.UTC(YEAR, MONTH, 20))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), maxDate })
+
+    const disabled = wrapper
+      .findAll('button[disabled]')
+      .filter((b) => /^\d{1,2}$/.test(b.text().trim()))
+    expect(disabled.length).toBeGreaterThan(0)
+  })
+
+  it('disables prev nav when already at minDate month', () => {
+    const minDate = new Date(Date.UTC(YEAR, MONTH, 1))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), minDate })
+
+    const prevBtn = wrapper.find('button[aria-label="Vorige maand"]')
+    expect(prevBtn.attributes('disabled')).toBeDefined()
+  })
+
+  it('disables next nav when already at maxDate month', () => {
+    const maxDate = new Date(Date.UTC(YEAR, MONTH, 28))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), maxDate })
+
+    const nextBtn = wrapper.find('button[aria-label="Volgende maand"]')
+    expect(nextBtn.attributes('disabled')).toBeDefined()
+  })
+
+  it('does not navigate prev when at minDate month', async () => {
+    const minDate = new Date(Date.UTC(YEAR, MONTH, 1))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), minDate })
+
+    const prevBtn = wrapper.find('button[aria-label="Vorige maand"]')
+    await prevBtn.trigger('click')
+    await nextTick()
+
+    const label = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
+    expect(label).toContain('Mrt')
+  })
+
+  it('does not navigate next when at maxDate month', async () => {
+    const maxDate = new Date(Date.UTC(YEAR, MONTH, 28))
+    const wrapper = mountCalendar({ modelValue: new Date(Date.UTC(YEAR, MONTH, 15)), maxDate })
+
+    const nextBtn = wrapper.find('button[aria-label="Volgende maand"]')
+    await nextBtn.trigger('click')
+    await nextTick()
+
+    const label = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]').text()
+    expect(label).toContain('Mrt')
+  })
+
+  // ── monthYearPicker ────────────────────────────────────────────────────────
+
+  it('month name is not a button without monthYearPicker prop', () => {
+    const wrapper = mountCalendar({ modelValue: TODAY })
+
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+    expect(header.find('button').exists()).toBe(false)
+  })
+
+  it('month name is a button with monthYearPicker prop', () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+    expect(header.find('button').exists()).toBe(true)
+  })
+
+  it('opens month picker when month name is clicked', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+    const monthBtn = header.findAll('button').find((b) => b.text().includes('Mrt'))
+    await monthBtn!.trigger('click')
+    await nextTick()
+
+    // Month view uses grid-cols-3
+    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(true)
+  })
+
+  it('opens year picker when year is clicked', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+    const buttons = header.findAll('button')
+    await buttons[1]!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.find('[class*="snap-y"]').exists()).toBe(true)
+  })
+
+  it('returns to days view after selecting a month', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+    await header.find('button').trigger('click')
+    await nextTick()
+
+    const monthButtons = wrapper.findAll('[class*="grid-cols-3"] button')
+    await monthButtons[0]!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.find('[class*="grid-cols-7"]').exists()).toBe(true)
+    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(false)
+  })
+
+  it('returns to months view after selecting a year', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+    await header.findAll('button')[1]!.trigger('click')
+    await nextTick()
+
+    const yearButtons = wrapper.findAll('[class*="snap-center"]')
+    await yearButtons[0]!.trigger('click')
+    await nextTick()
+
+    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(true)
+    expect(wrapper.find('[class*="snap-y"]').exists()).toBe(false)
+  })
+
+  it('selects correct date from month picker', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+    await header.find('button').trigger('click')
+    await nextTick()
+
+    const monthButtons = wrapper.findAll('[class*="grid-cols-3"] button')
+    await monthButtons[0]?.trigger('click')
+    await nextTick()
+
+    const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
+    expect(labelAfter).toContain('Jan')
+  })
+
+  it('selects correct year from year drum', async () => {
+    const wrapper = mountCalendar({ modelValue: TODAY, monthYearPicker: true })
+
+    const header = wrapper.find('[class*="flex"][class*="items-center"][class*="gap-1"]')
+    const headerButtons = header.findAll('button')
+    await headerButtons[1]?.trigger('click')
+    await nextTick()
+
+    const yearButtons = wrapper.findAll('[class*="snap-center"]')
+    const targetYear = (YEAR - 1).toString()
+    const targetBtn = yearButtons.find((btn) => btn.text().includes(targetYear))
+    await targetBtn!.trigger('click')
+    await nextTick()
+
+    const labelAfter = wrapper.find('[class*="cornflower-blue-600"]').text()
+    expect(labelAfter).toContain(targetYear)
+  })
+})