Progress

src/Connected.Components.Showcase.Runner/Pages/Index.razor

@@ -1,16 +1,12 @@
 @page "/"
+@using Connected.Models;
 
 <h1 style="text-align:center;">Component Sandbox</h1>
 
 <p>ValueDouble: @inputValueDouble.ToString()</p>
 <p>ValueInt: @inputValueInt.ToString()</p>
 <p>ValueText: @inputValueText</p>
-
+<p>SimpleSelectValue: @SelectedItemValue</p>
-<Alert 
-    Severity="Severity.Error"
-    ShowCloseButton="true">
-        Alert!!
-</Alert>
 
 <InputNumber
     Clearable="false"
@@ -55,10 +51,21 @@
     @bind-Value="@inputValueText">
 </InputText>
 
+<SimpleSelect
+    Label="Simple Select"
+    
+    ValueType="string"
+    @bind-Value="@SelectedItemValue"
+    Items="@SelectFieldItems">
+</SimpleSelect>
+
 
 @code {
 
 
+    List<SelectItem<string>> SelectFieldItems = new();
+    string SelectedItemValue = "";
+
     int counter { get; set; } = 0;
 
     private string _inputText = string.Empty;
@@ -89,4 +96,19 @@
 
     string errorText = "Error!!";
 
+    protected override async Task OnInitializedAsync()
+    {
+        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 1", Value = "select item value 1", Enabled = true });
+        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 2", Value = "select item value 2", Enabled = true });
+        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 3", Value = "select item value 3", Enabled = true });
+        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 4", Value = "select item value 4", Enabled = true });
+        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 5", Value = "select item value 5", Enabled = false });
+        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 6", Value = "select item value 6", Enabled = true });
+        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 7", Value = "select item value 7", Enabled = true });
+        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 8", Value = "select item value 8", Enabled = false });
+        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 9", Value = "select item value 9", Enabled = true });
+        SelectFieldItems.Add(new SelectItem<string>() { DisplayedText = "Item 10", Value = "select item value 10", Enabled = true });
+        SelectedItemValue = SelectFieldItems[0].Value;
+    }
+
 }

src/Connected.Components/Components/Button.razor

@@ -42,87 +42,3 @@
         }
     </div>
 </button>
-
-
-<!--
-<section id="buttons" class="mt-3 b-1 b-r-4 p-5">
-    <h2>Buttons</h2>
-    <p>
-        Use custom button styles for actions in forms, dialogs, and more with support for multiple sizes,
-        states, and more.
-    </p>
-    <div>
-        <h4 class="text-core mt-5">Examples</h4>
-        <div class="d-flex flex-wrap gap-3 ">
-            <button type="button" href="#" class="btn btn-core">click me</button>
-            <button type="button" href="#" class="btn btn-primary">click me</button>
-            <button type="button" href="#" class="btn btn-secondary">click me</button>
-            <button type="button" href="#" class="btn btn-success">click me</button>
-            <button type="button" href="#" class="btn btn-info">click me</button>
-            <button type="button" href="#" class="btn btn-warning">click me</button>
-            <button type="button" href="#" class="btn btn-danger">click me</button>
-            <button type="button" href="#" class="btn btn-white">click me</button>
-            <button type="button" href="#" class="btn btn-light">click me</button>
-            <button type="button" href="#" class="btn btn-dark">click me</button>
-        </div>
-    </div>
-    <hr class="mt-4 mb-4">
-    <div>
-        <h4 class="text-core mt-5">Outline buttons</h4>
-        <div class="d-flex flex-wrap gap-3 ">
-            <button type="button" href="#" class="btn btn-outline-core">click me</button>
-            <button type="button" href="#" class="btn btn-outline-primary">click me</button>
-            <button type="button" href="#" class="btn btn-outline-secondary">click me</button>
-            <button type="button" href="#" class="btn btn-outline-success">click me</button>
-            <button type="button" href="#" class="btn btn-outline-info">click me</button>
-            <button type="button" href="#" class="btn btn-outline-warning">click me</button>
-            <button type="button" href="#" class="btn btn-outline-danger">click me</button>
-            <button type="button" href="#" class="btn btn-outline-white">click me</button>
-            <button type="button" href="#" class="btn btn-outline-light">click me</button>
-            <button type="button" href="#" class="btn btn-outline-dark">click me</button>
-        </div>
-    </div>
-    <hr class="mt-4 mb-4">
-    <div>
-        <h4 class="text-core mt-5">Sizes</h4>
-        <div class="">
-            <button type="button" href="#" class="btn btn-sm btn-core">small button</button>
-            <button type="button" href="#" class="btn btn-sm btn-light">small button</button>
-        </div>
-        <div class="mt-4 ">
-            <button type="button" href="#" class="btn btn-lg btn-core">large button</button>
-            <button type="button" href="#" class="btn btn-lg btn-light">large button</button>
-        </div>
-        <div class="mt-4 ">
-            <button type="button" href="#" class="btn btn-block btn-core">full width button</button>
-            <button type="button" href="#" class="mt-4 btn btn-block btn-light">
-                full width
-                button
-            </button>
-        </div>
-    </div>
-    <hr class="mt-4 mb-4">
-    <div>
-        <h4 class="text-core mt-5">Button states</h4>
-        <div class="">
-            <button type="button" href="#" class="btn btn-core active" aria-pressed="true">
-                active
-                button
-            </button>
-            <button type="button" href="#" class="btn btn-core">normal button</button>
-            <button type="button" href="#" class="btn btn-core disabled" aria-disabled="true">
-                disabled
-                button
-            </button>
-        </div>
-        <div class="mt-4">
-            <button type="button" href="#" class="btn btn-outline-core active" aria-pressed="true">active button</button>
-            <button type="button" href="#" class="btn btn-outline-core">normal button</button>
-            <button type="button" href="#" class="btn btn-outline-core disabled" aria-disabled="true">
-                disabled
-                button
-            </button>
-        </div>
-    </div>
-</section>
--->

src/Connected.Components/Components/SimpleSelect.razor

@@ -0,0 +1,18 @@
+@using Connected.Models;
+
+@typeparam ValueType
+
+@inherits InputBase;
+
+<div class="@InputFieldClassList">
+    <select @bind="@Value" @oninput="@ChangeValueAsync">
+        @if (EnableSearch)
+        {
+            <InputText @bind-Value="@SearchText" ValueChanged=""></InputText>
+        }
+        @foreach(SelectItem<ValueType> item in Items)
+        {
+            <option value="@item.Value">@item.DisplayedText</option>
+        }
+    </select>
+</div>

src/Connected.Components/Components/SimpleSelect.razor.cs

@@ -0,0 +1,45 @@
+using Connected.Models;
+using Microsoft.AspNetCore.Components;
+using System;
+
+namespace Connected.Components;
+public partial class SimpleSelect<ValueType> : InputBase
+{
+	[Parameter]
+	public ValueType Value { get; set; }
+
+	[Parameter]
+   public IEnumerable<SelectItem<ValueType>> Items { get; set; }
+
+	public IEnumerable<SelectItem<ValueType>> OriginalItems { get; set; }
+
+	[Parameter]
+	public bool EnableSearch { get; set; } = true;
+	public string SearchText { get; set; }
+
+	public void FilterItems()
+	{
+		Items= Items.Where(item => item.Value.ToString().ToLower().Contains(SearchText.ToLower()) || item.DisplayedText.ToString().ToLower().Contains(SearchText.ToLower()));
+	}
+
+
+    [Parameter]
+    public EventCallback<ValueType> ValueChanged { get; set; }
+
+    private async Task ChangeValueAsync(ChangeEventArgs args)
+	 {
+        await ValueChanged.InvokeAsync((ValueType)Convert.ChangeType(args.Value, typeof(ValueType)));
+    }
+
+	protected override async Task OnParametersSetAsync()
+    {
+		if (base.InputAttributes is null) base.InputAttributes = new();
+		if (base.Required)
+		{
+			if (base.InputAttributes.ContainsKey("required")) base.InputAttributes.Add("required", true);
+		}
+		OriginalItems = Items;
+		await base.OnInitializedAsync();
+    }
+
+}

src/Connected.Components/Models/SelectItem.cs

@@ -0,0 +1,9 @@
+namespace Connected.Models
+{
+	public class SelectItem<ValueType>
+	{
+		public string DisplayedText { get; set; }
+		public ValueType Value { get; set; }
+		public bool Enabled { get; set; }
+	}
+}

src/Connected.Components/Styles/Connected.Components.scss

@@ -0,0 +1,4 @@
+@import 'globals/_index';
+@import 'layout/_index';
+@import 'components/_index';
+@import 'util/_index';