Added Array support for Select and Tabs' methods.

Author: datvm

BlazorMaterialWeb.Demo/Pages/Progress.razor

@@ -3,9 +3,9 @@
 <ComponentDemoPage Name="Progress indicators"
                    DesignUrl="https://m3.material.io/components/progress-indicators/overview"
                    ComponentUrl="https://material-web.dev/components/progress/"
-                   ComponentSourcePath="elevation"
-                   BlazorComponentSourcePath="Elevation"
-                   BlazorDemoSourceName="Elevation">
+                   ComponentSourcePath="progress"
+                   BlazorComponentSourcePath="MdProgress.razor"
+                   BlazorDemoSourceName="Progress">
     <Description>
         Progress indicators show the status of a process in real time
     </Description>

BlazorMaterialWeb.Demo/Pages/Tabs.razor

@@ -98,6 +98,10 @@
             <MdButton @onclick="Select3rdTabs">
                 Programmatically select the 3rd tabs
             </MdButton>
+
+            <MdButton @onclick="GetAndSelectTab">
+                Programmatically get the 2nd tab then select it
+            </MdButton>
         </Stack>
     </Tweaks>
 </ComponentDemoPage>
@@ -138,4 +142,15 @@
         }
     }
 
+    async Task GetAndSelectTab()
+    {
+        foreach (var t in tabRefs.Values)
+        {
+            var tabs = await t.GetTabsAsync();
+
+            var secondTab = await tabs.GetItemAsync(1);
+            await t.SetActiveTabAsync(secondTab);
+        }
+    }
+
 }

BlazorMaterialWeb/Common/IJSArrayReference.cs

@@ -0,0 +1,30 @@
+namespace BlazorMaterialWeb.Common;
+
+public interface IJSArrayReference<T>
+{
+    IJSObjectReference JSObjectReference { get; }
+
+    Task<T> GetItemAsync(long index);
+    Task<long> GetLengthAsync();
+}
+
+class JSArrayReference<T> : IJSArrayReference<T>
+{
+    readonly IJSObjectReference jsRef;
+    readonly IJSRuntime js;
+
+    public JSArrayReference(IJSObjectReference jsRef, IJSRuntime js)
+    {
+        this.jsRef = jsRef;
+        this.js = js;
+    }
+
+    public IJSObjectReference JSObjectReference => jsRef;
+
+    public async Task<long> GetLengthAsync() =>
+        await js.GetObjectPropertyAsync<long>(jsRef, "length");
+
+    public async Task<T> GetItemAsync(long index) =>
+        await js.GetArrayElementAsync<T>(jsRef, index);
+
+}

BlazorMaterialWeb/Extensions/JsExtensions.cs

@@ -6,10 +6,16 @@ internal static class JsExtensions
 
     public static async Task<T> GetElementPropertyAsync<T>(this IJSRuntime js, ElementReference el, string propertyName) =>
         await js.InvokeAsync<T>(Prefix("getElementProperty"), el, propertyName);
-    
+
+    public static async Task<T> GetObjectPropertyAsync<T>(this IJSRuntime js, IJSObjectReference obj, string propertyName) =>
+        await js.InvokeAsync<T>(Prefix("getElementProperty"), obj, propertyName);
+
     public static async Task SetElementPropertyAsync(this IJSRuntime js, ElementReference el, string propertyName, object? value) =>
         await js.InvokeVoidAsync(Prefix("setElementProperty"), el, propertyName, value);
 
+    public static async Task SetObjectPropertyAsync(this IJSRuntime js, IJSObjectReference obj, string propertyName, object? value) =>
+        await js.InvokeVoidAsync(Prefix("setElementProperty"), obj, propertyName, value);
+
     public static async Task InvokeElementMethodAsync(this IJSRuntime js, ElementReference el, string methodName, params object?[] parameters) =>
         await js.InvokeVoidAsync(
             Prefix("invokeElementMethodAsync"),

BlazorMaterialWeb/Select/MdSelect.razor.cs

@@ -114,11 +114,17 @@ async Task OnChangeAsync(MdSelectChangeEventArgs e)
         await OnChange.InvokeAsync(e);
     }
 
-    public async Task<IJSObjectReference> GetOptionsAsync() =>
-        await Js.GetElementPropertyAsync<IJSObjectReference>(el, "options");
+    public async Task<IJSArrayReference<IJSObjectReference>> GetOptionsAsync()
+    {
+        var options = await Js.GetElementPropertyAsync<IJSObjectReference>(el, "options");
+        return new JSArrayReference<IJSObjectReference>(options, Js);
+    }
 
-    public async Task<IJSObjectReference> GetSelectedOptionsAsync() =>
-        await Js.GetElementPropertyAsync<IJSObjectReference>(el, "selectedOptions");
+    public async Task<IJSArrayReference<IJSObjectReference>> GetSelectedOptionsAsync()
+    {
+        var options = await Js.GetElementPropertyAsync<IJSObjectReference>(el, "selectedOptions");
+        return new JSArrayReference<IJSObjectReference>(options, Js);
+    }
 
     public async Task ResetAsync() =>
         await InvokeElAsync("reset");

BlazorMaterialWeb/Tabs/MdTabs.razor.cs

@@ -1,4 +1,6 @@
-namespace BlazorMaterialWeb;
+using BlazorMaterialWeb.Common;
+
+namespace BlazorMaterialWeb;
 
 /// <summary>
 /// Tabs organize content across different screens and views.
@@ -17,22 +19,26 @@ partial class MdTabs
     [Parameter]
     public EventCallback<MdTabChangeEventArgs> OnTabChanged { get; set; }
 
-    public async Task<IJSObjectReference> GetTabsAsync() =>
-        await GetPropertyAsync<IJSObjectReference>("tabs");
+    public async Task<IJSArrayReference<IJSObjectReference>> GetTabsAsync()
+    {
+        var tabs = await GetPropertyAsync<IJSObjectReference>("tabs");
+
+        return new JSArrayReference<IJSObjectReference>(tabs, Js);
+    }
 
     public async Task<int> GetActiveTabIndexAsync() =>
         await GetPropertyAsync<int>("activeTabIndex");
 
     public async Task SetActiveTabIndexAsync(int index) =>
         await SetPropertyAsync("activeTabIndex", index);
 
-    public async Task<ElementReference> GetActiveTabAsync() =>
-        await GetPropertyAsync<ElementReference>("activeTab");
+    public async Task<IJSObjectReference> GetActiveTabAsync() =>
+        await GetPropertyAsync<IJSObjectReference>("activeTab");
 
-    public async Task SetActiveTabAsync(ElementReference tab) => 
+    public async Task SetActiveTabAsync(IJSObjectReference tab) => 
         await SetPropertyAsync("activeTab", tab);
 
-    public async Task ScrollToTabAsync(ElementReference tab) =>
+    public async Task ScrollToTabAsync(IJSObjectReference tab) =>
         await InvokeMethodAsync("scrollToTab", tab);
 
 }

pack.ps1

@@ -4,7 +4,7 @@ foreach($file in $files) {
 	rm $file.FullName
 }
 
-$version="--property:Version=1.0.3"
+$version="--property:Version=1.1.1"
 
 dotnet pack .\BlazorMaterialWeb\BlazorMaterialWeb.csproj -c Release "--property:PackageOutputPath=.\bin\nuget" "$version"
 dotnet pack .\BlazorMaterialWeb.Bundled\BlazorMaterialWeb.Bundled.csproj -c Release "--property:PackageOutputPath=.\bin\nuget" "$version"