feat: placeholder component in hoppscotch-ui (#3123)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
This commit is contained in:
Anwarul Islam
2023-06-21 00:39:16 +06:00
committed by GitHub
parent 331d482b22
commit fc3e3aeaec
43 changed files with 378 additions and 577 deletions

View File

@@ -10,15 +10,14 @@
@mouseover="selectedEntry = shortcutIndex"
/>
</div>
<div
<HoppSmartPlaceholder
v-if="searchResults.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:text="`${t('state.nothing_found')} ‟${search}”`"
>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ search }}"
</span>
</div>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
</template>
</HoppSmartPlaceholder>
</div>
</template>

View File

@@ -39,15 +39,14 @@
/>
</div>
</details>
<div
<HoppSmartPlaceholder
v-if="searchResults.length === 0"
class="flex flex-col items-center justify-center p-4 text-secondaryLight"
:text="`${t('state.nothing_found')} ‟${filterText}”`"
>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
<span class="my-2 text-center">
{{ t("state.nothing_found") }} "{{ filterText }}"
</span>
</div>
<template #icon>
<icon-lucide-search class="pb-2 opacity-75 svg-icons" />
</template>
</HoppSmartPlaceholder>
</div>
<div v-else class="flex flex-col divide-y divide-dividerLight">
<details