Splitting charcounter and helper text into own component. general tidyup
This commit is contained in:
parent
4e65562197
commit
e04c3a977f
4 changed files with 38 additions and 20 deletions
|
@ -35,8 +35,8 @@ export const props = {
|
||||||
label: "First",
|
label: "First",
|
||||||
colour: "secondary",
|
colour: "secondary",
|
||||||
fullwidth: true,
|
fullwidth: true,
|
||||||
|
maxLength: 500,
|
||||||
helperText: "Add Surname",
|
helperText: "Add Surname",
|
||||||
useCharCounter: true,
|
|
||||||
onChange: text => console.log("Text: ", text),
|
onChange: text => console.log("Text: ", text),
|
||||||
},
|
},
|
||||||
checkbox: {
|
checkbox: {
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<div class="mdc-text-field-character-counter" />
|
|
@ -0,0 +1,24 @@
|
||||||
|
<script>
|
||||||
|
import ClassBuilder from "../ClassBuilder.js"
|
||||||
|
import CharacterCounter from "./CharacterCounter.svelte"
|
||||||
|
|
||||||
|
export let persistent = false
|
||||||
|
export let validation = false
|
||||||
|
export let useCharCounter = false
|
||||||
|
export let errorText = ""
|
||||||
|
export let helperText = ""
|
||||||
|
|
||||||
|
const cb = new ClassBuilder("text-field-helper-text")
|
||||||
|
|
||||||
|
let modifiers = { persistent, validation }
|
||||||
|
let props = { modifiers }
|
||||||
|
|
||||||
|
let helperClasses = cb.build({ props })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mdc-text-field-helper-line">
|
||||||
|
<div class={helperClasses}>{!!errorText ? errorText : helperText}</div>
|
||||||
|
{#if useCharCounter}
|
||||||
|
<CharacterCounter />
|
||||||
|
{/if}
|
||||||
|
</div>
|
|
@ -6,6 +6,8 @@
|
||||||
import ClassBuilder from "../ClassBuilder.js"
|
import ClassBuilder from "../ClassBuilder.js"
|
||||||
import NotchedOutline from "../Common/NotchedOutline.svelte"
|
import NotchedOutline from "../Common/NotchedOutline.svelte"
|
||||||
import FloatingLabel from "../Common/FloatingLabel.svelte"
|
import FloatingLabel from "../Common/FloatingLabel.svelte"
|
||||||
|
import HelperText from "./HelperText.svelte"
|
||||||
|
import CharacterCounter from "./CharacterCounter.svelte"
|
||||||
import Icon from "../Icon.svelte"
|
import Icon from "../Icon.svelte"
|
||||||
|
|
||||||
const cb = new ClassBuilder("text-field", ["primary", "medium"])
|
const cb = new ClassBuilder("text-field", ["primary", "medium"])
|
||||||
|
@ -31,9 +33,8 @@
|
||||||
export let size = "medium"
|
export let size = "medium"
|
||||||
export let type = "text" //text or password
|
export let type = "text" //text or password
|
||||||
export let required = false
|
export let required = false
|
||||||
export let minLength = 0
|
export let minLength = null
|
||||||
export let maxLength = 100
|
export let maxLength = null
|
||||||
export let useCharCounter = false
|
|
||||||
export let helperText = ""
|
export let helperText = ""
|
||||||
export let errorText = ""
|
export let errorText = ""
|
||||||
export let placeholder = ""
|
export let placeholder = ""
|
||||||
|
@ -64,21 +65,16 @@
|
||||||
modifiers = { ...modifiers, noLabel: "no-label" }
|
modifiers = { ...modifiers, noLabel: "no-label" }
|
||||||
}
|
}
|
||||||
|
|
||||||
let helperClasses = cb.debase(`${cb.block}-helper-text`, {
|
|
||||||
modifiers: { persistent, validation },
|
|
||||||
})
|
|
||||||
|
|
||||||
let useLabel = !!label && (!fullwidth || (fullwidth && textarea))
|
let useLabel = !!label && (!fullwidth || (fullwidth && textarea))
|
||||||
let useIcon = !!icon && (!textarea && !fullwidth)
|
let useIcon = !!icon && (!textarea && !fullwidth)
|
||||||
|
|
||||||
$: useNotchedOutline = variant == "outlined" || textarea
|
|
||||||
|
|
||||||
if (useIcon) {
|
if (useIcon) {
|
||||||
setContext("BBMD:icon:context", "text-field")
|
setContext("BBMD:icon:context", "text-field")
|
||||||
let iconClass = trailingIcon ? "with-trailing-icon" : "with-leading-icon"
|
let iconClass = trailingIcon ? "with-trailing-icon" : "with-leading-icon"
|
||||||
modifiers = { ...modifiers, iconClass }
|
modifiers = { ...modifiers, iconClass }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$: useNotchedOutline = variant == "outlined" || textarea
|
||||||
$: renderLeadingIcon = useIcon && !trailingIcon
|
$: renderLeadingIcon = useIcon && !trailingIcon
|
||||||
$: renderTrailingIcon = useIcon && trailingIcon
|
$: renderTrailingIcon = useIcon && trailingIcon
|
||||||
|
|
||||||
|
@ -100,9 +96,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
|
||||||
<div class="textfield-container" class:fullwidth>
|
<div class="textfield-container" class:fullwidth>
|
||||||
<div bind:this={tf} class={blockClasses}>
|
<div bind:this={tf} class={blockClasses}>
|
||||||
{#if textarea}
|
{#if textarea}
|
||||||
{#if useCharCounter}
|
<CharacterCounter />
|
||||||
<div class="mdc-text-field-character-counter">{renderMaxLength}</div>
|
|
||||||
{/if}
|
|
||||||
<textarea
|
<textarea
|
||||||
{id}
|
{id}
|
||||||
class={inputClasses}
|
class={inputClasses}
|
||||||
|
@ -148,13 +142,12 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
|
||||||
<FloatingLabel forInput={id} text={label} />
|
<FloatingLabel forInput={id} text={label} />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<!-- TODO: Split to own component? -->
|
<HelperText
|
||||||
<div class="mdc-text-field-helper-line">
|
{persistent}
|
||||||
<div class={helperClasses}>{!!errorText ? errorText : helperText}</div>
|
{validation}
|
||||||
{#if useCharCounter && !textarea}
|
{errorText}
|
||||||
<div class="mdc-text-field-character-counter">{renderMaxLength}</div>
|
{helperText}
|
||||||
{/if}
|
useCharCounter={!!maxLength && !textarea} />
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
Loading…
Reference in a new issue