Vue 3 migration

.eslintrc.js → .eslintrc.cjs

@@ -14,7 +14,7 @@ module.exports = {
     Use the recommended rule preset for `eslint-plugin-vue`.
     https://eslint.vuejs.org/rules/
     */
-    'plugin:vue/recommended',
+    'plugin:vue/vue3-recommended',
     /*
     Use as the last extension in order to override conflicting ESLint rules.
     https://github.com/prettier/eslint-plugin-prettier
@@ -44,6 +44,16 @@ module.exports = {
     'no-use-before-define': 'off',
     // TODO: Re-enable and lint this rule separately.
     'vue/multi-word-component-names': 'off',
+    'vue/component-name-in-template-casing': [
+      'error',
+      'PascalCase',
+      {
+        registeredComponentsOnly: true,
+        ignores: [],
+      },
+    ],
+    'vue/v-on-event-hyphenation': ['warn', 'always', { ignore: ['onClick'] }],
+    'vue/require-explicit-emits': 'off',
     'func-names': 'off',
     'no-restricted-syntax': 'off',
     'import/extensions': [0, 'never'],

.stylelintrc.js → .stylelintrc.cjs

@@ -42,7 +42,6 @@ module.exports = {
   rules: {
     'color-hex-length': 'long',
     'color-function-notation': 'legacy',
-    'indentation': 2,
     'at-rule-no-unknown': null,
     'scss/at-rule-no-unknown': true,
     'no-descending-specificity': null,

CHANGELOG.md

@@ -2,7 +2,27 @@
 
 All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [UNRELEASED]
+## [5.0.0] 2025-01-24
+
+This release introduces a significant update to the project, upgrading to Vue 3
+and transitioning to Pinia for state management, along with updated versions of
+Vue Router and VueFire. Several components have been rewritten or refactored,
+deprecated packages have been replaced, and better integration of the Punkt
+Design System has been implemented. Some bugs have been ironed out while new
+issues may have been introduced due to the scope of changes.
+
+### Changed
+
+- Migration to Vue 3, leveraging the Composition API.
+- Integration of Pinia as the new state management library.
+- Updated versions of other core libraries: Vue Router and VueFire.
+- Improved integration and utilization of the Punkt Design System.
+
+### Security
+
+- Deprecated and outdated packages have been replaced by newer alternatives.
+- Updated dependencies to address potential security vulnerabilities and
+  ensure compliance with newer standards.
 
 ## [4.2.2] 2024-11-07
 

firestore.indexes.json

@@ -46,6 +46,20 @@
         }
       ]
     },
+    {
+      "collectionGroup": "departments",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "archived",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "name",
+          "order": "ASCENDING"
+        }
+      ]
+    },
     {
       "collectionGroup": "departments",
       "queryScope": "COLLECTION",
@@ -320,6 +334,20 @@
         }
       ]
     },
+    {
+      "collectionGroup": "products",
+      "queryScope": "COLLECTION",
+      "fields": [
+        {
+          "fieldPath": "archived",
+          "order": "ASCENDING"
+        },
+        {
+          "fieldPath": "name",
+          "order": "ASCENDING"
+        }
+      ]
+    },
     {
       "collectionGroup": "products",
       "queryScope": "COLLECTION",

index.html

@@ -33,104 +33,24 @@
     />
 
     <link rel="icon" href="/favicon.ico" />
-    <title>OKR | Oslo kommune</title>
+    <title>OKR</title>
 
     <style>
       .spinner__wrapper {
         position: fixed;
-        top: 0;
-        left: 0;
+        top: calc(50% - 1.75rem);
+        left: calc(50% - 1.75rem);
         z-index: 9999;
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 100vw;
-        height: 100vh;
+        width: 3.5rem;
+        height: 3.5rem;
+        color: #ffffff;
       }
-      .lds-default {
-        position: relative;
-        display: inline-block;
-        width: 80px;
-        height: 80px;
-      }
-      .lds-default div {
-        position: absolute;
-        width: 6px;
-        height: 6px;
-        background: #2a2859; /* color-blue-dark */
-        border-radius: 50%;
-        animation: lds-default 1.2s linear infinite;
-      }
-      .lds-default div:nth-child(1) {
-        top: 37px;
-        left: 66px;
-        animation-delay: 0s;
-      }
-      .lds-default div:nth-child(2) {
-        top: 22px;
-        left: 62px;
-        animation-delay: -0.1s;
-      }
-      .lds-default div:nth-child(3) {
-        top: 11px;
-        left: 52px;
-        animation-delay: -0.2s;
-      }
-      .lds-default div:nth-child(4) {
-        top: 7px;
-        left: 37px;
-        animation-delay: -0.3s;
-      }
-      .lds-default div:nth-child(5) {
-        top: 11px;
-        left: 22px;
-        animation-delay: -0.4s;
-      }
-      .lds-default div:nth-child(6) {
-        top: 22px;
-        left: 11px;
-        animation-delay: -0.5s;
-      }
-      .lds-default div:nth-child(7) {
-        top: 37px;
-        left: 7px;
-        animation-delay: -0.6s;
-      }
-      .lds-default div:nth-child(8) {
-        top: 52px;
-        left: 11px;
-        animation-delay: -0.7s;
-      }
-      .lds-default div:nth-child(9) {
-        top: 62px;
-        left: 22px;
-        animation-delay: -0.8s;
-      }
-      .lds-default div:nth-child(10) {
-        top: 66px;
-        left: 37px;
-        animation-delay: -0.9s;
-      }
-      .lds-default div:nth-child(11) {
-        top: 62px;
-        left: 52px;
-        animation-delay: -1s;
-      }
-      .lds-default div:nth-child(12) {
-        top: 52px;
-        left: 62px;
-        animation-delay: -1.1s;
-      }
-      @keyframes lds-default {
-        0%,
-        20%,
-        80%,
-        100% {
-          transform: scale(1);
-        }
-        50% {
-          transform: scale(1.5);
-        }
+      .spinner__wrapper > img {
+        width: 100%;
+        height: 100%;
       }
     </style>
   </head>
@@ -143,20 +63,7 @@
       </strong>
     </noscript>
     <div id="spinner" class="spinner__wrapper">
-      <div class="lds-default">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
+      <img src="/loader.svg" alt="Loading content" />
     </div>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>