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

Merge pull request #543 from mjashanks/master 

Cleanup - Using BBUI components
This commit is contained in:
Martin McKeaveney 2020-08-19 10:17:56 +01:00 committed by GitHub
parent 8e5d631aa1 1b6131135b
commit db3d4f7df3
27 changed files with 67 additions and 748 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,9 +131,9 @@ Cypress.Commands.add("navigateToFrontend", () => {
Cypress.Commands.add("createScreen", (screenName, route) => { Cypress.Commands.add("createScreen", (screenName, route) => {
cy.get(".newscreen").click() cy.get(".newscreen").click()
cy.get(".uk-input:first").type(screenName) cy.get("[data-cy=new-screen-dialog] input:first").type(screenName)
if (route) { if (route) {
cy.get(".uk-input:last").type(route) cy.get("[data-cy=new-screen-dialog] input:last").type(route)
} }
cy.get(".uk-modal-footer").within(() => { cy.get(".uk-modal-footer").within(() => {
cy.contains("Create Screen").click() cy.contains("Create Screen").click()

4
packages/builder/src/components/common/ConfirmDialog.svelte
View File

@ -29,8 +29,10 @@
} }
const ok = () => { const ok = () => {
const result = onOk()
// allow caller to return false, to cancel the "ok"
if (result === false) return
hide() hide()
onOk()
} }
</script> </script>

62
packages/builder/src/components/common/Input.svelte
View File

@ -1,62 +0,0 @@
<script>
import { onMount } from "svelte"
import { buildStyle } from "../../helpers.js"
export let value = ""
export let name = ""
export let textAlign = "left"
export let width = "160px"
export let placeholder = ""
export let suffix = ""
export let onChange = val => {}
let centerPlaceholder = textAlign === "center"
let style = buildStyle({ width, textAlign })
function handleChange(val) {
value = val
let _value = value !== "auto" ? value + suffix : value
onChange(_value)
}
$: displayValue =
suffix && value && value.endsWith(suffix)
? value.replace(new RegExp(`${suffix}$`), "")
: value || ""
</script>
<input
{name}
class:centerPlaceholder
type="text"
value={displayValue}
{placeholder}
{style}
on:change={e => handleChange(e.target.value)} />
<style>
input {
/* width: 32px; */
height: 36px;
font-size: 14px;
font-weight: 400;
margin: 0px 0px 0px 2px;
color: var(--ink);
padding: 0px 8px;
font-family: inter;
width: 164px;
box-sizing: border-box;
background-color: var(--grey-2);
border-radius: 4px;
border: 1px solid var(--grey-2);
outline: none;
}
input::placeholder {
text-align: left;
}
.centerPlaceholder::placeholder {
text-align: center;
}
</style>

50
packages/builder/src/components/common/Inputs/InputGroup.svelte
View File

@ -1,50 +0,0 @@
<script>
import { onMount } from "svelte"
import Input from "../Input.svelte"
export let meta = []
export let label = ""
export let value = ["0", "0", "0", "0"]
export let suffix = ""
export let onChange = () => {}
function handleChange(val, idx) {
value.splice(idx, 1, val !== "auto" && suffix ? val + suffix : val)
value = value
let _value = value.map(v =>
suffix && !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
)
onChange(_value)
}
$: displayValues =
value && suffix
? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
: value || []
</script>
<div class="input-container">
<div class="label">{label}</div>
<div class="inputs-group">
{#each meta as m, i}
<Input
width="37px"
textAlign="center"
placeholder={m.placeholder || ''}
value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}
onChange={value => handleChange(value || 0, i)} />
{/each}
</div>
</div>
<style>
.label {
flex: 0;
}
.inputs-group {
flex: 1;
}
</style>

65
packages/builder/src/components/common/Select.svelte
View File

@ -1,65 +0,0 @@
<script>
import getIcon from "./icon"
export let icon
export let value
</script>
<div class="select-container">
{#if icon}
<i class={icon} />
{/if}
<select class:adjusted={icon} on:change bind:value>
<slot />
</select>
<span class="arrow">
{@html getIcon('chevron-down', '24')}
</span>
</div>
<style>
.select-container {
font-size: 14px;
position: relative;
border: var(--grey-4) 1px solid;
}
.adjusted {
padding-left: 30px;
}
i {
position: absolute;
left: 10px;
top: 10px;
}
select {
height: 40px;
display: block;
font-family: sans-serif;
font-weight: 400;
font-size: 14px;
color: var(--ink);
padding: 0 40px 0px 20px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
margin: 0;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: var(--white);
}
.arrow {
position: absolute;
right: 10px;
bottom: 0;
margin: auto;
width: 30px;
height: 30px;
pointer-events: none;
color: var(--ink);
}
</style>

1
packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte
View File

@ -3,7 +3,6 @@
import fsort from "fast-sort" import fsort from "fast-sort"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore } from "builderStore"
import { Button, Icon } from "@budibase/bbui" import { Button, Icon } from "@budibase/bbui"
import Select from "components/common/Select.svelte"
import ActionButton from "components/common/ActionButton.svelte" import ActionButton from "components/common/ActionButton.svelte"
import LinkedRecord from "./LinkedRecord.svelte" import LinkedRecord from "./LinkedRecord.svelte"
import TablePagination from "./TablePagination.svelte" import TablePagination from "./TablePagination.svelte"

1
packages/builder/src/components/database/ModelDataTable/modals/CreateEditRecord.svelte
View File

@ -5,7 +5,6 @@
import { compose, map, get, flatten } from "lodash/fp" import { compose, map, get, flatten } from "lodash/fp"
import { Input, TextArea, Button } from "@budibase/bbui" import { Input, TextArea, Button } from "@budibase/bbui"
import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte" import LinkedRecordSelector from "components/common/LinkedRecordSelector.svelte"
import Select from "components/common/Select.svelte"
import RecordFieldControl from "./RecordFieldControl.svelte" import RecordFieldControl from "./RecordFieldControl.svelte"
import * as api from "../api" import * as api from "../api"
import ErrorsBox from "components/common/ErrorsBox.svelte" import ErrorsBox from "components/common/ErrorsBox.svelte"

94
packages/builder/src/components/database/ModelDataTable/modals/CreateUser.svelte
View File

@ -1,94 +0,0 @@
<script>
import { store, backendUiStore } from "builderStore"
import ActionButton from "components/common/ActionButton.svelte"
import * as api from "../api"
export let onClosed
let username
let password
let accessLevelId
$: valid = username && password && accessLevelId
$: appId = $store.appId
async function createUser() {
const user = { name: username, username, password, accessLevelId }
const response = await api.createUser(user)
backendUiStore.actions.users.create(response)
onClosed()
}
</script>
<form on:submit|preventDefault class="uk-form-stacked">
<div class="main">
<div class="heading">
<i class="ri-list-settings-line button--toggled" />
<div class="title">Create User</div>
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Username</label>
<input
data-cy="username"
class="uk-input"
type="text"
bind:value={username} />
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Password</label>
<input
data-cy="password"
class="uk-input"
type="password"
bind:value={password} />
</div>
<div class="uk-margin">
<label class="uk-form-label" for="form-stacked-text">Access Level</label>
<select
data-cy="accessLevel"
class="uk-select"
bind:value={accessLevelId}>
<option value="" />
<option value="POWER_USER">Power User</option>
<option value="ADMIN">Admin</option>
</select>
</div>
</div>
<footer>
<div class="button">
<ActionButton secondary on:click={onClosed}>Cancel</ActionButton>
</div>
<ActionButton disabled={!valid} on:click={createUser}>Save</ActionButton>
</footer>
</form>
<style>
.main {
padding: 40px 40px 20px 40px;
}
.title {
font-size: 24px;
font-weight: 600;
color: var(--ink);
margin-left: 12px;
}
.heading {
display: flex;
align-items: baseline;
}
footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 20px;
background: var(--grey-1);
border-radius: 0 0 5px 5px;
}
.button {
margin-right: 20px;
}
</style>

1
packages/builder/src/components/database/ModelDataTable/modals/index.js
View File

@ -1,3 +1,2 @@
export { default as DeleteRecordModal } from "./DeleteRecord.svelte" export { default as DeleteRecordModal } from "./DeleteRecord.svelte"
export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte" export { default as CreateEditRecordModal } from "./CreateEditRecord.svelte"
export { default as CreateUserModal } from "./CreateUser.svelte"

2
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View File

@ -1,6 +1,5 @@
<script> <script>
import { setContext, onMount } from "svelte" import { setContext, onMount } from "svelte"
import PropsView from "./PropsView.svelte"
import { store } from "builderStore" import { store } from "builderStore"
import IconButton from "components/common/IconButton.svelte" import IconButton from "components/common/IconButton.svelte"
@ -11,7 +10,6 @@
CircleIndicator, CircleIndicator,
EventsIcon, EventsIcon,
} from "components/common/Icons/" } from "components/common/Icons/"
import LayoutEditor from "./LayoutEditor.svelte"
import EventsEditor from "./EventsEditor" import EventsEditor from "./EventsEditor"
import panelStructure from "./temporaryPanelStructure.js" import panelStructure from "./temporaryPanelStructure.js"
import CategoryTab from "./CategoryTab.svelte" import CategoryTab from "./CategoryTab.svelte"

4
packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte
View File

@ -1,12 +1,10 @@
<script> <script>
import { store } from "builderStore" import { store } from "builderStore"
import { Button } from "@budibase/bbui" import { Button, Select } from "@budibase/bbui"
import Modal from "../../common/Modal.svelte" import Modal from "../../common/Modal.svelte"
import HandlerSelector from "./HandlerSelector.svelte" import HandlerSelector from "./HandlerSelector.svelte"
import IconButton from "../../common/IconButton.svelte" import IconButton from "../../common/IconButton.svelte"
import ActionButton from "../../common/ActionButton.svelte" import ActionButton from "../../common/ActionButton.svelte"
import Select from "../../common/Select.svelte"
import Input from "../../common/Input.svelte"
import getIcon from "../../common/icon" import getIcon from "../../common/icon"
import { CloseIcon } from "components/common/Icons/" import { CloseIcon } from "components/common/Icons/"

3
packages/builder/src/components/userInterface/EventsEditor/HandlerSelector.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import { Button } from "@budibase/bbui" import { Button, Select } from "@budibase/bbui"
import IconButton from "components/common/IconButton.svelte" import IconButton from "components/common/IconButton.svelte"
import Select from "components/common/Select.svelte"
import StateBindingCascader from "./StateBindingCascader.svelte" import StateBindingCascader from "./StateBindingCascader.svelte"
import { find, map, keys, reduce, keyBy } from "lodash/fp" import { find, map, keys, reduce, keyBy } from "lodash/fp"
import { pipe } from "components/common/core" import { pipe } from "components/common/core"

3
packages/builder/src/components/userInterface/EventsEditor/StateBindingCascader.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import { Input } from "@budibase/bbui" import { Input, Select } from "@budibase/bbui"
import IconButton from "components/common/IconButton.svelte" import IconButton from "components/common/IconButton.svelte"
import Select from "components/common/Select.svelte"
import { find, map, keys, reduce, keyBy } from "lodash/fp" import { find, map, keys, reduce, keyBy } from "lodash/fp"
import { pipe } from "components/common/core" import { pipe } from "components/common/core"
import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers" import { EVENT_TYPE_MEMBER_NAME } from "components/common/eventHandlers"

170
packages/builder/src/components/userInterface/LayoutEditor.svelte
View File

@ -1,170 +0,0 @@
<script>
import InputGroup from "../common/Inputs/InputGroup.svelte"
import LayoutTemplateControls from "./LayoutTemplateControls.svelte"
export let onStyleChanged = () => {}
export let component
const tbrl = [
{ placeholder: "T" },
{ placeholder: "R" },
{ placeholder: "B" },
{ placeholder: "L" },
]
const se = [{ placeholder: "START" }, { placeholder: "END" }]
const single = [{ placeholder: "" }]
$: layout = {
...component._styles.position,
...component._styles.layout,
}
$: layouts = {
templaterows: ["Grid Rows", single],
templatecolumns: ["Grid Columns", single],
}
$: display = {
direction: ["Direction", single],
align: ["Align", single],
justify: ["Justify", single],
}
$: positions = {
column: ["Column", se],
row: ["Row", se],
}
$: spacing = {
margin: ["Margin", tbrl, "small"],
padding: ["Padding", tbrl, "small"],
}
$: size = {
height: ["Height", single],
width: ["Width", single],
}
$: zindex = {
zindex: ["Z-Index", single],
}
const newValue = n => Array(n).fill("")
</script>
<h3>Layout</h3>
<div class="layout-pos">
{#each Object.entries(display) as [key, [name, meta, size]] (component._id + key)}
<div class="grid">
<h5>{name}:</h5>
<LayoutTemplateControls
onStyleChanged={_value => onStyleChanged('layout', key, _value)}
values={layout[key] || newValue(meta.length)}
propertyName={name}
{meta}
{size}
type="text" />
</div>
{/each}
</div>
<!-- <h4>Positioning</h4>
<div class="layout-pos">
{#each Object.entries(positions) as [key, [name, meta, size]] (component._id + key)}
<div class="grid">
<h5>{name}:</h5>
<InputGroup
onStyleChanged={_value => onStyleChanged('position', key, _value)}
values={layout[key] || newValue(meta.length)}
{meta}
{size} />
</div>
{/each}
</div> -->
<h3>Spacing</h3>
<div class="layout-spacing">
{#each Object.entries(spacing) as [key, [name, meta, size]] (component._id + key)}
<div class="grid">
<h5>{name}:</h5>
<InputGroup
onStyleChanged={_value => onStyleChanged('position', key, _value)}
values={layout[key] || newValue(meta.length)}
{meta}
{size}
type="text" />
</div>
{/each}
</div>
<h3>Size</h3>
<div class="layout-layer">
{#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)}
<div class="grid">
<h5>{name}:</h5>
<InputGroup
onStyleChanged={_value => onStyleChanged('position', key, _value)}
values={layout[key] || newValue(meta.length)}
type="text"
{meta}
{size} />
</div>
{/each}
</div>
<h3>Order</h3>
<div class="layout-layer">
{#each Object.entries(zindex) as [key, [name, meta, size]] (component._id + key)}
<div class="grid">
<h5>{name}:</h5>
<InputGroup
onStyleChanged={_value => onStyleChanged('position', key, _value)}
values={layout[key] || newValue(meta.length)}
{meta}
{size} />
</div>
{/each}
</div>
<style>
h3 {
text-transform: uppercase;
font-size: 13px;
font-weight: 600;
color: var(--ink);
opacity: 0.6;
margin-bottom: 10px;
}
h4 {
text-transform: uppercase;
font-size: 10px;
font-weight: 600;
color: var(--ink);
opacity: 0.4;
margin-bottom: 10px;
}
h5 {
font-size: 13px;
font-weight: 400;
color: var(--ink);
opacity: 0.8;
padding-top: 13px;
margin-bottom: 0;
}
div > div {
display: grid;
grid-template-rows: 1fr;
grid-gap: 10px;
height: 40px;
margin-bottom: 15px;
}
.grid {
grid-template-columns: 70px 2fr;
}
</style>

96
packages/builder/src/components/userInterface/NewScreen.svelte
View File

@ -1,6 +1,5 @@
<script> <script>
import { store } from "builderStore" import { store } from "builderStore"
import PropsView from "./PropsView.svelte"
import Button from "components/common/Button.svelte" import Button from "components/common/Button.svelte"
import ActionButton from "components/common/ActionButton.svelte" import ActionButton from "components/common/ActionButton.svelte"
import ButtonGroup from "components/common/ButtonGroup.svelte" import ButtonGroup from "components/common/ButtonGroup.svelte"
@ -9,6 +8,7 @@
import UIkit from "uikit" import UIkit from "uikit"
import { isRootComponent } from "./pagesParsing/searchComponents" import { isRootComponent } from "./pagesParsing/searchComponents"
import { splitName } from "./pagesParsing/splitRootComponentName.js" import { splitName } from "./pagesParsing/splitRootComponentName.js"
import { Input, Select } from "@budibase/bbui"
import { find, filter, some, map, includes } from "lodash/fp" import { find, filter, some, map, includes } from "lodash/fp"
import { assign } from "lodash" import { assign } from "lodash"
@ -22,8 +22,7 @@
let layoutComponent let layoutComponent
let screens let screens
let name = "" let name = ""
let routeError
let saveAttempted = false
$: layoutComponents = Object.values($store.components).filter( $: layoutComponents = Object.values($store.components).filter(
componentDefinition => componentDefinition.container componentDefinition => componentDefinition.container
@ -38,18 +37,21 @@
$: route = !route && $store.screens.length === 0 ? "*" : route $: route = !route && $store.screens.length === 0 ? "*" : route
const save = () => { const save = () => {
saveAttempted = true if (!route) {
routeError = "Url is required"
} else {
if (routeNameExists(route)) {
routeError = "This url is already taken"
} else {
routeError = ""
}
}
const isValid = if (routeError) return false
name.length > 0 &&
!screenNameExists(name) &&
route.length > 0 &&
!routeNameExists(route) &&
layoutComponent
if (!isValid) return
store.createScreen(name, route, layoutComponent._component) store.createScreen(name, route, layoutComponent._component)
name = ""
route = ""
dialog.hide() dialog.hide()
} }
@ -57,12 +59,6 @@
dialog.hide() dialog.hide()
} }
const screenNameExists = name => {
return $store.screens.some(
screen => screen.name.toLowerCase() === name.toLowerCase()
)
}
const routeNameExists = route => { const routeNameExists = route => {
return $store.screens.some( return $store.screens.some(
screen => screen.route.toLowerCase() === route.toLowerCase() screen => screen.route.toLowerCase() === route.toLowerCase()
@ -83,40 +79,26 @@
onOk={save} onOk={save}
okText="Create Screen"> okText="Create Screen">
<div class="uk-form-horizontal"> <div data-cy="new-screen-dialog">
<div class="uk-margin"> <div class="uk-margin">
<label class="uk-form-label">Name</label> <Input label="Name" bind:value={name} />
<div class="uk-form-controls">
<input
class="uk-input uk-form-small"
class:uk-form-danger={saveAttempted && (name.length === 0 || screenNameExists(name))}
bind:value={name} />
</div>
</div> </div>
<div class="uk-margin"> <div class="uk-margin">
<label class="uk-form-label">Route (URL)</label> <Input
<div class="uk-form-controls"> label="Url"
<input error={routeError}
class="uk-input uk-form-small" bind:value={route}
class:uk-form-danger={saveAttempted && (route.length === 0 || routeNameExists(route))} on:change={routeChanged} />
bind:value={route}
on:change={routeChanged} />
</div>
</div> </div>
<div class="uk-margin"> <div class="uk-margin">
<label class="uk-form-label">Layout Component</label> <label>Layout Component</label>
<div class="uk-form-controls"> <Select bind:value={layoutComponent} secondary>
<select {#each layoutComponents as { _component, name }}
class="uk-select uk-form-small" <option value={_component}>{name}</option>
bind:value={layoutComponent} {/each}
class:uk-form-danger={saveAttempted && !layoutComponent}> </Select>
{#each layoutComponents as { _component, name }}
<option value={_component}>{name}</option>
{/each}
</select>
</div>
</div> </div>
</div> </div>
@ -127,28 +109,4 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.uk-form-controls {
margin-left: 0 !important;
}
.uk-form-label {
padding-bottom: 10px;
font-weight: 500;
font-size: 16px;
color: var(--grey-7);
}
.uk-input {
height: 40px !important;
border-radius: 3px;
}
.uk-select {
height: 40px !important;
font-weight: 500px;
color: var(--grey-5);
border: 1px solid var(--grey-2);
border-radius: 3px;
}
</style> </style>

44
packages/builder/src/components/userInterface/PropControl.svelte
View File

@ -1,44 +0,0 @@
<script>
import { store } from "builderStore"
import Checkbox from "../common/Checkbox.svelte"
import StateBindingControl from "./StateBindingControl.svelte"
export let index
export let prop_name
export let prop_value
export let prop_definition = {}
</script>
<div class="root">
{#if prop_definition.type !== 'event'}
<h5>{prop_name}</h5>
<StateBindingControl
value={prop_value}
type={prop_definition.type || prop_definition}
options={prop_definition.options}
styleBindingProperty={prop_definition.styleBindingProperty}
onChanged={v => store.setComponentProp(prop_name, v)} />
{/if}
</div>
<style>
.root {
height: 40px;
margin-bottom: 15px;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 70px 1fr;
grid-gap: 10px;
align-items: baseline;
}
h5 {
word-wrap: break-word;
font-size: 13px;
font-weight: 400;
color: var(--ink);
opacity: 0.8;
padding-top: 13px;
margin-bottom: 0;
}
</style>

11
packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte Normal file
View File

@ -0,0 +1,11 @@
<script>
/*
This file exists because of how we pass this control to the
properties panel - via a JS reference, not using svelte tags
... checkout the use of Input in propertyCategories to see what i mean
*/
import { Input } from "@budibase/bbui"
export let name, value, placeholder, type
</script>
<Input {name} {value} {placeholder} {type} thin on:change />

52
packages/builder/src/components/userInterface/PropsView.svelte
View File

@ -1,52 +0,0 @@
<script>
import { some, includes, filter } from "lodash/fp"
import PropControl from "./PropControl.svelte"
import IconButton from "../common/IconButton.svelte"
export let component
export let components
let errors = []
const props_to_ignore = ["_component", "_children", "_styles", "_code", "_id"]
$: componentDef = components[component._component]
</script>
<div class="root">
<form on:submit|preventDefault class="uk-form-stacked form-root">
{#if componentDef}
{#each Object.entries(componentDef.props) as [prop_name, prop_def], index}
{#if prop_def !== 'event'}
<div class="prop-container">
<PropControl
{prop_name}
prop_value={component[prop_name]}
prop_definition={prop_def}
{index}
disabled={false} />
</div>
{/if}
{/each}
{/if}
</form>
</div>
<style>
.root {
font-size: 10pt;
width: 100%;
}
.form-root {
display: flex;
flex-wrap: wrap;
}
.prop-container {
flex: 1 1 auto;
min-width: 250px;
}
</style>

3
packages/builder/src/components/userInterface/SettingsView.svelte
View File

@ -1,7 +1,6 @@
<script> <script>
import PropertyControl from "./PropertyControl.svelte" import PropertyControl from "./PropertyControl.svelte"
import InputGroup from "../common/Inputs/InputGroup.svelte" import Input from "./PropertyPanelControls/Input.svelte"
import Input from "../common/Input.svelte"
import { goto } from "@sveltech/routify" import { goto } from "@sveltech/routify"
import { excludeProps } from "./propertyCategories.js" import { excludeProps } from "./propertyCategories.js"

63
packages/builder/src/components/userInterface/StateBindingControl.svelte
View File

@ -1,63 +0,0 @@
<script>
import { backendUiStore } from "builderStore"
import IconButton from "../common/IconButton.svelte"
import Input from "../common/Input.svelte"
export let value = ""
export let onChanged = () => {}
export let type = ""
export let options = []
export let styleBindingProperty = ""
$: bindOptionToStyle = !!styleBindingProperty
</script>
<div class="unbound-container">
{#if type === 'bool'}
<div>
<IconButton
icon={value == true ? 'check-square' : 'square'}
size="19"
on:click={() => onChanged(!value)} />
</div>
{:else if type === 'models'}
<select
class="uk-select uk-form-small"
bind:value
on:change={() => {
onChanged(value)
}}>
{#each $backendUiStore.models || [] as option}
<option value={option}>{option.name}</option>
{/each}
</select>
{:else if type === 'options' || type === 'models'}
<select
class="uk-select uk-form-small"
{value}
on:change={ev => onChanged(ev.target.value)}>
{#each options || [] as option}
{#if bindOptionToStyle}
<option style={`${styleBindingProperty}: ${option};`} value={option}>
{option}
</option>
{:else}
<option value={option}>{option}</option>
{/if}
{/each}
</select>
{/if}
</div>
<style>
.unbound-container {
display: flex;
}
.bound-header > div:nth-child(1) {
flex: 1 0 auto;
width: 30px;
color: var(--secondary50);
padding-left: 5px;
}
</style>

2
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -1,4 +1,4 @@
import Input from "../common/Input.svelte" import Input from "./PropertyPanelControls/Input.svelte"
import OptionSelect from "./OptionSelect.svelte" import OptionSelect from "./OptionSelect.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte" import FlatButtonGroup from "./FlatButtonGroup.svelte"
import Colorpicker from "@budibase/colorpicker" import Colorpicker from "@budibase/colorpicker"

2
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -1,4 +1,4 @@
import Input from "../common/Input.svelte" import Input from "./PropertyPanelControls/Input.svelte"
import OptionSelect from "./OptionSelect.svelte" import OptionSelect from "./OptionSelect.svelte"
import Checkbox from "../common/Checkbox.svelte" import Checkbox from "../common/Checkbox.svelte"
import ModelSelect from "components/userInterface/ModelSelect.svelte" import ModelSelect from "components/userInterface/ModelSelect.svelte"

4
packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte
View File

@ -1,5 +1,6 @@
<script> <script>
import { backendUiStore } from "builderStore" import { backendUiStore } from "builderStore"
import { Input } from "@budibase/bbui"
export let value export let value
</script> </script>
@ -19,8 +20,7 @@
<label class="uk-form-label fields">Fields</label> <label class="uk-form-label fields">Fields</label>
{#each Object.keys(value.model.schema) as field} {#each Object.keys(value.model.schema) as field}
<div class="uk-form-controls uk-margin"> <div class="uk-form-controls uk-margin">
<label class="uk-form-label">{field}</label> <Input bind:value={value[field]} label={field} />
<input type="text" class="budibase__input" bind:value={value[field]} />
</div> </div>
{/each} {/each}
</div> </div>

26
packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
View File

@ -5,7 +5,7 @@
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte" import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte" import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
import { Button } from "@budibase/bbui" import { Button, Input } from "@budibase/bbui"
const { open, close } = getContext("simple-modal") const { open, close } = getContext("simple-modal")
@ -112,13 +112,7 @@
<div class="panel-body"> <div class="panel-body">
<div class="block-label">Workflow: {workflow.name}</div> <div class="block-label">Workflow: {workflow.name}</div>
<div class="config-item"> <div class="config-item">
<label>Name</label> <Input label="Name" bind:value={workflow.name} thin />
<div class="form">
<input
type="text"
class="budibase_input"
bind:value={workflow.name} />
</div>
</div> </div>
<div class="config-item"> <div class="config-item">
<label class="uk-form-label">User Access</label> <label class="uk-form-label">User Access</label>
@ -194,28 +188,12 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
.budibase_input {
height: 36px;
width: 244px;
border-radius: 3px;
background-color: var(--grey-2);
border: 1px solid var(--grey-2);
text-align: left;
color: var(--ink);
font-size: 14px;
padding-left: 12px;
}
header > span { header > span {
color: var(--grey-5); color: var(--grey-5);
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
} }
.form {
margin-top: 12px;
}
label { label {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;

42
packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
View File

@ -3,6 +3,7 @@
import ComponentSelector from "./ParamInputs/ComponentSelector.svelte" import ComponentSelector from "./ParamInputs/ComponentSelector.svelte"
import ModelSelector from "./ParamInputs/ModelSelector.svelte" import ModelSelector from "./ParamInputs/ModelSelector.svelte"
import RecordSelector from "./ParamInputs/RecordSelector.svelte" import RecordSelector from "./ParamInputs/RecordSelector.svelte"
import { Input, TextArea, Select } from "@budibase/bbui"
export let workflowBlock export let workflowBlock
@ -18,42 +19,34 @@
<div class="block-field"> <div class="block-field">
<label class="label">{parameter}</label> <label class="label">{parameter}</label>
{#if Array.isArray(type)} {#if Array.isArray(type)}
<select class="budibase_input" bind:value={workflowBlock.args[parameter]}> <Select bind:value={workflowBlock.args[parameter]} thin>
{#each type as option} {#each type as option}
<option value={option}>{option}</option> <option value={option}>{option}</option>
{/each} {/each}
</select> </Select>
{:else if type === 'component'} {:else if type === 'component'}
<ComponentSelector bind:value={workflowBlock.args[parameter]} /> <ComponentSelector bind:value={workflowBlock.args[parameter]} />
{:else if type === 'accessLevel'} {:else if type === 'accessLevel'}
<select class="budibase_input" bind:value={workflowBlock.args[parameter]}> <Select bind:value={workflowBlock.args[parameter]} thin>
<option value="ADMIN">Admin</option> <option value="ADMIN">Admin</option>
<option value="POWER_USER">Power User</option> <option value="POWER_USER">Power User</option>
</select> </Select>
{:else if type === 'password'} {:else if type === 'password'}
<input <Input type="password" thin bind:value={workflowBlock.args[parameter]} />
type="password"
class="budibase_input"
bind:value={workflowBlock.args[parameter]} />
{:else if type === 'number'} {:else if type === 'number'}
<input <Input type="number" thin bind:value={workflowBlock.args[parameter]} />
type="number"
class="budibase_input"
bind:value={workflowBlock.args[parameter]} />
{:else if type === 'longText'} {:else if type === 'longText'}
<textarea <TextArea
type="text" type="text"
class="budibase_input" thin
bind:value={workflowBlock.args[parameter]} /> bind:value={workflowBlock.args[parameter]}
label="" />
{:else if type === 'model'} {:else if type === 'model'}
<ModelSelector bind:value={workflowBlock.args[parameter]} /> <ModelSelector bind:value={workflowBlock.args[parameter]} />
{:else if type === 'record'} {:else if type === 'record'}
<RecordSelector bind:value={workflowBlock.args[parameter]} /> <RecordSelector bind:value={workflowBlock.args[parameter]} />
{:else if type === 'string'} {:else if type === 'string'}
<input <Input type="text" thin bind:value={workflowBlock.args[parameter]} />
type="text"
class="budibase_input"
bind:value={workflowBlock.args[parameter]} />
{/if} {/if}
</div> </div>
{/each} {/each}
@ -62,17 +55,6 @@
.block-field { .block-field {
display: grid; display: grid;
} }
.budibase_input {
height: 36px;
border-radius: 5px;
background-color: var(--grey-2);
border: 1px solid var(--grey-2);
text-align: left;
color: var(--ink);
font-size: 14px;
padding-left: 12px;
margin-top: 8px;
}
label { label {
text-transform: capitalize; text-transform: capitalize;

4
packages/builder/src/components/workflow/WorkflowPanel/WorkflowList/CreateWorkflowModal.svelte
View File

@ -2,6 +2,7 @@
import { store, backendUiStore, workflowStore } from "builderStore" import { store, backendUiStore, workflowStore } from "builderStore"
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import ActionButton from "components/common/ActionButton.svelte" import ActionButton from "components/common/ActionButton.svelte"
import { Input } from "@budibase/bbui"
export let onClosed export let onClosed
@ -26,8 +27,7 @@
Create Workflow Create Workflow
</header> </header>
<div> <div>
<label class="uk-form-label" for="form-stacked-text">Name</label> <Input bind:value={name} label="Name" />
<input class="uk-input" type="text" bind:value={name} />
</div> </div>
<footer> <footer>
<a href="https://docs.budibase.com"> <a href="https://docs.budibase.com">

2
packages/builder/src/index.html
View File

@ -11,9 +11,7 @@
<link rel='icon' type='image/png' href='/_builder/favicon.png'> <link rel='icon' type='image/png' href='/_builder/favicon.png'>
<link rel='stylesheet' href='/_builder/global.css'> <link rel='stylesheet' href='/_builder/global.css'>
<link rel='stylesheet' href='/_builder/codemirror.css'>
<link rel='stylesheet' href='/_builder/budibase.css'> <link rel='stylesheet' href='/_builder/budibase.css'>
<link rel='stylesheet' href='/_builder/monokai.css'>
<link rel='stylesheet' href='/_builder/bundle.css'> <link rel='stylesheet' href='/_builder/bundle.css'>
<link rel='stylesheet' href='/_builder/bbui.css'> <link rel='stylesheet' href='/_builder/bbui.css'>
<link rel='stylesheet' href='/_builder/fonts.css'> <link rel='stylesheet' href='/_builder/fonts.css'>