feat(PageAccordion)!: remove in favor of Accordion (#4734)

Co-authored-by: Benjamin Canac <[email protected]>

Author: HugoRCD

docs/app/components/content/examples/page/PageAccordionMarkdownExample.vue renamed to docs/app/components/content/examples/accordion/AccordionMarkdownExample.vue

@@ -34,9 +34,18 @@ const items = [
 </script>
 
 <template>
-  <UPageAccordion :items="items" default-value="1">
+  <UAccordion
+    type="multiple"
+    :items="items"
+    :unmount-on-hide="false"
+    :default-value="['0']"
+    :ui="{
+      trigger: 'text-base',
+      body: 'text-base text-muted'
+    }"
+  >
     <template #body="{ item }">
       <MDC :value="item.content" unwrap="p" />
     </template>
-  </UPageAccordion>
+  </UAccordion>
 </template>

docs/app/pages/figma.vue

@@ -238,11 +238,20 @@ onMounted(async () => {
     </UPageCTA>
     <UPageSection v-bind="page.faq" :ui="{ container: 'relative' }">
       <div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
-      <UPageAccordion multiple :items="(page.faq.items as any[])" class="max-w-4xl mx-auto">
+      <UAccordion
+        type="multiple"
+        :items="(page.faq.items as any[])"
+        :unmount-on-hide="false"
+        class="max-w-4xl mx-auto"
+        :ui="{
+          trigger: 'text-base',
+          body: 'text-base text-muted'
+        }"
+      >
         <template #body="{ item, index }">
           <MDC :value="item.content" unwrap="p" :cache-key="`figma-faq-${index}-content`" />
         </template>
-      </UPageAccordion>
+      </UAccordion>
     </UPageSection>
   </div>
 </template>

docs/content/docs/2.components/accordion.md

@@ -304,6 +304,18 @@ props:
 ---
 ::
 
+### With markdown content
+
+You can use the [MDC](https://github.com/nuxt-modules/mdc?tab=readme-ov-file#mdc) component from `@nuxtjs/mdc` to render markdown in the accordion items.
+
+::component-example
+---
+collapse: true
+name: 'accordion-markdown-example'
+class: 'px-8'
+---
+::
+
 ## API
 
 ### Props

docs/content/docs/2.components/page-accordion.md

@@ -82,6 +82,7 @@ export default defineNuxtConfig({
     '/docs/getting-started/i18n': { redirect: '/docs/getting-started/i18n/nuxt', prerender: false },
     // v4 redirects - renamed components
     '/components/button-group': { redirect: { to: '/docs/components/field-group', statusCode: 301 }, prerender: false },
+    '/components/page-accordion': { redirect: { to: '/docs/components/accordion', statusCode: 301 }, prerender: false },
     '/components/page-marquee': { redirect: { to: '/docs/components/marquee', statusCode: 301 }, prerender: false },
     // v4 redirects - removed pro pages
     '/pro': { redirect: { to: '/pro/activate', statusCode: 301 }, prerender: false },
@@ -114,7 +115,7 @@ export default defineNuxtConfig({
     '/pro/components/landing-cta': { redirect: { to: '/components/page-cta', statusCode: 301 }, prerender: false },
     '/pro/components/landing-card': { redirect: { to: '/components/page-card', statusCode: 301 }, prerender: false },
     '/pro/components/landing-section': { redirect: { to: '/components/page-section', statusCode: 301 }, prerender: false },
-    '/pro/components/landing-faq': { redirect: { to: '/components/page-accordion', statusCode: 301 }, prerender: false },
+    '/pro/components/landing-faq': { redirect: { to: '/components/accordion', statusCode: 301 }, prerender: false },
     '/pro/components/landing-grid': { redirect: { to: '/components/page-grid', statusCode: 301 }, prerender: false },
     '/pro/components/landing-logos': { redirect: { to: '/components/page-logos', statusCode: 301 }, prerender: false },
     '/pro/components/landing-testimonial': { redirect: { to: '/components/page-card#as-a-testimonial', statusCode: 301 }, prerender: false },

docs/nuxt.config.ts

@@ -60,7 +60,6 @@ export * from '../components/Marquee.vue'
 export * from '../components/Modal.vue'
 export * from '../components/NavigationMenu.vue'
 export * from '../components/Page.vue'
-export * from '../components/PageAccordion.vue'
 export * from '../components/PageAnchors.vue'
 export * from '../components/PageAside.vue'
 export * from '../components/PageBody.vue'

docs/public/components/dark/page-accordion.png

@@ -58,7 +58,6 @@ export { default as marquee } from './marquee'
 export { default as modal } from './modal'
 export { default as navigationMenu } from './navigation-menu'
 export { default as page } from './page'
-export { default as pageAccordion } from './page-accordion'
 export { default as pageAnchors } from './page-anchors'
 export { default as pageAside } from './page-aside'
 export { default as pageBody } from './page-body'