Skip to content
This repository was archived by the owner on Jan 2, 2024. It is now read-only.

Commit b642e4d

Browse files
pascalbaljetpascalbaljet
authored
Added support for Tailwind v2.0 with Tailwind Forms (#26)
* Added support for Tailwind v2.0 with Tailwind Forms * Move to GA
1 parent c7292e8 commit b642e4d

15 files changed

+222
-42
lines changed

‎.github/workflows/run-tests.yml

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
name: run-tests
2+
3+
on: [push, pull_request]
4+
5+
jobs:
6+
test:
7+
runs-on: ubuntu-latest
8+
strategy:
9+
fail-fast: true
10+
matrix:
11+
php: [7.4]
12+
laravel: [8.*, 7.*]
13+
framework: [tailwind, tailwind-2, bootstrap-4]
14+
dependency-version: [prefer-lowest, prefer-stable]
15+
include:
16+
- laravel: 8.*
17+
testbench: 6.*
18+
livewire: ^2.0
19+
- laravel: 7.*
20+
testbench: 5.*
21+
livewire: ^1.3.2
22+
23+
name: P${{ matrix.php }} - L${{ matrix.laravel }} - ${{ matrix.dependency-version }} - ${{ matrix.framework }}
24+
25+
steps:
26+
- name: Checkout code
27+
uses: actions/checkout@v2
28+
29+
- name: Cache dependencies
30+
uses: actions/cache@v2
31+
with:
32+
path: ~/.composer/cache/files
33+
key: dependencies-laravel-${{ matrix.laravel }}-livewire-${{ matrix.livewire }}-php-${{ matrix.php }}-composer-${{ hashFiles('composer.json') }}
34+
35+
- name: Setup PHP
36+
uses: shivammathur/setup-php@v2
37+
with:
38+
php-version: ${{ matrix.php }}
39+
extensions: dom, curl, libxml, mbstring, zip, pcntl, pdo, sqlite, pdo_sqlite, bcmath, soap, intl, gd, exif, iconv, imagick, mysql, mysqli, pdo_mysql
40+
coverage: none
41+
42+
- name: Install dependencies
43+
run: |
44+
composer require "laravel/framework:${{ matrix.laravel }}" "livewire/livewire:${{ matrix.livewire }}" "orchestra/testbench:${{ matrix.testbench }}" --no-interaction --no-update
45+
composer update --${{ matrix.dependency-version }} --prefer-dist --no-interaction --no-suggest
46+
47+
- name: Execute tests
48+
env:
49+
FORM_COMPONENTS_FRAMEWORK: ${{ matrix.framework }}
50+
run: vendor/bin/phpunit

‎.styleci.yml

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎.travis.yml

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎README.md

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ A set of Blade components to rapidly build forms with [Tailwind CSS Custom Forms
1313
## Features
1414

1515
* Components for input, textarea, select, multi-select, checkbox and radio elements.
16-
* Support for [Tailwind CSS Custom Forms](https://tailwindcss-custom-forms.netlify.app) and [Bootstrap 4 Forms](https://getbootstrap.com/docs/4.0/components/forms/).
16+
* Support for Tailwind v1 with [Tailwind CSS Custom Forms](https://tailwindcss-custom-forms.netlify.app) and
17+
* Support for Tailwind v2 with [Tailwind Forms](https://tailwindcss-forms.vercel.app/) and
18+
* Support for [Bootstrap 4 Forms](https://getbootstrap.com/docs/4.0/components/forms/).
1719
* Component logic independent from Blade views, the Tailwind and Bootstrap views use the same logic.
1820
* Bind a target to a form (or a set of elements) to provide default values.
1921
* 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
8991

9092
## Configuration
9193

92-
There is no configuration needed unless you want to [customize the Blade views and components](#customize-the-blade-views).
94+
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.
95+
96+
```php
97+
return [
98+
'framework' => 'bootstrap-4',
99+
];
100+
```
101+
102+
No further configuration is needed unless you want to [customize the Blade views and components](#customize-the-blade-views).
93103

94104
## Usage
95105

‎config/config.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
return [
66
'prefix' => '',
77

8+
/** tailwind | tailwind-2 | bootstrap-4 */
89
'framework' => 'tailwind',
910

1011
'components' => [

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div class="flex flex-col">
2+
<label class="flex items-center">
3+
<input {!! $attributes !!}
4+
type="checkbox"
5+
value="{{ $value }}"
6+
7+
@if($isWired())
8+
wire:model="{{ $name }}"
9+
@else
10+
name="{{ $name }}"
11+
@endif
12+
13+
@if($checked)
14+
checked="checked"
15+
@endif
16+
/>
17+
18+
<span class="ml-2">{{ $label }}</span>
19+
</label>
20+
21+
@if($hasErrorAndShow($name))
22+
<x-form-errors :name="$name" />
23+
@endif
24+
</div>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@error($name, $bag)
2+
<p {!! $attributes->merge(['class' => 'text-red-500 text-xs italic']) !!}>
3+
{{ $message }}
4+
</p>
5+
@enderror

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<div {!! $attributes->merge(['class' => 'mt-4']) !!}>
2+
<x-form-label :label="$label" />
3+
4+
<div class="@if($label) mt-2 @endif @if($inline) flex flex-wrap space-x-6 @endif">
5+
{!! $slot !!}
6+
</div>
7+
8+
@if($hasErrorAndShow($name))
9+
<x-form-errors :name="$name" />
10+
@endif
11+
</div>

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<div class="@if($type === 'hidden') hidden @else mt-4 @endif">
2+
<label class="block">
3+
<x-form-label :label="$label" />
4+
5+
<input {!! $attributes->merge([
6+
'class' => 'block w-full ' . ($label ? 'mt-1' : '')
7+
]) !!}
8+
@if($isWired())
9+
wire:model="{{ $name }}"
10+
@else
11+
name="{{ $name }}"
12+
value="{{ $value }}"
13+
@endif
14+
15+
type="{{ $type }}" />
16+
</label>
17+
18+
@if($hasErrorAndShow($name))
19+
<x-form-errors :name="$name" />
20+
@endif
21+
</div>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@if($label)
2+
<span {!! $attributes->merge(['class' => 'text-gray-700']) !!}>{{ $label }}</span>
3+
@endif

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<div>
2+
<label class="inline-flex items-center">
3+
<input {!! $attributes !!}
4+
type="radio"
5+
6+
@if($isWired())
7+
wire:model="{{ $name }}"
8+
@else
9+
name="{{ $name }}"
10+
@endif
11+
12+
value="{{ $value }}"
13+
14+
@if($checked)
15+
checked="checked"
16+
@endif
17+
/>
18+
19+
<span class="ml-2">{{ $label }}</span>
20+
</label>
21+
22+
@if($hasErrorAndShow($name))
23+
<x-form-errors :name="$name" />
24+
@endif
25+
</div>

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<div class="mt-4">
2+
<label class="block">
3+
<x-form-label :label="$label" />
4+
5+
<select
6+
@if($isWired())
7+
wire:model="{{ $name }}"
8+
@else
9+
name="{{ $name }}"
10+
@endif
11+
12+
@if($multiple)
13+
multiple
14+
@endif
15+
16+
{!! $attributes->merge([
17+
'class' => ($label ? 'mt-1' : '') . ' block w-full'
18+
]) !!}>
19+
@forelse($options as $key => $option)
20+
<option value="{{ $key }}" @if($isSelected($key)) selected="selected" @endif>
21+
{{ $option }}
22+
</option>
23+
@empty
24+
{!! $slot !!}
25+
@endforelse
26+
</select>
27+
</label>
28+
29+
@if($hasErrorAndShow($name))
30+
<x-form-errors :name="$name" />
31+
@endif
32+
</div>

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

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

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<div class="mt-4">
2+
<label class="block">
3+
<x-form-label :label="$label" />
4+
5+
<textarea
6+
@if($isWired())
7+
wire:model="{{ $name }}"
8+
@else
9+
name="{{ $name }}"
10+
@endif
11+
12+
{!! $attributes->merge(['class' => 'block w-full ' . ($label ? 'mt-1' : '')]) !!}
13+
>@unless($isWired()){!! $value !!}@endunless</textarea>
14+
</label>
15+
16+
@if($hasErrorAndShow($name))
17+
<x-form-errors :name="$name" />
18+
@endif
19+
</div>

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<form method="{{ $spoofMethod ? 'POST' : $method }}" {!! $attributes !!}>
2+
@unless(in_array($method, ['HEAD', 'GET', 'OPTIONS']))
3+
@csrf
4+
@endunless
5+
6+
@if($spoofMethod)
7+
@method($method)
8+
@endif
9+
10+
{!! $slot !!}
11+
</form>

0 commit comments

Comments
 (0)