Koala theme - Screen-width - Use provide and inject to pass information direct from parent to chil…

packages/modules/web_themes/koala/source/src/components/BaseCarousel.vue

@@ -41,12 +41,12 @@ import {
   nextTick,
   onMounted,
   onBeforeUnmount,
+  provide,
 } from 'vue';
 import { useQuasar } from 'quasar';
 
 const props = defineProps<{
   items: number[];
-  cardWidth?: number;
 }>();
 
 const $q = useQuasar();
@@ -113,6 +113,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
@@ -164,16 +171,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>

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>
 

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);

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>

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);

packages/modules/web_themes/koala/source/src/components/VehicleCard.vue

@@ -59,17 +59,16 @@
 </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';
 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>
 

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);