Merge pull request #6 from salahhusa9/component/select

Component Select

Author: salahhusa9

README.md

@@ -49,6 +49,15 @@ we support livewire loading state, so if you use livewire you can use loading st
 <x-template-components::button wire:target="save" />
 ```
 
+### Select component
+```html
+<x-template-components::select />
+```
+He accept all normal attributes of select tag and add some new attributes:
+- div-class: add class to div tag
+- label-class: add class to label tag
+- other attributes will be added to select tag
+
 ## Supported Templates
 
 - [Vuexy](https://pixinvent.com/demo/vuexy-html-bootstrap-admin-template/html/ltr/vertical-menu-template/dashboard-ecommerce.html)

config/template-components.php

@@ -14,6 +14,13 @@
             'button' => 'btn',
             'indicator-progress' => 'd-block',
             'spinner-class' => 'spinner-border spinner-border-sm',
-        ]
+        ],
+        'select' => [
+            'div' => '',
+            'label' => 'form-label',
+            'select' => 'form-select',
+            'error-div' => 'invalid-feedback',
+            'select-error' => 'is-invalid',
+        ],
     ],
 ];

resources/views/components/select.blade.php

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

tests/components/SelectComponentTest.php

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