Prettified Code!

Author: rawilk

CHANGELOG.md

@@ -33,9 +33,7 @@ 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:
@@ -97,7 +95,7 @@ module.exports = {
 
         // Only necessary if you're going to use the switch-toggle component with different colors
         require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/switch-toggle"),
-        
+
         // Only necessary if you're going to support dark mode
         require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode"),
     ],
@@ -153,14 +151,14 @@ module.exports = {
             // For checkbox/radio sizing
             pattern: /form-choice--*/,
         },
-        
+
         // For dark mode...
         {
             // quill editor classes
             pattern: /ql--*/,
         },
-        'filepond--panel-root',
-        'filepond--root',
+        "filepond--panel-root",
+        "filepond--root",
     ],
 };
 ```
@@ -174,9 +172,7 @@ 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");
 }
@@ -200,13 +196,14 @@ pass to the plugin:
 module.exports = {
     plugins: [
         // ...
-        require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode")({
-            quill: false,
-            filepond: false,
-        }),
-    ]
+        require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode")(
+            {
+                quill: false,
+                filepond: false,
+            }
+        ),
+    ],
 };
 ```
 
 For more information, please refer to [Tailwind's Dark Mode Documentation](https://tailwindcss.com/docs/dark-mode).
-

docs/advanced-usage/customizing-css.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>

docs/files/file-upload.md

@@ -113,11 +113,7 @@ 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>
 ```
 

docs/files/filepond.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>
 ```

docs/form/form-error.md

@@ -99,9 +99,7 @@ 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`.
@@ -153,9 +151,7 @@ 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

docs/form/form-group.md

@@ -13,9 +13,7 @@ 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:
@@ -55,9 +53,7 @@ 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:

docs/form/form.md

@@ -39,9 +39,7 @@ 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
@@ -50,9 +48,7 @@ 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.

docs/inputs/checkbox-group.md

@@ -30,9 +30,7 @@ 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

docs/inputs/checkbox.md

@@ -131,9 +131,7 @@ 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>
 ```
@@ -151,11 +149,8 @@ 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>
 ```

docs/inputs/date-picker.md

@@ -42,9 +42,7 @@ 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

docs/inputs/switch-toggle.md

@@ -42,7 +42,9 @@ 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>
 ```
 

docs/inputs/textarea.md

@@ -38,9 +38,7 @@ Add the following before the end `body` tag in your template.
 
 ```html
 <body>
-    ...
-    
-    @fcScripts
+    ... @fcScripts
 </body>
 ```
 
@@ -115,9 +113,9 @@ In your project's CSS, do the following for styling:
 Assuming your app CSS file is located in `/resources/css/app.css`, you can load in the package's styles like this:
 
 ```css
-...  
-
-@import "../../vendor/rawilk/laravel-form-components/resources/css/index.css";
+...
+    @import
+    "../../vendor/rawilk/laravel-form-components/resources/css/index.css";
 ```
 
 This will import all the package's styles into your stylesheet, however you are free to import only the stylesheets you need as well; they are all

docs/installation.md

@@ -178,14 +178,10 @@ 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 cursorPosition = this.quill.getSelection().index;
-                this.quill.insertText(cursorPosition, value);
-                this.quill.setSelection(cursorPosition + value.length); 
-            },
-        },
+        toolbarHandlers: { variables: function (value) { value = `[[ ${value}
+        ]]`; const cursorPosition = this.quill.getSelection().index;
+        this.quill.insertText(cursorPosition, value);
+        this.quill.setSelection(cursorPosition + value.length); }, },
     </x-slot:config>
 </x-quill>
 ```
@@ -217,9 +213,9 @@ This example will provide a custom dropdown menu with two options, and when each
 If you need to define JavaScript handlers for a [custom toolbar button](#user-content-custom-toolbar-button), you may use the `config`
 slot to do this. The config slot is inside a JavaScript function that returns an object and has access to the following variables:
 
-| variable | description |
-| --- | --- |
-| `instance` | The Alpine data instance for the quill component |
+| variable       | description                                                 |
+| -------------- | ----------------------------------------------------------- |
+| `instance`     | The Alpine data instance for the quill component            |
 | `quillOptions` | An object containing the options generated by the component |
 
 For a complete list of quill configuration options, see [Quill Configuration](https://quilljs.com/docs/configuration/).
@@ -235,9 +231,8 @@ 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>
 ```
@@ -254,18 +249,15 @@ 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

docs/rich-text/quill.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>
 ```

docs/selects/custom-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>
 ```

docs/selects/tree-select.md

@@ -17,7 +17,7 @@ If your app does not support dark mode, you don't need to worry about this chang
 module.exports = {
     plugins: [
         // ...
-        require('./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode'),
+        require("./vendor/rawilk/laravel-form-components/resources/js/tailwind-plugins/dark-mode"),
     ],
 };
 ```
@@ -85,11 +85,7 @@ three JS variables: `instance`, `options`, and `pondOptions`. The `instance` var
 options object that is passed to the component. Here's an example of how you could hook into Filepond's `oninit` callback:
 
 ```html
-<x-slot:config> 
-    oninit() {
-        console.log('init', instance); 
-    },
-</x-slot:config>
+<x-slot:config> oninit() { console.log('init', instance); }, </x-slot:config>
 ```
 
 If you were registering plugins in the `plugins` slot, you will need to move that logic somewhere else, as we have removed this slot. See [Plugins](/docs/laravel-form-components/{version}/files/filepond#user-content-plugins) for more information.
@@ -104,13 +100,9 @@ Here is an example of how you could define a handler for a custom toolbar button
 
 ```html
 <x-slot:config>
-    toolbarHandlers: { 
-        variables: function (value) {
-            const cursorPosition = this.quill.getSelection().index;
-            this.quill.insertText(cursorPosition, value);
-            this.quill.setSelection(cursorPosition +value.length);
-        },
-    },
+    toolbarHandlers: { variables: function (value) { const cursorPosition =
+    this.quill.getSelection().index; this.quill.insertText(cursorPosition,
+    value); this.quill.setSelection(cursorPosition +value.length); }, },
 </x-slot:config>
 ```
 
@@ -155,8 +147,7 @@ that is fired by flatpickr, you would do it like this:
 
 ```html
 <x-slot:config>
-    onOpen: function (selectedDates, dateStr, instance) { 
-        // do something here.
+    onOpen: function (selectedDates, dateStr, instance) { // do something here.
     },
 </x-slot:config>
 ```