Skip to content

Commit fc47c40

Browse files
ManukMinasyanManukMinasyan
committed
feat: cherry-pick column improvements, recordPage, searchable, and bug fixes from feature branch
1 parent 4b83587 commit fc47c40

22 files changed

Lines changed: 652 additions & 635 deletions

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ public function form(Schema $schema): Form
6868
return $schema->components([
6969
// Your existing form fields...
7070

71-
CustomFields::form()->forSchema($schema)->build()
71+
CustomFields::form()->build()
7272
]);
7373
}
7474
```

‎composer.lock‎

Lines changed: 427 additions & 474 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/content/1.getting-started/2.quickstart.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,7 @@ public static function form(Schema $schema): Schema
5252
Forms\Components\TextInput::make('email'),
5353

5454
// Add Custom Fields
55-
CustomFields::form()->forSchema($schema)
56-
->build()
57-
->columnSpanFull()
55+
CustomFields::form()->build()->columnSpanFull()
5856
]);
5957
}
6058
```

‎resources/views/tables/columns/email-column.blade.php‎

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -41,41 +41,35 @@
4141
}"
4242
x-on:keydown.esc="isOpen() && (closePanel(), $event.stopPropagation())"
4343
x-on:click.outside="closePanel()"
44-
class="relative"
44+
@if ($hiddenCount > 0)
45+
x-ref="trigger"
46+
:aria-expanded="isOpen() ? 'true' : 'false'"
47+
aria-haspopup="menu"
48+
:aria-controls="$id('panel')"
49+
x-on:click="togglePanel()"
50+
x-on:keydown.enter.prevent="togglePanel()"
51+
x-on:keydown.space.prevent="togglePanel()"
52+
@endif
53+
class="fi-ta-text relative {{ $hiddenCount > 0 ? 'cursor-pointer' : '' }}"
4554
>
46-
{{-- Screen reader live region --}}
4755
<div x-ref="announcer" aria-live="polite" aria-atomic="true" class="sr-only"></div>
4856

4957
@if (empty($entries))
50-
<span class="text-gray-400 dark:text-gray-500">—</span>
58+
{{-- Empty: no value --}}
5159
@else
52-
{{-- Collapsed View - Single line with truncated values --}}
53-
<div
54-
@if ($hiddenCount > 0)
55-
x-ref="trigger"
56-
role="button"
57-
tabindex="0"
58-
:aria-expanded="isOpen() ? 'true' : 'false'"
59-
aria-haspopup="menu"
60-
:aria-controls="$id('panel')"
61-
x-on:click="togglePanel()"
62-
x-on:keydown.enter.prevent="togglePanel()"
63-
x-on:keydown.space.prevent="togglePanel()"
64-
@endif
65-
class="flex items-center gap-x-3 text-left overflow-hidden {{ $hiddenCount > 0 ? 'cursor-pointer' : '' }}"
66-
>
60+
<div class="inline-flex items-center gap-x-2">
6761
@foreach ($visibleEntries as $index => $entry)
6862
<div class="group/value relative inline-flex items-center py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shrink-0">
6963
<a
7064
href="mailto:{{ $entry }}"
7165
x-on:click.stop
72-
class="text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2 truncate max-w-[120px]"
66+
class="block text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2 truncate"
7367
>{{ $entry }}</a>
7468
<button
7569
type="button"
7670
x-on:click.stop="copyToClipboard(@js($entry), 'visible-{{ $index }}', $event)"
7771
aria-label="Copy {{ $entry }} to clipboard"
78-
class="absolute right-0 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
72+
class="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
7973
>
8074
<x-heroicon-m-clipboard-document
8175
x-show="copiedIndex !== 'visible-{{ $index }}'"
@@ -92,12 +86,11 @@ class="size-3.5 text-green-500"
9286
</div>
9387
@endforeach
9488
@if ($hiddenCount > 0)
95-
<span class="text-sm text-gray-400 dark:text-gray-500 whitespace-nowrap" aria-hidden="true">+{{ $hiddenCount }}</span>
89+
<span class="text-sm text-gray-400 dark:text-gray-500 whitespace-nowrap shrink-0" aria-hidden="true">+{{ $hiddenCount }}</span>
9690
<span class="sr-only">and {{ $hiddenCount }} more. Press Enter to view all.</span>
9791
@endif
9892
</div>
9993

100-
{{-- Expanded Popover - All values --}}
10194
@if ($hiddenCount > 0)
10295
<div
10396
x-cloak
@@ -108,25 +101,25 @@ class="size-3.5 text-green-500"
108101
role="menu"
109102
:id="$id('panel')"
110103
aria-label="All email addresses"
111-
class="absolute z-50 w-[180px] rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:bg-gray-900 dark:ring-white/10"
104+
class="absolute z-50 w-[260px] rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:bg-gray-900 dark:ring-white/10"
112105
>
113-
<div class="py-1 max-h-[280px] overflow-y-auto overflow-x-auto">
106+
<div class="py-1 max-h-[280px] overflow-y-auto">
114107
@foreach ($entries as $index => $entry)
115108
<div
116109
role="menuitem"
117-
class="flex items-center px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
110+
class="px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
118111
>
119-
<div class="group/value relative inline-flex items-center py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
112+
<div class="group/value relative min-w-0 py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
120113
<a
121114
href="mailto:{{ $entry }}"
122115
x-on:click.stop
123-
class="text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2"
116+
class="block text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2 truncate"
124117
>{{ $entry }}</a>
125118
<button
126119
type="button"
127120
x-on:click.stop="copyToClipboard(@js($entry), {{ $index }}, $event)"
128121
aria-label="Copy {{ $entry }} to clipboard"
129-
class="absolute right-0 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
122+
class="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
130123
>
131124
<x-heroicon-m-clipboard-document
132125
x-show="copiedIndex !== {{ $index }}"

‎resources/views/tables/columns/link-column.blade.php‎

Lines changed: 52 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -58,55 +58,47 @@
5858
}"
5959
x-on:keydown.esc="isOpen() && (closePanel(), $event.stopPropagation())"
6060
x-on:click.outside="closePanel()"
61-
class="relative"
61+
@if ($hiddenCount > 0)
62+
x-ref="trigger"
63+
:aria-expanded="isOpen() ? 'true' : 'false'"
64+
aria-haspopup="menu"
65+
:aria-controls="$id('panel')"
66+
x-on:click="togglePanel()"
67+
x-on:keydown.enter.prevent="togglePanel()"
68+
x-on:keydown.space.prevent="togglePanel()"
69+
@endif
70+
class="fi-ta-text relative {{ $hiddenCount > 0 ? 'cursor-pointer' : '' }}"
6271
>
63-
{{-- Screen reader live region --}}
6472
<div x-ref="announcer" aria-live="polite" aria-atomic="true" class="sr-only"></div>
6573

66-
@if (empty($entries))
67-
<span class="text-gray-400 dark:text-gray-500">—</span>
68-
@else
69-
{{-- Collapsed View - Single line with truncated values --}}
70-
<div
71-
@if ($hiddenCount > 0)
72-
x-ref="trigger"
73-
role="button"
74-
tabindex="0"
75-
:aria-expanded="isOpen() ? 'true' : 'false'"
76-
aria-haspopup="menu"
77-
:aria-controls="$id('panel')"
78-
x-on:click="togglePanel()"
79-
x-on:keydown.enter.prevent="togglePanel()"
80-
x-on:keydown.space.prevent="togglePanel()"
81-
@endif
82-
class="flex items-center gap-x-3 text-left overflow-hidden {{ $hiddenCount > 0 ? 'cursor-pointer' : '' }}"
83-
>
74+
@if (filled($entries))
75+
<div class="inline-flex items-center gap-x-3 text-left">
8476
@foreach ($visibleEntries as $index => $entry)
8577
<div class="group/value relative inline-flex items-center py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shrink-0">
8678
<a
8779
href="{{ $getFullUrl($entry) }}"
8880
target="_blank"
8981
rel="noopener noreferrer"
9082
x-on:click.stop
91-
class="text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2 truncate max-w-[120px]"
83+
class="text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2 truncate max-w-[200px]"
9284
title="{{ $entry }}"
9385
>{{ $getDisplayUrl($entry) }}</a>
9486
<button
95-
type="button"
96-
x-on:click.stop="copyToClipboard(@js($getFullUrl($entry)), 'visible-{{ $index }}', $event)"
97-
aria-label="Copy {{ $entry }} to clipboard"
98-
class="absolute right-0 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
87+
type="button"
88+
x-on:click.stop="copyToClipboard(@js($getFullUrl($entry)), 'visible-{{ $index }}', $event)"
89+
aria-label="Copy {{ $entry }} to clipboard"
90+
class="absolute right-0 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
9991
>
10092
<x-heroicon-m-clipboard-document
101-
x-show="copiedIndex !== 'visible-{{ $index }}'"
102-
class="size-3.5 text-primary-500"
103-
aria-hidden="true"
93+
x-show="copiedIndex !== 'visible-{{ $index }}'"
94+
class="size-3.5 text-primary-500"
95+
aria-hidden="true"
10496
/>
10597
<x-heroicon-m-check
106-
x-show="copiedIndex === 'visible-{{ $index }}'"
107-
x-cloak
108-
class="size-3.5 text-green-500"
109-
aria-hidden="true"
98+
x-show="copiedIndex === 'visible-{{ $index }}'"
99+
x-cloak
100+
class="size-3.5 text-green-500"
101+
aria-hidden="true"
110102
/>
111103
</button>
112104
</div>
@@ -120,47 +112,47 @@ class="size-3.5 text-green-500"
120112
{{-- Expanded Popover - All values --}}
121113
@if ($hiddenCount > 0)
122114
<div
123-
x-cloak
124-
x-float.placement.bottom-start.flip.offset.teleport="{ offset: 4 }"
125-
x-transition:enter-start="opacity-0"
126-
x-transition:leave-end="opacity-0"
127-
x-ref="panel"
128-
role="menu"
129-
:id="$id('panel')"
130-
aria-label="All links"
131-
class="absolute z-50 w-[220px] rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:bg-gray-900 dark:ring-white/10"
115+
x-cloak
116+
x-float.placement.bottom-start.flip.offset.teleport="{ offset: 4 }"
117+
x-transition:enter-start="opacity-0"
118+
x-transition:leave-end="opacity-0"
119+
x-ref="panel"
120+
role="menu"
121+
:id="$id('panel')"
122+
aria-label="All links"
123+
class="absolute z-50 w-[220px] rounded-lg bg-white shadow-lg ring-1 ring-gray-950/5 transition dark:bg-gray-900 dark:ring-white/10"
132124
>
133125
<div class="py-1 max-h-[280px] overflow-y-auto overflow-x-auto">
134126
@foreach ($entries as $index => $entry)
135127
<div
136-
role="menuitem"
137-
class="flex items-center px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
128+
role="menuitem"
129+
class="flex items-center px-3 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
138130
>
139131
<div class="group/value relative inline-flex items-center py-0.5 rounded hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
140132
<a
141-
href="{{ $getFullUrl($entry) }}"
142-
target="_blank"
143-
rel="noopener noreferrer"
144-
x-on:click.stop
145-
class="text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2 truncate max-w-[150px]"
146-
title="{{ $entry }}"
133+
href="{{ $getFullUrl($entry) }}"
134+
target="_blank"
135+
rel="noopener noreferrer"
136+
x-on:click.stop
137+
class="text-sm text-primary-600 dark:text-primary-400 underline decoration-gray-300 dark:decoration-gray-600 decoration-1 underline-offset-2 truncate max-w-[200px]"
138+
title="{{ $entry }}"
147139
>{{ $getDisplayUrl($entry) }}</a>
148140
<button
149-
type="button"
150-
x-on:click.stop="copyToClipboard(@js($getFullUrl($entry)), {{ $index }}, $event)"
151-
aria-label="Copy {{ $entry }} to clipboard"
152-
class="absolute right-0 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
141+
type="button"
142+
x-on:click.stop="copyToClipboard(@js($getFullUrl($entry)), {{ $index }}, $event)"
143+
aria-label="Copy {{ $entry }} to clipboard"
144+
class="absolute right-0 opacity-0 group-hover/value:opacity-100 focus:opacity-100 transition-opacity duration-300 py-0.5 pl-2 pr-1 rounded-r bg-gradient-to-r from-gray-100/90 via-gray-100/100 to-gray-100 dark:from-gray-700/0 dark:via-gray-700/70 dark:to-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
153145
>
154146
<x-heroicon-m-clipboard-document
155-
x-show="copiedIndex !== {{ $index }}"
156-
class="size-4 text-primary-500"
157-
aria-hidden="true"
147+
x-show="copiedIndex !== {{ $index }}"
148+
class="size-4 text-primary-500"
149+
aria-hidden="true"
158150
/>
159151
<x-heroicon-m-check
160-
x-show="copiedIndex === {{ $index }}"
161-
x-cloak
162-
class="size-4 text-green-500"
163-
aria-hidden="true"
152+
x-show="copiedIndex === {{ $index }}"
153+
x-cloak
154+
class="size-4 text-green-500"
155+
aria-hidden="true"
164156
/>
165157
</button>
166158
</div>

0 commit comments

Comments
 (0)