Card Component

README.md

@@ -25,7 +25,7 @@ php artisan laravel-template-components:install
 
 ### Input Component
 ```html
-<x-template-components::input />
+<x-template-components-input />
 ```
 He accept all normal attributes of input tag and add some new attributes:
 - div-class: add class to div tag
@@ -34,7 +34,7 @@ He accept all normal attributes of input tag and add some new attributes:
 
 ### Button Component
 ```html
-<x-template-components::button />
+<x-template-components-button />
 ```
 He accept all normal attributes of button tag and add some new attributes:
 - div-class: add class to div tag
@@ -46,15 +46,15 @@ He accept all normal attributes of button tag and add some new attributes:
 
 we support livewire loading state, so if you use livewire you can use loading state like this:
 ```html
-<x-template-components::button wire:target="save" />
+<x-template-components-button wire:target="save" />
 ```
 
 ### Select Component
 ```html
-<x-template-components::select>
+<x-template-components-select>
     <option value="1">option 1</option>
     <option value="2">option 2</option>
-</x-template-components::select>
+</x-template-components-select>
 ```
 He accept all normal attributes of select tag and add some new attributes:
 - div-class: add class to div tag
@@ -63,7 +63,7 @@ He accept all normal attributes of select tag and add some new attributes:
 
 ### Textarea Component
 ```html
-<x-template-components::textarea />
+<x-template-components-textarea />
 ```
 He accept all normal attributes of textarea tag and add some new attributes:
 - div-class: add class to div tag
@@ -72,14 +72,30 @@ He accept all normal attributes of textarea tag and add some new attributes:
 
 ### Form Component
 ```html
-<x-template-components::form>
+<x-template-components-form>
 
-</x-template-components::form>
+</x-template-components-form>
 ```
 he accept all normal attributes of form tag and add some new attributes:
 - route: route name that will be used in form action
 - other attributes will be added to form tag
 
+### Card Component
+```html
+<x-template-components-card>
+    <x-slot:header>
+        Heading
+    </x-slot>
+    Content
+    <x-slot:footer>
+        Footer
+    </x-slot>
+</x-template-components-card>
+```
+he accept all normal attributes of div tag and add some new attributes:
+- div-class: add class to div tag (contener div)
+- other attributes will be added to div tag (content div)
+
 ## Supported Templates
 
 - [Vuexy](https://demos.pixinvent.com/vuexy-html-admin-template/landing/)
@@ -90,6 +106,7 @@ he accept all normal attributes of form tag and add some new attributes:
 | Vuexy             | :white_check_mark: |
 | Metronic          | :white_check_mark: |
 | Html Standards    | :white_check_mark: |
+| Bootstrap Classes | :white_check_mark: |
 
 ## Testing
 

config/template-components.php

@@ -4,9 +4,9 @@
 return [
     'defult_classes' => [
         'input' => [
-            'div' => '',
+            'div' => 'form-group',
             'label' => 'form-label',
-            'input' => 'form-control ',
+            'input' => 'form-control',
             'error-div' => 'invalid-feedback',
             'input-error' => 'is-invalid',
         ],
@@ -22,5 +22,18 @@
             'error-div' => 'invalid-feedback',
             'select-error' => 'is-invalid',
         ],
+        'textarea' => [
+            'div' => 'form-group',
+            'label' => 'form-label',
+            'textarea' => 'form-control',
+            'error-div' => 'invalid-feedback',
+            'textarea-error' => 'is-invalid',
+        ],
+        'card' => [
+            'div' => 'card',
+            'header' => 'card-header',
+            'body' => 'card-body',
+            'footer' => 'card-footer',
+        ],
     ],
 ];

resources/views/components/button.blade.php

@@ -1,12 +1,12 @@
-<button {{ $attributes->merge(['class' => config('template-components.defult_classes.button.button')]) }} {{ $attributes }} wire:loading.attr="disabled">
-    <span wire:loading.remove wire:target="{{ $attributes->get('wire:target') }}" class="{{ $attributes->get('span-text-class') }}">
-        {{ $slot }}
-    </span>
-
-    <div wire:loading wire:target="{{ $attributes->get('wire:target') }}">
-        <span class="{{ $attributes->get('indicator-progress-class') }}">
-            {{ $attributes->get('loading-text') ?? 'Please wait...' }}
-            <span class="{{ $attributes->get('spinner-class') ?? 'spinner-border spinner-border-sm align-middle ms-2' }} {{ config('template-components.defult_classes.button.spinner-class') }}"></span>
-        </span>
-    </div>
-</button>
+<button {{ $attributes->merge(['class' => config('template-components.defult_classes.button.button')]) }} wire:loading.attr="disabled">
+    <span wire:loading.remove wire:target="{{ $attributes->get('wire:target') }}" class="{{ $attributes->get('span-text-class') }}">
+        {{ $slot }}
+    </span>
+
+    <div wire:loading wire:target="{{ $attributes->get('wire:target') }}">
+        <span class="{{ $attributes->get('indicator-progress-class') }}">
+            {{ $attributes->get('loading-text') ?? 'Please wait...' }}
+            <span class="{{ $attributes->get('spinner-class') ?? 'spinner-border spinner-border-sm align-middle ms-2' }} {{ config('template-components.defult_classes.button.spinner-class') }}"></span>
+        </span>
+    </div>
+</button>

resources/views/components/card.blade.php

@@ -0,0 +1,17 @@
+@props(['header', 'footer'])
+
+<div class="{{ $attributes->get('div-class') }} {{ config('template-components.defult_classes.card.div') }}">
+    @isset($header)
+    <h5 {{ $header->attributes->class([config('template-components.defult_classes.card.header')]) }}>
+        {{ $header }}
+    </h5>
+    @endisset
+    <div {{ $attributes->class([config('template-components.defult_classes.card.body')]) }}>
+        {{ $slot }}
+    </div>
+    @isset($footer)
+        <div {{ $footer->attributes->class([config('template-components.defult_classes.card.footer')]) }}>
+            {{ $footer }}
+        </div>
+    @endisset
+</div>

resources/views/components/form.blade.php

@@ -1,4 +1,4 @@
-<form action="{{ $attributes->get('action') ?? route($attributes->get('route')) }}" {{ $attributes }}>
-    @csrf
-    {{ $slot }}
-</form>
+<form action="{{ $attributes->get('action') ?? route($attributes->get('route')) }}" {{ $attributes }}>
+    @csrf
+    {{ $slot }}
+</form>

resources/views/components/textarea.blade.php

@@ -1,20 +1,20 @@
-<div class="{{ config('template-components.defult_classes.input.div') }} {{ $attributes->get('div-class') }}">
-
-    <label class="{{ config('template-components.defult_classes.input.label') }} {{ $attributes->get('label-class') }}">
-        {{ $attributes->get('label') }}
-    </label>
-
-    <textarea class="{{ config('template-components.defult_classes.input.input') }} {{ $attributes->get('class') }}
-            @error($attributes->get('name') ?? $attributes->whereStartsWith('wire:model')->first()) 
-                {{ config('template-components.defult_classes.input.input-error') }} 
-            @enderror"
-        {{ $attributes }}>
-        {{ $slot }}
-    </textarea>
-
-    @error($attributes->get('name') ?? $attributes->whereStartsWith('wire:model')->first())
-        <div class="{{ config('template-components.defult_classes.input.error-div') }}">
-            {{ $message }}
-        </div>
-    @enderror
-</div>
+<div class="{{ config('template-components.defult_classes.textarea.div') }} {{ $attributes->get('div-class') }}">
+
+    <label class="{{ config('template-components.defult_classes.textarea.label') }} {{ $attributes->get('label-class') }}">
+        {{ $attributes->get('label') }}
+    </label>
+
+    <textarea class="{{ config('template-components.defult_classes.textarea.textarea') }} {{ $attributes->get('class') }}
+            @error($attributes->get('name') ?? $attributes->whereStartsWith('wire:model')->first())
+                {{ config('template-components.defult_classes.textarea.textarea-error') }}
+            @enderror"
+        {{ $attributes }}>
+        {{ $slot }}
+    </textarea>
+
+    @error($attributes->get('name') ?? $attributes->whereStartsWith('wire:model')->first())
+        <div class="{{ config('template-components.defult_classes.textarea.error-div') }}">
+            {{ $message }}
+        </div>
+    @enderror
+</div>

src/LaravelTemplateComponentsServiceProvider.php

@@ -18,12 +18,20 @@ public function configurePackage(Package $package): void
         $package
             ->name('laravel-template-components')
             ->hasConfigFile()
+            ->hasViews()
             ->hasInstallCommand(function (InstallCommand $command) {
                 $command
                     ->publishConfigFile()
                     ->askToStarRepoOnGitHub('salahhusa9/laravel-template-components');
             });
 
-        $this->loadViewsFrom(__DIR__.'/../resources/views/components', 'template-components');
+        $this->loadViewComponentsAs('template-components', [
+            'card' => 'template-components::components.card',
+            'button' => 'template-components::components.button',
+            'input' => 'template-components::components.input',
+            'select' => 'template-components::components.select',
+            'textarea' => 'template-components::components.textarea',
+            'form' => 'template-components::components.form',
+        ]);
     }
 }

tests/components/ButtonComponentTest.php

@@ -5,5 +5,5 @@
 use Illuminate\Support\Facades\View;
 
 it('can render button component', function () {
-    $this->assertTrue(View::exists('template-components::button'));
+    $this->assertTrue(View::exists('template-components::components.button'));
 });

tests/components/CardComponentTest.php

@@ -0,0 +1,9 @@
+<?php
+
+// test card component
+
+use Illuminate\Support\Facades\View;
+
+it('can render card component', function () {
+    $this->assertTrue(View::exists('template-components::components.card'));
+});

tests/components/FormComponentTest.php

@@ -5,5 +5,5 @@
 use Illuminate\Support\Facades\View;
 
 it('can render form component', function () {
-    $this->assertTrue(View::exists('template-components::form'));
+    $this->assertTrue(View::exists('template-components::components.form'));
 });

tests/components/InputComponentTest.php

@@ -5,5 +5,5 @@
 use Illuminate\Support\Facades\View;
 
 it('can render input component', function () {
-    $this->assertTrue(View::exists('template-components::input'));
+    $this->assertTrue(View::exists('template-components::components.input'));
 });

tests/components/SelectComponentTest.php

@@ -5,5 +5,5 @@
 use Illuminate\Support\Facades\View;
 
 it('can render select component', function () {
-    $this->assertTrue(View::exists('template-components::select'));
+    $this->assertTrue(View::exists('template-components::components.select'));
 });

tests/components/TextareaComponentTest.php

@@ -5,5 +5,5 @@
 use Illuminate\Support\Facades\View;
 
 it('can render textarea component', function () {
-    $this->assertTrue(View::exists('template-components::textarea'));
+    $this->assertTrue(View::exists('template-components::components.textarea'));
 });