From 4db01b7bc69b29b18ec333a522113d0a5a5acb99 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Tue, 16 Apr 2024 23:23:12 +0200
Subject: [PATCH] Add: Delete button value

---
 src/components/FieldLabel.vue   | 12 ++++++++++++
 src/components/fields/Radio.vue |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/FieldLabel.vue b/src/components/FieldLabel.vue
index 8849680..65961bb 100644
--- a/src/components/FieldLabel.vue
+++ b/src/components/FieldLabel.vue
@@ -2,12 +2,20 @@
     <span class="text-gray-600 flex bg-white items-center text-xs @sm:text-sm" :class="{'left-0 ': inline, 'left-2 px-1 absolute -top-3': !inline}">
         <span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span>
         <hint :value="hint" class="ml-2" v-if="hint" small></hint>
+        <button
+            v-if="button"
+            @click.prevent="$emit('buttonclick')"
+            class="text-primary hover:outline-none px-2 ml-3 py-1 leading-none hover:bg-primary hover:text-font transition rounded-full text-xs"
+            v-text="button"
+        ></button>
     </span>
 </template>
 
 <script setup>
 import Hint from './Hint.vue';
 
+defineEmits(['buttonclick']);
+
 defineProps({
     name: {},
     required: {},
@@ -15,6 +23,10 @@ defineProps({
         type: Boolean,
         default: () => false,
     },
+    button: {
+        required: false,
+        default: () => '',
+    },
     hint: {
         required: false,
         validator: (value) => value === null || typeof value === 'string',
diff --git a/src/components/fields/Radio.vue b/src/components/fields/Radio.vue
index b8a5cc5..569c759 100644
--- a/src/components/fields/Radio.vue
+++ b/src/components/fields/Radio.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="relative">
-        <field-label :name="field.name" :required="field.required" :hint="field.hint" inline></field-label>
+        <field-label :name="field.name" :required="field.required" :hint="field.hint" :button="modelValue === null ? '' : 'Option löschen'" @buttonclick="selected = null" inline></field-label>
         <div class="grid grid-cols-1 gap-2 pt-1">
             <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-center">
                 <input :id="`${innerId}-${index}`" v-model="selected" type="radio" :name="field.key" :value="option" class="peer absolute invisible" />