Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(editor): added searchable icon select input
uses as standalone alpine component with events to propagate changes (built on select2)
- Loading branch information
Showing
6 changed files
with
165 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <?php | ||
|
|
||
| namespace App\View\Components; | ||
|
|
||
| use Illuminate\Support\Str; | ||
| use Illuminate\View\Component; | ||
|
|
||
| class EditorIconSelect extends Component | ||
| { | ||
| public $changeEvent; | ||
|
|
||
| public $default; | ||
|
|
||
| public $icons; | ||
|
|
||
| /** | ||
| * Create a new component instance. | ||
| * | ||
| * @return void | ||
| */ | ||
| public function __construct(string $changeEvent, string $default = 'fa-solid fa-map-location') | ||
| { | ||
| // set default | ||
| $this->changeEvent = $changeEvent; | ||
| $this->default = $default; | ||
|
|
||
| // load available icons | ||
| $this->icons = collect(); | ||
| $this->getIconsInDir('fa-solid fa-', base_path('resources/icons/font-awesome-6/solid')); | ||
| $this->getIconsInDir('fa-regular fa-', base_path('resources/icons/font-awesome-6/regular')); | ||
| $this->getIconsInDir('fa-brands fa-', base_path('resources/icons/font-awesome-6/brands')); | ||
| } | ||
|
|
||
| protected function getIconsInDir($prefix, $path) | ||
| { | ||
| $files = scandir($path); | ||
| foreach ($files as $file) { | ||
| // SKIP HIDDEN FILES OR PARENT PATHS | ||
| if (Str::startsWith($file, '.')) { | ||
| continue; | ||
| } | ||
|
|
||
| // DETERMINE FULL PATH | ||
| $itemPath = $path.'/'.$file; | ||
|
|
||
| // CHECK NESTED DIRECTORY | ||
| if (! is_dir($itemPath)) { | ||
| // ADD ICON | ||
| $iconName = data_get(explode('.', $file), 0); | ||
|
|
||
| if ($iconName) { | ||
| $iconValue = $prefix.$iconName; | ||
| $this->icons->push((object) [ | ||
| 'value' => $iconValue, | ||
| 'label' => $iconValue, | ||
| ]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Get the view / contents that represent the component. | ||
| * | ||
| * @return \Illuminate\Contracts\View\View|\Closure|string | ||
| */ | ||
| public function render() | ||
| { | ||
| return view('components.editor-icon-select'); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <div | ||
| {{ $attributes->merge(['class' => 'mb-8']) }} | ||
| x-data="{ | ||
| multiple: false, | ||
| value: '{{ $default }}', | ||
| options: {{ json_encode($icons) }}, | ||
| init() { | ||
| let bootSelect2 = () => { | ||
| let selections = this.multiple ? this.value : [this.value] | ||
| $(this.$refs.select).select2({ | ||
| multiple: this.multiple, | ||
| data: this.options.map(i => ({ | ||
| id: i.value, | ||
| text: i.label, | ||
| selected: selections.map(i => String(i)).includes(String(i.value)), | ||
| })), | ||
| }) | ||
| } | ||
| let refreshSelect2 = () => { | ||
| $(this.$refs.select).select2('destroy') | ||
| this.$refs.select.innerHTML = '' | ||
| bootSelect2() | ||
| } | ||
| bootSelect2() | ||
| $(this.$refs.select).on('change', () => { | ||
| let currentSelection = $(this.$refs.select).select2('data') | ||
| this.value = this.multiple | ||
| ? currentSelection.map(i => i.id) | ||
| : currentSelection[0].id | ||
| $dispatch('{{ $changeEvent }}', this.value) | ||
| }) | ||
| this.$watch('value', () => refreshSelect2()) | ||
| this.$watch('options', () => refreshSelect2()) | ||
| }, | ||
| }" | ||
| class="w-full"> | ||
| <select class="w-full" x-ref="select"></select> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters