@inkline/inkline
Version:
Inkline is the Vue.js UI/UX Library built for creating your next design system
47 lines (46 loc) • 1.46 kB
HTML
<transition name="fade-in-transition">
<div
class="modal-wrapper"
role="dialog"
aria-modal="true"
:aria-hidden="visible ? 'false' : 'true'"
:class="classes"
v-show="visible"
:id="name"
:name="name"
:aria-labelledby="`${name}-header`"
>
<transition :name="transition">
<div
class="modal"
v-click-outside="onClickOutside"
v-show="visible"
>
<div
class="modal-header"
:id="`${name}-header`"
v-if="$slots.header"
>
<slot name="header" />
<button
class="close"
aria-hidden="true"
:aria-label="closeAriaLabel"
@click="hide"
v-if="showClose"
>
<slot name="close">
<i class="icon" />
</slot>
</button>
</div>
<div class="modal-body" v-if="$slots.default">
<slot />
</div>
<div class="modal-footer" v-if="$slots.footer">
<slot name="footer" />
</div>
</div>
</transition>
</div>
</transition>