fix tailwindcss import
This commit is contained in:
philipp lang
parent
7412119d6d
commit
e0aa34d540
18
index.html
18
index.html
|
|
@ -7,15 +7,25 @@
|
||||||
</head>
|
</head>
|
||||||
<body style="padding: 50px">
|
<body style="padding: 50px">
|
||||||
<event-form
|
<event-form
|
||||||
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
|
style="
|
||||||
|
--primary: hsl(181, 75%, 26%);
|
||||||
|
--secondary: hsl(181, 75%, 35%);
|
||||||
|
--font: hsl(181, 84%, 78%);
|
||||||
|
--circle: hsl(181, 86%, 16%);
|
||||||
|
"
|
||||||
value='{"sections":[{"name":"ff","intro":"ff","fields":[{"name":"sdsdsd","type":"CheckboxField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":false,"required":true,"description":"sds","key":"sdsdsd"},{"name":"Bezirk","type":"GroupField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":"","required":true,"parent_field":null,"parent_group":120,"key":"bezirk"},{"name":"Stamm","type":"GroupField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":"","required":true,"parent_field":"bezirk","parent_group":null,"key":"stamm"}]}]}'
|
value='{"sections":[{"name":"ff","intro":"ff","fields":[{"name":"sdsdsd","type":"CheckboxField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":false,"required":true,"description":"sds","key":"sdsdsd"},{"name":"Bezirk","type":"GroupField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":"","required":true,"parent_field":null,"parent_group":120,"key":"bezirk"},{"name":"Stamm","type":"GroupField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":"","required":true,"parent_field":"bezirk","parent_group":null,"key":"stamm"}]}]}'
|
||||||
base-url="http://localhost:8000"
|
url="http://localhost:8000"
|
||||||
editable
|
editable
|
||||||
></event-form>
|
></event-form>
|
||||||
<event-overview
|
<event-overview
|
||||||
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
|
style="
|
||||||
|
--primary: hsl(181, 75%, 26%);
|
||||||
|
--secondary: hsl(181, 75%, 35%);
|
||||||
|
--font: hsl(181, 84%, 78%);
|
||||||
|
--circle: hsl(181, 86%, 16%);
|
||||||
|
"
|
||||||
url-pattern="/anmeldung/{slug}"
|
url-pattern="/anmeldung/{slug}"
|
||||||
base-url="http://localhost:8000"
|
url="http://localhost:8000/api/form"
|
||||||
></event-overview>
|
></event-overview>
|
||||||
<script type="module" src="src/main.js"></script>
|
<script type="module" src="src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -4,75 +4,77 @@
|
||||||
<div class="bg-white @container rounded-lg shadow-lg" x-show="finished === false">
|
<div class="bg-white @container rounded-lg shadow-lg" x-show="finished === false">
|
||||||
<div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
|
<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">
|
<template v-for="(section, index) in v.sections">
|
||||||
<a
|
<a href="#"
|
||||||
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="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}"
|
:class="{
|
||||||
@click.prevent="active = index"
|
'bg-primary': index <= active,
|
||||||
>
|
'bg-secondary': index > active,
|
||||||
<svg
|
}" @click.prevent="active = index">
|
||||||
preserveAspectRatio="none"
|
<svg preserveAspectRatio="none"
|
||||||
class="h-full w-3 absolute left-0 text-primary transition duration-300"
|
class="h-full w-3 absolute left-0 text-primary transition duration-300"
|
||||||
viewBox="0 0 100 100"
|
viewBox="0 0 100 100" :class="{
|
||||||
:class="{'opacity-100': index !== 0 && index - 1 <= active, 'opacity-0': !(index !== 0 && index - 1 <= active)}"
|
'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>
|
<path d="M0,0 100,50 0,100" fill="currentColor"></path>
|
||||||
</svg>
|
</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>
|
<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">
|
<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>
|
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
|
||||||
</a>
|
</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>
|
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<div v-if="editable" class="hidden @md:flex items-center h-full absolute right-0 mr-6">
|
<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')">
|
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font"
|
||||||
<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">
|
@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
|
<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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
|
<div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
|
||||||
<a
|
<a href="#"
|
||||||
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="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 }" @click.prevent="back">
|
||||||
@click.prevent="back"
|
|
||||||
>
|
|
||||||
<svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
|
<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" />
|
<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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<div class="overflow-hidden">
|
<div class="overflow-hidden">
|
||||||
<carousel v-model="active">
|
<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 class="flex-none w-full">
|
||||||
<div
|
<div href="#"
|
||||||
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="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"
|
@click="active = index">
|
||||||
>
|
<span
|
||||||
<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>
|
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>
|
<span class="text-sm text-font" v-html="section.name"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</slide>
|
</slide>
|
||||||
</carousel>
|
</carousel>
|
||||||
</div>
|
</div>
|
||||||
<a
|
<a href="#"
|
||||||
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="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 }" @click.prevent="next">
|
||||||
@click.prevent="next"
|
|
||||||
>
|
|
||||||
<svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
|
<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" />
|
<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>
|
</svg>
|
||||||
|
|
@ -83,25 +85,30 @@
|
||||||
<carousel v-model="active">
|
<carousel v-model="active">
|
||||||
<slide v-for="(section, index) in v.sections" :key="index">
|
<slide v-for="(section, index) in v.sections" :key="index">
|
||||||
<div class="w-full flex-none px-3 @xs:px-6">
|
<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-4 mt-6 items-start">
|
<div class="grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-4 mt-6 items-start">
|
||||||
<div
|
<div v-for="(field, findex) in section.fields" :key="findex"
|
||||||
v-for="(field, findex) in section.fields"
|
class="flex justify-stretch relative group" :class="{
|
||||||
:key="findex"
|
|
||||||
class="flex justify-stretch relative group"
|
|
||||||
:class="{
|
|
||||||
'hover:ring-edit hover:ring-4': editable,
|
'hover:ring-edit hover:ring-4': editable,
|
||||||
[colClasses.mobile[field.columns.mobile]]: true,
|
[colClasses.mobile[field.columns.mobile]]: true,
|
||||||
[colClasses.tablet[field.columns.tablet]]: true,
|
[colClasses.tablet[field.columns.tablet]]: true,
|
||||||
[colClasses.desktop[field.columns.desktop]]: true,
|
[colClasses.desktop[field.columns.desktop]]: true,
|
||||||
}"
|
}">
|
||||||
>
|
<component :is="resolveComponentName(field)" v-model="payload[field.key]"
|
||||||
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :payload="payload" :field="field"></component>
|
:payload="payload" :field="field"></component>
|
||||||
<div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
|
<div v-if="editable"
|
||||||
<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)">
|
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>
|
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
|
||||||
</a>
|
</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>
|
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -109,11 +116,13 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="editable" class="flex justify-center mt-6 relative">
|
<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)">
|
<a href="#"
|
||||||
<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">
|
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
|
<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>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -129,47 +138,55 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import {computed, ref, watch} from 'vue';
|
import { computed, ref, watch } from "vue";
|
||||||
import {Carousel, Slide} from 'vue3-carousel';
|
import { Carousel, Slide } from "vue3-carousel";
|
||||||
import Navigation from './components/Navigation.vue';
|
import Navigation from "./components/Navigation.vue";
|
||||||
import useNav from './composables/useNav.js';
|
import useNav from "./composables/useNav.js";
|
||||||
import FieldText from './components/fields/Text.vue';
|
import FieldText from "./components/fields/Text.vue";
|
||||||
import FieldDate from './components/fields/Date.vue';
|
import FieldDate from "./components/fields/Date.vue";
|
||||||
import FieldTextarea from './components/fields/Textarea.vue';
|
import FieldTextarea from "./components/fields/Textarea.vue";
|
||||||
import FieldDropdown from './components/fields/Dropdown.vue';
|
import FieldDropdown from "./components/fields/Dropdown.vue";
|
||||||
import FieldGroup from './components/fields/Group.vue';
|
import FieldGroup from "./components/fields/Group.vue";
|
||||||
import FieldCheckboxes from './components/fields/Checkboxes.vue';
|
import FieldCheckboxes from "./components/fields/Checkboxes.vue";
|
||||||
import FieldCheckbox from './components/fields/Checkbox.vue';
|
import FieldCheckbox from "./components/fields/Checkbox.vue";
|
||||||
import FieldRadio from './components/fields/Radio.vue';
|
import FieldRadio from "./components/fields/Radio.vue";
|
||||||
import EditIcon from './components/icons/EditIcon.vue';
|
import EditIcon from "./components/icons/EditIcon.vue";
|
||||||
import DeleteIcon from './components/icons/DeleteIcon.vue';
|
import DeleteIcon from "./components/icons/DeleteIcon.vue";
|
||||||
|
|
||||||
const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'addField', 'editField', 'deleteField', 'active']);
|
const emits = defineEmits([
|
||||||
|
"addSection",
|
||||||
|
"editSection",
|
||||||
|
"deleteSection",
|
||||||
|
"addField",
|
||||||
|
"editField",
|
||||||
|
"deleteField",
|
||||||
|
"active",
|
||||||
|
]);
|
||||||
|
|
||||||
const colClasses = {
|
const colClasses = {
|
||||||
mobile: {
|
mobile: {
|
||||||
1: 'col-span-1',
|
1: "col-span-1",
|
||||||
2: 'col-span-2',
|
2: "col-span-2",
|
||||||
3: 'col-span-3',
|
3: "col-span-3",
|
||||||
4: 'col-span-4',
|
4: "col-span-4",
|
||||||
5: 'col-span-5',
|
5: "col-span-5",
|
||||||
6: 'col-span-6',
|
6: "col-span-6",
|
||||||
},
|
},
|
||||||
tablet: {
|
tablet: {
|
||||||
1: '@sm:col-span-1',
|
1: "@sm:col-span-1",
|
||||||
2: '@sm:col-span-2',
|
2: "@sm:col-span-2",
|
||||||
3: '@sm:col-span-3',
|
3: "@sm:col-span-3",
|
||||||
4: '@sm:col-span-4',
|
4: "@sm:col-span-4",
|
||||||
5: '@sm:col-span-5',
|
5: "@sm:col-span-5",
|
||||||
6: '@sm:col-span-6',
|
6: "@sm:col-span-6",
|
||||||
},
|
},
|
||||||
desktop: {
|
desktop: {
|
||||||
1: '@lg:col-span-1',
|
1: "@lg:col-span-1",
|
||||||
2: '@lg:col-span-2',
|
2: "@lg:col-span-2",
|
||||||
3: '@lg:col-span-3',
|
3: "@lg:col-span-3",
|
||||||
4: '@lg:col-span-4',
|
4: "@lg:col-span-4",
|
||||||
5: '@lg:col-span-5',
|
5: "@lg:col-span-5",
|
||||||
6: '@lg:col-span-6',
|
6: "@lg:col-span-6",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -183,19 +200,17 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
value: {
|
value: {
|
||||||
type: String,
|
type: String,
|
||||||
default: () => '{}',
|
default: () => "{}",
|
||||||
},
|
},
|
||||||
baseUrl: {},
|
baseUrl: {},
|
||||||
});
|
});
|
||||||
|
|
||||||
axios.defaults.baseURL = props.baseUrl;
|
|
||||||
|
|
||||||
const active = ref(0);
|
const active = ref(0);
|
||||||
const payload = ref({});
|
const payload = ref({});
|
||||||
const loaded = ref(false);
|
const loaded = ref(false);
|
||||||
|
|
||||||
watch(active, function (newValue) {
|
watch(active, function (newValue) {
|
||||||
emits('active', v.value.sections.length ? active.value : null);
|
emits("active", v.value.sections.length ? active.value : null);
|
||||||
});
|
});
|
||||||
|
|
||||||
const v = computed(() => {
|
const v = computed(() => {
|
||||||
|
|
@ -210,12 +225,18 @@ const v = computed(() => {
|
||||||
});
|
});
|
||||||
payload.value = p;
|
payload.value = p;
|
||||||
loaded.value = true;
|
loaded.value = true;
|
||||||
active.value = Math.max(0, Math.min(active.value, values.sections.length - 1));
|
active.value = Math.max(
|
||||||
emits('active', values.sections.length ? active.value : null);
|
0,
|
||||||
|
Math.min(active.value, values.sections.length - 1)
|
||||||
|
);
|
||||||
|
emits("active", values.sections.length ? active.value : null);
|
||||||
return values;
|
return values;
|
||||||
});
|
});
|
||||||
|
|
||||||
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) {
|
function resolveComponentName(field) {
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
<div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]">
|
<div class="mt-4 md:mt-6 grid gap-4 grid-cols-[repeat(auto-fill,minmax(250px,1fr))]">
|
||||||
<a v-for="(event, index) in events" :key="index" :href="props.urlPattern.replace('{slug}', event.slug)"
|
<a v-for="(event, index) in events" :key="index" :href="props.urlPattern.replace('{slug}', event.slug)"
|
||||||
class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group">
|
class="relative top-0 transition-all duration-200 hover:top-[-10px] shadow-lg hover:shadow-2xl rounded-lg bg-white flex flex-col overflow-hidden group">
|
||||||
|
<img :src="event.image" />
|
||||||
<div class="p-6 flex flex-col">
|
<div class="p-6 flex flex-col">
|
||||||
<h2 class="font-arvo flex-none text-primary-700 text-sm md:text-base" v-text="event.name"></h2>
|
<h2 class="font-arvo flex-none text-primary-700 text-sm md:text-base" v-text="event.name"></h2>
|
||||||
<div class="flex items-baseline text-sm">
|
<div class="flex items-baseline text-sm">
|
||||||
|
|
@ -9,19 +10,20 @@
|
||||||
<span class="text-sm font-semibold text-gray-800 ml-2" v-text="event.dates"></span>
|
<span class="text-sm font-semibold text-gray-800 ml-2" v-text="event.dates"></span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex-grow c text-sm mt-3" v-text="event.excerpt"></div>
|
<div class="flex-grow c text-sm mt-3" v-text="event.excerpt"></div>
|
||||||
<div class="bg-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3">Zur
|
<div class="bg-primary focus:ring-2 text-font rounded-lg text-xs sm:text-sm py-1 text-center mt-3">
|
||||||
Anmeldung</div>
|
Zur Anmeldung
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from "vue";
|
||||||
import CalendarIcon from './components/icons/CalendarIcon.vue';
|
import CalendarIcon from "./components/icons/CalendarIcon.vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
baseUrl: {
|
url: {
|
||||||
required: true,
|
required: true,
|
||||||
type: String,
|
type: String,
|
||||||
},
|
},
|
||||||
|
|
@ -31,12 +33,10 @@ const props = defineProps({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
axios.defaults.baseURL = props.baseUrl;
|
|
||||||
|
|
||||||
const events = ref([]);
|
const events = ref([]);
|
||||||
|
|
||||||
async function reloadEvents() {
|
async function reloadEvents() {
|
||||||
const results = await axios.get('/api/form');
|
const results = await axios.get(props.url);
|
||||||
events.value = results.data.data;
|
events.value = results.data.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
24
src/main.js
24
src/main.js
|
|
@ -1,19 +1,23 @@
|
||||||
import {defineCustomElement} from 'vue';
|
import { defineCustomElement } from "vue";
|
||||||
import classes from './style.css?inline';
|
import classes from "./style.css?inline";
|
||||||
import carousel from 'vue3-carousel/dist/carousel.css?inline';
|
import carousel from "vue3-carousel/dist/carousel.css?inline";
|
||||||
import carouselStyle from './carousel.css?inline';
|
import carouselStyle from "./carousel.css?inline";
|
||||||
import Eventoverview from './Eventoverview.ce.vue';
|
import Eventoverview from "./Eventoverview.ce.vue";
|
||||||
import Eventform from './Eventform.ce.vue';
|
import Eventform from "./Eventform.ce.vue";
|
||||||
|
|
||||||
import axios from 'axios';
|
import axios from "axios";
|
||||||
window.axios = axios;
|
window.axios = axios;
|
||||||
|
|
||||||
window.hasKeys = function (object, expected) {
|
window.hasKeys = function (object, expected) {
|
||||||
return typeof object === 'object' && JSON.stringify(Object.keys(object).sort()) === JSON.stringify(expected.sort());
|
return (
|
||||||
|
typeof object === "object" &&
|
||||||
|
JSON.stringify(Object.keys(object).sort()) ===
|
||||||
|
JSON.stringify(expected.sort())
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
Eventform.styles = [classes, carousel, carouselStyle];
|
Eventform.styles = [classes, carousel, carouselStyle];
|
||||||
Eventoverview.styles = [classes];
|
Eventoverview.styles = [classes];
|
||||||
|
|
||||||
customElements.define('event-form', defineCustomElement(Eventform));
|
customElements.define("event-form", defineCustomElement(Eventform));
|
||||||
customElements.define('event-overview', defineCustomElement(Eventoverview));
|
customElements.define("event-overview", defineCustomElement(Eventoverview));
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue