Merge branch 'release/1.2.0'

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
+
 <!-- generated by git-cliff -->

README.md

@@ -71,14 +71,14 @@ builder.Services.AddShoelaceStyle();
 - [X] Checkbox (`<sl-checkbox>`)
 - [X] Color Picker (`<sl-color-picker>`)
 - [X] Copy Button (`<sl-copy-button>`)
-- [ ] Details (`<sl-details>`)
+- [X] Details (`<sl-details>`)
 - [X] Dialog (`<sl-dialog>`)
-- [ ] Divider (`<sl-divider>`)
+- [X] Divider (`<sl-divider>`)
 - [ ] Drawer (`<sl-drawer>`)
-- [ ] Dropdown (`<sl-dropdown>`)
-- [ ] Format Bytes (`<sl-format-bytes>`)
-- [ ] Format Date (`<sl-format-date>`)
-- [ ] Format Number (`<sl-format-number>`)
+- [X] Dropdown (`<sl-dropdown>`)
+- [X] Format Bytes (`<sl-format-bytes>`)
+- [X] Format Date (`<sl-format-date>`)
+- [X] Format Number (`<sl-format-number>`)
 - [ ] Icon (`<sl-icon>`)
 - [ ] Icon Button (`<sl-icon-button>`)
 - [ ] Image Comparer (`<sl-image-comparer>`)

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.
 /// </summary>
-public abstract class ShoelaceInputBase<TValue> : ShoelaceComponentBase, IValidatable
+public abstract class ShoelaceInputBase<T> : ShoelaceComponentBase, IValidatable
 {
     /// <summary>
     /// Emitted when the value of the element changes.
     /// </summary>
     [Parameter]
-    public EventCallback<TValue> ValueChanged { get; set; }
+    public EventCallback<T> ValueChanged { get; set; }
 
     #region Properties
 
@@ -27,7 +27,7 @@ public abstract class ShoelaceInputBase<TValue> : ShoelaceComponentBase, IValida
     /// Primarily used for resetting the form control.
     /// </remarks>
     [Parameter]
-    public TValue? DefaultValue { get; set; }
+    public T? DefaultValue { get; set; }
 
     /// <summary>
     /// Disables the input.
@@ -89,11 +89,11 @@ public abstract class ShoelaceInputBase<TValue> : ShoelaceComponentBase, IValida
     /// The current value of the input, submitted as a name/value pair with form data.
     /// </summary>
     [Parameter]
-    public TValue? Value { get; set; }
+    public T? Value { get; set; }
 
     /// <inheritdoc />
     [Parameter]
-    public Expression<Func<TValue>>? ValueExpression { get; set; }
+    public Expression<Func<T>>? ValueExpression { get; set; }
 
     #endregion Properties
 
@@ -103,13 +103,13 @@ public abstract class ShoelaceInputBase<TValue> : ShoelaceComponentBase, IValida
     /// Emitted when an alteration to the control’s value is committed by the user.
     /// </summary>
     [Parameter]
-    public EventCallback<ShoelaceChangeEventArgs<TValue>> OnChange { get; set; }
+    public EventCallback<ShoelaceChangeEventArgs<T>> OnChange { get; set; }
 
     /// <summary>
     /// Emitted when the control receives input.
     /// </summary>
     [Parameter]
-    public EventCallback<ShoelaceChangeEventArgs<TValue>> OnInput { get; set; }
+    public EventCallback<ShoelaceChangeEventArgs<T>> OnInput { get; set; }
 
     /// <inheritdoc />
     [Parameter]
@@ -128,7 +128,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             await AddEventListener("sl-input", OnInput);
             await AddEventListener("sl-invalid", OnInvalid);
 
-            await AddEventListener<ShoelaceChangeEventArgs<TValue>, TValue>(Immediate ? "sl-input" : "sl-change", ValueChanged, (e) => e.Target.Value);
+            await AddEventListener<ShoelaceChangeEventArgs<T>, T>(Immediate ? "sl-input" : "sl-change", ValueChanged, (e) => e.Target.Value);
         }
     }
 

src/Shoelace.Style/Components/ColorPicker/ShoelaceColorPicker.razor.cs

@@ -4,6 +4,12 @@
 
 namespace Shoelace.Style.Components;
 
+/// <summary>
+/// Color pickers allow the user to select a color.
+/// </summary>
+/// <remarks>
+/// <see href="https://shoelace.style/components/color-picker"/>
+/// </remarks>
 public partial class ShoelaceColorPicker : ShoelaceInputBase<string>, IFocusable
 {
     #region Properties

src/Shoelace.Style/Components/IClearable.cs

@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Shoelace.Style.Components;
+
+internal interface IClearable
+{
+    /// <summary>
+    /// Adds a clear button when the input is not empty.
+    /// </summary>
+    public bool Clearable { get; set; }
+
+    /// <summary>
+    /// Emitted when the clear button is activated.
+    /// </summary>
+    public EventCallback OnClear { get; set; }
+}

src/Shoelace.Style/Components/Icon/ShoelaceIcon.razor

@@ -0,0 +1,12 @@
+@namespace Shoelace.Style.Components
+@inherits ShoelaceComponentBase
+
+<sl-icon @ref="Element"
+         @attributes="AdditionalAttributes"
+         class="@Class"
+         id="@Id"
+         style="@Style"
+         label="@Label"
+         library="@Library"
+         name="@Name"
+         src="@Src"></sl-icon>

src/Shoelace.Style/Components/Icon/ShoelaceIcon.razor.cs

@@ -0,0 +1,59 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Shoelace.Style.Components;
+
+/// <summary>
+/// Icons are symbols that can be used to represent various options within an application.
+/// </summary>
+/// <remarks>
+/// <see href="https://shoelace.style/components/icon"/>
+/// </remarks>
+public partial class ShoelaceIcon : ShoelaceComponentBase
+{
+    #region Properties
+
+    /// <summary>
+    /// An alternate description to use for assistive devices.
+    /// If omitted, the icon will be considered presentational and ignored by assistive devices.
+    /// </summary>
+    [Parameter]
+    public string? Label { get; set; }
+
+    /// <summary>
+    /// The name of a registered custom icon library.
+    /// </summary>
+    [Parameter]
+    public string? Library { get; set; }
+
+    /// <summary>
+    /// The name of the icon to draw. Available names depend on the icon library being used.
+    /// </summary>
+    [Parameter]
+    [EditorRequired]
+    public string Name { get; set; } = default!;
+
+    /// <summary>
+    /// 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.
+    /// </summary>
+    [Parameter]
+    public string? Src { get; set; }
+
+    #endregion Properties
+
+    #region Events
+
+    /// <summary>
+    /// Emitted when the icon has loaded. When using spriteSheet: true this will not emit.
+    /// </summary>
+    [Parameter]
+    public EventCallback OnError { get; set; }
+
+    /// <summary>
+    /// Emitted when the icon fails to load due to an error. When using spriteSheet: true this will not emit.
+    /// </summary>
+    [Parameter]
+    public EventCallback OnLoad { get; set; }
+
+    #endregion Events
+}

src/Shoelace.Style/Components/IconButton/ShoelaceIconButton.razor

@@ -0,0 +1,16 @@
+@namespace Shoelace.Style.Components
+@inherits ShoelaceComponentBase
+
+<sl-icon-button @ref="Element"
+                @attributes="AdditionalAttributes"
+                class="@Class"
+                id="@Id"
+                style="@Style"
+                disabled="@Disabled"
+                download="@Download"
+                href="@Href"
+                label="@Label"
+                library="@Library"
+                name="@Name"
+                src="@Src"
+                target="@Target"></sl-icon-button>