Merge pull request #52 from mkocansey/development

Updated component/code to add success icon

src/resources/assets/compiled/js/helpers.js

@@ -117,6 +117,10 @@ showModal = (element) => { unhide(`.bw-${element}-modal`); }
 
 hideModal = (element) => { hide(`.bw-${element}-modal`); }
 
+showButtonSpinner = (element) => { unhide(`${element} .bw-spinner`); }
+
+hideButtonSpinner = (element) => { hide(`${element} .bw-spinner`); }
+
 hide = (element, elementIsDomObject=false) => { 
     if( (! elementIsDomObject && dom_el(element) != null) || (elementIsDomObject && element != null)){
         changeCss(element, 'hidden', 'add', elementIsDomObject); 

src/resources/views/components/centered-content.blade.php

@@ -10,7 +10,11 @@
         'tiny' => 'md'
     ]
 ])
+@php
+    $sizes = ['omg','xxl','xl','big','medium','small','tiny'];
+    if(! in_array($size, $sizes)) dd('refer to centered-content/docs for approved sizes. https://bladewindui.com/component/centered-content');
+@endphp
 <div class="max-w-md max-w-lg max-w-2xl max-w-3xl max-w-4xl max-w-6xl max-w-7xl "></div>
-<div class="max-w-{{$width[$size]}} mx-auto">
+<div {{ $attributes->merge(['class' => "max-w-$width[$size] mx-auto"]) }}>
     {{ $slot }}
 </div>

src/resources/views/components/code.blade.php

@@ -26,7 +26,7 @@
 @endphp
 
 <div class="dv-{{$name}} relative">
-    <div class="flex">
+    <div class="flex {{$name}}-boxes">
         <div class="flex space-x-3 mx-auto">
             @for ($x = 0; $x < $total_digits; $x++)
                 <x-bladewind::input 
@@ -35,15 +35,20 @@
                     add_clearing="false" 
                     onkeydown="hidePinError('{{$name}}')"
                     onkeyup="movePinNext('{{$name}}', {{$x}}, {{$total_digits}}, '{{$on_verify}}', event)"
-                    class="w-14 text-center text-xl font-light text-black dark:text-white {{$name}}-pin-code {{$name}}-pcode{{$x}}" 
+                    class="w-14 shadow-sm text-center text-xl font-light text-black dark:text-white {{$name}}-pin-code {{$name}}-pcode{{$x}}" 
                     maxlength="1" />
             @endfor
         </div>
     </div>
     <div class="bw-{{$name}}-pin-error text-center text-sm text-red-500 my-6 hidden">{!! $error_message !!}</div>
-    <div class="bg-white/20 absolute w-full text-center hidden top-0 py-4 bw-{{$name}}-pin-spinner">
+    <div class="bg-white/90 absolute w-full text-center hidden top-0 py-4 bw-{{$name}}-pin-spinner">
         <x-bladewind::spinner />
     </div>
+    <div class="bg-white/90 absolute w-full text-center hidden top-0 py-1 bw-{{$name}}-pin-valid">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-500 mx-auto" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+        </svg>
+    </div>
 </div>
 <x-bladewind::input type="hidden" name="{{$name}}" />
 
@@ -75,17 +80,26 @@ class="w-14 text-center text-xl font-light text-black dark:text-white {{$name}}-
     }
 
     showPinError = (name) => { unhide(`.bw-${name}-pin-error`); }
+
+    hidePinError = (name) => { hide(`.bw-${name}-pin-error`); }
     
     showSpinner = (name) => { 
+        hide(`.bw-${name}-pin-valid`); 
         unhide(`.bw-${name}-pin-spinner`); 
         dom_el(`.${name}-pcode0`).focus(); 
         dom_el(`.${name}-pcode0`).blur(); 
     }
     
-    hidePinError = (name) => { hide(`.bw-${name}-pin-error`); }
-
     hideSpinner = (name) => { hide(`.bw-${name}-pin-spinner`); }
     
+    showPinSuccess = (name) => { 
+        hide(`.bw-${name}-pin-spinner`); 
+        unhide(`.bw-${name}-pin-valid`); 
+        dom_el(`.${name}-pcode0`).focus(); 
+        dom_el(`.${name}-pcode0`).blur(); 
+        //changeCss(`.${name}-boxes`, ''); 
+    }
+    
     setFocus = (name) => { dom_el(`.${$name}-pcode0`).focus(); }
 
 </script>

src/resources/views/components/datepicker.blade.php

@@ -10,7 +10,7 @@
     // accepted formats are yyyy-mm-dd, mm-dd-yyyy, dd-mm-yyyy, D d M, Y
     'format' => 'yyyy-mm-dd',
     // text to display in the label that identifies the input field
-    'label' => 'Date',
+    'label' => '',
     // placeholder text to display if datepicker is empty
     'placeholder' => 'Select a date',
     // is the value of the date field required? used for form validation. default is false
@@ -88,7 +88,7 @@ class="bw-datepicker bw-input block w-full peer {{$name}} {{$is_required}}"
             type="text" 
             id="dtp-{{ $name }}"
             max_date="today" 
-            is_datepicker="true"
+            label="{{ ($has_label == 'true') ? $label : '' }}"
             placeholder="{{ $placeholder }}{{$required_symbol}}" />
 
         <div class="bg-white dark:bg-slate-600 mt-12 p-4 absolute top-0 left-0 z-50 shadow-md" style="width: 17rem" 
@@ -109,11 +109,11 @@ class="bw-datepicker bw-input block w-full peer {{$name}} {{$is_required}}"
                 </svg>
             </button>
             <button type="button" class="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer hover:bg-gray-100 p-1 rounded-full" @click="if (month == 11) {
-                                            month = 0; 
-                                            year++;
-                                        } else {
-                                            month++; 
-                                        } getNoOfDays()">
+                    month = 0; 
+                    year++;
+                } else {
+                    month++; 
+                } getNoOfDays()">
                 <svg class="h-6 w-6 text-gray-400 inline-flex" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                 </svg>
@@ -150,53 +150,65 @@ class="bw-datepicker bw-input block w-full peer {{$name}} {{$is_required}}"
     <div class="grid grid-cols-2 gap-2">
         <div>
             <x-bladewind::datepicker 
-                name="{{ $name }}-1" type="single" placeholder="{{$date_from_label}}" 
-                default_date="{{ $default_date_from??'' }}" required="{{ $required }}" 
-                label="{{$date_from_label}}" format="{{$format}}" />
+                name="{{ $name }}-1" 
+                type="single" 
+                placeholder="{{$date_from_label}}" 
+                default_date="{{ $default_date_from??'' }}" 
+                required="{{ $required }}" 
+                has_label="{{$has_label}}"
+                label="{{$date_from_label}}" 
+                format="{{$format}}" />
         </div>
         <div>
             <x-bladewind::datepicker 
-                name="{{ $name }}-2" type="single" placeholder="{{$date_to_label}}" 
-                default_date="{{ $default_date_to??'' }}" required="{{ $required }}" 
-                label="{{$date_to_label}}}" format="{{$format}}" />
+                name="{{ $name }}-2" 
+                type="single" 
+                placeholder="{{$date_to_label}}" 
+                default_date="{{ $default_date_to??'' }}" 
+                required="{{ $required }}" 
+                has_label="{{$has_label}}"
+                label="{{$date_to_label}}}" 
+                format="{{$format}}" />
         </div>
     </div>
 @endif
+@once
 <script>
-    january = '{{ __('datepicker.JAN') }}';
-    february = '{{ __('datepicker.FEB') }}';
-    march = '{{ __('datepicker.MAR') }}';
-    april = '{{ __('datepicker.APR') }}';
-    may = '{{ __('datepicker.MAY') }}';
-    june = '{{ __('datepicker.JUN') }}';
-    july = '{{ __('datepicker.JUL') }}';
-    august = '{{ __('datepicker.AUG') }}';
-    september = '{{ __('datepicker.SEP') }}';
-    october = '{{ __('datepicker.OCT') }}';
-    november = '{{ __('datepicker.NOV') }}';
-    december = '{{ __('datepicker.DEC') }}';
+    const january = '{{ __('datepicker.JAN') }}';
+    const february = '{{ __('datepicker.FEB') }}';
+    const march = '{{ __('datepicker.MAR') }}';
+    const april = '{{ __('datepicker.APR') }}';
+    const may = '{{ __('datepicker.MAY') }}';
+    const june = '{{ __('datepicker.JUN') }}';
+    const july = '{{ __('datepicker.JUL') }}';
+    const august = '{{ __('datepicker.AUG') }}';
+    const september = '{{ __('datepicker.SEP') }}';
+    const october = '{{ __('datepicker.OCT') }}';
+    const november = '{{ __('datepicker.NOV') }}';
+    const december = '{{ __('datepicker.DEC') }}';
 
-    monday = '{{ __('datepicker.MON') }}';
-    tuesday = '{{ __('datepicker.TUE') }}';
-    wednesday = '{{ __('datepicker.WED') }}';
-    thursday = '{{ __('datepicker.THU') }}';
-    friday = '{{ __('datepicker.FRI') }}';
-    saturday = '{{ __('datepicker.SAT') }}';
-    sunday = '{{ __('datepicker.SUN') }}';
+    const monday = '{{ __('datepicker.MON') }}';
+    const tuesday = '{{ __('datepicker.TUE') }}';
+    const wednesday = '{{ __('datepicker.WED') }}';
+    const thursday = '{{ __('datepicker.THU') }}';
+    const friday = '{{ __('datepicker.FRI') }}';
+    const saturday = '{{ __('datepicker.SAT') }}';
+    const sunday = '{{ __('datepicker.SUN') }}';
 
-    MONTH_NAMES = [ 
+    const MONTH_NAMES = [ 
         january, february, march, april, may, june, july, august, 
         september, october, november, december,
     ];
-    MONTH_SHORT_NAMES = [ 
+    const MONTH_SHORT_NAMES = [ 
         january.substr(0,3), february.substr(0,3), march.substr(0,3),
         april.substr(0,3), may.substr(0,3), june.substr(0,3), july.substr(0,3),
         august.substr(0,3), september.substr(0,3), october.substr(0,3),
         november.substr(0,3), december.substr(0,3)
     ];
-    DAYS = [ 
+    const DAYS = [ 
         sunday.substr(0,3), monday.substr(0,3), tuesday.substr(0,3), wednesday.substr(0,3), 
         thursday.substr(0,3), friday.substr(0,3), saturday.substr(0,3)
     ];
 </script>
-<script src="{{ asset('bladewind/js/datepicker.js') }}"></script>
+<script src="{{ asset('bladewind/js/datepicker.js') }}"></script>
+@endonce

src/resources/views/components/dropdown.blade.php

@@ -190,4 +190,4 @@ class="bw-{{ $name }} {{ ($required == 'true') ? ' required' : '' }}"
 </div>
 
 <script>el_name = '{{ $name }}';</script>
-<script src="{{ asset('bladewind/js/dropdown.js') }}"></script>
+@once<script src="{{ asset('bladewind/js/dropdown.js') }}"></script>@endonce

src/resources/views/components/empty-state.blade.php

@@ -1,5 +1,6 @@
 @props([
     'image' => asset('bladewind/images/empty-state.svg'), 
+    'heading' => '',
     'button_label' => '', // button will not be displayed if no text is passed
     'buttonLabel' => '',
     'message' => '',   // message to display
@@ -14,12 +15,13 @@
     $button_label = $buttonLabel;
 @endphp
 <div class="text-center px-4 pb-10 bw-empty-state {{$class}}">
-    @if($show_image == 'true')<img src="{{ $image }}" class="h-52 mx-auto" />@endif
-    @if($message != '')<div class="text-gray-500/80 text-sm pt-6 px-4">{!!$message!!}</div>@endif
+    @if($show_image == 'true')<img src="{{ $image }}" class="h-52 mx-auto mb-3" />@endif
+    @if($heading != '')<div class="text-gray-600 text-xl pt-3 px-4 font-light">{!!$heading!!}</div>@endif
+    @if($message != '')<div class="text-slate-600/70 text-sm pt-2 px-6">{!!$message!!}</div>@endif
     <div class="pt-2">{!! $slot !!}</div>
     @if($button_label != '')
         <x-bladewind::button 
             onclick="{!!$onclick!!}" class="block mx-auto my-4"
-            size="small">{{$button_label}}</x-bladewind::button>
+            size="tiny">{{$button_label}}</x-bladewind::button>
     @endif
 </div>

src/resources/views/components/input.blade.php

@@ -39,6 +39,11 @@
     // for numeric input only: should the numbers include dots
     'with_dots' => 'true',
     'withDots' => 'true',
+
+    'has_label' => 'false',
+    'hasLabel' => 'false',
+    'is_datepicker' => 'false',
+    'isDatepicker' => 'false',
 ])
 @php
     // reset variables for Laravel 8 support
@@ -49,17 +54,19 @@
     $show_error_inline = $showErrorInline;
     $error_heading = $errorHeading;
     $with_dots = $withDots;
+    $has_label = $hasLabel;
+    $is_datepicker = $isDatepicker;
     //--------------------------------------------------------------------
 
     $name = preg_replace('/[\s-]/', '_', $name);
     $required_symbol = ($label == '' && $required == 'true') ? ' *' : '';
     $is_required = ($required == 'true') ? 'required' : '';
-    $placeholder_color = ($show_placeholder_always=='true' || $label == '') ? '' : 'placeholder-transparent'; //($label !== '') ? 'placeholder-transparent' : '';
+    $placeholder_color = ($show_placeholder_always=='true' || $label == '') ? '' : 'placeholder-transparent';
     $placeholder_label = ($show_placeholder_always=='true') ? $placeholder : (($label !== '') ? $label : $placeholder);
     $with_dots = ($with_dots == 'true') ? 1 : 0;
 @endphp
 
-<div class="relative w-full @if($add_clearing == 'true') mb-4 @endif">
+<div class="relative w-full @if($add_clearing == 'true') mb-3 @endif">
     <input 
         {{ $attributes->merge(['class' => "bw-input w-full border border-slate-300/50 dark:text-white dark:border-slate-700 dark:bg-slate-600 dark:focus:border-slate-900 peer $is_required $name $placeholder_color"]) }}
         type="{{ $type }}" 
@@ -78,9 +85,13 @@
     @if($error_message != '')<div class="text-red-500 text-xs p-1 {{ $name }}-inline-error hidden">{{$error_message}}</div>@endif
     @if($label !== '')
         <label for="{{ $name }}" class="form-label bg-white text-blue-900/40 dark:bg-slate-600 dark:text-gray-300 dark:rounded-sm dark:px-2 dark:peer-focus:pt-1" onclick="dom_el('.{{$name}}').focus()">{!! $label !!} 
-            @if($required == 'true') <span class="text-red-300" style="zoom:90%"><svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 inline" viewBox="0 0 20 20" fill="currentColor">
-  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-</svg></span>@endif
+            @if($required == 'true') 
+            <span class="text-red-300" style="zoom:90%">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 inline" viewBox="0 0 20 20" fill="currentColor">
+                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                </svg>
+            </span>
+            @endif
         </label>
     @endif
 </div>

src/resources/views/components/textarea.blade.php

@@ -37,7 +37,7 @@
     $is_required = ($required == 'true') ? 'required' : '';
     $placeholder_color = ($label !== '') ? 'placeholder-transparent' : '';
 @endphp
-<div class="relative w-full @if($add_clearing == 'true') mb-2 @endif">
+<div class="relative w-full @if($add_clearing == 'true') mb-3 @endif">
     <textarea {{ $attributes->merge(['class' => "bw-input w-full border border-slate-300/50 dark:text-white dark:border-slate-700 dark:bg-slate-600 dark:focus:border-slate-900 peer $is_required $name $placeholder_color"]) }} 
         id="{{ $name }}" 
         name="{{ $name }}"