fix: Support for loading state in Dropdown

This commit is contained in:
Faris Ansari
2020-02-03 23:25:11 +05:30
parent b9d6ae1c62
commit 052556d132
+28 -19
View File
@@ -18,26 +18,31 @@
</div>
<div slot="content" class="z-10 bg-white rounded w-full min-w-40">
<div class="p-1 max-h-64 overflow-auto text-sm">
<div v-for="d in dropdownItems" :key="d.label">
<div
v-if="d.isGroup"
class="px-2 pt-3 pb-1 text-xs uppercase text-gray-700 font-semibold tracking-wider"
>
{{ d.label }}
</div>
<a
v-else
ref="items"
class="block p-2 rounded-md mt-1 first:mt-0 cursor-pointer truncate"
:class="d.index === highlightedIndex ? 'bg-gray-100' : ''"
@mouseenter="highlightedIndex = d.index"
@mouseleave="highlightedIndex = -1"
@click="selectItem(d)"
>
<component :is="d.component" v-if="d.component" />
<template v-else>{{ d.label }}</template>
</a>
<div v-if="isLoading" class="p-2 text-gray-600">
{{ _('Loading...') }}
</div>
<template v-else>
<div v-for="d in dropdownItems" :key="d.label">
<div
v-if="d.isGroup"
class="px-2 pt-3 pb-1 text-xs uppercase text-gray-700 font-semibold tracking-wider"
>
{{ d.label }}
</div>
<a
v-else
ref="items"
class="block p-2 rounded-md mt-1 first:mt-0 cursor-pointer truncate"
:class="d.index === highlightedIndex ? 'bg-gray-100' : ''"
@mouseenter="highlightedIndex = d.index"
@mouseleave="highlightedIndex = -1"
@click="selectItem(d)"
>
<component :is="d.component" v-if="d.component" />
<template v-else>{{ d.label }}</template>
</a>
</div>
</template>
</div>
</div>
</Popover>
@@ -61,6 +66,10 @@ export default {
right: {
type: Boolean,
default: false
},
isLoading: {
type: Boolean,
default: false
}
},
components: {