update dev deps

rawilk · rawilk · commit 4228bf8a58ad · 2021-06-23T14:53:08.000-05:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 All notable changes to `laravel-form-components` will be documented in this file
 
+## 5.0.0 - 2021-06-23
+### Added
+- Add Alpine.js v3 support
+
+### Removed
+- Remove Alpine.js v2 support
+
+### Updated
+- Update tailwind version to `2.2.2` in `laravel-form-components-styles` sub-package
+- Remove `postcss` in favor of tailwind cli in `laravel-form-components-styles` sub-package
+- Update dev dependencies
+
 ## 4.0.8 - 2021-06-01
 ### Fixed
 - Fix issue with date picker not always showing the currently selected date when opened
diff --git a/dist/form-components.js b/dist/form-components.js
diff --git a/dist/form-components.js.map b/dist/form-components.js.map
diff --git a/docs/advanced-usage/customizing-css.md b/docs/advanced-usage/customizing-css.md
@@ -23,7 +23,7 @@ Instead of importing/linking the pre-built `dist/styles.css` from the package, y
 > {note} If you choose this option, make sure you have the [required variants](#required-variants) included in your `tailwind.config.js` configuration.
 
 ## Option 2: Override Only Portions In Your CSS
-If you only want to tinker with certain apsects of the components but like to keep the CSS in sync with future package updates, nothing stops you from overriding only certain CSS rules with your own tweaks. Most DOM elements have their own custom class names.
+If you only want to tinker with certain aspects of the components but like to keep the CSS in sync with future package updates, nothing stops you from overriding only certain CSS rules with your own tweaks. Most DOM elements have their own custom class names.
 
 Let's say your inputs aren't rounded, and you want to remove the border radius from them. To do that, you can write your own CSS for this class:
 
@@ -32,6 +32,8 @@ Let's say your inputs aren't rounded, and you want to remove the border radius f
 ...
 
 @import '../../vendor/rawilk/laravel-form-components/resources/js/laravel-form-components-styles/dist/styles.css';
+/* or */
+@import '../../vendor/rawilk/laravel-form-components/resources/js/laravel-form-components-styles/dist/styles.min.css';
 
 .form-text {
     @apply rounded-none;
@@ -153,5 +155,7 @@ in a `/* purgecss start ignore */`:
 ```css
 /* purgecss start ignore */
 @import '../../vendor/rawilk/laravel-form-components/resources/js/laravel-form-components-styles/dist/styles.css';
+/* or */
+@import '../../vendor/rawilk/laravel-form-components/resources/js/laravel-form-components-styles/dist/styles.min.css';
 /* purgecss end ignore */
 ```
diff --git a/docs/files/filepond.md b/docs/files/filepond.md
@@ -10,7 +10,7 @@ Before using this component, we recommend familiarizing yourself with the FilePo
 
 ## Installation
 
-While the `file-pond` component works out-of-the-box when you've [set the directive](/docs/laravel-form-components/v4/installation#directives),
+While the `file-pond` component works out-of-the-box when you've [set the directive](/docs/laravel-form-components/v5/installation#directives),
 we recommend that you install and compile the JavaScript libraries before you deploy to production:
 
 - [Alpine.js](https://github.com/alpinejs/alpine) `^2.8`
diff --git a/docs/inputs/date-picker.md b/docs/inputs/date-picker.md
@@ -133,4 +133,4 @@ For more information on the callbacks available, please consult [the events api]
 Like the other inputs, the date picker can also have leading and trailing addons, however by default you cannot add them.
 To add leading addons, you must disable the toggle icon, and for trailing addons, you must set `clearable` to `false`.
 
-See the [input documentation](/docs/laravel-form-components/v4/inputs/input#addons) for more information.
+See the [input documentation](/docs/laravel-form-components/v5/inputs/input#addons) for more information.
diff --git a/docs/inputs/email.md b/docs/inputs/email.md
@@ -20,4 +20,4 @@ The most basic usage of the component is like this:
 By default an `email` type will be set for the input field as well as an `id` that allows it to be
 easily referenced by a `label` element.
 
-Besides this, the email element behaves exactly the same as the [input component](/docs/laravel-form-components/v4/inputs/input).
+Besides this, the email element behaves exactly the same as the [input component](/docs/laravel-form-components/v5/inputs/input).
diff --git a/docs/inputs/input.md b/docs/inputs/input.md
@@ -59,7 +59,7 @@ When there are errors for a field, the `aria-invalid` and `aria-describedby` att
 ```
 
 The actual error message won't be rendered from the input component itself, but it can be automatically rendered for you
-by wrapping the `<x-input />` component inside of a `<x-form-group />` component. Please refer to the [form-group documentation](/docs/laravel-form-components/v4/form/form-group#error-handling) for more information.
+by wrapping the `<x-input />` component inside of a `<x-form-group />` component. Please refer to the [form-group documentation](/docs/laravel-form-components/v5/form/form-group#error-handling) for more information.
 
 The `aria-describedby` attribute takes the `name` attribute and appends `-error` to it, which will be the id given to the error message rendered by the `<x-form-group />` component. If you already have `aria-describedby` set on the input, the attribute
 value will be merged with the error attribute value.
diff --git a/docs/inputs/password.md b/docs/inputs/password.md
@@ -71,4 +71,4 @@ Like the other inputs, the password input can also have leading addons, but sinc
 includes a password toggle as a trailing icon addon, you are not able to add a trailing addon
 to the password input. If you need a trailing addon, you should use the input component instead.
 
-See the [input documentation](/docs/laravel-form-components/v4/inputs/input#addons) for more information.
+See the [input documentation](/docs/laravel-form-components/v5/inputs/input#addons) for more information.
diff --git a/docs/inputs/switch-toggle.md b/docs/inputs/switch-toggle.md
@@ -12,7 +12,7 @@ for more info.
 
 ## Installation
 
-While the `switch-toggle` component works out-of-the-box when you've [set the directive](/docs/laravel-form-components/v4/installation#directives),
+While the `switch-toggle` component works out-of-the-box when you've [set the directive](/docs/laravel-form-components/v5/installation#directives),
 we recommend that you install and compile the JavaScript libraries before you deploy to production:
 
 - [Alpine.js](https://github.com/alpinejs/alpine) `^2.8`
diff --git a/docs/inputs/textarea.md b/docs/inputs/textarea.md
@@ -44,5 +44,5 @@ If you are using livewire, the textarea will allow livewire to set the value ins
 
 ## Reference
 
-Since the textarea component extends the [input component](/docs/laravel-form-components/v4/inputs/input), you are able
+Since the textarea component extends the [input component](/docs/laravel-form-components/v5/inputs/input), you are able
 to do a lot of the same things you can with the input element, such as error handling and addons.
diff --git a/docs/installation.md b/docs/installation.md
@@ -86,9 +86,9 @@ This is assuming your stylesheet is located in the `./resources/css/` directory
 
 You could copy the built CSS from `vendor/rawilk/laravel-components/resources/js/laravel-form-components-styles/dist/styles.css` into your public folder, and then use a `link` tag in your blade/html to get it: `<link rel="stylesheet" href="{{ asset('css/laravel-form-components.css') }}">`.
 
-If you would like to customize the CSS we provide, head over to [the section on Customizing CSS](/docs/laravel-form-components/v4/advanced-usage/customizing-css).
+If you would like to customize the CSS we provide, head over to [the section on Customizing CSS](/docs/laravel-form-components/v5/advanced-usage/customizing-css).
 
-> {tip} If you are using Purge CSS or Tailwind's JIT compiler, you should check out the section on [Purge CSS](/docs/laravel-form-components/v4/advanced-usage/customizing-css#purge-csstailwind-jit)
+> {tip} If you are using Purge CSS or Tailwind's JIT compiler, you should check out the section on [Purge CSS](/docs/laravel-form-components/v5/advanced-usage/customizing-css#purge-csstailwind-jit)
 > to prevent styles from being lost in production or at compile time.
 
 ## Components
@@ -104,7 +104,7 @@ and/or view of your own.
 
 ## Component JavaScript
 
-Some components, such as the [custom select component](/docs/laravel-form-components/v4/selects/custom-select), require custom
+Some components, such as the [custom select component](/docs/laravel-form-components/v5/selects/custom-select), require custom
 JavaScript to run. The JavaScript is extracted to an external file since it is pretty substantial and should be minified. If
 you are using any components that depend on this JavaScript, be sure you are pulling the scripts in through either the
 `@fcJavaScript` or `@fcScripts` blade directives in your layout file. See [directives](#directives) for more information.
@@ -122,14 +122,17 @@ npm install -D alpinejs @popperjs/core filepond flatpickr
 In your JavaScript, add the following lines to pull each of the external dependencies you previously installed in:
 
 ```js
-import "alpinejs";
+import Alpine from "alpinejs";
 import flatpickr from "flatpickr";
 import * as FilePond from "filepond";
 import { createPopper } from "@popperjs/core";
 
 window.flatpickr = flatpickr;
 window.FilePond = FilePond;
 window.createPopper = createPopper;
+window.Alpine = Alpine;
+
+Alpine.start();
 ```
 
 ### Dependency Styling
diff --git a/docs/selects/custom-select.md b/docs/selects/custom-select.md
@@ -18,7 +18,7 @@ In production, we recommend you install and compile the JavaScript libraries bef
 - [Alpine.js](https://github.com/alpinejs/alpine) `^2.8`
 - [Popper.js](https://popper.js.org/) `^2.9.1`
 
-> {tip} See the [JavaScript Dependencies section](/docs/laravel-form-components/v4/installation#javascript-dependencies) for more information on installing them.
+> {tip} See the [JavaScript Dependencies section](/docs/laravel-form-components/v5/installation#javascript-dependencies) for more information on installing them.
 
 ## Basic Usage
 
@@ -234,4 +234,4 @@ the select menu now. In addition to positioning the menu when opened, Popper.js
 ## Addons
 
 The custom select component supports leading addons, but since there are already elements appended to the end
-of the button trigger, trailing addons are not supported. For more information on addons, see [the input documentation](/docs/laravel-form-components/v4/inputs/input#addons).
+of the button trigger, trailing addons are not supported. For more information on addons, see [the input documentation](/docs/laravel-form-components/v5/inputs/input#addons).
diff --git a/docs/selects/select.md b/docs/selects/select.md
@@ -82,5 +82,5 @@ You can easily create a multiple select by setting `multiple` to `true`:
 
 ## Reference
 
-Since the select component extends the [input component](/docs/laravel-form-components/v4/inputs/input), you are able
+Since the select component extends the [input component](/docs/laravel-form-components/v5/inputs/input), you are able
 to do a lot of the same things you can with the input element, such as error handling and addons.
diff --git a/docs/selects/timezone-select.md b/docs/selects/timezone-select.md
@@ -49,4 +49,4 @@ By default, the timezone select uses the native select input, so you will explic
 the custom-select component any time you render the timezone select component.
 
 > {note} If you want to render it as a custom-select, you need to ensure you have followed the
-[installation steps](/docs/laravel-form-components/v4/selects/custom-select#installation) for the `custom-select` component.
+[installation steps](/docs/laravel-form-components/v5/selects/custom-select#installation) for the `custom-select` component.
diff --git a/docs/upgrade.md b/docs/upgrade.md
@@ -3,6 +3,31 @@ title: Upgrade
 sort: 4
 ---
 
+## Upgrading from v4 to v5
+
+### Alpine upgrade
+The biggest breaking change in version 5 is changing support from alpine.js v2 to v3. This should require only minimal effort however in terms of updating the package.
+Based on the [upgrade guide](https://alpinejs.dev/upgrade-guide) from Alpine.js, here is what you should need to do if you are importing Alpine from NPM:
+
+```js
+import Alpine from 'alpinejs';
+
+window.Alpine = Alpine;
+
+Alpine.start();
+```
+
+This won't affect you if you are using the CDN scripts from the [configuration](https://github.com/rawilk/laravel-form-components/blob/master/config/form-components.php).
+
+### Additional stylesheet option
+If you choose to import the compiled styles for this package into your own stylesheets, you can now import a minified stylesheet instead if you want to:
+
+```css
+@import '../../vendor/rawilk/laravel-form-components/resources/js/laravel-form-components-styles/dist/styles.min.css';
+```
+
+See [customizing css](/docs/laravel-form-components/v5/advanced-usage/customizing-css#option-2-override-only-portions-in-your-css) for more information.
+
 ## Upgrading from v3 to v4
 
 Version 4 introduced some breaking changes, which are outlined below:
@@ -15,13 +40,13 @@ Another major change with the styling is laravel-form-components now uses a sing
 
 In addition, we have stopped using the `primary` and `danger` variant names in favor of `blue` and `red` respectively. Be sure to update your tailwind config and stylesheets accordingly.
 
-For more info on styling, please see [the Customizing CSS section](/docs/laravel-form-components/v4/advanced-usage/customizing-css).
+For more info on styling, please see [the Customizing CSS section](/docs/laravel-form-components/v5/advanced-usage/customizing-css).
 
 ### Added Dependencies
 
 Some components, such as the `custom-select` component, have a dependency on `Popper.js` now for positioning the menu. This will require you to ensure that dependency is installed in your project. If you customized the package's configuration file, you should make sure you pull in any updates to the configuration as well.
 
-See [the custom select docs](/docs/laravel-form-components/v4/selects/custom-select#installation) for more information.
+See [the custom select docs](/docs/laravel-form-components/v5/selects/custom-select#installation) for more information.
 
 ### Custom Select
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
