From 815979cd12f6e4e0cf110236526115642eff5f2a Mon Sep 17 00:00:00 2001
From: Eeymoo <eeymoo@xmail.fun>
Date: Wed, 8 Jan 2025 10:25:46 +0800
Subject: [PATCH] fix(wizard): fix stepper error on wizard page

* fix(wizard): fix stepper error on wizard page

* fix/eslint error
---
 frontend/src/pages/wizard.vue         | 113 ++++++++++++--------------
 frontend/types/global/components.d.ts |   8 ++
 2 files changed, 59 insertions(+), 62 deletions(-)

diff --git a/frontend/src/pages/wizard.vue b/frontend/src/pages/wizard.vue
index a8887eee977..72339712122 100644
--- a/frontend/src/pages/wizard.vue
+++ b/frontend/src/pages/wizard.vue
@@ -8,74 +8,82 @@
         sm="12"
         md="12"
         xl="8">
-        <h1 class="text-center mb-6 text-h4">
-          {{ heading }}
-        </h1>
-        <!-- TODO: Wait for Vuetify 3 implementation (https://github.com/vuetifyjs/vuetify/issues/13509) -->
-        <!-- <v-stepper v-model="wizardStage" class="transparent-background">
-          <v-stepper-header>
-            <v-stepper-step
+        <VStepper
+          v-model="wizardStage"
+          class="transparent-background">
+          <VStepperHeader>
+            <VStepperItem
               :complete="wizardStage > 1"
-              step="1"
+              value="1"
               :editable="maxWizardStage > 0">
-              {{ t('wizard.languageLocale') }}
-            </v-stepper-step>
+              {{ t('languageLocale') }}
+            </VStepperItem>
 
-            <v-divider />
+            <VDivider />
 
-            <v-stepper-step
+            <VStepperItem
               :complete="wizardStage > 2"
-              step="2"
+              value="2"
               :editable="maxWizardStage > 1">
-              {{ t('wizard.administratorAccount') }}
-            </v-stepper-step>
+              {{ t('administratorAccount') }}
+            </VStepperItem>
 
-            <v-divider />
+            <VDivider />
 
-            <v-stepper-step
+            <VStepperItem
               :complete="wizardStage > 3"
-              step="3"
+              value="3"
               :editable="maxWizardStage > 2">
-              {{ t('wizard.preferredMetadataLanguage') }}
-            </v-stepper-step>
+              {{ t('preferredMetadataLanguage') }}
+            </VStepperItem>
 
-            <v-divider />
+            <VDivider />
 
-            <v-stepper-step
+            <VStepperItem
               :complete="wizardStage > 4"
-              step="4"
+              value="4"
               :editable="maxWizardStage > 3">
-              {{ t('wizard.remoteAccess') }}
-            </v-stepper-step>
-          </v-stepper-header>
-
-          <v-stepper-items>
-            <v-stepper-content step="1">
-              <wizard-language class="pt-4" @step-complete="nextStep" />
-            </v-stepper-content>
+              {{ t('remoteAccess') }}
+            </VStepperItem>
+          </VStepperHeader>
+
+          <VStepperWindow>
+            <VStepperWindowItem
+              key="1-content"
+              value="1">
+              <WizardLanguage
+                class="pt-4"
+                @step-complete="nextStep" />
+            </VStepperWindowItem>
 
-            <v-stepper-content step="2">
-              <wizard-admin-account
+            <VStepperWindowItem
+              key="2-content"
+              value="2">
+              <WizardAdminAccount
                 class="pt-4"
                 @step-complete="nextStep"
                 @previous-step="previousStep" />
-            </v-stepper-content>
+            </VStepperWindowItem>
 
-            <v-stepper-content step="3">
-              <wizard-metadata
+            <VStepperWindowItem
+              key="3-content"
+              value="3">
+              <WizardMetadata
                 class="pt-4"
                 @step-complete="nextStep"
                 @previous-step="previousStep" />
-            </v-stepper-content>
+            </VStepperWindowItem>
 
-            <v-stepper-content step="4">
-              <wizard-remote-access
+            <VStepperWindowItem
+              key="4-content"
+              value="4">
+              <WizardRemoteAccess
                 class="pt-4"
                 @step-complete="nextStep"
                 @previous-step="previousStep" />
-            </v-stepper-content>
-          </v-stepper-items>
-        </v-stepper> -->
+            </VStepperWindowItem>
+          </VStepperWindow>
+        </VStepper>
       </VCol>
     </VRow>
   </VContainer>
@@ -89,7 +97,7 @@ meta:
 
 <script setup lang="ts">
 import { getStartupApi } from '@jellyfin/sdk/lib/utils/api/startup-api';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useSnackbar } from '@/composables/use-snackbar';
@@ -101,25 +109,6 @@ const router = useRouter();
 const wizardStage = ref(1);
 const maxWizardStage = ref(1);
 
-const heading = computed(() => {
-  switch (wizardStage.value) {
-    case 1: {
-      return t('languageLocale');
-    }
-    case 2: {
-      return t('administratorAccount');
-    }
-    case 3: {
-      return t('preferredMetadataLanguage');
-    }
-    case 4: {
-      return t('remoteAccess');
-    }
-  }
-
-  return '';
-});
-
 /**
  * Completes server setup
  */
diff --git a/frontend/types/global/components.d.ts b/frontend/types/global/components.d.ts
index 51c09aaa1ae..1c0abae2115 100644
--- a/frontend/types/global/components.d.ts
+++ b/frontend/types/global/components.d.ts
@@ -204,6 +204,14 @@ declare module 'vue' {
     VSlider: typeof import('vuetify/components')['VSlider']
     VSnackbar: typeof import('vuetify/components')['VSnackbar']
     VSpacer: typeof import('vuetify/components')['VSpacer']
+    VStepper: typeof import('vuetify/components')['VStepper']
+    VStepperContent: typeof import('vuetify/components')['VStepperContent']
+    VStepperHeader: typeof import('vuetify/components')['VStepperHeader']
+    VStepperItem: typeof import('vuetify/components')['VStepperItem']
+    VStepperItems: typeof import('vuetify/components')['VStepperItems']
+    VStepperStep: typeof import('vuetify/components')['VStepperStep']
+    VStepperWindow: typeof import('vuetify/components')['VStepperWindow']
+    VStepperWindowItem: typeof import('vuetify/components')['VStepperWindowItem']
     VSwitch: typeof import('vuetify/components')['VSwitch']
     VTab: typeof import('vuetify/components')['VTab']
     VTable: typeof import('vuetify/components')['VTable']