From 40acba0173cac9b3301ab33af55e9e96d5102754 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Thu, 3 Oct 2024 17:00:28 +0200 Subject: [PATCH 01/15] chore: update README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 7a92666..6fe2a15 100644 --- a/README.md +++ b/README.md @@ -71,14 +71,14 @@ builder.Services.AddShoelaceStyle(); - [X] Checkbox (``) - [X] Color Picker (``) - [X] Copy Button (``) -- [ ] Details (``) +- [X] Details (``) - [X] Dialog (``) -- [ ] Divider (``) +- [X] Divider (``) - [ ] Drawer (``) -- [ ] Dropdown (``) -- [ ] Format Bytes (``) -- [ ] Format Date (``) -- [ ] Format Number (``) +- [X] Dropdown (``) +- [X] Format Bytes (``) +- [X] Format Date (``) +- [X] Format Number (``) - [ ] Icon (``) - [ ] Icon Button (``) - [ ] Image Comparer (``) From 655482cee0b89b6a22cf4eebd88c340d15955444 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Thu, 3 Oct 2024 20:44:31 +0200 Subject: [PATCH 02/15] chore: change 'TValue' to only 'T' --- .../Components/Base/ShoelaceInputBase.cs | 16 ++++++++-------- .../Components/Input/ShoelaceInput.razor | 4 ++-- .../Components/Input/ShoelaceInput.razor.cs | 4 ++-- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/Shoelace.Style/Components/Base/ShoelaceInputBase.cs b/src/Shoelace.Style/Components/Base/ShoelaceInputBase.cs index ba65809..4a09a76 100644 --- a/src/Shoelace.Style/Components/Base/ShoelaceInputBase.cs +++ b/src/Shoelace.Style/Components/Base/ShoelaceInputBase.cs @@ -10,13 +10,13 @@ namespace Shoelace.Style.Components; /// It provides support for handling additional HTML attributes, CSS classes, styles, /// and event listeners on the component. /// -public abstract class ShoelaceInputBase : ShoelaceComponentBase, IValidatable +public abstract class ShoelaceInputBase : ShoelaceComponentBase, IValidatable { /// /// Emitted when the value of the element changes. /// [Parameter] - public EventCallback ValueChanged { get; set; } + public EventCallback ValueChanged { get; set; } #region Properties @@ -27,7 +27,7 @@ public abstract class ShoelaceInputBase : ShoelaceComponentBase, IValida /// Primarily used for resetting the form control. /// [Parameter] - public TValue? DefaultValue { get; set; } + public T? DefaultValue { get; set; } /// /// Disables the input. @@ -89,11 +89,11 @@ public abstract class ShoelaceInputBase : ShoelaceComponentBase, IValida /// The current value of the input, submitted as a name/value pair with form data. /// [Parameter] - public TValue? Value { get; set; } + public T? Value { get; set; } /// [Parameter] - public Expression>? ValueExpression { get; set; } + public Expression>? ValueExpression { get; set; } #endregion Properties @@ -103,13 +103,13 @@ public abstract class ShoelaceInputBase : ShoelaceComponentBase, IValida /// Emitted when an alteration to the control’s value is committed by the user. /// [Parameter] - public EventCallback> OnChange { get; set; } + public EventCallback> OnChange { get; set; } /// /// Emitted when the control receives input. /// [Parameter] - public EventCallback> OnInput { get; set; } + public EventCallback> OnInput { get; set; } /// [Parameter] @@ -128,7 +128,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) await AddEventListener("sl-input", OnInput); await AddEventListener("sl-invalid", OnInvalid); - await AddEventListener, TValue>(Immediate ? "sl-input" : "sl-change", ValueChanged, (e) => e.Target.Value); + await AddEventListener, T>(Immediate ? "sl-input" : "sl-change", ValueChanged, (e) => e.Target.Value); } } diff --git a/src/Shoelace.Style/Components/Input/ShoelaceInput.razor b/src/Shoelace.Style/Components/Input/ShoelaceInput.razor index b189082..2b44308 100644 --- a/src/Shoelace.Style/Components/Input/ShoelaceInput.razor +++ b/src/Shoelace.Style/Components/Input/ShoelaceInput.razor @@ -1,6 +1,6 @@ @namespace Shoelace.Style.Components -@inherits ShoelaceInputBase -@typeparam TValue +@inherits ShoelaceInputBase +@typeparam T /// /// -/// The type of the value attribute -public partial class ShoelaceInput : ShoelaceInputBase, ISelectable +/// The type of the value attribute +public partial class ShoelaceInput : ShoelaceInputBase, ISelectable { /// /// The content of the input. From 4742fe3863a9de9fb97db26b7ce5264d6a7e1de9 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Thu, 3 Oct 2024 20:44:44 +0200 Subject: [PATCH 03/15] fix: add documentation to sl-color-picker --- .../Components/ColorPicker/ShoelaceColorPicker.razor.cs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Shoelace.Style/Components/ColorPicker/ShoelaceColorPicker.razor.cs b/src/Shoelace.Style/Components/ColorPicker/ShoelaceColorPicker.razor.cs index e711b02..f8948a3 100644 --- a/src/Shoelace.Style/Components/ColorPicker/ShoelaceColorPicker.razor.cs +++ b/src/Shoelace.Style/Components/ColorPicker/ShoelaceColorPicker.razor.cs @@ -4,6 +4,12 @@ namespace Shoelace.Style.Components; +/// +/// Color pickers allow the user to select a color. +/// +/// +/// +/// public partial class ShoelaceColorPicker : ShoelaceInputBase, IFocusable { #region Properties From ac854851178fabac4dea4f390dc42be46f6267c6 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Thu, 3 Oct 2024 20:55:18 +0200 Subject: [PATCH 04/15] feat: add sl-icon --- .../Components/Icon/ShoelaceIcon.razor | 12 ++++ .../Components/Icon/ShoelaceIcon.razor.cs | 59 +++++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 src/Shoelace.Style/Components/Icon/ShoelaceIcon.razor create mode 100644 src/Shoelace.Style/Components/Icon/ShoelaceIcon.razor.cs diff --git a/src/Shoelace.Style/Components/Icon/ShoelaceIcon.razor b/src/Shoelace.Style/Components/Icon/ShoelaceIcon.razor new file mode 100644 index 0000000..b41eacd --- /dev/null +++ b/src/Shoelace.Style/Components/Icon/ShoelaceIcon.razor @@ -0,0 +1,12 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceComponentBase + + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/Icon/ShoelaceIcon.razor.cs b/src/Shoelace.Style/Components/Icon/ShoelaceIcon.razor.cs new file mode 100644 index 0000000..4ea827a --- /dev/null +++ b/src/Shoelace.Style/Components/Icon/ShoelaceIcon.razor.cs @@ -0,0 +1,59 @@ +using Microsoft.AspNetCore.Components; + +namespace Shoelace.Style.Components; + +/// +/// Icons are symbols that can be used to represent various options within an application. +/// +/// +/// +/// +public partial class ShoelaceIcon : ShoelaceComponentBase +{ + #region Properties + + /// + /// An alternate description to use for assistive devices. + /// If omitted, the icon will be considered presentational and ignored by assistive devices. + /// + [Parameter] + public string? Label { get; set; } + + /// + /// The name of a registered custom icon library. + /// + [Parameter] + public string? Library { get; set; } + + /// + /// The name of the icon to draw. Available names depend on the icon library being used. + /// + [Parameter] + [EditorRequired] + public string Name { get; set; } = default!; + + /// + /// An external URL of an SVG file. Be sure you trust the content you are including, + /// as it will be executed as code and can result in XSS attacks. + /// + [Parameter] + public string? Src { get; set; } + + #endregion Properties + + #region Events + + /// + /// Emitted when the icon has loaded. When using spriteSheet: true this will not emit. + /// + [Parameter] + public EventCallback OnError { get; set; } + + /// + /// Emitted when the icon fails to load due to an error. When using spriteSheet: true this will not emit. + /// + [Parameter] + public EventCallback OnLoad { get; set; } + + #endregion Events +} \ No newline at end of file From 4efcb9618f710c0ffed8ed27684776203c13d287 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Thu, 3 Oct 2024 21:05:08 +0200 Subject: [PATCH 05/15] feat: add sl-icon-button --- .../IconButton/ShoelaceIconButton.razor | 16 +++ .../IconButton/ShoelaceIconButton.razor.cs | 112 ++++++++++++++++++ 2 files changed, 128 insertions(+) create mode 100644 src/Shoelace.Style/Components/IconButton/ShoelaceIconButton.razor create mode 100644 src/Shoelace.Style/Components/IconButton/ShoelaceIconButton.razor.cs diff --git a/src/Shoelace.Style/Components/IconButton/ShoelaceIconButton.razor b/src/Shoelace.Style/Components/IconButton/ShoelaceIconButton.razor new file mode 100644 index 0000000..cbea3d1 --- /dev/null +++ b/src/Shoelace.Style/Components/IconButton/ShoelaceIconButton.razor @@ -0,0 +1,16 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceComponentBase + + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/IconButton/ShoelaceIconButton.razor.cs b/src/Shoelace.Style/Components/IconButton/ShoelaceIconButton.razor.cs new file mode 100644 index 0000000..4000b92 --- /dev/null +++ b/src/Shoelace.Style/Components/IconButton/ShoelaceIconButton.razor.cs @@ -0,0 +1,112 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; +using Shoelace.Style.Options; + +namespace Shoelace.Style.Components; + +/// +/// Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. +/// +/// +/// +/// +public partial class ShoelaceIconButton : ShoelaceComponentBase, IFocusable +{ + #region Properties + + /// + /// Disables the button. + /// + [Parameter] + public bool Disabled { get; set; } + + /// + /// Tells the browser to download the linked file as this filename. Only used when href is set. + /// + [Parameter] + public string? Download { get; set; } + + /// + /// When set, the underlying button will be rendered as an <a> + /// with this href instead of a <button>. + /// + [Parameter] + public string? Href { get; set; } + + /// + /// A description that gets read by assistive devices. + /// For optimal accessibility, you should always include a label that describes what the icon button does. + /// + [Parameter] + public string? Label { get; set; } + + /// + /// The name of a registered custom icon library. + /// + [Parameter] + public string? Library { get; set; } + + /// + /// The name of the icon to draw. Available names depend on the icon library being used. + /// + [Parameter] + [EditorRequired] + public string Name { get; set; } = default!; + + /// + /// An external URL of an SVG file. Be sure you trust the content you are including, + /// as it will be executed as code and can result in XSS attacks. + /// + [Parameter] + public string? Src { get; set; } + + /// + /// Tells the browser where to open the link. Only used when href is set. + /// + /// + /// Possible values are '_blank' | '_parent' | '_self' | '_top' + /// + [Parameter] + public string? Target { get; set; } + + #endregion Properties + + #region Events + + /// + [Parameter] + public EventCallback OnBlur { get; set; } + + /// + [Parameter] + public EventCallback OnFocus { get; set; } + + #endregion Events + + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + + if (firstRender) + { + await AddEventListener("sl-blur", OnBlur); + await AddEventListener("sl-focus", OnFocus); + } + } + + #region Instance Methods + + /// + public ValueTask BlurAsync() => Element.InvokeVoidAsync("blur"); + + /// + /// Simulates a click on the icon button. + /// + public ValueTask ClickAsync() => Element.InvokeVoidAsync("click"); + + /// + public ValueTask FocusAsync(FocusOptions options) => Element.InvokeVoidAsync("focus"); + + #endregion Instance Methods +} \ No newline at end of file From b3588d0d37bff698721c7dc8353c04226c2b49c9 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Thu, 3 Oct 2024 21:10:42 +0200 Subject: [PATCH 06/15] feat: add sl-option --- .../Components/Option/ShoelaceOption.razor | 13 +++++ .../Components/Option/ShoelaceOption.razor.cs | 49 +++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 src/Shoelace.Style/Components/Option/ShoelaceOption.razor create mode 100644 src/Shoelace.Style/Components/Option/ShoelaceOption.razor.cs diff --git a/src/Shoelace.Style/Components/Option/ShoelaceOption.razor b/src/Shoelace.Style/Components/Option/ShoelaceOption.razor new file mode 100644 index 0000000..4ed72f6 --- /dev/null +++ b/src/Shoelace.Style/Components/Option/ShoelaceOption.razor @@ -0,0 +1,13 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceComponentBase +@typeparam T + + + @ChildContent + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/Option/ShoelaceOption.razor.cs b/src/Shoelace.Style/Components/Option/ShoelaceOption.razor.cs new file mode 100644 index 0000000..6d91461 --- /dev/null +++ b/src/Shoelace.Style/Components/Option/ShoelaceOption.razor.cs @@ -0,0 +1,49 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; + +namespace Shoelace.Style.Components; + +/// +/// Options define the selectable items within various form controls such as select. +/// +/// +/// +/// +/// The type of the value +public partial class ShoelaceOption : ShoelaceComponentBase +{ + /// + /// The option content. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + #region Properties + + /// + /// Draws the option in a disabled state, preventing selection. + /// + [Parameter] + public bool Disabled { get; set; } + + /// + /// The option’s value. When selected, the containing form control will receive this value. + /// The value must be unique from other options in the same group. + /// Values may not contain spaces, as spaces are used as delimiters when listing multiple values. + /// + [Parameter] + [EditorRequired] + public T Value { get; set; } = default!; + + #endregion Properties + + #region Instance Methods + + /// + /// Returns a plain text label based on the option’s content. + /// + /// The label string value + public ValueTask GetTextLabelAsync() => Element.InvokeAsync("getTextLabel"); + + #endregion Instance Methods +} \ No newline at end of file From 78d4413664ba315db14af302408c476431fecb44 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Thu, 3 Oct 2024 21:33:52 +0200 Subject: [PATCH 07/15] feat: add sl-input, add IClearable interface --- src/Shoelace.Style/Components/IClearable.cs | 16 ++ .../Components/Input/ShoelaceInput.razor.cs | 10 +- .../Components/Select/ShoelaceSelect.razor | 29 ++++ .../Components/Select/ShoelaceSelect.razor.cs | 152 ++++++++++++++++++ 4 files changed, 200 insertions(+), 7 deletions(-) create mode 100644 src/Shoelace.Style/Components/IClearable.cs create mode 100644 src/Shoelace.Style/Components/Select/ShoelaceSelect.razor create mode 100644 src/Shoelace.Style/Components/Select/ShoelaceSelect.razor.cs diff --git a/src/Shoelace.Style/Components/IClearable.cs b/src/Shoelace.Style/Components/IClearable.cs new file mode 100644 index 0000000..bad5e74 --- /dev/null +++ b/src/Shoelace.Style/Components/IClearable.cs @@ -0,0 +1,16 @@ +using Microsoft.AspNetCore.Components; + +namespace Shoelace.Style.Components; + +internal interface IClearable +{ + /// + /// Adds a clear button when the input is not empty. + /// + public bool Clearable { get; set; } + + /// + /// Emitted when the clear button is activated. + /// + public EventCallback OnClear { get; set; } +} diff --git a/src/Shoelace.Style/Components/Input/ShoelaceInput.razor.cs b/src/Shoelace.Style/Components/Input/ShoelaceInput.razor.cs index 4836450..0d930ac 100644 --- a/src/Shoelace.Style/Components/Input/ShoelaceInput.razor.cs +++ b/src/Shoelace.Style/Components/Input/ShoelaceInput.razor.cs @@ -11,7 +11,7 @@ namespace Shoelace.Style.Components; /// /// /// The type of the value attribute -public partial class ShoelaceInput : ShoelaceInputBase, ISelectable +public partial class ShoelaceInput : ShoelaceInputBase, ISelectable, IClearable { /// /// The content of the input. @@ -48,9 +48,7 @@ public partial class ShoelaceInput : ShoelaceInputBase, ISelectable [Parameter] public bool AutoFocus { get; set; } - /// - /// Adds a clear button when the input is not empty. - /// + /// [Parameter] public bool Clearable { get; set; } @@ -180,9 +178,7 @@ public partial class ShoelaceInput : ShoelaceInputBase, ISelectable #region Events - /// - /// Emitted when the clear button is activated. - /// + /// [Parameter] public EventCallback OnClear { get; set; } diff --git a/src/Shoelace.Style/Components/Select/ShoelaceSelect.razor b/src/Shoelace.Style/Components/Select/ShoelaceSelect.razor new file mode 100644 index 0000000..65b499e --- /dev/null +++ b/src/Shoelace.Style/Components/Select/ShoelaceSelect.razor @@ -0,0 +1,29 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceInputBase +@typeparam T + + + @ChildContent + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/Select/ShoelaceSelect.razor.cs b/src/Shoelace.Style/Components/Select/ShoelaceSelect.razor.cs new file mode 100644 index 0000000..067706b --- /dev/null +++ b/src/Shoelace.Style/Components/Select/ShoelaceSelect.razor.cs @@ -0,0 +1,152 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; +using Shoelace.Style.Options; + +namespace Shoelace.Style.Components; + +/// +/// Selects allow you to choose items from a menu of predefined options. +/// +/// +/// +/// +/// The type of the value +public partial class ShoelaceSelect : ShoelaceInputBase, IClearable, IPresentable, IFocusable +{ + /// + /// The select main content. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + /// + [Parameter] + public EventCallback OpenChanged { get; set; } + + #region Properties + + /// + [Parameter] + public bool Clearable { get; set; } + + /// + /// Draws a filled select. + /// + [Parameter] + public bool Filled { get; set; } + + /// + /// Enable this option to prevent the listbox from being clipped + /// when the component is placed inside a container with overflow: auto|scroll. + /// Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios. + /// + [Parameter] + public bool Hoist { get; set; } + + /// + /// The maximum number of selected options to show when multiple is true. After the maximum, + /// ”+n” will be shown to indicate the number of additional items that are selected. + /// Set to 0 to remove the limit. + /// + [Parameter] + public int MaxOptionsVisible { get; set; } + + /// + /// Allows more than one option to be selected. + /// + [Parameter] + public bool Multiple { get; set; } + + /// + [Parameter] + public bool Open { get; set; } + + /// + /// Draws a pill-style select with rounded edges. + /// + [Parameter] + public bool Pill { get; set; } + + /// + /// Placeholder text to show as a hint when the select is empty. + /// + [Parameter] + public string? Placeholder { get; set; } + + /// + /// The preferred placement of the select’s menu. + /// Note that the actual placement may vary as needed to keep the listbox inside of the viewport. + /// + [Parameter] + public string? Placement { get; set; } + + #endregion Properties + + #region Events + + /// + [Parameter] + public EventCallback OnAfterHide { get; set; } + + /// + [Parameter] + public EventCallback OnAfterShow { get; set; } + + /// + [Parameter] + public EventCallback OnBlur { get; set; } + + /// + [Parameter] + public EventCallback OnClear { get; set; } + + /// + [Parameter] + public EventCallback OnFocus { get; set; } + + /// + [Parameter] + public EventCallback OnHide { get; set; } + + /// + [Parameter] + public EventCallback OnShow { get; set; } + + #endregion Events + + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + + if (firstRender) + { + await AddEventListener("sl-blur", OnBlur); + await AddEventListener("sl-clear", OnClear); + + await AddEventListener("sl-show", OnShow); + await AddEventListener("sl-hide", OnHide); + await AddEventListener("sl-after-show", OnAfterShow); + await AddEventListener("sl-after-hide", OnAfterHide); + + await AddEventListener("sl-after-show", OpenChanged, converter: () => Open = true); + await AddEventListener("sl-after-hide", OpenChanged, converter: () => Open = false); + } + } + + #region Instance Methods + + /// + public ValueTask BlurAsync() => Element.InvokeVoidAsync("blur"); + + /// + public ValueTask FocusAsync(FocusOptions options) => Element.InvokeVoidAsync("focus", options); + + /// + public ValueTask HideAsync() => Element.InvokeVoidAsync("hide"); + + /// + public ValueTask ShowAsync() => Element.InvokeVoidAsync("show"); + + #endregion Instance Methods +} \ No newline at end of file From 0e0d24344167c6de1a91b3e7b673d481dc7c9748 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Sat, 5 Oct 2024 11:49:52 +0200 Subject: [PATCH 08/15] feat: add sl-radio --- .../Components/Radio/ShoelaceRadio.razor | 14 ++++ .../Components/Radio/ShoelaceRadio.razor.cs | 68 +++++++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 src/Shoelace.Style/Components/Radio/ShoelaceRadio.razor create mode 100644 src/Shoelace.Style/Components/Radio/ShoelaceRadio.razor.cs diff --git a/src/Shoelace.Style/Components/Radio/ShoelaceRadio.razor b/src/Shoelace.Style/Components/Radio/ShoelaceRadio.razor new file mode 100644 index 0000000..a6e5706 --- /dev/null +++ b/src/Shoelace.Style/Components/Radio/ShoelaceRadio.razor @@ -0,0 +1,14 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceComponentBase +@typeparam T + + + @ChildContent + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/Radio/ShoelaceRadio.razor.cs b/src/Shoelace.Style/Components/Radio/ShoelaceRadio.razor.cs new file mode 100644 index 0000000..2ada4ba --- /dev/null +++ b/src/Shoelace.Style/Components/Radio/ShoelaceRadio.razor.cs @@ -0,0 +1,68 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; +using Shoelace.Style.Options; + +namespace Shoelace.Style.Components; + +/// +/// Radios allow the user to select a single option from a group. +/// +/// +/// +/// +/// The type of the radio value +public partial class ShoelaceRadio : ShoelaceComponentBase, IFocusable +{ + /// + /// The radio’s label. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + #region Properties + + /// + /// Disables the radio. + /// + [Parameter] + public bool Disabled { get; set; } + + /// + /// The radio’s size. When used inside a radio group, + /// the size will be determined by the radio group’s size so this attribute can typically be omitted. + /// + /// + /// Possible values are 'small' | 'medium' | 'large' + /// + [Parameter] + public string? Size { get; set; } + + /// + /// The radio’s value. When selected, the radio group will receive this value. + /// + [Parameter] + [EditorRequired] + public T Value { get; set; } = default!; + + #endregion Properties + + #region Events + + /// + public EventCallback OnBlur { get; set; } + + /// + public EventCallback OnFocus { get; set; } + + #endregion Events + + #region Instance Properties + + /// + public ValueTask BlurAsync() => Element.InvokeVoidAsync("blur"); + + /// + public ValueTask FocusAsync(FocusOptions options) => Element.InvokeVoidAsync("focus", options); + + #endregion Instance Properties +} \ No newline at end of file From 52d7d511ba6bb9fa20c94e4ea9c4b0024d755aff Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Sat, 5 Oct 2024 11:50:04 +0200 Subject: [PATCH 09/15] feat: add sl-radio-group --- .../RadioButton/ShoelaceRadioButton.razor | 15 ++++++++++++ .../RadioButton/ShoelaceRadioButton.razor.cs | 23 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/Shoelace.Style/Components/RadioButton/ShoelaceRadioButton.razor create mode 100644 src/Shoelace.Style/Components/RadioButton/ShoelaceRadioButton.razor.cs diff --git a/src/Shoelace.Style/Components/RadioButton/ShoelaceRadioButton.razor b/src/Shoelace.Style/Components/RadioButton/ShoelaceRadioButton.razor new file mode 100644 index 0000000..db707e0 --- /dev/null +++ b/src/Shoelace.Style/Components/RadioButton/ShoelaceRadioButton.razor @@ -0,0 +1,15 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceRadio +@typeparam T + + + @ChildContent + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/RadioButton/ShoelaceRadioButton.razor.cs b/src/Shoelace.Style/Components/RadioButton/ShoelaceRadioButton.razor.cs new file mode 100644 index 0000000..757e2a6 --- /dev/null +++ b/src/Shoelace.Style/Components/RadioButton/ShoelaceRadioButton.razor.cs @@ -0,0 +1,23 @@ +using Microsoft.AspNetCore.Components; + +namespace Shoelace.Style.Components; + +/// +/// Radios buttons allow the user to select a single option from a group using a button-like control. +/// +/// +/// +/// +/// The type of the radio buttton value +public partial class ShoelaceRadioButton : ShoelaceRadio +{ + #region Properties + + /// + /// Draws a pill-style radio button with rounded edges. + /// + [Parameter] + public bool Pill { get; set; } + + #endregion Properties +} \ No newline at end of file From 979d7a6d18f1ff7e4b20085911b26b6e134fc4b2 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Sat, 5 Oct 2024 11:50:16 +0200 Subject: [PATCH 10/15] feat: add sl-radio-button --- .../RadioGroup/ShoelaceRadioGroup.razor | 18 +++++++++++++++++ .../RadioGroup/ShoelaceRadioGroup.razor.cs | 20 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/Shoelace.Style/Components/RadioGroup/ShoelaceRadioGroup.razor create mode 100644 src/Shoelace.Style/Components/RadioGroup/ShoelaceRadioGroup.razor.cs diff --git a/src/Shoelace.Style/Components/RadioGroup/ShoelaceRadioGroup.razor b/src/Shoelace.Style/Components/RadioGroup/ShoelaceRadioGroup.razor new file mode 100644 index 0000000..443c652 --- /dev/null +++ b/src/Shoelace.Style/Components/RadioGroup/ShoelaceRadioGroup.razor @@ -0,0 +1,18 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceInputBase +@typeparam T + + + @ChildContent + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/RadioGroup/ShoelaceRadioGroup.razor.cs b/src/Shoelace.Style/Components/RadioGroup/ShoelaceRadioGroup.razor.cs new file mode 100644 index 0000000..1f6c17d --- /dev/null +++ b/src/Shoelace.Style/Components/RadioGroup/ShoelaceRadioGroup.razor.cs @@ -0,0 +1,20 @@ +using Microsoft.AspNetCore.Components; + +namespace Shoelace.Style.Components; + +/// +/// Radio groups are used to group multiple radios or radio buttons so they function as a single form control. +/// +/// +/// +/// +/// The type of the radio group value +public partial class ShoelaceRadioGroup : ShoelaceInputBase +{ + /// + /// The default slot where + /// or elements are placed. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } +} From b874e69133685a68ed554a469c66b863889be700 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Sat, 5 Oct 2024 12:07:22 +0200 Subject: [PATCH 11/15] feat: add sl-rating --- .../Components/Range/ShoelaceRange.razor | 14 ++++ .../Components/Range/ShoelaceRange.razor.cs | 77 +++++++++++++++++++ .../Events/ShoelaceHoverEvent.cs | 22 ++++++ 3 files changed, 113 insertions(+) create mode 100644 src/Shoelace.Style/Components/Range/ShoelaceRange.razor create mode 100644 src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs create mode 100644 src/Shoelace.Style/Events/ShoelaceHoverEvent.cs diff --git a/src/Shoelace.Style/Components/Range/ShoelaceRange.razor b/src/Shoelace.Style/Components/Range/ShoelaceRange.razor new file mode 100644 index 0000000..da13ca9 --- /dev/null +++ b/src/Shoelace.Style/Components/Range/ShoelaceRange.razor @@ -0,0 +1,14 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceInputBase + + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs b/src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs new file mode 100644 index 0000000..6d693d9 --- /dev/null +++ b/src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs @@ -0,0 +1,77 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; +using Shoelace.Style.Events; +using Shoelace.Style.Options; + +namespace Shoelace.Style.Components; + +/// +/// Ratings give users a way to quickly view and provide feedback. +/// +/// +/// +/// +public partial class ShoelaceRange : ShoelaceInputBase, IFocusable +{ + #region Properties + + /// + /// The highest rating to show. + /// + [Parameter] + public double? Max { get; set; } + + /// + /// The precision at which the rating will increase and decrease. + /// For example, to allow half-star ratings, set this attribute to 0.5. + /// + [Parameter] + public double? Precision { get; set; } + + /// + /// Makes the rating readonly. + /// + [Parameter] + public bool Readonly { get; set; } + + #endregion Properties + + #region Events + + /// + public EventCallback OnBlur { get; set; } + + /// + public EventCallback OnFocus { get; set; } + + /// + /// Emitted when the user hovers over a value. + /// The phase property indicates when hovering starts, moves to a new value, or ends. + /// The value property tells what the rating’s value would be if the user were to commit to the hovered value. + /// + [Parameter] + public EventCallback OnHover { get; set; } + + #endregion Events + + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + + if (firstRender) + { + await AddEventListener("sl-hover", OnHover); + } + } + + #region Instance Properties + + /// + public ValueTask BlurAsync() => Element.InvokeVoidAsync("blur"); + + /// + public ValueTask FocusAsync(FocusOptions options) => Element.InvokeVoidAsync("focus", options); + + #endregion Instance Properties +} \ No newline at end of file diff --git a/src/Shoelace.Style/Events/ShoelaceHoverEvent.cs b/src/Shoelace.Style/Events/ShoelaceHoverEvent.cs new file mode 100644 index 0000000..daf8725 --- /dev/null +++ b/src/Shoelace.Style/Events/ShoelaceHoverEvent.cs @@ -0,0 +1,22 @@ +using Microsoft.JSInterop; + +namespace Shoelace.Style.Events; + +/// +/// Represents an event triggered by a hover action in the Shoelace styling framework. +/// This event contains details about the phase of the hover and a numeric value associated with the event. +/// +public class ShoelaceHoverEvent : JSEvent +{ + /// + /// Gets or sets the phase of the hover event. + /// Possible values may include "start", "move", "end", etc., indicating different phases of a hover interaction. + /// + public string Phase { get; set; } = default!; + + /// + /// Gets or sets a numeric value associated with the hover event. + /// This could represent duration, intensity, or any other metric tied to the hover interaction. + /// + public double Number { get; set; } +} From a504c1b784fc1a874d00c52ebd26f048740b7325 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Sat, 5 Oct 2024 12:12:20 +0200 Subject: [PATCH 12/15] feat: add sl-relative-time --- .../RelativeTime/ShoelaceRelativeTime.razor | 11 +++++ .../ShoelaceRelativeTime.razor.cs | 49 +++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 src/Shoelace.Style/Components/RelativeTime/ShoelaceRelativeTime.razor create mode 100644 src/Shoelace.Style/Components/RelativeTime/ShoelaceRelativeTime.razor.cs diff --git a/src/Shoelace.Style/Components/RelativeTime/ShoelaceRelativeTime.razor b/src/Shoelace.Style/Components/RelativeTime/ShoelaceRelativeTime.razor new file mode 100644 index 0000000..d07f456 --- /dev/null +++ b/src/Shoelace.Style/Components/RelativeTime/ShoelaceRelativeTime.razor @@ -0,0 +1,11 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceComponentBase + + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/RelativeTime/ShoelaceRelativeTime.razor.cs b/src/Shoelace.Style/Components/RelativeTime/ShoelaceRelativeTime.razor.cs new file mode 100644 index 0000000..a67e62f --- /dev/null +++ b/src/Shoelace.Style/Components/RelativeTime/ShoelaceRelativeTime.razor.cs @@ -0,0 +1,49 @@ +using Microsoft.AspNetCore.Components; + +namespace Shoelace.Style.Components; + +/// +/// Outputs a localized time phrase relative to the current date and time. +/// +/// +/// +/// +public partial class ShoelaceRelativeTime : ShoelaceComponentBase +{ + #region Properties + + /// + /// The date from which to calculate time from. + /// If not set, the current date and time will be used. When passing a string, + /// it’s strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly + /// + [Parameter] + public DateTime Date { get; set; } + + /// + /// The formatting style to use. + /// + /// + /// Possible values are 'long' | 'short' | 'narrow' + /// + [Parameter] + public string? Format { get; set; } + + /// + /// When auto, values such as “yesterday” and “tomorrow” will be shown when possible. + /// When always, values such as “1 day ago” and “in 1 day” will be shown. + /// + /// + /// Possible values are 'always' | 'auto' + /// + [Parameter] + public string? Numeric { get; set; } + + /// + /// Keep the displayed value up to date as time passes. + /// + [Parameter] + public bool Sync { get; set; } + + #endregion Properties +} \ No newline at end of file From 77bfcbb3d091e88c190537f1e321d6440d2c256a Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Sat, 5 Oct 2024 12:16:13 +0200 Subject: [PATCH 13/15] fix: wrong component name --- .../{Range/ShoelaceRange.razor => Rating/ShoelaceRating.razor} | 0 .../ShoelaceRange.razor.cs => Rating/ShoelaceRating.razor.cs} | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/Shoelace.Style/Components/{Range/ShoelaceRange.razor => Rating/ShoelaceRating.razor} (100%) rename src/Shoelace.Style/Components/{Range/ShoelaceRange.razor.cs => Rating/ShoelaceRating.razor.cs} (96%) diff --git a/src/Shoelace.Style/Components/Range/ShoelaceRange.razor b/src/Shoelace.Style/Components/Rating/ShoelaceRating.razor similarity index 100% rename from src/Shoelace.Style/Components/Range/ShoelaceRange.razor rename to src/Shoelace.Style/Components/Rating/ShoelaceRating.razor diff --git a/src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs b/src/Shoelace.Style/Components/Rating/ShoelaceRating.razor.cs similarity index 96% rename from src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs rename to src/Shoelace.Style/Components/Rating/ShoelaceRating.razor.cs index 6d693d9..0640fa3 100644 --- a/src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs +++ b/src/Shoelace.Style/Components/Rating/ShoelaceRating.razor.cs @@ -11,7 +11,7 @@ namespace Shoelace.Style.Components; /// /// /// -public partial class ShoelaceRange : ShoelaceInputBase, IFocusable +public partial class ShoelaceRating : ShoelaceInputBase, IFocusable { #region Properties From 0e47e4634285bf7ebc04ef0d603a50f85a635473 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Sat, 5 Oct 2024 12:23:00 +0200 Subject: [PATCH 14/15] feat: add sl-range --- .../Components/Range/ShoelaceRange.razor | 21 ++++++ .../Components/Range/ShoelaceRange.razor.cs | 71 +++++++++++++++++++ 2 files changed, 92 insertions(+) create mode 100644 src/Shoelace.Style/Components/Range/ShoelaceRange.razor create mode 100644 src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs diff --git a/src/Shoelace.Style/Components/Range/ShoelaceRange.razor b/src/Shoelace.Style/Components/Range/ShoelaceRange.razor new file mode 100644 index 0000000..9b5329b --- /dev/null +++ b/src/Shoelace.Style/Components/Range/ShoelaceRange.razor @@ -0,0 +1,21 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceInputBase + + + @ChildContent + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs b/src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs new file mode 100644 index 0000000..da3bdc7 --- /dev/null +++ b/src/Shoelace.Style/Components/Range/ShoelaceRange.razor.cs @@ -0,0 +1,71 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; +using Shoelace.Style.Options; + +namespace Shoelace.Style.Components; + +/// +/// Ranges allow the user to select a single value within a given range using a slider. +/// +/// +/// +/// +public partial class ShoelaceRange : ShoelaceInputBase, IFocusable +{ + /// + /// The range’s label. + /// + [Parameter] + public RenderFragment? ChildContent { get; set; } + + #region Properties + + /// + /// The maximum acceptable value of the range. + /// + [Parameter] + public double? Max { get; set; } + + /// + /// The minimum acceptable value of the range. + /// + [Parameter] + public double? Min { get; set; } + + /// + /// The interval at which the range will increase and decrease. + /// + [Parameter] + public double? Step { get; set; } + + /// + /// The preferred placement of the range’s tooltip. + /// + /// + /// Possible values are 'top' | 'bottom' + /// + [Parameter] + public string? Tooltip { get; set; } + + #endregion Properties + + #region Events + + /// + public EventCallback OnBlur { get; set; } + + /// + public EventCallback OnFocus { get; set; } + + #endregion Events + + #region Instance Properties + + /// + public ValueTask BlurAsync() => Element.InvokeVoidAsync("blur"); + + /// + public ValueTask FocusAsync(FocusOptions options) => Element.InvokeVoidAsync("focus", options); + + #endregion Instance Properties +} \ No newline at end of file From 774bb1beb1051eed6914be0a67ab71f08d54a425 Mon Sep 17 00:00:00 2001 From: Denny09310 Date: Mon, 7 Oct 2024 08:35:30 +0200 Subject: [PATCH 15/15] chore: versioning --- CHANGELOG.md | 77 ++++++++++++++++++++++++ src/Shoelace.Style/Shoelace.Style.csproj | 2 +- 2 files changed, 78 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index df64419..a2b6a12 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,31 @@ All notable changes to this project will be documented in this file. +## [1.2.0] - 2024-10-07 + +### 🚀 Features + +- Add sl-icon +- Add sl-icon-button +- Add sl-option +- Add sl-input, add IClearable interface +- Add sl-radio +- Add sl-radio-group +- Add sl-radio-button +- Add sl-rating +- Add sl-relative-time +- Add sl-range + +### 🐛 Bug Fixes + +- Add documentation to sl-color-picker +- Wrong component name + +### ⚙️ Miscellaneous Tasks + +- Update README.md +- Change 'TValue' to only 'T' + ## [1.1.0] - 2024-10-03 ### 🚀 Features @@ -14,8 +39,60 @@ All notable changes to this project will be documented in this file. - Add missing attributes to sl-format-bytes +### ⚙️ Miscellaneous Tasks + +- Versioning + ### Rework - Change "Valid values are" in "Possible values are" +## [1.0.1] - 2024-10-03 + +### 🚀 Features + +- Add shoelace base component +- Setup shoelace in demo project +- Add initial shoelace button +- Add sl-input, add base input component, add sl-change event args +- Add sl-alert +- Add toast service, remove static sl-alert toast +- Add sl-dialog, fix presentable not changing the Open property value +- Add initial sl-dialog-provider +- Fix sl-dialog-provider, add DialogService, add DialogResult, add DilaogReference +- Add sl-spinner +- Add sl-animated-image +- Add sl-avatar, add css styling rule +- Add sl-badge +- Add sl-breadcrumb, add sl-breadcrumb-item +- Add sl-button-group +- Add sl-card +- Add sl-checkbox +- Add sl-copy-button +- Add sl-color-picker +- Add sl-details +- Add sl-divider +- Add sl-dropdown + +### 🐛 Bug Fixes + +- Fonts not showing +- Minor changes sl-dialog-provider +- Dialog flashing due to css rule missing +- Minor xml docs change +- Checkboax inherit made string cause that represent the value attribute +- Add missing attributes sl-details +- Correct version +- Correct nuget version + +### ⚙️ Miscellaneous Tasks + +- Nuget versioning +- Add xml docs +- Versioning +- Initialized git cliff +- Update README.md +- Rename folder fom 'examples' to 'samples' +- Versioning + diff --git a/src/Shoelace.Style/Shoelace.Style.csproj b/src/Shoelace.Style/Shoelace.Style.csproj index 1310b70..b21487c 100644 --- a/src/Shoelace.Style/Shoelace.Style.csproj +++ b/src/Shoelace.Style/Shoelace.Style.csproj @@ -18,7 +18,7 @@ Blazor;Shoelace;UI;WebComponents Initial release wrapping Shoelace components for Blazor. LICENSE.txt - 1.1.0 + 1.2.0