Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@robsontenorio
robsontenorio committed Aug 20, 2023
1 parent ccacb7f commit 7574600
Show file tree
Hide file tree
Showing 8 changed files with 102 additions and 57 deletions.
12 changes: 11 additions & 1 deletion src/View/Components/Button.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ class Button extends Component
public function __construct(
public ?string $label = null,
public ?string $icon = null,
public ?string $iconRight = null,
public ?string $spinner = null
) {
$this->uuid = md5(serialize($this));
Expand Down Expand Up @@ -40,19 +41,28 @@ public function render(): View|Closure|string
wire:target="{{ $spinnerTarget() }}"
wire:loading.attr="disabled"
@endif
>
>
<!-- SPINNER -->
@if($spinner)
<span wire:loading wire:target="{{ $spinnerTarget() }}" class="loading loading-spinner w-5 h-5"></span>
@endif
<!-- ICON -->
@if($icon)
<span @if($spinner) wire:loading.remove wire:target="{{ $spinnerTarget() }}" @endif>
<x-icon :name="$icon" />
</span>
@endif
{{ $label ?? $slot }}
<!-- ICON RIGHT -->
@if($iconRight)
<span @if($spinner) wire:loading.remove wire:target="{{ $spinnerTarget() }}" @endif>
<x-icon :name="$iconRight" />
</span>
@endif
</button>
HTML;
}
Expand Down
11 changes: 6 additions & 5 deletions src/View/Components/Checkbox.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,16 @@ public function __construct(
public function render(): View|Closure|string
{
return <<<'HTML'
<label class="@if(!$tight) label @else flex items-center gap-3 py-2 px-1 @endif label-text font-semibold">
@if(!$right)
{{ $label}}
<label class="flex items-center gap-3 cursor-pointer">
@if($right)
<span @class(["flex-1" => !$tight])>
{{ $label}}
</span>
@endif
<input type="checkbox" {{ $attributes->whereDoesntStartWith('class') }} {{ $attributes->class(['checkbox checkbox-primary']) }} />
@if($right)
@if(!$right)
{{ $label}}
@endif
Expand Down
47 changes: 27 additions & 20 deletions src/View/Components/Dropdown.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,34 +9,41 @@
class Dropdown extends Component
{
public function __construct(
public string $label,
public ?string $label = null,
public ?string $icon = 'o-chevron-down',
public ?bool $right = false
public ?bool $right = false,

//Slots
public mixed $trigger = null
) {

}

public function render(): View|Closure|string
{
return <<<'HTML'
<span x-data="{open: false}">
<span @click.outside="open = false">
<details class="dropdown @if($right) dropdown-end @endif" :open="open">
<summary
@click.prevent="open = !open"
wire:loading.attr="disabled"
{{ $attributes->class(["m-1 btn normal-case"]) }}
>
{{ $label }}
<x-icon :name="$icon" />
</summary>
<ul @click="open = false" class="dropdown-content p-2 shadow menu z-[1] bg-base-100 rounded-box whitespace-nowrap">
{{ $slot }}
</ul>
</details>
</span>
</span>
<details
class="dropdown @if($right) dropdown-end @endif"
x-data="{open: false}"
@click.outside="open = false"
:open="open"
>
<!-- CUSTOM TRIGGER -->
@if($trigger)
<summary @click.prevent="open = !open">
{{ $trigger }}
</summary>
@else
<!-- DEFAULT TRIGGER -->
<summary @click.prevent="open = !open" {{ $attributes->class(["btn normal-case"]) }}>
{{ $label }}
<x-icon :name="$icon" />
</summary>
@endif
<ul @click="open = false" class="dropdown-content p-2 shadow menu z-[1] bg-base-100 rounded-box whitespace-nowrap">
{{ $slot }}
</ul>
</details>
HTML;
}
}
12 changes: 9 additions & 3 deletions src/View/Components/Icon.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\Support\Str;
use Illuminate\View\Component;

class Icon extends Component
Expand All @@ -12,20 +13,25 @@ class Icon extends Component

public function __construct(
public string $name,
public string $prefix = 'heroicon'
public ?string $class = null,
private string $defaultClasses = 'w-5 h-5 inline'
) {
$this->uuid = md5(serialize($this));
}

public function classes(): string
{
return $this->attributes->class(['w-5 h-5 inline'])['class'];
if (Str::contains($this->class, ['w-', 'h-'])) {
return "inline {$this->class}";
}

return "{$this->defaultClasses} {$this->class}";
}

public function render(): View|Closure|string
{
return <<<'HTML'
@svg($prefix.'-'.$name, "$classes")
@svg("heroicon-{$name}", "$classes()")
HTML;
}
}
50 changes: 30 additions & 20 deletions src/View/Components/Input.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,23 @@ class Input extends Component
public function __construct(
public ?string $label = null,
public ?string $icon = null,
public ?string $iconRight = null,
public ?string $hint = null,
public ?string $prefix = null,
public ?string $sufix = null,
public bool $inline = false,
public bool $money = false,
public string $thousandsSeparator = ',',
public string $fractionSeparator = '.',

// Slots
public mixed $prepend = null,
public mixed $append = null
) {
$this->uuid = md5(serialize($this));
}

public function name(): ?string
public function modelName(): ?string
{
return $this->attributes->whereStartsWith('wire:model')->first();
}
Expand All @@ -38,15 +43,15 @@ public function render(): View|Closure|string
<label class="pt-0 label label-text font-semibold">{{ $label }}</label>
@endif
<!-- PREFIX/SUFIX CONTAINER -->
@if($prefix || $sufix)
<!-- PREFIX/SUFIX/PREPEND/APPEND CONTAINER -->
@if($prefix || $sufix || $prepend || $append)
<div class="flex">
@endif
<!-- PREFIX -->
@if($prefix)
<div class="rounded-l-lg px-4 flex items-center bg-base-200 border border-base-300">
{{ $prefix }}
<!-- PREFIX / PREPEND -->
@if($prefix || $prepend)
<div class="rounded-l-lg flex items-center bg-base-200 @if($prefix) border border-base-300 px-4 @endif">
{{ $prepend ?? $prefix }}
</div>
@endif
Expand All @@ -55,10 +60,15 @@ public function render(): View|Closure|string
@if($icon)
<x-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 ml-3 text-gray-400 " />
@endif
<!-- RIGHT ICON -->
@if($iconRight)
<x-icon :name="$iconRight" class="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 " />
@endif
<!-- MONEY SETUP -->
@if($money)
<div x-data="{display: ''}" x-init="display = $wire.{{ $name() }}?.replace('.', '{{ $fractionSeparator }}')">
<div x-data="{display: ''}" x-init="display = $wire.{{ $modelName() }}?.replace('.', '{{ $fractionSeparator }}')">
@endif
<!-- INPUT -->
Expand All @@ -69,7 +79,7 @@ public function render(): View|Closure|string
@if($money)
:value="display"
x-mask:dynamic="$money($input, '{{ $fractionSeparator}}', '{{ $thousandsSeparator }}')"
@input="$wire.{{ $name() }} = $el.value.replaceAll('{{ $thousandsSeparator }}', '').replaceAll('{{ $fractionSeparator }}', '.')"
@input="$wire.{{ $modelName() }} = $el.value.replaceAll('{{ $thousandsSeparator }}', '').replaceAll('{{ $fractionSeparator }}', '.')"
@endif
{{
Expand All @@ -81,10 +91,10 @@ public function render(): View|Closure|string
'pl-10' => ($icon),
'h-14' => ($inline),
'pt-3' => ($inline && $label),
'rounded-l-none' => $prefix,
'rounded-r-none' => $sufix,
'rounded-l-none' => $prefix || $prepend,
'rounded-r-none' => $sufix || $append,
'border border-dashed' => $attributes->has('readonly'),
'input-error' => $errors->has($name())
'input-error' => $errors->has($modelName())
])
}}
/>
Expand All @@ -103,26 +113,26 @@ public function render(): View|Closure|string
@endif
</div>
<!-- SUFIX -->
@if($sufix)
<div class="rounded-r-lg py-3.5 px-4 bg-base-200 border border-base-300">
{{ $sufix }}
<!-- SUFIX/APPEND -->
@if($sufix || $append)
<div class="rounded-r-lg flex items-center bg-base-200 @if($sufix) border border-base-300 px-4 @endif">
{{ $append ?? $sufix }}
</div>
@endif
<!-- END: PREFIX / SUFIX CONTAINER -->
@if($prefix || $sufix)
<!-- END: PREFIX/SUFIX/APPEND/PREPEND CONTAINER -->
@if($prefix || $sufix || $prepend || $append)
</div>
@endif
<!-- ERROR -->
@error($name())
@error($modelName())
<div class="text-red-500 label-text-alt p-1">{{ $message }}</div>
@enderror
<!-- HINT -->
@if($hint)
<div class="label-text-alt text-gray-400 p-1">{{ $hint }}</div>
<div class="label-text-alt text-gray-400 p-1 pb-0">{{ $hint }}</div>
@endif
</div>
HTML;
Expand Down
2 changes: 1 addition & 1 deletion src/View/Components/MenuItem.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ public function render(): View|Closure|string
<x-icon :name="$icon" />
@endif
{{ $title }}
{{ $title ?? $slot }}
</a>
</li>
HTML;
Expand Down
15 changes: 12 additions & 3 deletions src/View/Components/Select.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ class Select extends Component
public function __construct(
public ?string $label = null,
public ?string $icon = null,
public ?string $iconRight = null,
public ?string $hint = null,
public ?string $placeholder = null,
public ?bool $inline = false,
Expand All @@ -32,17 +33,23 @@ public function name(): string
public function render(): View|Closure|string
{
return <<<'HTML'
<div wire:key="{{ $uuid }}">
<div wire:key="{{ $uuid }}">
<!-- STANDARD LABEL -->
@if($label && !$inline)
<label class="label label-text font-semibold">{{ $label }}</label>
@endif
<div class="relative">
<!-- ICON -->
@if($icon)
<x-icon :name="$icon" class="absolute top-1/2 -translate-y-1/2 ml-3 text-gray-400" />
@endif
<!-- RIGHT ICON -->
@if($iconRight)
<x-icon :name="$iconRight" class="absolute top-1/2 right-8 -translate-y-1/2 text-gray-400 " />
@endif
<select
{{ $attributes->whereDoesntStartWith('class') }}
{{ $attributes->class([
Expand All @@ -55,7 +62,6 @@ public function render(): View|Closure|string
}}
>
@if($placeholder)
<option>{{ $placeholder }}</option>
@endif
Expand All @@ -65,17 +71,20 @@ public function render(): View|Closure|string
@endforeach
</select>
<!-- INLINE LABEL -->
@if($label && $inline)
<label class="absolute text-gray-500 duration-300 transform -translate-y-1 scale-75 top-2 z-10 origin-[0] bg-white rounded dark:bg-gray-900 px-2 peer-focus:px-2 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-1 @if($inline && $icon) left-9 @else left-3 @endif">
{{ $label }}
</label>
@endif
</div>
<!-- ERROR -->
@error($name)
<div class="text-red-500">{{ $message }}</div>
@enderror
<!-- HINT -->
@if($hint)
<div class="label-text-alt text-gray-400 pl-1 mt-2">{{ $hint }}</div>
@endif
Expand Down
10 changes: 6 additions & 4 deletions src/View/Components/Toggle.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,17 @@ public function __construct(
public function render(): View|Closure|string
{
return <<<'HTML'
<label class="@if(!$tight) label @else flex items-center gap-3 py-2 px-1 @endif label-text font-semibold">
<label class="flex items-center gap-3 cursor-pointer">
@if(!$right)
{{ $label}}
@if($right)
<span @class(["flex-1" => !$tight])>
{{ $label}}
</span>
@endif
<input type="checkbox" {{ $attributes->whereDoesntStartWith('class') }} {{ $attributes->class(['toggle toggle-primary']) }} />
@if($right)
@if(!$right)
{{ $label}}
@endif
Expand Down

0 comments on commit 7574600

Please sign in to comment.