afadf9f8f4
(cherry picked from commit 50708ebe32df130a4c6c5f678b5b9d0e85ccfa66) # Conflicts: # frontend/components.d.ts # frontend/src/components/SidePanelLayout.vue # frontend/src/pages/Contact.vue
70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
<template>
|
|
<Popover>
|
|
<template #target="{ isOpen, togglePopover }">
|
|
<Button
|
|
:label="value"
|
|
class="dropdown-button flex items-center justify-between bg-surface-white !px-2.5 py-1.5 text-base text-ink-gray-8 placeholder-ink-gray-4 transition-colors hover:bg-surface-white focus:bg-surface-white focus:shadow-sm focus:outline-none focus:ring-0"
|
|
@click="togglePopover"
|
|
>
|
|
<div v-if="value" class="truncate">{{ value }}</div>
|
|
<div v-else class="text-base leading-5 text-ink-gray-4 truncate">
|
|
{{ placeholder }}
|
|
</div>
|
|
<template #suffix>
|
|
<FeatherIcon
|
|
:name="isOpen ? 'chevron-up' : 'chevron-down'"
|
|
class="h-4 text-ink-gray-5"
|
|
/>
|
|
</template>
|
|
</Button>
|
|
</template>
|
|
<template #body>
|
|
<div
|
|
class="my-2 p-1.5 min-w-40 space-y-1.5 divide-y divide-outline-gray-1 rounded-lg bg-surface-modal shadow-2xl ring-1 ring-black ring-opacity-5 focus:outline-none"
|
|
>
|
|
<div>
|
|
<PrimaryDropdownItem
|
|
v-for="option in options"
|
|
:key="option.name || option.value"
|
|
:option="option"
|
|
/>
|
|
<div v-if="!options?.length">
|
|
<div class="p-1.5 pl-3 pr-4 text-base text-ink-gray-4">
|
|
{{ __('No {0} Available', [label]) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pt-1.5">
|
|
<Button
|
|
variant="ghost"
|
|
class="w-full !justify-start"
|
|
:label="__('Create New')"
|
|
iconLeft="plus"
|
|
@click="create && create()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Popover>
|
|
</template>
|
|
|
|
<script setup>
|
|
import PrimaryDropdownItem from '@/components/PrimaryDropdownItem.vue'
|
|
import { Popover } from 'frappe-ui'
|
|
|
|
const props = defineProps({
|
|
value: { type: [String, Number], default: '' },
|
|
placeholder: { type: String, default: '' },
|
|
options: { type: Array, default: [] },
|
|
create: { type: Function },
|
|
label: { type: String, default: '' },
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.dropdown-button {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
</style>
|