From 6672e5d75e3783808a599d8bf4f6a58fd0bd2ff6 Mon Sep 17 00:00:00 2001
From: Ayideyia <150233177+Ayideyia@users.noreply.github.com>
Date: Sat, 6 Jul 2024 16:05:09 +0800
Subject: [PATCH] feat: Add a description field to the options of the picker
 component.

---
 frontend/src/components/Picker/index.vue    | 38 ++++++++++++++-------
 frontend/src/hooks/usePicker.ts             |  2 +-
 frontend/src/views/PlaygroundView/index.vue |  8 ++---
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/Picker/index.vue b/frontend/src/components/Picker/index.vue
index 39f8d2fb..ed3db7d6 100644
--- a/frontend/src/components/Picker/index.vue
+++ b/frontend/src/components/Picker/index.vue
@@ -6,7 +6,7 @@ import useI18n from '@/lang'
 interface Props {
   type: 'single' | 'multi'
   title: string
-  options: { label: string; value: string }[]
+  options: { label: string; value: string; description?: string }[]
   initialValue?: string[]
 }
 
@@ -62,14 +62,17 @@ const handleSelectAll = () => {
 
       <div class="options">
         <div v-for="(o, i) in options" :key="i" @click="handleSelect(o.value)" class="item">
-          <span>{{ o.label }}</span>
-          <Icon
-            v-show="isSelected(o.value)"
-            :size="32"
-            icon="selected"
-            fill="var(--primary-color)"
-            style="flex-shrink: 0"
-          />
+          <div class="label">
+            <div>{{ o.label }}</div>
+            <Icon
+              v-show="isSelected(o.value)"
+              :size="32"
+              icon="selected"
+              fill="var(--primary-color)"
+              style="flex-shrink: 0"
+            />
+          </div>
+          <div class="description">{{ o.description }}</div>
         </div>
       </div>
 
@@ -108,11 +111,7 @@ const handleSelectAll = () => {
     overflow: auto;
   }
   .item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
     margin: 4px 0;
-    line-height: 32px;
     padding: 0 8px;
     word-wrap: break-word;
     word-break: break-all;
@@ -122,6 +121,19 @@ const handleSelectAll = () => {
     &:nth-child(even) {
       background: var(--table-tr-even-bg);
     }
+
+    .label {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      line-height: 32px;
+    }
+
+    .description {
+      font-size: 12px;
+      line-height: 22px;
+      opacity: 0.7;
+    }
   }
 }
 </style>
diff --git a/frontend/src/hooks/usePicker.ts b/frontend/src/hooks/usePicker.ts
index 2626f6d8..622438b2 100644
--- a/frontend/src/hooks/usePicker.ts
+++ b/frontend/src/hooks/usePicker.ts
@@ -2,7 +2,7 @@ import { render, createVNode } from 'vue'
 
 import PickerComp from '@/components/Picker/index.vue'
 
-type PickerItem = { label: string; value: string }
+type PickerItem = { label: string; value: string; description?: string }
 
 const createPicker = (
   type: 'single' | 'multi',
diff --git a/frontend/src/views/PlaygroundView/index.vue b/frontend/src/views/PlaygroundView/index.vue
index b0b94512..deadd5ac 100644
--- a/frontend/src/views/PlaygroundView/index.vue
+++ b/frontend/src/views/PlaygroundView/index.vue
@@ -36,9 +36,9 @@ const handleShowSinglePicker = async () => {
     const res = await picker.single(
       'Single',
       [
-        { label: 'ONE', value: 'one' },
+        { label: 'ONE', value: 'one', description: 'The first option' },
         { label: 'TWO', value: 'two' },
-        { label: 'THREE', value: 'three' }
+        { label: 'THREE', value: 'three', description: 'The third option' }
       ],
       ['one']
     )
@@ -53,9 +53,9 @@ const handleShowMultiPicker = async () => {
     const res = await picker.multi(
       'Multi',
       [
-        { label: 'ONE', value: 'one' },
+        { label: 'ONE', value: 'one', description: 'The first option' },
         { label: 'TWO', value: 'two' },
-        { label: 'THREE', value: 'three' }
+        { label: 'THREE', value: 'three', description: 'The third option' }
       ],
       ['one', 'three']
     )