feat(Modal): accept breakpoint values in fullscreen prop

[benjamincanac]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Making a modal fullscreen only on mobile currently requires overriding the theme's slots, variants and compound variants in app.config.ts. This adds breakpoint values to the fullscreen prop so it works out of the box:

<UModal fullscreen="sm" />

The prop is now typed boolean | 'sm' | 'md' | 'lg', a breakpoint makes the modal fullscreen below it and a regular dialog above it. Works with scrollable as well, the content gets min-h-dvh below the breakpoint so it actually fills the screen.

ContentSearch and DashboardSearch size their modal through the fullscreen variant, so their themes get matching breakpoint keys and forwarding a breakpoint through them works too.

Also fixes the theme template generation for variants mixing boolean and string keys: the generated as typeof x[number] cast included the true/false keys, which tailwind-variants types as boolean, breaking typecheck on the generated compound variants.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[codspeed]

Merging this PR will improve performance by 11.65%

⚠️ Different runtime environments detected

Some benchmarks with significant performance changes were compared across different runtime environments,
which may affect the accuracy of the results.

Open the report in CodSpeed to investigate

⚡ 1 improved benchmark
✅ 30 untouched benchmarks

Performance Changes

	Benchmark	BASE	HEAD	Efficiency
⚡	plain <button>	1.3 ms	1.2 ms	+11.65%

Tip

Curious why performance improved? Comment @codspeedbot explain why performance improved on this PR, or directly use the CodSpeed MCP with your agent.

---

_{Comparing feat/modal-fullscreen-breakpoint (9870052) with v4 (ae24311)}

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@6900

commit: 9870052