From 0b93a09a81185003d588d304cd4a7c089f75f6d0 Mon Sep 17 00:00:00 2001 From: Hugo Richard Date: Tue, 16 Sep 2025 17:12:38 +0100 Subject: [PATCH] feat: update `@nuxt/ui` to match v4 --- data/libraries.ts | 66 ++++++++++++++++++++++++++++++----------------- data/sections.ts | 61 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+), 23 deletions(-) diff --git a/data/libraries.ts b/data/libraries.ts index 850dc8d..f443baa 100644 --- a/data/libraries.ts +++ b/data/libraries.ts @@ -5,51 +5,71 @@ export const libraries: Array = [ name: "Nuxt UI", onTopOf: "Reka UI", logo: "nuxt.svg", - url: "https://ui.nuxt.com?aff=7GP4Wq", - repoOwner: "nuxtlabs", + url: "https://ui.nuxt.com", + repoOwner: "nuxt", repoName: "ui", package: "@nuxt/ui", componentMatchings: [ "Accordion", "Alert", "Avatar", + "Avatar Group", "Badge", + "Banner", "Button", - "Date Picker", + "Button Group", + "Breadcrumb", + "Carousel", + "Marquee", + "Collapsible", + "Divider", "Dropdown", + "Icon", "Keyboard Key", - "Input", - "Textarea", - "Select", - "Dropdown", + "Chat Bubble", + "Select Button", + "Table of Contents", + "Marquee", + "Link", + "Timeline", + "Auto Complete", "Checkbox", + "Color Picker", + "Date Picker", + "File Input", + "Form", + "Form Field", + "Input", + "Input Number", + "Input Chips", + "OTP Input", "Radio", - "Toggle", "Range", - "Table", - "Vertical Navigation", + "Select", + "Textarea", + "Toggle", "Command Palette", + "Navigation Menu", "Pagination", + "Progress", + "Steps", "Tabs", + "Vertical Navigation", + "Context Menu", "Modal", - "Slideover", "Popover", - "Tooltip", - "Context Menu", + "Slideover", "Toast", + "Tooltip", "Card", "Container", + "Drawer", + "Footer", + "Header", "Skeleton", - "Divider", - "Progress", - "Carousel", - "Color Picker", - "OTP Input", - "Steps", + "Calendar", + "Table", "Tree", - "Breadcrumb", - "Timeline", - "Input Chips", ], filterMatchings: [ { id: "FStyled" }, @@ -65,7 +85,7 @@ export const libraries: Array = [ { id: "FRTLSupport" }, { id: "FTyped" }, { id: "FForm" }, - { id: "FFigma" }, // https://www.figma.com/community/file/1288455405058138934/nuxt-ui + { id: "FFigma" }, // https://go.nuxt.com/figma-ui ], }, { diff --git a/data/sections.ts b/data/sections.ts index e9a06e1..6182586 100644 --- a/data/sections.ts +++ b/data/sections.ts @@ -13,6 +13,10 @@ export const sections = [ help: "Contextual information to be emphasized to the user", }, { name: "Avatar" as const, help: "Rounded image of a resource" }, + { + name: "Avatar Group" as const, + help: "Group of user avatars", + }, { name: "Badge" as const, aliases: ["Chip", "Tag"], @@ -22,6 +26,10 @@ export const sections = [ name: "Button" as const, help: "Interactive element that users can click or tap to perform an action", }, + { + name: "Button Group" as const, + help: "Group of related buttons", + }, { name: "Select Button" as const, help: "A button (or button group) used for selection.", @@ -30,6 +38,10 @@ export const sections = [ name: "Toggle Button" as const, help: "A button used to select a boolean value.", }, + { + name: "Banner" as const, + help: "Promotional or informational banner", + }, { name: "Breadcrumb" as const, help: "Indicate the current page's location within a navigational hierarchy", @@ -39,6 +51,10 @@ export const sections = [ aliases: ["Slideshow", "Galleria"], help: "A slideshow component for cycling through elements, typically images or slides of text", }, + { + name: "Marquee" as const, + help: "A component that displays a continuous scrolling text or image", + }, { name: "Chat Bubble" as const, help: "Show one line of conversation and its data, like author image, name, time.", @@ -92,6 +108,18 @@ export const sections = [ name: "Timeline" as const, help: "A visual representation used to display a sequence of events or processes in chronological order.", }, + { + name: "Collapsible" as const, + help: "Content that can be expanded or collapsed", + }, + { + name: "Link" as const, + help: "Navigation link element with hover and active states", + }, + { + name: "Icon" as const, + help: "Display icons from various icon libraries", + }, ], }, { @@ -163,6 +191,18 @@ export const sections = [ aliases: ["File Upload"], help: "An input field for uploading files", }, + { + name: "Input Number" as const, + help: "Numeric input with increment/decrement controls", + }, + { + name: "Form" as const, + help: "Form container with validation and submission handling", + }, + { + name: "Form Field" as const, + help: "Individual form field with label and validation", + }, ], }, { @@ -210,6 +250,14 @@ export const sections = [ name: "Vertical Navigation" as const, help: "Navigation menu with items vertically stacked", }, + { + name: "Navigation Menu" as const, + help: "Flexible navigation component with sub-menus", + }, + { + name: "Table of Contents" as const, + help: "A list of sections and their corresponding headings that can be used to navigate a document", + } ], }, { @@ -264,6 +312,19 @@ export const sections = [ aliases: ["Placeholder"], help: "A placeholder typically used while content is loading", }, + { + name: "Header" as const, + help: "Website header with navigation", + }, + { + name: "Footer" as const, + help: "Website footer with links and information", + }, + { + name: "Drawer" as const, + aliases: ["Sidebar"], + help: "Slide-out panel for additional content or controls", + }, ], }, {