feat: enhance DataDisplay component to support array values and clickable labels

src/components/08_request-list/DataDisplay.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
 
+defineEmits<{ (e: 'labelClick', value: string, index: number): void }>();
+
 withDefaults(
   defineProps<{
     label: string;
-    value?: string;
+    value?: string | string[];
     icon?: string;
     iconSize?: string;
     tooltip?: boolean;
+    clickable?: boolean;
   }>(),
   {
     label: '-',
@@ -30,10 +33,36 @@ withDefaults(
       </span>
       <span class="col-12 ellipsis">
         <slot name="value">
-          {{ value }}
-          <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
+          <span
+            :class="{ 'link cursor-pointer': clickable }"
+            v-if="typeof value === 'string'"
+            @click="$emit('labelClick', value, null)"
+          >
+            {{ value }}
+            <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
+          </span>
+          <span v-else :class="{ 'link cursor-pointer': clickable }">
+            <span
+              v-for="(item, index) in value"
+              :key="index"
+              @click="$emit('labelClick', item, index)"
+              class="link cursor-pointer"
+            >
+              {{ item }}
+              <span v-if="index < value.length - 1">,&nbsp;</span>
+
+              <q-tooltip v-if="tooltip" :delay="500">{{ item }}</q-tooltip>
+            </span>
+          </span>
         </slot>
       </span>
     </span>
   </article>
 </template>
+
+<style scoped>
+.link {
+  color: hsl(var(--info-bg));
+  text-decoration: underline;
+}
+</style>