masterix21/laravel-app-ui

Laravel APP UI components

0.0.2 2022-04-06 17:38 UTC

Requires

• php: ^8.0|^8.1
• creativeorange/gravatar: ^1.0
• illuminate/contracts: ^9.0
• spatie/laravel-package-tools: ^1.11.3

Requires (Dev)

• nunomaduro/collision: ^6.1
• orchestra/testbench: ^7.3
• pestphp/pest: ^1.21.2
• pestphp/pest-plugin-laravel: ^1.2
• spatie/laravel-ray: ^1.29
• vimeo/psalm: ^4.8

MIT

• Luca Longo

• laravel
• masterix21
• app-ui

README

Laravel APP UI components

Installation

You can install the package via composer:

composer require masterix21/laravel-app-ui

npm require tailwindcss

Update your tailwind.js with these lines:

module.exports = {
    // ...
    
    variants: {
        extend: {
            padding: ['first', 'last'],
        }
    },

    plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),
        require('@tailwindcss/aspect-ratio'),
    ],

    // ...
}

And instruct your app.css to include our css like so:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import "../../vendor/masterix21/laravel-app-ui/resources/css/app-ui.css";

You can publish the config file with:

php artisan vendor:publish --provider="Masterix21\AppUI\AppUIServiceProvider" --tag="appui-config"

Usage

Layout

<x-app-ui::layout>
    <div>Content</div>
</x-app-ui::layout>

Tables

<x-app-ui::table>
    <x-slot name="columns">
        <x-app-ui::table.th>Customer</x-app-ui::table.th>
        <x-app-ui::table.th>Mobile</x-app-ui::table.th>
        <x-app-ui::table.th class="w-28" />
    </x-slot>
    
    <x-app-ui::table.tr wire:key="customers-{{ $customer->id }}">
        <x-app-ui::table.td class="space-y-1">John Doe</x-app-ui::table.td>

        <x-app-ui::table.td class="text-xs space-y-1">[phone]</x-app-ui::table.td>

        <x-app-ui::table.td class="flex space-x-3 items-center">
            <x-app-ui::table.action href="{{ route('customers.show', $customer->id) }}">
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
            </x-app-ui::table.action>

            <x-app-ui::table.action wire:click="delete({{$customer->id}})" color="red">
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
            </x-app-ui::table.action>
        </x-app-ui::table.td>
    </x-app-ui::table.tr>
</x-app-ui::table>

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Luca Longo
• All Contributors

License

The MIT License (MIT). Please see License File for more information.