docs: add api tables to component pages

vuetifyjs · Mar 10, 2023 · e0961bf · e0961bf
1 parent 78e9386
commit e0961bf
Show file tree

Hide file tree

Showing 64 changed files with 388 additions and 158 deletions.
diff --git a/packages/docs/src/pages/en/components/alerts.md b/packages/docs/src/pages/en/components/alerts.md
@@ -26,6 +26,13 @@ An alert is a [v-sheet](/components/sheets/) that specializes in getting the use
 
 <entry />
 
+## API
+
+| Component | Description |
+| - | - |
+| [v-alert](/api/v-alert/) | Primary Component |
+| [v-alert-title](/api/v-alert-title/) | Sub-component used to display the `v-alert` title. Wraps the `#title` slot |
+
 ## Anatomy
 
 The recommended placement of elements inside of `v-alert` is:
@@ -45,13 +52,6 @@ The recommended placement of elements inside of `v-alert` is:
 | 4. Text | A content area for displaying text and other inline elements |
 | 5. Close Icon (optional) | Used to hide the `v-alert` component |
 
-## API
-
-| Component | Description |
-| - | - |
-| [v-alert](/api/v-alert/) | Primary Component |
-| [v-alert-title](/api/v-alert-title/) | Functional Component used to display the `v-alert` title. Wraps the `#title` slot |
-
 <api-inline hide-links />
 
 ## Guide

diff --git a/packages/docs/src/pages/en/components/app-bars.md b/packages/docs/src/pages/en/components/app-bars.md
@@ -26,6 +26,16 @@ The `v-app-bar` component is used for application-wide actions and information.
 
 <entry />
 
+## API
+
+| Component | Description |
+| - | - |
+| [v-app-bar](/api/v-app-bar/) | Primary Component |
+| [v-app-bar-nav-icon](/api/v-app-bar-nav-icon/) | A customized [v-btn](/components/buttons/) component that uses a default *icon* value of **$menu** |
+| [v-app-bar-title](/api/v-app-bar-title/) | An extension of `v-toolbar-title` that is used for scrolling techniques |
+
+<api-inline hide-links />
+
 ## Anatomy
 
 The recommended placement of elements inside of `v-app-bar` is:
@@ -45,16 +55,6 @@ The recommended placement of elements inside of `v-app-bar` is:
 | 4. Action items (optional) | Used to highlight certain actions not in the overflow menu |
 | 5. Overflow menu (optional) | Place less often used action items into a hidden menu |
 
-## API
-
-| Component | Description |
-| - | - |
-| [v-app-bar](/api/v-app-bar/) | Primary Component |
-| [v-app-bar-nav-icon](/api/v-app-bar-nav-icon/) | A customized [v-btn](/components/buttons/) component that uses a default *icon* value of **$menu** |
-| [v-app-bar-title](/api/v-app-bar-title/) | An extension of `v-toolbar-title` that is used for scrolling techniques |
-
-<api-inline hide-links />
-
 <alert type="warning">
 
   When a `v-btn` with the `icon` prop is used inside of `v-toolbar` and `v-app-bar` they will automatically have their size increased and negative margin applied to ensure proper spacing according to the Material Design Specification. If you choose to wrap your buttons in any container, such as a `div`, you will need to apply negative margin to that container in order to properly align them.

diff --git a/packages/docs/src/pages/en/components/aspect-ratios.md b/packages/docs/src/pages/en/components/aspect-ratios.md
@@ -23,4 +23,8 @@ Specify a custom aspect-ratio
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-responsive](/api/v-responsive/) | Primary component |
+
+<api-inline hide-links />
diff --git a/packages/docs/src/pages/en/components/autocompletes.md b/packages/docs/src/pages/en/components/autocompletes.md
@@ -24,7 +24,11 @@ The autocomplete component extends `v-select` and adds the ability to filter ite
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-autocomplete](/api/v-autocomplete/) | Primary Component |
+
+<api-inline hide-links />
 
 ## Caveats
 

diff --git a/packages/docs/src/pages/en/components/avatars.md b/packages/docs/src/pages/en/components/avatars.md
@@ -26,6 +26,12 @@ Avatars in their simplest form display content within a circular container.
 
 <entry />
 
+## API
+
+| Component | Description |
+| - | - |
+| [v-avatar](/api/v-avatar/) | Primary Component |
+
 ## Anatomy
 
 The recommended placement of elements inside of `v-avatar` is:
@@ -39,12 +45,6 @@ The recommended placement of elements inside of `v-avatar` is:
 | - | - |
 | 1. Container | The Avatar container that typically holds a [v-icon](/components/icons/) or [v-img](/components/images/) component |
 
-## API
-
-| Component | Description |
-| - | - |
-| [v-avatar](/api/v-avatar/) | Primary Component |
-
 <api-inline hide-links />
 
 ## Examples

diff --git a/packages/docs/src/pages/en/components/badges.md b/packages/docs/src/pages/en/components/badges.md
@@ -28,7 +28,11 @@ Badges in their simplest form display to the upper right of the content that it
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-badge](/api/v-badge/) | Primary Component |
+
+<api-inline hide-links />
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/banners.md b/packages/docs/src/pages/en/components/banners.md
@@ -26,6 +26,16 @@ Banners can contain one to two lines of text, to which actions and icons can be
 
 <entry />
 
+## API
+
+| Component | Description |
+| - | - |
+| [v-banner](/api/v-banner/) | Primary Component |
+| [v-banner-text](/api/v-banner-text/) | Sub-component used to display the `v-banner` subtitle. Wraps the `#text` slot |
+| [v-banner-actions](/api/v-banner-actions/) | Sub-component that modifies the default styling of [v-btn](/components/buttons/). Wraps the `#actions` slot |
+
+<api-inline hide-links />
+
 ## Anatomy
 
 The recommended placement of elements inside of `v-banner` is:
@@ -43,16 +53,6 @@ The recommended placement of elements inside of `v-banner` is:
 | 3. Text | A content area for displaying text and other inline elements |
 | 4. Actions (optional) | A content area that typically contains one or more [v-btn](/components/buttons) components |
 
-## API
-
-| Component | Description |
-| - | - |
-| [v-banner](/api/v-banner/) | Primary Component |
-| [v-banner-text](/api/v-banner-text/) | Functional component used to display the Banner's subtitle. Wraps the `#text` slot |
-| [v-banner-actions](/api/v-banner-actions/) | Functional component that modifies the default styling of [v-btn](/components/buttons/) and provides a container for user actions |
-
-<api-inline hide-links />
-
 ## Examples
 
 ### Props

diff --git a/packages/docs/src/pages/en/components/bottom-navigation.md b/packages/docs/src/pages/en/components/bottom-navigation.md
@@ -29,6 +29,7 @@ While `v-bottom navigation` is meant to be used with [vue-router](https://router
 | Component | Description |
 | - | - |
 | [v-bottom-navigation](/api/v-bottom-navigation/) | Primary Component |
+| [v-btn](/api/v-btn/) | Sub-component used for modifying the `v-bottom-navigation` state |
 
 <api-inline hide-links />
 

diff --git a/packages/docs/src/pages/en/components/breadcrumbs.md b/packages/docs/src/pages/en/components/breadcrumbs.md
@@ -28,15 +28,13 @@ By default, breadcrumbs use a text divider. This can be any string.
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-breadcrumbs](/api/v-breadcrumbs/) | Primary Component |
+| [v-breadcrumbs-item](/api/v-breadcrumbs-item/) | Sub-component used for each breadcrumb |
+| [v-breadcrumbs-divider](/api/v-breadcrumbs-divider/) | Sub-component used for dividing breadcrumbs |
 
-<!-- ## Sub-components
-
-### v-breadcrumbs-item
-
-v-breadcrumbs-item description -->
-
-## Caveats
+<api-inline hide-links />
 
 <alert type="info">
 

diff --git a/packages/docs/src/pages/en/components/button-groups.md b/packages/docs/src/pages/en/components/button-groups.md
@@ -28,7 +28,13 @@ Toggle buttons allow you to create a styled group of buttons that can be selecte
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-btn-toggle](/api/v-btn-toggle/) | Primary component |
+| [v-btn](/api/v-btn/) | Sub-component used for modifying the `v-btn-toggle` state |
+| [v-btn-group](/api/v-btn/) | A stateless version of `v-btn-toggle` |
+
+<api-inline hide-links />
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/buttons.md b/packages/docs/src/pages/en/components/buttons.md
@@ -26,6 +26,14 @@ Buttons in their simplest form contain uppercase text, a slight elevation, hover
 
 <entry />
 
+## API
+
+| Component | Description |
+| - | - |
+| [v-btn](/api/v-btn/) | Primary Component |
+
+<api-inline hide-links />
+
 ## Anatomy
 
 The recommended placement of elements inside of `v-btn` is:
@@ -41,14 +49,6 @@ The recommended placement of elements inside of `v-btn` is:
 | 2. Icon (optional) | Leading media content intended to improve visual context |
 | 3. Text | A content area for displaying text and other inline elements |
 
-## API
-
-| Component | Description |
-| - | - |
-| [v-btn](/api/v-btn) | Primary Component |
-
-<api-inline hide-links />
-
 ## Examples
 
 ### Props

diff --git a/packages/docs/src/pages/en/components/cards.md b/packages/docs/src/pages/en/components/cards.md
@@ -26,6 +26,17 @@ The `v-card` component is a stylish way to wrap different types of content; such
 
 <entry />
 
+## API
+
+| Component | Description |
+| - | - |
+| [v-card](/api/v-card/) | Primary Component |
+| [v-card-item](/api/v-card-item/) | Sub-component used to wrap the Card's `v-card-title` and `v-card-subtitle` components. |
+| [v-card-title](/api/v-card-title/) | Sub-component used to display the Card's title. Wraps the `#title` slot |
+| [v-card-subtitle](/api/v-card-subtitle/) | Sub-component used to display the Card's subtitle. Wraps the `#subtitle` slot. |
+| [v-card-text](/api/v-card-text/) | Sub-component used to display the Card's text. Wraps the `#text` slot. |
+| [v-card-actions](/api/v-card-actions/) | Sub-component that modifies the default styling of [v-btn](/components/buttons/). Wraps the `#actions` slot |
+
 ## Anatomy
 
 The recommended placement of elements inside of `v-card` is:
@@ -44,17 +55,6 @@ The recommended placement of elements inside of `v-card` is:
 | 4. Text (optional) | A content area with a lower emphasis text color |
 | 5. Actions (optional) | A content area that typically contains one or more [v-btn](/components/buttons) components |
 
-## API
-
-| Component | Description |
-| - | - |
-| [v-card](/api/v-card/) | Primary Component |
-| [v-card-item](/api/v-card-item/) | Functional component used to wrap the Card's `v-card-title` and `v-card-subtitle` components. |
-| [v-card-title](/api/v-card-title/) | Functional component used to display the Card's title. Wraps the `#title` slot |
-| [v-card-subtitle](/api/v-card-subtitle/) | Functional component used to display the Card's subtitle. Wraps the `#subtitle` slot. |
-| [v-card-text](/api/v-card-text/) | Functional component used to display the Card's subtitle. Wraps the `#text` slot. |
-| [v-card-actions](/api/v-card-actions/) | Functional component that modifies the default styling of [v-btn](/components/buttons/) and provides a container for user actions |
-
 <api-inline hide-links />
 
 ## Basics

diff --git a/packages/docs/src/pages/en/components/carousels.md b/packages/docs/src/pages/en/components/carousels.md
@@ -16,7 +16,7 @@ The `v-carousel` component is used to display large numbers of visual content on
 
 <!-- ![carousel Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-carousel/v-carousel-entry.png) -->
 
----
+----
 
 ## Usage
 
@@ -28,13 +28,12 @@ The `v-carousel` component expands upon `v-window` by providing additional featu
 
 ## API
 
-<api-inline />
-
-<!-- ## Sub-components
-
-### v-carousel-item
+| Component | Description |
+| - | - |
+| [v-carousel](/api/v-carousel/) | Primary component |
+| [v-carousel-item](/api/v-carousel-item/) | Sub-component used for displaying the `v-carousel` state |
 
-v-carousel-item description -->
+<api-inline hide-links />
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/checkboxes.md b/packages/docs/src/pages/en/components/checkboxes.md
@@ -28,7 +28,11 @@ A `v-checkbox` in its simplest form provides a toggle between 2 values.
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-checkbox](/api/v-checkbox/) | Primary component |
+
+<api-inline hide-links />
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/chip-groups.md b/packages/docs/src/pages/en/components/chip-groups.md
@@ -28,7 +28,11 @@ Chip groups make it easy for users to select filtering options for more complex
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-chip-group](/api/v-chip-group/) | Primary component |
+
+<api-inline hide-links />
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/chips.md b/packages/docs/src/pages/en/components/chips.md
@@ -16,7 +16,7 @@ The `v-chip` component is used to convey small pieces of information. Using the
 
 <!-- ![chips Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-chips/v-chips-entry.png) -->
 
----
+----
 
 ## Usage
 
@@ -28,7 +28,11 @@ Chips come in the following variations: closeable, filter, outlined, pill. The d
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-chip](/api/v-chip/) | Primary component |
+
+<api-inline hide-links />
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/color-pickers.md b/packages/docs/src/pages/en/components/color-pickers.md
@@ -22,7 +22,11 @@ The `v-color-picker` allows you to select a color using a variety of input metho
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-color-picker](/api/v-color-picker/) | Primary component |
+
+<api-inline hide-links />
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/combobox.md b/packages/docs/src/pages/en/components/combobox.md
@@ -24,7 +24,11 @@ With Combobox, you can allow a user to create new values that may not be present
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-combobox](/api/v-combobox/) | Primary component |
+
+<api-inline hide-links />
 
 ## Caveats
 

diff --git a/packages/docs/src/pages/en/components/dialogs.md b/packages/docs/src/pages/en/components/dialogs.md
@@ -28,7 +28,11 @@ In this basic example we use the **activator** slot to render a button that is u
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-dialog](/api/v-dialog/) | Primary component |
+
+<api-inline hide-links />
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/expansion-panels.md b/packages/docs/src/pages/en/components/expansion-panels.md
@@ -28,7 +28,14 @@ Expansion panels in their simplest form display a list of expandable items. You
 
 ## API
 
-<api-inline />
+| Component | Description |
+| - | - |
+| [v-expansion-panels](/api/v-expansion-panels/) | Primary component |
+| [v-expansion-panel](/api/v-expansion-panel/) | Sub-component that wraps `v-expansion-panel-text` and `v-expansion-panel-title` |
+| [v-expansion-panel-title](/api/v-expansion-panel-title/) | Sub-component used to display the Expansion Panel's title. Wraps the `#title` slot |
+| [v-expansion-panel-text](/api/v-expansion-panel-text/) | Sub-component used to display the Expanion Panel's text. Wraps the `#text` slot |
+
+<api-inline hide-links />
 
 ## Examples