Merge branch 'master' into bugfix/change-record-and-index

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"
     }

packages/materialdesign-components/.gitignore

@@ -2,5 +2,5 @@
 node_modules
 yarn.lock
 package-lock.json
-dist/index.js
+dist/*
 public/build

packages/materialdesign-components/components.json

@@ -14,9 +14,7 @@
     "name": "Body1",
     "description": "Sets the font properties as Roboto Body 1",
     "props": {
-      "text": "string",
+      "text": "string"
-      "verticalMargin": "number",
-      "horizontalMargin": "number"
     }, 
     "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,6 +277,9 @@
     "tags": []
   },
   "IconButton": {
+    "name": "IconButton",
+    "description": "An icon button component",
+    "props": {
       "onClick": "event",
       "disabled": "bool",
       "href": "string",
@@ -284,6 +288,7 @@
         "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": []

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: [

packages/materialdesign-components/src/Button/Button.svelte

@@ -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}

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)
 </script>
 
-<div
+<div bind:this={card} class={`bbmd-card ${cardClass}`} />
-  bind:this={card}
+
-  style={`width: ${safeWidth}; height: ${safeHeight}`}
+<style>
-  class={cardClass} />
+  .bbmd-card {
+    width: 350px;
+    height: auto;
+  }
+</style>

packages/materialdesign-components/src/Checkbox/Checkbox.svelte

@@ -94,6 +94,7 @@
 <!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? -->
 
 {#if context !== 'list-item'}
+  <div class="bbmd-checkbox">
     <Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}>
       <div bind:this={checkbox} class={blockClass}>
         <input
@@ -101,7 +102,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">
@@ -115,6 +116,7 @@
         <div class={cb.elem`ripple`} />
       </div>
     </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>

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 @@
   <div class="checkbox-group__label">
     <Label text={label} bold />
   </div>
-  <div class={`checkbox-group__boxes ${orientation}`}>
+  <div bind:this={checkItems} class={`checkbox-group__boxes ${orientation}`} />
-    <div bind:this={checkItems} class:fullwidth />
-  </div>
 </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>

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 @@
   <slot />
   <label for={id}>{label}</label>
 </div>
+
+<style>
+  .bbmd-form-field {
+    width: fit-content;
+  }
+</style>

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"
 </script>
 
 <i class={cls}>{icon}</i>

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")
+  $: selectedDate = format(safeDate, "dd/MM/yyyy")
-  $: dayOfSelectedDate = getDate(date)
+  $: 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
+  <div bind:this={menu} class="mdc-menu mdc-menu-surface bbmd-menu">
-    bind:this={menu}
-    class="mdc-menu mdc-menu-surface bbmd-menu"
-    style={`margin-top: 70px`}>
     <div class="calendar-container">
       <div class="month-picker">
         <div>
@@ -155,6 +156,7 @@
     width: 330px;
     height: auto;
     padding: 5px;
+    margin-top: 70px;
   }
 
   .month-picker {

packages/materialdesign-components/src/List/ListItem.svelte

@@ -50,12 +50,13 @@
       role = "menuitem"
     }
 
-    if (_addItem) {
+    // TODO: Causing first element to be automatically selected. Commenting for now.
-      _addItem(itemData())
+    // 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}
+  on:click={handleChange}
-  data-value={value}
+  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 hasInputElement}
-    {#if listProps.inputElement === 'radiobutton'}
+    {#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>

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} />
       <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`}>

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) {
+  // $: if (value !== undefined && instance && listItems.length > 0) {
-    instance.selectedIndex = listItems.findIndex(i => i.value === value)
+  //   instance.selectedIndex = listItems.findIndex(i => i.value === value)
-  }
+  // }
 </script>
 
 <div bind:this={select} id={_helperId} class={selectClass}>

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 @@
 
 <div
   bind:this={slider}
-  class="mdc-slider mdc-slider--discrete"
+  class={sliderCls}
   tabindex="0"
   role="slider"
-  aria-valuemin="0"
+  data-step={step}
-  aria-valuemax="100"
+  aria-valuemin={min}
-  aria-valuenow="0"
+  aria-valuemax={max}
-  aria-label="Select Value"
+  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">

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
 <div class="textfield-container" class:fullwidth>
   <div bind:this={tf} bind:clientHeight={tfHeight} class={blockClasses}>
     {#if textarea}
+      {#if maxLength}
         <CharacterCounter />
+      {/if}
       <textarea
         {id}
         class={inputClasses}
         class:fullwidth
         {disabled}
-        {rows}
+        rows="5"
-        {cols}
+        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'}

packages/materialdesign-components/src/Typography/Body1.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <span
-  style={`margin: ${verticalMargin}px ${horizontalMargin}px`}
+  style={`margin: ${verticalMargin}px ${horizontalMargin}px;`}
   class="mdc-typography--body1">
   {text}
 </span>