silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 104 Wiki Activity

Fix: Add keypress event for FSelect

This commit is contained in:
philipp lang 2023-10-30 23:09:47 +01:00
parent 41d6a71d2f
commit a104adeb5a
2 changed files with 54 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
resources/js/components/form/Switch.vue
View File

@ -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) {

50
resources/js/views/contribution/VIndex.vue
View File

@ -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"
label="Veranstaltungs-Name" required></f-text>
<f-text id="eventName" v-model="values.eventName" name="eventName" class="col-span-2" 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"
required></f-text>
<f-text id="dateUntil" v-model="values.dateUntil" name="dateUntil" type="date" label="Datum bis" 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"
required></f-select>
<f-select id="country" v-model="values.country" :options="countries" name="country" label="Land" 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"
label="Suchen …" size="sm" @keypress.enter.prevent="onSubmitFirstMemberResult"></f-text>
<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"
v-model="values.members" :label="`${member.firstname} ${member.lastname}`" name="members[]"
:value="member.id" size="sm" inline
@keypress.enter.prevent="onSubmitMemberResult(member)"></f-switch>
<f-switch
v-for="member in search.results"
:id="`members-${member.id}`"
: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="
values.type = compiler.class;
submit();
" v-text="compiler.title"></button>
<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>
</form>
</page-layout>
</template>