Merge remote-tracking branch 'origin/v3' into feat/init-blog

docs/app/components/content/examples/command-palette/CommandPaletteIgnoreFilterExample.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { refDebounced } from '@vueuse/core'
+
 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)
 
 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
-  key: 'command-palette-users',
   params: { q: searchTermDebounced },
   transform: (data: { id: number, name: string, email: string }[]) => {
     return data?.map(user => ({ id: user.id, label: user.name, suffix: user.email, avatar: { src: `https://i.pravatar.cc/120?img=${user.id}` } })) || []

docs/app/components/content/examples/input-menu/InputMenuIgnoreFilterExample.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { refDebounced } from '@vueuse/core'
 import type { AvatarProps } from '@nuxt/ui'
 
 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)
 
 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
-  key: 'typicode-users',
   params: { q: searchTermDebounced },
   transform: (data: { id: number, name: string }[]) => {
     return data?.map(user => ({

docs/app/components/content/examples/select-menu/SelectMenuIgnoreFilterExample.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { refDebounced } from '@vueuse/core'
 import type { AvatarProps } from '@nuxt/ui'
 
 const searchTerm = ref('')
 const searchTermDebounced = refDebounced(searchTerm, 200)
 
 const { data: users, status } = await useFetch('https://jsonplaceholder.typicode.com/users', {
-  key: 'typicode-users',
   params: { q: searchTermDebounced },
   transform: (data: { id: number, name: string }[]) => {
     return data?.map(user => ({

docs/app/components/content/examples/table/TableGroupedRowsExample.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { h, resolveComponent } from 'vue'
+import type { TableColumn } from '@nuxt/ui'
+import { getGroupedRowModel, type GroupingOptions } from '@tanstack/vue-table'
+
+const UBadge = resolveComponent('UBadge')
+
+type Account = {
+  id: string
+  name: string
+}
+
+type PaymentStatus = 'paid' | 'failed' | 'refunded'
+
+type Payment = {
+  id: string
+  date: string
+  status: PaymentStatus
+  email: string
+  amount: number
+  account: Account
+}
+
+const getColorByStatus = (status: PaymentStatus) => {
+  return {
+    paid: 'success',
+    failed: 'error',
+    refunded: 'neutral'
+  }[status]
+}
+
+const data = ref<Payment[]>([
+  {
+    id: '4600',
+    date: '2024-03-11T15:30:00',
+    status: 'paid',
+    email: 'james.anderson@example.com',
+    amount: 594,
+    account: {
+      id: '1',
+      name: 'Account 1'
+    }
+  },
+  {
+    id: '4599',
+    date: '2024-03-11T10:10:00',
+    status: 'failed',
+    email: 'mia.white@example.com',
+    amount: 276,
+    account: {
+      id: '2',
+      name: 'Account 2'
+    }
+  },
+  {
+    id: '4598',
+    date: '2024-03-11T08:50:00',
+    status: 'refunded',
+    email: 'william.brown@example.com',
+    amount: 315,
+    account: {
+      id: '1',
+      name: 'Account 1'
+    }
+  },
+  {
+    id: '4597',
+    date: '2024-03-10T19:45:00',
+    status: 'paid',
+    email: 'emma.davis@example.com',
+    amount: 529,
+    account: {
+      id: '2',
+      name: 'Account 2'
+    }
+  },
+  {
+    id: '4596',
+    date: '2024-03-10T15:55:00',
+    status: 'paid',
+    email: 'ethan.harris@example.com',
+    amount: 639,
+    account: {
+      id: '1',
+      name: 'Account 1'
+    }
+  }
+])
+
+const columns: TableColumn<Payment>[] = [
+  {
+    id: 'title',
+    header: 'Item'
+  },
+  {
+    id: 'account_id',
+    accessorKey: 'account.id'
+  },
+  {
+    accessorKey: 'id',
+    header: '#',
+    cell: ({ row }) =>
+      row.getIsGrouped()
+        ? `${row.getValue('id')} records`
+        : `#${row.getValue('id')}`,
+    aggregationFn: 'count'
+  },
+  {
+    accessorKey: 'date',
+    header: 'Date',
+    cell: ({ row }) => {
+      return new Date(row.getValue('date')).toLocaleString('en-US', {
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: false
+      })
+    },
+    aggregationFn: 'max'
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status'
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    meta: {
+      class: {
+        td: 'w-full'
+      }
+    },
+    cell: ({ row }) =>
+      row.getIsGrouped()
+        ? `${row.getValue('email')} customers`
+        : row.getValue('email'),
+    aggregationFn: 'uniqueCount'
+  },
+  {
+    accessorKey: 'amount',
+    header: () => h('div', { class: 'text-right' }, 'Amount'),
+    cell: ({ row }) => {
+      const amount = Number.parseFloat(row.getValue('amount'))
+
+      const formatted = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'EUR'
+      }).format(amount)
+
+      return h('div', { class: 'text-right font-medium' }, formatted)
+    },
+    aggregationFn: 'sum'
+  }
+]
+
+const grouping_options = ref<GroupingOptions>({
+  groupedColumnMode: 'remove',
+  getGroupedRowModel: getGroupedRowModel()
+})
+</script>
+
+<template>
+  <UTable
+    :data="data"
+    :columns="columns"
+    :grouping="['account_id', 'status']"
+    :grouping-options="grouping_options"
+    :ui="{
+      root: 'min-w-full',
+      td: 'empty:p-0' // helps with the colspaned row added for expand slot
+    }"
+  >
+    <template #title-cell="{ row }">
+      <div v-if="row.getIsGrouped()" class="flex items-center">
+        <span
+          class="inline-block"
+          :style="{ width: `calc(${row.depth} * 1rem)` }"
+        />
+
+        <UButton
+          variant="outline"
+          color="neutral"
+          class="mr-2"
+          size="xs"
+          :icon="row.getIsExpanded() ? 'i-lucide-minus' : 'i-lucide-plus'"
+          @click="row.toggleExpanded()"
+        />
+        <strong v-if="row.groupingColumnId === 'account_id'">{{
+          row.original.account.name
+        }}</strong>
+        <UBadge
+          v-else-if="row.groupingColumnId === 'status'"
+          :color="getColorByStatus(row.original.status)"
+          class="capitalize"
+          variant="subtle"
+        >
+          {{ row.original.status }}
+        </UBadge>
+      </div>
+    </template>
+  </UTable>
+</template>

docs/app/components/content/examples/tabs/TabsModelValueExample.vue

@@ -1,22 +1,32 @@
 <script setup lang="ts">
 import type { TabsItem } from '@nuxt/ui'
 
+const route = useRoute()
+const router = useRouter()
+
 const items: TabsItem[] = [
   {
-    label: 'Account'
+    label: 'Account',
+    value: 'account'
   },
   {
-    label: 'Password'
+    label: 'Password',
+    value: 'password'
   }
 ]
 
-const active = ref('0')
-
-// Note: This is for demonstration purposes only. Don't do this at home.
-onMounted(() => {
-  setInterval(() => {
-    active.value = String((Number(active.value) + 1) % items.length)
-  }, 2000)
+const active = computed({
+  get() {
+    return (route.query.tab as string) || 'account'
+  },
+  set(tab) {
+    // Hash is specified here to prevent the page from scrolling to the top
+    router.push({
+      path: '/components/tabs',
+      query: { tab },
+      hash: '#control-active-item'
+    })
+  }
 })
 </script>
 

docs/app/composables/useLinks.ts

@@ -98,7 +98,7 @@ export function useLinks() {
       label: 'Raycast Extension',
       description: 'Access Nuxt UI components without leaving your editor.',
       icon: 'i-simple-icons-raycast',
-      to: 'https://www.raycast.com/HugoRCD/nuxt-ui',
+      to: 'https://www.raycast.com/HugoRCD/nuxt',
       target: '_blank'
     }, {
       label: 'Figma to Code',

docs/content/1.getting-started/3.theme.md

@@ -973,7 +973,7 @@ export default {
 
 ```vue [src/runtime/components/Card.vue]
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>

docs/content/1.getting-started/contribution.md

@@ -16,7 +16,7 @@ Here's an overview of the key directories and files in the Nuxt UI project struc
 
 ### Documentation
 
-The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` v3 to generate pages from Markdown files. See the [Content v3 Docs](https://content3.nuxt.dev/docs/getting-started) for details on how it works. Here's a breakdown of its structure:
+The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` v3 to generate pages from Markdown files. See the [Nuxt Content documentation](https://content.nuxt.com/docs/getting-started) for details on how it works. Here's a breakdown of its structure:
 
 ```bash
 ├── app/

docs/content/3.components/form.md

@@ -24,7 +24,7 @@ It requires two props:
 **No validation library is included** by default, ensure you **install the one you need**.
 ::
 
-::tabs
+::tabs{class="gap-0"}
   ::component-example{label="Valibot"}
   ---
   name: 'form-example-valibot'

docs/content/3.components/navigation-menu.md

@@ -21,8 +21,12 @@ Use the `items` prop as an array of objects with the following properties:
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
+- `tooltip?: TooltipProps`{lang="ts-type"}
 - `trailingIcon?: string`{lang="ts-type"}
 - `type?: 'label' | 'link'`{lang="ts-type"}
+- `collapsible?: boolean`{lang="ts-type"}
+- `defaultOpen?: boolean`{lang="ts-type"}
+- `open?: boolean`{lang="ts-type"}
 - `value?: string`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
@@ -140,7 +144,7 @@ Each item can take a `children` array of objects with the following properties t
 Use the `orientation` prop to change the orientation of the NavigationMenu.
 
 ::note
-When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties.
+When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties. You can also use the `collapsible` property to control if the item is collapsible.
 ::
 
 ::component-code

docs/content/3.components/slider.md

@@ -136,6 +136,21 @@ props:
 ---
 ::
 
+### Tooltip :badge{label="Soon" class="align-text-top"}
+
+Use the `tooltip` prop to display a [Tooltip](/components/tooltip) around the Slider thumbs with the current value. You can set it to `true` for default behavior or pass an object to customize it with any property from the [Tooltip](/components/tooltip#props) component.
+
+::component-code
+---
+ignore:
+  - defaultValue
+  - tooltip
+props:
+  defaultValue: 50
+  tooltip: true
+---
+::
+
 ### Disabled
 
 Use the `disabled` prop to disable the Slider.

docs/content/3.components/table.md

@@ -260,6 +260,30 @@ You can use the `expanded` prop to control the expandable state of the rows (can
 You could also add this action to the [`DropdownMenu`](/components/dropdown-menu) component inside the `actions` column.
 ::
 
+### With grouped rows
+
+You can group rows based on a given column value and show/hide sub rows via some button added to the cell using the TanStack Table [Grouping APIs](https://tanstack.com/table/latest/docs/api/features/grouping).
+
+#### Important parts:
+
+* Add prop `grouping` to `UTable` component with an array of column ids you want to group by.
+* Add prop `grouping-options` to `UTable`. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
+* Expand rows via `row.toggleExpanded()` method on any cell of the row. Keep in mind, it also toggles `#expanded` slot.
+* Use `aggregateFn` on column definition to define how to aggregate the rows.
+* `agregatedCell` renderer on column definition only works if there is no `cell` renderer.
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-grouped-rows-example'
+highlights:
+  - 159
+  - 169
+class: '!p-0'
+---
+::
+
 ### With row selection
 
 You can add a new column that renders a [Checkbox](/components/checkbox) component inside the `header` and `cell` to select rows using the TanStack Table [Row Selection APIs](https://tanstack.com/table/latest/docs/api/features/row-selection).

docs/content/3.components/tabs.md

@@ -210,10 +210,6 @@ You can control the active item by using the `default-value` prop or the `v-mode
 
 :component-example{name="tabs-model-value-example"}
 
-::tip
-You can also pass the `value` of one of the items if provided.
-::
-
 ### With content slot
 
 Use the `#content` slot to customize the content of each item.

docs/package.json

@@ -3,25 +3,25 @@
   "name": "@nuxt/ui-docs",
   "type": "module",
   "dependencies": {
-    "@ai-sdk/vue": "^1.2.10",
+    "@ai-sdk/vue": "^1.2.11",
     "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.40",
+    "@iconify-json/lucide": "^1.2.41",
     "@iconify-json/simple-icons": "^1.2.33",
     "@iconify-json/vscode-icons": "^1.2.20",
     "@nuxt/content": "^3.5.1",
     "@nuxt/image": "^1.10.0",
     "@nuxt/ui": "latest",
-    "@nuxt/ui-pro": "^3.1.1",
-    "@nuxthub/core": "^0.8.25",
+    "@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui-pro@a30de4d",
+    "@nuxthub/core": "^0.8.27",
     "@nuxtjs/plausible": "^1.2.0",
     "@octokit/rest": "^21.1.1",
     "@rollup/plugin-yaml": "^4.1.2",
     "@vueuse/integrations": "^13.1.0",
     "@vueuse/nuxt": "^13.1.0",
-    "ai": "^4.3.13",
+    "ai": "^4.3.15",
     "capture-website": "^4.2.0",
     "joi": "^17.13.3",
-    "motion-v": "^1.0.1",
+    "motion-v": "^1.0.2",
     "nuxt": "^3.17.2",
     "nuxt-component-meta": "^0.11.0",
     "nuxt-llms": "^0.1.2",
@@ -31,12 +31,12 @@
     "sortablejs": "^1.15.6",
     "superstruct": "^2.0.2",
     "ufo": "^1.6.1",
-    "valibot": "^1.0.0",
-    "workers-ai-provider": "^0.3.0",
+    "valibot": "^1.1.0",
+    "workers-ai-provider": "^0.3.1",
     "yup": "^1.6.1",
     "zod": "^3.24.4"
   },
   "devDependencies": {
-    "wrangler": "^4.14.1"
+    "wrangler": "^4.14.4"
   }
 }

docs/server/plugins/llms.ts

@@ -46,11 +46,33 @@ const parseBoolean = (value?: string): boolean => value === 'true'
 
 function getComponentMeta(componentName: string) {
   const pascalCaseName = componentName.charAt(0).toUpperCase() + componentName.slice(1)
-  const metaComponentName = `U${pascalCaseName}`
+
+  const strategies = [
+    `U${pascalCaseName}`,
+    `Prose${pascalCaseName}`,
+    pascalCaseName
+  ]
+
+  let componentMeta: any
+  let finalMetaComponentName: string = pascalCaseName
+
+  for (const nameToTry of strategies) {
+    finalMetaComponentName = nameToTry
+    const metaAttempt = (meta as Record<string, any>)[nameToTry]?.meta
+    if (metaAttempt) {
+      componentMeta = metaAttempt
+      break
+    }
+  }
+
+  if (!componentMeta) {
+    console.warn(`[getComponentMeta] Metadata not found for ${pascalCaseName} using strategies: U, Prose, or no prefix. Last tried: ${finalMetaComponentName}`)
+  }
+
   return {
     pascalCaseName,
-    metaComponentName,
-    componentMeta: (meta as Record<string, any>)[metaComponentName]?.meta
+    metaComponentName: finalMetaComponentName,
+    componentMeta
   }
 }
 
@@ -168,6 +190,7 @@ function emitItemHandler(event: any): string {
 const generateThemeConfig = ({ pro, prose, componentName }: ThemeConfig) => {
   const computedTheme = pro ? (prose ? themePro.prose : themePro) : theme
   const componentTheme = computedTheme[componentName as keyof typeof computedTheme]
+
   return {
     [pro ? 'uiPro' : 'ui']: prose
       ? { prose: { [componentName]: componentTheme } }
@@ -284,10 +307,14 @@ export default defineNitroPlugin((nitroApp) => {
     const componentName = camelCase(doc.title)
 
     visitAndReplace(doc, 'component-theme', (node) => {
-      const attributes = node[1] as ComponentAttributes
+      const attributes = node[1] as Record<string, string>
+      const mdcSpecificName = attributes?.slug
+
+      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
+
       const pro = parseBoolean(attributes[':pro'])
       const prose = parseBoolean(attributes[':prose'])
-      const appConfig = generateThemeConfig({ pro, prose, componentName })
+      const appConfig = generateThemeConfig({ pro, prose, componentName: finalComponentName })
 
       replaceNodeWithPre(
         node,
@@ -322,14 +349,23 @@ export default defineNitroPlugin((nitroApp) => {
     })
 
     visitAndReplace(doc, 'component-props', (node) => {
-      const { pascalCaseName, componentMeta } = getComponentMeta(componentName)
+      const attributes = node[1] as Record<string, string>
+      const mdcSpecificName = attributes?.name
+      const isProse = parseBoolean(attributes[':prose'])
+
+      const finalComponentName = mdcSpecificName ? camelCase(mdcSpecificName) : componentName
+
+      const { pascalCaseName, componentMeta } = getComponentMeta(finalComponentName)
+
       if (!componentMeta?.props) return
 
+      const interfaceName = isProse ? `Prose${pascalCaseName}Props` : `${pascalCaseName}Props`
+
       const interfaceCode = generateTSInterface(
-        `${pascalCaseName}Props`,
+        interfaceName,
         Object.values(componentMeta.props),
         propItemHandler,
-        `Props for the ${pascalCaseName} component`
+        `Props for the ${isProse ? 'Prose' : ''}${pascalCaseName} component`
       )
       replaceNodeWithPre(node, 'ts', interfaceCode)
     })