havit / havit.blazor Goto Github PK

Free Bootstrap 5 components for ASP.NET Blazor + optional enterprise-level stack for Blazor development (gRPC code-first, layered architecture, localization, auth, ...)

Home Page: https://havit.blazor.eu

License: MIT License

HTML 40.29% C# 55.45% CSS 2.38% JavaScript 1.75% SCSS 0.13%

blazor wasm webassembly asp-net bootstrap bootstrap5

havit.blazor's Introduction

HAVIT Blazor - Bootstrap 5 component bundle

Free Bootstrap 5.3 components for ASP.NET Blazor
.NET 6+ with Blazor WebAssembly or Blazor Server (other hosting models not tested yet, .NET 7 fully supported)
Enterprise project template (optional) - layered architecture, EF Core, gRPC code-first, ...

If you enjoy using HAVIT Blazor, you can become a sponsor. Your sponsorship will allow us to devote time to features and issues requested by the community (i.e. not required by our own projects) ❤️.

See >>Interactive Documentation & Demos<<

Components

Forms

HxAutosuggest - Component for single item selection with dynamic suggestions.
HxCalendar - Basic calendar building block.
HxInputDate - Date picker. Form input component for entering a date.
HxInputDateRange - Date range picker. Form input component for entering start date and end date.
HxInputFile[Core] - Wraps HxInputFileCore as Bootstrap form control (incl. Label etc.).
HxInputFileDropZone - Ready-made UX for drag&drop file upload.
HxInputNumber - Numeric input.
HxInputPercent - Numeric input in percentages with value normalization (0% = 0, 100% = 1.0).
HxInputRange - Range input (slider).
HxInputTags - Input for entering tags.
HxInputText - Text input (also password, search, etc.)
HxInputTextArea - Textarea.
HxCheckbox - Checkbox input.
HxCheckboxList - Multiple choice by checkboxes.
HxFormState - Propagates form states as a cascading parementer to child components.
HxFormValue - Displays a read-only value in the form control visual.
HxRadioButtonList - Select.
HxSelect - Select - DropDownList - single-item picker.
HxMultiSelect - Unlike a normal select, multiselect allows the user to select multiple options at once.
HxSearchBox - A search input component witch automatic suggestions, initial dropdown template and free-text queries support.
HxSwitch - Switch input.
HxFilterForm - Edit form derived from HxModelEditForm with support for chip generators.
HxValidationMessage - Displays a list of validation messages for a specified field.

Buttons & Indicators

HxButton - Bootstrap button.
HxButtonGroup - Bootstrap ButtonGroups.
HxButtonToolbar - Bootstrap ButtonGroups.
HxCloseButton - Bootstrap close-button.
HxSubmit - Submit button.
HxDropdown - Bootstrap 5 Dropdown.
HxBadge - Bootstrap Badge component.
HxChipList - Presents a list of chips as badges.
HxIcon - Displays an icon.
HxSpinner - Bootstrap Spinner (usually indicates operation in progress).
HxProgressIndicator - Displays the content of the component as "in progress".
HxTooltip - Bootstrap Tooltip component, activates on hover.
HxPopover - Bootstrap Popover component.

Data & Grid

HxGrid - Grid to display tabular data from data source.
HxContextMenu - Ready-made context menu.
HxPager - Pager.
HxRepeater - A data-bound list component.
HxTreeView - Component to display hierarchy data structure.

Layout & Typography

HxAccordion - Bootstrap accordion component.
HxAlert - Bootstrap Alert.
HxBadge - Bootstrap Badge component.
HxCard - Bootstrap Card component.
HxCarousel - A slideshow component for cycling through elements—images or slides of text—like a carousel.
HxCollapse - Bootstrap 5 Collapse component.
HxDropdown - Bootstrap 5 Dropdown.
HxIcon - Displays an icon.
HxSpinner - Bootstrap Spinner (usually indicates operation in progress).
HxPlaceholder - Bootstrap 5 Placeholder component, aka Skeleton.
HxProgress - Bootstrap 5 Progress component.
HxProgressIndicator - Displays the content of the component as "in progress".
HxTooltip - Bootstrap Tooltip component, activates on hover.
HxTabPanel - Container for HxTab.
HxListGroup - Bootstrap 5 List group component.
HxListLayout - Page layout for data presentation (usualy HxGrid with filter in HxOffcanvas).
HxFormValue - Displays a read-only value in the form control visual (as .form-control, with label, border, etc.).

Navigation

HxNavbar - Bootstrap 5 Navbar component - responsive navigation header.
HxSidebar - Sidebar component - responsive navigation sidebar.
HxNav - Bootstrap Nav component.
HxNavLink - Bootstrap Nav component.
HxScrollspy - Bootstrap Scrollspy component.
HxBreadcrumb - Bootstrap 5 Breadcrumb component. Indicates the current page’s location within a navigational hierarchy.
HxAnchorFragmentNavigation - Compensates Blazor deficiency in anchor-fragments (scrolling to page#id URLs).
HxContextMenu - Ready-made context menu.
HxDropdown - Bootstrap 5 Dropdown.
HxTabPanel - Container for HxTab for easier implementation of tabbed UI.
HxRedirectTo - Rendering a HxRedirectTo will navigate to a new location.

Modals & Interactions

HxMessageBox - Component to display message-boxes.
HxModal - Component to render modal dialog as a Bootstrap Modal.
HxDialogBase - Base class to simplify custom modal dialog implementation.
HxOffcanvas - Bootstrap Offcanvas component (aka Drawer).
HxMessenger - HxToastContainer wrapper for displaying HxToast messages dispatched through IHxMessengerService.
HxToast - Bootstrap Toast component. Not intented to be used in user code, use HxMessenger.

Special

HxDynamicElement - Renders an element with the specified name, attributes and child-content.
HxGoogleTagManager - Support for Google Tag Manager - initialization and pushing data to data-layer.

havit.blazor's People

Contributors

Stargazers

Watchers

havit.blazor's Issues

[HxButton] Not specifying HxButton.Color throws exception

HxButton throws an exception when the Color attribute is not specified. One should assume if the color is not specified, it's display properties will be controlled in the CssClass property.

Hi. Thanks for the great work! The HxInputFile works great when I'm uploading files from the same machine where the site is hosted, but refuses to work when I initiate upload from another PC. I get preflight timeouts in chrome developer console. I suppose that it has something to do with CORS as my UploadUrl is on another port (and will be on another IP in the future), but I set my API to enable requests from any origin. Did you test you component in such a scenario?

[HxTooltip] [HxPopover] [HxTooltipInternalBase] [HxButton] - d-inline-block wrapper?

Opened by @robertmclaws in PR #52.

HxDropdownToggleElement is missing [Parameter] on the EventCallbacks

HxDropdownToggleButton has [Parameter] on the OnShown and OnHidden EventCallbacks, but the attribute is missing from them on HxDropdownToggleElement. I'm guessing this is just an oversight not on purpose? It makes it impossible to assign the event handlers in the markup. (I'm assigning them in code at the moment as a workaround, but thats rather messy)

List-groups

https://getbootstrap.com/docs/5.1/components/list-group/

[HxCarousel] Add CarouselSlideEventArgs to OnSlide+OnSlid with From+To values

https://getbootstrap.com/docs/5.1/components/carousel/#events

cc @Harvey1214, low-priority

[HxPopover] Cannot read properties of null (reading 'removeEventListener') when leaving page early

When leaving the page before the popover gets fully initialized:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot read properties of null (reading 'removeEventListener')
      TypeError: Cannot read properties of null (reading 'removeEventListener')
          at destroy (https://localhost:44381/_content/Havit.Blazor.Components.Web.Bootstrap/HxPopover.js:29:10)
          at Module.createOrUpdate (https://localhost:44381/_content/Havit.Blazor.Components.Web.Bootstrap/HxPopover.js:3:2)
          at https://localhost:44381/_framework/blazor.webassembly.js:1:3942
          at new Promise (<anonymous>)
          at Object.beginInvokeJSFromDotNet (https://localhost:44381/_framework/blazor.webassembly.js:1:3908)
          at Object.w [as invokeJSFromDotNet] (https://localhost:44381/_framework/blazor.webassembly.js:1:64232)
          at _mono_wasm_invoke_js_blazor (https://localhost:44381/_framework/dotnet.5.0.12.js:1:190800)
          at do_icall (wasm://wasm/00aba242:wasm-function[10596]:0x194e4e)
          at do_icall_wrapper (wasm://wasm/00aba242:wasm-function[3305]:0x79df9)
          at interp_exec_method (wasm://wasm/00aba242:wasm-function[2155]:0x44ad3)
Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'removeEventListener')
TypeError: Cannot read properties of null (reading 'removeEventListener')
    at destroy (https://localhost:44381/_content/Havit.Blazor.Components.Web.Bootstrap/HxPopover.js:29:10)
    at Module.createOrUpdate (https://localhost:44381/_content/Havit.Blazor.Components.Web.Bootstrap/HxPopover.js:3:2)
    at https://localhost:44381/_framework/blazor.webassembly.js:1:3942
    at new Promise (<anonymous>)
    at Object.beginInvokeJSFromDotNet (https://localhost:44381/_framework/blazor.webassembly.js:1:3908)
    at Object.w [as invokeJSFromDotNet] (https://localhost:44381/_framework/blazor.webassembly.js:1:64232)
    at _mono_wasm_invoke_js_blazor (https://localhost:44381/_framework/dotnet.5.0.12.js:1:190800)
    at do_icall (wasm://wasm/00aba242:wasm-function[10596]:0x194e4e)
    at do_icall_wrapper (wasm://wasm/00aba242:wasm-function[3305]:0x79df9)
    at interp_exec_method (wasm://wasm/00aba242:wasm-function[2155]:0x44ad3)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__15`1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at Havit.Blazor.Components.Web.Bootstrap.Internal.HxTooltipInternalBase.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

We need to make the JS test for popover instance existence.

OnClickStopPropagation defaults

Do we want to use @onclick:stopPropagation so extensively (default true) as we do?

[HxPager] Overflowing on mobile devices

As the TableContainerCssClass only wraps the table itself, there is potential issue with HxPager overflowing on mobile devices if the number of pages is high even though the table-responsive class is used.

Test

[HxButton] Cannot specify HxTooltip span CSS classes

I have a button group I'm implementing where I need to be able to set the padding on the button content. However, when a Tooltip is specified, the HxButton.CssClass is not set on the <span /> used to contain the tooltip, so it renders incorrectly.

The one on the top is the proper rendering, using the original controls I'm replacing. the one on the bottom is with HxButtons. The first button does not have a tooltip specified, whereas the other 2 do. So px-2 is set on the <button />. not the <span /> that contains it.

[HxBreadcrumb]

Do we want https://getbootstrap.com/docs/5.1/components/breadcrumb/?

[HxCarousel] System.ObjectDisposedException: ObjectDisposed_Generic

blazor.webassembly.js:1 
        
       crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: ObjectDisposed_Generic
      ObjectDisposed_ObjectName_Name, DotNetObjectReference`1
System.ObjectDisposedException: ObjectDisposed_Generic
ObjectDisposed_ObjectName_Name, DotNetObjectReference`1
   at Microsoft.JSInterop.DotNetObjectReference`1[[Havit.Blazor.Components.Web.Bootstrap.HxCollapse, Havit.Blazor.Components.Web.Bootstrap, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null]].ThrowIfDisposed()
   at Microsoft.JSInterop.JSRuntime.TrackObjectReference[HxCollapse](DotNetObjectReference`1 dotNetObjectReference)
   at Microsoft.JSInterop.Infrastructure.DotNetObjectReferenceJsonConverter`1[[Havit.Blazor.Components.Web.Bootstrap.HxCollapse, Havit.Blazor.Components.Web.Bootstrap, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null]].Write(Utf8JsonWriter writer, DotNetObjectReference`1 value, JsonSerializerOptions options)
   at System.Text.Json.Serialization.JsonConverter`1[[Microsoft.JSInterop.DotNetObjectReference`1[[Havit.Blazor.Components.Web.Bootstrap.HxCollapse, Havit.Blazor.Components.Web.Bootstrap, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null]], Microsoft.JSInterop, Version=5.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].TryWrite(Utf8JsonWriter writer, DotNetObjectReference`1& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1[[Microsoft.JSInterop.DotNetObjectReference`1[[Havit.Blazor.Components.Web.Bootstrap.HxCollapse, Havit.Blazor.Components.Web.Bootstrap, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null]], Microsoft.JSInterop, Version=5.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].TryWrite(Utf8JsonWriter writer, Object& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.ArrayConverter`2[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnWriteResume(Utf8JsonWriter writer, Object[] value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.IEnumerableDefaultConverter`2[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnTryWrite(Utf8JsonWriter writer, Object[] value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].TryWrite(Utf8JsonWriter writer, Object[]& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].WriteCore(Utf8JsonWriter writer, Object[]& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.JsonSerializer.WriteCore[Object[]](JsonConverter jsonConverter, Utf8JsonWriter writer, Object[]& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.JsonSerializer.WriteCore[Object[]](Utf8JsonWriter writer, Object[]& value, Type inputType, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.Serialize[Object[]](Object[]& value, Type inputType, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.Serialize[Object[]](Object[] value, JsonSerializerOptions options)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[Object](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__15`1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at Havit.Blazor.Components.Web.Bootstrap.HxCollapse.OnAfterRenderAsync(Boolean firstRender)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

Application-wide default for input-sizes (HxDefaults.InputSize?)

Instead of having to set HxComponent.Defaults.InputSize for every single input component, allow using some central setting such as HxDefault.sInputSize.

Suggested names?

[HxInputNumber] Needs to limit inputs by range and numeric characters

Other Numeric Blazor controls (like Radzen's Numeric) allow for limiting the inputs by Min, Max, and alpha characters. I believe this control should behave in a similar manner.

For example, I was able to use the built-in support to get your control to render like this, but I cannot limit it to only positive integers without extra code.

Also, I can still use my desktop keyboard to type letters into the control, and it will accept them. I don't believe there is any reason why this control should accept alpha characters as input.

Thanks for building a great control kit!

[Documentation] ButtonGroup and ButtonToolbar docs broken

Just a heads up, the docs in the following locations are broken:

https://havit.blazor.eu/components/HxButtonGroup
https://havit.blazor.eu/components/HxButtonToolbar

Tried to fix them myself and submit a pull request, but I could not find the problem.

Thanks!

Do we want hx-component-name classes for standard Bootstrap components? How to handle them in derived components?

For most HxComponents we add a .hx-component-name class to the root element.
Does that add any value?
How to handle this class for derived components?
e.g. HxButton => HxCollapseToggleButton, HxDropdownToggleButton, HxNavbarToggler, etc.

There should be some easy to understand rule we will be able to apply.

Proposal: Add .hx-class only for new components (.hx-grid, .hx-sidebar) and where needed for customization (.hx-offcanvas-footer).

[HxAutosuggest] HighlightFirstSuggestion - support for Enter-key (selects first item in the suggested list)

Not completely sure if we want this ultimately, but as we use HxAutosuggest for search in our documentation, some kind of auto-selection of first suggested item would be highly appreciated. (see search in Bootstrap documentation).

cc @jirikanda

[HxInputRange?] - <input type="range">

Do we want https://getbootstrap.com/docs/5.1/forms/range/?

[HxInputBase] Text inputs should specify Value update frequency

Text input controls in Blazor are able to specify if they update bindings on input change or on blur. That ability should be surfaced up through your controls so that the developer can specify when they went their ViewModels updated.

Thanks!

Failed to build Havit.Blazor locally

I want to propose a few PRs with new components and improvements but can't build the Havit solution locally. My problems:

During the build I get the next error:

Looks like it's some CI artifacts, but I am pretty sure that it's shouldn't be in common code. Is it possible to move it to CI processes or provide a solution on how to disable it locally?

Problem with BootstrapIcon. In remarks for I found the solution how to solve it:

	/// - Update wwwroot\fonts\bootstrap-icons.woff
	/// - Update wwwroot\fonts\bootstrap-icons.woff2
	/// - Update wwwroot\bootstrap-icons.css
	/// - Update bootstrap-icons.json in this folder.

but looks like it does not work for me. Is it possible to provide Powershell (and bash for macOS/Linux) to trigger update these files to automate regeneration of these properties?

dotnet new template

https://github.com/dotnet/templating/wiki

[HxInputDate] doesn't support LabelType

Please add support for LabelType to HxInputDate :)

[HxInputTags] Tab key handling

Tab when not empty = add new tag
Tab when empty = focus next element (original tab behavior)

Question:HxCarousel - do not stop

Is it possible to cycle througt slides in HxCarousel without stopping, when user points mouse on slide ?

I am trying to achieve, that Carrousel would be sliding all the time. User cannot stop it anyhow.
Is it possible ?

HxGrid - System Aggregate Exception

First of all I have you thank your team for such an incredible amount of work and excellent documentation! It really is superb!

I am currently using the HxGrid without it being wrapped in an "if data is not null" block because i loved the loading skeleton you guys provide. It currently shows the nice "loading" skeleton:

but i get an issue in the console:

Error: System.AggregateException: One or more errors occurred. (Value cannot be null. (Parameter 'source'))

---> System.ArgumentNullException: Value cannot be null. (Parameter 'source')

at System.Linq.ThrowHelper.ThrowArgumentNullException(ExceptionArgument argument)

at System.Linq.Enumerable.Count[TSource](IEnumerable`1 source)

at Havit.Blazor.Components.Web.Bootstrap.HxGrid1.InvokeDataProviderInternal(GridDataProviderRequest1 request)

at Havit.Blazor.Components.Web.Bootstrap.HxGrid`1.RefreshPaginationDataCoreAsync(Boolean renderOnSuccess)

at Havit.Blazor.Components.Web.Bootstrap.HxGrid`1.OnAfterRenderAsync(Boolean firstRender)

--- End of inner exception stack trace ---

I am loading the data for the grid like this:

    protected override async Task OnInitializedAsync()
    {
        vm.data = await _ctx.GetTradeStatistics();
    }

Notes

If i wrap the razor grid in an "if data exists" block it works, but i miss out on your skeleton loading.
The data feeding this grid is a slow running query (approx 2 second average) and returns 700 rows if that helps solve it..

[HxInputTime] Missing component for inserting time

I need to insert date & time, but I'm missing component for this use case. May be switch on hxInputDate.

Unnecessary Downstream Dependencies

Installing Havit.Blazor.Components.Web.Bootstrap (should probably be named Havit.Web.Components.Bootstrap for consistency with Microsoft's namespacing, but that's another issue) takes a dependency on Havit.Core, which apparently brings with it the following:

Everything below that should be unnecessary, especially if it has "Windows" in the package name.

Thanks!

[IHxMessageBoxHost] ConfirmAsync() in cascade does not wait for subsequent message-boxes

		if (await MessageBox.ConfirmAsync("Confirm?"))
		{
			await MessageBox.ConfirmAsync("Confirm2?");
		}

...only the first confirmation waits for the user entry.

Layout components? Container/Row/Col/...

Do we want to cover components for layout?

something similar to https://blazorstrap.io/layout

cc @crdo

Progress

https://getbootstrap.com/docs/5.1/components/progress/

[HxCalendar] HxCalendar.Defaults.DateCustomizationProvider?

Should we allow application-wide customizations for HxCalendar?
There already are MinDate and MaxDate settings.
What if someone wants all weekends to be disabled in all calendars?
(Still for HxInputDate and HxInputDateRange by setting their Defaults.CalendarCustomizationProvider, same provider can be used for both. Currently not doable for all HxCalendar instances application-wide.)

cc @jirikanda

[HxMessageBox] Customization of buttons (Color, Outline, ...)

Idea

⚠️ Rename ButtonDefaults (currently used for HxButton.Defaults) to ButtonSettings (more generic name).
Add HxMessageBox.Defaults.PrimaryButtonSettings and HxMessageBox.Defaults.OtherButtonsSettings.
Eventually add IHxMessageBox.ShowAsync(), the MessageBoxRequest.PrimaryButtonSettings and MessageBoxRequest.OtherButtonsSettings to allow customization of the single MessageBox instance.

⚠️ Implies renaming all XyDefaults to XySettings to keep consistency.

PROS

This approach is applicable to other scenarios, such as HxListLayout.FilterButtonSettings

CONS

The XyDefaults currently do not cover all the parameters which needs to be configurable for specific scenarios, e.g. HxListLayout.FilterButtonSettings.Text | Icon | .... These does not make much sense for HxButton.Defaults.
This approach does not allow full customizability of the buttons. We cannot use HxButton-derived component here (e.g. BtButton).

NOT SURE

This approach kind of reintroduces idea of Skins as the new XySettings are usable this way.

Alternative approaches?

???
how is this handled by other component bundles?

cc @jirikanda, @crdo for LDM

Blazor fails to load on your site with Edge

Any page I attempt to load on your site fails to load Blazor. Below is the error that I receive. I am not running any browser extensions and am using the default browser settings. This looks like a Blazor issue but I was curious if you've seen this before.

Error:

blazor.webassembly.js:1 
        
       Uncaught Error: This browser does not support WebAssembly.
    at blazor.webassembly.js:1
    at l (blazor.webassembly.js:1)
    at <anonymous>:1:20
    at blazor.webassembly.js:1
    at new Promise (<anonymous>)
    at Object.start (blazor.webassembly.js:1)
    at Object.<anonymous> (blazor.webassembly.js:1)
    at blazor.webassembly.js:1
    at Object.next (blazor.webassembly.js:1)
    at a (blazor.webassembly.js:1)

Windows 10
Microsoft Edge
Version 95.0.1011.1 (Official build) dev (64-bit)

[HxCloseButton]

Do we want https://getbootstrap.com/docs/5.1/components/close-button/?

Default margin-bottom for inputs in form?

Currently there is margin-bottom "for all inputs in form, if it is not the only child":

form .hx-form-group:not(:only-child),
form .hx-autosuggest:not(:only-child),
form .form-check:not(:only-child),
form .form-switch:not(:only-child),
form .hx-input-tags:not(:only-child) {
  margin-bottom: var(--hx-form-spacing);
}

...which is something we want for basic form layout, but might cause unexpected effects for forms+inputs used in navbars, dropdowns, standalone and such specific situations:

We might try to look for better CSS selector to limit the side-effects.

Reusing defaults in derived components

The Defaults system is ready to let the descendants decide whether

to use ancestor defaults, or
to define its own defaults, or
not to use defaults at all.

For our own inherited components we have to decide which option makes sense (general rule should apply).

Current components:

`HxButton.Defaults`

HxDropdownToggle(Button) - should probably use HxButton.Defaults
HxCollapseToggleButton - should probably use HxButton.Defaults
HxNavbarToggler - probably should NOT use any configurable defaults?

`HxInputText.Defaults`

HxInputTextArea - ???

cc @crdo, @jirikanda

[HxModal] No ability to set your own sizes

I'm trying to re-create the modal on this page, and running into a problem: I'm not able to add my own class to the div.modal-dialog element to set the size (in this case, mw-900px, which is custom to this theme). I would assume the CssClass property would point to the div to control the dialog itself, but instead it points to the background container.

Suggested fix:

Rename the current CssClass property to BackgroundCssClass, so that the existing application to the div.modal.fade element is more intuitive.
Add a new CssClass property and adjust Line 7 to combine that class with the others.

If you are concerned about breaking people, you could add a ModalCssClass property instead and point IT at div.modal-dialog instead.

ValidationMessageMode - [HxValidationMessage] vs .invalid-tooltip

We should not stick with the .invalid-tooltip implementation of form validation messages.
The components should allow users to pick a way of validation message rendering, incl. the basic .is-invalid.

See https://getbootstrap.com/docs/5.1/forms/validation/ for Bootstrap validation variants.

REMEMBER: We want to avoid changing position of the form submit button to prevent the "no onclick/onsubmit issue when button position changes": http://jsfiddle.net/WV3Q8/3/

[HxInputTags] Disabled - allows removing tags, displays AddButton

The control should not allow changing the value (tags).
But how should it look like when disabled?

Should we display the AddButton? While Naked? When no tags are there?
Should we display the Remove buttons on individual tags?

cc @crdo, @jirikanda

[HxButton] Automatic Spinner only works with Task methods

Hi,

The automated spinner currently only works if the invoked eventhandler is wrapped into a Task.Run call.
e.g.
<HxButton Text="Test" OnClick="@(async () => await Task.Run(() => DbContext.Database.EnsureCreated()))"/>
works, however
<HxButton Text="Test" OnClick="@(async () => await DbContext.Database.EnsureCreatedAsync())"/>
does not.

Is this a limitation?

Thanks

[HxDropdownToggleButton] ObjectDisposedException: Cannot access a disposed object. Object name: 'DotNetObjectReference`1'.

When leaving page too early you might get

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
      Unhandled exception rendering component: Cannot access a disposed object.
      Object name: 'DotNetObjectReference`1'.
System.ObjectDisposedException: Cannot access a disposed object.
Object name: 'DotNetObjectReference`1'.
   at Microsoft.JSInterop.DotNetObjectReference`1[[Havit.Blazor.Components.Web.Bootstrap.HxDropdownToggleButton, Havit.Blazor.Components.Web.Bootstrap, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null]].ThrowIfDisposed()
   at Microsoft.JSInterop.JSRuntime.TrackObjectReference[HxDropdownToggleButton](DotNetObjectReference`1 dotNetObjectReference)
   at Microsoft.JSInterop.Infrastructure.DotNetObjectReferenceJsonConverter`1[[Havit.Blazor.Components.Web.Bootstrap.HxDropdownToggleButton, Havit.Blazor.Components.Web.Bootstrap, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null]].Write(Utf8JsonWriter writer, DotNetObjectReference`1 value, JsonSerializerOptions options)
   at System.Text.Json.Serialization.JsonConverter`1[[Microsoft.JSInterop.DotNetObjectReference`1[[Havit.Blazor.Components.Web.Bootstrap.HxDropdownToggleButton, Havit.Blazor.Components.Web.Bootstrap, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null]], Microsoft.JSInterop, Version=5.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].TryWrite(Utf8JsonWriter writer, DotNetObjectReference`1& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1[[Microsoft.JSInterop.DotNetObjectReference`1[[Havit.Blazor.Components.Web.Bootstrap.HxDropdownToggleButton, Havit.Blazor.Components.Web.Bootstrap, Version=2.0.0.0, Culture=neutral, PublicKeyToken=null]], Microsoft.JSInterop, Version=5.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].TryWrite(Utf8JsonWriter writer, Object& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.ArrayConverter`2[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnWriteResume(Utf8JsonWriter writer, Object[] value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.Converters.IEnumerableDefaultConverter`2[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].OnTryWrite(Utf8JsonWriter writer, Object[] value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].TryWrite(Utf8JsonWriter writer, Object[]& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.Serialization.JsonConverter`1[[System.Object[], System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].WriteCore(Utf8JsonWriter writer, Object[]& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.JsonSerializer.WriteCore[Object[]](JsonConverter jsonConverter, Utf8JsonWriter writer, Object[]& value, JsonSerializerOptions options, WriteStack& state)
   at System.Text.Json.JsonSerializer.WriteCore[Object[]](Utf8JsonWriter writer, Object[]& value, Type inputType, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.Serialize[Object[]](Object[]& value, Type inputType, JsonSerializerOptions options)
   at System.Text.Json.JsonSerializer.Serialize[Object[]](Object[] value, JsonSerializerOptions options)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[Object](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__15`1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()
   at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
   at Havit.Blazor.Components.Web.Bootstrap.HxDropdownToggleButton.OnAfterRenderAsync(Boolean firstRender) in D:\Development\002.HFW-HavitBlazor\Havit.Blazor.Components.Web.Bootstrap\Dropdowns\HxDropdownToggleButton.cs:line 100
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

[HxOffcanvas] Backdrop covers the offcanvas

[HxTooltip] CssClass property missing

There is no way to control the rendering of a Tooltip, for example to change the mode from Light to Dark. In the documentation, this is controlled by the data-bs-custom-class attribute, but the HxTooltip control does not implement attribute splatting, so you cannot set this manually.

[HxDropdownToggle] Dynamic CssClass value leaves dropdown menu stuck in open state

Having the CssClass property for HxDropdownToggle change dynamically based on user interaction, for example, leaves an open dropdown menu stuck in an open state. It looks like the class attribute show is overwritten for the dropdown toggle whenever the CssClass value changes.

Here is a simple working example. Toggling the checkbox inside the dropdown menu leaves the dropdown stuck in an open state. The class attribute show is removed from the dropdown toggle whenever the IsBold property in this example is changed.

<HxDropdown AutoClose="DropdownAutoClose.Outside">
    <HxDropdownToggle Color="ThemeColor.Primary" CssClass="@(IsBold ? "fw-bold" : null)">Show dropdown</HxDropdownToggle>
    <HxDropdownContent>
        <div class="row m-3" style="min-width: 100px;">
            <div class="col">
                <div>
                    <HxInputCheckbox @bind-Value="IsBold" Label="Toggle button text bold" />
                </div>
            </div>
        </div>
    </HxDropdownContent>
</HxDropdown>

@code {
    private bool IsBold { get; set; } = false;
}

It looks like the CoreCssClass property in HxDropdownToggle.cs doesn't take into account whether the dropdown is being shown or not. I guess this might the underlying reason.

protected override string CoreCssClass =>
	CssClassHelper.Combine(
		base.CoreCssClass,
		"dropdown-toggle",
		(DropdownContainer?.Split ?? false) ? "dropdown-toggle-split" : null,
		(NavContainer is not null) ? "nav-link" : null);

[HxCheckboxList] Inline checkboxes

Currently the HxCheckboxList doesn't support inline checkboxes as given in the bootstrap documentation here, and there is no option to set the CssClass of the individual HxInputCheckbox items.
Please add a property to select the layout, or the ability to set the CssClass of the individual checkboxes.
The same might exist on HxRadioButtonList too.

havit / havit.blazor Goto Github PK

havit.blazor's Introduction

HAVIT Blazor - Bootstrap 5 component bundle

See >>Interactive Documentation & Demos<<

🔥Migration to v4🔥

Components

Forms

Buttons & Indicators

Data & Grid

Layout & Typography

Navigation

Modals & Interactions

Special

havit.blazor's People

Contributors

Stargazers

Watchers

Forkers

havit.blazor's Issues

Idea

PROS

CONS

NOT SURE

Alternative approaches?

HxButton.Defaults

HxInputText.Defaults

Recommend Projects

Recommend Topics

Recommend Org

`HxButton.Defaults`

`HxInputText.Defaults`