Skip to content

Instantly share code, notes, and snippets.

@mr-wolf-gb

mr-wolf-gb/button.blade.php

Created March 7, 2024 11:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mr-wolf-gb/b3c9d26161a7996ef943843fff8ab5a3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mr-wolf-gb/b3c9d26161a7996ef943843fff8ab5a3 to your computer and use it in GitHub Desktop.
Download ZIP
some Alpine Js components for laravel
Raw
button.blade.php
<button {{ $attributes->merge(['class' => 'btn']) }} {{ $attributes }} wire:loading.attr="disabled">
<span wire:loading.remove wire:target="{{ $attributes->get('wire:target') }}" class="{{ $attributes->get('span-text-class') }}">
{{ $slot }}
</span>
<div wire:loading wire:target="{{ $attributes->get('wire:target') }}">
<span class="{{ $attributes->get('indicator-progress-class') }}">
{{ $attributes->get('loading-text') ?? 'Veuillez patienter...' }}
<span
class="{{ $attributes->get('spinner-class') ?? 'spinner-border spinner-border-sm align-middle ms-2' }}"></span>
</span>
</div>
</button>
Raw
carbon.blade.php
@if ($human)
<time datetime="{{ $date->format($format) }}" {{ $attributes }}>
{{ $date->diffForHumans() }}
</time>
@elseif ($local !== null)
<span
x-data="{
formatLocalTimeZone: function (element, timestamp) {
const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const date = moment.unix(timestamp).tz(timeZone);
element.innerHTML = date.format('{{ $local !== true ? $local : 'YYYY-MM-DD HH:mm:ss (z)' }}');
}
}"
x-init="formatLocalTimeZone($el, {{ $date->timestamp }})"
title="{{ $date->diffForHumans() }}"
{{ $attributes }}
>
{{ $date->format('Y-m-d H:i:s') }}
</span>
@else
<span title="{{ $date->diffForHumans() }}" {{ $attributes }}>
{{ $date->format($format) }}
</span>
@endif
Raw
form-button.blade.php
<form method="POST" @isset($action) action="{{ $action }}" @endisset>
@csrf
@method($method)
<button type="submit" {{ $attributes }}>
{{ $slot }}
</button>
</form>
Raw
form.blade.php
<form action="{{ $attributes->get('action') ?? route($attributes->get('route')) }}" {{ $attributes }}>
@csrf
{{ $slot }}
</form>
Raw
input.blade.php
<div class="{{ $attributes->get('div-class') }}">
@if($attributes->has('label'))
<label class="form-label {{ $attributes->get('label-class') }}">{{ $attributes->get('label') }}</label>
@endif
@if($attributes->has('input-group-class') or $attributes->has('start-icon') or $attributes->has('start-text') or $attributes->has('end-icon') or $attributes->has('end-text'))
<div class="input-group {{$attributes->get('input-group-class')}}">
@if($attributes->has('start-icon'))
<span class="input-group-text"><i class="{{ $attributes->get('start-icon') ?? "fa-solid fa-input-text" }}"></i></span>
@endif
@if($attributes->has('start-text'))
<span class="input-group-text {{ $attributes->get('start-text-class') }}">{{ $attributes->get('start-text') ?? "XX" }}</span>
@endif
<input class="form-control {{ $attributes->get('class') }} @error($attributes->get('name') ?? $attributes->whereStartsWith('wire:model')->first()) is-invalid @enderror" {{ $attributes }} />
@if($attributes->has('end-icon'))
<span class="input-group-text"><i class="{{ $attributes->get('end-icon') ?? "fa-solid fa-input-text" }}"></i></span>
@endif
@if($attributes->has('end-text'))
<span class="input-group-text {{ $attributes->get('end-text-class') }}">{{ $attributes->get('end-text') ?? "XX" }}</span>
@endif
</div>
@else
<input class="form-control {{ $attributes->get('class') }} @error($attributes->get('name') ?? $attributes->whereStartsWith('wire:model')->first()) is-invalid @enderror" {{ $attributes }} />
@endif
@error($attributes->get('name') ?? $attributes->whereStartsWith('wire:model')->first())
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
Raw
logout.blade.php
<form method="POST" action="{{ $action }}">
@csrf
<button type="submit" {{ $attributes }}>
{{ $slot->isEmpty() ? __('Log out') : $slot }}
</button>
</form>
Raw
select2-modal.blade.php
<div
x-data="{model: @entangle($attributes->wire('model')),}"
x-init="
const $this = $($refs.select);
$this.wrap('<div class=\'position-relative\'></div>');
const renderIcons = (option) => {
if (!option.id) {
return option.text;
}
const $icon = $(`<i class='${$(option.element).data('icon')} me-2'></i>`);
return $icon.prop('outerHTML') + option.text;
};
const select2 = $this
.not('.select2-hidden-accessible')
.select2({
language: 'fr',
minimumResultsForSearch: 10,
templateResult: renderIcons,
templateSelection: renderIcons,
escapeMarkup: function(es) {
return es;
},
dropdownParent: $this.parent()
});
select2.on('select2:select', (event) => {
if (event.target.hasAttribute('multiple')) {
model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
} else {
model = event.params.data.id
}
});
select2.on('select2:unselect', (event) => {
model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
});
$watch('model', (value) => {
select2.val(value).trigger('change');
});
"
wire:ignore
>
<select x-ref="select" {{ $attributes->merge(['class' => 'form-select']) }} tabindex="100003" aria-hidden="false">
{{ $slot }}
</select>
</div>
Raw
select2.blade.php
<div
x-data="{model: @entangle($attributes->wire('model'))}"
x-init="
const $this = $($refs.select);
$this.wrap('<div class=\'position-relative\'></div>');
const renderIcons = (option) => {
if (!option.id) {
return option.text;
}
const $icon = $(`<i class='${$(option.element).data('icon')} me-2'></i>`);
return $icon.prop('outerHTML') + option.text;
};
const select2 = $this
.not('.select2-hidden-accessible')
.select2({
language: 'fr',
minimumResultsForSearch: 10,
templateResult: renderIcons,
templateSelection: renderIcons,
escapeMarkup: function(es) {
return es;
},
});
select2.on('select2:select', (event) => {
if (event.target.hasAttribute('multiple')) {
model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
} else {
model = event.params.data.id
}
});
select2.on('select2:unselect', (event) => {
model = Array.from(event.target.options).filter(option => option.selected).map(option => option.value);
});
$watch('model', (value) => {
select2.val(value).trigger('change');
});
"
wire:ignore
>
<select x-ref="select" {{ $attributes->merge(['class' => 'form-select']) }} tabindex="100003" aria-hidden="false">
{{ $slot }}
</select>
</div>
Raw
textarea.blade.php
<div class="{{ $attributes->get('div-class') }}">
@if($attributes->has('label'))
<label class="form-label {{ $attributes->get('label-class') }}">{{ $attributes->get('label') }}</label>
@endif
@if($attributes->has('input-group-class') or $attributes->has('start-icon') or $attributes->has('start-text') or $attributes->has('end-icon') or $attributes->has('end-text'))
<div class="input-group {{$attributes->get('input-group-class')}}">
@if($attributes->has('start-icon'))
<span class="input-group-text"><i class="{{ $attributes->get('start-icon') ?? "fa-solid fa-input-text" }}"></i></span>
@endif
@if($attributes->has('start-text'))
<span class="input-group-text {{ $attributes->get('start-text-class') }}">{{ $attributes->get('start-text') ?? "XX" }}</span>
@endif
<textarea class="form-control {{ $attributes->get('class') }} @error($attributes->get('name') ?? $attributes->whereStartsWith('wire:model')->first()) is-invalid @enderror" {{ $attributes }}>
{{ $slot }}
</textarea>
@if($attributes->has('end-icon'))
<span class="input-group-text"><i class="{{ $attributes->get('end-icon') ?? "fa-solid fa-input-text" }}"></i></span>
@endif
@if($attributes->has('end-text'))
<span class="input-group-text {{ $attributes->get('end-text-class') }}">{{ $attributes->get('end-text') ?? "XX" }}</span>
@endif
</div>
@else
<textarea class="form-control {{ $attributes->get('class') }} @error($attributes->get('name') ?? $attributes->whereStartsWith('wire:model')->first()) is-invalid @enderror" {{ $attributes }}>
{{ $slot }}
</textarea>
@endif
@error($attributes->get('name') ?? $attributes->whereStartsWith('wire:model')->first())
<div class="invalid-feedback">{{ $message }}</div>
@enderror
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment