WIP Migrate groups-price calculator

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/GroupsPriceCalculator.vue

@@ -1,8 +1,13 @@
 <template>
-    <div class="container">
+    <div class="container relative">
-        <div class="form-group" v-show="!submitted">
+        <div class="mb-4"
-            <label>Zeitraum</label>
+             v-show="!submitted">
-            <input type="text" class="form-control datepicker--visible" placeholder="von... bis" ref="picker"/>
+            <label class="mb-2 font-bold">
+                Zeitraum
+            </label>
+            <input type="text"
+                   class="border-gray-400 focus:border-gray-800 mt-1 w-full"
+                   placeholder="von... bis" ref="picker"/>
         </div>
         <div class="form-group" v-show="!submitted">
             <label>Personenzahl</label>
@@ -134,7 +139,7 @@
                 <strong>Vielen Dank für Ihre Anfrage. Wir werden diese schnellstmöglich bearbeiten.</strong>
             </div>
         </div>
-        <div class="form-overlay" v-show="processing">
+        <div class="fixed top-0 left-0 inset-0 bg-overlay-white flex items-center justify-center" v-show="processing">
             <img :src="loaderUri" alt="Loading...">
         </div>
     </div>
@@ -419,6 +424,7 @@ export default {
         Vue.nextTick(() => {
             this.picker = flatpickr(this.$refs.picker, {
                 mode: 'range',
+                inline: true,
                 dateFormat: 'd.m.Y',
                 locale: German,
                 onChange: selectedDates => {
@@ -434,25 +440,3 @@ export default {
     }
 }
 </script>
-
-<style scoped lang="scss">
-.form-wrapper {
-    position: relative;
-}
-
-.form-control[readonly] {
-    background-color: white;
-}
-
-.form-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(white, 0.85);
-}
-</style>