Merge pull request #313 from mkocansey/v2-6-0

V2 6 8

public/js/helpers.js

@@ -41,6 +41,16 @@ var dom_els = (element) => {
     return domEls(element);
 }
 
+/**
+ * Check to see if val is empty
+ * @param {string} val - The string to test emptiness for
+ * @return {boolean} True if string is empty
+ */
+var isEmpty = (val) => {
+    let regex = /^\s*$/;
+    return regex.test(val);
+}
+
 /**
  * Validate a form and highlight each field that fails validation.
  * @param {string} element - The class name or ID of the element containing the fields to validate.
@@ -54,7 +64,9 @@ var validateForm = (form) => {
     try {
         domEls(`${form} .required`).forEach((el) => {
             changeCss(el, '!border-red-500', 'remove', true);
-            if (el.value === '') {
+            console.log('value:', el.value);
+            console.log(isEmpty(el.value));
+            if (isEmpty(el.value)) {
                 let el_name = el.getAttribute('name');
                 let el_parent = el.getAttribute('data-parent');
                 let error_message = el.getAttribute('data-error-message');

public/js/select.js

@@ -5,6 +5,7 @@ class BladewindSelect {
     searchInput;
     selectItems;
     isMultiple;
+    required;
     displayArea;
     formInput;
     maxSelection;
@@ -24,10 +25,11 @@ class BladewindSelect {
         this.searchInput = `${this.itemsContainer} .bw_search`;
         this.selectItems = `${this.itemsContainer} .bw-select-items .bw-select-item`;
         this.isMultiple = (dom_el(this.rootElement).getAttribute('data-multiple') === 'true');
+        this.required = (dom_el(this.rootElement).getAttribute('data-required') === 'true');
         this.formInput = `input.bw-${this.name}`;
         dom_el(this.displayArea).style.maxWidth = `${(dom_el(this.rootElement).offsetWidth - 40)}px`;
         this.maxSelection = -1;
-        this.canClear = false;
+        this.canClear = (!this.required && !this.isMultiple);
         this.enabled = true;
     }
 

resources/views/components/input.blade.php

@@ -153,17 +153,22 @@
         $suffix_is_icon = true;
         $suffix_icon_css = 'hidden cursor-pointer dark:!bg-dark-900/60 dark:hover:!bg-dark-900 !p-0.5 !rounded-full bg-gray-400 !stroke-2 hover:bg-gray-600 text-white';
     }
+    if($attributes->has('readonly', 'disabled')){
+        if($attributes->get('readonly') == 'false') $attributes = $attributes->except('readonly');
+        if($attributes->get('disabled') == 'false') $attributes = $attributes->except('disabled');
+    }
 @endphp
 
 <div class="relative w-full dv-{{$name}} @if($add_clearing) mb-4 @endif">
     <input
-            {{ $attributes->merge(['class' => "bw-input peer $is_required $name $placeholder_color $size"]) }}
-            type="{{ $type }}"
-            id="{{ $name }}"
-            name="{{ $name }}"
-            value="{{ html_entity_decode($selected_value) }}"
-            autocomplete="new-password"
-            placeholder="{{ $placeholder_label }}{{$required_symbol}}"
+            {{ $attributes->class(["bw-input peer $is_required $name $placeholder_color $size"])->merge([
+                'type' => $type,
+                'id' => $name,
+                'name' => $name,
+                'value' => html_entity_decode($selected_value),
+                'autocomplete' => "new-password",
+                'placeholder' => $placeholder_label.$required_symbol,
+            ]) }}
             @if($error_message != '')
                 data-error-message="{{$error_message}}"
             data-error-inline="{{$show_error_inline}}"

resources/views/components/select.blade.php

@@ -164,7 +164,8 @@
     }
 </style>
 <div class="relative bw-select bw-select-{{$input_name}} @if($add_clearing) mb-3 @endif"
-     data-multiple="{{$multiple}}" data-type="{{ $data !== 'manual' ? 'dynamic' : 'manual'}}"
+     data-multiple="{{$multiple}}" data-required="{{$required?'true':'false'}}"
+     data-type="{{ $data !== 'manual' ? 'dynamic' : 'manual'}}"
      @if(!empty($filter)) data-filter="{{ $filter}}" @endif
      @if($data == 'manual' && $selected_value != '') data-selected-value="{{implode(',',$selected_value)}}" @endif>
     <div tabindex="0"
@@ -237,5 +238,5 @@ class="bw-{{$input_name}} @if($required) required @endif"
     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>