resources/js/components/ui/ActionButton.vue

@@ -1,28 +0,0 @@
-<template>
-    <a v-tooltip="tooltip" :href="href" :target="blank ? '_BLANK' : '_SELF'" class="inline-flex btn btn-sm">
-        <ui-sprite :src="icon"></ui-sprite>
-    </a>
-</template>
-
-<script setup>
-defineProps({
-    tooltip: {
-        required: true,
-        type: String,
-    },
-    href: {
-        type: String,
-        default: () => '#',
-        required: false,
-    },
-    blank: {
-        type: Boolean,
-        default: () => false,
-        required: false,
-    },
-    icon: {
-        type: String,
-        required: true,
-    },
-});
-</script>

resources/js/views/form/Index.vue

@@ -112,11 +112,9 @@
                     <div v-text="form.participants_count"></div>
                 </td>
                 <td>
-                    <div class="flex space-x-2">
-                        <ui-action-button tooltip="Bearbeiten" class="btn-warning" icon="pencil" @click.prevent="edit(form)"></ui-action-button>
-                        <ui-action-button tooltip="Teilnehmende anzeigen" class="btn-info" icon="user" @click.prevent="showParticipants(form)"></ui-action-button>
-                        <ui-action-button tooltip="Löschen" class="btn-danger" icon="trash" @click.prevent="deleting = form"></ui-action-button>
-                    </div>
+                    <a v-tooltip="`Bearbeiten`" href="#" class="ml-2 inline-flex btn btn-warning btn-sm" @click.prevent="edit(form)"><ui-sprite src="pencil"></ui-sprite></a>
+                    <a v-tooltip="`Teilnehmende anzeigen`" href="#" class="ml-2 inline-flex btn btn-info btn-sm" @click.prevent="showParticipants(form)"><ui-sprite src="user"></ui-sprite></a>
+                    <a v-tooltip="`Löschen`" href="#" class="ml-2 inline-flex btn btn-danger btn-sm" @click.prevent="deleting = form"><ui-sprite src="trash"></ui-sprite></a>
                 </td>
             </tr>
         </table>

resources/js/views/formtemplate/CheckboxesField.vue

@@ -1,30 +1,20 @@
 <template>
     <div class="space-y-1">
         <span class="text-xs font-semibold text-gray-400">Optionen</span>
-        <div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
-            <f-text
-                :id="`options-${index}`"
-                size="sm"
-                class="grow"
-                :name="`options-${index}`"
-                :model-value="option"
-                @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
-            ></f-text>
-            <ui-action-button
-                tooltip="Löschen"
-                icon="trash"
-                class="btn-danger"
-                @click="$emit('update:modelValue', {...modelValue, options: removeOption(modelValue.options, index)})"
-            ></ui-action-button>
-        </div>
-        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
+        <f-text
+            v-for="(option, index) in modelValue.options"
+            :id="`options-${index}`"
+            :key="index"
+            size="sm"
+            :name="`options-${index}`"
+            :model-value="option"
+            @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: props.modelValue.options.toSpliced(index, 1, $event)})"
+        ></f-text>
+        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
     </div>
 </template>
 
 <script setup>
-import useElements from './useElements.js';
-const {addOption, setOption, removeOption} = useElements();
-
 const props = defineProps({
     modelValue: {},
     meta: {},

resources/js/views/formtemplate/RadioField.vue

@@ -1,23 +1,16 @@
 <template>
     <div class="space-y-1">
         <span class="text-xs font-semibold text-gray-400">Optionen</span>
-        <div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
-            <f-text
-                :id="`options-${index}`"
-                size="sm"
-                class="grow"
-                :name="`options-${index}`"
-                :model-value="option"
-                @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
-            ></f-text>
-            <ui-action-button
-                tooltip="Löschen"
-                icon="trash"
-                class="btn-danger"
-                @click="$emit('update:modelValue', {...modelValue, options: removeOption(modelValue.options, index)})"
-            ></ui-action-button>
-        </div>
-        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
+        <f-text
+            v-for="(option, index) in modelValue.options"
+            :id="`options-${index}`"
+            :key="index"
+            size="sm"
+            :name="`options-${index}`"
+            :model-value="option"
+            @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: props.modelValue.options.toSpliced(index, 1, $event)})"
+        ></f-text>
+        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
     </div>
     <f-switch
         id="fieldrequired"
@@ -31,9 +24,6 @@
 </template>
 
 <script setup>
-import useElements from './useElements.js';
-const {addOption, setOption, removeOption} = useElements();
-
 const props = defineProps({
     modelValue: {},
     meta: {},

resources/js/views/formtemplate/useElements.js

@@ -1,15 +0,0 @@
-export default function useElements() {
-    function addOption(options) {
-        return [...options, ''];
-    }
-
-    function setOption(options, index, $event) {
-        return options.toSpliced(index, 1, $event);
-    }
-
-    function removeOption(options, index) {
-        return options.toSpliced(index, 1);
-    }
-
-    return {addOption, setOption, removeOption};
-}

resources/js/views/invoice/Index.vue

@@ -99,12 +99,10 @@
                     <div v-text="invoice.via"></div>
                 </td>
                 <td>
-                    <div class="flex space-x-2">
-                        <ui-action-button tooltip="Anschauen" :href="invoice.links.pdf" class="btn-info" icon="eye" blank></ui-action-button>
-                        <ui-action-button tooltip="Erinnerung anschauen" :href="invoice.links.rememberpdf" class="btn-info" icon="document" blank></ui-action-button>
-                        <ui-action-button tooltip="Bearbeiten" class="btn-warning" icon="pencil" @click.prevent="edit(invoice)"></ui-action-button>
-                        <ui-action-button tooltip="Löschen" class="btn-danger" icon="trash" @click.prevent="deleting = invoice"></ui-action-button>
-                    </div>
+                    <a v-tooltip="`Anschauen`" :href="invoice.links.pdf" target="_BLANK" class="inline-flex btn btn-info btn-sm"><ui-sprite src="eye"></ui-sprite></a>
+                    <a v-tooltip="`Erinnerung anschauen`" :href="invoice.links.rememberpdf" target="_BLANK" class="ml-2 inline-flex btn btn-info btn-sm"><ui-sprite src="document"></ui-sprite></a>
+                    <a v-tooltip="`Bearbeiten`" href="#" class="ml-2 inline-flex btn btn-warning btn-sm" @click.prevent="edit(invoice)"><ui-sprite src="pencil"></ui-sprite></a>
+                    <a v-tooltip="`Löschen`" href="#" class="ml-2 inline-flex btn btn-danger btn-sm" @click.prevent="deleting = invoice"><ui-sprite src="trash"></ui-sprite></a>
                 </td>
             </tr>
         </table>