✔ Added Dynamic Binding

Author: dgvai

README.md

@@ -197,12 +197,37 @@ Use this in the [jeroennoten/Laravel-AdminLTE](https://github.com/jeroennoten/La
 | icon      | The fontawesome icon class. Eg. ``fas fa-star``, ``fas fa-user-plus``                      | false    | string  |
 | grad      | Use gradient color? ``true/false``                                                         | false    | boolean |
 | full      | Use full INFO BOX? ``true/false``                                                          | false    | boolean |
+| progress      | Show Progress bar?                                                          | false    | int |
+| comment      | Show comment?                                                           | false    | string |
+| id      | Dynamic Binding?                                                          | false    | string |
 
 **EXAMPLE**
 ```html
 <x-dg-info-box bg="success" title="Yo title" text="123" icon="fas fa-star" :full="true" :grad="true"/>
 ```
 
+**DYNAMIC BINDINGS**  
+Set ``id`` attibute, this will enable dynamic attributes for:
+| ID |
+|----|
+|#{id}-title|
+|#{id}-text|
+|#{id}-progress|
+|#{id}-comment|
+
+**EXAMPLE**
+```html
+<x-dg-info-box bg="success" title="Users" text="100" icon="fas fa-star" :full="true" :grad="true" id="userbox" />
+
+<script>
+    $(()=>{
+        $('#userbox-title').text('Users');
+        $('#userbox-text').text('102');
+    });
+</script>
+```
+
+
 #### **SMALL BOX**  
 ![Small Box](assets/small-box.png)
 
@@ -220,12 +245,33 @@ Use this in the [jeroennoten/Laravel-AdminLTE](https://github.com/jeroennoten/La
 | url       | The url to follow.                                                                         | false    | string  |
 | urlText   | Text of the HyperLink.                                                                     | false    | string  |
 | loading   | Set loading state ``true/false``                                                           | false    | boolean |
+| id      | Dynamic Binding?                                                          | false    | string |
 
 **EXAMPLE**
 ```html
 <x-dg-small-box title="Small box" text="500" bg="warning" url="#" urlText="See More" loading="false" />
 ```
 
+**DYNAMIC BINDINGS**  
+Set ``id`` attibute, this will enable dynamic attributes for:
+| ID |
+|----|
+|#{id}-title|
+|#{id}-text|
+|#{id}-link|
+
+**EXAMPLE**
+```html
+<x-dg-small-box title="Small box" text="500" bg="warning" url="#" urlText="See More" loading="false" $id="userbox"/>
+
+<script>
+    $(()=>{
+        $('#userbox-text').text('102');
+        $('#userbox-link').attr('href',new.link);
+    });
+</script>
+```
+
 #### **CARDS**  
 ![Cards](assets/cards.png)
 

src/Components/InfoBox.php

@@ -7,17 +7,22 @@
 class InfoBox extends Component
 {
     public $bg, $icon, $title, $text, $full, $grad;
+    public $id, $progress, $comment;
 
     public function __construct(
-        $bg = 'info', $icon = 'fas fa-star', 
-        $title, $text, $full = false, $grad = false)
+        $bg = 'info', $icon = 'fas fa-star', $id = null,
+        $title, $text, $full = false, $grad = false,
+        $progress = false, $comment = false)
     {
+        $this->id = $id;
         $this->bg = $bg;
         $this->icon = $icon;
         $this->title = $title;
         $this->text = $text;
         $this->full = $full;
         $this->grad = $grad;
+        $this->progress = $progress;
+        $this->comment = $comment;
     }
 
     public function background()

src/Components/SmallBox.php

@@ -7,12 +7,14 @@
 class SmallBox extends Component
 {
     public $bg, $icon, $title, $text, $url, $urlText, $loading;
+    public $id;
 
     public function __construct(
-        $bg = 'info', $icon = 'fas fa-star', $title, 
+        $bg = 'info', $icon = 'fas fa-star', $title, $id = null,
         $text, $url='#', $urlText = null, 
         $loading = false)
     {
+        $this->id = $id;
         $this->bg = $bg;
         $this->icon = $icon;
         $this->title = $title;

src/resources/components/info-box.blade.php

@@ -3,7 +3,22 @@
         <i class="{{$icon}}"></i>
     </span>
     <div class="info-box-content">
-        <span class="info-box-text">{{$title}}</span>
-        <span class="info-box-number">{{$text}}</span>
+        <span class="info-box-text" id="{{!is_null($id) ? $id.'-title' : null}}">
+            {{$title}}
+        </span>
+        <span class="info-box-number" id="{{!is_null($id) ? $id.'-text' : null}}">
+            {{$text}}
+        </span>
+        @if($progress)
+        <div class="progress">
+            <div class="progress-bar" id="{{!is_null($id) ? $id.'-progress' : null}}" style="width: {{$progress}}%"></div>
+        </div>
+        @endif 
+
+        @if($comment)
+        <span class="progress-description" id="{{!is_null($id) ? $id.'-comment' : null}}">
+            {{$comment}}
+        </span>
+        @endif
     </div>
 </div>

src/resources/components/small-box.blade.php

@@ -5,13 +5,13 @@
     </div>
     @endif
     <div class="inner">
-        <h3>{{$text}}</h3>
-        <p>{{$title}}</p>
+        <h3 id="{{!is_null($id) ? $id.'-text' : null}}">{{$text}}</h3>
+        <p id="{{!is_null($id) ? $id.'-title' : null}}">{{$title}}</p>
     </div>
     <div class="icon">
         <i class="{{$icon}}"></i>
     </div>
-    <a href="{{$url}}" class="small-box-footer"> 
+    <a id="{{!is_null($id) ? $id.'-link' : null}}" href="{{$url}}" class="small-box-footer"> 
         {{$urlTextLine}} <i class="fas fa-arrow-circle-right"></i>
     </a>
 </div>