feat(MeiliSearch): update css (#584)

* refactor: 更新样式

* refactor: 增加初始化样式

* refactor: 脚本加载后恢复样式

* chore: bump version 9.1.11

Author: ArgoZhang

src/components/BootstrapBlazor.MeiliSearch/BootstrapBlazor.MeiliSearch.csproj

@@ -1,7 +1,7 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.1.10</Version>
+    <Version>9.1.11</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.MeiliSearch/MeiliSearchBox.razor

@@ -5,7 +5,7 @@
 <div @attributes="@AdditionalAttributes" id="@Id" class="@ClassString">
     <i class="fa-solid fa-search search-dialog-icon"></i>
     <input type="text" readonly placeholder="@SearchBoxPlaceHolder" />
-    <div class="search-dialog-mask">
+    <div class="search-dialog-mask d-none">
         <div class="search-dialog shadow-lg" tabindex="0">
             <header class="search-dialog-input">
                 <i class="fa-solid fa-search"></i>

src/components/BootstrapBlazor.MeiliSearch/MeiliSearchBox.razor.cs

@@ -112,7 +112,7 @@ public partial class MeiliSearchBox
     [Parameter]
     public RenderFragment? FooterTemplate { get; set; }
 
-    private string? ClassString => CssBuilder.Default("bb-g-search")
+    private string? ClassString => CssBuilder.Default("bb-g-search visually-hidden")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 

src/components/BootstrapBlazor.MeiliSearch/MeiliSearchBox.razor.js

@@ -10,6 +10,11 @@ if (window.BootstrapBlazor === void 0) {
 export async function init(id, options) {
     const el = document.getElementById(id);
     await addLink('_content/BootstrapBlazor.MeiliSearch/meilisearch.css');
+    el.classList.remove('visually-hidden');
+
+    const mask = el.querySelector('.search-dialog-mask');
+    mask.classList.remove("d-none");
+
     await addScript('_content/BootstrapBlazor.MeiliSearch/meilisearch.umd.min.js');
 
     const search = {
@@ -23,7 +28,7 @@ export async function init(id, options) {
         blockTemplate: el.querySelector('.search-dialog-block-template'),
         emptyTemplate: el.querySelector('.search-dialog-empty-template'),
         dialog: el.querySelector('.search-dialog'),
-        mask: el.querySelector('.search-dialog-mask')
+        mask: mask
     };
     Data.set(id, search);
 

src/components/BootstrapBlazor.MeiliSearch/wwwroot/meilisearch.css

@@ -1,4 +1,40 @@
-.search-dialog-mask {
+.bb-g-search {
+    --bb-global-search-padding: 0.25rem 0.75rem;
+    --bb-global-search-width: 168px;
+    display: flex;
+    align-items: center;
+    border: var(--bs-border-width) solid var(--bs-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;
+    color: rgba(var(--bs-body-color-rgb), 0.5);
+}
+
+    .bb-g-search:hover {
+        border: var(--bs-border-width) solid var(--bb-border-hover-color);
+    }
+
+    .bb-g-search > input {
+        width: 100%;
+        background-color: transparent;
+        border: none;
+        line-height: 1.5;
+        padding: 0;
+        cursor: pointer;
+    }
+
+        .bb-g-search > input::placeholder {
+            color: rgba(var(--bs-body-color-rgb), 0.5);
+        }
+
+.search-dialog-icon {
+    cursor: pointer;
+    font-size: 18px;
+    margin-inline-end: .5rem;
+}
+
+.search-dialog-mask {
     --bb-global-search-item-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.2);
     --bb-global-search-item-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
     --bb-global-search-dialog-input-focus-border-color: rgba(var(--bs-emphasis-color-rgb), 0.4);
@@ -8,6 +44,15 @@
     --bb-global-search-main-max-height: calc(100vh - 260px);
     --bb-global-search-footer-kbd-bg: var(--bs-body-color);
     --bb-global-search-footer-kbd-color: var(--bs-body-bg);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--bb-global-search-dialog-mask-z-index);
+    background-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
+    justify-content: center;
+    display: none;
 }
 
     .search-dialog-mask .search-dialog-item ol {
@@ -26,17 +71,6 @@
         color: var(--bb-global-search-footer-kbd-color);
     }
 
-.search-dialog-mask {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: var(--bb-global-search-dialog-mask-z-index);
-    background-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
-    justify-content: center;
-}
-
 [data-bs-theme='dark'] .search-dialog-mask {
     --bb-global-search-footer-kbd-color: var(--bs-body-color);
 }