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

Compiled overwriting quill css
mkocansey · Jun 17, 2024 · 8d4ecd9 · 8d4ecd9
2 parents 31fd705 + fd72ae0
commit 8d4ecd9
Show file tree

Hide file tree

Showing 25 changed files with 179 additions and 78 deletions.
diff --git a/config/bladewind.php b/config/bladewind.php
@@ -316,6 +316,7 @@
     */
     'select' => [
         'placeholder' => 'Select One',
+        'label' => null,
         'add_clearing' => true,
         'max_error_message' => 'Please select only %s items',
         'modular' => 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
@@ -53,7 +53,7 @@ var validateForm = (form) => {
     let BreakException = {};
     try {
         domEls(`${form} .required`).forEach((el) => {
-            changeCss(el, '!border-red-400', 'remove', true);
+            changeCss(el, '!border-red-500', 'remove', true);
             if (el.value === '') {
                 let el_name = el.getAttribute('name');
                 let el_parent = el.getAttribute('data-parent');
@@ -194,7 +194,7 @@ var changeCssForDomArray = (elements, css, mode = 'add') => {
 
 /**
  * Modify the css for a DOM element.
- * @param {string} element - The class name of ID of the DOM element to modify.
+ * @param {boolean|Element} element - The class name of ID of the DOM element to modify.
  * @param {string} css - Comma separated list of css classes to apply to <element>.
  * @param {string} mode - Add|Remove. Determines if <css> should be added or removed from <element>.
  * @param {boolean} elemntIsDomObject - If true, <element> will not be treated as a string but DOM element.

diff --git a/public/js/select.js b/public/js/select.js
@@ -89,6 +89,19 @@ class BladewindSelect {
         });
     }
 
+    moveLabel = (direction = 'up') => {
+        let placeholderElement = domEl(`${this.rootElement} .placeholder`);
+        let labelElement = domEl(`${this.rootElement} .placeholder .form-label`);
+        if (labelElement) {
+            if (direction === 'up') {
+                changeCss(labelElement, '!top-4', 'remove', true);
+            } else {
+                changeCss(labelElement, '!top-4', 'add', true);
+            }
+            unhide(placeholderElement, true);
+        }
+    }
+
     setValue = (item) => {
         this.selectedValue = item.getAttribute('data-value');
         // let selectedValue = item.getAttribute('data-value');
@@ -108,6 +121,7 @@ class BladewindSelect {
             dom_el(this.displayArea).innerText = selectedLabel;
             input.value = this.selectedValue;
             unhide(svg, true);
+            this.moveLabel();
             if (this.canClear) {
                 unhide(`${this.clickArea} .reset`);
                 dom_el(`${this.clickArea} .reset`).addEventListener('click', (e) => {
@@ -127,6 +141,7 @@ class BladewindSelect {
                 } else {
                     showNotification('', this.maxSelectionError, 'error');
                 }
+                this.moveLabel();
             }
             this.scrollbars();
         }
@@ -148,6 +163,7 @@ class BladewindSelect {
                 input.value = '';
                 hide(this.displayArea);
                 hide(`${this.clickArea} .reset`);
+                this.moveLabel('down');
             } else {
                 if (dom_el(`${this.displayArea} span.bw-sp-${this.selectedValue}`)) {
                     let keyword = `(,?)${this.selectedValue}`;
@@ -157,6 +173,7 @@ class BladewindSelect {
                     if (dom_el(this.displayArea).innerText === '') {
                         unhide(`${this.rootElement} .placeholder`);
                         hide(this.displayArea);
+                        this.moveLabel('down');
                     }
                 }
             }

diff --git a/resources/assets/css/app.css b/resources/assets/css/app.css
@@ -1,10 +1,10 @@
 @import './button.css';
-@import './dropdown.css';
 @import './input.css';
-@import './popup.min.css';
-@import './side-nav.css';
 @import './table.css';
 @import './tabs.css';
+@import './dropdown.css';
+@import './popup.min.css';
+@import './side-nav.css';
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";

diff --git a/resources/assets/css/input.css b/resources/assets/css/input.css
@@ -5,7 +5,7 @@
         !outline-none
         !ring-0
         border-2
-        w-full text-slate-600 border-slate-300/50 dark:text-dark-300 dark:border-dark-600 dark:bg-transparent /*dark-800*/
+        w-full text-slate-600 dark:text-dark-300 border-slate-300/50 dark:border-dark-600 dark:bg-transparent /*dark-800*/
         focus:outline-none
         focus:border-2
         focus:border-primary-500 dark:focus:border-dark-500 dark:placeholder-dark-400/60 transition-all
@@ -65,4 +65,25 @@
     .prefix svg, .suffix svg {
         @apply ltr:!mr-1 rtl:!ml-1 w-6 h-6 dark:text-dark-500
     }
+
+    .ql-toolbar.ql-snow {
+        @apply !rounded-t-lg !border-2 !border-slate-300/50 dark:!border-dark-600 dark:!bg-transparent
+    }
+
+    .ql-toolbar.ql-snow .ql-stroke, .ql-stroke.ql-thin {
+        @apply dark:!text-dark-500 dark:!stroke-dark-500
+    }
+
+    .ql-snow.ql-toolbar button:hover .ql-stroke {
+        @apply !stroke-primary-500
+    }
+
+    .ql-container.ql-snow {
+        @apply !rounded-b-lg !border-2 !border-slate-300/50 dark:!border-dark-600 dark:!bg-transparent
+    }
+
+    .ql-editor.ql-blank::before {
+        @apply !text-slate-300 dark:!text-dark-400/60 !not-italic
+    }
+
 }
diff --git a/resources/assets/css/table.css b/resources/assets/css/table.css
@@ -1,18 +1,20 @@
 @layer components {
     .bw-table.divided tr:not(:has(th),:last-child) {
-        @apply border-b-8 border-gray-200/30 dark:border-dark-700 border-t border-t-gray-200/40 dark:border-b-dark-700
+        @apply border-b-8 border-gray-200/15 dark:border-dark-700 border-t border-t-gray-200/40 dark:border-b-dark-700
     }
 
     .bw-table.divided.thin tr {
         @apply border-y border-t-gray-200 border-b-gray-200/60 dark:border-t-dark-800 dark:border-b-dark-600/30
     }
 
     .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 border-x-2 border-gray-50/10 dark:border-dark-800/10
+        @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
+        /*dark:bg-dark-600/40*/
     }
 
     .bw-table.striped tr:nth-child(even) > td, .bw-table.striped tr:nth-child(even):hover > td {
-        @apply bg-slate-50 dark:bg-dark-800/60
+        @apply bg-slate-100/70 dark:bg-dark-800/15
+        /*dark:bg-dark-600/20*/
     }
 
     .bw-table.celled th, .bw-table.celled td {
@@ -21,14 +23,14 @@
 
     .bw-table thead > tr > th {
         @apply
-        bg-white dark:bg-dark-900/50
+        bg-white dark:bg-dark-800/40
         text-black/80 dark:text-dark-400
         text-xs
         text-left
         font-semibold
         tracking-widest
         px-3 py-4
-        border-t border-t-gray-200/30 dark:border-t-dark-800
+        border-t border-t-gray-200/30 dark:border-t-transparent
     }
 
     .bw-table.celled th:first-child, .bw-table.celled td:first-child {
@@ -64,15 +66,15 @@
     }
 
     .bw-table.with-hover-effect tr:hover > td {
-        @apply bg-gray-100/40 dark:bg-dark-800/60
+        @apply bg-gray-100/40 dark:bg-dark-600/30
     }
 
     .bw-table.with-hover-effect tr:hover > td:first-child {
-        @apply border-l-2 border-l-slate-400 dark:border-l-dark-600
+        @apply border-l-2 border-l-slate-400 dark:border-l-dark-500
     }
 
     .bw-table.with-hover-effect tr:hover > td:last-child {
-        @apply border-r-2 border-r-slate-400 dark:border-r-dark-600
+        @apply border-r-2 border-r-slate-400 dark:border-r-dark-500
     }
 
     .bw-table.selectable > tbody > tr {

diff --git a/resources/assets/css/tabs.css b/resources/assets/css/tabs.css
@@ -1,7 +1,7 @@
 @layer components {
 
     .bw-tab {
-        @apply border-b border-gray-200 dark:border-gray-700
+        @apply border-b border-gray-200 dark:border-dark-600/80
     }
 
     .bw-tab.simple {
@@ -89,7 +89,7 @@
     }
 
     .bw-tab.system .atab span.is-active {
-        @apply !border-b-2 !border-b-white dark:!border-b-dark-800 mb-[-2px]
+        @apply !border-b-2 !border-b-white dark:!border-b-dark-700 mb-[-2px]
     }
 
     .bw-tab.system.primary {
@@ -121,7 +121,7 @@
     }
 
     .bw-tab.system.gray {
-        @apply border-b border-gray-500 dark:border-gray-700
+        @apply border-b border-gray-500 dark:border-gray-600
     }
 
     .bw-tab.system.pink {

diff --git a/resources/views/components/card.blade.php b/resources/views/components/card.blade.php
@@ -26,27 +26,29 @@
 ])
 @php
     // reset variables for Laravel 8 support
+    $compact = filter_var($compact, FILTER_VALIDATE_BOOLEAN);
     $has_shadow = filter_var($has_shadow, FILTER_VALIDATE_BOOLEAN);
     $hasShadow = filter_var($hasShadow, FILTER_VALIDATE_BOOLEAN);
     $reduce_padding = filter_var($reduce_padding, FILTER_VALIDATE_BOOLEAN);
-    $compact = filter_var($compact, FILTER_VALIDATE_BOOLEAN);
     $reducePadding = filter_var($reducePadding, FILTER_VALIDATE_BOOLEAN);
+    $hover_effect = filter_var($hover_effect, FILTER_VALIDATE_BOOLEAN);
     $has_border = filter_var($has_border, FILTER_VALIDATE_BOOLEAN);
     $is_contact_card = filter_var($is_contact_card, FILTER_VALIDATE_BOOLEAN);
     if ( !$hasShadow ) $has_shadow = $hasShadow;
     if ( $reducePadding ) {
         $reduce_padding = $reducePadding;
         $compact = $reduce_padding;
     }
+    $class = "bg-white dark:bg-dark-800/30 rounded-lg $class";
+    $contact_card_css =   ($is_contact_card) ? 'bw-contact-card' : 'bw-card';
+    $has_border_css =   ($has_border) ? 'border border-slate-200 dark:border-dark-600/60 focus:outline-none' : '';
+    $header_compact_css =   (!$header && ! $compact) ? 'p-8' : (($compact) ? 'p-4' : '');
+    $shadow_css =   ($has_shadow) ? 'shadow-sm shadow-slate-200/50 dark:shadow-dark-800/70' : '';
+    $hover_css =  ($hover_effect) ? 'hover:shadow-slate-400 hover:dark:shadow-dark-900 cursor-pointer' : '';
 @endphp
-<div class="@if($is_contact_card) bw-contact-card @else bw-card @endif bg-white dark:bg-dark-800/50 rounded-md {{ $class }}
-@if($has_border) border border-slate-200 border-opacity-95 dark:border-dark-600/30 focus:outline-none @endif
-@if(!$header && ! $compact) p-8 @elseif($compact) py-3 px-5 @endif
-@if($has_shadow) shadow-sm shadow-slate-200/50 dark:shadow-dark-800
-    @if($hover_effect) hover:shadow-mdÍ hover:dark:shadow-dark-800 cursor-pointer @endif
-@endif">
+<div {{ $attributes->merge([ 'class' => "$class $contact_card_css $has_border_css $header_compact_css $shadow_css $hover_css"]) }}>
     @if($header)
-        <div class="border-b border-gray-100/30 dark:border-dark-800/50">
+        <div class="border-b border-gray-100/30 dark:border-dark-600/60">
             {{ $header }}
         </div>
     @endif
@@ -57,7 +59,7 @@
         {{ $slot }}
     </div>
     @if($footer)
-        <div class="border-t border-gray-100/30 dark:border-dark-800/50">
+        <div class="border-t border-gray-100/30 dark:border-dark-600/60">
             {{$footer}}
         </div>
     @endif

diff --git a/resources/views/components/code.blade.php b/resources/views/components/code.blade.php
@@ -38,7 +38,7 @@
     $name = preg_replace('/[\s-]/', '_', $name);
     $mask = filter_var($mask, FILTER_VALIDATE_BOOLEAN);
 
-    $input_css = ($size !== 'big') ? " w-14 text-xl" : "w-[83px] text-5xl";
+    $input_css = ($size !== 'big') ? " w-14 text-xl" : "w-[75px] text-5xl";
     $cloak_size = ($size == 'big') ? " h-24" : "h-16";
 @endphp
 

diff --git a/resources/views/components/compile-for-tailwind.blade.php b/resources/views/components/compile-for-tailwind.blade.php
@@ -83,7 +83,9 @@
                             active:border-primary-600 active:border-secondary-600 active:border-blue-600 active:border-red-600
                             active:border-yellow-600 active:border-green-600 active:border-purple-600 active:border-orange-600
                             active:border-slate-600 active:border-gray-600 active:border-pink-600 active:border-cyan-600
-                            active:border-violet-600 active:border-indigo-600 active:border-fuchsia-600',
+                            active:border-violet-600 active:border-indigo-600 active:border-fuchsia-600
+
+                            focus:border-primary-500',
 
             'rings' =>      'ring-1 ring-2 ring-4 ring-8 focus:ring-1 focus:ring-2 focus:ring-4 focus:ring-8 focus:ring-black
                             focus:ring-primary-500 focus:ring-blue-500 focus:ring-red-500 focus:ring-yellow-500

diff --git a/resources/views/components/contact-card.blade.php b/resources/views/components/contact-card.blade.php
@@ -25,7 +25,7 @@ class="!p-5 {{$class}}"
         :has_shadow="$has_shadow"
         :has_border="$has_border"
         :is_contact_card="true"
-        :reduce_padding="true">
+        :compact="true">
     {{--<div class="bw-contact-card bg-white dark:bg-dark-800 pt-4 pb-6 pl-6 pr-4 rounded-md focus:outline-none {{ $class }}
     @if($has_border) border border-slate-200 border-opacity-95 dark:border-dark-700 @endif
     @if($has_shadow) shadow dark:shadow-dark-900/80

diff --git a/resources/views/components/datepicker.blade.php b/resources/views/components/datepicker.blade.php
@@ -160,10 +160,10 @@ class="bw-datepicker {{$class}}"
                     suffix_icon_css="text-slate-300"
                     required="{{$required}}"/>
 
-            <div class="bg-white dark:bg-dark-600 mt-12 p-4 absolute top-0 left-0 z-50 shadow-md rounded-lg"
+            <div class="bg-white dark:bg-dark-700 mt-12 p-4 absolute top-0 left-0 z-50 drop-shadow-md dark:border dark:border-dark-600/70 rounded-lg"
                  style="width: 17rem"
                  x-show.transition="showDatepicker" @click.away="showDatepicker = false">
-                <div class="flex justify-between items-center bg-primary-500 p-4 !-mx-4 !-mt-4 mb-4 rounded-tl-lg rounded-tr-lg">
+                <div class="flex justify-between items-center bg-primary-500 dark:bg-dark-800/50 p-4 !-mx-4 !-mt-4 mb-4 rounded-tl-lg rounded-tr-lg">
                     <div>
                         <button type="button"
                                 class="focus:outline-none focus:shadow-outline transition ease-in-out duration-100 inline-flex cursor-pointer py-1 pr-1 !-ml-1"
@@ -172,7 +172,7 @@ class="focus:outline-none focus:shadow-outline transition ease-in-out duration-1
                     month = 12;
                 } month--; getNoOfDays()">
                             <x-bladewind::icon name="arrow-left"
-                                               class="h-5 w-5 text-white/50 hover:text-white inline-flex rtl:!rotate-180"/>
+                                               class="size-5 text-white/50 hover:text-white inline-flex rtl:!rotate-180"/>
                         </button>
                     </div>
                     <div class="text-lg text-white/90 dark:text-gray-100 cursor-default">
@@ -189,7 +189,7 @@ class="focus:outline-none focus:shadow-outline transition ease-in-out duration-1
                     month++;
                 } getNoOfDays()">
                             <x-bladewind::icon name="arrow-right"
-                                               class="h-5 w-5 text-white/50 hover:text-white inline-flex rtl:!rotate-180"/>
+                                               class="size-5 text-white/50 hover:text-white inline-flex rtl:!rotate-180"/>
                         </button>
                     </div>
                 </div>
@@ -212,9 +212,9 @@ class="text-gray-500 tracking-wide dark:text-gray-400 font-medium text-center te
                             <div @click="getDateValue(date, '{{$format}}')" x-text="date"
                                  class="cursor-pointer text-center text-sm leading-8 rounded-md transition ease-in-out duration-100"
                                  :class="{
-                            'bg-primary-100 dark:bg-dark-700': isToday(date) == true,
-                            'text-gray-600 dark:text-gray-100 hover:bg-blue-200 hover:dark:bg-dark-500': isToday(date) == false && isSelectedDate(date) == false,
-                            'bg-primary-500 dark:bg-dark-700 text-white hover:bg-opacity-75': isSelectedDate(date) == true }">
+                            'bg-primary-100 dark:bg-dark-800': isToday(date) == true,
+                            'text-gray-600 dark:text-gray-100 hover:bg-primary-200 hover:dark:bg-dark-500': isToday(date) == false && isSelectedDate(date) == false,
+                            'bg-primary-600 dark:bg-dark-900 text-white hover:bg-opacity-75': isSelectedDate(date) == true }">
                             </div>
                         </div>
                     </template>

diff --git a/resources/views/components/dropmenu-item.blade.php b/resources/views/components/dropmenu-item.blade.php
@@ -21,7 +21,7 @@
 @endphp
 
 <div {{$attributes->merge(['data-item' => "true"])}}
-     class="flex align-middle text-gray-600 cursor-pointer dark:text-slate-300 w-full text-sm !text-left bw-item {{$class}}
+     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)
@@ -33,7 +33,8 @@ class="flex align-middle text-gray-600 cursor-pointer dark:text-slate-300 w-full
         @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 ">
     @if(!empty($icon) && !$header)
-        <x-bladewind::icon name="{!! $icon !!}" :dir="$dir" class="!h-4 !w-4 !mt-0.5 !text-gray-400  {{$icon_css}}"/>
+        <x-bladewind::icon name="{!! $icon !!}" :dir="$dir"
+                           class="!size-4 !mt-0.5 !text-gray-400 dark:!text-dark-500  {{$icon_css}}"/>
     @endif
     {!! $slot !!}
 </div>
diff --git a/resources/views/components/dropmenu.blade.php b/resources/views/components/dropmenu.blade.php
@@ -41,9 +41,8 @@ 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}} drop-shadow whitespace-nowrap
-             p-2 border border-transparent dark:border-dark-700 bw-items-list ring-1 ring-slate-800 ring-opacity-5 @if($divided) divide-y divide-slate-100 dark:divide-dark-600/90 @endif"
-             {{--        border-slate-200/80--}}
+        <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>

diff --git a/resources/views/components/filepicker.blade.php b/resources/views/components/filepicker.blade.php
@@ -40,8 +40,8 @@
     $image_file_types = [ "png", "jpg", "jpeg", "gif", "svg" ];
 @endphp
 <div class="border-gray-500"></div>
-<div class="relative px-2 py-3 border-2 border-dashed border-gray-300 dark:text-dark-300 dark:border-dark-600
-    dark:bg-dark-800 hover:dark:border-dark-700 text-center cursor-pointer rounded-md bw-fp-{{ $name }} @if($add_clearing) mb-3 @endif">
+<div class="relative px-2 py-3 border-2 border-dotted border-gray-300 hover:border-gray-400 dark:text-dark-300 dark:border-dark-600
+    dark:bg-transparent hover:dark:border-dark-500 text-center cursor-pointer rounded-md bw-fp-{{ $name }} @if($add_clearing) mb-3 @endif">
     <x-bladewind::icon name="document-text"
                        class="h-6 w-6 absolute z-20 left-4 rtl:!right-4 rtl:!left-[unset] text-gray-300 dark:text-dark-500"/>
     <x-bladewind::icon name="x-circle"

diff --git a/resources/views/components/list-view.blade.php b/resources/views/components/list-view.blade.php
@@ -8,6 +8,6 @@
     $compact = filter_var($compact, FILTER_VALIDATE_BOOLEAN);
 @endphp
 <ul role="list"
-    class="@if(!$transparent)bg-white dark:bg-slate-800/80 @endif divide-y divide-slate-100 dark:divide-slate-700/50 rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg {{$class}}">
+    class="@if(!$transparent)bg-white dark:bg-transparent @endif divide-y divide-slate-100 dark:divide-dark-600/50 rounded-tl-lg rounded-tr-lg rounded-br-lg rounded-bl-lg {{$class}}">
     {{ $slot }}
 </ul>