@nexxtmove/ui 2.6.0 → 2.8.0

package/src/components/editor/molecules/EditorColor/_ColorField.vue

@@ -31,7 +31,10 @@ export interface ColorFieldProps<P extends string> {
   suggestions?: string[]
   /** Theme roles offered above the suggestions; an entry with an unreadable hex is left out. */
   themeRoles?: EditorColorThemeRole[]
-  /** Offer an opacity slider, hidden while a theme role is selected. */
+  /**
+   * Offer an opacity slider, also while a theme role is selected: it then stands
+   * at 100%, and moving it turns the role into its hex with that opacity.
+   */
   showAlpha?: boolean
   /**
    * The fills offered: `['solid']` (the default), `['solid', 'gradient']` or
@@ -122,25 +125,27 @@ const offeredRoles = computed(() => themeRoles.filter((entry) => ROLE_HEX_PATTER
 const activeRole = computed(() => offeredRoles.value.find(({ role }) => role === storedRole.value))
 
 /**
+ * A role's hex as the picker gets it: opaque, in the 8-digit form.
+ *
  * Picking the role's own colour -- from the suggestions, or typed -- is how a
  * colour is detached from the theme without changing how it looks. The picker
- * reports nothing when it is told to pick the string it already has, so a role's
- * hex is handed over in its 8-digit form: with `show-alpha` off the picker never
- * reports an alpha pair, which makes every pick a change.
+ * reports nothing when it is told to pick the string it already has, so the hex
+ * is handed over with an `ff` pair: the picker writes an opaque colour as six
+ * digits and an alpha pair only below full opacity, so it never writes this
+ * string back, and every pick is a change. That holds with the opacity slider
+ * shown as well.
+ *
+ * A role has no opacity, so an alpha pair in the role's own hex is replaced by
+ * `ff`: the slider of an active role stands at 100%. Moving it below that writes
+ * the role's hex with the alpha pair, which detaches the role the same way;
+ * back at 100% it stays a literal (`OPAQUE_ALPHA_PATTERN`).
  *
- * A role has no opacity here, so an alpha pair in the role's own hex is replaced
- * by `ff`. Handed over translucent, the picker would drop that alpha the moment
- * the role turns `show-alpha` off, and write the opaque hex over the role.
+ * Opening the panel, or a role becoming active, writes nothing: the picker's
+ * primitives only report a change the user makes, and a key that leaves the
+ * slider where it is (ArrowRight at 100%) is no change.
  */
 const pickerHex = (roleHex: string) => `${roleHex.slice(0, 7)}ff`
 
-/**
- * A role class has no opacity, so the slider is only offered for a literal.
- * Hiding it is also what keeps the trick in `pickerHex` working: without the
- * alpha channel the picker reads the role's hex as opaque.
- */
-const alphaEnabled = computed(() => showAlpha && !activeRole.value)
-
 // An unparseable value -- empty, a token class such as `bg-red-500`, or copy
 // from before this component -- leaves the picker empty and its placeholder
 // visible, rather than being reported as a problem: the first pick writes a
@@ -401,7 +406,7 @@ watch(
     :label="label"
     :describedby="describedby"
     :formats="['hex']"
-    :show-alpha="alphaEnabled"
+    :show-alpha="showAlpha"
     :placeholder="placeholder"
     :suggestions="{ hex: suggestions }"
     :suggestions-label="suggestionsLabel"

package/src/components/editor/molecules/EditorColor/gradientClass.test.ts

@@ -0,0 +1,303 @@
+import { describe, it, expect } from 'vitest'
+import {
+  gradientClassToCss,
+  looksLikeGradientClass,
+  parseGradientClass,
+  serializeGradientClass,
+  type GradientClass,
+} from './gradientClass'
+import type { EditorColorRole } from './colorClass'
+
+describe('parseGradientClass', () => {
+  it('reads a linear gradient with two stops at their default positions', () => {
+    expect(parseGradientClass('bg-linear-135 from-[#7f56d9] to-[#432e73]')).toEqual({
+      type: 'linear',
+      angle: 135,
+      stops: [
+        { color: { hex: '#7f56d9' }, position: 0 },
+        { color: { hex: '#432e73' }, position: 100 },
+      ],
+    })
+  })
+
+  it('reads a via stop, roles and explicit positions', () => {
+    expect(
+      parseGradientClass(
+        'bg-linear-0 from-theme-main from-10% via-[#ffffff80] via-40% to-theme-text to-90%',
+      ),
+    ).toEqual({
+      type: 'linear',
+      angle: 0,
+      stops: [
+        { color: { role: 'main' }, position: 10 },
+        { color: { hex: '#ffffff80' }, position: 40 },
+        { color: { role: 'text' }, position: 90 },
+      ],
+    })
+  })
+
+  it('reads a centred radial gradient and one with a centre elsewhere', () => {
+    expect(parseGradientClass('bg-radial from-[#000000] to-[#ffffff]')).toMatchObject({
+      type: 'radial',
+      x: 50,
+      y: 50,
+    })
+    expect(parseGradientClass('bg-radial-[at_30%_70%] from-[#000000] to-[#ffffff]')).toMatchObject({
+      type: 'radial',
+      x: 30,
+      y: 70,
+    })
+  })
+
+  it('normalizes hexes: lower case, an opaque ff dropped', () => {
+    expect(parseGradientClass('bg-linear-90 from-[#AABBCCFF] to-[#AABBCC80]')?.stops).toEqual([
+      { color: { hex: '#aabbcc' }, position: 0 },
+      { color: { hex: '#aabbcc80' }, position: 100 },
+    ])
+  })
+
+  it('accepts the classes in another order', () => {
+    expect(parseGradientClass('to-[#ffffff] from-[#000000] bg-linear-45')).toMatchObject({
+      angle: 45,
+    })
+  })
+
+  it.each([
+    ['empty', ''],
+    ['undefined', undefined],
+    ['a solid colour', 'bg-[#ffffff]'],
+    ['no type', 'from-[#000000] to-[#ffffff]'],
+    ['no from', 'bg-linear-90 to-[#ffffff]'],
+    ['no to', 'bg-linear-90 from-[#000000]'],
+    ['an unknown role', 'bg-linear-90 from-theme-brand to-[#ffffff]'],
+    ['an angle of 360', 'bg-linear-360 from-[#000000] to-[#ffffff]'],
+    ['an angle with a leading zero', 'bg-linear-045 from-[#000000] to-[#ffffff]'],
+    ['a position above 100', 'bg-linear-90 from-[#000000] to-[#ffffff] to-101%'],
+    ['a via position without via', 'bg-linear-90 from-[#000000] via-40% to-[#ffffff]'],
+    ['two types', 'bg-linear-90 bg-radial from-[#000000] to-[#ffffff]'],
+    ['a stop given twice', 'bg-linear-90 from-[#000000] from-[#111111] to-[#ffffff]'],
+    ['an unknown class', 'bg-linear-90 from-[#000000] to-[#ffffff] rounded'],
+    ['a short hex', 'bg-linear-90 from-[#000] to-[#ffffff]'],
+    ['positions that run backwards', 'bg-linear-90 from-[#000000] from-80% to-[#ffffff] to-20%'],
+    ['oklab in the radial value', 'bg-radial-[at_30%_70%_in_oklab] from-[#000000] to-[#ffffff]'],
+    ['a centre above 100', 'bg-radial-[at_130%_70%] from-[#000000] to-[#ffffff]'],
+    ['a direction keyword', 'bg-linear-to-b from-[#000000] to-[#ffffff]'],
+  ])('returns null for %s', (_, value) => {
+    expect(parseGradientClass(value)).toBeNull()
+  })
+})
+
+describe('serializeGradientClass', () => {
+  it('writes the fixed order and leaves default positions out', () => {
+    expect(
+      serializeGradientClass({
+        type: 'linear',
+        angle: 135,
+        stops: [
+          { color: { hex: '#7f56d9' }, position: 0 },
+          { color: { role: 'main' }, position: 40 },
+          { color: { hex: '#432e73cc' }, position: 100 },
+        ],
+      }),
+    ).toBe('bg-linear-135 from-[#7f56d9] via-theme-main via-40% to-[#432e73cc]')
+  })
+
+  it('writes every position that differs from 0, 50 and 100', () => {
+    expect(
+      serializeGradientClass({
+        type: 'linear',
+        angle: 90,
+        stops: [
+          { color: { hex: '#000000' }, position: 5 },
+          { color: { hex: '#888888' }, position: 50 },
+          { color: { hex: '#ffffff' }, position: 95 },
+        ],
+      }),
+    ).toBe('bg-linear-90 from-[#000000] from-5% via-[#888888] to-[#ffffff] to-95%')
+  })
+
+  it('writes hexes in lower case without an opaque ff', () => {
+    expect(
+      serializeGradientClass({
+        type: 'linear',
+        angle: 0,
+        stops: [
+          { color: { hex: '#AABBCCFF' }, position: 0 },
+          { color: { hex: '#AABBCC00' }, position: 100 },
+        ],
+      }),
+    ).toBe('bg-linear-0 from-[#aabbcc] to-[#aabbcc00]')
+  })
+
+  it('writes bg-radial for a centred radial gradient, the arbitrary value otherwise', () => {
+    const stops = [
+      { color: { hex: '#000000' as const }, position: 0 },
+      { color: { hex: '#ffffff' as const }, position: 100 },
+    ]
+    expect(serializeGradientClass({ type: 'radial', x: 50, y: 50, stops })).toBe(
+      'bg-radial from-[#000000] to-[#ffffff]',
+    )
+    expect(serializeGradientClass({ type: 'radial', x: 30, y: 70, stops })).toBe(
+      'bg-radial-[at_30%_70%] from-[#000000] to-[#ffffff]',
+    )
+  })
+
+  it('rounds, clamps and wraps out-of-range numbers', () => {
+    expect(
+      serializeGradientClass({
+        type: 'linear',
+        angle: -10.4,
+        stops: [
+          { color: { hex: '#000000' }, position: -3 },
+          { color: { hex: '#ffffff' }, position: 99.6 },
+        ],
+      }),
+    ).toBe('bg-linear-350 from-[#000000] to-[#ffffff]')
+    expect(
+      serializeGradientClass({
+        type: 'linear',
+        angle: 360,
+        stops: [
+          { color: { hex: '#000000' }, position: 0 },
+          { color: { hex: '#ffffff' }, position: 100 },
+        ],
+      }),
+    ).toMatch(/^bg-linear-0 /)
+  })
+
+  it('never writes var() or a free linear-gradient', () => {
+    const value = serializeGradientClass({
+      type: 'linear',
+      angle: 45,
+      stops: [
+        { color: { role: 'accent' }, position: 0 },
+        { color: { role: 'background' }, position: 100 },
+      ],
+    })
+    expect(value).not.toMatch(/var\(|linear-gradient/)
+  })
+})
+
+describe('round trip', () => {
+  const cases: GradientClass[] = [
+    {
+      type: 'linear',
+      angle: 0,
+      stops: [
+        { color: { hex: '#000000' }, position: 0 },
+        { color: { hex: '#ffffff' }, position: 100 },
+      ],
+    },
+    {
+      type: 'linear',
+      angle: 359,
+      stops: [
+        { color: { role: 'heading' }, position: 20 },
+        { color: { hex: '#12345678' }, position: 20 },
+        { color: { role: 'text' }, position: 20 },
+      ],
+    },
+    {
+      type: 'radial',
+      x: 0,
+      y: 100,
+      stops: [
+        { color: { hex: '#7f56d900' }, position: 0 },
+        { color: { hex: '#7f56d9' }, position: 50 },
+        { color: { hex: '#432e73' }, position: 100 },
+      ],
+    },
+    {
+      type: 'radial',
+      x: 50,
+      y: 50,
+      stops: [
+        { color: { role: 'main' }, position: 33 },
+        { color: { role: 'main' }, position: 67 },
+      ],
+    },
+  ]
+
+  it.each(cases.map((value, index) => [index, value] as const))(
+    'parse(serialize(x)) equals x for case %i',
+    (_, value) => {
+      expect(parseGradientClass(serializeGradientClass(value))).toEqual(value)
+    },
+  )
+
+  it.each([
+    'bg-linear-135 from-[#7f56d9] via-theme-main via-40% to-[#432e73cc]',
+    'bg-radial-[at_30%_70%] from-theme-accent to-[#ffffff00] to-80%',
+    'bg-radial from-[#000000] from-10% to-[#ffffff]',
+  ])('serialize(parse(s)) equals s for %s', (value) => {
+    const parsed = parseGradientClass(value)
+    expect(parsed && serializeGradientClass(parsed)).toBe(value)
+  })
+})
+
+describe('looksLikeGradientClass', () => {
+  it('is true for a value led by a gradient type, readable or not', () => {
+    expect(looksLikeGradientClass('bg-linear-90 from-[#000000] to-[#ffffff]')).toBe(true)
+    expect(looksLikeGradientClass('bg-linear-999 garbage')).toBe(true)
+    expect(looksLikeGradientClass('bg-radial')).toBe(true)
+    expect(looksLikeGradientClass('bg-radial-[at_1%_2%] x')).toBe(true)
+  })
+
+  it('is false for a solid colour or nothing', () => {
+    expect(looksLikeGradientClass('bg-[#ffffff]')).toBe(false)
+    expect(looksLikeGradientClass('bg-theme-main')).toBe(false)
+    expect(looksLikeGradientClass('bg-radialx')).toBe(false)
+    expect(looksLikeGradientClass(undefined)).toBe(false)
+  })
+})
+
+describe('gradientClassToCss', () => {
+  const roles = (role: EditorColorRole) => `var(--color-theme-${role})`
+  const css = (value: string) => {
+    const parsed = parseGradientClass(value)
+    if (!parsed) throw new Error(`unreadable: ${value}`)
+    return gradientClassToCss(parsed, roles)
+  }
+
+  it('writes a linear gradient with the angle and every position', () => {
+    expect(css('bg-linear-135 from-[#7f56d9] to-[#432e73]')).toBe(
+      'linear-gradient(135deg in oklab, #7f56d9 0%, #432e73 100%)',
+    )
+  })
+
+  it('writes a centred radial gradient without a position', () => {
+    expect(css('bg-radial from-[#000000] to-[#ffffff] to-80%')).toBe(
+      'radial-gradient(in oklab, #000000 0%, #ffffff 80%)',
+    )
+  })
+
+  it('writes the centre before the interpolation method off centre, in oklab', () => {
+    expect(css('bg-radial-[at_30%_70%] from-[#000000] to-[#ffffff]')).toBe(
+      'radial-gradient(at 30% 70% in oklab, #000000 0%, #ffffff 100%)',
+    )
+  })
+
+  it('writes three stops with the via position, also the default 50 %', () => {
+    expect(css('bg-linear-90 from-[#000000] via-[#888888] to-[#ffffff]')).toBe(
+      'linear-gradient(90deg in oklab, #000000 0%, #888888 50%, #ffffff 100%)',
+    )
+    expect(css('bg-linear-90 from-[#000000] from-10% via-[#888888] via-40% to-[#ffffff]')).toBe(
+      'linear-gradient(90deg in oklab, #000000 10%, #888888 40%, #ffffff 100%)',
+    )
+  })
+
+  it('resolves a role and keeps a hex with alpha', () => {
+    expect(css('bg-linear-0 from-theme-main to-[#432E73CC]')).toBe(
+      'linear-gradient(0deg in oklab, var(--color-theme-main) 0%, #432e73cc 100%)',
+    )
+  })
+
+  it('round-trips: serialize, parse and draw give the same CSS as the parsed value', () => {
+    const value = 'bg-radial-[at_20%_80%] from-theme-accent via-[#ffffff80] via-35% to-[#000000]'
+    const parsed = parseGradientClass(value)
+    expect(parsed && serializeGradientClass(parsed)).toBe(value)
+    expect(css(value)).toBe(
+      'radial-gradient(at 20% 80% in oklab, var(--color-theme-accent) 0%, #ffffff80 35%, #000000 100%)',
+    )
+  })
+})

package/src/components/editor/molecules/EditorDashPattern/EditorDashPattern.stories.ts

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import { expect, userEvent, waitFor, within } from 'storybook/test'
+import EditorDashPattern from './EditorDashPattern.vue'
+import type { EditorDashPatternValue } from './EditorDashPattern.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Dash Pattern',
+  component: EditorDashPattern,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorDashPattern>
+
+type Story = StoryObj<typeof EditorDashPattern>
+
+/** Shows the model as-is: two whole px values. */
+const render = (args: Story['args'], initial: EditorDashPatternValue) => ({
+  components: { EditorDashPattern },
+  setup() {
+    const pattern = ref(initial)
+    return { args, pattern }
+  },
+  template: `
+    <div>
+      <EditorDashPattern v-bind="args" v-model="pattern" />
+      <p data-testid="dash-pattern-value" class="small-normal text-gray-700">
+        {{ pattern.dash }} / {{ pattern.gap }}
+      </p>
+    </div>
+  `,
+})
+
+const readout = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector('[data-testid="dash-pattern-value"]')!.textContent!.trim()
+
+export const Default: Story = {
+  render: (args) => render(args, { dash: 8, gap: 4 }),
+}
+
+/**
+ * The field never goes empty: clearing it and leaving puts the previous value
+ * back. Values outside 1-64 are clamped, with the field's snap animation.
+ */
+export const NeverEmpty: Story = {
+  render: (args) => render(args, { dash: 8, gap: 4 }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const dash = canvas.getByRole('spinbutton', { name: 'Lengte (px)' })
+    const gap = canvas.getByRole('spinbutton', { name: 'Tussenruimte (px)' })
+
+    await userEvent.clear(dash)
+    await userEvent.tab()
+    await waitFor(() => expect(dash).toHaveValue(8))
+    expect(readout(canvasElement)).toBe('8 / 4')
+
+    await userEvent.clear(gap)
+    await userEvent.type(gap, '100')
+    await userEvent.tab()
+    await waitFor(() => expect(gap).toHaveValue(64))
+    expect(readout(canvasElement)).toBe('8 / 64')
+  },
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Dash',
+    messages: { dash: 'Length', gap: 'Gap', unit: 'px' },
+  },
+  render: (args) => render(args, { dash: 12, gap: 6 }),
+}

package/src/components/editor/molecules/EditorDashPattern/EditorDashPattern.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect } from 'vitest'
+import { flushPromises, mount, type DOMWrapper, type VueWrapper } from '@vue/test-utils'
+import EditorDashPattern, { EDITOR_DASH_PATTERN_LIMITS } from './EditorDashPattern.vue'
+import type { EditorDashPatternValue } from './EditorDashPattern.vue'
+
+const render = (modelValue: EditorDashPatternValue, props: Record<string, unknown> = {}) =>
+  mount(EditorDashPattern, { props: { modelValue, ...props } })
+
+const inputs = (wrapper: VueWrapper) => wrapper.findAll('input')
+
+const values = (wrapper: VueWrapper) =>
+  inputs(wrapper).map((input) => (input.element as HTMLInputElement).value)
+
+const lastEmit = (wrapper: VueWrapper) => wrapper.emitted('update:modelValue')?.at(-1)?.[0]
+
+/** Type and confirm, the way leaving the field does. */
+const commit = async (input: DOMWrapper<Element>, typed: string) => {
+  await input.setValue(typed)
+  await input.trigger('blur')
+  await flushPromises()
+}
+
+describe('EditorDashPattern', () => {
+  // No assertions on typography utilities: copy is found by text or by
+  // accessible name, so restyling cannot turn these red.
+  it('renders the Dutch default label', () => {
+    expect(render({ dash: 8, gap: 4 }).find('p').text()).toBe('Streep')
+  })
+
+  it('renders a custom label', () => {
+    expect(render({ dash: 8, gap: 4 }, { label: 'Dash' }).find('p').text()).toBe('Dash')
+  })
+
+  it('shows the two values in two fields side by side', () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    expect(values(wrapper)).toEqual(['8', '4'])
+    expect(wrapper.get('.grid-cols-2').classes()).toEqual(expect.arrayContaining(['grid', 'gap-2']))
+  })
+
+  it('captions each field visibly and names it with the caption plus unit', () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    expect(wrapper.text()).toContain('Lengte')
+    expect(wrapper.text()).toContain('Tussenruimte')
+    expect(inputs(wrapper).map((input) => input.attributes('aria-label'))).toEqual([
+      'Lengte (px)',
+      'Tussenruimte (px)',
+    ])
+  })
+
+  it('offers px only, so it renders no unit selector', () => {
+    expect(render({ dash: 8, gap: 4 }).find('select').exists()).toBe(false)
+  })
+
+  it('merges custom messages per key', () => {
+    const wrapper = render({ dash: 8, gap: 4 }, { messages: { dash: 'Length', unit: 'pixels' } })
+
+    expect(inputs(wrapper).map((input) => input.attributes('aria-label'))).toEqual([
+      'Length (pixels)',
+      'Tussenruimte (pixels)',
+    ])
+  })
+
+  it('writes the dash and keeps the gap', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[0], '12')
+
+    expect(lastEmit(wrapper)).toEqual({ dash: 12, gap: 4 })
+  })
+
+  it('writes the gap and keeps the dash', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[1], '6')
+
+    expect(lastEmit(wrapper)).toEqual({ dash: 8, gap: 6 })
+  })
+
+  it('passes on commit from the field that finished', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[1], '6')
+
+    expect(wrapper.emitted('commit')).toHaveLength(1)
+  })
+
+  it('clamps the dash to the limits', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[0], '500')
+
+    expect(lastEmit(wrapper)).toEqual({ dash: 64, gap: 4 })
+  })
+
+  it('clamps the gap to the limits', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[1], '0')
+
+    expect(lastEmit(wrapper)).toEqual({ dash: 8, gap: 1 })
+  })
+
+  it('is never empty: an emptied field puts the previous value back', async () => {
+    const wrapper = render({ dash: 8, gap: 4 })
+
+    await commit(inputs(wrapper)[0], '')
+
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
+    expect(wrapper.emitted('commit')).toBeUndefined()
+    expect(values(wrapper)).toEqual(['8', '4'])
+  })
+})
+
+// The consumer's matcher uses the same bounds, so they are a contract.
+describe('EDITOR_DASH_PATTERN_LIMITS', () => {
+  it('bounds both values to 1-64 px', () => {
+    expect(EDITOR_DASH_PATTERN_LIMITS).toEqual({
+      dash: { min: 1, max: 64 },
+      gap: { min: 1, max: 64 },
+    })
+  })
+})

package/src/components/editor/molecules/EditorFlexDirection/EditorFlexDirection.stories.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import EditorFlexDirection from './EditorFlexDirection.vue'
+
+export default {
+  title: 'Components/Editor Components/Molecules/Editor Flex Direction',
+  component: EditorFlexDirection,
+  decorators: [() => ({ template: '<div class="w-100 mx-auto"><story /></div>' })],
+  argTypes: {
+    label: { control: 'text' },
+  },
+} satisfies Meta<typeof EditorFlexDirection>
+
+type Story = StoryObj<typeof EditorFlexDirection>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { EditorFlexDirection },
+    setup() {
+      const direction = ref<'flex-row' | 'flex-col'>('flex-row')
+      return { args, direction }
+    },
+    // The value is shown as-is: it is the Tailwind class the editor applies.
+    template: `
+      <div>
+        <EditorFlexDirection v-bind="args" v-model="direction" />
+        <p class="small-normal text-gray-700">{{ direction }}</p>
+      </div>
+    `,
+  }),
+}
+
+export const CustomMessages: Story = {
+  args: {
+    label: 'Direction',
+    messages: { horizontal: 'Horizontal', vertical: 'Vertical' },
+  },
+  render: (args) => ({
+    components: { EditorFlexDirection },
+    setup() {
+      const direction = ref<'flex-row' | 'flex-col'>('flex-row')
+      return { args, direction }
+    },
+    template: `<EditorFlexDirection v-bind="args" v-model="direction" />`,
+  }),
+}