feat: add border with color on loCha with many objects #237

components/LoChaItem.vue

@@ -1,25 +1,43 @@
 <script setup lang="ts">
 import type { LoCha } from '~/libs/types'
 
+//
+// Props
+//
 const props = defineProps<{
+  borderColor?: string
   projectSlug: string
   item: LoCha
 }>()
 
+//
+// Emits
+//
 defineEmits<{
   (e: 'accept', id: number): void
 }>()
 
+//
+// Composables
+//
+const user = useUser()
+
+//
+// Computed
+//
 const lochaCount = computed(() => props.item.objects.length)
 
-const user = useUser()
-const isProjectUser = computed(() => {
-  return !!user.value?.projects?.includes(props.projectSlug)
-})
+const isProjectUser = computed(() => !!user.value?.projects?.includes(props.projectSlug))
 </script>
 
 <template>
-  <el-card style="--el-card-bg-color: #FAFAFA;" :body-style="{ padding: 0 }">
+  <el-card
+    style="--el-card-bg-color: #FAFAFA;"
+    :body-style="{
+      padding: 0,
+      borderLeft: lochaCount > 1 ? `8px solid ${borderColor}` : 'initial',
+    }"
+  >
     <template v-if="lochaCount > 1 || isProjectUser" #header>
       <div class="card-header">
         <el-text v-if="lochaCount > 1" class="mx-1" size="large" tag="b">

components/LoChaList.vue

@@ -1,31 +1,47 @@
 <script setup lang="ts">
 import type { LoCha } from '~/libs/types'
 
+//
+// Props
+//
 const props = defineProps<{
   projectSlug: string
   loChas: LoCha[]
 }>()
 
+//
+// Emits
+//
 defineEmits<{
   (e: 'accept', id: number): void
 }>()
 
-const scrollCount = ref<number>(10)
+//
+// Data
+//
+const scrollCount = ref(10)
+const borderColors = ['#A458E3', '#F056A1', '#01A7F3', '#01EFDD']
+
+//
+// Computed
+//
+const lazyLoChas = computed(() => props.loChas.slice(0, scrollCount.value))
+
+//
+// Methods
+//
 function scrollLoad() {
   scrollCount.value += 10
 }
-
-const lazyLoChas = computed(() => {
-  return props.loChas.slice(0, scrollCount.value)
-})
 </script>
 
 <template>
   <div>
     <el-space v-infinite-scroll="scrollLoad" fill :size="20">
       <lo-cha-item
-        v-for="loCha in lazyLoChas"
+        v-for="(loCha, index) in lazyLoChas"
         :key="loCha.id"
+        :border-color="loCha.objects.length > 1 ? borderColors[index % borderColors.length] : undefined"
         :item="loCha"
         :project-slug="projectSlug"
         @accept="$emit('accept', $event)"