Skip to content

Commit 8d2eff5

Browse files
mckenzieartsmckenziearts
committed
feat: [LAR-35] publish spolight views and language
1 parent f1e411a commit 8d2eff5

File tree

5 files changed

+123
-63
lines changed

5 files changed

+123
-63
lines changed

‎lang/vendor/livewire-ui-spotlight/en/spotlight.php‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
return [
6+
'placeholder' => 'What do you want to do?',
7+
];

‎lang/vendor/livewire-ui-spotlight/fr/spotlight.php‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<?php
2+
3+
declare(strict_types=1);
4+
5+
return [
6+
'placeholder' => 'Que souhaitez-vous rechercher ?',
7+
];

‎resources/views/vendor/livewire-ui-modal/modal.blade.php‎

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎resources/views/vendor/livewire-ui-spotlight/.gitkeep‎

Whitespace-only changes.

‎resources/views/vendor/livewire-ui-spotlight/spotlight.blade.php‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<div>
2+
@isset($jsPath)
3+
<script>{!! file_get_contents($jsPath) !!}</script>
4+
@endisset
5+
@isset($cssPath)
6+
<style>{!! file_get_contents($cssPath) !!}</style>
7+
@endisset
8+
9+
<div x-data="LivewireUISpotlight({
10+
componentId: '{{ $this->id() }}',
11+
placeholder: '{{ trans('livewire-ui-spotlight::spotlight.placeholder') }}',
12+
commands: @js($commands),
13+
showResultsWithoutInput: '{{ config('livewire-ui-spotlight.show_results_without_input') }}',
14+
})"
15+
x-init="init()"
16+
x-show="isOpen"
17+
x-cloak
18+
@foreach(config('livewire-ui-spotlight.shortcuts') as $key)
19+
@keydown.window.prevent.cmd.{{ $key }}="toggleOpen()"
20+
@keydown.window.prevent.ctrl.{{ $key }}="toggleOpen()"
21+
@endforeach
22+
@keydown.window.escape="isOpen = false"
23+
@toggle-spotlight.window="toggleOpen()"
24+
class="fixed z-50 px-4 pt-16 flex items-start justify-center inset-0 sm:pt-24">
25+
<div x-show="isOpen" @click="isOpen = false" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0"
26+
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-150"
27+
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
28+
class="fixed inset-0 transition-opacity backdrop-filter backdrop-blur-sm">
29+
<div class="absolute inset-0 bg-gray-900 opacity-50"></div>
30+
</div>
31+
32+
<div x-show="isOpen && filteredItems().length <= 0"
33+
x-transition:enter="ease-out delay-200 duration-300"
34+
x-transition:enter-start="opacity-0 -translate-y-12"
35+
x-transition:enter-end="opacity-100 translate-y-0"
36+
x-transition:leave="ease-in duration-150"
37+
x-transition:leave-start="opacity-50 translate-y-0"
38+
x-transition:leave-end="opacity-0 scale-95"
39+
class="fixed flex items-center justify-center w-full h-auto px-4 pt-16 text-gray-300 transition-all transform sm:pt-24 sm:px-0">
40+
<template x-if="inputPlaceholder == '{{ trans('livewire-ui-spotlight::spotlight.placeholder') }}'">
41+
<div class="w-full max-w-lg">
42+
<div class="overflow-hidden divide-y divide-gray-300 bg-gray-200 rounded-xl shadow-xl bg-opacity-20">
43+
<div class="flex items-center p-5">
44+
<div class="px-2 text-sm text-gray-200">Tapez </div>
45+
<div class="px-3 py-1.5 text-xs font-medium text-gray-100 uppercase bg-gray-900 rounded-lg">Article</div>
46+
<div class="px-2 text-sm text-gray-200">pour rechercher dans les articles</div>
47+
</div>
48+
<div class="flex items-center p-5">
49+
<div class="px-2 text-sm text-gray-200">Tapez </div>
50+
<div class="px-3 py-1.5 text-xs font-medium text-gray-100 uppercase bg-gray-900 rounded-lg">Discussion</div>
51+
<div class="px-2 text-sm text-gray-200">pour rechercher dans les discussions</div>
52+
</div>
53+
<div class="flex items-center p-5">
54+
<div class="px-2 text-sm text-gray-200">Tapez </div>
55+
<div class="px-3 py-1.5 text-xs font-medium text-gray-100 uppercase bg-gray-900 rounded-lg">Sujet</div>
56+
<div class="px-2 text-sm text-gray-200">pour rechercher un sujet dans le forum</div>
57+
</div>
58+
</div>
59+
<div class="px-2 mt-5 text-xs text-center text-gray-200 opacity-50">ou, tapez une section pour accéder rapidement à cette page.</div>
60+
</div>
61+
</template>
62+
<template x-if="inputPlaceholder != '{{ trans('livewire-ui-spotlight::spotlight.placeholder') }}'">
63+
<div class="w-full max-w-lg p-5 bg-gray-100 rounded-lg shadow-xl bg-opacity-10">
64+
<span>Suivant, </span>
65+
<span x-text="inputPlaceholder" class="lowercase"></span>
66+
</div>
67+
</template>
68+
</div>
69+
70+
<div x-show="isOpen" x-transition:enter="ease-out duration-200"
71+
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
72+
x-transition:leave="ease-in duration-150" x-transition:leave-start="opacity-100 scale-100"
73+
x-transition:leave-end="opacity-0 scale-95"
74+
class="relative bg-gray-900 rounded-lg overflow-hidden shadow-xl transform transition-all max-w-lg w-full">
75+
<div class="relative">
76+
<div class="absolute h-full right-5 flex items-center">
77+
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
78+
viewBox="0 0 24 24" wire:loading.delay>
79+
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
80+
stroke-width="4"></circle>
81+
<path class="opacity-75" fill="currentColor"
82+
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
83+
</svg>
84+
</div>
85+
<input @keydown.tab.prevent="" @keydown.prevent.stop.enter="go()" @keydown.prevent.arrow-up="selectUp()"
86+
@keydown.prevent.arrow-down="selectDown()" x-ref="input" x-model="input"
87+
type="text"
88+
style="caret-color: #6b7280; border: 0 !important;"
89+
class="appearance-none w-full bg-transparent px-6 py-4 text-gray-300 text-lg placeholder-gray-500 focus:border-0 focus:border-transparent focus:shadow-none outline-none focus:outline-none"
90+
x-bind:placeholder="inputPlaceholder">
91+
</div>
92+
<div class="border-t border-gray-800" x-show="filteredItems().length > 0" style="display: none;">
93+
<ul x-ref="results" style="max-height: 265px;" class="overflow-y-auto">
94+
<template x-for="(item, i) in filteredItems()" :key>
95+
<li>
96+
<button @click="go(item[0].item.id)" class="block w-full px-6 py-3 text-left"
97+
:class="{ 'bg-gray-700': selected === i, 'hover:bg-gray-800': selected !== i }">
98+
<span x-text="item[0].item.name"
99+
:class="{'text-gray-300': selected !== i, 'text-white': selected === i }"></span>
100+
<span x-text="item[0].item.description" class="ml-1"
101+
:class="{'text-gray-500': selected !== i, 'text-gray-400': selected === i }"></span>
102+
</button>
103+
</li>
104+
</template>
105+
</ul>
106+
</div>
107+
</div>
108+
</div>
109+
</div>

0 commit comments

Comments
 (0)