156 lines
6.3 KiB
PHP
156 lines
6.3 KiB
PHP
@props([
|
|
// this has nothing to do HTML's button types
|
|
// this defines if the button is primary or secondary
|
|
'type' => 'primary',
|
|
|
|
// tiny, small, regular, big
|
|
'size' => config('bladewind.button.size', 'regular'),
|
|
|
|
// for use with css and js if you want to manipulate the button
|
|
'name' => null,
|
|
|
|
// will show a spinner
|
|
'has_spinner' => false,
|
|
// for backward compatibility with Laravel 8
|
|
'hasSpinner' => false,
|
|
|
|
// will show a spinner
|
|
'show_spinner' => false,
|
|
// for backward compatibility with Laravel 8
|
|
'showSpinner' => false,
|
|
|
|
// will make this <button type="submit">
|
|
'can_submit' => false,
|
|
// for backward compatibility with Laravel 8
|
|
'canSubmit' => false,
|
|
|
|
// set to true to disable the button
|
|
'disabled' => false,
|
|
|
|
// what tags to use for drawing the button <a> or <button>
|
|
// available options are a, button
|
|
'tag' => config('bladewind.button.tag', 'button'),
|
|
|
|
// button colour
|
|
'color' => '',
|
|
|
|
// overwrite the button text color
|
|
'button_text_css' => null,
|
|
'buttonTextCss' => null,
|
|
|
|
// icon to display to the left of the button
|
|
'icon' => '',
|
|
'icon_right' => config('bladewind.button.icon_right', false),
|
|
'iconRight' => config('bladewind.button.icon_right', false),
|
|
|
|
// should a ring be shown around the button?
|
|
'show_focus_ring' => config('bladewind.button.show_focus_ring', true),
|
|
'showFocusRing' => config('bladewind.button.show_focus_ring', true),
|
|
|
|
// should the button be only an outline
|
|
'outline' => config('bladewind.button.outline', false),
|
|
|
|
// thickness of outline
|
|
// 2, 4, 8
|
|
// becomes border-2, border-4, border-8
|
|
'border_width' => config('bladewind.button.border_width', 2),
|
|
|
|
// thickness of the ring shown on focus
|
|
// 1, 2, 4, 8
|
|
// becomes ring, ring-1, ring-2, ring-4, ring-8
|
|
'ring_width' => config('bladewind.button.ring_width', ''),
|
|
|
|
// determines how rounded the button should be
|
|
// none, small, medium, full
|
|
'radius' => config('bladewind.button.radius', 'small'),
|
|
|
|
// is this a circular button
|
|
'circular' => false,
|
|
|
|
// display button text as uppercase or as user entered
|
|
'uppercasing' => config('bladewind.button.uppercasing', true),
|
|
])
|
|
@php
|
|
$show_spinner = parseBladewindVariable($show_spinner);
|
|
$showSpinner = parseBladewindVariable($showSpinner);
|
|
$has_spinner = parseBladewindVariable($has_spinner);
|
|
$hasSpinner = parseBladewindVariable($hasSpinner);
|
|
$can_submit = parseBladewindVariable($can_submit);
|
|
$canSubmit = parseBladewindVariable($canSubmit);
|
|
$outline = parseBladewindVariable($outline);
|
|
$uppercasing = parseBladewindVariable($uppercasing);
|
|
$circular = parseBladewindVariable($circular);
|
|
$show_focus_ring = parseBladewindVariable($show_focus_ring);
|
|
$showFocusRing = parseBladewindVariable($showFocusRing);
|
|
|
|
if($showSpinner) $show_spinner = $showSpinner;
|
|
if($hasSpinner) $has_spinner = $hasSpinner;
|
|
if($canSubmit) $can_submit = $canSubmit;
|
|
if(!$showFocusRing) $show_focus_ring = $showFocusRing;
|
|
|
|
$roundness = [
|
|
'none' => 'rounded-none',
|
|
'small' => 'rounded-md',
|
|
'medium' => 'rounded-xl',
|
|
'full' => 'rounded-full',
|
|
];
|
|
|
|
$icon_size = [
|
|
'circular' => [
|
|
'tiny' => '!size-[16px]',
|
|
'small' => '!size-[22px]',
|
|
'regular' => '!size-6',
|
|
'medium' => '!size-7',
|
|
'big' => '!size-9',
|
|
],
|
|
'tiny' => '!size-3 !mt-[-2px]',
|
|
'small' => '!size-3.5',
|
|
'regular' => '!size-4',
|
|
'medium' => '!size-[20px]',
|
|
'big' => '!size-[25px]',
|
|
];
|
|
|
|
$colour = (!empty($color)) ? $color : $type;
|
|
$outline_colour = "border-$colour-500/50 focus:ring-$colour-500 hover:border-$colour-600
|
|
dark:hover:border-$colour-500 active:border-$colour-600 text-$colour-600 %s";
|
|
$button_colour = "!bg-$colour-500 hover:!bg-$colour-600 focus:ring-$colour-500 active:bg-$colour-600 %s";
|
|
|
|
if($colour == 'black') {
|
|
$outline_colour = preg_replace('/(-)?(\/)?\d+/', '', $outline_colour);
|
|
$button_colour = preg_replace('/-\d+/', '', $button_colour);
|
|
}
|
|
$button_type = ($can_submit) ? 'submit' : 'button';
|
|
$spinner_css = sprintf(($outline ? 'text-gray-600 dark:text-white %s' : 'text-white %s'), (!$show_spinner) ? 'hidden' : '');
|
|
$focus_ring_width = ($ring_width !== '' && in_array((int)$ring_width, [1,2,4,8])) ? '-'.$ring_width : '';
|
|
$focus_ring_css = (!$show_focus_ring) ? 'focus:ring-0 focus:outline-0' : 'focus:ring'.$focus_ring_width;
|
|
$border_width = ' border-'.$border_width;
|
|
$primary_colour_css = (($outline) ?
|
|
sprintf($outline_colour,$focus_ring_css.$border_width) :
|
|
sprintf($button_colour,$focus_ring_css)
|
|
);
|
|
$radius_css = $roundness[$radius] ?? 'rounded-full';
|
|
$button_text_css = (!empty($buttonTextCss)) ? $buttonTextCss : $button_text_css;
|
|
$button_text_colour = (!empty($button_text_css)) ? $button_text_css : 'text-white hover:text-white';
|
|
$disabled_css = $disabled ? 'disabled' : 'cursor-pointer';
|
|
$outline_css = ($outline) ? 'outlined '.$border_width : '';
|
|
$has_icon_css = (!empty($icon)) ? ' has-icon ' : '';
|
|
$tag = ($tag !== 'a' && $tag !== 'button') ? 'button' : $tag;
|
|
$base_button_css = ($circular) ? 'bw-button-circle' : 'bw-button '.(($uppercasing) ? 'uppercase ' : '');
|
|
$merged_attributes = $attributes->merge(['class' => "$base_button_css $size $type $name $primary_colour_css $disabled_css $radius_css $outline_css $has_icon_css"]);
|
|
$icon_css = ($circular) ? $icon_size['circular'][$size] : $icon_size[$size].' dark:text-white/80 ' . ((!$icon_right) ? '!-ml-2 rtl:!-mr-2 !mr-2 rtl:!ml-2' : '!-mr-2 rtl:!-ml-2 !ml-2 rtl:!mr-2');
|
|
@endphp
|
|
|
|
<{{ $tag }} {{ $merged_attributes }} @if($disabled) disabled @endif @if($tag == 'button') type="{{ $button_type }}" @endif >
|
|
@if(!empty($icon) && !$icon_right)
|
|
<x-bladewind::icon :name="$icon" class="stroke-2 {{$icon_css}}" />
|
|
@endif
|
|
@if (!$circular)
|
|
<span class="grow {{ $button_text_css }}">{{ $slot }}</span>
|
|
@endif
|
|
@if(!empty($icon) && $icon_right && !$has_spinner)
|
|
<x-bladewind::icon :name="$icon" class="stroke-2 {{$icon_css}}" />
|
|
@endif
|
|
@if($has_spinner)
|
|
<x-bladewind::spinner class="{{$icon_size[$size]}} !-mr-2 rtl:!-ml-2 !ml-2 rtl:!mr-2 {{ $spinner_css }}" />
|
|
@endif
|
|
</{{$tag}}> |