combobox

BlazorFluentUI/Components/Pages/FormInputs/FormInputCombobox.razor

@@ -1,6 +1,7 @@
 @page "/forminputcombobox"
 
-@inject TestDataService dataService;
+@inject TestDataService dataService
+@inject EmployeeService employeeService
 
 @rendermode RenderMode.InteractiveServer
 
@@ -11,7 +12,7 @@
 </FluentLabel>
 
 <FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
-<FluentCard Class="mt-3" Width="auto" Height="450px" Style="overflow: visible">
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
     <h4>Select the T-shirt of best song from the list</h4>
     <FluentCombobox Placeholder="Select song..." Label="Song" Autofocus="true"
                     Items="@dataService.Songs" @bind-Value="song"/>
@@ -19,18 +20,127 @@
                     Items="@dataService.Singers" @bind-Value="singer" />
     <FluentCombobox Placeholder="Select size..." Label="Size"
                     Items="@dataService.Sizes" @bind-Value="size" />
-    <div>
-        Result: Lable <span>@song?</span>, Image <span>@singer?</span>, Size <span>@size?</span>
+    <div class="mt-2">
+        <strong>Result</strong>
+        <br /> 
+        Lable: <span>@song?.ToString()</span> | Image: <span>@singer?.ToString()</span> | Size: <span>@size?.ToString()</span>
     </div>
 </FluentCard>
 
+<FluentLabel class="my-3" Typo="Typography.H4">From a list of <code>Option&lt;T&gt;</code></FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h4 class="mt-2">From <code>Option&lt;string&gt</code> items</h4>
+    <FluentCombobox Items="@stringOptions"
+                    OptionText="@(i => i.Text)"
+                    OptionValue="@(i => i.Value)"
+                    OptionSelected="@(i => i.Selected)"
+                    @bind-SelectedOption="selectedStringOption"
+                    @bind-Value="stringValue"/>
+    <p>
+        Selected Value: @stringValue<br />
+        <strong>Selected Item</strong><br />
+        Value: @selectedStringOption?.Value (Type: @(selectedStringOption?.GetType())) <br />
+        Text: @selectedStringOption?.Text <br />
+    </p>
+
+    <h4 class="mt-2">From <code>Option&lt;int&gt</code> items</h4>
+    <FluentCombobox Items="@intOptions"
+                    OptionText="@(i => i.Text)"
+                    OptionValue="@(i => i.Value.ToString())"
+                    OptionSelected="@(i => i.Selected)"
+                    OptionDisabled="@(i => i.Disabled)"
+                    @bind-SelectedOption="selectedIntOption"
+                    @bind-Value="intValue" />
+    <p>
+        Selected Value: @intValue<br />
+        <strong>Selected Item</strong><br />
+        Value: @selectedIntOption?.Value (Type: @(selectedIntOption?.GetType())) <br />
+        Text: @selectedIntOption?.Text <br />
+    </p>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Autocomplete</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <h4>Inline Autocomplte</h4>
+    <FluentCombobox Items="@names" Autocomplete="ComboboxAutocomplete.Inline" />
+    <h4>List Autocomplte</h4>
+    <FluentCombobox Items="@names" Autocomplete="ComboboxAutocomplete.List" />
+    <h4>Both Autocomplte</h4>
+    <FluentCombobox Items="@names" Autocomplete="ComboboxAutocomplete.Both" />
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Option template</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentCombobox Items="@employeeService.GetFixedEmployeeData()"
+                    OptionValue="@(e => e.ID.ToString())"
+                    @bind-Value="selectedEmployValue"
+                    @bind-SelectedOption="selectedEmployee">
+        <OptionTemplate>
+            <FluentIcon Value="@(new Icons.Regular.Size16.Person())" Slot="end" OnClick="@(() => { message = $"Icon for {context.FirstName} {context.LastName} selected."; })"/>
+            @context.FirstName (@context.LastName)
+        </OptionTemplate>
+    </FluentCombobox>
+    <p>
+        <strong>Selected option</strong>: @selectedEmployee?.FirstName @selectedEmployee?.LastName
+        @if (selectedEmployee != null && selectedEmployee.BirthDate != null)
+        {
+            <span>
+                (@selectedEmployee.BirthDate.ToString("yyyy-MM-dd"))
+            </span>
+        }
+        <br/>
+        <strong>Selected value</strong>: @selectedEmployValue <br />
+        <strong>Message</strong>: @message;
+    </p>
+</FluentCard>
+
 @code {
     string? song;
     string? singer;
     string? size;
 
+    Employee selectedEmployee = default!;
+    string? selectedEmployValue;
+    string? message;
+
     protected override void OnInitialized()
     {
         singer = dataService.Singers.FirstOrDefault();
     }
+
+    Option<string> selectedStringOption = default;
+    string? stringValue;
+    Option<int> selectedIntOption = default;
+    string? intValue;
+
+    List<Option<string>> stringOptions = new()
+    {
+        { new Option<string> { Value = "1", Text = "One" } },
+        { new Option<string> { Value = "2", Text = "Two", Selected = true } },
+        { new Option<string> { Value = "3", Text = "Three" } },
+    };
+
+    List<Option<int>> intOptions = new()
+    {
+        { new Option<int> { Value = 3, Text = "1", Disabled = true } },
+        { new Option<int> { Value = 2, Text = "2" } },
+        { new Option<int> { Value = 1, Text = "3" } },
+    };
+
+    List<string> names = new()
+    {
+        "William Hartnell",
+        "Patrick Troughton",
+        "Jon Pertwee",
+        "Tom Baker",
+        "Peter Davidson",
+        "Colin Baker",
+        "Sylvester McCoy",
+        "Paul McGann",
+        "Christopher Eccleston",
+        "David Tenant",
+        "Matt Smith",
+        "Peter Capaldi",
+        "Jodie Whittaker",
+    };
 }

BlazorFluentUI/Models/Employee.cs

@@ -0,0 +1,27 @@
+namespace BlazorFluentUI.Models
+{
+    public class Employee
+    {
+        public int ID { get; set; }
+        public string Photo { get; set; }
+        public string FirstName { get; set; }
+        public string LastName { get; set; }
+        public string Job { get; set; }
+        public string Title { get; set; }
+        public DateTime BirthDate { get; set; }
+        public DateTime HireDate { get; set; }
+        public string Address { get; set; }
+        public string City { get; set; }
+        public string Region { get; set; }
+        public string PostalCode { get; set; }
+        public string Country { get; set; }
+        public string Phone { get; set; }
+        public string Extension { get; set; }
+        public string Notes { get; set; }
+
+        public override string ToString()
+        {
+            return $"{FirstName} {LastName} ({BirthDate.ToString("yyyy-MM-dd")})";
+        }
+    }
+}

BlazorFluentUI/Program.cs

@@ -17,6 +17,7 @@ builder.Services.AddFluentUIComponents();
 
 builder.Services.AddSingleton<CountryService>();
 builder.Services.AddSingleton<TestDataService>();
+builder.Services.AddSingleton<EmployeeService>();
 
 var app = builder.Build();
 

BlazorFluentUI/Services/EmployeeService.cs

@@ -0,0 +1,63 @@
+using BlazorFluentUI.Models;
+
+namespace BlazorFluentUI.Services
+{
+    public class EmployeeService
+    {
+        private List<Employee> _fixedSample;
+
+        Random _random = new Random();
+        string[] _firstNames = new[] { "John", "Jane", "Michael", "Emily", "Robert", "Linda", "William", "Jessica", "David", "Sarah" };
+        string[] _lastNames = new[] { "Smith", "Johnson", "Brown", "Williams", "Jones", "Garcia", "Miller", "Davis", "Martinez", "Hernandez" };
+        string[] _jobs = new[] { "Developer", "Designer", "Manager", "Analyst", "Consultant", "Administrator", "Engineer", "Specialist", "Technician", "Coordinator" };
+        string[] _titles = new[] { "Junior", "Mid", "Senior", "Lead", "Chief" };
+        string[] _cities = new[] { "New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "San Diego", "Dallas", "San Jose" };
+        string[] _regions = new[] { "NY", "CA", "IL", "TX", "AZ", "PA", "TX", "CA", "TX", "CA" };
+        string[] _counties = new[] { "USA", "USA", "USA", "USA", "USA", "USA", "USA", "USA", "USA", "USA" };
+
+        public EmployeeService()
+        {
+            _fixedSample = GenerateEmployData(100);
+        }
+
+        public List<Employee> GetEmployeeData(int count)
+        {
+            return GenerateEmployData(count).ToList();
+        }
+
+        public List<Employee> GetFixedEmployeeData()
+        {
+            return _fixedSample;
+        }
+
+        private List<Employee> GenerateEmployData(int count)
+        {
+            var employees = new List<Employee>();
+            for (int i = 0; i < count; i++)
+            {
+                var employee = new Employee
+                {
+                    ID = i + 1,
+                    Photo = $"https://randomuser.me/api/portraits/med/{(i % 2 == 0 ? "men" : "women")}/{i}.jpg",
+                    FirstName = _firstNames[_random.Next(_firstNames.Length)],
+                    LastName = _lastNames[_random.Next(_lastNames.Length)],
+                    Job = _jobs[_random.Next(_jobs.Length)],
+                    Title = _titles[_random.Next(_titles.Length)],
+                    BirthDate = new DateTime(_random.Next(1950, 2000), _random.Next(1, 13), _random.Next(1, 29)),
+                    HireDate = DateTime.Today.AddDays(-_random.Next(1, 3650)),
+                    Address = $"{_random.Next(1, 9999)} Main St",
+                    City = _cities[_random.Next(_cities.Length)],
+                    Region = _regions[_random.Next(_regions.Length)],
+                    PostalCode = $"{_random.Next(10000, 99999)}",
+                    Country = _counties[_random.Next(_counties.Length)],
+                    Phone = $"{_random.Next(100, 999)}-555-{_random.Next(1000, 9999)}",
+                    Extension = $"{_random.Next(100, 9999)}",
+                    Notes = "Generated demo data"
+                };
+                employees.Add(employee);
+            }
+
+            return employees;
+        }
+    }
+}

BlazorFluentUI/Services/TestDataService.cs

@@ -22,6 +22,8 @@
                 "Good Vibrations", "Smells Like Teen Spirit", "What's Going On", "Hotel California", "One"
             };
 
+            songs = songs.OrderBy(s => Guid.NewGuid()).ToList();
+
             var hitSongs = new List<string>();
             for (int i = 0; i < 5; i++)
             {
@@ -40,6 +42,8 @@
                 "Led Zeppelin", "Pink Floyd", "Queen", "The Rolling Stones", "U2"
             };
 
+            singers = singers.OrderBy(s => Guid.NewGuid()).ToList();
+
             var randomSingers = new List<string>();
             for (int i = 0; i < 5; i++)
             {