From 477dcc84dc147d397662e07cd4297170b8bcc4f5 Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Sat, 10 Feb 2024 11:24:38 +0330 Subject: [PATCH 01/55] feat(blazorui): add MaxRange to BitDateRangePicker #6805 (#6815) --- .../BitDateRangePicker.razor.cs | 154 +++++++++++------- .../BitDateRangePickerDemo.razor | 5 +- .../BitDateRangePickerDemo.razor.cs | 13 +- 3 files changed, 101 insertions(+), 71 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs index 6cd926305f..5c97969b48 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.razor.cs @@ -525,14 +525,9 @@ public bool IsUnderlined [Parameter] public bool ShowTimePickerAsOverlay { get; set; } /// - /// The maximum range of days allowed for selection in DateRangePicker. + /// The maximum range of day and times allowed for selection in DateRangePicker. /// - [Parameter] public uint MaxDayRange { get; set; } - - /// - /// The maximum range of time allowed for selection in DateRangePicker. - /// - [Parameter] public TimeSpan? MaxTimeRange { get; set; } + [Parameter] public TimeSpan? MaxRange { get; set; } /// /// Whether the clear button should be shown or not when the DateRangePicker has a value. @@ -602,11 +597,11 @@ protected override void OnParametersSet() CurrentValue.EndDate = null; } - _startTimeHour = CurrentValue.StartDate.HasValue ? CurrentValue.StartDate.Value.Hour : 0; + _startTimeHour = CurrentValue.StartDate.HasValue ? CurrentValue.StartDate.Value.Hour : 23; _startTimeMinute = CurrentValue.StartDate.HasValue ? CurrentValue.StartDate.Value.Minute : 0; - _endTimeHour = CurrentValue.EndDate.HasValue ? CurrentValue.EndDate.Value.Hour : (MaxTimeRange.HasValue ? MaxTimeRange.Value.Hours : 23); - _endTimeMinute = CurrentValue.EndDate.HasValue ? CurrentValue.EndDate.Value.Minute : (MaxTimeRange.HasValue ? MaxTimeRange.Value.Minutes : 59); + _endTimeHour = 23; //CurrentValue.EndDate.HasValue ? CurrentValue.EndDate.Value.Hour : (MaxRange.HasValue && MaxRange.Value.TotalHours < 24 ? (int)MaxRange.Value.TotalHours : 23); + _endTimeMinute = CurrentValue.EndDate.HasValue ? CurrentValue.EndDate.Value.Minute : (MaxRange.HasValue && MaxRange.Value.Days < 1 && MaxRange.Value.Minutes < 60 ? (int)MaxRange.Value.Minutes : 59); GenerateCalendarData(startDateTime.DateTime); @@ -732,8 +727,8 @@ private async Task HandleOnClearButtonClick() _startTimeHour = 0; _startTimeMinute = 0; - _endTimeHour = MaxTimeRange.HasValue ? MaxTimeRange.Value.Hours : 23; - _endTimeMinute = MaxTimeRange.HasValue ? MaxTimeRange.Value.Minutes : 59; + _endTimeHour = MaxRange.HasValue && MaxRange.Value.TotalHours < 24 ? (int)MaxRange.Value.TotalHours : 23; + _endTimeMinute = MaxRange.HasValue && MaxRange.Value.TotalMinutes < 60 ? (int)MaxRange.Value.TotalMinutes : 59; _selectedStartDateWeek = null; _selectedEndDateWeek = null; @@ -779,13 +774,11 @@ private async Task SelectDate(int dayIndex, int weekIndex) var minute = CurrentValue.StartDate.HasValue ? _endTimeMinute : _startTimeMinute; var selectedDate = new DateTimeOffset(Culture.Calendar.ToDateTime(_currentYear, _currentMonth, currentDay, hour, minute, 0, 0), DateTimeOffset.Now.Offset); - var startDateHasValue = CurrentValue.StartDate.HasValue; - if (startDateHasValue is false) + if (CurrentValue.StartDate.HasValue is false) { CurrentValue.StartDate = selectedDate; } - - if (startDateHasValue || MaxDayRange == 1) + else { CurrentValue.EndDate = selectedDate; if (AutoClose) @@ -806,6 +799,18 @@ private async Task SelectDate(int dayIndex, int weekIndex) (CurrentValue.EndDate, CurrentValue.StartDate) = (CurrentValue.StartDate, CurrentValue.EndDate); } + if (CurrentValue.EndDate.HasValue && MaxRange.HasValue) + { + var maxDate = new DateTimeOffset(GetMaxEndDate(), CurrentValue.EndDate.Value.Offset); + + if (maxDate < CurrentValue.EndDate) + { + _endTimeHour = maxDate.Hour; + _endTimeMinute = maxDate.Minute; + CurrentValue.EndDate = maxDate; + } + } + CurrentValue = new BitDateRangePickerValue { StartDate = CurrentValue.StartDate, EndDate = CurrentValue.EndDate }; GenerateMonthData(_currentYear, _currentMonth); @@ -1158,19 +1163,19 @@ private bool CanChangeMonth(bool isNext) if (minDateYear == _currentYear && minDateMonth == _currentMonth) return false; } - if (MaxDayRange > 0 && CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue is false) + if (MaxRange.HasValue && MaxRange.Value.TotalDays > 0 && CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue is false) { if (isNext) { - var maxDateYear = Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(MaxDayRange)); - var maxDateMonth = Culture.Calendar.GetMonth(CurrentValue.StartDate.Value.DateTime.AddDays(MaxDayRange)); + var maxDateYear = Culture.Calendar.GetYear(GetMaxEndDate()); + var maxDateMonth = Culture.Calendar.GetMonth(GetMaxEndDate()); if (maxDateYear == _currentYear && maxDateMonth == _currentMonth) return false; } else { - var minDateYear = Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(-1 * MaxDayRange)); - var minDateMonth = Culture.Calendar.GetMonth(CurrentValue.StartDate.Value.DateTime.AddDays(-1 * MaxDayRange)); + var minDateYear = Culture.Calendar.GetYear(GetMinEndDate()); + var minDateMonth = Culture.Calendar.GetMonth(GetMinEndDate()); if (minDateYear == _currentYear && minDateMonth == _currentMonth) return false; } @@ -1186,9 +1191,9 @@ private bool CanChangeYear(bool isNext) var isInMaxDateYear = MaxDate.HasValue && Culture.Calendar.GetYear(MaxDate.Value.DateTime) == _currentYear; if (isInMaxDateYear) return false; - var isInMaxDayRangeYear = MaxDayRange > 0 && CurrentValue?.StartDate is not null && - (Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(MaxDayRange)) == _currentYear || - Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(-1 * MaxDayRange)) == _currentYear); + var isInMaxDayRangeYear = MaxRange.HasValue && MaxRange.Value.TotalDays > 0 && CurrentValue?.StartDate is not null && + (Culture.Calendar.GetYear(GetMaxEndDate()) == _currentYear || + Culture.Calendar.GetYear(GetMinEndDate()) == _currentYear); return isInMaxDayRangeYear is false; } @@ -1197,9 +1202,9 @@ private bool CanChangeYear(bool isNext) var isInMinDateYear = MinDate.HasValue && Culture.Calendar.GetYear(MinDate.Value.DateTime) == _currentYear; if (isInMinDateYear) return false; - var isInMaxDayRangeYear = MaxDayRange > 0 && CurrentValue?.StartDate is not null && CurrentValue!.EndDate.HasValue is false && - (Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(MaxDayRange)) == _currentYear || - Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(-1 * MaxDayRange)) == _currentYear); + var isInMaxDayRangeYear = MaxRange.HasValue && MaxRange.Value.TotalDays > 0 && CurrentValue?.StartDate is not null && CurrentValue!.EndDate.HasValue is false && + (Culture.Calendar.GetYear(GetMaxEndDate()) == _currentYear || + Culture.Calendar.GetYear(GetMinEndDate()) == _currentYear); return isInMaxDayRangeYear is false; } @@ -1212,9 +1217,9 @@ private bool CanChangeYearRange(bool isNext) var isInMaxDateYearRange = MaxDate.HasValue && Culture.Calendar.GetYear(MaxDate.Value.DateTime) < _yearPickerStartYear + 12; if (isInMaxDateYearRange) return false; - var isInMaxDayRangeYearRange = MaxDayRange > 0 && CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue is false && - (Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(MaxDayRange)) < _yearPickerStartYear + 12 || - Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(-1 * MaxDayRange)) < _yearPickerStartYear + 12); + var isInMaxDayRangeYearRange = MaxRange.HasValue && MaxRange.Value.TotalDays > 0 && CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue is false && + (Culture.Calendar.GetYear(GetMaxEndDate()) < _yearPickerStartYear + 12 || + Culture.Calendar.GetYear(GetMinEndDate()) < _yearPickerStartYear + 12); return isInMaxDayRangeYearRange is false; } @@ -1223,9 +1228,9 @@ private bool CanChangeYearRange(bool isNext) var isInMinDateYearRange = MinDate.HasValue && Culture.Calendar.GetYear(MinDate.Value.DateTime) >= _yearPickerStartYear; if (isInMinDateYearRange) return false; - var isInMaxDayRangeYearRange = MaxDayRange > 0 && CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue is false && - (Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(MaxDayRange)) >= _yearPickerStartYear || - Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(-1 * MaxDayRange)) >= _yearPickerStartYear); + var isInMaxDayRangeYearRange = MaxRange.HasValue && MaxRange.Value.TotalDays > 0 && CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue is false && + (Culture.Calendar.GetYear(GetMaxEndDate()) >= _yearPickerStartYear || + Culture.Calendar.GetYear(GetMinEndDate()) >= _yearPickerStartYear); return isInMaxDayRangeYearRange is false; } @@ -1258,9 +1263,9 @@ private bool IsWeekDayOutOfMinAndMaxDate(int dayIndex, int weekIndex) (_currentYear == minDateYear && month == minDateMonth && day < minDateDay)) return true; } - if (MaxDayRange > 0 && CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue is false) + if (MaxRange.HasValue && MaxRange.Value.TotalDays > 0 && CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue is false) { - var maxEndDate = CurrentValue.StartDate.Value.DateTime.AddDays(MaxDayRange); + var maxEndDate = GetMaxEndDate(); var maxDateYear = Culture.Calendar.GetYear(maxEndDate); var maxDateMonth = Culture.Calendar.GetMonth(maxEndDate); var maxDateDay = Culture.Calendar.GetDayOfMonth(maxEndDate); @@ -1269,7 +1274,7 @@ private bool IsWeekDayOutOfMinAndMaxDate(int dayIndex, int weekIndex) (_currentYear == maxDateYear && month > maxDateMonth) || (_currentYear == maxDateYear && month == maxDateMonth && day > maxDateDay)) return true; - var minEndDate = CurrentValue.StartDate.Value.DateTime.AddDays(-1 * MaxDayRange); + var minEndDate = GetMinEndDate(); var minDateYear = Culture.Calendar.GetYear(minEndDate); var minDateMonth = Culture.Calendar.GetMonth(minEndDate); var minDateDay = Culture.Calendar.GetDayOfMonth(minEndDate); @@ -1300,15 +1305,15 @@ private bool IsMonthOutOfMinAndMaxDate(int month) if (_currentYear < minDateYear || (_currentYear == minDateYear && month < minDateMonth)) return true; } - if (MaxDayRange > 0 && CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue is false) + if (MaxRange.HasValue && MaxRange.Value.TotalDays > 0 && CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue is false) { - var maxEndDate = CurrentValue.StartDate.Value.DateTime.AddDays(MaxDayRange); + var maxEndDate = GetMaxEndDate(); var maxDateYear = Culture.Calendar.GetYear(maxEndDate); var maxDateMonth = Culture.Calendar.GetMonth(maxEndDate); if (_currentYear > maxDateYear || (_currentYear == maxDateYear && month > maxDateMonth)) return true; - var minEndDate = CurrentValue.StartDate.Value.DateTime.AddDays(-1 * MaxDayRange); + var minEndDate = GetMinEndDate(); var minDateYear = Culture.Calendar.GetYear(minEndDate); var minDateMonth = Culture.Calendar.GetMonth(minEndDate); @@ -1322,9 +1327,9 @@ private bool IsYearOutOfMinAndMaxDate(int year) { return (MaxDate.HasValue && year > Culture.Calendar.GetYear(MaxDate.Value.DateTime)) || (MinDate.HasValue && year < Culture.Calendar.GetYear(MinDate.Value.DateTime)) - || (MaxDayRange > 0 && CurrentValue?.StartDate is not null && CurrentValue!.EndDate.HasValue is false && - (year > Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(MaxDayRange)) || - year < Culture.Calendar.GetYear(CurrentValue.StartDate.Value.DateTime.AddDays(-1 * MaxDayRange)))); + || (MaxRange.HasValue && MaxRange.Value.TotalDays > 0 && CurrentValue?.StartDate is not null && CurrentValue!.EndDate.HasValue is false && + (year > Culture.Calendar.GetYear(GetMaxEndDate()) || + year < Culture.Calendar.GetYear(GetMinEndDate()))); } private void CheckCurrentCalendarMatchesCurrentValue() @@ -1728,25 +1733,44 @@ private bool ShowMonthPicker() private bool CanChangeTime(int? startTimeHour = null, int? startTimeMinute = null, int? endTimeHour = null, int? endTimeMinute = null) { - if (MaxTimeRange.HasValue is false) return true; + if (MaxRange.HasValue is false) return true; var startTime = new TimeSpan(startTimeHour ?? _startTimeHour, startTimeMinute ?? _startTimeMinute, 0); var endTime = new TimeSpan(endTimeHour ?? _endTimeHour, endTimeMinute ?? _endTimeMinute, 0); + var currentValueHasValue = CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue; - if (CurrentValue?.StartDate is not null && - CurrentValue.EndDate.HasValue && - CurrentValue.StartDate.Value.Date == CurrentValue.EndDate.Value.Date && - startTime > endTime) + if (currentValueHasValue && CurrentValue!.StartDate!.Value.Date == CurrentValue.EndDate!.Value.Date && startTime > endTime) { return false; } - return MaxTimeRange.Value.TotalMinutes > Math.Abs((startTime - endTime).TotalMinutes); + if (currentValueHasValue) + { + var startDate = ChangeTimeInDateTimeOffset(CurrentValue!.StartDate!.Value, startTimeHour, startTimeMinute); + var endDate = ChangeTimeInDateTimeOffset(CurrentValue!.EndDate!.Value, endTimeHour, endTimeMinute); + var maxDate = new DateTimeOffset(GetMaxEndDate(), CurrentValue!.StartDate.Value.Offset); + var minDate = new DateTimeOffset(GetMinEndDate(), CurrentValue!.StartDate.Value.Offset); + + return startDate >= minDate && endDate <= maxDate; + } + + return new TimeSpan(MaxRange.Value.Hours, MaxRange.Value.Minutes, MaxRange.Value.Seconds).TotalMinutes > Math.Abs((startTime - endTime).TotalMinutes); + } + + private DateTimeOffset ChangeTimeInDateTimeOffset(DateTimeOffset dateTime, int? hour, int? minute) + { + return new DateTimeOffset(dateTime.Year, + dateTime.Month, + dateTime.Day, + hour ?? dateTime.Hour, + minute ?? dateTime.Minute, + dateTime.Second, + dateTime.Offset); } private bool IsIncreaseOrDecreaseButtonDisabled(bool isNext, bool isHour, bool isStartTime) { - if (MaxTimeRange.HasValue is false) return false; + if (MaxRange.HasValue is false) return false; var startTimeHour = _startTimeHour; var endTimeHour = _endTimeHour; @@ -1778,18 +1802,32 @@ private bool IsIncreaseOrDecreaseButtonDisabled(bool isNext, bool isHour, bool i var startTime = new TimeSpan(startTimeHour, startTimeMinute, 0); var endTime = new TimeSpan(endTimeHour, endTimeMinute, 0); - if (CurrentValue?.StartDate is not null && - CurrentValue.EndDate.HasValue && - CurrentValue.StartDate.Value.Date == CurrentValue.EndDate.Value.Date && - startTime > endTime && ((isNext && isStartTime && isHour && _startTimeHour < startTimeHour) || - (isNext is false && isStartTime is false && isHour && _endTimeHour > endTimeHour) || - (isNext && isStartTime && isHour is false && _startTimeMinute < startTimeMinute) || - (isNext is false && isStartTime is false && isHour is false && _endTimeMinute > endTimeMinute))) + if (CurrentValue?.StartDate is not null && CurrentValue.EndDate.HasValue) { - return true; + var startDate = ChangeTimeInDateTimeOffset(CurrentValue!.StartDate!.Value, startTimeHour, startTimeMinute); + var endDate = ChangeTimeInDateTimeOffset(CurrentValue!.EndDate!.Value, endTimeHour, endTimeMinute); + if (startDate > endDate) + { + return true; + } + + var maxDate = new DateTimeOffset(GetMaxEndDate(), CurrentValue!.StartDate.Value.Offset); + var minDate = new DateTimeOffset(GetMinEndDate(), CurrentValue!.StartDate.Value.Offset); + + return startDate < minDate || endDate > maxDate; } - return MaxTimeRange.Value.TotalMinutes < Math.Abs((startTime - endTime).TotalMinutes); + return new TimeSpan(MaxRange.Value.Hours, MaxRange.Value.Minutes, MaxRange.Value.Seconds).TotalMinutes < Math.Abs((startTime - endTime).TotalMinutes); + } + + private DateTime GetMaxEndDate() + { + return CurrentValue!.StartDate!.Value.DateTime.AddDays(MaxRange!.Value.TotalDays); + } + + private DateTime GetMinEndDate() + { + return CurrentValue!.StartDate!.Value.DateTime.AddDays(-1 * MaxRange!.Value.TotalDays); } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor index 37d44c6a9e..bd0387bd10 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor @@ -50,9 +50,8 @@
Max: Now.AddYears(+1)


-
MaxDayRange: 2 days
-
MaxTimeRange: 4 hours and 30 minutes
- +
MaxRange: 2 days, 4 hours and 30 minutes
+ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs index e581e0e187..1618fe0a9e 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/DateRangePicker/BitDateRangePickerDemo.razor.cs @@ -220,17 +220,10 @@ public partial class BitDateRangePickerDemo }, new() { - Name = "MaxDayRange", - Type = "uint", - DefaultValue = "null", - Description = "The maximum range of days allowed for selection in DateRangePicker.", - }, - new() - { - Name = "MaxTimeRange", + Name = "MaxRange", Type = "TimeSpan?", DefaultValue = "null", - Description = "The maximum range of time allowed for selection in DateRangePicker.", + Description = "The maximum range of day and times allowed for selection in DateRangePicker.", }, new() { @@ -993,7 +986,7 @@ public partial class BitDateRangePickerDemo -"; +"; private readonly string example3RazorCode = @" From e7f31fc2c82ee6c7e52f618660b419d0c99c3659 Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Sat, 10 Feb 2024 11:27:03 +0330 Subject: [PATCH 02/55] feat(blazorui): add prefix and suffix to BitNumericTextField #6657 (#6816) --- .../BitNumericTextField.razor | 26 +++++++++++ .../BitNumericTextField.razor.cs | 22 ++++++++++ .../NumericTextField/BitNumericTextField.scss | 23 ++++++++++ .../BitNumericTextFieldClassStyles.cs | 20 +++++++++ .../BitNumericTextFieldDemo.razor | 16 +++++++ .../BitNumericTextFieldDemo.razor.cs | 43 +++++++++++++++++-- 6 files changed, 146 insertions(+), 4 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor index 88ba3d76cc..e13b857e0d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor @@ -42,6 +42,19 @@ aria-label="@AriaLabel" aria-setsize="@AriaSetSize" aria-posinset="@AriaPositionInSet"> + @if (PrefixTemplate is not null) + { + @PrefixTemplate + } + else if (Prefix.HasValue()) + { +
+ + @Prefix + +
+ } + } + + @if (SuffixTemplate is not null) + { + @SuffixTemplate + } + else if (Suffix.HasValue()) + { +
+ + @Suffix + +
+ } \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor.cs index aabb142b83..71125045b4 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor.cs @@ -244,6 +244,28 @@ public TValue? Step ///
[Parameter] public string ValidationMessage { get; set; } = "The {0} field is not valid."; + /// + /// Prefix displayed before the numeric field contents. This is not included in the value. + /// Ensure a descriptive label is present to assist screen readers, as the value does not include the prefix. + /// + [Parameter] public string? Prefix { get; set; } + + /// + /// Shows the custom prefix for numeric field. + /// + [Parameter] public RenderFragment? PrefixTemplate { get; set; } + + /// + /// Suffix displayed after the numeric field contents. This is not included in the value. + /// Ensure a descriptive label is present to assist screen readers, as the value does not include the suffix. + /// + [Parameter] public string? Suffix { get; set; } + + /// + /// Shows the custom suffix for numeric field. + /// + [Parameter] public RenderFragment? SuffixTemplate { get; set; } + protected override string RootElementClass => "bit-ntf"; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.scss index 9ec4f6e54d..017cd4ba3a 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.scss @@ -30,6 +30,11 @@ background: $color-background-disabled; } + .bit-ntf-pre, + .bit-ntf-suf { + color: $color-foreground-disabled; + } + .bit-ntf-aup, .bit-ntf-adn { cursor: default; pointer-events: none; @@ -185,3 +190,21 @@ border: spacing(0.25) $shape-border-style $color-primary-main; } } + +.bit-ntf-pre, +.bit-ntf-suf { + height: 100%; + display: flex; + flex-shrink: 0; + align-items: center; + white-space: nowrap; + padding: 0 spacing(1.25); + min-height: spacing(3.75); + color: $color-foreground-primary; + background: $color-background-secondary; + + span { + font-size: spacing(1.75); + padding-bottom: spacing(0.125); + } +} \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextFieldClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextFieldClassStyles.cs index a65c45f3c7..97e2690bcb 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextFieldClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextFieldClassStyles.cs @@ -71,4 +71,24 @@ public class BitNumericTextFieldClassStyles /// Custom CSS classes/styles for the numeric text field's root element. /// public string? Root { get; set; } + + /// + /// Custom CSS classes/styles for the numeric text field's prefix container. + /// + public string? PrefixContainer { get; set; } + + /// + /// Custom CSS classes/styles for the numeric text field's prefix. + /// + public string? Prefix { get; set; } + + /// + /// Custom CSS classes/styles for the numeric text field's suffix container. + /// + public string? SuffixContainer { get; set; } + + /// + /// Custom CSS classes/styles for the numeric text field's suffix. + /// + public string? Suffix { get; set; } } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumericTextField/BitNumericTextFieldDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumericTextField/BitNumericTextFieldDemo.razor index fee98f3e69..5cbfbe7648 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumericTextField/BitNumericTextFieldDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumericTextField/BitNumericTextFieldDemo.razor @@ -150,4 +150,20 @@ + + + +
+ +
+ +
+ +
+ +
+ +
+
+
\ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumericTextField/BitNumericTextFieldDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumericTextField/BitNumericTextFieldDemo.razor.cs index 3233d4db6f..01e6e9707e 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumericTextField/BitNumericTextFieldDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/NumericTextField/BitNumericTextFieldDemo.razor.cs @@ -198,6 +198,27 @@ public partial class BitNumericTextFieldDemo Description = "Input placeholder text.", }, new() + { + Name = "Prefix", + Type = "string?", + DefaultValue = "null", + Description = "Prefix displayed before the numeric field contents. This is not included in the value. \r\n Ensure a descriptive label is present to assist screen readers, as the value does not include the prefix.", + }, + new() + { + Name = "PrefixTemplate", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "Shows the custom prefix for numeric field.", + }, + new() + { + Name = "ShowButtons", + Type = "bool", + DefaultValue = "false", + Description = "Whether to show the increment and decrement buttons.", + }, + new() { Name = "Step", Type = "TValue?", @@ -215,10 +236,17 @@ public partial class BitNumericTextFieldDemo }, new() { - Name = "ShowButtons", - Type = "bool", - DefaultValue = "false", - Description = "Whether to show the increment and decrement buttons.", + Name = "Suffix", + Type = "string?", + DefaultValue = "null", + Description = "Suffix displayed after the numeric field contents. This is not included in the value. \r\n Ensure a descriptive label is present to assist screen readers, as the value does not include the suffix.", + }, + new() + { + Name = "SuffixTemplate", + Type = "RenderFragment?", + DefaultValue = "null", + Description = "Shows the custom suffix for numeric field.", }, new() { @@ -533,4 +561,11 @@ public class BitNumericTextFieldValidationModel private void HandleValidSubmit() { } private void HandleInvalidSubmit() { }"; + + private readonly string example9RazorCode = @" + + + + +"; } From 92a7ddb526b049f4c8a371cb9f7ccdb9e4f28578 Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Sun, 11 Feb 2024 17:10:28 +0330 Subject: [PATCH 03/55] fix(blazorui): resolve issues of label id in BitNumericTextField #6817 (#6818) --- .../Inputs/NumericTextField/BitNumericTextField.razor | 6 +++--- .../Inputs/NumericTextField/BitNumericTextField.razor.cs | 5 +++-- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor index e13b857e0d..833367cc12 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumericTextField/BitNumericTextField.razor @@ -20,7 +20,7 @@ @if (LabelTemplate is not null) { -