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

Add container queries

This commit is contained in:
Philipp Lang 2023-12-26 03:33:00 +01:00
parent d295efc187
commit 047a1ad5e2
12 changed files with 1444 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1397
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -12,6 +12,7 @@
"vue": "^3.3.11" "vue": "^3.3.11"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/container-queries": "^0.1.1",
"@vitejs/plugin-vue": "^4.5.2", "@vitejs/plugin-vue": "^4.5.2",
"change-case": "^5.3.0", "change-case": "^5.3.0",
"vite": "^5.0.8", "vite": "^5.0.8",

72
src/Eventform.ce.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div> <div>
<form v-if="loaded" 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="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="{'bg-primary': index <= active, 'bg-secondary': index > active}"
@click.prevent="active = index" @click.prevent="active = index"
> >
@ -18,16 +18,16 @@
> >
<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>
</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" @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"> <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
@ -37,7 +37,7 @@
</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"
@ -48,20 +48,22 @@
<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>
<carousel v-model="active" class="grow"> <div class="overflow-hidden">
<slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden"> <carousel v-model="active">
<div class="flex-none w-full"> <slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden">
<div <div class="flex-none w-full">
href="#" <div
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" href="#"
@click="active = index" 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> >
<span class="text-sm text-font" v-html="section.name"></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>
<span class="text-sm text-font" v-html="section.name"></span>
</div>
</div> </div>
</div> </slide>
</slide> </carousel>
</carousel> </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"
@ -74,12 +76,12 @@
</a> </a>
</div> </div>
<div class="py-4 xs:py-8"> <div class="py-4 @xs:py-8">
<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 v-if="active === index" 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" v-for="(field, findex) in section.fields"
:key="findex" :key="findex"
@ -150,20 +152,20 @@ const colClasses = {
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',
}, },
}; };

2
src/components/FieldLabel.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<span class="absolute text-gray-600 flex bg-white items-center -top-3 px-1 text-xs xs:text-sm" :class="{'left-0': inline, 'left-2': !inline}"> <span class="absolute text-gray-600 flex bg-white items-center -top-3 px-1 text-xs @sm:text-sm" :class="{'left-0': inline, 'left-2': !inline}">
<span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span> <span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span>
</span> </span>
</template> </template>

2
src/components/Navigation.vue
View File

@ -1,5 +1,5 @@
<template> <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 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-font leading-none cursor-pointer rounded-lg" @click.prevent="back">Zurück</div> <div v-if="backable" class="bg-primary hover:bg-secondary px-4 py-2 shadow text-font leading-none cursor-pointer rounded-lg" @click.prevent="back">Zurück</div>
<div v-if="nextable" class="bg-primary hover:bg-secondary px-4 py-2 shadow text-font leading-none cursor-pointer rounded-lg" @click.prevent="next">Weiter</div> <div v-if="nextable" class="bg-primary hover:bg-secondary px-4 py-2 shadow text-font 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-secondary px-8 py-2 shadow text-font leading-none cursor-pointer rounded-lg"> <button v-else type="submit" class="relative flex items-center bg-primary hover:bg-secondary px-8 py-2 shadow text-font leading-none cursor-pointer rounded-lg">

2
src/components/fields/Checkbox.vue
View File

@ -5,7 +5,7 @@
<input :id="field.key" v-model="inner" type="checkbox" :name="field.key" class="peer absolute invisible" /> <input :id="field.key" v-model="inner" type="checkbox" :name="field.key" 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 block"></span> <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span> <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
<span class="pl-8 text-gray-600" v-text="field.description"></span> <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="field.description"></span>
</label> </label>
</div> </div>

2
src/components/fields/Checkboxes.vue
View File

@ -5,7 +5,7 @@
<input :id="`${field.key}-${index}`" v-model="inner" type="checkbox" :name="field.key" :value="option" class="peer absolute invisible" /> <input :id="`${field.key}-${index}`" v-model="inner" type="checkbox" :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 block"></span> <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span> <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
<span class="pl-8 text-gray-600" v-text="option"></span> <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
</label> </label>
</div> </div>

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

@ -1,6 +1,6 @@
<template> <template>
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="field.key"> <label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex" :for="field.key">
<select :name="field.key" :id="field.key" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full" v-model="inner"> <select :name="field.key" :id="field.key" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left peer py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full" v-model="inner">
<option :value="null">-- kein --</option> <option :value="null">-- kein --</option>
<option v-for="(option, index) in field.options" :key="index" :value="option" v-text="option"></option> <option v-for="(option, index) in field.options" :key="index" :value="option" v-text="option"></option>
</select> </select>

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

@ -5,7 +5,7 @@
<input :id="`${field.key}-${index}`" v-model="inner" type="radio" :name="field.key" :value="option" class="peer absolute invisible" /> <input :id="`${field.key}-${index}`" v-model="inner" 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="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="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
<span class="pl-8 text-gray-600" v-text="option"></span> <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
</label> </label>
</div> </div>

2
src/components/fields/Text.vue
View File

@ -6,7 +6,7 @@
:name="field.key" :name="field.key"
type="text" type="text"
placeholder="" placeholder=""
class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full"
/> />
<field-label :name="field.name" :required="field.required"></field-label> <field-label :name="field.name" :required="field.required"></field-label>
</label> </label>

2
src/components/fields/Textarea.vue
View File

@ -5,7 +5,7 @@
v-model="inner" v-model="inner"
:name="field.key" :name="field.key"
:rows="field.rows" :rows="field.rows"
class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full" class="bg-white rounded-lg focus:outline-none text-gray-600 text-left py-1 px-2 @sm:py-2 text-sm @sm:text-base @sm:px-3 w-full"
/> />
<field-label :name="field.name" :required="field.required"></field-label> <field-label :name="field.name" :required="field.required"></field-label>
</label> </label>

2
tailwind.config.js
View File

@ -22,5 +22,5 @@ export default {
}, },
}, },
}, },
plugins: [], plugins: [require('@tailwindcss/container-queries')],
}; };