v1 changes

Deprecate scripts directive Switch to LaravelPackageTools Add option to disable JS Add option to enable CSS Update package namespace
wire-elements · Jul 4, 2021 · 13ddf19 · 13ddf19
1 parent 91ce185
commit 13ddf19
Show file tree

Hide file tree

Showing 15 changed files with 10,779 additions and 20,261 deletions.
diff --git a/README.md b/README.md
@@ -21,25 +21,17 @@ composer require livewire-ui/modal
 ```
 
 ## Livewire directive
-Add the Livewire directive `@livewire('livewire-ui-modal')` and also the Javascript `@livewireUIScripts` directive to your template.
+Add the Livewire directive `@livewire('livewire-ui-modal')` directive to your template.
 ```html
 <html>
 <body>
     <!-- content -->
 
     @livewire('livewire-ui-modal')
-    @livewireUIScripts
 </body>
 </html>
 ```
 
-Next you will need to publish the required scripts with the following command:
-```shell
-php artisan vendor:publish --tag=livewire-ui:public --force
-```
-
-**Important:** When updating to a newer version of LivewireUI modal make sure to run the command again with the `--force` flag.
-
 ## Alpine
 Livewire UI requires [Alpine](https://github.com/alpinejs/alpine). You can use the official CDN to quickly include Alpine:
 
@@ -54,7 +46,7 @@ Livewire UI requires [Alpine](https://github.com/alpinejs/alpine). You can use t
 ## TailwindCSS
 The base modal is made with TailwindCSS. If you use a different CSS framework I recommend that you publish the modal template and change the markup to include the required classes for your CSS framework.
 ```shell
-php artisan vendor:publish --tag=livewire-ui:views
+php artisan vendor:publish --tag=livewire-ui-modal-views
 ```
 
 
@@ -351,6 +343,45 @@ module.exports = {
 }
 ```
 
+## Configuration
+You can customize the Modal via the `livewire-ui-modal.php` config file. This includes some additional options like including CSS if you don't use TailwindCSS for your application. To publish the config run the vendor:publish command:
+```shell
+php artisan vendor:publish --tag=livewire-ui-modal-config
+```
+
+```php
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Include CSS
+    |--------------------------------------------------------------------------
+    |
+    | The modal uses TailwindCSS, if you don't use TailwindCSS you will need
+    | to set this parameter to true. This includes the modern-normalize css.
+    |
+    */
+    'include_css' => false,
+
+
+    /*
+    |--------------------------------------------------------------------------
+    | Include JS
+    |--------------------------------------------------------------------------
+    |
+    | Livewire UI will inject the required Javascript in your blade template.
+    | If you want to bundle the required Javascript you can set this to false
+    | and add `require('vendor/livewire-ui/modal/resources/js/modal');`
+    | to your script bundler like webpack.
+    |
+    */
+    'include_js' => true,
+
+];
+```
+
 ## Security
 If you are new to Livewire I recommend to take a look at the [security details](https://laravel-livewire.com/docs/2.x/security). In short, it's **very important** to validate all information given Livewire stores this information on the client-side, or in other words, this data can be manipulated. Like shown in the examples above, use the `Guard` facade to authorize actions.
 

diff --git a/composer.json b/composer.json
@@ -31,7 +31,7 @@
   "require": {
     "php": "^7.4|^8.0",
     "livewire/livewire": "^2.0",
-    "livewire-ui/livewire-ui": "^0.1.0"
+    "spatie/laravel-package-tools": "^1.9"
   },
   "autoload": {
     "psr-4": {

diff --git a/config/livewire-ui-modal.php b/config/livewire-ui-modal.php
@@ -0,0 +1,30 @@
+<?php
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Include CSS
+    |--------------------------------------------------------------------------
+    |
+    | The modal uses TailwindCSS, if you don't use TailwindCSS you will need
+    | to set this parameter to true. This includes the modern-normalize css.
+    |
+    */
+    'include_css' => false,
+
+
+    /*
+    |--------------------------------------------------------------------------
+    | Include JS
+    |--------------------------------------------------------------------------
+    |
+    | Livewire UI will inject the required Javascript in your blade template.
+    | If you want to bundle the required Javascript you can set this to false
+    | and add `require('vendor/livewire-ui/modal/resources/js/modal');`
+    | to your script bundler like webpack.
+    |
+    */
+    'include_js' => true,
+
+];
diff --git a/mix-manifest.json b/mix-manifest.json
@@ -1,3 +1,4 @@
 {
-    "/public/modal.js": "/public/modal.js"
+    "/public/modal.js": "/public/modal.js",
+    "/public/modal.css": "/public/modal.css"
 }