Tailwind Forms simple views

.github/workflows/run-tests.yml

@@ -3,41 +3,41 @@ name: run-tests
 on: [push, pull_request]
 
 jobs:
-    test:
-        runs-on: ubuntu-latest
-        strategy:
-            fail-fast: true
-            matrix:
-                php: [8.1, 8.0, 7.4]
-                laravel: [8.*]
-                framework: [tailwind, tailwind-2, bootstrap-4, bootstrap-5]
-                dependency-version: [prefer-lowest, prefer-stable]
-                include:
-                    - laravel: 8.*
-                      testbench: 6.*
-                exclude:
-                    - laravel: 7.*
-                      php: 8.1
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: true
+      matrix:
+        php: [8.1, 8.0, 7.4]
+        laravel: [8.*]
+        framework: [tailwind, tailwind-2, tailwind-forms-simple, bootstrap-4, bootstrap-5]
+        dependency-version: [prefer-lowest, prefer-stable]
+        include:
+          - laravel: 8.*
+            testbench: 6.*
+        exclude:
+          - laravel: 7.*
+            php: 8.1
 
-        name: P${{ matrix.php }} - Laravel ${{ matrix.laravel }} - ${{ matrix.dependency-version }} - Front-end Framework ${{ matrix.framework }}
+    name: P${{ matrix.php }} - Laravel ${{ matrix.laravel }} - ${{ matrix.dependency-version }} - Front-end Framework ${{ matrix.framework }}
 
-        steps:
-            - name: Checkout code
-              uses: actions/checkout@v2
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
 
-            - 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: 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 }}" "orchestra/testbench:${{ matrix.testbench }}" --no-interaction --no-update
-                  composer update --${{ matrix.dependency-version }} --prefer-dist --no-interaction --no-suggest
+      - name: Install dependencies
+        run: |
+          composer require "laravel/framework:${{ matrix.laravel }}" "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
+      - name: Execute tests
+        env:
+          FORM_COMPONENTS_FRAMEWORK: ${{ matrix.framework }}
+        run: vendor/bin/phpunit

README.md

@@ -102,7 +102,7 @@ The `action` attribute is optional, but you can pass a hard-coded, primitive val
 
 ## Configuration
 
-You can switch frameworks by updating the `framework` setting in the `form-components.php` configuration file. Check out the [customization section](#customize-the-blade-views) on publishing the configuration and view files.
+You can switch frameworks by updating the `framework` setting in the `form-components.php` configuration file. Check out the [customization section](#customize-the-blade-views) on publishing the configuration and view files. If you're using the [Livewire Stack with Laravel Jetstream](https://jetstream.laravel.com/2.x/stacks/livewire.html), you probably want to set the `framework` configuration key to `tailwind-forms-simple`.
 
 ```php
 return [

config/config.php

@@ -5,7 +5,7 @@
 return [
     'prefix' => '',
 
-    /** tailwind | tailwind-2 | bootstrap-4 | bootstrap-5 */
+    /** tailwind | tailwind-2 | tailwind-forms-simple | bootstrap-4 | bootstrap-5 */
     'framework' => 'tailwind',
 
     'use_eloquent_date_casting' => false,

resources/views/tailwind-forms-simple/form-checkbox.blade.php

@@ -0,0 +1,24 @@
+<div class="flex flex-col">
+    <label class="flex items-center">
+        <input {!! $attributes->merge(['class' => 'rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-offset-0 focus:ring-indigo-200 focus:ring-opacity-50']) !!}
+            type="checkbox"
+            value="{{ $value }}"
+
+            @if($isWired())
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
+            @endif
+
+            name="{{ $name }}"
+
+            @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-forms-simple/form-errors.blade.php

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

resources/views/tailwind-forms-simple/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-forms-simple/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 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 ' . ($label ? 'mt-1' : '')
+        ]) !!}
+            @if($isWired())
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
+            @else
+                value="{{ $value }}"
+            @endif
+
+            name="{{ $name }}"
+            type="{{ $type }}" />
+    </label>
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/tailwind-forms-simple/form-label.blade.php

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

resources/views/tailwind-forms-simple/form-radio.blade.php

@@ -0,0 +1,24 @@
+<div>
+    <label class="inline-flex items-center">
+        <input {!! $attributes->merge(['class' => 'rounded-full border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50']) !!}
+            type="radio"
+
+            @if($isWired())
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
+            @endif
+
+            name="{{ $name }}"
+            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-forms-simple/form-select.blade.php

@@ -0,0 +1,43 @@
+<div class="mt-4">
+    <label class="block">
+        <x-form-label :label="$label" />
+
+        <select
+            @if($isWired())
+                wire:model{!! $wireModifier() !!}="{{ $name }}"
+            @endif
+
+            name="{{ $name }}"
+
+            @if($multiple)
+                multiple
+            @endif
+
+            @if($placeholder)
+                placeholder="{{ $placeholder }}"
+            @endif
+
+            {!! $attributes->merge([
+                'class' => ($label ? 'mt-1 ' : '') . 'block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
+            ]) !!}>
+
+            @if($placeholder)
+                <option value="" disabled @if($nothingSelected()) selected="selected" @endif>
+                    {{ $placeholder }}
+                </option>
+            @endif
+
+            @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-forms-simple/form-submit.blade.php

@@ -0,0 +1,8 @@
+<div class="mt-6 flex items-center justify-between">
+    <button {!! $attributes->merge([
+        'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:ring focus:ring-gray-300 disabled:opacity-25 transition',
+        'type' => 'submit'
+    ]) !!}>
+        {!! trim($slot) ?: __('Submit') !!}
+    </button>
+</div>

resources/views/tailwind-forms-simple/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{!! $wireModifier() !!}="{{ $name }}"
+            @endif
+
+            name="{{ $name }}"
+
+            {!! $attributes->merge(['class' => 'block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50' . ($label ? ' mt-1' : '')]) !!}
+        >@unless($isWired()){!! $value !!}@endunless</textarea>
+    </label>
+
+    @if($hasErrorAndShow($name))
+        <x-form-errors :name="$name" />
+    @endif
+</div>

resources/views/tailwind-forms-simple/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>