Skip to content

Commit 02448f1

Browse files
QuentinGabQuentinGab
committed
popover
1 parent d18b36d commit 02448f1

File tree

6 files changed

+186
-88
lines changed

6 files changed

+186
-88
lines changed

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@props([
2+
'color' => 'white',
3+
])
4+
5+
<div
6+
{{ $attributes->class([
7+
'flex',
8+
'outline-2 outline-offset-2',
9+
'has-[:focus-visible]:outline',
10+
\Elegantly\Kit\Facades\Kit::input()->color($color)->font()->background()->border()->ring()->outline(),
11+
]) }}>
12+
13+
{{ $slot }}
14+
15+
</div>

‎resources/views/components/popover/content.blade.php‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
1-
@props([
2-
'position' => 'bottom-start',
3-
'offset' => 5,
4-
])
1+
@props([])
52

6-
<div {{ $attributes }} x-cloak x-show="open" x-trap="open"
7-
x-anchor.{!! $position !!}.offset.{!! $offset !!}="$refs.trigger" x-on:click.outside="open = false"
8-
x-on:keyup.escape.prevent="open = false">
3+
<div {{ $attributes->class(['flex items-center justify-center max-sm:!fixed max-sm:!left-0 max-sm:!top-0 max-sm:bottom-0 max-sm:right-0 max-sm:bg-black/30']) }}
4+
x-cloak x-show="open" x-trap="open" x-on:click.outside="open = false" x-on:click.self="open = false"
5+
x-on:keyup.escape.prevent.stop="open = false">
96
{{ $slot }}
107
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<span
99
{{ $attributes->class([
10-
'rounded-full font-semibold',
10+
'font-semibold',
1111
'relative align-middle',
1212
'inline-flex items-center',
1313
'whitespace-nowrap',

‎src/Ui/Base.php‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ public function color(?string $value = null): static
3434
public function background(): static
3535
{
3636
return $this->append(match ($this->color) {
37-
'white' => 'bg-white text-black ring-gray-200 ring-1 ring-inset dark:bg-zinc-800 dark:text-white dark:ring-zinc-700',
37+
'white' => 'bg-white text-black ring-gray-200 dark:bg-zinc-800 dark:text-white dark:ring-zinc-700',
3838
'black' => 'bg-black text-white ring-black dark:bg-white dark:text-black placeholder:text-white/60',
3939
'gray' => 'bg-gray-100 text-gray-600 ring-gray-100',
4040
'gray-light' => 'bg-gray-400/20 text-gray-800 ring-gray-400/20',
@@ -50,7 +50,6 @@ public function background(): static
5050
'yellow-light' => 'bg-yellow-400/20 text-yellow-800 ring-yellow-400/20 placeholder:text-yellow-800/40',
5151
'amber' => 'bg-amber-500 text-white ring-amber-400/20 placeholder:text-white/60',
5252
'amber-light' => 'bg-amber-400/20 text-amber-800 ring-amber-400/20 placeholder:text-amber-800/40',
53-
'glass' => 'bg-white/50 text-black ring-white ring-1 ring-inset',
5453
'transparent' => 'bg-transparent text-inherit border-transparent',
5554
default => ''
5655
});
@@ -79,7 +78,7 @@ public function outline(): static
7978
'amber' => 'outline-amber-500',
8079
'amber-light' => 'outline-amber-500',
8180
'glass' => 'outline-black',
82-
'transparent' => 'outline-black',
81+
'transparent' => 'outline-transparent',
8382
default => ''
8483
});
8584
}
@@ -120,7 +119,7 @@ public function ring(): static
120119
return $this->append(match ($this->color) {
121120
'white' => '',
122121
'black' => 'ring-black',
123-
'gray' => 'ring-gray-300',
122+
'gray' => 'ring-gray-200',
124123
'gray-light' => 'ring-gray-100',
125124
'sky' => 'ring-sky-600',
126125
'sky-light' => 'ring-sky-500',

‎src/Ui/Input.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ public function icon(): static
4848
'amber' => 'text-white/60',
4949
'amber-light' => 'text-amber-800/40',
5050
'glass' => 'text-white/60',
51-
'transparent' => 'text-white/60',
51+
'transparent' => 'text-inherit',
5252
default => ''
5353
});
5454

‎workbench/resources/views/demo.blade.php‎

Lines changed: 162 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -13,94 +13,181 @@
1313
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
1414

1515
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iconify-icon.min.js"></script>
16+
17+
<style>
18+
[x-cloak] {
19+
display: none !important;
20+
}
21+
</style>
1622
</head>
1723

1824
<body class="">
1925

20-
<div class="grid grid-cols-3 divide-x [&>*]:h-60">
26+
<div class="grid grid-cols-1 divide-x md:grid-cols-3 [&>*]:h-60">
2127

22-
<div class="flex items-center justify-center border-b">
23-
<x-kit::button color="white">
24-
Button
25-
</x-kit::button>
28+
<div class="isolate flex flex-col">
29+
<div class="p-3">
30+
<h1 class="font-semibold">Button</h1>
31+
</div>
32+
<div class="flex grow items-center justify-center border-b">
33+
<x-kit::button color="white" class="rounded-md ring-1 ring-inset">
34+
Button
35+
</x-kit::button>
36+
</div>
2637
</div>
27-
<x-kit::popover class="flex flex-col items-center justify-center gap-1 border-b" x-data="{
28-
value: 'Initial',
29-
}">
30-
<x-kit::button color="white" class="!min-w-40 rounded-md" x-ref="trigger" x-on:click="open = !open">
31-
<span x-text="value"></span>
32-
<x-slot:icon-right class="ml-auto">
33-
<iconify-icon icon="heroicons:chevron-up-down"></iconify-icon>
34-
</x-slot:icon-right>
35-
</x-kit::button>
36-
37-
<x-kit::popover.content x-transition.origin.top=""
38-
class="flex min-w-40 flex-col rounded-md border bg-white shadow-lg">
39-
<div>
40-
<x-kit::input autofocus size="sm" color="white" class="rounded-t-md border-b"
41-
class-input="!ring-0" placeholder="Search">
42-
<x-slot:icon class="text-black/40">
43-
<iconify-icon icon="heroicons:magnifying-glass"></iconify-icon>
44-
</x-slot:icon>
45-
</x-kit::input>
46-
</div>
47-
<div class="flex flex-col gap-0.5 p-1">
48-
<x-kit::button.radio color-checked="black" x-model="value" name="listbox" value="Initial"
49-
class="w-full rounded hover:bg-gray-100" size="sm">
50-
Initial
51-
<x-slot:icon-right class="ml-auto hidden peer-checked/input:block">
52-
<iconify-icon icon="heroicons:check"></iconify-icon>
53-
</x-slot:icon-right>
54-
</x-kit::button.radio>
55-
<x-kit::button.radio color-checked="black" x-model="value" name="listbox" value="Option 1"
56-
class="w-full rounded hover:bg-gray-100" size="sm">
57-
Option 1
58-
<x-slot:icon-right class="ml-auto hidden peer-checked/input:block">
59-
<iconify-icon icon="heroicons:check"></iconify-icon>
60-
</x-slot:icon-right>
61-
</x-kit::button.radio>
62-
<x-kit::button.radio color-checked="black" x-model="value" name="listbox" value="Option 2"
63-
class="w-full rounded hover:bg-gray-100" size="sm">
64-
Option 2
65-
<x-slot:icon-right class="ml-auto hidden peer-checked/input:block">
66-
<iconify-icon icon="heroicons:check"></iconify-icon>
38+
39+
<div class="isolate flex flex-col">
40+
<div class="p-3">
41+
<h1 class="font-semibold">Tag</h1>
42+
</div>
43+
<div class="flex grow items-center justify-center border-b">
44+
<x-kit::tag color="white" class="rounded-full ring-1 ring-inset">
45+
Tag
46+
<x-slot:button>
47+
<x-kit::button color="white" size="2xs" class="rounded-full ring-1 ring-inset">
48+
<x-slot:icon>
49+
<iconify-icon icon="heroicons:x-mark"></iconify-icon>
50+
</x-slot:icon>
51+
</x-kit::button>
52+
</x-slot:button>
53+
</x-kit::tag>
54+
</div>
55+
</div>
56+
57+
<div class="flex flex-col">
58+
<div class="p-3">
59+
<h1 class="font-semibold">Popover</h1>
60+
</div>
61+
<div class="flex grow items-center justify-center border-b">
62+
<x-kit::popover class="">
63+
<x-kit::button class="rounded-md ring-1 ring-inset" color="white" x-ref="trigger"
64+
x-on:click.stop="open = !open">
65+
Click me
66+
<x-slot:icon-right>
67+
<iconify-icon icon="heroicons:chevron-up-down"></iconify-icon>
6768
</x-slot:icon-right>
68-
</x-kit::button.radio>
69-
</div>
70-
</x-kit::popover.content>
71-
</x-kit::popover>
72-
<div class="flex items-center justify-center border-b">
73-
<x-kit::tag color="white">
74-
Tag
75-
<x-slot:button>
76-
<x-kit::button color="white" size="2xs" class="rounded-full">
77-
<x-slot:icon>
78-
<iconify-icon icon="heroicons:x-mark"></iconify-icon>
79-
</x-slot:icon>
8069
</x-kit::button>
81-
</x-slot:button>
82-
</x-kit::tag>
70+
71+
<x-kit::popover.content class="z-20 p-3 md:p-0" x-anchor.bottom-end.offset.5="$refs.trigger"
72+
x-transition.origin.top="">
73+
<div class="mt-auto flex w-full flex-col rounded-lg border bg-white shadow-lg md:max-w-72">
74+
75+
<div class="p-1">
76+
<x-kit::input.parent color="gray" class="rounded-md !outline-0 ring-1 ring-inset">
77+
<x-kit::input size="sm" color="transparent" placeholder="Search">
78+
<x-slot:icon>
79+
<iconify-icon icon="heroicons:magnifying-glass"></iconify-icon>
80+
</x-slot:icon>
81+
</x-kit::input>
82+
<x-kit::button color="white" class="m-0.5 rounded font-semibold ring-1 ring-inset"
83+
size="xs">
84+
<x-slot:icon-right>
85+
<iconify-icon icon="heroicons:plus"></iconify-icon>
86+
</x-slot:icon-right>
87+
New
88+
</x-kit::button>
89+
</x-kit::input.parent>
90+
</div>
91+
92+
<div class="flex gap-0.5 overflow-auto p-1">
93+
<x-kit::tag color="gray" size="2xs" class="rounded">
94+
Tag
95+
<x-slot:button>
96+
<x-kit::button color="gray" size="2xs" class="rounded">
97+
<x-slot:icon>
98+
<iconify-icon icon="heroicons:x-mark"></iconify-icon>
99+
</x-slot:icon>
100+
</x-kit::button>
101+
</x-slot:button>
102+
</x-kit::tag>
103+
</div>
104+
105+
<div class="flex items-center">
106+
<p class="px-2.5 py-0.5 text-sm font-semibold">
107+
Recent
108+
</p>
109+
<span class="grow border-b"></span>
110+
</div>
111+
112+
<div class="flex max-h-full flex-col gap-0.5 overflow-auto p-1 md:max-h-56">
113+
@for ($i = 0; $i < 10; $i++)
114+
<div class="flex gap-0.5">
115+
<x-kit::button color="white" size="sm" class="flex-1 rounded">
116+
<x-slot:icon class="text-gray-400">
117+
<iconify-icon icon="heroicons:bookmark"></iconify-icon>
118+
</x-slot:icon>
119+
<x-slot:content class="grow">
120+
<span class="min-w-0 truncate">
121+
Name {{ $i }}
122+
</span>
123+
<small class="ml-auto whitespace-nowrap text-gray-400">
124+
helper
125+
</small>
126+
</x-slot:content>
127+
</x-kit::button>
128+
<x-kit::button color="white" size="sm" class="rounded">
129+
<x-slot:icon class="text-gray-400">
130+
<iconify-icon icon="lucide:arrow-up-right"></iconify-icon>
131+
</x-slot:icon>
132+
</x-kit::button>
133+
</div>
134+
@endfor
135+
</div>
136+
137+
</div>
138+
</x-kit::popover.content>
139+
</x-kit::popover>
140+
</div>
83141
</div>
84-
<div class="flex items-center justify-center border-b">
85-
<x-kit::select color="white">
86-
<option>
87-
Option 1
88-
</option>
89-
</x-kit::select>
142+
143+
144+
<div class="isolate flex flex-col">
145+
<div class="p-3">
146+
<h1 class="font-semibold">Select</h1>
147+
</div>
148+
<div class="flex grow items-center justify-center border-b">
149+
<x-kit::select color="white" class="rounded ring-1 ring-inset">
150+
<option>
151+
Option 1
152+
</option>
153+
</x-kit::select>
154+
</div>
90155
</div>
91-
<div class="flex items-center justify-center border-b">
92-
<x-kit::switch color="white">
93-
Switch
94-
</x-kit::switch>
156+
157+
<div class="isolate flex flex-col">
158+
<div class="p-3">
159+
<h1 class="font-semibold">Switch</h1>
160+
</div>
161+
<div class="flex grow items-center justify-center border-b">
162+
<x-kit::switch color="white">
163+
Switch
164+
</x-kit::switch>
165+
</div>
95166
</div>
96-
<div class="flex items-center justify-center border-b">
97-
<x-kit::input class="max-w-40" size="lg" color="white" placeholder="Search">
98-
<x-slot:icon>
99-
<iconify-icon icon="heroicons:magnifying-glass"></iconify-icon>
100-
</x-slot:icon>
101-
</x-kit::input>
167+
168+
<div class="isolate flex flex-col">
169+
<div class="p-3">
170+
<h1 class="font-semibold">Input</h1>
171+
</div>
172+
<div class="flex grow items-center justify-center border-b">
173+
<x-kit::input.parent color="gray" class="rounded-md ring-1 ring-inset">
174+
<x-kit::input color="transparent" placeholder="Search">
175+
<x-slot:icon>
176+
<iconify-icon icon="heroicons:magnifying-glass"></iconify-icon>
177+
</x-slot:icon>
178+
</x-kit::input>
179+
<x-kit::button color="white" class="m-0.5 rounded font-semibold ring-1 ring-inset" size="sm">
180+
<x-slot:icon-right>
181+
<iconify-icon icon="heroicons:plus"></iconify-icon>
182+
</x-slot:icon-right>
183+
New
184+
</x-kit::button>
185+
</x-kit::input.parent>
186+
</div>
102187
</div>
103188

189+
190+
104191
</div>
105192
</body>
106193

0 commit comments

Comments
 (0)