Merge pull request #292 from Budibase/components/card-settings-and-input-suffix
Components/card settings and input suffix
This commit is contained in:
commit
f9217bbecd
4 changed files with 47 additions and 3 deletions
|
@ -5,13 +5,23 @@
|
||||||
export let textAlign = "left"
|
export let textAlign = "left"
|
||||||
export let width = "160px"
|
export let width = "160px"
|
||||||
export let placeholder = ""
|
export let placeholder = ""
|
||||||
|
export let suffix = ""
|
||||||
|
export let onChange = val => {}
|
||||||
|
|
||||||
let centerPlaceholder = textAlign === "center"
|
let centerPlaceholder = textAlign === "center"
|
||||||
|
|
||||||
let style = buildStyle({ width, textAlign })
|
let style = buildStyle({ width, textAlign })
|
||||||
|
|
||||||
|
function handleChange(val) {
|
||||||
|
value = val
|
||||||
|
onChange(value)
|
||||||
|
}
|
||||||
|
|
||||||
|
$: displayValue = suffix && value.endsWith(suffix) ? value.replace(new RegExp(`${suffix}$`), "") : value
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<input class:centerPlaceholder type="text" {placeholder} {style} on:change bind:value />
|
<input class:centerPlaceholder type="text" value={displayValue} {placeholder} {style} on:change={e => handleChange(e.target.value)} />
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
input {
|
input {
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
textAlign="center"
|
textAlign="center"
|
||||||
placeholder={m.placeholder || ''}
|
placeholder={m.placeholder || ''}
|
||||||
value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}
|
value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}
|
||||||
on:change={e => handleChange(e.target.value || 0, i)} />
|
onChange={value => handleChange(value || 0, i)} />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -103,6 +103,7 @@ export const size = [
|
||||||
key: "width",
|
key: "width",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
|
suffix: "px",
|
||||||
width: "48px",
|
width: "48px",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
|
@ -111,6 +112,7 @@ export const size = [
|
||||||
key: "height",
|
key: "height",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
|
suffix: "px",
|
||||||
width: "48px",
|
width: "48px",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
|
@ -119,6 +121,7 @@ export const size = [
|
||||||
key: "min-width",
|
key: "min-width",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
|
suffix: "px",
|
||||||
width: "48px",
|
width: "48px",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
|
@ -126,6 +129,7 @@ export const size = [
|
||||||
label: "Min H",
|
label: "Min H",
|
||||||
key: "min-height",
|
key: "min-height",
|
||||||
control: Input,
|
control: Input,
|
||||||
|
suffix: "px",
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
width: "48px",
|
width: "48px",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
|
@ -135,6 +139,7 @@ export const size = [
|
||||||
key: "max-width",
|
key: "max-width",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
|
suffix: "px",
|
||||||
width: "48px",
|
width: "48px",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
|
@ -143,6 +148,7 @@ export const size = [
|
||||||
key: "max-height",
|
key: "max-height",
|
||||||
control: Input,
|
control: Input,
|
||||||
placeholder: "px",
|
placeholder: "px",
|
||||||
|
suffix: "px",
|
||||||
width: "48px",
|
width: "48px",
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
},
|
},
|
||||||
|
|
|
@ -229,7 +229,35 @@ export default {
|
||||||
"A basic card component that can contain content and actions.",
|
"A basic card component that can contain content and actions.",
|
||||||
icon: "ri-layout-bottom-fill",
|
icon: "ri-layout-bottom-fill",
|
||||||
children: [],
|
children: [],
|
||||||
properties: { design: { ...all } },
|
properties: {
|
||||||
|
design: { ...all },
|
||||||
|
settings: [
|
||||||
|
{
|
||||||
|
label: "Heading",
|
||||||
|
key: "heading",
|
||||||
|
control: Input,
|
||||||
|
placeholder: "text",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Subheading",
|
||||||
|
key: "subheading",
|
||||||
|
control: Input,
|
||||||
|
placeholder: "text",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Content",
|
||||||
|
key: "content",
|
||||||
|
control: Input,
|
||||||
|
placeholder: "text",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Image",
|
||||||
|
key: "imageUrl",
|
||||||
|
control: Input,
|
||||||
|
placeholder: "src",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Login",
|
name: "Login",
|
||||||
|
|
Loading…
Reference in a new issue