Merge pull request #208 from Conor-Mack/material-des-builder-testing
All Changes and Bugfixes from Builder Testing
This commit is contained in:
Conor_Mack
GitHub
commit
ca73e923d7
|
|
@ -88,7 +88,7 @@ const css_map = {
|
|||
}
|
||||
|
||||
export const generate_rule = ([name, values]) =>
|
||||
`${css_map[name].name}: ${css_map[name].generate(values)};`
|
||||
`${css_map[name].name}: ${css_map[name].generate(values)} !important;`
|
||||
|
||||
const handle_grid = (acc, [name, value]) => {
|
||||
let tmp = []
|
||||
|
|
@ -113,7 +113,9 @@ const object_to_css_string = [
|
|||
export const generate_css = ({ layout, position }) => {
|
||||
let _layout = pipe(layout, object_to_css_string)
|
||||
if (_layout.length) {
|
||||
_layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};`
|
||||
_layout += `\ndisplay: ${
|
||||
_layout.includes("flex") ? "flex" : "grid"
|
||||
} !important;`
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
@ -134,7 +136,6 @@ export const generate_screen_css = component_array => {
|
|||
|
||||
styles += apply_class(_id, "pos", position) + "\n"
|
||||
styles += apply_class(_id, "lay", layout) + "\n"
|
||||
|
||||
if (_children && _children.length) {
|
||||
styles += generate_screen_css(_children) + "\n"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,5 +2,5 @@
|
|||
node_modules
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
dist/index.js
|
||||
dist/*
|
||||
public/build
|
||||
|
|
@ -14,9 +14,7 @@
|
|||
"name": "Body1",
|
||||
"description": "Sets the font properties as Roboto Body 1",
|
||||
"props": {
|
||||
"text": "string",
|
||||
"verticalMargin": "number",
|
||||
"horizontalMargin": "number"
|
||||
"text": "string"
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
|
|
@ -58,6 +56,11 @@
|
|||
"type": "options",
|
||||
"options": ["one-line", "two-line"],
|
||||
"default": "one-line"
|
||||
},
|
||||
"inputElement": {
|
||||
"type": "options",
|
||||
"options": ["None", "Radiobutton", "Checkbox"],
|
||||
"default": "None"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -70,9 +73,8 @@
|
|||
"secondaryText": "string",
|
||||
"leadingIcon": "string",
|
||||
"trailingIcon": "string",
|
||||
"selected": "bool",
|
||||
"disabled": "bool",
|
||||
"divideAfter": "bool"
|
||||
"dividerAfter": "bool"
|
||||
}
|
||||
},
|
||||
"Button": {
|
||||
|
|
@ -117,12 +119,12 @@
|
|||
"name": "Card",
|
||||
"description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",
|
||||
"props": {
|
||||
"width": "string",
|
||||
"width": {"type": "string", "default": "350px"},
|
||||
"height": "string",
|
||||
"variant": {
|
||||
"type": "options",
|
||||
"options": ["standard", "outlined"],
|
||||
"default": "standard"
|
||||
"default": "outlined"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -184,7 +186,6 @@
|
|||
"options": ["row", "column"],
|
||||
"default": "row"
|
||||
},
|
||||
"fullwidth": "bool",
|
||||
"disabled": "bool",
|
||||
"alignEnd": "bool"
|
||||
}
|
||||
|
|
@ -276,14 +277,18 @@
|
|||
"tags": []
|
||||
},
|
||||
"IconButton": {
|
||||
"onClick": "event",
|
||||
"disabled": "bool",
|
||||
"href": "string",
|
||||
"icon": "string",
|
||||
"size": {
|
||||
"type":"options",
|
||||
"options": ["small", "medium", "large"],
|
||||
"default": "medium"
|
||||
"name": "IconButton",
|
||||
"description": "An icon button component",
|
||||
"props": {
|
||||
"onClick": "event",
|
||||
"disabled": "bool",
|
||||
"href": "string",
|
||||
"icon": "string",
|
||||
"size": {
|
||||
"type":"options",
|
||||
"options": ["small", "medium", "large"],
|
||||
"default": "medium"
|
||||
}
|
||||
},
|
||||
"tags": []
|
||||
},
|
||||
|
|
@ -291,6 +296,7 @@
|
|||
"name": "Label",
|
||||
"description": "A simple label component that displays its text in the standard Roboto Material Design font",
|
||||
"props": {
|
||||
"text": "string",
|
||||
"bold": "bool"
|
||||
},
|
||||
"tags": []
|
||||
|
|
@ -323,7 +329,6 @@
|
|||
"id": "string",
|
||||
"label": "string",
|
||||
"name": "string",
|
||||
"checked": "bool",
|
||||
"disabled": "bool",
|
||||
"alignEnd": "bool"
|
||||
},
|
||||
|
|
@ -334,6 +339,7 @@
|
|||
"description": "A Material Design Radiobutton group. Supports row and column orientation.",
|
||||
"props": {
|
||||
"onChange": "event",
|
||||
"label": "string",
|
||||
"name": "string",
|
||||
"orientation": {
|
||||
"type": "options",
|
||||
|
|
@ -394,14 +400,10 @@
|
|||
"minLength": "number",
|
||||
"maxLength": "number",
|
||||
"helperText": "string",
|
||||
"errorText": "string",
|
||||
"placeholder": "string",
|
||||
"icon": "string",
|
||||
"trailingIcon": "bool",
|
||||
"textarea": "bool",
|
||||
"rows": "number",
|
||||
"cols": "number",
|
||||
"validation": "bool",
|
||||
"persistent": "bool"
|
||||
},
|
||||
"tags": []
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ export default {
|
|||
file: "dist/index.js",
|
||||
format: "esm",
|
||||
name: "budibaseStandardComponents",
|
||||
sourcemap: "inline",
|
||||
sourcemap: true,
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
|
|
|
|||
|
|
@ -55,11 +55,11 @@
|
|||
{disabled}
|
||||
on:click={clicked}>
|
||||
{#if renderLeadingIcon}
|
||||
<Icon context="button" {icon} />
|
||||
<Icon context="button__icon" {icon} />
|
||||
{/if}
|
||||
<span class={labelClass}>{text}</span>
|
||||
{#if renderTrailingIcon}
|
||||
<Icon context="button" {icon} />
|
||||
<Icon context="button__icon" {icon} />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -22,13 +22,18 @@
|
|||
$: cardClass = cb.build({ props })
|
||||
|
||||
$: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width
|
||||
|
||||
$: safeHeight =
|
||||
height !== "auto" && !/px$/.test(height) ? `${width}px` : height
|
||||
height !== "auto" && !/px$/.test(height) ? `${height}px` : height
|
||||
|
||||
$: card && _bb.attachChildren(card)
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={card}
|
||||
style={`width: ${safeWidth}; height: ${safeHeight}`}
|
||||
class={cardClass} />
|
||||
<div bind:this={card} class={`bbmd-card ${cardClass}`} />
|
||||
|
||||
<style>
|
||||
.bbmd-card {
|
||||
width: 350px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -94,27 +94,29 @@
|
|||
<!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? -->
|
||||
|
||||
{#if context !== 'list-item'}
|
||||
<Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}>
|
||||
<div bind:this={checkbox} class={blockClass}>
|
||||
<input
|
||||
type="checkbox"
|
||||
class={cb.elem`native-control`}
|
||||
{id}
|
||||
disabled={isDisabled}
|
||||
{isChecked}
|
||||
on:change={changed} />
|
||||
<div class={cb.elem`background`}>
|
||||
<svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
|
||||
<path
|
||||
class={cb.elem`checkmark-path`}
|
||||
fill="none"
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59" />
|
||||
</svg>
|
||||
<div class={cb.elem`mixedmark`} />
|
||||
<div class="bbmd-checkbox">
|
||||
<Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}>
|
||||
<div bind:this={checkbox} class={blockClass}>
|
||||
<input
|
||||
type="checkbox"
|
||||
class={cb.elem`native-control`}
|
||||
{id}
|
||||
disabled={isDisabled}
|
||||
checked={isChecked}
|
||||
on:change={changed} />
|
||||
<div class={cb.elem`background`}>
|
||||
<svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
|
||||
<path
|
||||
class={cb.elem`checkmark-path`}
|
||||
fill="none"
|
||||
d="M1.73,12.91 8.1,19.28 22.79,4.59" />
|
||||
</svg>
|
||||
<div class={cb.elem`mixedmark`} />
|
||||
</div>
|
||||
<div class={cb.elem`ripple`} />
|
||||
</div>
|
||||
<div class={cb.elem`ripple`} />
|
||||
</div>
|
||||
</Formfield>
|
||||
</Formfield>
|
||||
</div>
|
||||
{:else}
|
||||
<div bind:this={checkbox} class={blockClass}>
|
||||
<input
|
||||
|
|
@ -122,7 +124,7 @@
|
|||
class={cb.elem`native-control`}
|
||||
{id}
|
||||
disabled={isDisabled}
|
||||
{isChecked}
|
||||
checked={isChecked}
|
||||
on:change={changed} />
|
||||
<div class={cb.elem`background`}>
|
||||
<svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
|
||||
|
|
@ -136,3 +138,9 @@
|
|||
<div class={cb.elem`ripple`} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.bbmd-checkbox {
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
export let _bb
|
||||
export let label = ""
|
||||
export let orientation = "row"
|
||||
export let fullwidth = false
|
||||
export let onChange = selectedItems => {}
|
||||
|
||||
export let disabled = false
|
||||
|
|
@ -37,15 +36,14 @@
|
|||
<div class="checkbox-group__label">
|
||||
<Label text={label} bold />
|
||||
</div>
|
||||
<div class={`checkbox-group__boxes ${orientation}`}>
|
||||
<div bind:this={checkItems} class:fullwidth />
|
||||
</div>
|
||||
<div bind:this={checkItems} class={`checkbox-group__boxes ${orientation}`} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.checkbox-group__boxes.row > div:not(:first-child) {
|
||||
|
|
@ -68,9 +66,4 @@
|
|||
flex-flow: column wrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.fullwidth {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
let formField = null
|
||||
|
||||
$: modifiers = { alignEnd }
|
||||
$: props = { modifiers }
|
||||
$: props = { modifiers, extras: ["bbmd-form-field"] }
|
||||
|
||||
$: blockClasses = cb.build({ props })
|
||||
|
||||
|
|
@ -34,3 +34,9 @@
|
|||
<slot />
|
||||
<label for={id}>{label}</label>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.bbmd-form-field {
|
||||
width: fit-content;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
export let icon = ""
|
||||
export let context = ""
|
||||
|
||||
let cls = !!context ? `material-icons mdc-${context}__icon` : "material-icons"
|
||||
let cls = !!context ? `material-icons mdc-${context}` : "material-icons"
|
||||
</script>
|
||||
|
||||
<i class={cls}>{icon}</i>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
|
||||
let daysArr = []
|
||||
let navDate = new Date()
|
||||
|
||||
const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
|
||||
|
||||
export let _bb
|
||||
|
|
@ -50,6 +51,7 @@
|
|||
let year = getYear(navDate)
|
||||
date = new Date(year, month, dayOfMonth)
|
||||
handleSelect(date)
|
||||
openCalendar(false)
|
||||
}
|
||||
|
||||
function dateFieldChange(value) {
|
||||
|
|
@ -77,12 +79,13 @@
|
|||
instance.open = isOpen === undefined ? !instance.open : isOpen
|
||||
}
|
||||
|
||||
$: safeDate = !!date ? date : new Date()
|
||||
$: dateMonthEnds = endOfMonth(navDate).getDate()
|
||||
$: dateMonthBegins = startOfMonth(navDate).getDay()
|
||||
$: dayStart = dateMonthBegins + 1 //1 = sunday
|
||||
$: monthAndYear = format(navDate, "MMMM y")
|
||||
$: selectedDate = format(date, "dd/MM/yyyy")
|
||||
$: dayOfSelectedDate = getDate(date)
|
||||
$: selectedDate = format(safeDate, "dd/MM/yyyy")
|
||||
$: dayOfSelectedDate = getDate(safeDate)
|
||||
$: for (let d = 1; d <= dateMonthEnds; d++) {
|
||||
if (d === 1) {
|
||||
daysArr = [d]
|
||||
|
|
@ -93,7 +96,8 @@
|
|||
$: rowRepeater =
|
||||
dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
|
||||
$: sameMonthAndYear =
|
||||
getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate)
|
||||
getMonth(safeDate) === getMonth(navDate) &&
|
||||
getYear(safeDate) === getYear(navDate)
|
||||
</script>
|
||||
|
||||
<div class="mdc-menu-surface--anchor">
|
||||
|
|
@ -107,10 +111,7 @@
|
|||
iconButtonClick={openCalendar}
|
||||
icon="calendar_today" />
|
||||
|
||||
<div
|
||||
bind:this={menu}
|
||||
class="mdc-menu mdc-menu-surface bbmd-menu"
|
||||
style={`margin-top: 70px`}>
|
||||
<div bind:this={menu} class="mdc-menu mdc-menu-surface bbmd-menu">
|
||||
<div class="calendar-container">
|
||||
<div class="month-picker">
|
||||
<div>
|
||||
|
|
@ -155,6 +156,7 @@
|
|||
width: 330px;
|
||||
height: auto;
|
||||
padding: 5px;
|
||||
margin-top: 70px;
|
||||
}
|
||||
|
||||
.month-picker {
|
||||
|
|
|
|||
|
|
@ -50,12 +50,13 @@
|
|||
role = "menuitem"
|
||||
}
|
||||
|
||||
if (_addItem) {
|
||||
_addItem(itemData())
|
||||
}
|
||||
// TODO: Causing first element to be automatically selected. Commenting for now.
|
||||
// if (_addItem) {
|
||||
// _addItem(itemData())
|
||||
// }
|
||||
})
|
||||
|
||||
function handleClick() {
|
||||
function handleChange() {
|
||||
let item = itemData()
|
||||
if (!disabled) {
|
||||
if (
|
||||
|
|
@ -79,7 +80,8 @@
|
|||
}
|
||||
|
||||
$: isSelected =
|
||||
$selectedItems && selectedItems.getItemIdx($selectedItems, _id) > -1
|
||||
($selectedItems && selectedItems.getItemIdx($selectedItems, _id) > -1) ||
|
||||
selected
|
||||
|
||||
$: modifiers = {
|
||||
selected: isSelected && (!listProps || !listProps.inputElement),
|
||||
|
|
@ -90,14 +92,16 @@
|
|||
|
||||
$: useTwoLine =
|
||||
listProps && listProps.variant === "two-line" && !!secondaryText
|
||||
|
||||
$: hasInputElement = listProps && listProps.inputElement !== "None"
|
||||
</script>
|
||||
|
||||
<li
|
||||
class={listItemClass}
|
||||
role="option"
|
||||
tabindex="0"
|
||||
on:click={handleClick}
|
||||
data-value={value}
|
||||
on:click={handleChange}
|
||||
data-value={value || text}
|
||||
aria-selected={isSelected}>
|
||||
{#if leadingIcon}
|
||||
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">
|
||||
|
|
@ -111,13 +115,13 @@
|
|||
{:else}{text}{/if}
|
||||
</span>
|
||||
|
||||
{#if listProps}
|
||||
{#if listProps.inputElement === 'radiobutton'}
|
||||
{#if hasInputElement}
|
||||
{#if listProps.inputElement === 'Radiobutton'}
|
||||
<Radiobutton checked={isSelected} {disabled} {_bb} />
|
||||
{:else if listProps.inputElement === 'checkbox'}
|
||||
{:else if listProps.inputElement === 'Checkbox'}
|
||||
<Checkbox checked={isSelected} {disabled} {_bb} />
|
||||
{/if}
|
||||
{:else if trailingIcon}
|
||||
{:else if !!trailingIcon}
|
||||
<Icon context="list-item__meta" icon={trailingIcon} />
|
||||
{/if}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@
|
|||
class={cb.elem`native-control`}
|
||||
type="radio"
|
||||
{name}
|
||||
{checked}
|
||||
checked={isChecked}
|
||||
disabled={isDisabled}
|
||||
on:click={handleOnClick} />
|
||||
<div class={cb.elem`background`}>
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
class={cb.elem`native-control`}
|
||||
type="radio"
|
||||
{name}
|
||||
{checked}
|
||||
checked={isChecked}
|
||||
disabled={isDisabled}
|
||||
on:click={handleOnClick} />
|
||||
<div class={cb.elem`background`}>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
let selectList
|
||||
let instance
|
||||
let _helperId = ""
|
||||
let listItems = []
|
||||
// let listItems = []
|
||||
|
||||
export let _bb
|
||||
export let onSelect = items => {}
|
||||
|
|
@ -34,7 +34,9 @@
|
|||
|
||||
onMount(() => {
|
||||
_bb.setContext("BBMD:list:props", { singleSelection: true })
|
||||
_bb.setContext("BBMD:list:addItem", i => (listItems = [...listItems, i]))
|
||||
|
||||
//May not be necessary as state binds from value below. Commenting for now.
|
||||
// _bb.setContext("BBMD:list:addItem", i => (listItems = [...listItems, i]))
|
||||
|
||||
selectedItemsStore = createItemsStore(() => {
|
||||
const v =
|
||||
|
|
@ -66,9 +68,9 @@
|
|||
$: modifiers = { variant, disabled, required, noLabel: !label }
|
||||
$: props = { modifiers }
|
||||
$: selectClass = cb.build({ props })
|
||||
$: if (value !== undefined && instance && listItems.length > 0) {
|
||||
instance.selectedIndex = listItems.findIndex(i => i.value === value)
|
||||
}
|
||||
// $: if (value !== undefined && instance && listItems.length > 0) {
|
||||
// instance.selectedIndex = listItems.findIndex(i => i.value === value)
|
||||
// }
|
||||
</script>
|
||||
|
||||
<div bind:this={select} id={_helperId} class={selectClass}>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
export let _bb
|
||||
export let onChange = value => {}
|
||||
export let variant = "continuous" //or discrete
|
||||
export let variant = "continuous"
|
||||
export let showTicks = false
|
||||
export let min = 0
|
||||
export let max = 100
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
onMount(() => {
|
||||
let s = MDCSlider.attachTo(slider)
|
||||
instance = new MDCSlider(slider)
|
||||
return () => instance.destroy()
|
||||
})
|
||||
|
||||
|
|
@ -48,17 +48,22 @@
|
|||
|
||||
<div
|
||||
bind:this={slider}
|
||||
class="mdc-slider mdc-slider--discrete"
|
||||
class={sliderCls}
|
||||
tabindex="0"
|
||||
role="slider"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
aria-valuenow="0"
|
||||
aria-label="Select Value"
|
||||
data-step={step}
|
||||
aria-valuemin={min}
|
||||
aria-valuemax={max}
|
||||
aria-valuenow={value}
|
||||
aria-label={label}
|
||||
aria-disabled={disabled}
|
||||
on:MDCSlider:input={e => handleChange(e.detail.value)}
|
||||
on:MDCSlider:change={e => handleChange(e.detail.value)}>
|
||||
<div class="mdc-slider__track-container">
|
||||
<div class="mdc-slider__track" />
|
||||
{#if displayMarkers}
|
||||
<div class="mdc-slider__track-marker-container" />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="mdc-slider__thumb-container">
|
||||
<div class="mdc-slider__pin">
|
||||
|
|
|
|||
|
|
@ -45,8 +45,6 @@
|
|||
export let useIconButton = false
|
||||
export let iconButtonClick = () => {}
|
||||
export let textarea = false
|
||||
export let rows = 4
|
||||
export let cols = 40
|
||||
export let validation = false
|
||||
export let persistent = false
|
||||
export let value
|
||||
|
|
@ -88,8 +86,6 @@
|
|||
const blockClasses = cb.build({ props })
|
||||
const inputClasses = cb.elem("input")
|
||||
|
||||
let renderMaxLength = !!maxLength ? `0 / ${maxLength}` : "0"
|
||||
|
||||
function focus(event) {
|
||||
tfInstance.focus()
|
||||
}
|
||||
|
|
@ -111,19 +107,21 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
|
|||
<div class="textfield-container" class:fullwidth>
|
||||
<div bind:this={tf} bind:clientHeight={tfHeight} class={blockClasses}>
|
||||
{#if textarea}
|
||||
<CharacterCounter />
|
||||
{#if maxLength}
|
||||
<CharacterCounter />
|
||||
{/if}
|
||||
<textarea
|
||||
{id}
|
||||
class={inputClasses}
|
||||
class:fullwidth
|
||||
{disabled}
|
||||
{rows}
|
||||
{cols}
|
||||
rows="5"
|
||||
cols="70"
|
||||
{required}
|
||||
{placeholder}
|
||||
{minLength}
|
||||
maxLength={safeMaxLength}
|
||||
{value}
|
||||
{minLength}
|
||||
maxlength={safeMaxLength}
|
||||
on:change={changed} />
|
||||
{:else}
|
||||
{#if renderLeadingIcon}
|
||||
|
|
@ -134,7 +132,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
|
|||
context="mdc-text-field__icon mdc-text-field__icon--leading"
|
||||
onClick={iconButtonClick} />
|
||||
{:else}
|
||||
<Icon context="text-field" {icon} />
|
||||
<Icon context="text-field__icon" {icon} />
|
||||
{/if}
|
||||
{/if}
|
||||
<input
|
||||
|
|
@ -143,9 +141,9 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
|
|||
class={inputClasses}
|
||||
{type}
|
||||
{required}
|
||||
placeholder={!!label && fullwidth ? label : placeholder}
|
||||
{minLength}
|
||||
maxLength={safeMaxLength}
|
||||
placeholder={!!label && fullwidth ? label : placeholder}
|
||||
{value}
|
||||
aria-label={`Textfield ${variant}`}
|
||||
on:focus={focus}
|
||||
|
|
@ -158,7 +156,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
|
|||
context="mdc-text-field__icon mdc-text-field__icon--trailing"
|
||||
onClick={iconButtonClick} />
|
||||
{:else}
|
||||
<Icon context="text-field" {icon} />
|
||||
<Icon context="text-field__icon" {icon} />
|
||||
{/if}
|
||||
{/if}
|
||||
{#if variant !== 'outlined'}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</script>
|
||||
|
||||
<span
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
|
||||
style={`margin: ${verticalMargin}px ${horizontalMargin}px;`}
|
||||
class="mdc-typography--body1">
|
||||
{text}
|
||||
</span>
|
||||
|
|
|
|||
40
yarn.lock
40
yarn.lock
|
|
@ -1363,7 +1363,7 @@ caseless@~0.12.0:
|
|||
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
|
||||
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
|
||||
|
||||
chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
|
||||
chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.2:
|
||||
version "2.4.2"
|
||||
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
|
||||
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
|
||||
|
|
@ -3394,11 +3394,6 @@ mem@^4.0.0:
|
|||
mimic-fn "^2.0.0"
|
||||
p-is-promise "^2.0.0"
|
||||
|
||||
memorystream@^0.3.1:
|
||||
version "0.3.1"
|
||||
resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
|
||||
integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
|
||||
|
||||
meow@^3.3.0:
|
||||
version "3.7.0"
|
||||
resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
|
||||
|
|
@ -3778,21 +3773,6 @@ npm-registry-fetch@^4.0.0:
|
|||
npm-package-arg "^6.1.0"
|
||||
safe-buffer "^5.2.0"
|
||||
|
||||
npm-run-all@^4.1.5:
|
||||
version "4.1.5"
|
||||
resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
|
||||
integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
|
||||
dependencies:
|
||||
ansi-styles "^3.2.1"
|
||||
chalk "^2.4.1"
|
||||
cross-spawn "^6.0.5"
|
||||
memorystream "^0.3.1"
|
||||
minimatch "^3.0.4"
|
||||
pidtree "^0.3.0"
|
||||
read-pkg "^3.0.0"
|
||||
shell-quote "^1.6.1"
|
||||
string.prototype.padend "^3.0.0"
|
||||
|
||||
npm-run-path@^2.0.0:
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
|
||||
|
|
@ -4194,11 +4174,6 @@ performance-now@^2.1.0:
|
|||
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
|
||||
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
|
||||
|
||||
pidtree@^0.3.0:
|
||||
version "0.3.1"
|
||||
resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
|
||||
integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
|
||||
|
||||
pify@^2.0.0, pify@^2.3.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
|
||||
|
|
@ -4713,11 +4688,6 @@ shebang-regex@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
|
||||
integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
|
||||
|
||||
shell-quote@^1.6.1:
|
||||
version "1.7.2"
|
||||
resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
|
||||
integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
|
||||
|
||||
signal-exit@^3.0.0, signal-exit@^3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
|
||||
|
|
@ -4961,14 +4931,6 @@ string-width@^4.1.0:
|
|||
is-fullwidth-code-point "^3.0.0"
|
||||
strip-ansi "^6.0.0"
|
||||
|
||||
string.prototype.padend@^3.0.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz#dc08f57a8010dc5c153550318f67e13adbb72ac3"
|
||||
integrity sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==
|
||||
dependencies:
|
||||
define-properties "^1.1.3"
|
||||
es-abstract "^1.17.0-next.1"
|
||||
|
||||
string.prototype.trimleft@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"
|
||||
|
|
|
|||
Loading…
Reference in New Issue