fd928537e3
Add shared easing curves and press/focus transitions for buttons, inputs, and form controls in app.css. Refine dropdown, modal, tooltip, and slide-over enter/leave transitions to use consistent easing and durations, and remove the focus-visible box-shadow ring on inputs/selects in favor of border-color transitions.
91 lines
3.5 KiB
PHP
91 lines
3.5 KiB
PHP
@php
|
|
$wireClickValue = $attributes->whereStartsWith('wire:click')->first();
|
|
$wireTargetValue = $attributes->get('wire:target');
|
|
$hasExplicitWireTarget = $attributes->has('wire:target')
|
|
&& filled($wireTargetValue)
|
|
&& $wireTargetValue !== true
|
|
&& $wireTargetValue !== '1';
|
|
|
|
$loadingTarget = null;
|
|
if ($showLoadingIndicator) {
|
|
if (filled($wireClickValue)) {
|
|
$loadingTarget = trim((string) $wireClickValue);
|
|
} elseif ($hasExplicitWireTarget) {
|
|
$loadingTarget = trim((string) $wireTargetValue);
|
|
}
|
|
}
|
|
|
|
$loadingAttributes = [];
|
|
if (filled($loadingTarget)) {
|
|
$loadingAttributes['wire:loading.attr'] = 'disabled';
|
|
$loadingAttributes['wire:loading.class'] = 'is-loading';
|
|
if (! $hasExplicitWireTarget) {
|
|
$loadingAttributes['wire:target'] = $loadingTarget;
|
|
}
|
|
}
|
|
@endphp
|
|
@if ($authDisabled || filled($tooltip))
|
|
<span class="relative inline-flex"
|
|
x-data="{
|
|
visible: false,
|
|
_t: null,
|
|
showTooltip(delay = 0) {
|
|
clearTimeout(this._t);
|
|
this._t = setTimeout(() => {
|
|
this.visible = true;
|
|
this.positionTooltip();
|
|
}, delay);
|
|
},
|
|
hideTooltip() {
|
|
clearTimeout(this._t);
|
|
this.visible = false;
|
|
},
|
|
positionTooltip() {
|
|
this.$nextTick(() => requestAnimationFrame(() => {
|
|
const tip = this.$refs.tip;
|
|
if (!tip) return;
|
|
const r = this.$el.getBoundingClientRect();
|
|
const t = tip.getBoundingClientRect();
|
|
let top = r.top - t.height - 6;
|
|
let left = r.left;
|
|
if (top < 4) top = r.bottom + 6;
|
|
if (left + t.width > innerWidth - 8) left = innerWidth - 8 - t.width;
|
|
if (left < 4) left = 4;
|
|
tip.style.top = top + 'px';
|
|
tip.style.left = left + 'px';
|
|
}));
|
|
}
|
|
}"
|
|
@if ($disabled) tabindex="0" :aria-describedby="visible ? $id('button-tooltip') : null" @endif
|
|
@mouseenter="showTooltip(300)"
|
|
@mouseleave="hideTooltip()"
|
|
@focusin="showTooltip()"
|
|
@focusout="hideTooltip()"
|
|
@click.outside="hideTooltip()">
|
|
@endif
|
|
<button @disabled($disabled) @if ($isHighlighted) isHighlighted @endif
|
|
@if ($authDisabled || filled($tooltip)) :aria-describedby="visible ? $id('button-tooltip') : null" @endif
|
|
{{ $attributes->merge(['class' => $defaultClass, 'type' => 'button'])->merge($loadingAttributes) }}
|
|
@isset($confirm)
|
|
x-on:click="toggleConfirmModal('{{ $confirm }}', '{{ explode('(', $confirmAction)[0] }}')"
|
|
@endisset
|
|
@isset($confirmAction)
|
|
x-on:{{ explode('(', $confirmAction)[0] }}.window="$wire.{{ explode('(', $confirmAction)[0] }}"
|
|
@endisset>
|
|
|
|
@if (filled($loadingTarget))
|
|
<x-loading-on-button wire:target="{{ $loadingTarget }}" wire:loading />
|
|
@endif
|
|
{{ $slot }}
|
|
</button>
|
|
@if ($authDisabled || filled($tooltip))
|
|
<div x-ref="tip" x-show="visible" x-cloak :id="$id('button-tooltip')" role="tooltip"
|
|
x-transition:enter="transition-opacity ease-out duration-100"
|
|
x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition-opacity ease-in duration-75"
|
|
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
|
|
class="auth-tooltip">
|
|
{{ $tooltip ?: 'You do not have permission to perform this action.' }}
|
|
</div>
|
|
</span>
|
|
@endif
|