From 5110ba5b4c37c0febea4704ca7d7a2ecaa029f32 Mon Sep 17 00:00:00 2001 From: "Michael K. Ocansey" Date: Mon, 15 Jul 2024 21:22:45 +0000 Subject: [PATCH 1/7] Fix: properly position prefix/suffix labels --- public/js/helpers.js | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/public/js/helpers.js b/public/js/helpers.js index dc27da6..6f51905 100644 --- a/public/js/helpers.js +++ b/public/js/helpers.js @@ -428,7 +428,7 @@ var goToTab = (element, colour, context) => { var positionPrefix = (element, mode = 'blur') => { let transparency = domEl(`.dv-${element} .prefix`).getAttribute('data-transparency'); let offset = (transparency === '1') ? -5 : 7; - let prefix_width = ((domEl(`.dv-${element} .prefix`).offsetWidth) + offset) * 1; + let prefix_width = ((getPrefixSuffixOffsetWidth(`.dv-${element} .prefix`)) + offset) * 1; let default_label_left_pos = '0.875rem'; let input_field = domEl(`input.${element}`); let label_field = domEl(`.dv-${element} label`); @@ -453,6 +453,24 @@ var positionPrefix = (element, mode = 'blur') => { } } + +/** + * Get the offsetWidth of a prefix/suffix label + * @param {string} element - The css class (name) of the prefix/suffix field. + * @return {int} + */ +var getPrefixSuffixOffsetWidth = (element) => { + let ps_element = domEl(element); + const clone = ps_element.cloneNode(true); + clone.style.visibility = 'hidden'; + clone.style.position = 'absolute'; + clone.style.display = 'block'; + document.body.appendChild(clone); + let offsetWidth = clone.offsetWidth; + document.body.removeChild(clone); + return offsetWidth; +} + /** * Position a suffix in an input field. * @param {string} element - The css class (name) of the input field. @@ -462,7 +480,7 @@ var positionPrefix = (element, mode = 'blur') => { var positionSuffix = (element) => { let transparency = domEl(`.dv-${element} .suffix`).getAttribute('data-transparency'); let offset = (transparency === '1') ? -5 : 7; - let suffix_width = ((domEl(`.dv-${element} .suffix`).offsetWidth) + offset) * 1; + let suffix_width = ((getPrefixSuffixOffsetWidth(`.dv-${element} .suffix`)) + offset) * 1; domEl(`input.${element}`).style.paddingRight = `${suffix_width}px`; } From 443ca4556d2dc41507ff5a5e3a106ad0c6db6274 Mon Sep 17 00:00:00 2001 From: "Michael K. Ocansey" Date: Thu, 18 Jul 2024 01:22:15 +0000 Subject: [PATCH 2/7] Fix: #299 --- config/bladewind.php | 2 ++ public/js/select.js | 32 +++++++++++-------- .../views/components/select-item.blade.php | 5 +-- resources/views/components/select.blade.php | 6 ++-- 4 files changed, 27 insertions(+), 18 deletions(-) diff --git a/config/bladewind.php b/config/bladewind.php index 13c7dcd..d532496 100644 --- a/config/bladewind.php +++ b/config/bladewind.php @@ -158,11 +158,13 @@ 'trigger_on' => 'click', 'icon_right' => false, 'divided' => false, + 'padded' => true, // default attributes for dropmenu-item component 'item' => [ 'dir' => '', 'icon_right' => false, 'hover' => true, + 'padded' => true, 'divided' => false, ] ], diff --git a/public/js/select.js b/public/js/select.js index a7ae70d..e4abe1f 100644 --- a/public/js/select.js +++ b/public/js/select.js @@ -14,7 +14,7 @@ class BladewindSelect { enabled; - constructor(name, placeholder, required) { + constructor(name, placeholder) { this.name = name; this.placeholder = placeholder || 'Select One'; this.rootElement = `.bw-select-${name}`; @@ -31,14 +31,19 @@ class BladewindSelect { this.enabled = true; } - activate = () => { - dom_el(this.clickArea).addEventListener('click', (e) => { - unhide(this.itemsContainer); - }); - this.hide(); - this.search(); - this.manualModePreSelection(); - this.selectItem(); + activate = (options = {}) => { + if (options.disabled !== '1' && options.readonly !== '1') { + dom_el(this.clickArea).addEventListener('click', (e) => { + unhide(this.itemsContainer); + }); + this.hide(); + this.search(); + this.manualModePreSelection(); + this.selectItem(); + } else { + this.selectItem(); + this.enabled = false; + } } clearable = () => { @@ -57,7 +62,9 @@ class BladewindSelect { dom_el(this.searchInput).addEventListener('keyup', (e) => { let value = (dom_el(this.searchInput).value); dom_els(this.selectItems).forEach((el) => { - (el.innerText.toLowerCase().indexOf(value.toLowerCase()) !== -1) ? unhide(el, true) : hide(el, true); + (el.innerText.toLowerCase().indexOf(value.toLowerCase()) !== -1) ? + unhide(el, true) : + hide(el, true); }); }); } @@ -104,7 +111,6 @@ class BladewindSelect { setValue = (item) => { this.selectedValue = item.getAttribute('data-value'); - // let selectedValue = item.getAttribute('data-value'); let selectedLabel = item.getAttribute('data-label'); let svg = dom_el(`${this.rootElement} div[data-value="${this.selectedValue}"] svg`); let input = dom_el(this.formInput); @@ -130,7 +136,7 @@ class BladewindSelect { e.stopImmediatePropagation(); }); } - } else { + } /*else { if (input.value.includes(this.selectedValue)) { this.unsetValue(item); } else { @@ -145,7 +151,7 @@ class BladewindSelect { this.moveLabel(); } this.scrollbars(); - } + }*/ stripComma(input); changeCss(`${this.clickArea}`, '!border-red-400', 'remove'); } diff --git a/resources/views/components/select-item.blade.php b/resources/views/components/select-item.blade.php index d083971..accd96b 100644 --- a/resources/views/components/select-item.blade.php +++ b/resources/views/components/select-item.blade.php @@ -10,9 +10,10 @@ @php $selected = filter_var($selected, FILTER_VALIDATE_BOOLEAN); + $label = html_entity_decode($label); @endphp
@@ -22,6 +23,6 @@ @if ($image !== '') @endif - {!! html_entity_decode($label) !!} + {!! $label !!}
\ No newline at end of file diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php index 1060be6..79bb58c 100644 --- a/resources/views/components/select.blade.php +++ b/resources/views/components/select.blade.php @@ -232,10 +232,10 @@ class="bw-{{$input_name}} @if($required) required @endif" \ No newline at end of file From 231e0d066b25b9fbeca13fec165885ef85755a36 Mon Sep 17 00:00:00 2001 From: "Michael K. Ocansey" Date: Thu, 18 Jul 2024 01:22:55 +0000 Subject: [PATCH 3/7] Added attribute to remove padding around dropmenu body and items --- .../views/components/dropmenu-item.blade.php | 25 ++++++++++--------- resources/views/components/dropmenu.blade.php | 18 +++++++++---- 2 files changed, 26 insertions(+), 17 deletions(-) diff --git a/resources/views/components/dropmenu-item.blade.php b/resources/views/components/dropmenu-item.blade.php index 83e95d2..55b0cc8 100644 --- a/resources/views/components/dropmenu-item.blade.php +++ b/resources/views/components/dropmenu-item.blade.php @@ -7,6 +7,7 @@ 'header' => false, 'hover' => config('bladewind.dropmenu.item.hover', true), 'divided' => config('bladewind.dropmenu.item.divided', false), + 'padded' => config('bladewind.dropmenu.item.padded', true), ]) @aware([ 'iconRight' => config('bladewind.dropmenu.item.icon_right', false), @@ -16,22 +17,22 @@ $divided = filter_var($divided, FILTER_VALIDATE_BOOLEAN); $header = filter_var($header, FILTER_VALIDATE_BOOLEAN); $hover = filter_var($hover, FILTER_VALIDATE_BOOLEAN); + $padded = filter_var($padded, FILTER_VALIDATE_BOOLEAN); $iconRight = filter_var($iconRight, FILTER_VALIDATE_BOOLEAN); $icon_css .= ($iconRight) ? ' !ml-2 !-mr-1' : ' !mr-2 -ml-0.5 '; @endphp -
merge(['data-item' => "true"])}} - class="flex align-middle text-gray-600 cursor-pointer dark:text-dark-300 w-full text-sm !text-left bw-item {{$class}} - @if($divided && $header) !border-0 @endif - @if($divider && !$header) - @if(!$divided) - border-y border-t-slate-200/75 border-b-white dark:!border-t-gray-800/40 dark:border-b-gray-100/10 my-1 - @else hidden @endif - @else py-2 px-2.5 @endif - @if($iconRight && !empty($icon)) flex-row-reverse justify-between @endif - @if(!$header ) - @if($hover) hover:rounded-md hover:dark:text-dark-100 hover:bg-slate-200/75 hover:dark:!bg-dark-800 @endif - @else !cursor-default border-b border-b-slate-200/75 dark:!border-b-gray-100/10 mb-1 @endif "> +
($divided && $header), + 'border-y border-t-slate-200/75 border-b-white dark:!border-t-gray-800/40 dark:border-b-gray-100/10 my-1' => ($divider && !$header && !$divided), + 'hidden' => ($divider && !$header && $divided), + 'py-2 px-2.5' => (!$divider && $padded), + 'p-0' => (!$divider && !$padded), + 'flex-row-reverse justify-between' => ($iconRight && !empty($icon)), + 'hover:rounded-md hover:dark:text-dark-100 hover:bg-slate-200/75 hover:dark:!bg-dark-800' => (!$header && $hover), + '!cursor-default border-b border-b-slate-200/75 dark:!border-b-gray-100/10 mb-1' => $header, +]) {{$attributes->merge(['data-item' => "true"])}}> @if(!empty($icon) && !$header) diff --git a/resources/views/components/dropmenu.blade.php b/resources/views/components/dropmenu.blade.php index c861509..08ffa02 100644 --- a/resources/views/components/dropmenu.blade.php +++ b/resources/views/components/dropmenu.blade.php @@ -12,12 +12,14 @@ 'modular' => false, // append type="module" to script tags 'pickerColour' => 'pink', 'icon_right' => config('bladewind.dropmenu.icon_right', false), + 'padded' => config('bladewind.dropmenu.padded', true), ]) @php $name = preg_replace('/[\s-]/', '_', $name); $height = !is_numeric($height) ? 200 : $height; $trigger_on = (!in_array($trigger_on, ['click', 'mouseover'])) ? 'click' : $trigger_on; $divided = filter_var($divided, FILTER_VALIDATE_BOOLEAN); + $padded = filter_var($padded, FILTER_VALIDATE_BOOLEAN); $scrollable = filter_var($scrollable, FILTER_VALIDATE_BOOLEAN); $hide_after_click = filter_var($hide_after_click, FILTER_VALIDATE_BOOLEAN); $icon_right = filter_var($icon_right, FILTER_VALIDATE_BOOLEAN); @@ -41,11 +43,17 @@ class="h-6 w-6 text-gray-500 transition duration-150 ease-in-out z-10 {{$trigger