Joseph.Rawlings/Virtnet.bond
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Enhance layout and components with improved accessibility and performance

Browse Source 
- Refactor JavaScript functions to prevent duplicate initializations on navigation
- Add skeleton loaders for invoices and services during loading states
- Introduce a new progress bar component with customizable properties
- Update dropdown and checkbox components for better styling and accessibility
- Improve modal and navigation components with enhanced animations and structure
This commit is contained in:
Joseph.Rawlings
2026-02-01 12:31:43 -05:00
parent 10c978eae9
commit f7766b6d67
14 changed files with 470 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
themes/lucentui/views/components/dropdown.blade.php
View File

@@ -1,33 +1,33 @@
<div class="relative" x-data="{ open: false, adjustWidth: 0 }" x-init="$watch('open', value => {
<div class="relative" x-data="{ open: false, activeIndex: -1 }" @keydown.escape="open = false" @keydown.down.prevent="activeIndex = Math.min(activeIndex + 1, $refs.dropdown.children.length - 1)" @keydown.up.prevent="activeIndex = Math.max(activeIndex - 1, 0)" x-init="$watch('open', value => {
if (value) {
adjustWidth = 0; // Reset adjustWidth when opening
activeIndex = -1;
$nextTick(() => {
let dropdown = $refs.dropdown;
let rect = dropdown.getBoundingClientRect();
let windowWidth = window.innerWidth;
adjustWidth = rect.right > windowWidth ? rect.width - 40 : 0;
dropdown.style.left = rect.right > windowWidth ? `-${rect.width - 40}px` : '0';
});
}
})">
<button
class="flex flex-row items-center px-2 py-1 text-sm font-semibold whitespace-nowrap text-base hover:text-base/80"
x-on:click="open = !open">
class="flex flex-row items-center px-2 py-1 text-sm font-semibold whitespace-nowrap text-base hover:text-primary transition-colors duration-200"
x-on:click="open = !open"
:aria-expanded="open">
{{ $trigger }}
<x-ri-arrow-down-s-line x-bind:class="{ '-rotate-180' : open }"
class="md:block hidden size-4 text-base ease-out duration-300" />
</button>
<div x-ref="dropdown"
class="absolute mt-2 w-48 px-2 py-1 bg-background-secondary rounded-md shadow-lg z-10 border border-neutral"
x-bind:style="{
left: `-${adjustWidth}px`,
}"
class="absolute mt-2 w-48 bg-background-secondary rounded-xl shadow-xl z-10 border border-neutral/50 overflow-hidden"
x-show="open"
x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75"
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-90"
x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95 -translate-y-2"
x-transition:enter-end="opacity-100 scale-100 translate-y-0" x-transition:leave="transition ease-in duration-100"
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
x-on:click.outside="open = false" x-cloak>
{{ $content }}
<div class="py-1 [&>a]:block [&>a]:px-4 [&>a]:py-2.5 [&>a]:text-sm [&>a]:text-color-base [&>a]:transition-colors [&>a]:duration-150 [&>a:hover]:bg-primary/10 [&>a:hover]:text-primary [&>a:focus]:bg-primary/10 [&>a:focus]:text-primary [&>a:focus]:outline-none">
{{ $content }}
</div>
</div>
</div>