From 3a72df63280cd4fcf4175d475ba180604d526333 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 9 Aug 2023 15:37:05 -0300
Subject: [PATCH] Allow selecting icon from list in the `GenericIndicator`
 mini-widget

---
 src/components/mini-widgets/GenericIndicator.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/mini-widgets/GenericIndicator.vue b/src/components/mini-widgets/GenericIndicator.vue
index 9ded592e6..b7927b2d7 100644
--- a/src/components/mini-widgets/GenericIndicator.vue
+++ b/src/components/mini-widgets/GenericIndicator.vue
@@ -36,12 +36,23 @@
             />
           </div>
         </div>
+        <RecycleScroller
+          v-slot="{ item }"
+          class="w-full h-40 mt-3"
+          :items="iconsNames.filter((name) => name.includes(iconSearchString))"
+          :item-size="40"
+          :grid-items="6"
+        >
+          <span class="m-1 text-white cursor-pointer mdi icon-symbol" :class="[item]" @click="options.iconName = item">
+          </span>
+        </RecycleScroller>
       </div>
     </div>
   </Dialog>
 </template>
 
 <script setup lang="ts">
+import * as MdiExports from '@mdi/js/mdi'
 import { toReactive } from '@vueuse/core'
 import { computed, onBeforeMount, ref, toRefs, watch } from 'vue'
 
@@ -69,6 +80,10 @@ onBeforeMount(() => {
       variableMultiplier: 1,
     })
   }
+
+  iconsNames = Object.keys(MdiExports).map((originalName) => {
+    return originalName.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())
+  })
 })
 
 const store = useMainVehicleStore()
@@ -82,6 +97,7 @@ const updateVariableState = (): void => {
 watch(store.genericVariables, updateVariableState)
 watch(options, updateVariableState)
 
+let iconsNames: string[] = []
 
 const showConfigurationMenu = ref(false)
 </script>