chore(ui): <SingleSelect/> allow logo class customisation

profilecity · Oct 27, 2024 · 05a8b52 · 05a8b52
1 parent c5169b3
commit 05a8b52
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/app/components/abstract/dropdown/SingleSelect.vue b/app/components/abstract/dropdown/SingleSelect.vue
@@ -30,7 +30,12 @@ const setSelectedOption = (id: SelectableOption['id'], closeFn: () => void) => {
     <template #input="{ open }">
       <slot name="input" :open="open">
         <InputButton variant="outline" @click.prevent="open" v-if="selectedOption">
-          <Icon :name="selectedOption.logo" class="w-4 h-4 fill-current mr-2" v-if="selectedOption.logo" />
+          <Icon
+            :name="selectedOption.logo"
+            class="w-4 h-4 fill-current mr-2"
+            :class="selectedOption.logoClass"
+            v-if="selectedOption.logo"
+          />
           <span>{{ selectedOption.title }}</span>
         </InputButton>
         <InputButton variant="outline" @click="open" v-else>
@@ -43,7 +48,12 @@ const setSelectedOption = (id: SelectableOption['id'], closeFn: () => void) => {
       <ul class="mb-4">
         <li v-for="option in options" :key="option.id">
           <InputButton variant="ghost" @click.prevent="setSelectedOption(option.id, close)">
-            <Icon :name="option.logo" class="w-4 h-4 fill-current mr-2" v-if="option.logo" />
+            <Icon
+              :name="option.logo"
+              class="w-4 h-4 fill-current mr-2"
+              :class="selectedOption?.logoClass"
+              v-if="option.logo"
+            />
             <span>{{ option.title }}</span>
           </InputButton>
         </li>

diff --git a/shared/types/general.d.ts b/shared/types/general.d.ts
@@ -6,6 +6,7 @@ export type SelectableOption = {
   id: string | number;
   title: string;
   logo?: string;
+  logoClass?: string;
 };
 
 export type Tab = {