From 3fdf887906cbe42d72e81e3a3075b32d342ab31e Mon Sep 17 00:00:00 2001
From: Farnabaz <farnabaz@gmail.com>
Date: Mon, 9 Dec 2024 09:45:46 +0100
Subject: [PATCH] docs: replace mdcslot docs with native `<slot />`

---
 docs/app/components/example/ExampleAlert.vue  |  5 +--
 docs/app/components/example/ExampleHero.vue   |  2 +-
 docs/app/components/example/ExampleTitle.vue  |  5 +--
 docs/content/docs/3.files/1.markdown.md       | 13 +++-----
 .../4.components/{1.mdc-slot.md => 1.slot.md} | 32 ++++++-------------
 5 files changed, 17 insertions(+), 40 deletions(-)
 rename docs/content/docs/4.components/{1.mdc-slot.md => 1.slot.md} (53%)

diff --git a/docs/app/components/example/ExampleAlert.vue b/docs/app/components/example/ExampleAlert.vue
index 21308fa0d..fe7ea2232 100644
--- a/docs/app/components/example/ExampleAlert.vue
+++ b/docs/app/components/example/ExampleAlert.vue
@@ -12,10 +12,7 @@ defineProps({
     class="alert"
     :class="[type]"
   >
-    <MDCSlot
-      :use="$slots.default"
-      unwrap="p"
-    />
+    <slot mdc-unwrap="p" />
   </div>
 </template>
 
diff --git a/docs/app/components/example/ExampleHero.vue b/docs/app/components/example/ExampleHero.vue
index e44e2f653..e98f9e27b 100644
--- a/docs/app/components/example/ExampleHero.vue
+++ b/docs/app/components/example/ExampleHero.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="pt-4">
     <h1 class="text-4xl">
-      <MDCSlot unwrap="p" />
+      <slot mdc-unwrap="p" />
     </h1>
     <slot name="description" />
   </section>
diff --git a/docs/app/components/example/ExampleTitle.vue b/docs/app/components/example/ExampleTitle.vue
index 9c1f4f756..38d6124ac 100644
--- a/docs/app/components/example/ExampleTitle.vue
+++ b/docs/app/components/example/ExampleTitle.vue
@@ -1,8 +1,5 @@
 <template>
   <h1 class="text-4xl">
-    <MDCSlot
-      :use="$slots.default"
-      unwrap="p"
-    />
+    <slot mdc-unwrap="p" />
   </h1>
 </template>
diff --git a/docs/content/docs/3.files/1.markdown.md b/docs/content/docs/3.files/1.markdown.md
index b0d1ced2c..43d40bc68 100644
--- a/docs/content/docs/3.files/1.markdown.md
+++ b/docs/content/docs/3.files/1.markdown.md
@@ -153,10 +153,7 @@ Components that are used in Markdown has to be marked as `global` in your Nuxt a
 
 Block components are components that accept Markdown content or another component as a slot.
 
-The component must contain either:
-
-- A `<slot />` to accept raw text or another component.
-- The [`<MDCSlot />`](/docs/components/mdc-slot) component to accept formatted text.
+The component must contain at least one `<slot />` component to accept formatted text.
 
 In a markdown file, use the component with the `::` identifier.
 
@@ -204,7 +201,7 @@ This will be rendered inside the `description` slot.
 <template>
   <section>
     <h1 class="text-4xl">
-      <MDCSlot unwrap="p" />
+      <slot mdc-unwrap="p" />
     </h1>
     <slot name="description" />
   </section>
@@ -222,7 +219,7 @@ This will be rendered inside the `description` slot.
 ::
 
 ::note
-Read more about the [`<MDCSlot />`](/docs/components/mdc-slot) component.
+Read more about the [`<slot />`](/docs/components/slot) component.
 ::
 
 ::tip
@@ -238,7 +235,7 @@ You can use Markdown inside your components slots:
   ```html [MyTitle.vue]
   <template>
     <h1 class="text-4xl">
-      <MDCSlot unwrap="p" />
+      <slot mdc-unwrap="p" />
     </h1>
   </template>
   ```
@@ -273,7 +270,7 @@ defineProps(['type'])
 
 <template>
   <div :class="[type]">
-    <MDCSlot :use="$slots.default" unwrap="p" />
+    <slot mdc-unwrap="p" />
   </div>
 </template>
 ```
diff --git a/docs/content/docs/4.components/1.mdc-slot.md b/docs/content/docs/4.components/1.slot.md
similarity index 53%
rename from docs/content/docs/4.components/1.mdc-slot.md
rename to docs/content/docs/4.components/1.slot.md
index 9e69219b3..1791fbe0f 100644
--- a/docs/content/docs/4.components/1.mdc-slot.md
+++ b/docs/content/docs/4.components/1.slot.md
@@ -1,29 +1,18 @@
 ---
-title: MDCSlot
+title: slot
 description: The fastest way to inject Markdown into your Vue components.
 ---
 
-::warning
-We recommend using `<slot>` as much as possible an only use `<MDCSlot>` when you need unwrapping which is not covered by MDC defaults.
-::
-
-The `<MDCSlot>` is an extension of the [`<slot>`](https://vuejs.org/guide/components/slots.html) component that makes it easier to render and manipulate Markdown content within your Vue components.
-
-::note
-This component is part of [`@nuxtjs/mdc`](https://github.com/nuxt-modules/mdc).
-::
+When you write contents and paragraphs inside a component with the MDC syntax, you can use Vue's `<slot>` component to render the content.
 
 ## Usage
 
-This component is a replacement for Vue's `<slot>` component, specifically designed for MDC.
-
-Use the `<MDCSlot>` component instead of the native `<slot>` component:
+If you don't want to modify the rendered content, simply use Vue's `<slot>` component.
 
 ```vue [components/content/Callout.vue]
 <template>
   <div class="callout">
-    <!-- similar to <slot /> -->
-    <MDCSlot />
+    <slot />
   </div>
 </template>
 ```
@@ -48,14 +37,14 @@ This usage would be similar to using the native `<slot>` component.
 
 ### Unwrapping
 
-The `unwrap` prop allows you to remove one or multiple wrapping elements from the rendered content. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
+The `mdc-unwrap` prop allows you to remove one or multiple wrapping elements from the rendered content. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
 
 Let's unwrap the `<p>` element from the previous example:
 
 ```vue [components/content/Callout.vue]
 <template>
   <div class="callout">
-    <MDCSlot unwrap="p" />
+    <slot mdc-unwrap="p" />
   </div>
 </template>
 ```
@@ -78,9 +67,9 @@ Let's improve our `Callout` component to have a `title` slot:
 <template>
   <div class="callout">
     <h2 v-if="$slots.title">
-      <MDCSlot :use="$slots.title" unwrap="p" />
+      <slot name="title" mdc-unwrap="p" />
     </h2>
-    <MDCSlot :use="$slots.default" />
+    <slot />
   </div>
 </template>
 ```
@@ -109,10 +98,7 @@ When not using the `title` slot, the `h2` element will not be rendered.
 
 ## Props
 
-- `use`: The slot to bind on, you must provide a `use` via `$slots.{your_slot}` in `<template>`.
-  - **Type:** Vue slot `Function`
-  - **Example:** `$slots.default`
-- `unwrap`: Whether to unwrap the content or not. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
+- `mdc-unwrap`: Whether to unwrap the content or not. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
   - **Type:** `boolean` or `string`
   - **Default:** `false`
   - **Example:** `'p'` or `'ul li'`