@nexxtmove/ui 0.1.22 → 0.1.23

package/src/components/Chip/Chip.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+interface NexxtChipProps {
+  variant?: 'default' | 'warning' | 'success' | 'danger'
+}
+
+defineOptions({
+  name: 'NexxtChip',
+})
+
+const { variant = 'default' } = defineProps<NexxtChipProps>()
+
+const backgroundColor = computed(() => {
+  switch (variant) {
+    case 'warning':
+      return 'bg-orange-500'
+    case 'success':
+      return 'bg-green-500'
+    case 'danger':
+      return 'bg-brick-500'
+    default:
+      return 'bg-cornflower-blue-600'
+  }
+})
+</script>
+
+<template>
+  <span
+    class="inline-flex h-5 flex-col items-center justify-center gap-2.5 rounded-[200px] px-4"
+    :class="backgroundColor"
+  >
+    <span class="justify-start text-center extra-small-semibold text-white">
+      <slot>Chip</slot>
+    </span>
+  </span>
+</template>

package/src/components/DatePicker/DatePicker.stories.ts

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import DatePicker from './DatePicker.vue'
+
+export default {
+  title: 'Components/Molecules/DatePicker',
+  component: DatePicker,
+  decorators: [
+    () => ({ template: '<div style="min-height: 380px; padding: 16px;"><story /></div>' }),
+  ],
+  argTypes: {
+    anchor: {
+      control: 'select',
+      options: ['bottom-right', 'bottom-left', 'top-right', 'top-left'],
+    },
+    monthYearPicker: { control: 'boolean' },
+    markedDates: { control: 'object' },
+    disabledDates: { control: 'object' },
+    minDate: { control: 'date' },
+    maxDate: { control: 'date' },
+    locale: { control: false },
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=713-355&t=CbHvOQfEMIr7M5mO-4',
+    },
+  },
+} satisfies Meta<typeof DatePicker>
+
+type Story = StoryObj<typeof DatePicker>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Selecteer datum',
+  },
+}
+
+export const AnchorBottomRight: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="min-height: 380px; display: flex; justify-content: flex-end; align-items: flex-start; padding: 16px;">
+        <DatePicker v-bind="args" />
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Selecteer datum',
+    anchor: 'bottom-right',
+  },
+}
+
+export const AnchorTopLeft: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="min-height: 380px; display: flex; align-items: flex-end; padding: 16px;">
+        <DatePicker v-bind="args" />
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Selecteer datum',
+    anchor: 'top-left',
+  },
+}
+
+export const AnchorTopRight: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div style="min-height: 380px; display: flex; justify-content: flex-end; align-items: flex-end; padding: 16px;">
+        <DatePicker v-bind="args" />
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Selecteer datum',
+    anchor: 'top-right',
+  },
+}
+
+export const WithoutAutoClose: Story = {
+  args: {
+    placeholder: 'Selecteer datum',
+    autoClose: false,
+  },
+}
+
+export const CustomTrigger: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      const selected = ref(args.modelValue)
+      return { args, selected }
+    },
+    template: `
+      <div style="min-height: 380px; padding: 16px;">
+        <p style="font-size: 13px; color: #555; margin-bottom: 12px;">Selected: {{ selected ? selected.toLocaleDateString() : 'None' }}</p>
+        <DatePicker v-bind="args" v-model="selected">
+          <template #trigger="{ toggle, isOpen }">
+            <button
+              type="button"
+              @click="toggle"
+              class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm font-medium"
+            >
+              {{ isOpen ? 'Sluiten' : 'Kies een datum uit de lijst' }}
+            </button>
+          </template>
+        </DatePicker>
+      </div>
+    `,
+  }),
+  args: {
+    modelValue: null,
+  },
+}
+
+export const Playground: Story = {
+  render: (args) => ({
+    components: { DatePicker },
+    setup() {
+      const selected = ref<Date | null>(null)
+      return { args, selected }
+    },
+    template: `
+      <div style="min-height: 380px; padding: 16px;">
+        <DatePicker v-bind="args" v-model="selected" />
+        <p v-if="selected" style="margin-top: 12px; font-size: 13px; color: #555;">
+          Geselecteerd: {{ selected.toLocaleDateString('nl-NL') }}
+        </p>
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Selecteer datum',
+    monthYearPicker: true,
+  },
+}

package/src/components/DatePicker/DatePicker.test.ts

@@ -0,0 +1,191 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { mount, type VueWrapper } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import DatePicker from './DatePicker.vue'
+
+const YEAR = 2026
+const MONTH = 2 // March (0-indexed)
+const TODAY = new Date(YEAR, MONTH, 20)
+
+const mountDatePicker = (props = {}) => mount(DatePicker, { props, attachTo: document.body })
+
+const openPicker = async (wrapper: VueWrapper) => {
+  await wrapper.find('button').trigger('click')
+  await nextTick()
+}
+
+describe('DatePicker', () => {
+  let wrapper: VueWrapper
+
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
+  // ── Trigger button ───────────────────────────────────────────────────────
+
+  it('renders trigger button with placeholder', () => {
+    wrapper = mountDatePicker({ placeholder: 'Kies een datum' })
+    expect(wrapper.text()).toContain('Kies een datum')
+  })
+
+  it('uses default placeholder when none provided', () => {
+    wrapper = mountDatePicker()
+    expect(wrapper.text()).toContain('Selecteer datum')
+  })
+
+  // ── Open / close ─────────────────────────────────────────────────────────
+
+  it('calendar is closed by default', () => {
+    wrapper = mountDatePicker()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  it('opens when trigger button is clicked', async () => {
+    wrapper = mountDatePicker()
+    await openPicker(wrapper)
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
+  })
+
+  it('closes when trigger button is clicked again', async () => {
+    wrapper = mountDatePicker()
+    await openPicker(wrapper)
+    await wrapper.find('button').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  it('closes when clicking outside', async () => {
+    wrapper = mountDatePicker()
+    await openPicker(wrapper)
+    document.body.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+    await nextTick()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  it('closes on Escape key', async () => {
+    wrapper = mountDatePicker()
+    await openPicker(wrapper)
+    await wrapper.trigger('keydown', { key: 'Escape' })
+    await nextTick()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  // ── Day selection + autoClose ─────────────────────────────────────────────
+
+  it('closes after selecting a day (autoClose default)', async () => {
+    wrapper = mountDatePicker({ modelValue: TODAY })
+    await openPicker(wrapper)
+
+    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.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  it('stays open after selecting a day if autoClose is false', async () => {
+    wrapper = mountDatePicker({ modelValue: TODAY, autoClose: false })
+    await openPicker(wrapper)
+
+    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.find('[class*="rounded-xl"]').exists()).toBe(true)
+  })
+
+  it('emits update:modelValue with the clicked date', async () => {
+    wrapper = mountDatePicker({ modelValue: TODAY })
+    await openPicker(wrapper)
+
+    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)
+  })
+
+  // ── Resets to days view on reopen ─────────────────────────────────────────
+
+  it('resets to days view when closed and reopened', async () => {
+    wrapper = mountDatePicker({ modelValue: TODAY, monthYearPicker: true })
+    await openPicker(wrapper)
+
+    // open month picker
+    const header = wrapper.find('[class*="cornflower-blue-600"]')
+    await header.find('button').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(true)
+
+    // close and reopen (v-if remounts Calendar with fresh pickerView = 'days')
+    await wrapper.find('button').trigger('click')
+    await nextTick()
+    await openPicker(wrapper)
+    expect(wrapper.find('[class*="grid-cols-7"]').exists()).toBe(true)
+    expect(wrapper.find('[class*="grid-cols-3"]').exists()).toBe(false)
+  })
+
+  // ── Custom trigger slot ───────────────────────────────────────────────────
+
+  it('renders custom trigger through slot', () => {
+    wrapper = mount(DatePicker, {
+      slots: {
+        trigger: `
+          <template #trigger="{ toggle }">
+            <button class="custom-trigger" @click="toggle">Custom Button</button>
+          </template>
+        `,
+      },
+    })
+
+    expect(wrapper.find('.custom-trigger').exists()).toBe(true)
+    expect(wrapper.text()).toContain('Custom Button')
+  })
+
+  it('toggles picker via custom trigger toggle function', async () => {
+    wrapper = mount(DatePicker, {
+      slots: {
+        trigger: `
+          <template #trigger="{ toggle }">
+            <button class="custom-trigger" @click="toggle">Toggle</button>
+          </template>
+        `,
+      },
+    })
+
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+
+    await wrapper.find('.custom-trigger').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(true)
+
+    await wrapper.find('.custom-trigger').trigger('click')
+    await nextTick()
+    expect(wrapper.find('[class*="rounded-xl"]').exists()).toBe(false)
+  })
+
+  it('provides isOpen state to custom trigger', async () => {
+    wrapper = mount(DatePicker, {
+      slots: {
+        trigger: `
+          <template #trigger="{ isOpen, toggle }">
+            <button class="custom-trigger" @click="toggle">{{ isOpen ? 'OPEN' : 'CLOSED' }}</button>
+          </template>
+        `,
+      },
+    })
+
+    expect(wrapper.find('.custom-trigger').text()).toBe('CLOSED')
+
+    await wrapper.find('.custom-trigger').trigger('click')
+    await nextTick()
+    expect(wrapper.find('.custom-trigger').text()).toBe('OPEN')
+  })
+})

package/src/components/DatePicker/DatePicker.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import NexxtButton from '../Button/Button.vue'
+import NexxtCalendar from '../Calendar/Calendar.vue'
+import type { NexxtCalendarProps } from '../Calendar/calendar.types'
+
+export type CalendarAnchor = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
+
+interface NexxtDatePickerProps extends NexxtCalendarProps {
+  placeholder?: string
+  anchor?: CalendarAnchor
+  autoClose?: boolean
+}
+
+defineOptions({ name: 'NexxtDatePicker' })
+
+const model = defineModel<Date | null>({ default: null })
+
+const props = withDefaults(defineProps<NexxtDatePickerProps>(), {
+  placeholder: 'Selecteer datum',
+  anchor: 'bottom-left',
+  autoClose: true,
+})
+
+const PICKER_ONLY_KEYS = new Set(['placeholder', 'anchor', 'autoClose'])
+
+const calendarProps = computed(
+  (): NexxtCalendarProps =>
+    Object.fromEntries(
+      Object.entries(props).filter(([key]) => !PICKER_ONLY_KEYS.has(key)),
+    ) as NexxtCalendarProps,
+)
+
+// ── State ─────────────────────────────────────────────────────────────────────
+
+const isOpen = ref(false)
+const wrapperRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLElement | null>(null)
+const popoverRef = ref<HTMLElement | null>(null)
+
+// ── Watchers ──────────────────────────────────────────────────────────────────
+
+watch(isOpen, async (val) => {
+  if (!val) {
+    await nextTick()
+    const focusable = triggerRef.value?.querySelector<HTMLElement>(
+      'button, input, [tabindex]:not([tabindex="-1"])',
+    )
+    focusable?.focus()
+  } else {
+    await nextTick()
+    popoverRef.value?.focus()
+  }
+})
+
+// ── Handlers ──────────────────────────────────────────────────────────────────
+
+const handleSelect = () => {
+  if (props.autoClose) {
+    isOpen.value = false
+  }
+}
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (!isOpen.value) return
+  if (event.key === 'Escape') {
+    isOpen.value = false
+  }
+}
+
+const handleClickOutside = (event: MouseEvent) => {
+  if (wrapperRef.value && !wrapperRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => document.addEventListener('mousedown', handleClickOutside))
+onUnmounted(() => document.removeEventListener('mousedown', handleClickOutside))
+
+// ── Popover placement ─────────────────────────────────────────────────────────
+
+const popoverClasses = computed(() => {
+  const map: Record<CalendarAnchor, string> = {
+    'bottom-right': 'top-full right-0 mt-2 origin-top-right',
+    'bottom-left': 'top-full left-0 mt-2 origin-top-left',
+    'top-right': 'bottom-full right-0 mb-2 origin-bottom-right',
+    'top-left': 'bottom-full left-0 mb-2 origin-bottom-left',
+  }
+  return map[props.anchor]
+})
+
+const transitionClasses = computed(() => {
+  const isBottom = props.anchor.startsWith('bottom')
+
+  const origins: Record<CalendarAnchor, string> = {
+    'bottom-left': 'origin-top-left',
+    'bottom-right': 'origin-top-right',
+    'top-left': 'origin-bottom-left',
+    'top-right': 'origin-bottom-right',
+  }
+
+  const translateClass = isBottom ? '-translate-y-3' : 'translate-y-3'
+
+  return {
+    enterActiveClass: `transition-all duration-200 ease-out ${origins[props.anchor]}`,
+    leaveActiveClass: `transition-all duration-150 ease-in ${origins[props.anchor]}`,
+    enterFromClass: `opacity-0 scale-95 ${translateClass}`,
+    leaveToClass: `opacity-0 scale-95 ${translateClass}`,
+    enterToClass: 'opacity-100 scale-100 translate-y-0',
+    leaveFromClass: 'opacity-100 scale-100 translate-y-0',
+  }
+})
+</script>
+
+<template>
+  <div ref="wrapperRef" class="relative inline-block" @keydown="handleKeydown">
+    <span ref="triggerRef">
+      <slot name="trigger" :is-open="isOpen" :toggle="() => (isOpen = !isOpen)">
+        <NexxtButton
+          icon="calendar"
+          variant="secondary"
+          :aria-expanded="isOpen"
+          aria-haspopup="grid"
+          @click="isOpen = !isOpen"
+        >
+          {{ props.placeholder }}
+        </NexxtButton>
+      </slot>
+    </span>
+
+    <Transition v-bind="transitionClasses">
+      <div
+        v-if="isOpen"
+        ref="popoverRef"
+        tabindex="-1"
+        :class="['absolute z-50 outline-none', popoverClasses]"
+      >
+        <NexxtCalendar v-model="model" v-bind="calendarProps" @select="handleSelect" />
+      </div>
+    </Transition>
+  </div>
+</template>

package/src/components/Header/Header.stories.ts

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Header from './Header.vue'
+import Button from '../Button/Button.vue'
+
+export default {
+  title: 'Components/Atoms/Header',
+  component: Header,
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/CdbFJ7qUga6mtjagcPDvYK/Design-System?node-id=441-280&t=CbHvOQfEMIr7M5mO-4',
+    },
+  },
+} satisfies Meta<typeof Header>
+
+type Story = StoryObj<typeof Header>
+
+export const Default: Story = {
+  args: {
+    title: 'Header Title',
+    backButtonText: 'Back',
+    backButtonAction: () => console.log('Back button clicked'),
+  },
+}
+
+export const WithSlots: Story = {
+  args: {
+    title: 'Header Title',
+    backButtonText: 'Go Back',
+    backButtonAction: () => console.log('Back clicked'),
+  },
+  render: (args) => ({
+    components: { Header, Button },
+    setup() {
+      return { args }
+    },
+    template: `
+      <Header v-bind="args">
+        <template #center>
+          <span class="font-bold">Centered Content</span>
+        </template>
+        <template #right>
+          <Button variant="primary" icon="arrow-right" :icon-right="true">Next</Button>
+        </template>
+      </Header>
+    `,
+  }),
+}