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

Merge pull request #1437 from Budibase/fix/views-and-prettier 

Fix prettier and other misc fixes
This commit is contained in:
Andrew Kingston 2021-05-04 11:33:35 +01:00 committed by GitHub
parent d465fd8893 797e8a8b67
commit 2942b4f6bc
380 changed files with 2127 additions and 1607 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>

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>

13
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"
focusable="false"
aria-hidden="true">
aria-hidden="true"
>
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
<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>

20
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,6 +80,9 @@
</div>
<style>
.spectrum-Dialog--extraLarge {
width: 1000px;
}
.content-grid {
display: grid;
position: relative;

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>

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}=`)
})
}

63
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 }
})
@ -339,7 +348,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
})
@ -349,9 +358,7 @@ function bindingReplacement(bindableProperties, textWithBindings, convertTo) {
let newBoundValue = boundValue
for (let from of convertFromProps) {
if (newBoundValue.includes(from)) {
const binding = bindableProperties.find(
(el) => el[convertFrom] === from
)
const binding = bindableProperties.find(el => el[convertFrom] === from)
newBoundValue = newBoundValue.replace(from, binding[convertTo])
}
}

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>

4
packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
View File

@ -60,7 +60,7 @@
<div class="section">
{#each categories as [categoryName, bindings]}
<Heading size="XS">{categoryName}</Heading>
{#each bindableProperties.filter((binding) =>
{#each bindableProperties.filter(binding =>
binding.label.match(searchRgx)
) as binding}
<div class="binding" on:click={() => addToText(binding)}>
@ -76,7 +76,7 @@
</div>
<div class="section">
<Heading size="XS">Helpers</Heading>
{#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
<div class="binding" on:click={() => addToText(helper)}>
<span class="binding__label">{helper.label}</span>
<br />

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}

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}

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

@ -62,14 +62,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}

3
packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
View File

@ -58,7 +58,8 @@
{data}
{loading}
allowEditing={!view?.calculation}
bind:hideAutocolumns>
bind:hideAutocolumns
>
<FilterButton {view} />
<CalculateButton {view} />
{#if view.calculation}

3
packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
View File

@ -12,7 +12,8 @@
size="S"
quiet
on:click={modal.show}
active={view.field && view.calculation}>
active={view.field && view.calculation}
>
Calculate
</ActionButton>
<Modal bind:this={modal}>

5
packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
View File

@ -22,8 +22,9 @@
bind:this={modal}
okText="Delete"
onOk={confirmDeletion}
title="Confirm Deletion">
title="Confirm Deletion"
>
Are you sure you want to delete
{selectedRows.length}
row{selectedRows.length > 1 ? 's' : ''}?
row{selectedRows.length > 1 ? "s" : ""}?
</ConfirmDialog>

3
packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
View File

@ -12,7 +12,8 @@
size="S"
quiet
on:click={modal.show}
active={view.filters?.length}>
active={view.filters?.length}
>
Filter
</ActionButton>
<Modal bind:this={modal}>

3
packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
View File

@ -13,7 +13,8 @@
size="S"
quiet
active={!!view.groupBy}
on:click={modal.show}>
on:click={modal.show}
>
Group By
</Button>
<Modal bind:this={modal}>

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