Miscellaneous Components

Tailwind Dropdown using AlpineJS

Simple tailwindCSS toggle dropdown using AlpineJS, accessibility support.

UI Stack: Tailwind CSS

Code not available for this component.

Tailwind Alpine Dropdown Component Code


<div class="text-center pt-10">
    <div class="relative inline-block text-left"
        x-data="{
            open: false,
            toggle() {
                if (this.open) {
                    return this.close()
                }
    
                this.open = true
            },
            close(focusAfter) {
                this.open = false
    
                focusAfter && focusAfter.focus()
            }
        }"
        x-on:keydown.escape.prevent.stop="close($refs.button)"
        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
        x-id="['dropdown-button']">
    <div>
        <button  
            x-ref="button"
            x-on:click="toggle()"
            :aria-expanded="open"
            :aria-controls="$id('dropdown-button')"
            type="button" 
            class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="menu-button" aria-expanded="true" aria-haspopup="true">
        Options
        <!-- Heroicon name: solid/chevron-down -->
        <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
        </button>
    </div>

    <!--
        Dropdown menu, show/hide based on menu state.

        Entering: "transition ease-out duration-100"
        From: "transform opacity-0 scale-95"
        To: "transform opacity-100 scale-100"
        Leaving: "transition ease-in duration-75"
        From: "transform opacity-100 scale-100"
        To: "transform opacity-0 scale-95"
    -->
    <div  x-ref="panel"
            x-show="open"
            x-transition.origin.top.left
            x-on:click.outside="close($refs.button)"
            :id="$id('dropdown-button')"
            style="display: none;"
            class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
        <div class="py-1" role="none">
        <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
        <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-0">Account settings</a>
        <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-1">Support</a>
        <a href="#" class="text-gray-700 block px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-2">License</a>
        <form method="POST" action="#" role="none">
            <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-item-3">
            Sign out
            </button>
        </form>
        </div>
    </div>
    </div>
</div>

Star Rating Component using Livewire & AlpineJS

Rate your model objects using this reusable rating component

UI Stack: Tailwind CSS

Star Rating Component Example

Card image cap

Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted
Sorry, this component's code is restricted
Sorry, this component's code is restricted
Sorry, this component's code is restricted

Documentation

For storing the ratings-related data, we'll be using a Rating model.

One more thing to keep in mind is the polymorphic relationship, we'll be using this relationship to store ratings of multiple models in this Model itself.

Additionally, since we are using a polymorphic relationship, we need to define the following relationship to the Modal to which we want to attach the rating component.

In our case, the model is shown above in the WinkPost Model tab.

Usage

And finally, a demo showcasing the usage of the Rating Component.


      @livewire('pro.star-rating-component', [
                            // the $post model here is a WinkPost model
                            'model' => $post
                            ])
    

Like Button Component using Livewire

Like button implementation using Laravel Love and Livewire

UI Stack: Bootstrap 5

Card image cap

Code
Please login to View/Download the Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted
Sorry, this component's code is restricted

Usage


      @livewire('like-model',[
    'model' => $post
])
    

Documentation

In order to use this Like button component, you need to install a laravel-love composer package in your laravel project.

Installation


composer require cybercog/laravel-love

And then run:


php artisan migrate

Adding default reactions

Run the following command, to add default reactions i.e. Like and Dislike into the database.


php artisan love:reaction-type-add --default

Setting up Reacterable (User Model)

Further, we need to modify the User model to extend an interface and add a trait to it, as shown above in the User Model Tab.

Run artisan command


php artisan love:setup-reacterable --model="App\User" --nullable

You can look more into the Official Documentation on setting up Reactable.

Reddit Up / Down Vote Component using Livewire

Upvote or Downvote a model object using AlpineJS and Livewire

UI Stack: Tailwind CSS

Upvote/Downvote Component Example

Tailwind Dropdown using AlpineJS

Simple tailwindCSS toggle dropdown using AlpineJS, accessibility support.


Check Username availability using Livewire

Check if username exists in the database without refresh


Real-time ChartJS using Livewire

Chart component that generates some fake data with a refresh of every 2 seconds.


Event Calendar Component Demo with Laravel Livewire

Event Calendar Component Demo with Laravel Livewire


Select2 Multiple select using Livewire

Integrate Select2 dropdown with multiselect support using livewire


Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted
Sorry, this component's code is restricted
Sorry, this component's code is restricted

Usage


      @livewire('upvote-downvote-component', [
                            'model' => $post,
                            ], key($post->id))
    

Documentation

This is a reusable component to implement a Reddit-style upvote/downvote counter for any of your Laravel models.

It consists of a Vote Model, which stores the votes and have many to many relationships with your Model. Include the following method in your Model file for which you are looking to implement this component

    public function votes()
    {
        return $this->morphMany(Vote::class, 'voteable');
    }

User, Roles Manager Admin Panel using Livewire

Add Edit Delete User, Roles and Permissions. Built using TailwindCSS

UI Stack: Tailwind CSS

Code not available for this component.

Documentation

This is a simple admin panel built using TALL stack (TailwindCSS, AlpineJS, Livewire, and Laravel). You can download and install the application below.

Tailwind Dropdown Blade Component

Reusable blade component for list, checkbox list dropdowns.

UI Stack: Tailwind CSS

Example of List dropdown, panel position on right

 

Example of Checkbox dropdown, panel position on left

Code not available for this component.

Blade Component Class


<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Dropdown extends Component
{
    /**
     * The dropwdown name.
     *
     * @var string
     */
    public $name;

    /**
     * The dropdown options.
     *
     * @var string
     */
    public $options;

    /** 
     * Dropdown panel position
     */
    public $panelPosition;


    /** 
     * List or checkboxes
     */
    public $type;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($name, $options, $panelPosition = 'left', $type = 'list')
    {
        $this->name = $name;
        $this->options = $options;
        if($panelPosition == 'left'){
            $this->panelPosition = 'right';
        }
        if($panelPosition == 'right'){
            $this->panelPosition = 'left';
        }
        $this->type = $type;
            

    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\Contracts\View\View|\Closure|string
     */
    public function render()
    {
        return view('components.dropdown');
    }
}

Blade Component View File


<div {{ $attributes }}>
    <div class="relative inline-block text-left"
        x-data="{
            open: false,
            toggle() {
                if (this.open) {
                    return this.close()
                }
    
                this.open = true
            },
            close(focusAfter) {
                this.open = false
    
                focusAfter && focusAfter.focus()
            }
        }"
        x-on:keydown.escape.prevent.stop="close($refs.button)"
        x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
        x-id="['dropdown-button']">
    <div>
        <button  
            x-ref="button"
            x-on:click="toggle()"
            :aria-expanded="open"
            :aria-controls="$id('dropdown-button')"
            type="button" 
            class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500" id="menu-button" aria-expanded="true" aria-haspopup="true">
        {{$name}}
        <!-- Heroicon name: solid/chevron-down -->
        <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
        </button>
    </div>


    <div  x-ref="panel"
            x-show="open"
            x-transition.origin.top.right
            x-on:click.outside="close($refs.button)"
            :id="$id('dropdown-button')"
            style="display: none;"
            class="origin-top-right absolute {{$panelPosition}}-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
            <div class="py-1" role="none">
                
                   <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
                   @foreach($options as $key => $option)
                      @if($type == 'link')
                         <a href="#" x-on:click="close($refs.button)" class="text-gray-800 font-medium no-underline block px-4 py-2 text-sm font-semibold" role="menuitem" tabindex="-1" id="menu-item-{{$key}}">{{$option}}</a>
                      @endif
                      @if($type == 'checkbox')
                      <div class="relative flex items-start ml-3 my-2">
                      <div class="flex items-center h-5">
                         <input id="{{$name}}-{{$key}}"  value="{{$key}}" aria-describedby="comments-description" name="{{$name}}-{{$key}}" type="checkbox" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded">
                      </div>
                      <div class="ml-3 text-sm">
                          <label for="{{$name}}-{{$key}}" class="font-medium font-semibold text-gray-800">{{$option}}</label>
                      </div>
                     </div>
                      @endif
                   @endforeach
            </div>
    </div>
    </div>
</div>

Usage

To render the blade component you can use the blade component class name followed by x-, you'll also have to pass the options to the component. You can pass what type of panel your dropdown shows, either links or checkboxes.

<x-dropdown name="Options" :options="['Orange', 'Banana', 'Apple']" panelPosition="left" type="checkbox"/>

<x-dropdown name="Options" :options="['Orange', 'Banana', 'Apple']" panelPosition="left" type="link"/>
You can reuse the component multiple times on the same page.

Livewire Infinite Scrolling, Load More Pagination

Reusable component to add infinite scroll for eloquent models

UI Stack: Tailwind CSS

This simple table shows 5 records. Click "Load more..." to load more records.
Title
Tailwind Dropdown using AlpineJS
Check Username availability using Livewire
Real-time ChartJS using Livewire
Event Calendar Component Demo with Laravel Livewire
Select2 Multiple select using Livewire

Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Usage

Pass in the model for which you want to have infinite scrolling.


      @livewire('load-more-component', ['model' => App\Models\WinkPost::class])
    

Check All - Uncheck all checkboxes in AlpineJS

Select All / UnSelect All checkboxes using AlpineJS.

UI Stack: Alpine JS

Select All

Banana
Apple
Mango
Kiwi
Selected:

Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Documentation

We have a Select All checkbox, clicking on which we want to check/uncheck the other checkboxes.

On clicking on the Select All checkbox, we call the toggleAllCheckboxes method, which toggles the selectAll property. We then get all the other checkbox elements in javascript using query selector and apply the boolean value to the checked attribute.

Since it does not automatically adds or removes the values into the property to which checkboxes are model bound. We have done that manually in the same method itself.

Plus Minus Counter Input with Tailwind & AlpineJS

Increment Decrement input counter using plus minus button

UI Stack: Tailwind CSS

Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Usage


      @livewire('plus-minus-counter')
    

Documentation

This component consists of a quantity property, which is updated using Alpine.js on the front end, whenever the buttons are clicked.

And we are using entangle property of Livewire to sync that value on the frontend and backend

Youtube style Like-Dislike Button using Livewire

Like Dislike a Model using livewire and laravel-love package

UI Stack: Bootstrap 5

Card image cap

Code
Please login to View/Download the Code

Sorry, this component's code is restricted
Sorry, this component's code is restricted

Usage

Pass in the model instance to which you want to attach the like and dislike buttons.


      @livewire('like-dislike-model', [
     'model' => $post
])
    

Documentation

In order to use this livewire-like button component, you need to install a laravel-love composer package in your laravel project.

Once you have the package installed, you need to add the reactions and set up Reactrable and Reactable models. Before you can start using this component.