From 20afa555677e7f09242556955e89c9e018b44e43 Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 22 Jul 2025 09:36:12 +0200
Subject: [PATCH 1/3] Use provide and inject to pass information direct from
 parent to child component

---
 .../koala/source/src/components/BaseCarousel.vue |  8 ++++++++
 .../koala/source/src/components/BatteryCard.vue  | 16 ++++++++++------
 .../source/src/components/BatteryInformation.vue | 10 ++++------
 .../source/src/components/ChargePointCard.vue    |  9 ++++-----
 .../src/components/ChargePointInformation.vue    |  5 +----
 .../koala/source/src/components/VehicleCard.vue  |  9 ++++-----
 .../source/src/components/VehicleInformation.vue |  5 +----
 7 files changed, 32 insertions(+), 30 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
index 04ee7100e0..bd662b834f 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -41,6 +41,7 @@ import {
   nextTick,
   onMounted,
   onBeforeUnmount,
+  provide,
 } from 'vue';
 import { useQuasar } from 'quasar';
 
@@ -113,6 +114,13 @@ onBeforeUnmount(() => {
 
 const effectiveCardWidth = ref<number | undefined>(undefined);
 
+// Function provided to child components
+const setCardWidth = (width: number | undefined) => {
+  effectiveCardWidth.value = width ? width + 72 : undefined; // Add 72px to account for padding / margins / navigation buttons in carousel
+};
+
+provide('setCardWidth', setCardWidth);
+
 // Computes how many cards can fit in the carousel based on carousel width and the card width
 const groupSize = computed(() => {
   return effectiveCardWidth.value
diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
index 16bdaaaded..dc287d4563 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryCard.vue
@@ -25,7 +25,10 @@
           {{ power }}
         </div>
       </div>
-      <div v-if="showSettings" class="row q-mt-md justify-between text-subtitle2">
+      <div
+        v-if="showSettings"
+        class="row q-mt-md justify-between text-subtitle2"
+      >
         <div>Laden mit Überschuss:</div>
         <div class="q-ml-sm row items-center">
           <q-icon
@@ -62,16 +65,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, inject } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import BatterySettingsDialog from './BatterySettingsDialog.vue';
 import { useBatteryModes } from 'src/composables/useBatteryModes.ts';
 import SliderDouble from './SliderDouble.vue';
 
 const cardRef = ref<{ $el: HTMLElement } | null>(null);
-const emit = defineEmits<{
-  (event: 'card-width', width: number | undefined): void;
-}>();
+const setCardWidth = inject<((width: number | undefined) => void) | undefined>(
+  'setCardWidth',
+  undefined,
+);
 
 const props = defineProps<{
   batteryId: number | undefined;
@@ -139,7 +143,7 @@ const dailyExportedEnergy = computed(() => {
 
 onMounted(() => {
   const cardWidth = cardRef.value?.$el.clientWidth;
-  emit('card-width', cardWidth);
+  setCardWidth?.(cardWidth);
 });
 </script>
 
diff --git a/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue b/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
index 48aeaa6d2d..0924078c35 100644
--- a/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BatteryInformation.vue
@@ -1,23 +1,21 @@
 <template>
   <div v-if="showBatteryOverview" class="row justify-center">
-    <BatteryCard :battery-id="undefined"/>
+    <BatteryCard :battery-id="undefined" />
   </div>
-  <BaseCarousel :items="batteryIds" :card-width="cardWidth">
+  <BaseCarousel :items="batteryIds">
     <template #item="{ item }">
-      <BatteryCard :battery-id="item" @card-width="cardWidth = $event"/>
+      <BatteryCard :battery-id="item" />
     </template>
   </BaseCarousel>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
 import BaseCarousel from 'src/components/BaseCarousel.vue';
 import BatteryCard from 'src/components/BatteryCard.vue';
 
-const cardWidth = ref<number | undefined>(undefined);
-
 const mqttStore = useMqttStore();
 
 const batteryIds = computed(() => mqttStore.batteryIds);
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
index 233d5163d6..df35a15af5 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointCard.vue
@@ -93,7 +93,7 @@
   />
 </template>
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, inject } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import SliderDouble from './SliderDouble.vue';
 import ChargePointLock from './ChargePointLock.vue';
@@ -110,9 +110,8 @@ import ChargePointPowerData from './ChargePointPowerData.vue';
 import { useQuasar } from 'quasar';
 
 const cardRef = ref<{ $el: HTMLElement } | null>(null);
-const emit = defineEmits<{
-  (event: 'card-width', width: number | undefined): void;
-}>();
+const setCardWidth =
+  inject<(width: number | undefined) => void>('setCardWidth');
 
 const mqttStore = useMqttStore();
 
@@ -286,7 +285,7 @@ const refreshSoc = () => {
 
 onMounted(() => {
   const cardWidth = cardRef.value?.$el.offsetWidth;
-  emit('card-width', cardWidth);
+  setCardWidth?.(cardWidth);
 });
 </script>
 <style lang="scss" scoped>
diff --git a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
index a8f3bc8d82..1406afd41e 100644
--- a/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ChargePointInformation.vue
@@ -2,10 +2,9 @@
   <BaseCarousel
     v-if="chargePointIds.length <= cardViewBreakpoint"
     :items="chargePointIds"
-    :card-width="cardWidth"
   >
     <template #item="{ item }">
-      <ChargePointCard :charge-point-id="item" @card-width="cardWidth = $event" />
+      <ChargePointCard :charge-point-id="item" />
     </template>
   </BaseCarousel>
 
@@ -146,8 +145,6 @@ import {
   ChargePointRow,
 } from 'src/components/models/table-model';
 
-const cardWidth = ref<number | undefined>(undefined);
-
 const mqttStore = useMqttStore();
 const { chargeModes } = useChargeModes();
 const chargePointIds = computed(() => mqttStore.chargePointIds);
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
index 3c2c547de5..3f34cf828b 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleCard.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, inject } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 import { useQuasar } from 'quasar';
 import SliderDouble from './SliderDouble.vue';
@@ -67,9 +67,8 @@ import ManualSocDialog from './ManualSocDialog.vue';
 import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 
 const cardRef = ref<{ $el: HTMLElement } | null>(null);
-const emit = defineEmits<{
-  (event: 'card-width', width: number | undefined): void;
-}>();
+const setCardWidth =
+  inject<(width: number | undefined) => void>('setCardWidth');
 
 const props = defineProps<{
   vehicleId: number;
@@ -105,7 +104,7 @@ const refreshSoc = () => {
 
 onMounted(() => {
   const cardWidth = cardRef.value?.$el.offsetWidth;
-  emit('card-width', cardWidth);
+  setCardWidth?.(cardWidth);
 });
 </script>
 
diff --git a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
index f819a6f159..ff7e8e6743 100644
--- a/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
+++ b/packages/modules/web_themes/koala/source/src/components/VehicleInformation.vue
@@ -2,10 +2,9 @@
   <BaseCarousel
     v-if="vehicleIds.length <= cardViewBreakpoint"
     :items="vehicleIds"
-    :card-width="cardWidth"
   >
     <template #item="{ item }">
-      <VehicleCard :vehicle-id="item" @card-width="cardWidth = $event" />
+      <VehicleCard :vehicle-id="item" />
     </template>
   </BaseCarousel>
 
@@ -74,8 +73,6 @@ import VehicleConnectionStateIcon from './VehicleConnectionStateIcon.vue';
 import VehicleCard from 'src/components/VehicleCard.vue';
 import { ColumnConfiguration } from 'src/components/models/table-model';
 
-const cardWidth = ref<number | undefined>(undefined);
-
 const mqttStore = useMqttStore();
 const isMobile = computed(() => Platform.is.mobile);
 const modalChargeVehicleCardVisible = ref(false);

From 81165fc6a7fbd18ccbd1932f46951ee014d1f0be Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 22 Jul 2025 10:02:55 +0200
Subject: [PATCH 2/3] Remove card-width watcher from base carousel

---
 .../koala/source/src/components/BaseCarousel.vue       | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
index bd662b834f..1f529e837b 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -172,16 +172,6 @@ const handleSlideChange = () => {
     window.scrollTo(0, currentScroll);
   });
 };
-
-// watches cardWidth prop because it takes time to be emitted and passed through component hierarchy
-watch(
-  () => props.cardWidth,
-  (newVal) => {
-    if (newVal && newVal > 0) {
-      effectiveCardWidth.value = newVal + 72; // Add 72px to account for padding / margins / navigation buttons in carousel
-    }
-  },
-);
 </script>
 
 <style scoped>

From 65b4cab1d7fed2134bb9db2f7f063fe6cabf149d Mon Sep 17 00:00:00 2001
From: BrettS <brett.scott@openwb.de>
Date: Tue, 22 Jul 2025 10:06:15 +0200
Subject: [PATCH 3/3] Remove unnecessary prop card-Width

---
 .../web_themes/koala/source/src/components/BaseCarousel.vue      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
index 1f529e837b..b4d20a0014 100644
--- a/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
+++ b/packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue
@@ -47,7 +47,6 @@ import { useQuasar } from 'quasar';
 
 const props = defineProps<{
   items: number[];
-  cardWidth?: number;
 }>();
 
 const $q = useQuasar();