ENH: #170 phone input structure

app/Http/Requests/AnswerFormRequest.php

@@ -150,7 +150,6 @@ private function getPropertyRules($property): array
     {
         switch ($property['type']) {
             case 'text':
-            case 'phone_number':
             case 'signature':
                 return ['string'];
             case 'number':
@@ -189,6 +188,8 @@ private function getPropertyRules($property): array
                     return ['array', 'min:2'];
                 }
                 return $this->getRulesForDate($property);
+            case 'phone_number':
+                return ['string', 'min:10', 'starts_with:+'];
             default:
                 return [];
         }

package.json

@@ -35,6 +35,7 @@
     "vue-router": "^3.5.2",
     "vue-signature-pad": "^2.0.5",
     "vue-tailwind": "^2.5.0",
+    "vue-tel-input": "^5.14.0",
     "vue2-editor": "^2.10.3",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2",

resources/js/app.js

@@ -10,11 +10,14 @@ import '~/plugins'
 import '~/components'
 
 import '../sass/app.scss'
+import VueTelInput from 'vue-tel-input';
+import 'vue-tel-input/dist/vue-tel-input.css';
 
 Vue.config.productionTip = false
 
 Vue.mixin(Base)
 Vue.use(LoadScript)
+Vue.use(VueTelInput);
 
 /* eslint-disable no-new */
 new Vue({

resources/js/components/forms/PhoneInput.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :class="wrapperClass">
+    <label v-if="label" :for="id ? id : name"
+      :class="[theme.default.label, { 'uppercase text-xs': uppercaseLabels, 'text-sm': !uppercaseLabels }]">
+      {{ label }}
+      <span v-if="required" class="text-red-500 required-dot">*</span>
+    </label>
+    <div v-if="help && helpPosition == 'above_input'" class="flex mb-1">
+      <small :class="theme.default.help" class="flex-grow">
+        <slot name="help"><span class="field-help" v-html="help" /></slot>
+      </small>
+    </div>
+    <div>
+      <vue-tel-input :id="id ? id : name" :disabled="disabled"
+        :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
+        :name="name" :style="inputStyle" :placeholder="placeholder" v-model="compVal"
+        v-bind="bindProps"></vue-tel-input>
+    </div>
+    <has-error v-if="hasValidation" :form="form" :field="name" />
+  </div>
+</template>
+
+<script>
+import inputMixin from '~/mixins/forms/input.js';
+
+export default {
+  phone: 'PhoneInput',
+  mixins: [inputMixin],
+
+  props: {
+    nativeType: { type: String, default: 'tel' },
+  },
+
+  data() {
+    return {
+      phone: "",
+      bindProps: {
+        mode: "international",
+        defaultCountry: "US",
+        disabledFetchingCountry: false,
+        disabledFormatting: false,
+        placeholder: "Enter a phone number",
+        enabledCountryCode: false,
+        enabledFlags: true,
+        autocomplete: "off",
+        name: "telephone",
+        maxLen: 25,
+        wrapperClasses: "",
+        inputClasses: 'border border-gray-300 dark:bg-notion-dark-light dark:border-gray-600 dark:placeholder-gray-500 dark:text-gray-300 flex-1 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-opacity-100 placeholder-gray-400 px-4 py-2 rounded-lg shadow-sm text-base text-black text-gray-700' + (this.disabled ? ' !cursor-not-allowed !bg-gray-200' : ''),
+        inputOptions: {
+          showDialCode: true
+        },
+        validCharactersOnly: true,
+      }
+    };
+  },
+
+
+  methods: { },
+};
+</script>

resources/js/components/forms/index.js

@@ -41,3 +41,4 @@ import ToggleSwitchInput from './ToggleSwitchInput.vue'
 Vue.component('SignatureInput', () => import('./SignatureInput.vue'))
 Vue.component('RichTextAreaInput', () => import('./RichTextAreaInput.vue'))
 Vue.component('DateInput', () => import('./DateInput.vue'))
+Vue.component('PhoneInput', () => import('./PhoneInput.vue'))

resources/js/components/open/forms/OpenFormField.vue

@@ -69,10 +69,11 @@
 <script>
 import FormLogicPropertyResolver from '../../../forms/FormLogicPropertyResolver.js'
 import FormPendingSubmissionKey from '../../../mixins/forms/form-pending-submission-key.js'
+import PhoneInput from '../../forms/PhoneInput.vue'
 
 export default {
   name: 'OpenFormField',
-  components: { },
+  components: { PhoneInput },
   mixins: [FormPendingSubmissionKey],
   props: {
     form: {
@@ -117,7 +118,7 @@ export default {
         checkbox: 'CheckboxInput',
         url: 'TextInput',
         email: 'TextInput',
-        phone_number: 'TextInput',
+        phone_number: 'PhoneInput',
       }
     },
     /**
@@ -232,7 +233,7 @@ export default {
         placeholder: field.placeholder,
         help: field.help,
         helpPosition: (field.help_position) ? field.help_position : 'below_input',
-        uppercaseLabels: this.form.uppercase_labels,
+        uppercaseLabels: this.form.uppercase_labels == 1 || this.form.uppercase_labels == true,
         theme: this.theme,
         maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
         showCharLimit: field.show_char_limit || false

resources/js/components/open/forms/components/form-logic-components/ColumnCondition.vue

@@ -43,7 +43,7 @@ export default {
         checkbox: 'CheckboxInput',
         url: 'TextInput',
         email: 'TextInput',
-        phone_number: 'TextInput',
+        phone_number: 'PhoneInput',
       }
     }
   },

tests/Helpers/FormSubmissionDataFactory.php

@@ -44,7 +44,7 @@ public function createSubmissionData($mergeData = [])
                     $value = $this->faker->url();
                     break;
                 case 'phone_number':
-                    $value = $this->faker->phoneNumber();
+                    $value = '+1' .$this->faker->phoneNumber();
                     break;
                 case 'date':
                     $value = $this->faker->date();