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

Merge pull request #5937 from Budibase/feature/required-field-focus 

Builder focus behaviour
This commit is contained in:
deanhannigan 2022-06-13 09:04:04 +01:00 committed by GitHub
parent c0549c0ebf adf1eb5895
commit 34f7d835f9
32 changed files with 1087 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,8 @@
<script>
import "@spectrum-css/actionbutton/dist/index-vars.css"
import { createEventDispatcher } from "svelte"
import { createEventDispatcher, getContext } from "svelte"
const dispatch = createEventDispatcher()
const context = getContext("builderFocus")
export let quiet = false
export let emphasized = false
@ -13,6 +14,14 @@
export let size = "M"
export let active = false
export let fullWidth = false
export let autofocus = false
let focus = false
let actionButton
$: focus = autofocus && actionButton !== undefined
$: if (focus) {
actionButton.focus()
}
function longPress(element) {
if (!longPressable) return
@ -37,6 +46,7 @@
<button
data-cy={dataCy}
bind:this={actionButton}
use:longPress
class:spectrum-ActionButton--quiet={quiet}
class:spectrum-ActionButton--emphasized={emphasized}
@ -44,9 +54,17 @@
class:fullWidth
class="spectrum-ActionButton spectrum-ActionButton--size{size}"
class:active
class:is-focused={focus}
{disabled}
on:longPress
on:click|preventDefault
on:focus={() => {
focus = true
}}
on:blur={() => {
focus = false
if (context) context.clear()
}}
>
{#if longPressable}
<svg
@ -80,4 +98,10 @@
.active svg {
color: var(--spectrum-global-color-blue-600);
}
button.is-focused {
border-color: var(
--spectrum-textfield-m-border-color-down,
var(--spectrum-alias-border-color-mouse-focus)
);
}
</style>

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

@ -13,6 +13,7 @@
export let options = []
export let getOptionLabel = option => extractProperty(option, "label")
export let getOptionValue = option => extractProperty(option, "value")
export let autofocus = false
const dispatch = createEventDispatcher()
const onChange = e => {
@ -35,6 +36,7 @@
{options}
{placeholder}
{readonly}
{autofocus}
{getOptionLabel}
{getOptionValue}
on:change={onChange}

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

@ -3,37 +3,28 @@
import "@spectrum-css/popover/dist/index-vars.css"
import "@spectrum-css/menu/dist/index-vars.css"
import { fly } from "svelte/transition"
import { createEventDispatcher } from "svelte"
import { createEventDispatcher, getContext } from "svelte"
export let value = null
export let id = null
export let placeholder = "Choose an option or type"
export let disabled = false
export let readonly = false
export let autofocus = false
export let error = null
export let options = []
export let getOptionLabel = option => option
export let getOptionValue = option => option
const context = getContext("builderFocus")
const dispatch = createEventDispatcher()
let open = false
let focus = false
$: fieldText = getFieldText(value, options, placeholder)
let comboInput
const getFieldText = (value, options, placeholder) => {
// Always use placeholder if no value
if (value == null || value === "") {
return placeholder || "Choose an option or type"
}
// Wait for options to load if there is a value but no options
if (!options?.length) {
return ""
}
// Render the label if the selected option is found, otherwise raw value
const selected = options.find(option => getOptionValue(option) === value)
return selected ? getOptionLabel(selected) : value
$: focus = autofocus && comboInput !== undefined
$: if (focus) {
comboInput.focus()
}
const selectOption = value => {
@ -66,10 +57,16 @@
class:is-focused={open || focus}
>
<input
bind:this={comboInput}
{id}
type="text"
on:focus={() => (focus = true)}
on:blur={() => (focus = false)}
on:focus={() => {
focus = true
}}
on:blur={() => {
focus = false
context.clear()
}}
on:change={onType}
value={value || ""}
placeholder={placeholder || ""}

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

@ -13,6 +13,7 @@
export let readonly = false
export let autocomplete = false
export let sort = false
export let autofocus = false
const dispatch = createEventDispatcher()
$: selectedLookupMap = getSelectedLookupMap(value)
@ -85,4 +86,5 @@
{getOptionValue}
onSelectOption={toggleOption}
{sort}
{autofocus}
/>

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

@ -3,7 +3,7 @@
import "@spectrum-css/popover/dist/index-vars.css"
import "@spectrum-css/menu/dist/index-vars.css"
import { fly } from "svelte/transition"
import { createEventDispatcher } from "svelte"
import { createEventDispatcher, getContext } from "svelte"
import clickOutside from "../../Actions/click_outside"
import Search from "./Search.svelte"
@ -26,9 +26,18 @@
export let autoWidth = false
export let autocomplete = false
export let sort = false
export let autofocus = false
const context = getContext("builderFocus")
const dispatch = createEventDispatcher()
let searchTerm = null
let focus = false
let pickerButton
$: focus = autofocus && pickerButton !== undefined
$: if (focus) {
pickerButton.focus()
}
$: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
$: filteredOptions = getFilteredOptions(
@ -80,7 +89,24 @@
class:is-invalid={!!error}
class:is-open={open}
aria-haspopup="listbox"
class:is-focused={focus}
bind:this={pickerButton}
on:mousedown={onClick}
on:keydown={e => {
var keycode = e.key
if (focus) {
if (keycode === "Enter") {
onClick(e)
}
}
}}
on:focus={() => {
focus = true
}}
on:blur={() => {
focus = false
if (context) context.clear()
}}
>
{#if fieldIcon}
<span class="icon-Placeholder-Padding">
@ -199,6 +225,7 @@
}
.spectrum-Picker {
width: 100%;
box-shadow: none;
}
.spectrum-Picker-label:not(.auto-width) {
overflow: hidden;

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

@ -16,6 +16,7 @@
export let autoWidth = false
export let autocomplete = false
export let sort = false
export let autofocus = false
const dispatch = createEventDispatcher()
let open = false
@ -74,6 +75,7 @@
{fieldIcon}
{autocomplete}
{sort}
{autofocus}
isPlaceholder={value == null || value === ""}
placeholderOption={placeholder}
isOptionSelected={option => option === value}

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

@ -14,6 +14,7 @@
export let getOptionLabel = option => option
export let getOptionValue = option => option
export let sort = false
export let autofocus = false
const dispatch = createEventDispatcher()
const onChange = e => {
@ -35,5 +36,6 @@
{getOptionValue}
on:change={onChange}
on:click
{autofocus}
/>
</Field>

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

@ -18,6 +18,7 @@
export let autoWidth = false
export let sort = false
export let tooltip = ""
export let autofocus = false
const dispatch = createEventDispatcher()
const onChange = e => {
@ -44,6 +45,7 @@
{placeholder}
{autoWidth}
{sort}
{autofocus}
{getOptionLabel}
{getOptionValue}
{getOptionIcon}

354
packages/builder/cypress/integration/createComponents.spec.js
View File

@ -1,10 +1,8 @@
// TODO for now components are skipped, might not be good to keep doing this
import filterTests from "../support/filterTests"
const interact = require('../support/interact')
filterTests(['all'], () => {
xcontext("Create Components", () => {
context("Create Components", () => {
let headlineId
before(() => {
@ -13,12 +11,29 @@ filterTests(['all'], () => {
cy.createTable("dog")
cy.addColumn("dog", "name", "Text")
cy.addColumn("dog", "age", "Number")
cy.addColumn("dog", "type", "Options")
cy.addColumn("dog", "breed", "Options")
cy.navigateToFrontend()
cy.wait(1000) //allow the iframe some wiggle room
})
//Use the tree to delete a selected component
const deleteSelectedComponent = () => {
cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({
force: true,
})
cy.get(".spectrum-Popover.is-open li")
.contains("Delete")
.click()
cy.get(".spectrum-Modal button")
.contains("Delete Component")
.click({
force: true,
})
}
it("should add a container", () => {
cy.addComponent(null, "Container").then(componentId => {
cy.addComponent("Layout", "Container").then(componentId => {
cy.getComponent(componentId).should("exist")
})
})
@ -32,40 +47,43 @@ filterTests(['all'], () => {
it("should change the text of the headline", () => {
const text = "Lorem ipsum dolor sit amet."
cy.get(interact.SETTINGS).click()
cy.get(interact.SETTINGS_INPUT)
cy.get("[data-cy=setting-text] input")
.type(text)
.blur()
cy.getComponent(headlineId).should("have.text", text)
})
it("should change the size of the headline", () => {
cy.get(interact.DESIGN).click()
cy.contains("Typography").click()
cy.get(interact.FONT_SIZE_PROP_CONTROL).click()
cy.contains("60px").click()
cy.getComponent(headlineId).should("have.css", "font-size", "60px")
cy.get("[data-cy=setting-size]").scrollIntoView().click()
cy.get("[data-cy=setting-size]").within(() => {
cy.get(".spectrum-Form-item li.spectrum-Menu-item").contains("3XL").click()
})
cy.getComponent(headlineId).within(() => {
cy.get(".spectrum-Heading").should("have.css", "font-size", "60px")
})
})
it("should create a form and reset to match schema", () => {
cy.addComponent("Form", "Form").then(() => {
cy.get(interact.SETTINGS).click()
cy.get(interact.DATA_CY_DATASOURCE)
.contains("Choose option")
cy.get("[data-cy=setting-dataSource]")
.contains("Custom")
.click()
cy.get(interact.DROPDOWN)
.contains("dog")
.click()
cy.wait(500)
cy.addComponent("Form", "Field Group").then(fieldGroupId => {
cy.get(interact.SETTINGS).click()
cy.contains("Update Form Fields").click()
cy.get(".modal")
.get("button.primary")
cy.contains("Update form fields").click()
cy.get(".spectrum-Modal")
.get(".confirm-wrap .spectrum-Button")
.click()
cy.wait(500)
cy.getComponent(fieldGroupId).within(() => {
cy.contains("name").should("exist")
cy.contains("age").should("exist")
cy.contains("type").should("exist")
cy.contains("breed").should("exist")
// cy.contains("image").should("exist")
})
cy.getComponent(fieldGroupId)
.find("input")
@ -82,17 +100,305 @@ filterTests(['all'], () => {
cy.get("[data-cy=setting-_instanceName] input")
.type(componentId)
.blur()
cy.get(".ui-nav ul .nav-item.selected .ri-more-line").click({
cy.get(".nav-items-container .nav-item.selected .actions > div > .icon").click({
force: true,
})
cy.get(interact.DROPDOWN_CONTAINER)
cy.get(".spectrum-Popover.is-open li")
.contains("Delete")
.click()
cy.get(".modal")
cy.get(".spectrum-Modal button")
.contains("Delete Component")
.click()
.click({
force: true,
})
cy.getComponent(componentId).should("not.exist")
})
})
it("should set focus to the field setting when fields are added to a form", () => {
cy.addComponent("Form", "Form").then((formId) => {
//For deletion
cy.get("[data-cy=setting-_instanceName] input")
.clear()
.type(formId)
.blur()
const componentTypeLabels = ["Text Field", "Number Field", "Password Field",
"Options Picker", "Checkbox", "Long Form Field", "Date Picker", "Attachment",
"JSON Field", "Multi-select Picker", "Relationship Picker"]
const refocusTest = (componentId) => {
cy.getComponent(componentId)
.find(".showMe").should("exist").click({ force: true })
cy.get("[data-cy=setting-field] .spectrum-InputGroup")
.should("have.class", "is-focused")
}
const testFieldFocusOnCreate = (componentLabel) => {
cy.log("Adding: " + componentLabel)
return cy.addComponent("Form", componentLabel).then((componentId) => {
refocusTest(componentId)
cy.get("[data-cy=setting-field] .spectrum-InputGroup")
.should("have.class", "is-focused")
})
}
cy.wait(1000)
cy.wrap(componentTypeLabels).each((label) => {
return testFieldFocusOnCreate(label)
}).then(()=>{
cy.get(".nav-items-container .nav-item").contains(formId).click({ force: true })
deleteSelectedComponent()
})
})
})
it("should clear the iframe place holder when a form field has been set", () => {
cy.addComponent("Form", "Form").then((formId) => {
//For deletion
cy.get("[data-cy=setting-_instanceName] input")
.clear()
.type(formId)
.blur()
cy.get("[data-cy=setting-dataSource]")
.contains("Custom")
.click()
cy.get(".dropdown")
.contains("dog")
.click()
const fieldTypeToColumnName = {
"Text Field" : "name",
"Number Field": "age",
"Options Picker": "breed"
}
const componentTypeLabels = Object.keys(fieldTypeToColumnName)
const testFieldFocusOnCreate = (componentLabel) => {
cy.log("Adding: " + componentLabel)
return cy.addComponent("Form", componentLabel).then((componentId) => {
cy.getComponent(componentId)
.find(".placeholder_wrap").should("exist")
cy.get("[data-cy=setting-field] .spectrum-InputGroup")
.should("have.class", "is-focused")
cy.get("[data-cy=setting-field] button.spectrum-Picker").click()
//Click the first appropriate field. They are filtered by type
cy.get("[data-cy=setting-field] .spectrum-Popover.is-open li.spectrum-Menu-item")
.contains(fieldTypeToColumnName[componentLabel]).click()
cy.wait(500)
cy.getComponent(componentId)
.find(".placeholder_wrap").should("not.exist")
})
}
cy.wait(500)
cy.wrap(componentTypeLabels).each((label) => {
return testFieldFocusOnCreate(label)
}).then(()=>{
cy.get(".nav-items-container .nav-item").contains(formId).click({ force: true })
deleteSelectedComponent()
})
})
})
it("should focus a charts settings on data provider if not nested in provider ", () => {
cy.addComponent("Layout", "Container").then((containerId) => {
//For deletion
cy.get("[data-cy=setting-_instanceName] input")
.clear()
.type(containerId)
.blur()
const chartTypeLabels = ["Bar Chart", "Line Chart", "Area Chart", "Pie Chart",
"Donut Chart", "Candlestick Chart"]
const refocusTest = (componentId) => {
cy.getComponent(componentId)
.find(".showMe").should("exist").click({ force: true })
cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
.should("have.class", "is-focused")
}
const testFocusOnCreate = (chartLabel) => {
cy.log("Adding: " + chartLabel)
cy.addComponent("Chart", chartLabel).then((componentId) => {
refocusTest(componentId)
cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
.should("have.class", "is-focused")
})
}
cy.wait(1000)
cy.wrap(chartTypeLabels).each((label) => {
return testFocusOnCreate(label)
})
.then(()=>{
cy.get(".nav-items-container .nav-item").contains(containerId).click({ force: true })
deleteSelectedComponent()
})
})
})
it("should populate the provider for charts with a data provider in its path", () => {
cy.addComponent("Data", "Data Provider").then((providerId) => {
//For deletion
cy.get("[data-cy=setting-_instanceName] input")
.clear()
.type(providerId)
.blur()
cy.get("[data-cy=setting-dataSource]")
.contains("Choose an option")
.click()
cy.get(`[data-cy=dataSource-popover-${providerId}] ul li`)
.contains("dog")
.click()
const chartTypeLabels = ["Bar Chart", "Line Chart", "Area Chart", "Pie Chart",
"Donut Chart", "Candlestick Chart"]
const testFocusOnCreate = (chartLabel) => {
cy.log("Adding: " + chartLabel)
cy.addComponent("Chart", chartLabel).then((componentId) => {
cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker")
.should("not.have.class", "is-focused")
// Pre populated.
cy.get("[data-cy=dataProvider-prop-control] .spectrum-Picker-label")
.contains(providerId)
.should("exist")
})
}
cy.wait(1000)
cy.wrap(chartTypeLabels).each((label) => {
return testFocusOnCreate(label)
})
.then(()=>{
cy.get(".nav-items-container .nav-item").contains(providerId).click({ force: true })
deleteSelectedComponent()
})
})
})
it("should replace the placeholder when a url is set on an image", () => {
cy.addComponent("Elements", "Image").then((imageId) => {
cy.get("[data-cy=url-prop-control] .spectrum-InputGroup")
.should("have.class", "is-focused")
cy.get("[data-cy=setting-_instanceName] input")
.clear()
.type(imageId)
.blur()
//return $("New Data Provider.Rows")[0]["Attachment"][0]["url"]
//No minio, so just enter something local that will not reslove
cy.get("[data-cy=url-prop-control] input[type=text]")
.type("cypress/fixtures/ghost.png")
.blur()
cy.getComponent(imageId)
.find(".placeholder_wrap").should("not.exist")
cy.getComponent(imageId)
.find(`img[alt=${imageId}]`).should("exist")
cy.get(".nav-items-container .nav-item")
.contains(imageId)
.click({ force: true })
deleteSelectedComponent()
})
})
it("should add a markdown component.", () => {
cy.addComponent("Elements", "Markdown Viewer").then((markdownId) => {
cy.get("[data-cy=value-prop-control] .spectrum-InputGroup")
.should("have.class", "is-focused")
cy.get("[data-cy=setting-_instanceName] input")
.clear()
.type(markdownId)
.blur()
cy.get("[data-cy=value-prop-control] input[type=text].spectrum-Textfield-input")
.type("# Hi").blur()
cy.getComponent(markdownId)
.find(".placeholder_wrap").should("not.exist")
cy.getComponent(markdownId)
.find(".editor-preview-full h1").contains("Hi")
cy.get(".nav-items-container .nav-item")
.contains(markdownId)
.click({ force: true })
deleteSelectedComponent()
})
})
it("should direct the user when adding an Icon component.", () => {
cy.addComponent("Elements", "Icon").then((iconId) => {
cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton")
.should("have.class", "is-focused")
cy.getComponent(iconId)
.find(".placeholder_wrap").should("exist")
cy.get("[data-cy=setting-_instanceName] input")
.clear()
.type(iconId)
.blur()
cy.get("[data-cy=icon-prop-control] .spectrum-ActionButton").click()
cy.get("[data-cy=icon-popover].spectrum-Popover.is-open").within(() => {
cy.get(".search-input input")
.type("save")
.blur()
cy.get(".search-input button").click({ force: true })
cy.get(".icon-area .icon-container").eq(0).click({ force: true })
})
cy.getComponent(iconId)
.find(".placeholder_wrap").should("not.exist")
cy.getComponent(iconId)
.find("i.ri-save-fill").should("exist")
cy.get(".nav-items-container .nav-item")
.contains(iconId)
.click({ force: true })
deleteSelectedComponent()
})
})
})
})

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

@ -472,7 +472,7 @@ Cypress.Commands.add("addComponent", (category, component) => {
if (component) {
cy.get(`[data-cy="component-${component}"]`).click({ force: true })
}
cy.wait(2000)
cy.wait(1000)
cy.location().then(loc => {
const params = loc.pathname.split("/")
const componentId = params[params.length - 1]
@ -487,9 +487,9 @@ Cypress.Commands.add("getComponent", componentId => {
.its("0.contentDocument")
.should("exist")
.its("body")
.should("not.be.null")
.should("not.be.undefined")
.then(cy.wrap)
.find(`[data-id=${componentId}]`)
.find(`[data-id='${componentId}']`)
})
Cypress.Commands.add("createScreen", (route, accessLevelLabel) => {

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

@ -20,6 +20,7 @@ import analytics, { Events } from "analytics"
import {
findComponentType,
findComponentParent,
findComponentPath,
findClosestMatchingComponent,
findAllMatchingComponents,
findComponent,
@ -422,6 +423,21 @@ export const getFrontendStore = () => {
store.update(state => {
state.currentView = "component"
state.selectedComponentId = componentInstance._id
const focusSetting = resolveComponentFocus(
asset?.props,
componentInstance
)
if (focusSetting) {
state.builderFocus = [
{
key: focusSetting.key,
target: state.selectedComponentId,
location: "component_settings",
},
]
}
return state
})
@ -664,5 +680,32 @@ export const getFrontendStore = () => {
},
}
// Determine the initial focus for newly created components
// Take into account the fact that data providers should be
// skipped if they will be inherited from the path
const resolveComponentFocus = (asset_props, componentInstance) => {
const definition = store.actions.components.getDefinition(
componentInstance._component
)
let providerIdx = -1
let required = definition.settings.filter((s, idx) => {
if (s.type === "dataProvider") {
providerIdx = idx
}
return s.required
})
if (providerIdx > -1) {
const path = findComponentPath(asset_props, componentInstance._id)
const providers = path.filter(c =>
c._component?.endsWith("/dataprovider")
)
if (providers.length) {
required = required.splice(providerIdx, 1)
}
}
return required[0]
}
return store
}

2
packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
View File

@ -18,6 +18,7 @@
export let options
export let allowJS = true
export let appendBindingsAsOptions = true
export let autofocus = false
const dispatch = createEventDispatcher()
let bindingDrawer
@ -61,6 +62,7 @@
on:pick={e => onChange(e.detail, true)}
{placeholder}
options={allOptions}
{autofocus}
/>
{#if !disabled}
<div

22
packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
View File

@ -148,6 +148,21 @@
}
})
const resolveFocus = (data) => {
if($store.builderFocus){
const comp = $store.builderFocus.reduce((acc, item)=>{
acc = item.target
return acc
}, "")
if(data.id !== comp){
store.update(state => {
delete state.builderFocus
return state
})
}
}
}
const handleBudibaseEvent = async event => {
const { type, data } = event.data || event.detail
if (!type) {
@ -157,6 +172,7 @@
try {
if (type === "select-component" && data.id) {
store.actions.components.select({ _id: data.id })
resolveFocus(data)
} else if (type === "update-prop") {
await store.actions.components.updateProp(data.prop, data.value)
} else if (type === "delete-component" && data.id) {
@ -190,6 +206,12 @@
store.actions.components.copy(source, true)
await store.actions.components.paste(destination, data.mode)
}
} else if(type == "builder-focus") {
store.update(state => ({
...state,
builderFocus :
[...data]
}))
} else {
console.warn(`Client sent unknown event type: ${type}`)
}

23
packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
View File

@ -3,29 +3,16 @@
import { Input, DetailSummary, notifications } from "@budibase/bbui"
import { store } from "builderStore"
import PropertyControl from "./PropertyControls/PropertyControl.svelte"
import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
import RoleSelect from "./PropertyControls/RoleSelect.svelte"
import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
import { getComponentForSettingType } from "./PropertyControls/componentSettings"
import { Utils } from "@budibase/frontend-core"
export let componentDefinition
export let componentInstance
export let assetInstance
export let bindings
export let componentBindings
const layoutDefinition = []
const screenDefinition = [
{ key: "description", label: "Description", control: Input },
{ key: "routing.route", label: "Route", control: Input },
{ key: "routing.roleId", label: "Access", control: RoleSelect },
{ key: "layoutId", label: "Layout", control: LayoutSelect },
]
$: sections = getSections(componentDefinition)
$: isLayout = assetInstance && assetInstance.favicon
$: assetDefinition = isLayout ? layoutDefinition : screenDefinition
const getSections = definition => {
const settings = definition?.settings ?? []
@ -86,6 +73,15 @@
return true
}
const isFocused = setting => {
if (!$store.builderFocus) {
return false
}
return (
setting.required === true && $store.builderFocus[0].key === setting.key
)
}
</script>
{#each sections as section, idx (section.name)}
@ -120,6 +116,7 @@
{componentBindings}
{componentInstance}
{componentDefinition}
autofocus={isFocused(setting)}
/>
{/if}
{/each}

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataProviderSelect.svelte
View File

@ -6,6 +6,7 @@
import { createEventDispatcher, onMount } from "svelte"
export let value
export let autofocus = false
const dispatch = createEventDispatcher()
const getValue = component => `{{ literal ${makePropSafe(component._id)} }}`
@ -24,6 +25,7 @@
<Select
{value}
{autofocus}
placeholder={null}
on:change
options={providers}

8
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
View File

@ -25,6 +25,7 @@
export let otherSources
export let showAllQueries
export let bindings = []
export let autofocus = false
const dispatch = createEventDispatcher()
const arrayTypes = ["attachment", "array"]
@ -158,6 +159,7 @@
value={text}
options={[text]}
on:click={dropdownRight.show}
{autofocus}
/>
{#if value?.type === "query"}
<i class="ri-settings-5-line" on:click={openQueryParamsDrawer} />
@ -184,7 +186,11 @@
</Drawer>
{/if}
</div>
<Popover bind:this={dropdownRight} anchor={anchorRight}>
<Popover
bind:this={dropdownRight}
anchor={anchorRight}
dataCy={`dataSource-popover-${$store.selectedComponentId}`}
>
<div class="dropdown">
<div class="title">
<Heading size="XS">Tables</Heading>

9
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte
View File

@ -10,6 +10,7 @@
export let componentInstance = {}
export let value = ""
export let placeholder
export let autofocus = false
const dispatch = createEventDispatcher()
$: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@ -37,4 +38,10 @@
}
</script>
<Select {placeholder} value={boundValue} on:change={onChange} {options} />
<Select
{placeholder}
value={boundValue}
on:change={onChange}
{options}
{autofocus}
/>

3
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FormFieldSelect.svelte
View File

@ -10,6 +10,7 @@
export let componentInstance
export let value
export let type
export let autofocus = false
$: form = findClosestMatchingComponent(
$currentAsset?.props,
@ -40,4 +41,4 @@
}
</script>
<Combobox on:change {value} {options} />
<Combobox on:change {value} {options} {autofocus} />

12
packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte
View File

@ -15,6 +15,7 @@
export let value = ""
export let maxIconsPerPage = 30
export let autofocus = false
let searchTerm = ""
let selectedLetter = "A"
@ -117,9 +118,16 @@
</script>
<div bind:this={buttonAnchor}>
<ActionButton on:click={dropdown.show}>{displayValue}</ActionButton>
<ActionButton on:click={dropdown.show} {autofocus}>
{displayValue}
</ActionButton>
</div>
<Popover bind:this={dropdown} on:open={setSelectedUI} anchor={buttonAnchor}>
<Popover
bind:this={dropdown}
on:open={setSelectedUI}
anchor={buttonAnchor}
dataCy="icon-popover"
>
<div class="container">
<div class="search-area">
<div class="alphabet-area">

9
packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiFieldSelect.svelte
View File

@ -10,6 +10,7 @@
export let componentInstance = {}
export let value = ""
export let placeholder
export let autofocus
const dispatch = createEventDispatcher()
$: datasource = getDatasourceForProvider($currentAsset, componentInstance)
@ -31,4 +32,10 @@
}
</script>
<Multiselect {placeholder} value={boundValue} on:change={setValue} {options} />
<Multiselect
{placeholder}
value={boundValue}
on:change={setValue}
{options}
{autofocus}
/>

26
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View File

@ -4,6 +4,8 @@
readableToRuntimeBinding,
runtimeToReadableBinding,
} from "builderStore/dataBinding"
import { setContext } from "svelte"
import { store } from "builderStore"
export let label = ""
export let componentInstance = {}
@ -16,6 +18,7 @@
export let bindings = []
export let componentBindings = []
export let nested = false
export let autofocus = false
$: allBindings = getAllBindings(bindings, componentBindings, nested)
$: safeValue = getSafeValue(value, props.defaultValue, allBindings)
@ -60,6 +63,28 @@
? defaultValue
: enriched
}
setContext("builderFocus", {
clear: () => {
if (!$store?.builderFocus) {
return
}
store.update(state => {
const updatedFocus = $store?.builderFocus?.filter(focus => {
return (
focus.location === "component_settings" &&
focus.target !== componentInstance._id
)
})
if (updatedFocus?.length > 0) {
state.builderFocus = updatedFocus
} else {
delete state.builderFocus
}
return state
})
},
})
</script>
<div class="property-control" data-cy={`setting-${key}`}>
@ -82,6 +107,7 @@
{key}
{type}
{...props}
{autofocus}
/>
</div>
</div>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
View File

@ -4,6 +4,7 @@
export let value
export let bindings
export let autofocus
$: urlOptions = $store.screens
.map(screen => screen.routing?.route)
@ -16,4 +17,5 @@
on:change
options={urlOptions}
appendBindingsAsOptions={false}
{autofocus}
/>

598
packages/client/manifest.json
View File

File diff suppressed because it is too large Load Diff

1
packages/client/src/components/Component.svelte
View File

@ -154,6 +154,7 @@
selected,
name,
editing,
type: instance._component,
})
const initialise = instance => {

3
packages/client/src/components/app/Icon.svelte
View File

@ -33,9 +33,6 @@
{/if}
<style>
div {
font-style: italic;
}
@media (hover: hover) {
.hoverable:hover {
color: var(--spectrum-alias-icon-color-selected-hover) !important;

7
packages/client/src/components/app/Link.svelte
View File

@ -1,5 +1,6 @@
<script>
import { getContext } from "svelte"
import Placeholder from "./Placeholder.svelte"
const { linkable, styleable, builderStore } = getContext("sdk")
const component = getContext("component")
@ -79,7 +80,11 @@
{componentText}
</div>
{:else if $builderStore.inBuilder || componentText}
{#if externalLink || openInNewTab}
{#if !url && !text}
<div use:styleable={{ ...$component.styles, empty: true }}>
<Placeholder />
</div>
{:else if externalLink || openInNewTab}
<a
{target}
href={sanitizedUrl}

67
packages/client/src/components/app/Placeholder.svelte
View File

@ -1,15 +1,67 @@
<script>
import { getContext } from "svelte"
import Manifest from "manifest.json"
import { builderStore } from "stores"
const { builderStore } = getContext("sdk")
const { componentStore } = getContext("sdk")
const component = getContext("component")
export let text
$: componentInstance = componentStore.actions.getComponentById($component.id)
const getComponentKey = compId => {
if (!compId) {
return
}
const prefix = "@budibase/standard-components/"
let componentKey = compId.replace(prefix, "")
return componentKey
}
const emptyFields = (definition, options) => {
if (!options) {
return []
}
return definition?.settings
? definition.settings.filter(setting => {
return (
setting.required &&
(!options[setting.key] || options[setting.key] == "")
)
})
: []
}
const definition = Manifest[getComponentKey($component.type)]
$: focus_setting = emptyFields(definition, componentInstance)[0]
</script>
{#if $builderStore.inBuilder}
<div class="placeholder_wrap">
{#if componentInstance && focus_setting}
<div>
<span>
Add the <mark>{focus_setting?.label}</mark> setting to start using your
component &nbsp;
</span>
<span
class="showMe spectrum-Link"
on:click={() => {
builderStore.actions.setFocus([
{
location: "component_settings",
key: focus_setting.key,
target: $component.id,
},
])
}}
>
Show me
</span>
</div>
{:else}
{text || $component.name || "Placeholder"}
{/if}
</div>
{/if}
@ -17,5 +69,18 @@
div {
color: var(--spectrum-global-color-gray-600);
font-size: var(--font-size-s);
padding: var(--spacing-xs);
}
:global(div.placeholder_wrap mark) {
background-color: var(--spectrum-global-color-gray-400);
padding: 0px 2px;
border-radius: 2px;
}
:global(div.placeholder_wrap .showMe) {
cursor: pointer;
}
:global(div.placeholder_wrap .showMe:hover) {
text-decoration: underline;
cursor: pointer;
}
</style>

2
packages/client/src/components/app/blocks/RepeaterBlock.svelte
View File

@ -39,7 +39,7 @@
}}
>
{#if $component.empty}
<Placeholder text={$component.name} />
<Placeholder />
{:else}
<BlockComponent
type="repeater"

2
packages/client/src/components/app/charts/ApexChart.svelte
View File

@ -13,7 +13,7 @@
<div use:chart={options} use:styleable={$component.styles} />
{:else if $builderStore.inBuilder}
<div use:styleable={$component.styles}>
<Placeholder text="Use the settings panel to build your chart" />
<Placeholder />
</div>
{/if}

1
packages/client/src/components/app/charts/BarChart.svelte
View File

@ -53,7 +53,6 @@
palette,
horizontal
) => {
console.log("new chart")
const allCols = [labelColumn, ...(valueColumns || [null])]
if (
!dataProvider ||

9
packages/client/src/components/app/forms/Field.svelte
View File

@ -76,9 +76,9 @@
{#if !formContext}
<Placeholder text="Form components need to be wrapped in a form" />
{:else if !fieldState}
<Placeholder
text="Add the Field setting to start using your component"
/>
{#if $builderStore.inBuilder}
<Placeholder />
{/if}
{:else if schemaType && schemaType !== type && type !== "options"}
<Placeholder
text="This Field setting is the wrong data type for this component"
@ -100,12 +100,10 @@
label.hidden {
padding: 0;
}
.spectrum-Form-itemField {
position: relative;
width: 100%;
}
.error {
color: var(
--spectrum-semantic-negative-color-default,
@ -114,7 +112,6 @@
font-size: var(--spectrum-global-dimension-font-size-75);
margin-top: var(--spectrum-global-dimension-size-75);
}
.spectrum-FieldLabel--right,
.spectrum-FieldLabel--left {
padding-right: var(--spectrum-global-dimension-size-200);

3
packages/client/src/stores/builder.js
View File

@ -76,6 +76,9 @@ const createBuilderStore = () => {
}
store.update(state => ({ ...state, editMode: enabled }))
},
setFocus: data => {
window.parent.postMessage({ type: "builder-focus", data })
},
}
return {
...store,