wireui / wireui

TallStack UI components
https://v1.wireui.dev
MIT License
1.37k stars 166 forks source link

Disable Error reports on fields. #75

Closed greenspace10 closed 2 years ago

greenspace10 commented 2 years ago

I am trying to use input fields that are quite small and if an error is present on that field the text is very unpleasant looking, I have added a full error report on the bottom of the form. but would like to be able to disable error reporting on specific fields.

PH7-Jack commented 2 years ago

Hello, what do you think about using "without-error", "errorless"? Has any suggestions? In soon I'll implement it

greenspace10 commented 2 years ago

I like either of those options. leaning more towards errorless,,, but that's just my opinion.

itepifanio commented 2 years ago

I can work on this

PH7-Jack commented 2 years ago

This feature is now done. Enjoy WireUI @greenspace10

donatiss commented 1 year ago

will be this issue on radios/checkboxes?

gRoberts84 commented 6 months ago

Unfortunately as @donatiss has pointed out, this only appears to apply to the input component.

Easiest solution was to publish the view assets and then anywhere that used $errors->has($name) or similar, add !$attributes->has('errorless') && before, e.g.

<div>
        <label for="{{ $id }}" class="flex items-center {{ !$attributes->has('errorless') && $errors->has($name) ? 'text-negative-600':'' }}">
            <div class="relative flex items-start">
                @if ($leftLabel)
                    <div class="mr-2 text-sm text-right">
                        <x-dynamic-component
                            :component="WireUi::component('label')"
                            class=""
                            :for="$id"
                            :label="$leftLabel"
                            :has-error="!$attributes->has('errorless') && $errors->has($name)"
                        />
                        @if($description)
                            <div class="text-gray-500">{{ $description }}</div>
                        @endif
                    </div>
                @endif

                <div class="flex items-center h-5">
                    <input {{ $attributes->class([
                        $getClasses(!$attributes->has('errorless') && $errors->has($name)),
                    ])->merge([
                        'type'  => 'checkbox',
                    ]) }} />
                </div>

                @if ($label)
                    <div class="ml-2 text-sm">
                        <x-dynamic-component
                            :component="WireUi::component('label')"
                            class=""
                            :for="$id"
                            :label="$label"
                            :has-error="!$attributes->has('errorless') && $errors->has($name)"
                        />
                        @if($description)
                            <div id="{{ $id }} . comments-description" class="text-gray-500">{{ $description }}</div>
                        @endif
                    </div>
                @endif
            </div>
        </label>

    @if (!$attributes->has('errorless') && $name)
        <x-dynamic-component
            :component="WireUi::component('error')"
            :name="$name"
        />
    @endif
</div>
Uhasith commented 6 months ago

@itepifanio @greenspace10 Can anyone tell me this only applied for <x-input> ? For checkboxes and radio buttons it not working right?

Uhasith commented 6 months ago

Unfortunately as @donatiss has pointed out, this only appears to apply to the input component.

Easiest solution was to publish the view assets and then anywhere that used $errors->has($name) or similar, add !$attributes->has('errorless') && before, e.g.

<div>
        <label for="{{ $id }}" class="flex items-center {{ !$attributes->has('errorless') && $errors->has($name) ? 'text-negative-600':'' }}">
            <div class="relative flex items-start">
                @if ($leftLabel)
                    <div class="mr-2 text-sm text-right">
                        <x-dynamic-component
                            :component="WireUi::component('label')"
                            class=""
                            :for="$id"
                            :label="$leftLabel"
                            :has-error="!$attributes->has('errorless') && $errors->has($name)"
                        />
                        @if($description)
                            <div class="text-gray-500">{{ $description }}</div>
                        @endif
                    </div>
                @endif

                <div class="flex items-center h-5">
                    <input {{ $attributes->class([
                        $getClasses(!$attributes->has('errorless') && $errors->has($name)),
                    ])->merge([
                        'type'  => 'checkbox',
                    ]) }} />
                </div>

                @if ($label)
                    <div class="ml-2 text-sm">
                        <x-dynamic-component
                            :component="WireUi::component('label')"
                            class=""
                            :for="$id"
                            :label="$label"
                            :has-error="!$attributes->has('errorless') && $errors->has($name)"
                        />
                        @if($description)
                            <div id="{{ $id }} . comments-description" class="text-gray-500">{{ $description }}</div>
                        @endif
                    </div>
                @endif
            </div>
        </label>

    @if (!$attributes->has('errorless') && $name)
        <x-dynamic-component
            :component="WireUi::component('error')"
            :name="$name"
        />
    @endif
</div>

@gRoberts84 If i want to use this for checkboxes or radio buttons should i manually configure that erroless attribute for those inputs in published config files?