Merge pull request #543 from mjashanks/master
Cleanup - Using BBUI components
This commit is contained in:
commit
db3d4f7df3
27 changed files with 67 additions and 748 deletions
|
@ -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()
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
|
@ -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>
|
|
|
@ -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>
|
|
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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,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"
|
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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/"
|
||||||
|
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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>
|
|
|
@ -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"
|
|
||||||
class:uk-form-danger={saveAttempted && (route.length === 0 || routeNameExists(route))}
|
|
||||||
bind:value={route}
|
bind:value={route}
|
||||||
on:change={routeChanged} />
|
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
|
|
||||||
class="uk-select uk-form-small"
|
|
||||||
bind:value={layoutComponent}
|
|
||||||
class:uk-form-danger={saveAttempted && !layoutComponent}>
|
|
||||||
{#each layoutComponents as { _component, name }}
|
{#each layoutComponents as { _component, name }}
|
||||||
<option value={_component}>{name}</option>
|
<option value={_component}>{name}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</select>
|
</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>
|
||||||
|
|
|
@ -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>
|
|
|
@ -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 />
|
|
@ -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>
|
|
|
@ -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"
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
|
@ -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"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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'>
|
||||||
|
|
Loading…
Reference in a new issue