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:24:22 +01:00
parent 12c1470319
commit e1f132fa7b
4 changed files with 201 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Company/Resources/views/_form.blade.php
+2 -1
View File
@@ -53,8 +53,9 @@
id="country_id"
name="country_id"
data-wms-select2
data-company-country-select2
data-placeholder="Search and select a country"
class="w-full"
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"
>
<option value=""></option>
@foreach ($countries as $country)
Modules/Company/Resources/views/index.blade.php
+2 -1
View File
@@ -85,8 +85,9 @@
id="quick_country_id"
name="country_id"
data-wms-select2
data-company-country-select2
data-placeholder="Search and select country"
class="w-full"
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"
>
<option value=""></option>
@foreach($countries as $country)
resources/css/app.css
+167
View File
@@ -1529,3 +1529,170 @@ html[data-wms-sidebar="collapsed"] .wms-sidebar {
color: rgb(165 243 252);
}
}
/* WMS professional Select2 fields -------------------------------------------------
These rules are intentionally global because company, warehouse, country and
helpdesk forms all use the same Select2 control pattern. */
@layer components {
.wms-select2-field select[data-wms-select2],
.wms-select2-field select[data-company-country-select2] {
margin-top: 0.5rem;
height: 3rem;
width: 100%;
border-radius: 0.75rem;
border: 1px solid rgb(212 212 216);
background-color: white;
padding-left: 1rem;
padding-right: 2.5rem;
font-size: 0.875rem;
font-weight: 500;
color: rgb(24 24 27);
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
}
.dark .wms-select2-field select[data-wms-select2],
.dark .wms-select2-field select[data-company-country-select2] {
border-color: rgb(63 63 70);
background-color: rgb(9 9 11);
color: white;
}
.wms-select2-field .select2-container {
margin-top: 0.5rem;
width: 100% !important;
display: block;
}
.wms-select2-field .select2-container--default .select2-selection--single,
.select2-container--default.wms-select2-dropdown-owner .select2-selection--single {
height: 3rem;
min-height: 3rem;
border-radius: 0.75rem;
border: 1px solid rgb(212 212 216);
background: white;
box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
outline: none;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}
.wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
height: 3rem;
padding-left: 1rem;
padding-right: 3rem;
color: rgb(24 24 27);
font-size: 0.875rem;
font-weight: 600;
line-height: 3rem;
}
.wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: rgb(113 113 122);
font-weight: 500;
}
.wms-select2-field .select2-container--default .select2-selection--single .select2-selection__clear {
height: 3rem;
margin-right: 2rem;
color: rgb(113 113 122);
font-size: 1.1rem;
line-height: 3rem;
}
.wms-select2-field .select2-container--default .select2-selection--single .select2-selection__arrow {
top: 0;
right: 0.75rem;
height: 3rem;
width: 1.75rem;
}
.wms-select2-field .select2-container--default.select2-container--focus .select2-selection--single,
.wms-select2-field .select2-container--default.select2-container--open .select2-selection--single {
border-color: rgb(37 99 235);
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.22);
}
.select2-container--open {
z-index: 99999;
}
.select2-container--default .select2-dropdown {
overflow: hidden;
border: 1px solid rgb(63 63 70);
border-radius: 0.875rem;
background: white;
box-shadow: 0 24px 60px rgb(15 23 42 / 0.26);
}
.select2-container--default .select2-search--dropdown {
padding: 0.75rem;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
min-height: 2.75rem;
border-radius: 0.75rem;
border: 1px solid rgb(212 212 216);
background: white;
padding: 0 0.875rem;
color: rgb(24 24 27);
font-size: 0.875rem;
outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: rgb(37 99 235);
box-shadow: 0 0 0 3px rgb(37 99 235 / 0.22);
}
.select2-container--default .select2-results__option {
padding: 0.75rem 1rem;
color: rgb(24 24 27);
font-size: 0.875rem;
font-weight: 600;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background: rgb(37 99 235);
color: white;
}
.select2-container--default .select2-results__option--selected {
background: rgb(239 246 255);
color: rgb(30 64 175);
}
.dark .wms-select2-field .select2-container--default .select2-selection--single {
border-color: rgb(63 63 70);
background: rgb(9 9 11);
}
.dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__rendered {
color: white;
}
.dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__placeholder,
.dark .wms-select2-field .select2-container--default .select2-selection--single .select2-selection__clear {
color: rgb(161 161 170);
}
.dark .select2-container--default .select2-dropdown {
border-color: rgb(63 63 70);
background: rgb(24 24 27);
color: white;
}
.dark .select2-container--default .select2-search--dropdown .select2-search__field {
border-color: rgb(63 63 70);
background: rgb(9 9 11);
color: white;
}
.dark .select2-container--default .select2-results__option {
color: rgb(244 244 245);
}
.dark .select2-container--default .select2-results__option--selected {
background: rgb(30 58 138 / 0.55);
color: rgb(191 219 254);
}
}
resources/js/app.js
+30 -14
View File
@@ -3,12 +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 = $;
import 'select2';
import 'select2/dist/css/select2.min.css';
select2(window, $);
const chartColours = [
'rgb(8, 145, 178)',
@@ -167,32 +168,47 @@ function initialiseSelect2() {
return;
}
$('[data-helpdesk-select2], [data-wms-select2]').each(function () {
const $select = $(this);
$('[data-helpdesk-select2], [data-wms-select2], [data-company-country-select2]').each(function () {
const select = this;
const $select = $(select);
if ($select.hasClass('select2-hidden-accessible')) {
$select.select2('destroy');
return;
}
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({
width: '100%',
allowClear: !isMultiple,
closeOnSelect: !isMultiple,
dropdownAutoWidth: true,
placeholder:
$select.data('placeholder') ||
$select.find('option[value=""]').first().text() ||
(isMultiple ? 'Select options' : 'Select option'),
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,
});
});
},
});
$select.off('change.select2-livewire');
$select.off('change.wms-select2-livewire');
$select.on('change.select2-livewire', function () {
setLivewireProperty(this, this.dataset.wireModel, $select.val());
$select.on('change.wms-select2-livewire', function () {
setLivewireProperty(select, select.dataset.wireModel, $select.val());
this.dispatchEvent(
select.dispatchEvent(
new Event('change', {
bubbles: true,
})