Update formatting

rawilk · rawilk · commit 21ea4223bfab · 2023-03-17T10:56:19.000-05:00
diff --git a/docs/advanced-usage/customizing-css.md b/docs/advanced-usage/customizing-css.md
@@ -33,7 +33,9 @@ Beware: you will have to manually keep this CSS in sync with changes in future p
 ```css
 /* app.css */
 
-... @import "custom/laravel-form-components.css";
+... 
+
+@import "custom/laravel-form-components.css";
 ```
 
 Let's say you wanted to change the spacing in stacked checkbox groups. You could do so like this in the file you just created with the pasted in styles from the package:
@@ -161,7 +163,9 @@ Some styling for components, such as text color and border colors, can be overri
 you could add the following to your app's CSS file:
 
 ```css
-... :root {
+... 
+
+:root {
     --input-border-color: theme("colors.green.300");
     --input-dark-border-color: theme("colors.green.500");
 }
diff --git a/docs/files/file-upload.md b/docs/files/file-upload.md
@@ -59,12 +59,12 @@ This slot is completely optional, and can be omitted if you don't need to show a
 <x-file-upload name="avatar" wire:model="avatar">
     <div>
         @if ($avatar)
-        <span class="block w-20 h-20">
-            <img
-                class="rounded-full w-full"
-                src="{{ $avatar->temporaryUrl() }}"
-            />
-        </span>
+            <span class="block w-20 h-20">
+                <img
+                    class="rounded-full w-full"
+                    src="{{ $avatar->temporaryUrl() }}"
+                />
+            </span>
         @endif
     </div>
 </x-file-upload>
diff --git a/docs/files/filepond.md b/docs/files/filepond.md
@@ -113,7 +113,11 @@ specify an option callbacks, such as `onaddfile`, that you need to:
 
 ```html
 <x-file-pond wire:model="avatar">
-    <x-slot:config> onaddfile(error, file) { // do stuff }, </x-slot:config>
+    <x-slot:config> 
+        onaddfile(error, file) {
+            // do stuff
+        },
+    </x-slot:config>
 </x-file-pond>
 ```
 
diff --git a/docs/form/form-error.md b/docs/form/form-error.md
@@ -63,7 +63,7 @@ Now we'll use the component's slot and its `messages()` method to render an unor
 ```html
 <x-form-error tag="ul" name="first_name">
     @foreach ($component->messages($errors) as $error)
-    <li>{{ $error }}</li>
+        <li>{{ $error }}</li>
     @endforeach
 </x-form-error>
 ```
diff --git a/docs/form/form-group.md b/docs/form/form-group.md
@@ -99,7 +99,9 @@ optional.
 You can also have the component render the text `Optional` automatically for you by passing in `true` for the `optional` attribute.
 
 ```html
-<x-form-group label="First name" name="first_name" optional> ... </x-form-group>
+<x-form-group label="First name" name="first_name" optional> 
+    ...
+</x-form-group>
 ```
 
 You can customize this text by modifying the config value for `optional_hint_text`.
@@ -151,7 +153,9 @@ The form-group component will now add a `mb-5` margin utility class to each form
 bit of breathing room from each other. The last form-group child in a container will have no margin bottom because of the `last:mb-0` utility class. If you don't want margins to be added to each form-group, you can do the following:
 
 ```html
-<x-form-group label="First name" :margin-bottom="false"> ... </x-form-group>
+<x-form-group label="First name" :margin-bottom="false">
+    ...
+</x-form-group>
 ```
 
 > {tip} To help space your form elements evenly in a form, you could also use a `space-y-*` utility class
diff --git a/docs/form/form.md b/docs/form/form.md
@@ -13,7 +13,9 @@ and CSRF directives and allows for easier to use syntax than the default HTML fo
 The most basic usage of the `form` component exists in encapsulating some form elements:
 
 ```html
-<x-form action="https://example.com"> Form fields... </x-form>
+<x-form action="https://example.com"> 
+    Form fields...
+</x-form>
 ```
 
 This will output the following HTML:
@@ -53,7 +55,9 @@ As you can see, a `_method` input was added since HTML tags only support `POST`
 To enable file uploads in a form you can make use of the `has-files` attribute:
 
 ```html
-<x-form action="https://example.com" has-files> Form fields... </x-form>
+<x-form action="https://example.com" has-files>
+    Form fields...
+</x-form>
 ```
 
 This will output the following HTML:
diff --git a/docs/inputs/checkbox-group.md b/docs/inputs/checkbox-group.md
@@ -39,7 +39,9 @@ with each other, by setting the `stacked` attribute to `false`. This will displa
 By default, the checkbox-group renders checkboxes in rows with 3 columns when it is rendered inline. To render a different amount of columns, you can specify the `grid-cols` attribute:
 
 ```html
-<x-checkbox-group :stacked="false" grid-cols="5"> ... </x-checkbox-group>
+<x-checkbox-group :stacked="false" grid-cols="5"> 
+    ...
+</x-checkbox-group>
 ```
 
 ## Sizing
@@ -48,7 +50,9 @@ For convenience, you can size all the radio or checkbox elements the same by usi
 the config value for radios and checkboxes.
 
 ```html
-<x-checkbox-group input-size="lg">...</x-checkbox-group>
+<x-checkbox-group input-size="lg">
+    ...
+</x-checkbox-group>
 ```
 
 For more information on the sizing, checkout the [Sizing](/docs/laravel-form-components/{version}/inputs/checkbox#user-content-sizing) documentation for checkboxes.
diff --git a/docs/inputs/checkbox.md b/docs/inputs/checkbox.md
@@ -30,7 +30,9 @@ Via prop:
 Via slot:
 
 ```html
-<x-checkbox name="remember_me"> Remember me </x-checkbox>
+<x-checkbox name="remember_me"> 
+    Remember me
+</x-checkbox>
 ```
 
 By default, the label will be placed on the **right** if the checkbox, however you can have it placed on the left side instead by setting the `labelLeft` attribute
diff --git a/docs/inputs/date-picker.md b/docs/inputs/date-picker.md
@@ -131,7 +131,9 @@ component JavaScript.
 ```html
 <x-date-picker name="birthday">
     <x-slot:config>
-        onChange: (selectedDates, dateStr, instance) => { // ... }
+        onChange: (selectedDates, dateStr, instance) => { 
+            // ...
+        }
     </x-slot:config>
 </x-date-picker>
 ```
@@ -149,8 +151,11 @@ the event.
 ```html
 <x-date-picker name="birthday">
     <x-slot:config>
-        onOpen: [ function (selectedDates, dateStr, instance) { // do something
-        }, ],
+        onOpen: [ 
+            function (selectedDates, dateStr, instance) { 
+                // do something
+            },
+        ],
     </x-slot:config>
 </x-date-picker>
 ```
diff --git a/docs/inputs/switch-toggle.md b/docs/inputs/switch-toggle.md
@@ -42,7 +42,9 @@ This will render a label containing the text "Notifications on" to the right sid
 to render the label as well:
 
 ```html
-<x-switch-toggle> Notifications on </x-switch-toggle>
+<x-switch-toggle> 
+    Notifications on
+</x-switch-toggle>
 ```
 
 ### Left aligned labels
diff --git a/docs/inputs/textarea.md b/docs/inputs/textarea.md
@@ -42,9 +42,7 @@ re-rendering the form, the `textarea` component will remember the old value:
 
 ```html
 <div class="form-text-container ...">
-    <textarea name="about" id="about" class="form-input form-text ..." rows="3">
-About me text</textarea
-    >
+    <textarea name="about" id="about" class="form-input form-text ..." rows="3">About me text</textarea>
 </div>
 ```
 
diff --git a/docs/rich-text/quill.md b/docs/rich-text/quill.md
@@ -145,9 +145,9 @@ You may alternatively pass in your own toolbar if you need to:
 ```html
 <x-quill
     :quill-options="QuillOptions::defaults()->toolbar([
-    ['bold', 'italic'],
-    [['list' => 'ordered'], ['list' => 'bullet']],
-])"
+        ['bold', 'italic'],
+        [['list' => 'ordered'], ['list' => 'bullet']],
+    ])"
 />
 ```
 
@@ -178,10 +178,15 @@ You will then need to utilize the `config` slot on the component to define a Jav
     ...
 >
     <x-slot:config>
-        toolbarHandlers: { variables: function (value) { value = `[[ ${value}
-        ]]`; const quill = instance.__quill; const cursorPosition =
-        quill.getSelection().index; quill.insertText(cursorPosition, value);
-        quill.setSelection(cursorPosition + value.length); }, },
+        toolbarHandlers: { 
+            variables: function (value) { 
+                value = `[[ ${value} ]]`;
+                const quill = instance.__quill;
+                const cursorPosition = quill.getSelection().index;
+                quill.insertText(cursorPosition, value);
+                quill.setSelection(cursorPosition + value.length); 
+            },
+        },
     </x-slot:config>
 </x-quill>
 ```
@@ -226,8 +231,9 @@ Here's an example of how you could hook into the `selection-change` event that Q
 ```html
 <x-quill ...>
     <x-slot:on-init>
-        instance.__quill.on('selection-change', function (range, oldRange,
-        source) { // do something });
+        instance.__quill.on('selection-change', function (range, oldRange, source) {
+            // do something 
+        });
     </x-slot:on-init>
 </x-quill>
 ```
@@ -244,15 +250,18 @@ editor instance, you can do so via `instance.__quill`.
 ```html
 <x-quill ...>
     <x-slot:on-text-change>
-        let value = instance.__quill.root.innerHTML; console.log(value);
+        let value = instance.__quill.root.innerHTML; 
+        console.log(value);
     </x-slot:on-text-change>
 </x-quill>
 ```
 
 If you want to prevent our component from updating the value, or dispatching an `input` event, you may return `false` from the slot:
 
 ```html
-<x-slot:on-text-change> return false; </x-slot:on-text-change>
+<x-slot:on-text-change> 
+    return false; 
+</x-slot:on-text-change>
 ```
 
 ## API Reference
diff --git a/docs/selects/custom-select.md b/docs/selects/custom-select.md
@@ -178,7 +178,7 @@ the component will automatically render them as well while making the option an
 ```html
 <x-custom-select ...>
     @foreach ($options as $option)
-    <x-custom-select-option :value="$option" />
+        <x-custom-select-option :value="$option" />
     @endforeach
 </x-custom-select>
 ```
diff --git a/docs/selects/tree-select.md b/docs/selects/tree-select.md
@@ -164,7 +164,7 @@ the component will recursively render and children underneath the parent option.
 ```html
 <x-tree-select ...>
     @foreach ($options as $option)'
-    <x-tree-select-option :value="$option" />
+        <x-tree-select-option :value="$option" />
     @endforeach
 </x-tree-select>
 ```
