silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 106 Wiki Activity

Add alpineJS Support for label field

This commit is contained in:
philipp lang 2024-12-27 00:51:40 +01:00
parent f461c37ccc
commit 5d6add1976
6 changed files with 73 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/View/Form/Editor.php
View File

@ -27,7 +27,7 @@ class Editor extends Component
return <<<'HTML'
<div class="flex flex-col group {{$heightClass}}">
@if ($label)
<x-form::label :required="$required">{{$label}}</x-form::label>
<x-form::label :required="$required" :value="$label" />
@endif
<div class="relative w-full h-full">
@ -41,7 +41,7 @@ class Editor extends Component
@updated="$wire.{{$attributes->wire('model')->value}} = $event.detail"
x-data="editor($wire.{{$attributes->wire('model')->value}})"
id="{{$id}}"
{{$attributes}}
{{$attributes->except(['label', ':label'])}}
></div>
<x-ui::errors :for="$name" />
@if($hint)

36
app/View/Form/Label.php
View File

@ -4,6 +4,7 @@ namespace App\View\Form;
use App\View\Traits\HasFormDimensions;
use Illuminate\View\Component;
use Illuminate\View\ComponentAttributeBag;
class Label extends Component
{
@ -12,17 +13,46 @@ class Label extends Component
public function __construct(
public bool $required = false,
public string $value = ''
) {
}
public function asAlpineString(ComponentAttributeBag $attributes, string $tagName): string
{
$rawTag = ':' . $tagName;
if ($attributes->has($rawTag)) {
return $attributes->get($rawTag);
}
$output = e($this->{$tagName});
return str($output)->swap([
'`' => '\\`',
'$' => '\\$',
'{' => '\\{',
'}' => '\\}',
])->wrap('`');
}
public function asAlpineBool(ComponentAttributeBag $attributes, string $tagName): string
{
$rawTag = ':' . $tagName;
if ($attributes->has($rawTag)) {
return $attributes->get($rawTag);
}
return $this->{$tagName} ? 'true' : 'false';
}
public function render()
{
return <<<'HTML'
<span class="font-semibold leading-none text-gray-400 group-[.size-default]:text-sm group-[.size-sm]:text-xs">
{{ $slot }}
@if ($required)
<span x-text="{!! $asAlpineString($attributes, 'value') !!}"></span>
<template x-if="{!! $asAlpineBool($attributes, 'required') !!}">
<span class="text-red-800">&nbsp;*</span>
@endif
</template>
</span>
HTML;
}

4
app/View/Form/Lever.php
View File

@ -29,10 +29,10 @@ class Lever extends Component
return <<<'HTML'
<label class="flex flex-col items-start group {{$heightClass}} " for="{{$id}}" style="{{$heightVars}}">
@if ($label)
<x-form::label :required="$required">{{$label}}</x-form::label>
<x-form::label :required="$required" :value="$label" />
@endif
<span class="relative flex-none flex h-[var(--height)] @if($hint) pr-8 @endif">
<input id="{{$id}}" type="checkbox" name="{{$name}}" value="{{$value}}" @if($disabled) disabled="disabled" @endif class="absolute peer opacity-0" {{ $attributes }} />
<input id="{{$id}}" type="checkbox" name="{{$name}}" value="{{$value}}" @if($disabled) disabled="disabled" @endif class="absolute peer opacity-0" {{ $attributes->except('label.raw') }} />
<span class="relative cursor-pointer h-full w-[calc(var(--height)*2)] rounded peer-focus:bg-red-500 duration-300 bg-gray-700 peer-checked:bg-primary-700"></span>
<span class="absolute h-full top-0 left-0 flex-none flex justify-center items-center aspect-square">
<x-ui::sprite

4
app/View/Form/Select.php
View File

@ -29,11 +29,11 @@ class Select extends Component
return <<<'HTML'
<label class="flex flex-col group {{$heightClass}}" for="{{$id}}" style="{{$heightVars}}">
@if ($label)
<x-form::label :required="$required">{{$label}}</x-form::label>
<x-form::label :required="$required" :value="$label"></x-form::label>
@endif
<div class="relative flex-none flex">
<select {{$attributes}} @if($disabled) disabled @endif name="{{$name}}" id="{{$id}}"
<select {{$attributes->except(['label', ':label'])}} @if($disabled) disabled @endif name="{{$name}}" id="{{$id}}"
class="
w-full h-[var(--height)] border-gray-600 border-solid text-gray-300 bg-gray-700 leading-none rounded-lg
group-[.size-default]:border-2 group-[.size-sm]:border

4
app/View/Form/Text.php
View File

@ -28,7 +28,7 @@ class Text extends Component
return <<<'HTML'
<label {{ $attributes->merge(['class' => 'flex flex-col group '.$heightClass])->only('class') }} for="{{$id}}" style="{{$heightVars}}">
@if ($label)
<x-form::label :required="$required">{{$label}}</x-form::label>
<x-form::label :required="$required" :value="$label" />
@endif
<div class="relative flex-none flex">
<input
@ -42,7 +42,7 @@ class Text extends Component
group-[.size-default]:text-sm group-[.size-sm]:text-xs
group-[.size-default]:p-2 group-[.size-sm]:p-1
"
{{ $attributes->except('class') }}
{{ $attributes->except(['class', 'label', ':label']) }}
/>
<x-ui::errors :for="$name" />
@if($hint)

31
tests/Unit/View/Form/LabelTest.php Normal file
View File

@ -0,0 +1,31 @@
<?php
namespace Tests\Unit\View\Form;
use Illuminate\Support\Facades\Blade;
use Tests\TestCase;
uses(TestCase::class);
it('renders component', function ($component, $params, $expected = '', $notExpected = '') {
$rendered = Blade::render($component, $params);
if ($expected) {
expect($rendered)->toContain($expected);
}
if ($notExpected) {
expect($rendered)->not()->toContain($notExpected);
}
})->with([
'component parameter' => ['<x-form::label :value="$label" />', ['label' => 'the label'], 'x-text="`the label`"'],
'component parameter with double quotes' => ['<x-form::label :value="$label" />', ['label' => 'the "label"'], 'x-text="`the &quot;label&quot;`"'],
'component parameter with ``' => ['<x-form::label value="the `label`" />', [], 'x-text="`the \\`label\\``"'],
'escape dollars' => ['<x-form::label value="the $label" />', [], 'x-text="`the \\$label`"'],
'escape kl' => ['<x-form::label value="the {label}" />', [], 'x-text="`the \\{label\\}`"'],
'raw php string' => ['<x-form::label value="the label" />', [], 'x-text="`the label`"'],
'raw js string' => ['<x-form::label ::value="theLabel" />', [], 'x-text="theLabel"'],
'raw js string with tag' => ['<x-form::label ::value="the<Label" />', [], 'x-text="the<Label"'],
'renders required' => ['<x-form::label value="" required/>', [], 'x-if="true"'],
'renders required' => ['<x-form::label value="" />', [], 'x-if="false"'],
]);