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

Compare commits

base: silva:4edc8ee3d25b2cd64f2eeb14574f37d6c3920efe
Branches Tags
silva:master
silva:dev
..
compare: silva:010825124f7791dfc0dc607e23ec99f49be8aef5
Branches Tags
silva:master
silva:dev

4 Commits
4edc8ee3d2 ... 010825124f

Author SHA1 Message Date
philipp lang 010825124f Add import mode for direct importing in vite apps 2026-05-05 02:45:25 +02:00
philipp lang 3e234966b2 Add copy icon and move icon 2026-05-05 02:22:15 +02:00
philipp lang 202da1ec47 add documentation for EventForm sections 2026-05-05 02:22:15 +02:00
philipp lang b40c970b6f update index page 2026-05-05 02:22:15 +02:00
6 changed files with 119 additions and 24 deletions
Show Stats Expand all files Collapse all files

67
index.html
View File

@ -4,6 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
<!-- base url for the adrema API. Normally this is something like /plugins/api/silva/adrema, if this is running on an external website -->
<meta name="adrema_base_url" content="/" />
</head>
<body>
@ -67,17 +69,78 @@
}
],
"intro": null
},
{
"name": "sdfs",
"fields": [
{
"required": true,
"key": "vorname",
"name": "Vorname",
"nami_type": null,
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 6
},
"for_members": true,
"special_type": null,
"hint": null,
"intro": null,
"value": null,
"type": "TextField"
},
{
"required": true,
"key": "nachname",
"name": "Nachname",
"nami_type": null,
"columns": {
"mobile": 2,
"tablet": 4,
"desktop": 3
},
"for_members": true,
"special_type": null,
"hint": null,
"intro": null,
"value": null,
"type": "TextField"
},
{
"required": true,
"key": "mail",
"name": "Mail",
"nami_type": null,
"columns": {
"mobile": 1,
"tablet": 2,
"desktop": 3
},
"for_members": true,
"special_type": null,
"hint": null,
"intro": null,
"value": null,
"type": "EmailField"
}
],
"intro": null
}
]
}'
payload='{"vorname": "Philipp", "nachname": "Lang", "mail": "a@b.de"}'
url="http://localhost:8000"
editable
></event-form>
<event-overview
<event-index
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="http://localhost:8000/api/form"
></event-overview>
index-url="http://frontend.local/events"
single-url="http://frontend.local/event/{slug}"
register-url="http://frontend.local/event/{slug}/register"
></event-index>
<script type="module" src="src/main.js"></script>
</body>
</html>

1
package.json
View File

@ -7,6 +7,7 @@
"dev": "vite",
"build": "vite build",
"build-dev": "vite build --sourcemap inline",
"build-import": "vite build --mode=import",
"preview": "vite preview"
},
"dependencies": {

12
src/EventForm.ce.vue
View File

@ -2,6 +2,7 @@
<div>
<form ref="eventForm" v-if="loaded" novalidate @submit.prevent="submit">
<div v-if="finished === false" class="bg-white @container rounded-lg shadow-lg">
<!-- section list - desktop; with vertical arrows -->
<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">
<a
@ -46,6 +47,8 @@
</a>
</div>
</div>
<!-- section list - mobile; display just the current section -->
<div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
<a
href="#"
@ -79,6 +82,7 @@
</a>
</div>
<!-- form fields list -->
<div class="py-4 @xs:py-8">
<carousel :touch-drag="false" :mouse-drag="false" v-model="active">
<slide v-for="(section, index) in v.sections" :key="index">
@ -99,6 +103,12 @@
<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>
</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('copyField', index, findex)">
<copy-icon class="w-3 h-3 fill-current"></copy-icon>
</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('moveField', index, findex)">
<move-icon class="w-3 h-3 fill-current"></move-icon>
</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)">
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
</a>
@ -144,6 +154,8 @@ import {Carousel, Slide} from 'vue3-carousel';
import Navigation from './components/Navigation.vue';
import useNav from './composables/useNav.js';
import EditIcon from './components/icons/EditIcon.vue';
import CopyIcon from './components/icons/CopyIcon.vue';
import MoveIcon from './components/icons/MoveIcon.vue';
import DeleteIcon from './components/icons/DeleteIcon.vue';
import useToastify from './composables/useToastify.js';
import useFields from './composables/useFields.js';

3
src/components/icons/CopyIcon.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M6 6V2c0-1.1.9-2 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-4v4a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h4zm2 0h4a2 2 0 0 1 2 2v4h4V2H8v4zM2 8v10h10V8H2z"/></svg>
</template>

9
src/components/icons/MoveIcon.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<svg x="0px" y="0px" viewBox="0 0 421.285 421.285">
<g>
<g>
<path d="M418.742,203.942c-0.3-0.2-0.5-0.5-0.8-0.8l-50.6-44.8c-4.1-3.6-10.5-3.2-14.1,0.9c-3.6,4.1-3.2,10.4,0.8,14l30.9,27.4 h-164.3v-164.3l27.3,30.8c3.7,4.1,10,4.5,14.1,0.8s4.5-10,0.8-14.1l-44.8-50.5c-3.7-4.1-10-4.5-14.1-0.8c-0.3,0.3-0.6,0.5-0.8,0.8 l-44.8,50.5c-3.6,4.1-3.2,10.5,0.9,14.1c4.1,3.6,10.4,3.2,14-0.8l27.3-30.8v164.3h-164.2l30.8-27.3c4.1-3.7,4.5-10,0.8-14.1 c-3.7-4.1-10-4.5-14.1-0.8l-50.5,44.8c-4.1,3.7-4.5,10-0.8,14.1c0.3,0.3,0.5,0.6,0.8,0.8l50.5,44.8c4.1,3.6,10.5,3.2,14.1-0.9 c3.6-4.1,3.2-10.4-0.8-14l-30.8-27.4h164.3v164.3l-27.3-30.8c-3.7-4.1-10-4.5-14.1-0.8c-4.1,3.7-4.5,10-0.8,14.1l44.8,50.5 c3.7,4.1,10,4.5,14.1,0.8c0.3-0.3,0.6-0.5,0.8-0.8l44.8-50.5c3.6-4.1,3.2-10.5-0.9-14.1c-4.1-3.6-10.4-3.2-14,0.8l-27.4,30.8 v-164.3h164.3l-30.8,27.3c-4.1,3.7-4.5,10-0.8,14.1c3.7,4.1,10,4.5,14.1,0.8l50.5-44.8 C422.042,214.342,422.442,208.042,418.742,203.942z"/>
</g>
</g>
</svg>
</template>

51
vite.config.js
View File

@ -2,27 +2,34 @@ import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes('event-form') || tag.includes('event-index') || tag.includes('event-description'),
export default defineConfig(({mode}) => {
return {
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes('event-form') || tag.includes('event-index') || tag.includes('event-description'),
},
},
},
}),
],
build: {
manifest: 'manifest.json',
rollupOptions: {
input: 'src/main.js',
}
},
define: {
'process.env': process.env,
},
server: {
port: 5174,
host: '0.0.0.0',
},
}),
],
build: {
manifest: 'manifest.json',
rollupOptions: {
input: 'src/main.js',
output: {
entryFileNames: mode === 'import' ? `assets/[name].js` : `assets/[name]-[hash].js`,
chunkFileNames: mode === 'import' ? `assets/[name].js` : `assets/[name]-[hash].js`,
assetFileNames: mode === 'import' ? `assets/[name].[ext]` : `assets/[name]-[hash].[ext]`,
}
}
},
define: {
'process.env': process.env,
},
server: {
port: 5174,
host: '0.0.0.0',
},
};
});