PHPackages                             artflow-studio/snippets - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. artflow-studio/snippets

ActiveLibrary[Utility & Helpers](/categories/utility)

artflow-studio/snippets
=======================

A Laravel package for performing basic operations.

v2.3(7mo ago)01341MITBladePHP ^8.0

Since Jun 22Pushed 7mo ago1 watchersCompare

[ Source](https://github.com/rahee554/AF_Web_Snippets)[ Packagist](https://packagist.org/packages/artflow-studio/snippets)[ RSS](/packages/artflow-studio-snippets/feed)WikiDiscussions main Synced 2d ago

READMEChangelogDependencies (1)Versions (14)Used By (1)

🚀 AF Web Snippets
=================

[](#-af-web-snippets)

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

[![PHP Version](https://camo.githubusercontent.com/f4777930ae1e38eed7d754b2368c1ca9404cbb5486a75e57ba62dbd74b51f450/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253345253344382e322d3737374242343f7374796c653d666c61742d737175617265266c6f676f3d706870)](https://camo.githubusercontent.com/f4777930ae1e38eed7d754b2368c1ca9404cbb5486a75e57ba62dbd74b51f450/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f7068702d253345253344382e322d3737374242343f7374796c653d666c61742d737175617265266c6f676f3d706870)[![Laravel Version](https://camo.githubusercontent.com/4dda0b9f03af58188ba52847103beb02147ca9022763f1b147468e2f919c0b59/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c61726176656c2d25334525334431322e302d4646324432303f7374796c653d666c61742d737175617265266c6f676f3d6c61726176656c)](https://camo.githubusercontent.com/4dda0b9f03af58188ba52847103beb02147ca9022763f1b147468e2f919c0b59/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c61726176656c2d25334525334431322e302d4646324432303f7374796c653d666c61742d737175617265266c6f676f3d6c61726176656c)[![Livewire](https://camo.githubusercontent.com/c6917f794ea4dded33142c32f93f382619d551d70d46eda9913dbc25d5819db9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c697665776972652d332e362b2d3445353641363f7374796c653d666c61742d737175617265266c6f676f3d6c69766577697265)](https://camo.githubusercontent.com/c6917f794ea4dded33142c32f93f382619d551d70d46eda9913dbc25d5819db9/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c697665776972652d332e362b2d3445353641363f7374796c653d666c61742d737175617265266c6f676f3d6c69766577697265)[![License](https://camo.githubusercontent.com/422db9fd40f5831c765cf6530b6750c081b696bd18d904cf89554df98c676277/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e3f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/422db9fd40f5831c765cf6530b6750c081b696bd18d904cf89554df98c676277/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e3f7374796c653d666c61742d737175617265)[![Version](https://camo.githubusercontent.com/8831d7e53acb49ac387fde4a0f0c3710e080d5b3a7b83c5e429cd3aa9461e683/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d322e302e302d6f72616e67653f7374796c653d666c61742d737175617265)](https://camo.githubusercontent.com/8831d7e53acb49ac387fde4a0f0c3710e080d5b3a7b83c5e429cd3aa9461e683/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f76657273696f6e2d322e302e302d6f72616e67653f7374796c653d666c61742d737175617265)

---

📋 Table of Contents
-------------------

[](#-table-of-contents)

- [✨ Features](#-features)
- [🔧 Installation](#-installation)
- [🚀 Quick Start](#-quick-start)
- [📚 Components](#-components)
    - [**AFdropdown** - Advanced Searchable Dropdown](#afdropdown---advanced-searchable-dropdown-%E2%AD%90-main)
    - [Dynamic Dropdown](#-dynamic-dropdown-legacy)
    - [Unique ID Generator](#-unique-id-generator)
    - [Data Formatters](#-data-formatters)
- [� AFdropdown Quick Guide](#-afdropdown-quick-guide)
- [📖 Detailed Documentation](#-detailed-documentation)
- [🔍 Examples](#-examples)
- [📄 License](#-license)

---

✨ Features
----------

[](#-features)

### ⭐ NEW - AFdropdown Component

[](#-new---afdropdown-component)

- 🔍 **Multiple Search Modes** - basic, contains, advanced, exact
- 📊 **Multi-Column Search** - Search across multiple fields
- ⌨️ **Keyboard Navigation** - Arrow keys, Enter, Escape
- 💾 **Result Caching** - Redis/Cache support for performance
- 🎨 **Custom Formatters** - Format results your way
- � **Custom Callbacks** - Modify queries dynamically
- ⚡ **Livewire 3.6+** - Modern event dispatch & attributes
- ♿ **Accessibility** - Full ARIA support
- 📱 **Responsive** - Bootstrap 5 compatible

### Core Features

[](#core-features)

- 🎯 **Advanced Dropdowns** - Livewire-powered searchable dropdowns
- 🆔 **Unique ID Generator** - Multiple ID generation strategies
- 📱 **Data Formatters** - Format phone numbers and CNIC
- 📱 **Responsive Design** - Bootstrap-compatible components
- ⚡ **Performance Optimized** - Efficient queries with debouncing
- 🛠️ **Highly Customizable** - Extensive configuration options
- 🔒 **Secure** - Built-in validation and error handling

---

🔧 Installation
--------------

[](#-installation)

Install the package via Composer:

```
composer require artflow-studio/snippets
```

Publish package assets (optional):

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

---

🚀 Quick Start
-------------

[](#-quick-start)

### AFdropdown (NEW)

[](#afdropdown-new)

```

@livewire('afdropdown', [
    'model' => 'App\Models\Customer',
    'column' => 'name',
])
```

Handle selection:

```
use Livewire\Attributes\On;

class MyComponent extends Component
{
    #[On('afdropdown:selected')]
    public function customerSelected($payload)
    {
        $customerId = $payload['id'];
        $customerData = $payload['data'];
        // Handle selection...
    }
}
```

---

📚 Components
------------

[](#-components)

### AFdropdown - Advanced Searchable Dropdown ⭐ **MAIN**

[](#afdropdown---advanced-searchable-dropdown--main)

**Modern Livewire 3.6+ component with enterprise-grade features**

#### Key Features

[](#key-features)

✅ Real-time filtering with debouncing
✅ 4 search modes (basic, contains, advanced, exact)
✅ Multi-column searching
✅ Result caching for performance
✅ Keyboard navigation support
✅ Custom formatters & queries
✅ Full accessibility (ARIA)
✅ Comprehensive error handling

#### Basic Usage

[](#basic-usage)

```
@livewire('afdropdown', [
    'model' => 'App\Models\Customer',
    'column' => 'name',
])
```

#### Advanced Usage

[](#advanced-usage)

```
@livewire('afdropdown', [
    'model' => 'App\Models\Customer',
    'columns' => ['name', 'email'],
    'searchMode' => 'contains',
    'minSearchLength' => 2,
    'resultLimit' => 15,
    'enableCache' => true,
    'cacheTime' => 3600,
    'placeholder' => 'Search customers...',
    'additionalColumns' => ['email', 'phone'],
    'formatter' => fn($c) => "{$c->name} ({$c->email})",
    'queryCallback' => fn($q) => $q->where('status', 'active'),
])
```

#### Search Modes

[](#search-modes)

ModeDescriptionExample`basic`Single column LIKE search`john` → finds "john", "johnny"`contains`Multi-column OR search`john` → searches all columns`advanced`Word-by-word matching`john doe` → both words needed`exact`Exact match only`john@email.com` → exact match#### Event Handling

[](#event-handling)

```
#[On('afdropdown:selected')]
public function handleSelection($payload)
{
    // $payload['id']     - Model ID
    // $payload['label']  - Display label
    // $payload['data']   - Full model data
    // $payload['model']  - Model class name
}

#[On('afdropdown:cleared')]
public function handleClear()
{
    // Search was cleared
}
```

#### Keyboard Navigation

[](#keyboard-navigation)

KeyAction↓Next result↑Previous result↩Select highlightedEscClose dropdown#### 📖 Full Documentation

[](#-full-documentation)

**Complete guides with detailed examples:**

- 📄 **[AFdropdown-GUIDE.md](./AFdropdown-GUIDE.md)** - Complete reference guide (300+ lines)
- 📄 **[EXAMPLES.md](./EXAMPLES.md)** - 8+ real-world examples

---

### Dynamic Dropdown (Legacy)

[](#dynamic-dropdown-legacy)

Basic searchable dropdown component. For new projects, use **AFdropdown** instead.

```
@livewire('dynamic-dropdown', [
    'data' => $items,
    'label' => 'name',
    'value' => 'id',
])
```

---

### Unique ID Generator

[](#unique-id-generator)

Generate unique identifiers for your models:

```
use ArtFlowStudio\Snippets\Traits\GeneratesUniqueIds;

class Invoice extends Model
{
    use GeneratesUniqueIds;

    protected $uniqueIdColumn = 'invoice_number';
    protected $uniqueIdStrategy = '6digit'; // or 'base36'
}

// Usage
$invoice = Invoice::create([...]);
// invoice_number is auto-generated: "123456" or "ABC123D"
```

---

### Data Formatters

[](#data-formatters)

Format phone numbers and CNIC:

```
use ArtFlowStudio\Snippets\Traits\FormatsData;

class Customer extends Model
{
    use FormatsData;
}

// Pakistani phone number formatting
Customer::formatPhoneNumber('03001234567'); // +92-300-1234567

// CNIC formatting
Customer::formatCNIC('12345-1234567-1'); // 12345-1234567-1
```

---

🎯 AFdropdown Quick Guide
------------------------

[](#-afdropdown-quick-guide)

### Installation & Setup

[](#installation--setup)

1. **Component loads in Livewire:**

```
# Already available at: vendor/artflow-studio/snippets/src/Http/Livewire/AFdropdown.php
```

2. **Add to your Livewire component:**

```
#[On('afdropdown:selected')]
public function selected($payload) { }
```

3. **Use in blade:**

```
@livewire('afdropdown', ['model' => 'App\Models\YourModel', 'column' => 'name'])
```

### Common Configurations

[](#common-configurations)

**Basic Customer Search:**

```
['model' => 'App\Models\Customer', 'column' => 'name']
```

**Multi-Field Search:**

```
[
    'model' => 'App\Models\Customer',
    'columns' => ['name', 'email', 'phone'],
    'searchMode' => 'contains',
]
```

**With Caching:**

```
[
    'model' => 'App\Models\Product',
    'column' => 'name',
    'enableCache' => true,
    'cacheTime' => 3600,
]
```

**Custom Format:**

```
[
    'model' => 'App\Models\User',
    'column' => 'name',
    'formatter' => fn($u) => "{$u->name} ({$u->email})",
]
```

### Performance Tips

[](#performance-tips)

- ✅ Use `minSearchLength` to reduce queries (set to 2)
- ✅ Enable `enableCache` for static data
- ✅ Use `queryCallback` to filter early
- ✅ Add database indexes on search columns
- ✅ Reduce `resultLimit` if not needed

---

📖 Detailed Documentation
------------------------

[](#-detailed-documentation)

### AFdropdown Complete Guides

[](#afdropdown-complete-guides)

#### [AFdropdown-GUIDE.md](./AFdropdown-GUIDE.md) - **300+ Lines**

[](#afdropdown-guidemd---300-lines)

Comprehensive reference covering:

- All configuration options
- All 4 search modes with examples
- Caching strategies
- Event handling
- Keyboard navigation
- 5+ real-world examples
- Complete troubleshooting guide
- Performance optimization
- Best practices

#### [EXAMPLES.md](./EXAMPLES.md) - **Copy-Paste Ready**

[](#examplesmd---copy-paste-ready)

Production-ready examples:

- Basic customer selection
- Product search with stock
- User selection in admin
- Location search (multi-term)
- Invoice line items
- Category selection
- Dependent dropdowns
- Error handling patterns

---

🔍 Examples
----------

[](#-examples)

### Example 1: Basic Customer Selection

[](#example-1-basic-customer-selection)

```
// Component
class CreateOrder extends Component
{
    public ?int $customerId = null;

    #[On('afdropdown:selected')]
    public function customerSelected($payload)
    {
        $this->customerId = $payload['id'];
    }

    public function render()
    {
        return view('create-order');
    }
}

// View
@livewire('afdropdown', [
    'model' => 'App\Models\Customer',
    'column' => 'name',
    'placeholder' => 'Search customers...',
])
```

### Example 2: Multi-Column Product Search

[](#example-2-multi-column-product-search)

```
@livewire('afdropdown', [
    'model' => 'App\Models\Product',
    'columns' => ['name', 'sku'],
    'searchMode' => 'contains',
    'formatter' => fn($p) => "{$p->name} (SKU: {$p->sku})",
    'queryCallback' => fn($q) => $q->where('stock_quantity', '>', 0),
    'enableCache' => true,
    'cacheTime' => 3600,
])
```

### Example 3: Advanced Location Search

[](#example-3-advanced-location-search)

```
@livewire('afdropdown', [
    'model' => 'App\Models\Location',
    'columns' => ['city', 'state', 'country'],
    'searchMode' => 'advanced',  // All terms must match
    'minSearchLength' => 2,
    'formatter' => fn($l) => "{$l->city}, {$l->state} {$l->country}",
])
```

---

📋 Troubleshooting
-----------------

[](#-troubleshooting)

### No Results Showing?

[](#no-results-showing)

1. Check `minSearchLength` setting
2. Verify model and column names exist
3. Test query in Tinker: `php artisan tinker`
4. Check that model has data

### Slow Performance?

[](#slow-performance)

1. Enable caching: `'enableCache' => true`
2. Add database indexes
3. Use `queryCallback` to filter early
4. Reduce `resultLimit`

### Keyboard Navigation Not Working?

[](#keyboard-navigation-not-working)

1. Click input to focus first
2. Check browser console (F12) for errors
3. Verify Alpine.js is loaded
4. Try in different browser

---

📄 License
---------

[](#-license)

MIT License - See LICENSE file for details

---

👥 Contributors
--------------

[](#-contributors)

Built with ❤️ for the Laravel & Livewire community

---

📞 Support
---------

[](#-support)

For issues and questions:

1. Check [AFdropdown-GUIDE.md](./AFdropdown-GUIDE.md) for detailed documentation
2. Review [EXAMPLES.md](./EXAMPLES.md) for code samples
3. See troubleshooting sections
4. Check error logs

---

**Latest Version:** 2.0.0
**Livewire:** 3.6+
**Laravel:** 12+
**PHP:** 8.2+

### Service Provider Registration

[](#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)

[](#publish-assets-optional)

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

---

🚀 Quick Start
-------------

[](#-quick-start-1)

Add the following line at the end of your `` tag in your Blade layout:

```
@stack('scripts')
```

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

---

📚 Components
------------

[](#-components-1)

### 🎯 Dynamic Dropdown (AFDropdown)

[](#-dynamic-dropdown-afdropdown)

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

#### Basic Usage

[](#basic-usage-1)

```

```

#### Advanced Configuration

[](#advanced-configuration)

```

```

#### AFDropdown Event System

[](#afdropdown-event-system)

AFDropdown is a fully event-driven component. When a user selects an item, it dispatches events that parent components can listen to and react upon.

##### Event Flow Diagram

[](#event-flow-diagram)

```
User Types in Search Input
        ↓
updatedSearch() fires with debounce.300ms
        ↓
loadResults() queries database
        ↓
Results display in dropdown
        ↓
User clicks item
        ↓
select($id) method fires
        ↓
'afdropdown-selected' event dispatched to parent
        ↓
Parent component listener catches event
        ↓
Parent handles selection data and updates state

```

##### Event Data Structure

[](#event-data-structure)

When AFDropdown emits the `afdropdown-selected` event, it sends the following data:

```
[
    'id'    => 123,                              // Primary key of selected item
    'label' => 'John Doe',                       // Value of search column
    'class' => 'App\\Models\\Customer',          // Full model class name
    'data'  => [                                 // Complete model data
        'id' => 123,
        'name' => 'John Doe',
        'email' => 'john@example.com',
        // ... all model attributes
    ]
]
```

##### Listening to Events with #\[On\] Attribute (Recommended)

[](#listening-to-events-with-on-attribute-recommended)

```