Initial commit

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

@@ -0,0 +1,82 @@
+<script setup>
+const languageProgress = [
+  {
+    avatar: 'tabler-brand-react',
+    title: 'React is a JavaScript library for building user interfaces',
+    language: 'react',
+    amount: 90,
+  },
+  {
+    avatar: 'tabler-brand-bootstrap',
+    title: 'Bootstrap is an open source toolkit',
+    language: 'bootstrap',
+    amount: 80,
+  },
+  {
+    avatar: 'tabler-brand-vue',
+    title: 'Vue.js is the Progressive JavaScript Framework',
+    language: 'vue',
+    amount: 65,
+  },
+  {
+    avatar: 'tabler-brand-angular',
+    title: 'Angular implements Functional Programming concepts',
+    language: 'angular',
+    amount: 75,
+  },
+  {
+    avatar: 'tabler-brand-javascript',
+    title: 'JavaScript is the programming language of the Web',
+    language: 'javascript',
+    amount: 70,
+  },
+]
+
+const resolveStatusColor = {
+  react: 'info',
+  bootstrap: 'primary',
+  vue: 'success',
+  angular: 'error',
+  javascript: 'warning',
+}
+</script>
+
+<template>
+  <VList
+    lines="two"
+    border
+  >
+    <template
+      v-for="(progress, index) of languageProgress"
+      :key="progress.language"
+    >
+      <VListItem>
+        <template #prepend>
+          <VAvatar
+            size="36"
+            rounded
+            variant="tonal"
+            :icon="progress.avatar"
+            :color="resolveStatusColor[progress.language]"
+          />
+        </template>
+
+        <VListItemTitle>
+          {{ progress.title }}
+        </VListItemTitle>
+
+        <VListItemSubtitle class="mt-2">
+          <VProgressLinear
+            height="6"
+            rounded
+            rounded-bar
+            :model-value="progress.amount"
+            :color="resolveStatusColor[progress.language]"
+          />
+        </VListItemSubtitle>
+      </VListItem>
+
+      <VDivider v-if="index !== languageProgress.length - 1" />
+    </template>
+  </VList>
+</template>