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

Ad pagination component

This commit is contained in:
Philipp Lang 2023-12-24 17:36:34 +01:00
parent 945a54a5a0
commit 0b87392829
6 changed files with 111 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/Eventform.ce.vue
View File

@ -4,56 +4,48 @@
<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"
@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': active == 0}"
>
: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': active == v.sections.length - 1}"
>
: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>
@ -64,28 +56,23 @@
<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=" "
<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]"
/>
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
>
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>
<navigation v-model="active" :last="v.sections.length"></navigation>
</slide>
<slide :key="1"> bb </slide>
<slide :key="2"> cc </slide>
@ -100,6 +87,8 @@
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';
const props = defineProps({
eventId: {
@ -118,13 +107,7 @@ 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);
}
const { back, next, backable, nextable } = useNav(active, v.value.sections.length);
function generateDefaultValues() {
payload.value = {};

7
src/carousel.css Normal file
View File

@ -0,0 +1,7 @@
section.carousel {
text-align: unset;
}
.carousel__slide {
display: block;
}

49
src/components/Navigation.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<div class="flex flex-col items-center space-y-4 md:space-y-0 md:flex-row mt-10 justify-start md:justify-evenly">
<div v-if="backable"
class="bg-primary hover:bg-secondary px-4 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg"
@click.prevent="back">Zurück</div>
<div v-if="nextable"
class="bg-primary hover:bg-emerald-600 px-4 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg"
@click.prevent="next">Weiter</div>
<button v-else type="submit"
class="relative flex items-center bg-primary hover:bg-emerald-600 px-8 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg">
<div x-show="loading" class="absolute left-1">
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div></div>
</div>
</div>
Anmeldung absenden
</button>
</div>
</template>
<script setup>
import useNav from '../composables/useNav.js';
import { computed } from 'vue';
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {
required: true,
type: Number,
},
last: {
type: Number,
required: true,
},
});
const innerValue = computed({
get() {
return props.modelValue;
},
set(newValue) {
emits('update:modelValue', newValue);
},
});
const { back, next, backable, nextable } = useNav(innerValue, props.last);
</script>

16
src/composables/useNav.js Normal file
View File

@ -0,0 +1,16 @@
import {computed} from 'vue';
export default function useNav(active, last) {
function back() {
active.value = Math.max(0, active.value - 1);
}
function next() {
active.value = Math.min(last - 1, active.value + 1);
}
const backable = computed(() => active.value !== 0);
const nextable = computed(() => active.value < last - 1);
return {back, next, backable, nextable};
}

4
src/main.js
View File

@ -1,8 +1,10 @@
import {defineCustomElement} from 'vue';
import classes from './style.css?inline';
import carousel from 'vue3-carousel/dist/carousel.css?inline';
import carouselStyle from './carousel.css?inline';
import Navigation from './components/Navigation.vue';
import Eventform from './Eventform.ce.vue';
Eventform.styles = [classes, carousel];
Eventform.styles = [classes, carousel, carouselStyle];
customElements.define('event-form', defineCustomElement(Eventform));

4
src/style.css
View File

@ -1,7 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
section.carousel {
text-align: unset;
}