Allow displaying nested checkboxes

resources/js/components/DetailField.vue

@@ -5,7 +5,7 @@
                 <div
                     v-for="(label, option) in field.options"
                     :key="option"
-                    class="flex-auto"
+                    :class="isChild(field.isChild)"
                 >
                     <span
                         class="inline-block rounded-full w-2 h-2 mr-1"
@@ -29,6 +29,13 @@ export default {
                 'bg-danger': this.field.value ? !this.field.value.includes(option) : true,
             }
         },
+
+        isChild(isChild) {
+            return {
+                'flex-auto ml-8': isChild ? true : false,
+                'flex-auto': !isChild ? true : false,
+            }
+        },
     },
 }
 </script>

resources/js/components/FormField.vue

@@ -5,7 +5,7 @@
                 <div
                     v-for="(label, option) in field.options"
                     :key="option"
-                    class="flex mb-2"
+                    :class="isChild(field.isChild)"
                 >
                     <checkbox
                         :value="option"
@@ -40,6 +40,13 @@ export default {
         isChecked(option) {
             return this.value ? this.value.includes(option) : false
         },
+
+        isChild(isChild) {
+            return {
+                'flex mb-2 ml-8': isChild ? true : false,
+                'flex mb-2': !isChild ? true : false,
+            }
+        },
 
         toggleOption(option) {
             if (this.isChecked(option)) {

src/Checkboxes.php

@@ -32,6 +32,14 @@ public function withoutTypeCasting()
     {
         return $this->withMeta(['withoutTypeCasting' => true]);
     }
+
+    /**
+     * check wether is child to add customize styles.
+     */
+    public function isChild()
+    {
+        return $this->withMeta(['isChild' => true]);
+    }
 
     /**
      * Determine if the array keys should be converted to numeric values.