Add textField
This commit is contained in:
Philipp Lang
parent
710827bba9
commit
e2fb3aa227
|
|
@ -10,8 +10,8 @@
|
|||
style="--primary: yellow; --secondary: green; --font: #ff6600; --circle: #111111"
|
||||
value='{"sections": [
|
||||
{"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": "Vorname", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true},
|
||||
{"name": "Nachname", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true}
|
||||
]},
|
||||
{"name": "Veranstaltung", "intro": "Jaöaöd", "fields": [
|
||||
]},
|
||||
|
|
|
|||
|
|
@ -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,19 +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">
|
||||
<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>
|
||||
<component :is="resolveComponentName(field)" :field="field" v-for="(field, findex) in section.fields" :key="findex" v-model="payload[field.key]"></component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -82,11 +80,12 @@
|
|||
</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';
|
||||
|
||||
const props = defineProps({
|
||||
eventId: {
|
||||
|
|
@ -105,7 +104,11 @@ 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 FieldText;
|
||||
}
|
||||
|
||||
function generateDefaultValues() {
|
||||
payload.value = {};
|
||||
|
|
@ -113,7 +116,7 @@ function generateDefaultValues() {
|
|||
return {
|
||||
...section,
|
||||
fields: section.fields.map(function (field) {
|
||||
payload.value[camelCase(field.name)] = '';
|
||||
payload.value[camelCase(field.name)] = field.default;
|
||||
return {
|
||||
...field,
|
||||
key: camelCase(field.name),
|
||||
|
|
@ -123,6 +126,10 @@ function generateDefaultValues() {
|
|||
});
|
||||
}
|
||||
|
||||
function submit() {
|
||||
console.log(payload.value);
|
||||
}
|
||||
|
||||
generateDefaultValues();
|
||||
loaded.value = true;
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
|
||||
<input
|
||||
:id="field.key"
|
||||
v-model="inner"
|
||||
:name="field.key"
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed} from 'vue';
|
||||
const emit = defineEmits(['update:modelValue']);
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
required: true,
|
||||
validator: (value) => typeof value === 'string',
|
||||
},
|
||||
field: {
|
||||
required: true,
|
||||
validator: (value) =>
|
||||
hasKeys(value, ['required', 'key', 'columns', 'name', 'default']) &&
|
||||
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']),
|
||||
},
|
||||
});
|
||||
|
||||
const inner = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (v) => emit('update:modelValue', v),
|
||||
});
|
||||
</script>
|
||||
|
|
@ -4,6 +4,10 @@ import carousel from 'vue3-carousel/dist/carousel.css?inline';
|
|||
import carouselStyle from './carousel.css?inline';
|
||||
import Navigation from './components/Navigation.vue';
|
||||
|
||||
window.hasKeys = function (object, expected) {
|
||||
return typeof object === 'object' && JSON.stringify(Object.keys(object).sort()) === JSON.stringify(expected.sort());
|
||||
};
|
||||
|
||||
import Eventform from './Eventform.ce.vue';
|
||||
Eventform.styles = [classes, carousel, carouselStyle];
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./src/*.vue'],
|
||||
content: ['./src/**/*.vue'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue