mirror of https://github.com/Budibase/budibase.git
Andrew Kingston
6 years ago
8 changed files with 15 additions and 247 deletions
@ -1,217 +0,0 @@ |
|||||
<script> |
|
||||
/** |
|
||||
* Confirmation is handled as a callback rather than an event to allow |
|
||||
* handling the result - meaning a parent can prevent the modal closing. |
|
||||
* |
|
||||
* A show/hide API is exposed as part of the modal and also via context for |
|
||||
* children inside the modal. |
|
||||
* "show" and "hide" events are emitted as visibility changes. |
|
||||
* |
|
||||
* Modals are rendered at the top of the DOM tree. |
|
||||
*/ |
|
||||
import { createEventDispatcher, setContext } from "svelte" |
|
||||
import { fade, fly } from "svelte/transition" |
|
||||
import Portal from "svelte-portal" |
|
||||
import { Button } from "@budibase/bbui" |
|
||||
import { ContextKey } from "./context" |
|
||||
const dispatch = createEventDispatcher() |
|
||||
|
|
||||
export let wide = false |
|
||||
export let padded = true |
|
||||
export let title = undefined |
|
||||
export let cancelText = "Cancel" |
|
||||
export let confirmText = "Confirm" |
|
||||
export let showCancelButton = true |
|
||||
export let showConfirmButton = true |
|
||||
export let onConfirm = () => {} |
|
||||
export let visible = false |
|
||||
export let loading = false |
|
||||
|
|
||||
let confirmLoading = false |
|
||||
$: disabled = loading || confirmLoading || $$restProps.disabled |
|
||||
|
|
||||
function show() { |
|
||||
if (visible) { |
|
||||
return |
|
||||
} |
|
||||
visible = true |
|
||||
dispatch("show") |
|
||||
} |
|
||||
|
|
||||
function hide() { |
|
||||
if (!visible) { |
|
||||
return |
|
||||
} |
|
||||
visible = false |
|
||||
dispatch("hide") |
|
||||
} |
|
||||
|
|
||||
async function confirm() { |
|
||||
loading = true |
|
||||
if (!onConfirm || (await onConfirm()) !== false) { |
|
||||
hide() |
|
||||
} |
|
||||
loading = false |
|
||||
} |
|
||||
|
|
||||
setContext(ContextKey, { show, hide }) |
|
||||
</script> |
|
||||
|
|
||||
{#if visible} |
|
||||
<Portal target="#modal-container"> |
|
||||
<div |
|
||||
class="overlay" |
|
||||
on:click|self={hide} |
|
||||
transition:fade={{ duration: 200 }}> |
|
||||
<div |
|
||||
class="scroll-wrapper" |
|
||||
on:click|self={hide} |
|
||||
transition:fly={{ y: 50 }}> |
|
||||
<div class="content-wrapper" on:click|self={hide}> |
|
||||
<div class="modal" class:wide class:padded> |
|
||||
{#if title} |
|
||||
<header> |
|
||||
<h5>{title}</h5> |
|
||||
<div class="header-content"> |
|
||||
<slot name="header" /> |
|
||||
</div> |
|
||||
</header> |
|
||||
{/if} |
|
||||
<slot /> |
|
||||
{#if showCancelButton || showConfirmButton} |
|
||||
<footer> |
|
||||
<div class="footer-content"> |
|
||||
<slot name="footer" /> |
|
||||
</div> |
|
||||
<div class="buttons"> |
|
||||
{#if showCancelButton} |
|
||||
<Button secondary on:click={hide}>{cancelText}</Button> |
|
||||
{/if} |
|
||||
{#if showConfirmButton} |
|
||||
<Button |
|
||||
primary |
|
||||
{...$$restProps} |
|
||||
{disabled} |
|
||||
on:click={confirm}> |
|
||||
{confirmText} |
|
||||
</Button> |
|
||||
{/if} |
|
||||
</div> |
|
||||
</footer> |
|
||||
{/if} |
|
||||
<i class="ri-close-line" on:click={hide} /> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</Portal> |
|
||||
{/if} |
|
||||
|
|
||||
<style> |
|
||||
.overlay { |
|
||||
position: fixed; |
|
||||
left: 0; |
|
||||
right: 0; |
|
||||
top: 0; |
|
||||
bottom: 0; |
|
||||
overflow-x: hidden; |
|
||||
overflow-y: auto; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: center; |
|
||||
align-items: center; |
|
||||
background-color: rgba(0, 0, 0, 0.25); |
|
||||
} |
|
||||
|
|
||||
.scroll-wrapper { |
|
||||
flex: 1 1 auto; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: center; |
|
||||
align-items: flex-start; |
|
||||
max-height: 100%; |
|
||||
} |
|
||||
|
|
||||
.content-wrapper { |
|
||||
flex: 1 1 auto; |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: center; |
|
||||
align-items: flex-start; |
|
||||
width: 0; |
|
||||
} |
|
||||
|
|
||||
.modal { |
|
||||
background-color: white; |
|
||||
display: flex; |
|
||||
flex-direction: column; |
|
||||
justify-content: flex-start; |
|
||||
align-items: stretch; |
|
||||
box-shadow: 0 0 2.4rem 1.5rem rgba(0, 0, 0, 0.15); |
|
||||
position: relative; |
|
||||
flex: 0 0 400px; |
|
||||
margin: 2rem 0; |
|
||||
border-radius: var(--border-radius-m); |
|
||||
gap: var(--spacing-xl); |
|
||||
} |
|
||||
.modal.wide { |
|
||||
flex: 0 0 600px; |
|
||||
} |
|
||||
.modal.padded { |
|
||||
padding: var(--spacing-xl); |
|
||||
} |
|
||||
|
|
||||
header { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
margin-right: 40px; |
|
||||
} |
|
||||
header h5 { |
|
||||
margin: 0; |
|
||||
font-weight: 500; |
|
||||
} |
|
||||
|
|
||||
.header-content { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: flex-end; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
i { |
|
||||
position: absolute; |
|
||||
top: var(--spacing-xl); |
|
||||
right: var(--spacing-xl); |
|
||||
color: var(--ink); |
|
||||
font-size: var(--font-size-xl); |
|
||||
} |
|
||||
i:hover { |
|
||||
color: var(--grey-6); |
|
||||
cursor: pointer; |
|
||||
} |
|
||||
|
|
||||
footer { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: space-between; |
|
||||
align-items: center; |
|
||||
gap: var(--spacing-m); |
|
||||
} |
|
||||
|
|
||||
.footer-content { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: flex-start; |
|
||||
align-items: center; |
|
||||
} |
|
||||
|
|
||||
.buttons { |
|
||||
display: flex; |
|
||||
flex-direction: row; |
|
||||
justify-content: flex-end; |
|
||||
align-items: center; |
|
||||
gap: var(--spacing-m); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,10 +0,0 @@ |
|||||
<div id="modal-container" /> |
|
||||
|
|
||||
<style> |
|
||||
#modal-container { |
|
||||
position: fixed; |
|
||||
top: 0; |
|
||||
left: 0; |
|
||||
z-index: 999; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1 +0,0 @@ |
|||||
export const ContextKey = "budibase-modal" |
|
||||
@ -1,3 +0,0 @@ |
|||||
export { default as Modal } from "./Modal.svelte" |
|
||||
export { default as ModalContainer } from "./ModalContainer.svelte" |
|
||||
export { ContextKey } from "./context" |
|
||||
Loading…
Reference in new issue