add fields

index.html

@@ -9,9 +9,14 @@
         <event-form
             style="--primary: yellow; --secondary: green; --font: #ff6600; --circle: #111111"
             value='{"sections": [
-            {"name": "Personal"},
+            {"name": "Personal", "intro": "Jaöaöd", "fields": [
-            {"name": "Veranstaltung"},
+                {"name": "Vorname", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "required": true},
-            {"name": "Abschicken"}
+                {"name": "Nachname", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "required": true}
+            ]},
+            {"name": "Veranstaltung", "intro": "Jaöaöd", "fields": [
+            ]},
+            {"name": "Abschicken", "intro": "Jaöaöd", "fields": [
+            ]}
         ]}'
         ></event-form>
         <script type="module" src="src/main.js"></script>

package-lock.json

@@ -12,7 +12,9 @@
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.5.2",
-        "vite": "^5.0.8"
+        "change-case": "^5.3.0",
+        "vite": "^5.0.8",
+        "vue3-carousel": "^0.3.1"
       }
     },
     "node_modules/@babel/parser": {
@@ -683,6 +685,12 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz",
       "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA=="
     },
+    "node_modules/change-case": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.3.0.tgz",
+      "integrity": "sha512-Eykca0fGS/xYlx2fG5NqnGSnsWauhSGiSXYhB1kO6E909GUfo8S54u4UZNS7lMJmgZumZ2SUpWaoLgAcfQRICg==",
+      "dev": true
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -916,6 +924,15 @@
           "optional": true
         }
       }
+    },
+    "node_modules/vue3-carousel": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/vue3-carousel/-/vue3-carousel-0.3.1.tgz",
+      "integrity": "sha512-86vUkNPBzL2PVuR9w6hUsI90ccFjLp+K8cSFpRTISf+SjUQY3fMHc5CFF5MUL62v1xYYm27zEBmQupO9VQx9Kw==",
+      "dev": true,
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
     }
   }
 }

package.json

@@ -13,6 +13,8 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.5.2",
-    "vite": "^5.0.8"
+    "change-case": "^5.3.0",
+    "vite": "^5.0.8",
+    "vue3-carousel": "^0.3.1"
   }
 }

src/Eventform.ce.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <form 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="sticky top-0 z-10 hidden sm:flex overflow-hidden rounded-t-lg">
                     <template v-for="(section, index) in v.sections">
@@ -23,6 +23,74 @@
                         </a>
                     </template>
                 </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': active == 0}"
+                    >
+                        <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">
+                            <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"
+                                >
+                                    <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>
+                        </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': active == v.sections.length - 1}"
+                    >
+                        <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>
+                </div>
+
+                <div class="py-4 xs:py-8">
+                    <carousel v-model="active">
+                        <slide :key="index" v-for="(section, index) in v.sections">
+                            <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">
+                                    <label
+                                        v-for="(field, findex) in section.fields"
+                                        :key="findex"
+                                        class="w-full border border-solid border-gray-500 focus-within:border-primary rounded-lg relative flex"
+                                    >
+                                        <input
+                                            :name="field.key"
+                                            type="text"
+                                            :id="field.key"
+                                            placeholder=" "
+                                            class="bg-white rounded-lg focus:outline-none text-gray-600 text-left placeholder-white peer py-1 px-2 sm:py-2 text-sm sm:text-base sm:px-3 w-full"
+                                            v-model="payload[field.key]"
+                                        />
+                                        <span
+                                            class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 text-xs xs:text-sm peer-placeholder-shown:text-sm xs:peer-placeholder-shown:text-base peer-focus:text-xs xs:peer-focus:text-sm peer-focus:-top-3 peer-focus:bottom-auto"
+                                            ><span v-text="field.name"></span> <span v-if="field.required" class="text-red-800 ml-1">*</span></span
+                                        >
+                                    </label>
+                                </div>
+                            </div>
+                        </slide>
+                        <slide :key="1"> bb </slide>
+                        <slide :key="2"> cc </slide>
+                    </carousel>
+                </div>
             </div>
         </form>
     </div>
@@ -30,6 +98,8 @@
 
 <script setup>
 import {computed, ref} from 'vue';
+import {Carousel, Slide} from 'vue3-carousel';
+import {camelCase} from 'change-case';
 
 const props = defineProps({
     eventId: {
@@ -43,6 +113,35 @@ const props = defineProps({
 
 const finished = ref(false);
 const active = ref(0);
+const payload = ref({});
+const loaded = ref(false);
 
 const v = computed(() => JSON.parse(props.value));
+
+function back() {
+    active.value = Math.max(0, active.value - 1);
+}
+
+function next() {
+    active.value = Math.min(v.value.sections.length - 1, active.value + 1);
+}
+
+function generateDefaultValues() {
+    payload.value = {};
+    v.value.sections = v.value.sections.map(function (section) {
+        return {
+            ...section,
+            fields: section.fields.map(function (field) {
+                payload.value[camelCase(field.name)] = '';
+                return {
+                    ...field,
+                    key: camelCase(field.name),
+                };
+            }),
+        };
+    });
+}
+
+generateDefaultValues();
+loaded.value = true;
 </script>

src/main.js

@@ -1,7 +1,8 @@
 import {defineCustomElement} from 'vue';
 import classes from './style.css?inline';
+import carousel from 'vue3-carousel/dist/carousel.css?inline';
 
 import Eventform from './Eventform.ce.vue';
-Eventform.styles = [classes];
+Eventform.styles = [classes, carousel];
 
 customElements.define('event-form', defineCustomElement(Eventform));

src/style.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+section.carousel {
+    text-align: unset;
+}