feat: add BaseList and BaseListItem components

components/base/BaseList.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+// const slots = useSlots()
+// const hasMedia = computed(() => {
+//   return slots.default?.().some((vnode) => {
+//     console.log(vnode)
+//     return typeof vnode.type !== 'string'
+//   })
+// })
+
+export default defineComponent({
+  props: {
+    /**
+     * If the list should be ordered.
+     */
+    ordered: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props, { slots }) {
+    return () => {
+      const ordered = props.ordered ? 'nui-list-ol' : 'nui-list-ul'
+      const children = slots.default?.()
+      const hasMedia = children?.some((vnode) => {
+        return typeof vnode.type !== 'string'
+      })
+
+      return h(
+        'div',
+        {
+          class: [
+            'nui-list',
+            hasMedia && 'nui-list-media',
+            !hasMedia && `nui-list-base ${ordered}`,
+          ],
+        },
+        children
+      )
+    }
+  },
+})
+</script>

components/base/BaseListItem.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+const props = defineProps<{
+  /**
+   * The title of the list item.
+   */
+  title?: string
+  /**
+   * The subtitle of the list item.
+   */
+  subtitle?: string
+}>()
+
+const slots = useSlots()
+const hasTitle = computed(() => {
+  return Boolean(props.title || 'title' in slots)
+})
+const hasSubtitle = computed(() => {
+  return Boolean(props.subtitle || 'subtitle' in slots)
+})
+</script>
+
+<template>
+  <div class="nui-list-item">
+    <slot />
+
+    <div v-if="hasTitle || hasSubtitle">
+      <BaseHeading
+        v-if="hasTitle"
+        as="h6"
+        weight="medium"
+        size="md"
+        lead="tight"
+      >
+        <slot name="title">{{ props.title }}</slot>
+      </BaseHeading>
+      <BaseParagraph
+        v-if="hasSubtitle"
+        size="xs"
+        class="text-muted-500 dark:text-muted-400"
+      >
+        <slot name="subtitle">{{ props.subtitle }}</slot>
+      </BaseParagraph>
+    </div>
+
+    <div class="ms-auto">
+      <slot name="end" />
+    </div>
+  </div>
+</template>