fix(DiceRoller): update components to support the updated IconComboBox

src/pages/dice/buffs/[buff].vue

@@ -8,7 +8,7 @@
                     hint="Lower lumber is showed higher up in lists" @change="save" />
                 <VTextField v-model="buff.value" type="number" label="Value" @change="save" />
                 <VTextField v-model="buff.description" label="Description" @change="save" />
-                <IconComboBox v-model="iconValue" @change="save" />
+                <IconComboBox v-model="buff.icon" @change="save" />
                 <VRow>
                     <VCol>
                         <VTextField v-model="buff.duration" label="Duration" @change="save" />
@@ -27,11 +27,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { BuffDB, Buff } from '~/lib/interfaces/Buff';
-import { icons } from '~/lib/utils/Icons';
 
 const buffDb = new BuffDB()
 const $route = useRoute()
@@ -40,20 +38,7 @@ const buff = ref({} as Buff)
 // @ts-ignore
 buff.value = await buffDb.getBuffById($route.params.buff as string)!
 
-const iconValue = computed({
-    get: () => buff.value.icon.substring(4),
-    set: (value: string) => {
-        buff.value.icon = 'mdi-' + value
-    }
-})
-
 function save() {
     buffDb.updateBuff(JSON.parse(JSON.stringify(buff.value)))
 }
-
-function gotoPicto() {
-    window.open(`https://pictogrammers.com/library/mdi/`)
-}
-
-const iconExamples = ref(icons)
 </script>
\ No newline at end of file

src/pages/dice/buffs/index.vue

@@ -9,7 +9,7 @@
                     hint="Lower lumber is showed higher up in lists" />
                 <VTextField v-model="buff.value" type="number" label="Value" />
                 <VTextField v-model="buff.description" label="Description" />
-                <IconComboBox v-model="iconValue" />
+                <IconComboBox v-model="buff.icon" />
                 <VRow>
                     <VCol>
                         <VTextField v-model="buff.duration" label="Duration" />
@@ -30,9 +30,8 @@
 
 <script setup lang="ts">
 import { BuffDB, Buff } from '~/lib/interfaces/Buff';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { v4 } from 'uuid';
-import { icons } from '~/lib/utils/Icons';
 
 const buffDb = new BuffDB()
 
@@ -50,13 +49,6 @@ const buff = ref({
     color: '#FFFFFF',
 } as Buff)
 
-const iconValue = computed({
-    get: () => buff.value.icon.substring(4),
-    set: (value: string) => {
-        buff.value.icon = 'mdi-' + value
-    }
-})
-
 function clearBuff() {
     buff.value = {
         uuid: v4().toString(),
@@ -78,10 +70,4 @@ async function save() {
     clearBuff()
 }
 
-function gotoPicto() {
-    window.open(`https://pictogrammers.com/library/mdi/`)
-}
-
-const iconExamples = ref(icons)
-
 </script>
\ No newline at end of file

src/pages/dice/saved/[saved].vue

@@ -5,7 +5,7 @@
         <VCardText style="height: 100%;">
             <VForm @submit.stop.prevent="save">
                 <VTextField v-model="diceRoll.name" label="Name" @change="save" />
-                <IconComboBox v-model="iconValue" @change="save" />
+                <IconComboBox v-model="diceRoll.icon" @change="save" />
                 <VSelect v-model="diceRoll.buffs" multiple label="Applicable buffs" :items="buffs" item-title="name"
                     item-value="uuid" @change="save">
                     <template #selection="{ item }">
@@ -74,13 +74,12 @@
 
 <script setup lang="ts">
 import { DiceRollDb, IDiceRoll } from '~/lib/interfaces/DiceRoll';
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { Buff, BuffDB } from '~/lib/interfaces/Buff';
 import { useObservable } from '@vueuse/rxjs';
 import { liveQuery } from 'dexie';
 import { Dice } from '~/lib/interfaces/Dice';
 import { useRoute } from 'nuxt/app';
-import { icons } from '~/lib/utils/Icons';
 import IconComboBox from '~/components/IconComboBox.vue';
 
 const dicerollDb = new DiceRollDb()
@@ -92,20 +91,6 @@ const buffs = useObservable<Buff[]>(liveQuery(() => buffDb.buffs.orderBy('name')
 
 const diceRoll = ref((await dicerollDb.getDiceRollById(parseInt($route.params.saved as string)))!)
 
-const iconValue = computed({
-    get: () => diceRoll.value.icon.substring(4),
-    set: (value: string | { title: string, value: string }) => {
-        if (!value) {
-            diceRoll.value.icon = ""
-            return
-        }
-        if (typeof value === 'object') {
-            value = value.value
-        }
-        diceRoll.value.icon = 'mdi-' + value
-    }
-})
-
 const activeBuffs = ref<Buff[]>([])
 const buffString = ref("")
 const diceString = ref("")

src/pages/dice/saved/index.vue

@@ -5,7 +5,7 @@
         <VCardText style="height: 100%;">
             <VForm @submit.stop.prevent="save">
                 <VTextField v-model="diceRoll.name" label="Name" />
-                <IconComboBox v-model="iconValue" />
+                <IconComboBox v-model="diceRoll.icon" />
                 <VSelect v-model="diceRoll.buffs" multiple label="Applicable buffs" :items="buffs" item-title="name"
                     item-value="uuid">
                     <template #selection="{ item }">
@@ -73,7 +73,7 @@
 
 <script setup lang="ts">
 import { DiceRollDb, DiceRoll } from '~/lib/interfaces/DiceRoll';
-import { computed, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { Buff, BuffDB } from '~/lib/interfaces/Buff';
 import { useObservable } from '@vueuse/rxjs';
 import { liveQuery } from 'dexie';
@@ -87,13 +87,6 @@ const buffs = useObservable<Buff[]>(liveQuery(() => buffDb.buffs.orderBy('name')
 
 const diceRoll = ref(new DiceRoll('', [new Dice(20)]))
 
-const iconValue = computed({
-    get: () => diceRoll.value.icon.substring(4),
-    set: (value: string) => {
-        diceRoll.value.icon = 'mdi-' + value
-    }
-})
-
 const activeBuffs = ref<Buff[]>([])
 const buffString = ref("")
 const diceString = ref("")