@doyosi/laravel

Complete collection of modern JavaScript plugins designed specifically for Laravel applications. Provides AJAX functionality, form handling, UI components, and interactive features.

🚀 Features (11 Plugins)

AJAX & Data Loading

• AjaxDivBox: Dynamic grid/list rendering with card-like divs and pagination
• AjaxTable: AJAX-powered data tables with filtering and pagination

Form & Input Components

• FormSubmit: Modern async form handling with validation support
• EditContent: Seamless edit/add form workflows for CRUD operations
• CodeInput: Verification code input with auto-focus navigation
• ImageInput: Image upload with live preview functionality
• SelectDropdown: Enhanced single-select dropdown with search
• SelectMultipleDropdown: Multi-select dropdown with advanced features

UI & Interaction

• DeleteContent: Confirmation modals for delete operations
• Toast: Beautiful toast notifications with animations
• LanguageSwitch: Multi-language interface switching

📦 Installation

npm install @doyosi/laravel

🔧 Quick Start

import { 
    AjaxDivBox, 
    FormSubmit, 
    DeleteContent, 
    Toast,
    SelectDropdown 
} from '@doyosi/laravel';

// Dynamic content loading
const grid = new AjaxDivBox({
    url: '/api/items',
    container: '#content-list'
});

// Form handling
new FormSubmit({
    formSelector: '#myForm',
    method: 'axios'
});

// Delete confirmations
new DeleteContent('.delete-btn');

// Toast notifications
new Toast({ 
    message: 'Welcome!', 
    type: 'success' 
});

// Enhanced dropdowns
new SelectDropdown('#mySelect_dropdown');

📚 Plugin Documentation

AjaxDivBox

const divBox = new AjaxDivBox({
    url: '/api/posts',
    container: '#posts-container',
    templateId: 'post-template',
    pagination: '#pagination',
    filterSelector: '#filters'
});

divBox.on('rendered', ({ data, meta }) => {
    console.log('Loaded posts:', data);
});

AjaxTable

const table = new AjaxTable({
    url: '/api/users',
    container: '#users-table',
    templateId: 'user-row-template'
});

FormSubmit

const form = new FormSubmit({
    formSelector: '#contactForm',
    method: 'axios',
    successMessage: 'Message sent!',
    useToast: true
});

form.on('success', response => {
    console.log('Form submitted:', response);
});

DeleteContent

new DeleteContent('.delete-btn', {
    confirmText: 'Delete this item?',
    onDelete: (success, data, button) => {
        if (success) {
            button.closest('tr').remove();
        }
    }
});

EditContent

new EditContent({
    form: '#itemForm',
    editButtonSelector: '.btn-edit',
    cancelButtonSelector: '.btn-cancel'
});

CodeInput

new CodeInput('.code-input', 'verification_code');

ImageInput

new ImageInput('#profileImage');
// Auto-updates preview, ESC to cancel

SelectDropdown

new SelectDropdown('#categorySelect_dropdown', {
    onSelect: ({ label, value }) => {
        console.log('Selected:', label, value);
    }
});

SelectMultipleDropdown

new SelectMultipleDropdown('#tagsSelect_dropdown', {
    maxSelections: 5,
    onSelect: ({ selections }) => {
        console.log('Current selections:', selections);
    }
});

Toast

// Success notification
new Toast({
    message: 'Data saved successfully!',
    type: 'success',
    duration: 3000
});

// Error notification
new Toast({
    message: 'Something went wrong',
    type: 'error',
    position: 'top-right'
});

LanguageSwitch

new LanguageSwitch({
    localeDropdownSelector: '.language-dropdown',
    buttonSelector: '.btn-locale',
    defaultLocale: 'en'
});

🔗 Laravel Integration

CSRF Protection

// Set default headers for axios
axios.defaults.headers.common['X-CSRF-TOKEN'] = 
    document.querySelector('meta[name="csrf-token"]').getAttribute('content');

Response Format

Your Laravel controllers should return JSON:

// Success response
return response()->json([
    'message' => 'Success!',
    'data' => $data,
    'redirect' => route('dashboard') // optional
]);

// Error response  
return response()->json([
    'message' => 'Validation failed',
    'errors' => $validator->errors()
], 422);

// Paginated data
return response()->json([
    'data' => $items,
    'meta' => $items->meta() // Laravel pagination meta
]);

🎨 CSS Framework Support

Designed for Tailwind CSS and DaisyUI, but works with any CSS framework.

📋 Requirements

• Modern browsers with ES6 support
• Optional: Axios for HTTP requests (fallback to fetch)
• Recommended: Tailwind CSS + DaisyUI for styling

🏗️ Build Commands

# Development
npm run dev

# Production build
npm run build

# Clean build
npm run clean

📄 License

MIT © Karyazilim

🤝 Contributing

Contributions welcome! Please read our contributing guidelines.

Happy coding with @doyosi/laravel! 🚀