Search by

ilbronza / uikittemplate

ilBronza

:package_description

Package info

github.com/ilBronza/UikitTemplate

Homepage

Language:Blade

pkg:composer/ilbronza/uikittemplate

Security

Advisories: 0

Aikido package health analysis

Transparency log

Statistics

Installs: 289

Dependents: 1

Suggesters: 0

Stars: 0

Open Issues: 0

v2.5.1 2026-08-06 13:56 UTC

Requires

None

Requires (Dev)

None

Suggests

None

Provides

None

Conflicts

None

Replaces

None

MIT 04a1190e3393343b546e6d177c8f4d68b2981d80

laravelUikitTemplate

Published on Packagist.org on 2026-08-07 15:26 UTC

This package is auto-updated.

Last update: 2026-08-29 17:58:43 UTC

README

Latest Version on Packagist Total Downloads Build Status StyleCI

This is where your description should go. Take a look at contributing.md to see a to do list.

Installation

Via Composer

$ composer require ilbronza/uikittemplate

add this lines to package.json dependencies list

"uikit": "^3.6.21",
"uikit-icons": "^0.5.0",
"@fortawesome/fontawesome-free": "^5.15.3",

run npm install from terminal

npm install

add these line to resources/js/app.js to include the required modules

require('./ilBronza.ajaxFetchers.js');

publish the package assets

php artisan vendor:publish --force --tag "uikittemplate.assets"

compile the file with laravel-mix

npm run development

Usage

Elementi collassabili

CollapsibleElementTrait fornisce stato, identificatore HTML e selettori per rendere collassabile qualsiasi oggetto. Il trait non impone la struttura HTML dell'elemento che lo usa.

use IlBronza\UikitTemplate\Traits\CollapsibleElementTrait;

class Panel
{
    use CollapsibleElementTrait;
}

$panel->setCollapsible()
    ->setCollapsedInitially();

Il pulsante UIkit standard รจ un componente Blade anonimo:

<x-uikittemplate::collapse-toggle
    :element="$panel"
    label="Dettagli"
    aria-label="Apri o chiudi i dettagli"
/>

<div
    id="{{ $panel->getCollapseTargetId() }}"
    class="{{ $panel->getCollapseTargetHtmlClassesString() }}"
>
    ...
</div>

Gli attributi Blade aggiuntivi vengono applicati al pulsante. Sono inoltre disponibili le prop expanded-icon e collapsed-icon. Per usare un id deterministico chiamare setCollapseTargetId(); sono accettati id HTML composti da lettere, numeri, _ e -, con una lettera iniziale.

Il componente mantiene automaticamente lo stato aperto/chiuso nella sessionStorage del browser usando getCollapseStateKey(). Gli oggetti che usano il trait possono impostare manualmente una chiave con setCollapseStateKey(); in assenza di override il trait usa il suo id di target.

Footer event log

Every page extending uikittemplate::app includes a small, non-persistent event console in the bottom-right corner. It is independent from the existing UIkit notifications (addSuccessNotification, addDangerNotification, and so on), which continue to work unchanged.

Set APP_UIKIT_SHOW_BROADCAST_UPDATES=false to hide the console and prevent its browser hooks and listeners from being registered. The setting defaults to true.

Send a short, safe-to-display event through the global API:

window.footerEventLog.push({
    message: 'Order 42 updated',
    level: 'success', // info | success | warning | error
    source: 'CRUD',   // optional
    data: {}          // optional; never displayed or retained by the console
});

Or emit the equivalent browser event, useful for decoupled integrations:

window.dispatchEvent(new CustomEvent('uikittemplate:footer-log', {
    detail: {
        message: 'Data table reloaded',
        level: 'success',
        source: 'Datatables'
    }
}));

Each entry has a timestamp, level, message and optional source. The short live list disappears after 5.5 seconds by default; the current page's in-memory history can be shown with footerEventLog.expand(). No event is persisted across page loads. footerEventLog.clearVisible() and footerEventLog.collapse() are also available when needed.

Set options before the footer component is rendered (for example in a script included by the page <head>):

window.footerEventLogOptions = {
    timeout: 7000,
    maxVisible: 3,
    maxHistory: 30
};

The component uses no application-specific dependency. Its styles are scoped under #uikittemplate-footer-event-log and expose CSS custom properties such as --uikittemplate-footer-log-background, --uikittemplate-footer-log-right and --uikittemplate-footer-log-bottom, so host applications can reposition or restyle it without replacing the component. Messages and sources are inserted exclusively with textContent; never send secrets in message, source, or data.

For compatibility with the optional Datatables CRUD-broadcast integration, the component also defines window.addFooterLog(message, context) only when the host application has not already defined it. The adapter forwards the message, context.level, and context.source to footerEventLog.push(); the rest of context is treated as non-rendered data.

Change log

Please see the changelog for more information on what has changed recently.

Testing

$ composer test

Contributing

Please see contributing.md for details and a todolist.

Security

If you discover any security related issues, please email author email instead of using the issue tracker.

Credits

License

license. Please see the license file for more information.