make phone field always required

app/javascript/template_builder/area.vue

@@ -68,7 +68,7 @@
         @blur="onNameBlur"
       >{{ field.name || defaultName }}</span>
       <div
-        v-if="isNameFocus && field.type !== 'checkbox'"
+        v-if="isNameFocus && !['checkbox', 'phone'].includes(field.type)"
         class="flex items-center ml-1.5"
       >
         <input

app/javascript/template_builder/field.vue

@@ -34,19 +34,21 @@
           v-if="isNameFocus"
           class="flex items-center relative"
         >
-          <input
-            :id="`required-checkbox-${field.uuid}`"
-            v-model="field.required"
-            type="checkbox"
-            class="checkbox checkbox-xs no-animation rounded"
-            @mousedown.prevent
-          >
-          <label
-            :for="`required-checkbox-${field.uuid}`"
-            class="label text-xs"
-            @click.prevent="field.required = !field.required"
-            @mousedown.prevent
-          >Required</label>
+          <template v-if="field.type != 'phone'">
+            <input
+              :id="`required-checkbox-${field.uuid}`"
+              v-model="field.required"
+              type="checkbox"
+              class="checkbox checkbox-xs no-animation rounded"
+              @mousedown.prevent
+            >
+            <label
+              :for="`required-checkbox-${field.uuid}`"
+              class="label text-xs"
+              @click.prevent="field.required = !field.required"
+              @mousedown.prevent
+            >Required</label>
+          </template>
         </div>
         <div
           v-else-if="editable"
@@ -104,7 +106,10 @@
                   Default value
                 </label>
               </div>
-              <li @click.stop>
+              <li
+                v-if="field.type != 'phone'"
+                @click.stop
+              >
                 <label class="cursor-pointer py-1.5">
                   <input
                     v-model="field.required"