views: add previous/next buttons

.eslintrc.cjs

@@ -2,10 +2,10 @@
 require("@rushstack/eslint-patch/modern-module-resolution");
 
 module.exports = {
-  "root": true,
-  "extends": [
+  root: true,
+  extends: [
     "plugin:vue/vue3-essential",
     "eslint:recommended",
-    "@vue/eslint-config-prettier"
-  ]
-}
+    "@vue/eslint-config-prettier",
+  ],
+};

src/App.vue

@@ -63,10 +63,6 @@ export default {
     <main>
       <div style="height: 100%; overflow-y: auto; margin-right: 3rem">
         <RouterView />
-        <!-- <div style="display: flex; float: right; margin-right: 1em">
-          <DKArrowButton :left="true">Previous</DKArrowButton>
-          <DKArrowButton>Next</DKArrowButton>
-        </div> -->
       </div>
     </main>
   </div>
@@ -79,6 +75,11 @@ export default {
       max="100"
       class="progress-bar"
     ></progress>
+    <span class="info-box" v-if="page_number > 1 && page_number < 4"
+      ><i
+        >Step 5/7: Generating initramfs (initial RAM filesystem)... (91%)</i
+      ></span
+    >
     <label for="progressbar" class="eta-box"
       >25 - 30 minutes remaining...</label
     >
@@ -125,6 +126,12 @@ export default {
   background: var(--dk-accent);
 }
 
+.info-box {
+  margin-top: 0.5em;
+  float: left;
+  margin-left: 0.3rem;
+}
+
 .eta-box {
   float: right;
   margin-top: 0.5em;

src/components/DKBottomSteps.vue

@@ -0,0 +1,10 @@
+<script setup>
+import DKStepButtons from "./DKStepButtons.vue";
+import DKBottomActions from "@/components/DKBottomActions.vue";
+</script>
+
+<template>
+  <DKBottomActions>
+    <DKStepButtons />
+  </DKBottomActions>
+</template>

src/components/DKFilterSelect.vue

@@ -73,7 +73,7 @@ div.select::after {
   color: #1f1f1f;
   display: block;
   text-align: left;
-  line-height: 1.5;
+  line-height: 1;
 }
 
 .dropdown-content a:hover {

src/components/DKStepButtons.vue

@@ -4,7 +4,12 @@ import DKBottomRightButtons from "./DKBottomRightButtons.vue";
 
 <template>
   <DKBottomRightButtons>
-    <button class="button">Previous</button>
-    <button class="button">Next</button>
+    <button class="button" @click="$router.back()">Previous</button>
+    <button
+      class="button"
+      @click="$router.push($router.currentRoute.value.meta.next)"
+    >
+      Next
+    </button>
   </DKBottomRightButtons>
 </template>

src/router/index.js

@@ -22,19 +22,19 @@ const router = createRouter({
       path: "/",
       name: "home",
       component: WelcomeView,
-      meta: { steps: 0 },
+      meta: { steps: 0, next: "/variants" },
     },
     {
       path: "/rescue",
       name: "rescue",
       component: RescueKitView,
-      meta: { steps: 0 },
+      meta: { steps: 0, next: "/partitions" },
     },
     {
       path: "/users",
       name: "users",
       component: UserView,
-      meta: { steps: 1 },
+      meta: { steps: 1, next: "/hostname" },
     },
     {
       path: "/abort",
@@ -56,49 +56,49 @@ const router = createRouter({
       path: "/swapfile",
       name: "swapfile",
       component: SwapFileView,
-      meta: { steps: 1 },
+      meta: { steps: 1, next: "/confirm" },
     },
     {
       path: "/mirrors",
       name: "mirrors",
       component: MirrorView,
-      meta: { steps: 0 },
+      meta: { steps: 0, next: "/rescue" },
     },
     {
       path: "/mirrors-sel",
       name: "mirrors-sel",
       component: MirrorSelectView,
-      meta: { steps: 0 },
+      meta: { steps: 0, next: "/rescue" },
     },
     {
       path: "/locales",
       name: "locales",
       component: LocaleView,
-      meta: { steps: 1 },
+      meta: { steps: 1, next: "/swapfile" },
     },
     {
       path: "/confirm",
       name: "confirm",
       component: ConfirmView,
-      meta: { steps: 1 },
+      meta: { steps: 1, next: "/install" },
     },
     {
       path: "/hostname",
       name: "hostname",
       component: HostnameView,
-      meta: { steps: 1 },
+      meta: { steps: 1, next: "/locales" },
     },
     {
       path: "/partitions",
       name: "partitions",
       component: PartitionView,
-      meta: { steps: 0 },
+      meta: { steps: 0, next: "/users" },
     },
     {
       path: "/variants",
       name: "variants",
       component: VariantView,
-      meta: { steps: 0 },
+      meta: { steps: 0, next: "/mirrors" },
     },
     {
       path: "/install",

src/slides.js

@@ -25,7 +25,7 @@ const slides_data = [
   },
   {
     title: "You Ready",
-    body: "At AOSC, we pride ourselves with friendly and ready support for our users. Warranty and merchantability notwithstanding,we believe that our users should be respected of their time and energy spent on adapting to a new work environment.\nAt Telegram, Discord, IRC, or Matrix, our maintainers,contributors, and friends are ready to offer help. We wish you much joy at our community and great success with AOSC OS.\nEnjoy!",
+    body: "At AOSC, we pride ourselves with friendly and ready support for our users. Warranty and merchantability notwithstanding, we believe that our users should be respected of their time and energy spent on adapting to a new work environment.\nAt Telegram, Discord, IRC, or Matrix, our maintainers, contributors, and friends are ready to offer help. We wish you much joy at our community and great success with AOSC OS.\nEnjoy!",
   },
 ];
 

src/views/ConfirmView.vue

@@ -1,4 +1,5 @@
 <script>
+import DKBottomSteps from "../components/DKBottomSteps.vue";
 export default {
   props: {
     part: String,
@@ -11,6 +12,7 @@ export default {
     rtc_utc: Boolean,
     rescue_size: Number,
   },
+  components: { DKBottomSteps },
 };
 </script>
 
@@ -59,6 +61,7 @@ export default {
       </i>
     </p>
   </div>
+  <DKBottomSteps />
 </template>
 
 <style scoped>

src/views/HostnameView.vue

@@ -1,4 +1,6 @@
-<script setup></script>
+<script setup>
+import DKBottomSteps from "../components/DKBottomSteps.vue";
+</script>
 
 <template>
   <div>
@@ -14,6 +16,7 @@
     </form>
     <p class="error-msg"></p>
   </div>
+  <DKBottomSteps />
 </template>
 
 <style scoped>

src/views/LocaleView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import DKFilterSelect from "@/components/DKFilterSelect.vue";
+import DKBottomSteps from "../components/DKBottomSteps.vue";
 </script>
 
 <script>
@@ -53,6 +54,7 @@ export default {
       </p>
     </form>
   </div>
+  <DKBottomSteps />
 </template>
 
 <style scoped>

src/views/MirrorSelectView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import DKBottomActions from "@/components/DKBottomActions.vue";
+import DKStepButtons from "@/components/DKStepButtons.vue";
 </script>
 
 <template>
@@ -16,6 +17,7 @@ import DKBottomActions from "@/components/DKBottomActions.vue";
   </div>
   <DKBottomActions>
     <button class="button">Benchmark...</button>
+    <DKStepButtons />
   </DKBottomActions>
 </template>
 

src/views/MirrorView.vue

@@ -1,4 +1,6 @@
-<script></script>
+<script setup>
+import DKBottomSteps from "../components/DKBottomSteps.vue";
+</script>
 
 <template>
   <div>
@@ -13,6 +15,7 @@
       </button>
     </section>
   </div>
+  <DKBottomSteps />
 </template>
 
 <style scoped>

src/views/RescueKitView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import DKListSelect from "@/components/DKListSelect.vue";
+import DKBottomSteps from "../components/DKBottomSteps.vue";
 
 const options = [
   {
@@ -27,6 +28,7 @@ const options = [
       <DKListSelect :options="options" />
     </section>
   </div>
+  <DKBottomSteps />
 </template>
 
 <style scoped>

src/views/SwapFileView.vue

@@ -1,11 +1,13 @@
 <script>
+import DKBottomSteps from "../components/DKBottomSteps.vue";
 export default {
   props: {},
   computed: {
     max_size: function () {
       return this.rec_size * 2;
     },
   },
+  components: { DKBottomSteps },
   data: function () {
     return {
       type: 0,
@@ -98,6 +100,7 @@ export default {
       </p>
     </form>
   </div>
+  <DKBottomSteps />
 </template>
 
 <style scoped>

src/views/UserView.vue

@@ -1,4 +1,6 @@
-<script setup></script>
+<script setup>
+import DKBottomSteps from "../components/DKBottomSteps.vue";
+</script>
 
 <template>
   <div>
@@ -19,6 +21,7 @@
     </form>
     <p class="error-msg"></p>
   </div>
+  <DKBottomSteps />
 </template>
 
 <style scoped>

src/views/VariantView.vue

@@ -1,5 +1,6 @@
 <script setup>
 import DKListSelect from "@/components/DKListSelect.vue";
+import DKBottomSteps from "../components/DKBottomSteps.vue";
 
 const options = [
   {
@@ -25,4 +26,5 @@ const options = [
       <DKListSelect :options="options" />
     </section>
   </div>
+  <DKBottomSteps />
 </template>

src/views/WelcomeView.vue

@@ -1,4 +1,6 @@
-<script setup></script>
+<script setup>
+import DKBottomSteps from "../components/DKBottomSteps.vue";
+</script>
 
 <template>
   <div>
@@ -14,4 +16,5 @@
       more time on slower hardware.
     </p>
   </div>
+  <DKBottomSteps />
 </template>

vite.config.js

@@ -1,3 +1,4 @@
+/* eslint-env node */
 import { fileURLToPath, URL } from "url";
 
 import path from "path";
@@ -9,7 +10,6 @@ import vueI18n from "@intlify/vite-plugin-vue-i18n";
 export default defineConfig({
   plugins: [
     vue(),
-    // eslint-disable-next-line no-undef
     vueI18n({ include: path.resolve(__dirname, "./src/locales/**") }),
   ],
   resolve: {