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

Compare commits

base: silva:d84c48e0fa422bbc4f3676724d73eaea524eb173
Branches Tags
silva:master
silva:dev
...
compare: silva:94bb663ae1222425e470657e5f4ef91a86c347a7
Branches Tags
silva:master
silva:dev

9 Commits
d84c48e0fa ... 94bb663ae1

Author SHA1 Message Date
philipp lang 94bb663ae1 Add cols 2023-12-26 01:18:09 +01:00
philipp lang 8cd6af3221 Add checkboxes 2023-12-26 00:59:18 +01:00
philipp lang af277e34ad mod fields 2023-12-26 00:41:36 +01:00
philipp lang 22ca4ba796 fix radio item color 2023-12-26 00:41:18 +01:00
philipp lang 2706501f8e Add delete event for fields 2023-12-25 22:43:28 +01:00
philipp lang d52691cb76 add events 2023-12-25 22:42:22 +01:00
philipp lang 34ece5924e mod colors 2023-12-25 22:42:07 +01:00
philipp lang fcbc2922a3 Add edit mode 2023-12-25 21:15:25 +01:00
philipp lang 8a12d49c64 Lint 2023-12-25 19:16:08 +01:00
11 changed files with 324 additions and 35 deletions
Show Stats Expand all files Collapse all files

10
index.html
View File

@ -7,11 +7,13 @@
</head>
<body style="padding: 50px">
<event-form
style="--primary: yellow; --secondary: green; --font: #ff6600; --circle: #111111"
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
value='{"sections": [
{"name": "Personal", "intro": "Jaöaöd", "fields": [
{"name": "Vorname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true},
{"name": "Geschlecht", "type": "SelectField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"name": "Vorname", "type": "TextField", "columns": {"mobile": 1, "tablet": 2, "desktop": 3}, "default": "", "required": true},
{"name": "Essen", "type": "CheckboxesField", "columns": {"mobile": 1, "tablet": 2, "desktop": 3}, "default": [], "required": true, "options": ["lal", "fff", "ccc"]},
{"name": "Datenschutz", "description": "Ich akzeptire das abfghg", "type": "CheckboxField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": false, "required": true},
{"name": "Geschlecht", "type": "DropdownField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"name": "Essgewohnheiten", "type": "RadioField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"name": "Nachname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true}
]},
@ -20,6 +22,8 @@
{"name": "Abschicken", "intro": "Jaöaöd", "fields": [
]}
]}'
fields='[{"id":"TextField","name":"Text","default":{"name":"","type":"TextField","columns":{"mobile":2,"tablet":4,"desktop":12},"default":"","required":false}}]'
editable
></event-form>
<script type="module" src="src/main.js"></script>
</body>

110
src/Eventform.ce.vue
View File

@ -2,11 +2,11 @@
<div>
<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="sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg">
<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
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-full transition duration-300 relative"
:class="{'bg-primary': index <= active, 'bg-secondary': index > active}"
@click.prevent="active = index"
>
@ -20,27 +20,41 @@
</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="text-sm text-font ml-2" v-html="section.name"></span>
<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)">
<edit-icon class="w-3 h-3 fill-current"></edit-icon>
</a>
</div>
</a>
</template>
<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')">
<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
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>
</a>
</div>
</div>
<div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg sm:hidden bg-secondary">
<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}"
@click.prevent="back"
>
<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" :key="index" class="relative flex flex-no-wrap overflow-hidden">
<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"
@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>
@ -49,10 +63,10 @@
</slide>
</carousel>
<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}"
@click.prevent="next"
>
<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" />
@ -62,11 +76,41 @@
<div class="py-4 xs:py-8">
<carousel v-model="active">
<slide :key="index" v-for="(section, index) in v.sections">
<slide v-for="(section, index) in v.sections" :key="index">
<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="grid grid-cols-2 gap-4 mt-6 items-start">
<component :is="resolveComponentName(field)" :field="field" v-for="(field, findex) in section.fields" :key="findex" v-model="payload[field.key]"></component>
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4 mt-6 items-start">
<div
v-for="(field, findex) in section.fields"
:key="findex"
class="flex justify-stretch relative group"
:class="{
'hover:ring-edit hover:ring-4': editable,
[colClasses.mobile[field.columns.mobile]]: true,
[colClasses.tablet[field.columns.tablet]]: true,
[colClasses.desktop[field.columns.desktop]]: true,
}"
>
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :field="field"></component>
<div v-if="editable" 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>
</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>
</div>
</div>
</div>
<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)">
<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
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>
</a>
</div>
</div>
@ -86,17 +130,56 @@ import {camelCase} from 'change-case';
import Navigation from './components/Navigation.vue';
import useNav from './composables/useNav.js';
import FieldText from './components/fields/Text.vue';
import FieldSelect from './components/fields/Select.vue';
import FieldTextarea from './components/fields/Textarea.vue';
import FieldDropdown from './components/fields/Dropdown.vue';
import FieldCheckboxes from './components/fields/Checkboxes.vue';
import FieldCheckbox from './components/fields/Checkbox.vue';
import FieldRadio from './components/fields/Radio.vue';
import EditIcon from './components/icons/EditIcon.vue';
import DeleteIcon from './components/icons/DeleteIcon.vue';
const emits = defineEmits(['editSection']);
const colClasses = {
mobile: {
1: 'col-span-1',
2: 'col-span-2',
3: 'col-span-3',
4: 'col-span-4',
5: 'col-span-5',
6: 'col-span-6',
},
tablet: {
1: 'sm:col-span-1',
2: 'sm:col-span-2',
3: 'sm:col-span-3',
4: 'sm:col-span-4',
5: 'sm:col-span-5',
6: 'sm:col-span-6',
},
desktop: {
1: 'lg:col-span-1',
2: 'lg:col-span-2',
3: 'lg:col-span-3',
4: 'lg:col-span-4',
5: 'lg:col-span-5',
6: 'lg:col-span-6',
},
};
const props = defineProps({
eventId: {
type: Number,
},
editable: {
type: Boolean,
default: () => false,
},
value: {
type: String,
default: () => '{}',
},
fields: {},
});
const finished = ref(false);
@ -105,14 +188,19 @@ const payload = ref({});
const loaded = ref(false);
const v = computed(() => JSON.parse(props.value));
const f = computed(() => JSON.parse(props.fields));
const addingFields = ref(false);
const {back, next, backable, nextable} = useNav(active, v.value.sections.length);
function resolveComponentName(field) {
return {
TextField: FieldText,
SelectField: FieldSelect,
TextareaField: FieldTextarea,
DropdownField: FieldDropdown,
RadioField: FieldRadio,
CheckboxesField: FieldCheckboxes,
CheckboxField: FieldCheckbox,
}[field.type];
}

43
src/components/fields/Checkbox.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3">
<label :for="field.key" class="block relative flex items-center">
<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="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>
</label>
</div>
<field-label :name="field.name" :required="field.required" inline></field-label>
</div>
</template>
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {
required: true,
validator: (value) => value === true || value === false,
},
field: {
required: true,
validator: (value) =>
hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default', 'description']) &&
typeof value.required === 'boolean' &&
typeof value.key === 'string' &&
value.key.length > 0 &&
typeof value.name === 'string' &&
typeof value.description === 'string' &&
value.name.length > 0,
},
});
const inner = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
});
</script>

44
src/components/fields/Checkboxes.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3">
<label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-center">
<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="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>
</label>
</div>
<field-label :name="field.name" :required="field.required" inline></field-label>
</div>
</template>
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: {
required: true,
validator: (value) => Array.isArray(value),
},
field: {
required: true,
validator: (value) =>
hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default', 'options']) &&
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']) &&
typeof value.options === 'object',
},
});
const inner = computed({
get: () => props.modelValue,
set: (v) => emit('update:modelValue', v),
});
</script>

0
src/components/fields/Select.vue → src/components/fields/Dropdown.vue
View File

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

@ -2,10 +2,10 @@
<div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3">
<label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-center">
<input type="radio" :name="field.key" :value="option" v-model="inner" class="peer absolute invisible" :id="`${field.key}-${index}`" />
<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="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-full block"></span>
<span class="pl-8" v-text="option"></span>
<span class="pl-8 text-gray-600" v-text="option"></span>
</label>
</div>

41
src/components/fields/Textarea.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<label class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex">
<textarea
:id="field.key"
v-model="inner"
:name="field.key"
: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"
/>
<field-label :name="field.name" :required="field.required"></field-label>
</label>
</template>
<script setup>
import {computed} from 'vue';
import FieldLabel from '../FieldLabel.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', 'type', '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>

34
src/components/icons/DeleteIcon.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<svg
id="Capa_1"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 512 512"
style="enable-background: new 0 0 512 512"
xml:space="preserve"
>
<g>
<g>
<path
d="M486.4,102.4h-128V25.6c0-15.36-10.24-25.6-25.6-25.6H179.2c-15.36,0-25.6,10.24-25.6,25.6v76.8h-128
C10.24,102.4,0,112.64,0,128s10.24,25.6,25.6,25.6h460.8c15.36,0,25.6-10.24,25.6-25.6S501.76,102.4,486.4,102.4z M307.2,102.4
H204.8V51.2h102.4V102.4z"
/>
</g>
</g>
<g>
<g>
<path
d="M25.6,204.8l48.64,284.16c2.56,12.8,12.8,23.04,25.6,23.04h312.32c12.8,0,23.04-10.24,25.6-23.04L486.4,204.8H25.6z
M153.6,460.8c-15.36,0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6l25.6,153.6
C179.2,450.56,168.96,460.8,153.6,460.8z M281.6,435.2c0,15.36-10.24,25.6-25.6,25.6s-25.6-10.24-25.6-25.6V281.6
c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6V435.2z M384,435.2c0,15.36-10.24,25.6-25.6,25.6
c-15.36,0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36,10.24-25.6,25.6-25.6s25.6,10.24,25.6,25.6L384,435.2z"
/>
</g>
</g>
</svg>
</template>

29
src/components/icons/EditIcon.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 512 512"
style="enable-background: new 0 0 512 512"
xml:space="preserve"
>
<g>
<g>
<polygon points="51.2,353.28 0,512 158.72,460.8 " />
</g>
</g>
<g>
<g>
<rect x="89.73" y="169.097" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -95.8575 260.3719)" width="353.277" height="153.599" />
</g>
</g>
<g>
<g>
<path d="M504.32,79.36L432.64,7.68c-10.24-10.24-25.6-10.24-35.84,0l-23.04,23.04l107.52,107.52l23.04-23.04 C514.56,104.96,514.56,89.6,504.32,79.36z" />
</g>
</g>
</svg>
</template>

3
tailwind.config.js
View File

@ -4,6 +4,9 @@ export default {
theme: {
extend: {
colors: {
edit: {
DEFAULT: 'hsl(20, 77%, 55%)',
},
primary: {
DEFAULT: 'var(--primary)',
},

17
vite.config.js
View File

@ -1,5 +1,5 @@
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import {defineConfig} from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
@ -7,19 +7,22 @@ export default defineConfig({
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.includes("event-form"),
isCustomElement: (tag) => tag.includes('event-form'),
},
},
}),
],
build: {
lib: {
entry: "./src/main.js",
name: "main",
fileName: "main",
entry: './src/main.js',
name: 'main',
fileName: 'main',
},
},
define: {
"process.env": process.env,
'process.env': process.env,
},
server: {
port: 5174,
},
});