CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-14 00:14:39 +12:00
Code Issues Projects Releases Wiki Activity

add underlay component and fix modal

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-08 14:47:57 +02:00
parent a169d81060
commit 635e2cc64c
3 changed files with 34 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/bbui/package.json
View file

@ -43,6 +43,10 @@
"dist"
],
"dependencies": {
"@spectrum-css/button": "^3.0.1",
"@spectrum-css/dialog": "^3.0.1",
"@spectrum-css/modal": "^3.0.1",
"@spectrum-css/underlay": "^2.0.9",
"markdown-it": "^12.0.4",
"quill": "^1.3.7",
"sirv-cli": "^0.4.6",

77
packages/bbui/src/Modal/Modal.svelte
View file

@ -1,4 +1,7 @@
<script>
import "@spectrum-css/dialog/dist/index-vars.css"
import "@spectrum-css/modal/dist/index-vars.css"
import "@spectrum-css/underlay/dist/index-vars.css"
import { createEventDispatcher, setContext } from "svelte"
import { fade, fly } from "svelte/transition"
import Portal from "svelte-portal"
@ -6,8 +9,9 @@
const dispatch = createEventDispatcher()
export let padding = true
export let width = undefined
export let width = ''
export let border = true
export let dismissable = true
let visible = false
$: dispatch(visible ? "show" : "hide")
@ -39,73 +43,12 @@
{#if visible}
<Portal target="modal-container">
<div class="overlay spectrum-Modal" transition:fade={{ duration: 200 }} on:click|self={hide}>
<section
class="spectrum-Dialog spectrum-Dialog--large spectrum-Dialog--dismissable" role="dialog" tabindex="-1" aria-modal="true">
<div
class="scroll-wrapper"
on:click|self={hide}
transition:fly={{ y: 30, duration: 200 }}>
<div class="content-wrapper" on:click|self={hide}>
<div
class="modal {width ? width : ''}"
class:padding
class:border>
<slot />
</div>
</div>
<div class="spectrum-Underlay is-open" transition:fade={{ duration: 200 }} on:click|self={hide}>
<div class="spectrum-Modal-wrapper">
<div class="spectrum-Modal is-open" transition:fly={{ y: 30, duration: 200 }}>
<slot />
</div>
</section>
</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);
z-index: 999;
}
.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: var(--spectrum-global-color-gray-900);
display: grid;
align-items: stretch;
position: relative;
flex: 0 0 400px;
margin: 2rem 0;
border-radius: var(--border-radius-m);
gap: var(--spacing-xl);
}
.modal.padding {
padding: var(--spacing-xl);
}
</style>

20
packages/bbui/yarn.lock
View file

@ -410,6 +410,26 @@
lodash "^4.17.4"
read-pkg-up "^7.0.0"
"@spectrum-css/button@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643"
integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA==
"@spectrum-css/dialog@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/dialog/-/dialog-3.0.1.tgz#33aae036282159f6aa998848b8c0828640a9620a"
integrity sha512-hUFbRR6RGT63MNuP7wP+k9KU+uRuICsduMihskh700e+jiQ+Gsv53fBFDlB843FoZYlIXzFQXgtjMUC5a4Qibw==
"@spectrum-css/modal@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/modal/-/modal-3.0.1.tgz#613a6b83d0330a4d38db41a98090800751c56d8d"
integrity sha512-F7D99F3cjDGT9DM9sogx/p49jrNYT7a1J6TUoqV73wUf+0gP+dTsskBOo9jB8VbUE+POQPjiDLB+SWLp6iBB+w==
"@spectrum-css/underlay@^2.0.9":
version "2.0.9"
resolved "https://registry.yarnpkg.com/@spectrum-css/underlay/-/underlay-2.0.9.tgz#fc10f971d1325cc844b727e6260f7217844060e8"
integrity sha512-X86xd0PG4QobmUyXA90BFGnyygaI8kW64dA4ysf4z0cOvUWjNbAAl3a/DB/WRyrnp63Zqv83T/cgNbetagTbWg==
"@sveltejs/vite-plugin-svelte@^1.0.0-next.5":
version "1.0.0-next.5"
resolved "https://registry.yarnpkg.com/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-1.0.0-next.5.tgz#8cf608f7a3c33dfa5b648397aae1ba90e6a4883f"