fix: apply ESLint rule vue/component-tags-order

This commit is contained in:
iamsivin
2024-07-25 19:33:28 +05:30
parent fede03ebe8
commit 0008fca511
544 changed files with 21263 additions and 21256 deletions
@@ -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];