Merge branch 'develop'

forxer · Oct 1, 2024 · 66630e1 · 66630e1
2 parents 0e5e058 + 2530669
commit 66630e1
Show file tree

Hide file tree

Showing 41 changed files with 246 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,14 @@
 CHANGELOG
 =========
 
+0.20.0 (2024-10-01)
+-------------------
+
+- Added `variant` property to "modal components"
+- Added `outline` property to "modal components", with possibility of global configuration and associated `no-outline` property
+- Added `confirmVariant` property to "button components"
+
+
 0.19.2 (2024-09-25)
 -------------------
 

diff --git a/config/blade-ui-kit-bootstrap.php b/config/blade-ui-kit-bootstrap.php
@@ -133,6 +133,18 @@
 
     'all_buttons_outline' => false,
 
+    /*
+    |--------------------------------------------------------------------------
+    | All modal outline
+    |--------------------------------------------------------------------------
+    |
+    | If this option is "true" all modal will automatically
+    | have the "outline" attribute.
+    |
+    */
+
+    'all_modal_outline' => true,
+
     /*
     |--------------------------------------------------------------------------
     | Button Icon Formats

diff --git a/docs/buttons/action-buttons.md b/docs/buttons/action-buttons.md
@@ -47,6 +47,7 @@ Like all buttons, every action buttons accepts all [common button attributes](./
 - [Sizes](./buttons.md#sizes)
 - [Title](./buttons.md#title)
 - [Confirm](./buttons.md#confirm)
+- [Confirm Variant](./buttons.md#confirm-variant)
 - [Disabled](./buttons.md#disabled)
 
 Some action buttons extends [Form button](./form-button.md) component so they also accept its specific attributes:

diff --git a/docs/buttons/buttons.md b/docs/buttons/buttons.md
@@ -24,6 +24,7 @@ Common button attributes
 - [Sizes](#sizes)
 - [Title](#title)
 - [Confirm](#confirm)
+- [Confirm Variant](#confirm-variant)
 - [Disabled](#disabled)
 
 ### Text
@@ -227,7 +228,6 @@ Finally, like all other attributes, you can use them programmatically by passing
 <x-btn text="Do something" :icon="$iconName" />
 ```
 
-
 ### Variant
 
 Buttons have a default Bootstrap variant (`primary`), but you can change it with the `variant` attribute.
@@ -410,6 +410,17 @@ Or alternatively for a plain text string:
 <x-btn :confirm="e($data)" />
 ```
 
+### Confirm Variant
+
+It's like the button variation but for confirmation modals.
+
+```blade
+<x-btn :confirm="trans('confirmation_message')" confirm-variant="danger" />
+```
+
+Please see the [modal variants documentation](./../modals.md#modal-variants) for more details.
+
+
 ## Disabled
 
 Obviously you can use the native HTML "disabled" attribute:

diff --git a/docs/buttons/form-button.md b/docs/buttons/form-button.md
@@ -44,6 +44,7 @@ All attributes set on the component are piped through on the button element. Als
 - [Sizes](./buttons.md#sizes)
 - [Title](./buttons.md#title)
 - [Confirm](./buttons.md#confirm)
+- [Confirm Variant](./buttons.md#confirm-variant)
 - [Disabled](./buttons.md#disabled)
 
 ### URL

diff --git a/docs/buttons/link-button.md b/docs/buttons/link-button.md
@@ -30,6 +30,7 @@ All attributes set on the component are piped through on the button element. Als
 - [Sizes](./buttons.md#sizes)
 - [Title](./buttons.md#title)
 - [Confirm](./buttons.md#confirm)
+- [Confirm Variant](./buttons.md#confirm-variant)
 - [Disabled](./buttons.md#disabled)
 
 ### URL

diff --git a/docs/buttons/simple-button.md b/docs/buttons/simple-button.md
@@ -44,6 +44,7 @@ All attributes set on the component are piped through on the button element. Als
 - [Sizes](./buttons.md#sizes)
 - [Title](./buttons.md#title)
 - [Confirm](./buttons.md#confirm)
+- [Confirm Variant](./buttons.md#confirm-variant)
 - [Disabled](./buttons.md#disabled)
 
 ### Confirm ID

diff --git a/docs/modals.md b/docs/modals.md
@@ -1,6 +1,11 @@
 Modals
 ======
 
+- [Classic modal](#classic-modal)
+- [Form modal](#form-modal)
+- [Confirm modal](#confirm-modal)
+- [Modal variants](#modal-variants)
+
 Classic modal
 -------------
 
@@ -87,16 +92,13 @@ As for the basic modal the `id` and `title` attributes are required. But also th
 
 There is behind the "form component", so you can use all the attributes provided by it (`action`, `method`, `has-files` and `novalidate`). Please refer to the [form component](./forms.md#form) documentation for more details.
 
-
-
 Confirm modal
 -------------
 
 This modal allows you to request confirmation of an action.
 
 It is simply necessary to add the `data-buk-confirm` attribute to an actionable element with the message you want to display in the confirmation modal. You must also associate this button with the confirmation modal by specifying its ID via the `data-buk-confirm-modal` attribute.
 
-
 ```blade
 <a href="{{ route('do-something', $model) }}"
     data-buk-confirm="Are you sure you want to do this?"
@@ -124,3 +126,89 @@ For example for a link button like in the example above:
 
 Also, the [action buttons](./buttons/action-buttons.md) are even simpler if one of them suits your need.
 
+
+Modal variants
+--------------
+
+Bootstrap doesn't provide "variants" for modals by default. But in many applications this can be useful. The button variant mechanism has been ported to modals so you can style them more easily.
+
+**Note that it is up to you** to define the appropriate styles. No styles are provided by this package, just classes are added.
+
+### Variant
+
+Modals have a default single style. But you can change it with the `variant` attribute.
+
+```blade
+<x-modal variant="success" />
+```
+
+This will output the following HTML:
+
+```html
+<div class="modal modal-success" ...
+```
+
+Possible variant values are:
+
+- 'primary'
+- 'secondary'
+- 'success'
+- 'danger'
+- 'warning'
+- 'info'
+- 'outline-primary'
+- 'outline-secondary'
+- 'outline-success'
+- 'outline-danger'
+- 'outline-warning'
+- 'outline-info'
+
+### Outline and no-outline
+
+With this package is possible to use "Outline Modals". Simply by adding attributes and use CSS to style them.
+
+To do this, several options are available to you: use `variant` attribute, `outline` attribute and global configuration.
+
+You can use the "outline-`variant`" variant:
+
+```blade
+<x-modal variant="outline-primary" />
+```
+
+This will output the following HTML:
+
+```html
+<div class="modal modal-outline-primary" ...
+```
+
+But the simplest is to use the `outline` attribute:
+
+```blade
+<x-modal variant="success" outline />
+```
+
+This will output the following HTML:
+
+```html
+<div class="modal modal-outline-success" ...
+```
+
+Especially since this allows it to be defined programmatically:
+
+```blade
+<x-modal variant="success" :outline="$booleanCondition" />
+```
+
+In the configuration file, you can change the value of `all_modal_outline` to `true`. Then all modal will have the outline property by default if you set a variant.
+
+No need to specify the "outline" attribute. Conversely in this case, if you want a modal not to have this property you can use the `no-outline`  attribute so that the modal has its normal display.
+
+```blade
+<x-modal variant="success" no-outline />
+```
+
+This will output the following HTML:
+
+```html
+<div class="modal modal-success" ...
+```
diff --git a/resources/views/bootstrap-4/components/buttons/form-button.blade.php b/resources/views/bootstrap-4/components/buttons/form-button.blade.php
@@ -39,5 +39,5 @@
 @endpush
 
 @if ($confirm !== null)
-    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" />
+    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" :confirmVariant="$confirmVariant" />
 @endif
diff --git a/resources/views/bootstrap-4/components/buttons/link-button.blade.php b/resources/views/bootstrap-4/components/buttons/link-button.blade.php
@@ -34,5 +34,5 @@
 </a>
 
 @if ($confirm !== null)
-    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" />
+    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" :confirmVariant="$confirmVariant" />
 @endif
diff --git a/resources/views/bootstrap-4/components/buttons/simple-button.blade.php b/resources/views/bootstrap-4/components/buttons/simple-button.blade.php
@@ -34,5 +34,5 @@
 </button>
 
 @if ($confirm !== null)
-    <x-modal-confirm :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" />
+    <x-modal-confirm :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" :confirmVariant="$confirmVariant" />
 @endif
diff --git a/resources/views/bootstrap-4/components/modals/confirm.blade.php b/resources/views/bootstrap-4/components/modals/confirm.blade.php
@@ -1,4 +1,4 @@
-<x-modal :id="e($id)" :title="e($title)" :dismissable="false" class="fade" data-backdrop="static" data-keyboard="false">
+<x-modal :id="e($id)" :title="e($title)" :dismissable="false" :variant="$confirmVariant" class="fade" data-backdrop="static" data-keyboard="false">
     <x-slot:footer>
         <div class="btn-group" role="group">
             <x-btn-modal-confirm-yes data-buk-confirm-trigger="yes" />

diff --git a/resources/views/bootstrap-4/components/modals/form.blade.php b/resources/views/bootstrap-4/components/modals/form.blade.php
@@ -1,5 +1,5 @@
 @push('blade-ui-kit-bs-html')
-    <div {{ $attributes->class(['modal']) }} id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $titleLabel }}" aria-hidden="true">
+    <div {{ $attributes->class(['modal', 'modal-'.$variant => $variant]) }} id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $titleLabel }}" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 <x-form action="{{ $action }}" :method="$method" :hasFiles="$hasFiles" :novalidate="$novalidate">

diff --git a/resources/views/bootstrap-4/components/modals/modal.blade.php b/resources/views/bootstrap-4/components/modals/modal.blade.php
@@ -1,5 +1,5 @@
 @push('blade-ui-kit-bs-html')
-    <div {{ $attributes->class(['modal']) }} id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $titleLabel }}" aria-hidden="true">
+    <div {{ $attributes->class(['modal', 'modal-'.$variant => $variant]) }} id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $titleLabel }}" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 @isset ($header)

diff --git a/resources/views/bootstrap-5/components/buttons/form-button.blade.php b/resources/views/bootstrap-5/components/buttons/form-button.blade.php
@@ -45,5 +45,5 @@
 @endpush
 
 @if ($confirm !== null)
-    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" />
+    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" :confirmVariant="$confirmVariant" />
 @endif
diff --git a/resources/views/bootstrap-5/components/buttons/link-button.blade.php b/resources/views/bootstrap-5/components/buttons/link-button.blade.php
@@ -40,5 +40,5 @@
 </a>
 
 @if ($confirm !== null)
-    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" />
+    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" :confirmVariant="$confirmVariant" />
 @endif
diff --git a/resources/views/bootstrap-5/components/buttons/simple-button.blade.php b/resources/views/bootstrap-5/components/buttons/simple-button.blade.php
@@ -42,5 +42,5 @@
 </button>
 
 @if ($confirm !== null)
-    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" />
+    <x-confirm-modal :id="'confirm-modal-'.$confirmId" :title="$confirmTitle" :confirmVariant="$confirmVariant" />
 @endif
diff --git a/resources/views/bootstrap-5/components/modals/confirm.blade.php b/resources/views/bootstrap-5/components/modals/confirm.blade.php
@@ -1,4 +1,4 @@
-<x-modal :id="e($id)" :title="e($title)" :dismissable="false" class="fade" data-bs-backdrop="static" data-bs-keyboard="false">
+<x-modal :id="e($id)" :title="e($title)" :dismissable="false" :variant="$confirmVariant" class="fade" data-bs-backdrop="static" data-bs-keyboard="false">
     <x-slot:footer>
         <div class="btn-group" role="group">
             <x-btn-modal-confirm-no data-bs-dismiss="modal" />

diff --git a/resources/views/bootstrap-5/components/modals/form.blade.php b/resources/views/bootstrap-5/components/modals/form.blade.php
@@ -1,5 +1,5 @@
 @push('blade-ui-kit-bs-html')
-    <div {{ $attributes->class(['modal']) }} id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $titleLabel }}" aria-hidden="true">
+    <div {{ $attributes->class(['modal', 'modal-'.$variant => $variant]) }} id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $titleLabel }}" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 <x-form action="{{ $action }}" :method="$method" :hasFiles="$hasFiles" :novalidate="$novalidate">

diff --git a/resources/views/bootstrap-5/components/modals/modal.blade.php b/resources/views/bootstrap-5/components/modals/modal.blade.php
@@ -1,5 +1,5 @@
 @push('blade-ui-kit-bs-html')
-    <div {{ $attributes->class(['modal']) }} id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $titleLabel }}" aria-hidden="true">
+    <div {{ $attributes->class(['modal', 'modal-'.$variant => $variant]) }} id="{{ $id }}" tabindex="-1" aria-labelledby="{{ $titleLabel }}" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 @isset ($header)

diff --git a/src/Components/Buttons/Actions/Archive.php b/src/Components/Buttons/Actions/Archive.php
@@ -15,6 +15,8 @@ protected function initAttributes(): void
 
         $this->variant ??= 'danger';
 
+        $this->confirmVariant ??= 'warning';
+
         $this->text ??= Str::ucfirst(trans('action.archive'));
 
         $this->formId = 'archive-'.($this->formId ?? Str::random(32));

diff --git a/src/Components/Buttons/Actions/Create.php b/src/Components/Buttons/Actions/Create.php
@@ -13,6 +13,8 @@ protected function initAttributes(): void
     {
         $this->variant ??= 'primary';
 
+        $this->confirmVariant ??= 'variant';
+
         $this->text ??= Str::ucfirst(trans('action.add'));
 
         if ($this->confirm !== null) {

diff --git a/src/Components/Buttons/Actions/Delete.php b/src/Components/Buttons/Actions/Delete.php
@@ -15,6 +15,8 @@ protected function initAttributes(): void
 
         $this->variant ??= 'danger';
 
+        $this->confirmVariant ??= 'warning';
+
         $this->text ??= Str::ucfirst(trans('action.delete'));
 
         $this->formId = 'delete-'.($this->formId ?? Str::random(32));

diff --git a/src/Components/Buttons/Actions/Destroy.php b/src/Components/Buttons/Actions/Destroy.php
@@ -15,6 +15,8 @@ protected function initAttributes(): void
 
         $this->variant ??= 'danger';
 
+        $this->confirmVariant ??= 'danger';
+
         $this->text ??= Str::ucfirst(trans('action.delete'));
 
         $this->formId = 'destroy-'.($this->formId ?? Str::random(32));

diff --git a/src/Components/Buttons/Actions/Disable.php b/src/Components/Buttons/Actions/Disable.php
@@ -15,6 +15,8 @@ protected function initAttributes(): void
 
         $this->variant ??= 'warning';
 
+        $this->confirmVariant ??= 'warning';
+
         $this->text ??= Str::ucfirst(trans('action.disable'));
 
         $this->formId = 'disable-'.($this->formId ?? Str::random(32));

diff --git a/src/Components/Buttons/Actions/Disabled.php b/src/Components/Buttons/Actions/Disabled.php
@@ -15,6 +15,8 @@ protected function initAttributes(): void
 
         $this->variant ??= 'warning';
 
+        $this->confirmVariant ??= 'warning';
+
         $this->text ??= Str::ucfirst(trans('status.disabled'));
 
         $this->formId = 'enable-'.($this->formId ?? Str::random(32));

diff --git a/src/Components/Buttons/Actions/Edit.php b/src/Components/Buttons/Actions/Edit.php
@@ -13,6 +13,8 @@ protected function initAttributes(): void
     {
         $this->variant ??= 'primary';
 
+        $this->confirmVariant ??= 'primary';
+
         $this->text ??= Str::ucfirst(trans('action.edit'));
 
         if ($this->confirm !== null) {

diff --git a/src/Components/Buttons/Actions/Enable.php b/src/Components/Buttons/Actions/Enable.php
@@ -15,6 +15,8 @@ protected function initAttributes(): void
 
         $this->variant ??= 'success';
 
+        $this->confirmVariant ??= 'warning';
+
         $this->text ??= Str::ucfirst(trans('action.enable'));
 
         $this->formId = 'enable-'.($this->formId ?? Str::random(32));

diff --git a/src/Components/Buttons/Actions/Enabled.php b/src/Components/Buttons/Actions/Enabled.php
@@ -15,6 +15,8 @@ protected function initAttributes(): void
 
         $this->variant ??= 'success';
 
+        $this->confirmVariant ??= 'warning';
+
         $this->text ??= Str::ucfirst(trans('status.enabled'));
 
         $this->formId = 'disable-'.($this->formId ?? Str::random(32));

diff --git a/src/Components/Buttons/Actions/Preview.php b/src/Components/Buttons/Actions/Preview.php
@@ -13,6 +13,8 @@ protected function initAttributes(): void
     {
         $this->variant ??= 'info';
 
+        $this->confirmVariant ??= 'info';
+
         $this->text ??= Str::ucfirst(trans('action.preview'));
 
         if ($this->confirm !== null) {