README

🚀 AF Web Snippets

A powerful collection of Laravel web snippets to supercharge your development workflow

📋 Table of Contents

✨ Features
🔧 Installation
🚀 Quick Start
📚 Components
🎨 Customization
🔍 Examples
🤝 Contributing
📄 License
👥 Authors

✨ Features

🎯 Dynamic Dropdown - Livewire-powered searchable dropdowns with real-time filtering
🆔 Unique ID Generator - Multiple ID generation strategies (6-digit & Base36)
📱 Data Formatters - Format Pakistani phone numbers and CNIC
📱 Responsive Design - Bootstrap-compatible components
⚡ Performance Optimized - Efficient database queries with debouncing
🛠️ Highly Customizable - Extensive configuration options
🔒 Secure - Built-in validation and error handling

🔧 Installation

Install the package via Composer:

composer require artflow-studio/snippets

Service Provider Registration

The package uses Laravel's auto-discovery feature. If you're using Laravel 5.5+, the service provider will be automatically registered.

Publish Assets (Optional)

php artisan vendor:publish --provider="ArtFlowStudio\Snippets\SnippetsServiceProvider"

🚀 Quick Start

Add the following line at the end of your <body> tag in your Blade layout:

@stack('scripts')

That's it! You're ready to use AF Web Snippets in your Laravel application.

📚 Components

🎯 Dynamic Dropdown (AFDropdown)

A powerful Livewire component for searchable dropdowns with real-time filtering, minimum search length, and elegant UI.

Basic Usage

<livewire:afdropdown 
    :model="App\Models\User::class" 
    column="name" 
    placeholder="Search users..." 
/>

Advanced Configuration

<livewire:a-f-dropdown 
    :model="App\Models\User::class" 
    column="name" 
    classes="form-control form-control-lg" 
    placeholder="Search users..."
    :min-search-length="2"
/>

Listening to Selection Events

document.addEventListener('livewire:init', function () {
    Livewire.on('afdropdown-selected', (data) => {
        console.log('Selected:', data.id, data.label, data.class);
        // Handle the selection
    });
});

🔍 Distinct Select (AFDistinctSelect)

A specialized component for preventing spelling mistakes by showing existing values from the database. Perfect for fields like cities, countries, or categories where you want consistent data entry.

Basic Usage

@AFDistinctSelect([
    'model' => App\Models\Hotel::class,
    'column' => 'city',
    'value' => $city,
    'wireModel' => 'city',
    'classes' => 'form-control',
    'placeholder' => 'Select or type city name'
])

Advanced Configuration

@AFDistinctSelect([
    'model' => App\Models\Product::class,
    'column' => 'category',
    'value' => $selectedCategory,
    'wireModel' => 'category',
    'classes' => 'form-control form-control-sm',
    'placeholder' => 'Select category...',
    'minSearchLength' => 2,
    'maxResults' => 15
])

Handling Updates in Parent Component

class YourLivewireComponent extends Component
{
    public $city = '';
    
    protected $listeners = ['updateField' => 'setField'];
    
    public function setField($field, $value)
    {
        $this->$field = $value;
    }
}

AFDistinctSelect Features

✅ Spelling Prevention - Shows existing values to prevent duplicates
✅ Type-ahead Search - Real-time filtering of existing values
✅ Exact Value Selection - Updates input with exact database spelling
✅ Data Consistency - Ensures uniform data entry
✅ Bootstrap Compatible - Seamless integration with Bootstrap styling
✅ Customizable - Flexible configuration options

Configuration Options

Option	Type	Default	Description
`model`	string	required	Eloquent model class
`column`	string	required	Database column to search and display
`value`	string	''	Current field value
`wireModel`	string	column name	Livewire property to bind
`classes`	string	'form-control'	CSS classes for input
`placeholder`	string	'Select or type...'	Input placeholder text
`minSearchLength`	int	1	Minimum characters before search
`maxResults`	int	10	Maximum results to show

AFDropdown Features

✅ Real-time Search - Debounced search with 300ms delay
✅ Minimum Search Length - Configurable minimum characters (default: 3)
✅ Loading States - Visual feedback during search
✅ Clear Button - Easy reset functionality
✅ Keyboard Navigation - Accessible dropdown interaction
✅ Bootstrap Compatible - Seamless integration with Bootstrap styling

AFDropdown Configuration Options

Option	Type	Default	Description
`model`	string	required	Eloquent model class
`column`	string	required	Database column to search and display
`classes`	string	'form-control'	CSS classes for input
`placeholder`	string	'Search...'	Input placeholder text
`min-search-length`	int	3	Minimum characters before search

🆔 Unique ID Generator

Generate unique identifiers for your models with multiple strategies and collision detection.

Basic Usage

// Generate unique ID for a model
$uniqueId = generateUniqueID(User::class, 'user_id');

// Generate 6-digit unique ID
$id = unique6digitID(); // Returns: "123456"

// Generate Base36 unique ID
$id = generateUniqueBase36ID(); // Returns: "AB12CD"

Advanced Usage

// In your model
class User extends Model
{
    protected static function boot()
    {
        parent::boot();
        
        static::creating(function ($model) {
            $model->user_id = generateUniqueID(self::class, 'user_id');
        });
    }
}

ID Generation Methods

unique6digitID() - Generates 6-digit numeric IDs (100000-999999)
generateUniqueBase36ID() - Generates Base36 IDs with timestamp encoding
generateUniqueID($model, $column) - Generates unique IDs with collision checking

📱 Data Formatters

Format common data types for Pakistani users with intelligent detection and formatting.

Pakistani Phone Number Formatter

// Format Pakistani phone numbers
echo formatContactPK('03001234567');    // +923001234567
echo formatContactPK('00923001234567'); // +923001234567
echo formatContactPK('+923001234567');  // +923001234567
echo formatContactPK('923001234567');   // +923001234567

// International numbers pass through
echo formatContactPK('+12345678901');   // +12345678901

Pakistani CNIC Formatter

// Format Pakistani CNIC numbers
echo formatCnicPK('1234567890123');     // 12345-6789012-3
echo formatCnicPK('12345-6789012-3');   // 12345-6789012-3

// Handle special cases
echo formatCnicPK('PASSPORT123');       // PASSPORT123 (unchanged)

Usage in Models

class User extends Model
{
    // Automatically format phone on save
    public function setPhoneAttribute($value)
    {
        $this->attributes['phone'] = formatContactPK($value);
    }
    
    // Automatically format CNIC on save  
    public function setCnicAttribute($value)
    {
        $this->attributes['cnic'] = formatCnicPK($value);
    }
}

🎨 Customization

Styling AFDropdown

/* Custom dropdown styles */
.afdropdown-wrapper .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.afdropdown-wrapper .dropdown-item:hover {
    background-color: #f8f9fa;
}

🔍 Examples

Dropdown with Event Handling

<livewire:a-f-dropdown 
    :model="App\Models\Category::class" 
    column="name" 
    placeholder="Select category..."
    wire:key="category-dropdown"
/>

<script>
document.addEventListener('livewire:init', function () {
    Livewire.on('afdropdown-selected', (data) => {
        // Update related dropdowns
        @this.set('selected_category_id', data.id);
        
        // Show success message
        toastr.success(`Selected: ${data.label}`);
    });
});
</script>

🛠️ Requirements

PHP >= 8.0
Laravel >= 9.0
Livewire >= 3.0
Bootstrap >= 5.0 (for styling)

🤝 Contributing

We welcome contributions! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Fork the repository
Create your feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Authors

@RaHee554 - Initial work and maintenance

🙏 Acknowledgments

Laravel community for the amazing framework
Livewire team for the reactive components
Bootstrap team for the UI framework
All contributors who help improve this package

Made with ❤️ for the Laravel community

⭐ Star us on GitHub | 🐛 Report Bug | 💡 Request Feature

artflow-studio / snippets

Maintainers

Details

README

🚀 AF Web Snippets

📋 Table of Contents

✨ Features

🔧 Installation

Service Provider Registration

Publish Assets (Optional)

🚀 Quick Start

📚 Components

🎯 Dynamic Dropdown (AFDropdown)

Basic Usage

Advanced Configuration

Listening to Selection Events

🔍 Distinct Select (AFDistinctSelect)

Basic Usage

Advanced Configuration

Handling Updates in Parent Component

AFDistinctSelect Features

Configuration Options

AFDropdown Features

AFDropdown Configuration Options

🆔 Unique ID Generator

Basic Usage

Advanced Usage

ID Generation Methods

📱 Data Formatters

Pakistani Phone Number Formatter

Pakistani CNIC Formatter

Usage in Models

🎨 Customization

Styling AFDropdown

🔍 Examples

Dropdown with Event Handling

🛠️ Requirements

🤝 Contributing

📄 License

👥 Authors

🙏 Acknowledgments