MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' of github.com:Budibase/budibase into labday/mike-formulas

This commit is contained in:
mike12345567 2021-05-04 13:24:14 +01:00
parent d3ef4224a6 f406fb8ed3
commit e5f3b3956c
399 changed files with 4433 additions and 1722 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.prettierrc
View File

@ -3,6 +3,8 @@
"semi": false,
"singleQuote": false,
"trailingComma": "es5",
"arrowParens": "avoid",
"jsxBracketSameLine": false,
"plugins": ["prettier-plugin-svelte"],
"svelteSortOrder" : "scripts-markup-styles"
"svelteSortOrder" : "options-scripts-markup-styles"
}

2
package.json
View File

@ -14,7 +14,7 @@
"prettier-plugin-svelte": "^2.2.0",
"rimraf": "^3.0.2",
"rollup-plugin-replace": "^2.2.0",
"svelte": "^3.30.0"
"svelte": "^3.37.0"
},
"scripts": {
"bootstrap": "lerna link && lerna bootstrap",

4
packages/auth/src/db/index.js
View File

@ -1,9 +1,9 @@
let Pouch
module.exports.setDB = (pouch) => {
module.exports.setDB = pouch => {
Pouch = pouch
}
module.exports.getDB = (dbName) => {
module.exports.getDB = dbName => {
return new Pouch(dbName)
}

6
packages/auth/src/db/utils.js
View File

@ -48,7 +48,7 @@ exports.getGroupParams = (id = "", otherProps = {}) => {
* Generates a new global user ID.
* @returns {string} The new user ID which the user doc can be stored under.
*/
exports.generateGlobalUserID = (id) => {
exports.generateGlobalUserID = id => {
return `${DocumentTypes.USER}${SEPARATOR}${id || newid()}`
}
@ -70,7 +70,7 @@ exports.getGlobalUserParams = (globalId, otherProps = {}) => {
* Generates a template ID.
* @param ownerId The owner/user of the template, this could be global or a group level.
*/
exports.generateTemplateID = (ownerId) => {
exports.generateTemplateID = ownerId => {
return `${DocumentTypes.TEMPLATE}${SEPARATOR}${ownerId}${newid()}`
}
@ -132,7 +132,7 @@ const determineScopedConfig = async function (db, { type, user, group }) {
}
)
)
const configs = response.rows.map((row) => {
const configs = response.rows.map(row => {
const config = row.doc
// Config is specific to a user and a group

2
packages/auth/src/hashing.js
View File

@ -4,7 +4,7 @@ const { v4 } = require("uuid")
const SALT_ROUNDS = env.SALT_ROUNDS || 10
exports.hash = async (data) => {
exports.hash = async data => {
const salt = await bcrypt.genSalt(SALT_ROUNDS)
return bcrypt.hash(data, salt)
}

10
packages/auth/src/utils.js
View File

@ -22,7 +22,7 @@ function confirmAppId(possibleAppId) {
* @param {object} ctx The main request body to look through.
* @returns {string|undefined} If an appId was found it will be returned.
*/
exports.getAppId = (ctx) => {
exports.getAppId = ctx => {
const options = [ctx.headers["x-budibase-app-id"], ctx.params.appId]
if (ctx.subdomains) {
options.push(ctx.subdomains[1])
@ -41,7 +41,7 @@ exports.getAppId = (ctx) => {
}
let appPath =
ctx.request.headers.referrer ||
ctx.path.split("/").filter((subPath) => subPath.startsWith(APP_PREFIX))
ctx.path.split("/").filter(subPath => subPath.startsWith(APP_PREFIX))
if (!appId && appPath.length !== 0) {
appId = confirmAppId(appPath[0])
}
@ -101,11 +101,11 @@ exports.clearCookie = (ctx, name) => {
* @param {object} ctx The koa context object to be tested.
* @return {boolean} returns true if the call is from the client lib (a built app rather than the builder).
*/
exports.isClient = (ctx) => {
exports.isClient = ctx => {
return ctx.headers["x-budibase-type"] === "client"
}
exports.getGlobalUserByEmail = async (email) => {
exports.getGlobalUserByEmail = async email => {
const db = getDB(StaticDatabases.GLOBAL.name)
try {
let users = (
@ -114,7 +114,7 @@ exports.getGlobalUserByEmail = async (email) => {
include_docs: true,
})
).rows
users = users.map((user) => user.doc)
users = users.map(user => user.doc)
return users.length <= 1 ? users[0] : users
} catch (err) {
if (err != null && err.name === "not_found") {

9
packages/bbui/src/ActionButton/ActionButton.svelte
View File

@ -42,12 +42,14 @@
class="spectrum-ActionButton spectrum-ActionButton--size{size}"
{disabled}
on:longPress
on:click|preventDefault>
on:click|preventDefault
>
{#if longPressable}
<svg
class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
{/if}
@ -56,7 +58,8 @@
class="spectrum-Icon spectrum-Icon--size{size}"
focusable="false"
aria-hidden="true"
aria-label={icon}>
aria-label={icon}
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}

2
packages/bbui/src/ActionGroup/ActionGroup.svelte
View File

@ -8,7 +8,7 @@
// Attaches a spectrum-ActionGroup-item class to buttons inside the div
function group(element) {
const buttons = Array.from(element.getElementsByTagName("button"))
buttons.forEach((button) => {
buttons.forEach(button => {
button.classList.add("spectrum-ActionGroup-item")
})
}

2
packages/bbui/src/Actions/position_dropdown.js
View File

@ -47,7 +47,7 @@ export default function positionDropdown(element, { anchor, align }) {
element.style[positionSide] = `${dimensions[positionSide]}px`
element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
const resizeObserver = new ResizeObserver((entries) => {
const resizeObserver = new ResizeObserver(entries => {
entries.forEach(() => {
dimensions = getDimensions()
element.style[positionSide] = `${dimensions[positionSide]}px`

6
packages/bbui/src/Button/Button.svelte
View File

@ -23,13 +23,15 @@
class:active
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
{disabled}
on:click|preventDefault>
on:click|preventDefault
>
{#if icon}
<svg
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
focusable="false"
aria-hidden="true"
aria-label={icon}>
aria-label={icon}
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}

26
packages/bbui/src/ButtonGroup/ButtonGroup.svelte
View File

@ -1,15 +1,19 @@
<script>
import "@spectrum-css/buttongroup/dist/index-vars.css"
export let vertical = false
import "@spectrum-css/buttongroup/dist/index-vars.css"
export let vertical = false
function group(element) {
const buttons = Array.from(element.getElementsByTagName('button'))
buttons.forEach(button => {
button.classList.add('spectrum-ButtonGroup-item')
})
}
function group(element) {
const buttons = Array.from(element.getElementsByTagName("button"))
buttons.forEach(button => {
button.classList.add("spectrum-ButtonGroup-item")
})
}
</script>
<div use:group class="spectrum-ButtonGroup" class:spectrum-ButtonGroup--vertical={vertical}>
<slot />
</div>
<div
use:group
class="spectrum-ButtonGroup"
class:spectrum-ButtonGroup--vertical={vertical}
>
<slot />
</div>

4
packages/bbui/src/Drawer/Drawer.svelte
View File

@ -38,7 +38,9 @@
<header>
<div class="text">
<Heading size="XS">{title}</Heading>
<Body size="XXS"><slot name="description" /></Body>
<Body size="XXS">
<slot name="description" />
</Body>
</div>
<div class="buttons">
<slot name="buttons" />

3
packages/bbui/src/Form/Combobox.svelte
View File

@ -35,5 +35,6 @@
{placeholder}
{getOptionLabel}
{getOptionValue}
on:change={onChange} />
on:change={onChange}
/>
</Field>

14
packages/bbui/src/Form/Core/Checkbox.svelte
View File

@ -17,27 +17,31 @@
<label
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
class:is-invalid={!!error}>
class:is-invalid={!!error}
>
<input
checked={value}
{disabled}
on:change={onChange}
type="checkbox"
class="spectrum-Checkbox-input"
{id} />
{id}
/>
<span class="spectrum-Checkbox-box">
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg
class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>
<span class="spectrum-Checkbox-label">{text || ''}</span>
<span class="spectrum-Checkbox-label">{text || ""}</span>
</label>

26
packages/bbui/src/Form/Core/Combobox.svelte
View File

@ -49,7 +49,8 @@
<div
class="spectrum-Textfield spectrum-InputGroup-textfield"
class:is-disabled={!!error}
class:is-focused={open || focus}>
class:is-focused={open || focus}
>
<input
type="text"
on:focus={() => (focus = true)}
@ -57,18 +58,21 @@
on:change={onChange}
{value}
{placeholder}
class="spectrum-Textfield-input spectrum-InputGroup-input" />
class="spectrum-Textfield-input spectrum-InputGroup-input"
/>
</div>
<button
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
tabindex="-1"
aria-haspopup="true"
disabled={!!error}
on:click={() => (open = true)}>
on:click={() => (open = true)}
>
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
@ -76,7 +80,8 @@
<div class="overlay" on:mousedown|self={() => (open = false)} />
<div
transition:fly={{ y: -20, duration: 200 }}
class="spectrum-Popover spectrum-Popover--bottom is-open">
class="spectrum-Popover spectrum-Popover--bottom is-open"
>
<ul class="spectrum-Menu" role="listbox">
{#if options && Array.isArray(options)}
{#each options as option}
@ -86,13 +91,16 @@
role="option"
aria-selected="true"
tabindex="0"
on:click={() => selectOption(getOptionValue(option))}>
<span
class="spectrum-Menu-itemLabel">{getOptionLabel(option)}</span>
on:click={() => selectOption(getOptionValue(option))}
>
<span class="spectrum-Menu-itemLabel"
>{getOptionLabel(option)}</span
>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>

21
packages/bbui/src/Form/Core/DatePicker.svelte
View File

@ -64,7 +64,8 @@
on:close={onClose}
options={flatpickrOptions}
on:change={handleChange}
element={`#${flatpickrId}`}>
element={`#${flatpickrId}`}
>
<div
id={flatpickrId}
class:is-disabled={disabled}
@ -73,17 +74,20 @@
class:is-focused={open}
aria-readonly="false"
aria-required="false"
aria-haspopup="true">
aria-haspopup="true"
>
<div
on:click={flatpickr?.open}
class="spectrum-Textfield spectrum-InputGroup-textfield"
class:is-disabled={disabled}
class:is-invalid={!!error}>
class:is-invalid={!!error}
>
{#if !!error}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
@ -94,7 +98,8 @@
class="spectrum-Textfield-input spectrum-InputGroup-input"
{placeholder}
{id}
{value} />
{value}
/>
</div>
<button
type="button"
@ -102,12 +107,14 @@
tabindex="-1"
{disabled}
class:is-invalid={!!error}
on:click={flatpickr?.open}>
on:click={flatpickr?.open}
>
<svg
class="spectrum-Icon spectrum-Icon--sizeM"
focusable="false"
aria-hidden="true"
aria-label="Calendar">
aria-label="Calendar"
>
<use xlink:href="#spectrum-icon-18-Calendar" />
</svg>
</button>

46
packages/bbui/src/Form/Core/Dropzone.svelte
View File

@ -119,13 +119,15 @@
<div
class="nav left"
class:visible={selectedImageIdx > 0}
on:click={navigateLeft}>
on:click={navigateLeft}
>
<Icon name="ChevronLeft" />
</div>
<div
class="nav right"
class:visible={selectedImageIdx < fileCount - 1}
on:click={navigateRight}>
on:click={navigateRight}
>
<Icon name="ChevronRight" />
</div>
<div class="footer">File {selectedImageIdx + 1} of {fileCount}</div>
@ -140,19 +142,22 @@
on:dragleave={handleDragLeave}
on:dragenter={handleDragOver}
on:drop={handleDrop}
class:is-dragged={fileDragged}>
class:is-dragged={fileDragged}
>
<div class="spectrum-IllustratedMessage spectrum-IllustratedMessage--cta">
<input
id={fieldId}
{disabled}
type="file"
multiple
on:change={handleFile} />
on:change={handleFile}
/>
<svg
class="spectrum-IllustratedMessage-illustration"
width="125"
height="60"
viewBox="0 0 199 97.7"><defs>
viewBox="0 0 199 97.7"
><defs>
<style>
.cls-1,
.cls-2 {
@ -170,25 +175,31 @@
</defs>
<path
class="cls-1"
d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66" />
d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
/>
<line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
<path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
<path
class="cls-1"
d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19" />
d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
/>
<line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
<path
class="cls-2"
d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z" />
d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
/>
<path
class="cls-2"
d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2" />
d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
/>
<path
class="cls-2"
d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7" />
d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
/>
<path
class="cls-1"
d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66" />
d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
/>
<rect
class="cls-1"
x="1.5"
@ -196,16 +207,21 @@
width="58"
height="39"
rx="2"
ry="2" />
ry="2"
/>
</svg>
<h2
class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading">
class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
>
Drag and drop your file
</h2>
{#if !disabled}
<p
class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description">
<label for={fieldId} class="spectrum-Link">Select a file to upload</label>
class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
>
<label for={fieldId} class="spectrum-Link"
>Select a file to upload</label
>
<br />
from your computer
</p>

3
packages/bbui/src/Form/Core/Multiselect.svelte
View File

@ -78,4 +78,5 @@
{isOptionSelected}
{getOptionLabel}
{getOptionValue}
onSelectOption={toggleOption} />
onSelectOption={toggleOption}
/>

29
packages/bbui/src/Form/Core/Picker.svelte
View File

@ -37,7 +37,8 @@
class:is-invalid={!!error}
class:is-open={open}
aria-haspopup="listbox"
on:mousedown={onClick}>
on:mousedown={onClick}
>
<span class="spectrum-Picker-label" class:is-placeholder={isPlaceholder}>
{fieldText}
</span>
@ -46,14 +47,16 @@
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
focusable="false"
aria-hidden="true"
aria-label="Folder">
aria-label="Folder"
>
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</button>
@ -61,7 +64,8 @@
<div
use:clickOutside={() => (open = false)}
transition:fly={{ y: -20, duration: 200 }}
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open">
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
>
<ul class="spectrum-Menu" role="listbox">
{#if placeholderOption}
<li
@ -70,12 +74,14 @@
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(null)}>
on:click={() => onSelectOption(null)}
>
<span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>
@ -88,13 +94,16 @@
role="option"
aria-selected="true"
tabindex="0"
on:click={() => onSelectOption(getOptionValue(option, idx))}>
<span
class="spectrum-Menu-itemLabel">{getOptionLabel(option, idx)}</span>
on:click={() => onSelectOption(getOptionValue(option, idx))}
>
<span class="spectrum-Menu-itemLabel"
>{getOptionLabel(option, idx)}</span
>
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
</li>

6
packages/bbui/src/Form/Core/RadioGroup.svelte
View File

@ -21,14 +21,16 @@
<div
title={getOptionLabel(option)}
class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
class:is-invalid={!!error}>
class:is-invalid={!!error}
>
<input
on:change={onChange}
bind:group={value}
value={getOptionValue(option)}
type="radio"
class="spectrum-Radio-input"
{disabled} />
{disabled}
/>
<span class="spectrum-Radio-button" />
<label class="spectrum-Radio-label">{getOptionLabel(option)}</label>
</div>

21
packages/bbui/src/Form/Core/Search.svelte
View File

@ -34,11 +34,13 @@
<div
class="spectrum-Textfield"
class:is-focused={focus}
class:is-disabled={disabled}>
class:is-disabled={disabled}
>
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-icon-18-Magnify" />
</svg>
<input
@ -46,23 +48,26 @@
on:keyup={updateValueOnEnter}
{disabled}
{id}
value={value || ''}
placeholder={placeholder || ''}
value={value || ""}
placeholder={placeholder || ""}
on:blur={onBlur}
on:focus={onFocus}
on:input
type="search"
class="spectrum-Textfield-input spectrum-Search-input"
autocomplete="off" />
autocomplete="off"
/>
</div>
<button
on:click={() => updateValue('')}
on:click={() => updateValue("")}
type="reset"
class="spectrum-ClearButton spectrum-Search-clearButton">
class="spectrum-ClearButton spectrum-Search-clearButton"
>
<svg
class="spectrum-Icon spectrum-UIIcon-Cross75"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Cross75" />
</svg>
</button>

5
packages/bbui/src/Form/Core/Select.svelte
View File

@ -51,7 +51,8 @@
{options}
{getOptionLabel}
{getOptionValue}
isPlaceholder={value == null || value === ''}
isPlaceholder={value == null || value === ""}
placeholderOption={placeholder}
isOptionSelected={option => option === value}
onSelectOption={selectOption} />
onSelectOption={selectOption}
/>

3
packages/bbui/src/Form/Core/Switch.svelte
View File

@ -21,7 +21,8 @@
on:change={onChange}
{id}
type="checkbox"
class="spectrum-Switch-input" />
class="spectrum-Switch-input"
/>
<span class="spectrum-Switch-switch" />
<label class="spectrum-Switch-label" for={id}>{text}</label>
</div>

15
packages/bbui/src/Form/Core/TextArea.svelte
View File

@ -25,23 +25,28 @@
class="spectrum-Textfield spectrum-Textfield--multiline"
class:is-invalid={!!error}
class:is-disabled={disabled}
class:is-focused={focus}>
class:is-focused={focus}
>
{#if error}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
class="spectrum-Icon spectrum-Icon--sizeM
spectrum-Textfield-validationIcon"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
<!-- prettier-ignore -->
<textarea
bind:this={textarea}
placeholder={placeholder || ''}
placeholder={placeholder || ""}
class="spectrum-Textfield-input"
{disabled}
{id}
on:focus={() => (focus = true)}
on:blur={onChange}>{value || ''}</textarea>
on:blur={onChange}
>{value || ""}</textarea>
</div>
<style>

13
packages/bbui/src/Form/Core/TextField.svelte
View File

@ -53,12 +53,14 @@
class="spectrum-Textfield"
class:is-invalid={!!error}
class:is-disabled={disabled}
class:is-focused={focus}>
class:is-focused={focus}
>
{#if error}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
@ -68,13 +70,14 @@
{disabled}
{readonly}
{id}
value={value || ''}
placeholder={placeholder || ''}
value={value || ""}
placeholder={placeholder || ""}
on:blur={onBlur}
on:focus={onFocus}
on:input
{type}
class="spectrum-Textfield-input" />
class="spectrum-Textfield-input"
/>
</div>
<style>

3
packages/bbui/src/Form/DatePicker.svelte
View File

@ -25,5 +25,6 @@
{value}
{placeholder}
{enableTime}
on:change={onChange} />
on:change={onChange}
/>
</Field>

3
packages/bbui/src/Form/Dropzone.svelte
View File

@ -27,5 +27,6 @@
{fileSizeLimit}
{processFiles}
{handleFileTooLarge}
on:change={onChange} />
on:change={onChange}
/>
</Field>

2
packages/bbui/src/Form/Field.svelte
View File

@ -9,7 +9,7 @@
export let error = null
</script>
<div class="spectrum-Form-item" class:above={labelPosition === 'above'}>
<div class="spectrum-Form-item" class:above={labelPosition === "above"}>
{#if label}
<FieldLabel forId={id} {label} position={labelPosition} />
{/if}

5
packages/bbui/src/Form/FieldLabel.svelte
View File

@ -10,8 +10,9 @@
<label
for={forId}
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}>
{label || ''}
class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
>
{label || ""}
</label>
<style>

3
packages/bbui/src/Form/Input.svelte
View File

@ -29,5 +29,6 @@
{type}
on:change={onChange}
on:click
on:input />
on:input
/>
</Field>

3
packages/bbui/src/Form/Multiselect.svelte
View File

@ -31,5 +31,6 @@
{getOptionLabel}
{getOptionValue}
on:change={onChange}
on:click />
on:click
/>
</Field>

3
packages/bbui/src/Form/RadioGroup.svelte
View File

@ -33,5 +33,6 @@
{options}
{getOptionLabel}
{getOptionValue}
on:change={onChange} />
on:change={onChange}
/>
</Field>

3
packages/bbui/src/Form/Search.svelte
View File

@ -23,5 +23,6 @@
{placeholder}
on:change={onChange}
on:click
on:input />
on:input
/>
</Field>

3
packages/bbui/src/Form/Select.svelte
View File

@ -38,5 +38,6 @@
{getOptionLabel}
{getOptionValue}
on:change={onChange}
on:click />
on:click
/>
</Field>

3
packages/bbui/src/Form/TextArea.svelte
View File

@ -25,5 +25,6 @@
{disabled}
{value}
{placeholder}
on:change={onChange} />
on:change={onChange}
/>
</Field>

3
packages/bbui/src/Link/Link.svelte
View File

@ -17,4 +17,5 @@
class:spectrum-Link--secondary={secondary}
class:spectrum-Link--overBackground={overBackground}
class:spectrum-Link--quiet={quiet}
class="spectrum-Link spectrum-Link--size{size}"><slot /></a>
class="spectrum-Link spectrum-Link--size{size}"><slot /></a
>

6
packages/bbui/src/Menu/Menu.svelte
View File

@ -1,7 +1,7 @@
<script>
import "@spectrum-css/menu/dist/index-vars.css"
import "@spectrum-css/menu/dist/index-vars.css"
</script>
<ul class="spectrum-Menu" role="menu">
<slot />
</ul>
<slot />
</ul>

13
packages/bbui/src/Menu/Section.svelte
View File

@ -1,9 +1,10 @@
<script>
export let heading
export let heading
</script>
<li role="presentation">
<span class="spectrum-Menu-sectionHeading">{heading}</span>
<ul class="spectrum-Menu" role="group">
<slot />
</ul>
</li>
<span class="spectrum-Menu-sectionHeading">{heading}</span>
<ul class="spectrum-Menu" role="group">
<slot />
</ul>
</li>

2
packages/bbui/src/Menu/Separator.svelte
View File

@ -1 +1 @@
<li class="spectrum-Menu-divider" role="separator"></li>
<li class="spectrum-Menu-divider" role="separator" />

2
packages/bbui/src/Modal/CustomContent.svelte
View File

@ -17,7 +17,7 @@
<div on:click={increment}>
Click me
{remaining}
more time{remaining === 1 ? '' : 's'}
more time{remaining === 1 ? "" : "s"}
to close this modal!
</div>

6
packages/bbui/src/Modal/Modal.svelte
View File

@ -50,13 +50,15 @@
<div
class="spectrum-Underlay is-open"
transition:fade={{ duration: 200 }}
on:mousedown|self={hide}>
on:mousedown|self={hide}
>
<div class="modal-wrapper" on:mousedown|self={hide}>
<div class="modal-inner-wrapper" on:mousedown|self={hide}>
<div
use:focusFirstInput
class="spectrum-Modal is-open"
transition:fly={{ y: 30, duration: 200 }}>
transition:fly={{ y: 30, duration: 200 }}
>
<slot />
</div>
</div>

19
packages/bbui/src/Modal/ModalContent.svelte
View File

@ -7,7 +7,7 @@
import Context from "../context"
export let title = undefined
export let size = "small"
export let size = "S"
export let cancelText = "Cancel"
export let confirmText = "Confirm"
export let showCancelButton = true
@ -30,11 +30,16 @@
</script>
<div
class="spectrum-Dialog spectrum-Dialog--{size}"
class="spectrum-Dialog"
class:spectrum-Dialog--small={size === "S"}
class:spectrum-Dialog--medium={size === "M"}
class:spectrum-Dialog--large={size === "L"}
class:spectrum-Dialog--extraLarge={size === "XL"}
style="position: relative;"
role="dialog"
tabindex="-1"
aria-modal="true">
aria-modal="true"
>
<div class="spectrum-Dialog-grid">
<h1 class="spectrum-Dialog-heading spectrum-Dialog-heading--noHeader">
{title}
@ -47,7 +52,8 @@
</section>
{#if showCancelButton || showConfirmButton}
<div
class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter">
class="spectrum-ButtonGroup spectrum-Dialog-buttonGroup spectrum-Dialog-buttonGroup--noFooter"
>
<slot name="footer" />
{#if showCancelButton}
<Button group secondary on:click={hide}>{cancelText}</Button>
@ -58,7 +64,8 @@
cta
{...$$restProps}
disabled={confirmDisabled}
on:click={confirm}>
on:click={confirm}
>
{confirmText}
</Button>
{/if}
@ -73,7 +80,7 @@
</div>
<style>
.spectrum-Dialog--XL {
.spectrum-Dialog--extraLarge {
width: 1000px;
}

3
packages/bbui/src/Modal/QuizModal.svelte
View File

@ -31,7 +31,8 @@
bind:this={modal}
confirmText="Submit"
onConfirm={answerQuiz}
on:show={resetState}>
on:show={resetState}
>
{#if error}
<p class="error">Wrong answer! Try again.</p>
{/if}

70
packages/bbui/src/Notification/NotificationDisplay.svelte
View File

@ -1,17 +1,25 @@
<script>
import "@spectrum-css/toast/dist/index-vars.css"
import Portal from "svelte-portal"
import { flip } from "svelte/animate"
import { fly } from "svelte/transition"
import { notifications } from '../Stores/notifications'
import "@spectrum-css/toast/dist/index-vars.css"
import Portal from "svelte-portal"
import { flip } from "svelte/animate"
import { fly } from "svelte/transition"
import { notifications } from "../Stores/notifications"
</script>
<Portal target=".modal-container">
<Portal target=".modal-container">
<div class="notifications">
{#each $notifications as {type, icon, message, id} (id)}
<div animate:flip transition:fly={{ y: -30 }} class="spectrum-Toast spectrum-Toast--{type} notification-offset">
{#each $notifications as { type, icon, message, id } (id)}
<div
animate:flip
transition:fly={{ y: -30 }}
class="spectrum-Toast spectrum-Toast--{type} notification-offset"
>
{#if icon}
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon" focusable="false" aria-hidden="true">
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
@ -21,24 +29,24 @@
</div>
{/each}
</div>
</Portal>
<style>
.notifications {
position: fixed;
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
padding: 0;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
pointer-events: none;
}
.notification-offset {
margin-bottom: 10px;
}
</style>
</Portal>
<style>
.notifications {
position: fixed;
top: 10px;
left: 0;
right: 0;
margin: 0 auto;
padding: 0;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
pointer-events: none;
}
.notification-offset {
margin-bottom: 10px;
}
</style>

3
packages/bbui/src/Popover/Popover.svelte
View File

@ -37,7 +37,8 @@
use:clickOutside={hide}
on:keydown={handleEscape}
class="spectrum-Popover is-open"
role="presentation">
role="presentation"
>
<slot />
</div>
</Portal>

12
packages/bbui/src/ProgressBar/ProgressBar.svelte
View File

@ -33,22 +33,14 @@
>
{#if $$slots}
<div
class:spectrum-FieldLabel--sizeS={s}
class:spectrum-FieldLabel--sizeM={m}
class:spectrum-FieldLabel--sizeL={l}
class:spectrum-FieldLabel--sizeXL={xl}
class="spectrum-FieldLabel spectrum-ProgressBar-label"
class="spectrum-FieldLabel spectrum-ProgressBar-label spectrum-FieldLabel--size{size}"
>
<slot />
</div>
{/if}
{#if value}
<div
class:spectrum-FieldLabel--sizeS={s}
class:spectrum-FieldLabel--sizeM={m}
class:spectrum-FieldLabel--sizeL={l}
class:spectrum-FieldLabel--sizeXL={xl}
class="spectrum-FieldLabel spectrum-ProgressBar-percentage"
class="spectrum-FieldLabel spectrum-ProgressBar-percentage spectrum-FieldLabel--size{size}"
>
{Math.round($progress)}%
</div>

44
packages/bbui/src/ProgressCircle/ProgressCircle.svelte
View File

@ -1,29 +1,33 @@
<script>
// WIP! Does not yet work.
import "@spectrum-css/progresscircle/dist/index-vars.css"
import { tweened } from 'svelte/motion';
import { cubicOut } from 'svelte/easing';
// WIP! Does not yet work.
import "@spectrum-css/progresscircle/dist/index-vars.css"
import { tweened } from "svelte/motion"
import { cubicOut } from "svelte/easing"
export let value = false
export let small;
export let large;
export let value = false
export let small
export let large
export let overBackground;
export let overBackground
</script>
<div class:spectrum-ProgressBar--indeterminate={!value} class:spectrum-ProgressCircle--small={small} class:spectrum-ProgressCircle--large={large} class="spectrum-ProgressCircle">
<div class="spectrum-ProgressCircle-track"></div>
<div class="spectrum-ProgressCircle-fills">
<div class="spectrum-ProgressCircle-fillMask1">
<div class="spectrum-ProgressCircle-fillSubMask1">
<div class="spectrum-ProgressCircle-fill"></div>
</div>
<div
class:spectrum-ProgressBar--indeterminate={!value}
class:spectrum-ProgressCircle--small={small}
class:spectrum-ProgressCircle--large={large}
class="spectrum-ProgressCircle"
>
<div class="spectrum-ProgressCircle-track" />
<div class="spectrum-ProgressCircle-fills">
<div class="spectrum-ProgressCircle-fillMask1">
<div class="spectrum-ProgressCircle-fillSubMask1">
<div class="spectrum-ProgressCircle-fill" />
</div>
<div class="spectrum-ProgressCircle-fillMask2">
<div class="spectrum-ProgressCircle-fillSubMask2">
<div class="spectrum-ProgressCircle-fill"></div>
</div>
</div>
<div class="spectrum-ProgressCircle-fillMask2">
<div class="spectrum-ProgressCircle-fillSubMask2">
<div class="spectrum-ProgressCircle-fill" />
</div>
</div>
</div>
</div>

66
packages/bbui/src/SideNavigation/Item.svelte
View File

@ -1,30 +1,44 @@
<script>
import { getContext } from 'svelte'
const multilevel = getContext('sidenav-type');
export let href = "";
export let external = false;
export let heading = ""
export let icon = "";
export let selected = false;
export let disabled = false;
import { getContext } from "svelte"
const multilevel = getContext("sidenav-type")
export let href = ""
export let external = false
export let heading = ""
export let icon = ""
export let selected = false
export let disabled = false
</script>
<li class="spectrum-SideNav-item" class:is-selected={selected} class:is-disabled={disabled}>
{#if heading}
<h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">{heading}</h2>
<li
class="spectrum-SideNav-item"
class:is-selected={selected}
class:is-disabled={disabled}
>
{#if heading}
<h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">
{heading}
</h2>
{/if}
<a
target={external ? "_blank" : "_self"}
{href}
class="spectrum-SideNav-itemLink"
aria-current="page"
>
{#if icon}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
<a target={external ? '_blank' : '_self'} {href} class="spectrum-SideNav-itemLink" aria-current="page">
{#if icon}
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
<slot />
</a>
{#if multilevel && $$slots.subnav}
<ul class="spectrum-SideNav">
<slot name="subnav" />
</ul>
{/if}
</li>
<slot />
</a>
{#if multilevel && $$slots.subnav}
<ul class="spectrum-SideNav">
<slot name="subnav" />
</ul>
{/if}
</li>

10
packages/bbui/src/SideNavigation/Navigation.svelte
View File

@ -1,12 +1,12 @@
<script>
import { setContext } from 'svelte'
import "@spectrum-css/sidenav/dist/index-vars.css"
export let multilevel = false;
setContext('sidenav-type', multilevel)
import { setContext } from "svelte"
import "@spectrum-css/sidenav/dist/index-vars.css"
export let multilevel = false
setContext("sidenav-type", multilevel)
</script>
<nav>
<ul class="spectrum-SideNav" class:spectrum-SideNav--multiLevel={multilevel}>
<slot />
</ul>
</nav>
</nav>

14
packages/bbui/src/Stores/notifications.js
View File

@ -7,7 +7,7 @@ export const createNotificationStore = () => {
const _notifications = writable([], () => {
return () => {
// clear all the timers
timeoutIds.forEach((timeoutId) => {
timeoutIds.forEach(timeoutId => {
clearTimeout(timeoutId)
})
_notifications.set([])
@ -25,11 +25,11 @@ export const createNotificationStore = () => {
return
}
let _id = id()
_notifications.update((state) => {
_notifications.update(state => {
return [...state, { id: _id, type, message, icon }]
})
const timeoutId = setTimeout(() => {
_notifications.update((state) => {
_notifications.update(state => {
return state.filter(({ id }) => id !== _id)
})
}, NOTIFICATION_TIMEOUT)
@ -41,10 +41,10 @@ export const createNotificationStore = () => {
return {
subscribe,
send,
info: (msg) => send(msg, "info", "Info"),
error: (msg) => send(msg, "error", "Alert"),
warning: (msg) => send(msg, "warning", "Alert"),
success: (msg) => send(msg, "success", "CheckmarkCircle"),
info: msg => send(msg, "info", "Info"),
error: msg => send(msg, "error", "Alert"),
warning: msg => send(msg, "warning", "Alert"),
success: msg => send(msg, "success", "CheckmarkCircle"),
blockNotifications,
}
}

12
packages/bbui/src/Table/BooleanRenderer.svelte
View File

@ -5,24 +5,28 @@
</script>
<label
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized"
>
<input
type="checkbox"
class="spectrum-Checkbox-input"
id="checkbox-1"
disabled
checked={!!value} />
checked={!!value}
/>
<span class="spectrum-Checkbox-box">
<svg
class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Checkmark100" />
</svg>
<svg
class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Dash100" />
</svg>
</span>

2
packages/bbui/src/Table/CellRenderer.svelte
View File

@ -26,7 +26,7 @@
$: renderer = customRenderer?.component ?? typeMap[type]
</script>
{#if renderer && (customRenderer || (value != null && value !== ''))}
{#if renderer && (customRenderer || (value != null && value !== ""))}
<svelte:component this={renderer} {row} {schema} {value} on:clickrelationship>
<slot />
</svelte:component>

2
packages/bbui/src/Table/DateTimeRenderer.svelte
View File

@ -4,7 +4,7 @@
export let value
</script>
<div>{dayjs(value).format('MMMM D YYYY, HH:mm')}</div>
<div>{dayjs(value).format("MMMM D YYYY, HH:mm")}</div>
<style>
div {

64
packages/bbui/src/Table/Table.svelte
View File

@ -31,6 +31,7 @@
// Table state
let height = 0
let loaded = false
$: schema = fixSchema(schema)
$: if (!loading) loaded = true
$: rows = data ?? []
$: visibleRowCount = getVisibleRowCount(loaded, height, rows.length, rowCount)
@ -50,7 +51,7 @@
rows.length
)
// Reset state when data chanegs
// Reset state when data changes
$: data.length, reset()
const reset = () => {
nextScrollTop = 0
@ -59,6 +60,24 @@
timeout = null
}
const fixSchema = schema => {
let fixedSchema = {}
Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
if (typeof fieldSchema === "string") {
fixedSchema[fieldName] = {
type: fieldSchema,
name: fieldName,
}
} else {
fixedSchema[fieldName] = {
...fieldSchema,
name: fieldName,
}
}
})
return fixedSchema
}
const getVisibleRowCount = (loaded, height, allRows, rowCount) => {
if (!loaded) {
return rowCount || 0
@ -118,7 +137,6 @@
if (!field || !fieldSchema) {
return
}
schema[field].name = field
if (!fieldSchema?.autocolumn) {
columns.push(fieldSchema)
} else if (showAutoColumns) {
@ -192,7 +210,8 @@
on:scroll={onScroll}
class:quiet
style={`--row-height: ${rowHeight}px; --header-height: ${headerHeight}px;`}
class="container">
class="container"
>
<div style={contentStyle}>
<table class="spectrum-Table" class:spectrum-Table--quiet={quiet}>
{#if sortedRows?.length}
@ -201,7 +220,7 @@
{#if showEditColumn}
<th class="spectrum-Table-headCell">
<div class="spectrum-Table-headCell-content">
{editColumnTitle || ''}
{editColumnTitle || ""}
</div>
</th>
{/if}
@ -209,15 +228,19 @@
<th
class="spectrum-Table-headCell"
class:is-sortable={schema[field].sortable !== false}
class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
on:click={() => sortBy(schema[field])}>
class:is-sorted-desc={sortColumn === field &&
sortOrder === "Descending"}
class:is-sorted-asc={sortColumn === field &&
sortOrder === "Ascending"}
on:click={() => sortBy(schema[field])}
>
<div class="spectrum-Table-headCell-content">
<div class="title">{getDisplayName(schema[field])}</div>
{#if schema[field]?.autocolumn}
<svg
class="spectrum-Icon spectrum-Table-autoIcon"
focusable="false">
focusable="false"
>
<use xlink:href="#spectrum-icon-18-MagicWand" />
</svg>
{/if}
@ -225,7 +248,8 @@
<svg
class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Arrow100" />
</svg>
{/if}
@ -233,7 +257,8 @@
<svg
class="spectrum-Icon spectrum-Table-editIcon"
focusable="false"
on:click={e => editColumn(e, field)}>
on:click={e => editColumn(e, field)}
>
<use xlink:href="#spectrum-icon-18-Edit" />
</svg>
{/if}
@ -249,11 +274,13 @@
<tr
on:click={() => toggleSelectRow(row)}
class="spectrum-Table-row"
class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}>
class:hidden={idx < firstVisibleRow || idx > lastVisibleRow}
>
{#if idx >= firstVisibleRow && idx <= lastVisibleRow}
{#if showEditColumn}
<td
class="spectrum-Table-cell spectrum-Table-cell--divider">
class="spectrum-Table-cell spectrum-Table-cell--divider"
>
<div class="spectrum-Table-cell-content">
<SelectEditRenderer
data={row}
@ -261,21 +288,25 @@
onToggleSelection={() => toggleSelectRow(row)}
onEdit={e => editRow(e, row)}
{allowSelectRows}
{allowEditRows} />
{allowEditRows}
/>
</div>
</td>
{/if}
{#each fields as field}
<td
class="spectrum-Table-cell"
class:spectrum-Table-cell--divider={!!schema[field].divider}>
class:spectrum-Table-cell--divider={!!schema[field]
.divider}
>
<div class="spectrum-Table-cell-content">
<CellRenderer
{customRenderers}
{row}
schema={schema[field]}
value={row[field]}
on:clickrelationship>
on:clickrelationship
>
<slot />
</CellRenderer>
</div>
@ -288,7 +319,8 @@
<div class="placeholder">
<svg
class="spectrum-Icon spectrum-Icon--sizeXXL"
focusable="false">
focusable="false"
>
<use xlink:href="#spectrum-icon-18-Table" />
</svg>
<div>No rows found</div>

6
packages/bbui/src/Tabs/Tab.svelte
View File

@ -30,13 +30,15 @@
on:click={onClick}
class:is-selected={$selected.title === title}
class="spectrum-Tabs-item"
tabindex="0">
tabindex="0"
>
{#if icon}
<svg
class="spectrum-Icon spectrum-Icon--sizeM"
focusable="false"
aria-hidden="true"
aria-label="Folder">
aria-label="Folder"
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}

15
packages/bbui/src/Tabs/Tabs.svelte
View File

@ -44,23 +44,22 @@
})
function id() {
return (
"_" +
Math.random()
.toString(36)
.substr(2, 9)
)
return "_" + Math.random().toString(36).substr(2, 9)
}
</script>
<div
bind:this={container}
class="selected-border spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
class="selected-border spectrum-Tabs spectrum-Tabs--{vertical
? 'vertical'
: 'horizontal'}"
>
<slot />
{#if $tab.info}
<div
class="spectrum-Tabs-selectionIndicator indicator-transition"
style="width: {width}; height: {height}; left: {left}; top: {top};" />
style="width: {width}; height: {height}; left: {left}; top: {top};"
/>
{/if}
</div>

32
packages/bbui/src/Tags/Tag.svelte
View File

@ -1,24 +1,34 @@
<script>
import Avatar from '../Avatar/Avatar.svelte'
import ClearButton from '../ClearButton/ClearButton.svelte'
export let icon = "";
export let avatar = "";
export let invalid = false;
export let disabled = false;
export let closable = false;
import Avatar from "../Avatar/Avatar.svelte"
import ClearButton from "../ClearButton/ClearButton.svelte"
export let icon = ""
export let avatar = ""
export let invalid = false
export let disabled = false
export let closable = false
</script>
<div class:is-invalid={invalid} class:is-disabled={disabled} class="spectrum-Tags-item" role="listitem">
<div
class:is-invalid={invalid}
class:is-disabled={disabled}
class="spectrum-Tags-item"
role="listitem"
>
{#if avatar}
<Avatar url={avatar} />
{/if}
{#if icon}
<svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Tag">
<svg
class="spectrum-Icon spectrum-Icon--sizeS"
focusable="false"
aria-hidden="true"
aria-label="Tag"
>
<use xlink:href="#spectrum-icon-24-{icon}" />
</svg>
{/if}
<span class="spectrum-Tags-itemLabel"><slot /></span>
{#if closable}
<ClearButton on:click />
<ClearButton on:click />
{/if}
</div>
</div>

6
packages/bbui/src/Tags/Tags.svelte
View File

@ -1,7 +1,7 @@
<script>
import "@spectrum-css/tags/dist/index-vars.css"
import "@spectrum-css/tags/dist/index-vars.css"
</script>
<div class="spectrum-Tags" role="list" aria-label="list">
<slot />
</div>
<slot />
</div>

60
packages/bbui/src/TreeView/Item.svelte
View File

@ -1,28 +1,40 @@
<script>
export let selected = false;
export let open = false;
export let title;
export let icon;
export let selected = false
export let open = false
export let title
export let icon
</script>
<li
class:is-selected={selected} class:is-open={open} class="spectrum-TreeView-item">
<a on:click class="spectrum-TreeView-itemLink" href="#">
{#if $$slots.default}
<svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
{/if}
{#if icon}
<svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
<span class="spectrum-TreeView-itemLabel">{title}</span>
</a>
{#if $$slots.default}
<ul class="spectrum-TreeView">
<slot />
</ul>
{/if}
</li>
class:is-selected={selected}
class:is-open={open}
class="spectrum-TreeView-item"
>
<a on:click class="spectrum-TreeView-itemLink" href="#">
{#if $$slots.default}
<svg
class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
{/if}
{#if icon}
<svg
class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM"
focusable="false"
aria-hidden="true"
aria-label="Layers"
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
<span class="spectrum-TreeView-itemLabel">{title}</span>
</a>
{#if $$slots.default}
<ul class="spectrum-TreeView">
<slot />
</ul>
{/if}
</li>

19
packages/bbui/src/TreeView/Tree.svelte
View File

@ -1,11 +1,16 @@
<script>
import "@spectrum-css/treeview/dist/index-vars.css"
import "@spectrum-css/treeview/dist/index-vars.css"
export let quiet = false
export let standalone = true
export let width = '250px';
export let quiet = false
export let standalone = true
export let width = "250px"
</script>
<ul class:spectrum-TreeView--standalone={standalone} class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
<slot />
</ul>
<ul
class:spectrum-TreeView--standalone={standalone}
class:spectrum-TreeView--quiet={quiet}
class="spectrum-TreeView"
style="width: {width}"
>
<slot />
</ul>

18
packages/builder/cypress/support/commands.js
View File

@ -6,7 +6,7 @@
//
Cypress.Commands.add("login", () => {
cy.getCookie("budibase:auth").then((cookie) => {
cy.getCookie("budibase:auth").then(cookie => {
// Already logged in
if (cookie) return
@ -20,13 +20,13 @@ Cypress.Commands.add("login", () => {
})
})
Cypress.Commands.add("createApp", (name) => {
Cypress.Commands.add("createApp", name => {
cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
// wait for init API calls on visit
cy.wait(100)
cy.contains("Create New Web App").click()
cy.get("body")
.then(($body) => {
.then($body => {
if ($body.find("input[name=apiKey]").length) {
// input was found, do something else here
cy.get("input[name=apiKey]").type(name).should("have.value", name)
@ -50,9 +50,9 @@ Cypress.Commands.add("createApp", (name) => {
})
})
Cypress.Commands.add("deleteApp", (name) => {
Cypress.Commands.add("deleteApp", name => {
cy.visit(`localhost:${Cypress.env("PORT")}/builder`)
cy.get(".apps").then(($apps) => {
cy.get(".apps").then($apps => {
cy.wait(1000)
if ($apps.find(`[data-cy="app-${name}"]`).length) {
cy.get(`[data-cy="app-${name}"]`).contains("Open").click()
@ -78,7 +78,7 @@ Cypress.Commands.add("createTestTableWithData", () => {
cy.addColumn("dog", "age", "Number")
})
Cypress.Commands.add("createTable", (tableName) => {
Cypress.Commands.add("createTable", tableName => {
// Enter table name
cy.get("[data-cy=new-table]").click()
cy.get(".spectrum-Modal").within(() => {
@ -104,7 +104,7 @@ Cypress.Commands.add("addColumn", (tableName, columnName, type) => {
})
})
Cypress.Commands.add("addRow", (values) => {
Cypress.Commands.add("addRow", values => {
cy.contains("Create row").click()
cy.get(".spectrum-Modal").within(() => {
for (let i = 0; i < values.length; i++) {
@ -134,7 +134,7 @@ Cypress.Commands.add("addComponent", (category, component) => {
}
cy.get(`[data-cy="component-${component}"]`).click()
cy.wait(1000)
cy.location().then((loc) => {
cy.location().then(loc => {
const params = loc.pathname.split("/")
const componentId = params[params.length - 1]
cy.getComponent(componentId).should("exist")
@ -142,7 +142,7 @@ Cypress.Commands.add("addComponent", (category, component) => {
})
})
Cypress.Commands.add("getComponent", (componentId) => {
Cypress.Commands.add("getComponent", componentId => {
return cy
.get("iframe")
.its("0.contentDocument")

2
packages/builder/package.json
View File

@ -106,7 +106,7 @@
"rollup": "^2.44.0",
"rollup-plugin-copy": "^3.4.0",
"start-server-and-test": "^1.12.1",
"svelte": "^3.36.0",
"svelte": "^3.37.0",
"svelte-jester": "^1.3.2",
"vite": "^2.1.5"
},

4
packages/builder/src/App.svelte
View File

@ -4,7 +4,7 @@
import { routes } from "../.routify/routes"
import { initialise } from "builderStore"
import { NotificationDisplay } from "@budibase/bbui"
onMount(async () => {
await initialise()
})
@ -20,4 +20,4 @@
.modal-container {
position: absolute;
}
</style>
</style>

6
packages/builder/src/analytics.js
View File

@ -32,7 +32,7 @@ function identify(id) {
if (!analyticsEnabled || !id) return
if (posthogConfigured) posthog.identify(id)
if (sentryConfigured)
Sentry.configureScope((scope) => {
Sentry.configureScope(scope => {
scope.setUser({ id: id })
})
}
@ -73,7 +73,7 @@ if (!localStorage.getItem(APP_FIRST_STARTED_KEY)) {
localStorage.setItem(APP_FIRST_STARTED_KEY, Date.now())
}
const isFeedbackTimeElapsed = (sinceDateStr) => {
const isFeedbackTimeElapsed = sinceDateStr => {
const sinceDate = parseFloat(sinceDateStr)
const feedbackMilliseconds = feedbackHours * 60 * 60 * 1000
return Date.now() > sinceDate + feedbackMilliseconds
@ -107,7 +107,7 @@ function highlightFeedbackIcon() {
}
// Opt In/Out
const ifAnalyticsEnabled = (func) => () => {
const ifAnalyticsEnabled = func => () => {
if (analyticsEnabled && process.env.POSTHOG_TOKEN) {
return func()
}

2
packages/builder/src/builderStore/api.js
View File

@ -2,7 +2,7 @@ import { store } from "./index"
import { get as svelteGet } from "svelte/store"
import { removeCookie, Cookies } from "./cookies"
const apiCall = (method) => async (
const apiCall = method => async (
url,
body,
headers = { "Content-Type": "application/json" }

2
packages/builder/src/builderStore/cookies.js
View File

@ -4,7 +4,7 @@ export const Cookies = {
}
export function getCookie(cookieName) {
return document.cookie.split(";").some((cookie) => {
return document.cookie.split(";").some(cookie => {
return cookie.trim().startsWith(`${cookieName}=`)
})
}

59
packages/builder/src/builderStore/dataBinding.js
View File

@ -34,7 +34,7 @@ export const getDataProviderComponents = (asset, componentId) => {
path.pop()
// Filter by only data provider components
return path.filter((component) => {
return path.filter(component => {
const def = store.actions.components.getDefinition(component._component)
return def?.context != null
})
@ -54,7 +54,7 @@ export const getActionProviderComponents = (asset, componentId, actionType) => {
path.pop()
// Filter by only data provider components
return path.filter((component) => {
return path.filter(component => {
const def = store.actions.components.getDefinition(component._component)
return def?.actions?.includes(actionType)
})
@ -70,7 +70,7 @@ export const getDatasourceForProvider = (asset, component) => {
}
// If this component has a dataProvider setting, go up the stack and use it
const dataProviderSetting = def.settings.find((setting) => {
const dataProviderSetting = def.settings.find(setting => {
return setting.type === "dataProvider"
})
if (dataProviderSetting) {
@ -82,7 +82,7 @@ export const getDatasourceForProvider = (asset, component) => {
// Extract datasource from component instance
const validSettingTypes = ["dataSource", "table", "schema"]
const datasourceSetting = def.settings.find((setting) => {
const datasourceSetting = def.settings.find(setting => {
return validSettingTypes.includes(setting.type)
})
if (!datasourceSetting) {
@ -112,7 +112,7 @@ const getContextBindings = (asset, componentId) => {
let bindings = []
// Create bindings for each data provider
dataProviders.forEach((component) => {
dataProviders.forEach(component => {
const def = store.actions.components.getDefinition(component._component)
const contextDefinition = def.context
let schema
@ -127,7 +127,7 @@ const getContextBindings = (asset, componentId) => {
// Static contexts are fully defined by the components
schema = {}
const values = contextDefinition.values || []
values.forEach((value) => {
values.forEach(value => {
schema[value.key] = { name: value.label, type: "string" }
})
} else if (contextDefinition.type === "schema") {
@ -148,7 +148,7 @@ const getContextBindings = (asset, componentId) => {
// Create bindable properties for each schema field
const safeComponentId = makePropSafe(component._id)
keys.forEach((key) => {
keys.forEach(key => {
const fieldSchema = schema[key]
// Make safe runtime binding and replace certain bindings with a
@ -197,7 +197,7 @@ const getUserBindings = () => {
})
const keys = Object.keys(schema).sort()
const safeUser = makePropSafe("user")
keys.forEach((key) => {
keys.forEach(key => {
const fieldSchema = schema[key]
// Replace certain bindings with a new property to help display components
let runtimeBoundKey = key
@ -224,17 +224,17 @@ const getUserBindings = () => {
/**
* Gets all bindable properties from URL parameters.
*/
const getUrlBindings = (asset) => {
const getUrlBindings = asset => {
const url = asset?.routing?.route ?? ""
const split = url.split("/")
let params = []
split.forEach((part) => {
split.forEach(part => {
if (part.startsWith(":") && part.length > 1) {
params.push(part.replace(/:/g, "").replace(/\?/g, ""))
}
})
const safeURL = makePropSafe("url")
return params.map((param) => ({
return params.map(param => ({
type: "context",
runtimeBinding: `${safeURL}.${makePropSafe(param)}`,
readableBinding: `URL.${param}`,
@ -250,10 +250,10 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
const { type } = datasource
if (type === "query") {
const queries = get(queriesStores).list
table = queries.find((query) => query._id === datasource._id)
table = queries.find(query => query._id === datasource._id)
} else {
const tables = get(tablesStore).list
table = tables.find((table) => table._id === datasource.tableId)
table = tables.find(table => table._id === datasource.tableId)
}
if (table) {
if (type === "view") {
@ -261,7 +261,7 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
} else if (type === "query" && isForm) {
schema = {}
const params = table.parameters || []
params.forEach((param) => {
params.forEach(param => {
if (param?.name) {
schema[param.name] = { ...param, type: "string" }
}
@ -277,14 +277,23 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
schema["_rev"] = { type: "string" }
}
// Ensure there are "name" properties for all fields
if (schema) {
Object.keys(schema).forEach((field) => {
if (!schema[field].name) {
schema[field].name = field
// Ensure there are "name" properties for all fields and that field schema
// are objects
let fixedSchema = {}
Object.entries(schema || {}).forEach(([fieldName, fieldSchema]) => {
if (typeof fieldSchema === "string") {
fixedSchema[fieldName] = {
type: fieldSchema,
name: fieldName,
}
})
}
} else {
fixedSchema[fieldName] = {
...fieldSchema,
name: fieldName,
}
}
})
schema = fixedSchema
}
return { schema, table }
}
@ -293,14 +302,14 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
* Builds a form schema given a form component.
* A form schema is a schema of all the fields nested anywhere within a form.
*/
const buildFormSchema = (component) => {
const buildFormSchema = component => {
let schema = {}
if (!component) {
return schema
}
const def = store.actions.components.getDefinition(component._component)
const fieldSetting = def?.settings?.find(
(setting) => setting.key === "field" && setting.type.startsWith("field/")
setting => setting.key === "field" && setting.type.startsWith("field/")
)
if (fieldSetting && component.field) {
const type = fieldSetting.type.split("field/")[1]
@ -308,7 +317,7 @@ const buildFormSchema = (component) => {
schema[component.field] = { type }
}
}
component._children?.forEach((child) => {
component._children?.forEach(child => {
const childSchema = buildFormSchema(child)
schema = { ...schema, ...childSchema }
})
@ -362,7 +371,7 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
return textWithBindings
}
const convertFromProps = bindableProperties
.map((el) => el[convertFrom])
.map(el => el[convertFrom])
.sort((a, b) => {
return b.length - a.length
})

20
packages/builder/src/builderStore/index.js
View File

@ -12,16 +12,12 @@ export const automationStore = getAutomationStore()
export const themeStore = getThemeStore()
export const hostingStore = getHostingStore()
export const currentAsset = derived(store, ($store) => {
export const currentAsset = derived(store, $store => {
const type = $store.currentFrontEndType
if (type === FrontendTypes.SCREEN) {
return $store.screens.find(
(screen) => screen._id === $store.selectedScreenId
)
return $store.screens.find(screen => screen._id === $store.selectedScreenId)
} else if (type === FrontendTypes.LAYOUT) {
return $store.layouts.find(
(layout) => layout._id === $store.selectedLayoutId
)
return $store.layouts.find(layout => layout._id === $store.selectedLayoutId)
}
return null
})
@ -36,24 +32,24 @@ export const selectedComponent = derived(
}
)
export const currentAssetId = derived(store, ($store) => {
export const currentAssetId = derived(store, $store => {
return $store.currentFrontEndType === FrontendTypes.SCREEN
? $store.selectedScreenId
: $store.selectedLayoutId
})
export const currentAssetName = derived(currentAsset, ($currentAsset) => {
export const currentAssetName = derived(currentAsset, $currentAsset => {
return $currentAsset?.name
})
// leave this as before for consistency
export const allScreens = derived(store, ($store) => {
export const allScreens = derived(store, $store => {
return $store.screens
})
export const mainLayout = derived(store, ($store) => {
export const mainLayout = derived(store, $store => {
return $store.layouts?.find(
(layout) => layout._id === LAYOUT_NAMES.MASTER.PRIVATE
layout => layout._id === LAYOUT_NAMES.MASTER.PRIVATE
)
})

2
packages/builder/src/builderStore/loadComponentLibraries.js
View File

@ -5,7 +5,7 @@ import { get } from "builderStore/api"
* their props and other metadata from components.json.
* @param {string} appId - ID of the currently running app
*/
export const fetchComponentLibDefinitions = async (appId) => {
export const fetchComponentLibDefinitions = async appId => {
const LIB_DEFINITION_URL = `/api/${appId}/components/definitions`
try {
const libDefinitionResponse = await get(LIB_DEFINITION_URL)

4
packages/builder/src/builderStore/store/automation/Automation.js
View File

@ -37,7 +37,7 @@ export default class Automation {
return
}
const stepIdx = steps.findIndex((step) => step.id === id)
const stepIdx = steps.findIndex(step => step.id === id)
if (stepIdx < 0) throw new Error("Block not found.")
steps.splice(stepIdx, 1, updatedBlock)
this.automation.definition.steps = steps
@ -51,7 +51,7 @@ export default class Automation {
return
}
const stepIdx = steps.findIndex((step) => step.id === id)
const stepIdx = steps.findIndex(step => step.id === id)
if (stepIdx < 0) throw new Error("Block not found.")
steps.splice(stepIdx, 1)
this.automation.definition.steps = steps

32
packages/builder/src/builderStore/store/automation/index.js
View File

@ -4,14 +4,14 @@ import Automation from "./Automation"
import { cloneDeep } from "lodash/fp"
import analytics from "analytics"
const automationActions = (store) => ({
const automationActions = store => ({
fetch: async () => {
const responses = await Promise.all([
api.get(`/api/automations`),
api.get(`/api/automations/definitions/list`),
])
const jsonResponses = await Promise.all(responses.map((x) => x.json()))
store.update((state) => {
const jsonResponses = await Promise.all(responses.map(x => x.json()))
store.update(state => {
let selected = state.selectedAutomation?.automation
state.automations = jsonResponses[0]
state.blockDefinitions = {
@ -22,7 +22,7 @@ const automationActions = (store) => ({
// if previously selected find the new obj and select it
if (selected) {
selected = jsonResponses[0].filter(
(automation) => automation._id === selected._id
automation => automation._id === selected._id
)
state.selectedAutomation = new Automation(selected[0])
}
@ -40,7 +40,7 @@ const automationActions = (store) => ({
const CREATE_AUTOMATION_URL = `/api/automations`
const response = await api.post(CREATE_AUTOMATION_URL, automation)
const json = await response.json()
store.update((state) => {
store.update(state => {
state.automations = [...state.automations, json.automation]
store.actions.select(json.automation)
return state
@ -50,9 +50,9 @@ const automationActions = (store) => ({
const UPDATE_AUTOMATION_URL = `/api/automations`
const response = await api.put(UPDATE_AUTOMATION_URL, automation)
const json = await response.json()
store.update((state) => {
store.update(state => {
const existingIdx = state.automations.findIndex(
(existing) => existing._id === automation._id
existing => existing._id === automation._id
)
state.automations.splice(existingIdx, 1, json.automation)
state.automations = state.automations
@ -65,9 +65,9 @@ const automationActions = (store) => ({
const DELETE_AUTOMATION_URL = `/api/automations/${_id}/${_rev}`
await api.delete(DELETE_AUTOMATION_URL)
store.update((state) => {
store.update(state => {
const existingIdx = state.automations.findIndex(
(existing) => existing._id === _id
existing => existing._id === _id
)
state.automations.splice(existingIdx, 1)
state.automations = state.automations
@ -81,15 +81,15 @@ const automationActions = (store) => ({
const TRIGGER_AUTOMATION_URL = `/api/automations/${_id}/trigger`
return await api.post(TRIGGER_AUTOMATION_URL)
},
select: (automation) => {
store.update((state) => {
select: automation => {
store.update(state => {
state.selectedAutomation = new Automation(cloneDeep(automation))
state.selectedBlock = null
return state
})
},
addBlockToAutomation: (block) => {
store.update((state) => {
addBlockToAutomation: block => {
store.update(state => {
const newBlock = state.selectedAutomation.addBlock(cloneDeep(block))
state.selectedBlock = newBlock
return state
@ -98,10 +98,10 @@ const automationActions = (store) => ({
name: block.name,
})
},
deleteAutomationBlock: (block) => {
store.update((state) => {
deleteAutomationBlock: block => {
store.update(state => {
const idx = state.selectedAutomation.automation.definition.steps.findIndex(
(x) => x.id === block.id
x => x.id === block.id
)
state.selectedAutomation.deleteBlock(block.id)

78
packages/builder/src/builderStore/store/frontend.js
View File

@ -49,10 +49,10 @@ export const getFrontendStore = () => {
const store = writable({ ...INITIAL_FRONTEND_STATE })
store.actions = {
initialise: async (pkg) => {
initialise: async pkg => {
const { layouts, screens, application, clientLibPath } = pkg
const components = await fetchComponentLibDefinitions(application._id)
store.update((state) => ({
store.update(state => ({
...state,
libraries: application.componentLibraries,
components,
@ -70,7 +70,7 @@ export const getFrontendStore = () => {
// Initialise backend stores
const [_integrations] = await Promise.all([
api.get("/api/integrations").then((r) => r.json()),
api.get("/api/integrations").then(r => r.json()),
])
datasources.init()
integrations.set(_integrations)
@ -82,18 +82,18 @@ export const getFrontendStore = () => {
fetch: async () => {
const response = await api.get("/api/routing")
const json = await response.json()
store.update((state) => {
store.update(state => {
state.routes = json.routes
return state
})
},
},
screens: {
select: (screenId) => {
store.update((state) => {
select: screenId => {
store.update(state => {
let screens = get(allScreens)
let screen =
screens.find((screen) => screen._id === screenId) || screens[0]
screens.find(screen => screen._id === screenId) || screens[0]
if (!screen) return state
// Update role to the screen's role setting so that it will always
@ -107,9 +107,9 @@ export const getFrontendStore = () => {
return state
})
},
create: async (screen) => {
create: async screen => {
screen = await store.actions.screens.save(screen)
store.update((state) => {
store.update(state => {
state.selectedScreenId = screen._id
state.selectedComponentId = screen.props._id
state.currentFrontEndType = FrontendTypes.SCREEN
@ -118,15 +118,15 @@ export const getFrontendStore = () => {
})
return screen
},
save: async (screen) => {
save: async screen => {
const creatingNewScreen = screen._id === undefined
const response = await api.post(`/api/screens`, screen)
screen = await response.json()
await store.actions.routing.fetch()
store.update((state) => {
store.update(state => {
const foundScreen = state.screens.findIndex(
(el) => el._id === screen._id
el => el._id === screen._id
)
if (foundScreen !== -1) {
state.screens.splice(foundScreen, 1)
@ -141,14 +141,14 @@ export const getFrontendStore = () => {
return screen
},
delete: async (screens) => {
delete: async screens => {
const screensToDelete = Array.isArray(screens) ? screens : [screens]
const screenDeletePromises = []
store.update((state) => {
store.update(state => {
for (let screenToDelete of screensToDelete) {
state.screens = state.screens.filter(
(screen) => screen._id !== screenToDelete._id
screen => screen._id !== screenToDelete._id
)
screenDeletePromises.push(
api.delete(
@ -177,8 +177,8 @@ export const getFrontendStore = () => {
},
},
layouts: {
select: (layoutId) => {
store.update((state) => {
select: layoutId => {
store.update(state => {
const layout =
store.actions.layouts.find(layoutId) || get(store).layouts[0]
if (!layout) return
@ -189,15 +189,15 @@ export const getFrontendStore = () => {
return state
})
},
save: async (layout) => {
save: async layout => {
const layoutToSave = cloneDeep(layout)
const creatingNewLayout = layoutToSave._id === undefined
const response = await api.post(`/api/layouts`, layoutToSave)
const savedLayout = await response.json()
store.update((state) => {
store.update(state => {
const layoutIdx = state.layouts.findIndex(
(stateLayout) => stateLayout._id === savedLayout._id
stateLayout => stateLayout._id === savedLayout._id
)
if (layoutIdx >= 0) {
// update existing layout
@ -216,14 +216,14 @@ export const getFrontendStore = () => {
return savedLayout
},
find: (layoutId) => {
find: layoutId => {
if (!layoutId) {
return get(mainLayout)
}
const storeContents = get(store)
return storeContents.layouts.find((layout) => layout._id === layoutId)
return storeContents.layouts.find(layout => layout._id === layoutId)
},
delete: async (layoutToDelete) => {
delete: async layoutToDelete => {
const response = await api.delete(
`/api/layouts/${layoutToDelete._id}/${layoutToDelete._rev}`
)
@ -231,9 +231,9 @@ export const getFrontendStore = () => {
const json = await response.json()
throw new Error(json.message)
}
store.update((state) => {
store.update(state => {
state.layouts = state.layouts.filter(
(layout) => layout._id !== layoutToDelete._id
layout => layout._id !== layoutToDelete._id
)
if (layoutToDelete._id === state.selectedLayoutId) {
state.selectedLayoutId = get(mainLayout)._id
@ -243,7 +243,7 @@ export const getFrontendStore = () => {
},
},
components: {
select: (component) => {
select: component => {
if (!component) {
return
}
@ -263,13 +263,13 @@ export const getFrontendStore = () => {
}
// Otherwise select the component
store.update((state) => {
store.update(state => {
state.selectedComponentId = component._id
state.currentView = "component"
return state
})
},
getDefinition: (componentName) => {
getDefinition: componentName => {
if (!componentName) {
return null
}
@ -287,7 +287,7 @@ export const getFrontendStore = () => {
// Generate default props
let props = { ...presetProps }
if (definition.settings) {
definition.settings.forEach((setting) => {
definition.settings.forEach(setting => {
if (setting.defaultValue !== undefined) {
props[setting.key] = setting.defaultValue
}
@ -367,7 +367,7 @@ export const getFrontendStore = () => {
// Save components and update UI
await store.actions.preview.saveSelected()
store.update((state) => {
store.update(state => {
state.currentView = "component"
state.selectedComponentId = componentInstance._id
return state
@ -380,7 +380,7 @@ export const getFrontendStore = () => {
return componentInstance
},
delete: async (component) => {
delete: async component => {
if (!component) {
return
}
@ -391,7 +391,7 @@ export const getFrontendStore = () => {
const parent = findComponentParent(asset.props, component._id)
if (parent) {
parent._children = parent._children.filter(
(child) => child._id !== component._id
child => child._id !== component._id
)
store.actions.components.select(parent)
}
@ -404,7 +404,7 @@ export const getFrontendStore = () => {
}
// Update store with copied component
store.update((state) => {
store.update(state => {
state.componentToPaste = cloneDeep(component)
state.componentToPaste.isCut = cut
return state
@ -415,7 +415,7 @@ export const getFrontendStore = () => {
const parent = findComponentParent(selectedAsset.props, component._id)
if (parent) {
parent._children = parent._children.filter(
(child) => child._id !== component._id
child => child._id !== component._id
)
store.actions.components.select(parent)
}
@ -423,7 +423,7 @@ export const getFrontendStore = () => {
},
paste: async (targetComponent, mode) => {
let promises = []
store.update((state) => {
store.update(state => {
// Stop if we have nothing to paste
if (!state.componentToPaste) {
return state
@ -444,7 +444,7 @@ export const getFrontendStore = () => {
if (cut) {
state.componentToPaste = null
} else {
const randomizeIds = (component) => {
const randomizeIds = component => {
if (!component) {
return
}
@ -497,7 +497,7 @@ export const getFrontendStore = () => {
}
await store.actions.preview.saveSelected()
},
updateCustomStyle: async (style) => {
updateCustomStyle: async style => {
const selected = get(selectedComponent)
selected._styles.custom = style
await store.actions.preview.saveSelected()
@ -507,7 +507,7 @@ export const getFrontendStore = () => {
selected._styles = { normal: {}, hover: {}, active: {} }
await store.actions.preview.saveSelected()
},
updateTransition: async (transition) => {
updateTransition: async transition => {
const selected = get(selectedComponent)
if (transition == null || transition === "") {
selected._transition = ""
@ -522,7 +522,7 @@ export const getFrontendStore = () => {
return
}
component[name] = value
store.update((state) => {
store.update(state => {
state.selectedComponentId = component._id
return state
})

18
packages/builder/src/builderStore/store/hosting.js
View File

@ -17,20 +17,18 @@ export const getHostingStore = () => {
api.get("/api/hosting/"),
api.get("/api/hosting/urls"),
])
const [info, urls] = await Promise.all(
responses.map((resp) => resp.json())
)
store.update((state) => {
const [info, urls] = await Promise.all(responses.map(resp => resp.json()))
store.update(state => {
state.hostingInfo = info
state.appUrl = urls.app
return state
})
return info
},
save: async (hostingInfo) => {
save: async hostingInfo => {
const response = await api.post("/api/hosting", hostingInfo)
const revision = (await response.json()).rev
store.update((state) => {
store.update(state => {
state.hostingInfo = {
...hostingInfo,
_rev: revision,
@ -40,12 +38,10 @@ export const getHostingStore = () => {
},
fetchDeployedApps: async () => {
let deployments = await (await get("/api/hosting/apps")).json()
store.update((state) => {
store.update(state => {
state.deployedApps = deployments
state.deployedAppNames = Object.values(deployments).map(
(app) => app.name
)
state.deployedAppUrls = Object.values(deployments).map((app) => app.url)
state.deployedAppNames = Object.values(deployments).map(app => app.name)
state.deployedAppUrls = Object.values(deployments).map(app => app.url)
return state
})
return deployments

4
packages/builder/src/builderStore/store/localStorage.js
View File

@ -12,13 +12,13 @@ export const localStorageStore = (localStorageKey, initialValue) => {
})
// New store setter which updates the store and localstorage
const set = (value) => {
const set = value => {
store.set(value)
localStorage.setItem(localStorageKey, JSON.stringify(value))
}
// New store updater which updates the store and localstorage
const update = (updaterFn) => set(updaterFn(get(store)))
const update = updaterFn => set(updaterFn(get(store)))
// Hydrates the store from localstorage
const hydrate = () => {

10
packages/builder/src/builderStore/store/notifications.js
View File

@ -6,7 +6,7 @@ export const notificationStore = writable({
})
export function send(message, type = "default") {
notificationStore.update((state) => {
notificationStore.update(state => {
state.notifications = [
...state.notifications,
{ id: generate(), type, message },
@ -16,8 +16,8 @@ export function send(message, type = "default") {
}
export const notifier = {
danger: (msg) => send(msg, "danger"),
warning: (msg) => send(msg, "warning"),
info: (msg) => send(msg, "info"),
success: (msg) => send(msg, "success"),
danger: msg => send(msg, "danger"),
warning: msg => send(msg, "warning"),
info: msg => send(msg, "info"),
success: msg => send(msg, "success"),
}

4
packages/builder/src/builderStore/store/screenTemplates/index.js
View File

@ -3,7 +3,7 @@ import rowDetailScreen from "./rowDetailScreen"
import rowListScreen from "./rowListScreen"
import createFromScratchScreen from "./createFromScratchScreen"
const allTemplates = (tables) => [
const allTemplates = tables => [
...newRowScreen(tables),
...rowDetailScreen(tables),
...rowListScreen(tables),
@ -18,7 +18,7 @@ const createTemplateOverride = (frontendState, create) => () => {
}
export default (frontendState, tables) => {
const enrichTemplate = (template) => ({
const enrichTemplate = template => ({
...template,
create: createTemplateOverride(frontendState, template.create),
})

8
packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js
View File

@ -10,7 +10,7 @@ import {
} from "./utils/commonComponents"
export default function (tables) {
return tables.map((table) => {
return tables.map(table => {
return {
name: `${table.name} - New`,
create: () => createScreen(table),
@ -19,14 +19,14 @@ export default function (tables) {
})
}
export const newRowUrl = (table) => sanitizeUrl(`/${table.name}/new/row`)
export const newRowUrl = table => sanitizeUrl(`/${table.name}/new/row`)
export const NEW_ROW_TEMPLATE = "NEW_ROW_TEMPLATE"
function generateTitleContainer(table, formId) {
return makeTitleContainer("New Row").addChild(makeSaveButton(table, formId))
}
const createScreen = (table) => {
const createScreen = table => {
const screen = new Screen()
.component("@budibase/standard-components/container")
.instanceName(`${table.name} - New`)
@ -52,7 +52,7 @@ const createScreen = (table) => {
// Add all form fields from this schema to the field group
const datasource = { type: "table", tableId: table._id }
makeDatasourceFormComponents(datasource).forEach((component) => {
makeDatasourceFormComponents(datasource).forEach(component => {
fieldGroup.addChild(component)
})

8
packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js
View File

@ -13,7 +13,7 @@ import {
} from "./utils/commonComponents"
export default function (tables) {
return tables.map((table) => {
return tables.map(table => {
return {
name: `${table.name} - Detail`,
create: () => createScreen(table),
@ -23,7 +23,7 @@ export default function (tables) {
}
export const ROW_DETAIL_TEMPLATE = "ROW_DETAIL_TEMPLATE"
export const rowDetailUrl = (table) => sanitizeUrl(`/${table.name}/:id`)
export const rowDetailUrl = table => sanitizeUrl(`/${table.name}/:id`)
function generateTitleContainer(table, title, formId, repeaterId) {
// have to override style for this, its missing margin
@ -80,7 +80,7 @@ function generateTitleContainer(table, title, formId, repeaterId) {
return makeTitleContainer(title).addChild(deleteButton).addChild(saveButton)
}
const createScreen = (table) => {
const createScreen = table => {
const provider = new Component("@budibase/standard-components/dataprovider")
.instanceName(`Data Provider`)
.customProps({
@ -122,7 +122,7 @@ const createScreen = (table) => {
// Add all form fields from this schema to the field group
const datasource = { type: "table", tableId: table._id }
makeDatasourceFormComponents(datasource).forEach((component) => {
makeDatasourceFormComponents(datasource).forEach(component => {
fieldGroup.addChild(component)
})

6
packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js
View File

@ -5,7 +5,7 @@ import { Component } from "./utils/Component"
import { makePropSafe } from "@budibase/string-templates"
export default function (tables) {
return tables.map((table) => {
return tables.map(table => {
return {
name: `${table.name} - List`,
create: () => createScreen(table),
@ -15,7 +15,7 @@ export default function (tables) {
}
export const ROW_LIST_TEMPLATE = "ROW_LIST_TEMPLATE"
export const rowListUrl = (table) => sanitizeUrl(`/${table.name}`)
export const rowListUrl = table => sanitizeUrl(`/${table.name}`)
function generateTitleContainer(table) {
const newButton = new Component("@budibase/standard-components/button")
@ -70,7 +70,7 @@ function generateTitleContainer(table) {
.addChild(newButton)
}
const createScreen = (table) => {
const createScreen = table => {
const provider = new Component("@budibase/standard-components/dataprovider")
.instanceName(`Data Provider`)
.customProps({

2
packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js
View File

@ -178,7 +178,7 @@ export function makeDatasourceFormComponents(datasource) {
const { schema } = getSchemaForDatasource(datasource, true)
let components = []
let fields = Object.keys(schema || {})
fields.forEach((field) => {
fields.forEach(field => {
const fieldSchema = schema[field]
// skip autocolumns
if (fieldSchema.autocolumn) {

2
packages/builder/src/builderStore/store/screenTemplates/utils/sanitizeUrl.js
View File

@ -1,7 +1,7 @@
export default function (url) {
return url
.split("/")
.map((part) => {
.map(part => {
// if parameter, then use as is
if (part.startsWith(":")) return part
return encodeURIComponent(part.replace(/ /g, "-"))

4
packages/builder/src/builderStore/store/theme.js
View File

@ -9,14 +9,14 @@ export const getThemeStore = () => {
const store = localStorageStore("bb-theme", initialValue)
// Update theme class when store changes
store.subscribe((state) => {
store.subscribe(state => {
// Handle any old local storage values - this can be removed after the update
if (state.darkMode !== undefined) {
store.set(initialValue)
return
}
state.options.forEach((option) => {
state.options.forEach(option => {
themeElement.classList.toggle(
`spectrum--${option}`,
option === state.theme

6
packages/builder/src/builderStore/storeUtils.js
View File

@ -2,14 +2,14 @@
* Recursively searches for a specific component ID
*/
export const findComponent = (rootComponent, id) => {
return searchComponentTree(rootComponent, (comp) => comp._id === id)
return searchComponentTree(rootComponent, comp => comp._id === id)
}
/**
* Recursively searches for a specific component type
*/
export const findComponentType = (rootComponent, type) => {
return searchComponentTree(rootComponent, (comp) => comp._component === type)
return searchComponentTree(rootComponent, comp => comp._component === type)
}
/**
@ -68,7 +68,7 @@ export const findAllMatchingComponents = (rootComponent, selector) => {
}
let components = []
if (rootComponent._children) {
rootComponent._children.forEach((child) => {
rootComponent._children.forEach(child => {
components = [
...components,
...findAllMatchingComponents(child, selector),

2
packages/builder/src/builderStore/uuid.js
View File

@ -1,7 +1,7 @@
export function uuid() {
// always want to make this start with a letter, as this makes it
// easier to use with template string bindings in the client
return "cxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, (c) => {
return "cxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, c => {
const r = (Math.random() * 16) | 0,
v = c == "x" ? r : (r & 0x3) | 0x8
return v.toString(16)

21
packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
View File

@ -63,13 +63,14 @@
<div class="tab-container">
{#each tabs as tab, idx}
<div bind:this={anchors[idx]}>
<ActionButton
quiet
size="S"
icon={tab.icon}
disabled={tab.disabled}
on:click={tab.disabled ? null : () => onChangeTab(idx)}>
<div bind:this={anchors[idx]}>
<ActionButton
quiet
size="S"
icon={tab.icon}
disabled={tab.disabled}
on:click={tab.disabled ? null : () => onChangeTab(idx)}
>
{tab.label}
</ActionButton>
</div>
@ -79,14 +80,16 @@
on:close={() => (selectedIndex = null)}
bind:this={popover}
{anchor}
align="left">
align="left"
>
<DropdownContainer>
{#each blocks as [stepId, blockDefinition]}
<DropdownItem
icon={blockDefinition.icon}
title={blockDefinition.name}
subtitle={blockDefinition.description}
on:click={() => addBlockToAutomation(stepId, blockDefinition)} />
on:click={() => addBlockToAutomation(stepId, blockDefinition)}
/>
{/each}
</DropdownContainer>
</Popover>

6
packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte
View File

@ -3,10 +3,12 @@
height="75"
viewBox="0 0 9 75"
fill="none"
xmlns="http://www.w3.org/2000/svg">
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.0625 70H9L4.5 75L0 70H3.9375V65H5.0625V70Z"
fill="var(--grey-5)" />
fill="var(--grey-5)"
/>
<rect x="4" width="1" height="65" fill="var(--grey-5)" />
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 323 B

After

Width:  |  Height:  |  Size: 326 B

3
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte
View File

@ -26,7 +26,8 @@
class="block"
animate:flip={{ duration: 600 }}
in:fade|local
out:fly|local={{ x: 100 }}>
out:fly|local={{ x: 100 }}
>
<FlowItem {onSelect} {block} />
{#if idx !== blocks.length - 1}
<Arrow />

17
packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte
View File

@ -14,7 +14,7 @@
$: allowDeleteTrigger = !steps.length
function deleteStep() {
console.log('Running')
console.log("Running")
automationStore.actions.deleteAutomationBlock(block)
}
</script>
@ -22,23 +22,24 @@
<div
class={`block ${block.type} hoverable`}
class:selected
on:click={() => onSelect(block)}>
on:click={() => onSelect(block)}
>
<header>
{#if block.type === 'TRIGGER'}
{#if block.type === "TRIGGER"}
<Icon name="Light" />
<span>When this happens...</span>
{:else if block.type === 'ACTION'}
{:else if block.type === "ACTION"}
<Icon name="FlashOn" />
<span>Do this...</span>
{:else if block.type === 'LOGIC'}
{:else if block.type === "LOGIC"}
<Icon name="Branch2" />
<span>Only continue if...</span>
{/if}
<div class="label">
{#if block.type === 'TRIGGER'}Trigger{:else}Step {blockIdx + 1}{/if}
{#if block.type === "TRIGGER"}Trigger{:else}Step {blockIdx + 1}{/if}
</div>
{#if block.type !== 'TRIGGER' || allowDeleteTrigger}
<div on:click|stopPropagation={deleteStep}><Icon name="Close"/></div>
{#if block.type !== "TRIGGER" || allowDeleteTrigger}
<div on:click|stopPropagation={deleteStep}><Icon name="Close" /></div>
{/if}
</header>
<hr />

6
packages/builder/src/components/automation/AutomationPanel/CreateAutomationModal.svelte
View File

@ -27,12 +27,14 @@
confirmText="Create"
size="L"
onConfirm={createAutomation}
disabled={!valid}>
disabled={!valid}
>
<Input bind:value={name} label="Name" />
<a
slot="footer"
target="_blank"
href="https://docs.budibase.com/automate/introduction-to-automate">
href="https://docs.budibase.com/automate/introduction-to-automate"
>
<Icon name="InfoOutline" />
<span>Learn about automations</span>
</a>

6
packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
View File

@ -24,9 +24,9 @@
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
</div>
<MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}
>Delete</MenuItem
>
<MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}>
Delete
</MenuItem>
</ActionMenu>
<ConfirmDialog

29
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View File

@ -54,40 +54,43 @@
{#each inputs as [key, value]}
<div class="block-field">
<Label>{value.title}</Label>
{#if value.type === 'string' && value.enum}
{#if value.type === "string" && value.enum}
<Select
bind:value={block.inputs[key]}
options={value.enum}
getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)} />
{:else if value.customType === 'password'}
getOptionLabel={(x, idx) => (value.pretty ? value.pretty[idx] : x)}
/>
{:else if value.customType === "password"}
<Input type="password" bind:value={block.inputs[key]} />
{:else if value.customType === 'email'}
{:else if value.customType === "email"}
<DrawerBindableInput
panel={AutomationBindingPanel}
type={'email'}
type={"email"}
value={block.inputs[key]}
on:change={e => (block.inputs[key] = e.detail)}
{bindings} />
{:else if value.customType === 'table'}
{bindings}
/>
{:else if value.customType === "table"}
<TableSelector bind:value={block.inputs[key]} />
{:else if value.customType === 'row'}
{:else if value.customType === "row"}
<RowSelector bind:value={block.inputs[key]} {bindings} />
{:else if value.customType === 'webhookUrl'}
{:else if value.customType === "webhookUrl"}
<WebhookDisplay value={block.inputs[key]} />
{:else if value.customType === 'triggerSchema'}
{:else if value.customType === "triggerSchema"}
<SchemaSetup bind:value={block.inputs[key]} />
{:else if value.type === 'string' || value.type === 'number'}
{:else if value.type === "string" || value.type === "number"}
<DrawerBindableInput
panel={AutomationBindingPanel}
type={value.customType}
value={block.inputs[key]}
on:change={e => (block.inputs[key] = e.detail)}
{bindings} />
{bindings}
/>
{/if}
</div>
{/each}
</div>
{#if stepId === 'WEBHOOK'}
{#if stepId === "WEBHOOK"}
<Button secondary on:click={() => webhookModal.show()}>Set Up Webhook</Button>
{/if}

35
packages/builder/src/components/automation/SetupPanel/CodeEditorModal.svelte Normal file
View File

@ -0,0 +1,35 @@
<script>
import { Button, Modal, ModalContent } from "@budibase/bbui"
let modal
export const show = () => {
modal.show()
}
export const hide = () => {
modal.hide()
}
</script>
<Modal bind:this={modal} width="60%">
<ModalContent
title="Edit Code"
showConfirmButton={false}
showCancelButton={false}
>
<div class="container">
<slot />
</div>
</ModalContent>
</Modal>
<Button primary on:click={show}>Edit Code</Button>
<style>
.container :global(section > header) {
/* Fix margin defined in BBUI as L rather than XL */
margin-bottom: var(--spacing-xl);
}
.container :global(textarea) {
min-height: 60px;
}
</style>

55
packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte Normal file
View File

@ -0,0 +1,55 @@
<script>
import { queries } from "stores/backend"
import { Select } from "@budibase/bbui"
import DrawerBindableInput from "../../common/DrawerBindableInput.svelte"
import AutomationBindingPanel from "./AutomationBindingPanel.svelte"
export let value
export let bindings
$: query = $queries.list.find(query => query._id === value?.queryId)
$: parameters = query?.parameters ?? []
// Ensure any nullish queryId values get set to empty string so
// that the select works
$: if (value?.queryId == null) value = { queryId: "" }
$: console.log("daValuz", value)
</script>
<div class="block-field">
<Select bind:value={value.queryId} extraThin secondary>
<option value="">Choose an option</option>
{#each $queries.list as query}
<option value={query._id}>{query.name}</option>
{/each}
</Select>
</div>
{#if parameters.length}
<div class="schema-fields">
{#each parameters as field}
<DrawerBindableInput
panel={AutomationBindingPanel}
extraThin
value={value[field.name]}
on:change={e => {
value[field.name] = e.detail
}}
label={field.name}
type="string"
{bindings}
/>
{/each}
</div>
{/if}
<style>
.schema-fields {
display: grid;
grid-gap: var(--spacing-xl);
margin-top: var(--spacing-xl);
}
.schema-fields :global(label) {
text-transform: capitalize;
}
</style>

15
packages/builder/src/components/automation/SetupPanel/QuerySelector.svelte Normal file
View File

@ -0,0 +1,15 @@
<script>
import { queries } from "stores/backend"
import { Select } from "@budibase/bbui"
export let value
</script>
<div class="block-field">
<Select bind:value secondary extraThin>
<option value="">Choose an option</option>
{#each $queries.list as query}
<option value={query._id}>{query.name}</option>
{/each}
</Select>
</div>

11
packages/builder/src/components/automation/SetupPanel/RowSelector.svelte
View File

@ -23,7 +23,8 @@
bind:value={value.tableId}
options={$tables.list}
getOptionLabel={table => table.name}
getOptionValue={table => table._id} />
getOptionValue={table => table._id}
/>
{#if schemaFields.length}
<div class="schema-fields">
@ -33,15 +34,17 @@
<Select
label={field}
bind:value={value[field]}
options={schema.constraints.inclusion} />
{:else if schema.type === 'string' || schema.type === 'number'}
options={schema.constraints.inclusion}
/>
{:else if schema.type === "string" || schema.type === "number"}
<DrawerBindableInput
panel={AutomationBindingPanel}
value={value[field]}
on:change={e => (value[field] = e.detail)}
label={field}
type="string"
{bindings} />
{bindings}
/>
{/if}
{/if}
{/each}

13
packages/builder/src/components/automation/SetupPanel/SchemaSetup.svelte
View File

@ -54,7 +54,9 @@
</script>
<div class="root">
<div class="add-field"><i class="ri-add-line" on:click={addField} /></div>
<div class="add-field">
<i class="ri-add-line" on:click={addField} />
</div>
<div class="spacer" />
{#each fieldsArray as field}
<div class="field">
@ -62,14 +64,17 @@
value={field.name}
secondary
placeholder="Enter field name"
on:change={fieldNameChanged(field.name)} />
on:change={fieldNameChanged(field.name)}
/>
<Select
value={field.type}
on:change={e => (value[field.name] = e.target.value)}
options={typeOptions} />
options={typeOptions}
/>
<i
class="remove-field ri-delete-bin-line"
on:click={() => removeField(field.name)} />
on:click={() => removeField(field.name)}
/>
</div>
{/each}
</div>

3
packages/builder/src/components/automation/SetupPanel/TableSelector.svelte
View File

@ -9,4 +9,5 @@
bind:value
options={$tables.list}
getOptionLabel={table => table.name}
getOptionValue={table => table._id} />
getOptionValue={table => table._id}
/>

8
packages/builder/src/components/backend/DataTable/DataTable.svelte
View File

@ -53,12 +53,14 @@
{data}
allowEditing={true}
bind:hideAutocolumns
{loading}>
{loading}
>
<CreateColumnButton />
{#if schema && Object.keys(schema).length > 0}
<CreateRowButton
title={isUsersTable ? 'Create user' : 'Create row'}
modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow} />
title={isUsersTable ? "Create user" : "Create row"}
modalContentComponent={isUsersTable ? CreateEditUser : CreateEditRow}
/>
<CreateViewButton />
<ManageAccessButton resourceId={$tables.selected?._id} />
{#if isUsersTable}

18
packages/builder/src/components/backend/DataTable/RowFieldControl.svelte
View File

@ -13,21 +13,22 @@
$: label = capitalise(meta.name)
</script>
{#if type === 'options'}
{#if type === "options"}
<Select
{label}
data-cy="{meta.name}-select"
bind:value
options={meta.constraints.inclusion} />
{:else if type === 'datetime'}
options={meta.constraints.inclusion}
/>
{:else if type === "datetime"}
<DatePicker {label} bind:value />
{:else if type === 'attachment'}
{:else if type === "attachment"}
<Dropzone {label} bind:value />
{:else if type === 'boolean'}
{:else if type === "boolean"}
<Toggle text={label} bind:checked={value} data-cy="{meta.name}-input" />
{:else if type === 'link'}
{:else if type === "link"}
<LinkedRowSelector bind:linkedRows={value} schema={meta} />
{:else if type === 'longform'}
{:else if type === "longform"}
<TextArea {label} bind:value />
{:else}
<Input
@ -35,5 +36,6 @@
data-cy="{meta.name}-input"
{type}
bind:value
disabled={readonly} />
disabled={readonly}
/>
{/if}

14
packages/builder/src/components/backend/DataTable/Table.svelte
View File

@ -40,7 +40,7 @@
component: RoleCell,
},
]
UNEDITABLE_USER_FIELDS.forEach((field) => {
UNEDITABLE_USER_FIELDS.forEach(field => {
if (schema[field]) {
schema[field].editable = false
}
@ -68,19 +68,19 @@
rows: selectedRows,
type: "delete",
})
data = data.filter((row) => !selectedRows.includes(row))
data = data.filter(row => !selectedRows.includes(row))
notifications.success(`Successfully deleted ${selectedRows.length} rows`)
selectedRows = []
}
const editRow = (row) => {
const editRow = row => {
editableRow = row
if (row) {
editRowModal.show()
}
}
const editColumn = (field) => {
const editColumn = field => {
editableColumn = schema?.[field]
if (editableColumn) {
editColumnModal.show()
@ -118,9 +118,9 @@
allowEditRows={allowEditing}
allowEditColumns={allowEditing}
showAutoColumns={!hideAutocolumns}
on:editcolumn={(e) => editColumn(e.detail)}
on:editrow={(e) => editRow(e.detail)}
on:clickrelationship={(e) => selectRelationship(e.detail)}
on:editcolumn={e => editColumn(e.detail)}
on:editrow={e => editRow(e.detail)}
on:clickrelationship={e => selectRelationship(e.detail)}
/>
{/key}

Some files were not shown because too many files have changed in this diff Show More