allow to add checked checkboxes in builder

app/javascript/template_builder/area.vue

@@ -98,21 +98,32 @@
     </div>
     <div
       class="flex items-center h-full w-full"
+      dir="auto"
       :class="[bgColors[submitterIndex], field?.default_value ? '' : 'justify-center']"
     >
       <span
         v-if="field"
         class="flex justify-center items-center space-x-1 h-full"
+        :class="{'w-full h-full': field.type == 'checkbox'}"
       >
         <div
           v-if="field?.default_value"
-          :class="{ 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
+          :class="{ 'w-full h-full': field.type == 'checkbox', 'text-[1.5vw] lg:text-base': !textOverflowChars, 'text-[1.0vw] lg:text-xs': textOverflowChars }"
         >
           <div
             ref="textContainer"
             class="flex items-center px-0.5"
+            :class="{'w-full h-full': field.type == 'checkbox'}"
           >
-            <span class="whitespace-pre-wrap">{{ field.default_value }}</span>
+            <IconCheck
+              v-if="field.type == 'checkbox'"
+              class="aspect-square mx-auto"
+              :class="{ '!w-auto !h-full': area.w > area.h, '!w-full !h-auto': area.w <= area.h }"
+            />
+            <span
+              v-else
+              class="whitespace-pre-wrap"
+            >{{ field.default_value }}</span>
           </div>
         </div>
         <component
@@ -141,13 +152,14 @@
 import FieldSubmitter from './field_submitter'
 import FieldType from './field_type'
 import Field from './field'
-import { IconX } from '@tabler/icons-vue'
+import { IconX, IconCheck } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 
 export default {
   name: 'FieldArea',
   components: {
     FieldType,
+    IconCheck,
     FieldSubmitter,
     IconX
   },

app/javascript/template_builder/field.vue

@@ -156,6 +156,20 @@
                   <span class="label-text">{{ t('required') }}</span>
                 </label>
               </li>
+              <li
+                v-if="field.type == 'checkbox'"
+                @click.stop
+              >
+                <label class="cursor-pointer py-1.5">
+                  <input
+                    v-model="field.default_value"
+                    type="checkbox"
+                    class="toggle toggle-xs"
+                    @update:model-value="[field.default_value = $event, field.readonly = $event, save()]"
+                  >
+                  <span class="label-text">{{ t('checked') }}</span>
+                </label>
+              </li>
               <li
                 v-if="field.type === 'text' && !defaultField"
                 @click.stop

app/javascript/template_builder/i18n.js

@@ -2,6 +2,7 @@ const en = {
   are_you_sure: 'Are you sure?',
   sign_yourself: 'Sign Yourself',
   send: 'Send',
+  checked: 'Checked',
   save: 'Save',
   cancel: 'Cancel',
   draw_field_on_the_document: 'Draw {field} field on the document',

lib/submitters/submit_values.rb

@@ -103,6 +103,7 @@ module Submitters
     end
 
     def replace_default_variables(value, attrs, template, with_time: false)
+      return value if value.in?([true, false])
       return if value.blank?
 
       value.to_s.gsub(VARIABLE_REGEXP) do |e|