67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<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>
|