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/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 (``) 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/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 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/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 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 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, IClearable { /// /// The content of the input. @@ -48,9 +48,7 @@ public partial class ShoelaceInput : ShoelaceInputBase, ISelecta [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, ISelecta #region Events - /// - /// Emitted when the clear button is activated. - /// + /// [Parameter] public EventCallback OnClear { get; set; } 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 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 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 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; } +} 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 diff --git a/src/Shoelace.Style/Components/Rating/ShoelaceRating.razor b/src/Shoelace.Style/Components/Rating/ShoelaceRating.razor new file mode 100644 index 0000000..da13ca9 --- /dev/null +++ b/src/Shoelace.Style/Components/Rating/ShoelaceRating.razor @@ -0,0 +1,14 @@ +@namespace Shoelace.Style.Components +@inherits ShoelaceInputBase + + \ No newline at end of file diff --git a/src/Shoelace.Style/Components/Rating/ShoelaceRating.razor.cs b/src/Shoelace.Style/Components/Rating/ShoelaceRating.razor.cs new file mode 100644 index 0000000..0640fa3 --- /dev/null +++ b/src/Shoelace.Style/Components/Rating/ShoelaceRating.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 ShoelaceRating : 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/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 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 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; } +} 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