fix: improve help pages

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 0.11.1
+
+- Improved help pages
+
+## 0.11.0
+
+- Added help pages
+
 ## 0.10.1
 
 - Fixed the order of cells in the CHUNITHM keyboard

src/components/Onboarding.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ComputedRef, computed, onMounted } from 'vue';
+import { ComputedRef, computed, onMounted, ref } from 'vue';
 import Button from 'primevue/button';
 import Carousel from 'primevue/carousel';
 import Dialog from 'primevue/dialog';
@@ -11,7 +11,7 @@ import { VueMarkdownIt } from '@f3ve/vue-markdown-it';
 const prf = usePrfStore();
 const client = useClientStore();
 
-defineProps({
+const props = defineProps({
     visible: Boolean,
     firstTime: Boolean,
     onFinish: Function,
@@ -101,6 +101,14 @@ onMounted(async () => {
         image: '/help-finale-chunithm.png',
     };
 });
+
+const counter = ref(0);
+
+const exitLabel = computed(() => {
+    return props.firstTime === true && counter.value < data.value.length - 1
+        ? 'Skip'
+        : 'Close';
+});
 </script>
 
 <template>
@@ -115,7 +123,13 @@ onMounted(async () => {
         "
         :style="{ width: '760px', scale: client.scaleValue }"
     >
-        <Carousel :value="data" :num-visible="1" :num-scroll="1">
+        <Carousel
+            :value="data"
+            :num-visible="1"
+            :num-scroll="1"
+            :page="counter"
+            v-on:update:page="(p) => (counter = p)"
+        >
             <template #item="slotProps">
                 <div class="md-container markdown">
                     <vue-markdown-it
@@ -135,9 +149,15 @@ onMounted(async () => {
             </template>
         </Carousel>
         <div style="width: 100%; text-align: center">
+            <Button
+                v-if="counter < data.length - 1"
+                class="m-auto mr-4"
+                label="Next"
+                @click="() => (counter += 1)"
+            />
             <Button
                 class="m-auto"
-                label="OK"
+                :label="exitLabel"
                 @click="() => onFinish && onFinish()"
             />
         </div>