@inkline/inkline/src/components/IDropdown/template.html

Inkline is the Vue.js UI/UX Library built for creating your next design system

<div
    class="dropdown-wrapper"
    ref="wrapper"
    aria-haspopup="true"
    v-click-outside="onClickOutside"
    @keyup.esc="onEscape"
>
    <div class="dropdown-trigger" ref="trigger">
        <slot />
    </div>

    <transition
        name="zoom-in-top-transition"
        @after-leave="destroyPopper"
    >
        <div
            class="dropdown"
            :class="classes"
            role="menu"
            ref="popup"
            :aria-hidden="visible ? 'false' : 'true'"
            v-show="visible"
        >
            <span data-popper-arrow v-if="arrow" />
            <div class="dropdown-header" v-if="$slots.header">
                <slot name="header" />
            </div>
            <div class="dropdown-body" ref="body" v-if="$slots.body">
                <slot name="body" />
            </div>
            <div class="dropdown-footer" v-if="$slots.footer">
                <slot name="footer" />
            </div>
        </div>
    </transition>
</div>