diff --git a/packages/builder/src/components/common/ErrorsBox.svelte b/packages/builder/src/components/common/ErrorsBox.svelte
index 0e565a4ad8..9e29784c66 100644
--- a/packages/builder/src/components/common/ErrorsBox.svelte
+++ b/packages/builder/src/components/common/ErrorsBox.svelte
@@ -5,9 +5,25 @@
{#if hasErrors}
-
+
{#each errors as error}
-
{error.dataPath} {error.message}
+
{error.dataPath} {error.message}
{/each}
{/if}
+
+
diff --git a/packages/builder/src/components/common/LinkedRecordSelector.svelte b/packages/builder/src/components/common/LinkedRecordSelector.svelte
index c263332ca5..f4df3a7d1f 100644
--- a/packages/builder/src/components/common/LinkedRecordSelector.svelte
+++ b/packages/builder/src/components/common/LinkedRecordSelector.svelte
@@ -20,7 +20,6 @@
const FETCH_RECORDS_URL = `/api/${linkedModelId}/records`
const response = await api.get(FETCH_RECORDS_URL)
const result = await response.json()
- console.log(result)
return result
}
diff --git a/packages/builder/src/components/common/Modal/Modal.svelte b/packages/builder/src/components/common/Modal/Modal.svelte
index 0077567100..e3bc0158e5 100644
--- a/packages/builder/src/components/common/Modal/Modal.svelte
+++ b/packages/builder/src/components/common/Modal/Modal.svelte
@@ -1,17 +1,26 @@
{#if visible}
-
+
+ transition:fly={{ y: 50 }}>
-
+
{/if}
diff --git a/packages/builder/src/components/common/Modal/ModalContainer.svelte b/packages/builder/src/components/common/Modal/ModalContainer.svelte
index 891df8630b..ed6d9e15ad 100644
--- a/packages/builder/src/components/common/Modal/ModalContainer.svelte
+++ b/packages/builder/src/components/common/Modal/ModalContainer.svelte
@@ -5,5 +5,6 @@
position: fixed;
top: 0;
left: 0;
+ z-index: 999;
}
diff --git a/packages/builder/src/components/common/Modal/ModalFooter.svelte b/packages/builder/src/components/common/Modal/ModalFooter.svelte
new file mode 100644
index 0000000000..fb85a1cbb2
--- /dev/null
+++ b/packages/builder/src/components/common/Modal/ModalFooter.svelte
@@ -0,0 +1,63 @@
+
+
+
+
+
diff --git a/packages/builder/src/components/common/Modal/ModalTitle.svelte b/packages/builder/src/components/common/Modal/ModalTitle.svelte
new file mode 100644
index 0000000000..0f6a4f5207
--- /dev/null
+++ b/packages/builder/src/components/common/Modal/ModalTitle.svelte
@@ -0,0 +1,10 @@
+
+
+
+
+
diff --git a/packages/builder/src/components/common/Modal/context.js b/packages/builder/src/components/common/Modal/context.js
new file mode 100644
index 0000000000..81ea1cdcf5
--- /dev/null
+++ b/packages/builder/src/components/common/Modal/context.js
@@ -0,0 +1 @@
+export const ContextKey = "budibase-modal"
diff --git a/packages/builder/src/components/common/Modal/index.js b/packages/builder/src/components/common/Modal/index.js
index bd53a1373b..8420f8416a 100644
--- a/packages/builder/src/components/common/Modal/index.js
+++ b/packages/builder/src/components/common/Modal/index.js
@@ -1,2 +1,5 @@
export { default as Modal } from "./Modal.svelte"
export { default as ModalContainer } from "./ModalContainer.svelte"
+export { default as ModalTitle } from "./ModalTitle.svelte"
+export { default as ModalFooter } from "./ModalFooter.svelte"
+export { ContextKey } from "./context"
diff --git a/packages/builder/src/components/common/Modal/portal.js b/packages/builder/src/components/common/Modal/portal.js
deleted file mode 100644
index a5070cad7d..0000000000
--- a/packages/builder/src/components/common/Modal/portal.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export function portal(node, targetNodeOrSelector) {
- const targetNode =
- typeof targetNodeOrSelector == "string"
- ? document.querySelector(targetNodeOrSelector)
- : targetNodeOrSelector
- const portalChildren = [...node.children]
- targetNode.append(...portalChildren)
-
- return {
- destroy() {
- for (const portalChild of portalChildren) portalChild.remove()
- },
- }
-}
diff --git a/packages/builder/src/components/common/MultiSelect.svelte b/packages/builder/src/components/common/MultiSelect.svelte
index f000df7f41..22cc3f16be 100644
--- a/packages/builder/src/components/common/MultiSelect.svelte
+++ b/packages/builder/src/components/common/MultiSelect.svelte
@@ -6,83 +6,68 @@
"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
export let value = []
- export let readonly = false
export let label
let placeholder = "Type to search"
- let input
- let inputValue
let options = []
- let activeOption
let optionsVisible = false
let selected = {}
let first = true
let slot
onMount(() => {
- slot.querySelectorAll("option").forEach(o => {
- o.selected && !value.includes(o.value) && (value = [...value, o.value])
- options = [...options, { value: o.value, name: o.textContent }]
- })
- value &&
- (selected = options.reduce(
- (obj, op) =>
- value.includes(op.value) ? { ...obj, [op.value]: op } : obj,
- {}
- ))
+ const domOptions = Array.from(slot.querySelectorAll("option"))
+ options = domOptions.map(option => ({
+ value: option.value,
+ name: option.textContent,
+ }))
+ if (value) {
+ options.forEach(option => {
+ if (value.includes(option.value)) {
+ selected[option.value] = option
+ }
+ })
+ }
first = false
})
- $: if (!first) value = Object.values(selected).map(o => o.value)
- $: filtered = options.filter(o =>
- inputValue ? o.name.toLowerCase().includes(inputValue.toLowerCase()) : o
- )
- $: if (
- (activeOption && !filtered.includes(activeOption)) ||
- (!activeOption && inputValue)
- )
- activeOption = filtered[0]
+ // Keep value up to date with selected options
+ $: {
+ if (!first) {
+ value = Object.values(selected).map(option => option.value)
+ }
+ }
function add(token) {
- if (!readonly) selected[token.value] = token
+ selected[token.value] = token
}
function remove(value) {
- if (!readonly) {
- const { [value]: val, ...rest } = selected
- selected = rest
- }
+ const { [value]: val, ...rest } = selected
+ selected = rest
}
function removeAll() {
selected = []
- inputValue = ""
}
function showOptions(show) {
optionsVisible = show
- if (!show) {
- activeOption = undefined
- } else {
- input.focus()
- }
}
- function handleBlur() {
- showOptions(false)
- }
-
- function handleFocus() {
- showOptions(true)
+ function handleClick() {
+ showOptions(!optionsVisible)
}
function handleOptionMousedown(e) {
const value = e.target.dataset.value
+ if (value == null) {
+ return
+ }
if (selected[value]) {
remove(value)
} else {
add(options.filter(option => option.value === value)[0])
- input.focus()
}
}
@@ -91,76 +76,52 @@
{#if label}
{/if}
-
+
-
+
{#each Object.values(selected) as option}
-
+
{option.name}
- {#if !readonly}
-
remove(option.value)}>
-
-
- {/if}
+
remove(option.value)}>
+
+
{/each}
+ {#if !value || !value.length} {/if}
-
- {#if !readonly}
-
-
- {/if}
-
{#if optionsVisible}
+
showOptions(false)} />
- {#each filtered as option}
- -
+ {#each options as option}
+
-
{option.name}
{/each}
- {#if !filtered.length && inputValue.length}
- - No results
+ {#if !options.length}
+ - No results
{/if}
{/if}
@@ -175,7 +136,7 @@
justify-content: flex-start;
align-items: stretch;
}
- .multiselect:not(.readonly):hover {
+ .multiselect:hover {
border-bottom-color: hsl(0, 0%, 50%);
}
@@ -185,6 +146,7 @@
justify-content: flex-start;
align-items: center;
flex: 0 1 auto;
+ z-index: 2;
}
.tokens {
@@ -194,6 +156,14 @@
position: relative;
width: 0;
flex: 1 1 auto;
+ background-color: var(--grey-2);
+ border-radius: var(--border-radius-m);
+ padding: 0 var(--spacing-m) calc(var(--spacing-m) - var(--spacing-xs))
+ calc(var(--spacing-m) / 2);
+ border: var(--border-transparent);
+ }
+ .tokens:hover {
+ cursor: pointer;
}
.tokens::after {
background: none repeat scroll 0 0 transparent;
@@ -206,74 +176,72 @@
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
- .tokens.showOptions::after {
+ .tokens.optionsVisible {
+ border: var(--border-blue);
+ }
+ .tokens.empty {
+ padding: var(--spacing-m);
+ font-size: var(--font-size-xs);
+ user-select: none;
+ }
+ .tokens::after {
width: 100%;
left: 0;
}
.token {
font-size: var(--font-size-xs);
align-items: center;
- background-color: var(--grey-3);
+ background-color: white;
border-radius: var(--border-radius-l);
display: flex;
- margin: 0.25rem 0.5rem 0.25rem 0;
+ margin: calc(var(--spacing-m) - var(--spacing-xs)) 0 0
+ calc(var(--spacing-m) / 2);
max-height: 1.3rem;
- padding: var(--spacing-s) var(--spacing-m);
+ padding: var(--spacing-xs) var(--spacing-s);
transition: background-color 0.3s;
white-space: nowrap;
}
- .token:hover {
- background-color: var(--grey-4);
+ .token span {
+ pointer-events: none;
+ user-select: none;
}
- .readonly .token {
- color: hsl(0, 0%, 40%);
- }
- .token-remove,
- .remove-all {
+ .token-remove {
align-items: center;
- background-color: var(--grey-5);
+ background-color: var(--grey-4);
border-radius: 50%;
color: var(--white);
display: flex;
justify-content: center;
- height: 1.25rem;
- margin-left: 0.25rem;
- min-width: 1.25rem;
+ height: 1rem;
+ width: 1rem;
+ margin: calc(-1 * var(--spacing-xs)) 0 calc(-1 * var(--spacing-xs))
+ var(--spacing-xs);
}
- .token-remove:hover,
- .remove-all:hover {
- background-color: var(--grey-6);
+ .token-remove:hover {
+ background-color: var(--grey-5);
cursor: pointer;
}
- .actions {
- align-items: center;
- display: flex;
- flex: 1;
- }
- .actions > * {
- flex: 0 0 auto;
- }
- .actions > input {
- border: none;
- font-size: var(--font-size-xs);
- line-height: 1.5rem;
- outline: none;
- background-color: transparent;
- flex: 1 1 auto;
- }
-
.icon-clear path {
fill: white;
}
+ .options-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ z-index: 1;
+ }
+
.options {
+ z-index: 2;
left: 0;
list-style: none;
margin-block-end: 0;
margin-block-start: 0;
- max-height: 70vh;
- overflow: auto;
+ overflow-y: auto;
padding-inline-start: 0;
position: absolute;
top: calc(100% + 1px);
@@ -283,8 +251,8 @@
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
margin-top: var(--spacing-xs);
padding: var(--spacing-s) 0;
- z-index: 1;
background-color: white;
+ max-height: 200px;
}
li {
background-color: white;
@@ -299,6 +267,10 @@
li:not(.selected):hover {
background-color: var(--grey-1);
}
+ li.no-results:hover {
+ background-color: white;
+ cursor: initial;
+ }
.hidden {
display: none;
diff --git a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
index 425eb60fb2..b77d8fd8f2 100644
--- a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
+++ b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte
@@ -1,7 +1,7 @@
-
+
diff --git a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte b/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
deleted file mode 100644
index 0958737b59..0000000000
--- a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-
-
-
-
-
- {#if view.calculation}
-
- {/if}
-
-
diff --git a/packages/builder/src/components/database/DataTable/popovers/Export.svelte b/packages/builder/src/components/database/DataTable/popovers/Export.svelte
deleted file mode 100644
index 00514edb9c..0000000000
--- a/packages/builder/src/components/database/DataTable/popovers/Export.svelte
+++ /dev/null
@@ -1,71 +0,0 @@
-
-
-
-
-
- Export
-
-
-
- Export Format
-
-
-
-
-
-
-
-
diff --git a/packages/builder/src/components/settings/Link.svelte b/packages/builder/src/components/settings/Link.svelte
index 1d702d032b..1550815c33 100644
--- a/packages/builder/src/components/settings/Link.svelte
+++ b/packages/builder/src/components/settings/Link.svelte
@@ -1,31 +1,17 @@
-
+
+
+
+
diff --git a/packages/builder/src/components/settings/tabs/DangerZone.svelte b/packages/builder/src/components/settings/tabs/DangerZone.svelte
index e8b6706d5a..6807f4289e 100644
--- a/packages/builder/src/components/settings/tabs/DangerZone.svelte
+++ b/packages/builder/src/components/settings/tabs/DangerZone.svelte
@@ -2,6 +2,7 @@
import { params, goto } from "@sveltech/routify"
import { Input, TextArea, Button, Body } from "@budibase/bbui"
import { del } from "builderStore/api"
+ import { ModalFooter } from "components/common/Modal"
let value = ""
let loading = false
@@ -9,16 +10,9 @@
async function deleteApp() {
loading = true
const id = $params.application
- const res = await del(`/api/${id}`)
- const json = await res.json()
-
+ await del(`/api/${id}`)
loading = false
- if (res.ok) {
- $goto("/")
- return json
- } else {
- throw new Error(json)
- }
+ $goto("/")
}
@@ -35,13 +29,12 @@
thin
disabled={loading}
placeholder="" />
-
+ showCancelButton={false}
+ confirmText="Delete Entire App"
+ onConfirm={deleteApp} />
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index 84ddd9f8ec..b38fdcaa14 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -11,12 +11,10 @@
import { Input, TextArea, Button } from "@budibase/bbui"
import { goto } from "@sveltech/routify"
import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
- import { getContext } from "svelte"
import { fade } from "svelte/transition"
import { post } from "builderStore/api"
import analytics from "analytics"
- const { open, close } = getContext("simple-modal")
//Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly
const createAppStore = writable({ currentStep: 0, values: {} })
@@ -169,7 +167,7 @@
}
const userResp = await api.post(`/api/users`, user)
const json = await userResp.json()
- $goto(`./${appJson._id}`)
+ $goto(`/${appJson._id}`)
} catch (error) {
console.error(error)
}
@@ -194,10 +192,6 @@
let onChange = () => {}
- function _onCancel() {
- close()
- }
-
async function _onOkay() {
await createNewApp()
}
@@ -249,9 +243,6 @@
{/if}
-
-
-
{#if submitting}
@@ -276,16 +267,6 @@
align-content: center;
background: #f5f5f5;
}
- .close-button {
- cursor: pointer;
- position: absolute;
- top: 20px;
- right: 20px;
- }
- .close-button :global(svg) {
- width: 24px;
- height: 24px;
- }
.heading {
display: flex;
flex-direction: row;
diff --git a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
index 7d646d22d5..ec2122d6bf 100644
--- a/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentDropdownMenu.svelte
@@ -1,5 +1,4 @@
+
+ (selectedEvent = null)} />
+
+
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index ad12dd54e8..a9744b8b8c 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/packages/builder/src/pages/[application]/_reset.svelte
@@ -1,13 +1,9 @@
-
-
+
+
+
+
-
-
-
-
-
- {#each $layout.children as { path, title }}
-
- {title}
-
- {/each}
-
-
-
+
+ {#each $layout.children as { path, title }}
window.open(`/${application}`)}>
-
+ class:active={$isActive(path)}
+ class="topnavitem"
+ on:click={topItemNavigate(path)}>
+ {title}
-
+ {/each}
+
+
+
+
window.open(`/${application}`)}>
+
+
-
- {#await promise}
-
-
- {:then}
-
- {:catch error}
-
Something went wrong: {error.message}
- {/await}
-
-
+
+ {#await promise}
+
+
+ {:then _}
+
+ {:catch error}
+
Something went wrong: {error.message}
+ {/await}
+