refactor(MeiliSearch): add meili search style (#4963)

* chore: bump version 9.1.9

Co-Authored-By: SuperPigBlog <[email protected]>

* chore: bump version 9.1.9-beta11

* doc: 增加本地化

Co-Authored-By: Alex chow <[email protected]>

* chore: 集成 MeiliSearch 样式

Co-Authored-By: MadLongTom <[email protected]>
Co-Authored-By: Frost Autumn <[email protected]>

---------

Co-authored-by: SuperPigBlog <[email protected]>
Co-authored-by: Alex chow <[email protected]>
Co-authored-by: MadLongTom <[email protected]>
Co-authored-by: Frost Autumn <[email protected]>

Author: 5 people

src/BootstrapBlazor.Server/Components/Components/GlobalSearch.razor

@@ -1,6 +1,12 @@
 @inject IStringLocalizer<GlobalSearch> Localizer
 
-<MeiliSearchBox SearchBoxPlaceHolder="@Localizer["SearchPlaceHolder"]" SearchStatus="@Localizer["SearchStatus"]" SearchResultPlaceHolder="@Localizer["SearchResultPlaceHolder"]" SearchableColumns="SearchableColumns"></MeiliSearchBox>
+<MeiliSearchBox SearchBoxPlaceHolder="@Localizer["SearchPlaceHolder"]"
+                SearchStatus="@Localizer["SearchStatus"]"
+                EnterKeyText="@Localizer["EnterKeyText"]"
+                ArrowKeyText="@Localizer["ArrowKeyText"]"
+                EscKeyText="@Localizer["EscKeyText"]"
+                SearchResultPlaceHolder="@Localizer["SearchResultPlaceHolder"]"
+                SearchableColumns="SearchableColumns"></MeiliSearchBox>
 
 @code {
     private List<string> SearchableColumns { get; set; } = new List<string> { "menu", "title", "subTitle", "demos.title", "demos.raw" };

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

@@ -4470,7 +4470,10 @@
   "BootstrapBlazor.Server.Components.Components.GlobalSearch": {
     "SearchPlaceHolder": "search",
     "SearchStatus": "Powered by BootstrapBlazor",
-    "SearchResultPlaceHolder": "Type something to search"
+    "SearchResultPlaceHolder": "Type something to search",
+    "EnterKeyText": "to Select",
+    "ArrowKeyText": "to Navigate",
+    "EscKeyText": "to Close"
   },
   "BootstrapBlazor.Server.Components.Components.Header": {
     "DownloadText": "Download",

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

@@ -4470,7 +4470,10 @@
   "BootstrapBlazor.Server.Components.Components.GlobalSearch": {
     "SearchPlaceHolder": "搜索",
     "SearchStatus": "Powered by BootstrapBlazor",
-    "SearchResultPlaceHolder": "键入要搜索的内容"
+    "SearchResultPlaceHolder": "键入要搜索的内容",
+    "EnterKeyText": "选择",
+    "ArrowKeyText": "导航",
+    "EscKeyText": "关闭"
   },
   "BootstrapBlazor.Server.Components.Components.Header": {
     "DownloadText": "Download",

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.1.9-beta10</Version>
+    <Version>9.1.9</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/wwwroot/scss/root.scss

@@ -76,6 +76,49 @@ a, a:hover, a:focus {
     --bs-popover-body-padding-y: 0.5rem;
 }
 
+.bb-g-search {
+    --bb-global-search-input-margin-left: .5rem;
+    --bb-global-search-border-color: rgba(255,255,255,.5);
+    --bb-global-search-color: rgba(255,255,255,.5);
+    --bb-global-search-border-hover-color: rgba(255,255,255);
+    --bb-global-search-padding: 0.25rem 0.75rem;
+    --bb-global-search-width: 168px;
+    display: flex;
+    align-items: center;
+    color: var(--bb-global-search-color);
+    border: var(--bs-border-width) solid var(--bb-global-search-border-color);
+    border-radius: var(--bs-border-radius);
+    padding: var(--bb-global-search-padding);
+    width: var(--bb-global-search-width);
+    transition: border-color .3s linear;
+
+    &:hover {
+        border: var(--bs-border-width) solid var(--bb-global-search-border-hover-color);
+    }
+
+    > input {
+        width: 100%;
+        background-color: transparent;
+        border: none;
+        line-height: 1.5;
+        padding: 0;
+        margin-left: var(--bb-global-search-input-margin-left);
+        cursor: pointer;
+
+        &::placeholder {
+            color: var(--bb-global-search-border-color);
+        }
+    }
+
+    > i {
+        cursor: pointer;
+    }
+}
+
+.search-dialog-mask {
+    display: none;
+}
+
 ::view-transition-old(root) {
     animation: none;
 }