Skip to content

Commit

Permalink
Merge pull request #390 from mkocansey/development
Browse files Browse the repository at this point in the history 
Release v2.7.5
  • Loading branch information
@mkocansey
mkocansey authored Nov 2, 2024
2 parents 193320e + 66a9127 commit 4cf1c89
Show file tree
Hide file tree
Showing 6 changed files with 126 additions and 22 deletions.
26 changes: 26 additions & 0 deletions config/bladewind.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,6 +267,18 @@
'position' => 'top-right',
],

/*
|--------------------------------------------------------------------------
| Number component
|--------------------------------------------------------------------------
*/
'number' => [
'with_dots' => true,
'transparent_icons' => true,
'size' => 'medium',
'icon_type' => 'outline',
],

/*
|--------------------------------------------------------------------------
| Progress bar component
Expand Down Expand Up @@ -464,6 +476,20 @@
],
],

/*
|--------------------------------------------------------------------------
| Timepicker component
|--------------------------------------------------------------------------
*/
'timepicker' => [
'hour_label' => 'HH',
'minute_label' => 'MM',
'format_label' => '--',
'format' => '12',
'style' => 'popup',
'placeholder' => 'HH:MM',
],

/*
|--------------------------------------------------------------------------
| Toggle component
Expand Down
2 changes: 1 addition & 1 deletion public/css/bladewind-ui.min.css
View file

Large diffs are not rendered by default.

18 changes: 12 additions & 6 deletions public/js/helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -707,13 +707,14 @@ var trapFocusInModal = (event) => {
}

/**
* Validate for mininum and maximum values of an input field
* Validate for minimum and maximum values of an input field
* @param {number} min - The minimum value.
* @param {number} max - The maximum value.
* @param {string} element - The input field to validate.
* @param {boolean} enforce_limits - Ensure input does not exceed maximum or go below minimum
* @return {void}
*/
var checkMinMax = (min, max, element) => {
var checkMinMax = (min, max, element, enforce_limits = false) => {
let field = domEl(`.${element}`);
let minimum = parseInt(min);
let maximum = parseInt(max);
Expand All @@ -722,10 +723,15 @@ var checkMinMax = (min, max, element) => {
let error_heading = field.getAttribute('data-error-heading');

if (field.value !== '' && ((!isNaN(minimum) && field.value < minimum) || (!isNaN(maximum) && field.value > maximum))) {
changeCss(field, '!border-red-400', 'add', true);
if (error_message) {
(show_error_inline) ? unhide(`.${element}-inline-error`) :
showNotification(error_heading, error_message, 'error');
if (enforce_limits) {
if (field.value < minimum) field.value = minimum;
if (field.value > maximum) field.value = maximum;
} else {
changeCss(field, '!border-red-400', 'add', true);
if (error_message) {
(show_error_inline) ? unhide(`.${element}-inline-error`) :
showNotification(error_heading, error_message, 'error');
}
}
} else {
if (error_message) hide(`.${element}-inline-error`);
Expand Down
6 changes: 4 additions & 2 deletions resources/views/components/input.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@
// javascript to execute when suffix icon is clicked
'action' => null,
'size' => config('bladewind.input.size', 'medium'),
'enforceLimits' => false,
])
@php
// reset variables for Laravel 8 support
Expand Down Expand Up @@ -114,6 +115,7 @@
$numeric = filter_var($numeric, FILTER_VALIDATE_BOOLEAN);
$viewable = filter_var($viewable, FILTER_VALIDATE_BOOLEAN);
$clearable = filter_var($clearable, FILTER_VALIDATE_BOOLEAN);
// $enforceLimits = filter_var($enforceLimits, FILTER_VALIDATE_BOOLEAN);
if (!$addClearing) $add_clearing = $addClearing;
if ($showPlaceholderAlways) $show_placeholder_always = $showPlaceholderAlways;
Expand Down Expand Up @@ -230,8 +232,8 @@ class="!size-4 !stroke-2 !opacity-85 hover:!opacity-100 hide-pwd hidden"
});
domEl('input.{{$name}}').setAttribute('inputmode', 'numeric');
@if($min || $max)
domEl('input.{{$name}}').addEventListener('keyup', (event) => {
checkMinMax('{{$min}}', '{{$max}}', '{{$name}}');
domEl('input.{{$name}}').addEventListener('input', (event) => {
checkMinMax('{{$min}}', '{{$max}}', '{{$name}}', {{$enforceLimits}});
});
@endif
@endif
Expand Down
72 changes: 72 additions & 0 deletions resources/views/components/number.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
@props([
// name of the input field for use in forms
'name' => 'input-'.uniqid(),
// label to display on the input box
'label' => '',
// minimum number a user can enter when numeric=true
'min' => 0,
// maximum number a user can enter when numeric=true
'max' => 100,
// is this a required field? Default is false
'required' => false,
// value to set when in edit mode, or if you want to load the input with default text
'selected_value' => null,
// for numeric input only: should the numbers include dots
'with_dots' => config('bladewind.number.with_dots', true),
'size' => config('bladewind.number.size', 'medium'),
'icon_type' => config('bladewind.number.icon_type', 'outline'),
'transparent_icons' => config('bladewind.number.transparent_icons', true),
'class' => '',
])
@php
$name = preg_replace('/[\s-]/', '_', $name);
$transparent_icons = filter_var($transparent_icons, FILTER_VALIDATE_BOOLEAN);
$min = !is_numeric($min) ? 0 : $min;
$max = (!empty($max) && !is_numeric($max)) ? 100 : $max;
$selected_value = (!empty($selected_value)) ? $selected_value : (($min != 0) ? $min : 0);
$sizes = [
'small' => [ 'icon' => '!size-4', 'text' => '', 'width' => 'w-36', 'alt_width' => 'w-40'],
'regular' => [ 'icon' => '!size-6', 'text' => '', 'width' => 'w-36', 'alt_width' => 'w-40'],
'medium' => [ 'icon' => '!size-8 !stroke-2', 'text' => 'text-3xl tracking-normal leading-none !py-[5px]', 'width' => 'w-40', 'alt_width' => 'w-48'],
'big' => [ 'icon' => '!size-12 !stroke-1', 'text' => 'text-4xl !py-[8.5px]', 'width' => 'w-48', 'alt_width' => 'w-56'],
];
@endphp

<span class="inline-flex bw-number-{{$name}} place">
<x-bladewind::input
prefix="arrow-down-circle"
:prefix_is_icon="true"
:prefix_icon_type="$icon_type"
prefix_icon_css="{{$sizes[$size]['icon'] ?? 'size-6'}} cursor-pointer"
:transparent_prefix="$transparent_icons"
suffix="arrow-up-circle"
:suffix_is_icon="true"
:suffix_icon_type="$icon_type"
:transparent_suffix="$transparent_icons"
suffix_icon_css="{{$sizes[$size]['icon']}} cursor-pointer"
numeric="true"
:min="$min"
:max="$max"
:label="$label"
:size="$size"
:enforce_limits="true"
:required="$required"
:with_dots="$with_dots"
class="text-center {{$sizes[$size]['text']??''}} font-semibold {{ ($transparent_icons ? $sizes[$size]['width'] : $sizes[$size]['alt_width'])}} {{$class}}"
:selected_value="$selected_value"
:name="$name"/>
</span>
<script>
changeCss('.bw-number-{{$name}} .prefix svg', '!size-4,size-6,!stroke-2', 'remove');
changeCss('.bw-number-{{$name}} .suffix svg', '!size-4,size-6,!stroke-2', 'remove');
domEl('.bw-number-{{$name}} .suffix').addEventListener('click', () => {
domEl('.bw-number-{{$name}} input.{{$name}}').value++;
checkMinMax('{{$min}}', '{{$max}}', '{{$name}}', 1);
});
domEl('.bw-number-{{$name}} .prefix').addEventListener('click', () => {
domEl('.bw-number-{{$name}} input.{{$name}}').value--;
checkMinMax('{{$min}}', '{{$max}}', '{{$name}}', 1);
});
</script>
24 changes: 11 additions & 13 deletions resources/views/components/timepicker.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
@props([
// name of the datepicker. This name is used when posting the form with the datepicker
'name' => 'bw-timepicker-'.uniqid(),
'hour_label' => 'HH',
'minute_label' => 'MM',
'format_label' => '--',
'required' => 'false',
'hour_label' => config('bladewind.timepicker.hour_label','HH'),
'minute_label' => config('bladewind.timepicker.minute_label','MM'),
'format_label' => config('bladewind.timepicker.format_label','--'),
'required' => false,
// what should the time hours be displayed as. Available options are 12, 24
'format' => '12',
'format' => config('bladewind.timepicker.format','12'),
'selected_value' => '',
'style' => 'popup',
'style' => config('bladewind.timepicker.style','popup'),
'label' => '',
'placeholder' => 'HH:MM',
'placeholder' => config('bladewind.timepicker.placeholder','HH:MM'),
])
@php
$name = preg_replace('/[\s-]/', '_', $name);
Expand Down Expand Up @@ -54,7 +54,8 @@ class="bw-time-{{$name}}"
:selected_value="$selected_hour??''"
class="w-[105px] text-center border-2 border-gray-200/70 rounded-md !px-4 !py-5 text-5xl font-semibold opacity-80 bw-{{$name}}_hh"
placeholder="{{$hour_label}}"
oninput="setTime_{{$name}}(this.value); enforceNumericLimits('bw-{{$name}}_hh', {{($format=='12' ? 12 : 23)}}); moveToMinutes('{{$name}}')"/>
:enforce_limits="true"
oninput="setTime_{{$name}}(this.value); moveToMinutes('{{$name}}')"/>
</div>
<div class="px-3 text-center pt-2.5">
<div class="block size-3 bg-gray-500 my-4 rounded-full"></div>
Expand All @@ -65,7 +66,8 @@ class="w-[105px] text-center border-2 border-gray-200/70 rounded-md !px-4 !py-5
class="w-[105px] text-center border-2 border-gray-200/70 rounded-md !px-2 !py-5 text-5xl font-semibold opacity-80 bw-{{$name}}_mm"
:selected_value="$selected_minute??''"
placeholder="{{$minute_label}}"
oninput="setTime_{{$name}}(this.value); enforceNumericLimits('bw-{{$name}}_mm', 59)"
:enforce_limits="true"
oninput="setTime_{{$name}}(this.value); "
maxlength="2"/>
</div>
@if($format == '12')
Expand Down Expand Up @@ -102,10 +104,6 @@ class="w-[105px] text-center border-2 border-gray-200/70 rounded-md !px-2 !py-5
}
domEl(`.bw-${field}_format`).value = format;
}
const enforceNumericLimits = (field, max) => {
let element = domEl(`.${field}`);
if (element.value > max) element.value = max;
}
const moveToMinutes = (name) => {
if (domEl(`.bw-${name}_hh`).value.length >= 2) {
domEl(`.bw-${name}_mm`).focus();
Expand Down

0 comments on commit 4cf1c89

Please sign in to comment.