From 691669d03ed4510e998bc4eec4e21bf635cc603e Mon Sep 17 00:00:00 2001
From: EkaterinaVu <ekaterina.vujasinovic@gmail.com>
Date: Thu, 12 Nov 2020 10:30:34 +0100
Subject: [PATCH 1/7] Add date input field

---
 examples/questionnaire/Example.vue        |  9 ++++
 src/assets/css/common.css                 |  4 ++
 src/assets/css/themes/theme-green.css     |  1 +
 src/assets/css/themes/theme-minimal.css   |  1 +
 src/assets/css/themes/theme-purple.css    |  1 +
 src/components/Question.vue               |  4 +-
 src/components/QuestionTypes/DateType.vue | 52 +++++++++++++++++++++++
 src/models/QuestionModel.js               |  5 ++-
 8 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 src/components/QuestionTypes/DateType.vue

diff --git a/examples/questionnaire/Example.vue b/examples/questionnaire/Example.vue
index 75f8dfa3..75b61e18 100644
--- a/examples/questionnaire/Example.vue
+++ b/examples/questionnaire/Example.vue
@@ -87,6 +87,15 @@
         language: new LanguageModel(),
         // Create question list with QuestionModel instances
         questions: [
+            new QuestionModel({
+              id: 'date',
+              tagline: 'Hi! Welcome to our demo survey 😊',
+              title: 'Enter your birthday',
+              type: QuestionType.Date,
+              required: true,
+              min: '2019-10-01',
+              max: '2020-11-20'
+          }),
           new QuestionModel({
             id: 'first_name',
             tagline: 'Hi! Welcome to our demo survey 😊',
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 1d5c975c..ec4f91b0 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -355,6 +355,7 @@ header.vff-header svg.f-logo {
 .vff input[type=email],
 .vff input[type=url],
 .vff input[type=password],
+.vff input[type=date],
 .vff textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -384,6 +385,7 @@ header.vff-header svg.f-logo {
 .vff .f-full-width input[type=email],
 .vff .f-full-width input[type=url],
 .vff .f-full-width input[type=password],
+.vff .f-full-width input[type=date],
 .vff .f-full-width textarea,
 .vff .f-full-width span.faux-form{
   width: 100%;
@@ -825,6 +827,7 @@ header.vff-header svg.f-logo {
   .vff input[type=email],
   .vff input[type=url],
   .vff input[type=password],
+  .vff input[type=date],
   .vff textarea{
     font-size: .78em;
 }
@@ -870,6 +873,7 @@ header.vff-header svg.f-logo {
   .vff input[type=email],
   .vff input[type=url],
   .vff input[type=password],
+  .vff input[type=date],
   .vff textarea {
     line-height: 1.4;
     padding: .16em .2em;
diff --git a/src/assets/css/themes/theme-green.css b/src/assets/css/themes/theme-green.css
index 7ffcc936..50232ea0 100644
--- a/src/assets/css/themes/theme-green.css
+++ b/src/assets/css/themes/theme-green.css
@@ -69,6 +69,7 @@ header.vff-header svg.f-logo {
 .vff input[type=email],
 .vff input[type=url],
 .vff input[type=password],
+.vff input[type=date],
 .vff textarea,
 .vff span.faux-form {
   border-bottom-color: var(--vff-secondary-text-color);
diff --git a/src/assets/css/themes/theme-minimal.css b/src/assets/css/themes/theme-minimal.css
index 3ad22cd1..b1701fd8 100644
--- a/src/assets/css/themes/theme-minimal.css
+++ b/src/assets/css/themes/theme-minimal.css
@@ -57,6 +57,7 @@ header.vff-header svg.f-logo{
 .vff input[type=email],
 .vff input[type=url],
 .vff input[type=password],
+.vff input[type=date],
 .vff textarea,
 .vff span.faux-form {
   border-bottom-color: var(--vff-secondary-text-color);
diff --git a/src/assets/css/themes/theme-purple.css b/src/assets/css/themes/theme-purple.css
index 26969929..df77f462 100644
--- a/src/assets/css/themes/theme-purple.css
+++ b/src/assets/css/themes/theme-purple.css
@@ -73,6 +73,7 @@ header.vff-header svg.f-logo{
 .vff input[type=email],
 .vff input[type=url],
 .vff input[type=password],
+.vff input[type=date],
 .vff textarea,
 .vff span.faux-form {
   border-bottom-color: var(--vff-secondary-text-color);
diff --git a/src/components/Question.vue b/src/components/Question.vue
index 9a99c4f9..900ca4a3 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -106,6 +106,7 @@
   import FlowFormSectionBreakType from './QuestionTypes/SectionBreakType.vue'
   import FlowFormTextType from './QuestionTypes/TextType.vue'
   import FlowFormUrlType from './QuestionTypes/UrlType.vue'
+  import FlowFormDateType from './QuestionTypes/DateType.vue'
   import { IsMobile } from '../mixins/IsMobile'
   
 
@@ -121,7 +122,8 @@
       FlowFormPhoneType,
       FlowFormSectionBreakType,
       FlowFormTextType,
-      FlowFormUrlType
+      FlowFormUrlType,
+      FlowFormDateType
     },
     props: {
       question: QuestionModel,
diff --git a/src/components/QuestionTypes/DateType.vue b/src/components/QuestionTypes/DateType.vue
new file mode 100644
index 00000000..b903b5f3
--- /dev/null
+++ b/src/components/QuestionTypes/DateType.vue
@@ -0,0 +1,52 @@
+<template>
+  <span>
+    <input
+      ref="input"
+      v-bind:type="inputType"
+      v-bind:value="value"
+      v-bind:min ="question.min"
+      v-bind:max="question.max"
+      v-bind:required="question.required"
+      v-on:keydown="onKeyDown"
+      v-on:keyup="onChange"
+      v-on:change="onChange"
+      v-on:keyup.enter.prevent="onEnter"
+      v-on:keyup.tab.prevent="onEnter"
+      v-on:focus="setFocus"
+      v-on:blur="unsetFocus"
+    />
+  </span>
+</template>
+
+<script>
+  /*
+    Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
+    https://github.com/ditdot-dev/vue-flow-form
+    https://www.ditdot.hr/en
+  */
+
+  import BaseType from './BaseType.vue'
+  import { QuestionType } from '../../models/QuestionModel'
+  import LanguageModel from '../../models/LanguageModel'
+
+  export default {
+    extends: BaseType,
+    name: QuestionType.Date,
+    data() {
+      return {
+        inputType: 'date', 
+        canReceiveFocus: true
+      }
+    }, 
+    methods: {
+      validate() {
+          console.log(this.dataValue)
+        if (this.dataValue < this.question.min || this.dataValue > this.question.max) {
+          return false
+        }
+
+        return !this.question.required || this.hasValue
+      }
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/src/models/QuestionModel.js b/src/models/QuestionModel.js
index 83c8a056..bb242ec1 100644
--- a/src/models/QuestionModel.js
+++ b/src/models/QuestionModel.js
@@ -16,7 +16,8 @@ export const QuestionType = Object.freeze({
   Phone: 'FlowFormPhoneType',
   SectionBreak: 'FlowFormSectionBreakType',
   Text: 'FlowFormTextType',
-  Url: 'FlowFormUrlType'
+  Url: 'FlowFormUrlType',
+  Date: 'FlowFormDateType'
 })
 
 export const DropdownOptionBlank = Object.freeze({
@@ -84,6 +85,8 @@ export default class QuestionModel {
     this.helpText = null
     this.helpTextShow = true
     this.descriptionLink = []
+    this.min = null
+    this.max = null
 
     Object.assign(this, options)
 

From 6d420cab86197fc039a0699fbf4762d1b1606d28 Mon Sep 17 00:00:00 2001
From: EkaterinaVu <ekaterina.vujasinovic@gmail.com>
Date: Thu, 12 Nov 2020 11:01:24 +0100
Subject: [PATCH 2/7] Remove console.log

---
 src/components/QuestionTypes/DateType.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/QuestionTypes/DateType.vue b/src/components/QuestionTypes/DateType.vue
index b903b5f3..e5b28e71 100644
--- a/src/components/QuestionTypes/DateType.vue
+++ b/src/components/QuestionTypes/DateType.vue
@@ -40,7 +40,6 @@
     }, 
     methods: {
       validate() {
-          console.log(this.dataValue)
         if (this.dataValue < this.question.min || this.dataValue > this.question.max) {
           return false
         }

From 51b93819c1b67577f88fcb3c05e7775f7fc5f0e4 Mon Sep 17 00:00:00 2001
From: EkaterinaVu <ekaterina.vujasinovic@gmail.com>
Date: Thu, 12 Nov 2020 13:24:15 +0100
Subject: [PATCH 3/7] Test alternative date input

---
 examples/questionnaire/Example.vue        |  8 ++++++
 src/components/QuestionTypes/DateType.vue | 32 ++++++-----------------
 src/components/QuestionTypes/TextType.vue | 28 +++++++++++++++++++-
 src/tokens.js                             |  0
 4 files changed, 43 insertions(+), 25 deletions(-)
 create mode 100644 src/tokens.js

diff --git a/examples/questionnaire/Example.vue b/examples/questionnaire/Example.vue
index 75b61e18..cfed9456 100644
--- a/examples/questionnaire/Example.vue
+++ b/examples/questionnaire/Example.vue
@@ -87,6 +87,14 @@
         language: new LanguageModel(),
         // Create question list with QuestionModel instances
         questions: [
+          new QuestionModel({
+            id: 'phone',
+            title: 'Doing great! 👍 Go ahead and try with a masked date input.',
+            type: QuestionType.Phone,
+            required: true,
+            mask:'Dd.Mm.yyyy.',
+            placeholder: 'dd.mm.yyyy.'
+          }),
             new QuestionModel({
               id: 'date',
               tagline: 'Hi! Welcome to our demo survey 😊',
diff --git a/src/components/QuestionTypes/DateType.vue b/src/components/QuestionTypes/DateType.vue
index e5b28e71..8d36b8f8 100644
--- a/src/components/QuestionTypes/DateType.vue
+++ b/src/components/QuestionTypes/DateType.vue
@@ -1,23 +1,3 @@
-<template>
-  <span>
-    <input
-      ref="input"
-      v-bind:type="inputType"
-      v-bind:value="value"
-      v-bind:min ="question.min"
-      v-bind:max="question.max"
-      v-bind:required="question.required"
-      v-on:keydown="onKeyDown"
-      v-on:keyup="onChange"
-      v-on:change="onChange"
-      v-on:keyup.enter.prevent="onEnter"
-      v-on:keyup.tab.prevent="onEnter"
-      v-on:focus="setFocus"
-      v-on:blur="unsetFocus"
-    />
-  </span>
-</template>
-
 <script>
   /*
     Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
@@ -25,12 +5,12 @@
     https://www.ditdot.hr/en
   */
 
-  import BaseType from './BaseType.vue'
+  import TextType from './TextType.vue'
   import { QuestionType } from '../../models/QuestionModel'
   import LanguageModel from '../../models/LanguageModel'
 
   export default {
-    extends: BaseType,
+    extends: TextType,
     name: QuestionType.Date,
     data() {
       return {
@@ -40,8 +20,12 @@
     }, 
     methods: {
       validate() {
-        if (this.dataValue < this.question.min || this.dataValue > this.question.max) {
-          return false
+        if (this.question.min && this.dataValue < this.question.min) {
+            return false
+        }
+
+        if (this.question.max && this.dataValue > this.question.max) {
+            return false
         }
 
         return !this.question.required || this.hasValue
diff --git a/src/components/QuestionTypes/TextType.vue b/src/components/QuestionTypes/TextType.vue
index 7c0c7a7f..8e665d89 100644
--- a/src/components/QuestionTypes/TextType.vue
+++ b/src/components/QuestionTypes/TextType.vue
@@ -15,6 +15,10 @@
       v-on:keyup.native.enter.prevent="onEnter"
       v-on:keyup.native.tab.prevent="onEnter"
       v-bind:placeholder="placeholder"
+      v-bind:min ="question.min"
+      v-bind:max="question.max"
+      v-on:change="onChange"
+      v-bind:tokens="tokens" 
     />
     <input
       v-else
@@ -28,6 +32,9 @@
       v-on:keyup.tab.prevent="onEnter"
       v-on:focus="setFocus"
       v-on:blur="unsetFocus"
+      v-bind:min ="question.min"
+      v-bind:max="question.max"
+      v-on:change="onChange"
       v-bind:placeholder="placeholder"
     />
   </span>
@@ -44,6 +51,7 @@
   import { QuestionType } from '../../models/QuestionModel'
   import LanguageModel from '../../models/LanguageModel'
   import TheMask from 'vue-the-mask/src/component'
+  import tokens from 'vue-the-mask/src/tokens'
 
   export default {
     extends: BaseType,
@@ -54,7 +62,25 @@
     data() {
       return {
         inputType: 'text', 
-        canReceiveFocus: true
+        canReceiveFocus: true,
+        tokens: {
+          ...tokens,
+          D : {
+            pattern: /[0-3]/
+          },
+          d: {
+            pattern: /[0-9]/
+          },
+          M: {
+            pattern: /[0-1]/
+          },
+          m: {
+            pattern: /[0-9]/
+          },
+          y: {
+            pattern: /[0-9]/ }
+    
+        }
       }
     }, 
     methods: {
diff --git a/src/tokens.js b/src/tokens.js
new file mode 100644
index 00000000..e69de29b

From c97b8c3606ab02d33291c6687682aa7776ab9115 Mon Sep 17 00:00:00 2001
From: dennis <dennis@ditdot.hr>
Date: Thu, 12 Nov 2020 17:53:07 +0100
Subject: [PATCH 4/7] Add mask presets + fix iOS issues

---
 examples/questionnaire/Example.vue        | 27 +++++++++++----------
 src/assets/css/common.css                 | 13 ++++++++++
 src/components/FlowForm.vue               |  6 ++++-
 src/components/Question.vue               | 23 +++++++++++-------
 src/components/QuestionTypes/TextType.vue | 29 +++++------------------
 src/mixins/IsMobile.js                    |  4 +++-
 src/models/QuestionModel.js               | 18 ++++++++++----
 src/tokens.js                             |  0
 8 files changed, 69 insertions(+), 51 deletions(-)
 delete mode 100644 src/tokens.js

diff --git a/examples/questionnaire/Example.vue b/examples/questionnaire/Example.vue
index cfed9456..58934585 100644
--- a/examples/questionnaire/Example.vue
+++ b/examples/questionnaire/Example.vue
@@ -70,7 +70,7 @@
 
   // Import necessary components and classes
   import FlowForm from '../../src/components/FlowForm.vue'
-  import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel'
+  import QuestionModel, { QuestionType, ChoiceOption, LinkOption, MaskPresets } from '../../src/models/QuestionModel'
   import LanguageModel from '../../src/models/LanguageModel'
   // If using the npm package, use the following line instead of the ones above.
   // import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
@@ -88,21 +88,22 @@
         // Create question list with QuestionModel instances
         questions: [
           new QuestionModel({
-            id: 'phone',
+            id: 'date',
+            tagline: 'Hi! Welcome to our demo survey 😊',
+            title: 'Enter your birthday',
+            type: QuestionType.Date,
+            placeholder: 'Enter birthday...',
+            required: true,
+            min: '2019-10-01',
+            max: '2020-11-20'
+          }),
+          new QuestionModel({
+            id: 'date_mask',
             title: 'Doing great! 👍 Go ahead and try with a masked date input.',
             type: QuestionType.Phone,
             required: true,
-            mask:'Dd.Mm.yyyy.',
-            placeholder: 'dd.mm.yyyy.'
-          }),
-            new QuestionModel({
-              id: 'date',
-              tagline: 'Hi! Welcome to our demo survey 😊',
-              title: 'Enter your birthday',
-              type: QuestionType.Date,
-              required: true,
-              min: '2019-10-01',
-              max: '2020-11-20'
+            mask: MaskPresets.Date,
+            placeholder: 'dd/mm/yyyy'
           }),
           new QuestionModel({
             id: 'first_name',
diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index ec4f91b0..9f08cabe 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -439,6 +439,19 @@ header.vff-header svg.f-logo {
   height: auto;
 }
 
+/* ios datepicker */
+.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span {
+  position: relative;
+}
+.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: attr(data-placeholder);
+  display: block;
+  pointer-events: none;
+}
+
 /*
   links
 */
diff --git a/src/components/FlowForm.vue b/src/components/FlowForm.vue
index 83cc99c0..8e857c98 100644
--- a/src/components/FlowForm.vue
+++ b/src/components/FlowForm.vue
@@ -1,7 +1,7 @@
 // Form template and logic
 
 <template>
-  <div class="vff" :class="{'vff-not-standalone': !standalone}">
+  <div class="vff" :class="{'vff-not-standalone': !standalone, 'vff-is-mobile': isMobile, 'vff-is-ios': isIos}">
     <div class="f-container">
       <div class="f-form-wrap">
         <flow-form-question
@@ -126,6 +126,7 @@
 
   import FlowFormQuestion from './Question.vue'
   import LanguageModel from '../models/LanguageModel'
+  import { IsMobile } from '../mixins/IsMobile'
 
   export default {
     name: 'FlowForm',
@@ -147,6 +148,9 @@
         default: true
       }
     },
+    mixins: [
+      IsMobile,
+    ],
     data() {
       return {
         completed: false,
diff --git a/src/components/Question.vue b/src/components/Question.vue
index 900ca4a3..bb8f08c3 100644
--- a/src/components/Question.vue
+++ b/src/components/Question.vue
@@ -241,17 +241,22 @@
       }
     },
     computed: {
-      mainClasses() {
-        const classes = {
-          'q-is-active': this.active,
-          'q-is-inactive': !this.active,
-          'f-fade-in-down': this.reverse,
-          'f-fade-in-up': !this.reverse
-        }
+      mainClasses: {
+        cache: false,
+        get() {
+          const classes = {
+            'q-is-active': this.active,
+            'q-is-inactive': !this.active,
+            'f-fade-in-down': this.reverse,
+            'f-fade-in-up': !this.reverse,
+            'f-focused': this.$refs.questionComponent && this.$refs.questionComponent.focused,
+            'f-has-value': this.$refs.questionComponent && this.$refs.questionComponent.hasValue
+          }
 
-        classes['field-' + this.question.type.toLowerCase().substring(8)] = true
+          classes['field-' + this.question.type.toLowerCase().substring(8)] = true
 
-        return classes
+          return classes
+        }
       },
 
       showHelperText() {
diff --git a/src/components/QuestionTypes/TextType.vue b/src/components/QuestionTypes/TextType.vue
index 8e665d89..4a71134e 100644
--- a/src/components/QuestionTypes/TextType.vue
+++ b/src/components/QuestionTypes/TextType.vue
@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span v-bind:data-placeholder="inputType === 'date' ? placeholder : null">
     <the-mask
       v-if="question.mask"
       ref="input"
@@ -15,7 +15,7 @@
       v-on:keyup.native.enter.prevent="onEnter"
       v-on:keyup.native.tab.prevent="onEnter"
       v-bind:placeholder="placeholder"
-      v-bind:min ="question.min"
+      v-bind:min="question.min"
       v-bind:max="question.max"
       v-on:change="onChange"
       v-bind:tokens="tokens" 
@@ -32,7 +32,7 @@
       v-on:keyup.tab.prevent="onEnter"
       v-on:focus="setFocus"
       v-on:blur="unsetFocus"
-      v-bind:min ="question.min"
+      v-bind:min="question.min"
       v-bind:max="question.max"
       v-on:change="onChange"
       v-bind:placeholder="placeholder"
@@ -51,7 +51,6 @@
   import { QuestionType } from '../../models/QuestionModel'
   import LanguageModel from '../../models/LanguageModel'
   import TheMask from 'vue-the-mask/src/component'
-  import tokens from 'vue-the-mask/src/tokens'
 
   export default {
     extends: BaseType,
@@ -59,30 +58,14 @@
     components: {
       TheMask
     },
+
     data() {
       return {
         inputType: 'text', 
-        canReceiveFocus: true,
-        tokens: {
-          ...tokens,
-          D : {
-            pattern: /[0-3]/
-          },
-          d: {
-            pattern: /[0-9]/
-          },
-          M: {
-            pattern: /[0-1]/
-          },
-          m: {
-            pattern: /[0-9]/
-          },
-          y: {
-            pattern: /[0-9]/ }
-    
-        }
+        canReceiveFocus: true
       }
     }, 
+
     methods: {
       validate() {
         if (this.question.mask && this.dataValue.length !== this.question.mask.length) {
diff --git a/src/mixins/IsMobile.js b/src/mixins/IsMobile.js
index de289924..ac7b277d 100644
--- a/src/mixins/IsMobile.js
+++ b/src/mixins/IsMobile.js
@@ -5,12 +5,14 @@
 */
 
 // Simple mobile device/tablet detection
-const isMobile = !!(typeof navigator !== 'undefined' && navigator.userAgent.match(/android|iphone|ipad|ipod/i))
+const isIos = navigator.userAgent.match(/iphone|ipad|ipod/i) || (navigator.userAgent.indexOf("Mac") !== -1 && "ontouchend" in document)
+const isMobile = !!(typeof navigator !== 'undefined' && (isIos || navigator.userAgent.match(/android/i)))
 
 // Mixin that adds an `isMobile` data variable
 export const IsMobile = {
   data() {
     return {
+      isIos,
       isMobile
     }
   }
diff --git a/src/models/QuestionModel.js b/src/models/QuestionModel.js
index bb242ec1..26e88920 100644
--- a/src/models/QuestionModel.js
+++ b/src/models/QuestionModel.js
@@ -7,6 +7,7 @@
 // Global data store
 
 export const QuestionType = Object.freeze({
+  Date: 'FlowFormDateType',
   Dropdown: 'FlowFormDropdownType',
   Email: 'FlowFormEmailType',
   LongText: 'FlowFormLongTextType',
@@ -16,8 +17,7 @@ export const QuestionType = Object.freeze({
   Phone: 'FlowFormPhoneType',
   SectionBreak: 'FlowFormSectionBreakType',
   Text: 'FlowFormTextType',
-  Url: 'FlowFormUrlType',
-  Date: 'FlowFormDateType'
+  Url: 'FlowFormUrlType'
 })
 
 export const DropdownOptionBlank = Object.freeze({
@@ -26,6 +26,12 @@ export const DropdownOptionBlank = Object.freeze({
   disabled: true
 })
 
+export const MaskPresets = Object.freeze({
+  Date: '##/##/####',
+  DateIso: '####-##-##',
+  PhoneUs: '(###) ###-####'
+})
+
 export class ChoiceOption {
   constructor(options) {
     this.label = ''
@@ -93,17 +99,21 @@ export default class QuestionModel {
     // Sets default mask and placeholder value on PhoneType question
     if (this.type === QuestionType.Phone) {
       if (!this.mask) {
-        this.mask = '(###) ###-####'
+        this.mask = MaskPresets.Phone
       }
       if (!this.placeholder) {
         this.placeholder = this.mask
       }
-    }
+    } 
 
     if (this.type === QuestionType.Url) {
       this.mask = null
     }
 
+    if (this.type === QuestionType.Date && !this.placeholder) {
+      this.placeholder = 'yyyy-mm-dd'
+    }
+
     if (this.multiple) {
       this.answer = []
     }
diff --git a/src/tokens.js b/src/tokens.js
deleted file mode 100644
index e69de29b..00000000

From d715dee53f0361f876b50c53ec5458cf40808063 Mon Sep 17 00:00:00 2001
From: Nikola P <nikola@ditdot.hr>
Date: Thu, 12 Nov 2020 18:30:30 +0100
Subject: [PATCH 5/7] Faux iOS date placeholder styles

---
 src/assets/css/common.css               | 16 ++++++++++++----
 src/assets/css/themes/theme-green.css   |  8 ++++++++
 src/assets/css/themes/theme-minimal.css |  7 +++++++
 src/assets/css/themes/theme-purple.css  |  7 +++++++
 4 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/assets/css/common.css b/src/assets/css/common.css
index 9f08cabe..759e0ccf 100644
--- a/src/assets/css/common.css
+++ b/src/assets/css/common.css
@@ -440,18 +440,26 @@ header.vff-header svg.f-logo {
 }
 
 /* ios datepicker */
-.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span {
+.vff.vff-is-ios  .field-datetype:not(.f-has-value) .f-answer > span {
   position: relative;
-}
-.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before {
-  position: absolute;
   top: 0;
   left: 0;
+}
+
+.vff.vff-is-ios  .field-datetype:not(.f-has-value) .f-answer > span::before {
+  position: absolute;
   content: attr(data-placeholder);
   display: block;
   pointer-events: none;
+  padding: 0.12em .2em;
 }
 
+.vff.vff-is-ios input[type=date] {
+  height: 32px;
+  display: block;
+}
+
+
 /*
   links
 */
diff --git a/src/assets/css/themes/theme-green.css b/src/assets/css/themes/theme-green.css
index 50232ea0..5e170943 100644
--- a/src/assets/css/themes/theme-green.css
+++ b/src/assets/css/themes/theme-green.css
@@ -105,6 +105,14 @@ header.vff-header svg.f-logo {
   font-weight: 300;
 }
 
+
+/*faux input type date placeholder for iOS*/
+.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before{
+  color: var(--vff-secondary-text-color);
+  font-weight: 300;
+  font-size: .72em;
+}
+
 /*field-multiplechoicetype*/
 .vff ul.f-radios li {
   border: 1px solid var(--vff-secondary-text-color);
diff --git a/src/assets/css/themes/theme-minimal.css b/src/assets/css/themes/theme-minimal.css
index b1701fd8..c2c79d93 100644
--- a/src/assets/css/themes/theme-minimal.css
+++ b/src/assets/css/themes/theme-minimal.css
@@ -99,6 +99,13 @@ header.vff-header svg.f-logo{
   font-weight: 300;
 }
 
+/*faux input type date placeholder for iOS*/
+.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before{
+  color: var(--vff-secondary-text-color);
+  font-weight: 300;
+  font-size: .72em;
+}
+
 /*field-multiplechoicetype*/
 .vff ul.f-radios li {
   border: 1px solid var(--vff-secondary-text-color);
diff --git a/src/assets/css/themes/theme-purple.css b/src/assets/css/themes/theme-purple.css
index df77f462..6960d096 100644
--- a/src/assets/css/themes/theme-purple.css
+++ b/src/assets/css/themes/theme-purple.css
@@ -115,6 +115,13 @@ header.vff-header svg.f-logo{
   font-weight: 300;
 }
 
+/*faux input type date placeholder for iOS*/
+.vff.vff-is-ios .field-datetype:not(.f-has-value) .f-answer > span::before{
+  color: var(--vff-secondary-text-color);
+  font-weight: 300;
+  font-size: .72em;
+}
+
 /*field-multiplechoicetype*/
 .vff ul.f-radios li {
   border: 1px solid var(--vff-secondary-form-bg-color);

From a4d9515a065e611729a33291dedf7821c42fc618 Mon Sep 17 00:00:00 2001
From: dennis <dennis@ditdot.hr>
Date: Thu, 12 Nov 2020 18:40:32 +0100
Subject: [PATCH 6/7] Revert to default

---
 examples/questionnaire/Example.vue | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

diff --git a/examples/questionnaire/Example.vue b/examples/questionnaire/Example.vue
index 58934585..75f8dfa3 100644
--- a/examples/questionnaire/Example.vue
+++ b/examples/questionnaire/Example.vue
@@ -70,7 +70,7 @@
 
   // Import necessary components and classes
   import FlowForm from '../../src/components/FlowForm.vue'
-  import QuestionModel, { QuestionType, ChoiceOption, LinkOption, MaskPresets } from '../../src/models/QuestionModel'
+  import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from '../../src/models/QuestionModel'
   import LanguageModel from '../../src/models/LanguageModel'
   // If using the npm package, use the following line instead of the ones above.
   // import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from '@ditdot-dev/vue-flow-form'
@@ -87,24 +87,6 @@
         language: new LanguageModel(),
         // Create question list with QuestionModel instances
         questions: [
-          new QuestionModel({
-            id: 'date',
-            tagline: 'Hi! Welcome to our demo survey 😊',
-            title: 'Enter your birthday',
-            type: QuestionType.Date,
-            placeholder: 'Enter birthday...',
-            required: true,
-            min: '2019-10-01',
-            max: '2020-11-20'
-          }),
-          new QuestionModel({
-            id: 'date_mask',
-            title: 'Doing great! 👍 Go ahead and try with a masked date input.',
-            type: QuestionType.Phone,
-            required: true,
-            mask: MaskPresets.Date,
-            placeholder: 'dd/mm/yyyy'
-          }),
           new QuestionModel({
             id: 'first_name',
             tagline: 'Hi! Welcome to our demo survey 😊',

From b8396384c96eae63a92cc5520fd2ac3891be440c Mon Sep 17 00:00:00 2001
From: dennis <dennis@ditdot.hr>
Date: Thu, 12 Nov 2020 18:56:29 +0100
Subject: [PATCH 7/7] Export MaskPresets in npm module

---
 src/main.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/main.js b/src/main.js
index a3517273..72dd2f65 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 // Import vue component
 import FlowForm from './components/FlowForm.vue'
-import QuestionModel, { QuestionType, ChoiceOption, LinkOption } from './models/QuestionModel'
+import QuestionModel, { QuestionType, ChoiceOption, LinkOption, MaskPresets } from './models/QuestionModel'
 import LanguageModel from './models/LanguageModel'
 
 // IE11 Object.assign polyfill
@@ -37,5 +37,6 @@ export {
   QuestionType,
   ChoiceOption,
   LinkOption,
-  LanguageModel
+  LanguageModel,
+  MaskPresets
 }
\ No newline at end of file