Merge pull request #2 from mkocansey/main

Update dev branch

src/resources/assets/compiled/js/dropdown.js

@@ -1,4 +1,5 @@
-dom_el(`.${el_name} .dropdown`).addEventListener('click', function (e){
+var dropdownIsOpen = false;
+dom_el(`.${el_name} .bw-dropdown`).addEventListener('click', function (e){
     this.nextElementSibling.classList.toggle('hidden');
     dropdownIsOpen = true;
     e.stopImmediatePropagation();
@@ -9,15 +10,16 @@ dom_els(`.${el_name} .dropdown-items>div.dd-item`).forEach((el) => {
         let value = el.getAttribute('data-value');
         let label = el.getAttribute('data-label');
         let href = el.getAttribute('data-href');
+        let href_target = el.getAttribute('data-href-target');
         let parent_tag = el.getAttribute('aria-parent');
         let user_function = el.getAttribute('aria-user-function');
         if(parent_tag != null) {
-            dom_el(`.input-${parent_tag}`).value = value;
-            dom_el(`.${parent_tag}>button>label`).innerHTML = el.innerHTML;
+            dom_el(`.bw-${parent_tag}`).value = value;
+            dom_el(`.${parent_tag}>button>label`).innerHTML = `<div class="flex justify-center">${el.innerHTML}</div>`;
             el.parentElement.parentElement.classList.toggle('hidden');
 
             if(href !== '' && href !== null && href !== undefined) {
-                location.href = href;
+                (href_target == 'self') ? location.href = href : window.open(href, 'bladewind');
                 e.stopImmediatePropagation();
             }
             if(user_function !== '') callUserFunction(`${user_function}('${value}', '${label}')`);

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

@@ -9,9 +9,9 @@ var     notification_timeout,
         delete_obj;
 var     dropdownIsOpen = false;
 
-dom_el = (element) => { return document.querySelector(element);  }
+dom_el = (element) => { return (document.querySelector(element) != null) ? document.querySelector(element) : false;  }
 
-dom_els = function(element) { return document.querySelectorAll(element);  }
+dom_els = function(element) { return (document.querySelectorAll(element).length>0) ? document.querySelectorAll(element) : false;  }
 
 validateForm = function(element) {
     let has_error = 0;
@@ -113,35 +113,49 @@ stringContains = function(str, keyword) {
 doNothing = function() { }
 
 changeCssForDomArray = function(els, css, mode='add') { 
-    dom_els(els).forEach((el) => { 
-        changeCss(el, css, mode, true);
-    });
+    if(dom_els(els).length > 0){
+        dom_els(els).forEach((el) => { 
+            changeCss(el, css, mode, true);
+        });
+    }
 }
 
 changeCss = function(el, css, mode='add', elIsDomObject=false) { 
     // css can be comma separated
     // if elIsDomObject dont run it through dom_el
-    if(css.indexOf(',') != -1 || css.indexOf(' ') != -1) {
-        css = css.replace(/\s+/g, '').split(',');
-        for(let classname of css) {
-            (mode == 'add') ?
-                ((elIsDomObject) ? el.classList.add(classname.trim()) : dom_el(el).classList.add(classname.trim())) :
-                ((elIsDomObject) ? el.classList.remove(classname.trim()) : dom_el(el).classList.remove(classname.trim()));
+    if( (! elIsDomObject && dom_el(el) != null) || (elIsDomObject && el != null)){
+        if(css.indexOf(',') != -1 || css.indexOf(' ') != -1) {
+            css = css.replace(/\s+/g, '').split(',');
+            for(let classname of css) {
+                (mode == 'add') ?
+                    ((elIsDomObject) ? el.classList.add(classname.trim()) : dom_el(el).classList.add(classname.trim())) :
+                    ((elIsDomObject) ? el.classList.remove(classname.trim()) : dom_el(el).classList.remove(classname.trim()));
+            }
+        } else {
+            if( (! elIsDomObject && dom_el(el).classList != undefined) || (elIsDomObject && el.classList != undefined)){
+                (mode == 'add') ?
+                    ((elIsDomObject) ? el.classList.add(css) : dom_el(el).classList.add(css)) : 
+                    ((elIsDomObject) ? el.classList.remove(css) : dom_el(el).classList.remove(css));
+            }
         }
-    } else {
-        (mode == 'add') ?
-            ((elIsDomObject) ? el.classList.add(css) : dom_el(el).classList.add(css)) : 
-            ((elIsDomObject) ? el.classList.remove(css) : dom_el(el).classList.remove(css))
     }
 }
 
 showModal = function(el) { unhide(`.bw-${el}-modal`); }
 
 hideModal = function(el) { hide(`.bw-${el}-modal`); }
 
-hide = function(el, elIsDomObject=false) { changeCss(el, 'hidden', 'add', elIsDomObject); }
+hide = function(el, elIsDomObject=false) { 
+    if( (! elIsDomObject && dom_el(el) != null) || (elIsDomObject && el != null)){
+        changeCss(el, 'hidden', 'add', elIsDomObject); 
+    }
+}
 
-unhide = function(el, elIsDomObject=false) { changeCss(el, 'hidden', 'remove', elIsDomObject); }
+unhide = function(el, elIsDomObject=false) { 
+    if( (! elIsDomObject && dom_el(el) != null) || (elIsDomObject && el != null)){ 
+        changeCss(el, 'hidden', 'remove', elIsDomObject); 
+    }
+}
 
 animateCSS = (element, animation) =>
   new Promise((resolve, reject) => {

src/resources/assets/raw/css/button.css

@@ -16,9 +16,9 @@
     }
     .bw-button.small {
         @apply 
-            py-2
-            px-4
-            !text-xs
+            py-3
+            px-6
+            !text-[11px] 
     }
     .bw-button.tiny {
         @apply 

src/resources/assets/raw/css/table.css

@@ -1,11 +1,14 @@
 @layer components {
-    .bw-table.divided tr{
-        @apply  border-b border-gray-200/50
+    .bw-table.divided tr {
+        @apply  border-t border-gray-200 border-b-8 border-b-gray-200/40
     }
-    .bw-table.striped tr:nth-child(even){
-        @apply bg-gray-50 hover:bg-yellow-50
+    .bw-table.divided.thin tr {
+        @apply  border-t border-gray-200 border-b border-b-gray-200/60
     }
-    .bw-table th {
+    .bw-table.striped tr:nth-child(even)>td, .bw-table.striped tr:nth-child(even):hover>td{
+        @apply bg-gray-50
+    }
+    thead>tr>th {
         @apply
         bg-white
         text-black/80
@@ -15,17 +18,40 @@
         font-semibold
         tracking-widest
         px-5 py-4
-        border-t border-b border-gray-200
+        border-t border-gray-200/20
     }
-    .bw-table>tbody>tr>td {
+    tr>td {
         @apply
         p-5
-        align-top 
-        leading-8 text-gray-500
+        align-top
+        leading-8 text-gray-500 bg-white
     }
-    .bw-table>tr {
-        @apply
-        bg-white hover:bg-yellow-50
+    .bw-table td.double-underline {
+        @apply border-b-4 border-double border-black/30
+    }
+    table.with-hover-effect tr:hover>td:first-child {
+        @apply bg-white border-l-2 border-l-green-300
+    }
+    table.with-hover-effect tr:hover>td:last-child {
+        @apply bg-white border-r-2 border-r-green-300
+    }
+    table.with-hover-effect tr>td:first-child {
+        @apply bg-white border-l-2 border-l-white
+    }
+    table.with-hover-effect tr>td:last-child {
+        @apply bg-white border-r-2 border-r-white
+    }
+    table.with-hover-effect tr:nth-child(even)>td:first-child {
+        @apply border-l-2 border-l-gray-50
+    }
+    table.with-hover-effect tr:nth-child(even)>td:last-child {
+        @apply border-r-2 border-r-gray-50
+    }
+    table.with-hover-effect tr:nth-child(even):hover>td:first-child {
+        @apply border-l-2 border-l-green-300
+    }
+    table.with-hover-effect tr:nth-child(even):hover>td:last-child {
+        @apply border-r-2 border-r-green-300
     }
 
 }

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

@@ -29,7 +29,7 @@
 ])
 
 <span class="!border-red-400 hidden"></span>
-<div class="w-full notification flex p-3 {{$color[$shade][$type]}} {{$color[$shade][$type.'_text']}} {{$css}}">
+<div class="w-full bw-alert flex p-3 {{$color[$shade][$type]}} {{$color[$shade][$type.'_text']}} {{$css}}">
     @if($show_icon == 'true')
         <div>
             @if($type == 'error')
@@ -54,7 +54,7 @@
     <div class="grow pl-2 pr-5">{{ $slot }}</div>
     @if($show_close_icon == 'true')
         <div class="text-right">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline cursor-pointer ml-3" viewBox="0 0 20 20" fill="currentColor" onclick="javascript:hide('.notification')">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline cursor-pointer ml-3" viewBox="0 0 20 20" fill="currentColor" onclick="this.parentElement.parentElement.style.display='none'">
                 <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
             </svg>
         </div>

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

@@ -1,5 +1,5 @@
 @props([ 
-    'url' => '',
+    'image' => '',
     'alt' => 'image',
     'size' => 'regular',
     'css' => 'mr-2 mt-2',
@@ -14,9 +14,9 @@
         'omg' => '28'
     ]
 ])
-@php  $avatar = ($url === '') ? asset('bladewind/images/avatar.png') : $url; @endphp
+@php  $avatar = ($image === '') ? asset('bladewind/images/avatar.png') : $image; @endphp
 
-<span class="w-6 w-8 w-10 w-12 w-16 w-20 w-28 h-6 h-8 h-10 h-12 h-16 h-20 h-28"></span>
-<div class="w-{{ $sizing[$size] }} h-{{ $sizing[$size] }} inline-block rounded-full ring-2 ring-gray-200 ring-offset-2 overflow-hidden bg-gray-50 {{$css}}@if($stacked=='true') -ml-5 @endif">
+<span class="w-6 w-8 w-10 w-12 w-16 w-20 w-28 h-6 h-8 h-10 h-12 h-16 h-20 h-28 hidden"></span>
+<div class="w-{{ $sizing[$size] }} h-{{ $sizing[$size] }} inline-block rounded-full ring-2 ring-gray-200 ring-offset-2 overflow-hidden bg-gray-50 {{$css}} @if($stacked=='true') -ml-5 @endif">
     <img src="{{ $avatar }}" alt="{{ $alt }}" class="object-cover object-top" />
 </div>

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

@@ -7,7 +7,7 @@
     'type' => 'checkbox',
     'css' => '',
 ])
-@php $name = str_replace(' ','_', str_replace('-', '_',$name)); @endphp
+@php $name = preg_replace('/[\s-]/', '_', $name); @endphp
 
 <label 
     class="inline-flex items-center cursor-pointer text-sm @if($disabled=='true') opacity-60 @endif {{$css}}">

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

@@ -11,15 +11,17 @@
     'placeholder' => 'Select a date',
     // is the value of the date field required? used for form validation. default is false
     'required' => 'false',
+
     // used for range datepickers
-    'date_from' => '',
-    'date_to' => '',
+    'default_date_from' => '',
+    'default_date_to' => '',
+    'date_from_label' => 'From',
+    'date_to_label' => 'To',
     'has_label' => 'false',
     'css' => '',
 ])
 @php
-    $name = str_replace(' ', '_', $name);
-    $name = str_replace('-', '_', $name);
+    $name = preg_replace('/[\s-]/', '_', $name);
     $default_date = ($default_date != '') ? $default_date : '';
     $required_symbol = ($has_label == 'false' && $required == 'true') ? ' *' : '';
 @endphp
@@ -111,15 +113,15 @@ class="bw-datepicker bw-input block w-full peer {{ $name}} @if($required == 'tru
     <div class="grid grid-cols-2 gap-2">
         <div>
             <x-bladewind::datepicker 
-                name="{{ $name }}-1" type="single" placeholder="From" 
-                default_date="{{ $date_from??'' }}" required="{{ $required }}" 
-                label="From"></x-bladewind::datepicker>
+                name="{{ $name }}-1" type="single" placeholder="{{$date_from_label}}" 
+                default_date="{{ $default_date_from??'' }}" required="{{ $required }}" 
+                label="{{$date_from_label}}"></x-bladewind::datepicker>
         </div>
         <div>
             <x-bladewind::datepicker 
-                name="{{ $name }}-2" type="single" placeholder="To" 
-                default_date="{{ $date_to??'' }}" required="{{ $required }}" 
-                label="To"></x-bladewind::datepicker>
+                name="{{ $name }}-2" type="single" placeholder="{{$date_to_label}}" 
+                default_date="{{ $default_date_to??'' }}" required="{{ $required }}" 
+                label="{{$date_to_label}}}"></x-bladewind::datepicker>
         </div>
     </div>
 @endif