Upgrade npm dependencies

Author: Scriptim

package-lock.json

@@ -8,42 +8,35 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "@heroicons/vue": "^2.0.18",
-    "core-js": "^3.30.2",
+    "@heroicons/vue": "^2.1.5",
+    "core-js": "^3.38.1",
     "d3-time-format": "^4.1.0",
-    "pinia": "^2.1.3",
-    "pinia-plugin-persistedstate": "^3.1.0",
-    "vue": "^3.3.4",
+    "pinia": "^2.2.2",
+    "pinia-plugin-persistedstate": "^4.0.2",
+    "vue": "^3.5.10",
     "vue3-popper": "^1.5.0",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@heroicons/vue": "^2.1.5",
     "@types/d3-time-format": "^4.0.3",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-typescript": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
-    "@vue/eslint-config-airbnb": "^7.0.1",
-    "@vue/eslint-config-typescript": "^11.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.7.0",
+    "@typescript-eslint/parser": "^8.7.0",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-typescript": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-airbnb": "^8.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/test-utils": "^2.4.6",
-    "core-js": "^3.38.1",
-    "d3-time-format": "^4.1.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint": "^8.2.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-import": "^2.30.0",
     "eslint-plugin-vue": "^9.28.0",
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
-    "fibers": "^5.0.3",
-    "pinia": "^2.2.2",
-    "pinia-plugin-persistedstate": "^3.2.3",
-    "sass": "^1.79.4",
-    "sass-loader": "^13.3.3",
-    "typescript": "~5.0.4",
-    "vue3-popper": "^1.5.0",
-    "vuedraggable": "^4.1.0"
+    "sass-embedded": "^1.79.4",
+    "sass-loader": "^15.0.0",
+    "style-loader": "^4.0.0",
+    "typescript": "<5.6.0"
   }
 }

package.json

@@ -195,6 +195,4 @@ header
     svg
       width: 60px
       height: 60px
-
-
 </style>

src/components/SiteHeader.vue

@@ -7,17 +7,17 @@
       v-for="element in elements"
       :key="element.id"
       :style="{
-        backgroundColor: (element.data.attributes.reverse
+        backgroundColor: `${element.data.attributes.reverse
           ? element.data.foregroundColor?.hex ?? (light ? '#212121' : '#fafafa')
-          : element.data.backgroundColor?.hex ?? (light ? '#fafafa' : '#212121')) + ' !important',
+          : element.data.backgroundColor?.hex ?? (light ? '#fafafa' : '#212121')} !important`,
       }"
     >
       <span
         v-if="element.data.type.preview(element.data.parameters) !== '\n'"
         :style="{
-          color: (element.data.attributes.reverse
+          color: `${element.data.attributes.reverse
             ? element.data.backgroundColor?.hex ?? (light ? '#fafafa' : '#212121')
-            : element.data.foregroundColor?.hex ?? (light ? '#212121' : '#fafafa')) + ' !important',
+            : element.data.foregroundColor?.hex ?? (light ? '#212121' : '#fafafa')} !important`,
         }"
         :class="{
           'preview-bold': element.data.attributes.bold,

src/components/output/PromptPreview.vue

@@ -5,14 +5,14 @@
     <div class="properties_parameter" v-if="element.type.parameters.length > 0">
       <h3>Parameters</h3>
       <br />
-      <label v-for="parameter in element.type.parameters" :key="parameter.id" :for="'parameter_' + parameter.id">
+      <label v-for="parameter in element.type.parameters" :key="parameter.id" :for="`parameter_${parameter.id}`">
         <template v-if="'parameters' in parameter">
-          <fieldset :id="'parameter_' + parameter.id">
+          <fieldset :id="`parameter_${parameter.id}`">
             <legend>{{ parameter.label }}</legend>
-            <label v-if="parameter.unselectLabel !== undefined" :for="'parameter_none_' + parameter.id">
+            <label v-if="parameter.unselectLabel !== undefined" :for="`parameter_none_${parameter.id}`">
               <input
               type="radio"
-              :id="'parameter_none_' + parameter.id"
+              :id="`parameter_none_${parameter.id}`"
               :name="parameter.id"
               value=""
               v-model="element.parameters[parameter.id]"
@@ -22,11 +22,11 @@
             <label
               v-for="subparameter in parameter.parameters"
               :key="subparameter.id"
-              :for="'parameter_' + subparameter.id"
+              :for="`parameter_${subparameter.id}`"
             >
               <input
                 type="radio"
-                :id="'parameter_' + subparameter.id"
+                :id="`parameter_${subparameter.id}`"
                 :name="parameter.id"
                 :value="subparameter.id"
                 v-model="element.parameters[parameter.id]"
@@ -35,7 +35,7 @@
               <input
                 type="text"
                 autocomplete="off"
-                :id="'parameter_value_' + subparameter.id"
+                :id="`parameter_value_${subparameter.id}`"
                 v-model="element.parameters[subparameter.id]"
                 :disabled="element.parameters[parameter.id] !== subparameter.id"
               />
@@ -47,7 +47,7 @@
           <input
             type="text"
             autocomplete="off"
-            :id="'parameter_' + parameter.id"
+            :id="`parameter_${parameter.id}`"
             v-model="element.parameters[parameter.id]"
           />
         </template>

src/components/properties/ElementProperties.vue

@@ -13,7 +13,7 @@ export default () =>
         serialize: (state) => state.enabled.toString(),
         deserialize: (state) => ({ enabled: state === 'true' }),
       },
-      paths: ['enabled'],
+      pick: ['enabled'],
     },
     state: () => ({
       /**

src/lib/darkMode.ts

@@ -20,7 +20,7 @@ const prompt = defineStore({
         JSON.parse(state, (key, value) => (key === 'type' ? getPromptElementTypeByNameUnsafe(value) : value)),
     },
     // we don't want to persist the selected element because it is only used for the UI
-    paths: ['elementsIdCounter', 'elements'],
+    pick: ['elementsIdCounter', 'elements'],
   },
   state: () => ({
     /**

src/lib/prompt.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const { defineConfig } = require('@vue/cli-service');
 
 module.exports = defineConfig({