Merge pull request #302 from mkocansey/development

release/production
mkocansey · Jul 21, 2024 · 407d0b2 · 407d0b2
2 parents 71418d3 + a2474c6
commit 407d0b2
Show file tree

Hide file tree

Showing 13 changed files with 182 additions and 76 deletions.
diff --git 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,
         ]
     ],
@@ -249,6 +251,7 @@
         'close_after_action' => true,
         'backdrop_can_close' => true,
         'blur_backdrop' => true,
+        'blur_size' => 'medium',
         'center_action_buttons' => false,
         'stretch_action_buttons' => false,
         'show_close_icon' => false,

diff --git a/public/css/bladewind-ui.min.css b/public/css/bladewind-ui.min.css
diff --git 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`;
 }
 

diff --git 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/assets/css/table.css b/resources/assets/css/table.css
@@ -9,12 +9,14 @@
 
     .bw-table tr > td {
         @apply py-4 px-3 align-top text-sm text-slate-600/80 dark:text-dark-400 bg-white dark:bg-dark-800/25 border-x-2 border-transparent leading-6
-        /*dark:bg-dark-600/40*/
+    }
+
+    .bw-table tr > td.group-heading {
+        @apply bg-gray-50 hover:!bg-gray-50 dark:bg-dark-800/35 hover:dark:!bg-dark-800/35
     }
 
     .bw-table.striped tr:nth-child(even) > td, .bw-table.striped tr:nth-child(even):hover > td {
         @apply bg-slate-100/70 dark:bg-dark-800/15
-        /*dark:bg-dark-600/20*/
     }
 
     .bw-table.celled th, .bw-table.celled td {

diff --git 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
 
-<div {{$attributes->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 ">
+<div @class([
+        'flex align-middle text-gray-600 cursor-pointer dark:text-dark-300 w-full text-sm !text-left bw-item '.$class,
+        '!border-0' => ($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)
         <x-bladewind::icon name="{!! $icon !!}" :dir="$dir"
                            class="!size-4 !mt-0.5 !text-gray-400 dark:!text-dark-500  {{$icon_css}}"/>

diff --git 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
     </div>
     <div class="opacity-0 hidden bw-dropmenu-items !z-20 animate__animated animate__fadeIn animate__faster"
          data-open="0">
-        <div class="absolute bg-white dark:bg-dark-700 @if($position=='right') -right-1  @endif mt-1 rounded-md {{$class}} shadow-sm shadow-slate-200/50 dark:shadow-dark-800/70 whitespace-nowrap
-             p-2 border border-transparent dark:border-dark-800/20 bw-items-list ring-1 ring-slate-800 ring-opacity-5 @if($divided) divide-y divide-slate-100 dark:divide-dark-600/90 @endif"
-             @if($scrollable)
-                 style="height: {{$height}}px; overflow-y: scroll"
-                @endif>
+        <div @class([
+                'absolute bg-white dark:bg-dark-700 mt-1 rounded-md',
+                'border border-transparent dark:border-dark-800/20 bw-items-list ring-1 ring-slate-800 ring-opacity-5',
+                'shadow-sm shadow-slate-200/50 dark:shadow-dark-800/70 whitespace-nowrap',
+                '-right-1' => ($position=='right'),
+                'p-2' => $padded,
+                'p-0' => !$padded,
+                'divide-y divide-slate-100 dark:divide-dark-600/90' => $divided,
+                "$class"
+                ])
+             @if($scrollable)style="height: {{$height}}px;overflow-y: scroll"@endif>
             {{ $slot }}
         </div>
     </div>

diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -55,6 +55,9 @@
     'blur_backdrop' => config('bladewind.modal.blur_backdrop', true),
     'blurBackdrop' => config('bladewind.modal.blur_backdrop', true),
 
+    // specify intensity of the backdrop blur
+    'blurSize' => config('bladewind.modal.blur_size', 'medium'),
+
     // determines the size of the modal. available options are small, medium, large and xl
     // on mobile it is small by default but fills up the width of the screen
     'size' => config('bladewind.modal.size', 'medium'),
@@ -112,6 +115,7 @@
     if ($stretchActionButtons) $stretch_action_buttons = $stretchActionButtons;
     if ($blurBackdrop) $blur_backdrop = $blurBackdrop;
     if(!$showCloseIcon) $show_close_icon = $showCloseIcon;
+    if (!$blurBackdrop) $blurSize = 'none';
     if(!in_array($align_buttons, ['right', 'center', 'left'])) $align_buttons = 'right';
     //-------------------------------------------------------------------
 
@@ -133,10 +137,23 @@
       }
     };
     $type_colour = $type_colour();
+
+   $blur_intensity = function() use ($blurSize) {
+       return match ($blurSize) {
+           'none' => "backdrop-blur-none",
+           'small' => "backdrop-blur-sm",
+           'large' => "backdrop-blur-lg",
+           'xl' => "backdrop-blur-xl",
+           'xxl' => "backdrop-blur-2xl",
+           'omg' => "backdrop-blur-3xl",
+           default => "backdrop-blur-md",
+       };
+    };
+//    $blur_intensity = $blur_intensity();
 @endphp
 
 <div data-name="{{$name}}" data-backdrop-can-close="{{$backdrop_can_close}}"
-     class="w-full h-full bg-black/40 fixed left-0 top-0 @if($blur_backdrop) backdrop-blur-md dark:backdrop-blur-lg @endif
+     class="w-full h-full bg-black/40 fixed left-0 top-0 {{$blur_intensity()}}
      z-40 flex bw-modal bw-{{$name}}-modal hidden overscroll-contain">
     <div class="sm:{{$sizes[$size]}} lg:{{$sizes[$size]}} p-4 m-auto bw-{{$name}} animate__faster">
         <div class="bg-white relative dark:bg-dark-700/90 dark:border dark:border-dark-500/10 rounded-lg drop-shadow-2xl">

diff --git 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
 <div class="py-3 pl-4 pr-3 flex items-center text-base cursor-pointer hover:bg-slate-100/90 dark:hover:bg-dark-800/50 dark:hover:text-dark-200 bw-select-item"
-     data-label="{{ $label }}" data-value="{{ $value }}"
+     data-label="{!! $label !!}" data-value="{{ $value }}"
      @if(!empty($filter_by)) data-filter-value="{{$filter_by}}" @endif
      @if($selected) data-selected="true" @endif
      @if($onselect !== '') data-user-function="{{ $onselect }}"@endif>
@@ -22,6 +23,6 @@
     @if ($image !== '')
         <x-bladewind::avatar size="small" class="!mt-0 !mr-4" image="{{ $image }}"/>
     @endif
-    <span class="grow text-left">{!! html_entity_decode($label) !!}</span>
+    <span class="grow text-left">{!! $label !!}</span>
     <x-bladewind::icon name="check-circle" class="text-slate-400 size-5 hidden svg-{{$value }}"/>
 </div>
diff --git 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"
 </script>
 <script @if($modular) type="module" @endif>
     const bw_{{ $input_name }} = new BladewindSelect('{{ $input_name }}', '{{ $placeholder }}');
-    @if(!$disabled && !$readonly) bw_{{ $input_name }}.activate();
+    bw_{{ $input_name }}.activate({disabled: '{{$disabled}}', readonly: '{{$readonly}}'});
+    @if(!$disabled && !$readonly)
     bw_{{ $input_name }}.maxSelectable({{$max_selectable}}, '{{ sprintf($max_error_message, $max_selectable) }}');
     @endif
     @if(!empty($filter)) bw_{{ $input_name }}.filter('{{ $filter }}');
-    @endif @if(!($required && $multiple == 'false')) bw_{{ $input_name }}.clearable();
-    @endif
+    @endif @if(!($required && $multiple == 'false')) bw_{{ $input_name }}.clearable();@endif
 </script>
diff --git a/resources/views/components/table-icons.blade.php b/resources/views/components/table-icons.blade.php
@@ -0,0 +1,20 @@
+@props(['icons_array' => null, 'row' => null])
+@if( !empty($icons_array) )
+    <td class="text-right space-x-2 actions">
+        @foreach($icons_array as $icon)
+            @if(isset($icon['icon']))
+                @if(!empty($icon['tip']))
+                    <a data-tooltip="{{ $icon['tip'] }}" data-inverted="" data-position="top center"> @endif
+                        <x-bladewind::button.circle
+                                size="tiny"
+                                icon="{{ $icon['icon'] }}"
+                                color="{{ $icon['color'] ?? '' }}"
+                                {{--title="{{$icon['tip']??''}}"--}}
+                                onclick="{!! build_click($icon['click'], $row) ?? 'void(0)' !!}"
+                                type="{!! isset($icon['color']) ? 'primary' : 'secondary' !!}"/>
+                        @if(!empty($icon['tip'])) </a>
+                @endif
+            @endif
+        @endforeach
+    </td>
+@endif