add fields
This commit is contained in:
philipp lang
parent
469c4e0141
commit
945a54a5a0
11
index.html
11
index.html
|
|
@ -9,9 +9,14 @@
|
|||
<event-form
|
||||
style="--primary: yellow; --secondary: green; --font: #ff6600; --circle: #111111"
|
||||
value='{"sections": [
|
||||
{"name": "Personal"},
|
||||
{"name": "Veranstaltung"},
|
||||
{"name": "Abschicken"}
|
||||
{"name": "Personal", "intro": "Jaöaöd", "fields": [
|
||||
{"name": "Vorname", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "required": true},
|
||||
{"name": "Nachname", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "required": true}
|
||||
]},
|
||||
{"name": "Veranstaltung", "intro": "Jaöaöd", "fields": [
|
||||
]},
|
||||
{"name": "Abschicken", "intro": "Jaöaöd", "fields": [
|
||||
]}
|
||||
]}'
|
||||
></event-form>
|
||||
<script type="module" src="src/main.js"></script>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.5.2",
|
||||
"vite": "^5.0.8"
|
||||
"change-case": "^5.3.0",
|
||||
"vite": "^5.0.8",
|
||||
"vue3-carousel": "^0.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
|
|
@ -683,6 +685,12 @@
|
|||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz",
|
||||
"integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA=="
|
||||
},
|
||||
"node_modules/change-case": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/change-case/-/change-case-5.3.0.tgz",
|
||||
"integrity": "sha512-Eykca0fGS/xYlx2fG5NqnGSnsWauhSGiSXYhB1kO6E909GUfo8S54u4UZNS7lMJmgZumZ2SUpWaoLgAcfQRICg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
|
|
@ -916,6 +924,15 @@
|
|||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/vue3-carousel": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.1.tgz",
|
||||
"integrity": "sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"vue": "^3.2.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^4.5.2",
|
||||
"vite": "^5.0.8"
|
||||
"change-case": "^5.3.0",
|
||||
"vite": "^5.0.8",
|
||||
"vue3-carousel": "^0.3.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<form novalidate @submit.prevent="submit">
|
||||
<form v-if="loaded" novalidate @submit.prevent="submit">
|
||||
<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">
|
||||
|
|
@ -23,6 +23,74 @@
|
|||
</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="#"
|
||||
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': active == 0}"
|
||||
>
|
||||
<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">
|
||||
<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>
|
||||
<span class="text-sm text-font" v-html="section.name"></span>
|
||||
</div>
|
||||
</div>
|
||||
</slide>
|
||||
</carousel>
|
||||
<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': active == v.sections.length - 1}"
|
||||
>
|
||||
<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>
|
||||
|
||||
<div class="py-4 xs:py-8">
|
||||
<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="grid grid-cols-2 gap-4 mt-6">
|
||||
<label
|
||||
v-for="(field, findex) in section.fields"
|
||||
:key="findex"
|
||||
class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex"
|
||||
>
|
||||
<input
|
||||
:name="field.key"
|
||||
type="text"
|
||||
:id="field.key"
|
||||
placeholder=" "
|
||||
class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"
|
||||
v-model="payload[field.key]"
|
||||
/>
|
||||
<span
|
||||
class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 text-xs xs:text-sm peer-placeholder-shown:text-sm xs:peer-placeholder-shown:text-base peer-focus:text-xs xs:peer-focus:text-sm peer-focus:-top-3 peer-focus:bottom-auto"
|
||||
><span v-text="field.name"></span> <span v-if="field.required" class="text-red-800 ml-1">*</span></span
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</slide>
|
||||
<slide :key="1"> bb </slide>
|
||||
<slide :key="2"> cc </slide>
|
||||
</carousel>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -30,6 +98,8 @@
|
|||
|
||||
<script setup>
|
||||
import {computed, ref} from 'vue';
|
||||
import {Carousel, Slide} from 'vue3-carousel';
|
||||
import {camelCase} from 'change-case';
|
||||
|
||||
const props = defineProps({
|
||||
eventId: {
|
||||
|
|
@ -43,6 +113,35 @@ const props = defineProps({
|
|||
|
||||
const finished = ref(false);
|
||||
const active = ref(0);
|
||||
const payload = ref({});
|
||||
const loaded = ref(false);
|
||||
|
||||
const v = computed(() => JSON.parse(props.value));
|
||||
|
||||
function back() {
|
||||
active.value = Math.max(0, active.value - 1);
|
||||
}
|
||||
|
||||
function next() {
|
||||
active.value = Math.min(v.value.sections.length - 1, active.value + 1);
|
||||
}
|
||||
|
||||
function generateDefaultValues() {
|
||||
payload.value = {};
|
||||
v.value.sections = v.value.sections.map(function (section) {
|
||||
return {
|
||||
...section,
|
||||
fields: section.fields.map(function (field) {
|
||||
payload.value[camelCase(field.name)] = '';
|
||||
return {
|
||||
...field,
|
||||
key: camelCase(field.name),
|
||||
};
|
||||
}),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
generateDefaultValues();
|
||||
loaded.value = true;
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import {defineCustomElement} from 'vue';
|
||||
import classes from './style.css?inline';
|
||||
import carousel from 'vue3-carousel/dist/carousel.css?inline';
|
||||
|
||||
import Eventform from './Eventform.ce.vue';
|
||||
Eventform.styles = [classes];
|
||||
Eventform.styles = [classes, carousel];
|
||||
|
||||
customElements.define('event-form', defineCustomElement(Eventform));
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
section.carousel {
|
||||
text-align: unset;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue