From c0197de70d725bda02e83cbeeb254bf84c77e1c4 Mon Sep 17 00:00:00 2001 From: Tony-ST0754 <6914529@qq.com> Date: Sun, 1 Nov 2026 15:52:09 +0800 Subject: [PATCH 01/68] =?UTF-8?q?feat(DateTimePicker):=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8=E7=A7=BB=E5=8A=A8=E7=AB=AF=E5=BC=B9?= =?UTF-8?q?=E7=AA=97=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat(DateTimePicker):添加组件在移动端弹窗显示 --- .../DateTimePicker/DatePickerBody.razor | 18 ++-- .../DateTimePicker/DatePickerBody.razor.cs | 17 ++- .../DateTimePicker/DateTimePicker.razor | 56 ++++++++-- .../DateTimePicker/DateTimePicker.razor.cs | 88 ++++++++++++++- .../DateTimePicker/DateTimePicker.razor.js | 102 +++++++++++++++++- .../DateTimePicker/DateTimePicker.razor.scss | 71 ++++++++++++ 6 files changed, 321 insertions(+), 31 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor index 8db866aa238..2930e845105 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor @@ -1,25 +1,25 @@ -@namespace BootstrapBlazor.Components +@namespace BootstrapBlazor.Components @inherits BootstrapComponentBase
@if (ShowSidebar) { -
+
@if (SidebarTemplate != null) { @SidebarTemplate(OnClickSidebarButton) } else { -
- +
+
-
- +
+
-
- +
+
}
@@ -156,7 +156,7 @@ diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs index 8580c2f0c22..81b5705a2fd 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs @@ -53,6 +53,9 @@ private DateTime StartDate private bool _showClockPicker; + [CascadingParameter(Name = "DatePickerBodyHasExternalFooter")] + private bool HasExternalFooter { get; set; } + private string? ClassString => CssBuilder.Default("picker-panel") .AddClass("is-sidebar", ShowSidebar) .AddClass("is-lunar", ShowLunar) @@ -90,6 +93,8 @@ private bool IsRange(DateTime day) => Ranger != null private bool IsDisabled(DateTime day) => day < MinValue || day > MaxValue || IsDisableDay(day); + internal bool IsTodayDisabled => IsDisabled(DateTime.Today); + /// /// 获得 上一月按钮样式 /// Get Previous Month Button Style @@ -800,7 +805,7 @@ private void OnShowTimePicker() private bool HasSeconds => TimeFormat.Contains('s'); - private bool ShouldConfirm => !IsDateTimeMode && (AutoClose || ShowFooter == false); + private bool ShouldConfirm => !IsDateTimeMode && (AutoClose || (ShowFooter == false && !HasExternalFooter)); /// /// 设置组件显示视图方法 @@ -927,7 +932,7 @@ private string GetYearPeriod() /// 点击 此刻时调用此方法 /// 点击 此刻时调用此方法 /// - private async Task ClickNowButton() + internal async Task ClickNowButton() { var val = ViewMode switch { @@ -940,7 +945,7 @@ private async Task ClickNowButton() await ClickConfirmButton(); } - private async Task ClickConfirmButton() + internal async Task ClickConfirmButton() { ResetTimePickerPanel(); @@ -959,7 +964,7 @@ private async Task ClickConfirmButton() /// 点击 清除按钮调用此方法 /// 点击 清除button调用此方法 /// - private async Task ClickClearButton() + internal async Task ClickClearButton() { // 关闭 TimerPicker _showClockPicker = false; @@ -985,6 +990,10 @@ private async Task OnClickSidebarButton(DateTime d) await ClickConfirmButton(); } + private Task OnClickSidebarItem(DateTime d) => HasExternalFooter ? OnClickSidebarButton(d) : Task.CompletedTask; + + private Task OnClickSidebarCell(DateTime d) => HasExternalFooter ? Task.CompletedTask : OnClickSidebarButton(d); + private void ResetTimePickerPanel() { // 关闭 TimerPicker diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor index f6883d0b98c..0ac011ab4b2 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor @@ -7,7 +7,8 @@ { } -
+
@if(IsButton) {
+ +@if (_renderModal) +{ + + + +
+ + +
+ @if (AllowNull) + { + + } +
+ @if (!_pickerBody.IsTodayDisabled) + { + + } + + + + +} diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs index 76201cc1e1c..238fc5745ab 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs @@ -280,6 +280,13 @@ public string? Format [Parameter] public RenderFragment? DayDisabledTemplate { get; set; } + /// + /// 获得/设置 是否启用 HTML 原生移动端组件 默认 false + /// Gets or sets Whether to Use Native Mobile Components. Default is false + /// + [Parameter] + public bool UseNativeMobileComponents { get; set; } + /// /// 获得/设置 是否显示中国阴历历法 默认 false /// Gets or sets Whether to Show Chinese Lunar Calendar. Default is false @@ -371,6 +378,80 @@ public string? Format private DatePickerBody _pickerBody = default!; + private bool? _isMobile; + private bool _renderModal; + private bool _isModalOpen; + private readonly TaskCompletionSource _modalReady = new(); + + private string? MobileString => _isMobile.HasValue ? (_isMobile.Value ? "true" : "false") : null; + + private bool ShowDatePickerFooter => _isMobile != true; + + private string? ModalClassString => CssBuilder.Default("datetime-picker-modal") + .AddClass(CustomClass) + .Build(); + + private async Task OnBreakPointChanged(BreakPoint size) + { + var isMobile = size < BreakPoint.Medium; + if (_isMobile != isMobile) + { + _isMobile = isMobile; + _renderModal |= isMobile; + if (!await InvokeAsync("isShown", Id)) + { + StateHasChanged(); + } + } + } + + private Task OnModalReadyAsync(Modal modal) + { + _modalReady.TrySetResult(modal); + return Task.CompletedTask; + } + + /// + /// 客户端在移动端请求显示日期弹窗时调用此方法 + /// Called by JavaScript to show the date dialog on small screens + /// + [JSInvokable] + public async Task TriggerShowModalCallback() + { + if (IsDisabled) + { + return false; + } + + if (!_isModalOpen) + { + _isModalOpen = true; + var modal = await _modalReady.Task; + await InvokeVoidAsync("showModal", Id, modal.Id); + await modal.Show(); + } + return true; + } + + private Task OnModalClosedAsync() + { + _isModalOpen = false; + return TriggerHideCallback(); + } + + private async Task HidePickerAsync() + { + if (_isModalOpen) + { + var modal = await _modalReady.Task; + await modal.Close(); + } + else + { + await InvokeVoidAsync("hide", Id); + } + } + /// /// /// @@ -523,7 +604,8 @@ protected override string FormatValueAsString(TValue? value) /// protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { - TriggerHideCallback = nameof(TriggerHideCallback) + TriggerHideCallback = nameof(TriggerHideCallback), + TriggerShowModalCallback = nameof(TriggerShowModalCallback) }); private bool MinValueToEmpty(DateTime val) => val == DateTime.MinValue && AllowNull && DisplayMinValueAsEmpty; @@ -548,7 +630,7 @@ private async Task OnConfirm() if (AutoClose) { - await InvokeVoidAsync("hide", Id); + await HidePickerAsync(); } } @@ -560,7 +642,7 @@ private async Task OnClear() if (AutoClose) { - await InvokeVoidAsync("hide", Id); + await HidePickerAsync(); } } diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js index 30afd7ecdb9..635153a2796 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js @@ -14,6 +14,16 @@ export function init(id, invoke, options) { } const createPopover = (el, invoke, options) => { + EventHandler.on(el, 'click', '.dropdown-toggle', e => { + const mobile = el.getAttribute('data-bb-mobile'); + if (mobile !== 'false') { + e.preventDefault(); + e.stopImmediatePropagation(); + if (mobile === 'true') { + requestModal(Data.get(el.id)); + } + } + }); const popover = Popover.init(el, { dropdownSelector: el.getAttribute('data-bb-dropdown'), isDisabled: () => { @@ -28,21 +38,83 @@ const createPopover = (el, invoke, options) => { return popover; } +const requestModal = picker => { + if (!picker.el.classList.contains('disabled') && !picker.modalOpen && !picker.modalOpening) { + picker.modalOpening = true; + picker.invoke.invokeMethodAsync(picker.options.triggerShowModalCallback).finally(() => { + picker.modalOpening = false; + }); + } +} + +export function showModal(id, modalId) { + const picker = Data.get(id); + const modal = document.getElementById(modalId); + const body = modal?.querySelector('.datetime-picker-modal-body'); + if (!picker || !body) { + throw new Error(`DateTimePicker modal is not ready: ${id}`); + } + + if (picker.modal !== modal) { + picker.modal = modal; + picker.modalShown = () => { + if (picker.parentModal) { + const zIndex = Number.parseInt(getComputedStyle(picker.parentModal).zIndex) || 1055; + modal.style.zIndex = zIndex + 20; + bootstrap.Modal.getInstance(modal)._backdrop._getElement().style.zIndex = zIndex + 10; + } + }; + picker.modalHidden = () => restorePanel(picker); + EventHandler.on(modal, 'shown.bs.modal', picker.modalShown); + EventHandler.on(modal, 'hidden.bs.modal', picker.modalHidden); + } + + picker.parentModal = picker.el.closest('.modal.show'); + modal.style.zIndex = ''; + picker.modalOpen = true; + picker.el.classList.add('show'); + body.append(picker.popover.toggleMenu); +} + +const restorePanel = picker => { + picker.el.append(picker.popover.toggleMenu); + picker.el.classList.remove('show'); + picker.modalOpen = false; + + if (picker.parentModal?.classList.contains('show')) { + document.body.classList.add('modal-open'); + bootstrap.Modal.getInstance(picker.parentModal)?._focustrap.activate(); + } + + const toggle = picker.popover.toggleElement; + if (toggle.isConnected && !toggle.disabled) { + toggle.focus({ preventScroll: true }); + } +} + const handlerInput = (el, popover) => { const input = el.querySelector('.datetime-picker-input'); if (input) { EventHandler.on(input, 'keydown', e => { - if (e.key === 'Tab' && popover.isShown()) { + if (e.key === 'Tab' && el.getAttribute('data-bb-mobile') === 'false' && popover.isShown()) { popover.hide(); } }); EventHandler.on(input, 'keyup', e => { if (e.key === 'Escape') { - popover.hide(); + if (el.getAttribute('data-bb-mobile') === 'false') { + popover.hide(); + } input.blur(); } else if (e.key === 'Tab') { - popover.show(); + const mobile = el.getAttribute('data-bb-mobile'); + if (mobile === 'true') { + requestModal(Data.get(el.id)); + } + else if (mobile === 'false') { + popover.show(); + } } }); } @@ -56,15 +128,29 @@ const disposeInput = input => { } } +export function isShown(id) { + const picker = Data.get(id); + return !!picker && (picker.modalOpen || picker.modalOpening || picker.el.classList.contains('show')); +} + export function reset(id) { const picker = Data.get(id); if (picker) { const { el, input, popover, invoke, options } = picker; disposeInput(input); - Popover.dispose(popover); + if (!picker.modalOpen && el.classList.contains('show')) { + popover.hide(); + el.classList.remove('show'); + } + // The panel may be hosted in the mobile dialog while the trigger is replaced. + el.append(popover.toggleMenu); + Popover.dispose(popover); picker.popover = createPopover(el, invoke, options); picker.input = handlerInput(picker.el, picker.popover); + if (picker.modalOpen) { + picker.modal.querySelector('.datetime-picker-modal-body').append(picker.popover.toggleMenu); + } } } @@ -82,6 +168,14 @@ export function dispose(id) { if (data) { const { input, popover } = data; disposeInput(input); + if (data.modal) { + EventHandler.off(data.modal, 'shown.bs.modal', data.modalShown); + EventHandler.off(data.modal, 'hidden.bs.modal', data.modalHidden); + if (data.modalOpen) { + restorePanel(data); + } + } + data.el.append(popover.toggleMenu); Popover.dispose(popover) } } diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss index 92d09b6a2bd..161d5d02815 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss @@ -51,3 +51,74 @@ .popover .picker-panel { box-shadow: none; } + +.datetime-picker-modal { + width: calc(100% - 1rem - env(safe-area-inset-left) - env(safe-area-inset-right)); + max-width: 338px; + height: calc(100vh - 1rem); + height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); + min-height: 0; + margin: calc(.5rem + env(safe-area-inset-top)) auto calc(.5rem + env(safe-area-inset-bottom)); + + .modal-content { + min-width: 0; + min-height: 0; + } + + .modal-body { + padding: .5rem; + overscroll-behavior-y: contain; + } + + .picker-panel { + --bb-picker-panel-body-width: min(320px, calc(100vw - 2rem - 2px - env(safe-area-inset-left) - env(safe-area-inset-right))); + width: 100%; + border: 0; + box-shadow: none; + + .picker-panel-body { + flex-direction: column; + + .picker-panel-sidebar { + width: 100%; + overflow: visible; + border-right: 0; + border-bottom: var(--bs-border-width) solid var(--bs-border-color); + + &.is-default { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: .3rem; + } + } + + .picker-panel-body-main { + width: 100%; + + .picker-panel-date { + width: var(--bb-picker-panel-body-width); + flex-shrink: 0; + } + + .picker-panel-content { + width: auto; + margin: .5rem; + } + } + } + + .clock-panel-body { + flex-shrink: 0; + } + + .picker-panel-time { + padding: .5rem; + gap: .5rem; + + .form-control { + min-width: 0; + flex: 1; + } + } + } +} From 4cd22c08ebda8cf24a91ef95c432620e190b263c Mon Sep 17 00:00:00 2001 From: Tony-ST0754 <6914529@qq.com> Date: Sun, 1 Nov 2026 16:33:58 +0800 Subject: [PATCH 02/68] revert:remove UseNativeMobileComponents parameter revert:remove UseNativeMobileComponents parameter --- .../Components/DateTimePicker/DateTimePicker.razor.cs | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs index 238fc5745ab..1cf74c3b79d 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs @@ -280,13 +280,6 @@ public string? Format [Parameter] public RenderFragment? DayDisabledTemplate { get; set; } - /// - /// 获得/设置 是否启用 HTML 原生移动端组件 默认 false - /// Gets or sets Whether to Use Native Mobile Components. Default is false - /// - [Parameter] - public bool UseNativeMobileComponents { get; set; } - /// /// 获得/设置 是否显示中国阴历历法 默认 false /// Gets or sets Whether to Show Chinese Lunar Calendar. Default is false From 19222d68a06f2fc1b8b802dcb66cef6da7e9240c Mon Sep 17 00:00:00 2001 From: Tony-ST0754 <6914529@qq.com> Date: Sun, 1 Nov 2026 17:39:34 +0800 Subject: [PATCH 03/68] feat(Modal):add Zindex Parameter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat:给 Modal 模态窗添加 Zindex 参数，给用户来控制弹窗层级 --- src/BootstrapBlazor/Components/Modal/Modal.razor | 4 ++-- src/BootstrapBlazor/Components/Modal/Modal.razor.cs | 12 ++++++++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor/Components/Modal/Modal.razor b/src/BootstrapBlazor/Components/Modal/Modal.razor index c8d286e6f3a..00ffd5df954 100644 --- a/src/BootstrapBlazor/Components/Modal/Modal.razor +++ b/src/BootstrapBlazor/Components/Modal/Modal.razor @@ -1,9 +1,9 @@ -@namespace BootstrapBlazor.Components +@namespace BootstrapBlazor.Components @inherits BootstrapModuleComponentBase @attribute [BootstrapModuleAutoLoader(JSObjectReference = true)] - @if (ViewMode == DatePickerViewMode.DateTime) @@ -121,100 +207,6 @@ }
; - RenderFragment RenderDateView => @ - - - @foreach (var w in WeekLists) - { - - } - - @for (var week = StartDate; week < EndDate; week = GetSafeDayDateTime(week, 7)) - { - - @for (var index = 0; index < 7; index++) - { - var day = GetSafeDayDateTime(week, index); - var text = GetDayText(day.Day); - var isOverflow = IsDayOverflow(week, index); - - } - - } - -
@w
- @if (isOverflow) - { - - - } - else if (IsDisabled(day)) - { - - @if (ShowLunar) - { - @text - @GetLunarText(day) - } - else if (DayDisabledTemplate != null) - { - @DayDisabledTemplate(day) - } - else - { - @text - } - - } - else - { - - - } -
; - - RenderFragment RenderYearView => @ - - @for (var row = 0; row < 5; row++) - { - - @for (var index = 0; index < 4; index++) - { - var year = index + row * 4; - var isOverflow = IsYearOverflow(CurrentDate, year - (CurrentDate.Year % 20)); - - } - - } - -
- @if (isOverflow) - { - - - } - else - { - - } -
; - - RenderFragment RenderMonthView => @ - - @for (var row = 0; row < 3; row++) - { - - @for (var index = 0; index < 4; index++) - { - var month = index + row * 4 + 1; - - } - - } - -
- -
; - RenderFragment RenderShowFooter => @
@if (ShowClearButton) From 9cee96aabfbc675b9c8cc197f148967b5d85531d Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Nov 2026 19:18:26 +0800 Subject: [PATCH 11/68] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=20Size=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Enums/Size.cs | 32 +++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/BootstrapBlazor/Enums/Size.cs b/src/BootstrapBlazor/Enums/Size.cs index 40629c7ccee..c9a574c26b9 100644 --- a/src/BootstrapBlazor/Enums/Size.cs +++ b/src/BootstrapBlazor/Enums/Size.cs @@ -8,55 +8,55 @@ namespace BootstrapBlazor.Components; /// -/// Size 枚举类型 -/// Size enumtype +/// 用于指定组件尺寸或响应式断点的枚举类型 +/// Specifies a component size or responsive breakpoint. /// public enum Size { /// - /// 无设置 - /// 无Sets + /// 未指定尺寸 + /// No size specified. /// None, /// - /// xs 超小设置小于 576px - /// xs 超小Sets小于 576px + /// 超小尺寸；作为断点时适用于小于 576px 的视口 + /// Extra-small size; as a breakpoint, applies to viewports narrower than 576px. /// [Description("xs")] ExtraSmall, /// - /// sm 小设置大于等于 576px - /// sm 小Sets大于等于 576px + /// 小尺寸；作为断点时适用于宽度大于等于 576px 的视口 + /// Small size; as a breakpoint, applies to viewports 576px wide and above. /// [Description("sm")] Small, /// - /// md 中等设置大于等于 768px - /// md 中等Sets大于等于 768px + /// 中等尺寸；作为断点时适用于宽度大于等于 768px 的视口 + /// Medium size; as a breakpoint, applies to viewports 768px wide and above. /// [Description("md")] Medium, /// - /// lg 大设置大于等于 992px - /// lg 大Sets大于等于 992px + /// 大尺寸；作为断点时适用于宽度大于等于 992px 的视口 + /// Large size; as a breakpoint, applies to viewports 992px wide and above. /// [Description("lg")] Large, /// - /// xl 超大设置大于等于 1200px - /// xl 超大Sets大于等于 1200px + /// 超大尺寸；作为断点时适用于宽度大于等于 1200px 的视口 + /// Extra-large size; as a breakpoint, applies to viewports 1200px wide and above. /// [Description("xl")] ExtraLarge, /// - /// xl 超大设置大于等于 1400px - /// xl 超大Sets大于等于 1400px + /// 超超大尺寸；作为断点时适用于宽度大于等于 1400px 的视口 + /// Extra-extra-large size; as a breakpoint, applies to viewports 1400px wide and above. /// [Description("xxl")] ExtraExtraLarge From 8a62f0b2776e7f8ba977383a8d26dccec9ea1618 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Nov 2026 19:28:01 +0800 Subject: [PATCH 12/68] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20Dialog?= =?UTF-8?q?=20=E5=AE=A2=E6=88=B7=E7=AB=AF=E8=84=9A=E6=9C=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/wwwroot/modules/dialog.js | 81 +++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 src/BootstrapBlazor/wwwroot/modules/dialog.js diff --git a/src/BootstrapBlazor/wwwroot/modules/dialog.js b/src/BootstrapBlazor/wwwroot/modules/dialog.js new file mode 100644 index 00000000000..25981dd59c4 --- /dev/null +++ b/src/BootstrapBlazor/wwwroot/modules/dialog.js @@ -0,0 +1,81 @@ +import EventHandler from "./event-handler.js" + +const Dialog = { + init(el, config) { + const dialog = el.querySelector('dialog') + const options = { + toggleSelector: '.dropdown-toggle', + isDisabled: () => false, + hideCallback: null, + ...(config || {}) + } + const instance = { + mode: 'dialog', + el, + dialog, + toggleSelector: options.toggleSelector, + isShown: () => dialog.open, + show: () => { + if (!options.isDisabled() && !dialog.open) { + dialog.showModal() + } + }, + hide: () => { + if (dialog.open) { + dialog.close() + } + }, + toggle: () => { + if (dialog.open) { + instance.hide() + } + else { + instance.show() + } + }, + onToggle: e => { + if (options.isDisabled()) { + e.preventDefault() + } + else { + instance.toggle() + } + }, + onClose: () => { + if (options.hideCallback) { + options.hideCallback() + } + }, + onDialogClick: e => { + if (e.target.closest('.btn-close')?.closest('dialog') === dialog) { + instance.hide() + return + } + + if (e.target === dialog) { + const rect = dialog.getBoundingClientRect() + if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) { + instance.hide() + } + } + } + } + + EventHandler.on(el, 'click', options.toggleSelector, instance.onToggle) + EventHandler.on(dialog, 'close', instance.onClose) + EventHandler.on(dialog, 'click', instance.onDialogClick) + + return instance + }, + + dispose(instance) { + EventHandler.off(instance.el, 'click', instance.toggleSelector, instance.onToggle) + EventHandler.off(instance.dialog, 'close', instance.onClose) + EventHandler.off(instance.dialog, 'click', instance.onDialogClick) + if (instance.dialog.open) { + instance.dialog.close() + } + } +} + +export default Dialog From 5d9548d9abebbe15adae317e404581d505aa1677 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Nov 2026 19:29:35 +0800 Subject: [PATCH 13/68] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/DateTimePicker/DateTimePicker.razor.cs | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs index 76201cc1e1c..97b3fa7ff8a 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs @@ -383,8 +383,7 @@ protected override void OnInitialized() } /// - /// OnParametersSet 方法 - /// OnParametersSet method + /// /// protected override void OnParametersSet() { From 50d7bea836071bbe84862f55dc1d35e9582527da Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Nov 2026 19:31:20 +0800 Subject: [PATCH 14/68] =?UTF-8?q?feat:=20=E8=A7=86=E5=8F=A3=E5=8F=98?= =?UTF-8?q?=E5=8C=96=E6=97=B6=E8=B0=83=E7=94=A8=20reset=20=E5=AE=A2?= =?UTF-8?q?=E6=88=B7=E7=AB=AF=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimePicker/DateTimePicker.razor.cs | 36 ++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs index 97b3fa7ff8a..43dc948363d 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs @@ -371,6 +371,9 @@ public string? Format private DatePickerBody _pickerBody = default!; + private Size _size = Size.None; + private bool? _dialogMode; + /// /// /// @@ -487,11 +490,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { // 首次渲染时同步 IsButton 参数值 _isButton = IsButton; + _dialogMode = DialogModeString != null; } - if (_isButton != IsButton) + var dialogMode = DialogModeString != null; + if (_isButton != IsButton || _dialogMode != dialogMode) { _isButton = IsButton; + _dialogMode = dialogMode; await InvokeVoidAsync("reset", Id); } } @@ -650,4 +656,32 @@ public Task TriggerHideCallback() StateHasChanged(); return Task.CompletedTask; } + + private string? DialogModeString => _size < Size.Medium ? "true" : null; + + private string? DialogHeaderText => DisplayText ?? PlaceholderString; + + private Task OnBreakPointChangedAsync(BreakPoint breakpoint) + { + var size = breakpoint switch + { + BreakPoint.ExtraExtraSmall => Size.ExtraSmall, + BreakPoint.ExtraSmall => Size.ExtraSmall, + BreakPoint.Small => Size.Small, + BreakPoint.Medium => Size.Medium, + BreakPoint.Large => Size.Large, + BreakPoint.ExtraLarge => Size.ExtraLarge, + BreakPoint.ExtraExtraLarge => Size.ExtraExtraLarge, + _ => Size.None + }; + + if (size != _size) + { + // 更新组件渲染逻辑 + _size = size; + StateHasChanged(); + } + + return Task.CompletedTask; + } } From 1405306fd198fb76b035102e73b3debbdc59411b Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Nov 2026 19:32:34 +0800 Subject: [PATCH 15/68] =?UTF-8?q?refactor:=20=E5=A2=9E=E5=8A=A0=20data-bb-?= =?UTF-8?q?dialog=20=E7=8A=B6=E6=80=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit true 时创建 dialog 否则 popup --- .../Components/DateTimePicker/DateTimePicker.razor | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor index f6883d0b98c..d5da4bd2f18 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor @@ -7,7 +7,8 @@ { } -
+
@if(IsButton) { +
+
+ @RenderDatePickerBody +
+ + }
+ + + +@code { + RenderFragment RenderDatePickerBody =>@ + ; +} diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss index 92d09b6a2bd..8b8541f9424 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss @@ -36,6 +36,36 @@ .picker-panel { display: none } + + .datetime-picker-dialog { + overflow: auto; + padding: 0; + border: var(--bs-border-width) solid var(--bs-border-color-translucent); + border-radius: var(--bs-border-radius); + outline: 0; + box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); + + &[open] .picker-panel { + display: block; + border: 0; + box-shadow: none; + } + + .datetime-picker-dialog-header { + display: flex; + align-items: center; + padding: .5rem 1rem; + border-bottom: var(--bs-border-width) solid var(--bs-border-color); + border-top-left-radius: var(--bs-border-radius); + border-top-right-radius: var(--bs--border-radius); + + .datetime-picker-dialog-header-title { + flex: 1 1 auto; + margin-bottom: 0; + line-height: 1.5; + } + } + } } .datetime-picker-bar { From 9e720bf6b2e7e9453f5ca345cfffa2367e3a77a2 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Nov 2026 20:48:54 +0800 Subject: [PATCH 17/68] =?UTF-8?q?feat:=20=E9=87=8D=E6=9E=84=20Picker=20?= =?UTF-8?q?=E8=84=9A=E6=9C=AC=E8=A7=86=E5=8F=A3=E6=94=B9=E5=8F=98=E7=94=B1?= =?UTF-8?q?=E5=AE=A2=E6=88=B7=E7=AB=AF=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimePicker/DateTimePicker.razor | 32 +++---- .../DateTimePicker/DateTimePicker.razor.cs | 34 +------- .../DateTimePicker/DateTimePicker.razor.js | 86 +++++++++++++++---- 3 files changed, 79 insertions(+), 73 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor index 49054f7746c..fd644cf7f52 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor @@ -7,8 +7,7 @@ { } -
+
@if(IsButton) { -
-
- @RenderDatePickerBody -
- - } + +
+
@DialogHeaderText
+ +
+
+ @RenderDatePickerBody +
+
- - @code { - RenderFragment RenderDatePickerBody =>@ @ /// /// @@ -490,14 +487,11 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { // 首次渲染时同步 IsButton 参数值 _isButton = IsButton; - _dialogMode = DialogModeString != null; } - var dialogMode = DialogModeString != null; - if (_isButton != IsButton || _dialogMode != dialogMode) + if (_isButton != IsButton) { _isButton = IsButton; - _dialogMode = dialogMode; await InvokeVoidAsync("reset", Id); } } @@ -657,31 +651,5 @@ public Task TriggerHideCallback() return Task.CompletedTask; } - private string? DialogModeString => _size < Size.Medium ? "true" : null; - private string? DialogHeaderText => DisplayText ?? PlaceholderString; - - private Task OnBreakPointChangedAsync(BreakPoint breakpoint) - { - var size = breakpoint switch - { - BreakPoint.ExtraExtraSmall => Size.ExtraSmall, - BreakPoint.ExtraSmall => Size.ExtraSmall, - BreakPoint.Small => Size.Small, - BreakPoint.Medium => Size.Medium, - BreakPoint.Large => Size.Large, - BreakPoint.ExtraLarge => Size.ExtraLarge, - BreakPoint.ExtraExtraLarge => Size.ExtraExtraLarge, - _ => Size.None - }; - - if (size != _size) - { - // 更新组件渲染逻辑 - _size = size; - StateHasChanged(); - } - - return Task.CompletedTask; - } } diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js index 30afd7ecdb9..087207e043b 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js @@ -1,6 +1,7 @@ -import Data from "../../modules/data.js" +import Data from "../../modules/data.js" import EventHandler from "../../modules/event-handler.js" import Popover from "../../modules/base-popover.js" +import Dialog from "../../modules/dialog.js" export function init(id, invoke, options) { const el = document.getElementById(id) @@ -8,9 +9,25 @@ export function init(id, invoke, options) { return } - const popover = createPopover(el, invoke, options); - const input = handlerInput(el, popover); - Data.set(id, { el, input, invoke, options, popover }); + const mediaQuery = window.matchMedia('(min-width: 768px)'); + const panel = el.querySelector(el.getAttribute('data-bb-dropdown')); + const dialogBody = el.querySelector('.datetime-picker-dialog-body'); + const picker = createPicker(el, invoke, options, mediaQuery, panel, dialogBody); + const onModeChanged = () => reset(id); + const data = { el, invoke, options, picker, mediaQuery, panel, dialogBody, onModeChanged }; + data.input = handlerInput(data); + Data.set(id, data); + EventHandler.on(mediaQuery, 'change', onModeChanged); +} + +const createPicker = (el, invoke, options, mediaQuery, panel, dialogBody) => { + if (dialogBody && !mediaQuery.matches) { + dialogBody.append(panel); + return createDialog(el, invoke, options); + } + + el.append(panel); + return createPopover(el, invoke, options); } const createPopover = (el, invoke, options) => { @@ -25,24 +42,37 @@ const createPopover = (el, invoke, options) => { } } }); + popover.mode = 'popover'; return popover; } -const handlerInput = (el, popover) => { - const input = el.querySelector('.datetime-picker-input'); +const createDialog = (el, invoke, options) => { + const isDisabled = () => el.classList.contains('disabled') || el.querySelector('.form-control')?.disabled; + return Dialog.init(el, { + isDisabled, + hideCallback: () => { + if (invoke) { + invoke.invokeMethodAsync(options.triggerHideCallback); + } + } + }); +} + +const handlerInput = picker => { + const input = picker.el.querySelector('.datetime-picker-input'); if (input) { EventHandler.on(input, 'keydown', e => { - if (e.key === 'Tab' && popover.isShown()) { - popover.hide(); + if (e.key === 'Tab' && picker.picker.mode === 'popover' && picker.picker.isShown()) { + picker.picker.hide(); } }); EventHandler.on(input, 'keyup', e => { if (e.key === 'Escape') { - popover.hide(); + picker.picker.hide(); input.blur(); } - else if (e.key === 'Tab') { - popover.show(); + else if (e.key === 'Tab' && picker.picker.mode === 'popover') { + picker.picker.show(); } }); } @@ -59,19 +89,33 @@ const disposeInput = input => { export function reset(id) { const picker = Data.get(id); if (picker) { - const { el, input, popover, invoke, options } = picker; - disposeInput(input); - Popover.dispose(popover); + const { el, input, invoke, options, mediaQuery, panel, dialogBody } = picker; + disposePicker(picker.picker); + + picker.picker = createPicker(el, invoke, options, mediaQuery, panel, dialogBody); + if (input !== el.querySelector('.datetime-picker-input')) { + disposeInput(input); + picker.input = handlerInput(picker); + } + } +} - picker.popover = createPopover(el, invoke, options); - picker.input = handlerInput(picker.el, picker.popover); +const disposePicker = picker => { + if (picker.mode === 'dialog') { + Dialog.dispose(picker); + } + else { + if (picker.popover?._isShown()) { + picker.hide(); + } + Popover.dispose(picker); } } export function hide(id) { const data = Data.get(id) if (data) { - data.popover.hide() + data.picker.hide() } } @@ -80,8 +124,12 @@ export function dispose(id) { Data.remove(id) if (data) { - const { input, popover } = data; + const { input, picker, mediaQuery, onModeChanged, panel, dialogBody } = data; + EventHandler.off(mediaQuery, 'change', onModeChanged); disposeInput(input); - Popover.dispose(popover) + disposePicker(picker); + if (dialogBody) { + dialogBody.append(panel); + } } } From ff1f732f26fd2a2d6ac97a41b55d1d5ca5c57fa7 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Nov 2026 20:57:34 +0800 Subject: [PATCH 18/68] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/DatePickerDialogForm.razor | 57 +++++++++++++++++++ .../Components/Samples/DateTimePickers.razor | 5 ++ .../Samples/DateTimePickers.razor.cs | 11 ++++ 3 files changed, 73 insertions(+) create mode 100644 src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor diff --git a/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor b/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor new file mode 100644 index 00000000000..8db2974dac1 --- /dev/null +++ b/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor @@ -0,0 +1,57 @@ +@inject IStringLocalizer Localizer + + +
+
+ +
+
+ +
+
+ +
+
+
+
+ @if (_submitted) + { +
@Localizer["NestedSubmitted"]
+ } +
+ @DateValue?.ToString("yyyy-MM-dd") + @DateTimeValue?.ToString("yyyy-MM-dd HH:mm:ss") + @RangeValue.Start.ToString("yyyy-MM-dd") — @RangeValue.End.ToString("yyyy-MM-dd") +
+ + +@code { + /// + /// 获得/设置 表单日期。 + /// Gets or sets the form date. + /// + [Required] + public DateTime? DateValue { get; set; } + + /// + /// 获得/设置 表单日期时间。 + /// Gets or sets the form date and time. + /// + public DateTime? DateTimeValue { get; set; } = DateTime.Now; + + /// + /// 获得/设置 表单日期范围。 + /// Gets or sets the form date range. + /// + public DateTimeRangeValue RangeValue { get; set; } = new(); + + private bool _submitted; + + private Task OnValidSubmitAsync(EditContext context) + { + _submitted = true; + return Task.CompletedTask; + } +} diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor index fe9c06c237d..2fd76360549 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor @@ -1,9 +1,14 @@ @page "/datetime-picker" +@page "/datetime-picker/dialog"

@Localizer["Title"]

@Localizer["Description"]

+ +
-
+
@RenderDatePickerBody
diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js index 5f1f885bcaa..6d7053666ab 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.js @@ -11,7 +11,7 @@ export function init(id, invoke, options) { const mediaQuery = window.matchMedia('(min-width: 768px)'); const panel = el.querySelector(el.getAttribute('data-bb-dropdown')); - const dialogBody = el.querySelector('.datetime-picker-dialog-body'); + const dialogBody = el.querySelector('.datetime-dialog-body'); const picker = createPicker(el, invoke, options, mediaQuery, panel, dialogBody); const onModeChanged = () => syncPickerMode(id); const data = { el, invoke, options, picker, mediaQuery, panel, dialogBody, onModeChanged, isPopoverHiding: false }; diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss index 8b8541f9424..b45228593f6 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss @@ -36,34 +36,34 @@ .picker-panel { display: none } +} - .datetime-picker-dialog { - overflow: auto; - padding: 0; - border: var(--bs-border-width) solid var(--bs-border-color-translucent); - border-radius: var(--bs-border-radius); - outline: 0; - box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); +.datetime-dialog { + overflow: auto; + padding: 0; + border: var(--bs-border-width) solid var(--bs-border-color-translucent); + border-radius: var(--bs-border-radius); + outline: 0; + box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); - &[open] .picker-panel { - display: block; - border: 0; - box-shadow: none; - } + &[open] .picker-panel { + display: block; + border: 0; + box-shadow: none; + } - .datetime-picker-dialog-header { - display: flex; - align-items: center; - padding: .5rem 1rem; - border-bottom: var(--bs-border-width) solid var(--bs-border-color); - border-top-left-radius: var(--bs-border-radius); - border-top-right-radius: var(--bs--border-radius); + .datetime-dialog-header { + display: flex; + align-items: center; + padding: .5rem 1rem; + border-bottom: var(--bs-border-width) solid var(--bs-border-color); + border-top-left-radius: var(--bs-border-radius); + border-top-right-radius: var(--bs--border-radius); - .datetime-picker-dialog-header-title { - flex: 1 1 auto; - margin-bottom: 0; - line-height: 1.5; - } + .datetime-dialog-header-title { + flex: 1 1 auto; + margin-bottom: 0; + line-height: 1.5; } } } From c5f5520c3d071ddee19ce4eea98b4008881d752c Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 11:53:24 +0800 Subject: [PATCH 24/68] =?UTF-8?q?refactor:=20Body=20=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E7=A7=BB=E9=99=A4=20ShowSidebar=20=E5=8F=82=E6=95=B0=E7=BB=9F?= =?UTF-8?q?=E4=B8=80=E7=94=B1=E5=AE=B9=E5=99=A8=E7=BB=84=E4=BB=B6=E6=8F=90?= =?UTF-8?q?=E4=BE=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimePicker/DatePickerBody.razor | 247 +++++----- .../DateTimePicker/DatePickerBody.razor.cs | 11 +- .../DateTimePicker/DatePickerBody.razor.scss | 450 +++++++++--------- 3 files changed, 328 insertions(+), 380 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor index 8db866aa238..c2e4ab7f422 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor @@ -1,169 +1,144 @@ -@namespace BootstrapBlazor.Components +@namespace BootstrapBlazor.Components @inherits BootstrapComponentBase
-
- @if (ShowSidebar) - { -
- @if (SidebarTemplate != null) +
+
+
+ @if (ShowLeftButtons) { - @SidebarTemplate(OnClickSidebarButton) + + } - else +
+ @YearString + @MonthString + @if (IsDateTimeMode && PickTimeMode == PickTimeMode.Clock) + { + @CurrentTime.ToString(TimeFormat) + } +
+ @if (ShowRightButtons) { -
- -
-
- -
-
- -
+ + }
- } -
-
-
-
- @if (ShowLeftButtons) - { - - - } -
- @YearString - @MonthString - @if (IsDateTimeMode && PickTimeMode == PickTimeMode.Clock) +
+ + + + @foreach (var w in WeekLists) { - @CurrentTime.ToString(TimeFormat) + } - - @if (ShowRightButtons) + + @for (var week = StartDate; week < EndDate; week = GetSafeDayDateTime(week, 7)) { - - - } - -
-
@w
- - - @foreach (var w in WeekLists) - { - - } - - @for (var week = StartDate; week < EndDate; week = GetSafeDayDateTime(week, 7)) + + @for (var index = 0; index < 7; index++) { - - @for (var index = 0; index < 7; index++) + var day = GetSafeDayDateTime(week, index); + var text = GetDayText(day.Day); + var isOverflow = IsDayOverflow(week, index); + + } - - } - -
@w
+ @if (isOverflow) + { + - + } + else if (IsDisabled(day)) { - var day = GetSafeDayDateTime(week, index); - var text = GetDayText(day.Day); - var isOverflow = IsDayOverflow(week, index); - - @if (isOverflow) + + @if (ShowLunar) { - - + @text + @GetLunarText(day) } - else if (IsDisabled(day)) + else if (DayDisabledTemplate != null) { - - @if (ShowLunar) - { - @text - @GetLunarText(day) - } - else if (DayDisabledTemplate != null) - { - @DayDisabledTemplate(day) - } - else - { - @text - } - + @DayDisabledTemplate(day) } else { - - + @text } -
- - - @for (var row = 0; row < 5; row++) - { - - @for (var index = 0; index < 4; index++) + else { - var year = index + row * 4; - var isOverflow = IsYearOverflow(CurrentDate, year - (CurrentDate.Year % 20)); - + + } - + } - -
- @if (isOverflow) - { - - - } - else - { - - } -
- - - @for (var row = 0; row < 3; row++) + + } + +
+ + + @for (var row = 0; row < 5; row++) + { + + @for (var index = 0; index < 4; index++) { - - @for (var index = 0; index < 4; index++) + var year = index + row * 4; + var isOverflow = IsYearOverflow(CurrentDate, year - (CurrentDate.Year % 20)); + + } - + } - -
+ @if (isOverflow) + { + - + } + else { - var month = index + row * 4 + 1; - - -
-
-
- @if (ViewMode == DatePickerViewMode.DateTime) - { - - @ChildContent - - - - - - } + + } + + + + + @for (var row = 0; row < 3; row++) + { + + @for (var index = 0; index < 4; index++) + { + var month = index + row * 4 + 1; + + } + + } + +
+ +
+ @if (ViewMode == DatePickerViewMode.DateTime) + { + + @ChildContent + + + + + + }
@if (IsDateTimeMode && PickTimeMode == PickTimeMode.Dropdown) { diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs index 8580c2f0c22..f5738dd99e6 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs @@ -54,7 +54,6 @@ private DateTime StartDate private bool _showClockPicker; private string? ClassString => CssBuilder.Default("picker-panel") - .AddClass("is-sidebar", ShowSidebar) .AddClass("is-lunar", ShowLunar) .AddClassFromAttributes(AdditionalAttributes) .Build(); @@ -203,6 +202,8 @@ private bool IsRange(DateTime day) => Ranger != null /// Gets or sets Whether to Show Sidebar. Default is false /// [Parameter] + [Obsolete()] + [ExcludeFromCodeCoverage] public bool ShowSidebar { get; set; } /// @@ -977,14 +978,6 @@ private async Task ClickClearButton() } } - private async Task OnClickSidebarButton(DateTime d) - { - CurrentDate = d.Date; - CurrentTime = d.TimeOfDay; - - await ClickConfirmButton(); - } - private void ResetTimePickerPanel() { // 关闭 TimerPicker diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss index 2b9d677cf59..90e5614f099 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss @@ -14,299 +14,279 @@ line-height: 30px; display: inline-block; - &.is-sidebar { - --bb-picker-panel-side-width: 110px; - } + .picker-panel-body-main-wrapper { + display: flex; + transition: transform .3s ease-in-out; - @include pick-side; + &.is-open { + transform: translateX(calc(0px - var(--bb-picker-panel-body-width))); + } + } - .picker-panel-body { + .picker-panel-header { + margin: 12px; display: flex; + align-items: center; - .picker-panel-sidebar { - width: var(--bb-picker-panel-side-width); + .pick-panel-arrow-left, + .pick-panel-arrow-right { + margin: 0 6px; } - .picker-panel-body-main { - width: var(--bb-picker-panel-body-width); - overflow: hidden; - display: flex; + .picker-panel-icon-btn { + color: var(--bs-body-color); + border: 0; + background: transparent; + cursor: pointer; + outline: none; + padding: 0 6px; - .picker-panel-body-main-wrapper { - display: flex; - transition: transform .3s ease-in-out; + &:hover { + color: var(--bb-picker-hover-color); + } + } - &.is-open { - transform: translateX(calc(0px - var(--bb-picker-panel-body-width))); - } + .picker-panel-header-bar { + .picker-panel-header-label { + font-size: 14px; } + } + + .picker-panel-header-label { + font-size: 16px; + font-weight: 500; + padding: 0 4px; + text-align: center; + cursor: pointer; + user-select: none; + white-space: nowrap; + + &:hover { + color: var(--bb-picker-hover-color); + } + } + } - .picker-panel-header { - margin: 12px; - display: flex; - align-items: center; + .picker-panel-content { + width: 290px; + position: relative; + margin: 15px; - .pick-panel-arrow-left, - .pick-panel-arrow-right { - margin: 0 6px; - } + table { + table-layout: fixed; + width: 100%; + user-select: none; - .picker-panel-icon-btn { - color: var(--bs-body-color); - border: 0; - background: transparent; + .date-table-row { + font-size: 12px; + } + + td { + text-align: center; + + .cell { + display: block; + margin: 0 auto; cursor: pointer; - outline: none; - padding: 0 6px; - &:hover { - color: var(--bb-picker-hover-color); + &:has(.bb-picker-body-lunar-text):hover { + color: var(--bb-picker-panel-today-color); + + &:before { + content: ""; + position: absolute; + width: 33px; + height: 33px; + border-radius: var(--bs-border-radius); + background-color: var(--bb-picker-panel-today-bg); + top: 3px; + left: -3.5px; + opacity: .8; + } + + .bb-picker-body-lunar-text { + color: var(--bb-picker-panel-today-color); + } } - } - .picker-panel-header-bar { - .picker-panel-header-label { - font-size: 14px; + span.is-holiday, span.is-workday { + background-color: #c0c4cc; + color: var(--bb-picker-panel-today-color); + height: 14px; + width: 15px; + font-size: 9px; + border-radius: 3px; + top: -1px; + right: -9px; + line-height: 14px; + opacity: .8; } } - .picker-panel-header-label { - font-size: 16px; - font-weight: 500; - padding: 0 4px; - text-align: center; - cursor: pointer; - user-select: none; - white-space: nowrap; - - &:hover { + &.today { + .cell { color: var(--bb-picker-hover-color); + font-weight: 700; } } - } - .picker-panel-content { - width: 290px; - position: relative; - margin: 15px; - - table { - table-layout: fixed; - width: 100%; - user-select: none; - - .date-table-row { - font-size: 12px; - } - - td { - text-align: center; - - .cell { - display: block; - margin: 0 auto; - cursor: pointer; - - &:has(.bb-picker-body-lunar-text):hover { - color: var(--bb-picker-panel-today-color); - - &:before { - content: ""; - position: absolute; - width: 33px; - height: 33px; - border-radius: var(--bs-border-radius); - background-color: var(--bb-picker-panel-today-bg); - top: 3px; - left: -3.5px; - opacity: .8; - } - - .bb-picker-body-lunar-text { - color: var(--bb-picker-panel-today-color); - } - } - - span.is-holiday, span.is-workday { - background-color: #c0c4cc; - color: var(--bb-picker-panel-today-color); - height: 14px; - width: 15px; - font-size: 9px; - border-radius: 3px; - top: -1px; - right: -9px; - line-height: 14px; - opacity: .8; - } - } + &.current:not(.disabled), + &.start:not(.disabled), + &.end:not(.disabled) { + .cell { + color: var(--bb-picker-panel-today-color); - &.today { - .cell { - color: var(--bb-picker-hover-color); - font-weight: 700; - } + &:not(:has(.bb-picker-body-lunar-text)) { + background-color: var(--bb-picker-panel-today-bg); } - &.current:not(.disabled), - &.start:not(.disabled), - &.end:not(.disabled) { - .cell { - color: var(--bb-picker-panel-today-color); - - &:not(:has(.bb-picker-body-lunar-text)) { - background-color: var(--bb-picker-panel-today-bg); - } - - &:has(.bb-picker-body-lunar-text) { - &:before { - content: ""; - position: absolute; - width: 33px; - height: 33px; - border-radius: var(--bs-border-radius); - background-color: #409eff; - top: 3px; - left: -3.5px; - } - } + &:has(.bb-picker-body-lunar-text) { + &:before { + content: ""; + position: absolute; + width: 33px; + height: 33px; + border-radius: var(--bs-border-radius); + background-color: #409eff; + top: 3px; + left: -3.5px; } } + } + } - &:not(.next-month):not(.prev-month):not(.disabled) { - &:not(.current):not(.start):not(.end):not(.range) { - .cell { - &.is-solar-term:not(:hover) { - .bb-picker-body-lunar-text { - color: var(--bs-success); - } - } - - &.is-festival:not(:hover) { - .bb-picker-body-lunar-text { - color: var(--bs-info); - } - } + &:not(.next-month):not(.prev-month):not(.disabled) { + &:not(.current):not(.start):not(.end):not(.range) { + .cell { + &.is-solar-term:not(:hover) { + .bb-picker-body-lunar-text { + color: var(--bs-success); } } - .cell { - span.is-holiday { - background-color: var(--bs-danger); - } - - span.is-workday { - background-color: var(--bs-black); + &.is-festival:not(:hover) { + .bb-picker-body-lunar-text { + color: var(--bs-info); } } } + } - &.range { - position: relative; - - &.start:before { - border-top-left-radius: 40%; - border-bottom-left-radius: 40%; - left: 6px; - } - - &.end:before { - border-top-right-radius: 40%; - border-bottom-right-radius: 40%; - right: 6px; - } - - &:before { - content: ""; - position: absolute; - background-color: #f2f6fc; - top: 4px; - bottom: 4px; - left: 0; - right: 0; - } + .cell { + span.is-holiday { + background-color: var(--bs-danger); } - &.disabled { - .cell { - cursor: not-allowed; - color: #c0c4cc; - } + span.is-workday { + background-color: var(--bs-black); } } } - .year-table, .month-table { - margin-block-start: 29px; + &.range { + position: relative; - tr { - border-top: 1px solid var(--bs-border-color); + &.start:before { + border-top-left-radius: 40%; + border-bottom-left-radius: 40%; + left: 6px; } - } - .year-table td { - padding: 13px 0; + &.end:before { + border-top-right-radius: 40%; + border-bottom-right-radius: 40%; + right: 6px; + } - .cell { - width: 48px; - height: 24px; - line-height: 24px; - border-radius: 16px; + &:before { + content: ""; + position: absolute; + background-color: #f2f6fc; + top: 4px; + bottom: 4px; + left: 0; + right: 0; } } - .month-table td { - padding: 27px 0; - + &.disabled { .cell { - width: 60px; - border-radius: 18px; + cursor: not-allowed; + color: #c0c4cc; } } + } + } - .date-table { - th { - padding: 5px; - font-weight: 400; - border-bottom: 1px solid var(--bs-border-color); - text-align: center; - } + .year-table, .month-table { + margin-block-start: 29px; - td { - padding: 7px 0; + tr { + border-top: 1px solid var(--bs-border-color); + } + } - &.next-month, &.prev-month { - color: #c0c4cc; - } + .year-table td { + padding: 13px 0; - &:not(.prev-month):not(.next-month):hover { - color: #409eff; - } + .cell { + width: 48px; + height: 24px; + line-height: 24px; + border-radius: 16px; + } + } - .cell { - width: 24px; - height: 24px; - margin: 0 auto; - line-height: 24px; - border-radius: 50%; - cursor: pointer; - position: relative; - display: flex; - flex-direction: column; - - .bb-picker-body-lunar-text { - top: 22px; - white-space: nowrap; - line-height: 9px; - height: 9px; - font-size: 9px; - } + .month-table td { + padding: 27px 0; - span { - position: absolute; - width: 100%; - } - } + .cell { + width: 60px; + border-radius: 18px; + } + } + + .date-table { + th { + padding: 5px; + font-weight: 400; + border-bottom: 1px solid var(--bs-border-color); + text-align: center; + } + + td { + padding: 7px 0; + + &.next-month, &.prev-month { + color: #c0c4cc; + } + + &:not(.prev-month):not(.next-month):hover { + color: #409eff; + } + + .cell { + width: 24px; + height: 24px; + margin: 0 auto; + line-height: 24px; + border-radius: 50%; + cursor: pointer; + position: relative; + display: flex; + flex-direction: column; + + .bb-picker-body-lunar-text { + top: 22px; + white-space: nowrap; + line-height: 9px; + height: 9px; + font-size: 9px; + } + + span { + position: absolute; + width: 100%; } } } From eaadcc555585c05245a76a1068841f9ae96e9d8b Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 12:04:30 +0800 Subject: [PATCH 25/68] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=94=B9=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/DateTimePicker/DatePickerBody.razor.cs | 2 +- .../Components/DateTimePicker/DatePickerBody.razor.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs index f5738dd99e6..4a1d4a88b7c 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs @@ -83,7 +83,7 @@ private bool IsRange(DateTime day) => Ranger != null && day >= Ranger.SelectedValue.Start.Date && day <= Ranger.SelectedValue.End.Date; - private string? WrapperClassString => CssBuilder.Default("picker-panel-body-main-wrapper") + private string? WrapperClassString => CssBuilder.Default("picker-panel-body") .AddClass("is-open", _showClockPicker) .Build(); diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss index 90e5614f099..acf99ee02e5 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss @@ -14,7 +14,7 @@ line-height: 30px; display: inline-block; - .picker-panel-body-main-wrapper { + .picker-panel-body { display: flex; transition: transform .3s ease-in-out; From 72f53a95e188d7237dbee6408af5818312ea92b6 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 12:04:49 +0800 Subject: [PATCH 26/68] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=20ShowSide?= =?UTF-8?q?r=20=E5=8F=82=E6=95=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/DateTimePicker/DateTimePicker.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor index ab815144b49..36ea54ac575 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor @@ -42,7 +42,7 @@ @code { RenderFragment RenderDatePickerBody => @ Date: Thu, 5 Nov 2026 12:05:09 +0800 Subject: [PATCH 27/68] =?UTF-8?q?feat:=20=E5=AE=8C=E5=96=84=20Clock=20?= =?UTF-8?q?=E6=B8=B2=E6=9F=93=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/DateTimePicker/DatePickerBody.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor index c2e4ab7f422..a235b42f0aa 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor @@ -126,7 +126,7 @@
- @if (ViewMode == DatePickerViewMode.DateTime) + @if (ViewMode == DatePickerViewMode.DateTime && PickTimeMode == PickTimeMode.Clock) { @ChildContent From b8fe6b7dc407c40262e4aaf2418435523845fffe Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 14:12:01 +0800 Subject: [PATCH 28/68] =?UTF-8?q?test:=20=E6=9B=B4=E6=96=B0=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- test/UnitTest/Components/DateTimePickerTest.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/UnitTest/Components/DateTimePickerTest.cs b/test/UnitTest/Components/DateTimePickerTest.cs index 35f3db9891f..51cc5352e9d 100644 --- a/test/UnitTest/Components/DateTimePickerTest.cs +++ b/test/UnitTest/Components/DateTimePickerTest.cs @@ -362,7 +362,7 @@ public void SwitchTimeView_Ok() var labels = cut.FindAll(".picker-panel-header-label"); cut.InvokeAsync(() => labels[2].Click()); - cut.Contains("picker-panel-body-main-wrapper is-open"); + cut.Contains("picker-panel-body is-open"); } [Fact] From 0a798da004f81c3d81f07685f5012a521a93f3c3 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 14:12:13 +0800 Subject: [PATCH 29/68] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/DateTimePickers.razor | 3 ++- .../Components/Samples/DateTimeRanges.razor | 4 ++++ src/BootstrapBlazor.Server/Locales/en-US.json | 2 ++ src/BootstrapBlazor.Server/Locales/zh-CN.json | 2 ++ 4 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor index 2fd76360549..9bf1dc5de73 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor @@ -19,7 +19,8 @@
+ Value="@DateTimePickerValue" OnValueChanged="@TimePickerValueChanged" + PickTimeMode="PickTimeMode.Clock"> diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor index 0fe8276d2a8..c31d5c3a0e5 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimeRanges.razor @@ -5,6 +5,10 @@

@Localizer["Description"]

+ + + + diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index f7405b4011f..4fe9ad9d5e4 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -1806,6 +1806,8 @@ "SidebarIntro": "When the ShowSidebar property value is set to true, the component displays the shortcut sidebar", "SidebarTip": "by setting ShowSidebar The parameter enables the display sidebar shortcut options function, by setting SidebarItems The parameter collection replaces the default shortcuts built into the component", "SidebarTitle": "Sidebar with shortcut keys", + "ResponsiveTitle": "Responsive dialog", + "ResponsiveIntro": "Below 768px, a native dialog always shows one calendar with navigation to select a date range. At 768px and above, a Popover follows RenderMode for single or double view. Crossing the breakpoint closes the panel; reopen it to use the new mode. The date picker's nested form example also demonstrates range selection inside a dialog.", "SingleViewTitle": "Single view mode", "Submit": "Submit", "Title": "Date Time Range Picker", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index f63eae1851d..8c0409d6793 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -1806,6 +1806,8 @@ "SidebarIntro": "设置 ShowSidebar 属性值为 true 时，组件显示快捷方式侧边栏", "SidebarTip": "通过设置 ShowSidebar 参数开启显示侧边栏快捷选项功能，通过设置 SidebarItems 参数集合替换组件内置的默认快捷项", "SidebarTitle": "带快捷键侧边栏", + "ResponsiveTitle": "响应式弹窗", + "ResponsiveIntro": "宽度小于 768px 时使用原生 dialog，并始终显示单日历视图，支持前后翻页选择日期范围；宽度不小于 768px 时使用 Popover，并按 RenderMode 显示单视图或双视图。跨越断点时关闭面板，再次打开使用新模式。也可在日期选择器的嵌套表单示例中验证弹窗内的范围选择。", "SingleViewTitle": "单选模式", "Submit": "提交", "Title": "DateTimeRange 日期时间段选择器", From 9cbddab8de65e53d483c58fd1794817c6b061589 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 14:12:27 +0800 Subject: [PATCH 30/68] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=20Range=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=88=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimeRange/DateTimeRange.razor | 26 ++++++++++++----- .../DateTimeRange/DateTimeRange.razor.cs | 11 +++++--- .../DateTimeRange/DateTimeRange.razor.scss | 28 ++++++++++++++++++- 3 files changed, 53 insertions(+), 12 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor index e418f132eb3..4ea7011ed3f 100644 --- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor +++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor @@ -1,4 +1,4 @@ -@namespace BootstrapBlazor.Components +@namespace BootstrapBlazor.Components @inherits PopoverDropdownBase @attribute [BootstrapModuleAutoLoader("DateTimePicker/DateTimePicker.razor.js", JSObjectReference = true)] @@ -19,7 +19,19 @@ { } -
+ +
+
@DialogHeaderText
+ +
+
+ @RenderRangeBody +
+ +
+ +@code { + RenderFragment RenderRangeBody => @
@if (ShowSidebar) { @@ -35,18 +47,18 @@ @if (RenderMode == DateTimeRangeRenderMode.Double) { - } - + MaxValue="MaxValue" MinValue="MinValue">
@@ -69,5 +81,5 @@ @ConfirmButtonText
-
-
+
; +} diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs index 72399af84aa..c261f665546 100644 --- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.cs @@ -144,8 +144,8 @@ private string? EndValueString public DatePickerViewMode ViewMode { get; set; } = DatePickerViewMode.Date; /// - /// 获得/设置 组件显示模式 默认为显示年月日模式 - /// Gets or sets Component Display Mode. Default is Date Mode + /// 获得/设置 日历视图数量，默认为双视图；屏幕宽度小于 768px 时始终显示单视图 + /// Gets or sets the calendar layout. Defaults to double view; below 768px, always displays a single view /// [Parameter] public DateTimeRangeRenderMode RenderMode { get; set; } = DateTimeRangeRenderMode.Double; @@ -316,7 +316,11 @@ public bool AllowNull .AddClass("disabled", IsDisabled) .Build(); - private bool _showLeftButtons = false; + private string? DialogHeaderText => DisplayText ?? $"{StartPlaceHolderText} {SeparateText} {EndPlaceHolderText}"; + + private string? EndPanelClassString => CssBuilder.Default("range-end-panel") + .AddClass("is-double", RenderMode == DateTimeRangeRenderMode.Double) + .Build(); /// /// @@ -326,7 +330,6 @@ protected override void OnInitialized() base.OnInitialized(); AddRequiredValidator(); - _showLeftButtons = RenderMode == DateTimeRangeRenderMode.Single; } /// diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.scss b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.scss index 7b2010a4d93..1d02ae5bd83 100644 --- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.scss @@ -1,4 +1,4 @@ -@use "../../wwwroot/scss/variables" as *; +@use "../../wwwroot/scss/variables" as *; .datetime-range { --bb-dt-range-bar-color: #{$bb-dt-range-bar-color}; @@ -136,3 +136,29 @@ cursor: pointer; color: var(--bb-dt-range-bar-color); } + +@media (min-width: 768px) { + .range-end-panel.is-double .picker-panel-header > .picker-panel-icon-btn:nth-child(-n + 2) { + display: none; + } +} + +.datetime-range .datetime-dialog[open] { + .datetime-range-body { + display: block; + } + + .range-panel-body { + flex-wrap: wrap; + + > .picker-panel-sidebar { + flex: 0 0 100%; + border-right: 0; + border-bottom: var(--bs-border-width) solid var(--bs-border-color); + } + + > .range-start-panel { + display: none; + } + } +} From 0d849700970d49ac04184e57efc54b3fa60dc21a Mon Sep 17 00:00:00 2001 From: Tony-ST0754 <6914529@qq.com> Date: Sat, 31 Oct 2026 08:04:09 +0800 Subject: [PATCH 31/68] fix(GoTop): use parentElement property (#8647) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(GoTop)由找父节点更改为找父元素 * refactor: 移除注释 * chore: bump version 11.1.0-rc.3.5 --------- Co-authored-by: Argo Zhang --- src/BootstrapBlazor/BootstrapBlazor.csproj | 2 +- src/BootstrapBlazor/Components/GoTop/GoTop.razor.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 3be134664f5..fc12a7fc886 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 11.1.0-rc.3.4 + 11.1.0-rc.3.5 diff --git a/src/BootstrapBlazor/Components/GoTop/GoTop.razor.js b/src/BootstrapBlazor/Components/GoTop/GoTop.razor.js index 2051b455286..2c45fcbb462 100644 --- a/src/BootstrapBlazor/Components/GoTop/GoTop.razor.js +++ b/src/BootstrapBlazor/Components/GoTop/GoTop.razor.js @@ -1,10 +1,10 @@ -import Data from "../../modules/data.js" +import Data from "../../modules/data.js" import EventHandler from "../../modules/event-handler.js" const getScrollElement = el => { let ele = el while (ele && ele.scrollHeight <= ele.clientHeight + 1) { - ele = ele.parentNode + ele = ele.parentElement } return ele || window } From bae72caa882a18a61d9238be3c40ef1a8509e51d Mon Sep 17 00:00:00 2001 From: Tony-ST0754 <6914529@qq.com> Date: Sat, 31 Oct 2026 08:09:11 +0800 Subject: [PATCH 32/68] feat(AutoGenerateColumn): add Required property (#8643) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(AutoGenerateColumn):Enable Required Support * doc: 更新注释 * doc: 合并注释 * doc: 增加版本信息 --------- Co-authored-by: Argo Zhang --- .../Attributes/AutoGenerateColumnAttribute.cs | 55 ++++++++++++++++++- .../Attributes/AutoGenerateClassTest.cs | 51 +++++++++++++++++ 2 files changed, 103 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor/Attributes/AutoGenerateColumnAttribute.cs b/src/BootstrapBlazor/Attributes/AutoGenerateColumnAttribute.cs index cb307e7320e..6b11ecce0db 100644 --- a/src/BootstrapBlazor/Attributes/AutoGenerateColumnAttribute.cs +++ b/src/BootstrapBlazor/Attributes/AutoGenerateColumnAttribute.cs @@ -84,11 +84,60 @@ public class AutoGenerateColumnAttribute : AutoGenerateBaseAttribute, ITableColu set => IsVisibleWhenEdit = value ?? true; } - bool? IEditorItem.Required { get; set; } + private bool? _required; - bool? ITableColumn.IsRequiredWhenAdd { get; set; } + /// + /// 获得/设置 当前列是否必填。未显式设置时，此属性返回 false， 接口属性保持 null 显式设置后优先于 、；未设置时按新建或编辑状态使用对应参数，Required 与对应参数均未设置时回退到 判断 + /// Gets or sets whether the current column is required. When not explicitly set, this property returns false while the interface property remains null. An explicit value takes precedence over and . Otherwise, the parameter for the current add or edit operation is used; if neither Required nor that parameter is set, the required state falls back to + /// 11.1.0 + /// + public bool Required + { + get => _required ?? false; + set => _required = value; + } + + bool? IEditorItem.Required + { + get => _required; + set => _required = value; + } + + private bool? _isRequiredWhenAdd; + + /// + /// 获得/设置 新建时此列是否必填。仅在 未显式设置时生效。未显式设置时，此属性返回 false， 接口属性保持 null + /// Gets or sets whether the column is required when adding a new item. Applies only when is not explicitly set. When not explicitly set, this property returns false while the interface property remains null + /// + public bool IsRequiredWhenAdd + { + get => _isRequiredWhenAdd ?? false; + set => _isRequiredWhenAdd = value; + } + + bool? ITableColumn.IsRequiredWhenAdd + { + get => _isRequiredWhenAdd; + set => _isRequiredWhenAdd = value; + } + + private bool? _isRequiredWhenEdit; + + /// + /// 获得/设置 编辑时此列是否必填。仅在 未显式设置时生效。未显式设置时，此属性返回 false， 接口属性保持 null + /// Gets or sets whether the column is required when editing an item. Applies only when is not explicitly set. When not explicitly set, this property returns false while the interface property remains null + /// + public bool IsRequiredWhenEdit + { + get => _isRequiredWhenEdit ?? false; + set => _isRequiredWhenEdit = value; + } - bool? ITableColumn.IsRequiredWhenEdit { get; set; } + bool? ITableColumn.IsRequiredWhenEdit + { + get => _isRequiredWhenEdit; + set => _isRequiredWhenEdit = value; + } /// /// diff --git a/test/UnitTest/Attributes/AutoGenerateClassTest.cs b/test/UnitTest/Attributes/AutoGenerateClassTest.cs index c8cda49e09e..f44cdc4644a 100644 --- a/test/UnitTest/Attributes/AutoGenerateClassTest.cs +++ b/test/UnitTest/Attributes/AutoGenerateClassTest.cs @@ -248,6 +248,57 @@ public void AutoGenerateColumn_Ok() Assert.Equal("test", attr.RequiredErrorMessage); } + [Fact] + public void AutoGenerateColumn_Required_Ok() + { + var attr = new AutoGenerateColumnAttribute(); + var editItem = (IEditorItem)attr; + var tableColumn = (ITableColumn)attr; + + // 未设置时接口层保持 null 以便回退到 RequiredAttribute 或者 IsRequiredWhenAdd/IsRequiredWhenEdit + Assert.False(attr.Required); + Assert.Null(editItem.Required); + Assert.False(attr.IsRequiredWhenAdd); + Assert.Null(tableColumn.IsRequiredWhenAdd); + Assert.False(attr.IsRequiredWhenEdit); + Assert.Null(tableColumn.IsRequiredWhenEdit); + + // 支持通过特性语法赋值 + attr = new AutoGenerateColumnAttribute() + { + Required = true, + IsRequiredWhenAdd = true, + IsRequiredWhenEdit = true + }; + editItem = attr; + tableColumn = attr; + Assert.True(attr.Required); + Assert.True(editItem.Required); + Assert.True(attr.IsRequiredWhenAdd); + Assert.True(tableColumn.IsRequiredWhenAdd); + Assert.True(attr.IsRequiredWhenEdit); + Assert.True(tableColumn.IsRequiredWhenEdit); + + // 显式 false 需要与未设置区分 + editItem.Required = false; + tableColumn.IsRequiredWhenAdd = false; + tableColumn.IsRequiredWhenEdit = false; + Assert.False(attr.Required); + Assert.False(editItem.Required); + Assert.False(attr.IsRequiredWhenAdd); + Assert.False(tableColumn.IsRequiredWhenAdd); + Assert.False(attr.IsRequiredWhenEdit); + Assert.False(tableColumn.IsRequiredWhenEdit); + + // 通过接口设置 null 后恢复未设置状态 + editItem.Required = null; + tableColumn.IsRequiredWhenAdd = null; + tableColumn.IsRequiredWhenEdit = null; + Assert.Null(editItem.Required); + Assert.Null(tableColumn.IsRequiredWhenAdd); + Assert.Null(tableColumn.IsRequiredWhenEdit); + } + class LookupService : LookupServiceBase { public override IEnumerable? GetItemsByKey(string? key, object? data) => null; From 53386e670cf7b6ed6eb4d0bbc086bdcd8ea50757 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 1 Nov 2026 09:20:33 +0800 Subject: [PATCH 33/68] chore(AIAgents): add dev/review/test AI agents (#8653) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(Agent): add AI agent configuration profiles * chore: 调整规则 * chore: 更新 agent 职责描述 * chore: 更新描述 --- .github/AI-TEAM-PROMPTS.md | 70 +++++++++++++++++++++++++++++++ .github/agents/bb-dev.agent.md | 13 ++++++ .github/agents/bb-review.agent.md | 28 +++++++++++++ .github/agents/bb-test.agent.md | 21 ++++++++++ .github/copilot-instructions.md | 23 ++++++++++ 5 files changed, 155 insertions(+) create mode 100644 .github/AI-TEAM-PROMPTS.md create mode 100644 .github/agents/bb-dev.agent.md create mode 100644 .github/agents/bb-review.agent.md create mode 100644 .github/agents/bb-test.agent.md create mode 100644 .github/copilot-instructions.md diff --git a/.github/AI-TEAM-PROMPTS.md b/.github/AI-TEAM-PROMPTS.md new file mode 100644 index 00000000000..c204575f668 --- /dev/null +++ b/.github/AI-TEAM-PROMPTS.md @@ -0,0 +1,70 @@ +# BootstrapBlazor AI 团队 - 派活模板速查 + +## 角色一览 + +| 角色 | 名称 | 什么时候用 | +|---|---|---| +| 开发 | bb-dev | 每次都用 | +| 测试 | bb-test | 新组件/大功能时显式调 | +| 审查 | bb-review | 拿不准时调 | + +## 模板 + +### 小改 / 修 bug（只调 dev，顺手带测试） + +@bb-dev 修复 [组件名] 的 [问题描述]，带 bUnit 测试覆盖修复路径。 +涉及文件：[文件路径] +不要动：[哪些文件/API 不准碰] + +### 新组件 / 大功能（dev → test 两步） + +第一步： + +@bb-dev 实现 [组件名] 的 [功能描述]。 +参数：[列出关键参数] +示例：[期望的 Demo 行为] +验收：build 绿 + test 绿，不要自动 merge。 + +第二步（拿不准时）： + +@bb-test 给 [组件名] 补单元测试，覆盖：[场景1]、[场景2]、[边界情况]。 +重点测失败路径和回调触发。 + +### PR 里补测试 + +@bb-test 给这个 PR 新增的 [功能名] 补 bUnit 测试，当前测试只覆盖了 happy path，需要补：异常、空值、边界。 + +### 审查 + +@bb-review 审查当前分支 diff，重点看：[你关心的点，如 API 兼容性 / 资源释放 / 本地化] + +### Issue 一步到位 + +## 需求 +[功能描述] + +## 涉及组件 +[组件名] + +## 验收标准 +- [ ] 组件实现 +- [ ] bUnit 测试覆盖 [场景1]、[场景2] +- [ ] 示例页可运行 + +## 不要动 +- [现有 API / 文件列表] + +## 一行速查 + +| 想干嘛 | 复制改括号 | +|---|---| +| 写代码 | @bb-dev 实现 [组件] 的 [功能]，带测试 | +| 补测试 | @bb-test 给 [组件/PR] 补 bUnit，覆盖 [场景] | +| 审代码 | @bb-review 审查 diff，重点看 [关注点] | + +## 额度策略 + +- 小需求：只调 @bb-dev（1 次调用） +- 大需求：@bb-dev → 你过目 → @bb-test（2-3 次） +- 审查：只在拿不准时调 @bb-review +- 核心原则：能一句话让 dev 顺手干的，就不单独调 test \ No newline at end of file diff --git a/.github/agents/bb-dev.agent.md b/.github/agents/bb-dev.agent.md new file mode 100644 index 00000000000..581c17c1fdf --- /dev/null +++ b/.github/agents/bb-dev.agent.md @@ -0,0 +1,13 @@ +--- +name: bb-dev +description: BootstrapBlazor 组件开发，负责写代码 +tools: [read, search, edit, terminal, github/*, playwright/*] +target: github-copilot +user-invocable: true +--- + +你是 BootstrapBlazor 组件开发。 + +规则： +- 新增加的类、参数、属性必须加 +- 不破坏现有公共 API diff --git a/.github/agents/bb-review.agent.md b/.github/agents/bb-review.agent.md new file mode 100644 index 00000000000..a1582111099 --- /dev/null +++ b/.github/agents/bb-review.agent.md @@ -0,0 +1,28 @@ +--- +name: bb-review +description: 审查 BootstrapBlazor 代码 diff +tools: [read, search, edit, terminal, github/*, playwright/*] +target: github-copilot +user-invocable: true +--- + +你是 BootstrapBlazor 代码审查员。 + +只审 diff，不改文件，不 Approve。 + +重点看： +1. 公共 API 是否破坏兼容 +2. 资源释放（IJSObjectReference/Disposable） +3. 本地化是否硬编码 +4. 是否有对应的单元测试覆盖新增的行为分支 + +输出格式：[P0/P1/P2] 文件:行 问题 + 最小修复建议 + +P0: 严重问题，必须修复 +P1: 一般问题，建议修复 +P2: 可选问题，视情况修复 + +示例： +[P0] src/Components/Button.razor:15 公共 API 变更 + 恢复原有参数类型 +[P1] src/Components/Button.razor:42 忘记释放 IJSObjectReference + 添加 DisposeAsync +[P2] src/Components/Button.razor:88 本地化硬编码 + 使用 IStringLocalizer diff --git a/.github/agents/bb-test.agent.md b/.github/agents/bb-test.agent.md new file mode 100644 index 00000000000..7bf18c22a1c --- /dev/null +++ b/.github/agents/bb-test.agent.md @@ -0,0 +1,21 @@ +--- +name: bb-test +description: 给 BootstrapBlazor 新功能/新组件补 bUnit 单元测试 +tools: [read, search, edit, terminal, github/*, playwright/*] +target: github-copilot +user-invocable: true +--- + +你是 BootstrapBlazor 测试工程师。 + +职责： +- 给新组件、新功能、bug 修复补 bUnit 单元测试 +- 覆盖：默认参数渲染、参数变更、回调触发、禁用态、空值、边界条件 +- 不测样式细节，只测行为契约 +- 代码覆盖率要求 100% 如果未达到时结果给出覆盖率 +- 尽量采用 bUnit 渲染组件然后验证行为契约 + +规则： +- 跑完 dotnet test 确认全绿再结束 + +完成标准：dotnet test 全绿 + 新增测试覆盖新增的行为分支 diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md new file mode 100644 index 00000000000..399c8611a2c --- /dev/null +++ b/.github/copilot-instructions.md @@ -0,0 +1,23 @@ +# BootstrapBlazor 组件库 + +## 技术栈 +- .NET 6 / 7 / 8 / 9 / 10 / 11 多目标框架 +- 主库：Razor Class Library +- 演示站：BootstrapBlazor.Server +- 测试：bUnit + +## 组件开发规范 +- 参数用 [Parameter]，XML 注释必写中英文都要 +- WASM 下 JS 互操作不能同步调用 +- 本地化用 IStringLocalizer，不硬编码中文文案 +- 异步全链路 async/await，禁止 .Result / .Wait() + +## 验证命令 +- 构建：dotnet build src/BootstrapBlazor/BootstrapBlazor.csproj +- 测试：dotnet test test/UnitTest/UnitTest.csproj + +## 红线 +- 不破坏现有公共 API（新增可，改签名需标注 Obsolete） +- 不自动 merge 到 main +- 不动 Version.props / Directory.Build.props +- 不提交密钥 \ No newline at end of file From f2c02ce9848293bc78547ce19922a162899812ab Mon Sep 17 00:00:00 2001 From: Tony-ST0754 <6914529@qq.com> Date: Sun, 1 Nov 2026 13:26:35 +0800 Subject: [PATCH 34/68] doc(Table): update edit sample add Required comments (#8651) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(Agent): add AI agent configuration profiles * doc:Table表单维护添加Required示例 * Revert "chore(Agent): add AI agent configuration profiles" This reverts commit 49e2080efbfe2ba9f46ca458a96554838d3e6d3d. * doc: 代码格式化 * doc: 代码格式化 * doc: 更新示例文档 * doc: 移除重复示例 * doc: 更新文档 --------- Co-authored-by: Argo Zhang --- .../Components/Samples/Table/TablesEdit.razor | 31 ++++++++++++++++--- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesEdit.razor b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesEdit.razor index 62e2915e225..e2bf41933d3 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Table/TablesEdit.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Table/TablesEdit.razor @@ -49,6 +49,27 @@ + +
+
    +
  • @((MarkupString)Localizer["TablesRequiredDescription1"].Value)
    • +
  • @((MarkupString)Localizer["TablesRequiredDescription2"].Value)
    • +
  • @((MarkupString)Localizer["TablesRequiredDescription3"].Value)
    • +
+
+ + + + + + + + + +
+ +
@((MarkupString)Localizer["TablesEditTemplateDescription"].Value)
- - - - -
@@ -329,6 +345,11 @@
+ + + + + From 1ac908d886e1338d6ff8de3ebbea05533a8f5588 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 1 Nov 2026 17:20:33 +0800 Subject: [PATCH 35/68] chore(Agent): update AGENT.md (#8657) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: 增加 Agents 文档 * chore: bump version 11.0.2 --- .github/agents/bb-dev.agent.md | 2 +- .github/agents/bb-review.agent.md | 2 +- .github/agents/bb-test.agent.md | 2 +- AGENTS.md | 152 +++++++++++++++++++++ src/BootstrapBlazor/BootstrapBlazor.csproj | 2 +- 5 files changed, 156 insertions(+), 4 deletions(-) create mode 100644 AGENTS.md diff --git a/.github/agents/bb-dev.agent.md b/.github/agents/bb-dev.agent.md index 581c17c1fdf..5e8140e5091 100644 --- a/.github/agents/bb-dev.agent.md +++ b/.github/agents/bb-dev.agent.md @@ -1,5 +1,5 @@ --- -name: bb-dev +name: BB-Devoloper description: BootstrapBlazor 组件开发，负责写代码 tools: [read, search, edit, terminal, github/*, playwright/*] target: github-copilot diff --git a/.github/agents/bb-review.agent.md b/.github/agents/bb-review.agent.md index a1582111099..4dc2c295ee8 100644 --- a/.github/agents/bb-review.agent.md +++ b/.github/agents/bb-review.agent.md @@ -1,5 +1,5 @@ --- -name: bb-review +name: BB-Review description: 审查 BootstrapBlazor 代码 diff tools: [read, search, edit, terminal, github/*, playwright/*] target: github-copilot diff --git a/.github/agents/bb-test.agent.md b/.github/agents/bb-test.agent.md index 7bf18c22a1c..aef3e8605b1 100644 --- a/.github/agents/bb-test.agent.md +++ b/.github/agents/bb-test.agent.md @@ -1,5 +1,5 @@ --- -name: bb-test +name: BB-Test description: 给 BootstrapBlazor 新功能/新组件补 bUnit 单元测试 tools: [read, search, edit, terminal, github/*, playwright/*] target: github-copilot diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 00000000000..ca9573e943f --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,152 @@ +# BootstrapBlazor Agent Rules + +本文件用于指导 AI 编程助手（Copilot CLI / Claude Code / Codex 等）在 BootstrapBlazor 仓库中的行为。 + +> ⚠️ 所有 AI 生成的代码、文档、测试用例 **必须** 遵守本文件规则。 + +--- + +## 一、项目基本信息 + +- 仓库：dotnetcore/BootstrapBlazor +- 技术栈：.NET 6/7/8/9/10/11、Blazor（Server / WebAssembly / Auto） +- UI 基础：Bootstrap 5 +- 主要语言：C# / Razor +- 构建命令： + + ```bash + dotnet build ./src/BootstrapBlazor/BootstrapBlazor.sln + ``` + +- 测试命令： + + ```bash + dotnet test ./test/UnitTest/UnitTest.csproj + ``` + +--- + +## 二、架构与代码边界 + +### 1. 组件设计原则 + +- 参数 `[Parameter]` 注释需要中英文双语 使用 `中文English` 标记 +- 组件 JS 尽量通过 `BootstrapModuleAutoLoader` 标签加载 +- 新组件，新参数 `[Parameter]` 必须增加 `` 版本信息为将要发布的正式版版本号 + + 示例： + ``` + /// + /// 获得/设置 是否触发 回调 默认 true + /// Gets or sets whether to invoke the callback + /// 11.1.0 + /// + ``` + +### 2. 样式与主题 + +- 样式基于 Bootstrap 5 +- 禁止硬编码颜色、字体、尺寸 +- 优先使用 CSS Variables + +### 3. 国际化 + +- 所有用户可见文本必须使用 `IStringLocalizer` +- 禁止硬编码中文/英文 UI 文本 + +--- + +## 三、编码规范（C# / Razor） + +### C# + +- 异步方法必须加 `Async` 后缀 +- 优先使用早期返回，避免深层嵌套 +- XML 注释必须完整（用于文档生成） + +### Razor + +- `@code` 块放在组件末尾 +- 避免复杂业务逻辑写在 UI 层 + +--- + +## 四、测试要求 + +- 新组件必须包含单元测试 +- 测试项目：`UnitTest` +- 测试框架：xUnit + bUnit +- 测试命名：`MethodName_State_ExpectedResult` + +--- + +## 五、Git / PR 规范 + +- 分支命名：`feature/xxx`、`fix/xxx`、`docs/xxx` +- Commit 格式： + + ``` + type(scope): description + ``` + + 示例： + + ``` + feat(Table): add virtualize support + fix(Select): clear value on disabled + docs(README): update badge + ``` + +- PR 要求： + - 关联 Issue + - 描述修改点 + - 提供截图（UI 变更） + - 通过 CI + +--- + +## 六、AI 行为约束 + +- 修改前先阅读相关组件源码 +- 修改后必须编译并报告结果 +- 不主动引入新 NuGet 包 +- 不修改 `Directory.Packages.props` 除非说明原因 +- 不生成「示例 Demo」以外的无关代码 +- 生成代码后必须自检： + - 是否违反 BootstrapBlazor 设计原则 + - 是否破坏现有 API + - 是否影响主题/本地化 + +--- + +## 七、文档与示例 + +- 新组件必须更新 `docs/` +- 示例必须可运行 + +--- + +## 八、禁止事项（红线） + +- 禁止破坏 Blazor 渲染生命周期 +- 禁止直接操作 DOM（除非 JSInterop） +- 禁止修改 Bootstrap 原始 CSS（覆盖除外） +- 禁止提交未测试的代码 +- 禁止提交包含 `Console.WriteLine` 的生产代码 + +--- + +## 九、Agent 自检清单（每次生成后） + +- [ ] 编译通过 +- [ ] 测试通过 +- [ ] 符合 BootstrapBlazor 架构 +- [ ] 不引入新依赖 +- [ ] 文档/示例已更新 +- [ ] 无硬编码字符串 +- [ ] 无直接 DOM 操作 + +--- + +> 本文件由 BootstrapBlazor 维护团队维护 +> 最后更新：2026-11 diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index fc12a7fc886..ce539d85d15 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 11.1.0-rc.3.5 + 11.0.2 From e2bcdaaebf48246087eb4e9577237d379524c838 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Sun, 1 Nov 2026 18:04:46 +0800 Subject: [PATCH 36/68] feat(ValidateForm): add EnableFieldValueChanged parameter (#8655) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 增加 EnableFieldValueChanged 参数 * doc: 更新示例 * chore: bump version 11.0.2 * chore: bump version 11.0.2-beta05 * chore: bump version 11.0.3-beta01 * doc: 更新注释 --- .../Components/Samples/ValidateForms.razor | 5 ++++- .../Components/Samples/ValidateForms.razor.cs | 7 +++++++ src/BootstrapBlazor.Server/Locales/en-US.json | 3 ++- src/BootstrapBlazor.Server/Locales/zh-CN.json | 3 ++- src/BootstrapBlazor/BootstrapBlazor.csproj | 2 +- .../Components/ValidateForm/ValidateForm.razor.cs | 13 ++++++++++++- 6 files changed, 28 insertions(+), 5 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor b/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor index 8031ed642cd..3ecddedb13b 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor @@ -27,7 +27,10 @@

@((MarkupString)Localizer["LongDisplayDescription"].Value)

- + +
+
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor.cs index c0949fb6dd9..ce82e194c42 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor.cs @@ -20,6 +20,13 @@ public partial class ValidateForms [NotNull] private ConsoleLogger? Logger1 { get; set; } + /// + /// 获得/设置 是否触发表单字段值变更回调 默认 true + /// Gets or sets whether to invoke the form field value changed callback. The default is true + /// 11.1.0 + /// + private bool EnableFieldValueChanged { get; set; } = true; + private async Task OnInvalidSubmit1(EditContext context) { await Task.Delay(1000); diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 4fe9ad9d5e4..b2bb36b8c9a 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -6243,7 +6243,8 @@ "ValidateFormNormalLi6": "The form checks by default whether the binding field values within the form are legitimate, and you can set the ValidateAllProperties property value to true if you need to check all fields in the model", "ValidateFormNormalLi7": "Set the asynchronous submission form by setting the value of the Button Button property IsAsync", "ValidateFormNormalLi8": "Components within a form are typically used to bind the property values of Model in both directions using bidirectional binding techniques, causing the component to refresh and re-render when its value changes StateHasChanged, and the method is called, i.e. its component or page is refreshed and re-rendered", - "ValidateFormNormalLi9": "After the value of the component control in the form is modified, the OnFieldChanged method is called", + "ValidateFormNormalLi9": "Changing a component's value within the form invokes OnFieldValueChanged. EnableFieldValueChanged defaults to true and can be dynamically set to false to suppress only this callback, without affecting field change tracking, model binding, component value changed callbacks or validation. Toggle the switch below and edit a field to observe the log; form submission continues normally", + "EnableFieldValueChangedText": "Enable field value changed callback", "ValidateFormNormalTitle": "Basic usage", "ValidateFormsSubmitButtonText": "Submit", "ValidateFormsSubTitle": "Form components that can be used for data compliance checks", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 8c0409d6793..163d1e0b113 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -6243,7 +6243,8 @@ "ValidateFormNormalLi6": "表单默认检查表单内绑定字段值是否合法，如需要检查模型所有字段时可设置 ValidateAllProperties 属性值为 true", "ValidateFormNormalLi7": "通过设置提交按钮 Button 属性 IsAsync 值，设置异步提交表单", "ValidateFormNormalLi8": "表单内组件通常用法都是使用双向绑定技术对 Model 的属性值进行双向绑定，当其值改变时会导致所在组件 StateHasChanged 方法被调用，即其所在组件或者页面进行刷新重新渲染", - "ValidateFormNormalLi9": "表单内组件控件的值修改后 OnFieldChanged 方法被调用", + "ValidateFormNormalLi9": "表单内组件控件的值修改后触发 OnFieldValueChanged 回调。EnableFieldValueChanged 默认为 true，可动态设置为 false 仅停止此回调，不影响字段变更记录、模型绑定、组件值变更回调或验证。切换下方开关后修改字段值，可观察日志变化；表单提交仍正常执行", + "EnableFieldValueChangedText": "启用字段值变更回调", "ValidateFormNormalTitle": "基础用法", "ValidateFormsSubmitButtonText": "提交表单", "ValidateFormsSubTitle": "可供数据合规检查的表单组件", diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index ce539d85d15..bbc29ad7b6c 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 11.0.2 + 11.0.3-beta01 diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs index eec24257311..470896c4dbf 100644 --- a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs +++ b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs @@ -40,6 +40,14 @@ public partial class ValidateForm [NotNull] public Action? OnFieldValueChanged { get; set; } + /// + /// 获得/设置 是否触发 回调 默认 true。设置为 false 时仅停止此回调，不影响字段变更记录、模型绑定或验证；支持动态变更 + /// Gets or sets whether to invoke the callback. The default is true. Setting this parameter to false only suppresses this callback without affecting field change tracking, model binding or validation. Supports dynamic changes + /// 11.0.3 + /// + [Parameter] + public bool EnableFieldValueChanged { get; set; } = true; + /// /// 获得/设置 是否显示所有验证失败字段的提示信息 默认 false 仅显示第一个验证失败字段的提示信息 /// Gets or sets whether to display all validation failure messages. The default is false, which only displays the first validation failure message @@ -747,7 +755,10 @@ private async Task OnSubmitForm(EditContext context) public void NotifyFieldChanged(in FieldIdentifier fieldIdentifier, object? value) { ValueChangedFields.AddOrUpdate(fieldIdentifier, key => value, (key, v) => value); - OnFieldValueChanged?.Invoke(fieldIdentifier.FieldName, value); + if (EnableFieldValueChanged) + { + OnFieldValueChanged?.Invoke(fieldIdentifier.FieldName, value); + } } /// From 7fcc34f806b257b687b744fe65e3f71174af895d Mon Sep 17 00:00:00 2001 From: Ralf Baussenwein <14016098+rabauss@users.noreply.github.com> Date: Mon, 2 Nov 2026 01:57:20 +0100 Subject: [PATCH 37/68] fix(Calendar): honour FirstDayOfWeek for the month start and the week header (#8658) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(Calendar): honour FirstDayOfWeek for the month start and the week header Co-Authored-By: Claude Opus 5.5 * fix(Calendar): apply review feedback Co-Authored-By: Claude Opus 5.5 * doc: 增加示例 * refactor: 更新文档 --------- Co-authored-by: Claude Opus 5.5 Co-authored-by: Argo Zhang --- .../Components/Samples/Calendars.razor | 5 ++ .../Components/Samples/DateTimePickers.razor | 5 ++ src/BootstrapBlazor.Server/Locales/en-US.json | 4 + src/BootstrapBlazor.Server/Locales/zh-CN.json | 4 + .../Components/Calendar/Calendar.razor.cs | 46 +++++++--- .../DateTimePicker/DatePickerBody.razor.cs | 2 +- test/UnitTest/Components/CalendarTest.cs | 85 +++++++++++++++++++ .../UnitTest/Components/DateTimePickerTest.cs | 17 ++++ 8 files changed, 155 insertions(+), 13 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor b/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor index 5c8f1f45710..d296ba38a60 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/Calendars.razor @@ -15,6 +15,11 @@ + + + + + diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor index 9bf1dc5de73..4e9719e5df6 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor @@ -76,6 +76,11 @@ + + + + +
diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index b2bb36b8c9a..a08088c6b0f 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -1137,6 +1137,8 @@ "CellTemplateTitle": "Cell Template", "Chinese": "Chinese", "English": "English", + "FirstDayOfWeekIntro": "Set FirstDayOfWeek to specify the first day of each week. The default is DayOfWeek.Sunday. This example uses DayOfWeek.Monday, so both the month and week views start on Monday. Week numbers are also calculated using this setting.", + "FirstDayOfWeekTitle": "Set the first day of the week", "HeaderTemplateDesc": "Customize the UI by setting the BodyTemplate and HeaderTemplate. In this example, additional columns are added to the front and back of the month view, and a timeline is added to the week view", "HeaderTemplateIntro": "Customize the header template by setting the property HeaderTemplate", "HeaderTemplateTitle": "Header Template", @@ -1759,6 +1761,8 @@ "FeatureShowLunarIntro": "ShowLunar Whether to display the lunar calendar", "FeatureShowSolarTerm": "Solar Term", "FeatureShowSolarTermIntro": "ShowSolarTerm Whether to display the 24 solar terms", + "FirstDayOfWeekIntro": "Set FirstDayOfWeek to specify the first day of each week. The default is DayOfWeek.Sunday. This example sets both DateTimePicker and DatePickerBody to DayOfWeek.Monday, so weekday headers and dates start on Monday. Click the input to view the popup date panel.", + "FirstDayOfWeekTitle": "Set the first day of the week", "IsEditableCallbackTip": "To automatically convert entered text to DateTime/DateTimeOffset, use the component-level ParseDateTimeCallback and ParseDateTimeOffsetCallback parameters to customize the conversion logic. Corresponding options are also available through the DateTimeSettings property of the global BootstrapBlazorOptions configuration. The component callback takes precedence, followed by the global callback. If neither is configured, the default DateTimeHelper.ToDateTime conversion logic is used.", "IsEditableIntro": "Enable manual date input by setting IsEditable=\"true\", and customize how the input text is converted to a date with ParseDateTimeCallback", "IsEditableTip": "This example sets ParseDateTimeCallback to convert text in yyyyMMdd format to a date. Try entering 20250808. When binding to DateTimeOffset or DateTimeOffset?, use ParseDateTimeOffsetCallback to customize the conversion logic", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 163d1e0b113..70760874a18 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -1137,6 +1137,8 @@ "CellTemplateTitle": "单元格模板", "Chinese": "语文", "English": "英语", + "FirstDayOfWeekIntro": "通过设置 FirstDayOfWeek 指定每周的第一天，默认值为 DayOfWeek.Sunday。本例设置为 DayOfWeek.Monday，月视图和周视图均从星期一开始显示，周数也按此设置计算。", + "FirstDayOfWeekTitle": "设置每周第一天", "HeaderTemplateDesc": "通过设置 BodyTemplate 配合 HeaderTemplate 来自定义呈现 UI，本例中月视图中前后均增加了附加列，星期视图中增加了时间线", "HeaderTemplateIntro": "通过设置属性 HeaderTemplate 自定义头部模板", "HeaderTemplateTitle": "头部模板", @@ -1759,6 +1761,8 @@ "FeatureShowLunarIntro": "ShowLunar 是否显示农历", "FeatureShowSolarTerm": "24 节气", "FeatureShowSolarTermIntro": "ShowSolarTerm 是否显示 24 节气", + "FirstDayOfWeekIntro": "通过设置 FirstDayOfWeek 指定每周的第一天，默认值为 DayOfWeek.Sunday。本例将 DateTimePicker 和 DatePickerBody 均设置为 DayOfWeek.Monday，星期标题和日期排列从星期一开始。点击输入框可查看弹出的日期面板。", + "FirstDayOfWeekTitle": "设置每周第一天", "IsEditableCallbackTip": "为了方便将录入的字符串自动转换为 DateTime/DateTimeOffset 数据类型，除了组件提供的 ParseDateTimeCallback 和 ParseDateTimeOffsetCallback 参数可用于自定义转换逻辑外，全局配置 BootstrapBlazorOptions 的 DateTimeSettings 属性也提供了对应的配置项。组件会优先使用自身的回调函数，其次使用全局配置的回调函数；如果均未设置，则使用默认的 DateTimeHelper.ToDateTime 转换逻辑。", "IsEditableIntro": "通过设置 IsEditable=\"true\" 开启手工录入日期功能，通过 ParseDateTimeCallback 自定义录入文本的日期格式转换逻辑", "IsEditableTip": "本例设置 ParseDateTimeCallback 将 yyyyMMdd 格式的文本转换为日期，请尝试输入 20250808。绑定值为 DateTimeOffset 或 DateTimeOffset? 时，请使用 ParseDateTimeOffsetCallback 参数自定义转换逻辑", diff --git a/src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs b/src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs index f12b90b1431..eb73699208a 100644 --- a/src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs +++ b/src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs @@ -69,7 +69,7 @@ public partial class Calendar /// Get week day ///
/// - private string GetWeekDayString(int offset) => $"{Value.AddDays(offset - (int)Value.DayOfWeek).Day}"; + private string GetWeekDayString(int offset) => $"{GetWeekStart(Value).AddDays(offset).Day}"; /// /// 获得 周日期样式 @@ -77,7 +77,7 @@ public partial class Calendar /// /// private string? GetWeekDayClassString(int offset) => CssBuilder.Default("week-header") - .AddClass("is-today", Value.AddDays(offset - (int)Value.DayOfWeek) == DateTime.Today) + .AddClass("is-today", GetWeekStart(Value).AddDays(offset) == DateTime.Today) .Build(); private static string? GetCalendarCellString(CalendarCellValue item) => CssBuilder.Default() @@ -92,10 +92,7 @@ public partial class Calendar .AddClassFromAttributes(AdditionalAttributes) .Build(); - /// - /// OnInitialized 方法 - /// OnInitialized method - /// + /// protected override void OnInitialized() { base.OnInitialized(); @@ -110,15 +107,24 @@ protected override void OnInitialized() PreviousMonth = Localizer[nameof(PreviousMonth)]; NextMonth = Localizer[nameof(NextMonth)]; Today = Localizer[nameof(Today)]; - WeekLists = GetWeekList(); PreviousWeek = Localizer[nameof(PreviousWeek)]; NextWeek = Localizer[nameof(NextWeek)]; WeekText = Localizer[nameof(WeekText)]; WeekHeaderText = Localizer[nameof(WeekHeaderText)]; - WeekNumberText = Localizer[nameof(WeekNumberText), GetWeekCount()]; Months = [.. Localizer[nameof(Months)].Value.Split(',')]; } + /// + protected override void OnParametersSet() + { + base.OnParametersSet(); + + // FirstDayOfWeek 可能在初始化后改变 + // FirstDayOfWeek may change after initialization + WeekLists = GetWeekList(); + WeekNumberText = Localizer[nameof(WeekNumberText), GetWeekCount()]; + } + /// /// 获得/设置 日历框开始时间 /// Gets or sets the calendar start date @@ -127,9 +133,7 @@ protected DateTime StartDate { get { - var d = Value.AddDays(1 - Value.Day); - d = d.AddDays((int)FirstDayOfWeek - (int)d.DayOfWeek); - return d; + return GetWeekStart(Value.AddDays(1 - Value.Day)); } } @@ -140,7 +144,7 @@ protected DateTime StartDate protected int GetWeekCount() { var gc = new GregorianCalendar(); - return gc.GetWeekOfYear(Value, CalendarWeekRule.FirstDay, DayOfWeek.Sunday); + return gc.GetWeekOfYear(Value, CalendarWeekRule.FirstDay, FirstDayOfWeek); } /// @@ -149,6 +153,24 @@ protected int GetWeekCount() /// protected DateTime EndDate => StartDate.AddDays(42); + /// + /// 获得 指定日期所在周的第一天 (根据 ) + /// Gets the first day of the week containing the specified date, according to + /// + /// + /// 要计算所在周的日期 + /// The date whose week start is calculated + /// + /// + /// 该周的第一天，超出 时返回 + /// The first day of that week, or when it would fall before it + /// + private DateTime GetWeekStart(DateTime date) + { + var days = ((int)date.DayOfWeek - (int)FirstDayOfWeek + 7) % 7; + return (date - DateTime.MinValue).TotalDays < days ? DateTime.MinValue : date.AddDays(-days); + } + /// /// 获得/设置 组件值 /// Gets or sets the component value diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs index 4a1d4a88b7c..2a3ffa5d884 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs @@ -22,7 +22,7 @@ private DateTime StartDate get { var d = GetSafeDayDateTime(CurrentDate, 1 - CurrentDate.Day); - d = GetSafeDayDateTime(d, (int)FirstDayOfWeek - (int)d.DayOfWeek); + d = GetSafeDayDateTime(d, -(((int)d.DayOfWeek - (int)FirstDayOfWeek + 7) % 7)); return d; } } diff --git a/test/UnitTest/Components/CalendarTest.cs b/test/UnitTest/Components/CalendarTest.cs index 334ef425aeb..5988436d200 100644 --- a/test/UnitTest/Components/CalendarTest.cs +++ b/test/UnitTest/Components/CalendarTest.cs @@ -246,4 +246,89 @@ public void FirstDayOfWeek_Ok() Assert.Equal("一", labels[0].TextContent); Assert.Equal("日", labels[6].TextContent); } + + [Theory] + [InlineData(DayOfWeek.Sunday, "2026-11-01")] + [InlineData(DayOfWeek.Monday, "2026-10-26")] + [InlineData(DayOfWeek.Saturday, "2026-10-31")] + public void FirstDayOfWeek_MonthStartsOnWeekStart_Ok(DayOfWeek firstDayOfWeek, string expected) + { + // 2026-11-01 is a Sunday: the first row must still contain it + var cells = new List(); + Context.Render(pb => + { + pb.Add(a => a.Value, new DateTime(2026, 11, 15)); + pb.Add(a => a.FirstDayOfWeek, firstDayOfWeek); + pb.Add(a => a.CellTemplate, value => builder => + { + cells.Add(value.CellValue); + builder.AddContent(0, value.CellValue.Day); + }); + }); + Assert.Equal(DateTime.Parse(expected), cells[0]); + Assert.Contains(new DateTime(2026, 11, 1), cells.Take(7)); + Assert.Equal(firstDayOfWeek, cells[0].DayOfWeek); + } + + [Fact] + public void FirstDayOfWeek_WeekHeader_Ok() + { + var cut = Context.Render(pb => + { + pb.Add(a => a.ViewMode, CalendarViewMode.Week); + pb.Add(a => a.Value, new DateTime(2026, 11, 1)); + pb.Add(a => a.FirstDayOfWeek, DayOfWeek.Monday); + }); + + // Monday 2026-10-26 ... Sunday 2026-11-01 + var days = cut.FindAll(".week-header > div:last-child").Select(i => i.TextContent).ToList(); + Assert.Equal(["26", "27", "28", "29", "30", "31", "1"], days); + } + + [Theory] + [InlineData(DayOfWeek.Sunday, "第 45 周")] + [InlineData(DayOfWeek.Monday, "第 44 周")] + public void FirstDayOfWeek_WeekNumber_Ok(DayOfWeek firstDayOfWeek, string expected) + { + // 2026-11-01 is a Sunday: it opens week 45 counted from Sunday, but ends week 44 counted from Monday + var cut = Context.Render(pb => + { + pb.Add(a => a.ViewMode, CalendarViewMode.Week); + pb.Add(a => a.Value, new DateTime(2026, 11, 1)); + pb.Add(a => a.FirstDayOfWeek, firstDayOfWeek); + }); + Assert.Contains(expected, cut.Find(".calendar-title").TextContent); + } + + [Fact] + public void FirstDayOfWeek_Changed_Ok() + { + var cut = Context.Render(pb => + { + pb.Add(a => a.Value, new DateTime(2026, 11, 15)); + }); + Assert.Equal("日", cut.FindAll(".calendar-table thead > tr > th")[0].TextContent); + + cut.Render(pb => pb.Add(a => a.FirstDayOfWeek, DayOfWeek.Monday)); + var labels = cut.FindAll(".calendar-table thead > tr > th"); + Assert.Equal("一", labels[0].TextContent); + Assert.Equal("日", labels[6].TextContent); + } + + [Fact] + public void FirstDayOfWeek_MinValue_Ok() + { + // 0001-01-01 is a Monday: the Sunday before it is out of range + var cells = new List(); + Context.Render(pb => + { + pb.Add(a => a.Value, DateTime.MinValue.AddDays(2)); + pb.Add(a => a.CellTemplate, value => builder => + { + cells.Add(value.CellValue); + builder.AddContent(0, value.CellValue.Day); + }); + }); + Assert.Equal(DateTime.MinValue, cells[0]); + } } diff --git a/test/UnitTest/Components/DateTimePickerTest.cs b/test/UnitTest/Components/DateTimePickerTest.cs index 51cc5352e9d..c02f796abaf 100644 --- a/test/UnitTest/Components/DateTimePickerTest.cs +++ b/test/UnitTest/Components/DateTimePickerTest.cs @@ -1084,6 +1084,23 @@ public void FirstDayOfWeek_Ok() Assert.Equal("日", labels[6].TextContent); } + [Theory] + [InlineData(DayOfWeek.Sunday, "1")] + [InlineData(DayOfWeek.Monday, "26")] + public void FirstDayOfWeek_MonthStartsOnWeekStart_Ok(DayOfWeek firstDayOfWeek, string expected) + { + // 2026-11-01 is a Sunday: the first row must still contain it + var cut = Context.Render>(pb => + { + pb.Add(a => a.FirstDayOfWeek, firstDayOfWeek); + pb.Add(a => a.Value, new DateTime(2026, 11, 15)); + }); + + var days = cut.FindAll(".date-table .date-table-row")[0].QuerySelectorAll("td").Select(i => i.TextContent.Trim()).ToList(); + Assert.Equal(expected, days[0]); + Assert.Contains("1", days); + } + [Fact] public void GetSafeYearDateTime_Ok() { From 6764410f1766ad749c5a4ca00169245cbc238852 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 2 Nov 2026 09:31:24 +0800 Subject: [PATCH 38/68] chore(AIAgents): update browser and review guidance (#8661) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(AIAgents): update browser and review guidance * chore: bump version 11.1.0-rc.3.5 * chore: 增加示例 --- .github/agents/bb-dev.agent.md | 1 + .github/agents/bb-review.agent.md | 11 +++++++++++ src/BootstrapBlazor/BootstrapBlazor.csproj | 2 +- 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/.github/agents/bb-dev.agent.md b/.github/agents/bb-dev.agent.md index 5e8140e5091..ce851555832 100644 --- a/.github/agents/bb-dev.agent.md +++ b/.github/agents/bb-dev.agent.md @@ -11,3 +11,4 @@ user-invocable: true 规则： - 新增加的类、参数、属性必须加 - 不破坏现有公共 API +- 不要在每次任务中默认启动或打开浏览器；仅在用户明确要求浏览器预览，或任务确实需要浏览器才能验证 UI 行为时使用浏览器工具 diff --git a/.github/agents/bb-review.agent.md b/.github/agents/bb-review.agent.md index 4dc2c295ee8..88b91b6449e 100644 --- a/.github/agents/bb-review.agent.md +++ b/.github/agents/bb-review.agent.md @@ -15,6 +15,17 @@ user-invocable: true 2. 资源释放（IJSObjectReference/Disposable） 3. 本地化是否硬编码 4. 是否有对应的单元测试覆盖新增的行为分支 +5. 组件代码 cs 文件中重写的方法注释使用 ，尤其是组件生命周期的方法如 OnInitialized、OnParametersSet、OnAfterRender 等 + 示例： + ```csharp + /// + /// + /// + protected override void OnInitialized() + { + base.OnInitialized(); + } + ``` 输出格式：[P0/P1/P2] 文件:行 问题 + 最小修复建议 diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index bbc29ad7b6c..fc12a7fc886 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 11.0.3-beta01 + 11.1.0-rc.3.5 From 1d47d2d37467f5071e8775882eaf572c33c35ab3 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Mon, 2 Nov 2026 17:54:11 +0800 Subject: [PATCH 39/68] revert(ValidateForm): add EnableFieldValueChanged parameter (#8665) This reverts commit 8f44f0c0009f35801a18028b2bcb828e7dd099c7. # Conflicts: # src/BootstrapBlazor/BootstrapBlazor.csproj --- .../Components/Samples/ValidateForms.razor | 5 +---- .../Components/Samples/ValidateForms.razor.cs | 7 ------- src/BootstrapBlazor.Server/Locales/en-US.json | 3 +-- src/BootstrapBlazor.Server/Locales/zh-CN.json | 3 +-- .../Components/ValidateForm/ValidateForm.razor.cs | 13 +------------ 5 files changed, 4 insertions(+), 27 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor b/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor index 3ecddedb13b..8031ed642cd 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor @@ -27,10 +27,7 @@

@((MarkupString)Localizer["LongDisplayDescription"].Value)

-
- -
-
diff --git a/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor.cs index ce82e194c42..c0949fb6dd9 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/ValidateForms.razor.cs @@ -20,13 +20,6 @@ public partial class ValidateForms [NotNull] private ConsoleLogger? Logger1 { get; set; } - /// - /// 获得/设置 是否触发表单字段值变更回调 默认 true - /// Gets or sets whether to invoke the form field value changed callback. The default is true - /// 11.1.0 - /// - private bool EnableFieldValueChanged { get; set; } = true; - private async Task OnInvalidSubmit1(EditContext context) { await Task.Delay(1000); diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index a08088c6b0f..96e4d1c3651 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -6247,8 +6247,7 @@ "ValidateFormNormalLi6": "The form checks by default whether the binding field values within the form are legitimate, and you can set the ValidateAllProperties property value to true if you need to check all fields in the model", "ValidateFormNormalLi7": "Set the asynchronous submission form by setting the value of the Button Button property IsAsync", "ValidateFormNormalLi8": "Components within a form are typically used to bind the property values of Model in both directions using bidirectional binding techniques, causing the component to refresh and re-render when its value changes StateHasChanged, and the method is called, i.e. its component or page is refreshed and re-rendered", - "ValidateFormNormalLi9": "Changing a component's value within the form invokes OnFieldValueChanged. EnableFieldValueChanged defaults to true and can be dynamically set to false to suppress only this callback, without affecting field change tracking, model binding, component value changed callbacks or validation. Toggle the switch below and edit a field to observe the log; form submission continues normally", - "EnableFieldValueChangedText": "Enable field value changed callback", + "ValidateFormNormalLi9": "After the value of the component control in the form is modified, the OnFieldChanged method is called", "ValidateFormNormalTitle": "Basic usage", "ValidateFormsSubmitButtonText": "Submit", "ValidateFormsSubTitle": "Form components that can be used for data compliance checks", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 70760874a18..57a73e1e8b8 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -6247,8 +6247,7 @@ "ValidateFormNormalLi6": "表单默认检查表单内绑定字段值是否合法，如需要检查模型所有字段时可设置 ValidateAllProperties 属性值为 true", "ValidateFormNormalLi7": "通过设置提交按钮 Button 属性 IsAsync 值，设置异步提交表单", "ValidateFormNormalLi8": "表单内组件通常用法都是使用双向绑定技术对 Model 的属性值进行双向绑定，当其值改变时会导致所在组件 StateHasChanged 方法被调用，即其所在组件或者页面进行刷新重新渲染", - "ValidateFormNormalLi9": "表单内组件控件的值修改后触发 OnFieldValueChanged 回调。EnableFieldValueChanged 默认为 true，可动态设置为 false 仅停止此回调，不影响字段变更记录、模型绑定、组件值变更回调或验证。切换下方开关后修改字段值，可观察日志变化；表单提交仍正常执行", - "EnableFieldValueChangedText": "启用字段值变更回调", + "ValidateFormNormalLi9": "表单内组件控件的值修改后 OnFieldChanged 方法被调用", "ValidateFormNormalTitle": "基础用法", "ValidateFormsSubmitButtonText": "提交表单", "ValidateFormsSubTitle": "可供数据合规检查的表单组件", diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs index 470896c4dbf..eec24257311 100644 --- a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs +++ b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.cs @@ -40,14 +40,6 @@ public partial class ValidateForm [NotNull] public Action? OnFieldValueChanged { get; set; } - /// - /// 获得/设置 是否触发 回调 默认 true。设置为 false 时仅停止此回调，不影响字段变更记录、模型绑定或验证；支持动态变更 - /// Gets or sets whether to invoke the callback. The default is true. Setting this parameter to false only suppresses this callback without affecting field change tracking, model binding or validation. Supports dynamic changes - /// 11.0.3 - /// - [Parameter] - public bool EnableFieldValueChanged { get; set; } = true; - /// /// 获得/设置 是否显示所有验证失败字段的提示信息 默认 false 仅显示第一个验证失败字段的提示信息 /// Gets or sets whether to display all validation failure messages. The default is false, which only displays the first validation failure message @@ -755,10 +747,7 @@ private async Task OnSubmitForm(EditContext context) public void NotifyFieldChanged(in FieldIdentifier fieldIdentifier, object? value) { ValueChangedFields.AddOrUpdate(fieldIdentifier, key => value, (key, v) => value); - if (EnableFieldValueChanged) - { - OnFieldValueChanged?.Invoke(fieldIdentifier.FieldName, value); - } + OnFieldValueChanged?.Invoke(fieldIdentifier.FieldName, value); } /// From e1eeba1cead110b6f599ff30dde0db76118ba06a Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Tue, 3 Nov 2026 11:12:23 +0800 Subject: [PATCH 40/68] chore(AIAgents): update agents avoid conflict (#8667) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(Agent): update AGENTS.md * chore(AIAgents): update agents avoid conflict * doc: 更新文档 * doc: 更新提示词 * doc: 增加全自动提示词模板 --- .github/AI-TEAM-PROMPTS.md | 159 +++++++++++++++++++++--------- .github/agents/bb-dev.agent.md | 16 +-- .github/agents/bb-review.agent.md | 9 +- .github/agents/bb-test.agent.md | 7 +- .github/copilot-instructions.md | 23 ----- AGENTS.md | 52 ++-------- 6 files changed, 140 insertions(+), 126 deletions(-) delete mode 100644 .github/copilot-instructions.md diff --git a/.github/AI-TEAM-PROMPTS.md b/.github/AI-TEAM-PROMPTS.md index c204575f668..59723ff3606 100644 --- a/.github/AI-TEAM-PROMPTS.md +++ b/.github/AI-TEAM-PROMPTS.md @@ -1,70 +1,141 @@ -# BootstrapBlazor AI 团队 - 派活模板速查 +# BootstrapBlazor AI 协作提示词模板 -## 角色一览 +本文提供开发、测试和审查任务的提示词示例。按需复制并替换方括号内容；具体任务要求优先于模板中的可选项。仓库通用约定见 `AGENTS.md`，专用 agent 规则见 `.github/agents/`。 -| 角色 | 名称 | 什么时候用 | -|---|---|---| -| 开发 | bb-dev | 每次都用 | -| 测试 | bb-test | 新组件/大功能时显式调 | -| 审查 | bb-review | 拿不准时调 | - -## 模板 +## 角色速查 -### 小改 / 修 bug（只调 dev，顺手带测试） +| 角色 | Agent | 适用场景 | +|---|---|---| +| 开发 | `BB-Developer`（简称 bb-dev） | 实现功能或修复问题 | +| 测试 | `BB-Test`（简称 bb-test） | 用户明确要求新增或修改单元测试 | +| 审查 | `BB-Review`（简称 bb-review） | 检查当前 diff 并反馈问题 | -@bb-dev 修复 [组件名] 的 [问题描述]，带 bUnit 测试覆盖修复路径。 -涉及文件：[文件路径] -不要动：[哪些文件/API 不准碰] +## 小改动或 Bug 修复 -### 新组件 / 大功能（dev → test 两步） +```text +@bb-dev 修复 [组件名] 的 [问题描述]。 +复现/现状：[当前行为] +期望行为：[正确行为] +涉及范围：[组件或文件] +不要改动：[需要保持不变的 API、行为或文件] +本次验证：[需要执行的构建或其他检查] +``` -第一步： +默认不新增或运行单元测试；如果本次明确需要测试，请补充测试场景。完成后说明实际执行的验证及结果，未执行的检查不要声称通过。 -@bb-dev 实现 [组件名] 的 [功能描述]。 -参数：[列出关键参数] -示例：[期望的 Demo 行为] -验收：build 绿 + test 绿，不要自动 merge。 +## 新组件或较大功能 -第二步（拿不准时）： +### 开发 -@bb-test 给 [组件名] 补单元测试，覆盖：[场景1]、[场景2]、[边界情况]。 -重点测失败路径和回调触发。 +```text +@bb-dev 实现 [组件名/功能]。 +使用场景：[用户如何使用] +关键参数或行为：[参数、回调、状态及预期行为] +示例要求：[示例页需要展示的内容；不需要时写“无”] +兼容性要求：[需要保持兼容的现有 API 或行为] +验收标准： +- [可观察、可验证的结果 1] +- [可观察、可验证的结果 2] +不要自动合并。 +``` -### PR 里补测试 +默认不新增或运行单元测试。仅在任务明确要求时，再安排测试；构建和其他验证按任务范围执行并报告结果。 -@bb-test 给这个 PR 新增的 [功能名] 补 bUnit 测试，当前测试只覆盖了 happy path，需要补：异常、空值、边界。 +### 端到端协作：开发新组件并测试、审查 -### 审查 +以下提示词明确要求新增单元测试，但不授权自动运行单元测试。若当前 Copilot 界面支持在同一任务中调用多个 agent，可直接使用；否则按流程分阶段切换到对应 agent，并传递前一阶段的结果。 -@bb-review 审查当前分支 diff，重点看：[你关心的点，如 API 兼容性 / 资源释放 / 本地化] +```text +请在当前仓库端到端开发一个 BootstrapBlazor 新组件，按 BB-Developer → BB-Test → BB-Review 的顺序完成。 -### Issue 一步到位 +## 需求 +组件名称：[组件名] +解决的问题：[需求背景] +使用场景：[用户如何使用] +关键参数和行为：[参数、回调、状态及预期行为] +示例要求：[需要展示的示例；不需要时写“无”] +## 验收标准 +- [可观察、可验证的行为 1] +- [可观察、可验证的行为 2] +- 新组件包含可运行的文档示例，并按仓库要求更新 docs.json。 +- 公开 API 保持兼容；公开参数包含要求的中英文 XML 注释和版本信息。 +- 新增 bUnit 测试，覆盖新增行为和关键边界。 + +## 执行流程 +1. BB-Developer 阅读相关组件和仓库规则，完成组件、文档及示例实现。先不编写测试，并总结改动和需要覆盖的行为。 +2. BB-Test 根据需求和开发结果新增 bUnit 测试，覆盖验收行为和关键边界。不要运行单元测试；列出建议我手动执行的命令。 +3. BB-Review 审查本次完整 diff，检查公共 API 兼容、资源释放、本地化及仓库约定。只按其 agent 规则处理允许的格式问题，不直接修复功能问题。 +4. 若审查发现问题，由 BB-Developer 修复；必要时再由 BB-Review 复查。遇到无法确定或存在设计取舍的问题时先说明并暂停，不要自行猜测。 +5. 按任务范围执行构建等非单元测试验证，并准确报告命令和结果。不要声称未执行的检查通过。 + +不要修改需求范围之外的文件，不要提交、推送或合并代码。结束时总结修改文件、开发/测试/审查结果、未解决问题，以及建议我手动执行的测试命令。 +``` + +### 明确要求补测试时 + +```text +@bb-test 为 [组件/功能] 新增或完善 bUnit 单元测试。 +覆盖以下行为：[场景 1]、[场景 2]、[边界或失败场景] +重点验证：[渲染结果、参数变化、回调或状态变化] +只测试行为契约，不测试样式细节；不要修改无关生产代码。 +``` + +新增或修改测试后不要自动运行单元测试；列出建议用户手动执行的测试命令即可。 + +## 为已有 PR 或变更补测试 + +```text +@bb-test 为 [PR/变更说明] 中的 [功能或修复] 补充 bUnit 单元测试。 +目前遗漏：[尚未覆盖的行为] +请覆盖：[明确的场景和边界] +不要修改无关生产代码。新增或修改测试后不要运行单元测试，并说明建议的测试命令。 +``` + +## 代码审查 + +```text +@bb-review 审查当前分支相对目标分支的 diff。 +重点关注：[公共 API 兼容性 / 资源释放 / 本地化 / 生命周期 / 其他关注点] +只报告本次改动引入或暴露的问题，提供文件、行号、影响和最小修复建议。 +不要修改代码；按 agent 规则仅在允许范围内处理格式化。 +``` + +## Issue 需求一次性描述 + +```text ## 需求 -[功能描述] +[要解决的问题及预期结果] -## 涉及组件 -[组件名] +## 涉及组件或范围 +[组件名、项目或文件；不确定时说明由开发者调查] ## 验收标准 -- [ ] 组件实现 -- [ ] bUnit 测试覆盖 [场景1]、[场景2] -- [ ] 示例页可运行 +- [可观察的行为 1] +- [可观察的行为 2] +- [需要时填写：示例或文档要求] +- [需要时填写：单元测试场景；默认不要求新增测试] + +## 约束 +- [需要保持的 API、行为或兼容性要求] +- 不要修改：[文件或范围] +- 不要自动合并 -## 不要动 -- [现有 API / 文件列表] +## 验证 +[希望执行的构建或检查；测试仅在明确要求时填写] +``` ## 一行速查 -| 想干嘛 | 复制改括号 | +| 目标 | 提示词 | |---|---| -| 写代码 | @bb-dev 实现 [组件] 的 [功能]，带测试 | -| 补测试 | @bb-test 给 [组件/PR] 补 bUnit，覆盖 [场景] | -| 审代码 | @bb-review 审查 diff，重点看 [关注点] | +| 修复问题 | `@bb-dev 修复 [组件] 的 [问题]，期望行为是 [行为]；不要改 [范围]。` | +| 实现功能 | `@bb-dev 实现 [功能]，验收标准为 [标准]；保持 [兼容要求]。` | +| 补充测试 | `@bb-test 为 [功能] 补 bUnit 测试，覆盖 [行为和边界]；不要运行测试。` | +| 审查变更 | `@bb-review 审查当前 diff，重点关注 [项目]；只报告问题和最小建议，不改代码。` | -## 额度策略 +## 协作建议 -- 小需求：只调 @bb-dev（1 次调用） -- 大需求：@bb-dev → 你过目 → @bb-test（2-3 次） -- 审查：只在拿不准时调 @bb-review -- 核心原则：能一句话让 dev 顺手干的，就不单独调 test \ No newline at end of file +- 小改动通常由 `BB-Developer` 直接处理；只有明确需要单元测试时再调用 `BB-Test`。 +- 较大功能先写清验收标准和约束，再按需要安排开发、测试或审查，不必机械地调用所有角色。 +- 审查面向 diff；测试和构建是否执行以任务要求及 `AGENTS.md` 为准。 diff --git a/.github/agents/bb-dev.agent.md b/.github/agents/bb-dev.agent.md index ce851555832..42a9ee17218 100644 --- a/.github/agents/bb-dev.agent.md +++ b/.github/agents/bb-dev.agent.md @@ -1,14 +1,18 @@ --- -name: BB-Devoloper +name: BB-Developer description: BootstrapBlazor 组件开发，负责写代码 tools: [read, search, edit, terminal, github/*, playwright/*] target: github-copilot user-invocable: true --- -你是 BootstrapBlazor 组件开发。 +你是 BootstrapBlazor 组件开发，负责按用户要求实现或修复组件功能。 -规则： -- 新增加的类、参数、属性必须加 -- 不破坏现有公共 API -- 不要在每次任务中默认启动或打开浏览器；仅在用户明确要求浏览器预览，或任务确实需要浏览器才能验证 UI 行为时使用浏览器工具 +开发时： +- 修改前阅读目标组件和相近组件，沿用现有设计与实现模式，只改完成任务所需的内容。 +- 新增公开组件 API 时保持现有公共 API 兼容；为公开参数补充中英文 XML 注释和版本信息。 +- 用户可见文本使用 `IStringLocalizer`；WASM 场景下 JS 互操作使用异步 API。 +- 新增组件时同步更新 `docs.json` 和可运行示例。 +- 遵循 `AGENTS.md` 中的测试约定；本阶段不要做新增、更新、运行单元测试。 +- 不默认启动或打开浏览器；仅在用户明确要求预览，或确实需要浏览器验证 UI 行为时使用浏览器工具。 +- 完成后说明实际执行的构建或验证命令及结果；未执行的验证不要声称通过。 diff --git a/.github/agents/bb-review.agent.md b/.github/agents/bb-review.agent.md index 88b91b6449e..acd3a8be69d 100644 --- a/.github/agents/bb-review.agent.md +++ b/.github/agents/bb-review.agent.md @@ -1,20 +1,18 @@ --- name: BB-Review description: 审查 BootstrapBlazor 代码 diff -tools: [read, search, edit, terminal, github/*, playwright/*] +tools: [read, search, edit] target: github-copilot user-invocable: true --- -你是 BootstrapBlazor 代码审查员。 - -只审 diff，不改文件，不 Approve。 +你是 BootstrapBlazor 代码审查员，只审 diff，只允许代码格式化。审查发现的问题可以提出建议（包含给出代码示例） 重点看： 1. 公共 API 是否破坏兼容 2. 资源释放（IJSObjectReference/Disposable） 3. 本地化是否硬编码 -4. 是否有对应的单元测试覆盖新增的行为分支 +4. 仅在本次改动确实引入行为变化、且该任务要求测试时检查 5. 组件代码 cs 文件中重写的方法注释使用 ，尤其是组件生命周期的方法如 OnInitialized、OnParametersSet、OnAfterRender 等 示例： ```csharp @@ -26,6 +24,7 @@ user-invocable: true base.OnInitialized(); } ``` +6. 文件编码是否为 UTF-8 无 BOM（如果 agent 没有判断文件编码能力则列出未检查文件编码信息） 输出格式：[P0/P1/P2] 文件:行 问题 + 最小修复建议 diff --git a/.github/agents/bb-test.agent.md b/.github/agents/bb-test.agent.md index aef3e8605b1..ea0a42ef40d 100644 --- a/.github/agents/bb-test.agent.md +++ b/.github/agents/bb-test.agent.md @@ -12,10 +12,5 @@ user-invocable: true - 给新组件、新功能、bug 修复补 bUnit 单元测试 - 覆盖：默认参数渲染、参数变更、回调触发、禁用态、空值、边界条件 - 不测样式细节，只测行为契约 -- 代码覆盖率要求 100% 如果未达到时结果给出覆盖率 +- 覆盖新增行为和关键边界 - 尽量采用 bUnit 渲染组件然后验证行为契约 - -规则： -- 跑完 dotnet test 确认全绿再结束 - -完成标准：dotnet test 全绿 + 新增测试覆盖新增的行为分支 diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md deleted file mode 100644 index 399c8611a2c..00000000000 --- a/.github/copilot-instructions.md +++ /dev/null @@ -1,23 +0,0 @@ -# BootstrapBlazor 组件库 - -## 技术栈 -- .NET 6 / 7 / 8 / 9 / 10 / 11 多目标框架 -- 主库：Razor Class Library -- 演示站：BootstrapBlazor.Server -- 测试：bUnit - -## 组件开发规范 -- 参数用 [Parameter]，XML 注释必写中英文都要 -- WASM 下 JS 互操作不能同步调用 -- 本地化用 IStringLocalizer，不硬编码中文文案 -- 异步全链路 async/await，禁止 .Result / .Wait() - -## 验证命令 -- 构建：dotnet build src/BootstrapBlazor/BootstrapBlazor.csproj -- 测试：dotnet test test/UnitTest/UnitTest.csproj - -## 红线 -- 不破坏现有公共 API（新增可，改签名需标注 Obsolete） -- 不自动 merge 到 main -- 不动 Version.props / Directory.Build.props -- 不提交密钥 \ No newline at end of file diff --git a/AGENTS.md b/AGENTS.md index ca9573e943f..02f804ab932 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -1,6 +1,6 @@ # BootstrapBlazor Agent Rules -本文件用于指导 AI 编程助手（Copilot CLI / Claude Code / Codex 等）在 BootstrapBlazor 仓库中的行为。 +本文件用于指导 AI 编程助手在 BootstrapBlazor 仓库中的行为。 > ⚠️ 所有 AI 生成的代码、文档、测试用例 **必须** 遵守本文件规则。 @@ -12,17 +12,9 @@ - 技术栈：.NET 6/7/8/9/10/11、Blazor（Server / WebAssembly / Auto） - UI 基础：Bootstrap 5 - 主要语言：C# / Razor -- 构建命令： - - ```bash - dotnet build ./src/BootstrapBlazor/BootstrapBlazor.sln - ``` - -- 测试命令： - - ```bash - dotnet test ./test/UnitTest/UnitTest.csproj - ``` +- 组件工程：src/BootstrapBlazor/BootstrapBlazor.csproj +- 文档示例工程：src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +- 测试工程：test/UnitTest/UnitTest.csproj --- @@ -31,22 +23,11 @@ ### 1. 组件设计原则 - 参数 `[Parameter]` 注释需要中英文双语 使用 `中文English` 标记 -- 组件 JS 尽量通过 `BootstrapModuleAutoLoader` 标签加载 - 新组件，新参数 `[Parameter]` 必须增加 `` 版本信息为将要发布的正式版版本号 - 示例： - ``` - /// - /// 获得/设置 是否触发 回调 默认 true - /// Gets or sets whether to invoke the callback - /// 11.1.0 - /// - ``` - ### 2. 样式与主题 - 样式基于 Bootstrap 5 -- 禁止硬编码颜色、字体、尺寸 - 优先使用 CSS Variables ### 3. 国际化 @@ -71,9 +52,9 @@ --- -## 四、测试要求 +## 四、测试约定 -- 新组件必须包含单元测试 +- 为提高开发效率，新组件在未明确要求编写单元测试的情况下，不要编写单元测试，也不要运行现有单元测试 - 测试项目：`UnitTest` - 测试框架：xUnit + bUnit - 测试命名：`MethodName_State_ExpectedResult` @@ -89,14 +70,6 @@ type(scope): description ``` - 示例： - - ``` - feat(Table): add virtualize support - fix(Select): clear value on disabled - docs(README): update badge - ``` - - PR 要求： - 关联 Issue - 描述修改点 @@ -108,43 +81,38 @@ ## 六、AI 行为约束 - 修改前先阅读相关组件源码 -- 修改后必须编译并报告结果 - 不主动引入新 NuGet 包 - 不修改 `Directory.Packages.props` 除非说明原因 -- 不生成「示例 Demo」以外的无关代码 - 生成代码后必须自检： - 是否违反 BootstrapBlazor 设计原则 - 是否破坏现有 API - 是否影响主题/本地化 +- 本仓库不加载 `bootstrapblazor` skill +- BootstrapBlazor.Server 项目依赖项源码大部分都在 [Github](https://github.com/BootstrapBlazor/BootstrapBlazor.Extensions) 仓库中，国内镜像站 [Gitee](https://gitee.com/LongbowEnterprise/BootstrapBlazor.Extensions) 有同步 --- ## 七、文档与示例 -- 新组件必须更新 `docs/` +- 新组件必须更新 `docs.json` 文件 - 示例必须可运行 --- ## 八、禁止事项（红线） -- 禁止破坏 Blazor 渲染生命周期 -- 禁止直接操作 DOM（除非 JSInterop） - 禁止修改 Bootstrap 原始 CSS（覆盖除外） -- 禁止提交未测试的代码 +- 禁止直接操作 DOM（除非 JSInterop） - 禁止提交包含 `Console.WriteLine` 的生产代码 --- ## 九、Agent 自检清单（每次生成后） -- [ ] 编译通过 -- [ ] 测试通过 - [ ] 符合 BootstrapBlazor 架构 - [ ] 不引入新依赖 - [ ] 文档/示例已更新 - [ ] 无硬编码字符串 -- [ ] 无直接 DOM 操作 --- From 33823ce1c9228956dde37b2de254cf62eab418da Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Nov 2026 09:54:11 +0800 Subject: [PATCH 41/68] feat(Dom2Image): update SnapDOM to v3.7.1 (#8669) --- src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj index 98447855b1e..0263bafc9b0 100644 --- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj @@ -35,7 +35,7 @@ - + From 9e29c947e21d9bb6af577a37512cc2aa79906251 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Wed, 4 Nov 2026 10:03:53 +0800 Subject: [PATCH 42/68] feat(ColorPicker): bump pickr version 1.10.3 (#8671) * feat(ColorPicker): bump pickr version 1.10.3 Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> * chore: bump version 11.1.0-rc.3.6 --------- Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- src/BootstrapBlazor/BootstrapBlazor.csproj | 2 +- src/BootstrapBlazor/wwwroot/lib/pickr/nano.min.css | 2 +- src/BootstrapBlazor/wwwroot/lib/pickr/pickr.min.js | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index fc12a7fc886..bb80440c664 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 11.1.0-rc.3.5 + 11.1.0-rc.3.6 diff --git a/src/BootstrapBlazor/wwwroot/lib/pickr/nano.min.css b/src/BootstrapBlazor/wwwroot/lib/pickr/nano.min.css index 15a9e59e168..c29e3a887db 100644 --- a/src/BootstrapBlazor/wwwroot/lib/pickr/nano.min.css +++ b/src/BootstrapBlazor/wwwroot/lib/pickr/nano.min.css @@ -1,2 +1,2 @@ -/*! Pickr 1.10.2 MIT | https://github.com/simonwep/pickr */ +/*! Pickr 1.10.3 MIT | https://github.com/simonwep/pickr */ .pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports(display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:rgba(0,0,0,0);z-index:1}.pcr-app .pcr-swatches>button::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;user-select:none;display:flex;flex-direction:column;cursor:grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:var(--pcr-color);width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to right, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to right, transparent, black),url('data:image/svg+xml;utf8, ');background-size:100%,.25em} \ No newline at end of file diff --git a/src/BootstrapBlazor/wwwroot/lib/pickr/pickr.min.js b/src/BootstrapBlazor/wwwroot/lib/pickr/pickr.min.js index 749ad3f8ef2..38afc1cb133 100644 --- a/src/BootstrapBlazor/wwwroot/lib/pickr/pickr.min.js +++ b/src/BootstrapBlazor/wwwroot/lib/pickr/pickr.min.js @@ -1,4 +1,4 @@ -/*! Pickr 1.10.2 MIT | https://github.com/simonwep/pickr */ +/*! Pickr 1.10.3 MIT | https://github.com/simonwep/pickr */ (function(e,t){typeof exports==`object`&&typeof module<`u`?module.exports=t():typeof define==`function`&&define.amd?define([],t):(e=typeof globalThis<`u`?globalThis:e||self,e.Pickr=t())})(this,function(){var e=Object.defineProperty,t=((t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r})({adjustableInputNumbers:()=>l,createElementFromString:()=>a,createFromTemplate:()=>o,eventPath:()=>s,off:()=>i,on:()=>r,resolveElement:()=>c});function n(e,t,n,r,i={}){t instanceof HTMLCollection||t instanceof NodeList?t=Array.from(t):Array.isArray(t)||(t=[t]),Array.isArray(n)||(n=[n]);for(let a of t)for(let t of n)a[e](t,r,{capture:!1,...i});return Array.prototype.slice.call(arguments,1)}var r=n.bind(null,`addEventListener`),i=n.bind(null,`removeEventListener`);function a(e){let t=document.createElement(`div`);return t.innerHTML=e.trim(),t.firstElementChild}function o(e){let t=(e,t)=>{let n=e.getAttribute(t);return e.removeAttribute(t),n},n=(e,r={})=>{let i=t(e,`:obj`),a=t(e,`:ref`),o=i?r[i]={}:r;a&&(r[a]=e);for(let r of Array.from(e.children)){let e=t(r,`:arr`),i=n(r,e?{}:o);e&&(o[e]||(o[e]=[])).push(Object.keys(i).length?i:r)}return r};return n(a(e))}function s(e){let t=e.path||e.composedPath&&e.composedPath();if(t)return t;let n=e.target.parentElement;for(t=[e.target,n];n=n.parentElement;)t.push(n);return t.push(document,window),t}function c(e){return e instanceof Element?e:typeof e==`string`?e.split(/>>/g).reduce((e,t,n,r)=>(e=e.querySelector(t),ne){function n(n){let r=[.001,.01,.1][Number(n.shiftKey||n.ctrlKey*2)]*(n.deltaY<0?1:-1),i=0,a=e.selectionStart;e.value=e.value.replace(/[\d.]+/g,(e,n)=>n<=a&&n+e.length>=a?(a=n,t(Number(e),r,i)):(i++,e)),e.focus(),e.setSelectionRange(a,a),n.preventDefault(),e.dispatchEvent(new Event(`input`))}r(e,`focus`,()=>r(window,`wheel`,n,{passive:!1})),r(e,`blur`,()=>i(window,`wheel`,n))}var{min:u,max:d,floor:f,round:p}=Math;function m(e){if(e.toLowerCase()===`black`)return`#000`;let t=document.createElement(`canvas`).getContext(`2d`);return t.fillStyle=e,/^#0{3,6}$/.test(t.fillStyle)?null:t.fillStyle}function h(e,t,n){e=e/360*6,t/=100,n/=100;let r=f(e),i=e-r,a=n*(1-t),o=n*(1-i*t),s=n*(1-(1-i)*t),c=r%6,l=[n,o,a,a,s,n][c],u=[s,n,n,o,a,a][c],d=[a,a,s,n,n,o][c];return[l*255,u*255,d*255]}function g(e,t,n){return h(e,t,n).map(e=>p(e).toString(16).padStart(2,`0`))}function _(e,t,n){let r=h(e,t,n),i=r[0]/255,a=r[1]/255,o=r[2]/255,s=u(1-i,1-a,1-o),c=s===1?0:(1-i-s)/(1-s),l=s===1?0:(1-a-s)/(1-s),d=s===1?0:(1-o-s)/(1-s);return[c*100,l*100,d*100,s*100]}function v(e,t,n){t/=100,n/=100;let r=(2-t)*n/2;return r!==0&&(t=r===1?0:r<.5?t*n/(r*2):t*n/(2-r*2)),[e,t*100,r*100]}function y(e,t,n){e/=255,t/=255,n/=255;let r=u(e,t,n),i=d(e,t,n),a=i-r,o,s,c=i;if(a===0)o=s=0;else{s=a/i;let r=((i-e)/6+a/2)/a,c=((i-t)/6+a/2)/a,l=((i-n)/6+a/2)/a;e===i?o=l-c:t===i?o=1/3+r-l:n===i&&(o=2/3+c-r),o<0?o+=1:o>1&&--o}return[o*360,s*100,c*100]}function b(e,t,n,r){return e/=100,t/=100,n/=100,r/=100,[...y((1-u(1,e*(1-r)+r))*255,(1-u(1,t*(1-r)+r))*255,(1-u(1,n*(1-r)+r))*255)]}function x(e,t,n){t/=100,n/=100,t*=n<.5?n:1-n;let r=2*t/(n+t)*100,i=(n+t)*100;return[e,isNaN(r)?0:r,i]}function S(e){return y(...e.match(/.{2}/g).map(e=>parseInt(e,16)))}function C(e){e=e.match(/^[a-zA-Z]+$/)&&m(e)||e;let t={cmyk:/^cmyk\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)/i,rgba:/^rgba?\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D*?(([\d.]+)(%?)|$)/i,hsla:/^hsla?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hsva:/^hsva?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},n=e=>e.map(e=>/^(|\d+)\.\d+|\d+$/.test(e)?Number(e):void 0),r;invalid:for(let i in t)if(r=t[i].exec(e))switch(i){case`cmyk`:{let[,e,t,a,o]=n(r);if(e>100||t>100||a>100||o>100)break invalid;return{values:b(e,t,a,o),type:i}}case`rgba`:{let[,e,,t,,a,,,o]=n(r);if(e=r[2]===`%`?e/100*255:e,t=r[4]===`%`?t/100*255:t,a=r[6]===`%`?a/100*255:a,o=r[9]===`%`?o/100:o,e>255||t>255||a>255||o<0||o>1)break invalid;return{values:[...y(e,t,a),o],a:o,type:i}}case`hexa`:{let[,e]=r;(e.length===4||e.length===3)&&(e=e.split(``).map(e=>e+e).join(``));let t=e.substring(0,6),n=e.substring(6);return n=n?parseInt(n,16)/255:void 0,{values:[...S(t),n],a:n,type:i}}case`hsla`:{let[,e,t,a,,o]=n(r);if(o=r[6]===`%`?o/100:o,e>360||t>100||a>100||o<0||o>1)break invalid;return{values:[...x(e,t,a),o],a:o,type:i}}case`hsva`:{let[,e,t,a,,o]=n(r);if(o=r[6]===`%`?o/100:o,e>360||t>100||a>100||o<0||o>1)break invalid;return{values:[e,t,a,o],a:o,type:i}}}return{values:null,type:null}}function w(e=0,t=0,n=0,r=1){let i=(e,t)=>(n=-1)=>t(~n?e.map(e=>Number(e.toFixed(n))):e),a={h:e,s:t,v:n,a:r,toHSVA(){let e=[a.h,a.s,a.v,a.a];return e.toString=i(e,e=>`hsva(${e[0]}, ${e[1]}%, ${e[2]}%, ${a.a})`),e},toHSLA(){let e=[...v(a.h,a.s,a.v),a.a];return e.toString=i(e,e=>`hsla(${e[0]}, ${e[1]}%, ${e[2]}%, ${a.a})`),e},toRGBA(){let e=[...h(a.h,a.s,a.v),a.a];return e.toString=i(e,e=>`rgba(${e[0]}, ${e[1]}, ${e[2]}, ${a.a})`),e},toCMYK(){let e=_(a.h,a.s,a.v);return e.toString=i(e,e=>`cmyk(${e[0]}%, ${e[1]}%, ${e[2]}%, ${e[3]}%)`),e},toHEXA(){let e=g(a.h,a.s,a.v),t=a.a>=1?``:Number((a.a*255).toFixed(0)).toString(16).toUpperCase().padStart(2,`0`);return t&&e.push(t),e.toString=()=>`#${e.join(``).toUpperCase()}`,e},clone:()=>w(a.h,a.s,a.v,a.a)};return a}var T=e=>Math.max(Math.min(e,1),0);function E(e){let t={options:Object.assign({lock:null,onchange:()=>0,onstop:()=>0},e),_keyboard(e){let{options:n}=t,{type:r,key:i}=e;if(document.activeElement===n.wrapper){let{lock:n}=t.options,a=i===`ArrowUp`,o=i===`ArrowRight`,s=i===`ArrowDown`,c=i===`ArrowLeft`;if(r===`keydown`&&(a||o||s||c)){let r,i=0;n===`v`?r=a||o?1:-1:n===`h`?r=a||o?-1:1:(i=a?-1:+!!s,r=c?-1:+!!o),t.update(T(t.cache.x+.01*r),T(t.cache.y+.01*i)),e.preventDefault()}else i.startsWith(`Arrow`)&&(t.options.onstop(),e.preventDefault())}},_tapstart(e){r(document,[`mouseup`,`touchend`,`touchcancel`],t._tapstop),r(document,[`mousemove`,`touchmove`],t._tapmove),e.cancelable&&e.preventDefault(),t._tapmove(e)},_tapmove(e){let{options:n,cache:r}=t,{lock:i,element:a,wrapper:o}=n,s=o.getBoundingClientRect(),c=0,l=0;if(e){let t=e&&e.touches&&e.touches[0];c=e?(t||e).clientX:0,l=e?(t||e).clientY:0,cs.left+s.width&&(c=s.left+s.width),ls.top+s.height&&(l=s.top+s.height),c-=s.left,l-=s.top}else r&&(c=r.x*s.width,l=r.y*s.height);i!==`h`&&(a.style.left=`calc(${c/s.width*100}% - ${a.offsetWidth/2}px)`),i!==`v`&&(a.style.top=`calc(${l/s.height*100}% - ${a.offsetHeight/2}px)`),t.cache={x:c/s.width,y:l/s.height};let u=T(c/s.width),d=T(l/s.height);switch(i){case`v`:return n.onchange(u);case`h`:return n.onchange(d);default:return n.onchange(u,d)}},_tapstop(){t.options.onstop(),i(document,[`mouseup`,`touchend`,`touchcancel`],t._tapstop),i(document,[`mousemove`,`touchmove`],t._tapmove)},trigger(){t._tapmove()},update(e=0,n=0){let{left:r,top:i,width:a,height:o}=t.options.wrapper.getBoundingClientRect();t.options.lock===`h`&&(n=e),t._tapmove({clientX:r+a*e,clientY:i+o*n})},destroy(){let{options:e,_tapstart:n,_keyboard:r}=t;i(document,[`keydown`,`keyup`],r),i([e.wrapper,e.element],`mousedown`,n),i([e.wrapper,e.element],`touchstart`,n,{passive:!1})}},{options:n,_tapstart:a,_keyboard:o}=t;return r([n.wrapper,n.element],`mousedown`,a),r([n.wrapper,n.element],`touchstart`,a,{passive:!1}),r(document,[`keydown`,`keyup`],o),t}function D(e={}){e=Object.assign({onchange:()=>0,className:``,elements:[]},e);let t=r(e.elements,`click`,t=>{e.elements.forEach(n=>n.classList[t.target===n?`add`:`remove`](e.className)),e.onchange(t),t.stopPropagation()});return{destroy:()=>i(...t)}}var O=e=>{let{components:t,useAsButton:n,inline:r,appClass:i,theme:a,lockOpacity:s}=e.options,c=e=>e?``:`style="display:none" hidden`,l=t=>e._t(t),u=o(`
@@ -44,8 +44,8 @@
- `),d=u.interaction;return d.options.find(e=>!e.hidden&&!e.classList.add(`active`)),d.type=()=>d.options.find(e=>e.classList.contains(`active`)),u},k={variantFlipOrder:{start:`sme`,middle:`mse`,end:`ems`},positionFlipOrder:{top:`tbrl`,right:`rltb`,bottom:`btrl`,left:`lrbt`},position:`bottom`,margin:8,padding:0},A=(e,t,n)=>{let{container:r,arrow:i,margin:a,padding:o,position:s,variantFlipOrder:c,positionFlipOrder:l}={container:document.documentElement.getBoundingClientRect(),...k,...n},{left:u,top:d}=t.style;t.style.left=`0`,t.style.top=`0`;let f=e.getBoundingClientRect(),p=t.getBoundingClientRect(),m={t:f.top-p.height-a,b:f.bottom+a,r:f.right+a,l:f.left-p.width-a},h={vs:f.left,vm:f.left+f.width/2-p.width/2,ve:f.left+f.width-p.width,hs:f.top,hm:f.bottom-f.height/2-p.height/2,he:f.bottom-p.height},[g,_=`middle`]=s.split(`-`),v=l[g],y=c[_],{top:b,left:x,bottom:S,right:C}=r;for(let e of v){let n=e===`t`||e===`b`,r=m[e],[a,s]=n?[`top`,`left`]:[`left`,`top`],[c,l]=n?[p.height,p.width]:[p.width,p.height],[u,d]=n?[S,C]:[C,S],[g,_]=n?[b,x]:[x,b];if(!(ru))for(let u of y){let m=h[(n?`v`:`h`)+u];if(!(m<_||m+l+o>d)){if(m-=p[s],r-=p[a],t.style[s]=`${m}px`,t.style[a]=`${r}px`,i){let t=n?f.width/2:f.height/2,o=l/2,d=t>o,p={s:d?o:t,m:o,e:d?o:l-t},h={t:c,b:0,r:0,l:c},g=m+p[u],_=r+h[e];i.style[s]=`${g}px`,i.style[a]=`${_}px`}return e+u}}}return t.style.left=u,t.style.top=d,null},j=(e,t,n)=>{let r=typeof e==`object`&&!(e instanceof HTMLElement)?e:{reference:e,popper:t,...n};return{update(e=r){let{reference:t,popper:n}=Object.assign(r,e);if(!n||!t)throw Error(`Popper- or reference-element missing.`);return A(t,n,r)}}};return class e{static utils=t;static version=`1.10.2`;static I18N_DEFAULTS={"ui:dialog":`color picker dialog`,"btn:toggle":`toggle color picker dialog`,"btn:swatch":`color swatch`,"btn:last-color":`use previous color`,"btn:save":`Save`,"btn:cancel":`Cancel`,"btn:clear":`Clear`,"aria:btn:save":`save and close`,"aria:btn:cancel":`cancel and close`,"aria:btn:clear":`clear and close`,"aria:input":`color input field`,"aria:palette":`color selection area`,"aria:hue":`hue selection slider`,"aria:opacity":`selection slider`};static DEFAULT_OPTIONS={appClass:null,theme:`classic`,useAsButton:!1,padding:8,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,container:`body`,components:{interaction:{}},i18n:{},swatches:null,inline:!1,sliders:null,default:`#42445a`,defaultRepresentation:null,position:`bottom-middle`,adjustableNumbers:!0,showAlways:!1,closeWithKey:`Escape`};_initializingActive=!0;_recalc=!0;_nanopop=null;_root=null;_color=w();_lastColor=w();_swatchColors=[];_setupAnimationFrame=null;_components=null;_eventBindings=[];_eventListener={init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]};constructor(t){this.options=t=Object.assign({...e.DEFAULT_OPTIONS},t);let{swatches:n,components:r,theme:i,sliders:a,lockOpacity:o,padding:s}=t;[`nano`,`monolith`].includes(i)&&!a&&(t.sliders=`h`),r.interaction||={};let{preview:c,opacity:l,hue:u,palette:d}=r;r.opacity=!o&&l,r.palette=d||c||l||u,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),n&&n.length&&n.forEach(e=>this.addSwatch(e));let{button:f,app:p}=this._root;this._nanopop=j(f,p,{margin:s}),f.setAttribute(`role`,`button`),f.setAttribute(`aria-label`,this._t(`btn:toggle`));let m=this;this._setupAnimationFrame=requestAnimationFrame((function e(){if(!p.offsetWidth)return requestAnimationFrame(e);m.setColor(m._color?.toHSLA().toString()??t.default),m._rePositioningPicker(),t.defaultRepresentation&&(m._representation=t.defaultRepresentation,m.setColorRepresentation(m._representation)),t.showAlways&&m.show(),m._initializingActive=!1,m._emit(`init`)}))}static create=t=>new e(t);_preBuild(){let{options:e}=this;for(let t of[`el`,`container`])e[t]=c(e[t]);this._root=O(this),e.useAsButton&&(this._root.button=e.el),e.container.appendChild(this._root.root)}_finalBuild(){let e=this.options,t=this._root;if(e.container.removeChild(t.root),e.inline){let n=e.el.parentElement;e.el.nextSibling?n.insertBefore(t.app,e.el.nextSibling):n.appendChild(t.app)}else e.container.appendChild(t.app);e.useAsButton?e.inline&&e.el.remove():e.el.parentNode.replaceChild(t.root,e.el),e.disabled&&this.disable(),e.comparison||(t.button.style.transition=`none`,e.useAsButton||(t.preview.lastColor.style.transition=`none`)),this.hide()}_buildComponents(){let e=this,t=this.options.components,n=(e.options.sliders||`v`).repeat(2),[r,i]=n.match(/^[vh]+$/g)?n:[],a=()=>this._color||=this._lastColor.clone(),o={palette:E({element:e._root.palette.picker,wrapper:e._root.palette.palette,onstop:()=>e._emit(`changestop`,`slider`,e),onchange(n,r){if(!t.palette)return;let i=a(),{_root:o,options:s}=e,{lastColor:c,currentColor:l}=o.preview;e._recalc&&(i.s=n*100,i.v=100-r*100,i.v<0&&(i.v=0),e._updateOutput(`slider`));let u=i.toRGBA().toString(0);this.element.style.background=u,this.wrapper.style.background=` + `),d=u.interaction;return d.options.find(e=>!e.hidden&&!e.classList.add(`active`)),d.type=()=>d.options.find(e=>e.classList.contains(`active`)),u},k={variantFlipOrder:{start:`sme`,middle:`mse`,end:`ems`},positionFlipOrder:{top:`tbrl`,right:`rltb`,bottom:`btrl`,left:`lrbt`},position:`bottom`,margin:8,padding:0},A=(e,t,n)=>{let{container:r,arrow:i,margin:a,padding:o,position:s,variantFlipOrder:c,positionFlipOrder:l}={container:document.documentElement.getBoundingClientRect(),...k,...n},{left:u,top:d}=t.style;t.style.left=`0`,t.style.top=`0`;let f=e.getBoundingClientRect(),p=t.getBoundingClientRect(),m={t:f.top-p.height-a,b:f.bottom+a,r:f.right+a,l:f.left-p.width-a},h={vs:f.left,vm:f.left+f.width/2-p.width/2,ve:f.left+f.width-p.width,hs:f.top,hm:f.bottom-f.height/2-p.height/2,he:f.bottom-p.height},[g,_=`middle`]=s.split(`-`),v=l[g],y=c[_],{top:b,left:x,bottom:S,right:C}=r;for(let e of v){let n=e===`t`||e===`b`,r=m[e],[a,s]=n?[`top`,`left`]:[`left`,`top`],[c,l]=n?[p.height,p.width]:[p.width,p.height],[u,d]=n?[S,C]:[C,S],[g,_]=n?[b,x]:[x,b];if(!(ru))for(let u of y){let m=h[(n?`v`:`h`)+u];if(!(m<_||m+l+o>d)){if(m-=p[s],r-=p[a],t.style[s]=`${m}px`,t.style[a]=`${r}px`,i){let t=n?f.width/2:f.height/2,o=l/2,d=t>o,p={s:d?o:t,m:o,e:d?o:l-t},h={t:c,b:0,r:0,l:c},g=m+p[u],_=r+h[e];i.style[s]=`${g}px`,i.style[a]=`${_}px`}return e+u}}}return t.style.left=u,t.style.top=d,null},j=(e,t,n)=>{let r=typeof e==`object`&&!(e instanceof HTMLElement)?e:{reference:e,popper:t,...n};return{update(e=r){let{reference:t,popper:n}=Object.assign(r,e);if(!n||!t)throw Error(`Popper- or reference-element missing.`);return A(t,n,r)}}};return class e{static utils=t;static version=`1.10.3`;static I18N_DEFAULTS={"ui:dialog":`color picker dialog`,"btn:toggle":`toggle color picker dialog`,"btn:swatch":`color swatch`,"btn:last-color":`use previous color`,"btn:save":`Save`,"btn:cancel":`Cancel`,"btn:clear":`Clear`,"aria:btn:save":`save and close`,"aria:btn:cancel":`cancel and close`,"aria:btn:clear":`clear and close`,"aria:input":`color input field`,"aria:palette":`color selection area`,"aria:hue":`hue selection slider`,"aria:opacity":`selection slider`};static DEFAULT_OPTIONS={appClass:null,theme:`classic`,useAsButton:!1,padding:8,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,container:`body`,components:{interaction:{}},i18n:{},swatches:null,inline:!1,sliders:null,default:`#42445a`,defaultRepresentation:null,position:`bottom-middle`,adjustableNumbers:!0,showAlways:!1,closeWithKey:`Escape`};_initializingActive=!0;_recalc=!0;_nanopop=null;_root=null;_color=w();_lastColor=w();_swatchColors=[];_setupAnimationFrame=null;_components=null;_eventBindings=[];_eventListener={init:[],save:[],hide:[],show:[],clear:[],change:[],changestop:[],cancel:[],swatchselect:[]};constructor(t){this.options=t=Object.assign({...e.DEFAULT_OPTIONS},t);let{swatches:n,components:r,theme:i,sliders:a,lockOpacity:o,padding:s}=t;[`nano`,`monolith`].includes(i)&&!a&&(t.sliders=`h`),r.interaction||={};let{preview:c,opacity:l,hue:u,palette:d}=r;r.opacity=!o&&l,r.palette=d||c||l||u,this._preBuild(),this._buildComponents(),this._bindEvents(),this._finalBuild(),n&&n.length&&n.forEach(e=>this.addSwatch(e));let{button:f,app:p}=this._root;this._nanopop=j(f,p,{margin:s}),f.setAttribute(`role`,`button`),f.setAttribute(`aria-label`,this._t(`btn:toggle`));let m=this;this._setupAnimationFrame=requestAnimationFrame((function e(){if(!p.offsetWidth)return requestAnimationFrame(e);m.setColor(t.default),m._rePositioningPicker(),t.defaultRepresentation&&(m._representation=t.defaultRepresentation,m.setColorRepresentation(m._representation)),t.showAlways&&m.show(),m._initializingActive=!1,m._emit(`init`)}))}static create=t=>new e(t);_preBuild(){let{options:e}=this;for(let t of[`el`,`container`])e[t]=c(e[t]);this._root=O(this),e.useAsButton&&(this._root.button=e.el),e.container.appendChild(this._root.root)}_finalBuild(){let e=this.options,t=this._root;if(e.container.removeChild(t.root),e.inline){let n=e.el.parentElement;e.el.nextSibling?n.insertBefore(t.app,e.el.nextSibling):n.appendChild(t.app)}else e.container.appendChild(t.app);e.useAsButton?e.inline&&e.el.remove():e.el.parentNode.replaceChild(t.root,e.el),e.disabled&&this.disable(),e.comparison||(t.button.style.transition=`none`,e.useAsButton||(t.preview.lastColor.style.transition=`none`)),this.hide()}_buildComponents(){let e=this,t=this.options.components,n=(e.options.sliders||`v`).repeat(2),[r,i]=n.match(/^[vh]+$/g)?n:[],a=()=>this._color||=this._lastColor.clone(),o={palette:E({element:e._root.palette.picker,wrapper:e._root.palette.palette,onstop:()=>e._emit(`changestop`,`slider`,e),onchange(n,r){if(!t.palette)return;let i=a(),{_root:o,options:s}=e,{lastColor:c,currentColor:l}=o.preview;e._recalc&&(i.s=n*100,i.v=100-r*100,i.v<0&&(i.v=0),e._updateOutput(`slider`));let u=i.toRGBA().toString(0);this.element.style.background=u,this.wrapper.style.background=` linear-gradient(to top, rgba(0, 0, 0, ${i.a}), transparent), linear-gradient(to left, hsla(${i.h}, 100%, 50%, ${i.a}), rgba(255, 255, 255, ${i.a})) - `,s.comparison?!s.useAsButton&&!e._lastColor&&c.style.setProperty(`--pcr-color`,u):(o.button.style.setProperty(`--pcr-color`,u),o.button.classList.remove(`clear`));let d=i.toHEXA().toString();for(let{el:t,color:n}of e._swatchColors)t.classList[d===n.toHEXA().toString()?`add`:`remove`](`pcr-active`);l.style.setProperty(`--pcr-color`,u)}}),hue:E({lock:i===`v`?`h`:`v`,element:e._root.hue.picker,wrapper:e._root.hue.slider,onstop:()=>e._emit(`changestop`,`slider`,e),onchange(n){if(!t.hue||!t.palette)return;let r=a();e._recalc&&(r.h=n*360),this.element.style.backgroundColor=`hsl(${r.h}, 100%, 50%)`,o.palette.trigger()}}),opacity:E({lock:r===`v`?`h`:`v`,element:e._root.opacity.picker,wrapper:e._root.opacity.slider,onstop:()=>e._emit(`changestop`,`slider`,e),onchange(n){if(!t.opacity||!t.palette)return;let r=a();e._recalc&&(r.a=Math.round(n*100)/100),this.element.style.background=`rgba(0, 0, 0, ${r.a})`,o.palette.trigger()}}),selectable:D({elements:e._root.interaction.options,className:`active`,onchange(t){e._representation=t.target.getAttribute(`data-type`).toUpperCase(),e._recalc&&e._updateOutput(`swatch`)}})};this._components=o}_bindEvents(){let{_root:e,options:t}=this,n=[r(e.interaction.clear,`click`,()=>this._clearColor()),r([e.interaction.cancel,e.preview.lastColor],`click`,()=>{this.setHSVA(...(this._lastColor||this._color).toHSVA(),!0),this._emit(`cancel`)}),r(e.interaction.save,`click`,()=>{!this.applyColor()&&!t.showAlways&&this.hide()}),r(e.interaction.result,[`keyup`,`input`],e=>{this.setColor(e.target.value,!0)&&!this._initializingActive&&(this._emit(`change`,this._color,`input`,this),this._emit(`changestop`,`input`,this)),e.stopImmediatePropagation()}),r(e.interaction.result,[`focus`,`blur`],e=>{this._recalc=e.type===`blur`,this._recalc&&this._updateOutput(null)}),r([e.palette.palette,e.palette.picker,e.hue.slider,e.hue.picker,e.opacity.slider,e.opacity.picker],[`mousedown`,`touchstart`],()=>{this._root.interaction.result.blur(),this._recalc=!0},{passive:!0})];if(!t.showAlways){let i=t.closeWithKey;n.push(r(e.button,`click`,()=>this.isOpen()?this.hide():this.show()),r(document,`keyup`,e=>this.isOpen()&&(e.key===i||e.code===i)&&this.hide()),r(document,[`touchstart`,`mousedown`],t=>{this.isOpen()&&!s(t).some(t=>t===e.app||t===e.button)&&this.hide()},{capture:!0}))}if(t.adjustableNumbers){let t={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};l(e.interaction.result,(e,n,r)=>{let i=t[this.getColorRepresentation().toLowerCase()];if(i){let t=i[r],a=e+(t>=100?n*1e3:n);return a<=0?0:Number((a{i.isOpen()&&(t.closeOnScroll&&i.hide(),e===null?(e=setTimeout(()=>e=null,100),requestAnimationFrame(function t(){i._rePositioningPicker(),e!==null&&requestAnimationFrame(t)})):(clearTimeout(e),e=setTimeout(()=>e=null,100)))},{capture:!0}))}this._eventBindings=n}_rePositioningPicker(){let{options:e}=this;if(!e.inline&&!this._nanopop.update({container:document.body.getBoundingClientRect(),position:e.position})){let e=this._root.app,t=e.getBoundingClientRect();e.style.top=`${(window.innerHeight-t.height)/2}px`,e.style.left=`${(window.innerWidth-t.width)/2}px`}}_updateOutput(e){let{_root:t,_color:n,options:r}=this;if(t.interaction.type()){let e=`to${t.interaction.type().getAttribute(`data-type`)}`;t.interaction.result.value=typeof n[e]==`function`?n[e]().toString(r.outputPrecision):``}!this._initializingActive&&this._recalc&&this._emit(`change`,n,e,this)}_clearColor(e=!1){let{_root:t,options:n}=this;n.useAsButton||t.button.style.setProperty(`--pcr-color`,`rgba(0, 0, 0, 0.15)`),t.button.classList.add(`clear`),n.showAlways||this.hide(),this._lastColor=null,!this._initializingActive&&!e&&(this._emit(`save`,null),this._emit(`clear`))}_parseLocalColor(e){let{values:t,type:n,a:r}=C(e),{lockOpacity:i}=this.options,a=r!==void 0&&r!==1;return t&&t.length===3&&(t[3]=void 0),{values:!t||i&&a?null:t,type:n}}_t(t){return this.options.i18n[t]||e.I18N_DEFAULTS[t]}_emit(e,...t){this._eventListener[e].forEach(e=>e(...t,this))}on(e,t){return this._eventListener[e].push(t),this}off(e,t){let n=this._eventListener[e]||[],r=n.indexOf(t);return~r&&n.splice(r,1),this}addSwatch(e){let{values:t}=this._parseLocalColor(e);if(t){let{_swatchColors:e,_root:n}=this,i=w(...t),o=a(` [Parameter] + [Obsolete("已弃用，请删除；Deprecated, please delete")] + [ExcludeFromCodeCoverage] public RenderFragment>? SidebarTemplate { get; set; } /// From dc4a7eeae022053391fe188118fad690795a2551 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 14:47:27 +0800 Subject: [PATCH 46/68] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20DateTimePick?= =?UTF-8?q?erSidebarItem=20=E8=A1=8C=E4=B8=BA=E4=B8=8E=20Range=20=E4=B8=80?= =?UTF-8?q?=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimePickerSidebarItem.cs | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 src/BootstrapBlazor/Components/DateTimePicker/DateTimePickerSidebarItem.cs diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePickerSidebarItem.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePickerSidebarItem.cs new file mode 100644 index 00000000000..3cfdc556ba1 --- /dev/null +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePickerSidebarItem.cs @@ -0,0 +1,29 @@ +// Licensed to the .NET Foundation under one or more agreements. +// The .NET Foundation licenses this file to you under the Apache 2.0 License +// See the LICENSE file in the project root for more information. +// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone + +namespace BootstrapBlazor.Components; + +/// +/// DateTimePicker 组件侧边栏快捷项目类 +/// DateTimePicker Component Sidebar Item Class +/// 11.1.0 +/// +public class DateTimePickerSidebarItem +{ + /// + /// 获得/设置 快捷项目文本 + /// Gets or sets Item Text + /// 11.1.0 + /// + [NotNull] + public string? Text { get; set; } + + /// + /// 获得/设置 快捷项目值 + /// Gets or sets Item Value + /// 11.1.0 + /// + public DateTime Value { get; set; } +} From 3038777c105356e02ce30c4e427529a37f778c55 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 15:15:51 +0800 Subject: [PATCH 47/68] =?UTF-8?q?refactor:=20=E5=88=A0=E9=99=A4=E4=B8=8D?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimePicker/DatePickerBody.razor.cs | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs index 92ae0e3c01c..a74e54c6e8a 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.cs @@ -498,15 +498,6 @@ public bool AllowNull [NotNull] private List? WeekLists { get; set; } - [NotNull] - private string? Today { get; set; } - - [NotNull] - private string? Yesterday { get; set; } - - [NotNull] - private string? Week { get; set; } - private TimePickerOption TimePickerOption { get; } = new(); private Dictionary> AllowSwitchModes { get; } = new Dictionary> @@ -577,10 +568,6 @@ protected override void OnParametersSet() Months = [.. Localizer[nameof(Months)].Value.Split(',')]; WeekLists = GetWeekList(); - Today ??= Localizer[nameof(Today)]; - Yesterday ??= Localizer[nameof(Yesterday)]; - Week ??= Localizer[nameof(Week)]; - PreviousYearIcon ??= IconTheme.GetIconByKey(ComponentIcons.DatePickBodyPreviousYearIcon); PreviousMonthIcon ??= IconTheme.GetIconByKey(ComponentIcons.DatePickBodyPreviousMonthIcon); NextMonthIcon ??= IconTheme.GetIconByKey(ComponentIcons.DatePickBodyNextMonthIcon); From 6b92d1d75ef44256bb82d2a2ac4258270065eb1f Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 15:22:02 +0800 Subject: [PATCH 48/68] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=BE=A7?= =?UTF-8?q?=E8=BE=B9=E6=A0=8F=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimePicker/DateTimePicker.razor | 44 ++++++++++++------- .../DateTimePicker/DateTimePicker.razor.cs | 37 ++++++++++++++++ 2 files changed, 65 insertions(+), 16 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor index 36ea54ac575..8f9ce5eb12d 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor @@ -7,12 +7,14 @@ { } -
- @if(IsButton) +
+ @if (IsButton) { + data-bs-custom-class="@CustomClassString"> + @PickerButtonText + } else { @@ -35,19 +37,29 @@
- @RenderDatePickerBody +
+ @if (ShowSidebar) + { +
+ @foreach (var item in SidebarItems) + { +
+ @item.Text +
+ } +
+ } + + +
- -@code { - RenderFragment RenderDatePickerBody => @ - ; -} diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs index 02fb6de4a52..681cf9d2877 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs @@ -193,12 +193,23 @@ public string? Format [Parameter] public bool ShowSidebar { get; set; } + /// + /// 获得/设置 侧边栏快捷选项集合 + /// Gets or sets Sidebar Items + /// 11.1.0 + /// + [Parameter] + [NotNull] + public List? SidebarItems { get; set; } + /// /// 获得/设置 侧边栏模板 默认 null /// Gets or sets Sidebar Template. Default is null /// [Parameter] [NotNull] + [Obsolete("已弃用，请使用 SidebarItems 属性设置；Deprecated, please use SidebarItems parameter")] + [ExcludeFromCodeCoverage] public RenderFragment>? SidebarTemplate { get; set; } /// @@ -396,6 +407,7 @@ protected override void OnParametersSet() DateFormat ??= Localizer[nameof(DateFormat)]; TimeFormat ??= Localizer[nameof(TimeFormat)]; PickerButtonText ??= Localizer[nameof(PickerButtonText)]; + SidebarItems ??= []; Icon ??= IconTheme.GetIconByKey(ComponentIcons.DateTimePickerIcon); ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.InputClearIcon); @@ -441,6 +453,7 @@ protected override void OnParametersSet() } private List _disabledDaysList = []; + private readonly HashSet _disabledSidebarDays = []; /// /// @@ -449,6 +462,19 @@ protected override async Task OnParametersSetAsync() { await base.OnParametersSetAsync(); + _disabledSidebarDays.Clear(); + if (ShowSidebar && OnGetDisabledDaysCallback != null) + { + foreach (var day in SidebarItems.Select(item => item.Value.Date).Distinct()) + { + var disabledDays = await OnGetDisabledDaysCallback(day, day); + if (disabledDays.Any(value => value.Date == day)) + { + _disabledSidebarDays.Add(day); + } + } + } + if (OnGetDisabledDaysCallback != null && DisplayDisabledDayAsEmpty) { DateTime d = Value switch @@ -652,4 +678,15 @@ public Task TriggerHideCallback() } private string? DialogHeaderText => DisplayText ?? PlaceholderString; + + private bool IsSidebarValueDisabled(DateTime value) => IsDisabled + || value < MinValue || value > MaxValue || _disabledSidebarDays.Contains(value.Date); + + private bool CanTriggerOnclickSidebarItem(DateTime value) => !IsSidebarValueDisabled(value); + + private async Task OnClickSidebarItem(DateTime value) + { + SelectedValue = value; + await OnConfirm(); + } } From 6a1e6348f345bcdd2d0697974d2117a7bafd030b Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 15:36:21 +0800 Subject: [PATCH 49/68] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=20SidebarTempl?= =?UTF-8?q?ate=20=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimePicker/DateTimePicker.razor | 17 +++++++++----- .../DateTimePicker/DateTimePicker.razor.cs | 22 +++++++++++++++---- 2 files changed, 30 insertions(+), 9 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor index 8f9ce5eb12d..4a5ee4c5869 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor @@ -41,12 +41,19 @@ @if (ShowSidebar) {
- @foreach (var item in SidebarItems) + @if (SidebarTemplate != null) { -
- @item.Text -
+ @SidebarTemplate(OnClickSidebarTemplate) + } + else + { + @foreach (var item in SidebarItems) + { +
+ @item.Text +
+ } }
} diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs index 681cf9d2877..b09fe815d89 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs @@ -207,9 +207,6 @@ public string? Format /// Gets or sets Sidebar Template. Default is null /// [Parameter] - [NotNull] - [Obsolete("已弃用，请使用 SidebarItems 属性设置；Deprecated, please use SidebarItems parameter")] - [ExcludeFromCodeCoverage] public RenderFragment>? SidebarTemplate { get; set; } /// @@ -463,7 +460,7 @@ protected override async Task OnParametersSetAsync() await base.OnParametersSetAsync(); _disabledSidebarDays.Clear(); - if (ShowSidebar && OnGetDisabledDaysCallback != null) + if (ShowSidebar && SidebarTemplate == null && OnGetDisabledDaysCallback != null) { foreach (var day in SidebarItems.Select(item => item.Value.Date).Distinct()) { @@ -684,6 +681,23 @@ private bool IsSidebarValueDisabled(DateTime value) => IsDisabled private bool CanTriggerOnclickSidebarItem(DateTime value) => !IsSidebarValueDisabled(value); + private async Task OnClickSidebarTemplate(DateTime value) + { + if (CanTriggerOnclickSidebarItem(value)) + { + if (OnGetDisabledDaysCallback != null) + { + var disabledDays = await OnGetDisabledDaysCallback(value.Date, value.Date); + if (disabledDays.Any(day => day.Date == value.Date)) + { + return; + } + } + + await OnClickSidebarItem(value); + } + } + private async Task OnClickSidebarItem(DateTime value) { SelectedValue = value; From 70ec8cc923ef625059101491b2cdce6f18398cb0 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 15:39:49 +0800 Subject: [PATCH 50/68] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/DateTimePickers.razor | 9 ++++++++- .../Components/Samples/DateTimePickers.razor.cs | 9 +++++++++ src/BootstrapBlazor.Server/Locales/en-US.json | 3 ++- src/BootstrapBlazor.Server/Locales/zh-CN.json | 3 ++- 4 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor index 82ec6b0adce..1e1b9d87afa 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor @@ -190,7 +190,14 @@ - + + + + + + diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs index fd510dc5b72..93b58cb6375 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor.cs @@ -61,6 +61,15 @@ private Task NormalOnConfirm() private DateTime SidebarValue { get; set; } = DateTime.Today; + private DateTime CustomSidebarValue { get; set; } = DateTime.Today; + + private readonly List _sidebarItems = + [ + new() { Text = DateTime.Today.AddDays(-1).ToString("yyyy-MM-dd"), Value = DateTime.Today.AddDays(-1) }, + new() { Text = DateTime.Today.AddDays(1).ToString("yyyy-MM-dd"), Value = DateTime.Today.AddDays(1) }, + new() { Text = DateTime.Today.AddDays(7).ToString("yyyy-MM-dd"), Value = DateTime.Today.AddDays(7) } + ]; + private DateTime YearValue { get; set; } = DateTime.Today; private DateTime MonthValue { get; set; } = DateTime.Today; diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 9d3372f24db..97146371bcc 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -1786,7 +1786,8 @@ "ShowLabelIntro": "When you are a form component, the label in front of the component is displayed", "ShowLabelTip": "Set the DisplayText property value to select time, The pre-label explicit rules are consistent with the BootstrapInput component of the [portal]", "ShowLabelTitle": "The label is displayed", - "ShowSidebarIntro": "When you set the ShowSidebar property value to true, the component displays the shortcut sidebar", + "ShowSidebarIntro": "Set ShowSidebar=\"true\" to show the sidebar and configure shortcuts with SidebarItems. The second example uses SidebarTemplate for a custom first-day-of-month button. Its context is a date selection callback that checks date bounds and disabled dates. The sidebar works in both desktop Popover and mobile Dialog modes.", + "SidebarMonthStart": "First day of this month", "ShowSidebarTitle": "Sidebar with shortcuts", "SubmitText": "Save", "Title": "DatePicker", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index 66ba8f89dd7..e88f27a7f8a 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -1786,7 +1786,8 @@ "ShowLabelIntro": "作为表单组件时，显示组件前方标签", "ShowLabelTip": "设置 DisplayText 属性值为 选择时间, 前置标签显式规则与 BootstrapInput 组件一致 [传送门]", "ShowLabelTitle": "显示标签", - "ShowSidebarIntro": "设置 ShowSidebar 属性值为 true 时，组件显示快捷方式侧边栏", + "ShowSidebarIntro": "设置 ShowSidebar=\"true\" 显示侧边栏，通过 SidebarItems 配置快捷日期。第二个示例使用 SidebarTemplate 自定义“本月第一天”快捷按钮，模板上下文为日期选择回调，选择时仍校验日期范围和禁用日期。侧边栏在桌面 Popover 和移动 Dialog 中均可使用。", + "SidebarMonthStart": "本月第一天", "ShowSidebarTitle": "带快捷键侧边栏", "SubmitText": "保存", "Title": "DatePicker 日期选择器", From 9bdac034bc019537e0ae307b55a8cd03cc63350b Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 15:40:10 +0800 Subject: [PATCH 51/68] =?UTF-8?q?chore:=20=E7=A7=BB=E9=99=A4=20side=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimeRange/DateTimeRange.razor.scss | 2 -- .../wwwroot/scss/variables.scss | 20 ------------------- 2 files changed, 22 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.scss b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.scss index 1d02ae5bd83..1793ae510f7 100644 --- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor.scss @@ -75,8 +75,6 @@ border-bottom-right-radius: 0; } - @include pick-side; - .date-picker-header-label { cursor: unset; diff --git a/src/BootstrapBlazor/wwwroot/scss/variables.scss b/src/BootstrapBlazor/wwwroot/scss/variables.scss index 7c6936bd687..d84e2a3015f 100644 --- a/src/BootstrapBlazor/wwwroot/scss/variables.scss +++ b/src/BootstrapBlazor/wwwroot/scss/variables.scss @@ -198,26 +198,6 @@ $bb-cm-icon-min-height: 14px; color: #409eff } -@mixin pick-side { - .picker-panel-sidebar { - width: 110px; - border-right: 1px solid #e4e4e4; - padding: 6px 0; - overflow: auto; - - .sidebar-item { - line-height: 28px; - padding: 0 12px; - cursor: pointer; - transition: color .3s linear; - - &:hover { - @include color_409eff - } - } - } -} - // DateTimePicker $bb-dt-picker-bar-color: #b5b5c3; $bb-dt-form-control-icon-padding: 6px 33px; From 7f6da85e178cb9d1e92ad6d98c1a93c2e5fe7057 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 15:46:10 +0800 Subject: [PATCH 52/68] =?UTF-8?q?chore:=20=E6=B8=85=E7=90=86=E5=86=97?= =?UTF-8?q?=E4=BD=99=E6=9C=AC=E5=9C=B0=E5=8C=96=E9=94=AE=E5=80=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor/Locales/en.json | 3 --- src/BootstrapBlazor/Locales/zh.json | 3 --- 2 files changed, 6 deletions(-) diff --git a/src/BootstrapBlazor/Locales/en.json b/src/BootstrapBlazor/Locales/en.json index e41fad96d08..e8c4d09005b 100644 --- a/src/BootstrapBlazor/Locales/en.json +++ b/src/BootstrapBlazor/Locales/en.json @@ -57,9 +57,6 @@ "MonthLists": "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec", "WeekLists": "Sun,Mon,Tue,Wed,Thu,Fri,Sat", "GenericTypeErrorMessage": "DateTimePicker only supports DateTime DateTime? DateTimeOffset DateTimeOffset?", - "Today": "Today", - "Yesterday": "Yesterday", - "Week": "A week ago", "ShowMoreText": "Show more", "ShowLessText": "Show less" }, diff --git a/src/BootstrapBlazor/Locales/zh.json b/src/BootstrapBlazor/Locales/zh.json index e6553740929..81f6379da91 100644 --- a/src/BootstrapBlazor/Locales/zh.json +++ b/src/BootstrapBlazor/Locales/zh.json @@ -57,9 +57,6 @@ "MonthLists": "一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月", "WeekLists": "日,一,二,三,四,五,六", "GenericTypeErrorMessage": "DateTimePicker 组件仅支持绑定泛型为 DateTime DateTime? DateTimeOffset DateTimeOffset?", - "Today": "今天", - "Yesterday": "昨天", - "Week": "一周前", "ShowMoreText": "显示更多", "ShowLessText": "显示更少" }, From af9a1a6c1f2e3ccfdfce101838fbc7a8b4988fc4 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 15:46:20 +0800 Subject: [PATCH 53/68] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E5=85=B6?= =?UTF-8?q?=E4=BB=96=E6=9C=AC=E5=9C=B0=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- localization/de.json | 5 +---- localization/es.json | 5 +---- localization/it.json | 5 +---- localization/km-KH.json | 5 +---- localization/pt-BR.json | 5 +---- localization/pt.json | 5 +---- localization/ru-RU.json | 5 +---- localization/th-TH.json | 5 +---- localization/uk-UA.json | 5 +---- localization/zh-TW.json | 5 +---- 10 files changed, 10 insertions(+), 40 deletions(-) diff --git a/localization/de.json b/localization/de.json index b35e87d2a9f..438f68dee74 100644 --- a/localization/de.json +++ b/localization/de.json @@ -56,10 +56,7 @@ "Months": "Jan,Feb,Mär,Apr,Mai,Jun,Jul,Aug,Sep,Okt,Nov,Dez", "MonthLists": "Jan,Feb,Mär,Apr,Mai,Jun,Jul,Aug,Sep,Okt,Nov,Dez", "WeekLists": "So,Mo,Di,Mi,Do,Fr,Sa", - "GenericTypeErrorMessage": "DateTimePicker unterstützt nur DateTime, DateTime?, DateTimeOffset, DateTimeOffset?", - "Today": "Heute", - "Yesterday": "Gestern", - "Week": "Vor einer Woche" + "GenericTypeErrorMessage": "DateTimePicker unterstützt nur DateTime, DateTime?, DateTimeOffset, DateTimeOffset?" }, "BootstrapBlazor.Components.DateTimeRange": { "SeparateText": "Bis", diff --git a/localization/es.json b/localization/es.json index d00078ac86f..3869ca72dfa 100644 --- a/localization/es.json +++ b/localization/es.json @@ -56,10 +56,7 @@ "Months": "Ene,Feb,Mar,Abr,May,Jun,Jul,Ago,Sep,Oct,Nov,Dic", "MonthLists": "Ene,Feb,Mar,Abr,May,Jun,Jul,Ago,Sep,Oct,Nov,Dic", "WeekLists": "Dom,Lun,Mar,Mié,Jue,Vie,Sáb", - "GenericTypeErrorMessage": "DateTimePicker solo soporta DateTime, DateTime?, DateTimeOffset, DateTimeOffset?", - "Today": "Hoy", - "Yesterday": "Ayer", - "Week": "Hace una semana" + "GenericTypeErrorMessage": "DateTimePicker solo soporta DateTime, DateTime?, DateTimeOffset, DateTimeOffset?" }, "BootstrapBlazor.Components.DateTimeRange": { "SeparateText": "A", diff --git a/localization/it.json b/localization/it.json index 2b4d6669470..3aca49c20a4 100644 --- a/localization/it.json +++ b/localization/it.json @@ -56,10 +56,7 @@ "Months": "Gennaio,Febbraio,Marzo,Aprile,Maggio,Giugno,Luglio,Agosto,Settembre,Ottobre,Novembre,Dicembre", "MonthLists": "Gen,Feb,Mar,Apr,Mag,Giu,Lug,Ago,Set,Ott,Nov,Dic", "WeekLists": "Dom,Lun,Mar,Mer,Gio,Ven,Sab", - "GenericTypeErrorMessage": "DateTimePicker supporta solo DateTime o Nullable", - "Today": "Oggi", - "Yesterday": "Ieri", - "Week": "Una settimana fa" + "GenericTypeErrorMessage": "DateTimePicker supporta solo DateTime o Nullable" }, "BootstrapBlazor.Components.DateTimeRange": { "SeparateText": "A", diff --git a/localization/km-KH.json b/localization/km-KH.json index be18274346b..bc7b952a604 100644 --- a/localization/km-KH.json +++ b/localization/km-KH.json @@ -56,10 +56,7 @@ "Months": "មករា,កុម្ភៈ,មីនា,មេសា,ឧសភា,មិថុនា,កក្កដា,សីហា,កញ្ញា,តុលា,វិច្ឆិកា,ធ្នូ", "MonthLists": "មករា,កុម្ភៈ,មីនា,មេសា,ឧសភា,មិថុនា,កក្កដា,សីហា,កញ្ញា,តុលា,វិច្ឆិកា,ធ្នូ", "WeekLists": "អាទិត្យ,ចន្ទ,អង្គារ,ពុធ,ព្រហស្បតិ៍,សុក្រ,សៅរ៍", - "GenericTypeErrorMessage": "DateTimePicker ដំណើរការតែ DateTime, DateTime?, DateTimeOffset និង DateTimeOffset? ប៉ុណ្ណោះ", - "Today": "ថ្ងៃនេះ", - "Yesterday": "ម្សិលមិញ", - "Week": "មួយ​សប្តាហ៍​មុន" + "GenericTypeErrorMessage": "DateTimePicker ដំណើរការតែ DateTime, DateTime?, DateTimeOffset និង DateTimeOffset? ប៉ុណ្ណោះ" }, "BootstrapBlazor.Components.DateTimeRange": { "SeparateText": "ដល់", diff --git a/localization/pt-BR.json b/localization/pt-BR.json index 5b26fd0668c..11e28df7eaa 100644 --- a/localization/pt-BR.json +++ b/localization/pt-BR.json @@ -56,10 +56,7 @@ "Months": "Jan,Fev,Mar,Abr,Mai,Jun,Jul,Ago,Set,Out,Nov,Dez", "MonthLists": "Jan,Fev,Mar,Abr,Mai,Jun,Jul,Ago,Set,Out,Nov,Dez", "WeekLists": "Dom,Seg,Ter,Qua,Qui,Sex,Sáb", - "GenericTypeErrorMessage": "DateTimePicker só suporta DateTime DateTime? DateTimeOffset DateTimeOffset?", - "Today": "Hoje", - "Yesterday": "Ontem", - "Week": "Há uma semana" + "GenericTypeErrorMessage": "DateTimePicker só suporta DateTime DateTime? DateTimeOffset DateTimeOffset?" }, "BootstrapBlazor.Components.DateTimeRange": { "SeparateText": "Até", diff --git a/localization/pt.json b/localization/pt.json index b295e8c559a..1683290ab7c 100644 --- a/localization/pt.json +++ b/localization/pt.json @@ -56,10 +56,7 @@ "Months": "Jan,Fev,Mar,Abr,Mai,Jun,Jul,Ago,Set,Out,Nov,Dez", "MonthLists": "Jan,Fev,Mar,Abr,Mai,Jun,Jul,Ago,Set,Out,Nov,Dez", "WeekLists": "Dom,Seg,Ter,Qua,Qui,Sex,Sáb", - "GenericTypeErrorMessage": "DateTimePicker suporta apenas DateTime, DateTime?, DateTimeOffset, DateTimeOffset?", - "Today": "Hoje", - "Yesterday": "Ontem", - "Week": "Uma semana atrás" + "GenericTypeErrorMessage": "DateTimePicker suporta apenas DateTime, DateTime?, DateTimeOffset, DateTimeOffset?" }, "BootstrapBlazor.Components.DateTimeRange": { "SeparateText": "Até", diff --git a/localization/ru-RU.json b/localization/ru-RU.json index 5a06500b52b..da82c4bf1da 100644 --- a/localization/ru-RU.json +++ b/localization/ru-RU.json @@ -56,10 +56,7 @@ "Months": "Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек", "MonthLists": "Янв,Фев,Мар,Апр,Май,Июн,Июл,Авг,Сен,Окт,Ноя,Дек", "WeekLists": "Вс,Пн,Вт,Ср,Чт,Пт,Сб", - "GenericTypeErrorMessage": "DateTimePicker поддерживает только DateTime, DateTime?, DateTimeOffset, DateTimeOffset?", - "Today": "Сегодня", - "Yesterday": "Вчера", - "Week": "Неделю назад" + "GenericTypeErrorMessage": "DateTimePicker поддерживает только DateTime, DateTime?, DateTimeOffset, DateTimeOffset?" }, "BootstrapBlazor.Components.DateTimeRange": { "SeparateText": "До", diff --git a/localization/th-TH.json b/localization/th-TH.json index 6cb85f59a5f..333b645978c 100644 --- a/localization/th-TH.json +++ b/localization/th-TH.json @@ -56,10 +56,7 @@ "Months": "ม.ค.,ก.พ.,มี.ค.,เม.ย.,พ.ค.,มิ.ย.,ก.ค.,ส.ค.,ก.ย.,ต.ค.,พ.ย.,ธ.ค.", "MonthLists": "ม.ค.,ก.พ.,มี.ค.,เม.ย.,พ.ค.,มิ.ย.,ก.ค.,ส.ค.,ก.ย.,ต.ค.,พ.ย.,ธ.ค.", "WeekLists": "อา,จ,อ,พ,พฤ,ศ,ส", - "GenericTypeErrorMessage": "DateTimePicker รองรับเฉพาะ DateTime, DateTime?, DateTimeOffset, DateTimeOffset?", - "Today": "วันนี้", - "Yesterday": "เมื่อวาน", - "Week": "หนึ่งสัปดาห์ก่อน" + "GenericTypeErrorMessage": "DateTimePicker รองรับเฉพาะ DateTime, DateTime?, DateTimeOffset, DateTimeOffset?" }, "BootstrapBlazor.Components.DateTimeRange": { "SeparateText": "ถึง", diff --git a/localization/uk-UA.json b/localization/uk-UA.json index 02f9abb8ab9..c81595cd30e 100644 --- a/localization/uk-UA.json +++ b/localization/uk-UA.json @@ -56,10 +56,7 @@ "Months": "Січ,Лют,Бер,Квіт,Трав,Черв,Лип,Серп,Вер,Жовт,Лист,Груд", "MonthLists": "Січ,Лют,Бер,Квіт,Трав,Черв,Лип,Серп,Вер,Жовт,Лист,Груд", "WeekLists": "Нд,Пн,Вт,Ср,Чт,Пт,Сб", - "GenericTypeErrorMessage": "DateTimePicker підтримує лише DateTime, DateTime?, DateTimeOffset, DateTimeOffset?", - "Today": "Сьогодні", - "Yesterday": "Вчора", - "Week": "Тиждень тому" + "GenericTypeErrorMessage": "DateTimePicker підтримує лише DateTime, DateTime?, DateTimeOffset, DateTimeOffset?" }, "BootstrapBlazor.Components.DateTimeRange": { "SeparateText": "До", diff --git a/localization/zh-TW.json b/localization/zh-TW.json index 7622f7ce3ff..e15293cd359 100644 --- a/localization/zh-TW.json +++ b/localization/zh-TW.json @@ -56,10 +56,7 @@ "Months": "1,2,3,4,5,6,7,8,9,10,11,12", "MonthLists": "一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一月,十二月", "WeekLists": "日,一,二,三,四,五,六", - "GenericTypeErrorMessage": "DateTimePicker 元件僅支援綁定泛型為 DateTime DateTime? DateTimeOffset DateTimeOffset?", - "Today": "今天", - "Yesterday": "昨天", - "Week": "一週前" + "GenericTypeErrorMessage": "DateTimePicker 元件僅支援綁定泛型為 DateTime DateTime? DateTimeOffset DateTimeOffset?" }, "BootstrapBlazor.Components.DateTimeRange": { "SeparateText": "至", From bbb1d227097e77aef09d14dfccaf2222fa81664e Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 15:47:42 +0800 Subject: [PATCH 54/68] =?UTF-8?q?chore:=20=E5=A2=9E=E5=8A=A0=E6=9C=AC?= =?UTF-8?q?=E5=9C=B0=E5=8C=96=E8=A7=84=E6=B5=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- AGENTS.md | 1 + 1 file changed, 1 insertion(+) diff --git a/AGENTS.md b/AGENTS.md index 02f804ab932..979e340a029 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -34,6 +34,7 @@ - 所有用户可见文本必须使用 `IStringLocalizer` - 禁止硬编码中文/英文 UI 文本 +- 本地化文件使用 json 文件存储在 localization 文件夹与相应项目 Locales 目录下 --- From d588cc7db369edacf6fe55503318a113d88514bb Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 16:09:07 +0800 Subject: [PATCH 55/68] =?UTF-8?q?chore:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimePicker/DateTimePicker.razor.scss | 59 ++++++++++++++----- 1 file changed, 43 insertions(+), 16 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss index b45228593f6..7c3e0e7cc8d 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss @@ -33,11 +33,25 @@ } } - .picker-panel { - display: none + .datetime-picker-panel { + display: none; } } +.datetime-picker-bar { + position: absolute; + top: 0; + left: 0; + line-height: var(--bb-height); + cursor: pointer; + padding: 0 .75rem; + color: var(--bb-dt-picker-bar-color); +} + +.popover .picker-panel { + box-shadow: none; +} + .datetime-dialog { overflow: auto; padding: 0; @@ -46,10 +60,9 @@ outline: 0; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); - &[open] .picker-panel { - display: block; - border: 0; - box-shadow: none; + &[open] .datetime-picker-panel { + display: flex; + flex-direction: column; } .datetime-dialog-header { @@ -68,16 +81,30 @@ } } -.datetime-picker-bar { - position: absolute; - top: 0; - left: 0; - line-height: var(--bb-height); - cursor: pointer; - padding: 0 .75rem; - color: var(--bb-dt-picker-bar-color); +.datetime-picker-panel { + display: flex; + + > .picker-panel { + display: block; + border: 0; + box-shadow: none; + } } -.popover .picker-panel { - box-shadow: none; +.picker-panel-sidebar { + width: 110px; + border-right: var(--bs-border-width) solid var(--bs-border-color); + padding: 6px 0; + overflow: auto; + + .sidebar-item { + line-height: 28px; + padding: 0 12px; + cursor: pointer; + transition: color .3s linear; + + &:hover { + @include color_409eff + } + } } From 8c82b31c75b5304f2322008eea6b6bd57461aa06 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 16:09:16 +0800 Subject: [PATCH 56/68] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Samples/DateTimePickers.razor | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor index 1e1b9d87afa..d016dac0919 100644 --- a/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor +++ b/src/BootstrapBlazor.Server/Components/Samples/DateTimePickers.razor @@ -193,9 +193,10 @@ - +
+ + @Localizer["SidebarMonthStart"] +
From fbd14471abb54762d24af5ba550967fcca3a59b3 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 16:48:19 +0800 Subject: [PATCH 57/68] =?UTF-8?q?refactor:=20=E6=92=A4=E9=94=80=E5=86=97?= =?UTF-8?q?=E4=BD=99=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimePicker/DateTimePicker.razor.cs | 83 ++----------------- 1 file changed, 5 insertions(+), 78 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs index d7f87150a4f..7acec180afb 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.cs @@ -386,80 +386,6 @@ public string? Format private DatePickerBody _pickerBody = default!; - private bool? _isMobile; - private bool _renderModal; - private bool _isModalOpen; - private readonly TaskCompletionSource _modalReady = new(); - - private string? MobileString => _isMobile.HasValue ? (_isMobile.Value ? "true" : "false") : null; - - private bool ShowDatePickerFooter => _isMobile != true; - - private string? ModalClassString => CssBuilder.Default("datetime-picker-modal") - .AddClass(CustomClass) - .Build(); - - private async Task OnBreakPointChanged(BreakPoint size) - { - var isMobile = size < BreakPoint.Medium; - if (_isMobile != isMobile) - { - _isMobile = isMobile; - _renderModal |= isMobile; - if (!await InvokeAsync("isShown", Id)) - { - StateHasChanged(); - } - } - } - - private Task OnModalReadyAsync(Modal modal) - { - _modalReady.TrySetResult(modal); - return Task.CompletedTask; - } - - /// - /// 客户端在移动端请求显示日期弹窗时调用此方法 - /// Called by JavaScript to show the date dialog on small screens - /// - [JSInvokable] - public async Task TriggerShowModalCallback() - { - if (IsDisabled) - { - return false; - } - - if (!_isModalOpen) - { - _isModalOpen = true; - var modal = await _modalReady.Task; - await InvokeVoidAsync("showModal", Id, modal.Id); - await modal.Show(); - } - return true; - } - - private Task OnModalClosedAsync() - { - _isModalOpen = false; - return TriggerHideCallback(); - } - - private async Task HidePickerAsync() - { - if (_isModalOpen) - { - var modal = await _modalReady.Task; - await modal.Close(); - } - else - { - await InvokeVoidAsync("hide", Id); - } - } - /// /// /// @@ -626,8 +552,7 @@ protected override string FormatValueAsString(TValue? value) /// protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { - TriggerHideCallback = nameof(TriggerHideCallback), - TriggerShowModalCallback = nameof(TriggerShowModalCallback) + TriggerHideCallback = nameof(TriggerHideCallback) }); private bool MinValueToEmpty(DateTime val) => val == DateTime.MinValue && AllowNull && DisplayMinValueAsEmpty; @@ -652,7 +577,7 @@ private async Task OnConfirm() if (AutoClose) { - await HidePickerAsync(); + await ClosePickerPanel(); } } @@ -664,10 +589,12 @@ private async Task OnClear() if (AutoClose) { - await HidePickerAsync(); + await ClosePickerPanel(); } } + private Task ClosePickerPanel() => InvokeVoidAsync("hide", Id); + private TValue? GetValue() { TValue? ret = default; From 67e1d52b5306cfb81fa71dfb4de9299dd61d576d Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 16:48:39 +0800 Subject: [PATCH 58/68] =?UTF-8?q?style:=20=E6=9B=B4=E6=96=B0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimePicker/DateTimePicker.razor.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss index 7c3e0e7cc8d..3cbffacff46 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss @@ -60,11 +60,21 @@ outline: 0; box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); - &[open] .datetime-picker-panel { + .datetime-picker-panel { display: flex; flex-direction: column; } + .picker-panel-sidebar { + border-right: 0; + border-bottom: var(--bs-border-width) solid var(--bs-border-color); + width: 100%; + overflow: auto; + max-height: 69px; + display: grid; + grid-template-columns: repeat(2, 1fr); + } + .datetime-dialog-header { display: flex; align-items: center; From 643d6dead6433d7d3584a156cdd081d88fbfbdd6 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 16:48:46 +0800 Subject: [PATCH 59/68] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/DatePickerDialogForm.razor | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor b/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor index 8db2974dac1..169d352c704 100644 --- a/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor +++ b/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor @@ -5,6 +5,37 @@
+
+ + +
+ + @Localizer["SidebarMonthStart"] +
+
+ + @Localizer["SidebarMonthStart"] +
+
+ + @Localizer["SidebarMonthStart"] +
+
+ + @Localizer["SidebarMonthStart"] +
+
+ + @Localizer["SidebarMonthStart"] +
+
+ + @Localizer["SidebarMonthStart"] +
+ + +
@@ -35,6 +66,12 @@ [Required] public DateTime? DateValue { get; set; } + /// + /// 获得/设置 自定义侧边栏日期。 + /// Gets or sets the custom sidebar date. + /// + public DateTime? SidebarDateValue { get; set; } + /// /// 获得/设置 表单日期时间。 /// Gets or sets the form date and time. From c4b42e0f01e68da711640567711c8628528b29ed Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 19:28:57 +0800 Subject: [PATCH 60/68] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=80=82=E9=85=8D=E6=96=B0=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/DateTimePicker/DatePickerBody.razor.scss | 7 +++++-- .../Components/DateTimePicker/DateTimePicker.razor.scss | 1 - 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss index acf99ee02e5..13cd3a0d7d3 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss @@ -12,7 +12,9 @@ background-color: var(--bs-body-bg); border-radius: var(--bs-border-radius); line-height: 30px; - display: inline-block; + display: block; + width: var(--bb-picker-panel-body-width); + overflow: hidden; .picker-panel-body { display: flex; @@ -68,7 +70,7 @@ } .picker-panel-content { - width: 290px; + width: calc(var(--bb-picker-panel-body-width) - 30px); position: relative; margin: 15px; @@ -295,6 +297,7 @@ .clock-panel-body { width: var(--bb-picker-panel-body-width); + padding: 0 28px; } } diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss index 3cbffacff46..325ee84c130 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss @@ -95,7 +95,6 @@ display: flex; > .picker-panel { - display: block; border: 0; box-shadow: none; } From fec9dad895d0153e2604c507b0267601da176050 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 19:29:04 +0800 Subject: [PATCH 61/68] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/Components/DatePickerDialogForm.razor | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor b/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor index 169d352c704..65acde45324 100644 --- a/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor +++ b/src/BootstrapBlazor.Server/Components/Components/DatePickerDialogForm.razor @@ -38,7 +38,7 @@
+ PickTimeMode="PickTimeMode.Clock" DisplayText="@Localizer["NestedDateTimeLabel"]" />
From c3d60355dfb91540f0c11200203edecf9a38514f Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 20:14:38 +0800 Subject: [PATCH 62/68] =?UTF-8?q?chore:=20=E7=B2=BE=E7=AE=80=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/DateTimePicker/DatePickerBody.razor.scss | 7 ------- .../Components/DateTimePicker/DateTimePicker.razor.scss | 7 +------ 2 files changed, 1 insertion(+), 13 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss index 13cd3a0d7d3..ac0d1d68361 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DatePickerBody.razor.scss @@ -3,7 +3,6 @@ .picker-panel { --bb-picker-panel-body-width: 320px; --bb-picker-hover-color: #409eff; - --bb-picker-panel-side-width: 0; --bb-picker-panel-today-color: #fff; --bb-picker-panel-today-bg: #409eff; color: var(--bs-body-color); @@ -301,12 +300,6 @@ } } -.popover-body { - .picker-panel { - box-shadow: none; - } -} - .picker-panel-time { display: flex; justify-content: space-between; diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss index 325ee84c130..842eb82e7e2 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor.scss @@ -48,10 +48,6 @@ color: var(--bb-dt-picker-bar-color); } -.popover .picker-panel { - box-shadow: none; -} - .datetime-dialog { overflow: auto; padding: 0; @@ -61,7 +57,6 @@ box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); .datetime-picker-panel { - display: flex; flex-direction: column; } @@ -81,7 +76,7 @@ padding: .5rem 1rem; border-bottom: var(--bs-border-width) solid var(--bs-border-color); border-top-left-radius: var(--bs-border-radius); - border-top-right-radius: var(--bs--border-radius); + border-top-right-radius: var(--bs-border-radius); .datetime-dialog-header-title { flex: 1 1 auto; From b4e6de79b89d4b60934b21ced9e7ad5d4cc100bc Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 20:35:41 +0800 Subject: [PATCH 63/68] =?UTF-8?q?refactor:=20=E4=B8=8E=20Picker=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=BB=9F=E4=B8=80=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimeRange/DateTimeRange.razor | 108 +++++++++--------- 1 file changed, 53 insertions(+), 55 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor index 4ea7011ed3f..a05d96e666f 100644 --- a/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor +++ b/src/BootstrapBlazor/Components/DateTimeRange/DateTimeRange.razor @@ -6,7 +6,7 @@ { } -
+
@@ -25,61 +25,59 @@
- @RenderRangeBody -
- -
- -@code { - RenderFragment RenderRangeBody => @
-
- @if (ShowSidebar) - { -
- @foreach (var item in SidebarItems) - { -
-
@item.Text
-
- } -
- } - - @if (RenderMode == DateTimeRangeRenderMode.Double) - { - - - } - - - -
-
-
- @if (ShowClearButton) +
+ @if (ShowSidebar) { - +
+ @foreach (var item in SidebarItems) + { +
+
@item.Text
+
+ } +
} +
+
+ + @if (RenderMode == DateTimeRangeRenderMode.Double) + { + + + } + + + +
+
+
+ @if (ShowClearButton) + { + + } +
+ @if (ShowToday) + { + + } + +
+
- @if (ShowToday) - { - - } -
-
; -} + +
From 60e74d0d3110050c61509acae165b1ad59c8a6e1 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Thu, 5 Nov 2026 20:36:07 +0800 Subject: [PATCH 64/68] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=20data-bb-?= =?UTF-8?q?dropdown=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/DateTimePicker/DateTimePicker.razor | 2 +- .../Components/DateTimePicker/DateTimePicker.razor.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor index 4a5ee4c5869..1c5effa26bf 100644 --- a/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor +++ b/src/BootstrapBlazor/Components/DateTimePicker/DateTimePicker.razor @@ -7,7 +7,7 @@ { } -
+
@if (IsButton) {