mirivlad
/
LMS
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Feat: Теги групп как в WordPress 

✅ Синие бейджи с названиями групп
✅ Крестик для удаления (краснеет при наведении)
✅ CSS стили для TomSelect
✅ Компонент для мультивыбора

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
mirivlad 2026-03-30 12:15:52 +08:00
parent 44aa50fc18
commit 4b84528e52
1 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
resources/views/components/searchable-select.blade.php
View File

@ -5,6 +5,26 @@
@push('scripts') @push('scripts')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<style>
.tom-select .item {
background: #0d6efd !important;
color: white !important;
border-radius: 0.25rem !important;
padding: 0.25rem 0.5rem !important;
margin: 0.125rem !important;
display: inline-flex !important;
align-items: center !important;
}
.tom-select .item .remove {
color: white !important;
margin-left: 0.5rem !important;
font-size: 1.2rem !important;
line-height: 1 !important;
}
.tom-select .item .remove:hover {
color: #ffc107 !important;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
@ -15,7 +35,7 @@ document.addEventListener('DOMContentLoaded', function() {
placeholder: '{{ $placeholder }}', placeholder: '{{ $placeholder }}',
preload: false, preload: false,
maxOptions: null, maxOptions: null,
{{ $multiple ? 'persist: false, hideSelected: true,' : '' }} {{ $multiple ? 'persist: false, hideSelected: true, create: false,' : '' }}
load: function(query, callback) { load: function(query, callback) {
if (query.length < 2) return callback(); if (query.length < 2) return callback();
@ -32,7 +52,10 @@ document.addEventListener('DOMContentLoaded', function() {
return '<div>' + escape(data.text) + '</div>'; return '<div>' + escape(data.text) + '</div>';
}, },
item: function(data, escape) { item: function(data, escape) {
return '<div>' + escape(data.text) + '</div>'; return '<div class="item">' +
escape(data.text) +
'<a href="javascript:void(0)" class="remove">&times;</a>' +
'</div>';
} }
}, },
onChange: function(value) { onChange: function(value) {