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

Input components and tidyup

This commit is contained in:
Conor_Mack 2020-04-23 13:22:41 +01:00
parent 3a647a873e
commit 8eafbb74ae
12 changed files with 139 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -95,9 +95,6 @@
{/each}
</ul>
<div class="panel">
<!-- <Tab
list={selectedCategory}
on:selectItem={e => onComponentChosen(e.detail)} /> -->
<Tab
list={selectedCategory}
on:selectItem={e => onComponentChosen(e.detail)}

2
packages/builder/src/components/userInterface/ItemTab/Item.svelte
View File

@ -24,14 +24,12 @@
}
.item-item:hover {
/* background: #f5f5f5; */
background: #fbfbfb;
border-radius: 5px;
}
.item-icon {
flex: 0 0 40px;
/* background: #efe9e9; */
background: #f1f4fc;
height: 40px;
border-radius: 5px;

1
packages/builder/src/components/userInterface/ItemTab/Tab.svelte
View File

@ -39,5 +39,6 @@
border: solid 1px #e8e8ef;
background: white;
margin-bottom: 20px;
cursor: pointer;
}
</style>

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

@ -21,7 +21,8 @@ export default {
{
_component: '@budibase/standard-components/heading',
name: 'Headline',
icon: 'headline',
description: "A component for displaying heading text",
icon: "ri-heading",
props: {
type: {
type: "options",
@ -34,11 +35,48 @@ export default {
{
_component: '@budibase/standard-components/text',
name: 'Paragraph',
icon: 'paragraph',
description: "A component for displaying paragraph text.",
icon: 'ri-paragraph',
props: {}
}
]
},
{
name: 'Input',
description: "These components handle user input.",
icon: 'ri-edit-box-line',
commonProps: {},
children: [
{
_component: "@budibase/standard-components/textfield",
name: "Textfield",
description: "A textfield component that allows the user to input text.",
icon: 'ri-edit-box-line',
props: {}
},
{
_component: "@budibase/standard-components/checkbox",
name: "Checkbox",
description: "A selectable checkbox component",
icon: 'ri-checkbox-line',
props: {}
},
{
_component: "@budibase/standard-components/radiobutton",
name: "Radiobutton",
description: "A selectable radiobutton component",
icon: 'ri-radio-button-line',
props: {}
},
{
_component: "@budibase/standard-components/select",
name: "Select",
description: "A select component for choosing from different options",
icon: 'ri-file-list-line',
props: {}
}
]
},
{
_component: "@budibase/standard-components/button",
name: 'Button',
@ -48,6 +86,7 @@ export default {
children: []
},
{
_component: "@budibase/standard-components/icon",
name: 'Icon',
description: 'A basic component for displaying icons',
icon: 'ri-sun-fill',
@ -55,13 +94,7 @@ export default {
children: []
},
{
name: 'Avatar',
description: 'A basic component for rendering an avatar',
icon: 'ri-user-smile-fill',
commonProps: {},
children: []
},
{
_component: "@budibase/standard-components/link",
name: 'Link',
description: 'A basic link component for internal and external links',
icon: 'ri-link',

37
packages/standard-components/components.json
View File

@ -103,6 +103,7 @@
"props" : {
"text": "string",
"font": "string",
"fontSize": "string",
"color": "string",
"textAlign": {
"type": "options",
@ -138,6 +139,42 @@
},
"tags": ["div", "container"]
},
"textfield": {
"name": "Textfield",
"description": "A component that allows the user to input text.",
"props": {
"label": "string",
"value": "string",
"onchange": "event"
}
},
"checkbox": {
"name": "Checkbox",
"description": "A selectable checkbox component",
"props": {
"label": "string",
"checked": "bool",
"value": "string",
"onchange": "event"
}
},
"radiobutton": {
"name": "Radiobutton",
"description": "A selectable radiobutton component",
"props": {
"label": "string",
"checked": "bool",
"value": "string",
"onchange": "event"
}
},
"icon": {
"description": "A HTML icon tag",
"props": {
"icon": "string",
"fontSize": "string"
}
},
"link": {
"description": "an HTML anchor <a> tag",
"props": {

11
packages/standard-components/src/Checkbox.svelte Normal file
View File

@ -0,0 +1,11 @@
<script>
import Input from "./Input.svelte"
export let _bb
export let label = ""
export let checked = false
export let value = ""
export let onchange = () => {}
</script>
<Input type="checkbox" {_bb} {checked} {label} {value} {onchange} />

9
packages/standard-components/src/Icon.svelte Normal file
View File

@ -0,0 +1,9 @@
<script>
export let icon = ""
export let fontSize = "1em"
export let _bb
$: style = { fontSize }
</script>
<i class={icon} {style} />

6
packages/standard-components/src/Input.svelte
View File

@ -1,7 +1,10 @@
<script>
export let id = ""
export let value = ""
export let className = ""
export let type = "text"
export let label = ""
export let checked = false
export let _bb
@ -14,4 +17,5 @@
}
</script>
<input class={className} {type} {value} on:change={onchange} />
<label for={id}>{label}</label>
<input {id} class={className} {type} {value} {checked} on:change={onchange} />

11
packages/standard-components/src/Radiobutton.svelte Normal file
View File

@ -0,0 +1,11 @@
<script>
import Input from "./Input.svelte"
export let _bb
export let label = ""
export let checked = false
export let value = ""
export let onchange = () => {}
</script>
<Input type="radio" {_bb} {checked} {label} {value} {onchange} />

21
packages/standard-components/src/Text.svelte
View File

@ -7,29 +7,26 @@
export let formattingTag = ""
export let font = ""
export let fontSize = "1em"
export let textAlign = ""
export let verticalAlign = ""
export let color = ""
export let _bb
let style = ""
const isTag = tag => (formattingTag || "").indexOf(tag) > -1
$: {
style = buildStyle({
font,
verticalAlign,
color,
"text-align": textAlign,
"vertical-align": verticalAlign,
})
}
$: style = buildStyle({
font: `${fontSize} ${font}`,
verticalAlign,
color,
"text-align": textAlign,
"vertical-align": verticalAlign,
})
</script>
{#if isTag('none')}
<span>{text}</span>
<span {style}>{text}</span>
{:else if isTag('<b>')}
<b class={className} {style}>{text}</b>
{:else if isTag('<strong>')}

10
packages/standard-components/src/Textfield.svelte Normal file
View File

@ -0,0 +1,10 @@
<script>
import Input from "./Input.svelte"
export let _bb
export let label = ""
export let value = ""
export let onchange = () => {}
</script>
<Input type="text" {_bb} {label} {value} {onchange} />

4
packages/standard-components/src/index.js
View File

@ -3,9 +3,13 @@ export { default as text } from "./Text.svelte"
export { default as heading } from "./Heading.svelte"
export { default as input } from "./Input.svelte"
export { default as select } from "./Select.svelte"
export { default as textfield } from "./Textfield.svelte"
export { default as checkbox } from "./Checkbox.svelte"
export { default as radiobutton } from "./Radiobutton.svelte"
export { default as option } from "./Option.svelte"
export { default as button } from "./Button.svelte"
export { default as login } from "./Login.svelte"
export { default as saveRecordButton } from "./Templates/saveRecordButton"
export { default as link } from "./Link.svelte"
export { default as image } from "./Image.svelte"
export { default as icon } from "./Icon.svelte"