silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Radio field

This commit is contained in:
philipp lang 2023-12-24 23:26:37 +01:00
parent 056e4c4bec
commit 8b9b38ef48
4 changed files with 85 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -12,6 +12,7 @@
{"name": "Personal", "intro": "Jaöaöd", "fields": [
{"name": "Vorname", "type": "text", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true},
{"name": "Geschlecht", "type": "select", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"name": "Essgewohnheiten", "type": "radio", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"name": "Nachname", "type": "text", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true}
]},
{"name": "Veranstaltung", "intro": "Jaöaöd", "fields": [

63
src/Eventform.ce.vue
View File

@ -4,48 +4,56 @@
<div x-ref="eventFormContainer" class="bg-white rounded-lg shadow-lg" x-show="finished === false">
<div class="sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg">
<template v-for="(section, index) in v.sections">
<a href="#"
<a
href="#"
class="flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300 relative"
:class="{ 'bg-primary': index <= active, 'bg-secondary': index > active }"
@click.prevent="active = index">
<svg preserveAspectRatio="none"
:class="{'bg-primary': index <= active, 'bg-secondary': index > active}"
@click.prevent="active = index"
>
<svg
preserveAspectRatio="none"
class="h-full w-3 absolute left-0 text-primary transition duration-300"
viewBox="0 0 100 100"
:class="{ 'opacity-100': index !== 0 && index - 1 <= active, 'opacity-0': !(index !== 0 && index - 1 <= active) }">
:class="{'opacity-100': index !== 0 && index - 1 <= active, 'opacity-0': !(index !== 0 && index - 1 <= active)}"
>
<path d="M0,0 100,50 0,100" fill="currentColor"></path>
</svg>
<span
class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300"
v-html="index + 1"></span>
<span class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300" v-html="index + 1"></span>
<span class="text-sm text-font ml-2" v-html="section.name"></span>
</a>
</template>
</div>
<div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg sm:hidden bg-secondary">
<a @click.prevent="back" href="#"
<a
@click.prevent="back"
href="#"
class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
:class="{ 'opacity-40': !backable }">
:class="{'opacity-40': !backable}"
>
<svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
</svg>
</a>
<carousel v-model="active" class="grow">
<slide v-for="(section, index) in v.sections" class="relative flex flex-no-wrap overflow-hidden"
:key="index">
<slide v-for="(section, index) in v.sections" class="relative flex flex-no-wrap overflow-hidden" :key="index">
<div class="flex-none w-full">
<div @click="active = index" href="#"
class="flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300 relative">
<span
class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font transition duration-300"
v-html="index + 1"></span>
<div
@click="active = index"
href="#"
class="flex flex-col md:flex-row items-center justify-center md:justify-start px-2 flex-auto md:pl-6 h-12 md:h-16 transition duration-300 relative"
>
<span class="flex items-center justify-center w-4 md:w-6 h-4 md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span>
<span class="text-sm text-font" v-html="section.name"></span>
</div>
</div>
</slide>
</carousel>
<a @click.prevent="next" href="#"
<a
@click.prevent="next"
href="#"
class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
:class="{ 'opacity-40': !nextable }">
:class="{'opacity-40': !nextable}"
>
<svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
</svg>
@ -56,12 +64,9 @@
<carousel v-model="active">
<slide :key="index" v-for="(section, index) in v.sections">
<div class="w-full flex-none px-3 xs:px-6">
<div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro">
</div>
<div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div>
<div class="grid grid-cols-2 gap-4 mt-6">
<component :is="resolveComponentName(field)" :field="field"
v-for="(field, findex) in section.fields" :key="findex"
v-model="payload[field.key]"></component>
<component :is="resolveComponentName(field)" :field="field" v-for="(field, findex) in section.fields" :key="findex" v-model="payload[field.key]"></component>
</div>
</div>
@ -75,13 +80,14 @@
</template>
<script setup>
import { computed, ref } from 'vue';
import { Carousel, Slide } from 'vue3-carousel';
import { camelCase } from 'change-case';
import {computed, ref} from 'vue';
import {Carousel, Slide} from 'vue3-carousel';
import {camelCase} from 'change-case';
import Navigation from './components/Navigation.vue';
import useNav from './composables/useNav.js';
import FieldText from './components/fields/Text.vue';
import FieldSelect from './components/fields/Select.vue';
import FieldRadio from './components/fields/Radio.vue';
const props = defineProps({
eventId: {
@ -100,12 +106,13 @@ const loaded = ref(false);
const v = computed(() => JSON.parse(props.value));
const { back, next, backable, nextable } = useNav(active, v.value.sections.length);
const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
function resolveComponentName(field) {
return {
text: FieldText,
select: FieldSelect,
radio: FieldRadio,
}[field.type];
}

6
src/components/FieldLabel.vue
View File

@ -1,5 +1,5 @@
<template>
<span class="absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-xs xs:text-sm">
<span class="absolute text-gray-600 flex bg-white items-center -top-3 px-1 text-xs xs:text-sm" :class="{'left-0': inline, 'left-2': !inline}">
<span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span>
</span>
</template>
@ -8,5 +8,9 @@
defineProps({
name: {},
required: {},
inline: {
type: Boolean,
default: () => false,
},
});
</script>

44
src/components/fields/Radio.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3">
<label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-center">
<input type="radio" :name="field.key" :value="option" v-model="inner" class="peer absolute invisible" :id="`${field.key}-${index}`" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded-full block"></span>
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
<span class="pl-8" v-text="option"></span>
</label>
</div>
<field-label :name="field.name" :required="field.required" inline></field-label>
</div>
</template>
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {
required: true,
validator: (value) => value === null || typeof value === 'string',
},
field: {
required: true,
validator: (value) =>
hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default', 'options']) &&
typeof value.required === 'boolean' &&
typeof value.key === 'string' &&
value.key.length > 0 &&
typeof value.name === 'string' &&
value.name.length > 0 &&
hasKeys(value.columns, ['mobile', 'desktop', 'tablet']) &&
typeof value.options === 'object',
},
});
const inner = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
});
</script>