diff --git a/Modules/Company/Resources/views/_form.blade.php b/Modules/Company/Resources/views/_form.blade.php
index a5bf21dc..08a1cf43 100644
--- a/Modules/Company/Resources/views/_form.blade.php
+++ b/Modules/Company/Resources/views/_form.blade.php
@@ -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"
>
@foreach ($countries as $country)
diff --git a/Modules/Company/Resources/views/index.blade.php b/Modules/Company/Resources/views/index.blade.php
index 1f3661a6..50c76931 100644
--- a/Modules/Company/Resources/views/index.blade.php
+++ b/Modules/Company/Resources/views/index.blade.php
@@ -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"
>
@foreach($countries as $country)
diff --git a/resources/css/app.css b/resources/css/app.css
index 5a7ff4d3..7fa64d0d 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -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);
+ }
+}
diff --git a/resources/js/app.js b/resources/js/app.js
index ee6d0713..776ad753 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -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,
})