Initial commit

resources/js/views/demos/components/list/DemoListThreeLine.vue

@@ -0,0 +1,58 @@
+<script setup>
+import avatar1 from '@images/avatars/avatar-1.png'
+import avatar2 from '@images/avatars/avatar-2.png'
+import avatar3 from '@images/avatars/avatar-3.png'
+import avatar4 from '@images/avatars/avatar-4.png'
+
+const items = [
+  {
+    type: 'subheader',
+    title: 'Today',
+  },
+  {
+    prependAvatar: avatar1,
+    title: 'Brunch this weekend?',
+    subtitle: '<span class="text-primary">Ali Connors</span> &mdash; I\'ll be in your neighborhood doing errands this weekend. Do you want to hang out?',
+  },
+  {
+    type: 'divider',
+    inset: true,
+  },
+  {
+    prependAvatar: avatar2,
+    title: 'Summer BBQ',
+    subtitle: '<span class="text-primary">to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I\'m out of town this weekend.',
+  },
+  {
+    type: 'divider',
+    inset: true,
+  },
+  {
+    prependAvatar: avatar3,
+    title: 'Oui oui',
+    subtitle: '<span class="text-primary">Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?',
+  },
+  {
+    type: 'divider',
+    inset: true,
+  },
+  {
+    prependAvatar: avatar4,
+    title: 'Birthday gift',
+    subtitle: '<span class="text-primary">Trevor Hansen</span> &mdash; Have any ideas about what we should get Heidi for her birthday?',
+  },
+]
+</script>
+
+<template>
+  <VList
+    lines="three"
+    :items="items"
+    item-props
+  >
+    <template #subtitle="{ subtitle }">
+      <!-- eslint-disable-next-line vue/no-v-html -->
+      <div v-html="subtitle" />
+    </template>
+  </VList>
+</template>