Fix: Add keypress event for FSelect

resources/js/components/form/Switch.vue

@@ -19,7 +19,7 @@
         >
         <div class="relative flex items-center inner-field mt-1" :class="`h-field-${fieldSize}`">
             <span>
-                <input :id="id" type="checkbox" :name="name" :value="value" v-model="v" :disabled="disabled" class="absolute peer" @keypress="$emit('keypress', $event)" />
+                <input :id="id" v-model="v" type="checkbox" :name="name" :value="value" :disabled="disabled" class="absolute peer" @keypress="$emit('keypress', $event)" />
                 <span class="relative cursor-pointer peer-focus:bg-red-500 flex grow display" :class="{'bg-switch': v === true, 'bg-gray-700': v === false}">
                     <span><ui-sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === 'base'}" src="check"></ui-sprite></span>
                     <span><ui-sprite class="relative text-gray-400 flex-none" :class="{'w-2 h-2': size === 'sm' || size == 'xs', 'w-4 h-4': size === 'base'}" src="close"></ui-sprite></span>
@@ -37,25 +37,6 @@
 
 <script>
 export default {
-    emits: ['update:modelValue'],
-    data: function () {
-        return {
-            sizes: {
-                sm: {
-                    wrap: 'field-wrap-sm',
-                    field: 'size-sm',
-                },
-                base: {
-                    wrap: 'field-wrap-base',
-                    field: 'size-base',
-                },
-                lg: {
-                    wrap: 'field-wrap-lg',
-                    field: 'size-lg',
-                },
-            },
-        };
-    },
     props: {
         hint: {
             default: null,
@@ -88,6 +69,25 @@ export default {
             default: undefined,
         },
     },
+    emits: ['update:modelValue', 'keypress'],
+    data: function () {
+        return {
+            sizes: {
+                sm: {
+                    wrap: 'field-wrap-sm',
+                    field: 'size-sm',
+                },
+                base: {
+                    wrap: 'field-wrap-base',
+                    field: 'size-base',
+                },
+                lg: {
+                    wrap: 'field-wrap-lg',
+                    field: 'size-lg',
+                },
+            },
+        };
+    },
     computed: {
         v: {
             set(v) {

resources/js/views/contribution/VIndex.vue

@@ -1,31 +1,49 @@
 <template>
     <page-layout>
         <form target="_BLANK" class="max-w-4xl w-full mx-auto gap-6 grid-cols-2 grid p-6">
-            <f-text id="eventName" v-model="values.eventName" name="eventName" class="col-span-2"
+            <f-text id="eventName" v-model="values.eventName" name="eventName" class="col-span-2" label="Veranstaltungs-Name" required></f-text>
-                label="Veranstaltungs-Name" required></f-text>
             <f-text id="dateFrom" v-model="values.dateFrom" name="dateFrom" type="date" label="Datum von" required></f-text>
-            <f-text id="dateUntil" v-model="values.dateUntil" name="dateUntil" type="date" label="Datum bis"
+            <f-text id="dateUntil" v-model="values.dateUntil" name="dateUntil" type="date" label="Datum bis" required></f-text>
-                required></f-text>
 
             <f-text id="zipLocation" v-model="values.zipLocation" name="zipLocation" label="PLZ / Ort" required></f-text>
-            <f-select id="country" v-model="values.country" :options="countries" name="country" label="Land"
+            <f-select id="country" v-model="values.country" :options="countries" name="country" label="Land" required></f-select>
-                required></f-select>
 
             <div class="border-gray-200 shadow shadow-primary-700 p-3 shadow-[0_0_4px_gray] col-span-2">
-                <f-text id="search_text" ref="search_text_field" v-model="searchText" class="col-span-2" name="search_text"
+                <f-text
-                    label="Suchen …" size="sm" @keypress.enter.prevent="onSubmitFirstMemberResult"></f-text>
+                    id="search_text"
+                    ref="search_text_field"
+                    v-model="searchText"
+                    class="col-span-2"
+                    name="search_text"
+                    label="Suchen …"
+                    size="sm"
+                    @keypress.enter.prevent="onSubmitFirstMemberResult"
+                ></f-text>
                 <div class="mt-2 grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-2 col-span-2">
-                    <f-switch v-for="member in search.results" :id="`members-${member.id}`" :key="member.id"
+                    <f-switch
-                        v-model="values.members" :label="`${member.firstname} ${member.lastname}`" name="members[]"
+                        v-for="member in search.results"
-                        :value="member.id" size="sm" inline
+                        :id="`members-${member.id}`"
-                        @keypress.enter.prevent="onSubmitMemberResult(member)"></f-switch>
+                        :key="member.id"
+                        v-model="values.members"
+                        :label="`${member.firstname} ${member.lastname}`"
+                        name="members[]"
+                        :value="member.id"
+                        size="sm"
+                        inline
+                        @keypress.enter.prevent="onSubmitMemberResult(member)"
+                    ></f-switch>
                 </div>
             </div>
 
-            <button v-for="(compiler, index) in compilers" class="btn btn-primary mt-3 inline-block" @click.prevent="
+            <button
+                v-for="(compiler, index) in compilers"
+                class="btn btn-primary mt-3 inline-block"
+                @click.prevent="
                     values.type = compiler.class;
                     submit();
-                                " v-text="compiler.title"></button>
+                "
+                v-text="compiler.title"
+            ></button>
         </form>
     </page-layout>
 </template>