fix: apply ESLint rule vue/component-tags-order
This commit is contained in:
@@ -1,37 +1,3 @@
|
||||
<template>
|
||||
<div class="relative">
|
||||
<button class="z-10 focus:outline-none select-none" @click="toggleMenu">
|
||||
<slot name="button" />
|
||||
</button>
|
||||
|
||||
<!-- to close when clicked on space around it-->
|
||||
<button
|
||||
v-if="isOpen"
|
||||
tabindex="-1"
|
||||
class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
|
||||
@click="toggleMenu"
|
||||
/>
|
||||
|
||||
<!--dropdown menu-->
|
||||
<transition
|
||||
enter-active-class="transition-all duration-200 ease-out"
|
||||
leave-active-class="transition-all duration-750 ease-in"
|
||||
enter-class="opacity-0 scale-75"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
leave-class="opacity-100 scale-100"
|
||||
leave-to-class="opacity-0 scale-75"
|
||||
>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
|
||||
:class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
|
||||
>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
@@ -74,6 +40,40 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="relative">
|
||||
<button class="z-10 focus:outline-none select-none" @click="toggleMenu">
|
||||
<slot name="button" />
|
||||
</button>
|
||||
|
||||
<!-- to close when clicked on space around it-->
|
||||
<button
|
||||
v-if="isOpen"
|
||||
tabindex="-1"
|
||||
class="fixed inset-0 h-full w-full cursor-default focus:outline-none"
|
||||
@click="toggleMenu"
|
||||
/>
|
||||
|
||||
<!--dropdown menu-->
|
||||
<transition
|
||||
enter-active-class="transition-all duration-200 ease-out"
|
||||
leave-active-class="transition-all duration-750 ease-in"
|
||||
enter-class="opacity-0 scale-75"
|
||||
enter-to-class="opacity-100 scale-100"
|
||||
leave-class="opacity-100 scale-100"
|
||||
leave-to-class="opacity-0 scale-75"
|
||||
>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="menu-content absolute shadow-xl rounded-md border-solid border border-slate-100 mt-1 py-1 px-2 bg-white z-10"
|
||||
:class="menuPlacement === 'right' ? 'right-0' : 'left-0'"
|
||||
>
|
||||
<slot name="content" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped lang="scss">
|
||||
@import '~widget/assets/scss/variables.scss';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user