Update Bootstrap5 Theme and Views (#1685)

* Update Bootstrap5.php * Update Bootstrap5.php * Update Bootstrap5.php * Update Bootstrap5 toggle-columns.blade.php * Update toggle-columns.blade.php Moved the h-5 w-5 classes from the component to tailwind. These classes do not work by default in Bootstrap * Update eye-off.blade.php Moved the h-5 w-5 classes from the component to tailwind. These classes do not work by default in Bootstrap * Update eye.blade.php Moved the h-5 w-5 classes from the component to tailwind. These classes do not work by default in Bootstrap * Update Bootstrap5 toggle-columns.blade.php * Update Bootstrap5 loading.blade.php Replacing styles with classes * Update to Bootstrap5 classes export.blade.php * Update Bootstrap5 classes enabled-filters.blade.php * Update Bootstrap5.php
Power-Components · Sep 18, 2024 · 3a26612 · 3a26612
1 parent 73292a2
commit 3a26612
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 55 deletions.
diff --git a/resources/views/components/frameworks/bootstrap5/header/enabled-filters.blade.php b/resources/views/components/frameworks/bootstrap5/header/enabled-filters.blade.php
@@ -1,15 +1,15 @@
 @if (count($enabledFilters))
     <div
-        class="col-md-12 d-flex table-responsive"
-        style="margin-top: 5px"
+        class="col-md-12 d-flex table-responsive mt-1"
     >
         @if (count($enabledFilters) > 1)
             <div
                 wire:click.prevent="clearAllFilters()"
-                style="cursor: pointer; padding-right: 4px"
+                class="pe-1"
+                role="button"
             >
                 <span
-                    class="badge rounded-pill bg-secondary">{{ trans('livewire-powergrid::datatable.buttons.clear_all_filters') }}
+                    class="badge bg-secondary">{{ trans('livewire-powergrid::datatable.buttons.clear_all_filters') }}
                     <svg
                         width="10"
                         stroke="currentColor"
@@ -29,9 +29,10 @@ class="badge rounded-pill bg-secondary">{{ trans('livewire-powergrid::datatable.
             @isset($filter['label'])
                 <div
                     wire:click.prevent="clearFilter('{{ $filter['field'] }}')"
-                    style="cursor: pointer; padding-right: 4px"
+                    class="pe-1"
+                    role="button"
                 >
-                    <span class="badge rounded-pill bg-light text-dark">{{ $filter['label'] }}
+                    <span class="badge text-bg-light">{{ $filter['label'] }}
                         <svg
                             width="10"
                             stroke="currentColor"

diff --git a/resources/views/components/frameworks/bootstrap5/header/export.blade.php b/resources/views/components/frameworks/bootstrap5/header/export.blade.php
@@ -1,6 +1,6 @@
 <div class="dropdown">
     <button
-        class="btn btn-light dropdown-toggle"
+        class="btn btn-secondary dropdown-toggle"
         type="button"
         data-bs-toggle="dropdown"
         aria-expanded="false"
@@ -24,14 +24,14 @@ class="btn btn-light dropdown-toggle"
         @if (in_array('xlsx', data_get($setUp, 'exportable.type')))
             <li class="d-flex">
                 <div class="dropdown-item">
-                    <span style="min-width: 25px;">@lang('XLSX')</span>
+                    <span>@lang('XLSX')</span>
 
                     <a
-                        class="text-black-50"
+                        class="text-muted small"
                         wire:click.prevent="exportToXLS"
                         href="#"
                     >
-                        <span class="export-count">({{ $total }})</span>
+                        <span class="export-count text-muted small">({{ $total }})</span>
                         @if (count($enabledFilters) === 0)
                             @lang('livewire-powergrid::datatable.labels.all')
                         @else
@@ -41,11 +41,11 @@ class="text-black-50"
                     @if ($checkbox)
                         /
                         <a
-                            class="text-black-50"
+                            class="text-muted small"
                             wire:click.prevent="exportToXLS(true)"
                             href="#"
                         >
-                            (<span x-text="countChecked.length"></span>) @lang('livewire-powergrid::datatable.labels.selected')
+                            (<span class="text-muted small" x-text="countChecked.length"></span>) @lang('livewire-powergrid::datatable.labels.selected')
                         </a>
                     @endif
                 </div>
@@ -56,11 +56,11 @@ class="text-black-50"
                 <div class="dropdown-item">
                     <span>@lang('Csv')</span>
                     <a
-                        class="text-black-50"
+                        class="text-muted small"
                         wire:click.prevent="exportToCsv"
                         href="#"
                     >
-                        <span class="export-count">({{ $total }})</span>
+                        <span class="export-count text-muted small">({{ $total }})</span>
                         @if (count($enabledFilters) === 0)
                             @lang('livewire-powergrid::datatable.labels.all')
                         @else
@@ -70,12 +70,12 @@ class="text-black-50"
                     @if ($checkbox)
                         /
                         <a
-                            class="text-black-50"
+                            class="text-muted small"
                             wire:click.prevent="exportToCsv(true)"
                             x-bind:disabled="countChecked.length === 0"
                             href="#"
                         >
-                            (<span x-text="countChecked.length"></span>) @lang('livewire-powergrid::datatable.labels.selected')
+                            (<span class="text-muted small" x-text="countChecked.length"></span>) @lang('livewire-powergrid::datatable.labels.selected')
                         </a>
                     @endif
                 </div>

diff --git a/resources/views/components/frameworks/bootstrap5/header/loading.blade.php b/resources/views/components/frameworks/bootstrap5/header/loading.blade.php
@@ -1,11 +1,8 @@
-<div
-    class="d-flex align-items-center"
-    style="padding-left: 10px;"
->
+<div class="d-flex align-items-center ps-4">
     <div
         wire:loading.class="spinner-border"
+        class="text-primary"
         role="status"
-        style="color: #656363;"
     >
         <span class="visually-hidden">Loading...</span>
     </div>

diff --git a/resources/views/components/frameworks/bootstrap5/header/toggle-columns.blade.php b/resources/views/components/frameworks/bootstrap5/header/toggle-columns.blade.php
@@ -1,13 +1,13 @@
-<div>
+<div class="dropdown">
     @if (data_get($setUp, 'header.toggleColumns'))
         <div class="btn-group">
             <button
-                class="btn btn-light dropdown-toggle"
+                class="btn btn-secondary dropdown-toggle"
                 type="button"
                 data-bs-toggle="dropdown"
                 aria-expanded="false"
             >
-                <x-livewire-powergrid::icons.eye-off width="20" />
+                <x-livewire-powergrid::icons.eye-off width="18" />
             </button>
             <ul class="dropdown-menu">
                 @foreach ($this->visibleColumns as $column)
@@ -20,9 +20,9 @@ class="dropdown-item"
                             href="#"
                         >
                             @if (data_get($column, 'hidden') === false)
-                                <x-livewire-powergrid::icons.eye width="20" />
+                                <x-livewire-powergrid::icons.eye width="18" />
                             @else
-                                <x-livewire-powergrid::icons.eye-off width="20" />
+                                <x-livewire-powergrid::icons.eye-off width="18" />
                             @endif
                             {!! data_get($column, 'title') !!}
                         </a>

diff --git a/resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php b/resources/views/components/frameworks/tailwind/header/toggle-columns.blade.php
@@ -45,9 +45,9 @@ class="absolute z-10 mt-2 w-56 rounded-md dark:bg-pg-primary-700 bg-white shadow
                             {!! data_get($column, 'title') !!}
                         </div>
                         @if (!data_get($column, 'hidden'))
-                            <x-livewire-powergrid::icons.eye class="text-pg-primary-200 dark:text-pg-primary-300" />
+                            <x-livewire-powergrid::icons.eye class="h-5 w-5 text-pg-primary-200 dark:text-pg-primary-300" />
                         @else
-                            <x-livewire-powergrid::icons.eye-off class="text-pg-primary-500 dark:text-pg-primary-300" />
+                            <x-livewire-powergrid::icons.eye-off class="h-5 w-5 text-pg-primary-500 dark:text-pg-primary-300" />
                         @endif
                     </div>
                 @endforeach

diff --git a/resources/views/components/icons/eye-off.blade.php b/resources/views/components/icons/eye-off.blade.php
@@ -1,5 +1,5 @@
 <svg
-    {{ $attributes->merge(['class' => 'h-5 w-5']) }}
+    {{ $attributes->merge() }}
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"

diff --git a/resources/views/components/icons/eye.blade.php b/resources/views/components/icons/eye.blade.php
@@ -1,6 +1,6 @@
 <svg
     xmlns="http://www.w3.org/2000/svg"
-    {{ $attributes->merge(['class' => 'h-5 w-5']) }}
+    {{ $attributes->merge() }}
     fill="none"
     viewBox="0 0 24 24"
     stroke="currentColor"

diff --git a/src/Themes/Bootstrap5.php b/src/Themes/Bootstrap5.php
@@ -10,31 +10,31 @@ public function table(): array
     {
         return [
             'layout' => [
-                'base'      => '',
-                'div'       => ['table-responsive col-md-12', 'margin: 10px 0 10px;'],
-                'table'     => '',
-                'container' => '',
-                'actions'   => 'd-flex gap-2',
+                'base'      => 'pt-3 px-sm-3 px-lg-5 align-middle d-inline-block',
+                'div'       => 'table-responsive col-md-12 my-2 mx-0',
+                'table'     => 'table-hover table-striped w-100',
+                'container' => 'my-0 mx-sm-n1 mx-lg-n3 overflow-x-auto',
+                'actions'   => 'd-flex gap-1',
             ],
 
             'header' => [
                 'thead'    => '',
                 'tr'       => '',
-                'th'       => ['', 'white-space: nowrap; min-width: 50px; font-size: 0.75rem; color: #6b6a6a; padding-top: 8px; padding-bottom: 8px;'],
+                'th'       => 'fw-bold text-secondary text-nowrap small py-2',
                 'thAction' => '',
             ],
 
             'body' => [
-                'tbody'              => '',
+                'tbody'              => 'table-group-divider',
                 'tbodyEmpty'         => '',
-                'tr'                 => 'border-b border-pg-primary-100 dark:border-pg-primary-600 hover:bg-pg-primary-50 dark:bg-pg-primary-800 dark:hover:bg-pg-primary-700',
-                'td'                 => ['', 'vertical-align: middle; line-height: normal; white-space: nowrap;'],
-                'tdEmpty'            => '',
-                'tdSummarize'        => ['', 'font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(76 79 82 / var(--tw-text-opacity)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem;'],
+                'tr'                 => '',
+                'td'                 => 'align-middle text-nowrap px-3 py-2 lh-sm',
+                'tdEmpty'            => 'p-2 text-nowrap',
+                'tdSummarize'        => 'text-dark-emphasis small px-3 py-2 lh-sm',
                 'trSummarize'        => '',
                 'tdFilters'          => '',
                 'trFilters'          => '',
-                'tdActionsContainer' => 'd-flex gap-2',
+                'tdActionsContainer' => 'd-flex gap-1',
             ],
         ];
     }
@@ -57,33 +57,37 @@ public function footer(): array
     public function toggleable(): array
     {
         return [
-            'view' => $this->root() . '.toggleable',
+            'view'  => $this->root() . '.toggleable',
+            'base'  => 'form-check form-switch',
+            'label' => 'form-check-label',
+            'input' => 'form-check-input',
+            'role'  => 'switch',
         ];
     }
 
     public function editable(): array
     {
         return [
             'view'  => $this->root() . '.editable',
-            'input' => 'form-control shadow-none',
+            'input' => 'form-control',
         ];
     }
 
     public function checkbox(): array
     {
         return [
-            'th'    => ['', 'font-size: 1rem !important;text-align:center'],
+            'th'    => 'fs-6 text-center',
             'base'  => 'form-check',
             'label' => 'form-check-label',
-            'input' => 'form-check-input shadow-none',
+            'input' => 'form-check-input',
         ];
     }
 
     public function radio(): array
     {
         return [
             'th'    => '',
-            'base'  => '',
+            'base'  => 'form-check',
             'label' => 'form-check-label',
             'input' => 'form-check-input',
         ];
@@ -94,7 +98,7 @@ public function filterBoolean(): array
         return [
             'view'   => $this->root() . '.filters.boolean',
             'base'   => '',
-            'select' => 'form-control form-select shadow-none',
+            'select' => 'form-control form-select form-select-sm',
         ];
     }
 
@@ -103,7 +107,7 @@ public function filterDatePicker(): array
         return [
             'base'  => '',
             'view'  => $this->root() . '.filters.date-picker',
-            'input' => 'form-control shadow-none',
+            'input' => 'form-control form-control-sm',
         ];
     }
 
@@ -112,15 +116,15 @@ public function filterMultiSelect(): array
         return [
             'view'   => $this->root() . '.filters.multi-select',
             'base'   => '',
-            'select' => '',
+            'select' => 'form-control form-select form-select-sm',
         ];
     }
 
     public function filterNumber(): array
     {
         return [
             'view'  => $this->root() . '.filters.number',
-            'input' => 'form-control shadow-none',
+            'input' => 'form-control form-control-sm text-12',
         ];
     }
 
@@ -129,17 +133,17 @@ public function filterSelect(): array
         return [
             'view'   => $this->root() . '.filters.select',
             'base'   => '',
-            'select' => 'form-control form-select shadow-none',
+            'select' => 'form-control form-select-sm form-select',
         ];
     }
 
     public function filterInputText(): array
     {
         return [
             'view'   => $this->root() . '.filters.input-text',
-            'base'   => ['', 'min-width: 165px !important'],
-            'select' => 'form-control mb-1 shadow-none form-select',
-            'input'  => 'form-control shadow-none',
+            'base'   => '',
+            'select' => 'form-control form-select-sm mb-1 form-select',
+            'input'  => 'form-control form-control-sm',
         ];
     }