jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add parent div on slot to allow custom trigger on Dropdown and transition prop + element to Dropdown content

Browse Source
This commit is contained in:
CaptainZiboo
2022-07-22 18:49:59 +02:00
parent dc22502b3b
commit 3e76b9d06c
2 changed files with 5120 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5142
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

28
src/components/Dropdown/Dropdown.vue
View File

@@ -1,16 +1,20 @@
<template> <template>
<div class="inline-flex relative" ref="wrapper"> <div class="inline-flex relative" ref="wrapper">
<slot name="trigger" :show="onShow" :hide="onHide" :toggle="onToggle"> <div class="inline-flex items-center">
<Button @click="onToggle"> <slot name="trigger" :show="onShow" :hide="onHide" :toggle="onToggle">
{{ text }} <Button @click="onToggle">
<template #suffix> {{ text }}
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg> <template #suffix>
</template> <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</Button> </template>
</slot> </Button>
<div ref="content" :style="contentStyles" :class="[{ hidden: !visible }, contentClasses]"> </slot>
<slot />
</div> </div>
<Transition :name="transition">
<div ref="content" v-if="visible" :style="contentStyles" :class="[{ hidden: !visible }, contentClasses]">
<slot />
</div>
</Transition>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@@ -36,6 +40,10 @@ const props = defineProps({
type: String , type: String ,
default: '', default: '',
}, },
transition: {
type: String ,
default: '',
},
}) })
const content = ref<HTMLDivElement>() const content = ref<HTMLDivElement>()