https://github.com/statix-php/tailor
https://github.com/statix-php/tailor
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/statix-php/tailor
- Owner: statix-php
- Created: 2024-11-25T00:44:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-13T05:31:39.000Z (about 1 year ago)
- Last Synced: 2025-05-04T05:49:28.567Z (11 months ago)
- Language: PHP
- Size: 309 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# _Tailor_ for Laravel Blade
[](https://packagist.org/packages/statix/tailor)
[](https://packagist.org/packages/statix/tailor)
A _neat_ package to help build Blade component libraries.
## Installation
```bash
composer require statix/tailor
```
## Configuration
Publishing the configuration file is optional.
```bash
php artisan vendor:publish --tag=tailor-config
```
## Usage
### Building a Component
```blade
// view/components/button.blade.php
@props([
'variant' => 'primary',
'size' => 'md'
'type' => 'button',
'tag' => 'button',
])
@php
// create the tailor
$c = Tailor::make('button');
// start setting up the attributes
$c->attributes()
->set([
'data-variant' => $variant,
'data-size' => $size,
])->if($tag !== 'button', function ($set) use ($type) {
$set('type', $type);
$set('aria-role', 'button');
})->if($tag === 'a', function ($set) {
$set('aria-role', 'link');
});
// start building the variants
$c->variant('primary');
$c->variant('secondary');
// start building the classes common to all variants
$c->classes()
->base([
'rounded-md',
'border',
])->focus([
'focus:ring-2',
'focus-visible:outline-offset-2',
])->match($size, [
'sm' => 'px-2 py-1',
'md' => 'px-3 py-2',
'lg' => 'px-4 py-3',
'xl' => 'px-5 py-4',
'default' => $size,
]);
// start building the classes for the primary variant
$p = $c->variant('primary');
$p->classes()
->light([
'bg-indigo-600',
])->hoverLight([
'hover:bg-indigo-500',
])->focusLight([
'focus-visible:outline-indigo-600',
])->dark([
'dark:text-white',
'dark:bg-indigo-700',
]);
// start building the classes for the secondary variant
$s = $c->variant('secondary');
$s->classes()
->light([
'bg-gray-200',
])->hoverLight([
'hover:bg-gray-300',
])->focusLight([
'focus-visible:outline-gray-200',
])->dark([
'dark:text-gray-200',
'dark:bg-gray-700',
])->focusDark([
'focus-visible:outline-gray-200',
]);
// merge the attributes and classes with the passed attributes
$c->attributes()->merge($attributes->getAttributes());
$c->classes()->merge($attributes->get('class', ''));
// set the variant to use
$c->setVariant($variant);
// now when we output the component, the classes
// and attributes will be applied, specific to the variant
$c->attributes()
->set('onclick', 'alert("Hello")')
->set('onDblClick', '$wire.emit("dblClick")');
@endphp
<{{ $tag }} {{ $c }}>{{ $slot}}<{{ $tag }}>
```
### Using the Component
```blade
Click Me
A link button
```