v3 - Add Loading Placeholder (#1421)

* Initial Loading Placeholder Code, Use Hourglass Spinner * Add wrappers, Class Merging, Colouring * Renaming Traits - Adding LoadingPlaceholder Tests, Add Placeholder Test Table * Update Docs for Placeholder --------- Co-authored-by: lrljoe <[email protected]>
rappasoft · Oct 17, 2023 · cb2d9c9 · cb2d9c9
1 parent 1cab8c4
commit cb2d9c9
Show file tree

Hide file tree

Showing 20 changed files with 712 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [3.0.0-beta.4] - 2023-10-17
+- Introduction of Loading Placeholder
+- Docs livewire namespace fix [Here](https://github.com/rappasoft/laravel-livewire-tables/pull/1420)
+- Add CollapseAlways capability for Columns
+
 ## [3.0.0-beta.3] - 2023-10-13
 - Fix for Livewire ^3.0.6 where the table loading causes an additional lifecycle
 - Add unminified files to .gitattributes export-ignore
@@ -1000,4 +1005,4 @@ Ground Up Rebuild
 [0.1.4]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.3...v0.1.4
 [0.1.3]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.2...v0.1.3
 [0.1.2]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.1...v0.1.2
-[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1
+[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1
diff --git a/docs/datatable/loaders.md b/docs/datatable/loaders.md
@@ -0,0 +1,80 @@
+---
+title: Loaders
+weight: 4
+---
+
+With the introduction of Livewire 3, there are several new methods available for use:
+
+## Loading Placeholder
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderBlade('');
+}
+```
+
+### setLoadingPlaceholderStatus
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderStatus(true);
+}
+```
+
+### setLoadingPlaceholderEnabled
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderEnabled();
+}
+```
+
+
+### setLoadingPlaceholderDisabled
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderDisabled();
+}
+```
+
+### setLoadingPlaceholderContent
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderContent('');
+}
+```
+
+### setLoadingPlaceHolderAttributes
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceHolderAttributes([]);
+}
+```
+
+### setLoadingPlaceHolderIconAttributes
+```php
+public function configure(): void
+{
+  $this->setLoadingPlacehosetLoadingPlaceHolderIconAttributeslderBlade([]);
+}
+```
+
+### setLoadingPlaceHolderWrapperAttributes
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceHolderWrapperAttributes([]);
+}
+```
+
+
+### setLoadingPlaceholderBlade
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderBlade('');
+}
+```
diff --git a/docs/misc/custom-markup.md b/docs/misc/custom-markup.md
@@ -1,6 +1,6 @@
 ---
 title: Adding Custom Markup
-weight: 3
+weight: 4
 ---
 
 If you would like to append any custom markup right before the end of the component, you may use the `customView` method and return a view.
@@ -12,4 +12,4 @@ public function customView(): string
 {
     return 'includes.custom';
 }
-```
+```
diff --git a/docs/misc/debugging.md b/docs/misc/debugging.md
@@ -1,6 +1,6 @@
 ---
 title: Debugging
-weight: 4
+weight: 5
 ---
 
 ## Configuration

diff --git a/docs/misc/loading-placeholder.md b/docs/misc/loading-placeholder.md
@@ -0,0 +1,78 @@
+---
+title: Loading Placeholder
+weight: 2
+---
+
+When running complex filters or searches, or displaying larger number of records, you can make use of the built-in Loading Placeholder, this is disabled by default.
+
+### setLoadingPlaceholderStatus
+You may pass a boolean to this, which will either enable (true) or disable (false) the loading placeholder
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceholderStatus(true);
+    }
+```
+
+### setLoadingPlaceholderEnabled
+
+Use this method to enable the loading placeholder:
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceholderEnabled();
+    }
+```
+
+### setLoadingPlaceholderDisabled
+
+Use this method to disable the loading placeholder:
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceholderDisabled();
+    }
+```
+
+### setLoadingPlaceholderContent
+
+You may use this method to set custom text for the placeholder:
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceholderContent('Text To Display');
+    }
+```
+### setLoadingPlaceHolderWrapperAttributes
+
+This method allows you to customise the attributes for the &lt;tr&gt; element used as a Placeholder when the table is loading.  Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes.
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceHolderWrapperAttributes([
+            'class' => 'text-bold',
+            'default' => false,
+        ]);
+    }
+
+```
+
+### setLoadingPlaceHolderIconAttributes
+
+This method allows you to customise the attributes for the &lt;div&gt; element that is used solely for the PlaceholderIcon.  Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes.
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceHolderIconAttributes([
+            'class' => 'lds-hourglass',
+            'default' => false,
+        ]);
+    }
+
+```
diff --git a/docs/misc/multiple-tables.md b/docs/misc/multiple-tables.md
@@ -1,6 +1,6 @@
 ---
 title: Multiple Tables Same Page
-weight: 2
+weight: 3
 ---
 
 This feature works for mutiple tables on the same page that are **different** components.

diff --git a/docs/misc/saving-state.md b/docs/misc/saving-state.md
@@ -1,6 +1,6 @@
 ---
 title: Saving Table State
-weight: 5
+weight: 6
 ---
 
 There may be occasions that you'd like to save the table state, for example if you have a complex set of filters, search parameters, or simply to remember which page you were on!

diff --git a/resources/css/laravel-livewire-tables.css b/resources/css/laravel-livewire-tables.css
@@ -362,3 +362,41 @@ label[dir=rtl] .range-slider {
 .superhide {
     display: none;
 }
+
+.lds-hourglass {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-hourglass:after {
+    content: " ";
+    display: block;
+    border-radius: 50%;
+    width: 0;
+    height: 0;
+    margin: 8px;
+    box-sizing: border-box;
+    border: 32px solid #000;
+    border-color: #fff transparent #fff transparent;
+    animation: lds-hourglass 1.2s infinite;
+  }
+  .dark .lds-hourglass:after {
+    border: 32px solid #FFF;
+
+  }
+
+
+  @keyframes lds-hourglass {
+    0% {
+      transform: rotate(0);
+      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    50% {
+      transform: rotate(900deg);
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    100% {
+      transform: rotate(1800deg);
+    }
+  }
diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css