Added support for Tailwind v2.0 with Tailwind Forms (#26)

* Added support for Tailwind v2.0 with Tailwind Forms
* Move to GA

.github/workflows/run-tests.yml

@@ -0,0 +1,50 @@
+name: run-tests
+
+on: [push, pull_request]
+
+jobs:
+    test:
+        runs-on: ubuntu-latest
+        strategy:
+            fail-fast: true
+            matrix:
+                php: [7.4]
+                laravel: [8.*, 7.*]
+                framework: [tailwind, tailwind-2, bootstrap-4]
+                dependency-version: [prefer-lowest, prefer-stable]
+                include:
+                    -   laravel: 8.*
+                        testbench: 6.*
+                        livewire: ^2.0
+                    -   laravel: 7.*
+                        testbench: 5.*
+                        livewire: ^1.3.2
+
+        name: P${{ matrix.php }} - L${{ matrix.laravel }} - ${{ matrix.dependency-version }} - ${{ matrix.framework }}
+
+        steps:
+            -   name: Checkout code
+                uses: actions/checkout@v2
+
+            -   name: Cache dependencies
+                uses: actions/cache@v2
+                with:
+                    path: ~/.composer/cache/files
+                    key: dependencies-laravel-${{ matrix.laravel }}-livewire-${{ matrix.livewire }}-php-${{ matrix.php }}-composer-${{ hashFiles('composer.json') }}
+
+            -   name: Setup PHP
+                uses: shivammathur/setup-php@v2
+                with:
+                    php-version: ${{ matrix.php }}
+                    extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv, imagick, mysql, mysqli, pdo_mysql
+                    coverage: none
+
+            -   name: Install dependencies
+                run: |
+                    composer require "laravel/framework:${{ matrix.laravel }}" "livewire/livewire:${{ matrix.livewire }}" "orchestra/testbench:${{ matrix.testbench }}" --no-interaction --no-update
+                    composer update --${{ matrix.dependency-version }} --prefer-dist --no-interaction --no-suggest
+
+            -   name: Execute tests
+                env:
+                    FORM_COMPONENTS_FRAMEWORK: ${{ matrix.framework }}
+                run: vendor/bin/phpunit

README.md

@@ -13,7 +13,9 @@ A set of Blade components to rapidly build forms with [Tailwind CSS Custom Forms
 ## Features
 
 * Components for input, textarea, select, multi-select, checkbox and radio elements.
-* Support for [Tailwind CSS Custom Forms](https://tailwindcss-custom-forms.netlify.app) and [Bootstrap 4 Forms](https://getbootstrap.com/docs/4.0/components/forms/).
+* Support for Tailwind v1 with [Tailwind CSS Custom Forms](https://tailwindcss-custom-forms.netlify.app) and
+* Support for Tailwind v2 with [Tailwind Forms](https://tailwindcss-forms.vercel.app/) and
+* Support for [Bootstrap 4 Forms](https://getbootstrap.com/docs/4.0/components/forms/).
 * Component logic independent from Blade views, the Tailwind and Bootstrap views use the same logic.
 * Bind a target to a form (or a set of elements) to provide default values.
 * Support for [Laravel Livewire](https://laravel-livewire.com).
@@ -89,7 +91,15 @@ The `action` attribute is optional, but you can pass a hard-coded, primitive val
 
 ## Configuration
 
-There is no configuration needed unless you want to [customize the Blade views and components](#customize-the-blade-views).
+You can switch frameworks by updating the `framework` setting in the `form-components.php` configuration file. Use the `artisan vendor:publish` command to publish the configuration file.
+
+```php
+return [
+    'framework' => 'bootstrap-4',
+];
+```
+
+No further configuration is needed unless you want to [customize the Blade views and components](#customize-the-blade-views).
 
 ## Usage
 

config/config.php

@@ -5,6 +5,7 @@
 return [
     'prefix' => '',
 
+    /** tailwind | tailwind-2 | bootstrap-4 */
     'framework' => 'tailwind',
 
     'components' => [

resources/views/tailwind-2/form-checkbox.blade.php

@@ -0,0 +1,24 @@
+<div class="flex flex-col">
+    <label class="flex items-center">
+        <input {!! $attributes !!}
+            type="checkbox"
+            value="{{ $value }}"
+
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+            @endif
+
+            @if($checked)
+                checked="checked"
+            @endif
+        />
+
+        <span class="ml-2">{{ $label }}</span>
+    </label>
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/tailwind-2/form-errors.blade.php

@@ -0,0 +1,5 @@
+@error($name, $bag)
+    <p {!! $attributes->merge(['class' => 'text-red-500 text-xs italic']) !!}>
+        {{ $message }}
+    </p>
+@enderror

resources/views/tailwind-2/form-group.blade.php

@@ -0,0 +1,11 @@
+<div {!! $attributes->merge(['class' => 'mt-4']) !!}>
+    <x-form-label :label="$label" />
+
+    <div class="@if($label) mt-2 @endif @if($inline) flex flex-wrap space-x-6 @endif">
+        {!! $slot !!}
+    </div>
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/tailwind-2/form-input.blade.php

@@ -0,0 +1,21 @@
+<div class="@if($type === 'hidden') hidden @else mt-4 @endif">
+    <label class="block">
+        <x-form-label :label="$label" />
+
+        <input {!! $attributes->merge([
+            'class' => 'block w-full ' . ($label ? 'mt-1' : '')
+        ]) !!}
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+                value="{{ $value }}"
+            @endif
+
+            type="{{ $type }}" />
+    </label>
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/tailwind-2/form-label.blade.php

@@ -0,0 +1,3 @@
+@if($label)
+    <span {!! $attributes->merge(['class' => 'text-gray-700']) !!}>{{ $label }}</span>
+@endif

resources/views/tailwind-2/form-radio.blade.php

@@ -0,0 +1,25 @@
+<div>
+    <label class="inline-flex items-center">
+        <input {!! $attributes !!}
+            type="radio"
+
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+            @endif
+
+            value="{{ $value }}"
+
+            @if($checked)
+                checked="checked"
+            @endif
+        />
+
+        <span class="ml-2">{{ $label }}</span>
+    </label>
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/tailwind-2/form-select.blade.php

@@ -0,0 +1,32 @@
+<div class="mt-4">
+    <label class="block">
+        <x-form-label :label="$label" />
+
+        <select
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+            @endif
+
+            @if($multiple)
+                multiple
+            @endif
+
+            {!! $attributes->merge([
+                'class' => ($label ? 'mt-1' : '') . ' block w-full'
+            ]) !!}>
+            @forelse($options as $key => $option)
+                <option value="{{ $key }}" @if($isSelected($key)) selected="selected" @endif>
+                    {{ $option }}
+                </option>
+            @empty
+                {!! $slot !!}
+            @endforelse
+        </select>
+    </label>
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/tailwind-2/form-submit.blade.php

@@ -0,0 +1,8 @@
+<div class="mt-6 flex items-center justify-between">
+    <button {!! $attributes->merge([
+        'class' => 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 focus:outline-none focus:shadow-outline',
+        'type' => 'submit'
+    ]) !!}>
+        {!! trim($slot) ?: __('Submit') !!}
+    </button>
+</div>

resources/views/tailwind-2/form-textarea.blade.php

@@ -0,0 +1,19 @@
+<div class="mt-4">
+    <label class="block">
+        <x-form-label :label="$label" />
+
+        <textarea
+            @if($isWired())
+                wire:model="{{ $name }}"
+            @else
+                name="{{ $name }}"
+            @endif
+
+            {!! $attributes->merge(['class' => 'block w-full ' . ($label ? 'mt-1' : '')]) !!}
+        >@unless($isWired()){!! $value !!}@endunless</textarea>
+    </label>
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/tailwind-2/form.blade.php

@@ -0,0 +1,11 @@
+<form method="{{ $spoofMethod ? 'POST' : $method }}" {!! $attributes !!}>
+@unless(in_array($method, ['HEAD', 'GET', 'OPTIONS']))
+    @csrf
+@endunless
+
+@if($spoofMethod)
+    @method($method)
+@endif
+
+    {!! $slot !!}
+</form>