Scroll added when items are too many

This commit is contained in:
Merve Karaman 2023-07-13 15:49:08 +03:00
parent 0013092b55
commit 7648991be9

View File

@ -23,36 +23,38 @@
/>
</div>
<ul class="w-full text-sm rounded-lg border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple p-0 mt-0 border-0 cursor-pointer">
<div
class="hover:bg-gray-100 px-4"
v-for="(item, index) in sortedItems"
:key="index"
:class="isItemMatched ? 'highlightItem' : ''"
@click="onItemSelected(item)"
>
<div class="w-full flex items-center justify-between">
<span>{{ item.name }}</span>
<div v-bind:class="(sortedItems.length > 7) ? 'h-72 overflow-y-auto' : ''">
<ul class="w-full text-sm rounded-lg border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple p-0 mt-0 border-0 cursor-pointer">
<div
class="hover:bg-gray-100 px-4"
v-for="(item, index) in sortedItems"
:key="index"
:class="isItemMatched ? 'highlightItem' : ''"
@click="onItemSelected(item)"
>
<div class="w-full flex items-center justify-between">
<span>{{ item.name }}</span>
<money
:name="'item-id-' + item.id"
:value="item.price"
v-bind="money"
masked
disabled
class="ltr:text-right rtl:text-left disabled-money text-gray"
></money>
<money
:name="'item-id-' + item.id"
:value="item.price"
v-bind="money"
masked
disabled
class="ltr:text-right rtl:text-left disabled-money text-gray"
></money>
</div>
</div>
</div>
<div class="hover:bg-gray-100 text-center py-2 px-4" v-if="!sortedItems.length">
<div class="text-center">
<span v-if="!items.length && !search">{{ noDataText }}</span>
<div class="hover:bg-gray-100 text-center py-2 px-4" v-if="!sortedItems.length">
<div class="text-center">
<span v-if="!items.length && !search">{{ noDataText }}</span>
<span v-else>{{ noMatchingDataText }}</span>
<span v-else>{{ noMatchingDataText }}</span>
</div>
</div>
</div>
</ul>
</ul>
</div>
<div class="flex items-center justify-center h-11 text-center text-purple font-bold border border-l-0 border-r-0 border-b-0 rounded-bl-lg rounded-br-lg hover:bg-gray-100 cursor-pointer" @click="onItemCreate">
<span class="material-icons text-lg font-bold mr-1">add</span>