Add edit mode
This commit is contained in:
philipp lang
parent
8a12d49c64
commit
fcbc2922a3
|
|
@ -20,6 +20,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>
|
||||
|
|
|
|||
|
|
@ -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,8 +20,22 @@
|
|||
</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="#" @click.prevent.stop="$emit('editSection', index)" class="bg-primary rounded-full flex w-5 h-5 items-center justify-center text-font ml-2">
|
||||
<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="#" @click.prevent.stop="$emit('addSection')" class="bg-primary 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">
|
||||
<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
|
||||
|
|
@ -66,7 +80,19 @@
|
|||
<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)" v-for="(field, findex) in section.fields" :key="findex" v-model="payload[field.key]" :field="field"></component>
|
||||
<div class="flex justify-stretch" :class="{'hover:ring-edit hover:ring-4': editable}" v-for="(field, findex) in section.fields" :key="findex">
|
||||
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :field="field"></component>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="editable" class="flex justify-center mt-6 relative">
|
||||
<a href="#" class="bg-primary rounded-full flex w-8 h-8 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-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>
|
||||
|
||||
|
|
@ -88,15 +114,23 @@ import useNav from './composables/useNav.js';
|
|||
import FieldText from './components/fields/Text.vue';
|
||||
import FieldSelect from './components/fields/Select.vue';
|
||||
import FieldRadio from './components/fields/Radio.vue';
|
||||
import EditIcon from './components/icons/EditIcon.vue';
|
||||
|
||||
const emits = defineEmits(['editSection']);
|
||||
|
||||
const props = defineProps({
|
||||
eventId: {
|
||||
type: Number,
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
value: {
|
||||
type: String,
|
||||
default: () => '{}',
|
||||
},
|
||||
fields: {},
|
||||
});
|
||||
|
||||
const finished = ref(false);
|
||||
|
|
@ -105,6 +139,8 @@ 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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -4,6 +4,9 @@ export default {
|
|||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
edit: {
|
||||
DEFAULT: 'hsl(20, 77%, 55%)',
|
||||
},
|
||||
primary: {
|
||||
DEFAULT: 'var(--primary)',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,25 +1,28 @@
|
|||
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({
|
||||
plugins: [
|
||||
vue({
|
||||
template: {
|
||||
compilerOptions: {
|
||||
isCustomElement: (tag) => tag.includes("event-form"),
|
||||
plugins: [
|
||||
vue({
|
||||
template: {
|
||||
compilerOptions: {
|
||||
isCustomElement: (tag) => tag.includes('event-form'),
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
lib: {
|
||||
entry: './src/main.js',
|
||||
name: 'main',
|
||||
fileName: 'main',
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
build: {
|
||||
lib: {
|
||||
entry: "./src/main.js",
|
||||
name: "main",
|
||||
fileName: "main",
|
||||
},
|
||||
},
|
||||
define: {
|
||||
"process.env": process.env,
|
||||
},
|
||||
define: {
|
||||
'process.env': process.env,
|
||||
},
|
||||
server: {
|
||||
port: 5174,
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue