BootstrapBlazor.Extensions/src/components/BootstrapBlazor.MeiliSearch/MeiliSearchBox.razor at 6fce57ad885b5928685bdf10b545a6a40672d375 · BootstrapBlazor/BootstrapBlazor.Extensions · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
@namespace BootstrapBlazor.Components
@inherits BootstrapModuleComponentBase
@attribute [JSModuleAutoLoader("./_content/BootstrapBlazor.MeiliSearch/MeiliSearchBox.razor.js")]

<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 d-none">
        <div class="search-dialog shadow-lg" tabindex="0">
            <header class="search-dialog-input">
                <i class="fa-solid fa-search"></i>
                <input type="text" placeholder="@SearchBoxPlaceHolder" />
                <i class="fa-solid fa-times search-dialog-clear"></i>
            </header>
            <main class="search-dialog-main">
                <div class="search-dialog-list scroll">
                    <div class="search-dialog-empty-template">
                        @SearchResultPlaceHolder
                    </div>
                </div>
                <div class="search-dialog-menu scroll">
                </div>
            </main>
            @if (ShowFooter)
            {
                <footer class="search-dialog-footer">
                    @if (FooterTemplate == null)
                    {
                        @if (ShowKeyboardTips)
                        {
                            <div class="search-dialog-commands d-none d-md-flex">
                                <div><kbd>Enter</kbd> @EnterKeyText</div>
                                <div><kbd>ArrowUp</kbd> <kbd>ArrowDown</kbd> @ArrowKeyText</div>
                                <div><kbd>ESC</kbd> @EscKeyText</div>
                            </div>
                        }
                        @if (ShowSearchResult)
                        {
                            <div class="search-dialog-status"></div>
                        }
                        @if (ShowLogoText)
                        {
                            <div class="search-dialog-logo">
                                @LogoText
                            </div>
                        }
                    }
                    else
                    {
                        @FooterTemplate
                    }
                </footer>
            }
            <template>
                <div class="search-dialog-item-template">
                    <div class="search-dialog-item">
                        <a href="{url}" target="_blank">
                            <div class="search-dialog-item-title"><span>{title}</span><span class="badge text-bg-warning">{count}</span></div>
                            <div class="search-dialog-item-sub">{sub-title}</div>
                        </a>
                    </div>
                </div>
                <ul class="search-dialog-block-template">
                    <li>
                        <a href="{url}" target="_blank">
                            <div class="search-dialog-block-title"><span>{title}</span></div>
                            <div class="search-dialog-block-intro">{intro}</div>
                        </a>
                    </li>
                </ul>
                <div class="search-dialog-empty-template">
                    @SearchResultPlaceHolder
                </div>
            </template>
        </div>
    </div>
</div>