Skip to content

Commit 9a923d3

Browse files
QuentinGabQuentinGab
committed
improve btn
1 parent 02448f1 commit 9a923d3

File tree

4 files changed

+90
-16
lines changed

4 files changed

+90
-16
lines changed

‎resources/views/components/button/copy.blade.php‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,41 @@
11
@props([
22
'copy' => null,
3-
'icon' => 'heroicon-o-clipboard',
3+
'icon' => null,
4+
'iconChecked' => null,
45
'tooltip' => __('actions.copy'),
6+
'tooltipChecked' => __('actions.copied'),
57
])
68

7-
<x-kit::button :attributes="$attributes" x-data="clipboard({
8-
tooltip: `{{ $tooltip }}`
9-
})" x-on:click="copy(`{{ $copy }}`)" x-bind="tooltip">
9+
<x-kit::button :attributes="$attributes" x-data="{
10+
copied: false,
11+
copy(value) {
12+
this.copied = true;
13+
setTimeout(() => { this.copied = false; }, 2_000);
14+
15+
navigator.clipboard.writeText(value); // require https
16+
},
17+
tooltip: {
18+
['x-on:click']() {
19+
this.copy({{ Js::from($copy) }});
20+
},
21+
['x-tooltip']() {
22+
return {
23+
content: this.copied ? {{ Js::from($tooltipChecked) }} : {{ Js::from($tooltip) }},
24+
hideOnClick: false
25+
};
26+
},
27+
},
28+
}" x-bind="tooltip">
29+
1030

1131
<x-slot:icon>
1232
<span x-show="!copied" x-transition:enter>
13-
@svg($icon)
33+
{{ $icon }}
1434
</span>
1535
<span x-show="copied" x-cloak x-transition:enter>
16-
@svg('heroicon-m-check')
36+
{{ $iconChecked }}
1737
</span>
1838
</x-slot:icon>
1939

2040
{{ $slot }}
21-
2241
</x-kit::button>

‎resources/views/components/button/file.blade.php‎

Lines changed: 26 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,32 @@
22
'name' => null,
33
'multiple' => false,
44
'accept' => null,
5+
'icon' => null,
6+
'iconRight' => null,
57
])
68

7-
<x-kit::button tag="label" :attributes="$attributes">
8-
<input class="size-full pointer-events-none absolute left-0 top-0 opacity-0" type="file" name="{{ $name }}"
9-
@if ($multiple) multiple @endif
10-
@if (is_string($accept)) accept="{{ $accept }}" @elseif(is_array($accept)) accept="{{ implode(',', $accept) }}" @endif>
11-
<span class="relative">
12-
{{ $slot }}
13-
</span>
9+
10+
@php
11+
$input = $attributes->filter(function ($value, $key) {
12+
return in_array($key, ['name', 'value']) || Str::startsWith($key, ['x-bind:value', 'x-model', 'wire:model']);
13+
});
14+
$label = $attributes->except(array_keys($input->all()));
15+
@endphp
16+
17+
<x-kit::button tag="label" :attributes="$label">
18+
<x-slot:before>
19+
<input class="pointer-events-none absolute left-0 top-0 size-full opacity-0" type="file" {{ $input }}
20+
@if ($multiple) multiple @endif
21+
@if (is_string($accept)) accept="{{ $accept }}" @elseif(is_array($accept)) accept="{{ implode(',', $accept) }}" @endif>
22+
</x-slot:before>
23+
24+
@if ($icon?->hasActualContent())
25+
<x-slot:icon :attributes="$icon?->attributes"> {{ $icon }} </x-slot:icon>
26+
@endif
27+
28+
{{ $slot }}
29+
30+
@if ($iconRight?->hasActualContent())
31+
<x-slot:icon-right :attributes="$iconRight?->attributes"> {{ $iconRight }} </x-slot:icon-right>
32+
@endif
1433
</x-kit::button>

‎src/Ui/Base.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ public function font(): static
163163
public function spacing(): static
164164
{
165165
return $this->append(match ($this->size) {
166-
'2xs' => 'px-2 py-1 min-w-5',
166+
'2xs' => 'px-2 py-1 min-w-6',
167167
'xs' => 'px-2.5 py-1.5 min-w-7',
168168
'sm' => 'px-2.5 py-1.5 min-w-8',
169169
'base', 'md', 'lg', 'xl' => 'px-3 py-2 min-w-9',

‎workbench/resources/views/demo.blade.php‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<script src="https://cdn.tailwindcss.com"></script>
88

9+
<script defer src="https://cdn.jsdelivr.net/npm/@ryangjchandler/[email protected]/dist/cdn.min.js"></script>
10+
<link rel="stylesheet" href="https://unpkg.com/tippy.js@6/dist/tippy.css" />
11+
912
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
1013
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
1114
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
@@ -36,6 +39,38 @@
3639
</div>
3740
</div>
3841

42+
<div class="isolate flex flex-col">
43+
<div class="p-3">
44+
<h1 class="font-semibold">Button File</h1>
45+
</div>
46+
<div class="flex grow items-center justify-center border-b">
47+
<x-kit::button.file name="upload" color="white" class="rounded-md ring-1 ring-inset">
48+
<x-slot:icon>
49+
<iconify-icon icon="heroicons:arrow-up-tray"></iconify-icon>
50+
</x-slot:icon>
51+
Select a file
52+
</x-kit::button.file>
53+
</div>
54+
</div>
55+
56+
<div class="isolate flex flex-col">
57+
<div class="p-3">
58+
<h1 class="font-semibold">Button Copy</h1>
59+
</div>
60+
<div class="flex grow items-center justify-center border-b">
61+
<x-kit::button.copy tooltip="Copy" tooltip-checked="Copied" copy="Foo" color="white"
62+
class="rounded-md ring-1 ring-inset">
63+
<x-slot:icon>
64+
<iconify-icon icon="heroicons:clipboard"></iconify-icon>
65+
</x-slot:icon>
66+
<x-slot:icon-checked>
67+
<iconify-icon icon="heroicons:check"></iconify-icon>
68+
</x-slot:icon-checked>
69+
Copy
70+
</x-kit::button.copy>
71+
</div>
72+
</div>
73+
3974
<div class="isolate flex flex-col">
4075
<div class="p-3">
4176
<h1 class="font-semibold">Tag</h1>
@@ -176,7 +211,8 @@
176211
<iconify-icon icon="heroicons:magnifying-glass"></iconify-icon>
177212
</x-slot:icon>
178213
</x-kit::input>
179-
<x-kit::button color="white" class="m-0.5 rounded font-semibold ring-1 ring-inset" size="sm">
214+
<x-kit::button color="white" class="m-0.5 rounded font-semibold ring-1 ring-inset"
215+
size="sm">
180216
<x-slot:icon-right>
181217
<iconify-icon icon="heroicons:plus"></iconify-icon>
182218
</x-slot:icon-right>

0 commit comments

Comments
 (0)