Bump BBUI version
This commit is contained in:
Andrew Kingston
parent
fff39f65e5
commit
1b1c0c4e8f
|
|
@ -63,7 +63,7 @@
|
|||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@budibase/bbui": "^1.40.1",
|
||||
"@budibase/bbui": "^1.41.0",
|
||||
"@budibase/client": "^0.1.25",
|
||||
"@budibase/colorpicker": "^1.0.1",
|
||||
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -3,13 +3,10 @@
|
|||
import { pipe } from "components/common/core"
|
||||
import { isRootComponent } from "./pagesParsing/searchComponents"
|
||||
import { splitName } from "./pagesParsing/splitRootComponentName.js"
|
||||
import { Input, Select, Button, Spacer } from "@budibase/bbui"
|
||||
import { Modal } from "components/common/Modal"
|
||||
import { Input, Select, Button, Spacer, ModalContent } from "@budibase/bbui"
|
||||
import { find, filter, some, map, includes } from "lodash/fp"
|
||||
import { assign } from "lodash"
|
||||
|
||||
export let visible
|
||||
|
||||
let dialog
|
||||
let layoutComponents
|
||||
let layoutComponent
|
||||
|
|
@ -60,11 +57,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
bind:visible
|
||||
title="New Screen"
|
||||
confirmText="Create Screen"
|
||||
onConfirm={save}>
|
||||
<ModalContent title="New Screen" confirmText="Create Screen" onConfirm={save}>
|
||||
<Input label="Name" bind:value={name} />
|
||||
<Input
|
||||
label="Url"
|
||||
|
|
@ -76,4 +69,4 @@
|
|||
<option value={_component}>{name}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
</Modal>
|
||||
</ModalContent>
|
||||
|
|
@ -709,13 +709,14 @@
|
|||
lodash "^4.17.13"
|
||||
to-fast-properties "^2.0.0"
|
||||
|
||||
"@budibase/bbui@^1.40.1":
|
||||
version "1.40.1"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.40.1.tgz#7ebfd52b4da822312d3395447a4f73caa41f8014"
|
||||
integrity sha512-0t5Makyn5jOURKZIQPvd+8G4m6ps4GyfLUkAz5rKJSnAQSAgLiuZ+RihcEReDEJK8tnfW7h2echJTffJduQRRQ==
|
||||
"@budibase/bbui@^1.41.0":
|
||||
version "1.41.0"
|
||||
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.41.0.tgz#cb239db3071a4a6c6f0ef48ddde55f5eab9808ce"
|
||||
integrity sha512-pT5u6HDdXcylWgSE1TBt3jETg92GwgAXpUsBVqX+OUE/2lNbmThb8egAckpemHDvm91FAL0nApQYpV7c/qLzvw==
|
||||
dependencies:
|
||||
sirv-cli "^0.4.6"
|
||||
svelte-flatpickr "^2.4.0"
|
||||
svelte-portal "^1.0.0"
|
||||
|
||||
"@budibase/colorpicker@^1.0.1":
|
||||
version "1.0.1"
|
||||
|
|
@ -5844,6 +5845,11 @@ svelte-portal@^0.1.0:
|
|||
version "0.1.0"
|
||||
resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-0.1.0.tgz#cc2821cc84b05ed5814e0218dcdfcbebc53c1742"
|
||||
|
||||
svelte-portal@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/svelte-portal/-/svelte-portal-1.0.0.tgz#36a47c5578b1a4d9b4dc60fa32a904640ec4cdd3"
|
||||
integrity sha512-nHf+DS/jZ6jjnZSleBMSaZua9JlG5rZv9lOGKgJuaZStfevtjIlUJrkLc3vbV8QdBvPPVmvcjTlazAzfKu0v3Q==
|
||||
|
||||
svelte@^3.24.1:
|
||||
version "3.25.1"
|
||||
resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.25.1.tgz#218def1243fea5a97af6eb60f5e232315bb57ac4"
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
|
||||
"dependencies": {
|
||||
"@beyonk/svelte-googlemaps": "^2.2.0",
|
||||
"@budibase/bbui": "^1.40.1",
|
||||
"@budibase/bbui": "^1.41.0",
|
||||
"@fortawesome/fontawesome-free": "^5.14.0",
|
||||
"britecharts": "^2.16.1",
|
||||
"d3-selection": "^1.4.2",
|
||||
|
|
|
|||
Loading…
Reference in a new issue