docs: integrate @nuxt/ui-pro (#739)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
Co-authored-by: Florent Delerue <florentdelerue@hotmail.com>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/content/1.getting-started/2.installation.md

@@ -150,4 +150,13 @@ Update your `package.json` to the following:
 }
 ```
 
+```diff [package.json]
+{
+  "devDependencies": {
+-   "@nuxt/ui": "^2.9.0"
++   "@nuxt/ui": "npm:@nuxt/ui-edge@latest"
+  }
+}
+```
+
 Then run `pnpm install`, `yarn install` or `npm install`.

docs/content/1.getting-started/5.examples.md

@@ -134,14 +134,14 @@ Here is some examples of what you can do with the [CommandPalette](/navigation/c
 ::component-example
 ---
 padding: false
-component: 'command-palette-theme-algolia'
+component: 'command-palette-example-theme-algolia'
 componentProps:
   class: 'max-h-[480px] rounded-md'
 hiddenCode: true
 ---
 ::
 
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeAlgolia.vue#L23" target="_blank"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeAlgolia.vue#L23" target="_blank"}
 Take a look at the component!
 ::
 
@@ -150,24 +150,24 @@ Take a look at the component!
 ::component-example
 ---
 padding: false
-component: 'command-palette-theme-raycast'
+component: 'command-palette-example-theme-raycast'
 componentProps:
   class: 'max-h-[480px] rounded-md'
 hiddenCode: true
 ---
 ::
 
-::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/themes/CommandPaletteThemeRaycast.vue#L30" target="_blank"}
+::callout{icon="i-simple-icons-github" to="https://github.com/nuxt/ui/blob/dev/docs/components/content/examples/CommandPaletteExampleThemeRaycast.vue#L30" target="_blank"}
 Take a look at the component!
 ::
 
 ### VerticalNavigation
 
-:component-example{component="vertical-navigation-theme-tailwind"}
+:component-example{component="vertical-navigation-example-theme-tailwind"}
 
 ### Pagination
 
-:component-example{component="pagination-theme-rounded"}
+:component-example{component="pagination-example-theme-rounded"}
 
 ## RTL Support
 

docs/content/1.getting-started/7.roadmap.md

@@ -1,7 +0,0 @@
----
-title: Roadmap
-description: Discover our Volta board for @nuxt/ui development status.
-toc: false
----
-
-:volta-embed{token="eyJ2aWV3IjoiYm9hcmQiLCJib2FyZFN0YXR1c2VzIjpbInRyaWFnZSIsImJhY2tsb2ciLCJ0b2RvIiwiaW5fcHJvZ3Jlc3MiLCJpbl9yZXZpZXciLCJkb25lIiwicmVsZWFzZWQiLCJjYW5jZWxsZWQiXSwiYm9hcmRMaW5rZWRQcnMiOnRydWUsImxpc3RHcm91cCI6InN0YXR1cyIsImxpc3RPcmRlciI6ImNyZWF0ZWRfYXQiLCJ0aW1lbGluZVpvb20iOiJtb250aCIsInRpbWVsaW5lT3JkZXIiOiJzdGF0ZSIsInRpbWVsaW5lRGlzcGxheSI6ImFsbF9taWxlc3RvbmVzIiwiZmlsdGVycyI6e30sIm93bmVyIjoibnV4dCIsIm5hbWUiOiJ1aSJ9"}

docs/content/2.elements/11.meter.md

@@ -117,7 +117,7 @@ To group multiple meters into a group, adding all values, use the `MeterGroup` c
 - To show a label for each meter, use the `label` prop on each meter.
 - To change the icon for each meter, use the `icon` prop.
 
-::component-card{slug="MeterGroup"}
+::component-card{slug="UMeterGroup"}
 ---
 baseProps:
   icon: i-heroicons-minus
@@ -169,7 +169,7 @@ The `label` slot can be used to change how the label below the meter bar is show
 
 :u-divider{label="MeterGroup" type="dashed" class="my-12"}
 
-:component-props{slug="MeterGroup"}
+:component-props{slug="UMeterGroup"}
 
 ## Config
 

docs/content/2.elements/3.avatar.md

@@ -90,7 +90,7 @@ To stack avatars as a group, use the `AvatarGroup` component.
 - To size all the avatars equally, pass the `size` prop
 - To adjust the spacing or the ring between avatars, customize with `ui.avatarGroup.margin` or `ui.avatarGroup.ring`
 
-::component-card{slug="AvatarGroup"}
+::component-card{slug="UAvatarGroup"}
 ---
 props:
   size: 'sm'
@@ -113,10 +113,10 @@ code: |
 
 :u-divider{label="AvatarGroup" type="dashed" class="my-12"}
 
-:component-props{slug="avatar-group"}
+:component-props{slug="UAvatarGroup"}
 
 ## Config
 
 :component-preset
 
-:component-preset{slug="avatar-group"}
+:component-preset{slug="AvatarGroup"}

docs/content/2.elements/5.button.md

@@ -295,7 +295,7 @@ To stack buttons as a group, use the `ButtonGroup` component.
 - To change the orientation of the buttons, set the `orientation` prop to `vertical`
 - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
 
-::component-card{slug="ButtonGroup"}
+::component-card{slug="UButtonGroup"}
 ---
 props:
   size: 'sm'
@@ -312,7 +312,7 @@ code: |
 
 This can also work with an [Input](/forms/input) component for example:
 
-::component-card{slug="ButtonGroup"}
+::component-card{slug="UButtonGroup"}
 ---
 props:
   size: 'sm'
@@ -375,7 +375,7 @@ excludedProps:
 
 :u-divider{label="ButtonGroup" type="dashed" class="my-12"}
 
-:component-props{slug="ButtonGroup"}
+:component-props{slug="UButtonGroup"}
 
 ## Config
 

docs/content/3.forms/6.radio-group.md

@@ -75,7 +75,7 @@ This prop also work on the Radio component.
 
 Use the `label` prop to display a label on the right of the Radio.
 
-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 props:
   label: 'Label'
@@ -86,7 +86,7 @@ props:
 
 Use the `required` prop to display a red star next to the label of the Radio.
 
-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 props:
   label: 'Label'
@@ -98,7 +98,7 @@ props:
 
 Use the `help` prop to display some text under the Radio.
 
-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 props:
   label: 'Label'
@@ -116,7 +116,7 @@ Use the `#label` slot to override the label of each option.
 
 Alternatively, you can do the same with individual Radio:
 
-::component-card{slug="radio"}
+::component-card{slug="URadio"}
 ---
 slots:
   label: <span class="italic">Label</span>
@@ -149,10 +149,10 @@ slots:
 
 :u-divider{label="Radio" type="dashed" class="my-12"}
 
-:component-props{slug="radio"}
+:component-props{slug="URadio"}
 
 ## Config
 
 :component-preset
 
-:component-preset{slug="radio"}
+:component-preset{slug="Radio"}

docs/content/4.data/1.table.md

@@ -13,7 +13,6 @@ Use the `rows` prop to set the data to display in the table. By default, the tab
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-basic'
 componentProps:
   class: 'flex-1'
@@ -33,7 +32,6 @@ Use the `columns` prop to configure which columns to display. It's an array of o
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-columns'
 componentProps:
   class: 'flex-1'
@@ -45,7 +43,6 @@ You can easily use the [SelectMenu](/forms/select-menu) component to change the
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-columns-selectable'
 componentProps:
   class: 'flex-1'
@@ -59,7 +56,6 @@ You can make the columns sortable by setting the `sortable` property to `true` i
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-columns-sortable'
 componentProps:
   class: 'flex-1'
@@ -82,7 +78,6 @@ Use the `sort-button` prop to customize the sort button in the header. You can p
 ::component-card{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 baseProps:
   class: 'w-full'
   columns:
@@ -187,7 +182,6 @@ The initial value of `sort` will be respected as the initial sort column and dir
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-reactive-sorting'
 componentProps:
   class: 'flex-1'
@@ -201,7 +195,6 @@ Use a `v-model` to make the table selectable. The `v-model` will be an array of
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-selectable'
 componentProps:
   class: 'flex-1'
@@ -219,7 +212,6 @@ You can use this to navigate to a page, open a modal or even to select the row m
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-clickable'
 componentProps:
   class: 'flex-1'
@@ -233,7 +225,6 @@ You can easily use the [Input](/forms/input) component to filter the rows.
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-searchable'
 componentProps:
   class: 'flex-1'
@@ -247,7 +238,6 @@ You can easily use the [Pagination](/navigation/pagination) component to paginat
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-paginable'
 componentProps:
   class: 'flex-1'
@@ -265,7 +255,6 @@ You can also set it to `null` to hide the loading state.
 ::component-card
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 baseProps:
   class: 'w-full'
   columns:
@@ -314,7 +303,6 @@ You can also set it to `null` to hide the empty state.
 ::component-card
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 baseProps:
   class: 'w-full'
   columns:
@@ -380,7 +368,6 @@ You can for example create an extra column for actions with a [Dropdown](/elemen
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-slots'
 componentProps:
   class: 'flex-1'
@@ -394,7 +381,6 @@ Use the `#loading-state` slot to customize the loading state.
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-loading-slot'
 componentProps:
   class: 'flex-1'
@@ -408,7 +394,6 @@ Use the `#empty-state` slot to customize the empty state.
 ::component-example{class="grid"}
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'table-example-empty-slot'
 componentProps:
   class: 'flex-1'

docs/content/5.navigation/2.command-palette.md

@@ -225,7 +225,6 @@ Use the `#empty-state` slot to customize the empty state.
 ::component-example
 ---
 padding: false
-overflowClass: 'overflow-x-auto'
 component: 'command-palette-example-empty-slot'
 componentProps:
   class: 'flex-1'

docs/content/index.yml

@@ -1,5 +1,5 @@
 navigation: false
-title: 'Nuxt UI: Fully styled and customizable components for Nuxt'
+title: 'Nuxt UI: A UI Library for Modern Web Apps'
 description: 'It provides everything related to UI when building your Nuxt app. This includes components, icons, colors, dark mode but also keyboard shortcuts. Built with Headless UI and Tailwind CSS, published under MIT License.'
 hero:
   title: 'A <span class="text-primary">UI Library</span> for<br class="hidden lg:block"> Modern Web Apps'