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

Compare commits

base: silva:ecf008f12130c8ba18fced50f0a6fe1378d88755
Branches Tags
silva:master
silva:dev
...
compare: silva:765a9d009fc7fc33c0de17cb6e020083966e9a8f
Branches Tags
silva:master
silva:dev

3 Commits
ecf008f121 ... 765a9d009f

Author SHA1 Message Date
philipp lang 765a9d009f Add custom value 2024-04-16 23:03:43 +02:00
philipp lang 2424b4e19f Add custom-value for radio 2024-04-16 22:30:31 +02:00
philipp lang c86200e391 Lint 2024-04-16 22:30:25 +02:00
5 changed files with 136 additions and 83 deletions
Show Stats Expand all files Collapse all files

8
index.html
View File

@ -86,7 +86,8 @@
"a",
"v"
],
"key": "dropdown"
"key": "dropdown",
"allowcustom": false
},
{
"name": "radio",
@ -106,7 +107,8 @@
"a",
"v"
],
"key": "radio"
"key": "radio",
"allowcustom": false
},
{
"name": "text",
@ -157,7 +159,7 @@
"special_type": null,
"key": "numerisch",
"min": null,
"max": 7
"max": "7"
}
]
}

128
src/EventForm.ce.vue
View File

@ -4,77 +4,81 @@
<div v-if="finished === false" class="bg-white @container rounded-lg shadow-lg">
<div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
<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-full transition duration-300 relative"
:class="{
'bg-primary': index <= active,
'bg-secondary': index > active,
}" @click.prevent="active = index">
<svg preserveAspectRatio="none"
}"
@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="{
viewBox="0 0 100 100"
: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>
<div v-if="editable" class="hidden @md:flex items-center h-full">
<a href="#"
class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
@click.prevent.stop="$emit('editSection', index)">
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editSection', index)">
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
</a>
<a href="#"
class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
@click.prevent.stop="$emit('deleteSection', index)">
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteSection', index)">
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
</a>
</div>
</a>
</template>
<div v-if="editable" class="hidden @md:flex items-center h-full absolute right-0 mr-6">
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font"
@click.prevent.stop="$emit('addSection')">
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font" @click.prevent.stop="$emit('addSection')">
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
<path
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
/>
</svg>
</a>
</div>
</div>
<div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
<a href="#"
<a
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 }" @click.prevent="back">
:class="{'opacity-40': !backable}"
@click.prevent="back"
>
<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>
<div class="overflow-hidden">
<carousel v-model="active">
<slide v-for="(section, index) in v.sections" :key="index"
class="relative flex flex-no-wrap overflow-hidden">
<slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden">
<div class="flex-none w-full">
<div href="#"
<div
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"
@click="active = index">
<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>
@click="active = index"
>
<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>
</div>
<a href="#"
<a
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 }" @click.prevent="next">
:class="{'opacity-40': !nextable}"
@click.prevent="next"
>
<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>
@ -85,28 +89,25 @@
<carousel v-model="active">
<slide v-for="(section, index) in v.sections" :key="index">
<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 @sm:grid-cols-4 @lg:grid-cols-6 gap-6 mt-6 items-start">
<div v-for="(field, findex) in section.fields" :key="findex"
class="flex justify-stretch relative group" :class="{
<div
v-for="(field, findex) in section.fields"
:key="findex"
class="flex justify-stretch relative group"
:class="{
'hover:ring-edit hover:ring-4': editable,
[colClasses.mobile[field.columns.mobile]]: true,
[colClasses.tablet[field.columns.tablet]]: true,
[colClasses.desktop[field.columns.desktop]]: true,
}">
<component :is="resolveComponentName(field)" v-model="payload[field.key]"
:fields="allFields" :payload="payload" :field="field" class="grow"></component>
<div v-if="editable"
class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
<a href="#"
class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
@click.prevent.stop="$emit('editField', index, findex)">
}"
>
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :fields="allFields" :payload="payload" :field="field" class="grow"></component>
<div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editField', index, findex)">
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
</a>
<a href="#"
class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2"
@click.prevent.stop="$emit('deleteField', index, findex)">
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteField', index, findex)">
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
</a>
</div>
@ -114,13 +115,11 @@
</div>
<div v-if="editable" class="flex justify-center mt-6 relative">
<a href="#"
class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font"
@click.prevent="$emit('addField', index)">
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
<a href="#" class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font" @click.prevent="$emit('addField', index)">
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
<path
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"
/>
</svg>
</a>
</div>
@ -133,21 +132,16 @@
</div>
<div v-if="finished === true" class="mx-auto">
<div
class="bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[5rem_1fr] sm:grid-rows-[12rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10">
<div
class="bg-primary w-32 h-32 md:w-40 md:h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
<svg class="w-20 h-20 md:w-24 md:h-24 text-emerald-300 relative -left-3 -top-3"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd" />
class="bg-white shadow-2xl ring-1 ring-gray-900/5 rounded-xl grid grid-cols-1 sm:grid-cols-[1fr_250px] grid-rows-[5rem_1fr] sm:grid-rows-[12rem_1fr] gap-6 overflow-hidden bg-gradient-to-bl from-white via-white to-black/10"
>
<div class="bg-primary w-32 h-32 md:w-40 md:h-40 flex justify-center items-center [clip-path:circle(70%_at_30%_30%)]">
<svg class="w-20 h-20 md:w-24 md:h-24 text-emerald-300 relative -left-3 -top-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</div>
<div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
<div class="absolute right-0 top-0 h-full flex items-center justify-end">
<div
class="bg-primary w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]">
</div>
<div class="bg-primary w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
</div>
<div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
<img class="w-64 h-32 object-cover" src="" />
@ -166,8 +160,8 @@
</template>
<script setup>
import { computed, ref, watch } from 'vue';
import { Carousel, Slide } from 'vue3-carousel';
import {computed, ref, watch} from 'vue';
import {Carousel, Slide} from 'vue3-carousel';
import Navigation from './components/Navigation.vue';
import useNav from './composables/useNav.js';
import EditIcon from './components/icons/EditIcon.vue';
@ -175,7 +169,7 @@ import DeleteIcon from './components/icons/DeleteIcon.vue';
import useToastify from './composables/useToastify.js';
import useFields from './composables/useFields.js';
const { success, errorFromResponse } = useToastify();
const {success, errorFromResponse} = useToastify();
const finished = ref(false);
const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'addField', 'editField', 'deleteField', 'active']);
@ -265,8 +259,8 @@ watch(
(value) => reload(),
);
const { back, next, backable, nextable } = useNav(active, v.value.sections.length);
const { resolveComponentName } = useFields();
const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
const {resolveComponentName} = useFields();
async function submit() {
try {

4
src/components/fields/Dropdown.vue
View File

@ -1,5 +1,5 @@
<template>
<v-dropdown v-model="inner" :label="field.name" :id="innerId" :name="innerId" :options="innerOptions" :required="field.required" :hint="field.hint"></v-dropdown>
<v-dropdown v-model="inner" :label="field.name" :id="innerId" :name="innerId" :options="innerOptions" :required="field.required" :hint="field.hint" :allowcustom="field.allowcustom"></v-dropdown>
</template>
<script setup>
@ -15,7 +15,7 @@ const props = defineProps({
field: {
required: true,
validator: (value) =>
hasKeys(value, [...globalFieldRules(), 'required', 'options']) &&
hasKeys(value, [...globalFieldRules(), 'required', 'options', 'allowcustom']) &&
typeof value.required === 'boolean' &&
typeof value.key === 'string' &&
value.key.length > 0 &&

41
src/components/fields/Radio.vue
View File

@ -3,17 +3,32 @@
<field-label :name="field.name" :required="field.required" :hint="field.hint" 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="inner" type="radio" :name="field.key" :value="option" class="peer absolute invisible" />
<input :id="`${innerId}-${index}`" v-model="selected" type="radio" :name="field.key" :value="option" class="peer absolute invisible" />
<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 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
</label>
<label v-if="field.allowcustom" :for="`${innerId}-custom-value-selected`" class="block relative flex items-center">
<input :id="`${innerId}-custom-value-selected`" v-model="selected" type="radio" :name="field.key" value="custom-value-selected" class="peer absolute invisible" />
<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="ml-8 w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex h-6">
<input
:id="`${innerId}-custom-value`"
v-model="customValue"
:name="`${innerId}-custom-value`"
placeholder="eigener Wert"
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.info]:py-1 px-2 @sm:px-3 @sm:group-[.info]:px-2 text-sm @sm:text-base @sm:group-[.info]:text-sm"
/>
</span>
</label>
</div>
</div>
</template>
<script setup>
import {computed} from 'vue';
import {computed, ref, watch} from 'vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']);
@ -25,8 +40,9 @@ const props = defineProps({
field: {
required: true,
validator: (value) =>
hasKeys(value, [...globalFieldRules(), 'required', 'options']) &&
hasKeys(value, [...globalFieldRules(), 'required', 'options', 'allowcustom']) &&
typeof value.required === 'boolean' &&
typeof value.allowcustom === 'boolean' &&
typeof value.key === 'string' &&
value.key.length > 0 &&
typeof value.name === 'string' &&
@ -41,8 +57,21 @@ const props = defineProps({
const innerId = computed(() => (props.id ? props.id : props.field.key));
const inner = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
const selected = ref(props.modelValue === null || props.field.options.includes(props.modelValue) ? props.modelValue : 'custom-value-selected');
watch(selected, (newValue) => {
customValue.value = newValue === 'custom-value-selected' ? '' : newValue;
});
const customValue = computed({
get: () => {
if (selected.value === 'custom-value-selected') {
return props.modelValue;
}
return '';
},
set: (v) => {
return emit('update:modelValue', v);
},
});
</script>

38
src/components/fields/VDropdown.vue
View File

@ -1,23 +1,34 @@
<template>
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="id">
<select
v-if="selected !== 'custom-value-selected'"
:name="name"
:id="id"
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 @sm:py-2 @sm:group-[.info]:py-1 text-sm @sm:text-base @sm:group-[.info]:text-sm @sm:px-3 @sm:group-[.info]:px-2 w-full"
v-model="inner"
v-model="selected"
>
<option :value="null">-- kein --</option>
<option v-for="(option, index) in options" :key="index" :value="option.id" v-text="option.name"></option>
<option v-if="allowcustom" value="custom-value-selected">eigene Eingabe</option>
</select>
<div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
<hint :value="hint"></hint>
</div>
<field-label :name="label" class="group-[.info]:bg-blue-200" :required="required"></field-label>
<input
v-if="selected === 'custom-value-selected'"
:id="`${id}-custom-value`"
v-model="customValue"
:name="`${id}-custom-value`"
placeholder="eigener Wert"
class="bg-white group-[.info]:bg-blue-200 rounded-lg focus:outline-none text-gray-600 text-left w-full py-1 @sm:py-2 @sm:group-[.info]:py-1 px-2 @sm:px-3 @sm:group-[.info]:px-2 text-sm @sm:text-base @sm:group-[.info]:text-sm"
/>
</label>
</template>
<script setup>
import {computed} from 'vue';
import {computed, ref, watch} from 'vue';
import FieldLabel from '../FieldLabel.vue';
import Hint from '../Hint.vue';
@ -53,10 +64,27 @@ const props = defineProps({
validator: (value) => value === null || typeof value === 'string',
default: () => null,
},
allowcustom: {
required: true,
validator: (value) => typeof value === 'boolean',
},
});
const inner = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
const selected = ref(props.modelValue === null || props.field.options.includes(props.modelValue) ? props.modelValue : 'custom-value-selected');
watch(selected, (newValue) => {
customValue.value = newValue === 'custom-value-selected' ? '' : newValue;
});
const customValue = computed({
get: () => {
if (selected.value === 'custom-value-selected') {
return props.modelValue;
}
return '';
},
set: (v) => {
return emit('update:modelValue', v);
},
});
</script>