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

all inputs using BBUI

This commit is contained in:
Michael Shanks 2020-08-18 14:51:02 +01:00
parent 49572d8c39
commit 682498b719
5 changed files with 14 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>

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

@ -6,7 +6,6 @@
import IconButton from "../../common/IconButton.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 { CloseIcon } from "components/common/Icons/"

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 />

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

@ -1,9 +1,9 @@
import Input from "../common/Input.svelte"
import Input from "./PropertyPanelControls/Input.svelte"
import OptionSelect from "./OptionSelect.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte"
import Colorpicker from "@budibase/colorpicker"
/*
TODO: Allow for default values for all properties
TODO: Allow for default values for all proproperties
*/
export const layout = [

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 Checkbox from "../common/Checkbox.svelte"
import ModelSelect from "components/userInterface/ModelSelect.svelte"