feat(PageSection): give links and features to slots

[Barbapapazes]

🔗 Linked issue

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Hello 👋,

When creating a page with UI layout components, I often start simple like:

<template>
  <UPageSection
    orientation="horizontal"
    title="Engage Your Audience"
    description="Share a single QR code to give your audience seamless access to everything they need - your profile, interactive features, live Q&A, and instant feedback."
    :links="[
      {
        label: 'Create Your Own',
        href: register().url,
      },
      {
        label: 'The Presentation Card',
        href: 'https://docs.inalia.app/presentation',
        target: '_blank',
        color: 'neutral',
        variant: 'ghost',
      },
    ]"
  />
</template>

And then, I want to add animations to the links using Motion. So I have to refactor the component and to extract the links to a separate variable:

<script setup>
const links = [
  {
    label: 'Create Your Own',
    href: register().url,
  },
  {
    label: 'The Presentation Card',
    href: 'https://docs.inalia.app/presentation',
    target: '_blank',
    color: 'neutral',
    variant: 'ghost',
  },
]
</script>

<template>
  <UPageSection
    orientation="horizontal"
    title="Engage Your Audience"
    description="Share a single QR code to give your audience seamless access to everything they need - your profile, interactive features, live Q&A, and instant feedback."
  >
    <template #links>
      <Motion v-for="link in links" :key="link.label">
        <!-- ... -->
      </Motion>
    </template>
  </UPageSection>
</template>

This is annoying when building a page with multiple sections like this cause the script will be polluted with repetitive code that was, at first, collocated with the corresponding section.

By passing the links to the UPageSection component, we can keep the script clean and the template readable as follows:

<template>
  <UPageSection
    orientation="horizontal"
    title="Engage Your Audience"
    description="Share a single QR code to give your audience seamless access to everything they need - your profile, interactive features, live Q&A, and instant feedback."
    :links="[
      {
        label: 'Create Your Own',
        href: register().url,
      },
      {
        label: 'The Presentation Card',
        href: 'https://docs.inalia.app/presentation',
        target: '_blank',
        color: 'neutral',
        variant: 'ghost',
      },
    ]"
  >
    <template #links={ links }>
      <Motion v-for="link in links" :key="link.label">
        <!-- ... -->
      </Motion>
    </template>
  </UPageSection>
</template>

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4810

commit: aa5ce5c