Skip to content

Commit 334772a

Browse files
QuentinGabQuentinGab
committed
allow customization
1 parent 4fc74df commit 334772a

File tree

11 files changed

+275
-74
lines changed

11 files changed

+275
-74
lines changed

‎config/blade-kit.php‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
11
<?php
22

3-
// config for Elegantly/Kit
3+
use Elegantly\Kit\Ui\Base;
4+
use Elegantly\Kit\Ui\Button;
5+
use Elegantly\Kit\Ui\Input;
6+
use Elegantly\Kit\Ui\Select;
7+
use Elegantly\Kit\Ui\SwitchUi;
8+
use Elegantly\Kit\Ui\Tag;
9+
410
return [
511

12+
'ui' => [
13+
'base' => Base::class,
14+
'button' => Button::class,
15+
'input' => Input::class,
16+
'select' => Select::class,
17+
'tag' => Tag::class,
18+
'switch' => SwitchUi::class,
19+
],
20+
621
];

‎resources/views/components/button/base.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
])
1010

1111
<{!! $tag !!} {!! $attributes->class([
12-
\Elegantly\Kit\Facades\Kit::button()->size($size)->color($color)->font()->background()->outline()->spacing()->hover(),
12+
\Elegantly\Kit\Facades\Kit::button()->size($size)->color($color)->font()->background()->outline()->border()->ring()->spacing()->hover(),
1313
'shrink-0 relative align-middle',
1414
'inline-flex items-center',
1515
'outline-2 outline-offset-2',

‎resources/views/components/button/radio.blade.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@props([
22
'checked' => false,
33
'disabled' => false,
4-
'colorChecked' => null,
4+
'colorChecked' => 'black',
55
'type' => 'radio',
66
])
77

‎resources/views/components/input/base.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111

1212
<input type="{{ $type }}"
1313
{{ $attributes->class([
14-
\Elegantly\Kit\Facades\Kit::input()->size($size)->color($color)->font()->spacing()->background()->outline(),
15-
'inline-block w-full border-0 ring-inset focus:outline focus-visible:outline outline-2',
14+
\Elegantly\Kit\Facades\Kit::input()->size($size)->color($color)->font()->spacing()->border()->ring()->background()->outline(),
15+
'inline-block w-full ring-inset focus:outline focus-visible:outline outline-2',
1616
]) }}
1717
@if ($autofocus) autofocus @endif @disabled($disabled) @required($required)
1818
@if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif

‎resources/views/components/input/index.blade.php‎

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,51 @@
22
'icon' => null,
33
'iconRight' => null,
44
'class' => null,
5+
'classInput' => null,
56
'style' => null,
7+
'size' => 'base',
8+
'color' => 'white',
69
])
710

8-
<div {!! $attributes->class(['relative w-full', $class]) !!} @style($style)>
11+
@php
12+
$input = $attributes->whereStartsWith(['wire:', 'x-on:', '']);
13+
@endphp
14+
15+
<div @class([$class, 'relative w-full']) @style($style)>
916

1017
@if ($icon)
11-
<span class="absolute left-0 top-0 flex h-full items-center justify-center pl-1.5 text-gray-400">
12-
<span class="size-5 p-0.5">
13-
@if (is_string($icon))
14-
@svg($icon)
15-
@else
16-
{!! $icon !!}
17-
@endif
18-
</span>
18+
<span @class([
19+
'absolute left-0 leading-none pointer-events-none',
20+
\Elegantly\Kit\Facades\Kit::input()->size($size)->color($color)->icon(),
21+
is_object($icon) ? $icon->attributes->get('class') : null,
22+
])>
23+
@if (is_string($icon))
24+
@svg($icon)
25+
@else
26+
{{ $icon }}
27+
@endif
1928
</span>
2029
@endif
2130

22-
<x-kit::input.base paddingless :attributes="$attributes->class([
31+
<x-kit::input.base :size="$size" :color="$color" :attributes="$attributes->class([
32+
\Elegantly\Kit\Facades\Kit::input()->size($size)->spacingIconLeft()->value() => $icon,
33+
\Elegantly\Kit\Facades\Kit::input()->size($size)->spacingIconRight()->value() => $iconRight,
2334
'rounded-[inherit]',
24-
'pl-3.5' => !$icon,
25-
'pl-8' => $icon,
26-
'pr-3.5' => !$iconRight,
27-
'pr-8' => $iconRight,
28-
'py-2',
2935
'w-full',
36+
$classInput,
3037
])" />
38+
39+
@if ($iconRight)
40+
<span @class([
41+
'absolute right-0 leading-none pointer-events-none',
42+
\Elegantly\Kit\Facades\Kit::input()->size($size)->color($color)->icon(),
43+
is_object($iconRight) ? $iconRight->attributes->get('class') : null,
44+
])>
45+
@if (is_string($iconRight))
46+
@svg($iconRight)
47+
@else
48+
{{ $iconRight }}
49+
@endif
50+
</span>
51+
@endif
3152
</div>

‎src/Facades/Kit.php‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,20 @@
22

33
namespace Elegantly\Kit\Facades;
44

5+
use Elegantly\Kit\Ui\Base;
6+
use Elegantly\Kit\Ui\Button;
7+
use Elegantly\Kit\Ui\Input;
8+
use Elegantly\Kit\Ui\Select;
9+
use Elegantly\Kit\Ui\Tag;
510
use Illuminate\Support\Facades\Facade;
611

712
/**
13+
* @method static Base base()
14+
* @method static Button button()
15+
* @method static Input input()
16+
* @method static Select select()
17+
* @method static Tag tag()
18+
*
819
* @see \Elegantly\Kit\Kit
920
*/
1021
class Kit extends Facade

‎src/Kit.php‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,31 +13,49 @@ class Kit
1313
{
1414
public function base(): Base
1515
{
16-
return Base::make();
16+
/** @var class-string<Base> */
17+
$class = config()->string('blade-kit.ui.base');
18+
19+
return $class::make();
1720
}
1821

1922
public function button(): Button
2023
{
21-
return Button::make();
24+
/** @var class-string<Button> */
25+
$class = config()->string('blade-kit.ui.button');
26+
27+
return $class::make();
2228
}
2329

2430
public function input(): Input
2531
{
26-
return Input::make();
32+
/** @var class-string<Input> */
33+
$class = config()->string('blade-kit.ui.input');
34+
35+
return $class::make();
2736
}
2837

2938
public function select(): Select
3039
{
31-
return Select::make();
40+
/** @var class-string<Select> */
41+
$class = config()->string('blade-kit.ui.select');
42+
43+
return $class::make();
3244
}
3345

3446
public function tag(): Tag
3547
{
36-
return Tag::make();
48+
/** @var class-string<Tag> */
49+
$class = config()->string('blade-kit.ui.tag');
50+
51+
return $class::make();
3752
}
3853

3954
public function switch(): SwitchUi
4055
{
41-
return SwitchUi::make();
56+
/** @var class-string<SwitchUi> */
57+
$class = config()->string('blade-kit.ui.switch');
58+
59+
return $class::make();
4260
}
4361
}

‎src/Ui/Base.php‎

Lines changed: 70 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,12 @@
22

33
namespace Elegantly\Kit\Ui;
44

5-
use Stringable;
6-
7-
class Base implements Stringable
5+
class Base extends Ui
86
{
9-
public string $class;
10-
117
public ?string $color = null;
128

139
public ?string $size = null;
1410

15-
final public function __construct(
16-
?string $class = null
17-
) {
18-
$this->class = $class ?? '';
19-
}
20-
21-
public static function make(
22-
?string $class = null
23-
): static {
24-
return new static($class);
25-
}
26-
27-
/**
28-
* @return $this
29-
*/
30-
public function append(string $value): static
31-
{
32-
33-
if ($value) {
34-
$this->class .= " {$value}";
35-
}
36-
37-
return $this;
38-
}
39-
4011
/**
4112
* @return $this
4213
*/
@@ -64,21 +35,21 @@ public function background(): static
6435
{
6536
return $this->append(match ($this->color) {
6637
'white' => 'bg-white text-black ring-gray-200 ring-1 ring-inset dark:bg-zinc-800 dark:text-white dark:ring-zinc-700',
67-
'black' => 'bg-black text-white ring-black dark:bg-white dark:text-black',
38+
'black' => 'bg-black text-white ring-black dark:bg-white dark:text-black placeholder:text-white/60',
6839
'gray' => 'bg-gray-100 text-gray-600 ring-gray-100',
6940
'gray-light' => 'bg-gray-400/20 text-gray-800 ring-gray-400/20',
70-
'sky' => 'bg-sky-500 text-white ring-sky-500',
71-
'sky-light' => 'bg-sky-400/20 text-sky-800 ring-sky-400/20',
72-
'emerald' => 'bg-emerald-500 text-white ring-emerald-500',
73-
'emerald-light' => 'bg-emerald-400/20 text-emerald-800 ring-emerald-400/20',
74-
'rose' => 'bg-rose-500 text-white ring-rose-500',
75-
'rose-light' => 'bg-rose-400/20 text-rose-800 ring-rose-400/20',
76-
'purple' => 'bg-purple-500 text-white ring-purple-500',
77-
'purple-light' => 'bg-purple-400/20 text-purple-800 ring-purple-400/20',
78-
'yellow' => 'bg-yellow-500 text-white ring-yellow-400/20',
79-
'yellow-light' => 'bg-yellow-400/20 text-yellow-800 ring-yellow-400/20',
80-
'amber' => 'bg-amber-500 text-white ring-amber-400/20',
81-
'amber-light' => 'bg-amber-400/20 text-amber-800 ring-amber-400/20',
41+
'sky' => 'bg-sky-500 text-white ring-sky-500 placeholder:text-white/60',
42+
'sky-light' => 'bg-sky-400/20 text-sky-800 ring-sky-400/20 placeholder:text-sky-800/40',
43+
'emerald' => 'bg-emerald-500 text-white ring-emerald-500 placeholder:text-white/60',
44+
'emerald-light' => 'bg-emerald-400/20 text-emerald-800 ring-emerald-400/20 placeholder:text-emerald-800/40',
45+
'rose' => 'bg-rose-500 text-white ring-rose-500 placeholder:text-white/60',
46+
'rose-light' => 'bg-rose-400/20 text-rose-800 ring-rose-400/20 placeholder:text-rose-800/40',
47+
'purple' => 'bg-purple-500 text-white ring-purple-500 placeholder:text-white/60',
48+
'purple-light' => 'bg-purple-400/20 text-purple-800 ring-purple-400/20 placeholder:text-purple-800/40',
49+
'yellow' => 'bg-yellow-500 text-white ring-yellow-400/20 placeholder:text-white/60',
50+
'yellow-light' => 'bg-yellow-400/20 text-yellow-800 ring-yellow-400/20 placeholder:text-yellow-800/40',
51+
'amber' => 'bg-amber-500 text-white ring-amber-400/20 placeholder:text-white/60',
52+
'amber-light' => 'bg-amber-400/20 text-amber-800 ring-amber-400/20 placeholder:text-amber-800/40',
8253
'glass' => 'bg-white/50 text-black ring-white ring-1 ring-inset',
8354
'transparent' => 'bg-transparent text-inherit border-transparent',
8455
default => ''
@@ -113,6 +84,62 @@ public function outline(): static
11384
});
11485
}
11586

87+
/**
88+
* @return $this
89+
*/
90+
public function border(): static
91+
{
92+
return $this->append(match ($this->color) {
93+
'white' => '',
94+
'black' => 'border-black',
95+
'gray' => 'border-gray-200',
96+
'gray-light' => 'border-gray-100',
97+
'sky' => 'border-sky-600',
98+
'sky-light' => 'border-sky-500',
99+
'emerald' => 'border-emerald-600',
100+
'emerald-light' => 'border-emerald-500',
101+
'rose' => 'border-rose-600',
102+
'rose-light' => 'border-rose-500',
103+
'purple' => 'border-purple-600',
104+
'purple-light' => 'border-purple-500',
105+
'yellow' => 'border-yellow-600',
106+
'yellow-light' => 'border-yellow-500',
107+
'amber' => 'border-amber-600',
108+
'amber-light' => 'border-amber-500',
109+
'glass' => 'border-white',
110+
'transparent' => 'border-transparent',
111+
default => ''
112+
});
113+
}
114+
115+
/**
116+
* @return $this
117+
*/
118+
public function ring(): static
119+
{
120+
return $this->append(match ($this->color) {
121+
'white' => '',
122+
'black' => 'ring-black',
123+
'gray' => 'ring-gray-300',
124+
'gray-light' => 'ring-gray-100',
125+
'sky' => 'ring-sky-600',
126+
'sky-light' => 'ring-sky-500',
127+
'emerald' => 'ring-emerald-600',
128+
'emerald-light' => 'ring-emerald-500',
129+
'rose' => 'ring-rose-600',
130+
'rose-light' => 'ring-rose-500',
131+
'purple' => 'ring-purple-600',
132+
'purple-light' => 'ring-purple-500',
133+
'yellow' => 'ring-yellow-600',
134+
'yellow-light' => 'ring-yellow-500',
135+
'amber' => 'ring-amber-600',
136+
'amber-light' => 'ring-amber-500',
137+
'glass' => 'ring-white',
138+
'transparent' => 'ring-transparent',
139+
default => ''
140+
});
141+
}
142+
116143
/**
117144
* @return $this
118145
*/
@@ -144,9 +171,4 @@ public function spacing(): static
144171
default => ''
145172
});
146173
}
147-
148-
public function __toString(): string
149-
{
150-
return (string) $this->class;
151-
}
152174
}

‎src/Ui/Button.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ public function checked(): string
5151
'black' => 'has-[:checked]:bg-black has-[:checked]:text-white',
5252
'emerald' => 'has-[:checked]:bg-emerald-500 has-[:checked]:text-white',
5353
'rose' => 'has-[:checked]:bg-rose-500 has-[:checked]:text-white',
54+
'amber' => 'has-[:checked]:bg-amber-500 has-[:checked]:text-white',
5455
default => ''
5556
};
5657
}

0 commit comments

Comments
 (0)