Connected/Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Progress

Browse Source
This commit is contained in:
stm 2023-02-09 12:26:53 +01:00
parent 323c66fecd
commit 9832ec01d8
6 changed files with 104 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/Connected.Components.Showcase.Runner/Pages/Index.razor
View File

@ -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>
<Alert
Severity="Severity.Error"
ShowCloseButton="true">
Alert!!
</Alert>
<p>SimpleSelectValue: @SelectedItemValue</p>
<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;
}
}

84
src/Connected.Components/Components/Button.razor
View File

@ -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>
-->

18
src/Connected.Components/Components/SimpleSelect.razor Normal file
View File

@ -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>

45
src/Connected.Components/Components/SimpleSelect.razor.cs Normal file
View File

@ -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();
}
}

9
src/Connected.Components/Models/SelectItem.cs Normal file
View File

@ -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; }
}
}

4
src/Connected.Components/Styles/Connected.Components.scss Normal file
View File

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