Code cleanup

src/components/OnboardingDialog.vue

@@ -1,23 +1,71 @@
 <template>
   <div>
     <VOnboardingWrapper ref="wrapper" :steps="steps">
-      <template #default="{ previous, next, step, exit, isFirst, isLast, index }">
+      <template
+        #default="{ previous, next, step, exit, isFirst, isLast, index }"
+      >
         <VOnboardingStep>
           <div class="bg-white shadow sm:rounded-lg">
             <div class="px-4 py-5 sm:p-6">
               <div class="sm:flex sm:items-center sm:justify-between">
                 <div v-if="step.content">
-                  <h3 v-if="step.content.title" class="text-lg font-medium leading-6 text-gray-900">{{ step.content.title }}</h3>
+                  <h3 v-if="step.content.title" class="flex justify-between">
-                  <div v-if="step.content.description" class="mt-2 max-w-xl text-sm text-gray-500">
+                    <span
+                      class="text-lg font-medium leading-normal text-gray-900"
+                    >
+                      {{ step.content.title }}
+                    </span>
+                    <button
+                      @click="exit"
+                      class="inline-flex align-center justify-center w-6 h-6 shrink-0 rounded-full"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-4 w-4"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M6 18L18 6M6 6l12 12"
+                        ></path>
+                      </svg>
+                    </button>
+                  </h3>
+                  <div
+                    v-if="step.content.description"
+                    class="mt-2 max-w-xl text-sm text-gray-500"
+                  >
                     <p>{{ step.content.description }}</p>
                   </div>
                 </div>
-                <div class="mt-5 space-x-4 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center relative">
+                <div
-                  <span class="absolute right-0 bottom-full mb-2 mr-2 text-gray-600 font-medium text-xs">{{ `${index + 1}/${steps.length}` }}</span>
+                  class="mt-5 space-x-4 sm:mt-0 sm:ml-6 sm:flex sm:flex-shrink-0 sm:items-center relative"
+                >
+                  <span
+                    class="absolute right-0 bottom-full mb-2 mr-2 text-gray-600 font-medium text-xs"
+                  >
+                    {{ `${index + 1}/${steps.length}` }}
+                  </span>
                   <template v-if="!isFirst">
-                    <button @click="previous" type="button" class="inline-flex items-center justify-center rounded-md border border-transparent bg-yellow-100 px-4 py-2 font-medium text-yellow-700 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:text-sm">Previous</button>
+                    <button
+                      @click="previous"
+                      type="button"
+                      class="inline-flex items-center justify-center rounded-md border border-transparent bg-yellow-100 px-4 py-2 font-medium text-yellow-700 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 sm:text-sm"
+                    >
+                      Previous
+                    </button>
                   </template>
-                  <button @click="next" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm">{{ isLast ? 'Finish' : 'Next' }}</button>
+                  <button
+                    @click="next"
+                    type="button"
+                    class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:text-sm"
+                  >
+                    {{ isLast ? "Finish" : "Next" }}
+                  </button>
                 </div>
               </div>
             </div>
@@ -25,58 +73,62 @@
         </VOnboardingStep>
       </template>
     </VOnboardingWrapper>
-    <span id="foo">Howdy, My Friend!</span>
-    <button id="bar">Click me for no reason</button>
-    <button @click="() => goToStep(1)">Click to go second step</button>
-    <div>
-      <button @click="start">Start Onboarding</button>
-      <button @click="finish">Finish Onboarding</button>
-    </div>
   </div>
 </template>
 
-<script>
+<script lang="ts">
-import { defineComponent, ref } from 'vue'
+import { Vue, Component } from "vue-facing-decorator";
-import { VOnboardingWrapper, VOnboardingStep, useVOnboarding } from 'v-onboarding'
+import { ref } from "vue";
-export default defineComponent ({
+import {
+  VOnboardingWrapper,
+  VOnboardingStep,
+  useVOnboarding,
+} from "v-onboarding";
+
+@Component({
   components: {
     VOnboardingWrapper,
-    VOnboardingStep
+    VOnboardingStep,
   },
+})
+export default class OnboardingDialog extends Vue {
   setup() {
-    const wrapper = ref(null)
+    const wrapper = ref(null);
-    const { start, goToStep, finish } = useVOnboarding(wrapper)
+    const { start, goToStep, finish } = useVOnboarding(wrapper);
     const steps = [
       {
-        attachTo: { element: '#foo' },
+        attachTo: { element: "#headingRecordSomething" },
-        content: { title: "Welcome!" }
+        content: { title: "Welcome!" },
       },
       {
-        attachTo: { element: '#bar' },
+        attachTo: { element: "#headingLatestActivity" },
         content: {
           title: "Testing v-onboarding..",
-          description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation."
+          description:
-        }
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.",
-      }
+        },
-    ]
+      },
+    ];
 
     return {
       wrapper,
       steps,
       start,
       finish,
-      goToStep
+      goToStep,
-    }
+    };
   }
-})
+}
 </script>
 <style>
 [data-v-onboarding-wrapper] [data-popper-arrow]::before {
-  content: '';
+  content: "";
   background: var(--v-onboarding-step-arrow-background, white);
   top: 0;
   left: 0;
-  transition: transform 0.2s ease-out,visibility 0.2s ease-out;
+  transition:
+    transform 0.2s ease-out,
+    visibility 0.2s ease-out;
   visibility: visible;
   transform: translateX(0px) rotate(45deg);
   transform-origin: center;
@@ -86,19 +138,27 @@ export default defineComponent ({
   z-index: -1;
 }
 
-[data-v-onboarding-wrapper] [data-popper-placement^='top'] > [data-popper-arrow] {
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="top"]
+  > [data-popper-arrow] {
   bottom: 5px;
 }
 
-[data-v-onboarding-wrapper] [data-popper-placement^='right'] > [data-popper-arrow] {
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="right"]
+  > [data-popper-arrow] {
   left: -4px;
 }
 
-[data-v-onboarding-wrapper] [data-popper-placement^='bottom'] > [data-popper-arrow] {
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="bottom"]
+  > [data-popper-arrow] {
   top: -4px;
 }
 
-[data-v-onboarding-wrapper] [data-popper-placement^='left'] > [data-popper-arrow] {
+[data-v-onboarding-wrapper]
+  [data-popper-placement^="left"]
+  > [data-popper-arrow] {
   right: -4px;
 }
 </style>