:recycle: moving around import for individual wave-ui components | added more samples

frontend/src/App.vue

@@ -1,15 +1,31 @@
 <template lang="pug">
 w-app
-    w-badge
-        template(#badge) 3
-            w-button(color="primary")
-                w-icon(class="mr1") mdi mdi-email Emails
+    w-drawer(v-model="openDrawer")
+    w-flex.my12(:gap="3" align-center wrap)
+        w-button.ma1(@click="$waveui.notify('Information.')" bg-color="info") Notify info
+        w-button.ma1(@click="$waveui.notify('Success!', 'success')" bg-color="success") Notify success
+        w-button.ma1(@click="$waveui.notify('Warning!', 'warning')" bg-color="warning") Notify warning
+        w-button.ma1(@click="$waveui.notify('Error :(', 'error', 0)" bg-color="error") Permanent error
+    w-flex.my12(align-center wrap)
+        w-spinner(bounce)
+        w-input Label
+        w-checkbox Single option
+    w-flex.my12
+        w-button(@click="openDrawer = true" outline="")
+            | Open drawer
+    w-flex.my12(grow column)
+        w-slider(:model-value="40" thumb-label step-label :step="20" color="primary-light3").mt12
+        .mt4 v-model:
+            code.ml1 {{ sliderVal }}
     w-flex.my12(:gap="3" align-center wrap)
         | Show menu on:
         w-menu
             template(#activator="{ on }")
                 w-button(v-on="on") Show menu
             | Menu content
+        w-badge.mr10(bg-color="error")
+            template(#badge) 3
+            w-icon(color="grey-light1" size="2.5em") mdi mdi-email
     SideBar(
         v-if="showSidebar"
         :pid="getPid"
@@ -37,9 +53,11 @@ export default {
     components: { SideBar },
     data: () => ({
         showSidebar: false,
+        sliderVal: 1,
+        openDrawer: false,
     }),
     computed: {
-        getPid: () => currentProfile.id.value,
+        getPid: () => (currentProfile.id.value ? currentProfile.id.value : 999),
     },
     async created() {
         /** Get questions so we can compare against profile responses */

frontend/src/main.js

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import router from './router'
+import { router } from './router'
 import { checkLoginStatus } from './router/guards'
 
 import WaveUI from '../node_modules/wave-ui/src/wave-ui/core'

frontend/src/router/index.js

@@ -49,4 +49,4 @@ const router = createRouter({
     routes,
 })
 
-export default router
+export { router }

frontend/src/wave.js

@@ -7,11 +7,18 @@ import {
     WBadge,
     WButton,
     WCard,
+    WCheckbox,
+    WDrawer,
     WFlex,
     WIcon,
     WImage,
+    WInput,
     WMenu,
+    WProgress,
     WOverlay,
+    WSlider,
+    WSpinner,
+    WSteps,
 } from '../node_modules/wave-ui/src/wave-ui/components'
 
 export default {
@@ -20,9 +27,16 @@ export default {
     WBadge,
     WButton,
     WCard,
+    WCheckbox,
+    WDrawer,
     WFlex,
     WIcon,
     WImage,
+    WInput,
     WMenu,
+    WProgress,
     WOverlay,
+    WSlider,
+    WSpinner,
+    WSteps,
 }