@nexxtmove/ui 2.6.0 → 2.8.0

package/src/components/organisms/ColorPicker/ColorPicker.vue

@@ -61,7 +61,9 @@ export interface NexxtColorPickerProps {
   /**
    * Offer an opacity slider and accept colours below full opacity. Turning it
    * off while the colour is translucent writes the opaque colour to the model
-   * at once.
+   * at once. The gradient mode always has the slider; without `showAlpha` it is
+   * locked at 100% for a stop bound to a preset, with it a change unbinds the
+   * stop from its preset.
    */
   showAlpha?: boolean
   formats?: ColorFormat[]
@@ -283,8 +285,15 @@ const modeModel = computed({
 /** The opacity slider is always there in the gradient mode. */
 const alphaOn = computed(() => props.showAlpha || gradientMode.value)
 
-/** A stop bound to a preset is always opaque: its slider stays, at 100 and disabled. */
-const alphaLocked = computed(() => gradientMode.value && !!editor.selected.value?.preset)
+/**
+ * Without `showAlpha` a stop bound to a preset is always opaque: its slider
+ * stays, at 100 and disabled. With `showAlpha` the slider stays usable, as it is
+ * for the solid colour, and a change unbinds the stop from its preset
+ * (`commitColor`), so the stop becomes a hex with that opacity.
+ */
+const alphaLocked = computed(
+  () => gradientMode.value && !props.showAlpha && !!editor.selected.value?.preset,
+)
 
 const panelClass = computed(
   () =>

package/src/components/organisms/ColorPicker/gradient.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import {
+  colorAt,
+  gradientCss,
+  stopBarCss,
+  mixColors,
+  normalizeHex,
+  wrapAngle,
+  clampPercent,
+  DEFAULT_GRADIENT,
+} from './gradient'
+
+describe('gradient helpers', () => {
+  it('wraps angles and clamps percentages to whole numbers', () => {
+    expect(wrapAngle(360)).toBe(0)
+    expect(wrapAngle(-10)).toBe(350)
+    expect(wrapAngle(719.6)).toBe(0)
+    expect(clampPercent(-4)).toBe(0)
+    expect(clampPercent(100.4)).toBe(100)
+    expect(clampPercent(40.5)).toBe(41)
+  })
+
+  it('normalizes hexes to lower case without an opaque ff', () => {
+    expect(normalizeHex('#AABBCCFF')).toBe('#aabbcc')
+    expect(normalizeHex('#AABBCC80')).toBe('#aabbcc80')
+  })
+
+  it('renders in oklab always, as the app draws it, also off centre', () => {
+    expect(gradientCss(DEFAULT_GRADIENT)).toBe(
+      'linear-gradient(180deg in oklab, #00000000 0%, #00000099 100%)',
+    )
+    const radial = { ...DEFAULT_GRADIENT, type: 'radial' as const }
+    expect(gradientCss(radial)).toBe('radial-gradient(in oklab, #00000000 0%, #00000099 100%)')
+    const offCentre = { ...radial, centerX: 30 }
+    expect(gradientCss(offCentre)).toBe(
+      'radial-gradient(at 30% 50% in oklab, #00000000 0%, #00000099 100%)',
+    )
+    expect(stopBarCss(offCentre)).toBe(
+      'linear-gradient(to right in oklab, #00000000 0%, #00000099 100%)',
+    )
+  })
+
+  it('mixes with premultiplied alpha, so a fade from transparent keeps the hue', () => {
+    expect(mixColors('#00000000', '#ff0000', 0.5, 'srgb')).toBe('#ff000080')
+    expect(mixColors('#00000000', '#ff0000', 0.5, 'oklab')).toBe('#ff000080')
+  })
+
+  it('mixes two opaque colours in oklab differently from srgb', () => {
+    const oklab = mixColors('#0000ff', '#ffffff', 0.5, 'oklab')
+    const srgb = mixColors('#0000ff', '#ffffff', 0.5, 'srgb')
+    expect(srgb).toBe('#8080ff')
+    expect(oklab).not.toBe(srgb)
+  })
+
+  it('returns the colour at a position, flat beyond the ends', () => {
+    const stops = [
+      { color: '#000000', position: 20 },
+      { color: '#ffffff', position: 80 },
+    ]
+    expect(colorAt(stops, 0)).toBe('#000000')
+    expect(colorAt(stops, 100)).toBe('#ffffff')
+    // halfway in oklab, which is lighter than the srgb #808080
+    expect(colorAt(stops, 50)).toBe(mixColors('#000000', '#ffffff', 0.5, 'oklab'))
+    expect(colorAt(stops, 50)).not.toBe('#808080')
+    expect(colorAt(DEFAULT_GRADIENT.stops, 50)).toBe('#0000004d')
+  })
+})

package/src/components/organisms/ColorPicker/gradientGeometry.test.ts

@@ -0,0 +1,206 @@
+import { describe, it, expect } from 'vitest'
+import {
+  angleBetween,
+  clampToSquare,
+  isInSquare,
+  linearHandlePoint,
+  farthestCornerAngle,
+  linearFromPoints,
+  linearLength,
+  linearPoint,
+  linearPosition,
+  projectOnSegment,
+  radialEllipse,
+  radialPoint,
+  radialPosition,
+  radialRay,
+  radialT,
+  radialAngle,
+  viaFraction,
+  lerpPoint,
+} from './gradientGeometry'
+
+const S = 176
+
+describe('linear geometry', () => {
+  it('has the CSS gradient line length', () => {
+    expect(linearLength(0, S)).toBeCloseTo(S)
+    expect(linearLength(90, S)).toBeCloseTo(S)
+    expect(linearLength(45, S)).toBeCloseTo(S * Math.SQRT2)
+    expect(linearLength(135, S)).toBeCloseTo(S * Math.SQRT2)
+  })
+
+  it('puts 0 % and 100 % where CSS does', () => {
+    // 0° runs upwards: 0 % at the bottom edge, 100 % at the top edge.
+    expect(linearPoint(0, 0, S)).toMatchObject({ x: S / 2, y: S })
+    expect(linearPoint(0, 100, S).y).toBeCloseTo(0)
+    // 90° runs to the right.
+    expect(linearPoint(90, 0, S).x).toBeCloseTo(0)
+    expect(linearPoint(90, 100, S).x).toBeCloseTo(S)
+    // 45° and 135° end exactly on the corners of the square.
+    expect(linearPoint(45, 100, S).x).toBeCloseTo(S)
+    expect(linearPoint(45, 100, S).y).toBeCloseTo(0)
+    expect(linearPoint(135, 100, S).x).toBeCloseTo(S)
+    expect(linearPoint(135, 100, S).y).toBeCloseTo(S)
+  })
+
+  it('sticks out of the square by at most 0.104·S at 22.5°', () => {
+    const end = linearPoint(22.5, 100, S)
+    expect(-end.y / S).toBeCloseTo(0.104, 2)
+  })
+
+  it.each([0, 22, 45, 90, 135, 300])('round-trips angle and positions at %i°', (angle) => {
+    const positions = { from: 10, via: 37, to: 85 }
+    const from = linearPoint(angle, positions.from, S)
+    const to = linearPoint(angle, positions.to, S)
+    const f = viaFraction(positions.from, positions.via, positions.to)
+    expect(
+      linearFromPoints({ from, to, viaFraction: f, previousAngle: 999, size: S, minDistance: 8 }),
+    ).toEqual({ angle, ...positions })
+  })
+
+  it('projects a point beside the middle line onto the same position', () => {
+    const onLine = linearPoint(90, 30, S)
+    expect(linearPosition(90, { x: onLine.x, y: onLine.y + 40 }, S)).toBe(30)
+  })
+
+  it('keeps the previous angle for points closer than the minimum distance', () => {
+    expect(angleBetween({ x: 10, y: 10 }, { x: 14, y: 14 }, 77, 8)).toBe(77)
+    expect(angleBetween({ x: 10, y: 10 }, { x: 10, y: 0 }, 77, 8)).toBe(0)
+    expect(angleBetween({ x: 10, y: 10 }, { x: 0, y: 10 }, 77, 8)).toBe(270)
+  })
+
+  it('clamps positions of points beyond the square', () => {
+    expect(linearPosition(90, { x: -30, y: 50 }, S)).toBe(0)
+    expect(linearPosition(90, { x: S + 30, y: 50 }, S)).toBe(100)
+  })
+
+  it('projects the via point onto the segment, clamped', () => {
+    const a = { x: 0, y: 0 }
+    const b = { x: 100, y: 0 }
+    expect(projectOnSegment({ x: 25, y: 40 }, a, b)).toBeCloseTo(0.25)
+    expect(projectOnSegment({ x: -50, y: 0 }, a, b)).toBe(0)
+    expect(projectOnSegment({ x: 150, y: 0 }, a, b)).toBe(1)
+    expect(lerpPoint(a, b, 0.25)).toEqual({ x: 25, y: 0 })
+  })
+})
+
+describe('handles inside the square', () => {
+  it('clamps a dragged pointer onto the square', () => {
+    expect(clampToSquare({ x: -30, y: 200 }, S)).toEqual({ x: 0, y: S })
+    expect(clampToSquare({ x: 50, y: 60 }, S)).toEqual({ x: 50, y: 60 })
+  })
+
+  it('draws 0 % and 100 % at 22° on the edge, along the gradient line', () => {
+    const outside = linearPoint(22, 100, S)
+    expect(isInSquare(outside, S)).toBe(false)
+    const end = linearHandlePoint(22, 100, S)
+    const start = linearHandlePoint(22, 0, S)
+    expect(isInSquare(end, S)).toBe(true)
+    expect(isInSquare(start, S)).toBe(true)
+    // on the edge: the top for 100 %, the bottom for 0 %
+    expect(end.y).toBeCloseTo(0)
+    expect(start.y).toBeCloseTo(S)
+    // still on the line through the middle at 22°
+    expect(angleBetween(start, end, -1, 1)).toBe(22)
+  })
+
+  it('leaves a canonical point that is inside where it is', () => {
+    expect(linearHandlePoint(90, 100, S)).toEqual(linearPoint(90, 100, S))
+    expect(linearHandlePoint(22, 50, S)).toEqual(linearPoint(22, 50, S))
+    const inner = linearHandlePoint(45, 80, S)
+    const canonical = linearPoint(45, 80, S)
+    expect(inner.x).toBeCloseTo(canonical.x)
+    expect(inner.y).toBeCloseTo(canonical.y)
+  })
+})
+
+describe('radial geometry', () => {
+  it('runs a centred ellipse through the corners', () => {
+    const ellipse = radialEllipse(50, 50, S)
+    expect(ellipse.rx).toBeCloseTo((S / 2) * Math.SQRT2)
+    expect(ellipse.ry).toBeCloseTo((S / 2) * Math.SQRT2)
+    expect(radialPosition(ellipse, { x: S, y: S })).toBe(100)
+    expect(radialPosition(ellipse, { x: S / 2, y: S / 2 })).toBe(0)
+  })
+
+  it('keeps the closest-side proportions and reaches the farthest corner off centre', () => {
+    const ellipse = radialEllipse(20, 80, S)
+    // closest sides: 20 % horizontally and 20 % vertically, so a circle
+    expect(ellipse.rx / ellipse.ry).toBeCloseTo(1)
+    // farthest corner is top-right
+    expect(radialT(ellipse, { x: S, y: 0 })).toBeCloseTo(1)
+    const skewed = radialEllipse(30, 50, S)
+    expect(skewed.rx / skewed.ry).toBeCloseTo(0.3 / 0.5)
+    expect(radialT(skewed, { x: S, y: 0 })).toBeCloseTo(1)
+    expect(radialT(skewed, { x: S, y: S })).toBeCloseTo(1)
+  })
+
+  it('stays within 100 % inside the square', () => {
+    const ellipse = radialEllipse(20, 80, S)
+    for (const corner of [
+      { x: 0, y: 0 },
+      { x: S, y: 0 },
+      { x: 0, y: S },
+      { x: S, y: S },
+    ]) {
+      expect(radialT(ellipse, corner)).toBeLessThanOrEqual(1 + 1e-9)
+    }
+  })
+
+  it('round-trips positions along the ray to the farthest corner', () => {
+    const ellipse = radialEllipse(20, 80, S)
+    const psi = farthestCornerAngle(ellipse, S)
+    const end = radialPoint(ellipse, psi, 100)
+    expect(end.x).toBeCloseTo(S)
+    expect(end.y).toBeCloseTo(0)
+    for (const position of [0, 13, 50, 87, 100]) {
+      expect(radialPosition(ellipse, radialPoint(ellipse, psi, position))).toBe(position)
+    }
+  })
+
+  it('clamps the centre to 1–99 so the ellipse never degenerates', () => {
+    const ellipse = radialEllipse(0, 100, S)
+    expect(Number.isFinite(ellipse.rx)).toBe(true)
+    expect(ellipse.rx).toBeGreaterThan(0)
+  })
+
+  describe('radialRay', () => {
+    it('falls back to the farthest corner when the dragged ray puts the end outside', () => {
+      // Repro: centre 30/70, via dragged to (60, 100) would put to = 100 % at (104, -43).
+      const ellipse = radialEllipse(30, 70, S)
+      const dragged = radialAngle(ellipse, { x: 60, y: 100 })
+      const outside = radialPoint(ellipse, dragged, 100)
+      expect(outside.x).toBeCloseTo(104, 0)
+      expect(outside.y).toBeCloseTo(-43, 0)
+      const ray = radialRay(ellipse, dragged, 100, S)
+      expect(ray).toBe(farthestCornerAngle(ellipse, S))
+      const end = radialPoint(ellipse, ray, 100)
+      expect(end.x).toBeCloseTo(S)
+      expect(end.y).toBeCloseTo(0)
+    })
+
+    it('falls back when a kept ray no longer fits after the centre moved', () => {
+      const before = radialEllipse(30, 70, S)
+      const dragged = radialAngle(before, { x: 20, y: 170 })
+      const position = radialPosition(before, { x: 20, y: 170 })
+      expect(radialRay(before, dragged, position, S)).toBe(dragged)
+
+      const after = radialEllipse(80, 80, S)
+      expect(radialPoint(after, dragged, position).y).toBeGreaterThan(S)
+      const ray = radialRay(after, dragged, position, S)
+      const end = radialPoint(after, ray, position)
+      expect(end.x).toBeGreaterThanOrEqual(0)
+      expect(end.y).toBeGreaterThanOrEqual(0)
+      expect(end.x).toBeLessThanOrEqual(S)
+      expect(end.y).toBeLessThanOrEqual(S)
+    })
+
+    it('keeps a dragged ray while the farthest stop stays inside', () => {
+      const ellipse = radialEllipse(50, 50, S)
+      const dragged = radialAngle(ellipse, { x: 30, y: 88 })
+      expect(radialRay(ellipse, dragged, 40, S)).toBe(dragged)
+      expect(radialRay(ellipse, null, 40, S)).toBe(farthestCornerAngle(ellipse, S))
+    })
+  })
+})

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

@@ -0,0 +1,234 @@
+import { ref } from 'vue'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import Combobox from './Combobox.vue'
+import type { ComboboxOption } from '../ComboboxPanel/combobox-types'
+
+// Flat args type used for Meta/StoryObj — avoids the discriminated union in
+// ComboboxOptions causing TypeScript to erase props to Record<string,any>.
+type ComboboxStoryArgs = {
+  variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'link'
+  icon?: string
+  placeholder?: string
+  placement?: 'left' | 'right'
+  matchWidth?: boolean
+  showChips?: boolean
+  fullWidth?: boolean
+  singleSelect?: boolean
+  options: ComboboxOption[]
+  allowNew?: boolean
+}
+
+const CITIES = [
+  { label: 'Almere', value: 'ALM' },
+  { label: 'Amersfoort', value: 'AMF' },
+  { label: 'Amsterdam', value: 'AMS' },
+  { label: 'Apeldoorn', value: 'APD' },
+  { label: 'Arnhem', value: 'ARN' },
+  { label: 'Bolsward', value: 'BOL' },
+  { label: 'Breda', value: 'BRD' },
+  { label: 'Den Haag', value: 'DHG' },
+  { label: 'Dokkum', value: 'DOK' },
+  { label: 'Dordrecht', value: 'DOR' },
+  { label: 'Eindhoven', value: 'EHV' },
+  { label: 'Enschede', value: 'ENS' },
+  { label: 'Franeker', value: 'FRK' },
+  { label: 'Groningen', value: 'GRQ' },
+  { label: 'Haarlem', value: 'HAA' },
+  { label: 'Harlingen', value: 'HRL' },
+  { label: 'Hindeloopen', value: 'HIN' },
+  { label: 'IJlst', value: 'IJL' },
+  { label: 'Leeuwarden', value: 'LWR' },
+  { label: 'Leiden', value: 'LEI' },
+  { label: 'Maastricht', value: 'MST' },
+  { label: 'Nijmegen', value: 'NJM' },
+  { label: 'Rotterdam', value: 'RTM' },
+  { label: 'Sloten', value: 'SLT' },
+  { label: 'Sneek', value: 'SNK' },
+  { label: 'Stavoren', value: 'STV' },
+  { label: "'s-Hertogenbosch", value: 'HTG' },
+  { label: 'Tilburg', value: 'TLB' },
+  { label: 'Utrecht', value: 'UTC' },
+  { label: 'Workum', value: 'WRK' },
+  { label: 'Zaanstad', value: 'ZAA' },
+  { label: 'Zwolle', value: 'ZWO' },
+]
+
+export default {
+  title: 'Components/Organisms/Combobox',
+  // Cast needed: withDefaults + discriminated union props cause Storybook's
+  // component type check to fail; ComboboxStoryArgs is used for args instead.
+  component: Combobox as unknown as Meta<ComboboxStoryArgs>['component'],
+  decorators: [
+    () => ({
+      template:
+        '<div style="min-height: 450px; padding: 16px; display: flex; align-items: start; justify-content: center; position: relative;"><story /></div>',
+    }),
+  ],
+} satisfies Meta<ComboboxStoryArgs>
+
+type Story = StoryObj<ComboboxStoryArgs>
+
+export const StringOptions: Story = {
+  render: (args) => ({
+    components: { Combobox },
+    setup() {
+      const selected = ref<string[]>([])
+      const remove = (val: string) => {
+        selected.value = selected.value.filter((v) => v !== val)
+      }
+      return { args, selected, remove }
+    },
+    template: `
+      <Combobox v-bind="args" v-model="selected">Steden</Combobox>
+      <div style="position: absolute; top: 0; right: 0; font-size: 12px; color: #6b7280;">
+        <div v-for="val in selected" :key="val" style="cursor: pointer;" @click="remove(val)">{{ val }}</div>
+        <em v-if="!selected.length">Geen selectie</em>
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Zoeken...',
+    options: CITIES.map((city) => city.label),
+  },
+}
+
+export const AllowNew: Story = {
+  render: (args) => ({
+    components: { Combobox },
+    setup() {
+      const selected = ref<(string | number)[]>([])
+      const remove = (val: string | number) => {
+        selected.value = selected.value.filter((v) => v !== val)
+      }
+      return { args, selected, remove }
+    },
+    template: `
+      <Combobox v-bind="args" v-model="selected">Tags</Combobox>
+      <div style="position: absolute; top: 0; right: 0; font-size: 12px; color: #6b7280;">
+        <div v-for="val in selected" :key="val" style="cursor: pointer;" @click="remove(val)">{{ val }}</div>
+        <em v-if="!selected.length">Geen selectie</em>
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Zoeken of toevoegen...',
+    options: CITIES.map((city) => city.label),
+    allowNew: true,
+  },
+}
+
+export const ObjectOptions: Story = {
+  render: (args) => ({
+    components: { Combobox },
+    setup() {
+      const selected = ref<(string | number)[]>([])
+      const remove = (val: string | number) => {
+        selected.value = selected.value.filter((v) => v !== val)
+      }
+      return { args, selected, remove }
+    },
+    template: `
+      <Combobox v-bind="args" v-model="selected">Steden</Combobox>
+      <div style="position: absolute; top: 0; right: 0; font-size: 12px; color: #6b7280;">
+        <div v-for="val in selected" :key="val" style="cursor: pointer;" @click="remove(val)">{{ val }}</div>
+        <em v-if="!selected.length">Geen selectie</em>
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Selecteer een stad...',
+    options: CITIES,
+  },
+}
+
+export const SingleSelect: Story = {
+  render: (args) => ({
+    components: { Combobox },
+    setup() {
+      const selected = ref<(string | number)[]>([])
+      return { args, selected }
+    },
+    template: `
+      <Combobox v-bind="args" v-model="selected">{{ selected[0] ?? 'Kies een stad' }}</Combobox>
+      <div style="position: absolute; top: 0; right: 0; font-size: 12px; color: #6b7280;">
+        <span>{{ selected[0] ?? '—' }}</span>
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Zoeken...',
+    options: CITIES,
+    singleSelect: true,
+  },
+}
+
+export const MatchWidth: Story = {
+  render: (args) => ({
+    components: { Combobox },
+    setup() {
+      const selected = ref<(string | number)[]>([])
+      return { args, selected }
+    },
+    template: `
+      <div style="width: 320px;">
+        <Combobox v-bind="args" v-model="selected" style="width: 100%;" full-width match-width>Kies een stad</Combobox>
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Zoeken...',
+    options: CITIES,
+    matchWidth: true,
+    fullWidth: true,
+  },
+}
+
+export const FullWidth: Story = {
+  decorators: [
+    () => ({
+      template:
+        '<div style="min-height: 450px; padding: 16px; display: flex; flex-direction: column; gap: 8px; position: relative;"><story /></div>',
+    }),
+  ],
+  render: (args) => ({
+    components: { Combobox },
+    setup() {
+      const selected = ref<(string | number)[]>([])
+      return { args, selected }
+    },
+    template: `
+      <p style="font-size: 12px; color: #6b7280; margin: 0;">The combobox below stretches to fill its container width.</p>
+      <div style="width: 100%; border: 1px dashed #d1d5db; padding: 12px; border-radius: 8px; box-sizing: border-box;">
+        <Combobox v-bind="args" v-model="selected">Kies een stad</Combobox>
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Zoeken...',
+    options: CITIES,
+    fullWidth: true,
+    matchWidth: true,
+  },
+}
+
+export const HideChips: Story = {
+  render: (args) => ({
+    components: { Combobox },
+    setup() {
+      const selected = ref<(string | number)[]>([])
+      return { args, selected }
+    },
+    template: `
+      <Combobox v-bind="args" v-model="selected">Steden</Combobox>
+      <div style="position: absolute; top: 0; right: 0; font-size: 12px; color: #6b7280;">
+        <div v-for="val in selected" :key="val">{{ val }}</div>
+        <em v-if="!selected.length">Geen selectie</em>
+      </div>
+    `,
+  }),
+  args: {
+    placeholder: 'Zoeken...',
+    options: CITIES,
+    showChips: false,
+  },
+}