mag/WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

interim fix for drop downs, BROKEN FIX, interinm fix

Browse Source
This commit is contained in:
Mark Gregory
2026-07-07 13:38:25 +01:00
parent e1f132fa7b
commit 96bae35060
4 changed files with 179 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Company/Resources/views/_form.blade.php
+1 -2
View File
@@ -53,9 +53,8 @@
id="country_id"
name="country_id"
data-wms-select2
data-company-country-select2
data-placeholder="Search and select a country"
class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
class="w-full"
>
<option value=""></option>
@foreach ($countries as $country)
Modules/Company/Resources/views/index.blade.php
+1 -2
View File
@@ -85,9 +85,8 @@
id="quick_country_id"
name="country_id"
data-wms-select2
data-company-country-select2
data-placeholder="Search and select country"
class="mt-2 h-12 w-full rounded-xl border-zinc-300 bg-white px-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-white"
class="w-full"
>
<option value=""></option>
@foreach($countries as $country)
resources/css/wms-select2.css
+157
View File
@@ -0,0 +1,157 @@
/* WMS Select2 professional dark theme.
This file is imported after Select2's own CSS so it wins reliably. */
.wms-select2-field .select2-container,
.select2-container--wms {
width: 100% !important;
display: block !important;
}
.wms-select2-field select[data-wms-select2].select2-hidden-accessible {
position: absolute !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
padding: 0 !important;
margin: -1px !important;
}
.wms-select2-field .select2-container {
margin-top: 0.5rem !important;
}
.select2-container--wms .select2-selection--single {
height: 3rem !important;
min-height: 3rem !important;
border: 1px solid rgb(63 63 70) !important;
border-radius: 0.75rem !important;
background: rgb(9 9 11) !important;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.2) !important;
display: flex !important;
align-items: center !important;
outline: none !important;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
}
.select2-container--wms.select2-container--focus .select2-selection--single,
.select2-container--wms.select2-container--open .select2-selection--single {
border-color: rgb(59 130 246) !important;
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.24) !important;
}
.select2-container--wms .select2-selection--single .select2-selection__rendered {
width: 100% !important;
padding: 0 3rem 0 1rem !important;
color: rgb(244 244 245) !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
line-height: 3rem !important;
}
.select2-container--wms .select2-selection--single .select2-selection__placeholder {
color: rgb(161 161 170) !important;
font-weight: 500 !important;
}
.select2-container--wms .select2-selection--single .select2-selection__arrow {
position: absolute !important;
top: 0.5rem !important;
right: 0.625rem !important;
width: 2rem !important;
height: 2rem !important;
border-radius: 0.625rem !important;
background: rgb(39 39 42) !important;
}
.select2-container--wms .select2-selection--single .select2-selection__arrow b {
border-color: rgb(212 212 216) transparent transparent transparent !important;
border-width: 5px 4px 0 4px !important;
margin-left: -4px !important;
margin-top: -2px !important;
}
.select2-container--wms.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent rgb(212 212 216) transparent !important;
border-width: 0 4px 5px 4px !important;
}
.select2-container--wms .select2-selection--single .select2-selection__clear {
position: absolute !important;
right: 2.85rem !important;
top: 0.5rem !important;
width: 2rem !important;
height: 2rem !important;
border-radius: 0.625rem !important;
color: rgb(161 161 170) !important;
font-size: 1.25rem !important;
line-height: 1.85rem !important;
text-align: center !important;
}
.select2-container--wms .select2-selection--single .select2-selection__clear:hover {
background: rgb(39 39 42) !important;
color: rgb(244 244 245) !important;
}
.select2-container--wms .select2-dropdown {
overflow: hidden !important;
border: 1px solid rgb(63 63 70) !important;
border-radius: 0.875rem !important;
background: rgb(24 24 27) !important;
color: rgb(244 244 245) !important;
box-shadow: 0 24px 60px rgb(0 0 0 / 0.45) !important;
}
.select2-container--wms .select2-search--dropdown {
padding: 0.75rem !important;
background: rgb(24 24 27) !important;
}
.select2-container--wms .select2-search--dropdown .select2-search__field {
height: 2.75rem !important;
border: 1px solid rgb(63 63 70) !important;
border-radius: 0.75rem !important;
background: rgb(9 9 11) !important;
color: rgb(244 244 245) !important;
padding: 0 0.875rem !important;
font-size: 0.875rem !important;
outline: none !important;
}
.select2-container--wms .select2-search--dropdown .select2-search__field:focus {
border-color: rgb(59 130 246) !important;
box-shadow: 0 0 0 3px rgb(59 130 246 / 0.22) !important;
}
.select2-container--wms .select2-results__options {
background: rgb(24 24 27) !important;
max-height: 16rem !important;
}
.select2-container--wms .select2-results__option {
padding: 0.75rem 1rem !important;
color: rgb(244 244 245) !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
}
.select2-container--wms .select2-results__option--highlighted.select2-results__option--selectable {
background: rgb(37 99 235) !important;
color: white !important;
}
.select2-container--wms .select2-results__option--selected {
background: rgb(30 41 59) !important;
color: rgb(191 219 254) !important;
}
.select2-container--wms .select2-results__option[aria-disabled='true'] {
color: rgb(113 113 122) !important;
}
.select2-container--wms .select2-results__message {
color: rgb(161 161 170) !important;
}
resources/js/app.js
+20 -28
View File
@@ -3,13 +3,13 @@ require('flatpickr');
import '@fortawesome/fontawesome-free/css/all.min.css';
import Chart from 'chart.js/auto';
import $ from 'jquery';
import select2 from 'select2/dist/js/select2.full.js';
import 'select2/dist/css/select2.min.css';
window.$ = $;
window.jQuery = $;
select2(window, $);
import 'select2';
import 'select2/dist/css/select2.min.css';
import '../css/wms-select2.css';
const chartColours = [
'rgb(8, 145, 178)',
@@ -168,47 +168,39 @@ function initialiseSelect2() {
return;
}
$('[data-helpdesk-select2], [data-wms-select2], [data-company-country-select2]').each(function () {
const select = this;
const $select = $(select);
$('[data-helpdesk-select2], [data-wms-select2]').each(function () {
const $select = $(this);
if ($select.hasClass('select2-hidden-accessible')) {
return;
$select.select2('destroy');
}
const isMultiple = $select.prop('multiple');
const placeholder =
$select.data('placeholder') ||
$select.find('option[value=""]').first().text() ||
(isMultiple ? 'Select options' : 'Select option');
if (!isMultiple && !$select.find('option[value=""]').length) {
$select.prepend(new Option('', '', false, false));
}
$select.select2({
theme: 'wms',
width: '100%',
allowClear: !isMultiple,
closeOnSelect: !isMultiple,
dropdownAutoWidth: false,
placeholder,
dropdownParent: $('body'),
sorter: function (data) {
return data.sort(function (a, b) {
return (a.text || '').localeCompare(b.text || '', undefined, {
sensitivity: 'base',
numeric: true,
});
});
placeholder:
$select.data('placeholder') ||
$select.find('option[value=""]').first().text() ||
(isMultiple ? 'Select options' : 'Select option'),
sorter(data) {
return data.sort((first, second) => first.text.localeCompare(second.text, undefined, {
sensitivity: 'base',
ignorePunctuation: true,
}));
},
});
$select.off('change.wms-select2-livewire');
$select.off('change.select2-livewire');
$select.on('change.wms-select2-livewire', function () {
setLivewireProperty(select, select.dataset.wireModel, $select.val());
$select.on('change.select2-livewire', function () {
setLivewireProperty(this, this.dataset.wireModel, $select.val());
select.dispatchEvent(
this.dispatchEvent(
new Event('change', {
bubbles: true,
})