feat(#9): Nuxt 4 migration

legalconsenthub/app/components/formelements/FormElementLayer.vue

@@ -0,0 +1,52 @@
+<template>
+  <!-- <component :is="getResolvedComponent(formElement)" :model-value="input" @update:model-value="update($event, index)" /> -->
+</template>
+
+<script setup lang="ts">
+// import { FormElementType, type FormOptionDto, type FormElementDto } from '~~/.api-client'
+// import { resolveComponent } from 'vue'
+
+// const props = defineProps<{
+//   formElementType: FormElementType
+//   modelValue: FormOptionDto[]
+// }>()
+
+// const emit = defineEmits<{
+//   (e: 'update:modelValue', value: FormOptionDto[]): void
+// }>()
+
+// // TODO: Lazy loading?
+// function getResolvedComponent() {
+//   switch (props.formElementType) {
+//     case 'CHECKBOX':
+//     case 'DROPDOWN':
+//     case 'RADIOBUTTON':
+//     case 'SWITCH':
+//       return resolveComponent('TheSwitch')
+//     case 'TEXTFIELD':
+//       return resolveComponent('TheInput')
+//     default:
+//       return resolveComponent('Unimplemented')
+//   }
+// }
+
+// const input = computed<FormOptionDto | FormOptionDto[]>({
+//   get: () => {
+//     if (props.formElementType === FormElementType.Switch) {
+//       return props.modelValue[0]
+//     } else {
+//       return props.modelValue
+//     }
+//   },
+//   set: (val) => {
+//     // TODO
+//     if (Array.isArray(val)) {
+//       const updatedModelValue = [...props.modelValue]
+//       updatedModelValue[0] = { ...updatedModelValue[0], value: val.toString() }
+//       emit('update:modelValue', updatedModelValue)
+//     } else {
+//       emit('update:modelValue', val)
+//     }
+//   }
+// })
+</script>

legalconsenthub/app/components/formelements/TheCheckbox.vue

@@ -0,0 +1,28 @@
+<template>
+  <UCheckbox v-model="modelValue" :label="label" />
+</template>
+
+<script setup lang="ts">
+import type { FormOptionDto } from '~~/.api-client'
+
+const props = defineProps<{
+  formOptions: FormOptionDto[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:formOptions', value: FormOptionDto[]): void
+}>()
+
+const modelValue = computed({
+  get: () => props.formOptions?.[0].value === 'true',
+  set: (val) => {
+    if (props.formOptions?.[0]) {
+      const updatedModelValue = [...props.formOptions]
+      updatedModelValue[0] = { ...updatedModelValue[0], value: val.toString() }
+      emit('update:formOptions', updatedModelValue)
+    }
+  }
+})
+
+const label = computed(() => props.formOptions?.[0].label ?? '')
+</script>

legalconsenthub/app/components/formelements/TheInput.vue

@@ -0,0 +1,29 @@
+<template>
+  <UFormField :label="label">
+    <UInput v-model="modelValue" />
+  </UFormField>
+</template>
+
+<script setup lang="ts">
+import type { FormOptionDto } from '~~/.api-client'
+
+const props = defineProps<{
+  label?: string
+  formOptions: FormOptionDto[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:formOptions', value: FormOptionDto[]): void
+}>()
+
+const modelValue = computed({
+  get: () => props.formOptions?.[0].value ?? '',
+  set: (val) => {
+    if (val && props.formOptions?.[0].value) {
+      const updatedModelValue = [...props.formOptions]
+      updatedModelValue[0] = { ...updatedModelValue[0], value: val.toString() }
+      emit('update:formOptions', updatedModelValue)
+    }
+  }
+})
+</script>

legalconsenthub/app/components/formelements/TheRadioGroup.vue

@@ -0,0 +1,32 @@
+<template>
+  <URadioGroup v-model="modelValue" :items="items" />
+</template>
+
+<script setup lang="ts">
+import type { FormOptionDto } from '~~/.api-client'
+
+const props = defineProps<{
+  label?: string
+  formOptions: FormOptionDto[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:formOptions', value: FormOptionDto[]): void
+}>()
+
+// Our "label" is the "value" of the radio button
+const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))
+
+const modelValue = computed({
+  get: () => props.formOptions.find((option) => option.value === 'true')?.label,
+  set: (val) => {
+    if (val) {
+      const updatedModelValue = [...props.formOptions]
+      updatedModelValue.forEach((option) => {
+        option.value = option.label === val ? 'true' : 'false'
+      })
+      emit('update:formOptions', updatedModelValue)
+    }
+  }
+})
+</script>

legalconsenthub/app/components/formelements/TheSelect.vue

@@ -0,0 +1,32 @@
+<template>
+  <USelect v-model="modelValue" placeholder="Select status" :items="items" />
+</template>
+
+<script setup lang="ts">
+import type { FormOptionDto } from '~~/.api-client'
+
+const props = defineProps<{
+  label?: string
+  formOptions: FormOptionDto[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:formOptions', value: FormOptionDto[]): void
+}>()
+
+// Our "label" is the "value" of the select
+const items = computed(() => props.formOptions.map((option) => ({ label: option.label, value: option.label })))
+
+const modelValue = computed({
+  get: () => props.formOptions.find((option) => option.value === 'true')?.label,
+  set: (val) => {
+    if (val) {
+      const updatedModelValue = [...props.formOptions]
+      updatedModelValue.forEach((option) => {
+        option.value = option.label === val ? 'true' : 'false'
+      })
+      emit('update:formOptions', updatedModelValue)
+    }
+  }
+})
+</script>

legalconsenthub/app/components/formelements/TheSwitch.vue

@@ -0,0 +1,28 @@
+<template>
+  <USwitch v-model="modelValue" :label="label" />
+</template>
+
+<script setup lang="ts">
+import type { FormOptionDto } from '~~/.api-client'
+
+const props = defineProps<{
+  formOptions: FormOptionDto[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:formOptions', value: FormOptionDto[]): void
+}>()
+
+const modelValue = computed({
+  get: () => props.formOptions?.[0].value === 'true',
+  set: (val) => {
+    if (props.formOptions?.[0]) {
+      const updatedModelValue = [...props.formOptions]
+      updatedModelValue[0] = { ...updatedModelValue[0], value: val.toString() }
+      emit('update:formOptions', updatedModelValue)
+    }
+  }
+})
+
+const label = computed(() => props.formOptions?.[0].label ?? '')
+</script>

legalconsenthub/app/components/formelements/TheTitleBodyInput.vue

@@ -0,0 +1,66 @@
+<template>
+  <UFormField label="Titel">
+    <UInput v-model="title" class="w-full" :disabled="props.disabled" />
+  </UFormField>
+  <UFormField label="Text">
+    <UTextarea v-model="body" class="w-full" autoresize :disabled="props.disabled" />
+  </UFormField>
+</template>
+
+<script setup lang="ts">
+import type { FormOptionDto } from '~~/.api-client'
+
+const props = defineProps<{
+  formOptions: FormOptionDto[]
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:formOptions', value: FormOptionDto[]): void
+}>()
+
+const SEPARATOR = '|||'
+
+const title = computed({
+  get: () => {
+    const currentValue = props.formOptions?.[0]?.value ?? ''
+    return splitValue(currentValue).title
+  },
+  set: (newTitle: string) => {
+    const currentValue = props.formOptions?.[0]?.value ?? ''
+    const { body: currentBody } = splitValue(currentValue)
+    const combinedValue = joinValue(newTitle, currentBody)
+
+    const updatedModelValue = [...props.formOptions]
+    updatedModelValue[0] = { ...updatedModelValue[0], value: combinedValue }
+    emit('update:formOptions', updatedModelValue)
+  }
+})
+
+const body = computed({
+  get: () => {
+    const currentValue = props.formOptions?.[0]?.value ?? ''
+    return splitValue(currentValue).body
+  },
+  set: (newBody: string) => {
+    const currentValue = props.formOptions?.[0]?.value ?? ''
+    const { title: currentTitle } = splitValue(currentValue)
+    const combinedValue = joinValue(currentTitle, newBody)
+
+    const updatedModelValue = [...props.formOptions]
+    updatedModelValue[0] = { ...updatedModelValue[0], value: combinedValue }
+    emit('update:formOptions', updatedModelValue)
+  }
+})
+
+function splitValue(value: string): { title: string; body: string } {
+  const parts = value.split(SEPARATOR)
+  return {
+    title: parts[0] || '',
+    body: parts[1] || ''
+  }
+}
+function joinValue(title: string, body: string): string {
+  return `${title}${SEPARATOR}${body}`
+}
+</script>

legalconsenthub/app/components/formelements/Unimplemented.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>Element unimplemented:</div>
+</template>