fix: apply ESLint rule vue/component-tags-order
This commit is contained in:
@@ -1,66 +1,3 @@
|
||||
<template>
|
||||
<div class="dropdown-wrap">
|
||||
<div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="search-input"
|
||||
autofocus="true"
|
||||
:placeholder="inputPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-start items-start flex-auto overflow-auto">
|
||||
<div class="w-full max-h-[10rem]">
|
||||
<woot-dropdown-menu>
|
||||
<woot-dropdown-item
|
||||
v-for="option in filteredOptions"
|
||||
:key="option.id"
|
||||
>
|
||||
<woot-button
|
||||
class="multiselect-dropdown--item"
|
||||
:variant="isActive(option) ? 'hollow' : 'clear'"
|
||||
color-scheme="secondary"
|
||||
:class="{
|
||||
active: isActive(option),
|
||||
}"
|
||||
@click="() => onclick(option)"
|
||||
>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Thumbnail
|
||||
v-if="hasThumbnail"
|
||||
:src="option.thumbnail"
|
||||
size="24px"
|
||||
:username="option.name"
|
||||
:status="option.availability_status"
|
||||
has-border
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-between w-full min-w-0 gap-2"
|
||||
>
|
||||
<span
|
||||
class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
:title="option.name"
|
||||
>
|
||||
{{ option.name }}
|
||||
</span>
|
||||
<fluent-icon v-if="isActive(option)" icon="checkmark" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
</woot-dropdown-item>
|
||||
</woot-dropdown-menu>
|
||||
<h4
|
||||
v-if="noResult"
|
||||
class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
>
|
||||
{{ noSearchResult }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WootDropdownItem from 'shared/components/ui/dropdown/DropdownItem.vue';
|
||||
import WootDropdownMenu from 'shared/components/ui/dropdown/DropdownMenu.vue';
|
||||
@@ -131,6 +68,69 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dropdown-wrap">
|
||||
<div class="mb-2 flex-shrink-0 flex-grow-0 flex-auto max-h-8">
|
||||
<input
|
||||
ref="searchbar"
|
||||
v-model="search"
|
||||
type="text"
|
||||
class="search-input"
|
||||
autofocus="true"
|
||||
:placeholder="inputPlaceholder"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-start items-start flex-auto overflow-auto">
|
||||
<div class="w-full max-h-[10rem]">
|
||||
<woot-dropdown-menu>
|
||||
<woot-dropdown-item
|
||||
v-for="option in filteredOptions"
|
||||
:key="option.id"
|
||||
>
|
||||
<woot-button
|
||||
class="multiselect-dropdown--item"
|
||||
:variant="isActive(option) ? 'hollow' : 'clear'"
|
||||
color-scheme="secondary"
|
||||
:class="{
|
||||
active: isActive(option),
|
||||
}"
|
||||
@click="() => onclick(option)"
|
||||
>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<Thumbnail
|
||||
v-if="hasThumbnail"
|
||||
:src="option.thumbnail"
|
||||
size="24px"
|
||||
:username="option.name"
|
||||
:status="option.availability_status"
|
||||
has-border
|
||||
/>
|
||||
<div
|
||||
class="flex items-center justify-between w-full min-w-0 gap-2"
|
||||
>
|
||||
<span
|
||||
class="leading-4 my-0 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
:title="option.name"
|
||||
>
|
||||
{{ option.name }}
|
||||
</span>
|
||||
<fluent-icon v-if="isActive(option)" icon="checkmark" />
|
||||
</div>
|
||||
</div>
|
||||
</woot-button>
|
||||
</woot-dropdown-item>
|
||||
</woot-dropdown-menu>
|
||||
<h4
|
||||
v-if="noResult"
|
||||
class="w-full justify-center items-center flex text-slate-500 dark:text-slate-300 py-2 px-2.5 overflow-hidden whitespace-nowrap text-ellipsis text-sm"
|
||||
>
|
||||
{{ noSearchResult }}
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dropdown-wrap {
|
||||
@apply w-full flex flex-col max-h-[12.5rem];
|
||||
|
||||
Reference in New Issue
Block a user