feat(List): new component

[DarkGhostHunter]

🔗 Linked issue

• [Component] List #310
• [Navigation] Breadcrumb #157
• feat(Breadcrumb): new component #506

❓ 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

This is inspired Tremor List discussed by #310. Basically, an ordered/unordered list on amphetamines. It's mostly syntactic sugar for most List operations that you would have in the wild: adding separators, adding icons or indicators in each side, and so forth.

The basic usage for the list is just to use an array of items (much like UDropdown), but also let the developer have total control with slots.

From:

<template>
  <ul class="flex ...">
    <li v-for="(item, index) in items" class="flex ...">
      <div>
        <UIcon :name="item.icon" />
      </div>
      <div :class="item.color">
        {{ item.label }}
      </div>
      <div v-if="item.trailing">
        {{ item.trailing }}
      </div>
      <div v-if="index < (items.length - 1)" class="pt-4">
        <UDivider />
      </div>
  </ul>
</template>

To:

<template>
  <UList :items="items" />
</template>

This abstract approach to lists would enable anything, like Navigation Bradcrumbs in #157 and implemented in #506, to interactive lists with additional components as children.

• Can be ordered (ol) or unordered (ul) for semantic reasons.
• Stacks list items horizontally or vertically.
• Supports simple text to slots.
• Separator is a div by default, with custom color, and can be disabled.
• Keys the list by the object instance, but can be changed with the id prop. Good for animation libraries.

If an Item uses the to or click properties, the item will be a UButton with link, unless the variant property says otherwise. That's as far as button-as-item support there is, and should work for easy breadcrumbing.

Anything more advanced than that, and the developer can just use the default slot to put its own things, as these will be wrapped as the content of each <li>.

<template>
  <UList leading-separator> 
    <div v-for="item in items">
      ...
    </div>
    
    <template #separator>
      <UDivider ... />
    </template> 
  </UList>
</template>

📝 Checklist

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	❌ Failed (Inspect)		Nov 24, 2023 6:55pm

[cpauwels]

This is amazing, exactly what I was looking for! Looking forward to seeing this merged 👍

[DarkGhostHunter]

This is amazing, exactly what I was looking for! Looking forward to seeing this merged 👍

Thanks. I'm setting it as draft because there are some quirks here and there with the documentation not catching the component proper types. Going to poke @benjamincanac if he can help with that.

[DarkGhostHunter]

Well, even if it was a stretch or not, I will close this PR because I can't see why Vercel errors.

Probably my last PR until that problem is fixed.