Merge branch 'main' of github.com:45Drives/houston-common into main

45Drives · Jan 23, 2025 · cdf0a7c · cdf0a7c
2 parents 01f11f6 + 81a33d4
commit cdf0a7c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 24 deletions.
diff --git a/houston-common-ui/lib/components/HoustonAppContainer.vue b/houston-common-ui/lib/components/HoustonAppContainer.vue
@@ -28,7 +28,7 @@ const props = defineProps<{
 }>();
 
 const {
-  entries: tabEntries,
+  currentComponent,
   labels: tabLabels,
   index: tabIndex,
 } = defineHoustonAppTabState(computed(() => props.tabs ?? []));
@@ -59,7 +59,7 @@ watchEffect(() => {
     >
       <div :class="['bg-well grow', (noScroll? '' : 'overflow-y-auto')]" style="scrollbar-gutter: stable both-edges">
         <slot>
-          <TabView v-if="tabs" :entries="tabEntries" :index="tabIndex" />
+          <TabView v-if="tabs" :currentComponent="currentComponent" />
         </slot>
       </div>
       <div class="grow-0 overflow-visible relative">

diff --git a/houston-common-ui/lib/components/tabs/TabView.vue b/houston-common-ui/lib/components/tabs/TabView.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
-import { defineProps } from "vue";
+import { computed, defineProps, type Component } from "vue";
 import { type HoustonAppTabEntry } from "@/components/tabs";
 
 const props = defineProps<{
-  entries: HoustonAppTabEntry[];
-  index: number;
+  currentComponent?: Component
 }>();
 </script>
 
 <template>
   <KeepAlive>
-    <component v-if="entries.length" :is="entries[index].component" :key="[index, entries.length]" />
+    <component v-if="currentComponent" :is="currentComponent" :key="currentComponent.name" />
   </KeepAlive>
 </template>
 

diff --git a/houston-common-ui/lib/components/tabs/index.ts b/houston-common-ui/lib/components/tabs/index.ts
@@ -1,4 +1,13 @@
-import { ref, watch, watchEffect, type Component, type Ref, computed, type ComputedRef } from "vue";
+import {
+  ref,
+  watch,
+  watchEffect,
+  type Component,
+  type Ref,
+  computed,
+  type ComputedRef,
+  type WritableComputedRef,
+} from "vue";
 export { default as TabSelector } from "./TabSelector.vue";
 export { default as TabView } from "./TabView.vue";
 
@@ -10,33 +19,28 @@ export type HoustonAppTabEntry = {
 export type HoustonAppTabEntrySpec = HoustonAppTabEntry; // compat
 
 export type HoustonAppTabState = {
-  entries: ComputedRef<HoustonAppTabEntry[]>;
   labels: ComputedRef<string[]>;
-  index: Ref<number>;
+  index: WritableComputedRef<number>;
+  currentComponent: ComputedRef<Component | undefined>;
 };
 
 export function defineHoustonAppTabState(
   entries: HoustonAppTabEntry[] | ComputedRef<HoustonAppTabEntry[]>
 ): HoustonAppTabState {
   const entries_ = Array.isArray(entries) ? computed(() => entries) : entries;
-  const index = ref(0);
-  const lastIndex = parseInt(cockpit.localStorage.getItem("HoustonHeaderTabIndex") ?? "");
-  if (!isNaN(lastIndex)) {
-    index.value = lastIndex;
-  }
-  watch(
-    entries_,
-    (entries) => {
-      index.value = Math.min(Math.max(0, index.value), entries.length - 1);
+  const index_ = ref(parseInt(cockpit.localStorage.getItem("HoustonHeaderTabIndex") ?? "") || 0);
+  const index = computed({
+    get: () => Math.min(Math.max(0, index_.value), Math.max(0, entries_.value.length - 1)),
+    set: (value) => {
+      index_.value = Math.min(Math.max(0, value), Math.max(0, entries_.value.length - 1));
+      cockpit.localStorage.setItem("HoustonHeaderTabIndex", index_.value.toString());
     },
-    { immediate: true }
-  );
-  watch(index, (newIndex) => {
-    cockpit.localStorage.setItem("HoustonHeaderTabIndex", newIndex.toString());
   });
+  const currentComponent = computed(() => entries_.value[index.value]?.component);
+
   return {
-    entries: entries_,
-    labels: computed(() => entries_.value.map(({label}) => label)),
+    labels: computed(() => entries_.value.map(({ label }) => label)),
     index,
+    currentComponent,
   };
 }