Merge branch 'update-js' into 'main'

Update JS libraries

See merge request reportcreator/reportcreator!345

frontend/package.json

@@ -12,10 +12,10 @@
   },
   "dependencies": {
     "nuxt": "~3.8.1",
-    "vuetify": "~3.3.21",
-    "vuetify-nuxt-module": "^0.5.15",
+    "vuetify": "~3.4.0",
+    "vuetify-nuxt-module": "^0.6.7",
     "@mdi/font": "^7.3.67",
-    "pinia": "^2.1.6",
+    "pinia": "^2.1.7",
     "@pinia/nuxt": "^0.5.1",
     "@pinia-plugin-persistedstate/nuxt": "^1.2.0",
 

frontend/src/components/Design/AssetManager.vue

@@ -8,7 +8,7 @@
             <s-btn
               :disabled="props.disabled || uploadInProgress"
               :loading="uploadInProgress"
-              @click="$refs.fileInput.click()"
+              @click="($refs.fileInput as HTMLInputElement).click()"
               color="primary"
               block
               prepend-icon="mdi-upload"

frontend/src/components/Design/FindingOrderingDefinition.vue

@@ -76,6 +76,7 @@
 
 <script setup lang="ts">
 import Draggable from 'vuedraggable';
+import { SortOrder } from '~/utils/types';
 
 const props = defineProps<{
   modelValue: FindingOrderingDefinition[];

frontend/src/components/Design/LayoutComponentEditDialog.vue

@@ -35,8 +35,8 @@
 </template>
 
 <script setup lang="ts">
-import { MarkdownProps } from "@/composables/markdown";
-import { DesignerComponentBlock } from "@/components/Design/designer-components";
+import type { MarkdownProps } from "@/composables/markdown";
+import type { DesignerComponentBlock } from "@/components/Design/designer-components";
 
 const props = defineProps<MarkdownProps & {
   item: DesignerComponentBlock;

frontend/src/components/Design/LayoutComponentForm.vue

@@ -171,7 +171,7 @@
 
 <script setup lang="ts">
 import pick from "lodash/pick";
-import { MarkdownProps } from "~/composables/markdown";
+import type { MarkdownProps } from "~/composables/markdown";
 
 const props = defineProps<{
   modelValue: any;

frontend/src/components/EditToolbar.vue

@@ -96,6 +96,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import isEqual from 'lodash/isEqual';
 import type { VForm } from "vuetify/lib/components/index.mjs";
 import type { NavigationGuardNext, RouteLocationNormalized } from "vue-router";
+import type { LockInfo } from '@/utils/types';
 import { EditMode } from '@/utils/types';
 
 const props = withDefaults(defineProps<{

frontend/src/components/ErrorList.vue

@@ -70,15 +70,16 @@
 <script setup lang="ts">
 import sortBy from "lodash/sortBy";
 import groupBy from "lodash/groupBy";
+import type { MessageLevel as MessageLevelType } from '~/utils/types';
 
 const props = defineProps<{
   value: ErrorMessage[];
   group?: boolean;
   showNoMessageInfo?: boolean;
 }>();
 
-function levelToNumber(level: MessageLevel) {
-  const out = [MessageLevel.ERROR, MessageLevel.WARNING, MessageLevel.INFO, MessageLevel.DEBUG].indexOf(level);
+function levelToNumber(level: MessageLevelType) {
+  const out = [MessageLevel.ERROR, MessageLevel.WARNING, MessageLevel.INFO, MessageLevel.DEBUG].indexOf(level as any);
   if (out < 0) {
     return 9;
   }

frontend/src/components/S/DatePicker.vue

@@ -12,24 +12,22 @@
       v-model="datePickerVisible"
       :disabled="props.disabled"
       :close-on-content-click="false"
-      min-width="auto"
+      min-width="0"
       activator="parent"
     >
       <v-date-picker
-        :model-value="props.modelValue"
-        @update:model-value="updateDate($event)"
+        v-model="dateValue"
         v-model:input-mode="inputMode"
         :disabled="props.disabled"
-        :locale="props.locale"
         view-mode="month"
-        hide-actions
         show-adjacent-months
+        show-week
       />
     </v-menu>
   </s-text-field>
 </template>
 <script setup lang="ts">
-import { formatISO } from "date-fns";
+import { formatISO, parseISO } from "date-fns";
 
 const props = withDefaults(defineProps<{
       modelValue?: string|null;
@@ -47,11 +45,19 @@ const emits = defineEmits<{
 const datePickerVisible = ref(false);
 const inputMode = ref<'calendar' | 'keyboard'>('calendar');
 
-function updateDate(val: Date) {
-  if (inputMode.value === 'calendar') {
-    datePickerVisible.value = false;
-  }
-  const formatted = val ? formatISO(val, { representation: 'date' }) : null;
-  emits('update:modelValue', formatted);
-}
+const dateValue = computed({
+  get: () => {
+    if (!props.modelValue) {
+      return null;
+    }
+    return parseISO(props.modelValue);
+  },
+  set: (val) => {
+    if (inputMode.value === 'calendar') {
+      datePickerVisible.value = false;
+    }
+    const formatted = val ? formatISO(val, { representation: 'date' }) : null;
+    emits('update:modelValue', formatted);
+  },
+});
 </script>

frontend/src/components/S/LockInfo.vue

@@ -8,6 +8,8 @@
 </template>
 
 <script setup lang="ts">
+import type { LockInfo } from '@/utils/types';
+
 const props = defineProps<{
   value: LockInfo|null;
 }>();

frontend/src/composables/markdown.ts

@@ -1,4 +1,4 @@
-import { PropType } from "nuxt/dist/app/compat/capi";
+import type { PropType } from "vue";
 import {
   createEditorExtensionToggler,
   EditorState, EditorView, ViewUpdate,

frontend/src/pages/templates/index.vue

@@ -55,8 +55,6 @@
 </template>
 
 <script setup lang="ts">
-import { ReturnType } from "birpc";
-
 definePageMeta({
   title: 'Templates',
 });

frontend/src/stores/projecttype.ts

@@ -1,6 +1,7 @@
 import pick from 'lodash/pick';
 import { parseISO, formatISO9075 } from 'date-fns';
-import type { FieldDefinitionDict, ProjectType, ProjectTypeScope } from "~/utils/types";
+import { ProjectTypeScope } from '~/utils/types';
+import type { FieldDefinitionDict, ProjectType } from "~/utils/types";
 
 export const useProjectTypeStore = defineStore('projecttype', {
   state: () => ({
@@ -66,10 +67,17 @@ export function formatProjectTypeTitle(pt?: ProjectType) {
   if (!pt || !pt.id) {
     return '';
   }
-  return pt.name + ({
-    [SourceEnum.CUSTOMIZED]: ' (customized)',
-    [SourceEnum.SNAPSHOT]: ` (from ${formatISO9075(parseISO(pt.created))})`,
-    [SourceEnum.IMPORTED_DEPENDENCY]: ` (from ${formatISO9075(parseISO(pt.created))})`,
-  }[pt?.source as string] || '') +
-      (pt?.scope === ProjectTypeScope.PRIVATE ? ' (private design)' : '');
+
+  let out = pt.name;
+  if (pt?.source === SourceEnum.CUSTOMIZED) {
+    out += ' (customized)';
+  } else if (pt?.source === SourceEnum.SNAPSHOT) {
+    out += ` (from ${formatISO9075(parseISO(pt.created))})`;
+  } else if (pt?.source === SourceEnum.IMPORTED_DEPENDENCY) {
+    out += ` (from ${formatISO9075(parseISO(pt.created))})`;
+  }
+  if (pt?.scope === ProjectTypeScope.PRIVATE) {
+    out += ' (private design)';
+  }
+  return out;
 }

frontend/src/utils/cvss/cvss3.ts

@@ -1,4 +1,5 @@
-import { CvssDefinition, CvssMetricsValue, CvssMetricsValueCollection, CvssVersion } from "./base";
+import { CvssVersion } from "./base";
+import type { CvssDefinition, CvssMetricsValue, CvssMetricsValueCollection } from "./base";
 
 export const CVSS31_DEFINITION: CvssDefinition = Object.freeze({
   AV: {

frontend/src/utils/cvss/cvss4.ts

@@ -1,5 +1,6 @@
 /* eslint-disable camelcase */
-import { CvssDefinition, CvssMetricsValue, CvssMetricsValueCollection, CvssVersion } from "./base";
+import { CvssVersion } from "./base";
+import type { CvssDefinition, CvssMetricsValue, CvssMetricsValueCollection } from "./base";
 
 export const CVSS40_DEFINITION: CvssDefinition = Object.freeze({ 
   AV: { 

frontend/test/findingSorting.test.ts

@@ -2,7 +2,8 @@ import { describe, it, expect } from 'vitest'
 import { addDays } from "date-fns";
 import reverse from 'lodash/reverse';
 import { sortFindings } from '@/stores/project';
-import type { FindingOrderingDefinition, PentestFinding, ProjectType, SortOrder } from "~/utils/types";
+import { SortOrder } from "~/utils/types";
+import type { FindingOrderingDefinition, PentestFinding, ProjectType } from "~/utils/types";
 
 function testFindingSort({ findings, findingOrdering = [], overrideFindingOrder = false }: { findings: PentestFinding[], findingOrdering?: FindingOrderingDefinition[], overrideFindingOrder?: boolean}) {
   const unorderedFindings = findings.map((f, idx) => ({ ...f, data: { ...(f.data || {}), title: 'f' + (idx + 1) } })) as PentestFinding[];

frontend/test/markdownExtensions.test.js

@@ -11,6 +11,9 @@ function codeBlock(content, language = null) {
 
 describe('Markdown extensions', () => {
   for (const [md, expected] of Object.entries({
+    // GFM
+    'text ~~text~~ text': '<p>text <del>text</del> text</p>',
+    '* [ ] task\n* [x] task': '<ul class="contains-task-list">\n<li class="task-list-item"><input type="checkbox" disabled> task</li>\n<li class="task-list-item"><input type="checkbox" checked disabled> task</li>\n</ul>',
     // Footnote
     'text^[footnote] text': '<p>text<footnote>footnote</footnote> text</p>',
     'text^[**foot**[note](https://example.com)] text': '<p>text<footnote><strong>foot</strong><a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer">note</a></footnote> text</p>',