diff options
author | vnugent <public@vaughnnugent.com> | 2024-01-30 15:23:06 -0500 |
---|---|---|
committer | vnugent <public@vaughnnugent.com> | 2024-01-30 15:23:06 -0500 |
commit | 5abc489b9954111d66d1385aa62a3ea962fa0a55 (patch) | |
tree | b1715e5c5e6316f33e3e33fb55397d93200ab518 /front-end/src/bootstrap/components/ConfirmPrompt.vue | |
parent | e4dc63ded324c6e9678603296953bb1f7dea7569 (diff) |
merge upstream. Add dynamic client-side support for optional oauth2 and social login methods
Diffstat (limited to 'front-end/src/bootstrap/components/ConfirmPrompt.vue')
-rw-r--r-- | front-end/src/bootstrap/components/ConfirmPrompt.vue | 76 |
1 files changed, 37 insertions, 39 deletions
diff --git a/front-end/src/bootstrap/components/ConfirmPrompt.vue b/front-end/src/bootstrap/components/ConfirmPrompt.vue index c67bcfc..3994672 100644 --- a/front-end/src/bootstrap/components/ConfirmPrompt.vue +++ b/front-end/src/bootstrap/components/ConfirmPrompt.vue @@ -1,3 +1,37 @@ +<script setup lang="ts"> +import { defaultTo, noop } from 'lodash-es' +import { computed, ref } from 'vue' +import { Dialog, DialogPanel, DialogTitle, DialogDescription } from '@headlessui/vue' +import { onClickOutside } from '@vueuse/core' +import { useConfirm, useEnvSize } from '@vnuge/vnlib.browser' + +export interface ConfirmMessage { + title: string + text: string + subtext?: string +} + +const { headerHeight } = useEnvSize() +//Use component side of confirm +const { isRevealed, confirm, cancel, onReveal } = useConfirm() + +const dialog = ref(null) +const message = ref<ConfirmMessage>() + +//Cancel prompt when user clicks outside of dialog, only when its open +onClickOutside(dialog, () => isRevealed.value ? cancel() : noop()) + +//Set message on reveal +onReveal(m => message.value = defaultTo(m, {})); + +const style = computed(() => { + return { + 'height': `calc(100vh - ${headerHeight.value}px)`, + 'top': `${headerHeight.value}px` + } +}) + +</script> <template> <div id="confirm-prompt"> @@ -5,15 +39,15 @@ <div class="modal-content-container"> <DialogPanel> <DialogTitle class="modal-title"> - {{ message.title ?? 'Confirm' }} + {{ message?.title ?? 'Confirm' }} </DialogTitle> <DialogDescription class="modal-description"> - {{ message.text }} + {{ message?.text }} </DialogDescription> <p class="modal-text-secondary"> - {{ message.subtext }} + {{ message?.subtext }} </p> <div class="modal-button-container"> @@ -29,39 +63,3 @@ </Dialog> </div> </template> - -<script setup lang="ts"> -import { defaultTo } from 'lodash-es' -import { computed, ref } from 'vue' - -import { - Dialog, - DialogPanel, - DialogTitle, - DialogDescription, -} from '@headlessui/vue' - -import { onClickOutside } from '@vueuse/core' -import { useConfirm, useEnvSize } from '@vnuge/vnlib.browser' - -const { headerHeight } = useEnvSize() -//Use component side of confirm -const { isRevealed, confirm, cancel, onReveal } = useConfirm() - -const dialog = ref(null) -const message = ref({}) - -//Cancel prompt when user clicks outside of dialog, only when its open -onClickOutside(dialog, () => isRevealed.value ? cancel() : null) - -//Set message on reveal -onReveal(m => message.value = defaultTo(m, {})); - -const style = computed(() => { - return { - 'height': `calc(100vh - ${headerHeight.value}px)`, - 'top': `${headerHeight.value}px` - } -}) - -</script>
\ No newline at end of file |