diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 0f776a5255..537c79e4c8 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -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" } diff --git a/packages/builder/src/components/userInterface/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/CurrentItemPreview.svelte index 1edca1c8d6..6148a51457 100644 --- a/packages/builder/src/components/userInterface/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/CurrentItemPreview.svelte @@ -89,7 +89,7 @@ ${styles || ''} .pos-${selectedComponentId} { - border: 2px solid #0055ff; + border: 2px solid #0055ff; } body, html { diff --git a/packages/materialdesign-components/.gitignore b/packages/materialdesign-components/.gitignore index f29fd6f0b2..3693c6588b 100644 --- a/packages/materialdesign-components/.gitignore +++ b/packages/materialdesign-components/.gitignore @@ -2,5 +2,5 @@ node_modules yarn.lock package-lock.json -dist/index.js +dist/* public/build \ No newline at end of file diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json index 3581e7b369..f2a6db42a6 100644 --- a/packages/materialdesign-components/components.json +++ b/packages/materialdesign-components/components.json @@ -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" } } }, @@ -69,10 +72,9 @@ "text": "string", "secondaryText": "string", "leadingIcon": "string", - "trailingIcon": "string", - "selected": "bool", + "trailingIcon": "string", "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" } } }, @@ -183,8 +185,7 @@ "type": "options", "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": [] @@ -322,8 +328,7 @@ "onClick": "event", "id": "string", "label": "string", - "name": "string", - "checked": "bool", + "name": "string", "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", + "textarea": "bool", "persistent": "bool" }, "tags": [] diff --git a/packages/materialdesign-components/rollup.config.js b/packages/materialdesign-components/rollup.config.js index a11693cbf0..df89ae0ddd 100644 --- a/packages/materialdesign-components/rollup.config.js +++ b/packages/materialdesign-components/rollup.config.js @@ -26,7 +26,7 @@ export default { file: "dist/index.js", format: "esm", name: "budibaseStandardComponents", - sourcemap: "inline", + sourcemap: true, }, ], plugins: [ diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte index 3d806d2ac8..3bc101e8f0 100644 --- a/packages/materialdesign-components/src/Button/Button.svelte +++ b/packages/materialdesign-components/src/Button/Button.svelte @@ -55,11 +55,11 @@ {disabled} on:click={clicked}> {#if renderLeadingIcon} - + {/if} {text} {#if renderTrailingIcon} - + {/if} {/if} diff --git a/packages/materialdesign-components/src/Card/Card.svelte b/packages/materialdesign-components/src/Card/Card.svelte index 125013a75a..6829e937c8 100644 --- a/packages/materialdesign-components/src/Card/Card.svelte +++ b/packages/materialdesign-components/src/Card/Card.svelte @@ -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) -
+
+ + diff --git a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte index 205efd400a..ad0a117376 100644 --- a/packages/materialdesign-components/src/Checkbox/Checkbox.svelte +++ b/packages/materialdesign-components/src/Checkbox/Checkbox.svelte @@ -94,27 +94,29 @@ {#if context !== 'list-item'} - -
- -
- - - -
+
+ +
+ +
+ + + +
+
+
-
-
- + +
{:else}
@@ -136,3 +138,9 @@
{/if} + + diff --git a/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte b/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte index 89449185f2..4dce91a40d 100644 --- a/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte +++ b/packages/materialdesign-components/src/Checkbox/CheckboxGroup.svelte @@ -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 @@
-
-
-
+
diff --git a/packages/materialdesign-components/src/Common/Formfield.svelte b/packages/materialdesign-components/src/Common/Formfield.svelte index 6ca9db9aba..855e59ac88 100644 --- a/packages/materialdesign-components/src/Common/Formfield.svelte +++ b/packages/materialdesign-components/src/Common/Formfield.svelte @@ -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 @@
+ + diff --git a/packages/materialdesign-components/src/Common/Icon.svelte b/packages/materialdesign-components/src/Common/Icon.svelte index 7a825f8cca..39dc1f58ab 100644 --- a/packages/materialdesign-components/src/Common/Icon.svelte +++ b/packages/materialdesign-components/src/Common/Icon.svelte @@ -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" {icon} diff --git a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte index f9db97a107..32773d8527 100644 --- a/packages/materialdesign-components/src/DatePicker/DatePicker.svelte +++ b/packages/materialdesign-components/src/DatePicker/DatePicker.svelte @@ -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)
@@ -107,10 +111,7 @@ iconButtonClick={openCalendar} icon="calendar_today" /> -
+
@@ -155,6 +156,7 @@ width: 330px; height: auto; padding: 5px; + margin-top: 70px; } .month-picker { diff --git a/packages/materialdesign-components/src/List/ListItem.svelte b/packages/materialdesign-components/src/List/ListItem.svelte index fc42815d45..11620dd8f7 100644 --- a/packages/materialdesign-components/src/List/ListItem.svelte +++ b/packages/materialdesign-components/src/List/ListItem.svelte @@ -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"
  • {#if leadingIcon} - {#if listProps} - {#if listProps.inputElement === 'radiobutton'} + {#if hasInputElement} + {#if listProps.inputElement === 'Radiobutton'} - {:else if listProps.inputElement === 'checkbox'} + {:else if listProps.inputElement === 'Checkbox'} {/if} - {:else if trailingIcon} + {:else if !!trailingIcon} {/if}
    • diff --git a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte index 64ea7b980e..917f5bff1c 100644 --- a/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte +++ b/packages/materialdesign-components/src/Radiobutton/Radiobutton.svelte @@ -87,7 +87,7 @@ class={cb.elem`native-control`} type="radio" {name} - {checked} + checked={isChecked} disabled={isDisabled} on:click={handleOnClick} />
    @@ -104,7 +104,7 @@ class={cb.elem`native-control`} type="radio" {name} - {checked} + checked={isChecked} disabled={isDisabled} on:click={handleOnClick} />
    diff --git a/packages/materialdesign-components/src/Select/Select.svelte b/packages/materialdesign-components/src/Select/Select.svelte index bfea68ead4..b2c710abb4 100644 --- a/packages/materialdesign-components/src/Select/Select.svelte +++ b/packages/materialdesign-components/src/Select/Select.svelte @@ -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) + // }
    diff --git a/packages/materialdesign-components/src/Slider/Slider.svelte b/packages/materialdesign-components/src/Slider/Slider.svelte index e45cfda2b4..d98ed72384 100644 --- a/packages/materialdesign-components/src/Slider/Slider.svelte +++ b/packages/materialdesign-components/src/Slider/Slider.svelte @@ -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 @@
    handleChange(e.detail.value)} on:MDCSlider:change={e => handleChange(e.detail.value)}>
    + {#if displayMarkers} +
    + {/if}
    diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte index 046c3ebc6e..b7f126c558 100644 --- a/packages/materialdesign-components/src/Textfield/Textfield.svelte +++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte @@ -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
    {#if textarea} - + {#if maxLength} + + {/if}