docs: add markdown containers (vuetifyjs#17543)

kidzik · Jun 7, 2023 · d41a1ea · d41a1ea
1 parent 2b8ede8
commit d41a1ea
Show file tree

Hide file tree

Showing 61 changed files with 319 additions and 382 deletions.
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -46,6 +46,7 @@
     "@intlify/unplugin-vue-i18n": "^0.10.0",
     "@types/lodash-es": "^4.17.6",
     "@types/markdown-it": "^12.2.3",
+    "@types/markdown-it-container": "^2.0.5",
     "@types/prismjs": "^1.26.0",
     "@types/rimraf": "^3.0.2",
     "@vitejs/plugin-basic-ssl": "^1.0.1",
@@ -65,6 +66,7 @@
     "markdown-it": "^13.0.1",
     "markdown-it-anchor": "^8.6.7",
     "markdown-it-attrs": "^4.1.6",
+    "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^2.0.2",
     "markdown-it-header-sections": "^1.0.0",
     "markdown-it-link-attributes": "^4.0.1",

diff --git a/packages/docs/src/components/Alert.vue b/packages/docs/src/components/Alert.vue
@@ -21,8 +21,11 @@
 
   const props = defineProps({ type: String })
 
+  const type = computed(() => {
+    return props.type === 'tip' ? 'success' : props.type
+  })
   const icon = computed(() => {
-    switch (props.type) {
+    switch (type.value) {
       case 'error': return 'mdi-close-circle-outline'
       case 'info': return 'mdi-information-outline'
       case 'success': return 'mdi-check-circle-outline'

diff --git a/packages/docs/src/components/doc/Tabs.vue b/packages/docs/src/components/doc/Tabs.vue
@@ -0,0 +1,14 @@
+<template>
+  <v-tabs v-model="model" color="primary">
+    <slot name="tabs" />
+  </v-tabs>
+  <v-window v-model="model">
+    <slot name="content" />
+  </v-window>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const model = ref()
+</script>
diff --git a/packages/docs/src/pages/en/components/alerts.md b/packages/docs/src/pages/en/components/alerts.md
@@ -130,11 +130,9 @@ The **closable** prop adds a [v-icon](/components/icons) on the far right, after
 
 The close icon automatically applies a default `aria-label` and is configurable by using the **close-label** prop or changing **close** value in your locale.
 
-<alert type="info">
-
+::: info
   For more information on how to global modify your locale settings, navigate to the [Internationalization page](/features/internationalization).
-
-</alert>
+:::
 
 ## Additional Examples
 

diff --git a/packages/docs/src/pages/en/components/all.md b/packages/docs/src/pages/en/components/all.md
@@ -524,8 +524,6 @@ These components don't fit into a traditional category and are used for a variet
 
 </v-row>
 
-<alert type="info">
-
+::: info
   This page is under **design** construction and will be updated with the missing images over time.
-
-</alert>
+:::
diff --git a/packages/docs/src/pages/en/components/app-bars.md b/packages/docs/src/pages/en/components/app-bars.md
@@ -59,11 +59,9 @@ 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 |
 
-<alert type="warning">
-
+::: 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.
-
-</alert>
+:::
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/application.md b/packages/docs/src/pages/en/components/application.md
@@ -87,13 +87,9 @@ The following example demonstrates how to use the **theme** prop to toggle the t
 </script>
 ```
 
-<alert type="success">
-
-  **TIP**
-
+::: tip
   All components support to override the currently inherited theme locally using the **theme** prop.
-
-</alert>
+:::
 
 ## API
 
@@ -120,8 +116,6 @@ The following components are compatible with the [Application layout](/features/
 
 <app-figure src="https://cdn.vuetifyjs.com/images/layouts/app.png" alt="Vuetify Application" />
 
-<alert type="info">
-
+::: info
   More information on how to interact with the root sizing and styling is on the [Application](/features/application-layout/) page.
-
-</alert>
+:::
diff --git a/packages/docs/src/pages/en/components/autocompletes.md b/packages/docs/src/pages/en/components/autocompletes.md
@@ -32,23 +32,17 @@ The autocomplete component extends `v-select` and adds the ability to filter ite
 
 ## Caveats
 
-<alert type="error">
-
+::: error
   When using objects for the **items** prop, you must associate **item-title** and **item-value** with existing properties on your objects. These values are defaulted to **title** and **value** and can be changed.
+:::
 
-</alert>
-
-<alert type="warning">
-
+::: warning
   The **auto** property of **menu-props** is only supported for the default input style.
+:::
 
-</alert>
-
-<alert type="info">
-
+::: info
   Browser autocomplete is set to off by default, may vary by browser and may be ignored. [MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion)
-
-</alert>
+:::
 
 ## Examples
 
@@ -92,11 +86,9 @@ Using a combination of `v-autocomplete` slots and transitions, you can create a
 
 #### New tab
 
-<alert type="success">
-
+::: success
 This feature was introduced in [v3.3.0 (Icarus)](/getting-started/release-notes/?version=v3.3.0)
-
-</alert>
+:::
 
 The **auto-select-first** property highlights the first result when searching, allowing you to press <v-kbd>tab</v-kbd> or <v-kbd>enter</v-kbd> to quickly select it.
 

diff --git a/packages/docs/src/pages/en/components/bottom-navigation.md b/packages/docs/src/pages/en/components/bottom-navigation.md
@@ -75,11 +75,9 @@ Modify the **scroll-threshold** property to increase the distance a user must sc
 
 The **shift** prop hides button text when not active. This provides an alternative visual style to the `v-bottom-navigation` component.
 
-<alert type="info">
-
+::: info
   For this to work, `v-btn` text is **required** to be wrapped in a `span` tag.
-
-</alert>
+:::
 
 <example file="v-bottom-navigation/prop-shift" />
 

diff --git a/packages/docs/src/pages/en/components/bottom-sheets.md b/packages/docs/src/pages/en/components/bottom-sheets.md
@@ -19,11 +19,9 @@ The bottom sheet is a modified `v-dialog` that slides from the bottom of the scr
 
 ----
 
-<alert type="warning">
-
+::: warning
 This feature requires [v3.3.0 (Icarus)](/getting-started/release-notes/?version=v3.3.0)
-
-</alert>
+:::
 
 ## Usage
 
@@ -99,11 +97,9 @@ The `v-bottom-sheet` component has access to all of the slots available in [v-di
 | 1. Default   | The default slot                                    |
 | 2. Activator | The activator slot is used to open the bottom sheet |
 
-<alert type="info">
-
+::: info
 The **activator** slot is not required when using the **v-model** prop.
-
-</alert>
+:::
 
 ### Examples
 

diff --git a/packages/docs/src/pages/en/components/breadcrumbs.md b/packages/docs/src/pages/en/components/breadcrumbs.md
@@ -36,11 +36,9 @@ By default, breadcrumbs use a text divider. This can be any string.
 
 <api-inline hide-links />
 
-<alert type="info">
-
+::: info
   By default `v-breadcrumbs` will disable all crumbs up to the current page in a nested paths. You can prevent this behavior by using `exact: true` on each applicable breadcrumb in the `items` array.
-
-</alert>
+:::
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/buttons.md b/packages/docs/src/pages/en/components/buttons.md
@@ -81,11 +81,9 @@ Block buttons extend the full available width of their container. This is useful
 
 <example file="v-btn/prop-block" />
 
-<alert type="info">
-
+::: info
 Block applies **width: 100%** which can cause overflow issues inside a flex container.
-
-</alert>
+:::
 
 #### Rounded
 

diff --git a/packages/docs/src/pages/en/components/cards.md b/packages/docs/src/pages/en/components/cards.md
@@ -69,11 +69,9 @@ Use slots if you need to render more complex content. If you need full control o
 
 In some cases it is possible to combine the different options, like the example below where props, slots and markup have all been used.
 
-<alert type="info">
-
+::: info
   In general slots take precedence over props. So if you provide both **text** prop and use **text** slot, then only the slot content will be rendered.
-
-</alert>
+:::
 
 <example file="v-card/basics-combine" />
 

diff --git a/packages/docs/src/pages/en/components/combobox.md b/packages/docs/src/pages/en/components/combobox.md
@@ -32,23 +32,17 @@ With Combobox, you can allow a user to create new values that may not be present
 
 ## Caveats
 
-<alert type="error">
-
+::: error
   As the Combobox allows user input, it **always** returns the full value provided to it (for example a list of Objects will always return an Object when selected). This is because there's no way to tell if a value is supposed to be user input or an object lookup [GitHub Issue](https://github.com/vuetifyjs/vuetify/issues/5479)
+:::
 
-</alert>
-
-<alert type="warning">
-
+::: warning
   The **auto** property of **menu-props** is only supported for the default input style.
+:::
 
-</alert>
-
-<alert type="info">
-
+::: info
   Browser autocomplete is set to off by default, may vary by browser and may be ignored. [MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion)
-
-</alert>
+:::
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/data-iterators.md b/packages/docs/src/pages/en/components/data-iterators.md
@@ -19,11 +19,9 @@ The `v-data-iterator` component is used for displaying arbitrary data, and share
 
 ----
 
-<alert type="warning">
-
+::: warning
 This feature requires [v3.3.0 (Icarus)](/getting-started/release-notes/?version=v3.3.0)
-
-</alert>
+:::
 
 ## Usage
 

diff --git a/packages/docs/src/pages/en/components/data-tables/basics.md b/packages/docs/src/pages/en/components/data-tables/basics.md
@@ -16,11 +16,9 @@ The `v-data-table` component is used for displaying tabular data. Features inclu
 
 ----
 
-<alert type="warning">
-
+::: warning
 This feature requires [v3.1.0 (Valkyrie)](/getting-started/release-notes/?version=v3.1.0)
-
-</alert>
+:::
 
 ## Usage
 

diff --git a/packages/docs/src/pages/en/components/data-tables/headers.md b/packages/docs/src/pages/en/components/data-tables/headers.md
@@ -30,11 +30,9 @@ Here is a data-table that uses multiple rows of headers to make use of the colsp
 
 You can use the dynamic slots `column.<key>` to customize only certain columns. `<key>` corresponds to the **key** property in the items found in the **headers** prop.
 
-<alert type="info">
-
+::: info
   There are two built-in slots for customizing both the select (`column.data-table-select`) and expand (`column.data-table-expand`) columns when using **show-select** and **show-expand** props respectively.
-
-</alert>
+:::
 
 <example file="v-data-table/slot-header" />
 

diff --git a/packages/docs/src/pages/en/components/date-pickers-month.md b/packages/docs/src/pages/en/components/date-pickers-month.md
@@ -28,11 +28,9 @@ Month pickers come in two orientation variations, portrait **(default)** and lan
 
 ## Caveats
 
-<alert type="warning">
-
+::: warning
   `v-date-picker` accepts ISO 8601 **date** strings (*YYYY-MM-DD*). For more information regarding ISO 8601 and other standards, visit the official ISO (International Organization for Standardization) [International Standards](https://www.iso.org/standards.html) page.
-
-</alert>
+:::
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/date-pickers.md b/packages/docs/src/pages/en/components/date-pickers.md
@@ -28,11 +28,9 @@ Date pickers come in two orientation variations, portrait **(default)** and land
 
 ## Caveats
 
-<alert type="warning">
-
+::: warning
   `v-date-picker` accepts ISO 8601 **date** strings (*YYYY-MM-DD*). For more information regarding ISO 8601 and other standards, visit the official ISO (International Organization for Standardization) [International Standards](https://www.iso.org/standards.html) page.
-
-</alert>
+:::
 
 ## Examples
 

diff --git a/packages/docs/src/pages/en/components/dividers.md b/packages/docs/src/pages/en/components/dividers.md
@@ -24,11 +24,9 @@ Dividers in their simplest form display a horizontal line.
 
 <usage name="v-divider" />
 
-<alert type="info">
-
+::: info
   This example uses the **border-opacity** utility class and is not available when **$utilities** is set to **false**. More information regarding utility classes is located on the [SASS variables page](features/sass-variables/#basic-usage).
-
-</alert>
+:::
 
 <entry />
 

diff --git a/packages/docs/src/pages/en/components/grids.md b/packages/docs/src/pages/en/components/grids.md
@@ -63,14 +63,12 @@ The class `fill-height` applies `height: 100%` to an element. When applied to `v
 
 ## Caveats
 
-<alert type="info">
-
+::: info
   Breakpoints based props on grid components work in an `andUp` fashion. With this in mind the **xs** breakpoint is assumed and has been removed from the props context. This applies to **offset**, **justify**, **align**, and single breakpoint props on `v-col`
 
 - Props like **justify-sm** and **justify-md** exist, but **justify-xs** does not, it is simply **justify**
 - The **xs** prop does not exist on `v-col`. The equivalent to this is the **cols** prop
-
-</alert>
+:::
 
 ## Examples