Merge pull request #356 from mkocansey/v2.7

Release V2.7.0
mkocansey · Sep 28, 2024 · b6b7772 · b6b7772
2 parents a28b1f4 + 572caab
commit b6b7772
Show file tree

Hide file tree

Showing 12 changed files with 325 additions and 25 deletions.
diff --git a/config/bladewind.php b/config/bladewind.php
@@ -319,6 +319,7 @@
     */
     'select' => [
         'placeholder' => 'Select One',
+        'search_placeholder' => 'Type here...',
         'empty_placeholder' => 'No options available',
         'label' => null,
         'add_clearing' => true,
@@ -327,6 +328,16 @@
         'size' => 'medium',
     ],
 
+    /*
+    |--------------------------------------------------------------------------
+    | Slider component
+    |--------------------------------------------------------------------------
+    */
+    'slider' => [
+        'show_values' => true,
+        'range' => false,
+    ],
+
     /*
     |--------------------------------------------------------------------------
     | Spinner component

diff --git a/public/css/bladewind-ui.min.css b/public/css/bladewind-ui.min.css
diff --git a/resources/assets/css/app.css b/resources/assets/css/app.css
@@ -3,7 +3,9 @@
 @import './table.css';
 @import './tabs.css';
 @import './dropdown.css';
+@import './progress.css';
 @import './popup.min.css';
+@import './slider.css';
 @import './side-nav.css';
 
 @import "tailwindcss/base";

diff --git a/resources/assets/css/progress.css b/resources/assets/css/progress.css
@@ -0,0 +1,19 @@
+@layer components {
+    .bw-progress-bar .striped {
+        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.35) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.35) 75%, transparent 75%, transparent);
+        background-size: 2.5rem 2.5rem;
+    }
+
+    .bw-progress-bar .striped.animated {
+        animation: move-stripes 8s linear infinite;
+    }
+
+    @keyframes move-stripes {
+        0% {
+            background-position: 0 0;
+        }
+        100% {
+            background-position: 100% 100%;
+        }
+    }
+}
diff --git a/resources/assets/css/slider.css b/resources/assets/css/slider.css
@@ -0,0 +1,126 @@
+@layer components {
+
+    .bw-slider {
+        @apply appearance-none w-full h-2 bg-gray-200 outline-0 opacity-90 rounded-full transition-opacity;
+    }
+
+    .bw-slider::-webkit-slider-thumb {
+        @apply rounded-full cursor-pointer appearance-none size-6
+    }
+
+    .bw-slider::-moz-range-thumb {
+        @apply rounded-full cursor-pointer appearance-none size-6
+    }
+
+    .bw-slider.primary::-webkit-slider-thumb {
+        @apply bg-primary-500
+    }
+
+    .bw-slider.primary::-moz-range-thumb {
+        @apply bg-primary-500
+    }
+
+    .bw-slider.pink::-webkit-slider-thumb {
+        @apply bg-pink-500
+    }
+
+    .bw-slider.pink::-moz-range-thumb {
+        @apply bg-pink-500
+    }
+
+    .bw-slider.blue::-webkit-slider-thumb {
+        @apply bg-blue-500
+    }
+
+    .bw-slider.blue::-moz-range-thumb {
+        @apply bg-blue-500
+    }
+
+    .bw-slider.red::-webkit-slider-thumb {
+        @apply bg-red-500
+    }
+
+    .bw-slider.red::-moz-range-thumb {
+        @apply bg-red-500
+    }
+
+    .bw-slider.yellow::-webkit-slider-thumb {
+        @apply bg-amber-500
+    }
+
+    .bw-slider.yellow::-moz-range-thumb {
+        @apply bg-amber-500
+    }
+
+    .bw-slider.black::-webkit-slider-thumb {
+        @apply bg-slate-500
+    }
+
+    .bw-slider.black::-moz-range-thumb {
+        @apply bg-slate-500
+    }
+
+    .bw-slider.gray::-webkit-slider-thumb {
+        @apply bg-slate-500
+    }
+
+    .bw-slider.gray::-moz-range-thumb {
+        @apply bg-slate-500
+    }
+
+    .bw-slider.purple::-webkit-slider-thumb {
+        @apply bg-purple-500
+    }
+
+    .bw-slider.purple::-moz-range-thumb {
+        @apply bg-purple-500
+    }
+
+    .bw-slider.cyan::-webkit-slider-thumb {
+        @apply bg-cyan-500
+    }
+
+    .bw-slider.cyan::-moz-range-thumb {
+        @apply bg-cyan-500
+    }
+
+    .bw-slider.orange::-webkit-slider-thumb {
+        @apply bg-orange-500
+    }
+
+    .bw-slider.orange::-moz-range-thumb {
+        @apply bg-orange-500
+    }
+
+    .bw-slider.violet::-webkit-slider-thumb {
+        @apply bg-violet-500
+    }
+
+    .bw-slider.violet::-moz-range-thumb {
+        @apply bg-violet-500
+    }
+
+    .bw-slider.indigo::-webkit-slider-thumb {
+        @apply bg-indigo-500
+    }
+
+    .bw-slider.indigo::-moz-range-thumb {
+        @apply bg-indigo-500
+    }
+
+    .bw-slider.fuchsia::-webkit-slider-thumb {
+        @apply bg-fuchsia-500
+    }
+
+    .bw-slider.fuchsia::-moz-range-thumb {
+        @apply bg-fuchsia-500
+    }
+
+    .bw-slider.green::-webkit-slider-thumb {
+        @apply bg-green-500
+    }
+
+    .bw-slider.green::-moz-range-thumb {
+        @apply bg-green-500
+    }
+}
diff --git a/resources/views/components/checkbox.blade.php b/resources/views/components/checkbox.blade.php
@@ -20,9 +20,9 @@
     if(! in_array($color, ['primary','blue','red','yellow','green','orange','purple','cyan','pink', 'black', 'violet', 'indigo', 'fuchsia'])) {
         $color = 'primary';
     }
-    $text_colour = ($color == 'black') ? 'text-black' : "text-{$color}-500 dark:bg-dark-800";
-    $ring_colour = ($color == 'black') ? 'ring-black' : "ring-{$color}-500";
-    $border_colour = ($color == 'black') ? 'border-slate-500/50' : "border-{$color}-500/50";
+    $text_colour = ($color == 'black') ? 'text-black' : "text-$color-600 dark:bg-dark-800";
+    $ring_colour = ($color == 'black') ? 'ring-black' : "ring-$color-500";
+    $border_colour = ($color == 'black') ? 'border-slate-500/50' : "border-$color-500/50";
     $add_clearing = filter_var($add_clearing, FILTER_VALIDATE_BOOLEAN);
     $addClearing = filter_var($addClearing, FILTER_VALIDATE_BOOLEAN);
     if (!$addClearing) $add_clearing = $addClearing;

diff --git a/resources/views/components/empty-state.blade.php b/resources/views/components/empty-state.blade.php
@@ -9,6 +9,7 @@
     'showImage' => config('bladewind.empty_state.show_image', true),
     'onclick' => '',
     'class' => '',
+    'image_css' => '',
 ])
 @php
     // reset variables for Laravel 8 support
@@ -17,9 +18,9 @@
     if ($buttonLabel !== $button_label) $button_label = $buttonLabel;
     if (! $showImage) $show_image = $showImage;
 @endphp
-<div class="text-center px-4 pb-10 bw-empty-state {{$class}}">
+<div class="text-center px-4 pb-6 bw-empty-state {{$class}}">
     @if($show_image == 'true')
-        <img src="{{ $image }}" class="h-52 mx-auto mb-6"/>
+        <img src="{{ $image }}" class="h-40 mx-auto mb-3 {{$image_css}}"/>
     @endif
     @if($heading != '')
         <div class="text-slate-700 dark:text-dark-400 text-2xl pt-4 pb-3 px-4 font-light">{!!$heading!!}</div>
@@ -30,7 +31,7 @@
     <div class="pt-2 dark:text-dark-400">{!! $slot !!}</div>
     @if($button_label != '')
         <x-bladewind::button
-                onclick="{!!$onclick!!}" class="block mx-auto my-4"
+                onclick="{!!$onclick!!}" class="block mx-auto my-2"
                 size="small">{{$button_label}}</x-bladewind::button>
     @endif
 </div>
diff --git a/resources/views/components/input.blade.php b/resources/views/components/input.blade.php
@@ -122,8 +122,8 @@
     if ($isDatepicker) $is_datepicker = $isDatepicker;
     if (!$transparentPrefix) $transparent_prefix = $transparentPrefix;
     if (!$transparentSuffix) $transparent_suffix = $transparentSuffix;
-    if (!$prefixIsIcon) $prefix_is_icon = $prefixIsIcon;
-    if (!$suffixIsIcon) $suffix_is_icon = $suffixIsIcon;
+    if ($prefixIsIcon) $prefix_is_icon = $prefixIsIcon;
+    if ($suffixIsIcon) $suffix_is_icon = $suffixIsIcon;
 
     if ($selectedValue !== $selected_value) $selected_value = $selectedValue;
     if ($errorMessage !== $error_message) $error_message = $errorMessage;

diff --git a/resources/views/components/progress-bar.blade.php b/resources/views/components/progress-bar.blade.php
@@ -25,11 +25,15 @@
     'cssOverride' => '',
     'percentage_label_opacity' => config('bladewind.progress_bar.percentage_label_opacity', 100),
     'percentageLabelOpacity' => config('bladewind.progress_bar.percentage_label_opacity', 100),
+    'striped' => false,
+    'animated' => false,
 ])
 
 @php
     // reset variables for Laravel 8 support
     $show_percentage_label = filter_var($show_percentage_label, FILTER_VALIDATE_BOOLEAN);
+    $striped = filter_var($striped, FILTER_VALIDATE_BOOLEAN);
+    $animated = filter_var($animated, FILTER_VALIDATE_BOOLEAN);
     $showPercentageLabel = filter_var($showPercentageLabel, FILTER_VALIDATE_BOOLEAN);
     $show_percentage_label_inline = filter_var($show_percentage_label_inline, FILTER_VALIDATE_BOOLEAN);
     $showPercentageLabelInline = filter_var($showPercentageLabelInline, FILTER_VALIDATE_BOOLEAN);
@@ -61,12 +65,15 @@ class="opacity-{{$percentage_label_opacity}}">{{ $percentage}}%</span> {{$percen
     @endif
     <div class="@if(!$transparent) bg-slate-200/70 dark:bg-dark-800/70 w-full @endif mt-1 my-2 rounded-full">
         <div style="width: {{$percentage}}%"
-             class="text-center py-1 {{$bar_color}} {{$css_override}} rounded-full bar-width animate__animated animate__fadeIn {{$bar_class}}">
+             class="text-center py-1 {{$bar_color}} {{$css_override}} relative overflow-hidden h-full rounded-full bar-width animate__animated animate__fadeIn {{$bar_class}}">
             @if($show_percentage_label && $show_percentage_label_inline)
                 <span class="text-{{$color}}-{{$text_color_weight[$shade]}} dark:text-dark-600 px-2 text-xs">
             {{$percentage_prefix}} <span class="opacity-{{$percentage_label_opacity}}">{{ $percentage}}%</span> {{$percentage_suffix}}
             </span>
             @endif
+            @if($striped)
+                <div class="striped @if($animated) animated @endif absolute inset-0"></div>
+            @endif
         </div>
     </div>
     @if($show_percentage_label &&

diff --git a/resources/views/components/select-item.blade.php b/resources/views/components/select-item.blade.php
@@ -6,12 +6,21 @@
     'image' => '',
     'filter_by' => '',
     'selectable' => 'true',
+    'empty_state' => 'false',
+    'empty_state_message' => config('bladewind.select.empty_placeholder', 'No options available'),
+    'empty_state_button_label' => 'Add',
+    'empty_state_onclick' => '',
+    'empty_state_image' => config('bladewind.empty_state.image', '/vendor/bladewind/images/empty-state.svg'),
+    'empty_state_show_image' => 'true',
+])
+@aware([
+    'onselect' => '',
 ])
-@aware([ 'onselect' => '', ])
 
 @php
     $selected = filter_var($selected, FILTER_VALIDATE_BOOLEAN);
     $selectable = filter_var($selectable, FILTER_VALIDATE_BOOLEAN);
+    $empty_state = filter_var($empty_state, FILTER_VALIDATE_BOOLEAN);
     $label = html_entity_decode($label);
 @endphp
 <div
@@ -21,12 +30,26 @@ class="py-3 pl-4 pr-3 flex items-center text-base cursor-pointer bw-select-item
         @if(!empty($filter_by)) data-filter-value="{{$filter_by}}" @endif
         @if($selected) data-selected="true" @endif
         @if($onselect !== '') data-user-function="{{ $onselect }}"@endif>
-    @if ($flag !== '' && $image == '')
-        <i class="{{ $flag }} flag"></i>
-    @endif
-    @if ($image !== '')
-        <x-bladewind::avatar size="small" class="!mt-0 !mr-4" image="{{ $image }}"/>
+    @if($empty_state)
+        <div class="text-center flex-grow">
+            <x-bladewind::empty-state
+                    class="!px-0 !pb-0"
+                    image_css="!h-24"
+                    :message="$empty_state_message"
+                    :button_label="$empty_state_button_label"
+                    :image="$empty_state_image"
+                    :show_image="$empty_state_show_image"
+                    onclick="{!! $empty_state_onclick !!}">
+            </x-bladewind::empty-state>
+        </div>
+    @else
+        @if ($flag !== '' && $image == '')
+            <i class="{{ $flag }} flag"></i>
+        @endif
+        @if ($image !== '')
+            <x-bladewind::avatar size="small" class="!mt-0 !mr-4" image="{{ $image }}"/>
+        @endif
+        <span class="grow text-left">{!! $label !!}</span>
+        <x-bladewind::icon name="check-circle" class="text-slate-400 size-5 hidden svg-{{$value }}"/>
     @endif
-    <span class="grow text-left">{!! $label !!}</span>
-    <x-bladewind::icon name="check-circle" class="text-slate-400 size-5 hidden svg-{{$value }}"/>
 </div>