Skip to content

Commit 526abe0

Browse files
EeymooEeymoo
authored
fix(wizard): fix stepper error on wizard page
* fix(wizard): fix stepper error on wizard page * fix/eslint error
1 parent 6bbd93d commit 526abe0

File tree

2 files changed

+59
-62
lines changed

2 files changed

+59
-62
lines changed

‎frontend/src/pages/wizard.vue

Lines changed: 51 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -8,74 +8,82 @@
88
sm="12"
99
md="12"
1010
xl="8">
11-
<h1 class="text-center mb-6 text-h4">
12-
{{ heading }}
13-
</h1>
14-
<!-- TODO: Wait for Vuetify 3 implementation (https://github.com/vuetifyjs/vuetify/issues/13509) -->
15-
<!-- <v-stepper v-model="wizardStage" class="transparent-background">
16-
<v-stepper-header>
17-
<v-stepper-step
11+
<VStepper
12+
v-model="wizardStage"
13+
class="transparent-background">
14+
<VStepperHeader>
15+
<VStepperItem
1816
:complete="wizardStage > 1"
19-
step="1"
17+
value="1"
2018
:editable="maxWizardStage > 0">
21-
{{ t('wizard.languageLocale') }}
22-
</v-stepper-step>
19+
{{ t('languageLocale') }}
20+
</VStepperItem>
2321

24-
<v-divider />
22+
<VDivider />
2523

26-
<v-stepper-step
24+
<VStepperItem
2725
:complete="wizardStage > 2"
28-
step="2"
26+
value="2"
2927
:editable="maxWizardStage > 1">
30-
{{ t('wizard.administratorAccount') }}
31-
</v-stepper-step>
28+
{{ t('administratorAccount') }}
29+
</VStepperItem>
3230

33-
<v-divider />
31+
<VDivider />
3432

35-
<v-stepper-step
33+
<VStepperItem
3634
:complete="wizardStage > 3"
37-
step="3"
35+
value="3"
3836
:editable="maxWizardStage > 2">
39-
{{ t('wizard.preferredMetadataLanguage') }}
40-
</v-stepper-step>
37+
{{ t('preferredMetadataLanguage') }}
38+
</VStepperItem>
4139

42-
<v-divider />
40+
<VDivider />
4341

44-
<v-stepper-step
42+
<VStepperItem
4543
:complete="wizardStage > 4"
46-
step="4"
44+
value="4"
4745
:editable="maxWizardStage > 3">
48-
{{ t('wizard.remoteAccess') }}
49-
</v-stepper-step>
50-
</v-stepper-header>
51-
52-
<v-stepper-items>
53-
<v-stepper-content step="1">
54-
<wizard-language class="pt-4" @step-complete="nextStep" />
55-
</v-stepper-content>
46+
{{ t('remoteAccess') }}
47+
</VStepperItem>
48+
</VStepperHeader>
49+
50+
<VStepperWindow>
51+
<VStepperWindowItem
52+
key="1-content"
53+
value="1">
54+
<WizardLanguage
55+
class="pt-4"
56+
@step-complete="nextStep" />
57+
</VStepperWindowItem>
5658

57-
<v-stepper-content step="2">
58-
<wizard-admin-account
59+
<VStepperWindowItem
60+
key="2-content"
61+
value="2">
62+
<WizardAdminAccount
5963
class="pt-4"
6064
@step-complete="nextStep"
6165
@previous-step="previousStep" />
62-
</v-stepper-content>
66+
</VStepperWindowItem>
6367

64-
<v-stepper-content step="3">
65-
<wizard-metadata
68+
<VStepperWindowItem
69+
key="3-content"
70+
value="3">
71+
<WizardMetadata
6672
class="pt-4"
6773
@step-complete="nextStep"
6874
@previous-step="previousStep" />
69-
</v-stepper-content>
75+
</VStepperWindowItem>
7076

71-
<v-stepper-content step="4">
72-
<wizard-remote-access
77+
<VStepperWindowItem
78+
key="4-content"
79+
value="4">
80+
<WizardRemoteAccess
7381
class="pt-4"
7482
@step-complete="nextStep"
7583
@previous-step="previousStep" />
76-
</v-stepper-content>
77-
</v-stepper-items>
78-
</v-stepper> -->
84+
</VStepperWindowItem>
85+
</VStepperWindow>
86+
</VStepper>
7987
</VCol>
8088
</VRow>
8189
</VContainer>
@@ -89,7 +97,7 @@ meta:
8997

9098
<script setup lang="ts">
9199
import { getStartupApi } from '@jellyfin/sdk/lib/utils/api/startup-api';
92-
import { computed, ref } from 'vue';
100+
import { ref } from 'vue';
93101
import { useI18n } from 'vue-i18n';
94102
import { useRouter } from 'vue-router';
95103
import { useSnackbar } from '@/composables/use-snackbar';
@@ -101,25 +109,6 @@ const router = useRouter();
101109
const wizardStage = ref(1);
102110
const maxWizardStage = ref(1);
103111
104-
const heading = computed(() => {
105-
switch (wizardStage.value) {
106-
case 1: {
107-
return t('languageLocale');
108-
}
109-
case 2: {
110-
return t('administratorAccount');
111-
}
112-
case 3: {
113-
return t('preferredMetadataLanguage');
114-
}
115-
case 4: {
116-
return t('remoteAccess');
117-
}
118-
}
119-
120-
return '';
121-
});
122-
123112
/**
124113
* Completes server setup
125114
*/

‎frontend/types/global/components.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,14 @@ declare module 'vue' {
204204
VSlider: typeof import('vuetify/components')['VSlider']
205205
VSnackbar: typeof import('vuetify/components')['VSnackbar']
206206
VSpacer: typeof import('vuetify/components')['VSpacer']
207+
VStepper: typeof import('vuetify/components')['VStepper']
208+
VStepperContent: typeof import('vuetify/components')['VStepperContent']
209+
VStepperHeader: typeof import('vuetify/components')['VStepperHeader']
210+
VStepperItem: typeof import('vuetify/components')['VStepperItem']
211+
VStepperItems: typeof import('vuetify/components')['VStepperItems']
212+
VStepperStep: typeof import('vuetify/components')['VStepperStep']
213+
VStepperWindow: typeof import('vuetify/components')['VStepperWindow']
214+
VStepperWindowItem: typeof import('vuetify/components')['VStepperWindowItem']
207215
VSwitch: typeof import('vuetify/components')['VSwitch']
208216
VTab: typeof import('vuetify/components')['VTab']
209217
VTable: typeof import('vuetify/components')['VTable']

0 commit comments

Comments
 (0)