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

Update modal to have generic slots

Browse Source
This commit is contained in:
Dmitri
2022-09-08 10:22:50 -07:00
parent 8d3390c440
commit bf4880876e
3 changed files with 48 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/components/modal/examples/ModalExample.vue
View File

@@ -6,7 +6,18 @@
Show Modal Show Modal
</button> </button>
</template> </template>
<template v-slot:title>Terms of Service</template> <template #header="props">
<div class="flex justify-between">
<div class="flex items-center text-lg">
Terms of Service
</div>
<div>
<button @click="props.hide()" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</template>
<template v-slot:body> <template v-slot:body>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400"> <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply. With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
@@ -16,12 +27,14 @@
</p> </p>
</template> </template>
<template #footer="props"> <template #footer="props">
<button @click="props.hide()" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <div class="flex justify-between">
I accept <button @click="props.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
</button> Decline
<button @click="props.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"> </button>
Decline <button @click="props.hide()" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
</button> I accept
</button>
</div>
</template> </template>
</Modal> </Modal>
</div> </div>

29
docs/components/modal/modal.md
View File

@@ -18,7 +18,18 @@ import { Modal } from 'flowbite-vue'
Show Modal Show Modal
</button> </button>
</template> </template>
<template v-slot:title>Terms of Service</template> <template #header="props">
<div class="flex justify-between">
<div class="flex items-center text-lg">
Terms of Service
</div>
<div>
<button @click="props.hide()" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</template>
<template v-slot:body> <template v-slot:body>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400"> <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply. With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
@@ -28,12 +39,14 @@ import { Modal } from 'flowbite-vue'
</p> </p>
</template> </template>
<template #footer="props"> <template #footer="props">
<button @click="props.hide()" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <div class="flex justify-between">
I accept <button @click="props.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
</button> Decline
<button @click="props.hide()" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600"> </button>
Decline <button @click="props.hide()" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
</button> I accept
</button>
</div>
</template> </template>
</Modal> </Modal>
</template> </template>
@@ -41,7 +54,7 @@ import { Modal } from 'flowbite-vue'
### Slot Properties ### Slot Properties
Modal slots recieve the following functions to interact with the modal: Modal slots receive the following functions to interact with the modal:
1. `show` = show the modal 1. `show` = show the modal
2. `hide` = hide the modal 2. `hide` = hide the modal
3. `toggle` = toggles the modal from current state (e.g. if shown, then hide) 3. `toggle` = toggles the modal from current state (e.g. if shown, then hide)

18
src/components/Modal/Modal.vue
View File

@@ -2,26 +2,22 @@
<div> <div>
<slot name="trigger" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot> <slot name="trigger" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
<div v-if="!isHidden" class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"></div> <div v-if="!isHidden" class="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40"></div>
<div v-if="!isHidden" tabindex="-1" :aria-hidden="isHidden ? 'true' : 'false'" class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex"> <div v-if="!isHidden" tabindex="-1" :aria-hidden="isHidden ? 'true' : 'false'"
class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto"> <div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<!-- Modal content --> <!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700"> <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header --> <!-- Modal header -->
<div class="flex justify-between items-start p-4 rounded-t dark:border-gray-600" <div class="p-4 rounded-t"
:class="$slots.title ? 'border-b' : ''"> :class="$slots.header ? 'border-b' : ''">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> <slot name="header" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
<slot name="title"></slot>
</h3>
<button @click="hideModal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div> </div>
<!-- Modal body --> <!-- Modal body -->
<div class="p-6 space-y-6" :class="$slots.title ? '' : 'pt-0'"> <div class="p-6" :class="$slots.header ? '' : 'pt-0'">
<slot name="body" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot> <slot name="body" :show="showModal" :hide="hideModal" :toggle="toggleModal"></slot>
</div> </div>
<!-- Modal footer --> <!-- Modal footer -->
<div v-if="$slots.footer" class="flex items-center p-6 space-x-2 rounded-b border-gray-200 dark:border-gray-600"> <div v-if="$slots.footer" class="p-6 rounded-b border-gray-200">
<slot name="footer" :show="showModal" :hide="hideModal" :toggle="toggleModal"/> <slot name="footer" :show="showModal" :hide="hideModal" :toggle="toggleModal"/>
</div> </div>
</div> </div>