Package Exports

@doyosi/laravel
@doyosi/laravel/dist/index.esm.js
@doyosi/laravel/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@doyosi/laravel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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'
});

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

🤝 Contributing

Contributions welcome! Please read our contributing guidelines.

Happy coding with @doyosi/laravel! 🚀