Apply Blade Include, Directive and Component

Author: nasrulhazim

app/Blade/Components.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Blade;
+
+use Illuminate\Support\Facades\Blade;
+
+class Components
+{
+    public static function make()
+    {
+        return new self();
+    }
+
+    public function register()
+    {
+        $this->cards();
+        $this->collapse();
+        $this->modals();
+        $this->pages();
+        $this->tabs();
+    }
+
+    private function cards()
+    {
+        Blade::component('components.card');
+        Blade::component('components.cards.figure', 'card-figure');
+    }
+
+    private function collapse()
+    {
+        Blade::component('components.collapse.container', 'collapseContainer');
+        Blade::component('components.collapse.content', 'collapseContent');
+    }
+
+    private function modals()
+    {
+        Blade::component('components.modals.base', 'modalBase');
+        Blade::component('components.modals.button', 'modalButton');
+    }
+
+    private function pages()
+    {
+        Blade::component('components.modals.pages', 'pageTitle');
+    }
+
+    private function tabs()
+    {
+        Blade::component('components.tab.content', 'tabContent');
+        Blade::component('components.tab.navigation', 'tabNavigation');
+    }
+}

app/Blade/Directives/Icon.php renamed to app/Blade/Directives.php

@@ -1,12 +1,17 @@
 <?php
 
-namespace App\Blade\Directives;
+namespace App\Blade;
 
 use Illuminate\Support\Facades\Blade;
 
-class Icon
+class Directives
 {
-    public static function register()
+    public static function make()
+    {
+        return new self();
+    }
+
+    public function register()
     {
         Blade::directive('icon', function ($icon) {
             $icon = str_replace('\'', '"', $icon);

app/Blade/Includes.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace App\Blade;
+
+use Illuminate\Support\Facades\Blade;
+
+class Includes
+{
+    public static function make()
+    {
+        return new self();
+    }
+
+    public function register()
+    {
+        $this->forms();
+        $this->miscs();
+    }
+
+    private function forms()
+    {
+        Blade::include('components.forms.assets.datetimepicker', 'assetDatetimepicker');
+        Blade::include('components.forms.assets.dropzone', 'assetDropzone');
+        Blade::include('components.forms.assets.select2', 'assetSelect2');
+        Blade::include('components.forms.assets.textarea', 'assetTextarea');
+        Blade::include('components.forms.checkbox');
+        Blade::include('components.forms.datetimepicker');
+        Blade::include('components.forms.file');
+        Blade::include('components.forms.hidden');
+        Blade::include('components.forms.input');
+        Blade::include('components.forms.radio');
+        Blade::include('components.forms.selectmultiple');
+        Blade::include('components.forms.select');
+        Blade::include('components.forms.checkbox');
+        Blade::include('components.forms.submit');
+        Blade::include('components.forms.switch');
+        Blade::include('components.forms.textarea');
+    }
+
+    private function miscs()
+    {
+        Blade::include('components.app-name', 'appName');
+        Blade::include('components.logo');
+        Blade::include('components.actions');
+        Blade::include('components.avatar');
+        Blade::include('components.datatable');
+        Blade::include('components.popover');
+        Blade::include('components.table');
+        Blade::include('components.tooltip');
+    }
+}

app/Providers/BladeServiceProvider.php

@@ -15,10 +15,9 @@ class BladeServiceProvider extends ServiceProvider
      */
     public function boot()
     {
-        \App\Blade\Directives\Icon::register();
-
-        // @todo to figure out, how to pass data to the custom component
-        Blade::component('components.cards.figure', 'figure');
+        \App\Blade\Components::make()->register();
+        \App\Blade\Directives::make()->register();
+        \App\Blade\Includes::make()->register();
     }
 
     /**

resources/views/components/app-name.blade.php

@@ -0,0 +1 @@
+{{ config('app.name') }}

resources/views/components/icon.blade.php

@@ -0,0 +1 @@
+<i class="{{ $icon }}"></i>

resources/views/components/logo.blade.php

@@ -1,4 +1,10 @@
-<img height="{{ $height ?? '32px' }}" src="{{ asset('images/logo.svg') }}" class="pr-2" alt="{{ config('app.name') }}">
-{{-- <div>
-	Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
-</div> --}}
+<img height="{{ $height ?? '32px' }}" 
+	src="{{ $src ?? asset('images/logo.svg') }}" 
+	class="pr-2" 
+	alt="{{ $alt ?? config('app.name') }}">
+	
+@if(!isset($src))
+	{{-- <div>
+		Icons made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
+	</div> --}}
+@endif

resources/views/welcome.blade.php

@@ -5,9 +5,9 @@
         <div class="row justify-content-md-center mt-5">
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                 <h1 class="text-center">
-                    @include('components.logo', ['height' => '128px'])
+                    @logo(['height' => '128px'])
                     <br>
-                    {{ config('app.name') }}
+                    @appName()
                 </h1>
                 <hr>
                 <h5 class="text-center">Ready with Bootstrap 4, Font Awesome 5, Select2, Datatable and many more!</h5>