@nexxtmove/ui 2.6.0 → 2.8.0

package/dist/nuxt.js

@@ -150,5 +150,4 @@ var s = {
 		}
 	}
 });
-//#endregion
 export { u as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -22,10 +22,10 @@
   "dependencies": {
     "@floating-ui/vue": "^2.0.1",
     "@number-flow/vue": "^0.5.2",
-    "@vueuse/core": "^14.4.0",
+    "@vueuse/core": "^15.0.0",
     "date-fns": "^4.4.0",
     "date-fns-tz": "^3.2.0",
-    "reka-ui": "^2.10.3",
+    "reka-ui": "^2.11.0",
     "vite-svg-loader": "^5.1.1"
   },
   "peerDependencies": {
@@ -35,46 +35,47 @@
   "devDependencies": {
     "@awesome.me/kit-37b149f3ef": "^1.0.8",
     "@eslint/js": "^10.0.1",
-    "@nuxt/kit": "^4.5.2",
-    "@nuxt/schema": "^4.5.2",
-    "@storybook/addon-a11y": "^10.6.0",
-    "@storybook/addon-designs": "^11.1.4",
-    "@storybook/addon-docs": "^10.6.0",
-    "@storybook/addon-vitest": "^10.6.0",
-    "@storybook/builder-vite": "^10.6.0",
-    "@storybook/vue3-vite": "^10.6.0",
+    "@nuxt/kit": "^4.6.3",
+    "@nuxt/schema": "^4.6.3",
+    "@storybook/addon-a11y": "^10.6.5",
+    "@storybook/addon-docs": "^10.6.5",
+    "@storybook/addon-vitest": "^10.6.5",
+    "@storybook/builder-vite": "^10.6.5",
+    "@storybook/vue3-vite": "^10.6.5",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.2.0",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "@vitejs/plugin-vue": "^6.0.8",
-    "@vitest/browser": "^4.1.11",
-    "@vitest/browser-playwright": "^4.1.11",
-    "@vitest/coverage-v8": "^4.1.11",
+    "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vitest/browser": "^5.0.5",
+    "@vitest/browser-playwright": "^5.0.5",
+    "@vitest/coverage-v8": "^5.0.5",
     "@vue/eslint-config-typescript": "^14.9.0",
-    "@vue/test-utils": "^2.4.11",
+    "@vue/test-utils": "^2.5.1",
     "@vue/tsconfig": "^0.9.1",
     "consola": "^3.4.2",
-    "eslint": "^10.8.1",
+    "eslint": "^10.14.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-better-tailwindcss": "4.7.0",
-    "eslint-plugin-prettier": "^5.5.6",
-    "eslint-plugin-storybook": "10.6.0",
-    "eslint-plugin-vue": "^10.10.0",
-    "flag-icons": "^7.5.0",
-    "globals": "^17.11.0",
-    "jsdom": "^29.1.1",
-    "playwright": "^1.62.1",
-    "prettier": "^3.9.6",
+    "eslint-plugin-better-tailwindcss": "4.10.0",
+    "eslint-plugin-prettier": "^5.5.7",
+    "eslint-plugin-storybook": "10.6.5",
+    "eslint-plugin-vue": "^10.12.0",
+    "flag-icons": "^7.6.0",
+    "globals": "^17.14.0",
+    "jsdom": "^30.1.3",
+    "playwright": "^1.64.1",
+    "prettier": "^3.9.10",
     "prettier-plugin-tailwindcss": "^0.8.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "remark-frontmatter": "^5.0.0",
-    "storybook": "^10.6.0",
-    "typescript-eslint": "^8.67.0",
-    "vite": "^8.2.1",
-    "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.11"
+    "storybook": "^10.6.5",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.72.1",
+    "vite": "^8.3.5",
+    "vite-plugin-dts": "^5.1.2",
+    "vitest": "^5.0.5",
+    "vue-tsc": "^3.3.14"
   },
   "engines": {
     "node": ">=22.18.0"
@@ -87,6 +88,7 @@
     "generate:index": "node --experimental-strip-types ./scripts/generate-index.ts",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "typecheck": "vue-tsc --noEmit",
     "storybook": "storybook dev -p 6006 --no-open",
     "storybook:build": "storybook build"
   }

package/src/attribute-contract.test.ts

@@ -0,0 +1,151 @@
+import { beforeAll, describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import type { Component } from 'vue'
+
+import Checkbox from './components/atoms/Checkbox/Checkbox.vue'
+import FloatingPanel from './components/atoms/FloatingPanel/FloatingPanel.vue'
+import InputField from './components/molecules/InputField/InputField.vue'
+import InputSelect from './components/molecules/InputSelect/InputSelect.vue'
+import Loader from './components/atoms/Loader/Loader.vue'
+import PageContainer from './components/molecules/PageContainer/PageContainer.vue'
+import SelectableOption from './components/atoms/SelectableOption/SelectableOption.vue'
+import Slider from './components/atoms/Slider/Slider.vue'
+import Switch from './components/atoms/Switch/Switch.vue'
+
+// Where a consumer's `class`, `id` and `data-*` land is part of the rendered
+// contract, and moving them is invisible to every other gate in this repo. The
+// props are unchanged, so a prop-diff sees nothing. The existing tests pass,
+// because they assert their own component's markup rather than a consumer's
+// attributes. The build is green. A screenshot is pixel-identical, because the
+// styling did not move -- only the element carrying the attribute did.
+//
+// Adding `inheritAttrs: false` to a component does exactly that. Six components
+// here bind `$attrs` explicitly. Four of them also let Vue apply attributes to
+// the root, so a consumer's attributes currently land in *two* places; adding
+// `inheritAttrs: false` collapses that to one, at every call site at once.
+//
+// This file records where they land today, per element. It is a contract, not a
+// preference: if a change is intentional, update the expectation, say so in the
+// PR, and treat it as a coordinated minor rather than a patch.
+
+const PROBE_CLASS = 'attr-probe'
+const PROBE_ID = 'attr-probe-id'
+const PROBE_DATA = 'data-attr-probe'
+
+const probeAttrs = {
+  class: PROBE_CLASS,
+  id: PROBE_ID,
+  [PROBE_DATA]: 'yes',
+}
+
+interface ContractCase {
+  name: string
+  component: Component
+  props?: Record<string, unknown>
+  /**
+   * Tag names of the elements carrying each probe attribute, in document order.
+   * Two entries means the attribute is applied twice -- once by Vue's automatic
+   * inheritance onto the root, once by an explicit `v-bind="$attrs"`.
+   */
+  expected: { class: string[]; id: string[]; data: string[] }
+}
+
+// `wrapper.findAll` walks the whole rendered tree, so this works for the
+// multi-root components too, where there is no single root to inspect.
+const describePlacement = (testCase: ContractCase) => {
+  const wrapper = mount(testCase.component, {
+    props: testCase.props,
+    attrs: probeAttrs,
+  })
+
+  const tags = (selector: string) =>
+    wrapper.findAll(selector).map((el) => el.element.tagName.toLowerCase())
+
+  return {
+    class: tags(`.${PROBE_CLASS}`),
+    id: tags(`#${PROBE_ID}`),
+    data: tags(`[${PROBE_DATA}]`),
+  }
+}
+
+// Keep in step with:
+//   grep -rln 'v-bind="$attrs"' src/components/*/*.vue
+const CASES: ContractCase[] = [
+  // InputField and InputSelect route explicitly: `class` and `style` position
+  // the field in the consumer's layout so they go to the wrapper, everything
+  // else describes the control so it goes to the input. Nothing lands on both.
+  //
+  // This expectation was deliberately changed, not re-baselined. It previously
+  // read `['div', 'input']` for all three, which recorded a defect: `id` was
+  // duplicated across two elements, and a consumer's layout class landed on an
+  // input that is already `w-full`. A class describing where the field sits
+  // belongs on the wrapper, so the rendered result is unchanged while the
+  // duplication is gone.
+  {
+    name: 'InputField',
+    component: InputField,
+    expected: { class: ['div'], id: ['input'], data: ['input'] },
+  },
+  {
+    name: 'Checkbox',
+    component: Checkbox,
+    expected: { class: ['label', 'input'], id: ['label', 'input'], data: ['label', 'input'] },
+  },
+  {
+    name: 'InputSelect',
+    component: InputSelect,
+    expected: { class: ['div'], id: ['input'], data: ['input'] },
+  },
+  // Multi-root, so Vue cannot inherit automatically; only the explicit
+  // v-bind on the trigger applies.
+  {
+    name: 'FloatingPanel',
+    component: FloatingPanel,
+    expected: { class: ['span'], id: ['span'], data: ['span'] },
+  },
+  // Already set `inheritAttrs: false`, so attributes reach the control only.
+  // These two are what the other four would look like after W1c.
+  {
+    name: 'Switch',
+    component: Switch,
+    expected: { class: ['input'], id: ['input'], data: ['input'] },
+  },
+  {
+    name: 'Slider',
+    component: Slider,
+    expected: { class: ['span'], id: ['span'], data: ['span'] },
+  },
+  // Single-root svg; consumers size it with a class on the root.
+  {
+    name: 'Loader',
+    component: Loader,
+    expected: { class: ['svg'], id: ['svg'], data: ['svg'] },
+  },
+  // Single-root div; the layout flex wrapper carries the consumer's attributes.
+  {
+    name: 'PageContainer',
+    component: PageContainer,
+    expected: { class: ['div'], id: ['div'], data: ['div'] },
+  },
+  // Single-root button; consumers rely on `class` for padding and layout.
+  {
+    name: 'SelectableOption',
+    component: SelectableOption,
+    expected: { class: ['button'], id: ['button'], data: ['button'] },
+  },
+]
+
+describe('attribute contract', () => {
+  beforeAll(() => {
+    // jsdom ships no ResizeObserver; reka-ui's slider observes its track.
+    global.ResizeObserver ??= class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver
+  })
+
+  it.each(CASES)('$name applies class, id and data-* to the same elements as always', (c) => {
+    expect(describePlacement(c)).toEqual(c.expected)
+  })
+})

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

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import AnimatedNumber from './AnimatedNumber.vue'
+
+export default {
+  title: 'Components/Atoms/Animated Number',
+  component: AnimatedNumber,
+} satisfies Meta<typeof AnimatedNumber>
+
+type Story = StoryObj<typeof AnimatedNumber>
+
+export const Default: Story = {
+  args: {
+    value: 4,
+  },
+}
+
+export const LargeNumber: Story = {
+  args: {
+    value: 12345,
+  },
+}
+
+export const SlowDuration: Story = {
+  args: {
+    value: 100,
+    duration: 2000,
+  },
+}
+
+export const WithDelay: Story = {
+  args: {
+    value: 42,
+    duration: 500,
+    delay: 1000,
+  },
+}

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

@@ -0,0 +1,21 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import AnimatedNumber from './AnimatedNumber.vue'
+
+describe('AnimatedNumber', () => {
+  it('renders the correct value', () => {
+    const wrapper = mount(AnimatedNumber, { props: { value: 123 } })
+    expect(wrapper.text()).toContain('123')
+  })
+
+  it('accepts updated value prop without errors', async () => {
+    const wrapper = mount(AnimatedNumber, { props: { value: 9 } })
+    await expect(wrapper.setProps({ value: 42 })).resolves.not.toThrow()
+  })
+
+  it('accepts duration and delay props without errors', () => {
+    expect(() =>
+      mount(AnimatedNumber, { props: { value: 10, duration: 800, delay: 200 } }),
+    ).not.toThrow()
+  })
+})

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

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Avatar from './Avatar.vue'
+
+export default {
+  title: 'Components/Atoms/Avatar',
+  component: Avatar,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+    },
+  },
+} satisfies Meta<typeof Avatar>
+
+type Story = StoryObj<typeof Avatar>
+
+export const ExtraSmall: Story = {
+  args: {
+    name: 'A',
+    size: 'xs',
+  },
+}
+
+export const Small: Story = {
+  args: {
+    name: 'B',
+    size: 'sm',
+  },
+}
+
+export const Medium: Story = {
+  args: {
+    name: 'C',
+    size: 'md',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    name: 'D',
+    size: 'lg',
+  },
+}
+
+export const ExtraLarge: Story = {
+  args: {
+    name: 'E',
+    size: 'xl',
+  },
+}
+
+export const WithSpecialCharacters: Story = {
+  args: {
+    name: 'Bastiaansen Van den Bemd Makelaars (test)',
+    size: 'md',
+  },
+}
+
+export const WithImage: Story = {
+  args: {
+    name: 'Peter Vink',
+    src: 'https://i.pravatar.cc/300',
+    size: 'md',
+  },
+}
+
+export const WithBrokenImage: Story = {
+  args: {
+    name: 'Peter Vink',
+    src: 'https://example.com/does-not-exist.jpg',
+    size: 'md',
+  },
+}
+
+export const SquircleWithImage: Story = {
+  args: {
+    name: 'Peter Vink',
+    src: 'https://i.pravatar.cc/300',
+    size: 'md',
+    squircle: true,
+  },
+}
+
+export const SquircleExtraSmall: Story = {
+  args: {
+    name: 'A',
+    size: 'xs',
+    squircle: true,
+  },
+}
+
+export const SquircleSmall: Story = {
+  args: {
+    name: 'B',
+    size: 'sm',
+    squircle: true,
+  },
+}
+
+export const SquircleMedium: Story = {
+  args: {
+    name: 'C',
+    size: 'md',
+    squircle: true,
+  },
+}
+
+export const SquircleLarge: Story = {
+  args: {
+    name: 'D',
+    size: 'lg',
+    squircle: true,
+  },
+}
+
+export const SquircleExtraLarge: Story = {
+  args: {
+    name: 'E',
+    size: 'xl',
+    squircle: true,
+  },
+}

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

@@ -0,0 +1,134 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Avatar from './Avatar.vue'
+
+describe('Avatar', () => {
+  it('generates 2 character initials from name with multiple words', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: 'Peter Vink',
+      },
+    })
+
+    expect(wrapper.text()).toContain('PV')
+  })
+
+  it('generates 2 character initials from name with single word', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: 'Peter',
+      },
+    })
+
+    expect(wrapper.text()).toContain('PE')
+  })
+
+  it('generates 2 character initials picking first and last words for names with tussenvoegsels', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: 'Peter van der Sloot',
+      },
+    })
+
+    expect(wrapper.text()).toContain('PS')
+  })
+
+  it('handles empty strings gracefully by returning no text', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: '',
+      },
+    })
+
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('handles whitespace-only strings gracefully by returning no text', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: '   ',
+      },
+    })
+
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('ignores special characters when generating initials', () => {
+    const wrapper = mount(Avatar, {
+      props: {
+        name: 'Bastiaansen Van den Bemd Makelaars (test)',
+      },
+    })
+
+    // "Bastiaansen Van den Bemd Makelaars test" -> B and T
+    expect(wrapper.text()).toContain('BT')
+  })
+
+  it('renders as a div with rounded-full by default', () => {
+    const wrapper = mount(Avatar, {
+      props: { name: 'Peter Vink' },
+    })
+
+    expect(wrapper.element.tagName).toBe('DIV')
+    expect(wrapper.classes()).toContain('rounded-full')
+  })
+
+  it('renders as a NexxtSquircle when squircle prop is true', () => {
+    const wrapper = mount(Avatar, {
+      props: { name: 'Peter Vink', squircle: true },
+    })
+
+    expect(wrapper.findComponent({ name: 'NexxtSquircle' }).exists()).toBe(true)
+    expect(wrapper.classes()).not.toContain('rounded-full')
+  })
+
+  it('renders the image instead of the initials when src is given', () => {
+    const wrapper = mount(Avatar, {
+      props: { name: 'Peter Vink', src: 'https://example.com/peter.jpg' },
+    })
+
+    const image = wrapper.find('img')
+    expect(image.exists()).toBe(true)
+    expect(image.attributes('src')).toBe('https://example.com/peter.jpg')
+    expect(wrapper.text()).toBe('')
+  })
+
+  it('uses the name as the image alt text', () => {
+    const wrapper = mount(Avatar, {
+      props: { name: 'Peter Vink', src: 'https://example.com/peter.jpg' },
+    })
+
+    expect(wrapper.find('img').attributes('alt')).toBe('Peter Vink')
+  })
+
+  it('renders the image inside the squircle', () => {
+    const wrapper = mount(Avatar, {
+      props: { name: 'Peter Vink', src: 'https://example.com/peter.jpg', squircle: true },
+    })
+
+    expect(wrapper.findComponent({ name: 'NexxtSquircle' }).exists()).toBe(true)
+    expect(wrapper.find('img').exists()).toBe(true)
+  })
+
+  it('falls back to the initials when the image fails to load', async () => {
+    const wrapper = mount(Avatar, {
+      props: { name: 'Peter Vink', src: 'https://example.com/broken.jpg' },
+    })
+
+    await wrapper.find('img').trigger('error')
+
+    expect(wrapper.find('img').exists()).toBe(false)
+    expect(wrapper.text()).toContain('PV')
+  })
+
+  it('retries the image when src changes after a failure', async () => {
+    const wrapper = mount(Avatar, {
+      props: { name: 'Peter Vink', src: 'https://example.com/broken.jpg' },
+    })
+
+    await wrapper.find('img').trigger('error')
+    await wrapper.setProps({ src: 'https://example.com/peter.jpg' })
+
+    expect(wrapper.find('img').exists()).toBe(true)
+  })
+})