feat(SelectTable): add SelectTable component

src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor

@@ -0,0 +1,79 @@
+@page "/select-table"
+
+<h3>TableSelect 表格选择器</h3>
+
+<h4>下拉框为表格用于展示复杂类型的选择需求</h4>
+
+<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
+    <SelectTable TItem="Foo" @bind-Value="@_foo" Items="_items" GetTextCallback="@GetTextCallback">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name"></TableColumn>
+            <TableColumn @bind-Field="@context.Address"></TableColumn>
+        </TableColumns>
+    </SelectTable>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["ColorTitle"]" Introduction="@Localizer["ColorIntro"]" Name="Color">
+    <SelectTable TItem="Foo" @bind-Value="@_colorFoo" Items="_colorItems" GetTextCallback="@GetTextCallback" Color="Color.Danger">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name"></TableColumn>
+            <TableColumn @bind-Field="@context.Address"></TableColumn>
+        </TableColumns>
+    </SelectTable>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["IsDisabledTitle"]" Introduction="@Localizer["IsDisabledIntro"]" Name="IsDisabled">
+    <SelectTable TItem="Foo" @bind-Value="@_disabledFoo" Items="_disabledItems" GetTextCallback="@GetTextCallback" IsDisabled="true">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name"></TableColumn>
+            <TableColumn @bind-Field="@context.Address"></TableColumn>
+        </TableColumns>
+    </SelectTable>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["TemplateTitle"]" Introduction="@Localizer["TemplateIntro"]" Name="ValueTemplate">
+    <SelectTable TItem="Foo" @bind-Value="@_templateFoo" Items="_templateItems" ShowAppendArrow="false">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.Name"></TableColumn>
+            <TableColumn @bind-Field="@context.Address"></TableColumn>
+        </TableColumns>
+        <Template>
+            <div class="dropdown-item-demo">
+                <div class="select-custom-header">
+                    <div class="id">@context.Id</div>
+                    <div class="name">@context.Name</div>
+                    <Light Color="@(context.Complete ? Color.Success : Color.Warning)"></Light>
+                </div>
+                <Divider />
+                <div class="select-custom-body">
+                    <img src="@Foo.GetAvatarUrl(context.Id)" class="bb-avatar" />
+                    <div class="select-custom-detail">
+                        <div class="d-flex">
+                            <div class="flex-fill">
+                                <div>@Foo.GetTitle(context.Id)</div>
+                                <div class="mt-3">@context.Address</div>
+                            </div>
+                            <div>
+                                <Circle Width="80" Value="@context.Count" Color="Color.Info" StrokeWidth="3" />
+                            </div>
+                        </div>
+                        <BootstrapBlazor.Components.Progress Value="@context.Count"></BootstrapBlazor.Components.Progress>
+                    </div>
+                </div>
+            </div>
+        </Template>
+    </SelectTable>
+</DemoBlock>
+
+<DemoBlock Title="@Localizer["ValidateFormTitle"]" Introduction="@Localizer["ValidateFormIntro"]" Name="ValidateForm">
+    <ValidateForm Model="Model">
+        <SelectTable TItem="Foo" @bind-Value="@_validateFormFoo" Items="_validateFormItems" GetTextCallback="@GetTextCallback" DisplayText="Test">
+            <TableColumns>
+                <TableColumn @bind-Field="@context.Name"></TableColumn>
+                <TableColumn @bind-Field="@context.Address"></TableColumn>
+            </TableColumns>
+        </SelectTable>
+    </ValidateForm>
+</DemoBlock>
+
+<AttributeTable Items="@GetAttributes()" />

src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.cs

@@ -0,0 +1,135 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Server.Components.Samples;
+
+/// <summary>
+/// 可选择表格组件示例
+/// </summary>
+public partial class SelectTables
+{
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<Foo>? LocalizerFoo { get; set; }
+
+    [Inject]
+    [NotNull]
+    private IStringLocalizer<SelectTables>? Localizer { get; set; }
+
+    private List<Foo> _items = default!;
+
+    private List<Foo> _colorItems = default!;
+
+    private List<Foo> _templateItems = default!;
+
+    private List<Foo> _disabledItems = default!;
+
+    private List<Foo> _validateFormItems = default!;
+
+    private Foo? _foo;
+
+    private Foo? _colorFoo;
+
+    private Foo? _templateFoo;
+
+    private Foo? _disabledFoo;
+
+    private Foo? _validateFormFoo;
+
+    private Foo Model = new();
+
+    /// <summary>
+    /// 
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        _items = Foo.GenerateFoo(LocalizerFoo);
+        _colorItems = Foo.GenerateFoo(LocalizerFoo);
+        _templateItems = Foo.GenerateFoo(LocalizerFoo);
+        _disabledItems = Foo.GenerateFoo(LocalizerFoo);
+        _validateFormItems = Foo.GenerateFoo(LocalizerFoo);
+    }
+
+    private static string? GetTextCallback(Foo? foo) => foo?.Name;
+
+    /// <summary>
+    /// 获得属性方法
+    /// </summary>
+    /// <returns></returns>
+    private AttributeItem[] GetAttributes() =>
+    [
+        new()
+        {
+            Name = "Items",
+            Description = Localizer["AttributeItems"],
+            Type = "IEnumerable<TItem>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "TableColumns",
+            Description = Localizer["AttributeTableColumns"],
+            Type = "RenderFragment<TItem>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "Color",
+            Description = Localizer["AttributeColor"],
+            Type = "Color",
+            ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
+            DefaultValue = "Primary"
+        },
+        new()
+        {
+            Name = "IsDisabled",
+            Description = Localizer["AttributeIsDisabled"],
+            Type = "boolean",
+            ValueList = "true / false",
+            DefaultValue = "false"
+        },
+        new()
+        {
+            Name = "ShowAppendArrow",
+            Description = Localizer["AttributeShowAppendArrow"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "true"
+        },
+        new()
+        {
+            Name = "GetTextCallback",
+            Description = Localizer["AttributeGetTextCallback"],
+            Type = "Func<TItem, string>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "PlaceHolder",
+            Description = Localizer["AttributePlaceHolder"],
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new()
+        {
+            Name = "Height",
+            Description = Localizer["AttributeHeight"],
+            Type = "int",
+            ValueList = " — ",
+            DefaultValue = "486"
+        },
+        new()
+        {
+            Name = "Template",
+            Description = Localizer["AttributeTemplate"],
+            Type = "RenderFragment<TItem>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        }
+    ];
+}

src/BootstrapBlazor.Server/Components/Samples/SelectTables.razor.css

@@ -0,0 +1,56 @@
+::deep .divider {
+    --bb-divider-margin: 1rem 0;
+    --bb-divider-bg: #c0c4cc;
+}
+
+::deep .dropdown-item-demo {
+    border-radius: var(--bs-border-radius);
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    padding: .5rem;
+    flex-direction: column;
+}
+
+::deep .select-custom-header {
+    display: flex;
+    align-items: center;
+    margin-top: .5rem;
+}
+
+    ::deep .select-custom-header .id {
+        background-color: var(--bs-success);
+        padding: .25rem .5rem;
+        border-radius: var(--bs-border-radius);
+    }
+
+    ::deep .select-custom-header .name {
+        padding: .25rem .5rem;
+        margin: 0 1rem;
+        flex: 1;
+        font-weight: bold;
+    }
+
+    ::deep .select-custom-header .status {
+    }
+
+::deep .select-custom-body {
+    display: flex;
+}
+
+    ::deep .select-custom-body .progress {
+        height: 6px;
+        margin-bottom: .5rem;
+    }
+
+    ::deep .select-custom-body .bb-avatar {
+        width: 102px;
+        border: 2px solid var(--bs-info);
+    }
+
+::deep .select-custom-detail {
+    flex: 1;
+    margin-left: 2rem;
+}
+
+    ::deep .select-custom-detail > div {
+        margin-bottom: .5rem;
+    }

src/BootstrapBlazor.Server/Extensions/MenusLocalizerExtensions.cs

@@ -406,6 +406,12 @@ void AddForm(DemoMenuItem item)
                     Url = "select"
                 },
                 new()
+                {
+                    IsNew = true,
+                    Text = Localizer["SelectTable"],
+                    Url = "select-table"
+                },
+                new()
                 {
                     Text = Localizer["SelectTree"],
                     Url = "select-tree"

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -4407,6 +4407,7 @@
     "Radio": "Radio",
     "Rate": "Rate",
     "Select": "Select",
+    "SelectTable": "Select-Table",
     "SelectTree": "Select-Tree",
     "Slider": "Slider",
     "Switch": "Switch",
@@ -6139,5 +6140,26 @@
     "Show": "Show",
     "ToolboxCardTitle": "Tools",
     "Translate": "Translate"
+  },
+  "BootstrapBlazor.Server.Components.Samples.SelectTables": {
+    "NormalTitle": "Basic usage",
+    "NormalIntro": "Suitable for candidates with a relatively large amount of information, presenting information using <code>Table</code>",
+    "ColorTitle": "Color",
+    "ColorIntro": "Change component border color by setting <code>Color</code>",
+    "IsDisabledTitle": "Disabled",
+    "IsDisabledIntro": "When you set the <code>IsDisabled</code> property value to <code>true</code>, the component suppresses select",
+    "TemplateTitle": "Value Template",
+    "TemplateIntro": "Present customized display content by customizing the <code>Template</code>",
+    "AttributeItems": "Data source table display content set",
+    "AttributeTableColumns": "Table Display Column Set",
+    "AttributeColor": "Color",
+    "AttributeIsDisabled": "Is it disabled",
+    "AttributeShowAppendArrow": "Is the right extended small arrow displayed",
+    "AttributeGetTextCallback": "Get display value callback method",
+    "AttributePlaceHolder": "Placeholder",
+    "AttributeHeight": "Table height",
+    "AttributeTemplate": "Display Template",
+    "ValidateFormTitle": "ValidateForm",
+    "ValidateFormIntro": "Intercept data when the value is empty"
   }
 }

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -4407,6 +4407,7 @@
     "Radio": "单选框 Radio",
     "Rate": "评分 Rate",
     "Select": "选择器 Select",
+    "SelectTable": "表格选择器 SelectTable",
     "SelectTree": "树状选择器 SelectTree",
     "Slider": "滑块 Slider",
     "Switch": "开关 Switch",
@@ -6139,5 +6140,26 @@
     "Show": "显示",
     "ToolboxCardTitle": "工具栏",
     "Translate": "机翻"
+  },
+  "BootstrapBlazor.Server.Components.Samples.SelectTables": {
+    "NormalTitle": "基本功能",
+    "NormalIntro": "适用于候选项信息量比较大，用 <code>Table</code> 呈现信息量",
+    "ColorTitle": "颜色",
+    "ColorIntro": "通过设置 <code>Color</code> 改变组件边框颜色",
+    "IsDisabledTitle": "禁用",
+    "IsDisabledIntro": "设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止选择",
+    "TemplateTitle": "显示模板",
+    "TemplateIntro": "通过自定义 <code>Template</code> 模板，呈现定制化显示内容",
+    "AttributeItems": "数据源表格显示内容集合",
+    "AttributeTableColumns": "设置表格显示列集合",
+    "AttributeColor": "颜色",
+    "AttributeIsDisabled": "是否禁用",
+    "AttributeShowAppendArrow": "是否显示右侧扩展小箭头",
+    "AttributeGetTextCallback": "获得显示值回调方法",
+    "AttributePlaceHolder": "占位符",
+    "AttributeHeight": "表格高度",
+    "AttributeTemplate": "显示模板",
+    "ValidateFormTitle": "客户端验证",
+    "ValidateFormIntro": "下拉框未选择时，点击提交按钮时拦截。"
   }
 }

src/BootstrapBlazor.Server/docs.json

@@ -125,6 +125,7 @@
     "search": "Searches",
     "select": "Selects",
     "select-tree": "SelectTrees",
+    "select-table": "SelectTables",
     "segmented": "Segmenteds",
     "slider": "Sliders",
     "slide-button": "SlideButtons",