feat: 增加 IsEditable 参数

Author: ArgoZhang

src/BootstrapBlazor/Components/Select/MultiSelect.razor.cs

@@ -96,11 +96,11 @@ public partial class MultiSelect<TValue>
 
     /// <summary>
     /// 获得/设置 编辑模式下输入选项更新后回调方法 默认 null
-    /// <para>返回 true 时输入选项生效，返回 false 时选项不生效进行舍弃操作，建议在回调方法中自行提示</para>
+    /// <para>返回 <see cref="SelectedItem"/> 实例时输入选项生效，返回 null 时选项不生效进行舍弃操作，建议在回调方法中自行提示</para>
     /// </summary>
     /// <remarks>设置 <see cref="IsEditable"/> 后生效</remarks>
     [Parameter]
-    public Func<string, Task<bool>>? OnEditCallback { get; set; }
+    public Func<string, Task<SelectedItem>>? OnEditCallback { get; set; }
 
     /// <summary>
     /// 获得/设置 编辑提交按键 默认 Enter
@@ -287,19 +287,28 @@ public async Task ToggleRow(string val)
     /// <param name="val"></param>
     /// <returns></returns>
     [JSInvokable]
-    public async Task TriggerEditTag(string val)
+    public async Task<bool> TriggerEditTag(string val)
     {
-        var ret = true;
+        SelectedItem? ret = null;
+        val = val.Trim();
         if (OnEditCallback != null)
         {
             ret = await OnEditCallback.Invoke(val);
         }
-
-        if (ret)
+        else if (!string.IsNullOrEmpty(val))
+        {
+            ret = GetData().Find(i => i.Text.Equals(val, StringComparison.OrdinalIgnoreCase)) ?? new SelectedItem(val, val);
+            if (SelectedItems.Find(i => i.Text.Equals(val, StringComparison.OrdinalIgnoreCase)) == null)
+            {
+                SelectedItems.Add(ret);
+            }
+        }
+        if (ret != null)
         {
             // 更新选中值
             await SetValue();
         }
+        return ret != null;
     }
 
     private string? GetValueString(SelectedItem item) => IsPopover ? item.Value : null;
@@ -433,14 +442,14 @@ private bool CheckCanSelect(SelectedItem item)
         return !ret;
     }
 
-    private IEnumerable<SelectedItem> GetData()
+    private List<SelectedItem> GetData()
     {
         var data = Items;
         if (ShowSearch && !string.IsNullOrEmpty(SearchText))
         {
             data = OnSearchTextChanged(SearchText);
         }
-        return data;
+        return data.ToList();
     }
 
     /// <summary>

src/BootstrapBlazor/Components/Select/MultiSelect.razor.js

@@ -23,21 +23,28 @@ export function init(id, invoke, method) {
         popover
     }
 
-    EventHandler.on(itemsElement, 'change', '.multi-select-input', e => {
-        invoke.invokeMethodAsync('TriggerEditTag', e.target.value)
-    });
-
     EventHandler.on(itemsElement, 'click', '.multi-select-input', e => {
         const handler = setTimeout(() => {
             clearTimeout(handler);
             e.target.focus();
         }, 50);
     });
 
-    EventHandler.on(itemsElement, 'keyup', '.multi-select-input', e => {
-        const key = e.target.getAttribute('data-bb-trigger-key');
-        if (key === 'space') {
-            invoke.invokeMethodAsync('TriggerEditTag', e.target.value)
+    EventHandler.on(itemsElement, 'keyup', '.multi-select-input', async e => {
+        const triggerSpace = e.target.getAttribute('data-bb-trigger-key') === 'space';
+        let submit = false;
+        if (triggerSpace && e.code === 'Space') {
+            submit = true;
+        }
+        else if (e.code === 'Enter' || e.code === 'NumPadEnter') {
+            submit = true;
+        }
+
+        if (submit) {
+            const ret = await invoke.invokeMethodAsync('TriggerEditTag', e.target.value);
+            if (ret) {
+                e.target.value = '';
+            }
         }
     });
 

src/BootstrapBlazor/Components/Select/MultiSelect.razor.scss

@@ -5,8 +5,8 @@
     --bb-multi-select-button-hover-bg-color: rgba(var(--bs-body-color-rgb), .3);
     --bb-multi-select-item-margin-x: 3px;
     --bb-multi-select-item-margin-y: 3px;
-    --bb-multi-select-item-padding: 2px 6px;
     --bb-multi-select-item-max-width: 130px;
+    --bb-multi-select-item-padding: 2px 6px;
     width: 100%;
     position: relative;
 
@@ -81,6 +81,10 @@
         .multi-select-item-group {
             display: inline-flex;
             position: relative;
+
+            + .multi-select-input {
+                padding: 3px 6px;
+            }
         }
 
         .multi-select-close {
@@ -106,7 +110,7 @@
         border: none;
         outline: none;
         appearance: none;
-        padding: 0;
+        padding: 3px 12px;
         background-color: transparent;
         flex: 1;
         width: 1%;