Reimplemented snackbar and scrollbar customization.

Swap logo and favicon to new vuetify logo.

.eslintrc.yml

@@ -1,5 +1,6 @@
 root: true
 env:
+  node: true
   browser: true
   es2021: true
 extends:
@@ -12,12 +13,10 @@ extends:
   - plugin:prettier-vue/recommended
   - prettier
   - plugin:yaml/recommended
-  # - plugin:vuetify/base
   - eslint-config-prettier
 plugins:
   - vue
   - prettier
-  # - vuetify
   - yaml
   - eslint-plugin-tsdoc
   - '@typescript-eslint'

package.json

@@ -8,7 +8,7 @@
     "clean": "rimraf ./node_modules/.vite",
     "build": "vite build",
     "build:clean": "rimraf dist",
-    "lint": "eslint . --fix --cache --cache-location ./node_modules/.vite/vite-plugin-eslint && prettier . --write",
+    "lint": "eslint . --fix --cache --cache-location ./node_modules/.vite/vite-plugin-eslint && prettier . -w -u",
     "lint:style": "stylelint \"./**/*.{css,sass,scss,htm,html,vue}\" --fix --cache-location ./node_modules/.vite/vite-plugin-stylelint",
     "lint:markup": "vue-tsc --noEmit",
     "preview": "vite preview",
@@ -17,12 +17,12 @@
   "dependencies": {
     "@mdi/font": "6.5.95",
     "pinia": "^2.0.11",
-    "pinia-plugin-persistedstate": "^1.2.3",
+    "pinia-plugin-persistedstate": "^1.4.0",
     "vue": "^3.2.31",
     "vue-class-component": "^8.0.0-rc.1",
     "vue-property-decorator": "^10.0.0-rc.3",
     "vue-router": "^4.0.13",
-    "vuetify": "^3.0.0-alpha.13",
+    "vuetify": "npm:@vuetify/nightly@next",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
@@ -35,7 +35,7 @@
     "@vuetify/vite-plugin": "^1.0.0-alpha.10",
     "eslint": "^8.10.0",
     "eslint-config-google": "^0.14.0",
-    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-import": "^2.25.4",
@@ -44,10 +44,9 @@
     "eslint-plugin-tsdoc": "^0.2.14",
     "eslint-plugin-vue": "^8.5.0",
     "eslint-plugin-vuejs-accessibility": "^1.1.1",
-    "eslint-plugin-vuetify": "^1.1.0",
     "eslint-plugin-yaml": "^0.5.0",
     "husky": "^7.0.4",
-    "lint-staged": "^12.3.4",
+    "lint-staged": "^12.3.5",
     "postcss-html": "^1.3.0",
     "prettier": "^2.5.1",
     "prettier-plugin-jsdoc": "^0.3.30",
@@ -74,8 +73,9 @@
     }
   },
   "lint-staged": {
-    "*.{vue,htm,html,js,ts,json,yml,yaml}": "eslint --fix --cache --cache-location ./node_modules/.vite/vite-plugin-eslint",
-    "*.{vue,htm,html,css,sass,scss}": "stylelint --fix --cache --cache-location ./node_modules/.vite/vite-plugin-stylelint",
+    "*.vue": "vue-tsc --noEmit",
+    "*.{js,ts,json,yml,yaml,vue,htm,html}": "eslint --fix --cache --cache-location ./node_modules/.vite/vite-plugin-eslint",
+    "*.{css,sass,scss,vue,htm,html}": "stylelint --fix --cache --cache-location ./node_modules/.vite/vite-plugin-stylelint",
     "*": "prettier -w -u"
   }
 }

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import GlobalStore from '@/store/GlobalStore';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import type { Ref } from 'vue';
 
 import AppBarMenuComponent from '@/components/AppBarMenuComponent.vue';
@@ -18,16 +18,24 @@ const drawer: Ref<boolean> = ref(false);
 const loading: Ref<boolean> = computed(() => globalStore.loading);
 /** appbar progressbar value */
 // const progress: Ref<number | null> = computed(() => globalStore.progress);
-/**  snackbar visibility * /
-const snackbar: Ref<boolean> = computed(() => globalStore.snackbar);
-/** snackbar text * /
-const snackbarText: Ref<string | null> = computed(
-  () => globalStore.snackbarText
-);
-*/
+/**  snackbar visibility */
+const snackbar: Ref<boolean> = ref(false);
+/** snackbar text */
+const snackbarText: Ref<string | null> = computed(() => globalStore.message);
+
 const theme: Ref<string> = computed(() =>
   configStore.themeDark ? 'dark' : 'light'
 );
+
+// When snackbar text has been set, show snackbar.
+watch(
+  () => snackbarText,
+  value => {
+    if (value) {
+      snackbar.value = true;
+    }
+  }
+);
 </script>
 
 <template>
@@ -38,9 +46,9 @@ const theme: Ref<string> = computed(() =>
 
     <v-app-bar app>
       <v-app-bar-nav-icon @click="drawer = !drawer" />
-      <v-app-bar-title>Application</v-app-bar-title>
+      <v-app-bar-title tag="h1">Application</v-app-bar-title>
       <v-spacer />
-      <app-bar-menu-component class="configbutton" />
+      <app-bar-menu-component />
       <!--v-progress-linear
         :active="loading"
         :indeterminate="progress === null"
@@ -61,7 +69,7 @@ const theme: Ref<string> = computed(() =>
       <v-progress-circular indeterminate size="64" />
     </v-overlay>
 
-    <!--v-snackbar
+    <v-snackbar
       v-model="snackbar"
       app
       timeout="5000"
@@ -73,9 +81,25 @@ const theme: Ref<string> = computed(() =>
           <v-icon>mdi-close</v-icon>
         </v-btn>
       </template>
-    </v-snackbar-->
+    </v-snackbar>
     <v-footer app elevation="1">
       <span class="mr-5">2022 &copy;</span>
     </v-footer>
   </v-app>
 </template>
+
+<style lang="scss">
+@import 'node_modules/vuetify/lib/styles/settings';
+
+::-webkit-scrollbar {
+  height: 1rem;
+  width: 1rem;
+  background-color: rgba(map-get($grey, 'lighten-2'), 1);
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  box-shadow: inset 0 0 0.25rem rgba(map-get($grey, 'base'), 0.1);
+  background-color: map-get($grey, 'darken-1');
+}
+</style>

src/Meta.ts

@@ -3,6 +3,6 @@ import type MetaInterface from '@/interfaces/MetaInterface';
 // This file is auto-generated by the build system.
 const meta: MetaInterface = {
   version: '0.1.0',
-  date: '2022-03-02T00:32:33.877Z',
+  date: '2022-03-06T02:43:22.279Z',
 };
 export default meta;

src/env.d.ts

@@ -15,6 +15,7 @@ interface ImportMetaEnv {
   readonly VITE_APP_WEBSTORAGE_NAMESPACE: string;
 }
 
+// eslint-disable-next-line no-unused-vars
 interface ImportMeta {
   readonly env: ImportMetaEnv;
 }

tsconfig.json

@@ -28,7 +28,7 @@
     "sourceMap": true,
     "strict": true,
     "target": "esnext",
-    "types": ["vite/client", "node", "vue"],
+    "types": ["vite/client", "node", "vue", "vuetify"],
     "useDefineForClassFields": false
   },
   "include": [

vite.config.ts

@@ -53,6 +53,18 @@ const config: UserConfig = {
     // https://github.com/vbenjs/vite-plugin-compression
     // viteCompression(),
   ],
+  css: {
+    // https://vitejs.dev/config/#css-preprocessoroptions
+    preprocessorOptions: {
+      sass: {
+        additionalData: [
+          // vuetify variable overrides
+          '@import "@/styles/variables.scss"',
+          '',
+        ].join('\n'),
+      },
+    },
+  },
   // Build Options
   // https://vitejs.dev/config/#build-options
   build: {