Joseph.Rawlings
760cf84451
- Introduced AdminLTE CSS variables for color palette, body colors, card styles, and button styles. - Implemented card components with variants for primary, success, warning, danger, and info. - Added button styles including sizes and outline variants. - Created form controls, select inputs, and input groups with consistent styling. - Included utility classes for text and background colors, gradients, and shadows. - Developed components for badges, alerts, callouts, progress bars, tables, small boxes, and info boxes. - Integrated modal, dropdown, spinner, tooltip, and direct chat styles. - Established timeline and close button styles, with dark mode support for specific components.
186 lines
9.8 KiB
PHP
186 lines
9.8 KiB
PHP
{{--
|
|
Icon Picker Component - AdminLTE style
|
|
Modal-based icon picker with search and categories
|
|
|
|
Usage:
|
|
<x-proxmox::ui.icon-picker :icons="$icons" wire:model="selectedIcon" />
|
|
--}}
|
|
|
|
@props([
|
|
'icons' => [],
|
|
'categories' => [],
|
|
'selected' => null,
|
|
])
|
|
|
|
<div
|
|
x-data="{
|
|
open: false,
|
|
search: '',
|
|
activeCategory: 'all',
|
|
icons: @js($icons),
|
|
selected: @entangle($attributes->wire('model')),
|
|
get filteredIcons() {
|
|
let filtered = this.icons;
|
|
if (this.search) {
|
|
const search = this.search.toLowerCase();
|
|
filtered = filtered.filter(icon =>
|
|
icon.name.toLowerCase().includes(search) ||
|
|
(icon.keywords && icon.keywords.some(k => k.toLowerCase().includes(search)))
|
|
);
|
|
}
|
|
if (this.activeCategory !== 'all') {
|
|
filtered = filtered.filter(icon => icon.category === this.activeCategory);
|
|
}
|
|
return filtered;
|
|
}
|
|
}"
|
|
{{ $attributes->whereDoesntStartWith('wire:model') }}
|
|
>
|
|
<!-- Trigger Button -->
|
|
<button
|
|
type="button"
|
|
@click="open = true"
|
|
class="flex items-center gap-2"
|
|
style="padding: .5rem .75rem; border-radius: .375rem; border: 1px solid #ced4da; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .2s ease, border-color .2s ease;"
|
|
onmouseover="this.style.background='#f8f9fa'; this.style.borderColor='#adb5bd'"
|
|
onmouseout="this.style.background='#fff'; this.style.borderColor='#ced4da'"
|
|
>
|
|
<template x-if="selected">
|
|
<x-dynamic-component x-bind:component="selected" class="size-5" style="color: #0d6efd;" />
|
|
</template>
|
|
<template x-if="!selected">
|
|
<x-ri-image-add-line class="size-5" style="color: #6c757d;" />
|
|
</template>
|
|
<span style="font-size: .875rem; color: #495057;">Select Icon</span>
|
|
</button>
|
|
|
|
<!-- Modal -->
|
|
<div
|
|
x-show="open"
|
|
x-cloak
|
|
@keydown.escape.window="open = false"
|
|
class="fixed inset-0 overflow-y-auto"
|
|
style="z-index: 1050;"
|
|
>
|
|
<div class="flex items-center justify-center min-h-screen p-4">
|
|
<!-- Backdrop -->
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="ease-out duration-150"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="ease-in duration-100"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="open = false"
|
|
class="fixed inset-0"
|
|
style="background: rgba(0, 0, 0, 0.5);"
|
|
></div>
|
|
|
|
<!-- Modal Content -->
|
|
<div
|
|
x-show="open"
|
|
x-transition:enter="ease-out duration-150"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="ease-in duration-100"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
class="modal-lte relative w-full max-w-2xl"
|
|
style="background: #fff; border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); max-height: 80vh; overflow: hidden;"
|
|
>
|
|
<!-- Header -->
|
|
<div style="padding: 1rem; border-bottom: 1px solid #dee2e6;">
|
|
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem;">
|
|
<h3 style="font-size: 1.125rem; font-weight: 600; color: #212529; margin: 0;">Select Icon</h3>
|
|
<button @click="open = false" style="padding: .375rem; border-radius: .25rem; color: #6c757d; background: transparent; border: none; cursor: pointer; transition: background .2s ease, color .2s ease;" onmouseover="this.style.background='#f8f9fa'; this.style.color='#495057'" onmouseout="this.style.background='transparent'; this.style.color='#6c757d'">
|
|
<x-ri-close-line class="size-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Search -->
|
|
<div class="relative">
|
|
<x-ri-search-line class="absolute left-3 top-1/2 -translate-y-1/2 size-4" style="color: #6c757d;" />
|
|
<input
|
|
type="text"
|
|
x-model="search"
|
|
placeholder="Search icons..."
|
|
class="form-control-lte w-full"
|
|
style="padding-left: 2.5rem; padding: .625rem .75rem .625rem 2.5rem; border: 1px solid #ced4da; border-radius: .375rem; font-size: .875rem; color: #212529; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;"
|
|
onfocus="this.style.borderColor='#86b7fe'; this.style.boxShadow='0 0 0 .25rem rgba(13, 110, 253, .25)'"
|
|
onblur="this.style.borderColor='#ced4da'; this.style.boxShadow='none'"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categories -->
|
|
@if(count($categories) > 0)
|
|
<div style="display: flex; gap: .5rem; padding: 1rem; border-bottom: 1px solid #dee2e6; overflow-x: auto;">
|
|
<button
|
|
@click="activeCategory = 'all'"
|
|
:style="activeCategory === 'all' ? 'background: #0d6efd; color: #fff;' : 'background: #e9ecef; color: #495057;'"
|
|
style="padding: .375rem .75rem; border-radius: 1rem; font-size: .75rem; font-weight: 500; border: none; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease;"
|
|
>
|
|
All
|
|
</button>
|
|
@foreach($categories as $category)
|
|
<button
|
|
@click="activeCategory = '{{ $category['id'] }}'"
|
|
:style="activeCategory === '{{ $category['id'] }}' ? 'background: #0d6efd; color: #fff;' : 'background: #e9ecef; color: #495057;'"
|
|
style="padding: .375rem .75rem; border-radius: 1rem; font-size: .75rem; font-weight: 500; border: none; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease;"
|
|
>
|
|
{{ $category['name'] }}
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Icons Grid -->
|
|
<div style="padding: 1rem; overflow-y: auto; max-height: 20rem;">
|
|
<div class="grid grid-cols-8 gap-2">
|
|
<template x-for="icon in filteredIcons" :key="icon.name">
|
|
<button
|
|
@click="selected = icon.component; open = false;"
|
|
:style="selected === icon.component ? 'box-shadow: 0 0 0 2px #0d6efd; background: rgba(13, 110, 253, 0.1);' : ''"
|
|
style="display: flex; align-items: center; justify-content: center; padding: .75rem; border-radius: .375rem; border: none; background: transparent; cursor: pointer; transition: background .15s ease;"
|
|
onmouseover="if(!this.style.boxShadow.includes('#0d6efd')) this.style.background='#f8f9fa'"
|
|
onmouseout="if(!this.style.boxShadow.includes('#0d6efd')) this.style.background='transparent'"
|
|
:title="icon.name"
|
|
>
|
|
<x-dynamic-component x-bind:component="icon.component" class="size-6" />
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div x-show="filteredIcons.length === 0" style="padding: 2rem; text-align: center;">
|
|
<x-ri-search-line style="width: 3rem; height: 3rem; margin: 0 auto .75rem; color: #ced4da;" />
|
|
<p style="font-size: .875rem; color: #6c757d; margin: 0;">No icons found matching your search.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div style="padding: 1rem; border-top: 1px solid #dee2e6; display: flex; align-items: center; justify-content: space-between;">
|
|
<button
|
|
@click="selected = null"
|
|
style="padding: .375rem .75rem; font-size: .875rem; color: #6c757d; background: transparent; border: none; cursor: pointer; transition: color .2s ease;"
|
|
onmouseover="this.style.color='#495057'"
|
|
onmouseout="this.style.color='#6c757d'"
|
|
>
|
|
Clear Selection
|
|
</button>
|
|
<button
|
|
@click="open = false"
|
|
class="btn-lte-primary"
|
|
style="padding: .625rem 1rem; background: #0d6efd; color: #fff; border: none; border-radius: .375rem; font-size: .875rem; font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); transition: background .2s ease;"
|
|
onmouseover="this.style.background='#0b5ed7'"
|
|
onmouseout="this.style.background='#0d6efd'"
|
|
>
|
|
Done
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|