Mithicher mithicher

## confirm.js
// Usage:
// <x-button type="button" wire:confirm="delete(1)">Confirm Test</x-button>

document.addEventListener('livewire:init', () => {
    Livewire.directive('confirm', ({ el, directive, component, cleanup }) => {
        let content = directive.expression

        // This regex splits the method given: eg. "delete(1)" to ['delete(1)', 'delete', '1']
        const regex = /([a-zA-Z_][a-zA-Z0-9_]*)\((['"][^'"]*['"]|\d+)\)/;

## m-editor.blade.php
@props([
    'id' => 'editor-'. str()->random(8),
    'height' => '400px',
    'label' => null,
    'name' => null,
    'value' => null,
    'noMargin' => false,
    'readonly' => false,
    'disabled' => false,
    'toolbar' => true

## purecss-horizontal-bar-chart.blade.php
{{-- Usage
<x-purecss-horizontal-bar-chart
	bar-chart-id="horizontalbar"
	bar-color="bg-gradient-to-r from-indigo-300 to-purple-400"
	:chart-data='[
	    [
	      "label" => "Team A",
	      "value" => 25,
	    ],
	    [

## table-simple.blade.php
{{--
	Simple Example:
	<x-table-simple
		striped // default: false
		:columns='[
			[
				"name" => "Name",
				"field" => "name",
				"columnClasses" => "", // classes to style table th
				"rowClasses" => "" // classes to style table td

## meilisearch-autocomplete.blade.php
@props([
	'id' => 'autocomplete-'. uniqid(),
	'placeholder' => 'Search...',
	'indexName' => '',
	'publicKey' => '',
	'host' => 'http://127.0.0.1:7700',
])

<div
	x-data="{

## books.json
[
{ "_id" : 1, "title" : "Unlocking Android", "isbn" : "1933988673", "pageCount" : 416, "publishedDate" : { "$date" : "2009-04-01T00:00:00.000-0700" }, "thumbnailUrl" : "https://s3.amazonaws.com/AKIAJC5RLADLUMVRPFDQ.book-thumb-images/ableson.jpg", "shortDescription" : "Unlocking Android: A Developer's Guide provides concise, hands-on instruction for the Android operating system and development tools. This book teaches important architectural concepts in a straightforward writing style and builds on this with practical and useful examples throughout.", "longDescription" : "Android is an open source mobile phone platform based on the Linux operating system and developed by the Open Handset Alliance, a consortium of over 30 hardware, software and telecom companies that focus on open standards for mobile devices. Led by search giant, Google, Android is designed to deliver a better and more open and cost effective mobile experience.    Unlocking Android: A Developer's Guide provides concise, hands-on instruction f

## card-weather-forecast.blade.php
// Usage
// <x-card-weather-forecast location="Guwahati" api-key="your-weatherapi.com-api-key" />

@props([
	"location" => "Guwahati",
	"apiKey" => "",
	"poll" => 10000
])

<div class="bg-white shadow rounded-lg p-5 dark:bg-gray-800 max-w-full"

## tom-select.blade.php
/* Component Usage

 // Data for options
 $users = \App\User::limit(6)->get()->transform(fn($user) => [
    'id' => $user->id,
    'title' => $user->name,
    'subtitle' => $user->email
 ]);

 // Usage in view

## alpinejs-datepicker.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>CodePen - Datepicker with TailwindCSS and AlpineJS</title>
        <link
            href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
            rel="stylesheet"
        />
        <script

## pikaday-dark.css
.pikaday-dark {
	--backgroundColor: #2d3748;
	--textColor: #f7fafc;
	--currentDateTextColor: #3182ce;
	--selectedDateBackgroundColor: #3182ce;
	--selectedDateTextColor: #f7fafc;

	--labelTextColor: #3182ce; /* eg. May 2020 */
	--weekDaysTextColor: #a0aec0; /* eg. Mo Tu We ....*/
	// Usage:
	// <x-button type="button" wire:confirm="delete(1)">Confirm Test</x-button>

	document.addEventListener('livewire:init', () => {
	Livewire.directive('confirm', ({ el, directive, component, cleanup }) => {
	let content = directive.expression

	// This regex splits the method given: eg. "delete(1)" to ['delete(1)', 'delete', '1']
	const regex = /([a-zA-Z_][a-zA-Z0-9_])\((['"][^'"]['"]\|\d+)\)/;
	@props([
	'id' => 'editor-'. str()->random(8),
	'height' => '400px',
	'label' => null,
	'name' => null,
	'value' => null,
	'noMargin' => false,
	'readonly' => false,
	'disabled' => false,
	'toolbar' => true
	{{-- Usage
	<x-purecss-horizontal-bar-chart
	bar-chart-id="horizontalbar"
	bar-color="bg-gradient-to-r from-indigo-300 to-purple-400"
	:chart-data='[
	[
	"label" => "Team A",
	"value" => 25,
	],
	[
	{{--
	Simple Example:
	<x-table-simple
	striped // default: false
	:columns='[
	[
	"name" => "Name",
	"field" => "name",
	"columnClasses" => "", // classes to style table th
	"rowClasses" => "" // classes to style table td
	@props([
	'id' => 'autocomplete-'. uniqid(),
	'placeholder' => 'Search...',
	'indexName' => '',
	'publicKey' => '',
	'host' => 'http://127.0.0.1:7700',
	])

	<div
	x-data="{
	// Usage
	// <x-card-weather-forecast location="Guwahati" api-key="your-weatherapi.com-api-key" />

	@props([
	"location" => "Guwahati",
	"apiKey" => "",
	"poll" => 10000
	])

	<div class="bg-white shadow rounded-lg p-5 dark:bg-gray-800 max-w-full"
	/* Component Usage

	// Data for options
	$users = \App\User::limit(6)->get()->transform(fn($user) => [
	'id' => $user->id,
	'title' => $user->name,
	'subtitle' => $user->email
	]);

	// Usage in view
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>CodePen - Datepicker with TailwindCSS and AlpineJS</title>
	<link
	href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
	rel="stylesheet"
	/>
	<script
	.pikaday-dark {
	--backgroundColor: #2d3748;
	--textColor: #f7fafc;
	--currentDateTextColor: #3182ce;
	--selectedDateBackgroundColor: #3182ce;
	--selectedDateTextColor: #f7fafc;

	--labelTextColor: #3182ce; /* eg. May 2020 */
	--weekDaysTextColor: #a0aec0; /* eg. Mo Tu We ....*/